:root { --bg:#0b1016; --panel:#121a23; --line:#1f2c3a; --text:#d8e4ee; --muted:#7f93a6;
        --accent:#4fd1ff; --warn:#ffb454; --error:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; min-height:100dvh; background:var(--bg); color:var(--text);
       font:16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; display:flex; flex-direction:column; }
header { display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
h1 { font-size:1rem; letter-spacing:.3em; margin:0; color:var(--accent); }
#who { margin-left:auto; color:var(--muted); font-size:.85rem; }
.dot { width:.6rem; height:.6rem; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.dot.busy { animation:pulse 1s infinite alternate; }
@keyframes pulse { from { opacity:.3 } to { opacity:1 } }
section, main { flex:1; display:flex; flex-direction:column; padding:1rem; max-width:44rem; width:100%; margin:0 auto; }
label { display:block; margin:.6rem 0; color:var(--muted); }
label.inline { display:flex; gap:.4rem; align-items:center; }
.small { font-size:.85rem; }
input { font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:.5rem; padding:.6rem .7rem; }
label > input:not([type]) , label > input[pattern] { display:block; width:100%; margin-top:.25rem; }
fieldset { border:1px solid var(--line); border-radius:.5rem; }
button { font:inherit; color:var(--bg); background:var(--accent); border:0; border-radius:.5rem; padding:.6rem .9rem; cursor:pointer; }
button.ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.error { color:var(--error); }
#log { list-style:none; margin:0; padding:0; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:.6rem; }
#log li { padding:.6rem .8rem; border-radius:.6rem; white-space:pre-wrap; overflow-wrap:anywhere; max-width:90%; }
#log li.me { align-self:flex-end; background:#16324a; }
#log li.jarvis { align-self:flex-start; background:var(--panel); border:1px solid var(--line); }
#log li.notice { align-self:center; color:var(--warn); font-size:.9rem; }
#log li .actions { display:flex; gap:.5rem; margin-top:.5rem; }
#ask-form { display:flex; gap:.5rem; margin-top:.8rem; }
#ask-form input { flex:1; min-width:0; }
#mic { background:var(--panel); color:var(--accent); border:1px solid var(--accent); touch-action:none; user-select:none; }
#mic.on { background:var(--error); color:var(--bg); border-color:var(--error); }
code { color:var(--accent); }