:root {
  color-scheme: light;   /* always the light theme — don't follow the OS into dark mode */
  /* Neutral white→gray scale with a single blue accent (used sparingly). No purple. */
  --ai: #2563eb; --ai2: #3b82f6; --ai-ink: #e8f0fe;
  --surface: #ffffff; --surface-2: #f4f5f7; --line: #e6e8ec;
  --ink: #14171c; --ink-2: #565c66; --ink-3: #98a0ac;
  --ring: color-mix(in srgb, var(--ai) 22%, transparent);
  /* width of the right-hand source rail (wide screens) and rail + the column gap beside it */
  --rail: 240px; --rail-col: 270px;
}

body {
  padding-top: 26px;
  padding-left: 80px;  /* room for the fixed left icon rail (see .ai-rail) */
  /* clean near-white base + one faint blue glow up top (the only ambient color) */
  background:
    radial-gradient(900px 420px at 50% -12%, color-mix(in srgb, var(--ai) 6%, transparent), transparent 62%),
    #fafbfc;
  color: var(--ink);
}
.wrap { max-width: 880px; }
h1 .accent { color: var(--ai); }
header h1 { font-weight: 660; }

/* brand wordmark — centered over the search bar (the only header text) */
.brand-head { text-align: center; margin: 4px 0 20px; }
.brand {
  margin: 0; font-size: 34px; font-weight: 780; letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--ai), var(--ai2) 72%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* footer: sync status + quick links (replaces the floating conn pill + tagline) */
footer.home-foot {
  margin-top: 34px; padding-bottom: 6px;
  display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 6px 10px;
}
.foot-link {
  font: inherit; font-size: 12.5px; color: var(--ink-3); text-decoration: none; cursor: pointer;
  background: none; border: none; padding: 3px 5px; border-radius: 7px; transition: color .12s;
}
.foot-link:hover { color: var(--ai); }
.foot-sep { color: var(--ink-3); opacity: .45; font-size: 12px; }
.nav a { border-radius: 999px; }
.nav a:hover { color: var(--ai); border-color: color-mix(in srgb, var(--ai) 45%, var(--line));
  background: color-mix(in srgb, var(--ai) 8%, transparent); }
.nav a.active { color: var(--ai); border-color: color-mix(in srgb, var(--ai) 55%, var(--line));
  background: color-mix(in srgb, var(--ai) 12%, transparent); }

