/* Veridell — generated stylesheet bundle. Do not edit.
 * Built from 17 sheets in cascade order:
 * chat-page.css > system.css > article-layout.css > mobile.css > polish.css > chat-redesign.css > design-system.css > amigo-ui.css > amigo-chat.css > squircle.css > chat-atelier.css > chat-experience.css > chat-capabilities.css > preferences.css > chat-ai-mode.css > chat-google-mode.css > refine.css
 */
/* ── chat-page.css ── */
/* Veridell chat — the answer surface.
 *
 * One page, four parts, top to bottom: a rail of past chats, a thin header,
 * one reading column, one composer. Nothing floats over the text.
 *
 * The design language is the mark: a rising sun over two currents. So the
 * page is built on two notes only — a deep indigo-green ink for structure and
 * a warm brass for anything the reader can act on — and the sun is used once,
 * in the empty state, where it has room to be a sun.
 *
 * Dark and light are the same tokens with different values, so the two can
 * never drift apart.
 */

/* ── tokens ────────────────────────────────────────────────────────────── */
:root {
  --bg: #0b0f0e;
  --rail: #0d1211;
  --panel: #121a18;
  --panel-2: #17211e;
  --line: #1e2b27;
  --line-2: #2b3b35;
  --ink: #edf2ef;
  --ink-2: #b9c7c1;
  --muted: #7d8f88;
  --accent: #5fc79a;
  --brass: #c4762f;
  --brass-soft: #d99a5e;
  --user: #16302a;
  --shadow: 0 18px 44px -26px rgba(0, 0, 0, .75);

  --col: 768px;
  --rail-w: 264px;
  --r: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Devanagari', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Tiro Devanagari Hindi', serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[data-theme="light"] {
  --bg: #fbf8f2;
  --rail: #f4f0e6;
  --panel: #ffffff;
  --panel-2: #f8f4ec;
  --line: #e6e0d2;
  --line-2: #d5ccb9;
  --ink: #14201c;
  --ink-2: #3b4a44;
  /* #6b7873 measured 4.05:1 on the rail and 4.35:1 on the page — both below
     the 4.5:1 AA floor, and eight labels used it. This clears 5.19:1 on the
     rail, which is the darkest surface it can land on. */
  --muted: #5a6660;
  --accent: #1a7a52;
  --brass: #a8622c;
  --brass-soft: #8f5222;
  --user: #e7f1ea;
  --shadow: 0 18px 40px -30px rgba(20, 30, 26, .45);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The shell is a grid, declared once at the end of this file. 100vh is kept
     as the fallback because older browsers ignore dvh. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* The mark is defined once in the markup and pointed at with <use>. */
.mark-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  padding: 10px 14px; background: var(--accent); color: #04150d;
  font-weight: 650; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── the rail ──────────────────────────────────────────────────────────── */
.rail {
  background: var(--rail);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 12px 14px;
  min-height: 0;
  overflow: hidden;
}

.brand {
  display: flex; align-items: center; gap: 11px;
  padding: 2px 6px 12px;
  color: var(--ink); text-decoration: none;
}
.brand .mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .8);
}
.brand .mark svg { width: 100%; height: 100%; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text b {
  font-family: var(--serif);
  font-size: 18px; font-weight: 600; letter-spacing: -0.015em;
}
.brand-text em {
  font-style: normal;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass-soft);
}

.rail-new {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: 11px;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.rail-new:hover { border-color: var(--accent); background: var(--panel); }
.rail-new svg { width: 14px; height: 14px; flex: none; }
.rail-new span { flex: 1 1 auto; text-align: left; }
.rail-new kbd {
  font: 600 10px/1 var(--sans);
  padding: 3px 5px; border-radius: 5px;
  border: 1px solid var(--line-2); color: var(--muted);
}

.rail-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--muted);
  transition: border-color .15s var(--ease);
}
.rail-search:focus-within { border-color: var(--line-2); color: var(--ink-2); }
.rail-search svg { width: 13px; height: 13px; flex: none; }
.rail-search input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  color: var(--ink); font: inherit; font-size: 12.5px;
}
.rail-search input::placeholder { color: var(--muted); }
.rail-search input::-webkit-search-cancel-button { display: none; }

.rail-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.rail-head {
  margin: 14px 6px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.rail-head-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 14px 6px 6px;
}
.rail-head-row .rail-head { margin: 0; }
.rail-count {
  display: inline-block; margin-left: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0;
  color: var(--muted); opacity: .85;
}
.rail-clear {
  border: 0; border-radius: 7px; padding: 3px 7px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 10.5px; font-weight: 650; letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .12s var(--ease), color .12s var(--ease);
}
.rail-clear:hover { background: color-mix(in srgb, #b3261e 14%, transparent); color: #d2604f; }

/* Today / Earlier */
.rail-group {
  margin: 10px 6px 4px;
  font-size: 10px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); opacity: .8;
}

.rail-list { display: flex; flex-direction: column; gap: 1px; }
.rail-empty { margin: 4px 6px; font-size: 11.5px; color: var(--muted); line-height: 1.55; }

/* one row per chat: open it, or delete it */
.rail-row {
  display: flex; align-items: center; gap: 2px;
  border-radius: 9px;
  transition: background-color .12s var(--ease);
}
.rail-row:hover { background: var(--panel); }
.rail-row.is-active { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.rail-row .rail-item {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 10px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 12.5px; text-align: left;
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-row .rail-item.is-active { color: var(--ink); font-weight: 550; }
.rail-del {
  flex: none;
  width: 26px; height: 26px; margin-right: 4px;
  display: grid; place-items: center;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--muted);
  cursor: pointer; opacity: 0;
  transition: opacity .12s var(--ease), background-color .12s var(--ease), color .12s var(--ease);
}
.rail-del svg { width: 13px; height: 13px; }
.rail-row:hover .rail-del,
.rail-row:focus-within .rail-del,
.rail-del:focus-visible { opacity: 1; }
.rail-del:hover { background: color-mix(in srgb, #b3261e 16%, transparent); color: #d2604f; }
@media (hover: none) { .rail-del { opacity: .7; } }

.rail-foot {
  margin: 0; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 11px; color: var(--muted);
  display: flex; align-items: center; gap: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-foot .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ── the main column ───────────────────────────────────────────────────── */
.main {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}

.top {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 24px; min-height: 56px; flex: none;
  border-bottom: 1px solid transparent;
}
.top h1 {
  margin: 0; font-size: 13px; font-weight: 550; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: min(52ch, 62%);
}
.top-right { margin-left: auto; display: flex; gap: 2px; }
.top-right .ico[hidden] { display: none; }

.ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color .14s var(--ease), color .14s var(--ease);
}
.ico:hover { background: var(--panel); color: var(--ink); }
.ico svg { width: 16px; height: 16px; }
.rail-toggle { margin-right: 2px; }

.scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 0 24px;
  scroll-behavior: auto;
}
.scroll:focus { outline: none; }

.stage {
  max-width: var(--col);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 20px 0 12px;
}

/* ── the first screen ──────────────────────────────────────────────────── */
body.is-empty .scroll { display: flex; align-items: center; justify-content: center; }
body.is-empty .stage { gap: 0; padding: 0; width: 100%; }
body.is-empty .thread { display: none; }
body:not(.is-empty) .empty { display: none; }

.empty { text-align: center; }

/* The sun, at the size it was drawn for. */
.empty-mark {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.empty-mark svg { width: 100%; height: 100%; display: block; }

.empty .empty-heading {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(27px, 3.5vw, 36px);
  font-weight: 400; line-height: 1.18; letter-spacing: -0.02em;
}
.empty .empty-heading em { font-style: normal; color: var(--brass-soft); }
.empty > p {
  margin: 0 auto 28px; max-width: 44ch;
  color: var(--muted); font-size: 14.5px;
}

.starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 10px;
  text-align: left;
}
.starters button {
  padding: 14px 15px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.starters button:hover { border-color: var(--brass); transform: translateY(-1px); }
.starters b {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brass-soft); margin-bottom: 4px;
}
.starters span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* Under the starters: the three doors out of the chat into the rest of the
   site. Quiet, one line, so they never compete with the question box. */
.empty-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  margin-top: 22px;
}
.empty-links a {
  font-size: 12px; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.empty-links a:hover { color: var(--ink); border-bottom-color: var(--line-2); }

/* ── the conversation ──────────────────────────────────────────────────── */
.thread { display: flex; flex-direction: column; gap: 26px; }

.q {
  align-self: flex-end;
  max-width: 82%;
  padding: 10px 15px;
  border-radius: 16px 16px 5px 16px;
  background: var(--user);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  font-size: 14.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.a { display: flex; gap: 12px; }
/* The answer's avatar is the mark itself, not a coloured square. */
.a::before {
  content: "";
  width: 26px; height: 26px; flex: none; margin-top: 2px;
  border-radius: 9px;
  background-image: url("/assets/img/brand/facet.svg");
  background-size: cover;
  background-repeat: no-repeat;
}
.a > * { min-width: 0; }
.a-body { flex: 1 1 auto; min-width: 0; }

.a-meta {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.a-meta .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.a-meta .who {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em;
  text-transform: none; color: var(--ink);
}
.a-meta .badge {
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  font-size: 9px; font-weight: 650; letter-spacing: 0.06em;
}
.a-meta .src-name {
  text-transform: none; letter-spacing: 0;
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── the answer, as prose ──────────────────────────────────────────────── */
.md { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
.md > *:first-child { margin-top: 0; }
.md p { margin: 0; line-height: 1.68; }
.md h2, .md h3, .md h4 {
  margin: 6px 0 0;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--brass-soft);
}
.md h2 { font-size: 12px; }
.md > p:first-child {
  font-family: var(--serif);
  font-size: 17.5px; line-height: 1.6; color: var(--ink);
}
.md strong { color: var(--ink); font-weight: 600; }
.md ul, .md ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.md li::marker { color: var(--brass); }
.md blockquote {
  margin: 0; padding: 6px 14px;
  border-left: 2px solid var(--line-2);
  color: var(--muted); font-style: italic;
}
.md code {
  padding: 1px 5px; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-family: var(--mono);
  font-size: .9em; color: var(--ink);
}
.md hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.md a { color: var(--brass-soft); text-decoration: none; }
.md a:hover { text-decoration: underline; }
.md-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.md.typing::after {
  content: "";
  display: inline-block;
  width: 6px; height: 1em; margin-left: 2px;
  vertical-align: -0.15em;
  border-radius: 2px;
  background: var(--accent);
  animation: caret 1s steps(2, start) infinite;
}
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.cite {
  display: inline-block; min-width: 15px;
  padding: 0 3px; margin: 0 1px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 9.5px; font-weight: 750;
  text-align: center; text-decoration: none;
  vertical-align: super; line-height: 1.5;
}
.cite:hover { background: var(--accent); color: #04150d; }

/* ── sources: a short list of cards, two up ───────────────────────────── */
.src-panel { margin-top: 16px; }
.src-head {
  margin: 0 0 8px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.src-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}
.src-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel);
  color: var(--ink-2); text-decoration: none;
  transition: border-color .14s var(--ease), background-color .14s var(--ease), transform .14s var(--ease);
}
.src-card:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
.src-n {
  flex: none; width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 10px; font-weight: 750;
}
.src-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.src-t {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.src-d { font-size: 10.5px; color: var(--muted); }

.a-actions { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.a-actions button {
  padding: 6px 10px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 11.5px; font-weight: 550; cursor: pointer;
  transition: background-color .12s var(--ease), color .12s var(--ease);
}
.a-actions button:hover { background: var(--panel); color: var(--ink); }
.a-actions button[data-speak="on"] { color: var(--accent); }

.followups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.followups button {
  padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 12px; cursor: pointer;
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.followups button:hover { border-color: var(--brass); color: var(--ink); }

/* ── states ────────────────────────────────────────────────────────────── */
.working { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 13px; }
.working .amigo-avatar { width: 22px; height: 22px; }

.note {
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--brass) 42%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brass) 8%, transparent);
}
.note strong { display: block; margin-bottom: 3px; font-size: 13.5px; }
.note p { margin: 0 0 9px; font-size: 13px; color: var(--ink-2); }
.note button {
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--brass); background: transparent;
  color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}

/* ── saved answers ─────────────────────────────────────────────────────── */
.saved-top { display: flex; align-items: center; gap: 10px; }
.saved-top h2 { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 600; }
.saved-top button {
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
}
.saved-card {
  padding: 14px 15px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
}
.saved-card h3 { margin: 0 0 5px; font-size: 13.5px; }
.saved-card p { margin: 0 0 9px; font-size: 12.5px; color: var(--muted); }

/* The quiet buttons in the saved view (Back, Remove) and anywhere else a
   button is secondary to the content around it. */
.ghost {
  padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 550;
  cursor: pointer;
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.ghost:hover { border-color: var(--line-2); color: var(--ink); }

/* ── the composer ──────────────────────────────────────────────────────── */
.dock { flex: none; padding: 14px 24px 20px; }
.dock-in { max-width: var(--col); margin: 0 auto; width: 100%; }

.composer {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 8px 8px 9px;
  border: 1px solid var(--line-2); border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 10px 30px -26px rgba(0, 0, 0, .8);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2));
  box-shadow: 0 14px 34px -24px rgba(0, 0, 0, .85);
}
.composer textarea {
  flex: 1; min-width: 0;
  min-height: 26px; max-height: 168px;
  padding: 7px 4px;
  border: 0; outline: none; resize: none;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 14.5px; line-height: 1.55;
}
.composer textarea::placeholder { color: var(--muted); }

.plus, .mic {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  color: var(--ink-2); cursor: pointer;
  transition: border-color .14s var(--ease), color .14s var(--ease), transform .14s var(--ease);
}
.mic { border: 0; color: var(--muted); width: 32px; height: 32px; font-size: 0; }
.plus svg, .mic svg { width: 15px; height: 15px; }
.plus:hover, .mic:hover { color: var(--ink); border-color: var(--accent); }
.mic.is-listening { color: var(--accent); }
.mic.is-listening svg { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.composer .send {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--accent); color: #04150d; cursor: pointer;
  transition: transform .14s var(--ease), opacity .14s var(--ease);
}
.composer .send:hover:not(:disabled) { transform: translateY(-1px); }
.composer .send:disabled { opacity: .38; cursor: default; }
.composer .send svg { width: 15px; height: 15px; }

.composer .stop {
  flex: none; height: 34px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 17px;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}

.meta-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 9px; padding: 0 6px;
  font-size: 11px; color: var(--muted);
}
.meta-row .grow { flex: 1; }
.meta-row .mchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent;
  color: var(--ink-2); font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.meta-row .mchip::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brass); flex: none;
}
.meta-row .mchip:hover { border-color: var(--brass); color: var(--ink); }
.meta-row .mchip[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.hint {
  margin: 0; font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.offline {
  margin: 0 0 8px; padding: 8px 12px;
  border: 1px solid var(--brass); border-radius: 10px;
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--brass) 12%, transparent);
}
.offline[hidden] { display: none; }

/* ── answer options: one panel, opened from the chip or the plus ───────── */
.options-panel {
  display: grid; gap: 10px;
  margin-bottom: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.options-panel[hidden] { display: none; }
.options-panel .opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.options-panel .opt > span {
  font-size: 12px; color: var(--muted);
  font-weight: 600; letter-spacing: .01em;
}
.options-panel select {
  appearance: none;
  padding: 7px 26px 7px 10px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg);
  color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 12px;
}
.options-panel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── the small floating things ─────────────────────────────────────────── */
.jump {
  position: fixed;
  left: calc(var(--rail-w) + (100vw - var(--rail-w)) / 2);
  transform: translateX(-50%);
  bottom: 138px; z-index: 40;
  padding: 7px 14px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--panel); color: var(--ink-2);
  font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.jump:hover { border-color: var(--accent); color: var(--ink); }
.jump[hidden] { display: none; }

.chat-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 70;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--panel); color: var(--ink);
  font-size: 12.5px; box-shadow: var(--shadow);
}
.chat-toast button {
  border: 0; background: transparent; color: var(--accent);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 4px 8px; border-radius: 999px;
}
.chat-toast button:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* ── the shell ─────────────────────────────────────────────────────────────
   Declared once, here, after everything that could compete with it. The rail
   is a column; the main area is three rows: header, reading column, composer.
   `display: contents` on .main lets its three children take grid rows of
   their own, so the composer is always the last row and can never end up
   beside the header. */
body {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.rail   { grid-column: 1; grid-row: 1 / -1; height: 100%; min-height: 0; }
.main   { display: contents; }
.top    { grid-column: 2; grid-row: 1; }
.scroll { grid-column: 2; grid-row: 2; }
.dock   { grid-column: 2; grid-row: 3; }

body.rail-hidden { grid-template-columns: 0 minmax(0, 1fr); }
.rail { transition: transform .22s var(--ease), opacity .18s var(--ease); }
body.rail-hidden .rail {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  border-right: 0;
}

/* ── laptops ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) and (min-width: 901px) {
  :root { --rail-w: 218px; --col: 660px; }
  .rail { padding: 14px 9px 12px; }
  .rail-row .rail-item { font-size: 12px; }
  .rail-new kbd { display: none; }
}
@media (min-width: 1101px) {
  :root { --col: 720px; }
}

/* ── phones: the rail is a drawer ──────────────────────────────────────── */
@media (max-width: 900px) {
  body { grid-template-columns: minmax(0, 1fr); }
  body.rail-hidden { grid-template-columns: minmax(0, 1fr); }

  .rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 60;
    width: min(292px, 86vw);
    height: 100%;
    padding: max(16px, env(safe-area-inset-top)) 12px 14px;
    transform: translateX(-100%);
    opacity: 1;
    border-right: 1px solid var(--line);
    box-shadow: 0 0 48px rgba(0, 0, 0, .45);
  }
  body:not(.rail-hidden) .rail { transform: translateX(0); }
  body:not(.rail-hidden)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, .45);
  }

  .top { padding: 10px 16px; }
  .top h1 { max-width: 56%; }
  .scroll { padding: 0 16px; }
  .dock { padding: 10px 16px max(14px, env(safe-area-inset-bottom)); }
  .dock-in { max-width: 100%; }

  .q { max-width: 92%; }
  .jump { left: 50%; bottom: 128px; }
  .empty .empty-heading { font-size: 26px; }
  .empty-mark { width: 54px; height: 54px; border-radius: 17px; margin-bottom: 14px; }
  .starters { grid-template-columns: 1fr; }
  .meta-row .hint { display: none; }
  .options-panel { margin-bottom: 8px; }
  .a { gap: 10px; }
  .a::before { width: 22px; height: 22px; border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .md.typing::after,
  .mic.is-listening svg { animation: none; }
  .rail, .composer, .starters button, .composer .send { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE ASSISTANT SURFACE, SETTLED
   ══════════════════════════════════════════════════════════════════════════
   Four things a reader asked for after using the page for a while, all of
   them about the same complaint — that it read like a form rather than like
   an assistant:

     · the answer column was narrower than the reading column elsewhere on
       the site, so long answers wrapped early and scrolled for ever;
     · the question bubble was a heavy block of colour;
     · the sources under an answer were chips in a row that pushed the page
       sideways on a phone;
     · the composer sat in its own tray with a visible seam.

   None of these change what the page does. They change how much of the
   screen the reading gets. */

/* The answer column matches the site's reading measure. */
.stage { max-width: var(--col); padding: 26px 0 16px; gap: 30px; }

/* The question is a quiet mark in the margin, the way an assistant app
   shows what you asked without shouting it. */
.q {
  max-width: min(78%, 46ch);
  padding: 10px 16px;
  border-radius: 18px 18px 6px 18px;
  background: color-mix(in srgb, var(--user) 78%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  font-size: 14.5px;
  line-height: 1.55;
}

/* The answer itself: more air between blocks, a real heading rhythm. */
.a { gap: 14px; }
.a-body { padding-bottom: 4px; }
.md { gap: 14px; font-size: 15px; line-height: 1.72; }
.md p { line-height: 1.72; }
.md h2 { font-size: 12px; letter-spacing: .08em; margin-top: 12px; }
.md ul, .md ol { padding-left: 1.15em; }
.md li { margin: 5px 0; line-height: 1.65; }

/* Sources wrap instead of running off the side of a phone. */
.src-chips, .a-sources, .chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  max-width: 100%;
}

/* The composer: one surface, no tray, and it stays put while the answer
   scrolls. The seam under it was the dock's padding showing through.
   It is a grid row, not a sticky element: `position: sticky` on a grid item
   whose row is `auto` resolved the row to zero height, which left the
   composer floating in the middle of the page — the audit's F-01. The grid
   already pins it to the last row, so sticky has nothing to add. */
.dock {
  position: relative; bottom: auto;
  padding: 10px 24px 18px;
  background: linear-gradient(to top, var(--bg) 62%, color-mix(in srgb, var(--bg) 0%, transparent));
}
.dock-in { max-width: var(--col); }
.composer {
  border-radius: 26px;
  padding: 9px 9px 9px 14px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: 0 14px 40px -30px rgba(0, 0, 0, .9);
}
.composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line-2));
  box-shadow: 0 18px 46px -28px rgba(0, 0, 0, .95);
}
.composer textarea { font-size: 15px; padding: 8px 2px; }
.composer .send { width: 36px; height: 36px; }
.composer .send svg { width: 16px; height: 16px; }

/* The empty state is the first thing anyone sees: give the heading room. */
.empty .empty-heading { font-size: clamp(29px, 3.8vw, 40px); }
.empty > p { max-width: 48ch; font-size: 15px; }
.starters { gap: 11px; }
.starters button { padding: 15px 16px; border-radius: 15px; }
.starters span { font-size: 13px; }

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .stage { padding: 16px 0 10px; gap: 24px; }
  .q { max-width: 88%; }
  .dock { padding: 8px 12px 14px; }
  .composer { padding: 7px 7px 7px 12px; border-radius: 22px; }
  .composer textarea { font-size: 15.5px; }
  .md { font-size: 14.5px; }
  .empty .empty-heading { font-size: clamp(25px, 7vw, 32px); }
  .starters { grid-template-columns: 1fr; }
  .top { padding: 10px 14px; }
  .scroll { padding: 0 14px; }
}

/* Nothing on this page may scroll sideways. */
html, body { max-width: 100%; overflow-x: hidden; }
.main, .scroll, .stage, .thread, .a, .a-body { min-width: 0; }

/* ── the pre-ask note ─────────────────────────────────────────────────────
   The audit's F-03: the chat is the only part of the product that sends the
   reader's words to a third party, and the empty page never said so. This
   sits under the composer, in the muted token, until the first answer
   arrives — then the thread's own sources take over the explaining. */
