*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#08080c;--bg-card:#111118;--bg-hover:#1a1a24;--bg-input:#0d0d14;--border:#1e1e2e;--border-focus:#6c5ce7;--text:#e8e8ef;--text-muted:#6b6b80;--text-dim:#44445a;--accent:#6c5ce7;--accent-glow:rgba(108,92,231,.3);--accent-soft:rgba(108,92,231,.12);--green:#00d68f;--orange:#ff9f43;--red:#ff6b6b;--font:"Outfit",sans-serif;--mono:"JetBrains Mono",monospace;--radius:12px;--radius-sm:8px}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}.home{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden}.home:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;animation:pulse 4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.5;transform:translate(-50%,-50%) scale(1.1)}}.logo{font-size:4rem;margin-bottom:.5rem;z-index:1}.title{font-size:2.2rem;font-weight:700;letter-spacing:-.03em;z-index:1;background:linear-gradient(135deg,var(--text) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{font-size:1rem;color:var(--text-muted);margin-top:.5rem;font-weight:300;z-index:1}.home-card{z-index:1;margin-top:3rem;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2rem;width:100%;max-width:420px;display:flex;flex-direction:column;gap:1rem}.home-card label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:500}.input-row{display:flex;gap:.5rem}input[type=text],input[type=password]{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem;color:var(--text);font-family:var(--mono);font-size:1rem;outline:none;transition:border-color .2s}input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-soft)}.btn{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:.75rem 1.5rem;font-family:var(--font);font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.btn:hover{filter:brightness(1.15);transform:translateY(-1px)}.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-muted)}.btn-ghost:hover{border-color:var(--accent);color:var(--text)}.or-divider{text-align:center;color:var(--text-dim);font-size:.8rem;position:relative}.or-divider:before,.or-divider:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:var(--border)}.or-divider:before{left:0}.or-divider:after{right:0}.room-container{height:100vh;display:flex;flex-direction:column;max-width:800px;margin:0 auto}.room-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0}.room-id{font-family:var(--mono);font-size:.85rem;color:var(--accent);background:var(--accent-soft);padding:.25rem .75rem;border-radius:20px;cursor:pointer;transition:background .2s}.room-id:hover{background:var(--accent-glow)}.room-meta{display:flex;align-items:center;gap:1rem;font-size:.8rem;color:var(--text-muted)}.member-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:4px}.messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem;scroll-behavior:smooth}.messages::-webkit-scrollbar{width:4px}.messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.msg{max-width:85%;padding:.6rem 1rem;border-radius:var(--radius);font-size:.9rem;line-height:1.5;word-break:break-word;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.msg-self{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}.msg-other{align-self:flex-start;background:var(--bg-card);border:1px solid var(--border);border-bottom-left-radius:4px}.msg-sender{font-size:.7rem;color:var(--text-dim);margin-bottom:2px;font-weight:500}.msg-self .msg-sender{color:#fff9}.msg-time{font-size:.65rem;color:var(--text-dim);margin-top:2px;text-align:right}.msg-self .msg-time{color:#ffffff80}.msg-file{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:border-color .2s;max-width:85%;animation:fadeIn .2s ease}.msg-file:hover{border-color:var(--accent)}.file-icon{font-size:1.5rem;flex-shrink:0}.file-info{flex:1;min-width:0}.file-name{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.7rem;color:var(--text-muted)}.msg-system{align-self:center;color:var(--text-dim);font-size:.75rem;padding:.25rem .75rem;background:var(--accent-soft);border-radius:20px}.input-area{padding:.75rem 1rem;border-top:1px solid var(--border);display:flex;gap:.5rem;align-items:flex-end;flex-shrink:0}.input-area textarea{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .8rem;color:var(--text);font-family:var(--font);font-size:.9rem;resize:none;outline:none;min-height:40px;max-height:120px;line-height:1.4;transition:border-color .2s}.input-area textarea:focus{border-color:var(--border-focus)}.icon-btn{background:none;border:1px solid var(--border);color:var(--text-muted);width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;transition:all .2s;flex-shrink:0}.icon-btn:hover{border-color:var(--accent);color:var(--accent)}.send-btn{background:var(--accent);border:none;color:#fff}.send-btn:hover{filter:brightness(1.15)}.drop-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#6c5ce726;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;pointer-events:none}.drop-text{font-size:1.5rem;font-weight:600;color:var(--accent);padding:2rem 3rem;border:2px dashed var(--accent);border-radius:16px}.toast{position:fixed;bottom:5rem;left:50%;transform:translate(-50%);background:var(--bg-card);border:1px solid var(--border);padding:.6rem 1.2rem;border-radius:20px;font-size:.8rem;color:var(--green);z-index:200;animation:toastIn .3s ease,toastOut .3s ease 1.7s forwards}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}}@keyframes toastOut{to{opacity:0;transform:translate(-50%) translateY(-10px)}}@media (max-width:600px){.title{font-size:1.6rem}.home-card{padding:1.5rem;margin-top:2rem}.msg{max-width:90%}}