:root{--bg:#050b14;--panel:#0a1626;--line:#12324d;--cyan:#38e1ff;--blue:#2a7fff;--text:#d7ecf7;--dim:#7fa3b8;--err:#ff6b6b}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:radial-gradient(ellipse at 50% -10%,#0d2540,var(--bg) 60%);color:var(--text);font:16px/1.5 "Segoe UI",system-ui,sans-serif}
button,input{font:inherit;color:var(--text)}
button{background:transparent;border:1px solid var(--line);border-radius:8px;padding:.45rem .9rem;cursor:pointer}
button:hover{border-color:var(--cyan);color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
input[type=text],input[type=password]{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem}
[hidden]{display:none!important}
#app{display:flex;flex-direction:column;height:100%;max-width:860px;margin:0 auto;padding:0 .75rem}
header{display:flex;align-items:center;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
header h1,#lf h1{margin:0;font-size:1.15rem;letter-spacing:.35em;font-weight:300;color:var(--cyan)}
.title{flex:1;display:flex;flex-direction:column}
#status{color:var(--dim);font-size:.8rem}
nav{display:flex;gap:.4rem}
.orb{width:44px;height:44px;border-radius:50%;flex:none;background:radial-gradient(circle,#bff6ff 0,var(--cyan) 30%,var(--blue) 65%,transparent 72%);box-shadow:0 0 18px var(--cyan),inset 0 0 8px #fff8;transition:transform .3s}
body[data-state=thinking] .orb{animation:spin 1.2s linear infinite;box-shadow:0 0 26px var(--blue)}
body[data-state=listening] .orb{animation:pulse 1s ease-in-out infinite;filter:hue-rotate(-20deg)}
body[data-state=speaking] .orb{animation:pulse .5s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.18)}}
@keyframes spin{to{transform:rotate(360deg) scale(1.08)}}
#chat{flex:1;overflow-y:auto;padding:1rem 0;display:flex;flex-direction:column;gap:.7rem}
.m{max-width:85%;padding:.65rem .9rem;border-radius:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.m.user{align-self:flex-end;background:#0f2a4a;border:1px solid var(--blue)}
.m.assistant{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--cyan)}
.m.err{align-self:center;color:var(--err);border:1px solid var(--err);background:transparent;font-size:.9rem}
footer{display:flex;gap:.5rem;align-items:center;padding:.75rem 0 1rem}
footer #msg{flex:1;min-width:0}
#mic.on{border-color:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.tts{font-size:.8rem;color:var(--dim);white-space:nowrap}
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:5}
#lf{display:flex;flex-direction:column;gap:.8rem;align-items:center;width:min(320px,90vw)}
#lf input,#lf button{width:100%}
#lerr{color:var(--err);min-height:1.4em;margin:0;font-size:.9rem}
#mem,#act{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);background:var(--panel);border-left:1px solid var(--line);padding:1rem;display:flex;flex-direction:column;gap:.7rem;z-index:4}
.memhead{display:flex;justify-content:space-between;align-items:center}
#memList,#actList{flex:1;overflow-y:auto;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
#memList li,#actList li{border:1px solid var(--line);border-radius:8px;padding:.5rem;display:flex;gap:.4rem;align-items:flex-start}
#memList span,#actList span{flex:1;overflow-wrap:anywhere}
#memList button,#actList button{padding:.2rem .5rem;font-size:.8rem}
.memadd{display:flex;gap:.4rem}.memadd input{flex:1;min-width:0}
@media (prefers-reduced-motion:reduce){.orb{animation:none!important}}
.m a{color:var(--cyan);overflow-wrap:anywhere}