.chat-note {
  margin: 10px 2px 0;
  max-width: 72ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
body:not(.is-empty) .chat-note { display: none; }

@media (max-width: 760px) {
  .chat-note { font-size: 12px; line-height: 1.5; margin-top: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE SHELL, SETTLED — the composer is on the floor
   ══════════════════════════════════════════════════════════════════════════
   The audit's F-01: on an empty chat the question box floated about
   two-thirds of the way down the page with 190 px of dead space beneath it,
   and it moved again the moment the first answer arrived.

   The cause was the shell itself. `.main` was `display: contents`, so its
   three children were asked to occupy rows of the body's grid — and the third
   row resolved to zero height, which left the composer pinned to the top of a
   zero-height area. Measured at 1440×1000: grid rows 59px / 941px / 0px, dock
   top 583px.

   So the main column is a flex column of its own: header, thread, composer,
   in that order, with the thread taking the remaining height. The composer is
   therefore always the last thing on the page and always on the floor, empty
   conversation or not. */

body {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

.rail { grid-column: 1; grid-row: 1; height: 100%; min-height: 0; }

.main {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.top   { grid-column: auto; grid-row: auto; flex: 0 0 auto; }
.scroll { grid-column: auto; grid-row: auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dock  { grid-column: auto; grid-row: auto; flex: 0 0 auto; }

/* the empty state centres inside the thread area, not inside the page */
body.is-empty .scroll {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.is-empty .stage { width: 100%; padding: 0 0 8px; }
body:not(.is-empty) .scroll { display: block; }

@media (max-width: 900px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .main { grid-column: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AI MODE — the chat, rebuilt as an assistant surface
   ══════════════════════════════════════════════════════════════════════════
   The page was a dark two-column shell with a serif greeting, a small
   composer and cards inside cards. It read as a settings screen with a text
   box in it, not as something you ask a question of.

   What it is now, in the shape Google's AI Mode and Gemini use:

     · one calm surface, sans-serif throughout, no decorative panels
     · the question box is the loudest thing on the page: a large pill with a
       soft edge, and it never moves between states
     · the greeting is short and left alone; the example questions are pills
     · an answer is prose in a 720px column, with the sources as a row of
       small numbered chips above it and follow-up questions as pills below
     · the rail is a quiet list of past chats, and a drawer on a phone

   Nothing about the behaviour changes: same ids, same classes, same script. */

/* ── the surface ────────────────────────────────────────────────────────── */
:root {
  --bg: #0e1211;
  --rail: #121716;
  --panel: #161c1a;
  --panel-2: #1b2220;
  --line: #232b28;
  --line-2: #303a36;
  --ink: #f0f3f1;
  --ink-2: #c3ccc7;
  --muted: #9aa5a0;
  --accent: #6cc9a0;
  --brass: #d08a4e;
  --brass-soft: #dda066;
  --user: #1d2624;
  --col: 720px;
  --rail-w: 248px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

html[data-theme="light"] {
  --bg: #fdfdfb;
  --rail: #f7f6f2;
  --panel: #ffffff;
  --panel-2: #f2f1ec;
  --line: #e8e6df;
  --line-2: #d8d5cb;
  --ink: #1c1f1e;
  --ink-2: #3c4441;
  --muted: #5c635f;
  --accent: #1f6f56;
  --brass: #9c5a26;
  --brass-soft: #8a5220;
  --user: #f0efe9;
}

/* Sans everywhere. The serif greeting was the single biggest reason the page
   read as an article rather than as an assistant. */
.empty .empty-heading,
.brand-text b,
.md h2, .md h3, .md h4 {
  font-family: var(--sans);
}

/* ── the rail: quiet ────────────────────────────────────────────────────── */
.rail { border-right: 1px solid var(--line); padding: 14px 10px 12px; gap: 8px; }
.brand { padding: 2px 6px 10px; }
.brand .mark { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
.brand-text b { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.brand-text em { font-size: 9px; letter-spacing: .16em; color: var(--muted); }
.rail-new { border-radius: 999px; padding: 9px 12px; font-size: 12.5px; border-color: var(--line-2); }
.rail-search { border-radius: 999px; }
.rail-head-row { margin: 12px 6px 4px; }
.rail-row .rail-item { font-size: 12.5px; padding: 7px 10px; }
.rail-foot { border-radius: 999px; font-size: 10.5px; }

/* ── the header: thin, no rule ──────────────────────────────────────────── */
.top { padding: 10px 20px; min-height: 52px; }
.top h1 { font-size: 13px; font-weight: 500; color: var(--muted); }

/* ── the first screen ───────────────────────────────────────────────────── */
/* Greeting near the top and the box at the bottom, the way an assistant app
   opens: the eye goes to the greeting, the hand goes to the box. */
body.is-empty .scroll { align-items: flex-start; }
body.is-empty .stage { padding-top: clamp(24px, 9vh, 96px); }
body.is-empty .empty { text-align: left; max-width: var(--col); margin-inline: auto; width: 100%; }

.empty-mark { width: 44px; height: 44px; margin: 0 0 20px; border-radius: 14px; box-shadow: none; }
.empty .empty-heading {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.022em;
  margin: 0 0 10px;
}

.empty > p { margin: 0 0 24px; max-width: 52ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* the example questions: pills, two to a row, not cards */
.starters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  text-align: left;
}
.starters button {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}
.starters button:hover { border-color: var(--line-2); background: var(--panel-2); transform: none; }
.starters b { display: none; }
.starters span { font-size: 13px; color: inherit; }

.empty-links { justify-content: flex-start; gap: 6px 16px; margin-top: 22px; }
.empty-links a { font-size: 12.5px; }

/* ── the question box ───────────────────────────────────────────────────── */
.dock {
  padding: 8px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 70%, color-mix(in srgb, var(--bg) 0%, transparent));
}
.composer {
  border-radius: 26px;
  padding: 10px 10px 10px 18px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: 0 6px 24px -18px rgba(0, 0, 0, .5);
  gap: 8px;
}
.composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line-2));
  box-shadow: 0 8px 28px -18px rgba(0, 0, 0, .55);
}
.composer textarea {
  font-size: 16px;
  line-height: 1.5;
  padding: 9px 2px;
  min-height: 28px;
  color: var(--ink);
}

.plus, .mic { width: 32px; height: 32px; border: 0; color: var(--muted); }
.plus:hover, .mic:hover { color: var(--ink); background: var(--panel-2); border-radius: 50%; }
.composer .send {
  width: 38px; height: 38px;
  background: var(--accent);
  color: #06231a;
}
html[data-theme="light"] .composer .send { color: #ffffff; }
.composer .send svg { width: 17px; height: 17px; }

.meta-row { margin-top: 8px; padding: 0 4px; font-size: 10.5px; }
.meta-row .mchip { border: 0; padding: 4px 8px; font-size: 11px; background: transparent; }
.meta-row .mchip::before { background: var(--accent); }
.hint { font-size: 10.5px; }

.chat-note { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin-top: 8px; }

/* ── the conversation ───────────────────────────────────────────────────── */
.stage { padding: 18px 0 8px; gap: 26px; }
.thread { gap: 28px; }

/* the question: a soft bubble on the right, not a block of colour */
.q {
  align-self: flex-end;
  max-width: min(80%, 52ch);
  padding: 10px 16px;
  border-radius: 20px 20px 6px 20px;
  background: var(--user);
  border: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

/* the answer: an assistant line, then prose */
.a { gap: 12px; }
/* the legacy second mark that used to sit beside every answer: removed. The
   avatar in .a-meta is the assistant's one identity on the page. */
.a::before { content: none; }
.a-meta { margin-bottom: 4px; }
.a-meta .who { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.a-meta .badge { border-radius: 999px; font-size: 9.5px; }
.md { font-size: 15.5px; line-height: 1.75; gap: 14px; color: var(--ink); }
.md p { line-height: 1.75; }
.md h2, .md h3, .md h4 {
  font-size: 13px; font-weight: 650;
  letter-spacing: .04em; text-transform: none;
  color: var(--brass-soft);
  margin-top: 10px;
}
.md ul, .md ol { padding-left: 1.1em; }
.md li { margin: 6px 0; }
.md a { color: var(--accent); }

/* ── the sources: a row of numbered chips above the answer ──────────────── */
.src-panel { margin: 0 0 6px; padding: 0; border: 0; background: none; }
.src-head {
  margin: 0 0 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.src-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.src-card {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12px; line-height: 1.3;
  color: var(--ink-2);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.src-card:hover { border-color: var(--line-2); background: var(--panel-2); color: var(--ink); }

/* ── follow-ups and actions ─────────────────────────────────────────────── */
.followups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.followups button, .followups a {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 12.5px;
  color: var(--ink-2);
}
.followups button:hover, .followups a:hover { background: var(--panel-2); border-color: var(--line-2); color: var(--ink); }

.a-actions { margin-top: 12px; gap: 4px; }
.a-actions button, .a-actions a {
  border: 0; background: transparent;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.a-actions button:hover, .a-actions a:hover { background: var(--panel-2); color: var(--ink); }

/* ── the small floating things ──────────────────────────────────────────── */
.jump {
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .6);
  font-size: 12px;
}

/* ── a phone ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .top { padding: 8px 12px; }
  .scroll { padding: 0 14px; }
  body.is-empty .stage { padding-top: 18px; }
  .empty .empty-heading { font-size: clamp(24px, 7vw, 30px); }
  .empty > p { font-size: 14px; margin-bottom: 18px; }
  .starters { gap: 6px; }
  .starters button { padding: 8px 12px; font-size: 12.5px; }
  .dock { padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .composer { border-radius: 22px; padding: 8px 8px 8px 14px; }
  .composer textarea { font-size: 16px; }
  .q { max-width: 88%; font-size: 14.5px; }
  .md { font-size: 15px; }
  .chat-note { display: none; }
}

/* The phone navigation bar sits at the bottom of the viewport, and the chat
   shell is a fixed-height column — so the composer was overlapping the bar by
   a few pixels and the note under it was half hidden behind it. The dock
   clears the bar instead. */
@media (max-width: 1024px) {
  .dock { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body.is-empty .chat-note { margin-bottom: 2px; }
}

/* ── the same soft material as the rest of the site ──────────────────────
   The chat was rebuilt as an assistant surface but still used hairline
   outlines for its chips and its composer, which is the drawn-box look the
   rest of the site has just dropped. Chips are a tone now, the composer is a
   lifted surface, and the rail divider is a whisper. */

.starters button,
.src-card,
.followups button,
.followups a {
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--ink) 4%, transparent);
  transition: background-color .24s cubic-bezier(.22,.61,.36,1),
              box-shadow .24s cubic-bezier(.22,.61,.36,1),
              transform .24s cubic-bezier(.22,.61,.36,1);
}
.starters button:hover,
.src-card:hover,
.followups button:hover,
.followups a:hover {
  background: var(--panel-2);
  box-shadow: 0 6px 18px -14px color-mix(in srgb, var(--ink) 40%, transparent);
  transform: translateY(-1px);
}

.composer {
  border: 1px solid transparent;
  background: var(--panel);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 4%, transparent),
              0 18px 44px -30px color-mix(in srgb, var(--ink) 45%, transparent);
}
.composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent),
              0 22px 52px -30px color-mix(in srgb, var(--ink) 50%, transparent);
}

.rail { border-right: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.rail-new,
.rail-search { border-color: transparent; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.rail-new:hover,
.rail-search:focus-within { background: var(--panel); border-color: transparent; }

.jump { border-color: transparent; box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--ink) 60%, transparent); }
.meta-row .mchip { background: transparent; box-shadow: none; }
.a-actions button, .a-actions a { border-radius: 999px; }

/* the answer's own avatar: a soft dot, not a framed square */
.a::before { box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--ink) 50%, transparent); }

/* ══════════════════════════════════════════════════════════════════════════
   THE CONVERSATION
   ══════════════════════════════════════════════════════════════════════════
   The page had the right parts in the right order, but it did not read as a
   conversation: every turn was a block of document, spaced the same as every
   other block, with a label above it. A reader could not see at a glance
   where their question ended and the answer began.

   A transcript now. The question is a message on the right, the answer is a
   message on the left under the mark, and the pair is tighter than the gap
   between turns — which is what makes a chat scan as a dialogue rather than
   as a list of sections. Nothing is added to the markup; the script already
   emits `q` then `a` for each turn, so the sibling selector can do the
   grouping. */

.thread { gap: 10px; }

/* a turn: the question, then its answer, then a wide gap before the next */
.q { margin-top: 18px; }
.q:first-child { margin-top: 0; }
.q + .a { margin-top: 4px; }
.a + .q { margin-top: 26px; }

/* the question, as a message */
.q {
  align-self: flex-end;
  max-width: min(82%, 54ch);
  padding: 11px 16px;
  border-radius: 20px 20px 6px 20px;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
}
html[data-theme="light"] .q { background: color-mix(in srgb, var(--accent) 12%, #ffffff); }

/* the answer, as a message from the assistant */
.a {
  align-self: flex-start;
  max-width: 100%;
  gap: 10px;
  padding: 0;
}
.a::before { width: 24px; height: 24px; border-radius: 8px; margin-top: 1px; }
.a-body { padding-bottom: 2px; }
.a-meta { margin-bottom: 6px; gap: 6px; }
.a-meta .who { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.a-meta .dot { width: 4px; height: 4px; }
.a-meta .badge { border: 0; background: color-mix(in srgb, var(--panel-2) 80%, transparent); padding: 2px 8px; }

.md { font-size: 15.5px; line-height: 1.72; gap: 12px; }

.md h2 { margin-top: 12px; font-size: 13px; letter-spacing: .02em; }

/* the sources sit under the answer as a quiet row, the way a chat cites */
.src-panel { margin: 10px 0 0; }
.src-head { font-size: 10px; letter-spacing: .1em; margin-bottom: 5px; }
.src-cards { gap: 5px; }
.src-card { padding: 4px 10px; font-size: 11.5px; border-radius: 999px; }

/* the actions and the follow-ups belong to the answer, not to the page */
.a-actions { margin-top: 10px; gap: 2px; }
.followups { margin-top: 12px; gap: 6px; }

/* ── the typing state, as a message ─────────────────────────────────────
   It used to be a spinner and a line of text sitting loose in the column.
   It is a bubble on the assistant's side now, with three dots, so the reader
   sees the bot "writing" in the same place the answer will appear. */

.working {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: 34px;
  padding: 10px 16px;
  border-radius: 18px 18px 18px 6px;
  background: color-mix(in srgb, var(--panel-2) 85%, transparent);
  color: var(--muted);
  font-size: 13px;
}
.working .amigo-avatar { width: 16px; height: 16px; }

/* ── a phone ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .q { max-width: 88%; font-size: 14.5px; padding: 10px 14px; }
  .a + .q { margin-top: 22px; }
  .md { font-size: 15px; }
  .working { margin-left: 0; }
}

/* The dock's gradient faded to transparent at its top edge, so the last
   message showed through the composer and looked cut off mid-sentence. The
   dock is its own row in the column — it needs an opaque surface, not a fade. */
.dock {
  background: var(--bg);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--line) 45%, transparent);
}
/* and the thread keeps a little room so the last line is never flush with it */
.thread { padding-bottom: 6px; }

/* F-04 — the chat rail collapses into a drawer at 900 px, but the phone tab bar
   switches on at 1024 px, so between 901 and 1024 (an iPad in portrait) a
   reader got both navigations at once. The drawer is the navigation here. */
body.amigo-chat .bottom-nav { display: none !important; }

/* ── system.css ── */
/* Veridell — one system for the whole site.
 *
 * This is the layer that makes every page feel like the same product. It is
 * loaded last, on every page, so the reading surface, the controls and the
 * spacing are identical whether you are on the home page, an article, the
 * chat, the topics index or the research desk.
 *
 * It only sets type, space, surfaces, controls and focus — it does not move
 * anything. Layout stays with each page's own stylesheet, so this cannot
 * break an existing screen.
 */

:root {
  /* a fluid type scale: one ramp, every screen */
  --fs-xs: clamp(11px, 0.72rem + 0.1vw, 12px);
  --fs-sm: clamp(12.5px, 0.8rem + 0.1vw, 13.5px);
  --fs-base: clamp(15px, 0.94rem + 0.12vw, 16px);
  --fs-lg: clamp(17px, 1.02rem + 0.25vw, 18.5px);
  --fs-xl: clamp(20px, 1.15rem + 0.6vw, 24px);
  --fs-2xl: clamp(24px, 1.3rem + 1.1vw, 32px);
  --fs-3xl: clamp(28px, 1.4rem + 1.8vw, 40px);

  /* one spacing ramp */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* one radius ramp */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --measure: 68ch;
  --tap: 44px;         /* the smallest comfortable touch target */
}

/* ── type ──────────────────────────────────────────────────────────────── */
/* Sizes belong to each page: a hero, an article lead and a card title are
   different jobs. This layer only sets rhythm, measure and wrapping, so it
   cannot blow up a layout that already knows its own scale. */
body {
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* long prose never runs past a comfortable line length */
.prose > p, .prose > ul, .prose > ol { max-width: var(--measure); }

/* ── controls ──────────────────────────────────────────────────────────── */
button, .btn, select, input[type="submit"] {
  font-family: inherit;
  font-size: var(--fs-sm);
  border-radius: var(--r-md);
  min-height: var(--tap);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
button:not(.btn-icon):not(.btn-round), .btn { padding: 9px 15px; }
button:active, .btn:active { transform: translateY(0.5px); }
button:disabled, .btn:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

input, textarea, select {
  font-family: inherit;
  font-size: var(--fs-base);
  border-radius: var(--r-md);
}
textarea { line-height: 1.6; }

/* icons inside buttons keep their own box */
.btn-icon, .icon, .ico { min-height: 0; }

/* ── focus: always visible, never a surprise ───────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent, #b46a45);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ── surfaces ──────────────────────────────────────────────────────────── */
.card, .panel, .answer-card, .factbox, .src-group, .topic-block,
.q-card, .cat-card, .dash-action, .saved-card {
  border-radius: var(--r-lg);
}
.card, .q-card, .cat-card, .dash-action { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
@media (hover: hover) {
  .card:hover, .q-card:hover, .cat-card:hover, .dash-action:hover { transform: translateY(-2px); }
}

/* tables scroll instead of breaking the page */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── small touches that make a site feel finished ──────────────────────── */
::selection { background: color-mix(in srgb, var(--accent, #b46a45) 30%, transparent); }

* { scrollbar-width: thin; scrollbar-color: var(--border-2, #cfc3ac) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border-2, #cfc3ac) 80%, transparent);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* links inside prose read as prose, not as buttons */
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ── phones and small tablets ──────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --measure: 62ch; }
  .wrap, .wrap-narrow { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 640px) {
  body { line-height: 1.72; }
  .btn, button { min-height: 44px; }
  /* a thumb needs a real target, not a 24px glyph */
  .btn-icon, .icon, .ico { min-width: 44px; min-height: 44px; }
  .topbar-inner { padding-left: 12px; padding-right: 12px; }
  .table-scroll { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* respect the system setting, everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .q-card:hover, .cat-card:hover, .dash-action:hover { transform: none; }
}

/* printing: the words, not the chrome */
@media print {
  .topbar, .side, .bottom-nav, .app-rail, .im-launcher, .read-progress, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
  .prose > p { max-width: none; }
}

/* ── sidebar links ─────────────────────────────────────────────────────── */
/* In the light theme these sat at a very pale grey on a pale surface and were
   hard to read. They are navigation, so they need body-text contrast, not a
   hint of colour. */
.side-link, .bottom-nav a, .toc-jump-list a {
  color: color-mix(in srgb, var(--text, #242824) 88%, transparent);
}
.side-link:hover, .bottom-nav a:hover, .toc-jump-list a:hover {
  color: var(--text, #242824);
}
.side-link[aria-current="page"], .side-link.is-active, .bottom-nav a[aria-current="page"] {
  color: var(--text, #242824);
  font-weight: 600;
}
.side-link svg { opacity: .9; }

/* ── neutral progress indicator ────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 26px; height: 26px;
  flex: none;
  border: 2px solid var(--border-2, #d4ddd6);
  border-top-color: var(--accent, #438c6b);
  border-radius: 50%;
  background: none;
  animation: amigo-shared-spin .85s linear infinite;
  vertical-align: -6px;
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

/* ==========================================================================
   THE AUDIT'S PART II CORRECTIONS — surfaces, ink and states
   ==========================================================================
   The interface audit measured four complaints and traced all of them to one
   habit: a component file declaring its own colour, and a state declaring a
   background without declaring the foreground that sits on it. These rules
   are the audit's patch list, applied in one place and loaded after the
   sheets that paint the old versions, so the corrections win without a single
   !important.

   What they do, in the audit's own order:

     F-05/F-06  the field is flat paper, not a pressed well
     F-07/F-08  the hero card is an opaque surface with one quiet wash
     F-09       no gradient sits behind text
     F-10/F-11  every active state declares its ink with its fill
     F-12       the primary button is a flat token pair
     F-14       the dark theme's muted ink clears 4.5:1
   ========================================================================== */

/* ── F-05 / F-06 · the field ─────────────────────────────────────────────
   A pressed well works for a button the reader presses. A text field is a
   surface the reader reads on, and an inset shadow plus a 145° gradient
   darkened the first two characters of every placeholder — 31 levels below
   the page at the top-left corner. Flat surface, hairline border, one soft
   shadow, and focus as the only state that changes the surface. */

.searchbar,
.composer .searchbar,
.dash-hero .searchbar,
.dash-hero-ask .searchbar,
form.panel .searchbar,
form.panel .select,
.select,
.langbar select,
.langbar-inner input#langSelect,
.feedback .fb-note textarea {
  background: var(--surface);
  background-image: none;
  border: 1px solid var(--border-2);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
}

.searchbar:focus-within,
.composer .searchbar:focus-within,
.dash-hero .searchbar:focus-within,
form.panel .searchbar:focus-within,
.select:focus,
.langbar select:focus,
.feedback .fb-note textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The segmented controls were the same pressed well. They are a track with a
   raised thumb, which is a different material from a field. */
.mode,
.tabs {
  background: var(--surface-2);
  background-image: none;
  border: 1px solid var(--border-2);
  box-shadow: none;
}

/* ── F-07 · the hero card is a surface, not a glass sheet ────────────────
   Behind the hero there is a near-black page; blurring it produced a flat
   near-black, so in the dark theme the card sat 2 levels above the page —
   below the threshold at which a boundary is visible. Glass belongs to
   floating chrome, not to the largest surface on the page. */

.dash-hero,
.dash-hero-ask {
  background: var(--surface);
  background-image: none;
  border: 1px solid var(--border-2);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── F-08 · the corner bloom ─────────────────────────────────────────────
   One centred wash that cannot be mistaken for a rendering fault. The old
   pair of blooms was tuned against the light background and produced a pale
   top-right and a brown top-left in the dark one. */

.dash-hero::before,
.dash-hero-ask::before {
  background: radial-gradient(60% 50% at 50% -10%,
    color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
  opacity: 1;
}
[data-theme="dark"] .dash-hero::before,
[data-theme="dark"] .dash-hero-ask::before {
  background: radial-gradient(60% 50% at 50% -10%,
    color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}

/* ── F-09 · no gradient behind text ──────────────────────────────────────
   `background-clip: text` with a transparent fill measured 1.07:1: in print,
   in forced-colours mode and wherever the clip is unsupported, the emphasised
   half of the headline simply vanished. The colour is solid now; the gradient
   is kept only where a browser has proved it can paint it. */

.dash-hero h1 .dash-grad,
.site-intro h1 .grad {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: var(--copper-ink);
}
[data-theme="dark"] .dash-hero h1 .dash-grad,
[data-theme="dark"] .site-intro h1 .grad {
  color: var(--accent);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  @media not print {
    .dash-hero h1 .dash-grad {
      background-image: linear-gradient(100deg, var(--copper) 0%, var(--accent-2) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

/* ── F-10 / F-11 / F-12 · every state is a pair ──────────────────────────
   The active depth pill was white text on a pale gradient (1.25:1) and the
   active half of the Ask/Find switch was dark text on a dark track (1.85:1).
   A state now names its ink and its fill together, from the matching tokens,
   so the two can never be chosen apart. */

.depth-btn.is-active,
.depth-btn[aria-pressed="true"],
.chip-btn.is-active,
.chip.is-active,
.mode-btn.is-active,
.mode-btn[aria-pressed="true"],
.tab[aria-selected="true"],
.tab.is-active,
.toc a.active,
.dash-hero .depth-btn.is-active,
.dash-hero .depth-btn[aria-pressed="true"],
.dash-hero .chip-btn.is-active,
.dash-hero .mode-btn.is-active,
.dash-hero .mode-btn[aria-pressed="true"] {
  background: var(--primary);
  background-image: none;
  border-color: var(--primary);
  color: var(--on-primary);
  box-shadow: none;
}

.btn-primary,
.btn-primary:hover,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:hover {
  background: var(--primary);
  background-image: none;
  border-color: transparent;
  color: var(--on-primary);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 12%, transparent);
  filter: none;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { filter: brightness(.96); }

/* ── F-14 · the dark theme's muted ink ───────────────────────────────────
   #a8b0a6 measured 3.97:1 on the dark card. The audit's value clears 4.5:1
   on the lightest surface it can land on, which for a dark theme is the
   highest card, not the page. */

[data-theme="dark"] {
  --muted: #b9c2b6;
  --faint: #9aa39a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="sepia"]) {
    --muted: #b9c2b6;
    --faint: #9aa39a;
  }
}

/* ── F-20 · the skip link ────────────────────────────────────────────────
   It is off-screen until focused, and when focused it must be legible: the
   pair is declared here so a theme change cannot separate them. */

.skip-link,
a.skip-link {
  background: var(--primary);
  color: var(--on-primary);
}

/* ── the composer wrapper is not a field ─────────────────────────────────
   `.composer` is only a positioning div on the app pages — the field is the
   form inside it. But three sheets painted the wrapper as a second field, so
   the search box rendered as a box inside a box, with the pressed-well shadow
   on the outer one. The wrapper goes back to being invisible. The chat page's
   composer *is* the field (it is a <form class="composer">), so this is
   scoped to the wrapper only. */

.composer:has(> form.searchbar) {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.composer:has(> form.searchbar):focus-within {
  box-shadow: none;
  border: 0;
}

/* ── `hidden` means hidden ───────────────────────────────────────────────
   The clear button, the offline notice and a dozen other elements are hidden
   by setting the `hidden` attribute, but any rule that gives the element a
   `display` value beats the attribute — so the clear "×" sat in the composer
   even with an empty field, and on a phone it took the space the mode switch
   needed. One rule restores the attribute's meaning. */
[hidden] { display: none !important; }

/* ==========================================================================
   SILKY SURFACES — one soft material instead of outlined boxes
   ==========================================================================
   Every card, panel, field and section carried a 1px border in --border-2 and
   a hard inner edge, so the page read as a set of drawn rectangles: a thin
   line beside every piece of text, a box around every block. That is what
   looked cheap. Nothing on this site needs to be outlined to be understood.

   So there is one material now. A surface is a tone, lifted off the page by a
   soft shadow rather than fenced in by a stroke. Borders survive only where
   they are structural (a table cell, a focus ring, a divider that separates
   two different lists) and even there they are a hairline of the surface's own
   colour, not a drawn line.

   The rules are written as one layer, loaded after the sheets that paint the
   old versions, so nothing here needs !important. */

:root {
  --lift-1: 0 1px 1px color-mix(in srgb, var(--text) 4%, transparent),
            0 6px 18px -14px color-mix(in srgb, var(--text) 22%, transparent);
  --lift-2: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent),
            0 16px 40px -26px color-mix(in srgb, var(--text) 30%, transparent);
  --hair: color-mix(in srgb, var(--border) 55%, transparent);
  --r-card: 20px;
  --r-block: 16px;
}

/* ── cards and panels: a tone and a shadow, no stroke ──────────────────── */
.card,
.q-card,
.cat-card,
.topic-card,
.dash-action,
.howstep,
.panel,
.answer-card,
.source-card,
.factbox,
.src-group,
.aotd,
.dash-hero,
.dash-hero-ask,
.rail-card,
.evidence,
.ask-note,
.method-note {
  border: 0;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--lift-1);
  transition: box-shadow .28s cubic-bezier(.22,.61,.36,1),
              transform .28s cubic-bezier(.22,.61,.36,1),
              background-color .28s cubic-bezier(.22,.61,.36,1);
}

.card:hover,
.q-card:hover,
.cat-card:hover,
.topic-card:hover,
.dash-action:hover,
.howstep:hover {
  box-shadow: var(--lift-2);
  transform: translateY(-2px);
}

/* a section is separated by space, not by a rule under its heading */
.sec-head,
.dash-band-head {
  border-bottom: 0;
  padding-bottom: 0;
}
.prose h2,
.art-body h2,
.art-section-head {
  border-bottom: 0;
  padding-bottom: 0;
}

/* the fact box: rows read as a table by alignment alone */
.factbox { overflow: hidden; }
.factbox h3 { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); border-bottom: 0; }
.factbox .row { border-bottom: 0; }
.factbox .row + .row { box-shadow: inset 0 1px 0 var(--hair); }

/* the timeline drew a vertical line down the whole list */
.timeline li { border-left: 0; }

/* ── fields: a hairline that belongs to the surface ────────────────────── */
.searchbar,
.composer .searchbar,
.select,
.langbar select,
form.panel .searchbar,
.feedback .fb-note textarea {
  border: 1px solid var(--hair);
}

/* ── the left rail: a soft column, not a bordered sheet ────────────────── */
.app-side {
  border: 0;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border-radius: var(--r-card);
  box-shadow: none;
  padding: 14px 10px 22px;
}
.side-link {
  border-radius: 12px;
  color: var(--text);
  font-weight: 500;
}
.side-link svg { opacity: .75; }
.side-link:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.side-link:hover svg { opacity: 1; }
.side-link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: none;
  color: var(--text);
  font-weight: 600;
}
.side-link[aria-current="page"] svg { opacity: 1; color: var(--accent); }
.side-heading {
  color: var(--muted);
  letter-spacing: .12em;
  margin: 18px 0 6px;
  padding: 0 12px;
}

/* ── the right rail: no outline, and no eternal skeleton ───────────────── */
.app-rail { border: 0; }
.app-rail .rail-card,
.app-rail > .card { box-shadow: var(--lift-1); }

/* ── the top bar keeps its blur and loses the drawn line ───────────────── */
.topbar { border-bottom: 1px solid var(--hair); }
.site-foot { border-top: 1px solid var(--hair); }

/* ── the reading panel ────────────────────────────────────────────────── */
.article-grid > .panel,
.panel.panel-wide {
  border: 0;
  box-shadow: var(--lift-1);
}
.toc-rail .toc {
  border: 0;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius: var(--r-card);
  box-shadow: none;
  padding: 14px;
}

/* ── tables keep their cell rules: they carry meaning ─────────────────── */
.art-body .table-scroll {
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--surface);
}

/* ── motion: everything eases, nothing jumps ──────────────────────────── */
a, button, .btn, .chip, .pill, .side-link, .tab, .depth-btn, .mode-btn {
  transition-duration: .24s;
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .card:hover, .q-card:hover, .cat-card:hover, .topic-card:hover,
  .dash-action:hover, .howstep:hover { transform: none; }
}

/* ── the left rail, without its outline ─────────────────────────────────
   The border came from a three-selector rule that listed the dark and light
   theme variants explicitly, so a plain `.app-side` override could not beat
   it. Same selectors here, later in the cascade, and the stroke is gone: the
   column is a tone on the page, lifted by nothing at all. */

.app-side,
[data-theme="dark"] .app-side,
[data-theme="light"] .app-side {
  border: 0;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: none;
  border-radius: var(--r-card);
}
[data-theme="dark"] .app-side { border-color: transparent; }

.app-side .side-link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: none;
  color: var(--text);
}
.app-side .side-link:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }

/* the field's own hairline, a shade softer again: it is a surface, not a box */
.searchbar,
.composer .searchbar,
.dash-hero .searchbar,
.dash-hero-ask .searchbar,
form.panel .searchbar {
  border-color: color-mix(in srgb, var(--border-2) 42%, transparent);
}
.searchbar:hover,
.dash-hero .searchbar:hover {
  border-color: color-mix(in srgb, var(--border-2) 62%, transparent);
}

/* The rail is not a panel.
   With the stroke gone it still read as a box, because the surface tone is
   lighter than the page and the rounded corner drew the rest of the outline
   by implication. A list of links does not need a container at all: it sits
   directly on the page, and the reader sees a column of destinations rather
   than a card full of them. */
.app-side,
[data-theme="dark"] .app-side,
[data-theme="light"] .app-side {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.side-link[aria-current="page"],
.app-side .side-link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

/* ── credits ─────────────────────────────────────────────────────────────
   One card for the person who made the site, and a grid of the services it
   runs on. The owner's avatar is the brand gradient on its own: a url() layer
   for /assets/img/owner.jpg used to sit in front of it, but the file was never
   added, so every visit to this page fetched a 404 and logged it to the
   console. Put the picture back as the first background layer when it exists. */

.credit-owner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin: 0 0 18px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--lift-1);
}
.credit-avatar {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, #173b32, #b46a45);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
}
.credit-owner h3 { margin: 0 0 3px; font-size: 17px; font-family: var(--font-body); font-weight: 650; }
.credit-owner p { margin: 0; font-size: 13px; color: var(--muted); }

.credit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.credit-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-block);
  background: var(--surface);
  box-shadow: var(--lift-1);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .24s cubic-bezier(.22,.61,.36,1), transform .24s cubic-bezier(.22,.61,.36,1);
}
.credit-card:hover { box-shadow: var(--lift-2); transform: translateY(-2px); text-decoration: none; }
.credit-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--copper-ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
[data-theme="dark"] .credit-tile { color: var(--sage); }
.credit-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.credit-text strong { font-size: 14px; font-weight: 600; }
.credit-text span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.credits-note { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.credits .src-credit { margin-top: 4px; font-size: 12px; color: var(--faint); }

@media (max-width: 560px) {
  .credit-owner { padding: 16px; gap: 13px; }
  .credit-avatar { width: 56px; height: 56px; }
  .credit-grid { grid-template-columns: 1fr; }
}

/* A real logo in the tile: contained, on the tile's own tint, so a wide
   wordmark and a square icon both sit inside the same 38px square. */
.credit-tile.has-logo {
  background: color-mix(in srgb, var(--surface-2) 70%, #ffffff);
  padding: 5px;
}
[data-theme="dark"] .credit-tile.has-logo { background: color-mix(in srgb, #ffffff 88%, var(--surface)); }
.credit-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ── article-layout.css ── */
/* ==========================================================================
   Veridell — article layout, rebuilt for the screen it is on
   --------------------------------------------------------------------------
   Why this file exists.

   The reading view was one fixed 856 px panel inside a 1160 px shell, centred
   in whatever the viewport happened to be. At 1440 px that left 120 px of
   gutter each side and a body column of 808 px; at 1920 px the same panel sat
   in the middle of 1920 px with 532 px of empty page each side, while the
   headline above it was 1200 px wide. Three widths stacked on one page: the
   shell, the headline and the body, none of them agreeing.

   The model here is the one long-form publishers converged on:

     · the shell grows with the viewport, up to a cap, instead of stopping
     · the headline and the body share ONE left edge and ONE right edge
     · the prose keeps a readable measure (about 70 characters)
     · everything that is not prose — figures, tables, the fact box — may use
       the whole column, because a picture is not a paragraph
     · the contents panel is the second column on a wide screen and the first
       block on a narrow one, never the last thing after 100,000 px of text
   ========================================================================== */

:root {
  /* The shell: 960 on a small laptop, 1240 on a wide desktop, never more.
     It was pushed out to 1440 in the first pass and that was too far — a
     1240 frame holds a 64-character column and a 280 px contents rail with
     real gutters either side, instead of one wall of text. */
  --shell: clamp(960px, 92vw, 1240px);
  --toc-w: 280px;
  --rail-gap: 32px;
  /* The prose measure: 62-66 characters, which is the comfortable end of the
     range for 17 px body text. 70ch read as a newspaper column on a wide
     monitor. */
  --prose: 64ch;
}

/* ---------------------------------------------------------------- the shell */

.wrap,
#main.wrap,
main#main {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(16px, 3.2vw, 44px);
}

/* the app's article view and the static pages use the same shell */
[data-view="article"] .wrap,
[data-view="ask"] .wrap {
  max-width: var(--shell);
  padding-inline: clamp(16px, 3.2vw, 44px);
}

/* the headline, the lead, the actions and the body now share one left edge */
.article-head,
.crumbs,
.article-actions {
  max-width: 100%;
  margin-inline: 0;
}

/* the headline may run wider than the prose, but not the whole screen */
.article-title,
.article-head h1 {
  max-width: 24ch;
}
.article-sub,
.article-head .article-sub {
  max-width: var(--prose);
}

/* ---------------------------------------------------------------- the grid */

.article-grid,
#main .article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--toc-w);
  gap: var(--rail-gap);
  align-items: start;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* the panel is the reading column; it may use its whole width */
.article-grid > .panel,
.panel.panel-wide {
  grid-column: 1;
  grid-row: 1;
  /* 760px of text at the body size is about 80 characters — the top of the
     comfortable range, and the widest the facts box gets too, so the two
     columns line up. */
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(20px, 2.4vw, 40px) clamp(18px, 2.6vw, 40px);
}

/* the contents panel is the second column, and it sticks */
.article-grid > .toc-rail {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--topbar-h, 62px) + 16px);
  max-height: calc(100dvh - var(--topbar-h, 62px) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------- the measure */

/* Every block used to be capped at 74ch — including figures, tables and the
   fact box, which is why a 900 px panel still rendered a 600 px picture in
   the middle of it. Prose keeps the measure; media takes the column. */
.panel.panel-wide > *,
.article-grid > .panel > * {
  max-width: 100%;
  margin-inline: 0;
}

/* The prose runs the width of the column, exactly like the facts box above
   it. A reader asked for that in as many words: "the words of the article
   should spread as wide as the facts". The measure is kept readable by
   capping the panel instead of the paragraph, so the two always agree — a
   narrower paragraph inside a wider facts box is what looked broken. */
.art-body > p,
.art-body > ul,
.art-body > ol,
.art-body > .line-list,
.prose > p,
.prose > ul,
.prose > ol {
  max-width: 100%;
}

/* A picture is centred in the column, whatever the rules above say about
   direct children: they set `margin-inline: 0`, which quietly left-aligned
   the lead figure. */
.panel.panel-wide > .art-figure,
.panel.panel-wide > .lead-figure,
.article-grid > .panel > .art-figure {
  margin-inline: auto;
}

/* long-form prose that is quoted at length gets a slightly wider measure */
.art-body > blockquote,
.art-body > .gloss-quot {
  max-width: 62ch;
}

/* figures and tables are allowed the full column */
.art-body figure,
.art-body .thumb,
.art-body .thumbinner,
.art-body .table-scroll,
.art-body table,
.art-body .chessboard,
.panel-wide .factbox {
  max-width: 100%;
  margin-inline: 0;
}

/* The lead picture keeps its own proportions.
   `width: 100%` with `object-fit: cover` did two things wrong at once: it
   stretched a small image — a 200 px agency logo became a 900 px banner —
   and it cropped the top and bottom off anything taller than the cap, with
   no way for the reader to see the rest. A picture is now drawn at its own
   size, never larger than the column, never taller than a screen, and
   centred. Nothing is stretched and nothing is cut. */
.lead-figure,
.art-figure {
  /* fit-content, not 100%: a small picture must not sit in a 720 px empty
     box. A large one still stops at 720. */
  width: fit-content;
  max-width: min(100%, 720px);
  margin-inline: auto;
  margin-block: 0 28px;
  text-align: center;
}
.lead-figure img,
.art-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(60vh, 420px);
  object-fit: contain;
  margin-inline: auto;
  border-radius: 14px;
  background: transparent;
}
.lead-figure figcaption,
.art-figure figcaption {
  margin-top: 8px;
  text-align: center;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ------------------------------------------------------------ tables scroll */

/* The fact box and any wikitable must scroll inside the column instead of
   being squeezed until the cells clip. At 320 px the Chess fact box lost
   "Abstract strategy game" mid-word because nothing could scroll. */
.art-body .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.art-body table {
  border-collapse: collapse;
  min-width: min(100%, 420px);
}
.art-body table td,
.art-body table th {
  padding: 6px 10px;
  vertical-align: top;
}
/* a plain data table (not a chessboard) keeps its cells on one line and scrolls */
.art-body table:not(.chessboard) td {
  white-space: normal;
}

/* The fact box: the <dl> is the grid and every .row dissolves into it, so a
   label and its value are two cells of one table-like grid. The old nested
   grid squeezed the value column to 93 px at 390 px wide, which is what cut
   "Board game Abstract strategy game" in half. */
.factbox dl {
  display: grid;
  grid-template-columns: minmax(110px, 30%) minmax(0, 1fr);
  margin: 0;
}
.factbox .row { display: contents; }
.factbox dt,
.factbox dd {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.factbox dd { margin: 0; }

@media (max-width: 560px) {
  .factbox dl { grid-template-columns: minmax(0, 1fr); }
  .factbox dt { border-bottom: 0; padding-bottom: 0; font-size: 12px; letter-spacing: .02em; }
  .factbox dd { padding-top: 2px; font-size: 15px; }
}

/* ------------------------------------------------------------- the contents */

/* On a narrow screen the contents panel is the FIRST block, not the last.
   In the source it is the last child of .article-grid, which put it after
   113,000 px of Chess on a phone. Order fixes it without touching the DOM. */
@media (max-width: 1100px) {
  .article-grid,
  #main .article-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .article-grid > .panel,
  .panel.panel-wide {
    grid-column: 1;
    order: 0;
  }
  #main .article-grid > .toc-rail,
  .article-grid.rail-open > .toc-rail {
    grid-column: 1;
    order: -1;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .article-grid > .toc-rail .toc {
    max-height: 44vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --------------------------------------------------------------- a wide page */

@media (min-width: 1600px) {
  :root { --shell: 1280px; --toc-w: 300px; }
  .art-body > p,
  .art-body > ul,
  .art-body > ol,
  .prose > p {
    max-width: 66ch;
  }
}

/* a 1280 laptop: the rail gives up 40 px before the prose does */
@media (max-width: 1400px) {
  :root { --toc-w: 260px; --rail-gap: 26px; }
}

/* a very wide page: the shell stops growing, and the gutters grow instead,
   which is what keeps a 2560 px monitor readable */
@media (min-width: 1800px) {
  :root { --shell: 1320px; }
  .wrap { padding-inline: 48px; }
}


/* ── the reading column on a narrow screen ───────────────────────────────
   The panel kept its 760px cap and the grid kept its two columns below the
   rail breakpoint, so at 390px the text was 760px wide inside a 390px
   viewport and the overflow guard simply cut the right-hand end off every
   line. Measured before: panel 760px in a 390px window, list items 680px.
   One column, full width, no cap. */

#main .article-grid,
.article-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1100px) {
  #main .article-grid { grid-template-columns: minmax(0, 1fr); }
  .article-grid > .panel.panel-wide,
  #main .article-grid > .panel,
  .panel.panel-wide {
    max-width: 100%;
    width: 100%;
    margin-inline: 0;
  }
  .article-grid > .toc-rail { grid-column: 1; }
}

/* Nothing inside the article may be wider than the column it sits in. */
.art-body, .art-body * { max-width: 100%; }
.art-body .table-scroll, .art-body table { max-width: 100%; }

/* ── a wide table scrolls inside the column, and only inside it ──────────
   The chessboard is ten fixed-width cells wide (1158 px of table) and was
   drawn straight through the panel edge on a phone: the board, its thumbinner
   and its scroll box all measured wider than the 358 px column. Each of them
   is now pinned to the column and the table scrolls within. */
.art-body .chessboard,
.prose .chessboard,
.art-body .chessboard .thumbinner,
.prose .chessboard .thumbinner,
.art-body .chessboard .center,
.prose .chessboard .center {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}
.art-body .chessboard .table-scroll,
.prose .chessboard .table-scroll {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.art-body .table-scroll,
.prose .table-scroll { max-width: 100% !important; min-width: 0; }
.art-body table,
.prose table { max-width: none; }

/* ── the reading column is centred on the window, on every device ────────
   Measured before this fix: at 1280 the panel ran x=118..878, 142 px left of
   the middle; at 1600 it was 184 px out. The cause was the grid: the contents
   rail owned a real second column on the right, so the prose was pushed into
   the left-hand column and could never be centred, however wide the window.

   A grid cannot centre one item while a second item sits in the flow beside
   it, so the reading view is a single centred column again — the panel and
   the contents rail are both capped at the same reading width and centred,
   and the rail follows the article instead of flanking it. The text is then
   exactly centred at 320, 390, 768, 1280 and 1600, which is the thing the
   reader asked for, and nothing can push the page sideways. */
.article-grid,
#main .article-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  grid-template-columns: none;
  width: 100%;
}

.article-grid > .panel,
.article-grid > .panel.panel-wide,
#main .article-grid > .panel,
.panel.panel-wide {
  width: 100%;
  max-width: min(var(--im-article-panel-width, 760px), 100%);
  margin-inline: auto;
  flex: 0 1 auto;
  order: 0;
}

.article-grid > .toc-rail,
#main .article-grid > .toc-rail {
  width: 100%;
  max-width: min(var(--im-article-panel-width, 760px), 100%);
  margin-inline: auto;
  position: static;
  max-height: none;
  overflow: visible;
  order: -1;
  flex: 0 1 auto;
}
.article-grid > .toc-rail .toc {
  max-height: none;
  overflow: visible;
}

/* ── mobile.css ── */
/* ==========================================================================
   Veridell — the phone
   --------------------------------------------------------------------------
   What a site has to get right on a phone, and what this one did not.

   The measured starting point (390 x 844, Chromium, touch emulation):

     · the article page had NO navigation at all — the five header links were
       display:none below 860 px and no bottom bar existed on those pages, so
       the only way out of a 113,000 px article was the brand mark
     · the contents panel came last in the document, at y = 113,051 px
     · the fact box clipped its values mid-word at 320 px
     · 20 interactive controls were under 40 x 40 px
     · 14 pieces of text were under 14 px
     · the search field broke into three stacked rows inside a 180 px box
     · a fixed full-screen grain layer blended on every scroll frame
     · the floating "Ask AI" button sat on top of the bottom bar

   The rules below are the standard mobile checklist, applied to this tree:

     1. one thumb-reachable navigation, on every page, always visible
     2. 44 px minimum targets (WCAG 2.5.5 / platform guidelines)
     3. 16 px minimum on every field, or iOS zooms the page on focus
     4. safe-area insets, so nothing hides under a home indicator
     5. content first: no fixed decoration over text, no layout shift
     6. one column, 12-16 px gutters, and nothing that scrolls sideways
   ========================================================================== */

:root {
  --tap: 44px;
  --gutter: 14px;
}

/* ------------------------------------------------------- 1 · the bottom bar */

/* The bar exists in the app shell only. It is defined here for every page, and
   the markup is added to the static pages by the same build step. */
.bottom-nav {
  display: none;
}

@media (max-width: 1024px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-top: 1px solid var(--border);
  }
  .bottom-nav a {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 48px;
    padding: 7px 2px 5px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.15;
    color: var(--muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav a[aria-current="page"] {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-ink);
    font-weight: 600;
  }
  .bottom-nav svg { width: 21px; height: 21px; }

  /* nothing may sit under the bar */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .site-foot { padding-bottom: 24px; }

  /* the floating launcher moves above the bar, and off the last button */
  .im-launcher, .chat-launcher, .fab {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }
}

/* the header keeps its tools but drops the five text links, which now live in
   the bar — that is what stops the header wrapping to three rows at 360 px */
@media (max-width: 860px) {
  .topnav { display: none; }
  .topbar-inner { flex-wrap: nowrap; gap: 8px; }
  .brand-word { font-size: 16px; }
}

/* A two-word wordmark is longer than the old single word: at phone widths it
   steps down once more so the brand and the header tools stay on one row. */
@media (max-width: 420px) {
  .brand-word { font-size: 14px; letter-spacing: -0.02em; }
}

/* ------------------------------------------------------- 2 · tap targets */

@media (pointer: coarse) {
  button,
  .btn,
  .btn-icon,
  .chip,
  .depth-btn,
  .mode-btn,
  .tab,
  .toc a,
  .side-link,
  .bottom-nav a {
    min-height: var(--tap);
  }
  .btn-icon { width: var(--tap); height: var(--tap); }
  /* inline links inside prose stay inline: they are read, not pressed */
  .art-body a, .prose a, .crumbs a { min-height: 0; }
}

/* a small pointer still needs a comfortable target */
.btn-icon { min-width: 36px; min-height: 36px; }

/* ------------------------------------------------------- 3 · fields */

/* 16 px on every field: below that, iOS Safari zooms the viewport on focus and
   the reader loses their place. The old rule only did this under 700 px. */
input,
select,
textarea,
.searchbar textarea,
.searchbar input {
  font-size: max(16px, 1rem);
}

@media (max-width: 700px) {
  /* the field: one row for the input, one for the tools — never three */
  .searchbar:has(> .composer-tools) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 10px 8px 14px;
    border-radius: 18px;
  }
  .searchbar:has(> .composer-tools) > textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    padding: 8px 0 4px;
  }
  .searchbar:has(> .composer-tools) > .composer-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > .mode {
    order: 1;
    margin-right: auto;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > button[type="submit"] {
    order: 2;
    min-height: 42px;
    padding: 0 18px;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > .btn-icon { order: 0; }

  .mode { padding: 3px; }
  .mode-btn { padding: 0 10px; font-size: 12.5px; }
}

/* ------------------------------------------------------- 4 · safe areas */

/* the chat dock and any sticky footer must clear a home indicator */
.dock,
.composer-dock {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.topbar {
  padding-top: env(safe-area-inset-top, 0px);
}
/* landscape on a notched phone */
@media (orientation: landscape) and (max-height: 500px) {
  .bottom-nav { padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav a { min-height: 40px; font-size: 10px; }
  .bottom-nav svg { width: 18px; height: 18px; }
}

/* ------------------------------------------------------- 5 · decoration */

/* The grain is a fixed, full-viewport SVG turbulence layer with a blend mode.
   On a phone it is a per-frame composite over the whole screen for a texture
   nobody can see at 390 px. It goes. */
@media (max-width: 700px) {
  .grain { display: none; }
  body::after { display: none; }      /* the 56 px grid overlay, same reason */
  body::before { filter: none; }      /* a 18 px blur of four gradients */
}

/* ------------------------------------------------------- 6 · rhythm */

@media (max-width: 700px) {
  :root { --gutter: 14px; }

  .wrap,
  [data-view="article"] .wrap,
  [data-view="ask"] .wrap {
    padding-inline: var(--gutter);
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  .panel,
  .panel.panel-wide,
  .article-grid > .panel {
    padding: 18px 16px 22px;
    border-radius: 16px;
  }

  /* headings: one step down, and never clipped */
  .article-title, .article-head h1 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.14;
    max-width: 100%;
  }
  .article-sub { font-size: 17px; line-height: 1.62; }
  .lead-figure img, .art-figure img { max-height: 240px; }
  .art-body h2 { font-size: 22px; line-height: 1.25; }
  .art-body h3 { font-size: 18px; }

  .art-body > p,
  .art-body > ul,
  .art-body > ol,
  .prose > p { max-width: 100%; }

  /* the action row: two per line, not five rows of one */
  .article-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .article-actions .btn { width: 100%; min-height: 44px; font-size: 14px; }
  .article-actions .btn:first-child { grid-column: 1 / -1; }

  /* the hero: shorter, so the field is on the first screen */
  .dash-hero { padding: 20px 16px 18px; margin-top: 8px; border-radius: 18px; }
  .dash-hero h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .dash-hero > p { font-size: 15px; margin-bottom: 16px; }
  .dash-hero-badge { font-size: 10.5px; padding: 6px 10px; }

  /* example chips: a scroll row instead of three full-width pills */
  .example-prompts {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .example-prompts li { flex: 0 0 auto; scroll-snap-align: start; }
  .example-prompts button { white-space: nowrap; }

  /* long code and tables never push the page sideways */
  pre { overflow-x: auto; }
  .art-body .table-scroll { margin-inline: 0; }

  /* the contents panel: compact, scrollable, first */
  .toc-rail .toc { max-height: 40vh; overflow-y: auto; }

  /* a footer that is not 400 px of links */
  .site-foot { padding-top: 24px; }
  .site-foot .foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
}

/* very small phones: 320 px is still a supported width */
@media (max-width: 360px) {
  :root { --gutter: 12px; }
  .article-title, .article-head h1 { font-size: 26px; }
  .panel, .panel.panel-wide, .article-grid > .panel { padding: 14px 12px 18px; }
  .article-actions { grid-template-columns: 1fr; }
  .bottom-nav a { font-size: 10px; }
}

/* tablets: two columns are available, use one column of text plus the rail */
@media (min-width: 701px) and (max-width: 1100px) {
  .wrap, [data-view="article"] .wrap { padding-inline: 24px; }
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .article-grid > .toc-rail { order: -1; position: static; max-height: none; }
  .article-grid > .toc-rail .toc { max-height: 30vh; overflow-y: auto; }
}

/* landscape phones: the bar is thin, the content is not */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .dash-hero { padding: 14px 16px; }
  .dash-hero h1 { font-size: 24px; }
  .dash-hero-badge, .trust-strip, .hero-clock { display: none; }
}

/* ------------------------------------------------------- 7 · reduced motion */

@media (prefers-reduced-motion: reduce) {
  .bottom-nav a, .btn, .chip { transition: none !important; }
  .example-prompts { scroll-behavior: auto; }
}

/* ------------------------------------------------------- 8 · one row of tools */

/* On a phone the composer's control row was wrapping into two — the icons on
   one line, the mode switch and Send on the next — which made the field three
   rows tall in a 390 px column. The controls fit on one line at this size; they
   just have to be allowed to stay there. */
@media (max-width: 700px) {
  .searchbar:has(> .composer-tools) > .composer-tools {
    flex-wrap: nowrap;
    gap: 5px;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > .mode {
    flex: 0 0 auto;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > .mode .mode-btn {
    padding: 0 8px;
    font-size: 12px;
    white-space: nowrap;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > button[type="submit"] {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > .btn-icon {
    flex: 0 0 auto;
    width: 32px; height: 32px; min-height: 32px;
  }
}

/* A broken or still-loading picture must not reserve 360 px of empty card on
   a phone; the figure collapses to the size of its caption instead. */
@media (max-width: 700px) {
  .lead-figure img, .art-figure img { max-height: 220px; }
}

/* ── polish.css ── */
/* Veridell — quiet, precise surface polish.
   A restrained iOS-inspired layer: soft translucency, clear hierarchy,
   consistent radii, tactile controls and no heavy neumorphic shadows. */

:root {
  --polish-radius-card: 24px;
  --polish-radius-control: 20px;
  --polish-shadow: 0 8px 28px color-mix(in srgb, var(--text) 7%, transparent);
  --polish-shadow-hover: 0 14px 36px color-mix(in srgb, var(--text) 11%, transparent);
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.topbar {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(155%) blur(18px);
  backdrop-filter: saturate(155%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.dash-hero {
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--border-2) 82%, transparent);
  box-shadow: var(--polish-shadow);
  overflow: visible;
}

.searchbar:has(> .composer-tools) {
  border: 1px solid var(--border-2);
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--text) 6%, transparent);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.searchbar:has(> .composer-tools):focus-within {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border-2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), var(--polish-shadow);
}

.searchbar:has(> .composer-tools) > textarea {
  min-height: 52px;
  line-height: 1.55;
  font-size: 16px;
  resize: vertical;
}

.searchbar:has(> .composer-tools) > .composer-tools > button[type="submit"] {
  border-radius: 999px;
  min-height: 44px;
}

.suggest {
  border-radius: 20px;
  border: 1px solid var(--border-2);
  box-shadow: 0 18px 44px color-mix(in srgb, #000 17%, transparent);
  padding: 5px;
}

.suggest-item {
  border-radius: 13px;
  border-bottom: 0;
  min-height: 54px;
  align-items: center;
}

.suggest-item.active,
.suggest-item:hover {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.card,
.topic-card,
.answer-card,
.aotd,
.src-group,
.credit-maker,
.credit-owner {
  border-radius: var(--polish-radius-card);
  box-shadow: var(--polish-shadow);
}

.card,
.topic-card,
.credit-card,
.src-group {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
  .card:hover,
  .topic-card:hover,
  .credit-card:hover,
  .src-group:hover {
    box-shadow: var(--polish-shadow-hover);
  }
}

.card-thumb {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}

.card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.aotd {
  border-radius: 26px;
  box-shadow: var(--polish-shadow);
}

.aotd-media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-2);
}

.aotd-body { padding: clamp(18px, 3vw, 30px); }

.btn,
.btn-primary,
.btn-icon,
.mode-btn,
.depth-btn,
.chip,
.tab {
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.btn,
.btn-primary { border-radius: 999px; }

button:focus-visible,
a:focus-visible,
textarea:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 3px;
}

/* Consistent image sizing; the app-level error handler swaps failed media
   for a local placeholder and keeps provider avatars on their initials. */
img.image-fallback {
  object-fit: cover;
  background: var(--surface-2);
}

/* Credits: logo-led identities rather than text-only contributor rows. */
.src-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  margin: 0 0 10px;
}

.src-brand h3 { margin: 0; }
.src-brand-mark,
.credit-person-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface-2));
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
}

.src-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.src-brand-mark img,
.credit-person-avatar img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  background: var(--surface);
}

.src-brand-initials,
.credit-person-initials { position: relative; z-index: 0; }

.credit-person-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.credit-person-avatar img { object-fit: cover; padding: 0; }

.credit-tile.has-logo { position: relative; }
.credit-tile.has-logo .credit-logo-initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.credit-tile.has-logo img {
  position: absolute;
  inset: 5px;
  z-index: 1;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}

.credit-people li {
  grid-template-columns: 42px minmax(120px, 1.1fr) minmax(0, 2fr) auto;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  box-shadow: none;
}

.credit-person-name { line-height: 1.35; }

.credit-avatar img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 620px) {
  .credit-people li { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .credit-person-role { grid-column: 2 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* References are evidence, not teaser copy: keep every citation intact. */
.reference-list li { overflow-wrap: anywhere; word-break: normal; }

/* ── chat-redesign.css ── */
/* Indus conversational search — a dedicated, responsive assistant surface.
   Loaded last on /chat/ so older layers cannot misalign its controls. */

:root {
  --bg: #0a1118;
  --rail: #0d1720;
  --panel: #121f2b;
  --panel-2: #172838;
  --line: rgba(164, 192, 213, .12);
  --line-2: rgba(164, 192, 213, .22);
  --ink: #edf5fb;
  --ink-2: #c0d0dc;
  --muted: #8398a8;
  --accent: #77e7d5;
  --brass: #8db9f7;
  --brass-soft: #a8c9ff;
  --user: #162b40;
  --shadow: 0 26px 72px -34px rgba(0, 0, 0, .72);
  --col: 860px;
  --rail-w: 276px;
  --r: 18px;
  --r-sm: 12px;
}

html[data-theme="light"] {
  --bg: #f5f8fb;
  --rail: #f0f4f8;
  --panel: #ffffff;
  --panel-2: #edf3f8;
  --line: rgba(43, 67, 87, .10);
  --line-2: rgba(43, 67, 87, .18);
  --ink: #172838;
  --ink-2: #40586b;
  --muted: #657d90;
  --accent: #137d75;
  --brass: #4e83c9;
  --brass-soft: #376cae;
  --user: #e5eff8;
  --shadow: 0 24px 64px -36px rgba(34, 63, 88, .32);
}

/* ── app frame ─────────────────────────────────────────────────────────── */
html, body { min-width: 320px; }
body {
  display: grid !important;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100vh;
  height: 100dvh;
  background:
    radial-gradient(ellipse at 68% -18%, color-mix(in srgb, var(--im-accent) 11%, transparent), transparent 38%),
    var(--bg);
}
body.rail-hidden { grid-template-columns: 0 minmax(0, 1fr) !important; }
.rail {
  grid-column: 1;
  grid-row: 1;
  width: var(--rail-w);
  height: 100%;
  padding: max(20px, env(safe-area-inset-top)) 14px 16px;
  gap: 12px;
  background: color-mix(in srgb, var(--rail) 92%, transparent);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
body.rail-hidden .rail { width: var(--rail-w); }
.main {
  display: flex !important;
  grid-column: 2;
  grid-row: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

/* ── brand + navigation rail ───────────────────────────────────────────── */
.brand { gap: 12px; padding: 2px 8px 16px; }
.brand .mark {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 26px -14px rgba(72, 173, 205, .62);
}
.brand .mark img, .empty-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-text b { font-family: var(--sans); font-size: 19px; font-weight: 760; letter-spacing: -.045em; }
.brand-text em { margin-top: 4px; font-size: 9px; letter-spacing: .18em; color: var(--accent); }
.rail-new {
  min-height: 46px;
  padding: 10px 13px;
  gap: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 14px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel));
  box-shadow: 0 10px 25px -22px color-mix(in srgb, var(--accent) 65%, transparent);
  font-size: 13px;
}
.rail-new svg { width: 17px; height: 17px; }
.rail-new kbd { border-radius: 6px; background: color-mix(in srgb, var(--panel-2) 72%, transparent); }
.rail-search {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}
.rail-search svg { width: 16px; height: 16px; }
.rail-search input { font-size: 13px; }
.rail-head-row { margin: 12px 7px 8px; }
.rail-head { font-size: 10px; letter-spacing: .13em; }
.rail-row { min-height: 40px; border-radius: 11px; }
.rail-row .rail-item { padding: 9px 11px; font-size: 12.5px; }
.rail-foot {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 66%, transparent);
  font-size: 10.5px;
}

/* ── top bar ───────────────────────────────────────────────────────────── */
.top {
  flex: 0 0 66px;
  min-height: 66px;
  padding: 10px 26px;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.top h1 { font-size: 13px; font-weight: 650; color: var(--ink-2); letter-spacing: -.01em; }
.top-right { gap: 5px; }
.ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
}
.ico:hover { background: var(--panel-2); color: var(--ink); }
.ico svg { width: 18px; height: 18px; display: block; }
.rail-toggle { margin-right: 2px; }

/* ── scroll stage and first impression ─────────────────────────────────── */
.scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.stage {
  width: min(calc(100% - 64px), 900px);
  max-width: 900px;
  flex: 0 0 auto;
  margin: 0 auto;
  padding: 34px 0 24px;
  gap: 0;
}
body.is-empty .scroll { justify-content: center; }
body.is-empty .stage { width: min(calc(100% - 64px), 900px); padding: 28px 0 18px; }
body.is-empty .empty { display: block; }
body.is-empty .thread { display: none; }
body:not(.is-empty) .empty { display: none; }
.empty {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  animation: indusWelcome .55s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes indusWelcome {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.empty-mark {
  width: 74px;
  height: 74px;
  margin: 0 auto 19px;
  border-radius: 25px;
  box-shadow: 0 20px 42px -22px rgba(53, 164, 189, .48);
}
.welcome-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .16em;
}
.welcome-pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 62%, transparent);
}
.empty .empty-heading {
  max-width: 760px;
  margin: 0 auto 14px;
  font-family: var(--sans);
  font-size: clamp(34px, 4.6vw, 51px);
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: -.055em;
  color: var(--ink);
}
.empty .empty-heading em {
  color: transparent;
  background: linear-gradient(105deg, var(--im-accent) 0%, color-mix(in srgb, var(--im-accent) 62%, var(--im-warm)) 56%, var(--im-warm) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}
html[data-theme="light"] .empty .empty-heading em {
  background-image: linear-gradient(105deg, var(--im-accent) 0%, color-mix(in srgb, var(--im-accent) 55%, var(--im-warm)) 58%, var(--im-warm) 100%);
}
.empty > p {
  max-width: 58ch;
  margin: 0 auto 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.welcome-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
  margin: 0 auto 25px;
  color: var(--ink-2);
  font-size: 11px;
}
.welcome-trust span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.welcome-trust svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.starters {
  max-width: 760px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto;
}
.starters button {
  min-height: 92px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  box-shadow: 0 10px 28px -26px rgba(0, 0, 0, .55);
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.starters button:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--panel-2);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -26px color-mix(in srgb, var(--accent) 36%, transparent);
}
.starters b {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.starters span { color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.empty-links { margin-top: 19px; gap: 8px 23px; }
.empty-links a { font-size: 11.5px; }

/* ── conversation turns ────────────────────────────────────────────────── */
.thread { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.q {
  align-self: flex-end;
  max-width: min(82%, 60ch);
  margin-top: 22px;
  padding: 12px 17px;
  border: 1px solid color-mix(in srgb, var(--accent) 11%, var(--line));
  border-radius: 20px 20px 7px 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--user) 94%, var(--panel)), var(--user));
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  box-shadow: 0 12px 28px -25px rgba(0,0,0,.55);
}
.q:first-child { margin-top: 0; }
.q + .a { margin-top: 9px; }
.a + .q { margin-top: 28px; }
.a {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  display: flex;
  gap: 13px;
  padding: 5px 0 7px;
}
.a-body { flex: 1 1 auto; min-width: 0; max-width: 820px; }
.a-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 10px; color: var(--muted); }
.a-meta .dot {
  width: 6px;
  height: 6px;
  margin-left: 1px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.a-meta .who { color: var(--ink); font-size: 13px; font-weight: 750; letter-spacing: -.01em; }
.a-meta .badge {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .04em;
}
.a-meta .src-name { font-size: 11px; color: var(--muted); }

/* ── answer typography ─────────────────────────────────────────────────── */
/* An answer can contain a token with no space in it — a URL, a long chemical
   name, an unbroken identifier. Nothing here broke those, so the paragraph
   kept its natural width and painted straight out of the answer card and
   across the page: measured with a 90-character token, the paragraph's
   scrollWidth was 732px against a 326px box at 390 and a 635px box at 1440.
   `anywhere` also lets the flex column shrink the line to the card, which
   `break-word` does not. `.q` is here for the same reason — a pasted URL in a
   question. */
.md, .q { overflow-wrap: anywhere; }

.md { display: flex; flex-direction: column; gap: 12px; color: var(--ink-2); font-size: 15.5px; line-height: 1.78; }
.md > *:first-child { margin-top: 0; }
.md p { margin: 0; line-height: 1.78; }
.md > p:first-child { color: var(--ink); font-size: 16px; font-weight: 450; }
.md h2, .md h3, .md h4 {
  margin: 11px 0 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.025em;
  text-transform: none;
}
.md h2::before { content: ""; display: inline-block; width: 4px; height: 17px; margin: 0 9px -2px 0; border-radius: 5px; background: linear-gradient(var(--accent), var(--im-warm)); }
.md strong { color: var(--ink); font-weight: 700; }
.md ul, .md ol { display: flex; flex-direction: column; gap: 7px; margin: 0; padding-left: 22px; }
.md li::marker { color: var(--accent); }
.md blockquote { margin: 0; padding: 9px 14px; border-left: 2px solid var(--accent); border-radius: 0 9px 9px 0; background: color-mix(in srgb, var(--panel-2) 64%, transparent); color: var(--ink-2); }
.md code { padding: 2px 6px; border-radius: 6px; background: var(--panel-2); color: var(--accent); font-family: var(--mono); font-size: .9em; }
.md pre { max-width: 100%; overflow-x: auto; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #0b141d; color: #dcebf4; }
.md pre code { padding: 0; background: transparent; color: inherit; }
.md hr { border: 0; border-top: 1px solid var(--line); }
.md a { color: var(--brass-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.md-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.md.typing::after { background: var(--accent); }
.cite {
  min-width: 17px;
  padding: 1px 5px;
  margin: 0 2px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  font-size: 10px;
  line-height: 1.5;
  vertical-align: super;
}

/* ── article cards / references ────────────────────────────────────────── */
.src-panel { margin: 19px 0 0; padding-top: 15px; border-top: 1px solid var(--line); }
.src-head { margin: 0 0 10px; color: var(--muted); font-size: 10px; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.src-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.src-card {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  min-height: 112px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  color: var(--ink-2);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.src-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: var(--panel-2);
  color: var(--ink);
  box-shadow: 0 16px 30px -25px color-mix(in srgb, var(--accent) 40%, transparent);
}
.src-media { position: relative; display: block; min-height: 112px; overflow: hidden; background: var(--panel-2); }
.src-media img { display: block; width: 100%; height: 100%; min-height: 112px; position: absolute; inset: 0; object-fit: cover; }
.src-media.is-placeholder {
  background:
    radial-gradient(circle at 74% 27%, rgba(130, 174, 246, .24), transparent 28%),
    radial-gradient(circle at 25% 74%, rgba(104, 221, 206, .16), transparent 30%),
    linear-gradient(145deg, #172c3c, #162239 65%, #29304c);
}
.src-media.is-placeholder::before { content: ""; position: absolute; width: 38px; height: 38px; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(180, 226, 237, .34); border-radius: 14px; background: url("/assets/img/amigo/front.png") center / cover no-repeat; opacity: .8; }
.src-n { position: absolute; z-index: 2; left: 8px; top: 8px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: rgba(7,15,25,.72); color: #e8f6fc; font-size: 10px; font-weight: 800; backdrop-filter: blur(8px); }
.src-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 5px; padding: 11px 12px; }
/* Two lines of summary, cut with an ellipsis — which is what the clamp below
   has always said it would do, and never did. `white-space: nowrap` is still
   declared on .src-card further up chat-page.css, from when the source card
   was a one-line chip; it inherits into the excerpt, so the text could not
   wrap at all. Measured at 1440: scrollWidth 312 against a clientWidth of 180,
   one line 14px tall, and the card's own overflow:hidden cutting it mid-word
   ("converting light energ") with no ellipsis. The card is a media card in
   this layer, so the rule that made it a chip does not apply here.
   `flex: 0 0 auto` keeps .src-body, a column flex container, from shrinking
   the two lines back out of existence. */
.src-t { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--ink); font-size: 12.5px; font-weight: 740; line-height: 1.35; white-space: normal; flex: 0 0 auto; }
.src-excerpt { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--muted); font-size: 10.5px; line-height: 1.45; white-space: normal; flex: 0 0 auto; }
.src-d { overflow: hidden; color: var(--accent); font-size: 9.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.src-fallback { margin-top: 8px; }

/* ── answer actions + next questions ───────────────────────────────────── */
.a-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.a-actions button {
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 620;
}
.a-actions button:hover { border-color: var(--line); background: var(--panel-2); color: var(--ink); }
.followups { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.followups button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 75%, transparent);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  text-align: left;
}
.followups button:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--ink); }

/* ── composer dock ────────────────────────────────────────────────────── */
.dock {
  position: sticky;
  z-index: 10;
  bottom: 0;
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
  padding: 15px 28px max(14px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 0%, transparent), color-mix(in srgb, var(--bg) 93%, transparent) 18%, var(--bg) 48%);
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.is-empty .dock { position: relative; margin: 0 auto; padding-top: 0; background: transparent; backdrop-filter: none; }
.dock-in { width: min(100%, 840px); max-width: 840px; margin: 0 auto; position: relative; }
.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 68px;
  padding: 11px 12px;
  border: 1px solid var(--line-2);
  border-radius: 23px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 18px 48px -34px rgba(0,0,0,.76), inset 0 1px rgba(255,255,255,.035);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line-2));
  background: var(--panel);
  box-shadow: 0 22px 52px -35px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px rgba(255,255,255,.045);
}
.composer textarea {
  min-width: 0;
  min-height: 39px;
  max-height: 168px;
  padding: 8px 5px;
  color: var(--ink);
  font: inherit;
  font-size: 15.5px;
  line-height: 1.5;
}
.composer textarea::placeholder { color: var(--muted); opacity: .95; }
.plus, .mic {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  color: var(--ink-2);
}
.plus:hover, .mic:hover { border-color: var(--line-2); background: var(--panel-2); color: var(--accent); }
.plus svg, .mic svg { width: 18px; height: 18px; }
.composer .send {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: linear-gradient(140deg, var(--im-accent), color-mix(in srgb, var(--im-accent) 70%, var(--im-warm)));
  color: var(--im-bg);
  box-shadow: 0 8px 24px -13px color-mix(in srgb, var(--im-accent) 55%, transparent);
}
html[data-theme="light"] .composer .send { background: linear-gradient(140deg, var(--im-accent), color-mix(in srgb, var(--im-accent) 62%, var(--im-warm))); color: #ffffff; }
.composer .send svg { width: 18px; height: 18px; }
.composer .send:disabled { opacity: .4; }
.composer .stop { min-height: 38px; border-radius: 12px; }
.meta-row { margin: 9px 5px 0; padding: 0 4px; gap: 10px; min-height: 25px; }
.meta-row .mchip { min-height: 28px; padding: 5px 10px; border-color: var(--line); border-radius: 9px; background: color-mix(in srgb, var(--panel) 64%, transparent); font-size: 10.5px; }
.meta-row .mchip::before { width: 6px; height: 6px; background: var(--accent); }
.meta-row .hint { font-size: 10px; }
.chat-note { margin: 8px 6px 0; color: var(--muted); font-size: 9.5px; line-height: 1.5; text-align: center; }
.options-panel {
  margin: 9px 2px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.options-panel select { border-radius: 10px; }
.offline { border-color: color-mix(in srgb, #e2a24c 55%, var(--line)); border-radius: 12px; }
.stop[hidden], .voice[hidden] { display: none; }

/* ── loading, errors, saved answers ────────────────────────────────────── */
.working {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 11px;
  margin: 13px 0 12px 47px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 15px 15px 15px 6px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
}
.working .amigo-avatar { width: 17px; height: 17px; border-color: color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); }
.note { margin: 14px 0 14px 47px; border-color: var(--line); border-radius: 15px; background: var(--panel); }
.note strong { color: var(--ink); }
.note p { color: var(--muted); }
.note button { border-color: var(--line-2); border-radius: 10px; }
.saved-top { margin-bottom: 14px; }
.saved-card { border-color: var(--line); border-radius: 15px; background: var(--panel); }
.jump { left: calc(var(--rail-w) + (100vw - var(--rail-w)) / 2); border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink-2); }

/* ── mobile / tablet ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body, body.rail-hidden { grid-template-columns: minmax(0, 1fr) !important; }
  .main { grid-column: 1; grid-row: 1; }
  .rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 80;
    width: min(310px, 88vw);
    height: 100%;
    padding: max(18px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
    transform: translateX(-105%);
    opacity: 1;
    background: var(--rail);
    box-shadow: 18px 0 50px -26px rgba(0,0,0,.6);
  }
  body:not(.rail-hidden) .rail { transform: translateX(0); }
  body:not(.rail-hidden)::after { content: ""; position: fixed; inset: 0; z-index: 70; background: rgba(3,9,14,.54); backdrop-filter: blur(3px); }
  .top { min-height: 58px; flex-basis: 58px; padding: 8px 13px; }
  .scroll { padding-bottom: 0; }
  .stage, body.is-empty .stage { width: min(calc(100% - 34px), 760px); padding: 24px 0 17px; }
  .dock { padding: 11px 14px max(76px, calc(70px + env(safe-area-inset-bottom, 0px))); }
  body.is-empty .dock { padding: 0 14px max(22px, env(safe-area-inset-bottom, 0px)); }
  .dock-in { width: 100%; }
  .chat-note { display: none; }
  .empty-mark { width: 65px; height: 65px; margin-bottom: 15px; }
  .empty .empty-heading { font-size: clamp(31px, 7.5vw, 42px); }
  .empty > p { font-size: 13.5px; margin-bottom: 17px; }
  .welcome-trust { gap: 8px 13px; margin-bottom: 20px; }
  .welcome-trust span { font-size: 10px; }
  .starters { gap: 8px; }
  .starters button { min-height: 88px; padding: 12px; }
  .starters span { font-size: 11px; }
  .q { max-width: 91%; }
  .a-body { max-width: calc(100% - 43px); }
  .md { font-size: 15px; }
  .working, .note { margin-left: 43px; }
  .jump { left: 50%; bottom: 134px; }
}

@media (max-width: 580px) {
  .top { padding-inline: 10px; }
  .top h1 { max-width: 46%; font-size: 12px; }
  .top-right { gap: 1px; }
  .ico { width: 34px; height: 34px; }
  .stage, body.is-empty .stage { width: calc(100% - 28px); padding-top: 19px; }
  body.is-empty .scroll { justify-content: center; }
  .empty-mark { width: 58px; height: 58px; border-radius: 19px; margin-bottom: 12px; }
  .welcome-eyebrow { margin-bottom: 10px; padding: 5px 9px; font-size: 8px; }
  .empty .empty-heading { max-width: 430px; margin-bottom: 10px; font-size: clamp(28px, 8vw, 36px); }
  .empty > p { max-width: 42ch; font-size: 12.5px; line-height: 1.6; margin-bottom: 13px; }
  .welcome-trust { gap: 7px 11px; margin-bottom: 15px; }
  .welcome-trust span { font-size: 9px; }
  .welcome-trust svg { width: 13px; height: 13px; }
  .starters { grid-template-columns: minmax(0,1fr); gap: 7px; }
  .starters button { min-height: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; }
  .starters b { flex: 0 0 112px; margin: 0; font-size: 9px; }
  .starters span { text-align: left; font-size: 11px; }
  .empty-links { margin-top: 13px; gap: 6px 15px; }
  .empty-links a { font-size: 10px; }
  .dock { padding: 9px 10px max(74px, calc(68px + env(safe-area-inset-bottom, 0px))); }
  body.is-empty .dock { padding: 0 10px max(16px, env(safe-area-inset-bottom, 0px)); }
  .composer { min-height: 60px; padding: 8px; gap: 6px; border-radius: 19px; }
  .composer textarea { min-height: 38px; padding: 8px 2px; font-size: 15px; }
  .plus, .mic { flex-basis: 34px; width: 34px; height: 34px; border-radius: 11px; }
  .plus svg, .mic svg { width: 16px; height: 16px; }
  .composer .send { flex-basis: 38px; width: 38px; height: 38px; border-radius: 13px; }
  .meta-row { margin-top: 7px; }
  .meta-row .hint { max-width: 44%; font-size: 9px; }
  .options-panel .opt { align-items: flex-start; }
  .src-cards { grid-template-columns: minmax(0,1fr); }
  .src-card { grid-template-columns: 92px minmax(0,1fr); min-height: 100px; }
  .src-media, .src-media img { min-height: 100px; }
  .a { gap: 9px; }
  .a-body { max-width: calc(100% - 37px); }
  .md { font-size: 14.5px; line-height: 1.72; }
  .md > p:first-child { font-size: 15px; }
  .working, .note { margin-left: 37px; }
  .q { max-width: 94%; padding: 10px 13px; font-size: 14px; }
  .a-actions button { min-height: 30px; padding: 5px 8px; font-size: 10.5px; }
  .followups button { font-size: 10.5px; }
  .chat-note { display: none; }
}

@media (max-height: 740px) and (min-width: 901px) {
  body.is-empty .stage { padding-top: 12px; padding-bottom: 10px; }
  .empty-mark { width: 58px; height: 58px; margin-bottom: 11px; }
  .empty .empty-heading { font-size: clamp(30px, 3.8vw, 42px); }
  .empty > p { margin-bottom: 12px; }
  .welcome-trust { margin-bottom: 14px; }
  .starters button { min-height: 76px; padding: 11px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ── design-system.css ── */
/* Veridell Design System 1.0 — shared tokens and restrained multimorphism.
   Rule of use: glass for navigation/chrome, clay for a few expressive feature
   surfaces, soft inset depth for controls, and calm flat surfaces for reading. */
:root {
  --im-bg: #f3f6f2;
  --im-surface: #ffffff;
  --im-surface-2: #eaf0eb;
  --im-text: #17251f;
  --im-muted: #52645a;
  --im-faint: #64756b;
  --im-border: #d5e0d8;
  --im-border-strong: #bdcdc2;
  --im-accent: #176b4c;
  --im-accent-soft: #e0f1e8;
  --im-warm: #a65f32;
  --im-shadow-sm: 0 2px 8px rgba(20, 48, 35, .06);
  --im-shadow: 0 12px 32px -20px rgba(20, 48, 35, .24), 0 2px 6px rgba(20, 48, 35, .05);
  --im-shadow-lg: 0 24px 60px -28px rgba(20, 48, 35, .32);
  --im-clay-shadow: 8px 8px 20px rgba(26, 56, 40, .09), -7px -7px 18px rgba(255, 255, 255, .88);
  --im-inset-shadow: inset 2px 2px 6px rgba(26, 56, 40, .08), inset -2px -2px 6px rgba(255, 255, 255, .84);
  --im-glass: rgba(250, 253, 250, .76);
  --im-glass-border: rgba(255, 255, 255, .7);
  --im-radius-sm: 12px;
  --im-radius-md: 18px;
  --im-radius-lg: 26px;
  --im-motion: cubic-bezier(.2, .7, .2, 1);
  --bg: var(--im-bg);
  --surface: var(--im-surface);
  --surface-2: var(--im-surface-2);
  --panel: var(--im-surface);
  --panel-2: var(--im-surface-2);
  --panel-soft: var(--im-surface-2);
  --text: var(--im-text);
  --ink: var(--im-text);
  --ink-2: var(--im-muted);
  --muted: var(--im-muted);
  --faint: var(--im-faint);
  --border: var(--im-border);
  --border-2: var(--im-border-strong);
  --line: var(--im-border);
  --line-2: var(--im-border-strong);
  --accent: var(--im-accent);
  --primary: var(--im-accent);
  --forest: #176b4c; --forest-ink: #176b4c; --copper: #a65f32; --copper-ink: #89502c; --sage: #c3dfce; --sand: #eaf0eb;
  --on-primary: #ffffff; --accent-2: #287b5c; --focus: var(--im-accent);
  --shadow-sm: var(--im-shadow-sm);
  --shadow: var(--im-shadow);
  --shadow-lg: var(--im-shadow-lg);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --im-bg: #0b1110;
  --im-surface: #111b18;
  --im-surface-2: #17231e;
  --im-text: #e9f0eb;
  --im-muted: #b0beb5;
  --im-faint: #9aa99f;
  --im-border: #293b32;
  --im-border-strong: #3b5145;
  --im-accent: #83d4a8;
  --im-accent-soft: #18382a;
  --im-warm: #e2a978;
  --im-shadow-sm: 0 2px 8px rgba(0, 0, 0, .24);
  --im-shadow: 0 14px 34px -20px rgba(0, 0, 0, .68), 0 2px 6px rgba(0, 0, 0, .3);
  --im-shadow-lg: 0 24px 64px -28px rgba(0, 0, 0, .78);
  --im-clay-shadow: 8px 8px 20px rgba(0, 0, 0, .34), -7px -7px 18px rgba(255, 255, 255, .025);
  --im-inset-shadow: inset 2px 2px 7px rgba(0, 0, 0, .3), inset -2px -2px 7px rgba(255, 255, 255, .025);
  --im-glass: rgba(13, 22, 18, .76);
  --im-glass-border: rgba(255, 255, 255, .08);
  --bg: var(--im-bg); --surface: var(--im-surface); --surface-2: var(--im-surface-2);
  --panel: var(--im-surface); --panel-2: var(--im-surface-2); --panel-soft: var(--im-surface-2);
  --text: var(--im-text); --ink: var(--im-text); --ink-2: var(--im-muted); --muted: var(--im-muted); --faint: var(--im-faint);
  --border: var(--im-border); --border-2: var(--im-border-strong); --line: var(--im-border); --line-2: var(--im-border-strong);
  --accent: var(--im-accent); --primary: var(--im-accent);
  --forest: #83d4a8; --forest-ink: #a8e6c1; --copper: #e2a978; --copper-ink: #efb98b; --sage: #a8d9b9; --sand: #17231e;
  --on-primary: #0b1110; --accent-2: #a5dfbb; --focus: var(--im-accent);
  --shadow-sm: var(--im-shadow-sm); --shadow: var(--im-shadow); --shadow-lg: var(--im-shadow-lg);
  --rail: #0d1713; --line: var(--im-border); --line-2: var(--im-border-strong);
  --ink-2: var(--im-muted); --brass: var(--im-warm); --brass-soft: #f1bd8e;
  --user: #18362a;
}
html[data-theme="light"] {
  --bg: var(--im-bg); --rail: #edf2ee; --panel: var(--im-surface); --panel-2: var(--im-surface-2);
  --line: var(--im-border); --line-2: var(--im-border-strong); --ink: var(--im-text); --ink-2: var(--im-muted);
  --muted: var(--im-muted); --accent: var(--im-accent); --brass: var(--im-warm); --brass-soft: #89502c;
  --user: #e2f0e7; --shadow: var(--im-shadow);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] #research-app,
html[data-theme="dark"] #research-app {
  --bg: var(--im-bg); --panel: var(--im-surface); --panel-soft: var(--im-surface-2);
  --line: var(--im-border); --line-strong: var(--im-border-strong);
  --text: var(--im-text); --muted: var(--im-muted); --muted-2: var(--im-faint);
  --accent: var(--im-accent); --accent-deep: var(--im-accent); --accent-soft: var(--im-accent-soft);
  --teal: var(--im-accent); --green: var(--im-accent); --shadow: var(--im-shadow);
  --lift: var(--im-clay-shadow); --lift-sm: var(--im-shadow-sm); --press: var(--im-inset-shadow);
  --grad: linear-gradient(125deg, var(--im-accent), #3e9a75);
}
html[data-theme="dark"] #research-app { --green-soft: #193529; --teal-soft: #18352e; --violet-soft: #25251f; --orange-soft: #34271c; }
html, body { background-color: var(--im-bg); color: var(--im-text); }
body { background-image: radial-gradient(70rem 35rem at 4% -12%, color-mix(in srgb, var(--im-accent) 8%, transparent), transparent 62%), radial-gradient(55rem 30rem at 96% 0%, color-mix(in srgb, var(--im-warm) 6%, transparent), transparent 66%); }

/* Glassmorphism is reserved for persistent controls, never long-form text. */
.topbar, .top, .chat-header, .topbar-actions, .suggest, .lang-menu, .im-theme-toggle {
  background: var(--im-glass);
  border-color: var(--im-glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}
.topbar { border-bottom: 1px solid var(--im-border); box-shadow: 0 4px 24px rgba(10, 30, 20, .035); }
@supports not ((backdrop-filter: blur(1px))) {
  .topbar, .top, .chat-header, .topbar-actions, .suggest, .lang-menu, .im-theme-toggle { background: var(--im-surface); }
}
[data-comfort="opaque"] .topbar,
[data-comfort="opaque"] .top,
[data-comfort="opaque"] .chat-header,
[data-comfort="opaque"] .topbar-actions { background: var(--im-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Calm, tactile fields: subtle inset depth, with an unmistakable focus ring. */
.searchbar, .search-box, .search-box input, .composer, .chat-composer, #prompt {
  border-radius: var(--im-radius-md);
}
.searchbar, .search-box, .chat-composer {
  box-shadow: var(--im-inset-shadow);
  border: 1px solid var(--im-border-strong);
  background: var(--im-surface);
}
.searchbar:focus-within, .search-box:focus-within, .chat-composer:focus-within {
  border-color: var(--im-accent);
  box-shadow: var(--im-inset-shadow), 0 0 0 3px color-mix(in srgb, var(--im-accent) 23%, transparent);
}

/* Claymorphism: one or two expressive areas per screen, not every card. */
.dash-hero, .welcome-block, .aotd, .empty .empty-orb, .chat-empty-card {
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius-lg);
  box-shadow: var(--im-clay-shadow);
}
.suggestion-card, .card, .source-card, .topic-card, .content-option, .query-summary {
  border-radius: var(--im-radius-md);
  transition: border-color .2s var(--im-motion), box-shadow .2s var(--im-motion), transform .2s var(--im-motion);
}
.card, .source-card, .topic-card { box-shadow: var(--im-shadow-sm); }
@media (hover:hover) {
  .card:hover, .source-card:hover, .topic-card:hover { box-shadow: var(--im-shadow); transform: translateY(-2px); }
}

/* Reading surfaces stay opaque and quiet for comfortable long sessions. */
.panel, .article-panel, .answer-card, .factbox, .prose, .thread, .message-content {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.prose { line-height: 1.78; }
.prose p, .prose li { max-width: 72ch; }

/* Consistent controls and accessible focus/target sizing. */
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 2px solid var(--im-accent); outline-offset: 3px; }
/* A skip-link target and a route change focus #main programmatically. That is
   not keyboard navigation, so it must not paint a ring around the whole page. */
#main:focus, #main:focus-visible, main:focus-visible, [tabindex="-1"]:focus-visible { outline: none !important; }
.im-theme-toggle {
  display: inline-grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  margin-inline-start: 8px; border: 1px solid var(--im-border); border-radius: 14px;
  color: var(--im-text); box-shadow: var(--im-shadow-sm); cursor: pointer;
  transition: transform .18s var(--im-motion), box-shadow .18s var(--im-motion), border-color .18s;
  z-index: 120;
}
.im-theme-toggle svg { width: 19px; height: 19px; display: block; }
/* The shared control is appended to whatever header a page has. Keep it on the
   header row instead of letting it wrap onto a second line of its own. */
.topbar-inner > .im-theme-toggle { flex: 0 0 auto; margin-inline-start: 10px; }
@media (min-width: 861px) { .topbar-inner { flex-wrap: nowrap; } }
.im-theme-toggle:hover { transform: translateY(-1px); border-color: var(--im-accent); box-shadow: var(--im-shadow); }
.im-theme-toggle:active { transform: translateY(0); }
body > .im-theme-toggle { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
.bottom-nav { background: var(--im-glass); border-top: 1px solid var(--im-border); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
::selection { background: color-mix(in srgb, var(--im-accent) 26%, transparent); }

@media (max-width: 720px) {
  .topbar-inner { gap: 8px; }
  .dash-hero, .welcome-block, .aotd { border-radius: 22px; }
  .im-theme-toggle { width: 44px; height: 44px; flex-basis: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ── amigo-ui.css ── */
/* Amigo UI refinement: shared article, card, gallery and navigation rules.
   Tokens remain owned by design-system.css; this sheet only composes them. */
:root {
  --amigo-radius-sm: 12px;
  --amigo-radius-md: 18px;
  --amigo-radius-lg: 24px;
  --amigo-motion: cubic-bezier(.2,.75,.25,1);
}

/* Article media: turn source galleries into a responsive, balanced grid. */
.art-body ul.gallery,
.art-body .gallery.mw-gallery-traditional,
.art-body .mw-gallery-traditional,
.art-body .mw-gallery-packed,
.art-body .article-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  align-items: start;
  gap: clamp(10px, 2vw, 18px);
  width: 100%;
  max-width: 100%;
  margin: 22px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  columns: initial !important;
}
.art-body .gallerybox,
.art-body .gallery > li,
.art-body .article-gallery-grid > * {
  float: none !important;
  width: auto !important;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  break-inside: avoid;
}
.art-body .gallerybox .thumb,
.art-body .gallery > li .thumb {
  display: grid;
  place-items: center;
  width: 100% !important;
  min-height: 150px;
  margin: 0 !important;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--im-border);
  border-radius: var(--amigo-radius-md);
  background: var(--im-surface-2);
}
.art-body .gallerybox .thumb img,
.art-body .gallery > li img,
.art-body .article-gallery-grid img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 260px;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 10px;
}
.art-body .gallerytext,
.art-body .gallerybox .gallerytext {
  padding: 8px 3px 2px;
  color: var(--im-muted);
  font-size: .88rem;
  line-height: 1.5;
  text-align: center;
}
.art-body .gallerybox .gallerytext p { margin: 0; max-width: none; }
@media (min-width: 760px) {
  .art-body ul.gallery,
  .art-body .gallery.mw-gallery-traditional,
  .art-body .mw-gallery-traditional,
  .art-body .mw-gallery-packed,
  .art-body .article-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  }
}

/* Shared media and cards should align to a single edge and never overflow. */
.card, .source-card, .topic-card, .src-card, .suggestion-card,
.article-panel, .factbox, .panel-wide {
  border-radius: var(--amigo-radius-md);
}
img, video, iframe { max-width: 100%; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--im-accent);
  outline-offset: 3px;
}

/* One canonical five-destination phone bar, with an even rhythm. */
.bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 3px;
  padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
}
.bottom-nav a {
  min-width: 0;
  min-height: 48px;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border-radius: 13px;
  font-weight: 550;
  transition: color .18s var(--amigo-motion), background-color .18s var(--amigo-motion);
}
.bottom-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav a[aria-current="page"] { color: var(--im-accent); background: var(--im-accent-soft); }
@media (max-width: 360px) {
  .bottom-nav a { font-size: 9px; }
  .bottom-nav svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav a, .card, .source-card, .topic-card { transition: none !important; }
}

/* ── amigo-chat.css ── */
/* Amigo chat — focused composition, ordered controls and expressive assistant state. */
body.amigo-chat {
  --bg: var(--im-bg);
  --rail: var(--im-surface);
  --panel: var(--im-surface);
  --panel-2: var(--im-surface-2);
  --line: var(--im-border);
  --line-2: var(--im-border-strong);
  --ink: var(--im-text);
  --ink-2: var(--im-muted);
  --muted: var(--im-faint);
  --accent: var(--im-accent);
  --brass: var(--im-warm);
  --brass-soft: var(--im-warm);
  --user: var(--im-accent-soft);
}
body.amigo-chat .main { min-width: 0; }
body.amigo-chat .top {
  min-height: 64px;
  padding: 10px clamp(14px, 2.4vw, 28px);
  border-bottom: 1px solid var(--im-border);
  background: var(--im-glass);
}
body.amigo-chat .top h1 {
  min-width: 0;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 620;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
body.amigo-chat .top-right { display: flex; align-items: center; gap: 6px; }
body.amigo-chat .ico,
body.amigo-chat .rail-toggle {
  width: 42px; height: 42px; min-width: 42px;
  display: inline-grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--im-muted);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
body.amigo-chat .ico:hover,
body.amigo-chat .rail-toggle:hover {
  border-color: var(--im-border);
  background: var(--im-surface-2);
  color: var(--im-text);
}
body.amigo-chat .ico svg, body.amigo-chat .rail-toggle svg { width: 19px; height: 19px; }
body.amigo-chat .brand { gap: 12px; padding-block: 5px 16px; }
body.amigo-chat .brand .mark {
  width: 42px; height: 42px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--im-accent) 70%, transparent);
}
body.amigo-chat .brand .mark img { display: block; width: 100%; height: 100%; }
body.amigo-chat .brand-text b {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.035em;
}
body.amigo-chat .brand-text em {
  color: var(--im-muted);
  font-size: 9px;
  letter-spacing: .12em;
}
body.amigo-chat .rail-new {
  min-height: 46px;
  border-color: var(--im-border-strong);
  border-radius: 14px;
  background: var(--im-surface-2);
}
body.amigo-chat .rail-new:hover { background: var(--im-accent-soft); border-color: var(--im-accent); }
body.amigo-chat .rail-search {
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--im-border);
  border-radius: 14px;
  background: var(--im-bg);
  box-shadow: none;
}
body.amigo-chat .rail-search:focus-within {
  border-color: var(--im-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--im-accent) 17%, transparent);
}
body.amigo-chat .rail-search svg { width: 17px; height: 17px; }
body.amigo-chat .rail-search input { font-size: 14px; }
body.amigo-chat .empty { width: min(100%, 780px); padding-inline: clamp(12px, 3vw, 28px); }
body.amigo-chat .empty-mark {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  margin: 0 auto 20px;
  border-radius: 25px;
  background: var(--im-surface);
  box-shadow: var(--im-shadow);
  animation: amigo-arrive .55s cubic-bezier(.2,.75,.25,1) both;
}
body.amigo-chat .empty-mark img { width: 100%; height: 100%; display: block; }
body.amigo-chat .welcome-eyebrow { letter-spacing: .12em; font-size: 10px; font-weight: 700; }
body.amigo-chat .welcome-pulse { background: var(--im-accent); box-shadow: 0 0 0 4px var(--im-accent-soft); }
body.amigo-chat .empty-heading {
  max-width: 660px;
  margin: 14px auto 12px;
  font-family: var(--sans);
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 660;
  letter-spacing: -.045em;
  line-height: 1.12;
}
body.amigo-chat .empty-heading em { color: var(--im-accent); font-style: normal; }
body.amigo-chat .empty > p { max-width: 54ch; margin-inline: auto; color: var(--im-muted); font-size: 14px; line-height: 1.75; }
body.amigo-chat .welcome-trust { justify-content: center; flex-wrap: wrap; gap: 9px 16px; }
body.amigo-chat .welcome-trust span { font-size: 11px; color: var(--im-muted); }
body.amigo-chat .starters { gap: 10px; }
body.amigo-chat .starters button,
body.amigo-chat .followups button {
  min-height: 42px;
  border: 1px solid var(--im-border);
  border-radius: 14px;
  background: var(--im-surface);
  color: var(--im-text);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
body.amigo-chat .starters button:hover,
body.amigo-chat .followups button:hover { border-color: var(--im-accent); background: var(--im-accent-soft); transform: translateY(-1px); }
body.amigo-chat .thread { width: min(100%, 820px); padding-inline: clamp(14px, 3vw, 30px); }
body.amigo-chat .q {
  max-width: min(78%, 660px);
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--im-accent) 18%, var(--im-border));
  border-radius: 20px 20px 6px 20px;
  background: var(--im-accent-soft);
  color: var(--im-text);
  line-height: 1.65;
}
body.amigo-chat .a {
  border: 1px solid var(--im-border);
  border-radius: 22px;
  background: var(--im-surface);
  box-shadow: var(--im-shadow-sm);
}
body.amigo-chat .a-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
body.amigo-chat .a-meta .who { font-weight: 720; color: var(--im-text); letter-spacing: -.01em; }
body.amigo-chat .a-meta .dot { display: none; }
body.amigo-chat .a-meta .badge { border-color: var(--im-border); background: var(--im-surface-2); color: var(--im-muted); }
body.amigo-chat .a::before { content: none !important; display: none !important; }
body.amigo-chat .a-body { width: 100%; max-width: 100%; line-height: 1.78; }
body.amigo-chat .a-body .md { font-size: 15px; }
body.amigo-chat .md h2, body.amigo-chat .md h3, body.amigo-chat .md h4 { letter-spacing: -.025em; line-height: 1.3; }
body.amigo-chat .md p { max-width: 74ch; }
body.amigo-chat .src-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; }
body.amigo-chat .src-card {
  min-width: 0;
  border: 1px solid var(--im-border);
  border-radius: 15px;
  background: var(--im-surface-2);
}
body.amigo-chat .a-actions { gap: 8px; flex-wrap: wrap; }
body.amigo-chat .a-actions button { min-height: 38px; padding: 7px 11px; border: 1px solid var(--im-border); border-radius: 11px; background: transparent; }
body.amigo-chat .a-actions button:hover { border-color: var(--im-accent); color: var(--im-accent); }

/* The same avatar is used while thinking and while the answer is being revealed. */
.amigo-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 11px;
  background: var(--im-surface-2);
  box-shadow: 0 0 0 1px var(--im-border);
  isolation: isolate;
}
.amigo-avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.amigo-avatar::before,
.amigo-avatar::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -4px;
  border: 1px solid color-mix(in srgb, var(--im-accent) 44%, transparent);
  border-radius: 14px;
  opacity: 0;
}
.amigo-avatar.is-active::before { opacity: 1; animation: amigo-orbit 2.2s linear infinite; }
.amigo-avatar.is-active::after {
  inset: -7px;
  border-color: color-mix(in srgb, var(--im-warm) 35%, transparent);
  opacity: .55;
  animation: amigo-breathe 1.7s ease-in-out infinite;
}
.a-meta.is-speaking .amigo-avatar { box-shadow: 0 0 0 3px var(--im-accent-soft); }
.working {
  display: flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
  max-width: 100%;
  margin: 16px 0 24px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--im-border);
  border-radius: 16px;
  background: var(--im-surface);
  color: var(--im-muted);
  font-size: 13px;
}
.working .amigo-avatar { width: 32px; height: 32px; flex-basis: 32px; }
.working > span:last-child { position: relative; }
.working > span:last-child::after { content: ""; display: inline-block; width: 16px; text-align: left; animation: amigo-ellipsis 1.2s steps(4,end) infinite; }

body.amigo-chat .dock { padding: 12px clamp(12px, 2vw, 24px) max(12px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--im-bg) 25%); }
body.amigo-chat .working, body.amigo-chat .note { margin-left: 0; }
body.amigo-chat .dock-in { width: min(100%, 820px); }
body.amigo-chat .composer {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--im-border-strong);
  border-radius: 22px;
  background: var(--im-surface);
  box-shadow: 0 12px 32px -22px rgba(0,0,0,.42);
}
body.amigo-chat .composer:focus-within {
  border-color: var(--im-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--im-accent) 15%, transparent), 0 12px 32px -22px rgba(0,0,0,.42);
}
body.amigo-chat .composer textarea { min-height: 42px; padding: 9px 4px; font-size: 16px; line-height: 1.5; }
body.amigo-chat .composer .plus,
body.amigo-chat .composer .mic,
body.amigo-chat .composer .send { width: 44px; height: 44px; flex-basis: 44px; border-radius: 15px; }
body.amigo-chat .composer .plus,
body.amigo-chat .composer .mic { border: 1px solid var(--im-border); background: var(--im-surface-2); }
body.amigo-chat .composer .send { background: var(--im-accent); color: #092016; box-shadow: none; }
body.amigo-chat .composer .send:hover { filter: brightness(1.06); transform: translateY(-1px); }
body.amigo-chat .composer .send:disabled { opacity: .42; transform: none; }
body.amigo-chat .composer .mic.is-listening { color: var(--im-accent); border-color: var(--im-accent); background: var(--im-accent-soft); }
body.amigo-chat .composer .mic.is-listening svg { animation: amigo-mic-pulse 1.2s ease-in-out infinite; }
body.amigo-chat .meta-row { align-items: center; }
body.amigo-chat .chat-note { max-width: 740px; margin: 8px auto 0; color: var(--im-faint); font-size: 10px; }
body.amigo-chat .options-panel { border-color: var(--im-border); border-radius: 16px; background: var(--im-surface); }
body.amigo-chat .options-panel .opt { align-items: center; }

@keyframes amigo-arrive { from { opacity: 0; transform: translateY(9px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes amigo-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes amigo-breathe { 0%,100% { transform: scale(.97); opacity: .25; } 50% { transform: scale(1.06); opacity: .7; } }
@keyframes amigo-ellipsis { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%,100% { content: "..."; } }

/* Never keep the old wheel-like loader: use a simple, neutral progress ring. */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--im-border-strong);
  border-top-color: var(--im-accent);
  border-radius: 50%;
  background: none !important;
  background-image: none !important;
  animation: amigo-spin .8s linear infinite;
}
@keyframes amigo-spin { to { transform: rotate(360deg); } }
@keyframes amigo-mic-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

@media (max-width: 1024px) {
  body.amigo-chat .dock, body.amigo-chat.is-empty .dock {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 760px) {
  body.amigo-chat .rail { box-shadow: 18px 0 44px -28px rgba(0,0,0,.62); }
  body.amigo-chat .top { min-height: 58px; padding: 7px 10px; }
  body.amigo-chat .top-right { gap: 2px; }
  body.amigo-chat .ico, body.amigo-chat .rail-toggle { width: 40px; min-width: 40px; height: 40px; }
  body.amigo-chat .thread { padding-inline: 12px; }
  body.amigo-chat .q { max-width: 90%; }
  body.amigo-chat .a { border-radius: 18px; }
  body.amigo-chat .dock { padding-inline: 10px; }
  body.amigo-chat .composer { gap: 6px; padding: 7px; border-radius: 19px; }
  body.amigo-chat .composer .plus,
  body.amigo-chat .composer .mic,
  body.amigo-chat .composer .send { width: 42px; height: 42px; flex-basis: 42px; border-radius: 14px; }
  body.amigo-chat .chat-note { font-size: 9px; }
}
@media (max-width: 390px) {
  /* #savedAnswersBtn is deliberately not hidden here any more — see the note
     in squircle.css, which loads last and now owns this decision. */
  body.amigo-chat .empty-heading { font-size: clamp(28px, 8vw, 34px); }
  body.amigo-chat .welcome-trust { gap: 7px 10px; }
  body.amigo-chat .welcome-trust span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.amigo-chat .empty-mark,
  .amigo-avatar.is-active::before,
  .amigo-avatar.is-active::after,
  .working > span:last-child::after,
  .spinner, body.amigo-chat .composer .mic.is-listening svg { animation: none !important; }
  body.amigo-chat .starters button,
  body.amigo-chat .followups button,
  body.amigo-chat .composer .send { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AMIGO — the character, not an app icon
   ══════════════════════════════════════════════════════════════════════════
   The mark used to be a glyph inside a rounded square with a border and a
   drop shadow, which reads as an app icon. Amigo is now a character — a small
   lamp of knowledge, with a flame for its spark — so the container steps back
   and lets the drawing carry itself: no box, no border, just the soft glow
   that is part of the artwork. */
body.amigo-chat .brand .mark {
  width: 44px; height: 44px;
  border-radius: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
}
body.amigo-chat .empty-mark {
  width: 92px; height: 92px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.amigo-chat .empty-mark img,
body.amigo-chat .brand .mark img { object-fit: contain; }

/* The avatar beside a message is small, so it keeps a faint ring to separate
   it from the answer card, but no fill: the glow in the artwork does that. */
.amigo-avatar {
  background: none;
  box-shadow: none;
}
.amigo-avatar::before { border-radius: 50%; }
.amigo-avatar.is-active::after { border-radius: 50%; }

/* A slow breath and a flicker of the flame: alive, never fidgety. */
@keyframes amigo-flicker-unused {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35%      { transform: translateY(-1.5px) rotate(1.6deg); }
  70%      { transform: translateY(0.5px) rotate(-1deg); }
}
/* (the flicker that used to live here was replaced by the state machine
   in preferences.css, which animates the whole character) */


@media (prefers-reduced-motion: reduce) {
  body.amigo-chat .empty-mark img,
  body.amigo-chat .brand .mark img { animation: none; }
}
@media (max-width: 600px) {
  body.amigo-chat .empty-mark { width: 80px; height: 80px; }
  body.amigo-chat .brand .mark { width: 40px; height: 40px; }
}

/* ── squircle.css ── */
/* ══════════════════════════════════════════════════════════════════════════
   THE SQUIRCLE LAYER — the last stylesheet the chat loads
   ══════════════════════════════════════════════════════════════════════════
   Why this file exists.

   The chat grew across a dozen stylesheets and five rewrites, and the result
   was a page where the same control was drawn three different ways: 34px icon
   buttons next to 42px ones, a 14px stroke icon beside a 19px one, a rail row
   at 9px radius above a composer at 26px, and a composer that lived inside the
   scrolling column. None of that is a bug in any one file — it is what happens
   when a design is applied in layers that never met.

   So this is one deliberate layer, loaded after everything else, that does
   three jobs and nothing more:

     1. ONE CORNER SYSTEM. iOS does not draw a rounded rectangle; it draws a
        superellipse, and the eye reads the difference immediately. Browsers
        that support `corner-shape: squircle` get that curve; every other
        browser gets the same radii as plain `border-radius`, which is the old
        look rather than a broken one.
     2. ONE ICON SYSTEM. Every icon in the chat gets the same optical size,
        the same stroke, the same cap and the same centre — and cannot be
        pushed off-centre by flex.
     3. ONE SHELL. The composer is a fixed row of the column, not a sticky
        element inside the scroller. That is what stops it drifting, jumping
        and overlapping the phone's bottom bar.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The radius ladder. Every surface picks a rung; nothing invents a number. */
  --sq-xs: 9px;
  --sq-sm: 13px;
  --sq-md: 18px;
  --sq-lg: 24px;
  --sq-xl: 30px;
  --sq-pill: 999px;

  /* One icon size per role, in pixels of drawn box. */
  --ico-sm: 16px;
  --ico-md: 19px;
  --ico-lg: 22px;

  /* iOS-style motion: quick out, soft settle, no bounce past the target. */
  --sq-ease: cubic-bezier(.32, .72, 0, 1);
  --sq-ease-out: cubic-bezier(.22, .61, .36, 1);
  --sq-fast: 140ms;
  --sq-base: 240ms;
  --sq-slow: 420ms;

  /* The rail, at a width that fits "New chat ⌘K" without squeezing. */
  --rail-w: 276px;
}

/* Continuous corners where the engine can draw them. This is a progressive
   enhancement: `corner-shape` is ignored by engines that do not know it, and
   the `border-radius` above it still applies. */
@supports (corner-shape: squircle) {
  body.amigo-chat .ico,
  body.amigo-chat .rail-toggle,
  body.amigo-chat .rail-new,
  body.amigo-chat .rail-search,
  body.amigo-chat .rail-row,
  body.amigo-chat .rail-foot,
  body.amigo-chat .starters button,
  body.amigo-chat .followups button,
  body.amigo-chat .src-card,
  body.amigo-chat .a-actions button,
  body.amigo-chat .composer,
  body.amigo-chat .composer .plus,
  body.amigo-chat .composer .mic,
  body.amigo-chat .composer .send,
  body.amigo-chat .options-panel,
  body.amigo-chat .options-panel select,
  body.amigo-chat .mchip,
  body.amigo-chat .q,
  body.amigo-chat .a,
  body.amigo-chat .brand .mark,
  body.amigo-chat .empty-mark,
  .amigo-avatar,
  .working,
  .jump {
    corner-shape: squircle;
  }
}

/* ── 1. the shell ─────────────────────────────────────────────────────────
   The composer used to be a `position: sticky` element *inside* `.scroll`.
   On iOS that combination is the classic source of a bar that slides under
   the keyboard, jumps when the address bar collapses and paints over the last
   line of an answer. The markup now puts `.dock` beside `.scroll` in `.main`,
   and this block makes the column the only thing that scrolls. */

body.amigo-chat {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.amigo-chat .main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body.amigo-chat .scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

body.amigo-chat .dock {
  position: relative;
  inset: auto;
  z-index: 6;
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 10px clamp(12px, 2vw, 24px) max(12px, env(safe-area-inset-bottom, 0px));
  background: var(--im-bg);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--im-border) 60%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.amigo-chat .dock-in {
  width: min(100%, 820px);
  max-width: 820px;
  margin: 0 auto;
}

/* The thread keeps its last line clear of the composer edge. */
body.amigo-chat .thread { padding-bottom: 10px; }

/* `safe center` is the difference between a centred welcome screen and one
   whose top edge is clipped away when the viewport is shorter than the
   content — which is what a phone in landscape looked like. */
body.amigo-chat.is-empty .scroll { align-items: safe center; }
body.amigo-chat.is-empty .stage { padding-block: 16px; }

/* Nothing on this page scrolls sideways, in any state. */
body.amigo-chat, body.amigo-chat .main, body.amigo-chat .scroll,
body.amigo-chat .stage, body.amigo-chat .thread,
body.amigo-chat .a, body.amigo-chat .a-body, body.amigo-chat .q {
  max-width: 100%;
  min-width: 0;
}

/* ── 2. one icon system ───────────────────────────────────────────────────
   Every icon is a 24-unit drawing rendered into a fixed box, centred by the
   flex parent, with the same caps. The old page mixed `display: grid` with
   inline SVG baselines, which is why some icons sat 2px low and others 2px
   high in the same row. */

body.amigo-chat svg {
  display: block;
  flex: none;
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.amigo-chat .ico,
body.amigo-chat .rail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: var(--sq-sm);
  line-height: 0;
  color: var(--im-muted);
  transition: background-color var(--sq-fast) var(--sq-ease-out),
              color var(--sq-fast) var(--sq-ease-out),
              transform var(--sq-fast) var(--sq-ease-out);
}

body.amigo-chat .ico:hover,
body.amigo-chat .rail-toggle:hover {
  background: var(--im-surface-2);
  border-color: transparent;
  color: var(--im-text);
}

body.amigo-chat .ico:active,
body.amigo-chat .rail-toggle:active { transform: scale(.94); }

body.amigo-chat .ico svg,
body.amigo-chat .rail-toggle svg { width: var(--ico-md); height: var(--ico-md); }

/* One gap and one alignment for the header, so the three buttons read as a
   group instead of three objects that happen to be near each other. */
body.amigo-chat .top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 8px clamp(12px, 2vw, 24px);
  border-bottom: 1px solid color-mix(in srgb, var(--im-border) 55%, transparent);
  background: var(--im-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.amigo-chat .top-right { display: flex; align-items: center; gap: 2px; margin-left: auto; }
body.amigo-chat .top h1 { flex: 1 1 auto; }

/* The composer's own controls: three equal circles of the same weight, with
   the send button as the only filled one. */
body.amigo-chat .composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  border-radius: var(--sq-lg);
  border: 1px solid color-mix(in srgb, var(--im-border-strong) 70%, transparent);
  background: var(--im-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--im-text) 4%, transparent),
              0 16px 40px -32px color-mix(in srgb, var(--im-text) 60%, transparent);
  transition: border-color var(--sq-base) var(--sq-ease-out),
              box-shadow var(--sq-base) var(--sq-ease-out);
}

body.amigo-chat .composer:focus-within {
  border-color: color-mix(in srgb, var(--im-accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--im-accent) 12%, transparent),
              0 18px 44px -32px color-mix(in srgb, var(--im-text) 60%, transparent);
}

body.amigo-chat .composer .plus,
body.amigo-chat .composer .mic,
body.amigo-chat .composer .send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border-radius: var(--sq-sm);
  line-height: 0;
  transition: background-color var(--sq-fast) var(--sq-ease-out),
              color var(--sq-fast) var(--sq-ease-out),
              transform var(--sq-fast) var(--sq-ease-out);
}

body.amigo-chat .composer .plus,
body.amigo-chat .composer .mic {
  border: 0;
  background: transparent;
  color: var(--im-muted);
}

body.amigo-chat .composer .plus:hover,
body.amigo-chat .composer .mic:hover {
  background: var(--im-surface-2);
  color: var(--im-text);
}

body.amigo-chat .composer .send {
  border: 0;
  background: var(--im-accent);
  color: #06231a;
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--im-accent) 90%, transparent);
}

html[data-theme="light"] body.amigo-chat .composer .send { color: #ffffff; }
body.amigo-chat .composer .send:disabled { opacity: .4; box-shadow: none; }
body.amigo-chat .composer .send:active { transform: scale(.95); }

body.amigo-chat .composer .plus svg,
body.amigo-chat .composer .mic svg { width: var(--ico-md); height: var(--ico-md); }
body.amigo-chat .composer .send svg { width: var(--ico-md); height: var(--ico-md); }

body.amigo-chat .composer textarea {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 168px;
  padding: 10px 2px;
  border: 0;
  outline: none;
  background: transparent;
  resize: none;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  line-height: 1.5;
  color: var(--im-text);
}

body.amigo-chat .composer textarea::placeholder { color: var(--im-faint); }

/* ── 3. the rail ──────────────────────────────────────────────────────────
   The old rail was a list of 12.5px text rows with 9px corners and a footer
   that wrapped. It reads as a sidebar now: a brand block, one loud primary
   action, a quiet search, dated groups, and a status chip that says which
   model will answer — the three things a chat sidebar is actually for. */

body.amigo-chat .rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: var(--rail-w);
  padding: 14px 12px 12px;
  background: color-mix(in srgb, var(--im-surface) 88%, var(--im-bg));
  border-right: 1px solid color-mix(in srgb, var(--im-border) 65%, transparent);
  overflow: hidden;
  transition: transform var(--sq-base) var(--sq-ease),
              opacity 180ms var(--sq-ease-out);
}

body.amigo-chat .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 2px 6px 6px;
  border-radius: var(--sq-md);
  text-decoration: none;
}

body.amigo-chat .brand .mark {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--sq-sm);
  overflow: hidden;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--im-text) 8%, transparent),
              0 10px 24px -18px color-mix(in srgb, var(--im-accent) 80%, transparent);
}

body.amigo-chat .brand .mark img { width: 100%; height: 100%; object-fit: cover; }
body.amigo-chat .brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.amigo-chat .brand-text b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
body.amigo-chat .brand-text em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--im-faint);
}

body.amigo-chat .rail-new {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--sq-sm);
  background: var(--im-accent);
  color: #06231a;
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--im-accent) 90%, transparent);
  transition: filter var(--sq-fast) var(--sq-ease-out),
              transform var(--sq-fast) var(--sq-ease-out);
}

html[data-theme="light"] body.amigo-chat .rail-new { color: #ffffff; }
body.amigo-chat .rail-new:hover { filter: brightness(1.05); border-color: transparent; background: var(--im-accent); }
body.amigo-chat .rail-new:active { transform: scale(.985); }
body.amigo-chat .rail-new svg { width: var(--ico-sm); height: var(--ico-sm); }
body.amigo-chat .rail-new span { flex: 1 1 auto; text-align: left; }

body.amigo-chat .rail-new kbd {
  font: 600 10px/1 var(--sans, inherit);
  padding: 3px 5px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  color: inherit;
  opacity: .75;
}

body.amigo-chat .rail-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--im-border) 80%, transparent);
  border-radius: var(--sq-sm);
  background: color-mix(in srgb, var(--im-bg) 70%, var(--im-surface));
  color: var(--im-faint);
  transition: border-color var(--sq-fast) var(--sq-ease-out),
              box-shadow var(--sq-fast) var(--sq-ease-out);
}

body.amigo-chat .rail-search:focus-within {
  border-color: color-mix(in srgb, var(--im-accent) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--im-accent) 12%, transparent);
}

body.amigo-chat .rail-search svg { width: var(--ico-sm); height: var(--ico-sm); }
body.amigo-chat .rail-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--im-text);
  font: inherit;
  font-size: 13px;
}
body.amigo-chat .rail-search input::placeholder { color: var(--im-faint); }

