:root {
  --bg: #ffffff; --fg: #111418; --muted: #3d4651; --line: #8a94a0;
  --card: #f3f5f7; --accent: #0b4f8a; --accent-fg: #ffffff;
  --warn-bg: #ffe08a; --warn-fg: #3a2a00; --ok: #11602f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1216; --fg: #eef1f4; --muted: #c3cad2; --line: #5d6772;
    --card: #1a1f25; --accent: #7db8f0; --accent-fg: #0b1520;
    --warn-bg: #6b5200; --warn-fg: #fff3c4; --ok: #7fd6a0;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
header, main { max-width: 90%; margin: 0 auto; padding: 0 16px; }
@media (max-width: 40rem) { header, main { max-width: none; } }
header { padding-top: 1.5rem; }
h1 { margin: 0; font-size: 1.6rem; }
.sub { margin: .25rem 0 1rem; color: var(--muted); }
a { color: var(--accent); }
.badge { display: inline-block; margin-left: .4rem; padding: 0 .45rem; border: 1px solid var(--line);
  border-radius: 6px; font-size: .8rem; color: var(--muted); }
.sr { position: absolute; left: -9999px; }
#thread { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.q { align-self: flex-end; max-width: 85%; background: var(--accent); color: var(--accent-fg);
  padding: .55rem .8rem; border-radius: 10px; white-space: pre-wrap; }
.a { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; }
.a .status { color: var(--muted); font-size: .9rem; margin: 0 0 .4rem; }
.a .status li { list-style: none; }
.a .status li::before { content: "↳ "; }
.a .status ul { margin: 0; padding: 0; }
.a .body p { margin: .3rem 0; }
.a .body ul, .a .body ol { margin: .3rem 0; padding-left: 1.3rem; }
.a .sources { margin-top: .6rem; font-size: .9rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.a .sources a { margin-right: .8rem; }
.a .stats { margin-top: .3rem; font-size: .8rem; color: var(--muted); }
.a .check { font-size: .85rem; margin-top: .3rem; }
.a .check.ok { color: var(--ok); }
.a .err { color: var(--warn-fg); background: var(--warn-bg); padding: .3rem .5rem; border-radius: 6px; }
mark.unverified { background: var(--warn-bg); color: var(--warn-fg); padding: 0 .15rem; border-radius: 3px; }
form { position: sticky; bottom: 0; background: var(--bg); padding: .5rem 0; }
textarea { width: 100%; font: inherit; color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; resize: vertical; }
textarea:focus, button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; }
.examples { flex: 1 1 18rem; min-width: 0; max-width: 40rem; font-size: .9rem; }
#model-label { font-size: .9rem; color: var(--muted); }
.controls { display: flex; gap: .4rem; align-items: center; }
button, select { font: inherit; border-radius: 6px; padding: .35rem .8rem; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg); }
button.ghost, select { background: transparent; color: var(--fg); border-color: var(--line); }
button:disabled { opacity: .6; cursor: wait; }
.note { color: var(--muted); font-size: .85rem; margin: .5rem 0 2rem; }
.a .export { margin-top: .5rem; padding: .45rem .6rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); font-size: .92rem; }
.a .export-preview { display: block; width: 100%; max-width: 64rem; height: auto; margin-top: .5rem;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.a .context { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); margin-top: .25rem; }
.a .context .bar { flex: 0 0 9rem; height: .5rem; border-radius: 4px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.a .context .bar span { display: block; height: 100%; background: var(--accent); }
.a .context.high .bar span { background: #b77900; }
.a .context.full .bar span { background: #b3261e; }
.a .context.full { color: var(--fg); font-weight: 600; }
/* HAL's eye: a red lens with a bright core. */
.hal { display: inline-block; width: .85em; height: .85em; margin-left: .2em; vertical-align: -.05em;
  border-radius: 50%; border: 2px solid #2b2f36;
  background: radial-gradient(circle at 50% 50%, #ffd36b 0 8%, #ff3b1f 20%, #8a0d00 55%, #1a0300 75%); }
.a .status li.rescue { color: var(--fg); font-weight: 600; }
.a .status li.rescue::before { content: "⏳ "; }
/* The answer in progress: a pulsing dot, the current step, seconds so far. */
.working { display: flex; align-items: center; flex-wrap: wrap; flex: 1 1 16rem; min-width: 0;
  font-size: .9rem; color: var(--fg); font-weight: 600; }
.working[hidden] { display: none; }
.working .w-secs, .working .w-note { font-weight: 400; color: var(--muted); margin-left: .35rem; }
.pulse { display: inline-block; width: .6rem; height: .6rem; margin-right: .45rem; border-radius: 50%;
  background: #ff3b1f; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
/* HAL's eye glows while any answer is in progress. */
body.busy .hal { box-shadow: 0 0 .55em .15em #ff3b1f; animation: pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body.busy .hal { animation: none; } }
.a .flag { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .4rem;
  font-size: .85rem; color: var(--muted); }
.a .flag input { flex: 1 1 16rem; min-width: 0; font: inherit; color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; padding: .25rem .5rem; }
button.small { font-size: .8rem; padding: .2rem .6rem; }
.a .choices:empty { display: none; }
.a .choices { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.a .choices p { margin: 0 .3rem 0 0; font-size: .9rem; font-weight: 600; }
.a .choices button.choice { font-size: .85rem; text-align: left; }
.a .choices button.picked { border-color: var(--accent); color: var(--accent); }