/* One look for every page: near-black, quiet, one accent. Light follows the system. The page-specific CSS only uses these variables. */
:root {
  color-scheme: dark light;
  --bg:#000; --card:#101113; --surface:#1a1b1e; --ink:#ededee; --mute:#8b8d94; --line:#26272b;
  --violet:#ededee; --teal:#12d6b0; --warn:#1f1a0d; --warnline:#5a4a16; --bad:#ff5d5d;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai","Sarabun",Roboto,"Helvetica Neue",sans-serif;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#fff; --card:#f7f7f8; --surface:#efeff1; --ink:#0b0b0f; --mute:#6b6d74; --line:#e5e5e8; --violet:#0b0b0f; --warn:#fff6dc; --warnline:#e8c766; --bad:#d93636; }
}

/* the voice page and the bot's screen page (they have their own layout; this only restyles them) */
body { font-family:var(--font); -webkit-font-smoothing:antialiased; }
.card { border-radius:16px; }
button.go { background:var(--ink); color:var(--bg); border:0; border-radius:999px; font-weight:500; }
button.go.on { background:var(--bad); color:#fff; }
button, select, input { border-radius:12px; }
.msg.user { background:var(--surface); border-color:transparent; }
.msg.bot { background:transparent; border-color:transparent; }
.chip.user { border-color:var(--ink); color:var(--ink); }
header a { color:var(--mute); }
.note { border:1px solid var(--warnline); }