body.amigo-chat .rail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
body.amigo-chat .rail-scroll::-webkit-scrollbar { width: 8px; }
body.amigo-chat .rail-scroll::-webkit-scrollbar-thumb {
  border-radius: var(--sq-pill);
  background: color-mix(in srgb, var(--im-border-strong) 70%, transparent);
}

body.amigo-chat .rail-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 6px 4px;
}

body.amigo-chat .rail-head,
body.amigo-chat .rail-group {
  margin: 8px 6px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--im-faint);
}

body.amigo-chat .rail-group { margin-top: 12px; opacity: .9; }
body.amigo-chat .rail-count { margin-left: 4px; font-weight: 600; letter-spacing: 0; opacity: .8; }

body.amigo-chat .rail-list { display: flex; flex-direction: column; gap: 2px; }

body.amigo-chat .rail-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--sq-xs);
  transition: background-color var(--sq-fast) var(--sq-ease-out);
}

body.amigo-chat .rail-row:hover { background: color-mix(in srgb, var(--im-surface-2) 80%, transparent); }
body.amigo-chat .rail-row.is-active { background: var(--im-accent-soft); }

body.amigo-chat .rail-row.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: var(--sq-pill);
  background: var(--im-accent);
}

body.amigo-chat .rail-row .rail-item {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--sq-xs);
  background: transparent;
  color: var(--im-muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.amigo-chat .rail-row .rail-item.is-active { color: var(--im-text); font-weight: 600; }

body.amigo-chat .rail-del {
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--sq-xs);
  background: transparent;
  color: var(--im-faint);
  line-height: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--sq-fast) var(--sq-ease-out),
              background-color var(--sq-fast) var(--sq-ease-out);
}

