:root{--bg:#050914;--panel:#0a1226;--fg:#eaf1ff;--mut:#8fa3c7;--ac:#2f8cff;--bd:#1b2a4d}
[data-theme=light]{--bg:#fff;--panel:#f1f5fc;--fg:#0a1226;--mut:#51628a;--bd:#d5def0}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px system-ui,sans-serif;height:100dvh}
[hidden]{display:none!important}button,input,textarea{font:inherit;color:inherit}
button{background:var(--panel);border:1px solid var(--bd);border-radius:10px;padding:8px 12px;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.primary{background:var(--ac);border-color:var(--ac);color:#fff}input,textarea{background:var(--panel);border:1px solid var(--bd);border-radius:10px;padding:10px;width:100%}
#auth,#reset{display:grid;place-items:center;height:100%}.card{display:flex;flex-direction:column;gap:10px;width:min(380px,92vw);background:var(--panel);padding:28px;border-radius:18px;border:1px solid var(--bd);text-align:center}
.pw{display:flex;gap:6px}#autherr,#reseterr{color:#ff6b6b;margin:0;min-height:1em}a{color:var(--ac)}h1{margin:0}
#app{display:flex;height:100%}#side{width:280px;background:var(--panel);border-right:1px solid var(--bd);display:flex;flex-direction:column;gap:10px;padding:12px}
.brand{display:flex;align-items:center;gap:8px}.brand button{margin-left:auto}#list{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
#list li{display:flex;gap:4px;align-items:center;padding:8px;border-radius:8px;cursor:pointer}#list li.on,#list li:hover{background:var(--bd)}#list span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#list li button{padding:2px 6px;border:0;background:none}.foot{display:flex;flex-wrap:wrap;gap:6px;font-size:13px}.foot span{width:100%;color:var(--mut);overflow:hidden;text-overflow:ellipsis}
main{flex:1;display:flex;flex-direction:column;min-width:0}header{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--bd)}#title{flex:1;font-weight:600}#menu{display:none}
#msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px}.empty{margin:auto;color:var(--mut);font-size:22px}
.m{max-width:min(760px,92%);padding:12px 14px;border-radius:14px;line-height:1.55;overflow-wrap:anywhere}.m.user{align-self:flex-end;background:var(--ac);color:#fff;white-space:pre-wrap}.m.assistant{background:var(--panel);border:1px solid var(--bd)}
.m pre{background:#000;color:#dbe7ff;padding:10px;border-radius:8px;overflow:auto;position:relative}.m pre button{position:absolute;right:6px;top:6px;font-size:12px;padding:2px 8px}.tools{display:flex;gap:6px;margin-top:8px}.tools button{font-size:13px;padding:3px 8px}
.dots::after{content:"●●●";animation:b 1s infinite;letter-spacing:3px;color:var(--mut)}@keyframes b{50%{opacity:.2}}
#composer{display:flex;gap:8px;padding:12px;align-items:flex-end}#composer textarea{resize:none;max-height:160px}#mic.on{background:#e5484d;animation:b 1s infinite}#micstate{padding:0 14px 8px;color:var(--mut);min-height:1.2em}
dialog{background:var(--panel);color:var(--fg);border:1px solid var(--bd);border-radius:14px;max-width:min(520px,92vw)}dialog label{display:block;margin:10px 0}
@media(max-width:760px){#side{position:fixed;inset:0 auto 0 0;z-index:5;transform:translateX(-100%);transition:transform .2s}#side.open{transform:none}#menu{display:inline-block}#app.col #side{transform:translateX(-100%)}}
@media(min-width:761px){#app.col #side{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}