/* hero */
.ai-hero { text-align: center; margin: 30px 0 26px; }
.ai-hero h2 {
  font-size: 38px; font-weight: 720; letter-spacing: -0.03em; margin: 0 0 10px; line-height: 1.05;
  background: linear-gradient(100deg, var(--ai), var(--ai2) 70%); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.ai-hero p { color: var(--ink-2); font-size: 15px; margin: 0; }
body.searching .ai-hero { display: none; }

/* search bar */
form.ask { position: sticky; top: 10px; z-index: 8; margin: 0 0 26px; }
.ask-wrap {
  display: flex; align-items: flex-end; gap: 10px; background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border: 1px solid var(--line); border-radius: 18px; padding: 11px 12px 11px 20px;
  box-shadow: 0 2px 4px rgba(20,16,40,.04), 0 16px 40px rgba(20,30,55,.10);
  transition: border-color .16s, box-shadow .16s;
}
.ask-wrap:focus-within {
  border-color: color-mix(in srgb, var(--ai) 60%, var(--line));
  box-shadow: 0 0 0 4px var(--ring), 0 18px 46px rgba(20,30,55,.18);
}
.ask-wrap textarea {
  flex: 1; border: none; outline: none; resize: none; background: transparent; color: var(--ink);
  font: 16.5px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-height: 168px; padding: 6px 0;
}
.ask-wrap textarea::placeholder { color: var(--ink-3); }
.ask-go {
  flex: none; cursor: pointer; border: none; width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(135deg, var(--ai), var(--ai2)); color: #fff; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ai) 40%, transparent);
  transition: filter .12s, transform .06s;
}
.ask-go:hover { filter: brightness(1.08); }
.ask-go:active { transform: scale(.94); }

/* attach (📎) button — matches .ask-ctx */
.ask-attach {
  flex: none; cursor: pointer; width: 42px; height: 42px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; transition: color .12s, border-color .12s;
}
.ask-attach svg { width: 19px; height: 19px; }
.ask-attach:hover { color: var(--ai); border-color: color-mix(in srgb, var(--ai) 45%, var(--line)); }

/* attachment tray above the input + drag-over highlight */
.att-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0 4px; }
.att-chips[hidden] { display: none; }
.att-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 220px;
  padding: 5px 8px 5px 6px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface); font-size: 12.5px; color: var(--ink-2);
}
.att-chip img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex: none; }
.att-chip .att-ic { font-size: 16px; flex: none; }
.att-chip .att-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip.uploading { opacity: .7; }
.att-chip.error { border-color: color-mix(in srgb, #e0524d 50%, var(--line)); }
.att-chip .att-spin { width: 12px; height: 12px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ai) 28%, var(--line)); border-top-color: var(--ai); animation: spin .7s linear infinite; }
.att-chip .att-badge.err { color: #e0524d; font-weight: 800; }
.att-chip .att-x { cursor: pointer; border: none; background: transparent; color: var(--ink-3);
  font-size: 12px; line-height: 1; padding: 2px; border-radius: 6px; flex: none; }
.att-chip .att-x:hover { color: var(--ink); background: var(--surface-2); }
form.ask.dragover .ask-wrap { border-color: var(--ai); box-shadow: 0 0 0 4px var(--ring); }

/* attachment chips on a submitted turn's question */
.att-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 14px; }
.att { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.att-img img { max-width: 180px; max-height: 150px; border-radius: 10px; border: 1px solid var(--line); display: block; }
.att-file { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2); font-size: 13px; }
.att-file:hover { border-color: color-mix(in srgb, var(--ai) 45%, var(--line)); color: var(--ai); }
.att-file .att-nm { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* per-answer action row: Copy / Speak / Summary (under a completed answer) */
.answer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }
.answer-actions:empty { display: none; }
.ans-act {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
  font-size: 12.5px; font-weight: 560; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 11px 5px 9px;
  transition: color .12s, border-color .12s, background .12s;
}
.ans-act svg { width: 15px; height: 15px; flex: none; }
.ans-act:hover { color: var(--ai); border-color: color-mix(in srgb, var(--ai) 45%, var(--line)); }
.ans-act.on { color: var(--ai); border-color: color-mix(in srgb, var(--ai) 55%, var(--line));
  background: color-mix(in srgb, var(--ai) 9%, transparent); }
.ans-act.ok { color: #16a34a; border-color: color-mix(in srgb, #16a34a 45%, var(--line)); }
.ans-act.loading svg { animation: act-pulse 1.1s ease-in-out infinite; }
@keyframes act-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* --- home gallery: a grid of thumbnail-slideshow tiles (one per past search, all from OPFS) -------- */
.home-gallery { margin: 6px 0 0; }
body.searching .home-gallery { display: none; }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.gtile {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; text-decoration: none;
  border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20,16,40,.05);
  /* accent gradient base shows through while lazy images load (or for image-less conversations) */
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--ai) 24%, var(--surface)), color-mix(in srgb, var(--ai2) 22%, var(--surface)));
  animation: rise .3s ease both; transition: transform .12s, box-shadow .16s, border-color .16s;
}
.gtile:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20,30,55,.17);
  border-color: color-mix(in srgb, var(--ai) 35%, var(--line)); }
.gtile.removing { opacity: 0; transform: scale(.96); transition: opacity .25s, transform .25s; }
/* the slideshow fills the tile and cross-fades (same .slide mechanism as source cards) */
.gtile-shots { position: absolute; inset: 0; }
.gtile-shots .slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.gtile-shots .slide.on { opacity: 1; }
.gtile-grad { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
  background: linear-gradient(transparent, rgba(8,6,20,.74)); }