body.amigo-chat .rail-del svg { width: 14px; height: 14px; }
body.amigo-chat .rail-row:hover .rail-del,
body.amigo-chat .rail-row:focus-within .rail-del,
body.amigo-chat .rail-del:focus-visible { opacity: 1; }
body.amigo-chat .rail-del:hover { background: color-mix(in srgb, #b3261e 14%, transparent); color: #d2604f; }
@media (hover: none) { body.amigo-chat .rail-del { opacity: .75; } }

/* The footer is the status line: a live dot, then which model answers. */
body.amigo-chat .rail-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--im-border) 70%, transparent);
  border-radius: var(--sq-sm);
  background: color-mix(in srgb, var(--im-bg) 55%, var(--im-surface));
  font-size: 11.5px;
  color: var(--im-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.amigo-chat .rail-foot .dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--sq-pill);
  background: var(--im-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--im-accent) 16%, transparent);
}

body.amigo-chat .rail-foot span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 4. the welcome screen, aligned to the same grid ────────────────────── */
body.amigo-chat .empty-mark {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: var(--im-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--im-text) 6%, transparent),
              0 18px 40px -28px color-mix(in srgb, var(--im-text) 60%, transparent);
}

body.amigo-chat .welcome-trust { gap: 8px 16px; }
body.amigo-chat .welcome-trust span { font-size: 11.5px; }
body.amigo-chat .welcome-trust svg { width: 15px; height: 15px; flex: none; }

