: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}.community-rail-list{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;overflow-y:auto;padding:0 6px}.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;cursor:pointer}.server-icon{cursor:pointer}.server-icon-add{background:#252830;color:#f6f7fb}.server-icon.community-chip{border-radius:16px;background:linear-gradient(165deg,#2c313c,#1a1d24);border-color:#343948;font-size:.78rem}.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}body.community-modal-open,body.sidebar-actions-modal-open{overflow:hidden}.community-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:118;display:none;align-items:center;justify-content:center;background:#080a0ed1;padding:16px}body.community-modal-open #communityModalOverlay,body.sidebar-actions-modal-open #sidebarActionsModalOverlay{display:flex}.community-modal-card{width:min(560px,100%);border-radius:16px;border:1px solid #2e333f;background:linear-gradient(165deg,#17191efa,#0e0f13f5);padding:16px;display:grid;gap:12px;box-shadow:0 20px 48px #0000006b}.community-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.community-modal-block{display:grid;gap:8px;border:1px solid var(--line);background:#171a20;border-radius:12px;padding:12px}.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}body.community-members-visible .workspace-grid{grid-template-columns:minmax(250px,320px) 1fr minmax(220px,280px)}.channel-pane,.chat-pane,.community-members-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-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.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;flex:1;min-height:0}body.community-context-active #friendsToolsSection{display:none}body.community-context-active #communityChannelsSection{display:flex}body:not(.community-context-active) #communityChannelsSection{display:none}.friend-add-row{display:grid;grid-template-columns:1fr 36px;gap:6px}.friend-add-row-double{grid-template-columns:1fr 36px 36px}.friend-add-row-wide-buttons{grid-template-columns:1fr 1fr}.communities-panel h3{margin:0;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.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:flex;flex-direction:column;gap:6px;max-height:none;flex:1;min-height:0;overflow:auto}#communityChannelsSection{flex:1;min-height:0}.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)}#friendsList .friend-item,#communityChannelsList .friend-item{height:52px;min-height:52px}.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;transform:scaleX(-1);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;border:1px solid var(--line);border-radius:10px;background:linear-gradient(165deg,#20242c,#171b22);color:#e6ebf3;box-shadow:inset 0 0 0 1px #ff6b350f;transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease}.icon-btn i{font-size:1.1rem;line-height:1}.icon-btn:hover{border-color:#3a404d;color:#f7f9fc;background:linear-gradient(165deg,#ff6b352e,#ff6b351a);transform:translateY(-1px)}.icon-btn:disabled{border-color:#2d323d;background:#1b1f26;color:#7e8794;opacity:.55}.call-controls button:not(.icon-btn),.call-controls input,.composer button:not(.icon-btn),.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:not(.icon-btn),.composer button:not(.icon-btn){cursor:pointer;font-weight:600}.call-controls button:not(.icon-btn):disabled,.composer button:not(.icon-btn):disabled,.composer input:disabled{cursor:not-allowed;opacity:.35}.chat-pane{min-height:0;padding:14px;display:grid;grid-template-rows:auto 1fr auto;gap:10px}.community-members-pane{min-height:0;padding:12px;display:none;grid-template-rows:auto 1fr;gap:10px}.community-members-pane.is-visible{display:grid}.community-members-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.community-members-head h3{margin:0;font-size:.86rem;letter-spacing:.02em}.community-members-list{min-height:0;overflow-y:auto;border-radius:0;border:none;background:transparent;padding:0;display:flex;flex-direction:column;gap:6px}.community-member-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:10px;border:1px solid #2b2f38;background:#17191d;padding:7px 8px;height:52px;min-height:52px}.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-bubble a{color:#86c5ff;text-decoration:underline;text-underline-offset:2px;word-break:break-all}.message-row.local .message-bubble a{color:#ffd0bc}.message-meta{font-size:.7rem;color:var(--muted)}.message-actions{display:flex}.message-reaction{border:1px solid var(--line);border-radius:999px;background:#171a20;color:#f2f4f8;font-size:.72rem;line-height:1;padding:3px 8px;cursor:pointer}.message-reaction.is-active,.message-reaction[aria-pressed=true]{border-color:#ff6b35a6;background:#ff6b3533}.composer{display:grid;grid-template-columns:1fr auto auto;gap:8px}.composer button{width:auto;padding-inline:10px}.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;transform:scaleX(-1);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}.community-members-pane{order:3}}@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}.community-rail-list{flex-direction:row;width:auto;max-width:calc(100vw - 130px);overflow-x:auto;overflow-y:hidden;padding:0}.community-modal-grid{grid-template-columns:1fr}.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}}