:root {
  /* Brand tokens come from /static/brand/tokens.css (generated by brandbook/build.py). */
  --bg: var(--mm-ground); --panel: var(--mm-surface); --ink: var(--mm-text); --muted: var(--mm-muted);
  --line: var(--mm-line); --accent: var(--mm-brand-text); --accent-soft: var(--mm-brand-soft);
  --mila: var(--mm-brand-text); --danger: #c92a2a;
  font-family: var(--mm-font);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --danger: #ff8787; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.5; }
button, input { font: inherit; }
a { color: var(--accent); }
button { cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 10px; padding: 0.5rem 0.9rem; }
button:hover { border-color: var(--accent); }
button.danger { color: var(--danger); }
button.link { border: none; background: none; color: var(--accent); padding: 0; }
input { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink); }
.muted, .hint { color: var(--muted); font-size: 0.9rem; }
.error { color: var(--danger); }
.empty { color: var(--muted); font-style: italic; }
[hidden] { display: none !important; }

/* Talk page */
.talk { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; max-width: 720px;
  margin: 0 auto; padding: 1.25rem 1.25rem 1.5rem; gap: 1rem; }
.talk header { display: flex; justify-content: space-between; align-items: center; }
.brand { display: inline-flex; color: var(--ink); text-decoration: none; }
.brand img { height: 30px; width: auto; display: block; }
.talk header .row { align-items: baseline; gap: 1rem; }
.stage { display: grid; justify-items: center; align-content: center; gap: 0.75rem; text-align: center; }
.stage .orb { margin-bottom: 1.25rem; }

/* The orb: Mila's voice bars (the isotype's symbol) on an orchid disc. Its look follows
 * data-state on an ancestor: idle, connecting, listening, thinking, speaking. While she
 * speaks, orb.ts sets --l (0..1) on each bar from her audio. data-working on an ancestor
 * (or data-state="deep_thinking") adds a slow ring for "working on it in the background". */
.orb { --size: 176px; --w: 1; position: relative; width: var(--size); height: var(--size);
  border-radius: 50%; border: none; padding: 0; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 32% 26%, #d65ac4 0%, var(--mm-brand) 52%, #5e0d52 100%);
  box-shadow: 0 14px 40px rgba(163, 22, 143, 0.32), inset 0 -6px 18px rgba(40, 0, 34, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease; }
button.orb:hover { border: none; transform: scale(1.02); }
button.orb:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.orb-bars { display: flex; align-items: center; gap: calc(var(--size) * 0.06); height: 44%; }
/* Bars change height, not scale, so their round ends stay round and a bar at rest is a dot. */
.orb-bars i { --l: 0.5; --h: var(--w); --bw: calc(var(--size) * 0.08); width: var(--bw);
  height: max(var(--bw), calc(var(--h) * 100%)); border-radius: 999px; background: #fff;
  transition: height 0.18s ease-out; }
/* The isotype's profile: tall, short, centre, short, tall (170/330, 240/330). */
.orb-bars i:nth-child(1), .orb-bars i:nth-child(5) { --w: 0.52; }
.orb-bars i:nth-child(3) { --w: 0.73; }
.orb::before, .orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; opacity: 0; }

/* Connecting: the bars blink in turn. */
[data-state="connecting"] .orb-bars i { animation: orb-blink 1s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s); }
/* Listening: bars lowered, a halo ripples outward. */
[data-state="listening"] .orb-bars i, [data-state="deep_thinking"] .orb-bars i {
  --h: calc(var(--w) * 0.42); }
[data-state="listening"] .orb::before, [data-state="deep_thinking"] .orb::before {
  border: 3px solid var(--accent); animation: orb-ripple 2.2s ease-out infinite; }
/* Thinking: bars shrink to dots and a wave runs across them. */
[data-state="thinking"] .orb { box-shadow: 0 10px 30px rgba(163, 22, 143, 0.22),
  inset 0 -6px 18px rgba(40, 0, 34, 0.25); }
[data-state="thinking"] .orb-bars i { --h: 0;
  animation: orb-think 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * 0.11s); }
/* Speaking: each bar follows her voice; the glow grows with it. */
[data-state="speaking"] .orb-bars i { --h: calc(0.2 + 0.8 * var(--l) * (0.55 + 0.45 * var(--w)));
  transition-duration: 0.08s; }
[data-state="speaking"] .orb { box-shadow: 0 14px 44px rgba(163, 22, 143, 0.4),
  0 0 0 calc(var(--level, 0) * 22px) rgba(163, 22, 143, 0.16), inset 0 -6px 18px rgba(40, 0, 34, 0.25); }