.gtile-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 11px; color: #fff; }
.gtile-title { font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.gtile-sub { font-size: 11px; opacity: .88; margin-top: 3px; font-family: ui-monospace, Menlo, monospace;
  text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.gtile-del {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: none; background: rgba(8,6,20,.5); color: #fff; opacity: 0;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .14s, background .14s;
}
.gtile-del svg { width: 15px; height: 15px; }
.gtile:hover .gtile-del, .gtile-del:focus { opacity: 1; }
.gtile-del:hover { background: #e0524d; }

/* a turn */
.turn { margin: 0 0 38px; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.turn .q {
  font-size: 23px; font-weight: 680; letter-spacing: -0.02em; margin: 0 0 16px; line-height: 1.25;
}
.turn .status {
  display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13.5px; margin: 0 0 14px;
}
.turn .status .spin {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ai) 28%, var(--line));
  border-top-color: var(--ai); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.turn .status.hidden { display: none; }

/* the queries the model actually ran (it decides how many) */
.searched { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.searched:empty { display: none; }
.qchip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  font: 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ai);
  border: 1px solid color-mix(in srgb, var(--ai) 30%, transparent);
  background: color-mix(in srgb, var(--ai) 9%, transparent); padding: 5px 9px; border-radius: 999px;
}
.qchip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qfavs { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.qfavs:empty { display: none; }
.qfav { width: 13px; height: 13px; border-radius: 3px; flex: none; background: var(--surface); }
.qchip::before { content: "⌕"; opacity: .7; flex: none; }
/* a video (media) search chip: a play glyph + a cyan tint, to distinguish it from a plain web search */
.qchip.media { color: #0e7490; border-color: color-mix(in srgb, #0891b2 35%, transparent);
  background: color-mix(in srgb, #0891b2 9%, transparent); }
.qchip.media::before { content: "▶ "; opacity: .9; }
/* a news (RSS/Atom feed) chip: a newspaper glyph + an amber tint, distinct from web + video */
.qchip.news { color: #b45309; border-color: color-mix(in srgb, #d97706 38%, transparent);
  background: color-mix(in srgb, #d97706 10%, transparent); }
.qchip.news::before { content: "📰"; opacity: .9; }

/* search-result cards in the sources rail — the returned links (favicon + title + snippet; a thumbnail
   for media results), compact and matching the source-card design */
.searchres { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.searchres:not(:empty)::before {
  content: "Results"; font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); font-weight: 700; margin-bottom: 1px;
}
.sr-card {
  display: flex; gap: 9px; align-items: flex-start; text-decoration: none; padding: 8px 9px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  transition: border-color .12s, background .12s;
}
.sr-card:hover { border-color: color-mix(in srgb, var(--ai) 40%, var(--line)); background: color-mix(in srgb, var(--ai) 4%, transparent); }
.sr-thumb { flex: none; width: 64px; height: 48px; border-radius: 7px; overflow: hidden; background: var(--surface-2); }
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-info { min-width: 0; flex: 1; }
.sr-meta { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.sr-fav { width: 13px; height: 13px; border-radius: 3px; flex: none; object-fit: cover; }
.sr-site { font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-title { font-size: 12.5px; font-weight: 600; line-height: 1.34; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-desc { font-size: 11px; color: var(--ink-2); line-height: 1.4; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* thinking trace */
.thinking {
  border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2);
  margin: 0 0 16px; overflow: hidden;
}
.thinking > summary {
  list-style: none; cursor: pointer; padding: 11px 15px; display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); user-select: none;
}
.thinking > summary::-webkit-details-marker { display: none; }
.thinking > summary .chev { margin-left: auto; color: var(--ink-3); transition: transform .18s; font-size: 11px; }
.thinking[open] > summary .chev { transform: rotate(90deg); }
.think-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ai);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ai) 60%, transparent);
}
.thinking.live .think-dot { animation: pulse 1.2s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ai) 55%, transparent); }
  100% { box-shadow: 0 0 0 7px transparent; }
}
.thinking.live > summary .lbl::after {
  content: ""; display: inline-block; width: 1.1em; text-align: left;
  animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.think-body {
  padding: 8px 16px 14px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6;
  word-break: break-word; max-height: 340px; overflow: auto; border-top: 1px solid var(--line);
}
.think-body p { margin: 0 0 9px; }
.think-body ul, .think-body ol { margin: 0 0 9px; padding-left: 20px; }
.think-body li { margin: 3px 0; }
.think-body h2, .think-body h3, .think-body h4 { font-size: 13.5px; font-weight: 650; margin: 12px 0 6px; color: var(--ink); }
.think-body code { font: 12px/1 ui-monospace, Menlo, monospace; background: var(--surface);
  border: 1px solid var(--line); padding: 1px 4px; border-radius: 4px; }
.think-body strong { font-weight: 650; color: var(--ink); }
/* inline tool-call trace lines (a blockquote per call): a left accent rule, set off from the prose */
.think-body blockquote { margin: 8px 0; padding: 3px 0 3px 10px;
  border-left: 2px solid color-mix(in srgb, var(--ink-3) 55%, transparent); }
.think-body blockquote p { margin: 0; font-size: 12.5px; color: var(--ink-2); }

/* source rail */
.sources {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 11px; margin: 0 0 22px;
}
.sources:empty { display: none; }
/* per-card "open screenshot" button (the card itself opens the offline archive) */
.src-shot {
  position: absolute; top: 8px; right: 8px; z-index: 2; cursor: pointer;
  width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(20,16,40,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .14s, background .14s;
}
.src:hover .src-shot, .src-shot:focus { opacity: 1; outline: none; }
.src-shot:hover { background: rgba(20,16,40,.8); }
/* media source: a play overlay marks the poster as the VIDEO (the card opens it); decorative only */
.src-play { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center;
  justify-content: center; pointer-events: none; opacity: .85; transition: opacity .14s; }
.src:hover .src-play { opacity: 1; }
.src-play svg { filter: drop-shadow(0 1px 5px rgba(0,0,0,.5)); }
/* …and a distinct "transcript" pill (bottom-right; opposite the slideshow dots) opens the transcript */
.src-tr { position: absolute; right: 8px; bottom: 8px; z-index: 2; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(20,16,40,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-radius: 999px; padding: 3px 9px; transition: background .14s; }
.src-tr:hover, .src-tr:focus { background: rgba(20,16,40,.85); outline: none; }
.src {
  position: relative;
  display: flex; flex-direction: column; text-decoration: none; color: inherit; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  transition: border-color .14s, box-shadow .14s, transform .1s; animation: rise .3s ease both;
}
.src:hover {
  border-color: color-mix(in srgb, var(--ai) 50%, var(--line));
  box-shadow: 0 10px 26px rgba(20,30,55,.12); transform: translateY(-2px);
}
.src.flash { animation: flash 1.1s ease; }
@keyframes flash { 0%,100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--ring); } }
.src-thumb, .src-thumb-fallback { width: 100%; height: 104px; object-fit: cover; background: var(--surface-2); display: block; }
.src-thumb-fallback {
  display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 720;
  color: #fff; background: linear-gradient(135deg, var(--ai), var(--ai2)); text-transform: uppercase;
}
/* looping image slideshow: slides stacked, cross-faded one at a time */
.src-gallery { position: relative; width: 100%; height: 104px; background: var(--surface-2); overflow: hidden; }
.src-gallery .slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.src-gallery .slide.on { opacity: 1; }
/* a subtle dot strip showing how many images are looping */
.src-gallery[data-slideshow]::after {
  content: ""; position: absolute; left: 8px; bottom: 7px; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  animation: pulse 2.6s ease-in-out infinite;
}
.src-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.src-meta { display: flex; align-items: center; gap: 6px; }
.src-favicon { width: 15px; height: 15px; border-radius: 4px; flex: none; object-fit: cover; background: var(--surface-2); }
.src-num {
  margin-left: auto; flex: none;
  font: 10.5px/1 ui-monospace, Menlo, monospace; color: var(--ai); font-weight: 700;
  width: 19px; height: 19px; border-radius: 50%; background: color-mix(in srgb, var(--ai) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ai) 32%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
}
.src-title {
  font-size: 12.5px; font-weight: 600; line-height: 1.38; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.src-site { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-desc {
  font-size: 11.5px; line-height: 1.45; color: var(--ink-2); margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Wide-screen layout: lay each turn out like Google's AI Mode — the answer on the left and the
   source cards stacked one-per-row in a sticky right rail (instead of an inline grid above the
   answer). Phones keep the single-column, cards-as-a-grid layout (the rules below don't apply). */
.turn-main { min-width: 0; }
@media (min-width: 900px) {
  /* relative to the viewport: more room so the answer column stays ~its usual width beside the rail
     (minus the left icon rail's 80px gutter + 24px right padding, so it never overflows) */
  body.searching .wrap { max-width: min(1180px, calc(100vw - 104px)); }
  /* keep the search box aligned with the answer column (don't stretch it under the rail) */
  body.searching form.ask { max-width: calc(100% - var(--rail-col)); }
  body.searching .turn {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--rail);
    column-gap: 30px; align-items: start;
  }
  body.searching .turn > .turn-main { grid-column: 1; }
  body.searching .turn > .sources {
    grid-column: 2; margin: 0;
    /* one card per row at the rail's width (kept ~the cards' current width, not narrower) */
    display: flex; flex-direction: column; gap: 12px;
    /* track the answer as it scrolls; scroll internally when the list outruns the viewport */
    position: sticky; top: 78px; max-height: calc(100vh - 96px);
    overflow-y: auto; overscroll-behavior: contain; padding: 2px;
  }
  /* keep each card at its natural height (incl. the 104px thumbnail) — without this, the flex column
     shrinks the cards to fit max-height and collapses the gallery. Scroll the rail instead. */
  body.searching .turn > .sources > .src { flex: none; }
}

/* the answer */
.answer { font-size: 16px; line-height: 1.75; color: var(--ink); }
.answer:empty { display: none; }
.answer h2, .answer h3, .answer h4 { letter-spacing: -0.01em; margin: 20px 0 9px; font-weight: 660; }
.answer h2 { font-size: 19px; } .answer h3 { font-size: 16.5px; } .answer h4 { font-size: 15px; }
.answer p { margin: 0 0 13px; }
.answer ul, .answer ol { margin: 0 0 13px; padding-left: 22px; }
.answer li { margin: 5px 0; }
.answer code {
  font: 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2); border: 1px solid var(--line); padding: 1.5px 5px; border-radius: 5px;
}
/* fenced code block: a real block, not the inline chip — reset the inline <code> styling inside */
.answer pre {
  margin: 14px 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); overflow-x: auto;
}
.answer pre code {
  display: block; background: none; border: none; padding: 0; border-radius: 0; white-space: pre;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
}
.answer a { color: var(--ai2); text-underline-offset: 2px; }
.answer del { color: var(--ink-3); }
.answer strong { font-weight: 660; }

/* a standalone link rendered as a chip (favicon/thumbnail + title + host) instead of a bare url.
   Inline links mid-sentence stay plain anchors; only whole-line links become chips (see md.js). */
.answer .lchip {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%; vertical-align: middle;
  text-decoration: none; margin: 3px 0; padding: 7px 12px 7px 9px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  transition: border-color .12s, background .12s;
}
.answer .lchip:hover { border-color: color-mix(in srgb, var(--ai) 40%, var(--line)); background: color-mix(in srgb, var(--ai) 4%, transparent); }
.lchip-fav { width: 18px; height: 18px; border-radius: 4px; flex: none; object-fit: cover; background: var(--surface-2); }
.lchip-badge { display: inline-flex; flex: none; color: var(--ink-2); width: 18px; height: 18px; }
.lchip-badge svg { width: 18px; height: 18px; }
.lchip-thumb { position: relative; width: 64px; height: 44px; flex: none; border-radius: 7px; overflow: hidden; background: var(--surface-2); }
.lchip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lchip-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lchip-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lchip-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.32;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 48ch; }
.lchip-host { font-size: 11px; color: var(--ink-3); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 48ch; }
.lchip-label { color: var(--ink-3); font-weight: 600; }
/* a code-styled inline link (a cyborg:// resource URI the agent printed as `code`) — clickable */
.answer a.acode { text-decoration: none; }
.answer a.acode code { cursor: pointer; color: var(--ai2); border-color: color-mix(in srgb, var(--ai) 30%, var(--line)); }
.answer a.acode:hover code { background: color-mix(in srgb, var(--ai) 8%, var(--surface-2)); }

/* task-list item (- [ ] / - [x]) — a real disabled checkbox, no bullet. flex-wrap so a nested list
   drops to its own line below the label instead of sitting beside it as a third flex item. */
.answer li.task { list-style: none; margin-left: -20px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.answer li.task > input { margin: 3px 0 0; flex: none; accent-color: var(--ai); }
.answer li.task > ul, .answer li.task > ol { flex-basis: 100%; margin: 4px 0 0; }

/* footnotes: the [^n] reference chip + the definition note at the bottom of the answer */
sup.fn-ref { font-size: 10.5px; vertical-align: super; }
sup.fn-ref a { color: var(--ai2); text-decoration: none; font-weight: 700; }
.fn-def { display: flex; gap: 7px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 4px 0; }
.fn-def .fn-num { font-weight: 700; color: var(--ink-3); flex: none; vertical-align: super; font-size: 10.5px; }
.answer hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; }
.answer table { border-collapse: collapse; margin: 14px 0; font-size: 14px; display: block; overflow-x: auto; }
.answer th, .answer td { border: 1px solid var(--line); padding: 7px 11px; text-align: left; vertical-align: top; }
.answer th { background: var(--surface-2); font-weight: 650; }
.answer tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.answer blockquote { margin: 12px 0; padding: 2px 14px; border-left: 3px solid color-mix(in srgb, var(--ai) 40%, var(--line)); color: var(--ink-2); }
/* inline image the answer embeds (e.g. a screenshot the agent selected, cyborg://screenshot/…) */
.answer img.ans-img {
  display: block; max-width: 100%; height: auto; margin: 14px 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
sup.cite {
  cursor: pointer; font: 10.5px/1 ui-monospace, Menlo, monospace; color: var(--ai); font-weight: 700;
  background: color-mix(in srgb, var(--ai) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ai) 32%, transparent);
  padding: 1px 5px; border-radius: 6px; margin: 0 1px; vertical-align: super; text-decoration: none; user-select: none;
}
sup.cite:hover { background: color-mix(in srgb, var(--ai) 22%, transparent); }
.answer .cursor { display: inline-block; width: 7px; height: 18px; background: var(--ai);
  vertical-align: text-bottom; animation: blink 1s steps(2) infinite; border-radius: 1px; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }
.turn.done .answer .cursor { display: none; }
.turn .err { color: #e0524d; font-size: 13.5px; background: color-mix(in srgb, #e0524d 8%, var(--surface));
  border: 1px solid color-mix(in srgb, #e0524d 30%, var(--line)); border-radius: 11px; padding: 11px 13px; }

/* history */
.history { margin-top: 10px; }
.history h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2);
  margin: 0 0 13px; font-weight: 680; }
.hlist { display: flex; flex-direction: column; gap: 9px; }
.hitem {
  display: flex; align-items: center; gap: 14px; text-decoration: none; overflow: hidden;
  color: var(--ink); border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: 12px 15px; transition: border-color .13s, background .13s, transform .08s, opacity .25s, max-height .25s, padding .25s, margin .25s;
}
.hitem:hover { border-color: color-mix(in srgb, var(--ai) 42%, var(--line));
  background: color-mix(in srgb, var(--ai) 6%, transparent); transform: translateX(2px); }
.hitem .ht { flex: 1; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hitem .hm { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; font-family: ui-monospace, Menlo, monospace; }
.hitem .hdel {
  flex: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; margin: -4px -6px -4px 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3);
  opacity: 0; transition: opacity .13s, color .13s, background .13s;
}
.hitem:hover .hdel, .hitem .hdel:focus { opacity: 1; outline: none; }
.hitem .hdel:hover { color: #e0524d; background: color-mix(in srgb, #e0524d 13%, transparent); }
.hitem.removing { opacity: 0; transform: translateX(14px); max-height: 0; padding-top: 0; padding-bottom: 0;
  margin-top: -9px; border-color: transparent; pointer-events: none; }
.history .empty { text-align: center; color: var(--ink-3); font-style: italic; padding: 20px; }
.card { background: var(--surface); border-color: var(--line); }

/* search-context pop-over (per-session env editor) */
.ask-ctx {
  flex: none; cursor: pointer; width: 42px; height: 42px; border-radius: 13px; font-size: 17px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; transition: color .12s, border-color .12s;
}
.ask-ctx:hover { color: var(--ai); border-color: color-mix(in srgb, var(--ai) 45%, var(--line)); }
.ask-ctx.on { color: var(--ai); border-color: color-mix(in srgb, var(--ai) 55%, var(--line));
  background: color-mix(in srgb, var(--ai) 10%, transparent); }
.env-pop {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(380px, 92vw); z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  box-shadow: 0 18px 50px rgba(20,30,55,.22); animation: rise .18s ease both;
}
.env-pop[hidden] { display: none; }
.env-head { font-size: 14px; font-weight: 660; color: var(--ink); }
.env-head span { color: var(--ink-3); font-weight: 500; font-size: 12px; }
.env-note { color: var(--ink-2); font-size: 12px; margin: 4px 0 12px; line-height: 1.5; }
.env-tz { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 12px; }
.env-rows { display: flex; flex-direction: column; gap: 7px; }
.env-row { display: flex; gap: 6px; align-items: center; }
.env-pop input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2);
  color: var(--ink); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: 8px 10px; outline: none; transition: border-color .12s;
}
.env-tz input { margin-top: 5px; width: 100%; text-transform: none; font-weight: 500; }
.env-pop input:focus { border-color: color-mix(in srgb, var(--ai) 55%, var(--line)); }
.env-row .env-k { flex: 0 0 38%; }
.env-rm { flex: none; cursor: pointer; width: 30px; height: 32px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-3); font-size: 13px; }
.env-rm:hover { color: #e0524d; border-color: color-mix(in srgb, #e0524d 40%, var(--line)); }
.env-actions { display: flex; gap: 8px; margin: 11px 0 0; }
.env-add, .env-loc { cursor: pointer; font-size: 12px; font-weight: 550; color: var(--ai2);
  border: 1px dashed color-mix(in srgb, var(--ai) 40%, var(--line)); background: transparent;
  border-radius: 9px; padding: 7px 10px; }
.env-add:hover, .env-loc:hover { background: color-mix(in srgb, var(--ai) 8%, transparent); }
.env-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.env-reset { cursor: pointer; font-size: 12px; color: var(--ink-3); background: none; border: none; }
.env-reset:hover { color: var(--ink-2); text-decoration: underline; }
.env-done { cursor: pointer; font-size: 13px; font-weight: 600; color: #fff; border: none; border-radius: 10px;
  padding: 8px 16px; background: linear-gradient(135deg, var(--ai), var(--ai2)); }

/* Per-answer stats line: when the search ran + thinking/answer durations + source count. A quiet
   footer under each answer, so it's there when revisiting but never competes with the answer. */
.turn-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 14px 0 0;
  padding-top: 11px; border-top: 1px solid var(--line); color: var(--ink-3);
  font-size: 12px; line-height: 1.4; }
.turn-stats:empty { display: none; }
.turn-stats .st-sep { color: var(--line); }

/* --- left icon rail + slide-in history drawer (like Google AI Mode's left nav) --------------------
   A thin fixed rail with a "new search" link and a "recent searches" toggle; the toggle slides open a
   drawer listing past searches (reuses the .history list markup, so the trash buttons work the same).
   The body reserves 80px on the left for the rail (see `body { padding-left }`). */
.ai-rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: 56px; z-index: 41;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-right: 1px solid var(--line);
}
.rail-btn {
  width: 40px; height: 40px; border-radius: 12px; border: none; background: transparent; cursor: pointer;
  color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.rail-btn svg { width: 21px; height: 21px; }
.rail-btn:hover { background: color-mix(in srgb, var(--ai) 12%, transparent); color: var(--ai); }
.rail-btn.on { background: color-mix(in srgb, var(--ai) 15%, transparent); color: var(--ai); }

.ai-drawer {
  position: fixed; top: 0; bottom: 0; left: 56px; width: 460px; max-width: 92vw; z-index: 40;
  display: flex; flex-direction: column; gap: 12px; padding: 16px 16px;
  background: var(--surface); border-right: 1px solid var(--line);
  box-shadow: 18px 0 44px rgba(20,24,34,.12);
  transform: translateX(-115%); transition: transform .22s ease; will-change: transform;
}
body.drawer-open .ai-drawer { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); font-weight: 680; }
.drawer-close { cursor: pointer; border: none; background: transparent; color: var(--ink-3);
  font-size: 16px; line-height: 1; width: 28px; height: 28px; border-radius: 8px; }
