:root{--tw-bg-opacity: 1;--bg: #0a0a0b;--panel: #121214;--panel-muted: #17181b;--line: #25272d;--text: #f3f4f6;--muted: #9aa0ab;--accent: rgb(255 107 53 / var(--tw-bg-opacity));--accent-soft: rgb(255 107 53 / .18);--success: #34d399}*{box-sizing:border-box}html,body{height:100%}body{margin:0;min-height:100svh;min-height:100dvh;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";color:var(--text);background:radial-gradient(circle at 15% 0%,#1a1b1f 0%,#111216 38%,var(--bg) 100%)}body.auth-locked{overflow:hidden}button,input{font:inherit}.app-shell{display:grid;grid-template-columns:82px 1fr;gap:12px;min-height:100svh;min-height:100dvh;padding:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}body.auth-locked .app-shell{filter:blur(5px);opacity:.35;pointer-events:none;-webkit-user-select:none;user-select:none}.server-rail{border-radius:18px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 0}.server-logo,.server-icon{width:48px;height:48px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;font-weight:700;color:var(--text);background:var(--panel-muted)}.server-logo{font-family:inherit;color:var(--accent);text-align:center;line-height:.95;font-size:.72rem}.server-icon{cursor:pointer}.server-icon:nth-of-type(1){background:#1f2937;color:#f9fafb}.server-icon:nth-of-type(2){background:#0f766e;color:#ecfeff}.server-icon:nth-of-type(3){background:#7c2d12;color:#fff7ed}.server-icon:nth-of-type(4){background:#3730a3;color:#eef2ff}.server-icon:nth-of-type(5){background:#3f3f46;color:#f4f4f5}.server-icon.active{color:#111;background:var(--accent);border-color:transparent}.workspace{display:flex;flex-direction:column;gap:10px}.workspace-header{padding:8px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}.workspace-header-row{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:8px;align-items:center}.search-box{width:100%;border-radius:10px;padding:10px 12px;color:var(--text);background:var(--panel-muted);border:1px solid var(--line)}.session-chip{display:inline-grid;grid-template-columns:28px auto 36px 36px;align-items:center;gap:8px;background:#1a1c20;border:1px solid var(--line);border-radius:12px;padding:6px}.session-avatar{width:28px;height:28px;border-radius:9px;object-fit:cover;background:#23252b;border:1px solid #343845}.session-meta{display:grid;gap:2px}.session-name{font-size:.74rem;font-weight:700;line-height:1}.session-handle{font-size:.66rem;color:#c3c7d1;line-height:1}.session-chip .icon-btn{width:34px;min-height:30px}.auth-status{font-size:.68rem;color:var(--muted);line-height:1;white-space:nowrap}.display-name-input{border-radius:9px;min-height:40px;padding:8px 10px;color:var(--text);background:#1c1d22;border:1px solid var(--line);width:100%}.auth-gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 12% 10%,rgba(255,107,53,.18),transparent 45%),radial-gradient(circle at 88% 84%,rgba(255,107,53,.12),transparent 48%),#08090ceb}body.auth-locked .auth-gate{display:flex}.auth-gate-shell{width:min(720px,100%);border:1px solid #2a2e36;border-radius:18px;background:linear-gradient(165deg,#15161bf7,#0c0d10f5);box-shadow:0 22px 50px #00000059;padding:clamp(18px,3vw,28px)}.auth-step{display:none;gap:14px;animation:step-fade .22s ease}.auth-step.is-active{display:grid}.auth-kicker{margin:0;color:#ffb498;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}.auth-step h1,.auth-step h2{margin:0;font-size:clamp(1.3rem,3vw,1.9rem)}.auth-subtitle{margin:0;color:var(--muted);max-width:56ch}.auth-actions,.auth-login-grid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:10px}.auth-login-grid input:nth-child(1),.auth-login-grid input:nth-child(2){grid-column:1 / -1}.auth-btn{border:1px solid var(--line);border-radius:12px;background:#1b1d22;color:var(--text);min-height:42px;padding:10px 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:600}.auth-btn i{font-size:1rem}.auth-btn:disabled{opacity:.45;cursor:not-allowed}.auth-btn-primary{background:var(--accent);color:#111;border-color:transparent}.auth-form-error{margin:2px 0 0;min-height:20px;color:#ffb199;font-size:.78rem}.profile-preview-wrap{display:grid;justify-items:start;gap:10px}.profile-preview{width:88px;height:88px;border-radius:16px;object-fit:cover;border:1px solid #3b404d;background:#1e222a}.profile-fields{display:grid;gap:8px}.profile-edit-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:110;display:none;align-items:center;justify-content:center;padding:16px;background:#080a0ec7}body.profile-edit-open .profile-edit-overlay{display:flex}.profile-edit-card{width:min(520px,100%);border:1px solid #2c313b;border-radius:16px;background:linear-gradient(165deg,#14161bfa,#0c0d11f5);box-shadow:0 20px 40px #00000059;padding:18px;display:grid;gap:12px}.profile-edit-head{display:flex;align-items:center;justify-content:space-between}.profile-edit-head h3{margin:0;font-size:1.05rem}@keyframes step-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.workspace-grid{display:grid;grid-template-columns:minmax(250px,320px) 1fr;gap:10px;flex:1;min-height:0}.channel-pane,.chat-pane{border-radius:16px;background:var(--panel);border:1px solid var(--line)}.channel-pane{padding:14px;display:flex;flex-direction:column;gap:16px}.channel-pane h2{margin:0;font-size:.9rem;letter-spacing:.02em}.channel-list{display:flex;flex-direction:column;gap:8px}.friends-tools{display:grid;gap:8px;margin-bottom:4px}.friend-add-row{display:grid;grid-template-columns:1fr 36px;gap:6px}.friend-add-row input{border-radius:9px;min-height:34px;padding:7px 9px;color:var(--text);background:#1c1d22;border:1px solid var(--line)}.friends-list{display:grid;gap:6px;max-height:140px;overflow:auto}.friend-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:9px;border:1px solid #2c3039;background:#17191d;padding:6px 8px;cursor:pointer;color:var(--text)}.friend-item.is-active{border-color:#ff6b358c;background:#ff6b351f}.friend-item-main{display:grid;gap:2px}.friend-name{font-size:.77rem;font-weight:600}.friend-handle,.friend-presence{font-size:.68rem;color:var(--muted)}.friend-presence.is-online{color:var(--success)}.chat-header-actions{display:inline-flex;align-items:center;gap:8px}.incoming-call-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:115;display:none;align-items:center;justify-content:center;background:#080a0ed1;padding:16px}body.incoming-call .incoming-call-overlay{display:flex}.incoming-call-card{width:min(420px,100%);border-radius:16px;border:1px solid #2e333f;background:linear-gradient(165deg,#17191efa,#0e0f13f2);padding:18px;display:grid;gap:10px;box-shadow:0 20px 48px #0006;animation:incoming-pulse 1.2s ease-in-out infinite}.incoming-call-card h3{margin:0;font-size:1.12rem}.incoming-call-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}@keyframes incoming-pulse{0%{box-shadow:0 0 #ff6b3538}to{box-shadow:0 0 0 14px #ff6b3500}}.mini-call-panel{display:none;border-radius:10px;border:1px solid var(--line);background:#14161a;padding:8px;gap:8px}.mini-call-panel.is-active{display:grid}.mini-call-title{font-size:.78rem;font-weight:600;color:var(--muted)}.mini-video-stack{display:none;position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#0b0d10;aspect-ratio:16 / 10}.mini-video-stack.is-visible{display:block}#miniRemoteVideo{width:100%;height:100%;object-fit:cover;background:#0b0d10}#miniLocalVideo{position:absolute;right:8px;bottom:8px;width:32%;max-width:98px;border-radius:6px;border:1px solid rgba(255,255,255,.36);object-fit:cover;background:#0f0f0fbf}.mini-voice-state{display:none;border-radius:8px;border:1px solid rgb(255 107 53 / .35);background:var(--accent-soft);color:#ffccb9;font-size:.76rem;padding:8px}.mini-voice-state.is-visible{display:block}.channel-item{border:none;text-align:left;border-radius:10px;padding:9px 11px;background:var(--panel-muted);color:var(--text);cursor:pointer;border:1px solid var(--line)}.channel-item.active{color:#101114;background:var(--accent);border-color:transparent}.call-controls{margin-top:auto;border-radius:12px;padding:10px;background:var(--panel-muted);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}.controls-grid{display:grid;grid-template-columns:repeat(4,42px);gap:8px;justify-content:start}.call-id-row{grid-column:1 / -1;display:grid;grid-template-columns:1fr 44px;gap:8px}.call-controls h3{margin:0;font-size:.85rem}.permission-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.perm-chip{display:inline-flex;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--line);background:#1d1f24;color:var(--muted);min-height:28px;padding:4px 8px;font-size:.74rem;font-weight:600}.perm-granted{color:#7ff0be;border-color:#2f684f;background:#11261d}.perm-denied{color:#ff9f7f;border-color:#6a3b30;background:#2a1814}.perm-prompt,.perm-unknown,.perm-unavailable{color:#ffd39b;border-color:#6b5030;background:#2a2116}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;min-height:36px;padding:0}.icon-btn i{font-size:1.1rem;line-height:1}.call-controls button,.call-controls input,.composer button,.composer input{width:auto;border-radius:9px;padding:8px 10px;color:var(--text);background:#1c1d22;border:1px solid var(--line)}.call-id-row .icon-btn{width:44px}.call-controls input{min-height:36px}.call-controls input::placeholder,.composer input::placeholder,.search-box::placeholder{color:#7d8390}.call-controls button,.composer button{cursor:pointer;font-weight:600}.call-controls button:disabled,.composer button:disabled,.composer input:disabled{cursor:not-allowed;opacity:.35}.chat-pane{min-height:0;padding:14px;display:grid;grid-template-rows:auto 1fr auto auto;gap:10px}.chat-header{display:flex;align-items:center;justify-content:space-between}.chat-header h1{margin:0;font-size:1rem;font-family:inherit}.presence-dot{color:var(--success);font-weight:700;font-size:.75rem}.messages-area{min-height:0;height:100%;overflow-y:auto;border-radius:12px;padding:10px;background:var(--panel-muted);border:1px solid var(--line)}.messages-area p{margin:0}.message-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;align-items:flex-start}.message-row.local{align-items:flex-end}.message-bubble{padding:8px 10px;border-radius:10px;width:fit-content;max-width:90%;background:#1c1d22;border:1px solid var(--line)}.message-row.local .message-bubble{background:var(--accent-soft);border-color:#ff6b3559}.message-bubble img{display:block;width:100%;max-width:min(320px,72vw);border-radius:8px}.message-meta{font-size:.7rem;color:var(--muted)}.composer{display:grid;grid-template-columns:1fr auto auto;gap:8px}.composer button{width:auto;padding-inline:10px}.status-area{min-height:48px;max-height:calc(6.75em + 16px);border-radius:10px;padding:8px 10px;font-size:.78rem;line-height:1.35;color:var(--muted);background:var(--panel-muted);border:1px solid var(--line);white-space:pre-wrap;overflow-y:auto;scrollbar-gutter:stable}.call-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:none;background:#101418;z-index:90}#remoteVideo{width:100%;height:100%;object-fit:cover;background:#0f1318}#webcamVideo{position:absolute;right:24px;bottom:24px;width:min(30vw,280px);aspect-ratio:16 / 10;object-fit:cover;border-radius:12px;border:2px solid rgba(255,255,255,.45);background:#101418b3}body.call-active .call-overlay{display:block}body.call-active .call-controls{position:fixed;left:50%;top:16px;transform:translate(-50%);z-index:120;width:min(92vw,760px);align-items:center;background:#0f172ab8;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}body.call-active .controls-grid{grid-template-columns:repeat(8,44px);justify-content:center;align-items:center}body.call-active .call-id-row{grid-column:1 / -1;grid-template-columns:1fr 44px}.call-controls button[aria-pressed=true]{background:var(--accent-soft);border-color:#ff6b356b;color:#ffd8c9}#hangupButton{color:#b42318}body.call-active .call-controls h3,body.call-active .permission-row{display:none}body.call-active .call-controls button,body.call-active .call-controls input{color:#f6f7f8;background:#121214b8;box-shadow:none}.voice-overlay{position:fixed;right:16px;bottom:16px;z-index:110;width:min(340px,calc(100vw - 24px));padding:12px;border-radius:14px;background:#0f172ad1;border:1px solid rgba(255,255,255,.2);color:#e8eefc;display:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.voice-overlay p{margin:8px 0 0;font-size:.82rem;line-height:1.4}.voice-badge{display:inline-block;border-radius:999px;padding:4px 9px;font-size:.72rem;font-weight:700;background:#ff6b353d;border:1px solid rgba(255,161,126,.56)}body.voice-active .voice-overlay{display:block}@media (max-width: 1000px){.workspace-header-row{grid-template-columns:1fr}.session-chip{justify-self:start}.workspace-grid{grid-template-columns:1fr}.channel-pane{order:2}.chat-pane{order:1}}@media (max-width: 720px){.app-shell{grid-template-columns:1fr;padding:12px}.server-rail{flex-direction:row;justify-content:center;padding:10px;border-radius:20px}.server-logo,.server-icon{width:40px;height:40px;border-radius:12px}body.call-active .call-controls{top:8px;width:calc(100vw - 16px)}.controls-grid{grid-template-columns:repeat(4,42px);justify-content:start}.session-chip{grid-template-columns:24px auto 34px 34px;width:100%}.session-avatar{width:24px;height:24px}.composer{grid-template-columns:1fr auto auto}.auth-actions,.auth-login-grid{grid-template-columns:1fr}.call-id-row{grid-template-columns:1fr 40px}body.call-active .controls-grid{grid-template-columns:repeat(4,42px);justify-content:center}#webcamVideo{width:38vw;right:12px;bottom:12px;border-radius:12px}}