/* Working on it (background task): a calm ring orbits outside the disc. */
[data-working] .orb::after, [data-state="deep_thinking"] .orb::after { inset: -14px; opacity: 1;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--accent) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: orb-spin 2.8s linear infinite; }
.orb-bars i:nth-child(1) { --i: 0; } .orb-bars i:nth-child(2) { --i: 1; }
.orb-bars i:nth-child(3) { --i: 2; } .orb-bars i:nth-child(4) { --i: 3; }
.orb-bars i:nth-child(5) { --i: 4; }
@keyframes orb-blink { 50% { opacity: 0.35; } }
@keyframes orb-ripple { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.32); opacity: 0; } }
@keyframes orb-think { 50% { height: 42%; } }
@keyframes orb-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .orb, .orb::before, .orb::after, .orb-bars i { animation: none !important; transition: none !important; }
  /* Without motion the states still differ: a solid ring, dots, the full profile, a dashed ring. */
  [data-state="listening"] .orb::before, [data-state="deep_thinking"] .orb::before {
    opacity: 1; transform: scale(1.12); }
  [data-state="speaking"] .orb-bars i { --h: var(--w); }
  [data-working] .orb::after, [data-state="deep_thinking"] .orb::after { -webkit-mask: none; mask: none;
    background: none; border: 3px dashed var(--accent); }
}

#status { font-size: 1.1rem; margin: 0; }
#partial { min-height: 1.5rem; color: var(--muted); margin: 0; }
#activity { min-height: 1.4rem; margin: 0; color: var(--accent); font-size: 0.95rem; }
#captions { max-height: 34vh; overflow-y: auto; display: grid; gap: 0.35rem; }
.line { margin: 0; padding: 0.45rem 0.7rem; border-radius: 12px; max-width: 90%; }
.line.you { justify-self: end; background: var(--accent-soft); }
.line.mila { justify-self: start; background: var(--panel); border: 1px solid var(--line); }
.line.cut::after { content: " …"; color: var(--muted); }
.controls { display: grid; gap: 0.5rem; }
.controls form { display: flex; gap: 0.5rem; }
.sign-in { display: grid; gap: 0.5rem; max-width: 420px; margin: 0 auto; }

/* Admin page */
.admin { max-width: 960px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.admin-head { display: flex; align-items: center; gap: 0.9rem; margin: 0.5rem 0 1rem; }
.admin-head h1 { margin: 0; font-size: 1.3rem; padding-left: 0.9rem; border-left: 1px solid var(--line); }
.admin section { margin-top: 2rem; }
.admin h2 { font-size: 1.15rem; border-bottom: 1px solid var(--line); padding-bottom: 0.35rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1rem;
  margin-bottom: 0.75rem; display: grid; gap: 0.5rem; }
.card header { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.card h3 { margin: 0; }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tools { display: grid; gap: 0.4rem; }
.tool { display: grid; grid-template-columns: 1fr auto auto; gap: 0.75rem; align-items: center;
  padding: 0.4rem 0; border-top: 1px solid var(--line); }
.field { display: grid; gap: 0.25rem; margin-bottom: 0.75rem; }
.field .label { font-weight: 600; }
.inline { display: inline-flex; gap: 0.4rem; align-items: center; }
.inline input { width: auto; }
#add-connector { background: var(--panel); border: 1px dashed var(--line); border-radius: 14px; padding: 1rem; }
ul { padding-left: 1.1rem; }
li.done { text-decoration: line-through; color: var(--muted); }
details { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem; display: grid; gap: 0.35rem; }
summary { cursor: pointer; }
#notice { min-height: 1.4rem; color: var(--accent); }

/* Settings: a card of labelled controls, two columns where there is room. */
#settings { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.4rem 2rem; }
#settings .wide, #settings > .hint, #settings > button[type="submit"] { grid-column: 1 / -1; }
#settings > button[type="submit"] { justify-self: start; background: var(--mm-brand); color: var(--mm-on-brand);
  border-color: var(--mm-brand); font-weight: 600; }
#settings > button[type="submit"]:hover { background: var(--mm-brand-strong); }
#settings .field .row { align-items: center; flex-wrap: nowrap; }
#settings .field .row .row { flex-wrap: wrap; }
#settings input[type="range"] { flex: 1; min-width: 0; padding: 0; border: none; accent-color: var(--accent); }
#settings input[type="checkbox"] { accent-color: var(--accent); }
#settings output { min-width: 7.5rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#settings select { padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font: inherit; max-width: 100%; }
#settings .languages { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }

#links .hint.ok { color: var(--ink); }
#links form input { flex: 1; min-width: 12rem; }

/* Conversations page */
.search { display: flex; gap: 0.5rem; margin: 0.5rem 0 1rem; }
#conversations summary { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.4rem; }
#conversations .preview { grid-column: 1 / -1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transcript { display: grid; gap: 0.35rem; padding-top: 0.5rem; }
#older { margin-top: 0.5rem; }
#conversations details[open] .preview { display: none; }
.search + #notice:empty { display: none; }

/* Settings: your accounts */
#accounts { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0.25rem 1rem; }
.account { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.75rem 0; border-top: 1px solid var(--line); }
.account:first-of-type { border-top: none; }
#accounts .hint.ok { color: var(--ink); }