:root{color-scheme:light;font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;line-height:1.4;font-weight:400;color:#111c2d;background:#f9f9ff;--app-bg: #f9f9ff;--surface: #ffffff;--surface-muted: #f0f3ff;--surface-soft: #e7eeff;--surface-strong: #d8e3fb;--border: #c3c6d2;--border-soft: #e2e8f0;--text: #111c2d;--muted: #434750;--faint: #737782;--accent: #063f81;--accent-soft: #d7e3ff;--accent-mid: #2b579a;--accent-strong: #001b3f;--danger: #ba1a1a;--danger-soft: #ffdad6;--success: #059669}*{box-sizing:border-box}html,body,app-root{height:100vh}body{margin:0;overflow:hidden;background:var(--app-bg);color:var(--text)}button,input,textarea,select{font:inherit}a.button{text-decoration:none}button{border:0;background:transparent;padding:0}input,textarea,select{width:100%;border:1px solid var(--border-soft);border-radius:8px;background:var(--surface);color:var(--text);padding:.72rem .8rem}input:focus,textarea:focus,select:focus{border-color:var(--accent-mid);box-shadow:0 0 0 3px #2b579a24;outline:0}textarea{resize:vertical}.material-symbols-outlined{display:inline-flex;font-family:Material Symbols Outlined;font-size:20px;font-style:normal;font-weight:400;line-height:1;text-transform:none;letter-spacing:normal;white-space:nowrap;direction:ltr;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.shell{display:grid;grid-template-columns:72px 260px minmax(0,1fr);height:100vh;overflow:hidden;background:var(--app-bg)}.shell.shell-with-participants{grid-template-columns:72px 260px minmax(0,1fr) 300px}.group-rail,.space-rail,.content-pane,.participants-rail{min-height:0;height:100vh}.group-rail{z-index:20;display:flex;flex-direction:column;align-items:center;gap:1rem;overflow:hidden;border-right:1px solid var(--border);background:var(--surface-muted);padding:1rem 0}.group-rail-brand{display:grid;width:48px;height:48px;place-items:center;border-radius:12px;background:var(--accent);color:#fff;box-shadow:0 2px 6px #063f8133}.group-rail-brand .material-symbols-outlined{font-size:28px}.group-stack{display:flex;flex:1;min-height:0;width:100%;flex-direction:column;align-items:center;gap:.75rem;overflow:auto;padding-top:.9rem;border-top:2px solid rgba(115,119,130,.18)}.group-stack::-webkit-scrollbar,.channel-stack::-webkit-scrollbar,.participants-list::-webkit-scrollbar,.pending-list::-webkit-scrollbar{display:none}.group-item{position:relative;display:grid;width:100%;place-items:center}.group-item[draggable=true]{cursor:grab}.group-item[draggable=true]:active{cursor:grabbing}.group-item:has(.group-circle.active):before{position:absolute;left:0;width:6px;height:34px;border-radius:0 999px 999px 0;background:var(--accent);content:""}.group-circle{display:grid;box-sizing:border-box;width:48px;height:48px;place-items:center;border:1px solid transparent;border-radius:12px;background:var(--surface-soft);color:var(--muted);cursor:pointer;font-size:1rem;font-weight:700}.group-circle:hover{background:var(--surface-strong)}.group-circle.active{border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent)}.group-circle.add-circle{margin-top:auto;border-radius:999px;background:transparent;border-color:var(--border)}.group-rail-footer{display:flex;align-items:center;gap:.35rem;color:var(--faint);font-size:.66rem;writing-mode:vertical-rl}.space-rail{z-index:10;display:flex;overflow:hidden;flex-direction:column;border-right:1px solid var(--border);background:#f4f6ff}.space-rail-header{display:flex;height:64px;align-items:center;justify-content:space-between;flex-shrink:0;gap:.8rem;border-bottom:1px solid var(--border);padding:0 1rem 0 1.25rem}.space-rail-header h2,.participants-panel-header h2{margin:0;color:var(--accent);font-size:1rem;font-weight:800}.space-rail-meta,.page-body,.small-copy{margin:.25rem 0 0;color:var(--muted);font-size:.84rem}.channel-stack{display:flex;flex:1;min-height:0;flex-direction:column;gap:.25rem;overflow:auto;padding:1rem .65rem}.rail-section-label{display:flex;align-items:center;justify-content:space-between;margin:.2rem .55rem .35rem;color:var(--muted);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.rail-section-action{display:grid;box-sizing:border-box;flex:0 0 26px;width:26px;height:26px;place-items:center;border-radius:8px;color:var(--muted);cursor:pointer;opacity:.7}.rail-section-action:hover{background:var(--surface-soft);color:var(--accent);opacity:1}.channel-entry{display:flex;flex-direction:column;gap:.2rem}.channel-row{display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:center;gap:.35rem}.channel-button{display:flex;width:100%;min-width:0;align-items:center;gap:.65rem;border-radius:6px;color:var(--muted);cursor:pointer;padding:.45rem .6rem;text-align:left}.channel-button:hover{background:#edf3ff}.channel-button.active{border-left:4px solid var(--accent-mid);background:var(--accent-soft);color:var(--accent);padding-left:calc(.6rem - 4px)}.channel-icon{flex:0 0 auto;color:currentColor}.channel-button-title{min-width:0;overflow:hidden;color:currentColor;font-size:.92rem;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.channel-action-button{display:grid;width:34px;height:34px;place-items:center;border-radius:8px;color:var(--muted);cursor:pointer}.channel-hover-action{opacity:0;pointer-events:none;transform:translate(4px);transition:opacity .12s ease,transform .12s ease}.channel-row:hover .channel-hover-action,.channel-row:focus-within .channel-hover-action{opacity:1;pointer-events:auto;transform:translate(0)}.channel-action-button:hover{background:var(--surface-soft);color:var(--accent)}.channel-action-button.hangup{background:var(--danger-soft);color:var(--danger)}.channel-presence{display:flex;align-items:center;gap:.45rem;margin-left:2rem;color:var(--faint);font-size:.76rem}.direct-message-label{margin-top:1.4rem}.direct-message-stack{display:flex;flex-direction:column;gap:.15rem}.direct-message-entry{display:flex;align-items:center;gap:.65rem;border-radius:6px;color:var(--muted);padding:.45rem .6rem;font-size:.92rem}.space-rail-empty{padding:1.25rem;color:var(--muted)}.space-rail-footer{flex-shrink:0;border-top:1px solid var(--border);background:#f4f6ff;padding:.8rem 1rem}.profile-card{display:flex;flex-direction:column;gap:.65rem}.profile-card-head{display:grid;grid-template-columns:38px minmax(0,1fr) 32px;align-items:center;gap:.65rem}.profile-card-head strong{display:block;overflow:hidden;color:var(--text);font-size:.85rem;text-overflow:ellipsis;white-space:nowrap}.profile-card-head .page-body{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-settings-button{width:32px;height:32px}.profile-control-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.profile-control-bar .control-button{width:100%;height:38px;border-radius:0}.profile-control-bar .control-button+.control-button{border-left:1px solid var(--border-soft)}.profile-control-bar .control-button:hover{background:var(--surface-soft)}.avatar{display:inline-grid;width:36px;height:36px;place-items:center;border-radius:999px;background:var(--accent-soft);color:var(--accent);flex:0 0 auto;font-size:.78rem;font-weight:800}.avatar-small{width:22px;height:22px;font-size:.65rem}.icon-button{display:inline-grid;width:36px;height:36px;place-items:center;border-radius:999px;color:var(--muted);cursor:pointer}.icon-button:hover{background:var(--surface-soft);color:var(--text)}.icon-button:disabled{cursor:not-allowed;opacity:.4}.control-button{border-radius:8px;background:var(--surface-muted)}.hangup-button{background:var(--danger-soft);color:var(--danger)}.content-pane{overflow:hidden;min-width:0;background:var(--surface)}.participants-rail{display:flex;min-width:0;flex-direction:column;border-left:1px solid var(--border);background:#f4f6ff}.participants-panel{display:flex;min-height:0;flex-direction:column}.participants-rail>.participants-panel:first-child{flex:1}.participants-panel-header{display:flex;min-height:64px;align-items:center;justify-content:space-between;flex-shrink:0;gap:1rem;border-bottom:1px solid var(--border);padding:0 1.25rem}.participants-header-actions{display:inline-flex;align-items:center;gap:.35rem}.participants-close-button{display:none}.participants-count{display:inline-grid;min-width:32px;height:32px;place-items:center;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.85rem;font-weight:700}.participants-list,.pending-list{display:flex;min-height:0;flex-direction:column;gap:.6rem;overflow:auto;padding:1rem 1.25rem}.participants-list{flex:1}.pending-panel{max-height:42%;border-top:1px solid var(--border)}.invite-panel{border-top:1px solid var(--border)}.invite-panel-body{display:flex;flex-direction:column;gap:.7rem;padding:1rem 1.25rem}.participants-toggle-button{display:none;position:fixed;z-index:50;right:1rem;top:1rem;width:42px;height:42px;place-items:center;border:1px solid var(--border);border-radius:999px;background:var(--accent);color:#fff;box-shadow:0 8px 22px #063f8138;cursor:pointer}.participants-toggle-open{background:var(--danger)}.participants-section-title{margin:.8rem 0 .15rem;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.member-row,.request-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:.65rem;border-radius:8px;color:var(--text)}.request-item{grid-template-columns:minmax(0,1fr);border:1px solid var(--border-soft);background:var(--surface);padding:.8rem}.member-row strong,.request-item strong{display:block;overflow:hidden;font-size:.9rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.member-row p,.request-item p{margin:.1rem 0 0;color:var(--faint);font-size:.78rem}.offline-member{opacity:.62}.muted-avatar{filter:grayscale(1)}.presence-dot{width:8px;height:8px;border-radius:999px}.online-dot,.status-connected{background:var(--success)}.offline-dot,.status-disconnected{background:#a8acb5}.status-connecting{background:#c49b1f}.page{display:flex;min-height:100%;flex-direction:column;gap:1rem;padding:1.5rem;overflow:auto}.channel-page{height:100vh;min-height:0;padding:0;overflow:hidden}.page-header{display:flex;min-height:64px;align-items:center;justify-content:space-between;flex-shrink:0;gap:1rem;border-bottom:1px solid var(--border);background:var(--surface);padding:0 1.75rem}.page-kicker{margin:0;color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.page-title-line{display:flex;flex:1;min-width:0;align-items:center;gap:.75rem}.page-header h1{flex:0 0 auto;margin:0;color:var(--text);font-size:1.45rem;font-weight:750;white-space:nowrap}.page-title-separator{width:1px;height:20px;flex:0 0 auto;background:var(--border)}.page-header .page-body{min-width:0;flex:1 1 auto;max-width:min(48vw,540px);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-actions{display:flex;align-items:center;gap:.3rem}.page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.page-grid.single-column{grid-template-columns:minmax(0,1fr)}.flat-panel{display:flex;flex-direction:column;gap:.85rem;border:1px solid var(--border-soft);border-radius:8px;background:var(--surface);padding:1rem}.flat-panel h2{margin:0;font-size:1rem}.field{display:flex;flex-direction:column;gap:.35rem}.field span{color:var(--muted);font-size:.86rem}.button-row{display:flex;flex-wrap:wrap;gap:.55rem}.button{display:inline-flex;min-height:38px;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--accent-mid);border-radius:8px;background:var(--accent);color:#fff;cursor:pointer;font-weight:700;padding:.6rem .95rem}.button:hover{background:var(--accent-mid)}.button:disabled{cursor:not-allowed;opacity:.5}.button.button-secondary{border-color:var(--border);background:var(--surface);color:var(--text)}.button.button-secondary:hover{background:var(--surface-muted)}.compact-button{min-height:34px;padding:.45rem .7rem}.status-pill{display:inline-flex;min-height:26px;align-items:center;gap:.35rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.76rem;padding:.2rem .55rem}.status-pill.neutral{color:var(--text)}.mono{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.82rem}.message-list{display:flex;flex:1;min-height:0;flex-direction:column;gap:1.25rem;overflow:auto;padding:2rem 2rem 1rem}app-chat-channel-view{display:flex;min-height:0;flex:1;flex-direction:column}.message-date-divider{display:flex;align-items:center;gap:1rem;color:var(--muted);font-size:.82rem}.message-date-divider:before,.message-date-divider:after{height:1px;flex:1;background:var(--border-soft);content:""}.message-date-divider span{border:1px solid var(--border-soft);border-radius:999px;background:var(--surface);padding:.35rem .9rem}.message-card{display:grid;max-width:760px;gap:.45rem}.message-card.outgoing{align-self:flex-end;text-align:right}.message-card.incoming{align-self:flex-start}.message-card header,.message-card footer{display:flex;align-items:center;gap:.65rem;color:var(--muted);font-size:.8rem}.message-card.outgoing header,.message-card.outgoing footer{justify-content:flex-end}.message-card p{margin:0;border:1px solid var(--border-soft);border-radius:0 18px 18px;background:#eef3ff;color:var(--text);font-size:.98rem;line-height:1.55;padding:1rem 1.15rem;text-align:left}.message-card.outgoing p{border-color:#c7d7ff;border-radius:18px 0 18px 18px;background:#d7e3ff}.composer{display:flex;position:sticky;bottom:0;z-index:2;flex-shrink:0;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:#f7f8ff;margin:0 2rem 1.5rem}.composer-toolbar,.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:.35rem;padding:.45rem .75rem}.composer-toolbar{justify-content:flex-start;border-bottom:1px solid var(--border-soft)}.composer textarea{min-height:74px;border:0;border-radius:0;background:transparent;box-shadow:none}.composer-tool{display:inline-grid;width:30px;height:30px;place-items:center;border-radius:6px;color:var(--muted);cursor:pointer}.composer-tool:hover{background:var(--surface-soft);color:var(--text)}.composer-tools-secondary{display:flex;gap:.25rem}.send-button{min-height:34px;padding:.45rem .85rem}.error-banner{position:fixed;z-index:40;top:1rem;left:50%;display:flex;width:min(760px,calc(100vw - 2rem));align-items:center;justify-content:space-between;gap:1rem;transform:translate(-50%);border:1px solid #e5bcbc;border-radius:10px;background:var(--danger-soft);color:#7a2727;padding:.85rem 1rem}.loading-screen,.empty-page{display:grid;min-height:60vh;place-items:center;text-align:center}@media(max-width:1180px){.shell{grid-template-columns:72px 240px minmax(0,1fr)}.participants-rail{display:none}.participants-toggle-button{display:grid}app-participants-rail.participants-rail-open .participants-rail{display:flex;position:fixed;z-index:45;top:0;right:0;width:min(340px,92vw);height:100vh;box-shadow:-18px 0 34px #111c2d2e}.participants-close-button{display:inline-grid}.page-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:820px){body{overflow:auto}.shell{grid-template-columns:1fr;height:auto;min-height:100vh;overflow:visible}.group-rail,.space-rail,.content-pane{height:auto}.group-rail{flex-direction:row;justify-content:flex-start;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border);padding:.75rem}.group-stack{flex-direction:row;border-top:0;padding-top:0}.group-rail-footer{margin-left:auto;writing-mode:horizontal-tb}.space-rail{border-right:0;border-bottom:1px solid var(--border)}.channel-page{height:auto;min-height:70vh}.message-list{padding:1rem}.composer{margin:0 1rem 1rem}}