.drawer-close:hover { color: var(--ink); background: var(--surface-2); }
.drawer-new {
  display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ai);
  font-size: 13.5px; font-weight: 600; padding: 10px 12px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--ai) 32%, var(--line));
  background: color-mix(in srgb, var(--ai) 8%, transparent); transition: background .12s;
}
.drawer-new:hover { background: color-mix(in srgb, var(--ai) 14%, transparent); }
.drawer-new svg { width: 16px; height: 16px; flex: none; }
.drawer-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 2px; }
/* Hacker-News-style rows: a clean title with a small stats subline — no card chrome, just a hover
   highlight and hairline dividers, tight vertical rhythm. */
.drawer-list .hlist { gap: 0; }
.drawer-list .hitem {
  display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px; align-items: start;
  padding: 10px 12px; border: none; background: none; border-radius: 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.drawer-list .hitem:last-child { border-bottom: none; }
.drawer-list .hitem:hover { background: var(--surface-2); border-color: transparent; transform: none; }
.drawer-list .hitem:hover + .hitem { border-top-color: transparent; }
.drawer-list .hitem .ht {
  grid-column: 1; grid-row: 1; font-size: 14.5px; font-weight: 560; line-height: 1.34; color: var(--ink);
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.drawer-list .hitem .hm { grid-column: 1; grid-row: 2; margin-top: 1px; }
.drawer-list .hitem .hdel { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center; }

.drawer-backdrop {
  position: fixed; inset: 0; left: 56px; z-index: 39; background: rgba(12,10,26,.34);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }

/* phones: the left icon rail becomes a bottom nav bar so content gets the full width (the natural
   pattern for the installed mobile PWA); spacing tightens and the search controls shrink to fit. */
@media (max-width: 640px) {
  body { padding: 12px 14px calc(70px + env(safe-area-inset-bottom)); }
  .wrap { max-width: 100%; }
  header { margin-bottom: 16px; }
  h1 { font-size: 20px; }

  /* left rail → bottom bar */
  .ai-rail {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    height: calc(56px + env(safe-area-inset-bottom));
    flex-direction: row; justify-content: space-evenly; align-items: center; gap: 0;
    padding: 4px 10px calc(4px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid var(--line);
  }
  .ai-rail .rail-btn { margin: 0 !important; width: 56px; height: 42px; }

  /* drawer + backdrop now slide from the left edge (rail no longer reserves that strip) */
  .ai-drawer { left: 0; width: min(440px, 92vw); }
  .drawer-backdrop { left: 0; }

  /* search bar: fit ⚙ 🎙 → plus a usable field; 16px text avoids iOS focus-zoom */
  form.ask { top: 6px; margin-bottom: 18px; }
  .ask-wrap { gap: 8px; padding: 9px 10px 9px 16px; border-radius: 16px; }
  .ask-go, .ask-ctx, .ask-attach { width: 40px; height: 40px; }
  .ask-wrap textarea { font-size: 16px; }

  /* home gallery: a clean 2-up grid on phones */
  .hgrid { grid-template-columns: 1fr 1fr; gap: 11px; }

  /* hero + question scaled down for narrow screens */
  .ai-hero { margin: 16px 0 18px; }
  .ai-hero h2 { font-size: 30px; }
  .turn .q { font-size: 20px; }
}

/* --- inline live browser view (folded cockpit) ------------------------------------- */
.live-view {
  margin: 10px 0 16px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px; overflow: hidden; background: var(--panel, #fff);
}
.lv-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb); font-size: 12.5px; color: var(--muted, #6b7280);
}
.lv-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); animation: lv-pulse 1.4s ease-in-out infinite; }
.lv-dot.done { background: #9aa1ac; box-shadow: none; animation: none; }
@keyframes lv-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.lv-label { font-weight: 600; color: var(--text, #1f2430); }
.lv-actions { margin-left: auto; display: flex; gap: 8px; }
.lv-btn {
  border: 1px solid var(--border, #e5e7eb); background: var(--panel, #fff); color: var(--text, #1f2430);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.lv-btn:hover { border-color: var(--ai, #2563eb); color: var(--ai, #2563eb); }
.lv-btn:disabled { opacity: .55; cursor: default; }
.lv-stage { background: #0b0d12; display: flex; align-items: center; justify-content: center; aspect-ratio: 1280 / 800; }
.lv-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lv-approval {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: #fff7ed; border-bottom: 1px solid #fdba74;
}
.lv-ap-msg { flex: 1 1 60%; font-size: 13.5px; font-weight: 600; color: #9a3412; }
.lv-approval button { border: 0; border-radius: 10px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; }
.lv-ap-yes { background: #16a34a; }
.lv-ap-no { background: #dc2626; }
.lv-approval button:disabled { opacity: .55; cursor: default; }

/* system note: warm browser session reaped for inactivity */
.browser-closed-note {
  margin: 6px 0 18px; padding: 10px 14px; border-radius: 12px;
  background: #f3f4f6; border: 1px solid var(--border, #e5e7eb);
  color: var(--muted, #6b7280); font-size: 12.5px; line-height: 1.5;
  display: flex; align-items: center; gap: 8px;
}
.browser-closed-note::before { content: "🟤"; font-size: 11px; filter: grayscale(1); }

.lv-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0b0d12; }

.lv-speed.on { border-color: var(--ai, #2563eb); color: var(--ai, #2563eb); font-weight: 700; }