body.amigo-chat .starters button {
  border-radius: var(--sq-md);
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--im-surface-2) 60%, transparent);
  transition: background-color var(--sq-base) var(--sq-ease-out),
              transform var(--sq-base) var(--sq-ease-out),
              box-shadow var(--sq-base) var(--sq-ease-out);
}

body.amigo-chat .starters button:hover {
  background: var(--im-surface-2);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -20px color-mix(in srgb, var(--im-text) 70%, transparent);
}

/* ── 5. the answer surface ──────────────────────────────────────────────── */
body.amigo-chat .a { border-radius: var(--sq-lg); border-color: color-mix(in srgb, var(--im-border) 80%, transparent); }
body.amigo-chat .q { border-radius: var(--sq-lg) var(--sq-lg) var(--sq-xs) var(--sq-lg); }
body.amigo-chat .src-card { border-radius: var(--sq-pill); }
body.amigo-chat .a-actions button { border-radius: var(--sq-pill); }

body.amigo-chat .amigo-avatar { border-radius: 10px; }
body.amigo-chat .a::before { border-radius: 8px; }

/* ── 6. the model menu ──────────────────────────────────────────────────── */
body.amigo-chat .options-panel {
  border-radius: var(--sq-md);
  border-color: color-mix(in srgb, var(--im-border) 80%, transparent);
  box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--im-text) 70%, transparent);
}

body.amigo-chat .options-panel .opt { gap: 6px; }
body.amigo-chat .options-panel select { border-radius: var(--sq-sm); }
body.amigo-chat .options-panel .opt-model { grid-column: 1 / -1; }

body.amigo-chat .opt-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 2px 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--im-faint);
}

body.amigo-chat .mchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--sq-pill);
  transition: background-color var(--sq-fast) var(--sq-ease-out);
}

body.amigo-chat .mchip:hover { background: var(--im-surface-2); }

/* ── 7. phones and tablets ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  body.amigo-chat { grid-template-columns: minmax(0, 1fr); }
  body.amigo-chat .rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(84vw, 300px);
    box-shadow: 24px 0 60px -40px rgba(0, 0, 0, .7);
  }
}

@media (max-width: 760px) {
  /* A short phone cannot centre this much content: it becomes an ordinary
     block that starts under the header and scrolls, instead of a centred flex
     item whose top edge is cropped away. */
  body.amigo-chat.is-empty .scroll { display: block; }
  body.amigo-chat.is-empty .stage { padding: 16px 0 22px; }
  body.amigo-chat .empty-mark { width: 62px; height: 62px; border-radius: 19px; margin-bottom: 16px; }
  body.amigo-chat .empty-heading { margin-top: 10px; }
  body.amigo-chat .top { min-height: 54px; padding: 6px 8px; gap: 4px; }
  body.amigo-chat .ico, body.amigo-chat .rail-toggle { width: 38px; height: 38px; min-width: 38px; }
  body.amigo-chat .dock { padding: 8px 10px max(10px, env(safe-area-inset-bottom)); }
  body.amigo-chat .composer { padding: 6px; gap: 6px; border-radius: var(--sq-md); }
  body.amigo-chat .composer .plus,
  body.amigo-chat .composer .mic,
  body.amigo-chat .composer .send { width: 38px; height: 38px; flex-basis: 38px; }
  body.amigo-chat .composer textarea { padding: 9px 2px; }
}

/* The Saved-answers button used to be hidden at exactly 390px and below. That
   is the width of the phone most readers hold, and the button is the only way
   into saved answers inside the chat — the "Saved" tab in the phone bar goes
   to /#/bookmarks, which is a different list. Measured at 390 the button was
   0×0 and unreachable. The header has room: the title is the only flexible
   item and it already truncates. */

/* On a phone the bottom navigation bar owns the last 64px of the viewport. */
@media (max-width: 1024px) {
  body.amigo-chat .dock { padding-bottom: calc(64px + max(10px, env(safe-area-inset-bottom, 0px))); }
}

/* ── 8. motion, honestly ────────────────────────────────────────────────────
   Small distances, short durations, no layout properties animated. A reader
   who asks for less motion gets none of it. */
@media (prefers-reduced-motion: no-preference) {
  body.amigo-chat .rail-row,
  body.amigo-chat .starters button,
  body.amigo-chat .a { transition-timing-function: var(--sq-ease-out); }

  body.amigo-chat .stage > * { animation: sq-settle var(--sq-slow) var(--sq-ease) both; }
  @keyframes sq-settle {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.amigo-chat *,
  body.amigo-chat *::before,
  body.amigo-chat *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 9. one target size ─────────────────────────────────────────────────────
   WCAG 2.5.8 asks for a 44px target, and every control in this shell was a
   few pixels under it. Measured with headless Chromium at 390, 768 and 1440:
   the header buttons were 40×40 (38×38 under 760), New chat 42 high, the chat
   search 38 high, the composer's round buttons 38 wide, the answer's own
   buttons 38 high, the depth chip 36, and each row's delete was 26 wide.
   One block at the end of the last chat stylesheet is the smallest honest fix
   — source order means it wins over every size declared above, and it is one
   rule to read or revert instead of a dozen scattered edits.
   Only the hit area grew; the icons and type are untouched. */
body.amigo-chat .ico,
body.amigo-chat .rail-toggle { width: 44px; height: 44px; min-width: 44px; }

body.amigo-chat .rail-new,
body.amigo-chat .rail-search { min-height: 44px; }

body.amigo-chat .composer .plus,
body.amigo-chat .composer .mic,
body.amigo-chat .composer .send { width: 44px; height: 44px; flex-basis: 44px; }

body.amigo-chat .mchip,
body.amigo-chat .starters button,
body.amigo-chat .followups button,
body.amigo-chat .a-actions button { min-height: 44px; }

/* The delete on a chat row: 26px was the smallest target in the page, and it
   sits right beside the button that opens the chat. The row is already 44
   high, so the hit area now fills it. */
body.amigo-chat .rail-del { width: 44px; height: 44px; margin-right: 0; }

/* ── chat-atelier.css ── */
/* Amigo Atelier — 2026 conversational interface refinement.
 * A deliberately mixed visual language: aurora ambience, glass chrome,
 * tactile (neo-skeuomorphic) controls, one clay focal point and quiet,
 * opaque answer surfaces. Reading comfort always outranks decoration.
 */

body.amigo-chat {
  --im-bg: #f5f6ff;
  --im-surface: #ffffff;
  --im-surface-2: #edf0fb;
  --im-text: #1a2038;
  --im-muted: #56617d;
  --im-faint: #697591;
  --im-border: #dce1f1;
  --im-border-strong: #c8d0e7;
  --im-accent: #5548c8;
  --im-accent-soft: #e9e8ff;
  --im-warm: #a64e2a;
  --im-teal: #128f8b;
  --im-shadow-sm: 0 3px 12px rgba(35, 42, 86, .055);
  --im-shadow: 0 16px 42px -26px rgba(35, 42, 86, .25), 0 3px 10px rgba(35, 42, 86, .045);
  --im-shadow-lg: 0 28px 70px -34px rgba(32, 38, 80, .30);
  --im-clay-shadow: 10px 12px 28px rgba(58, 63, 125, .11), -8px -8px 24px rgba(255, 255, 255, .95), inset 0 1px 0 rgba(255,255,255,.9);
  --im-inset-shadow: inset 3px 3px 8px rgba(47, 56, 103, .075), inset -3px -3px 8px rgba(255,255,255,.9);
  --im-glass: rgba(249, 250, 255, .78);
  --im-glass-border: rgba(255, 255, 255, .88);
  --amigo-accent-gradient: linear-gradient(132deg, #6858e3 0%, #5548c8 58%, #3e77cb 100%);
  --amigo-aurora-a: rgba(110, 95, 230, .115);
  --amigo-aurora-b: rgba(52, 174, 183, .085);
  --amigo-aurora-c: rgba(241, 158, 126, .075);
  --rail: var(--im-surface);
  --panel: var(--im-surface);
  --panel-2: var(--im-surface-2);
  --line: var(--im-border);
  --line-2: var(--im-border-strong);
  --ink: var(--im-text);
  --ink-2: var(--im-muted);
  --muted: var(--im-faint);
  --accent: var(--im-accent);
  --brass: var(--im-warm);
  --brass-soft: var(--im-warm);
  --user: var(--im-accent-soft);
  background-color: var(--im-bg);
  background-image:
    radial-gradient(58rem 38rem at 8% -18%, var(--amigo-aurora-a), transparent 64%),
    radial-gradient(48rem 34rem at 100% 8%, var(--amigo-aurora-b), transparent 62%),
    radial-gradient(40rem 28rem at 54% 112%, var(--amigo-aurora-c), transparent 65%);
  color: var(--im-text);
}

html[data-theme="dark"] body.amigo-chat {
  --im-bg: #0c1120;
  --im-surface: #131b2d;
  --im-surface-2: #1a2540;
  --im-text: #f0f2ff;
  --im-muted: #b8c0d9;
  --im-faint: #96a2c2;
  --im-border: #2a3654;
  --im-border-strong: #3d4a6d;
  --im-accent: #b3aaff;
  --im-accent-soft: #28264b;
  --im-warm: #ffb38f;
  --im-teal: #71d9d0;
  --im-shadow-sm: 0 4px 14px rgba(0, 0, 0, .22);
  --im-shadow: 0 18px 46px -26px rgba(0, 0, 0, .66), 0 3px 12px rgba(0, 0, 0, .20);
  --im-shadow-lg: 0 30px 76px -34px rgba(0, 0, 0, .76);
  --im-clay-shadow: 10px 12px 28px rgba(0, 0, 0, .38), -8px -8px 22px rgba(255, 255, 255, .025), inset 0 1px 0 rgba(255,255,255,.06);
  --im-inset-shadow: inset 3px 3px 9px rgba(0, 0, 0, .34), inset -3px -3px 9px rgba(255,255,255,.025);
  --im-glass: rgba(13, 19, 35, .78);
  --im-glass-border: rgba(255, 255, 255, .075);
  --amigo-accent-gradient: linear-gradient(132deg, #9c91ff 0%, #776ce7 54%, #4e9bc7 100%);
  --amigo-aurora-a: rgba(120, 105, 255, .16);
  --amigo-aurora-b: rgba(50, 184, 188, .105);
  --amigo-aurora-c: rgba(229, 132, 115, .07);
}

/* The sidebar and header are the glass layer; the conversation never is. */
body.amigo-chat .rail {
  position: relative;
  z-index: 8;
  background: var(--im-glass);
  border-right: 1px solid var(--im-border);
  box-shadow: 10px 0 34px -32px color-mix(in srgb, var(--im-text) 30%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
}

body.amigo-chat .top {
  position: relative;
  z-index: 6;
  min-height: 66px;
  border-bottom: 1px solid color-mix(in srgb, var(--im-border) 84%, transparent);
  background: var(--im-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}

body.amigo-chat .brand .mark {
  border: 1px solid color-mix(in srgb, var(--im-accent) 20%, var(--im-border));
  background: linear-gradient(145deg, var(--im-surface), var(--im-accent-soft));
  box-shadow: 0 8px 20px -15px color-mix(in srgb, var(--im-accent) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.58);
}

body.amigo-chat .brand-text b { letter-spacing: -.045em; }
body.amigo-chat .brand-text em { color: var(--im-muted); }

/* Neo-skeuomorphic primary action: a definite button edge plus a soft lift. */
body.amigo-chat .rail-new {
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--im-accent) 46%, transparent);
  border-radius: 15px;
  background: var(--amigo-accent-gradient);
  color: #fff;
  box-shadow: 0 9px 20px -13px color-mix(in srgb, var(--im-accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.24);
  letter-spacing: -.01em;
}
html[data-theme="dark"] body.amigo-chat .rail-new { color: #11152b; }
body.amigo-chat .rail-new:hover { filter: brightness(1.055); transform: translateY(-1px); }
body.amigo-chat .rail-new:active { transform: translateY(0) scale(.99); box-shadow: inset 0 2px 5px rgba(0,0,0,.16); }
body.amigo-chat .rail-new kbd { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); opacity: .88; }
html[data-theme="dark"] body.amigo-chat .rail-new kbd { border-color: rgba(20,20,40,.25); background: rgba(20,20,40,.10); }

/* Neumorphism stays local: only the search and composer wells get inset depth. */
body.amigo-chat .rail-search {
  min-height: 44px;
  border: 1px solid var(--im-border);
  background: color-mix(in srgb, var(--im-surface-2) 72%, var(--im-surface));
  box-shadow: var(--im-inset-shadow);
}
body.amigo-chat .rail-search:focus-within {
  border-color: var(--im-accent);
  box-shadow: var(--im-inset-shadow), 0 0 0 3px color-mix(in srgb, var(--im-accent) 19%, transparent);
}
body.amigo-chat .rail-row { border-radius: 13px; }
body.amigo-chat .rail-row:hover { background: color-mix(in srgb, var(--im-accent-soft) 64%, transparent); }
body.amigo-chat .rail-row.is-active { background: var(--im-accent-soft); }
body.amigo-chat .rail-row.is-active::before { width: 3px; }
body.amigo-chat .rail-row .rail-item { font-size: 13px; }
body.amigo-chat .rail-foot {
  min-height: 42px;
  border: 1px solid var(--im-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--im-surface) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}

/* Icon controls: clear boundary on hover/press and a consistent focus ring. */
body.amigo-chat .ico,
body.amigo-chat .rail-toggle {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--im-muted);
}
body.amigo-chat .ico:hover,
body.amigo-chat .rail-toggle:hover {
  border-color: var(--im-border);
  background: var(--im-surface-2);
  color: var(--im-text);
  box-shadow: var(--im-shadow-sm);
}
body.amigo-chat .ico:active,
body.amigo-chat .rail-toggle:active { box-shadow: var(--im-inset-shadow); }

/* Welcome area: one clay focal object, surrounded by quiet open space. */
body.amigo-chat .empty-mark {
  position: relative;
  width: 82px;
  height: 82px;
  margin-bottom: 22px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--im-accent) 21%, var(--im-border));
  border-radius: 28px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.72), transparent 48%),
    linear-gradient(145deg, var(--im-surface), var(--im-accent-soft));
  box-shadow: var(--im-clay-shadow), 0 18px 38px -28px color-mix(in srgb, var(--im-accent) 60%, transparent);
}
body.amigo-chat .empty-mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9px;
  border: 1px solid color-mix(in srgb, var(--im-accent) 18%, transparent);
  border-radius: 34px;
  opacity: .8;
}
body.amigo-chat .empty-mark img { filter: drop-shadow(0 5px 8px rgba(35, 36, 82, .13)); }
body.amigo-chat .welcome-eyebrow {
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid var(--im-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--im-surface) 72%, transparent);
  color: var(--im-muted);
  box-shadow: var(--im-shadow-sm);
  letter-spacing: .14em;
}
body.amigo-chat .welcome-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--im-teal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--im-teal) 16%, transparent), 0 0 13px color-mix(in srgb, var(--im-teal) 44%, transparent);
}
body.amigo-chat .empty-heading {
  max-width: 720px;
  margin-top: 16px;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 680;
  letter-spacing: -.055em;
  line-height: 1.08;
}
body.amigo-chat .empty-heading em {
  color: var(--im-accent);
  background: linear-gradient(100deg, var(--im-accent), var(--im-teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.amigo-chat .empty > p {
  max-width: 58ch;
  margin-top: 14px;
  margin-bottom: 20px;
  color: var(--im-muted);
  font-size: 15px;
  line-height: 1.75;
}
body.amigo-chat .welcome-trust { gap: 8px; margin: 0 0 24px; }
body.amigo-chat .welcome-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--im-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--im-surface) 70%, transparent);
  color: var(--im-muted);
  font-size: 11px;
}
body.amigo-chat .welcome-trust svg { width: 15px; height: 15px; stroke: var(--im-teal); fill: none; stroke-width: 1.7; }

