:root{color-scheme:dark;--bg:#0b1017;--panel:#121a24;--line:#2a3746;--text:#f2f5f7;--muted:#aeb9c5;--accent:#73d7bd;--danger:#ff7d91}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px system-ui,sans-serif}button,input,textarea{font:inherit}button{min-height:44px;border:1px solid var(--line);border-radius:.65rem;background:#182331;color:var(--text);padding:.65rem .85rem;cursor:pointer}button:hover,button:focus-visible{border-color:var(--accent)}button:disabled{cursor:not-allowed;opacity:.55}.shell{height:100dvh;display:grid;grid-template-columns:280px 1fr}.shell[hidden]{display:none}.sidebar{min-height:0;display:flex;flex-direction:column;gap:.8rem;padding:1rem;border-right:1px solid var(--line);background:var(--panel)}.system-button{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;text-align:left}.system-button .avatar{grid-row:1/3}.system-button span:last-child,.member-item small{color:var(--muted);font-size:.8rem}.avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--color,#604fa2);overflow:hidden}.avatar img,.member-item img{width:100%;height:100%;object-fit:cover}.primary{background:#256d60;border-color:#50b7a2;font-weight:700}.danger{color:#ffdbe1;border-color:#81404b;background:#361d24}.search{display:grid;gap:.3rem;color:var(--muted);font-size:.85rem}.search input,.field input,.field textarea,dialog input{width:100%;min-height:44px;padding:.65rem;border:1px solid var(--line);border-radius:.55rem;background:#091019;color:var(--text)}.member-list{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:.4rem}.member-item{display:flex;align-items:center;gap:.7rem;text-align:left}.member-item>span:last-child{display:grid}.member-item.selected,.form-chip.selected{border-color:var(--accent);background:#17352f}.content{min-width:0;overflow:auto;padding:clamp(1rem,4vw,3rem)}.content>*{max-width:1050px;margin-left:auto;margin-right:auto}.page-head,.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.5rem auto}.page-head h1,.section-head h2{margin:.2rem 0}.eyebrow{color:var(--accent);font-weight:700;font-size:.75rem;letter-spacing:.12em}.actions{display:flex;gap:.6rem;flex-wrap:wrap}.strip{display:flex;gap:1rem;flex-wrap:wrap;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--panel)}fieldset{min-width:0;border:0;padding:0;margin:0}legend{font-weight:700;margin-bottom:.5rem}.strip fieldset:first-child{display:flex;gap:.4rem;flex-wrap:wrap}.strip button{display:inline-grid;place-items:center;min-width:68px}.strip button b{font-size:1.2rem}.strip button small{display:block;font-size:.65rem}.strip fieldset:last-child{flex:1}.forms{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem}.form-chip{display:flex;flex:none;border:1px solid var(--line);border-radius:.7rem;overflow:hidden}.form-chip button{border:0;border-radius:0}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.field{display:grid;align-content:start;gap:.45rem;padding:1rem;border:1px solid var(--line);border-radius:.8rem;background:var(--panel)}.field>span{font-weight:700}.field output{white-space:pre-wrap;color:#dae1e7}.field small{color:var(--muted)}.field textarea{min-height:110px;resize:vertical}.image-field button{padding:0;overflow:hidden;min-height:150px}.image-field img{width:100%;height:180px;display:block;object-fit:cover}.image-empty{display:grid;place-items:center;height:150px;color:var(--muted)}.form-profile{margin-top:2rem;padding-top:1rem;border-top:5px solid var(--accent)}.editing{padding:.4rem .7rem;background:#593f12;color:#ffe5a4;border-radius:2rem}.check{display:flex;align-items:center;gap:.7rem;padding:1rem}.check input{width:22px;height:22px}.error-message{color:#ffacb8;font-weight:700}.loading[hidden]{display:none}.loading{height:100dvh;display:grid;place-content:center;text-align:center}dialog{width:min(480px,calc(100% - 2rem));border:1px solid var(--line);border-radius:1rem;background:var(--panel);color:var(--text);padding:1.5rem}dialog::backdrop{background:#000b}dialog label{display:grid;gap:.5rem}dialog img{display:block;max-width:100%;max-height:260px;margin:1rem auto}.actions{display:flex;justify-content:flex-end;margin-top:1rem}#toast{position:fixed;z-index:5;left:50%;bottom:1rem;translate:-50% 1rem;opacity:0;padding:.8rem 1rem;border-radius:.6rem;background:#d9fff4;color:#12352c;transition:.15s}#toast.show{opacity:1;translate:-50% 0}#toast.error{background:#ffd9df;color:#4c1821}@media(max-width:700px){.shell{height:auto;min-height:100dvh;display:block}.sidebar{position:sticky;top:0;z-index:2;max-height:48dvh;border-right:0;border-bottom:1px solid var(--line)}.member-list{max-height:150px}.content{overflow:visible;padding:1rem}.profile-grid{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.strip{padding:.7rem}.strip fieldset{width:100%}button{min-height:48px}.form-chip button:last-child{min-width:52px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* QA hardening for long labels, clear keyboard focus, and separated destructive targets. */
.system-button,.member-item,.page-head,.section-head,.form-chip{min-width:0}
.system-button strong,.member-item strong,.page-head h1,.section-head h2,.form-chip button{overflow-wrap:anywhere}
.member-item>span:last-child{min-width:0}
button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #f7cf68;outline-offset:3px}
.form-chip button[data-delete-form]{border-left:2px solid var(--line);color:#ffdbe1;min-width:48px}
.image-field img{object-position:center}
@media(max-height:600px) and (min-width:701px){.sidebar{padding:.65rem;gap:.45rem}.system-button,.sidebar>button{min-height:40px}.search input{min-height:38px}}
.system-button{overflow:hidden;align-items:center}
.system-button strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.member-item{overflow:hidden;flex:none}
.member-item .avatar{flex:none}
.member-item strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.form-chip{max-width:min(360px,85vw)}
.form-chip button[data-form]{min-width:0;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-chip button[data-delete-form]{flex:none}
.system-button{min-height:64px}
.system-button span:last-child{grid-column:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-item img.avatar{width:42px;height:42px;object-fit:cover}
.proxy-field{grid-column:1/-1}.proxy-field select{width:100%;min-height:44px;padding:.65rem;border:1px solid var(--line);border-radius:.55rem;background:#091019;color:var(--text)}.proxy-row{display:grid;grid-template-columns:2rem 1fr 1fr;gap:.55rem;align-items:center}.proxy-row b{text-align:center;color:var(--muted)}.proxy-row input{min-width:0}.proxy-pages{display:flex;align-items:center;justify-content:center;gap:.75rem}.proxy-pages button{min-width:48px}.proxy-pages span{min-width:8rem;text-align:center;color:var(--muted)}
@media(max-width:700px){.proxy-row{grid-template-columns:2rem 1fr}.proxy-row input:last-child{grid-column:2}.proxy-pages span{min-width:auto}}
.voice-control{display:grid;gap:.35rem;min-width:0;flex-shrink:0}.voice-control button,.voice-control small{overflow-wrap:anywhere}.voice-control small{color:var(--muted);line-height:1.35}
.sidebar-section{border-top:1px solid var(--line);padding-top:.7rem}.sidebar-heading{display:flex;align-items:center;justify-content:space-between;gap:.4rem;color:var(--muted);font-size:.75rem}.sidebar-heading button{min-height:36px;padding:.35rem .55rem}.group-list{display:grid;gap:.35rem;margin-top:.5rem;max-height:160px;overflow:auto}.group-item{display:flex;justify-content:space-between;align-items:center;text-align:left;min-height:40px}.group-item.selected{border-color:var(--accent);background:#17352f}.active-label{color:var(--accent);font-weight:700}.membership{margin-top:1.5rem;padding:1rem;border:1px solid var(--line);border-radius:.8rem;background:var(--panel)}.membership-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.35rem;margin-top:.8rem}.membership-list label{display:flex;align-items:center;gap:.6rem;padding:.6rem;border:1px solid var(--line);border-radius:.5rem}.membership-list input{width:20px;height:20px}.group-id{color:var(--muted);font-family:monospace}
.dialog-fallback-open{overflow:hidden}
dialog.dialog-fallback[open]{position:fixed;inset:50% auto auto 50%;z-index:10;display:block;max-height:calc(100dvh - 2rem);margin:0;overflow:auto;transform:translate(-50%,-50%);box-shadow:0 0 0 100vmax #000b}

@media(max-width:700px){.sidebar{overflow-y:auto}.voice-control button{width:100%}}

/* Sidebar list switch: show members, groups, or both without one list covering the other. */
.list-switch{display:grid;grid-template-columns:1fr 1fr auto;gap:2px;padding:2px;border:1px solid var(--line);border-radius:.65rem;background:#091019}
.list-switch button{min-height:36px;padding:.3rem .55rem;border:0;border-radius:.5rem;background:transparent;color:var(--muted);font-size:.85rem;white-space:nowrap}
.list-switch button[aria-pressed="true"]{background:#17352f;color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.list-switch .count{color:var(--muted);font-size:.75rem}
.sidebar-panel{min-height:0;display:flex;flex-direction:column;gap:.6rem}
#membersPanel,#groupsPanel{flex:1 1 0}
#groupsPanel .group-list{min-height:0;max-height:none;flex:1 1 auto;margin-top:0}
.sidebar[data-view="members"] #groupsPanel,.sidebar[data-view="groups"] #membersPanel{display:none}
.sidebar[data-view="both"] #membersPanel{flex-grow:3}
.sidebar[data-view="both"] #groupsPanel{flex-grow:2}
@media(max-width:700px){#membersPanel,#groupsPanel{flex:none}.sidebar[data-view="both"] #groupsPanel .group-list{max-height:120px}}
@media(min-width:701px){.sidebar{overflow-y:auto}.sidebar>*{flex-shrink:0}.sidebar[data-view="both"] #membersPanel{min-height:250px}.sidebar[data-view="both"] #groupsPanel{min-height:150px}}
.voice-shortcuts{display:grid;gap:.45rem;margin:.75rem 0}.voice-shortcuts>small{color:var(--muted)}.voice-shortcut{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:.5rem .7rem;border:1px solid var(--line);border-radius:.7rem;background:#0f1620}.voice-shortcut>span{display:grid;min-width:0;overflow-wrap:anywhere}.voice-shortcut small{color:var(--muted);font-size:.8rem}.voice-shortcut select{min-height:44px;min-width:min(220px,100%);padding:.5rem .65rem;border:1px solid var(--line);border-radius:.55rem;background:#091019;color:var(--text);font:inherit}.voice-shortcut select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* API tokens page and dialogs. */
.sidebar>button.selected{border-color:var(--accent);background:#17352f}
.token-help{margin-bottom:1.25rem}.token-help p,.token-help ul{margin:.2rem 0;color:#dae1e7}.token-help ul{padding-left:1.1rem;display:grid;gap:.45rem}.token-help a{color:var(--accent)}
.token-list{list-style:none;margin:0 auto;padding:0;display:grid;gap:.6rem}
.token-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid var(--line);border-radius:.8rem;background:var(--panel)}
.token-item>div{display:grid;gap:.3rem;min-width:0}.token-item strong{overflow-wrap:anywhere}.token-item small{color:var(--muted)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:#091019;border:1px solid var(--line);border-radius:.35rem;padding:.05rem .35rem;overflow-wrap:anywhere}
.scope-badge{display:inline-block;padding:.1rem .55rem;border-radius:2rem;font-size:.75rem;font-weight:700;background:#17352f;color:#bff3e4;border:1px solid #2f6f60;white-space:nowrap}
.scope-badge[data-scope="read:private"]{background:#3a2f12;color:#ffe5a4;border-color:#7a6224}
.scope-badge[data-scope="write"]{background:#361d24;color:#ffdbe1;border-color:#81404b}
.scope-options{display:grid;gap:.5rem}
dialog label.scope-option{display:flex;align-items:flex-start;gap:.7rem;padding:.75rem;border:1px solid var(--line);border-radius:.65rem;cursor:pointer}
.scope-option:has(input:checked){border-color:var(--accent);background:#17352f}
.scope-option input{width:20px;height:20px;min-height:0;margin:.15rem 0 0;flex:none}.scope-option span{display:grid;gap:.2rem}.scope-option small{color:var(--muted)}
#tokenSecret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.muted-text{color:var(--muted);font-size:.9rem}
@media(max-width:700px){.token-item{flex-direction:column;align-items:stretch}}
/* System page: servers and group chats where voice is off. */
.voice-mutes{display:grid;gap:.75rem;margin-top:1.5rem}.voice-mutes .section-head{justify-content:flex-start;margin:0;width:100%}.voice-mutes .section-head h2{margin:0;font-size:1.3rem;text-align:left}.voice-mutes>p{margin:0}
.mute-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.mute-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.mute-list li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding:.5rem .7rem;border:1px solid var(--line);border-radius:.7rem;background:#0f1620}
.mute-list li code{min-width:0}
.mute-add{display:flex;gap:.5rem;flex-wrap:wrap}.mute-add label{flex:1 1 12rem;min-width:0}.mute-add input{width:100%;min-height:44px;padding:.65rem;border:1px solid var(--line);border-radius:.55rem;background:#091019;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.voice-mutes .check.mute-all{padding:.25rem 0}.voice-mutes .check.mute-all input{width:20px;height:20px;min-height:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){.mute-columns{grid-template-columns:1fr}.mute-add button{width:100%}}