:root{color-scheme:dark;--bg:#14121f;--fg:#ece9f5;--me:#3b5bdb;--g:#2a2740;--mut:#9a94b5}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,sans-serif;display:flex;flex-direction:column;height:100dvh}
header{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem .8rem;padding-top:max(.5rem,env(safe-area-inset-top));background:#1d1a2e}
#title{font-weight:600}.dot{font-size:.8rem;color:var(--mut)}.dot.on{color:#69db7c}.dot.off{color:#ff8787}
nav{margin-left:auto;display:flex;gap:.3rem}button{background:#3b3660;color:var(--fg);border:0;border-radius:.5rem;padding:.45rem .8rem;font:inherit}
button.danger{background:#a61e4d}main{flex:1;overflow:auto;padding:.8rem}section{max-width:44rem;margin:0 auto}
input,textarea{width:100%;background:#0e0c18;color:var(--fg);border:1px solid #3b3660;border-radius:.5rem;padding:.55rem;font:inherit;margin:.25rem 0 .6rem}
label{display:block}.muted{color:var(--mut);font-size:.9rem}
#v-chat{display:flex;flex-direction:column;height:100%}#v-chat[hidden]{display:none}#log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:.4rem;padding-bottom:.5rem}
.b{max-width:85%;padding:.5rem .7rem;border-radius:.9rem;white-space:pre-wrap;word-wrap:break-word}.b.me{align-self:flex-end;background:var(--me)}
.b.g{align-self:flex-start;background:var(--g)}.b.alert{align-self:center;background:#5c2a00}.b small{display:block;color:#c9c3e6;font-size:.7rem;margin-top:.2rem}
#send-form{display:flex;gap:.4rem;align-items:flex-end;padding-bottom:env(safe-area-inset-bottom)}#send-form textarea{margin:0;resize:none;max-height:9rem}
ul{padding-left:1rem}li{margin:.3rem 0}li .fail{color:#ff8787}li .ok{color:#69db7c}