/* Bento-inspired idea cards; no artificial tiles inside the answer prose. */
body.amigo-chat .starters {
  width: min(100%, 720px);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
body.amigo-chat .starters button {
  min-height: 60px;
  padding: 14px 16px;
  border: 1px solid var(--im-border);
  border-radius: 17px;
  background: linear-gradient(145deg, var(--im-surface), color-mix(in srgb, var(--im-surface-2) 42%, var(--im-surface)));
  color: var(--im-text);
  box-shadow: 0 3px 9px rgba(35, 42, 86, .035), inset 0 1px 0 rgba(255,255,255,.55);
  line-height: 1.45;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.amigo-chat .starters button:hover {
  border-color: color-mix(in srgb, var(--im-accent) 54%, var(--im-border));
  background: var(--im-accent-soft);
  box-shadow: var(--im-shadow);
  transform: translateY(-2px);
}
body.amigo-chat .starters button:active { transform: translateY(0); }
body.amigo-chat .starters span { color: var(--im-text); font-size: 13px; }
body.amigo-chat .empty-links { gap: 8px 18px; margin-top: 20px; }
body.amigo-chat .empty-links a { color: var(--im-muted); font-weight: 550; text-underline-offset: 4px; }
body.amigo-chat .empty-links a:hover { color: var(--im-accent); }

/* The conversation uses crisp, opaque surfaces for evidence and long reading. */
body.amigo-chat .thread { width: min(100%, 900px); gap: 22px; }
body.amigo-chat .q {
  max-width: min(78%, 680px);
  padding: 13px 17px;
  border: 1px solid color-mix(in srgb, var(--im-accent) 25%, var(--im-border));
  border-radius: 20px 20px 7px 20px;
  background: linear-gradient(135deg, var(--im-accent-soft), color-mix(in srgb, var(--im-accent-soft) 76%, var(--im-surface)));
  color: var(--im-text);
  box-shadow: 0 7px 18px -16px color-mix(in srgb, var(--im-accent) 60%, transparent);
  line-height: 1.65;
}
body.amigo-chat .a {
  padding: clamp(15px, 2vw, 22px);
  border: 1px solid var(--im-border);
  border-radius: 22px;
  background: var(--im-surface);
  box-shadow: var(--im-shadow-sm);
}
body.amigo-chat .a-body .md {
  color: var(--im-muted);
  font-size: 15.5px;
  line-height: 1.78;
}
body.amigo-chat .a-body .md > p:first-child { color: var(--im-text); }
body.amigo-chat .md h2,
body.amigo-chat .md h3,
body.amigo-chat .md h4 { color: var(--im-warm); }
body.amigo-chat .md strong { color: var(--im-text); }
body.amigo-chat .md a { color: var(--im-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--im-accent) 45%, transparent); text-underline-offset: 3px; }
body.amigo-chat .md code { background: var(--im-accent-soft); color: var(--im-text); }
body.amigo-chat .cite { background: var(--im-accent-soft); color: var(--im-accent); }
body.amigo-chat .cite:hover { background: var(--im-accent); color: #fff; }
body.amigo-chat .a-meta .who { color: var(--im-text); }
body.amigo-chat .a-meta .badge { background: var(--im-surface-2); border: 1px solid var(--im-border); color: var(--im-muted); }
body.amigo-chat .src-card {
  border: 1px solid var(--im-border);
  border-radius: 14px;
  background: var(--im-surface-2);
  color: var(--im-text);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
body.amigo-chat .src-card:hover {
  border-color: var(--im-accent);
  box-shadow: var(--im-shadow-sm);
  transform: translateY(-1px);
}
body.amigo-chat .src-n { background: var(--im-accent-soft); color: var(--im-accent); }
body.amigo-chat .src-d { color: var(--im-muted); }
body.amigo-chat .a-actions button,
body.amigo-chat .followups button {
  border: 1px solid var(--im-border);
  border-radius: 12px;
  background: var(--im-surface-2);
  color: var(--im-muted);
}
body.amigo-chat .a-actions button:hover,
body.amigo-chat .followups button:hover {
  border-color: var(--im-accent);
  background: var(--im-accent-soft);
  color: var(--im-accent);
}
body.amigo-chat .working {
  border: 1px solid var(--im-border);
  border-radius: 16px;
  background: var(--im-surface);
  box-shadow: var(--im-shadow-sm);
}
body.amigo-chat .note {
  border-color: color-mix(in srgb, var(--im-warm) 35%, var(--im-border));
  background: color-mix(in srgb, var(--im-warm) 8%, var(--im-surface));
}

/* A floating glass dock with a tactile, high-contrast input well. */
body.amigo-chat .dock {
  padding: 14px clamp(14px, 2.3vw, 28px) max(12px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid color-mix(in srgb, var(--im-border) 82%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--im-bg) 78%, transparent), var(--im-glass) 28%);
  -webkit-backdrop-filter: blur(22px) saturate(1.32);
  backdrop-filter: blur(22px) saturate(1.32);
}
body.amigo-chat .dock-in { width: min(100%, 860px); }
body.amigo-chat .composer {
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--im-border-strong);
  border-radius: 23px;
  background: color-mix(in srgb, var(--im-surface) 96%, var(--im-accent-soft));
  box-shadow: var(--im-inset-shadow), 0 12px 34px -27px color-mix(in srgb, var(--im-text) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.62);
}
body.amigo-chat .composer:focus-within {
  border-color: var(--im-accent);
  box-shadow: var(--im-inset-shadow), 0 0 0 3px color-mix(in srgb, var(--im-accent) 18%, transparent), 0 14px 36px -26px color-mix(in srgb, var(--im-accent) 34%, transparent);
}
body.amigo-chat .composer textarea { color: var(--im-text); }
body.amigo-chat .composer textarea::placeholder { color: var(--im-faint); }
body.amigo-chat .composer .plus,
body.amigo-chat .composer .mic {
  border: 1px solid var(--im-border);
  border-radius: 14px;
  background: var(--im-surface-2);
  color: var(--im-muted);
  box-shadow: 0 2px 5px rgba(20, 28, 62, .04), inset 0 1px 0 rgba(255,255,255,.48);
}
body.amigo-chat .composer .plus:hover,
body.amigo-chat .composer .mic:hover { border-color: var(--im-accent); color: var(--im-accent); background: var(--im-accent-soft); }
body.amigo-chat .composer .plus[aria-expanded="true"] { border-color: var(--im-accent); color: var(--im-accent); background: var(--im-accent-soft); }
body.amigo-chat .composer .send {
  border: 1px solid color-mix(in srgb, var(--im-accent) 58%, transparent);
  border-radius: 15px;
  background: var(--amigo-accent-gradient);
  color: #fff;
  box-shadow: 0 8px 17px -11px color-mix(in srgb, var(--im-accent) 90%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
}
html[data-theme="dark"] body.amigo-chat .composer .send { color: #10152a; }
body.amigo-chat .composer .send:hover { filter: brightness(1.06); transform: translateY(-1px); }
body.amigo-chat .composer .send:active { transform: translateY(0) scale(.96); }
body.amigo-chat .composer .send:disabled { opacity: .48; filter: saturate(.55); box-shadow: none; }
body.amigo-chat .options-panel {
  border: 1px solid var(--im-border);
  border-radius: 18px;
  background: var(--im-surface);
  box-shadow: var(--im-shadow-lg);
}
body.amigo-chat .options-panel select {
  border: 1px solid var(--im-border);
  border-radius: 11px;
  background: var(--im-surface-2);
  color: var(--im-text);
}
body.amigo-chat .meta-row { margin-top: 9px; }
body.amigo-chat .meta-row .mchip {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--im-muted);
}
body.amigo-chat .meta-row .mchip:hover,
body.amigo-chat .meta-row .mchip[aria-expanded="true"] {
  border-color: var(--im-border);
  background: var(--im-surface-2);
  color: var(--im-accent);
}
body.amigo-chat .chat-note { color: var(--im-faint); line-height: 1.55; }

/* Phone navigation is the compact glass layer; the chat composer stays above it. */
body.amigo-chat .bottom-nav {
  border-top: 1px solid var(--im-border);
  background: var(--im-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 -8px 28px -25px color-mix(in srgb, var(--im-text) 40%, transparent);
}
body.amigo-chat .bottom-nav a { color: var(--im-muted); }
body.amigo-chat .bottom-nav a[aria-current="page"] { color: var(--im-accent); background: var(--im-accent-soft); }

/* If blur is unavailable, glass becomes a fully legible solid surface. */
@supports not ((backdrop-filter: blur(1px))) {
  body.amigo-chat .rail,
  body.amigo-chat .top,
  body.amigo-chat .dock,
  body.amigo-chat .bottom-nav { background: var(--im-surface); }
}
[data-comfort="opaque"] body.amigo-chat .rail,
[data-comfort="opaque"] body.amigo-chat .top,
[data-comfort="opaque"] body.amigo-chat .dock,
[data-comfort="opaque"] body.amigo-chat .bottom-nav {
  background: var(--im-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 760px) {
  body.amigo-chat .rail {
    background: var(--im-glass);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    backdrop-filter: blur(24px) saturate(1.3);
  }
  body.amigo-chat .dock { padding-inline: 10px; }
  body.amigo-chat .empty { padding-inline: 14px; }
  body.amigo-chat .empty-mark { width: 72px; height: 72px; border-radius: 24px; }
  body.amigo-chat .empty-heading { font-size: clamp(29px, 7vw, 39px); }
  body.amigo-chat .starters { grid-template-columns: 1fr; gap: 8px; }
  body.amigo-chat .starters button { min-height: 50px; padding: 12px 14px; }
  body.amigo-chat .welcome-trust { gap: 6px; margin-bottom: 18px; }
  body.amigo-chat .welcome-trust span { font-size: 10px; padding-inline: 8px; }
  body.amigo-chat .thread { padding-inline: 12px; }
  body.amigo-chat .a { padding: 15px; border-radius: 18px; }
  body.amigo-chat .q { max-width: 92%; }
  body.amigo-chat .chat-note { font-size: 10px; }
}

@media (max-width: 390px) {
  body.amigo-chat .top { padding-inline: 7px; }
  body.amigo-chat .top-right { gap: 0; }
  body.amigo-chat .ico,
  body.amigo-chat .rail-toggle { width: 38px; min-width: 38px; height: 38px; }
  body.amigo-chat .composer { gap: 5px; padding: 6px; }
  body.amigo-chat .composer .plus,
  body.amigo-chat .composer .mic,
  body.amigo-chat .composer .send { width: 40px; height: 40px; flex-basis: 40px; }
}

@media (max-height: 720px) and (min-width: 761px) {
  body.amigo-chat.is-empty .scroll { align-items: flex-start; }
  body.amigo-chat.is-empty .stage { padding-block: 18px; }
  body.amigo-chat .empty-mark { width: 64px; height: 64px; margin-bottom: 14px; }
  body.amigo-chat .empty-heading { margin-top: 10px; font-size: clamp(29px, 3.6vw, 42px); }
  body.amigo-chat .empty > p { margin-block: 10px 14px; }
  body.amigo-chat .welcome-trust { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  body.amigo-chat .empty-mark,
  body.amigo-chat .starters button,
  body.amigo-chat .src-card,
  body.amigo-chat .rail-new,
  body.amigo-chat .ico,
  body.amigo-chat .rail-toggle,
  body.amigo-chat .composer .send { animation: none !important; transition: none !important; }
}

/* ── chat-experience.css ── */
/* Amigo Experience Layer — a multi-morphic system, not a single visual effect.
   Each visual language has a bounded role so the conversation remains readable. */

body.amigo-chat {
  --im-focus: color-mix(in srgb, var(--im-accent) 72%, white);
  --im-specular: color-mix(in srgb, white 62%, transparent);
  --im-glow: color-mix(in srgb, var(--im-accent) 16%, transparent);
  --im-depth-1: 0 1px 2px color-mix(in srgb, var(--im-text) 6%, transparent);
  --im-depth-2: 0 12px 28px -22px color-mix(in srgb, var(--im-text) 38%, transparent);
  --im-depth-3: 0 26px 54px -36px color-mix(in srgb, var(--im-accent) 42%, transparent);
  accent-color: var(--im-accent);
}

/* Swiss/editorial: stable reading measure, strong rhythm, quiet metadata. */
body.amigo-chat .stage { isolation: isolate; }
body.amigo-chat .thread { gap: clamp(18px, 2.3vw, 26px); }
body.amigo-chat .a-body { min-width: 0; }
body.amigo-chat .a-body .md { max-width: 76ch; }
body.amigo-chat .a-meta { align-items: center; }
body.amigo-chat .a-meta .badge {
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .045em;
  text-transform: uppercase;
}
body.amigo-chat .src-head,
body.amigo-chat .rail-group,
body.amigo-chat .welcome-eyebrow {
  font-variant-numeric: tabular-nums;
  letter-spacing: .11em;
}

/* Bauhaus + Memphis geometry: decorative, low-contrast, outside text flow. */
body.amigo-chat .empty { position: relative; isolation: isolate; }
body.amigo-chat .empty::before,
body.amigo-chat .empty::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
}
body.amigo-chat .empty::before {
  width: clamp(150px, 24vw, 260px);
  aspect-ratio: 1;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--amigo-aurora-a), transparent 70%);
  filter: blur(8px);
}
body.amigo-chat .empty::after {
  width: 12px;
  height: 12px;
  top: 18%;
  right: clamp(8px, 10vw, 120px);
  border: 2px solid color-mix(in srgb, var(--im-teal) 42%, transparent);
  box-shadow: -42px 54px 0 -3px color-mix(in srgb, var(--im-warm) 45%, transparent);
  opacity: .65;
}

/* Frutiger-Aero / aurora atmosphere: luminous colour stays behind the chrome. */
body.amigo-chat .rail::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(155deg, var(--amigo-aurora-a), transparent 72%);
  opacity: .8;
}
body.amigo-chat .brand .mark,
body.amigo-chat .empty-mark { transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; }
@media (hover: hover) and (pointer: fine) {
  body.amigo-chat .brand:hover .mark,
  body.amigo-chat .empty-mark:hover { transform: translateY(-2px) rotate(-2deg); }
}

/* Liquid glass: one thin specular edge on the persistent composer dock. */
body.amigo-chat .dock { position: relative; }
body.amigo-chat .dock::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(18px, 5vw, 56px);
  right: clamp(18px, 5vw, 56px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--im-specular), color-mix(in srgb, var(--im-accent) 34%, transparent), transparent);
  pointer-events: none;
}
body.amigo-chat .composer { transition: border-radius .24s ease, box-shadow .2s ease, border-color .2s ease; }
body.amigo-chat .composer:focus-within { border-radius: 25px; }

/* Neo-brutalist micro-contrast is reserved for actionable state, not body copy. */
body.amigo-chat .rail-row.is-active {
  outline: 1px solid color-mix(in srgb, var(--im-accent) 22%, transparent);
  outline-offset: -1px;
}
body.amigo-chat .rail-row.is-active .rail-item { font-weight: 680; }
body.amigo-chat .mchip {
  border: 1px solid color-mix(in srgb, var(--im-accent) 24%, var(--im-border));
  background: color-mix(in srgb, var(--im-accent-soft) 54%, var(--im-surface));
  box-shadow: var(--im-depth-1);
}

/* Holographic edge: subtle colour shift only on the primary action boundary. */
body.amigo-chat .rail-new {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
body.amigo-chat .rail-new::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,.20) 48%, transparent 72%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
@media (hover: hover) and (pointer: fine) {
  body.amigo-chat .rail-new:hover::after { transform: translateX(120%); }
}

/* Bento composition: suggestions are the only strongly card-based content. */
body.amigo-chat .starters button { position: relative; overflow: hidden; }
body.amigo-chat .starters button::before {
  content: "";
  position: absolute;
  width: 74px;
  height: 74px;
  top: -45px;
  right: -38px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--im-glow), transparent 70%);
  pointer-events: none;
}

/* Material You / soft elevation for controls with unmistakable boundaries. */
body.amigo-chat button,
body.amigo-chat select,
body.amigo-chat textarea,
body.amigo-chat input { font: inherit; }
body.amigo-chat .options-panel .opt select {
  min-height: 40px;
  border: 1px solid var(--im-border-strong);
  border-radius: 12px;
  background-color: var(--im-surface);
  color: var(--im-text);
  box-shadow: var(--im-depth-1);
}
body.amigo-chat .options-panel .opt select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--im-focus) 38%, transparent);
  outline-offset: 2px;
  border-color: var(--im-accent);
}
body.amigo-chat .opt-mode { grid-column: 1 / -1; }
body.amigo-chat .opt-mode select { width: 100%; }
body.amigo-chat .opt-note { overflow-wrap: anywhere; }
body.amigo-chat .a-actions button,
body.amigo-chat .followups button,
body.amigo-chat .rail-item,
body.amigo-chat .rail-del,
body.amigo-chat .ico,
body.amigo-chat .rail-toggle { min-height: 40px; }

/* Morphic surface transitions: subtle shape and depth change on state changes. */
body.amigo-chat .a,
body.amigo-chat .src-card,
body.amigo-chat .rail-row,
body.amigo-chat .starters button,
body.amigo-chat .rail-search {
  transition: border-radius .22s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body.amigo-chat .src-card { box-shadow: 0 1px 2px color-mix(in srgb, var(--im-text) 4%, transparent); }
body.amigo-chat .src-card:focus-visible,
body.amigo-chat .starters button:focus-visible,
body.amigo-chat .a-actions button:focus-visible,
body.amigo-chat .followups button:focus-visible,
body.amigo-chat .rail-item:focus-visible,
body.amigo-chat .rail-del:focus-visible,
body.amigo-chat .ico:focus-visible,
body.amigo-chat .rail-toggle:focus-visible,
body.amigo-chat .rail-new:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--im-focus) 62%, transparent);
  outline-offset: 2px;
}

/* Glass degrades cleanly: no dependency on backdrop-filter for contrast. */
@supports not ((backdrop-filter: blur(1px))) {
  body.amigo-chat .rail,
  body.amigo-chat .top,
  body.amigo-chat .dock {
    background: var(--im-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 760px) {
  body.amigo-chat .empty::after { top: 11%; right: 8%; }
  body.amigo-chat .opt-mode { grid-column: 1 / -1; }
  body.amigo-chat .composer { border-radius: 20px; }
  body.amigo-chat .a { border-radius: 18px; }
  body.amigo-chat .a-body .md { font-size: 15px; line-height: 1.72; }
}

@media (prefers-reduced-motion: reduce) {
  body.amigo-chat .brand .mark,
  body.amigo-chat .empty-mark,
  body.amigo-chat .composer,
  body.amigo-chat .a,
  body.amigo-chat .src-card,
  body.amigo-chat .rail-row,
  body.amigo-chat .starters button,
  body.amigo-chat .rail-search { transition: none !important; }
  body.amigo-chat .rail-new::after { display: none; }
}

@media (prefers-contrast: more) {
  body.amigo-chat {
    --im-muted: var(--im-text);
    --im-faint: var(--im-text);
    --im-border: var(--im-border-strong);
  }
  body.amigo-chat .a,
  body.amigo-chat .src-card,
  body.amigo-chat .composer,
  body.amigo-chat .rail-search { border-width: 2px; }
}

@media (forced-colors: active) {
  body.amigo-chat .a,
  body.amigo-chat .src-card,
  body.amigo-chat .composer,
  body.amigo-chat .rail-search,
  body.amigo-chat .rail-new { border: 1px solid CanvasText; }
  body.amigo-chat button:focus-visible,
  body.amigo-chat a:focus-visible,
  body.amigo-chat select:focus-visible { outline: 2px solid Highlight; }
}


/* Amigo streaming and mobile controls */
/* Chat interaction polish: focused mode switching, genuine streamed text,
   and compact touch controls. All selectors are scoped to the standalone chat. */

body.amigo-chat .chat-mode-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: min(100%, var(--col, 860px));
  margin: 0 auto 9px;
  padding: 0 4px;
}

body.amigo-chat .chat-mode-tabs button {
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

body.amigo-chat .chat-mode-tabs button:hover {
  background: var(--panel-2);
  color: var(--ink);
  transform: translateY(-1px);
}

body.amigo-chat .chat-mode-tabs button.is-active {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 15%, var(--panel));
  color: var(--ink);
  box-shadow: 0 4px 14px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}

body.amigo-chat .chat-mode-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

body.amigo-chat .streaming-md {
  min-height: 1.6em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.72;
  color: var(--ink-2);
}

body.amigo-chat .streaming-md:empty::before {
  content: " ";
  display: inline-block;
  width: 6px;
  height: 1em;
  vertical-align: -.12em;
  border-radius: 2px;
  background: var(--accent);
  animation: indus-stream-caret 1s steps(2, start) infinite;
}

@keyframes indus-stream-caret {
  50% { opacity: .18; }
}

body.amigo-chat .options-panel #readAloudNote {
  display: block;
  margin: 2px 0 8px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.55;
}

body.amigo-chat .options-panel #readAloudMode {
  max-width: 100%;
}

/* Chat has no bottom tab bar, so the composer can use the full mobile height. */
@media (max-width: 900px) {
  body.amigo-chat .dock { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  body.amigo-chat.is-empty .dock { padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  body.amigo-chat .chat-mode-tabs {
    width: 100%;
    margin-bottom: 7px;
    padding-inline: 1px;
  }
}

@media (max-width: 580px) {
  body.amigo-chat .chat-mode-tabs {
    gap: 5px;
    margin-bottom: 7px;
  }

  body.amigo-chat .chat-mode-tabs button {
    flex: 1 1 0;
    min-height: 36px;
    padding-inline: 7px;
    font-size: 11px;
  }

  body.amigo-chat .streaming-md { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  body.amigo-chat .streaming-md:empty::before { animation: none; opacity: .5; }
  body.amigo-chat .chat-mode-tabs button { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   AMIGO CONVERSATION MODE — Google-AI-style information hierarchy
   ══════════════════════════════════════════════════════════════════════════
   Keep Amigo's existing identity, theme tokens, mascot, chat history and
   controls. This layer only refines how the existing conversation is composed:
   a calm navigation rail, a centred reading column, clear user turns, an
   unboxed assistant answer, source cards and a persistent prompt dock.
*/

/* One calm canvas: the conversation, not the chrome, gets the attention. */
html body.amigo-chat .main {
  position: relative;
  min-width: 0;
  min-height: 0;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 78% 0%, color-mix(in srgb, var(--im-accent) 7%, transparent), transparent 38%),
    var(--im-bg);
}

html body.amigo-chat .top {
  position: relative;
  z-index: 12;
  flex: 0 0 62px;
  min-height: 62px;
  padding-inline: clamp(14px, 2.4vw, 30px);
  background: color-mix(in srgb, var(--im-surface) 82%, transparent);
  border-bottom: 1px solid var(--im-border);
}

html body.amigo-chat .top h1 {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.02em;
}

html body.amigo-chat .top-right { gap: 5px; }
html body.amigo-chat .ico,
html body.amigo-chat .rail-toggle {
  border-radius: 50%;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
html body.amigo-chat .ico:hover,
html body.amigo-chat .rail-toggle:hover { transform: translateY(-1px); }

/* The rail remains Amigo's own rail; it only gets more deliberate spacing. */
html body.amigo-chat .rail {
  z-index: 80;
  gap: 10px;
  padding: max(18px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  border-right: 1px solid var(--im-border);
  transition: transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease;
}
html body.amigo-chat .brand { padding: 4px 6px 12px; }
html body.amigo-chat .rail-new {
  min-height: 44px;
  border-radius: 14px;
  font-weight: 650;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
html body.amigo-chat .rail-new:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px -17px color-mix(in srgb, var(--im-accent) 65%, transparent);
}
html body.amigo-chat .rail-search { min-height: 42px; }
html body.amigo-chat .rail-head-row { margin: 12px 6px 7px; }
html body.amigo-chat .rail-row {
  min-height: 42px;
  margin-block: 3px;
  border-radius: 12px;
}
html body.amigo-chat .rail-row.is-active {
  background: color-mix(in srgb, var(--im-accent-soft) 72%, var(--im-surface));
}
html body.amigo-chat .rail-foot {
  margin-top: auto;
  min-height: 38px;
  border-radius: 12px;
  padding-inline: 10px;
}

/* Centre all turns on one reading axis, as in a modern AI search session. */
html body.amigo-chat .scroll {
  min-height: 0;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--im-muted) 34%, transparent) transparent;
}
html body.amigo-chat .stage,
html body.amigo-chat.is-empty .stage {
  width: min(calc(100% - 56px), 880px);
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(26px, 4vh, 44px) 0 28px;
}
html body.amigo-chat .thread {
  width: min(100%, 820px);
  max-width: 820px;
  margin-inline: auto;
  padding: 12px 0 30px;
  gap: clamp(18px, 2.5vw, 28px);
}
html body.amigo-chat .q {
  align-self: flex-end;
  max-width: min(78%, 700px);
  margin: 4px 0 0;
  padding: 13px 18px;
  border: 1px solid color-mix(in srgb, var(--im-accent) 16%, var(--im-border));
  border-radius: 22px 22px 7px 22px;
  background: color-mix(in srgb, var(--im-accent-soft) 78%, var(--im-surface));
  box-shadow: none;
  line-height: 1.65;
  animation: amigo-turn-enter .34s cubic-bezier(.2,.75,.25,1) both;
}

/* Answers read as one continuous response rather than a card nested in a card. */
html body.amigo-chat .a {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  gap: 12px;
  margin: 0;
  padding: 6px 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: amigo-turn-enter .42s cubic-bezier(.2,.75,.25,1) both;
}
html body.amigo-chat .a-body { min-width: 0; width: 100%; max-width: 100%; }
html body.amigo-chat .a-meta {
  min-height: 34px;
  margin-bottom: 12px;
  gap: 9px;
}
html body.amigo-chat .a-meta .amigo-avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 50%;
}
html body.amigo-chat .a-meta .who { font-size: 14px; font-weight: 740; }
html body.amigo-chat .a-meta .badge {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: .055em;
}
html body.amigo-chat .a-body .md {
  max-width: 78ch;
  color: var(--im-text);
  font-size: 15.5px;
  line-height: 1.78;
}
html body.amigo-chat .a-body .md > p:first-child { font-size: 16px; }
html body.amigo-chat .a-body .md h2,
html body.amigo-chat .a-body .md h3 { margin-top: 22px; }

/* The in-progress state is a small live signal, not a second answer card. */
html body.amigo-chat .working {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  width: fit-content;
  max-width: min(100%, 420px);
  margin: 2px 0 8px;
  padding: 10px 15px 10px 11px;
  border: 1px solid var(--im-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--im-surface) 92%, transparent);
  box-shadow: 0 8px 22px -20px color-mix(in srgb, var(--im-text) 38%, transparent);
  animation: amigo-working-in .36s cubic-bezier(.2,.75,.25,1) both;
}
html body.amigo-chat .working .amigo-avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}
html body.amigo-chat .working > span:last-child {
  color: var(--im-muted);
  font-size: 12.5px;
  font-weight: 600;
}
html body.amigo-chat .working > span:last-child::after {
  color: var(--im-accent);
  font-weight: 800;
}

/* Source cards and follow-ups stay attached to the answer, but never crowd it. */
html body.amigo-chat .src-panel {
  max-width: 820px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--im-border);
}
html body.amigo-chat .src-head {
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .12em;
}
html body.amigo-chat .src-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 10px;
}
html body.amigo-chat .src-card {
  border: 1px solid var(--im-border);
  border-radius: 15px;
  background: var(--im-surface);
  box-shadow: 0 3px 12px -12px color-mix(in srgb, var(--im-text) 45%, transparent);
  transition: transform .2s cubic-bezier(.2,.75,.25,1), border-color .2s ease, box-shadow .2s ease;
}
html body.amigo-chat .src-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--im-accent) 55%, var(--im-border));
  box-shadow: 0 14px 26px -24px color-mix(in srgb, var(--im-accent) 60%, transparent);
}
html body.amigo-chat .followups { gap: 8px; margin-top: 20px; }
html body.amigo-chat .followups button {
  min-height: 36px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--im-surface);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
html body.amigo-chat .followups button:hover { transform: translateY(-1px); }

/* Opening state: Amigo stays the hero; the prompt suggestions form a compact grid. */
html body.amigo-chat.is-empty .stage { align-self: center; }
html body.amigo-chat .empty {
  max-width: 780px;
  padding: 12px clamp(10px, 2.8vw, 24px);
}
html body.amigo-chat .empty-mark { animation: amigo-arrive .62s cubic-bezier(.2,.75,.25,1) both; }
html body.amigo-chat .empty-heading {
  max-width: 19ch;
  margin-top: 12px;
  font-size: clamp(32px, 4.5vw, 48px);
}
html body.amigo-chat .starters {
  max-width: 760px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
html body.amigo-chat .starters button {
  min-height: 84px;
  border-radius: 16px;
  text-align: left;
}

/* One persistent question dock with clear mode selection and generous touch targets. */
html body.amigo-chat .dock {
  position: sticky;
  z-index: 20;
  bottom: 0;
  flex: 0 0 auto;
  padding: 12px clamp(14px, 3vw, 28px) max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, color-mix(in srgb, var(--im-bg) 0%, transparent), color-mix(in srgb, var(--im-bg) 90%, transparent) 20%, var(--im-bg) 72%);
}
html body.amigo-chat .dock-in { width: min(100%, 840px); max-width: 840px; }
html body.amigo-chat .chat-mode-tabs {
  width: 100%;
  margin: 0 auto 9px;
  padding: 0 2px;
  gap: 7px;
}
html body.amigo-chat .chat-mode-tabs button {
  min-height: 36px;
  padding: 7px 15px;
  border: 1px solid var(--im-border);
  border-radius: 999px;
  background: var(--im-surface);
  color: var(--im-muted);
  font-size: 11.5px;
  font-weight: 690;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
html body.amigo-chat .chat-mode-tabs button:hover { transform: translateY(-1px); }
html body.amigo-chat .chat-mode-tabs button.is-active {
  border-color: color-mix(in srgb, var(--im-accent) 48%, var(--im-border));
  background: var(--im-accent-soft);
  color: var(--im-text);
  box-shadow: 0 4px 14px -12px color-mix(in srgb, var(--im-accent) 70%, transparent);
}
html body.amigo-chat .composer {
  min-height: 60px;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--im-border-strong);
  border-radius: 24px;
  background: var(--im-surface);
  box-shadow: 0 12px 34px -28px color-mix(in srgb, var(--im-text) 58%, transparent);
}
html body.amigo-chat .composer:focus-within {
  border-color: color-mix(in srgb, var(--im-accent) 62%, var(--im-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--im-accent) 14%, transparent), 0 12px 34px -28px color-mix(in srgb, var(--im-text) 58%, transparent);
}
html body.amigo-chat .composer textarea {
  min-height: 42px;
  max-height: 180px;
  padding: 10px 5px;
  line-height: 1.55;
  font-size: 15.5px;
}
html body.amigo-chat .composer .plus,
html body.amigo-chat .composer .attach,
html body.amigo-chat .composer .mic,
html body.amigo-chat .composer .send {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, filter .16s ease;
}
html body.amigo-chat .composer .plus,
html body.amigo-chat .composer .attach,
html body.amigo-chat .composer .mic {
  border: 1px solid var(--im-border);
  background: var(--im-surface-2);
  color: var(--im-muted);
}
html body.amigo-chat .composer .plus:hover,
html body.amigo-chat .composer .attach:hover,
html body.amigo-chat .composer .mic:hover,
html body.amigo-chat .composer .send:hover { transform: translateY(-1px); }
html body.amigo-chat .composer .send {
  background: var(--im-accent);
  color: var(--im-bg);
  border: 0;
}
html body.amigo-chat .composer .stop {
  min-height: 36px;
  padding-inline: 13px;
  border-radius: 999px;
  border: 1px solid var(--im-border);
  background: var(--im-surface-2);
  color: var(--im-muted);
}
html body.amigo-chat .meta-row {
  width: 100%;
  min-height: 28px;
  gap: 10px;
  padding: 5px 4px 0;
}
html body.amigo-chat .mchip {
  border-radius: 999px;
  min-height: 28px;
  padding: 5px 10px;
  font-size: 10.5px;
}
html body.amigo-chat .chat-note { display: none; }

