:root{--bg:#0f1720;--surface:#101823e6;--ink:#ecf2fb;--muted:#9fb1c7;--line:#97b1ce29;--accent:#63b3ed;--accent-strong:#d4ecff;--danger:#f66;--font:"Segoe UI", "Aptos", sans-serif;--shadow:0 8px 32px #0006;font-family:var(--font);color:var(--ink);background:radial-gradient(circle at 100% 0,#63b3ed26,#0000 30%),linear-gradient(#101825 0%,#0d121b 100%);line-height:1.5}*,:before,:after{box-sizing:border-box}body{min-height:100vh;margin:0}button,input,textarea{font:inherit}input,textarea{border:1px solid var(--line);color:var(--ink);background:#060b11cc;border-radius:8px;padding:8px 12px}input:focus,textarea:focus{border-color:var(--accent);outline:none}.btn{cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-weight:600;transition:opacity .15s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#0d121b}.btn-danger{color:var(--danger);background:#ff505033;border:1px solid #ff505066}.btn-full{width:100%}.auth-page{justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{background:var(--surface);border:1px solid var(--line);width:100%;max-width:380px;box-shadow:var(--shadow);border-radius:16px;padding:32px}.auth-card h1{color:var(--accent-strong);margin:0 0 4px;font-size:2rem}.auth-card h2{margin:0 0 12px}.auth-subtitle{color:var(--muted);margin:0 0 24px;font-size:.9rem}.form-group{gap:6px;margin-bottom:16px;display:grid}.form-group label{color:var(--muted);font-size:.85rem;font-weight:600}.form-group input{width:100%}.error-text{color:#f99;margin:8px 0;font-size:.9rem}.chat-layout{grid-template-columns:280px 1fr;height:100vh;display:grid;overflow:hidden}.sidebar{background:var(--surface);border-right:1px solid var(--line);flex-direction:column;display:flex;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:16px;display:flex}.brand{color:var(--accent-strong);margin-right:auto;font-size:1.1rem;font-weight:700}.icon-btn{cursor:pointer;opacity:.7;background:0 0;border:none;padding:4px;font-size:1.1rem}.icon-btn:hover{opacity:1}.sidebar-footer{border-top:1px solid var(--line);align-items:center;gap:8px;margin-top:auto;padding:12px 16px;display:flex}.sidebar-user{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.8rem;overflow:hidden}.conv-list{flex:1;margin:0;padding:8px;list-style:none;overflow-y:auto}.conv-item{cursor:pointer;border-radius:8px;align-items:flex-start;gap:10px;padding:10px 12px;transition:background .1s;display:flex}.conv-item:hover{background:#63b3ed14}.conv-item.active{background:#63b3ed29}.conv-main{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.conv-top-row{align-items:center;gap:8px;display:flex}.conv-title{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.9rem;overflow:hidden}.conv-preview{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;overflow:hidden}.conv-unread-badge{background:var(--accent);color:#0d121b;border-radius:999px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 6px;font-size:.7rem;font-weight:700;display:inline-flex}.conv-list-empty{color:var(--muted);text-align:center;padding:16px;font-size:.9rem}.directory-search{border-bottom:1px solid var(--line);padding:8px 16px}.directory-input{width:100%}.directory-results{margin:8px 0 0;padding:0;list-style:none}.directory-item{cursor:pointer;border-radius:8px;flex-direction:column;gap:2px;padding:8px 12px;font-size:.9rem;display:flex}.directory-item:hover{background:#63b3ed1a}.directory-item.selected{background:#63b3ed2e;border:1px solid #63b3ed59}.directory-item span{color:var(--muted);font-size:.8rem}.directory-loading{color:var(--muted);padding:4px 0;font-size:.85rem}.group-create{border-bottom:1px solid var(--line);gap:8px;padding:8px 16px 12px;display:grid}.group-create-header{gap:8px;display:flex}.group-title-input{flex:1}.group-selected-list{flex-wrap:wrap;gap:6px;display:flex}.group-selected-item{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#63b3ed1f;border-radius:999px;padding:3px 10px;font-size:.75rem}.group-create-footer{justify-content:space-between;align-items:center;gap:8px;display:flex}.group-count{color:var(--muted);font-size:.8rem}.overlay-backdrop{z-index:1000;background:#03080ea8;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.overlay-dialog{background:var(--surface);border:1px solid var(--line);width:min(720px,100%);max-height:80vh;box-shadow:var(--shadow);border-radius:14px;overflow:auto}.overlay-dialog .group-create{border-bottom:none;padding:16px}.chat-main{flex-direction:column;display:flex;overflow:hidden}.empty-state{color:var(--muted);flex:1;justify-content:center;align-items:center;display:flex}.chat-window{flex-direction:column;height:100%;display:flex;overflow:hidden}.chat-header{border-bottom:1px solid var(--line);background:var(--surface);align-items:center;gap:12px;padding:14px 20px;display:flex}.chat-header-main{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.chat-title{font-size:1rem;font-weight:600}.chat-members{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;overflow:hidden}.chat-type{color:var(--muted);background:#63b3ed1a;border-radius:4px;padding:2px 8px;font-size:.75rem}.chat-error{color:#f99;background:#ff50501a;padding:8px 20px;font-size:.9rem}.message-list{flex-direction:column;flex:1;gap:8px;padding:16px 20px;display:flex;overflow-y:auto}.message-list-empty{color:var(--muted);flex:1;justify-content:center;align-items:center;display:flex}.message{flex-direction:column;max-width:70%;display:flex}.message.outgoing{align-self:flex-end;align-items:flex-end}.message.incoming{align-self:flex-start;align-items:flex-start}.message-sender{color:var(--muted);margin-bottom:2px;font-size:.75rem}.message-bubble{border-radius:12px;padding:8px 12px;font-size:.95rem}.outgoing .message-bubble{background:#63b3ed40;border-bottom-right-radius:4px}.incoming .message-bubble{background:#ffffff0f;border-bottom-left-radius:4px}.message-no-key,.message-error{color:var(--muted);font-size:.85rem}.message-retry{border:1px solid var(--line);color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;margin-top:6px;padding:2px 10px;font-size:.75rem}.message-retry:hover{color:var(--text);border-color:var(--accent)}.message-time{color:var(--muted);margin-top:2px;font-size:.7rem}.chat-composer{border-top:1px solid var(--line);background:var(--surface);gap:8px;padding:12px 20px;display:flex}.composer-file-input{display:none}.composer-attach{color:var(--ink);border:1px solid var(--line);background:#63b3ed26;border-radius:8px;width:40px;padding:0;font-size:1rem}.composer-attach:hover{border-color:var(--accent)}.composer-call{border:1px solid var(--border);color:var(--text);background:#ffffff05;border-radius:10px;width:40px;height:40px}.composer-call:hover{border-color:var(--accent)}.composer-input{resize:none;flex:1;min-height:40px;max-height:120px;overflow-y:auto}.attachment-item{flex-direction:column;gap:2px;display:flex}.attachment-thumb{border:1px solid var(--line);border-radius:8px;width:120px;max-width:100%;height:auto;margin-bottom:6px}.attachment-name{font-weight:600}.attachment-meta{color:var(--muted);font-size:.75rem}.attachment-download{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#63b3ed1f;border-radius:6px;align-self:flex-start;margin-top:6px;padding:3px 8px;font-size:.75rem}.attachment-download:hover{border-color:var(--accent)}.call-invite-item{flex-direction:column;gap:4px;display:flex}.call-invite-title{font-weight:700}.call-invite-meta{color:var(--muted);font-size:.82rem}.call-invite-join{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:#ffffff0a;border-radius:8px;align-self:flex-start;margin-top:6px;padding:4px 10px}.call-invite-join:hover{color:var(--ink);border-color:var(--accent)}.call-invite-join:disabled{opacity:.55;cursor:not-allowed;border-color:var(--line);color:var(--muted)}.call-invite-warning{color:#f7ae5e;font-size:.78rem}.in-call-bar{border-bottom:1px solid var(--line);background:#63b3ed14;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 20px;display:flex}.in-call-status{font-weight:600}.in-call-meta{color:var(--muted);margin-right:auto;font-size:.8rem}.in-call-btn{border:1px solid var(--line);color:var(--ink);background:#ffffff0f}.in-call-btn:hover{border-color:var(--accent)}.in-call-btn.is-active{background:#63b3ed26;border-color:#63b3ed99}.chat-window--in-call{grid-template-rows:minmax(0,1fr) auto;display:grid}.call-main-layout{flex-direction:row;flex:1;gap:0;min-height:0;display:flex}.call-chat-sidebar{background:var(--surface);border-left:1px solid var(--line);flex-direction:column;width:320px;min-height:0;animation:.2s ease-out slideInRight;display:flex}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.call-chat-header{border-bottom:1px solid var(--line);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.call-chat-header h3{margin:0;font-size:.95rem;font-weight:600}.btn-icon{color:var(--text);cursor:pointer;opacity:.7;background:0 0;border:none;padding:4px 8px;font-size:1.4rem;line-height:1}.btn-icon:hover{opacity:1}.call-chat-sidebar .message-list{flex:1;gap:6px;padding:12px 16px;font-size:.9rem}.call-chat-sidebar .message{max-width:100%}@media (width<=1100px){.call-chat-sidebar{z-index:10;border-left:none;position:absolute;top:0;bottom:0;right:0;box-shadow:-2px 0 12px #0006}}.sync-indicator{opacity:.7;font-size:.7rem}.sync-ok{color:#4c8}.sync-syncing{color:var(--accent);animation:1s infinite pulse}.sync-error{color:#f99}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.settings-page{max-width:640px;margin:0 auto;padding:32px 24px}.settings-header{align-items:center;gap:16px;margin-bottom:32px;display:flex}.settings-header a{color:var(--accent);text-decoration:none}.settings-header h1{margin:0}.settings-section{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:20px;padding:20px}.settings-section h2{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 16px;font-size:.8rem}.info-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:8px 0;font-size:.9rem;display:flex}.info-row:last-child{border-bottom:none}.info-row code{color:var(--accent);background:#63b3ed1a;border-radius:4px;padding:2px 6px;font-size:.8rem}.settings-section .table-wrap{overflow-x:auto}.settings-section .table{border-collapse:collapse;width:100%;font-size:.85rem}.settings-section .table th,.settings-section .table td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:8px 10px}.settings-section .table th{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;font-weight:600}.settings-section .table td code{word-break:break-all}.spinner{border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;margin:16px auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.call-session-shell{flex-direction:column;flex:1;min-height:0;display:flex}.call-view{background:#050507;flex:1;min-height:0;display:block;position:relative}.call-layout-toolbar{justify-content:space-between;align-items:center;gap:10px;padding:10px 12px 0;display:flex}.call-layout-buttons{gap:8px;display:inline-flex}.call-layout-btn{border:1px solid var(--line);color:var(--text);cursor:pointer;background:#ffffff0a;border-radius:999px;padding:6px 12px;font-size:.82rem}.call-layout-btn.is-active{background:#63b3ed29;border-color:#63b3ed99}.call-layout-btn--danger{color:#ffd6d6;border-color:#ff80808c}.call-layout-btn--danger:hover{background:#ff5a5a1f}.call-focus-status{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.call-focus-meta{flex-direction:column;align-items:flex-end;gap:2px;min-width:260px;display:flex}.call-pin-hint{color:#8ea3b7;text-align:right;font-size:.72rem}.call-stage{flex:1;grid-template-columns:minmax(0,1fr) 300px;gap:12px;min-height:0;padding:12px;display:grid}.call-focus-panel{height:100%;min-height:0;position:relative}.call-sidebar{flex-direction:column;gap:10px;min-height:0;display:flex;overflow-y:auto}.call-sidebar-item{all:unset;cursor:pointer;display:block}.call-sidebar-item:focus-visible .call-stream-card{outline:2px solid var(--accent);outline-offset:2px}.call-stream-card{border:1px solid var(--line);background:#000;border-radius:12px;position:relative;overflow:hidden}.call-pin-btn{z-index:3;color:#fff;letter-spacing:.02em;cursor:pointer;background:#000000b8;border:1px solid #fff6;border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:600;position:absolute;top:10px;right:10px}.call-pinned-badge{z-index:3;color:#d8ecff;background:#63b3ed33;border:1px solid #63b3edcc;border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:600;position:absolute;top:10px;left:10px}.call-pin-btn.is-active{color:#05121c;background:#63b3edf2;border-color:#63b3edf2}.call-pin-btn:hover{filter:brightness(1.08)}.call-stream-card--focus{width:100%;height:100%;min-height:340px}.call-stream-card--sidebar,.call-stream-card--grid{aspect-ratio:16/9;width:100%}.call-stream-card--local{aspect-ratio:16/9;width:clamp(160px,18vw,260px)}.call-stream-media{width:100%;height:100%;display:block}.call-stream-card--camera .call-stream-media{object-fit:cover}.call-stream-card--screen .call-stream-media{object-fit:contain}.call-local-dock{z-index:5;flex-direction:row;gap:10px;display:flex;position:absolute;bottom:16px;right:16px}.call-video{object-fit:cover;width:100%;height:100%}.call-tile-overlay{background:linear-gradient(#0000,#000c);flex-direction:column;align-items:flex-start;padding:16px 12px 12px;display:flex;position:absolute;bottom:0;left:0;right:0}.call-tile-name{color:var(--accent-strong);text-shadow:0 2px 4px #000c;font-size:.9rem;font-weight:600}.call-sidebar-empty,.call-empty-state{border:1px dashed var(--line);min-height:120px;color:var(--muted);background:#00000040;border-radius:12px;justify-content:center;align-items:center;font-size:.9rem;display:flex}.call-grid-view{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:12px;display:grid}.call-grid-view--single{grid-template-columns:minmax(0,1fr);justify-items:center}.call-grid-view--single .call-grid-item{width:min(100%,1200px)}.call-grid-view--two{grid-template-columns:repeat(2,minmax(0,1fr))}.call-grid-view--two .call-grid-item{min-width:0}.call-grid-item{all:unset;cursor:pointer;border-radius:12px}.call-grid-item.is-highlighted .call-stream-card{border-color:#63b3edf2;box-shadow:0 0 0 2px #63b3ed47}.call-grid-item:focus-visible .call-stream-card{outline:2px solid var(--accent);outline-offset:2px}@media (width<=1100px){.call-layout-toolbar{flex-direction:column;align-items:flex-start}.call-focus-status{white-space:normal}.call-focus-meta{align-items:flex-start;min-width:0}.call-pin-hint{text-align:left}.call-stage{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}.call-grid-view--two{grid-template-columns:minmax(0,1fr)}.call-sidebar{flex-direction:row;padding-bottom:6px;overflow:auto hidden}.call-sidebar-item{min-width:220px}.call-local-dock{justify-content:flex-end;padding:0 12px 12px;position:static}}