/* Themes: same palettes as the iOS app (AppTheme.swift). */
:root, [data-theme="hud"] {
  --bg:#04080e; --panel:rgba(12,24,38,.72); --accent:#3ee0ff; --text:#d7f4ff; --muted:#6f93a6;
  --ok:#35f2a1; --warn:#ffc24a; --down:#ff4f6d; --border:rgba(62,224,255,.25);
  --r:12px; --rb:14px; --on-accent:#04080e;
  --font:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,monospace; --title:"Rajdhani",system-ui,sans-serif;
  --upper:uppercase; --bgimg:radial-gradient(900px 500px at 50% -10%,rgba(62,224,255,.12),transparent 70%),linear-gradient(rgba(62,224,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(62,224,255,.04) 1px,transparent 1px);
  --bgsize:auto,32px 32px,32px 32px; --blur:none;
}
[data-theme="liquidGlass"] {
  --bg:#0b1030; --panel:rgba(255,255,255,.12); --accent:#7cc4ff; --text:#f4f7ff; --muted:#a9b4d6;
  --ok:#5be3a8; --warn:#ffd166; --down:#ff7a90; --border:rgba(255,255,255,.22);
  --r:22px; --rb:22px; --on-accent:#0b1030;
  --font:system-ui,-apple-system,"Segoe UI",sans-serif; --title:ui-rounded,system-ui,sans-serif; --upper:none;
  --bgimg:radial-gradient(600px 400px at 15% 0%,rgba(124,196,255,.35),transparent 70%),radial-gradient(500px 400px at 90% 30%,rgba(190,120,255,.30),transparent 70%),radial-gradient(500px 400px at 30% 100%,rgba(60,220,170,.22),transparent 70%);
  --bgsize:auto; --blur:blur(18px);
}
[data-theme="flatLight"] {
  --bg:#f5f7fa; --panel:#ffffff; --accent:#0a5fd0; --text:#0f1a2b; --muted:#5b6a7e;
  --ok:#0b7a4b; --warn:#8f5b00; --down:#c0283f; --border:rgba(15,26,43,.12);
  --r:14px; --rb:16px; --on-accent:#ffffff;
  --font:system-ui,-apple-system,"Segoe UI",sans-serif; --title:system-ui,sans-serif; --upper:none; --bgimg:none; --bgsize:auto; --blur:none;
}
[data-theme="nord"] {
  --bg:#2e3440; --panel:rgba(59,66,82,.9); --accent:#88c0d0; --text:#eceff4; --muted:#b0bbcf;
  --ok:#a3be8c; --warn:#ebcb8b; --down:#f09aa3; --border:rgba(216,222,233,.16);
  --r:12px; --rb:14px; --on-accent:#2e3440;
  --font:ui-monospace,SFMono-Regular,Menlo,monospace; --title:system-ui,sans-serif; --upper:none;
  --bgimg:radial-gradient(900px 400px at 50% -10%,rgba(136,192,208,.12),transparent 65%); --bgsize:auto; --blur:none;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg) var(--bgimg);background-size:var(--bgsize);color:var(--text);font:15px/1.45 var(--font);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--title);text-transform:var(--upper);letter-spacing:.06em;margin:0 0 .5rem;color:var(--accent)}
h2{font-size:1.05rem} h3{font-size:.95rem}
a{color:var(--accent)}
button,select,input,textarea{font:inherit;color:inherit}
button{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:.5rem .9rem;cursor:pointer;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
button:hover:not(:disabled){border-color:var(--accent)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}
button.danger{border-color:var(--down);color:var(--down)}
button.small{padding:.25rem .6rem;font-size:.85rem}
input,textarea,select{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:.5rem .7rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:.8rem 1rem;margin:0 0 .8rem;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.muted{color:var(--muted)} .ok{color:var(--ok)} .warn{color:var(--warn)} .down{color:var(--down)}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.spacer{flex:1}

/* shell */
#root{display:flex;flex-direction:column;height:100dvh}
header.bar{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;padding-top:calc(.6rem + env(safe-area-inset-top));border-bottom:1px solid var(--border)}
header.bar h1{margin:0;font-size:1.15rem}
.pill{border:1px solid var(--border);border-radius:99px;padding:.1rem .6rem;font-size:.78rem}
.pill.on{border-color:var(--ok);color:var(--ok)}
nav.tabs{display:flex;gap:.2rem;padding:.3rem .6rem;border-bottom:1px solid var(--border);overflow-x:auto}
nav.tabs button{border:0;background:none;border-radius:99px;white-space:nowrap}
nav.tabs button.active{background:var(--accent);color:var(--on-accent)}
main{flex:1;min-height:0;overflow:auto;padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
main.chatmain{display:flex;flex-direction:column;padding:0}
@media(min-width:900px){main:not(.chatmain){max-width:900px;width:100%;margin:0 auto}}

/* login */
.login{max-width:420px;margin:8vh auto;padding:0 1rem;text-align:center}
.bigcode{font:700 2.4rem/1.2 var(--font);letter-spacing:.25em;color:var(--accent);margin:.6rem 0}
.qr{background:#fff;border-radius:12px;padding:6px;width:220px;height:220px;margin:.4rem auto;display:block}

/* chat */
#log{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.msg{max-width:min(80%,640px);padding:.5rem .8rem;border-radius:var(--rb);border:1px solid var(--border);background:var(--panel);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.julien{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.msg.router{border-color:var(--warn)}
.msg .meta{font-size:.72rem;opacity:.7;margin-top:.2rem}
.msg img{max-width:100%;border-radius:8px;display:block;margin-top:.3rem}
.msg audio{max-width:100%;margin-top:.3rem}
.composer{display:flex;gap:.5rem;padding:.6rem 1rem;padding-bottom:calc(.6rem + env(safe-area-inset-bottom));border-top:1px solid var(--border)}
.composer textarea{flex:1;resize:none;height:2.6rem;max-height:8rem}
.typing{padding:0 1rem;height:1.2rem;font-size:.8rem}

/* misc */
.grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.bar-track{height:8px;border-radius:99px;background:var(--border);overflow:hidden}
.bar-fill{height:100%;background:var(--accent);width:var(--w,0%)}
.days{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.4rem}
.days button.active{background:var(--accent);color:var(--on-accent)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:10}
.modal .panel{max-width:420px;width:100%;background:var(--bg)}
iframe.dash{width:100%;height:calc(100dvh - 11rem);border:1px solid var(--border);border-radius:var(--r);background:var(--bg)}
svg.spark{width:100%;height:48px}
svg.spark polyline{fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border);padding:.5rem 1rem;border-radius:99px;z-index:20;backdrop-filter:var(--blur)}