/* Tablet/phone: turn the rail into a true drawer and let the prompt use the width. */
@media (max-width: 900px) {
  html body.amigo-chat { grid-template-columns: minmax(0, 1fr) !important; }
  html body.amigo-chat .rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 90;
    width: min(310px, 86vw);
    transform: translateX(-105%);
    padding: max(18px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  }
  html body.amigo-chat:not(.rail-hidden) .rail { transform: translateX(0); }
  html body.amigo-chat:not(.rail-hidden)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 85;
    background: color-mix(in srgb, #07111a 48%, transparent);
    backdrop-filter: blur(3px);
    pointer-events: auto;
  }
  html body.amigo-chat .main { grid-column: 1; grid-row: 1; width: 100%; }
  html body.amigo-chat .top { min-height: 56px; flex-basis: 56px; padding-inline: 10px; }
  html body.amigo-chat .stage,
  html body.amigo-chat.is-empty .stage { width: min(calc(100% - 28px), 760px); padding-block: 20px 14px; }
  html body.amigo-chat .thread { width: 100%; padding-block: 8px 22px; gap: 20px; }
  html body.amigo-chat .q { max-width: 88%; }
  html body.amigo-chat .dock { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
  html body.amigo-chat .dock-in { width: 100%; }
  html body.amigo-chat .chat-mode-tabs { margin-bottom: 7px; }
}

@media (max-width: 580px) {
  html body.amigo-chat .top h1 { max-width: 44vw; font-size: 13px; }
  html body.amigo-chat .top-right { gap: 0; }
  html body.amigo-chat .ico,
  html body.amigo-chat .rail-toggle { width: 40px; min-width: 40px; height: 40px; }
  html body.amigo-chat .stage,
  html body.amigo-chat.is-empty .stage { width: calc(100% - 24px); padding-top: 17px; }
  html body.amigo-chat .empty { padding-inline: 8px; }
  html body.amigo-chat .empty-heading { font-size: clamp(28px, 8vw, 36px); }
  html body.amigo-chat .empty > p { font-size: 13px; }
  html body.amigo-chat .starters { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  html body.amigo-chat .starters button { min-height: 54px; padding: 10px 12px; }
  html body.amigo-chat .starters b { flex-basis: 104px; }
  html body.amigo-chat .q { max-width: 94%; padding: 12px 14px; }
  html body.amigo-chat .a-body .md { font-size: 15px; }
  html body.amigo-chat .src-cards { grid-template-columns: minmax(0, 1fr); }
  html body.amigo-chat .chat-mode-tabs button { flex: 1 1 0; padding-inline: 8px; }
  html body.amigo-chat .composer { gap: 5px; padding: 7px; border-radius: 20px; }
  html body.amigo-chat .composer .plus,
  html body.amigo-chat .composer .attach,
  html body.amigo-chat .composer .mic,
  html body.amigo-chat .composer .send { width: 39px; height: 39px; flex-basis: 39px; }
  html body.amigo-chat .composer textarea { font-size: 16px; min-height: 40px; }
  html body.amigo-chat .meta-row { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html body.amigo-chat .q,
  html body.amigo-chat .a,
  html body.amigo-chat .working,
  html body.amigo-chat .empty-mark {
    animation: none !important;
  }
  html body.amigo-chat .rail,
  html body.amigo-chat .ico,
  html body.amigo-chat .rail-toggle,
  html body.amigo-chat .rail-new,
  html body.amigo-chat .src-card,
  html body.amigo-chat .followups button,
  html body.amigo-chat .composer *,
  html body.amigo-chat .chat-mode-tabs button {
    transition: none !important;
  }
}

@keyframes amigo-turn-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes amigo-working-in {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── chat-capabilities.css ── */
/* Free-first AI, device-local memory and file attachments. */
body.amigo-chat .composer .attach {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--im-border);
  border-radius: 13px;
  background: var(--im-surface-2);
  color: var(--im-muted);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body.amigo-chat .composer .attach:hover,
body.amigo-chat .composer .attach:focus-visible {
  border-color: var(--im-accent);
  color: var(--im-accent);
  background: var(--im-accent-soft);
}
body.amigo-chat .composer .attach svg { width: 18px; height: 18px; }
body.amigo-chat .attachment-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 4px 0;
}
body.amigo-chat .attachment-tray[hidden] { display: none; }
body.amigo-chat .attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: min(100%, 280px);
  padding: 6px 9px;
  border: 1px solid var(--im-border);
  border-radius: 11px;
  background: var(--im-surface-2);
  color: var(--im-text);
  font-size: 11px;
}
body.amigo-chat .attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.amigo-chat .attachment-chip button {
  display: grid; place-items: center; flex: none;
  width: 23px; height: 23px; border: 0; border-radius: 8px;
  background: transparent; color: var(--im-muted); cursor: pointer;
}
body.amigo-chat .attachment-chip button:hover { color: var(--im-danger, #d15b61); background: var(--im-surface); }
body.amigo-chat .local-ai-settings,
body.amigo-chat .memory-settings {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--im-border);
  border-radius: 14px;
  background: var(--im-surface-2);
}
body.amigo-chat .local-ai-settings[hidden] { display: none; }
body.amigo-chat .local-ai-settings p,
body.amigo-chat .memory-settings p {
  margin: 0 0 9px;
  color: var(--im-muted);
  font-size: 11px;
  line-height: 1.55;
}
body.amigo-chat .local-ai-settings a { color: var(--im-accent); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
body.amigo-chat .local-ai-row { display: grid; grid-template-columns: 1fr minmax(130px, 200px) auto; gap: 8px; align-items: center; }
body.amigo-chat .local-ai-row label { color: var(--im-muted); font-size: 11px; font-weight: 600; }
body.amigo-chat .local-ai-row input,
body.amigo-chat .memory-add-row input {
  min-width: 0; width: 100%; min-height: 38px; padding: 8px 10px;
  border: 1px solid var(--im-border-strong); border-radius: 10px;
  background: var(--im-surface); color: var(--im-text); font: inherit; font-size: 12px;
}
body.amigo-chat .local-ai-row button,
body.amigo-chat .memory-add-row button,
body.amigo-chat .memory-actions button {
  min-height: 36px; padding: 7px 10px; border: 1px solid var(--im-border);
  border-radius: 10px; background: var(--im-surface); color: var(--im-text);
  font: inherit; font-size: 11px; font-weight: 650; cursor: pointer;
}
body.amigo-chat .local-ai-row button:hover,
body.amigo-chat .memory-add-row button:hover,
body.amigo-chat .memory-actions button:hover { border-color: var(--im-accent); color: var(--im-accent); }
body.amigo-chat #localAIStatus { margin: 8px 0; overflow-wrap: anywhere; }
body.amigo-chat .memory-heading { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 7px; }
body.amigo-chat .memory-heading strong { color: var(--im-text); font-size: 12px; }
body.amigo-chat .memory-heading span { color: var(--im-muted); font-size: 10px; }
body.amigo-chat .memory-toggle { display: flex; align-items: center; gap: 8px; margin: 7px 0 10px; color: var(--im-text); font-size: 11px; }
body.amigo-chat .memory-toggle input { accent-color: var(--im-accent); width: 16px; height: 16px; }
body.amigo-chat .memory-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
body.amigo-chat .memory-list { display: grid; gap: 6px; margin-top: 9px; }
body.amigo-chat .memory-item { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--im-border); border-radius: 9px; background: var(--im-surface); }
body.amigo-chat .memory-item span { min-width: 0; color: var(--im-text); font-size: 11px; overflow-wrap: anywhere; }
body.amigo-chat .memory-item button { flex: none; border: 0; background: transparent; color: var(--im-muted); cursor: pointer; font-size: 11px; }
body.amigo-chat .memory-empty { color: var(--im-muted); font-size: 10px; }
body.amigo-chat .memory-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
body.amigo-chat .memory-actions button:last-child { color: #b44c54; }
@media (max-width: 620px) {
  body.amigo-chat .local-ai-row { grid-template-columns: 1fr; }
  body.amigo-chat .local-ai-row input { grid-row: 2; }
  body.amigo-chat .local-ai-row button { justify-self: start; }
  body.amigo-chat .composer .attach { width: 34px; height: 34px; flex-basis: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  body.amigo-chat .composer .attach { transition: none; }
}

body.amigo-chat .memory-item-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* ── preferences.css ── */
/* Veridell cross-route reading and surface preferences. Keep prose surfaces
   flat and opaque; reserve morphic effects for controls and focal surfaces. */
:root {
  --im-article-panel-width: 760px;
  --im-chat-column-width: 900px;
  --im-reading-text-scale: 1;
}
html[data-reading-width="compact"] {
  --im-article-panel-width: 660px;
  --im-chat-column-width: 760px;
}
html[data-reading-width="comfortable"] {
  --im-article-panel-width: 760px;
  --im-chat-column-width: 900px;
}
html[data-reading-width="wide"] {
  --im-article-panel-width: 980px;
  --im-chat-column-width: 1080px;
}
html[data-reading-scale="large"] { --im-reading-text-scale: 1.1; }
html[data-reading-scale="larger"] { --im-reading-text-scale: 1.22; }

/* Accessible accent families. Each foreground token clears WCAG AA contrast
   against the default light and dark page surfaces; soft fills remain subtle. */
html[data-accent="ocean"] {
  --im-accent: #175ba6; --im-accent-soft: #e3eefb;
  --forest: #175ba6; --forest-ink: #175ba6; --accent: var(--im-accent);
  --primary: var(--im-accent); --focus: var(--im-accent); --accent-2: #286db8;
}
html[data-theme="dark"][data-accent="ocean"] {
  --im-accent: #83baff; --im-accent-soft: #193753;
  --forest: #83baff; --forest-ink: #acd1ff; --accent-2: #acd1ff;
}
html[data-accent="violet"] {
  --im-accent: #65409b; --im-accent-soft: #eee7f8;
  --forest: #65409b; --forest-ink: #65409b; --accent: var(--im-accent);
  --primary: var(--im-accent); --focus: var(--im-accent); --accent-2: #7652aa;
}
html[data-theme="dark"][data-accent="violet"] {
  --im-accent: #c3a4ff; --im-accent-soft: #30234b;
  --forest: #c3a4ff; --forest-ink: #ddcaff; --accent-2: #ddcaff;
}
html[data-accent="amber"] {
  --im-accent: #94500e; --im-accent-soft: #f7eadb;
  --forest: #94500e; --forest-ink: #94500e; --accent: var(--im-accent);
  --primary: var(--im-accent); --focus: var(--im-accent); --accent-2: #a66018;
}
html[data-theme="dark"][data-accent="amber"] {
  --im-accent: #ffb979; --im-accent-soft: #3d2a1a;
  --forest: #ffb979; --forest-ink: #ffd2a8; --accent-2: #ffd2a8;
}

/* Article and chat content respond to a preference, not a fixed desktop width. */
.article-grid > .panel,
.panel.panel-wide,
.article-grid > .panel.panel-wide {
  max-width: min(var(--im-article-panel-width), 100%);
}
/* The article width preference must control both the facts and the prose.
   Older view rules capped .prose independently, creating a narrow text column
   inside a wider facts card. Keep direct article content aligned to the panel. */
[data-view="article"] .panel.panel-wide > .art-body,
[data-view="article"] .panel.panel-wide > .prose,
.panel.panel-wide > .art-body {
  width: 100%;
  max-width: 100%;
}
.art-body,
.prose,
body.amigo-chat .a-body .md {
  font-size: calc(1em * var(--im-reading-text-scale));
}
body.amigo-chat .stage,
body.amigo-chat .thread {
  max-width: var(--im-chat-column-width);
}
body.amigo-chat .stage { width: min(calc(100% - 64px), var(--im-chat-column-width)); }
body.amigo-chat .thread { width: 100%; }

/* Glassmorphism is deliberately restricted to persistent navigation and
   floating controls, where transparency communicates layering. */
html[data-surface-style="glass"] .topbar,
html[data-surface-style="glass"] .top,
html[data-surface-style="glass"] .rail,
html[data-surface-style="glass"] .dock,
html[data-surface-style="glass"] .bottom-nav,
html[data-surface-style="glass"] .im-preferences-panel {
  background: color-mix(in srgb, var(--im-surface) 84%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}

/* Neumorphism: soft raised controls and inset input wells, never body copy. */
html[data-surface-style="soft"] .composer,
html[data-surface-style="soft"] .chat-composer,
html[data-surface-style="soft"] .searchbar,
html[data-surface-style="soft"] .rail-new,
html[data-surface-style="soft"] .im-preferences-panel {
  border-color: transparent;
  box-shadow: var(--im-clay-shadow), inset 1px 1px 2px color-mix(in srgb, var(--im-text) 5%, transparent);
}
html[data-surface-style="soft"] .composer:focus-within,
html[data-surface-style="soft"] .chat-composer:focus-within,
html[data-surface-style="soft"] .searchbar:focus-within {
  box-shadow: var(--im-inset-shadow), 0 0 0 3px color-mix(in srgb, var(--im-accent) 24%, transparent);
}

/* Claymorphism is a focal treatment, not a blanket card style. */
html[data-surface-style="clay"] .empty-mark,
html[data-surface-style="clay"] .dash-hero,
html[data-surface-style="clay"] .welcome-block,
html[data-surface-style="clay"] .aotd,
html[data-surface-style="clay"] .composer,
html[data-surface-style="clay"] .im-preferences-panel {
  border-color: color-mix(in srgb, var(--im-accent) 22%, var(--im-border));
  box-shadow: var(--im-clay-shadow), 0 16px 38px -28px color-mix(in srgb, var(--im-accent) 35%, transparent);
}
html[data-surface-style="clay"] .starters button,
html[data-surface-style="clay"] .suggestion-card {
  box-shadow: var(--im-shadow);
}

/* A user who requests reduced transparency always receives opaque controls. */
@media (prefers-reduced-transparency: reduce) {
  .topbar, .top, .rail, .dock, .bottom-nav, .im-preferences-panel {
    background: var(--im-surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Preferences control and panel. */
.im-preferences-toggle { margin-inline-start: 6px; }
.im-preferences-panel {
  position: fixed;
  z-index: 12000;
  top: max(72px, calc(env(safe-area-inset-top) + 64px));
  right: max(14px, env(safe-area-inset-right));
  width: min(360px, calc(100vw - 24px));
  padding: 18px;
  border: 1px solid var(--im-border-strong);
  border-radius: 20px;
  background: var(--im-surface);
  color: var(--im-text);
  box-shadow: var(--im-shadow-lg);
}
.im-preferences-panel[hidden] { display: none !important; }
.im-preferences-panel h2 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -.02em;
}
.im-pref-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 46%);
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 7px 0;
  border-top: 1px solid var(--im-border);
  color: var(--im-text);
  font-size: 13px;
}
.im-pref-row select {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--im-border-strong);
  border-radius: 10px;
  background: var(--im-surface-2);
  color: var(--im-text);
  font: inherit;
}
.im-pref-note {
  margin: 11px 0 12px;
  color: var(--im-muted);
  font-size: 11px;
  line-height: 1.55;
}
.im-pref-close {
  min-height: 40px;
  width: 100%;
  border: 1px solid var(--im-border);
  border-radius: 11px;
  background: var(--im-accent-soft);
  color: var(--im-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.im-pref-close:hover { border-color: var(--im-accent); }
.im-preferences-panel :focus-visible { outline: 2px solid var(--im-accent); outline-offset: 3px; }

@media (max-width: 600px) {
  .im-preferences-panel {
    top: auto;
    right: 10px;
    bottom: max(80px, calc(env(safe-area-inset-bottom) + 72px));
    width: min(360px, calc(100vw - 20px));
    max-height: min(72dvh, 520px);
    overflow-y: auto;
    border-radius: 20px;
  }
  body.amigo-chat .stage { width: calc(100% - 28px); }
}

/* Honour operating-system contrast settings and Windows High Contrast mode. */
@media (prefers-contrast: more) {
  :root {
    --im-muted: #3e4d44;
    --im-faint: #425047;
    --im-border: #87978d;
    --im-border-strong: #52645a;
  }
  html[data-theme="dark"] {
    --im-muted: #d0dbd3;
    --im-faint: #c5d1c9;
    --im-border: #71877a;
    --im-border-strong: #9aada1;
  }
  button, input, textarea, select, a { text-decoration-thickness: max(1px, .08em); }
}
@media (forced-colors: active) {
  .im-preferences-panel, .im-pref-row select, .composer, .rail-search,
  .rail-new, .a, .src-card, .a-actions button {
    border: 1px solid ButtonText;
    box-shadow: none;
    forced-color-adjust: auto;
  }
  .im-preferences-panel, .composer, .rail-search, .a, .src-card {
    background: Canvas;
    color: CanvasText;
  }
}

/* ── the chess board cannot widen the page ────────────────────────────────
   A Wikimedia chessboard is a ten-cell table whose cells are fixed sizes, so
   its min-content width is ~361 px. On a 390 px phone it overflowed the
   326 px reading column and was drawn straight over the panel edge. The board
   and every wrapper between it and the column are pinned to the column here,
   and the board itself scrolls sideways inside its own box. This lives in the
   last sheet of the cascade so nothing earlier can put the width back. */
.art-body .chessboard,
.prose .chessboard,
.art-body .chessboard .center,
.prose .chessboard .center,
.art-body .chessboard .thumbinner,
.prose .chessboard .thumbinner,
.art-body .chessboard .table-scroll,
.prose .chessboard .table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  float: none;
}
.art-body .chessboard .table-scroll,
.prose .chessboard .table-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════════════════════
   ONE CONTENT WIDTH, ON EVERY ROUTE
   ══════════════════════════════════════════════════════════════════════════
   Measured before this block, at a 1280 window: the home card was 824 px, the
   article panel 760 px, the chat column 900 px, and the topics page 1090 px —
   four answers to the same question, so every route looked like a different
   site and the article in particular read as a narrow strip beside everything
   else. This is now the only width rule the layout obeys: one token, applied
   to every main content container, so the article spreads exactly as far as
   the home page, the chat and the static pages do.

   --content-w is the reading width. It is capped so a 17 px line never runs
   past a comfortable measure, and it is subtracted from the viewport with the
   same gutters everywhere rather than each route inventing its own padding. */
:root { --content-w: min(952px, 100%); }

/* the single-page app, its article view and every static page */
.wrap,
.wrap-narrow,
#main.wrap,
main#main,
[data-view="article"] .wrap,
[data-view="ask"] .wrap {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: clamp(16px, 3.2vw, 44px);
}

/* the home page's content column, and the hero inside it */
.dash,
.dash-hero,
.site-intro .wrap-narrow,
.aotd,
.welcome-block {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
}
/* The home column is already inside the shell's gutters: adding a second set
   made the home card 788 px while the article panel beside it was 870 px in
   the same 952 px column. The padding belongs to the shell, once. */
.dash { padding-inline: 0; }
.dash-hero { max-width: 100%; }

/* the article: the panel is the column, and it is the site's column */
.article-grid,
#main .article-grid {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
}
.article-grid > .panel,
.article-grid > .panel.panel-wide,
#main .article-grid > .panel,
.panel.panel-wide {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

/* the chat: the stage and the thread sit on the same column as everything else */
body.amigo-chat .stage,
body.amigo-chat .thread,
body.amigo-chat .dock {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
}
/* the chat sits inside the same gutters as every other column */
body.amigo-chat .stage,
body.amigo-chat .thread,
body.amigo-chat .dock {
  padding-inline: clamp(16px, 3.2vw, 44px);
}
body.amigo-chat .stage { width: 100%; }

/* a topic or index grid is a card list, not prose: it keeps the column but
   loses the narrow text measure */
.topics-grid, .index-grid, .grid-2, .suggestion-grid { max-width: 100%; }

/* ── the header's controls are one control, repeated ──────────────────────
   The row used to mix a 40 px circle for the two language buttons, a 42 px
   rounded square for the theme and another for preferences, and an 8 x 17 px
   squashed icon where the theme glyph should have been — three shapes and one
   broken icon in a single row. Every control is now the same 40 px shape with
   the same border, the same gap and a glyph that cannot be squashed. */
.topnav,
.topbar-actions,
.top-right {
  gap: 8px;
}
.topnav .btn-icon,
.topnav .im-theme-toggle,
.topnav .im-preferences-toggle,
.topbar-actions .btn-icon,
.topbar-actions .im-theme-toggle,
.topbar-actions .im-preferences-toggle,
/* on a phone the topnav is hidden and these two are appended straight to the
   header row, where they were still 44 px rounded squares beside 40 px pills */
.topbar-inner > .im-theme-toggle,
.topbar-inner > .im-preferences-toggle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--im-border, var(--border-2));
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  margin-inline-start: 0;
  /* flex must not size these: one of them measured 42 px beside 40 px pills */
  flex: 0 0 40px;
  box-sizing: border-box;
}
.topnav .btn-icon:hover,
.topnav .im-theme-toggle:hover,
.topnav .im-preferences-toggle:hover,
.topbar-actions .im-theme-toggle:hover,
.topbar-actions .im-preferences-toggle:hover {
  border-color: var(--im-accent, var(--accent));
  transform: none;
  box-shadow: none;
}
/* the glyph is never allowed to shrink inside a flex row */
.topnav svg,
.topbar-actions svg,
.topbar-inner svg,
.im-theme-toggle svg,
.im-preferences-toggle svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: block;
}
@media (max-width: 700px) {
  .topnav .btn-icon,
  .topnav .im-theme-toggle,
  .topnav .im-preferences-toggle,
  .topbar-actions .btn-icon,
  .topbar-actions .im-theme-toggle,
  .topbar-actions .im-preferences-toggle,
  .topbar-inner > .im-theme-toggle,
  .topbar-inner > .im-preferences-toggle {
    width: 36px; height: 36px; min-width: 36px; min-height: 36px;
    flex: 0 0 36px;
  }
  .topnav svg, .topbar-actions svg, .topbar-inner svg { width: 17px; height: 17px; }
  .topnav, .topbar-actions, .top-right { gap: 6px; }
}

/* ── the preferences panel never covers the header it opened from ─────────
   It was pinned to a fixed 72 px from the top, which on a phone lands on top
   of the header row and reads as a broken overlay. It now hangs below the
   header, inside the viewport, and scrolls if the list is taller than the
   space it has. */
.im-preferences-panel {
  top: calc(var(--topbar-h, 62px) + 10px);
  right: max(14px, env(safe-area-inset-right));
  width: min(360px, calc(100vw - 28px));
  max-height: calc(100dvh - var(--topbar-h, 62px) - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 600px) {
  .im-preferences-panel {
    top: calc(var(--topbar-h, 62px) + 8px);
    right: 12px;
    bottom: auto;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100dvh - var(--topbar-h, 62px) - 84px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   AMIGO STANDS ON HIS OWN
   ══════════════════════════════════════════════════════════════════════════
   Three earlier sheets each wrapped the assistant's mark in their own clay
   or squircle card — a border, a gradient fill, a drop shadow, a 28 px radius
   and a halo ring behind it — so the character rendered inside a box and read
   as an app icon rather than a character. This is the last sheet in the
   cascade, so the box is removed once, here, and the drawing carries itself:
   the soft glow in the artwork is the only thing behind him. */
body.amigo-chat .brand .mark,
body.amigo-chat .empty-mark {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
body.amigo-chat .brand .mark {
  width: 44px; height: 44px;
  flex: none;
}
body.amigo-chat .empty-mark {
  width: 96px; height: 96px;
  margin-bottom: 18px;
}
/* the halo ring that used to sit behind the icon */
body.amigo-chat .empty-mark::after,
body.amigo-chat .brand .mark::after { content: none; }
body.amigo-chat .brand .mark img,
body.amigo-chat .empty-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--im-text) 16%, transparent));
}
@media (max-width: 600px) {
  body.amigo-chat .brand .mark { width: 38px; height: 38px; }
  body.amigo-chat .empty-mark { width: 84px; height: 84px; }
}

/* ── one focus ring, everywhere ───────────────────────────────────────────
   Several chat controls replaced the outline with a subtle background change,
   which is close to invisible on the dark rail. The token already exists; this
   makes it the single ring for every interactive element. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus, var(--im-accent));
  outline-offset: 2px;
  border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   AMIGO, ALIVE
   ══════════════════════════════════════════════════════════════════════════
   The artwork is the delivered sheet, cleaned: the painted checkerboard is
   gone, including the gap between the legs, which the first pass left behind
   as a white patch. Because the character is a picture, it is moved as a
   whole — a float, a lean, a hop — and given a soft ground shadow that
   tightens as it rises, which is what makes the motion read as weight rather
   than a sliding image. */
.amigo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 96%;
  animation: amigo-breathe 3.6s ease-in-out infinite;
  -webkit-user-drag: none;
  user-select: none;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--im-text, #16241d) 16%, transparent));
}

.amigo--rail { animation-duration: 4.4s; animation-delay: -1.1s; }
.amigo--launcher { animation-duration: 3s; animation-delay: -0.6s; }

@keyframes amigo-breathe {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  35%      { transform: translateY(-4.5%) scale(.985, 1.015); }
  70%      { transform: translateY(-1.5%) scale(1.01, .99); }
}

/* ── while it is working ─────────────────────────────────────────────────── */
.amigo[data-state="researching"],
.amigo[data-state="composing"] { animation: amigo-work 2.1s ease-in-out infinite; }
@keyframes amigo-work {
  0%, 100% { transform: translateY(0) rotate(-2.5deg) scale(1); }
  25%      { transform: translateY(-5%) rotate(1.5deg) scale(1.015); }
  50%      { transform: translateY(0) rotate(2.5deg) scale(1); }
  75%      { transform: translateY(-3%) rotate(-1deg) scale(1.01); }
}

.amigo-avatar.is-active::before { animation: amigo-ring 1.6s ease-out infinite; }
@keyframes amigo-ring {
  0%   { opacity: .85; transform: scale(.84); }
  70%  { opacity: 0; transform: scale(1.55); }
  100% { opacity: 0; transform: scale(1.55); }
}

.working > span:last-child::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  animation: amigo-dots 1.25s steps(1, end) infinite;
}
@keyframes amigo-dots {
  0%   { content: ""; }
  25%  { content: "·"; }
  50%  { content: "··"; }
  75%  { content: "···"; }
}

/* ── the answer landed ──────────────────────────────────────────────────── */
.amigo[data-state="success"] { animation: amigo-hop .85s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes amigo-hop {
  0%   { transform: translateY(0) scale(1, 1); }
  22%  { transform: translateY(-17%) scale(1.06, .94); }
  48%  { transform: translateY(0) scale(.93, 1.07); }
  68%  { transform: translateY(-8%) scale(1.03, .97); }
  86%  { transform: translateY(0) scale(.99, 1.01); }
  100% { transform: translateY(0) scale(1, 1); }
}

.amigo[data-state="listening"] { animation: amigo-listen 1.35s ease-in-out infinite; }
@keyframes amigo-listen {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.05) rotate(2deg); }
}

.amigo[data-state="uncertain"],
.amigo[data-state="error"] {
  animation: amigo-doubt 5.2s ease-in-out infinite;
  filter: saturate(.85) brightness(.97) drop-shadow(0 6px 10px rgba(0,0,0,.12));
}
@keyframes amigo-doubt {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(1%) rotate(1deg); }
}

.amigo--welcome {
  animation: amigo-arrive .72s cubic-bezier(.2,.75,.25,1) both,
             amigo-breathe 4.2s ease-in-out .72s infinite;
}
@keyframes amigo-arrive {
  from { opacity: 0; transform: translateY(16px) scale(.84); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.a-body.revealing .md { animation: answer-reveal .42s cubic-bezier(.22,.61,.36,1) both; }
@keyframes answer-reveal {
  from { clip-path: inset(0 0 100% 0); opacity: .45; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

.src-cards > * { animation: card-rise .34s cubic-bezier(.2,.8,.2,1) both; }
.src-cards > *:nth-child(2) { animation-delay: .05s; }
.src-cards > *:nth-child(3) { animation-delay: .1s; }
.src-cards > *:nth-child(4) { animation-delay: .15s; }
@keyframes card-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.im-launcher .im-face { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.im-launcher .amigo { width: 30px; height: 30px; }

@media (prefers-reduced-motion: reduce) {
  .amigo, .amigo--welcome, .a-body.revealing .md, .src-cards > * { animation: none !important; }
  .working > span:last-child::after { content: "…"; animation: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
   THE CHAT'S CONTROLS, ON ONE GRID
   ══════════════════════════════════════════════════════════════════════════
   Measured in a browser at 1280 before this: the header row held 42 px, 42 px,
   42 px and 44 px controls with a 2 px gap between two of them and 8 px after
   the third, so the right end read as a pile rather than a row. The composer
   mixed a 44 px plus, a 38 px attach and a 44 px send, aligned to the bottom
   of a growing textarea, so the pencil sat low and looked pushed aside.

   One size, one gap, one vertical centre, equal insets at both ends. */
body.amigo-chat .top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 14px;
}
body.amigo-chat .top > * { flex: none; }
body.amigo-chat .top .top-right { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
/* the injected settings button carried its own 44 px width from an earlier
   sheet, so it sat wider than the 36 px controls beside it */
body.amigo-chat .top .top-right > *,
body.amigo-chat .top .im-theme-toggle.im-preferences-toggle {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
}
body.amigo-chat .top button,
body.amigo-chat .top .rail-toggle,
body.amigo-chat .top .im-theme-toggle,
body.amigo-chat .top .im-preferences-toggle {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  box-sizing: border-box;
}
body.amigo-chat .top svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* the spacer keeps the title left and the tools right without a ragged edge */
body.amigo-chat .top .top-title,
body.amigo-chat .top .chat-title { margin-inline-end: auto; }
body.amigo-chat .top > :last-child { margin-inline-end: 0; }

/* the composer: every control the same size, on the same centre line */
body.amigo-chat .composer {
  align-items: center;
  gap: 8px;
  padding: 8px;
}
body.amigo-chat .composer > .plus,
body.amigo-chat .composer > .mic,
body.amigo-chat .composer > #attachBtn,
body.amigo-chat .composer > .attach,
body.amigo-chat .composer > .send,
body.amigo-chat .composer > .stop {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  flex: none;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  box-sizing: border-box;
  align-self: center;
}
body.amigo-chat .composer > .stop { width: auto; padding: 0 14px; border-radius: 999px; }
body.amigo-chat .composer svg { width: 18px; height: 18px; }
body.amigo-chat .composer textarea { align-self: center; padding-block: 8px; }

@media (max-width: 700px) {
  body.amigo-chat .top { gap: 6px; padding-inline: 10px; }
  body.amigo-chat .top .top-right { gap: 6px; }
  body.amigo-chat .top .top-right > *,
  body.amigo-chat .top .im-theme-toggle.im-preferences-toggle {
    width: 36px; min-width: 36px;
    height: 36px; min-height: 36px;
  }
  body.amigo-chat .top button,
  body.amigo-chat .top .rail-toggle,
  body.amigo-chat .top .im-theme-toggle,
  body.amigo-chat .top .im-preferences-toggle {
    width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  }
  body.amigo-chat .top svg { width: 17px; height: 17px; }
  body.amigo-chat .composer { gap: 6px; padding: 7px; }
  body.amigo-chat .composer > .plus,
  body.amigo-chat .composer > .mic,
  body.amigo-chat .composer > #attachBtn,
  body.amigo-chat .composer > .attach,
  body.amigo-chat .composer > .send {
    width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  }
  body.amigo-chat .composer svg { width: 17px; height: 17px; }
}

/* The injected settings button is sized by design-system.css at 42 px, and at
   44 px under 720 px. Those rules are classes; this is the id, so it settles
   the row at one size without touching the shared sheet. */
#im-preferences.im-theme-toggle,
#im-preferences.im-preferences-toggle {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  margin-inline-start: 0;
  border-radius: 999px;
}
@media (max-width: 700px) {
  #im-preferences.im-theme-toggle,
  #im-preferences.im-preferences-toggle {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 36px;
  }
}

/* the "read the full article" step under a library answer */
body.amigo-chat .read-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 2px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--im-accent) 40%, var(--im-border));
  border-radius: 999px;
  color: var(--im-accent);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}
body.amigo-chat .read-full:hover { background: var(--im-accent-soft); }

/* ── the page-context chip ───────────────────────────────────────────────
   What the embedded panel hands to the chat: the page the reader was on. It
   is visible, it can be removed before anything is sent, and it is the only
   thing that travels from the page into the conversation. */
body.amigo-chat .page-context {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 8px 12px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--im-accent) 28%, var(--im-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--im-accent) 8%, var(--im-surface));
  font-size: 12.5px;
  color: var(--im-muted);
}
body.amigo-chat .page-context b { color: var(--im-text); font-weight: 650; }
body.amigo-chat .page-context button {
  border: 0;
  background: none;
  color: var(--im-accent);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
body.amigo-chat .page-context[hidden] { display: none; }

/* ── every icon sits in the middle of its circle ─────────────────────────
   Measured in the browser: the injected settings button on the main shell put
   its glyph 5 px right of the button's centre, because the shared control
   carries a margin and an inline-grid that the header row then shifts. One
   rule, applied to every icon-only control on every surface, keeps the glyph
   optically centred: no padding, no margin, no baseline offset. */
:where(.btn-icon, .im-theme-toggle, .im-preferences-toggle, .rail-toggle,
       .composer > button, .top button, .topnav .btn-icon) {
  padding: 0;
  display: inline-grid;
  place-items: center;
  place-content: center;
  line-height: 0;
  text-align: center;
}
:where(.btn-icon, .im-theme-toggle, .im-preferences-toggle, .rail-toggle,
       .composer > button, .top button, .topnav .btn-icon) > svg {
  display: block;
  margin: 0;
  flex: none;
}
#im-preferences.im-theme-toggle { margin-inline-start: 0; }


/* ── one assistant mark per answer ───────────────────────────────────────
   Every answer carried two: the real .amigo-avatar image, and a legacy
   .a::before that painted the Veridell facet behind it. Restoring a thread
   (Saved → Back, or reopening from the rail) rebuilt both, which is the
   crossed-marks the reader saw. The avatar is the one character; the legacy
   marker is removed here, in the last sheet of every bundle. */
body.amigo-chat article.a::before,
body.amigo-chat .a::before,
body.amigo-chat .a-body::before {
  content: none;
  display: none;
  background: none;
  width: 0;
  height: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   A PICTURE IN AN ANSWER
   ══════════════════════════════════════════════════════════════════════════
   The image the chat draws is content, not decoration, so it follows the
   reading-surface rule from the design notes: a solid surface, a 1 px border,
   no blur and no second shadow. The caption is the prompt that made it, in the
   same quiet type as source metadata. */
body.amigo-chat .a-image {
  margin: 6px 0 2px;
  max-width: min(100%, 520px);
}
body.amigo-chat .a-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--im-border);
  border-radius: 16px;
  background: var(--im-surface-2);
  box-shadow: var(--im-shadow);
}
body.amigo-chat .a-image figcaption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--im-muted);
}
@media (max-width: 600px) {
  body.amigo-chat .a-image img { border-radius: 13px; }
}
/* multimorphism, as one rule: blur belongs to things that float (the rail, the
   dock, the panel, a toast), and everything that sits — cards, answers, the
   picture above — keeps a border and a solid surface instead. */
:where(.a-image img, .panel, .art-body, .prose, .src-card, .factbox) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE CHAT, REDRAWN
   ══════════════════════════════════════════════════════════════════════════
   What the reference file does well is not a look to copy — it is a discipline:
   flat surfaces, generous radii, one strong accent, and typography doing the
   work instead of effects. This takes that discipline and keeps Veridell's own
   identity: forest for action, copper for provenance, cream for paper.

   Three rules, applied once here rather than patched per component:
     1. surfaces that sit are solid and bordered; only the rail, the dock and
        transient overlays keep any translucency;
     2. one radius scale — 999 for pills, 20 for panels, 14 for inner cards;
     3. one spacing rhythm on a 8 px base, so vertical gaps stop being
        arbitrary numbers picked on different days.
   */
body.amigo-chat {
  --chat-radius-pill: 999px;
  --chat-radius-panel: 20px;
  --chat-radius-card: 14px;
  --chat-space: 8px;
}

/* ── the reading column ─────────────────────────────────────────────────── */
body.amigo-chat .stage { padding-top: 28px; }
body.amigo-chat .md { font-size: 16px; line-height: 1.72; }
body.amigo-chat .md p { margin-block: calc(var(--chat-space) * 1.5); }
body.amigo-chat .md h2, body.amigo-chat .md h3 { letter-spacing: -.02em; margin-block: calc(var(--chat-space) * 2) var(--chat-space); }

/* ── the question ───────────────────────────────────────────────────────── */
body.amigo-chat .q {
  border: 1px solid var(--im-border);
  border-radius: var(--chat-radius-panel);
  background: var(--im-surface);
  padding: calc(var(--chat-space) * 1.5) calc(var(--chat-space) * 2);
  font-size: 15px;
  line-height: 1.6;
  box-shadow: none;
}

/* ── the answer ─────────────────────────────────────────────────────────── */
body.amigo-chat .a { gap: calc(var(--chat-space) * 1.5); }
body.amigo-chat .a-meta { gap: var(--chat-space); }
body.amigo-chat .a-meta .who { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
body.amigo-chat .a-meta .badge {
  border: 1px solid color-mix(in srgb, var(--im-warm, #a15c21) 34%, transparent);
  background: color-mix(in srgb, var(--im-warm, #a15c21) 10%, transparent);
  color: var(--im-warm, #a15c21);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--chat-radius-pill);
}
body.amigo-chat .read-full {
  border-radius: var(--chat-radius-pill);
  font-weight: 650;
}

/* ── sources ────────────────────────────────────────────────────────────── */
body.amigo-chat .src-cards { gap: calc(var(--chat-space) * 1.5); }
body.amigo-chat .src-card {
  border-radius: var(--chat-radius-card);
  background: var(--im-surface);
  padding: calc(var(--chat-space) * 1.5);
  transition: transform .16s ease, border-color .16s ease;
}
body.amigo-chat .src-card:hover { transform: translateY(-2px); border-color: var(--im-accent); }

/* ── the composer ───────────────────────────────────────────────────────── */
body.amigo-chat .composer {
  border-radius: var(--chat-radius-panel);
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--im-text) 6%, transparent),
              0 18px 40px -32px color-mix(in srgb, var(--im-text) 60%, transparent);
}
body.amigo-chat .composer:focus-within {
  border-color: color-mix(in srgb, var(--im-accent) 60%, var(--im-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--im-accent) 18%, transparent);
}
body.amigo-chat .composer textarea { font-size: 15.5px; }

/* ── the welcome ────────────────────────────────────────────────────────── */
body.amigo-chat .empty-heading {
  letter-spacing: -.035em;
  line-height: 1.1;
  max-width: 17ch;
  margin-inline: auto;
}
body.amigo-chat .welcome-eyebrow {
  border-radius: var(--chat-radius-pill);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
}
body.amigo-chat .starters { gap: calc(var(--chat-space) * 1.5); }
body.amigo-chat .starters button {
  border-radius: var(--chat-radius-card);
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  padding: calc(var(--chat-space) * 1.5);
  text-align: start;
}
body.amigo-chat .starters button:hover {
  border-color: var(--im-accent);
  transform: translateY(-1px);
}

/* ── the rail ───────────────────────────────────────────────────────────── */
body.amigo-chat .rail { border-right: 1px solid var(--im-border); }
body.amigo-chat .rail-new { border-radius: var(--chat-radius-card); }
body.amigo-chat .rail-search { border-radius: var(--chat-radius-pill); }

/* ── a small screen keeps the same rhythm, one step tighter ─────────────── */
@media (max-width: 700px) {
  body.amigo-chat .md { font-size: 15.5px; line-height: 1.68; }
  body.amigo-chat .q { padding: calc(var(--chat-space) * 1.25) calc(var(--chat-space) * 1.5); }
  body.amigo-chat .stage { padding-top: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   QUIET UNTIL NEEDED
   ══════════════════════════════════════════════════════════════════════════
   Copy, save and the other answer actions were always visible, so a long
   answer carried a row of buttons competing with its last sentence. They now
   rest at low contrast and come forward when the answer is hovered, focused or
   the reader is on a touch screen where there is no hover to rely on. Nothing
   is hidden from a keyboard: focus reveals the row exactly as hover does.
   */
body.amigo-chat .a-actions {
  gap: 6px;
  flex-wrap: wrap;
  opacity: .55;
  transition: opacity .18s ease;
}
body.amigo-chat .a:hover .a-actions,
body.amigo-chat .a:focus-within .a-actions { opacity: 1; }
body.amigo-chat .a-actions button {
  border-radius: 999px;
  border: 1px solid var(--im-border);
  background: var(--im-surface);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--im-muted);
  transition: color .16s ease, border-color .16s ease, transform .16s ease;
}
body.amigo-chat .a-actions button:hover {
  color: var(--im-accent);
  border-color: var(--im-accent);
  transform: translateY(-1px);
}
body.amigo-chat .a-actions button:focus-visible {
  opacity: 1;
  outline: 2px solid var(--im-accent);
  outline-offset: 2px;
}
/* a touch screen has no hover, so the row stays visible there */
@media (hover: none) {
  body.amigo-chat .a-actions { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.amigo-chat .a-actions button { transition: none; }
}

/* ── chat-ai-mode.css ── */
/* Veridell — AI Mode surface.
 *
 * The chat stops looking like a messenger and starts looking like a search
 * that answers: one calm column, a large rounded composer that owns the floor,
 * answers that sit on a soft card instead of floating in a bubble stream, and
 * sources and follow-ups as chips rather than a panel of cards.
 *
 * This sheet is last in the chat cascade on purpose. It re-settles the shell
 * the earlier layers built (chat-page > chat-redesign > amigo-chat >
 * chat-atelier > chat-experience) instead of adding a sixth language on top
 * of them: no new colours, only the --im-* tokens those layers already own.
 */

/* ── the rail: a quiet index, not a second brand ───────────────────────── */
html body.amigo-chat .rail {
  padding: 16px 12px 12px;
  background: color-mix(in srgb, var(--im-surface) 62%, var(--im-bg));
  border-right: 1px solid var(--im-border);
}
html body.amigo-chat .brand { gap: 10px; padding: 4px 6px 14px; }
/* The mark is the site's own facet, not a second Amigo. Two mascots on one
   screen was the bug: the rail drew the character beside a hero that already
   had it, so the page opened with the same face twice. */
html body.amigo-chat .brand .mark {
  width: 30px; height: 30px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--im-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--im-accent) 18%, transparent);
}
html body.amigo-chat .brand .mark img { width: 100%; height: 100%; object-fit: contain; }
html body.amigo-chat .brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html body.amigo-chat .brand-text b {
  font-family: var(--sans);
  font-size: 13.5px; font-weight: 650; letter-spacing: -.015em; color: var(--im-text);
}
html body.amigo-chat .brand-text em {
  font-style: normal; font-size: 9.5px; font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase; color: var(--im-muted);
}
html body.amigo-chat .rail-new {
  min-height: 40px;
  border: 1px solid var(--im-border);
  border-radius: 999px;
  background: var(--im-surface);
  /* The layer below paints the button with a gradient and white type; this
     surface is plain, so the label has to take the ink colour or it vanishes. */
  color: var(--im-text);
  font-weight: 600;
  box-shadow: none;
}
html[data-theme="dark"] body.amigo-chat .rail-new,
html[data-theme="light"] body.amigo-chat .rail-new { color: var(--im-text); }
html body.amigo-chat .rail-new:hover { filter: none; background: var(--im-accent-soft); }
html body.amigo-chat .rail-new kbd,
html[data-theme="dark"] body.amigo-chat .rail-new kbd {
  border-color: transparent;
  background: color-mix(in srgb, var(--im-text) 7%, transparent);
  color: var(--im-muted);
}
html body.amigo-chat .rail-new:hover { border-color: var(--im-accent); background: var(--im-accent-soft); }
html body.amigo-chat .rail-new kbd {
  border-radius: 6px; padding: 1px 6px;
  background: color-mix(in srgb, var(--im-text) 6%, transparent);
  font-size: 10px; color: var(--im-muted);
}
html body.amigo-chat .rail-search { border-radius: 999px; }
html body.amigo-chat .rail-row { border-radius: 12px; }
html body.amigo-chat .rail-foot {
  border-top: 1px solid var(--im-border);
  padding-top: 10px; margin-top: 8px;
  font-size: 11px; color: var(--im-muted);
}

/* ── the header: a thin line of controls, no title shouting ────────────── */
html body.amigo-chat .top {
  padding: 10px clamp(12px, 2.4vw, 26px);
  border-bottom: 1px solid color-mix(in srgb, var(--im-border) 60%, transparent);
  background: color-mix(in srgb, var(--im-bg) 84%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
}
html body.amigo-chat .top h1 {
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--im-muted);
}
html body.amigo-chat .top .ico { border-radius: 999px; }
html body.amigo-chat .top .ico:hover { background: var(--im-surface-2); color: var(--im-text); }

/* ── the opening screen ────────────────────────────────────────────────── */
html body.amigo-chat .stage { width: min(calc(100% - 48px), 880px); margin-inline: auto; }
html body.amigo-chat .empty {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(28px, 7vh, 76px) 0 8px;
  text-align: center;
}
html body.amigo-chat .empty::before,
html body.amigo-chat .empty::after { display: none; }
/* One Amigo, at the size of a face in a conversation — not a billboard. */
html body.amigo-chat .empty-mark {
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html body.amigo-chat .empty-mark img { width: 100%; height: 100%; object-fit: contain; }
html body.amigo-chat .welcome-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 8px;
  border: 1px solid var(--im-border);
  border-radius: 999px;
  background: var(--im-surface);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--im-muted);
}
html body.amigo-chat .welcome-pulse { width: 6px; height: 6px; box-shadow: 0 0 0 3px var(--im-accent-soft); }
html body.amigo-chat .empty-heading {
  max-width: 15ch;
  margin: 18px auto 12px;
  font-family: var(--sans);
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--im-text);
}
html body.amigo-chat .empty-heading em {
  font-style: normal;
  background: linear-gradient(96deg, var(--im-accent), color-mix(in srgb, var(--im-accent) 55%, var(--im-warm, var(--im-accent))));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html body.amigo-chat .empty > p {
  max-width: 48ch;
  margin: 0 auto;
  font-size: 14.5px; line-height: 1.65;
  color: var(--im-muted);
  text-wrap: pretty;
}
html body.amigo-chat .welcome-trust {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin: 18px 0 4px;
}
html body.amigo-chat .welcome-trust span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--im-border) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--im-surface) 70%, transparent);
  font-size: 11px; font-weight: 550; color: var(--im-muted);
}
html body.amigo-chat .welcome-trust svg { width: 13px; height: 13px; color: var(--im-accent); }

/* starters: three doors, equal weight, one line each */
html body.amigo-chat .starters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
  text-align: left;
}
html body.amigo-chat .starters button {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 74px;
  padding: 14px 15px;
  border: 1px solid var(--im-border);
  border-radius: 18px;
  background: var(--im-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--im-text) 3%, transparent);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
html body.amigo-chat .starters button:hover,
html body.amigo-chat .starters button:focus-visible {
  border-color: color-mix(in srgb, var(--im-accent) 45%, var(--im-border));
  background: color-mix(in srgb, var(--im-accent-soft) 55%, var(--im-surface));
  transform: translateY(-1px);
}
html body.amigo-chat .starters b {
  font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; color: var(--im-text);
}
html body.amigo-chat .starters span {
  font-size: 12px; line-height: 1.5; color: var(--im-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html body.amigo-chat .empty-links { margin-top: 20px; gap: 6px; }
html body.amigo-chat .empty-links a {
  padding: 5px 10px; border-radius: 999px;
  font-size: 11.5px; color: var(--im-muted);
}
html body.amigo-chat .empty-links a:hover { background: var(--im-surface-2); color: var(--im-text); }

/* ── the conversation ──────────────────────────────────────────────────── */
html body.amigo-chat .thread {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding: 18px 0 6px;
  gap: clamp(20px, 2.4vw, 30px);
}
html body.amigo-chat .q {
  max-width: min(74%, 600px);
  padding: 11px 16px;
  border: 1px solid color-mix(in srgb, var(--im-accent) 22%, var(--im-border));
  border-radius: 20px 20px 6px 20px;
  background: var(--im-accent-soft);
  color: var(--im-text);
  font-size: 14.5px;
  line-height: 1.55;
}
/* The answer is one card: meta line, prose, sources, actions — the shape an
   AI answer takes, so a long thread reads as a stack of answers, not chat. */
html body.amigo-chat .a { gap: 10px; }
html body.amigo-chat .a::before {
  width: 26px; height: 26px; border-radius: 8px;
  background-size: contain; background-position: center;
}
html body.amigo-chat .a-body {
  padding: 16px 18px 10px;
  border: 1px solid var(--im-border);
  border-radius: 20px;
  background: var(--im-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--im-text) 4%, transparent);
}
html body.amigo-chat .a-meta { margin-bottom: 10px; }
html body.amigo-chat .a-meta .who { font-size: 12px; }
html body.amigo-chat .a-body .md { max-width: 72ch; gap: 12px; font-size: 14.5px; line-height: 1.66; }
html body.amigo-chat .a-body .md > p:first-child {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 550;
  line-height: 1.55;
  color: var(--im-text);
  letter-spacing: -.01em;
}
html body.amigo-chat .a-body .md h2,
html body.amigo-chat .a-body .md h3 {
  font-size: 11px; letter-spacing: .09em;
  color: var(--im-muted);
  margin-top: 10px;
}
html body.amigo-chat .a-body .md li::marker { color: var(--im-accent); }
html body.amigo-chat .cite {
  border-radius: 6px;
  background: var(--im-accent-soft);
  color: var(--im-accent);
  font-size: 10px;
}
html body.amigo-chat .cite:hover { background: var(--im-accent); color: var(--im-bg); }

/* sources: a chip row, the way a search result cites itself */
html body.amigo-chat .src-panel { margin-top: 14px; }
html body.amigo-chat .src-head {
  font-size: 9.5px; letter-spacing: .1em;
  color: var(--im-muted);
  margin-bottom: 7px;
}
html body.amigo-chat .src-cards {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 7px;
}
html body.amigo-chat .src-card {
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--im-surface-2) 70%, var(--im-surface));
}
html body.amigo-chat .src-card:hover { background: var(--im-surface-2); }
html body.amigo-chat .src-n {
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--im-accent-soft); color: var(--im-accent);
  font-size: 9.5px;
}
html body.amigo-chat .a-actions { gap: 4px; margin-top: 6px; padding-top: 6px; }
html body.amigo-chat .a-actions button {
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--im-muted);
}
html body.amigo-chat .a-actions button:hover {
  border-color: var(--im-border);
  background: var(--im-surface-2);
  color: var(--im-text);
}
html body.amigo-chat .followups { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
html body.amigo-chat .followups button {
  padding: 7px 13px;
  border: 1px solid var(--im-border);
  border-radius: 999px;
  background: var(--im-surface);
  font-size: 12px; color: var(--im-text);
}
html body.amigo-chat .followups button:hover { border-color: var(--im-accent); background: var(--im-accent-soft); }

/* ── the composer: the floor of the page, one big rounded surface ──────── */
html body.amigo-chat .dock {
  padding: 10px clamp(12px, 2.4vw, 26px) max(16px, env(safe-area-inset-bottom));
  border-top: 0;
  background: linear-gradient(to top,
    var(--im-bg) 42%,
    color-mix(in srgb, var(--im-bg) 82%, transparent) 76%,
    transparent);
}
/* The 1px specular rule the experience layer draws over the dock reads as a
   seam across the page once the composer owns the floor. */
html body.amigo-chat .dock::before { display: none; }
html body.amigo-chat .dock-in {
  max-width: 780px;
  display: flex;
  flex-direction: column;
}
html body.amigo-chat .chat-mode-tabs {
  display: inline-flex; gap: 2px;
  align-self: center;
  width: max-content; max-width: 100%;
  margin: 0 auto 9px;
  padding: 3px;
  border: 1px solid var(--im-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--im-surface) 78%, transparent);
  width: fit-content;
}
html body.amigo-chat .chat-mode-tabs button {
  padding: 5px 14px;
  border: 0; border-radius: 999px;
  background: transparent;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--im-muted);
  cursor: pointer;
}
html body.amigo-chat .chat-mode-tabs button:hover { color: var(--im-text); }
html body.amigo-chat .chat-mode-tabs button.is-active,
html body.amigo-chat .chat-mode-tabs button[aria-pressed="true"] {
  background: var(--im-surface);
  color: var(--im-text);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--im-text) 12%, transparent);
}
html body.amigo-chat .composer {
  align-items: flex-end;
  gap: 4px;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--im-border);
  border-radius: 26px;
  background: var(--im-surface);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--im-text) 6%, transparent),
    0 14px 34px -26px color-mix(in srgb, var(--im-text) 45%, transparent);
  transition: border-color .16s ease, box-shadow .16s ease;
}
html body.amigo-chat .composer:focus-within {
  border-color: color-mix(in srgb, var(--im-accent) 55%, var(--im-border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--im-accent) 14%, transparent),
    0 14px 34px -26px color-mix(in srgb, var(--im-text) 45%, transparent);
}
html body.amigo-chat .composer textarea {
  font-size: 15px; line-height: 1.55;
  padding: 8px 2px;
  max-height: 180px;
}
html body.amigo-chat .composer textarea::placeholder { color: var(--im-muted); }
html body.amigo-chat .plus,
html body.amigo-chat .attach,
html body.amigo-chat .mic {
  width: 34px; height: 34px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--im-muted);
}
html body.amigo-chat .plus:hover,
html body.amigo-chat .attach:hover,
html body.amigo-chat .mic:hover { background: var(--im-surface-2); color: var(--im-text); }
html body.amigo-chat .composer .send {
  width: 36px; height: 36px;
  border: 0; border-radius: 999px;
  background: var(--im-accent);
  color: var(--im-bg);
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--im-accent) 70%, transparent);
}
html body.amigo-chat .composer .send:hover:not(:disabled) { transform: scale(1.04); }
html body.amigo-chat .composer .send:disabled { background: var(--im-surface-2); color: var(--im-muted); box-shadow: none; }
html body.amigo-chat .composer .stop {
  height: 36px; padding: 0 14px;
  border: 1px solid var(--im-border); border-radius: 999px;
  background: var(--im-surface-2); color: var(--im-text);
  font-size: 12px; font-weight: 600;
}
html body.amigo-chat .meta-row { padding: 8px 4px 0; }
html body.amigo-chat .meta-row .mchip {
  padding: 4px 11px;
  border: 1px solid var(--im-border);
  border-radius: 999px;
  background: transparent;
  font-size: 11px; font-weight: 550;
  color: var(--im-muted);
}
html body.amigo-chat .meta-row .mchip:hover { border-color: var(--im-accent); color: var(--im-text); }
html body.amigo-chat .meta-row .hint { font-size: 10.5px; color: var(--im-muted); }
html body.amigo-chat .chat-note {
  max-width: 78ch; margin: 8px auto 0;
  font-size: 10.5px; line-height: 1.6;
  color: color-mix(in srgb, var(--im-muted) 82%, transparent);
}

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  html body.amigo-chat .starters { grid-template-columns: 1fr; gap: 8px; }
  html body.amigo-chat .starters button { min-height: 0; flex-direction: row; align-items: baseline; gap: 8px; padding: 12px 14px; }
  html body.amigo-chat .starters span { -webkit-line-clamp: 1; }
  html body.amigo-chat .empty { padding-top: clamp(16px, 4vh, 40px); }
  html body.amigo-chat .empty-mark { width: 64px; height: 64px; margin-bottom: 14px; }
  html body.amigo-chat .stage { width: calc(100% - 24px); }
  html body.amigo-chat .q { max-width: 86%; }
  html body.amigo-chat .a-body { padding: 14px 14px 8px; border-radius: 18px; }
  html body.amigo-chat .a::before { display: none; }
  html body.amigo-chat .composer { border-radius: 22px; }
  html body.amigo-chat .chat-mode-tabs { display: none; }
  html body.amigo-chat .chat-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html body.amigo-chat .starters button,
  html body.amigo-chat .composer .send { transition: none; }
}

/* ── the rail's doorways into the rest of the site ─────────────────────── */
html body.amigo-chat .rail-explore {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 0 6px;
  border-top: 1px solid var(--im-border);
  margin-top: 4px;
}
html body.amigo-chat .rail-explore .rail-head {
  margin: 0 8px 5px;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--im-muted);
}
html body.amigo-chat .rail-explore a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--im-muted);
  text-decoration: none;
  font-size: 12.5px; font-weight: 550;
}
html body.amigo-chat .rail-explore a:hover,
html body.amigo-chat .rail-explore a:focus-visible {
  background: var(--im-surface-2);
  color: var(--im-text);
}
html body.amigo-chat .rail-explore svg { width: 15px; height: 15px; flex: none; opacity: .8; }

/* ── what the answer is made of: badge, citation count, model ──────────── */
html body.amigo-chat .a-meta { flex-wrap: wrap; gap: 6px; }
html body.amigo-chat .a-meta .verify {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--im-accent) 32%, var(--im-border));
  background: color-mix(in srgb, var(--im-accent-soft) 62%, transparent);
  color: color-mix(in srgb, var(--im-accent) 88%, var(--im-text));
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: none;
}
html body.amigo-chat .a-meta .model-chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--im-border);
  color: var(--im-muted);
  font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
  text-transform: none;
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body.amigo-chat .a-meta .src-name { max-width: 32ch; }

/* A site answer is navigation, so its links should read like links. */
html body.amigo-chat .a-body .md a:not(.cite) {
  color: var(--im-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
html body.amigo-chat .a-body .md a:not(.cite):hover { text-decoration-thickness: 2px; }

/* ── chat-google-mode.css ── */
/* Veridell — AI Mode surface.
 *
 * The chat is the front door of the site, so it is built the way an answer
 * engine is built: one calm column, one search-shaped field, an answer that
 * reads like prose, and the sources as chips you can open without leaving the
 * thread. This sheet is the last layer in the chat cascade — it settles the
 * shape of the page and never changes what the earlier sheets mean.
 *
 * The rules below only ever set: the column, the composer, the answer card,
 * the source chips and the follow-up row. Colours come from the tokens the
 * chat page already defines, so light and dark stay in step.
 */

/* ── 1 · the column ──────────────────────────────────────────────────────
 * AI Mode is a reading surface, not a dashboard. 760px is the widest a
 * paragraph of 15–16px text stays comfortable at, and the answer column keeps
 * that width on every route. */
body.amigo-chat {
  --col: 760px;
  --r: 18px;
  --r-sm: 12px;
  --aimode-card: var(--panel);
  --aimode-hair: color-mix(in srgb, var(--line) 78%, transparent);
  --aimode-lift: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -18px rgba(0, 0, 0, .35);
}

body.amigo-chat .stage {
  max-width: var(--col);
  padding-top: 18px;
  gap: 22px;
}

/* ── 2 · the empty state ────────────────────────────────────────────────
 * The welcome is the "search page" moment: a quiet mark, one line of type,
 * and the things you can ask, laid out as cards rather than a wall of pills. */
body.amigo-chat .empty {
  padding: clamp(18px, 6vh, 64px) 0 8px;
  text-align: center;
}

body.amigo-chat .empty-mark {
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--aimode-lift);
}

body.amigo-chat .welcome-eyebrow {
  margin-inline: auto;
  margin-bottom: 12px;
}

body.amigo-chat .empty-heading {
  font-family: var(--sans);
  font-size: clamp(26px, 4.6vw, 40px);
  font-weight: 640;
  letter-spacing: -.03em;
  line-height: 1.16;
  margin: 0 auto 10px;
  max-width: 18ch;
  text-wrap: balance;
}

body.amigo-chat .empty-heading em {
  font-style: normal;
  color: var(--accent);
}

body.amigo-chat .empty > p {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 14.5px;
  color: var(--ink-2);
}

body.amigo-chat .welcome-trust {
  margin: 18px auto 4px;
  justify-content: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

body.amigo-chat .starters {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  text-align: left;
}

body.amigo-chat .starters button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--aimode-hair);
  border-radius: 16px;
  background: var(--aimode-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  text-align: left;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}

body.amigo-chat .starters button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--aimode-lift);
  transform: translateY(-1px);
}

body.amigo-chat .starters b {
  font-size: 13.5px;
  font-weight: 640;
  letter-spacing: -.01em;
}

body.amigo-chat .starters span {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

body.amigo-chat .empty-links {
  margin-top: 20px;
  justify-content: center;
  gap: 8px;
}

/* ── 3 · the composer ───────────────────────────────────────────────────
 * One field, big radius, soft lift, and the tools inside it. It lifts a little
 * when it has focus, which is the whole interaction cue AI Mode uses. */
body.amigo-chat .dock {
  padding: 10px 20px max(16px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}

body.amigo-chat .composer {
  border: 1px solid var(--aimode-hair);
  border-radius: 26px;
  background: var(--aimode-card);
  box-shadow: var(--aimode-lift);
  padding: 7px 8px 7px 10px;
  gap: 4px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}

body.amigo-chat .composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 18px 44px -22px rgba(0, 0, 0, .45);
}

body.amigo-chat .composer textarea {
  font-size: 15px;
  line-height: 1.5;
  padding: 9px 4px;
  min-height: 44px;
  max-height: 42vh;
}

body.amigo-chat .composer .send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

body.amigo-chat .composer .send svg { width: 17px; height: 17px; }

/* The mode tabs are a segmented control, the way AI Mode switches between a
 * plain search and an AI answer. */
body.amigo-chat .chat-mode-tabs {
  justify-content: center;
  gap: 4px;
  margin: 0 auto 8px;
  padding: 3px;
  border: 1px solid var(--aimode-hair);
  border-radius: 999px;
  background: var(--panel-2);
  width: max-content;
}

body.amigo-chat .chat-mode-tabs button {
  border: 0;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

body.amigo-chat .chat-mode-tabs button.is-active {
  background: var(--aimode-card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

body.amigo-chat .meta-row { margin-top: 8px; }

/* ── 4 · the answer card ────────────────────────────────────────────────
 * An answer is a card with a hairline and no fill of its own: the text is the
 * subject, the card only holds it apart from the next turn. */
body.amigo-chat .thread { gap: 18px; }

body.amigo-chat .q {
  align-self: flex-end;
  max-width: min(88%, 620px);
  border-radius: 20px 20px 6px 20px;
  background: var(--user);
  padding: 11px 15px;
  font-size: 14.5px;
}

body.amigo-chat .a {
  gap: 10px;
  padding: 16px 18px 14px;
  border: 1px solid var(--aimode-hair);
  border-radius: 20px;
  background: var(--aimode-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

body.amigo-chat .a-meta {
  gap: 8px;
  margin-bottom: 8px;
}

body.amigo-chat .a-body .md {
  font-size: 15px;
  line-height: 1.72;
}

body.amigo-chat .a-body .md > *:first-child { margin-top: 0; }
body.amigo-chat .a-body .md > *:last-child { margin-bottom: 0; }

body.amigo-chat .a-body .md h2,
body.amigo-chat .a-body .md h3 {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 660;
  letter-spacing: -.012em;
  margin: 18px 0 6px;
}

/* ── 5 · sources as chips ───────────────────────────────────────────────
 * The full source cards stay for a research answer; this row is the short
 * version that sits at the end of every answer, the way AI Mode lists the
 * pages it read. It is added by chat-page.js. */
body.amigo-chat .src-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}

body.amigo-chat .src-chips .src-chips-head {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}

body.amigo-chat .src-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--aimode-hair);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: 12px;
  text-decoration: none;
  transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}

body.amigo-chat .src-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  color: var(--ink);
}

body.amigo-chat .src-chip .n {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
}

body.amigo-chat .src-chip .host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The full source cards now live behind a disclosure: the chips are the
 * summary, the cards are the detail. A <summary> is a control, so it gets the
 * pointer and loses the default triangle. */
body.amigo-chat .src-panel > summary.src-head {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  color: var(--muted);
}

body.amigo-chat .src-panel > summary.src-head::-webkit-details-marker { display: none; }

body.amigo-chat .src-panel > summary.src-head::after {
  content: '▾';
  font-size: 10px;
  transition: transform .15s var(--ease);
}

body.amigo-chat .src-panel[open] > summary.src-head::after { transform: rotate(180deg); }

body.amigo-chat .src-panel > summary.src-head:hover { color: var(--ink); }

/* ── 6 · follow-ups ─────────────────────────────────────────────────────
 * The next questions, as quiet pills under the answer. */
body.amigo-chat .followups {
  gap: 7px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--aimode-hair);
}

body.amigo-chat .followups button {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--aimode-hair);
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 550;
  text-align: left;
  transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}

body.amigo-chat .followups button:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: var(--panel-2);
  color: var(--ink);
}

/* ── 7 · actions ────────────────────────────────────────────────────────
 * Copy / save / speak / regenerate stay, but as a quiet row of text buttons. */
body.amigo-chat .a-actions {
  gap: 4px;
  margin-top: 12px;
  opacity: .82;
  transition: opacity .15s var(--ease);
}

body.amigo-chat .a:hover .a-actions,
body.amigo-chat .a:focus-within .a-actions { opacity: 1; }

body.amigo-chat .a-actions button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  padding: 5px 8px;
  border-radius: 8px;
}

body.amigo-chat .a-actions button:hover {
  background: var(--panel-2);
  color: var(--ink);
}

/* ── 8 · the model row in the options panel ─────────────────────────────
 * The picker is one line, and the note under it says what the choice means. */
body.amigo-chat .opt select#modelChoice { font-size: 13px; }

body.amigo-chat .opt-note#modelNote {
  margin: 2px 0 6px;
  font-size: 12px;
  color: var(--muted);
}

/* ── 9 · phones ─────────────────────────────────────────────────────────
 * Below 640px the rail is a sheet, the card loses its border so the text gets
 * the full width, and the composer keeps its shape. */
@media (max-width: 640px) {
  body.amigo-chat .stage { padding: 12px 12px 4px; }

  body.amigo-chat .a {
    border: 0;
    border-radius: 0;
    padding: 4px 0 8px;
    background: transparent;
    box-shadow: none;
  }

  body.amigo-chat .q {
    max-width: 92%;
    border-radius: 18px 18px 6px 18px;
  }

  body.amigo-chat .dock { padding: 8px 12px max(14px, env(safe-area-inset-bottom, 0px)); }

  body.amigo-chat .composer { border-radius: 24px; }

  body.amigo-chat .starters { grid-template-columns: 1fr; }

  body.amigo-chat .empty-heading { font-size: clamp(24px, 7vw, 30px); }
}

/* ── 10 · reduced motion ────────────────────────────────────────────────
 * Every transform above is decoration; none of it is needed to use the page. */
@media (prefers-reduced-motion: reduce) {
  body.amigo-chat .starters button:hover,
  body.amigo-chat .composer:focus-within { transform: none; }

  body.amigo-chat .starters button,
  body.amigo-chat .composer,
  body.amigo-chat .followups button,
  body.amigo-chat .src-chip { transition: none; }
}

/* ── refine.css ── */
/* Veridell — the finishing layer.
 *
 * Loaded last on every page, after every other sheet, so it can settle the
 * details that make a site feel made rather than assembled: one easing curve,
 * one focus ring, one transition speed, and a quiet set of hover states.
 *
 * It changes no layout. Every rule here touches colour, shadow, radius, motion
 * or spacing *inside* a box that already exists — so it cannot break a screen
 * that the earlier layers laid out, and removing it returns the site exactly
 * to where it was.
 */

:root {
  /* One curve for everything that moves, and one duration ramp. A site feels
     smooth when the same motion happens at the same speed everywhere, not when
     any single animation is clever. */
  --vd-ease: cubic-bezier(.22, .61, .36, 1);
  --vd-ease-out: cubic-bezier(.16, 1, .3, 1);
  --vd-fast: 120ms;
  --vd-base: 180ms;
  --vd-slow: 320ms;

  /* One ring, used by every focusable thing. */
  --vd-ring: 0 0 0 3px color-mix(in srgb, var(--accent, #b46a45) 30%, transparent);

  /* Shadows that sit on paper rather than float above it. */
  --vd-lift-1: 0 1px 2px color-mix(in srgb, var(--charcoal, #242824) 6%, transparent);
  --vd-lift-2: 0 2px 4px color-mix(in srgb, var(--charcoal, #242824) 5%, transparent),
               0 12px 24px -14px color-mix(in srgb, var(--forest, #173b32) 26%, transparent);
}

/* ── motion: one speed, one curve ──────────────────────────────────────── */
a, button, .btn, .card, .q-card, .cat-card, .side-link, .mode-btn, .depth-btn,
.chip, .src-chip, .followup, input, textarea, select, .searchbar {
  transition:
    background-color var(--vd-base) var(--vd-ease),
    border-color var(--vd-base) var(--vd-ease),
    color var(--vd-fast) var(--vd-ease),
    box-shadow var(--vd-base) var(--vd-ease),
    transform var(--vd-fast) var(--vd-ease);
}

/* A press should feel like a press, and never move the thing under the finger
   far enough to change what is being clicked. */
button:active:not(:disabled), .btn:active:not(:disabled) { transform: translateY(1px) scale(.994); }

/* ── focus: visible, consistent, never a surprise ──────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent, #b46a45);
  outline-offset: 2px;
  box-shadow: var(--vd-ring);
}

/* ── links inside prose: quiet until touched ───────────────────────────── */
.prose a, .page a, .answer a {
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--vd-fast) var(--vd-ease), color var(--vd-fast) var(--vd-ease);
}
.prose a:hover, .page a:hover, .answer a:hover {
  text-decoration-color: currentColor;
}

/* ── surfaces: one lift, on hover only, and only where a pointer exists ── */
@media (hover: hover) and (pointer: fine) {
  .card:hover, .q-card:hover, .cat-card:hover, .dash-action:hover {
    box-shadow: var(--vd-lift-2);
    transform: translateY(-2px);
  }
  .side-link:hover, .bottom-nav a:hover { background: color-mix(in srgb, var(--accent, #b46a45) 8%, transparent); }
}

/* ── the chat: rhythm, not decoration ──────────────────────────────────── */
/* A thread reads as a stack of answers, so the gap between turns is the most
   important measurement on the page. It is set once here rather than in five
   layered sheets. */
.chat-thread, .thread, .messages { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .chat-thread, .thread, .messages { scroll-behavior: auto; }
}

/* The streaming caret: a quiet pulse at the end of the sentence being written,
   never a blinking block that fights the text. */
.vd-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.15em;
  border-radius: 1px;
  background: currentColor;
  opacity: .55;
  animation: vd-caret 1s steps(2, start) infinite;
}
@keyframes vd-caret { 50% { opacity: 0; } }

/* Answers arrive rather than appear. Short, and out of the way. */
.vd-enter { animation: vd-enter var(--vd-slow) var(--vd-ease-out) both; }
@keyframes vd-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── the composer ──────────────────────────────────────────────────────── */
/* The composer is the one control a reader touches every turn, so it gets the
   only shadow on the page that responds to focus. */
.composer, .searchbar {
  transition: border-color var(--vd-base) var(--vd-ease),
              box-shadow var(--vd-base) var(--vd-ease),
              background-color var(--vd-base) var(--vd-ease);
}
.composer:focus-within, .searchbar:focus-within {
  border-color: color-mix(in srgb, var(--accent, #b46a45) 70%, var(--border-2, #cfc3ac));
  box-shadow: var(--vd-ring), var(--vd-lift-1);
}

/* ── small type details ────────────────────────────────────────────────── */
/* Numbers that change — counts, timings, versions — must not reflow the line
   they sit in as they change. */
.foot-version, .foot-build, .credit-build, .meta, .meta-row, .src-count, .kbd {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── the scrollbar: thin, quiet, and only where there is one ───────────── */
* { scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: color-mix(in srgb, var(--border-2, #cfc3ac) 85%, transparent);
}
*::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--accent, #b46a45) 55%, transparent);
}

/* ── selection ─────────────────────────────────────────────────────────── */
::selection { background: color-mix(in srgb, var(--accent, #b46a45) 26%, transparent); }

/* ── respect the reader's settings, completely ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .q-card:hover, .cat-card:hover, .dash-action:hover { transform: none; }
}

/* Windows high-contrast and forced-colours: keep every control legible. */
@media (forced-colors: active) {
  .btn, button, .card, .composer { border: 1px solid ButtonBorder; }
  :focus-visible { outline: 2px solid Highlight; box-shadow: none; }
}