/* Kestrel — "Dusk Patrol" design system.
   The palette is the bird: rufous back, slate-blue wings, bone breast, black tail barring —
   set against a deep slate dusk sky (never pure black). One accent does the talking (rufous);
   slate-blue is for places you can go (links); gold is reserved for a blocking question,
   red for real errors. The signature element is the BARRING RAIL — the kestrel's tail-band
   pattern — carried by the live run meter and the section rules.
   Type: Bricolage Grotesque (display, self-hosted — offline-capable for the desktop build),
   system stack for body, JetBrains Mono stack for telemetry. No CDN, no Tailwind. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-var.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}

:root {
  /* dusk sky — slate with a blue undertone; depth via tonal layering */
  --ground: #14181d;
  --panel: #1a2026;
  --panel-hi: #212830;
  --panel-hi2: #2a323c;
  --line: #262d35;
  --line-strong: #37414d;
  /* bone plumage text — warm on the cool ground */
  --ink: #e9e4d8;
  --muted: #b3aea1;
  --faint: #7d8288;
  /* rufous — the one accent, rationed */
  --rufous: #d97742;
  --rufous-br: #eb9260;
  --rufous-deep: #a34f22;
  --on-rufous: #221008;
  /* slate-blue wing — links and places to go */
  --wing: #8fa8bf;
  --wing-br: #b5cade;
  /* semantic */
  --gold: #e8b64c;
  --red: #e07a6e;
  --ok: #96c795; /* small "connected" affordances only — never a surface color */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  /* the signature: kestrel tail barring */
  --barring: repeating-linear-gradient(90deg, transparent 0 12px, rgba(10, 8, 6, .5) 12px 16px);
  --barring-quiet: repeating-linear-gradient(90deg, transparent 0 12px, rgba(233, 228, 216, .07) 12px 16px);
  --focus: 0 0 0 3px rgba(217, 119, 66, .25);
}

* { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; }
body {
  font-family: var(--body);
  background: var(--ground);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
/* dusk atmosphere — a rufous horizon glow low behind the hero, fine grain over everything.
   Pure CSS: no image request, nothing to fail, nothing that fights the palette. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% -10%, rgba(217, 119, 66, .13), transparent 60%),
    radial-gradient(70% 40% at 85% 8%, rgba(143, 168, 191, .07), transparent 65%),
    var(--ground);
}
body::after { /* grain — dusk air, not flat pixels */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

button { cursor: pointer; font: inherit; color: inherit; }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rufous-br); outline-offset: 2px;
}
a { color: inherit; }
input, select { font: inherit; }
::selection { background: rgba(217, 119, 66, .35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2e363f; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #3c4652; background-clip: content-box; }
.hidden { display: none !important; }

/* ── layout shells ─────────────────────────────────────────── */
.page { max-width: 1280px; margin: 0 auto; padding: 40px 24px; }
.block { margin-bottom: 28px; }

/* ── top bar: the instrument rail ──────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 24, 29, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* the barring rail rides the underside of the bar — the mark of the bird, structural not decorative */
.topbar::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--rufous-deep), var(--rufous) 40%, var(--rufous-deep));
  -webkit-mask-image: var(--barring), linear-gradient(#000, #000);
  -webkit-mask-composite: source-out;
          mask-image: var(--barring), linear-gradient(#000, #000);
          mask-composite: subtract;
  opacity: .75;
}
.topbarInner { max-width: 1280px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbarActions { display: flex; align-items: center; gap: 8px; }
.brandWrap { display: flex; align-items: center; gap: 10px; cursor: default; }
/* the fal falcon mark is emerald on black — hue-rotate lands it in rufous; screen-blend drops the black */
.brandLogo {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  mix-blend-mode: screen; filter: hue-rotate(232deg) saturate(.95) brightness(1.08) drop-shadow(0 0 10px rgba(217, 119, 66, .4));
}
.brandText { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.brandName { font-family: var(--display); font-size: 1.45rem; font-weight: 800; letter-spacing: .01em; color: var(--ink); }
.brandTag { font-family: var(--mono); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-top: 3px; }

/* ── buttons ───────────────────────────────────────────────── */
.btnPrimary {
  font-weight: 700; border: 1px solid transparent; border-radius: 999px;
  background: linear-gradient(180deg, var(--rufous-br), var(--rufous-deep)); color: var(--on-rufous);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 4px 16px -6px rgba(217, 119, 66, .55);
  transition: filter .15s, box-shadow .2s, transform .1s;
}
.btnPrimary:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 22px -4px rgba(217, 119, 66, .8); }
.btnPrimary:active { transform: scale(.97); }
.btnSm { font-size: .82rem; padding: .5rem 1.1rem; }
.btnIcon {
  background: transparent; border: none; border-radius: 999px; padding: .5rem .65rem;
  font-size: 1.1rem; color: var(--muted); transition: background .15s, color .15s;
}
.btnIcon:hover { background: var(--panel-hi); color: var(--ink); }
.btnGhost {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: 999px; padding: .5rem 1rem; font-size: .85rem; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.btnGhost:hover { background: var(--panel-hi); border-color: var(--faint); }
.ghost {
  background: var(--panel-hi); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: .35rem .8rem; font-size: .8rem; font-weight: 500;
  transition: border-color .12s, background .12s;
}
.ghost:hover:not(:disabled) { background: var(--panel-hi2); border-color: var(--line-strong); }
.danger { color: var(--red) !important; }
button.danger:hover { background: #37201c !important; border-color: #6e352c !important; }

/* ── hero: the perch ───────────────────────────────────────── */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 0 10px; margin-bottom: 26px; }
.heroLabel {
  font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--rufous-br); opacity: .9; margin-bottom: .6rem;
}
.heroTitle {
  font-family: var(--display); font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800;
  letter-spacing: -.015em; line-height: 1.06; margin-bottom: 1.5rem; color: var(--ink);
}
.heroTitle em { font-style: normal; color: var(--rufous); }

/* command bar — big, quiet glass, rufous focus */
.cmdBar {
  width: 100%; max-width: 48rem;
  display: flex; align-items: center; gap: .75rem; padding: .5rem .55rem .5rem 1.35rem; border-radius: 999px;
  background: rgba(33, 40, 48, .72); border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 44px -18px rgba(0, 0, 0, .8);
  backdrop-filter: blur(18px); transition: box-shadow .25s, border-color .25s;
}
.cmdBar:focus-within { border-color: rgba(217, 119, 66, .65); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 26px -4px rgba(217, 119, 66, .4); }
.cmdIcon { font-size: 1.1rem; opacity: .7; flex: none; }
.cmdInput {
  flex: 1; min-width: 0; font-size: 1.12rem; padding: .78rem 0;
  background: transparent; border: none; outline: none; color: var(--ink);
}
.cmdInput::placeholder { color: var(--faint); }
.cmdMic { flex: none; font-size: 1.1rem; padding: .55rem; color: var(--faint); background: transparent; border: none; border-radius: 999px; transition: color .15s; }
.cmdMic:hover { color: var(--rufous-br); }
.cmdMic.rec { color: var(--red); animation: pulseDot 1.4s infinite; }
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(224, 122, 110, .5); }
  70% { box-shadow: 0 0 0 7px rgba(224, 122, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 122, 110, 0); }
}
.huntBtn {
  flex: none; font-family: var(--display); font-weight: 700; font-size: 1rem; padding: .72rem 1.7rem; border-radius: 999px;
  background: linear-gradient(180deg, var(--rufous-br), var(--rufous-deep)); color: var(--on-rufous); border: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 0 20px -6px rgba(217, 119, 66, .7);
  transition: box-shadow .2s, filter .2s, transform .1s;
}
.huntBtn:hover { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 0 30px -3px rgba(235, 146, 96, .8); filter: brightness(1.06); }
.huntBtn:active { transform: scale(.97); }

/* composer mode banner — says what the box will do with what you type before you type it */
.composerBanner {
  width: 100%; max-width: 48rem; margin-top: .6rem; padding: .5rem .9rem; border-radius: .6rem; text-align: left;
  font-size: .8rem; line-height: 1.45; color: var(--muted);
  background: var(--panel-hi); border: 1px solid var(--line);
  animation: msgSlideUp .28s ease-out both;
}
.composerBanner.steer { color: var(--rufous-br); border-color: rgba(217, 119, 66, .4); background: rgba(217, 119, 66, .08); }
/* the answer banner carries the question itself — it must read as a question, wrap in full, never truncate */
.composerBanner.answer {
  color: #f5dfae; border-color: rgba(232, 182, 76, .55); background: rgba(232, 182, 76, .1);
  font-weight: 600; font-size: .92rem; line-height: 1.5; padding: .7rem 1rem;
  box-shadow: 0 0 22px -8px rgba(232, 182, 76, .55);
}
.composerBanner.refine { color: var(--wing-br); border-color: rgba(143, 168, 191, .4); background: rgba(143, 168, 191, .08); }
.composerCancel { margin-top: .4rem; font-size: .74rem; font-family: var(--mono); color: var(--faint); background: none; border: none; }
.composerCancel:hover { color: var(--red); }

/* ── live agent activity ───────────────────────────────────── */
.activityBox { width: 100%; max-width: 48rem; margin-top: 14px; text-align: left; }
/* always-on status line above the feed — not a toggle, just the "now" readout + source chips */
.activitySummary {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem; border-radius: 999px; font-size: .82rem; color: var(--muted);
  background: rgba(33, 40, 48, .6); border: 1px solid var(--line); backdrop-filter: blur(10px);
}
.liveWrap { position: relative; width: 8px; height: 8px; flex: none; }
.pulseDot { position: absolute; inset: 0; border-radius: 999px; background: var(--faint); }
.activityBox.live .pulseDot { background: var(--rufous-br); }
.activityBox.live .liveWrap::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--rufous-br);
  animation: pulse-ring 2s cubic-bezier(.455, .03, .515, .955) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(.5); opacity: 1; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.actLabel { font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rufous-br); opacity: .85; flex: none; }
#latestMsg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; text-align: left; }
.chipRow { display: flex; gap: .25rem; flex: none; flex-wrap: wrap; }
#chatPanel {
  margin-top: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 34px -14px rgba(0, 0, 0, .6); overflow: hidden;
}
/* source-status chips — labeled pills ("● Claude" / "○ Apify"), not bare dots */
#chips .chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--mono); font-size: .66rem; line-height: 1; padding: .2rem .5rem;
  border-radius: 999px; background: var(--panel-hi); border: 1px solid var(--line); color: var(--faint);
}
#chips .chip.on { color: var(--rufous-br); border-color: rgba(217, 119, 66, .35); background: rgba(217, 119, 66, .08); }

/* the feed — a transcript, not a jitter box: floor + viewport ceiling, stable gutter, contained overscroll */
#messages {
  min-height: 14rem; max-height: min(60vh, 34rem);
  overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-gutter: stable;
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; font-size: .86rem;
  scrollbar-width: thin; scrollbar-color: rgba(217, 119, 66, .3) transparent;
  /* older lines dissolve off the top; the newest line lives at the bottom at full contrast */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .35) 1.4rem, #000 4.5rem, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .35) 1.4rem, #000 4.5rem, #000 100%);
}
#messages:empty::before {
  content: "The hunter narrates here — where it searches and why. Reply to it in the search box above.";
  color: var(--faint); font-size: .85rem; line-height: 1.6;
}
.msg { max-width: 92%; padding: .5rem .8rem; border-radius: .8rem; white-space: pre-wrap; line-height: 1.5; animation: msgSlideUp .34s ease-out both; }
@keyframes msgSlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.msg .ts { font-family: var(--mono); font-size: .68rem; color: var(--faint); opacity: .7; }
.msg.user { align-self: flex-end; background: linear-gradient(180deg, #3a2417, #33200f); color: #f2ddc9; margin-left: auto; }
.msg.agent { align-self: flex-start; background: var(--panel-hi); border: 1px solid var(--line); color: var(--ink); }
/* log lines are bullets: words first, tactical timestamp on the right rail */
.msg.status, .msg.tool {
  align-self: stretch; font-size: .8rem; padding: .1rem .2rem .1rem 1rem; font-family: var(--mono);
  position: relative; opacity: .62; transition: opacity .45s ease, color .45s ease;
  display: flex; align-items: baseline; gap: .75rem;
}
.msg .msgText { flex: 1; min-width: 0; }
.msg.status .ts, .msg.tool .ts, .msg.error .ts { margin: 0 0 0 auto; flex: none; }
.msg.status { color: var(--muted); }
.msg.tool { color: var(--rufous-br); }
.msg.status::before, .msg.tool::before { content: "•"; position: absolute; left: .1rem; color: var(--faint); transition: color .45s ease; }
/* recency falls out of :nth-last-child — the eye tracks "now" without reading */
#messages .msg:nth-last-child(2) { opacity: .8; }
#messages .msg:nth-last-child(3) { opacity: .72; }
#messages .msg.status:last-child, #messages .msg.tool:last-child { opacity: 1; }
#messages .msg.status:last-child { color: var(--ink); }
#messages .msg.status:last-child::before, #messages .msg.tool:last-child::before {
  color: var(--rufous-br); animation: bulletPulse 1.8s ease-in-out infinite;
}
@keyframes bulletPulse { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.25); } }
.msg.error { align-self: flex-start; display: flex; align-items: baseline; gap: .75rem; background: #33201c; border: 1px solid #6e352c; color: var(--red); }
/* the hunter is BLOCKED on this one — it out-shouts a fast-moving feed */
.msg.question {
  align-self: flex-start; max-width: 96%; font-weight: 600; color: #f5dfae;
  background: rgba(232, 182, 76, .1); border: 1px solid rgba(232, 182, 76, .55); border-left-width: 3px;
  box-shadow: 0 0 22px -8px rgba(232, 182, 76, .55);
}

/* ── run meter: the cockpit instrument ─────────────────────── */
.runMeter { padding: .9rem 1.2rem .75rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(217, 119, 66, .05), transparent); }
.meterHead { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.meterPhase { font-size: .84rem; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; text-align: left; }
.meterPct { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--rufous-br); flex: none; }
.meterStop {
  flex: none; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  padding: .2rem .55rem; border-radius: 999px; color: var(--faint);
  background: transparent; border: 1px solid var(--line-strong); transition: color .15s, border-color .15s, background .15s;
}
.meterStop:hover:not(:disabled) { color: var(--red); border-color: var(--red); background: rgba(224, 122, 110, .08); }
.meterTrack { position: relative; height: 9px; border-radius: 999px; background: #0e1216; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55); }
/* the fill IS the signature: rufous light wearing the kestrel's tail barring */
.meterFill {
  width: var(--p, 8%); height: 100%; border-radius: 999px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--rufous-deep), var(--rufous) 55%, var(--rufous-br));
  box-shadow: 0 0 12px -2px rgba(217, 119, 66, .8);
  transition: width 1.1s cubic-bezier(.22, .61, .36, 1);
}
.meterFill::after {
  content: ""; position: absolute; inset: 0;
  background: var(--barring);
  opacity: 0; transition: opacity .4s;
}
.runMeter.working .meterFill::after { opacity: .8; animation: barringFlow 1.6s linear infinite; }
@keyframes barringFlow { from { background-position: 0 0; } to { background-position: -32px 0; } }
/* a blurred bloom rides the fill's leading edge — lit from within, not painted on */
.meterTrack::after {
  content: ""; position: absolute; top: 50%; left: var(--p, 8%); width: 14px; height: 14px;
  translate: -50% -50%; border-radius: 50%; pointer-events: none; filter: blur(3px); opacity: 0;
  background: radial-gradient(circle, var(--rufous-br) 0%, transparent 70%);
  transition: left 1.1s cubic-bezier(.22, .61, .36, 1), opacity .4s;
}
.runMeter.working .meterTrack::after { opacity: 1; animation: meterBloom 2s ease-in-out infinite; }
@keyframes meterBloom { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.25; } }
.meterPhases { display: flex; justify-content: space-between; margin-top: .5rem; padding: 0; list-style: none; }
.phaseDot {
  font-family: var(--mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--faint); opacity: .5; transition: color .4s, opacity .4s; display: flex; align-items: center; gap: .3rem;
}
.phaseDot::before { content: ""; width: .38rem; height: .38rem; border-radius: 999px; background: currentColor; }
.phaseDot.on { color: var(--rufous-br); opacity: 1; }
.phaseDot.now { color: var(--rufous-br); text-shadow: 0 0 10px rgba(235, 146, 96, .55); }
.phaseDot.now::before { box-shadow: 0 0 0 3px rgba(235, 146, 96, .2); animation: bulletPulse 1.8s ease-in-out infinite; }
.meterFoot { display: flex; align-items: baseline; gap: .75rem; margin-top: .45rem; }
.meterStats { font-family: var(--mono); font-size: .68rem; color: var(--faint); flex: 1; min-width: 0; text-align: left; letter-spacing: .04em; }
.meterPulse { font-family: var(--mono); font-size: .66rem; color: var(--faint); flex: none; letter-spacing: .03em; transition: color .4s; }
.meterPulse.live { color: var(--rufous-br); }
.meterPulse.quiet { color: var(--muted); }
.meterPulse.stalled { color: var(--gold); }

/* ── section bars (accordion heads) ────────────────────────── */
.sectionBar {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px;
  transition: background .15s, border-color .15s; text-align: left;
}
.sectionBar:hover { background: var(--panel-hi); }
.sectionBar:hover .chevBar { color: var(--rufous-br); }
.sectionBarLeft { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sectionGlyph { flex: none; }
.sectionTitle { font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.countTag {
  font-family: var(--mono); font-size: .68rem; padding: .22rem .6rem; border-radius: 999px;
  background: var(--panel-hi2); color: var(--muted); white-space: nowrap;
}
.chevBar { color: var(--faint); transition: transform .2s, color .2s; flex: none; }
.sectionBar.open .chevBar { transform: rotate(180deg); color: var(--rufous-br); }
.cardStack { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }

/* ── empty states — radar rings, drawn not downloaded ──────── */
.empty {
  text-align: center; color: var(--muted); font-size: .9rem;
  padding: 7.5rem 1rem 1.6rem; border: 1px dashed var(--line-strong); border-radius: 12px;
  position: relative; overflow: hidden; background: var(--panel);
}
.empty::before { /* concentric radar rings in dusk rufous */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 2.6rem, transparent 0 26px, rgba(217, 119, 66, .1) 26px 27.5px);
  -webkit-mask-image: radial-gradient(circle at 50% 2.6rem, #000 0, transparent 72%);
          mask-image: radial-gradient(circle at 50% 2.6rem, #000 0, transparent 72%);
}
.empty::after { /* the bird on station */
  content: "🦅"; position: absolute; top: 1.7rem; left: 50%; translate: -50% 0;
  font-size: 1.9rem; filter: sepia(1) saturate(2.4) hue-rotate(-18deg) opacity(.85);
}

/* ── connections list ──────────────────────────────────────── */
.connListEl { margin-top: 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
#connList .conn {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: .85rem; color: var(--ink);
}
#connList .conn.scanning { color: var(--muted); }
#connList .conn.launched { color: var(--rufous-br); border-color: rgba(217, 119, 66, .4); }
#connList .conn.err { color: var(--red); background: #2c1b17; border-color: #6e352c; }
.conn .cdot { width: .55rem; height: .55rem; border-radius: 999px; flex: none; }
.conn .cdot.on { background: var(--ok); box-shadow: 0 0 6px rgba(150, 199, 149, .8); }
.conn .cdot.off { background: #4a545f; }
.conn .cname { font-weight: 600; }
.conn .cstate { color: var(--faint); font-size: .78rem; font-family: var(--mono); }
.conn .cstate.on { color: var(--ok); }
.conn code { background: var(--panel-hi2); padding: .05rem .35rem; border-radius: .3rem; font-family: var(--mono); font-size: .85em; }
.conn-connect {
  margin-left: auto; padding: .25rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: transparent; border: 1px solid var(--line-strong); color: var(--rufous-br);
}
.conn-connect:hover { background: rgba(217, 119, 66, .1); border-color: rgba(217, 119, 66, .45); }

/* ── shared card chrome (hunts + leads) ────────────────────── */
.hunt, .lead {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; transition: border-color .18s, box-shadow .18s;
}
.hunt:hover, .lead:hover { border-color: var(--line-strong); }
.hunt.open, .lead.open { border-color: rgba(217, 119, 66, .45); box-shadow: 0 0 0 1px rgba(217, 119, 66, .18), 0 8px 28px -14px rgba(0, 0, 0, .7); }
.huntHead, .leadHead { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.1rem; cursor: pointer; user-select: none; }
.huntHead .chev, .leadHead .chev { font-size: .7rem; color: var(--faint); transition: transform .2s; flex: none; }
.hunt.open .huntHead .chev, .lead.open .leadHead .chev { transform: rotate(90deg); color: var(--rufous-br); }
.huntHead .name, .leadHead .title {
  font-weight: 640; color: var(--ink); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.huntHead .meta, .meta { color: var(--muted); font-size: .75rem; font-family: var(--mono); }
.badge {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .18rem .6rem;
  border-radius: 999px; background: var(--panel-hi2); color: var(--muted); flex: none; font-family: var(--mono);
}
.badge.hunting { color: var(--on-rufous); background: var(--rufous-br); display: inline-flex; align-items: center; gap: .35rem; }
.badge.hunting::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: var(--on-rufous); animation: pulseDot 1.2s infinite; }
.parkedNote { opacity: .55; font-size: .92em; margin-left: .35em; }

.huntBody { border-top: 1px solid var(--line); padding: .9rem 1.1rem 1.1rem; }
.huntControls { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.huntControls select, .statusSel, .sched {
  background: var(--panel-hi); color: var(--ink); border: 1px solid var(--line);
  border-radius: .5rem; padding: .3rem .55rem; font-size: .8rem;
}
.huntControls select:hover, .statusSel:hover, .sched:hover { border-color: var(--line-strong); }
.hunt .leads { display: flex; flex-direction: column; gap: .7rem; }
.exportGroup { display: inline-flex; align-items: center; gap: .3rem; }
.exportGroup a.csv {
  font-size: .72rem; padding: .2rem .55rem; border-radius: .45rem; background: var(--panel-hi);
  border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-family: var(--mono);
}
.exportGroup a.csv:hover { color: var(--rufous-br); border-color: rgba(217, 119, 66, .45); }

/* ── lead head meta (src / stat / age / serv / conf) ───────── */
.leadHead .src { color: var(--faint); font-size: .74rem; font-family: var(--mono); flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leadHead .age { color: var(--faint); font-size: .72rem; font-family: var(--mono); flex: none; }
.leadHead .conf { font-size: .78rem; font-weight: 700; font-family: var(--mono); flex: none; display: inline-flex; align-items: center; gap: .35rem; color: var(--faint); }
.leadHead .conf::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; box-shadow: 0 0 8px -1px currentColor; }
.leadHead .conf.hi { color: var(--rufous-br); }
.leadHead .conf.mid { color: var(--gold); }
.leadHead .conf.lo { color: var(--faint); }
.leadHead .serv {
  font-size: .7rem; font-weight: 700; font-family: var(--mono); flex: none;
  padding: .12rem .45rem; border-radius: 999px; border: 1px solid currentColor; color: var(--faint); opacity: .95;
}
.leadHead .serv.hi { color: var(--rufous-br); background: rgba(217, 119, 66, .1); }
.leadHead .serv.mid { color: var(--gold); background: rgba(232, 182, 76, .08); }
.leadHead .serv.lo { color: var(--faint); background: transparent; }
.stat {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-family: var(--mono);
  padding: .16rem .5rem; border-radius: 999px; flex: none; background: #2a3038; color: var(--muted); border: 1px solid transparent;
}
.stat.contacted { background: rgba(143, 168, 191, .16); color: var(--wing-br); }
.stat.replied { background: rgba(217, 119, 66, .16); color: var(--rufous-br); }
.stat.won { background: rgba(232, 182, 76, .16); color: var(--gold); border-color: rgba(232, 182, 76, .4); }
.stat.dead { background: rgba(224, 122, 110, .1); color: #a98680; }

/* qualification chips */
.leadChips { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 1.1rem .8rem 2.05rem; }
.lead:not(.open) .leadChips:empty { display: none; }
.lchip {
  font-size: .7rem; font-weight: 600; padding: .16rem .55rem; border-radius: 999px;
  background: var(--panel-hi2); color: var(--ink); border: 1px solid var(--line-strong);
  transition: border-color .12s ease, background .12s ease;
}
.lchip:hover { border-color: var(--rufous); background: rgba(217, 119, 66, .1); }
.lchip.segment {
  background: rgba(217, 119, 66, .12); color: var(--rufous-br); border-color: rgba(217, 119, 66, .4);
  display: inline-flex; align-items: center; gap: .3rem;
}
.lchip.segment::before { content: "◆"; font-size: .6em; }

/* ── lead detail ───────────────────────────────────────────── */
.leadDetail { display: none; padding: .2rem 1.1rem 1.1rem 2.05rem; flex-direction: column; gap: .7rem; }
.lead.open .leadDetail { display: flex; animation: detailIn .16s ease-out both; }
@keyframes detailIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.leadDetail .dates { color: var(--muted); font-size: .72rem; font-family: var(--mono); }
.leadDetail .reason::before, .leadDetail .contact:not(:empty)::before {
  display: block; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--mono); color: var(--rufous-br); opacity: .8; margin-bottom: .3rem;
}
.leadDetail .reason::before { content: "Why it qualified"; }
.leadDetail .reason {
  color: #fff; font-size: .9rem; line-height: 1.55; font-weight: 500;
  border-left: 2px solid var(--rufous); padding-left: .7rem;
}
.leadDetail .contact:not(:empty)::before { content: "Contact"; flex-basis: 100%; }
/* contact cells: colour = how you reach them.
   reach (email/phone) = rufous, the money fields · link = slate-blue wing, places to go
   who = bright identity text · where/meta = quiet */
.leadDetail .contact { display: flex; flex-wrap: wrap; gap: .3rem .4rem; font-size: .82rem; }
.cField {
  display: inline-flex; align-items: baseline; gap: .4rem; min-width: 0; max-width: 100%;
  padding: .22rem .55rem; border-radius: .45rem;
  background: var(--panel-hi); border: 1px solid var(--line);
  transition: border-color .12s ease, background .12s ease;
}
.cKey {
  font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); flex: none;
}
.cVal { font-weight: 600; color: var(--ink); word-break: break-word; text-decoration: none; }
.cField.reach { background: rgba(217, 119, 66, .14); border-color: rgba(217, 119, 66, .55); }
.cField.reach .cKey { color: var(--rufous-br); opacity: .95; }
.cField.reach .cVal { color: #ffcfae; font-family: var(--mono); }
.cField.reach:hover { background: rgba(217, 119, 66, .22); border-color: var(--rufous); }
.cField.link { background: rgba(143, 168, 191, .1); border-color: rgba(143, 168, 191, .38); }
.cField.link .cKey { color: var(--wing); opacity: .85; }
.cField.link .cVal { color: var(--wing-br); font-family: var(--mono); font-size: .78rem; }
.cField.link:hover { background: rgba(143, 168, 191, .18); border-color: var(--wing); }
.cField.link .cVal:hover { text-decoration: underline; }
.cField.who { background: var(--panel-hi2); border-color: var(--line-strong); }
.cField.who .cVal { color: #fff; }
.cField.where .cVal { color: var(--gold); }
.cField.meta { background: transparent; }
.cField.meta .cVal { color: var(--muted); font-weight: 500; font-family: var(--mono); font-size: .76rem; }
.leadDetail .body {
  color: var(--ink); font-size: .84rem; line-height: 1.55; cursor: pointer;
  max-height: 4.4em; overflow: hidden; border-left: 2px solid var(--line-strong); padding-left: .7rem;
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
}
.leadDetail .body.full { max-height: none; -webkit-mask-image: none; mask-image: none; }
.leadDetail .body::before {
  content: "▸ full post"; display: block; font-size: .6rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-family: var(--mono); color: var(--faint); margin-bottom: .25rem; margin-left: -.7rem;
}
.leadDetail .body.full::before { content: "▾ full post"; }
.leadDetail a[href] { color: var(--wing-br); font-size: .78rem; font-family: var(--mono); word-break: break-all; text-decoration: none; }
.leadDetail a[href]:hover { text-decoration: underline; }

/* palette swatches — the generated site's real colours, inline on the card */
.swatches { display: inline-flex; align-items: center; gap: .18rem; margin-left: .45rem; vertical-align: middle; padding: .15rem .3rem; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.swatch { width: .72rem; height: .72rem; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: transform .12s ease; }
.swatch:hover { transform: scale(1.45); }

/* lead action row */
.leadActions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.leadActions .meta { display: inline-flex; align-items: center; gap: .35rem; }
.leadActions button {
  background: var(--panel-hi); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: .35rem .8rem; font-size: .8rem; font-weight: 500;
}
.leadActions button:hover:not(:disabled) { background: var(--panel-hi2); border-color: var(--line-strong); }
/* the two site-builder actions POP — the money buttons */
.leadActions .previewBtn {
  background: linear-gradient(180deg, var(--rufous-br), var(--rufous-deep)); color: var(--on-rufous);
  border-color: transparent; font-weight: 600; box-shadow: 0 0 14px -4px rgba(217, 119, 66, .55);
}
.leadActions .previewBtn:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 0 20px -2px rgba(217, 119, 66, .8); }

/* preview / proposal state chips */
.previewState, .stitchState { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .78rem; }
.previewProg { color: var(--rufous-br); }
.previewProg::before { content: "◍ "; }
.previewMeta { color: var(--muted); font-family: var(--mono); font-size: .74rem; }
.previewQueued { color: var(--muted); }
.previewQueued::before { content: "⏳ "; }
/* needs_review: distinct from failed (red) — the build completed but the quality gate still
   rejected it after an automatic retry, so this is a "look at it" amber, not an error red. */
.previewReview { color: #e0a83a; }
.previewErr { color: var(--red); }
.propLink, .previewState a, .stitchState a { color: var(--rufous-br); text-decoration: none; font-size: .8rem; font-weight: 600; }
.propLink:hover { text-decoration: underline; }
.proposalState { font-size: .8rem; }
.regenBtn, .regenPremium {
  background: var(--panel-hi); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: .3rem .7rem; font-size: .76rem; font-weight: 500;
}
.regenBtn:hover, .regenPremium:hover { background: var(--panel-hi2); border-color: var(--line-strong); }

/* opener draft */
pre.opener {
  background: var(--panel-hi); border: 1px solid var(--line); border-radius: .6rem;
  padding: .7rem .85rem; font-size: .82rem; line-height: 1.5; color: var(--ink);
  white-space: pre-wrap; font-family: var(--mono); cursor: text;
}

/* ── recent leads: head + tools ────────────────────────────── */
.leadsHead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.leadsTitle { font-family: var(--display); font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.leadsSub { font-size: .82rem; color: var(--faint); margin-top: 2px; }
.exportWrap { position: relative; display: inline-block; }
.exportMenu {
  position: absolute; right: 0; margin-top: 6px; width: 230px; z-index: 30;
  background: var(--panel-hi); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .75); overflow: hidden;
}
.exportMenu a, .exportMenu button {
  display: block; width: 100%; text-align: left; padding: .6rem 1.1rem; font-size: .85rem;
  color: var(--ink); text-decoration: none; background: none; border: none;
}
.exportMenu a:hover, .exportMenu button:hover { background: var(--panel-hi2); }
.exportMenu #deleteAllBtn { color: var(--red); border-top: 1px solid var(--line-strong); }

.leadTools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
/* while the list is open, pin the toolbar under the app header so Search + Collapse never scroll away */
.leadTools.sticky {
  position: sticky; top: 62px; z-index: 20; margin: 0 -8px .7rem; padding: .55rem 8px;
  background: linear-gradient(180deg, var(--ground) 78%, transparent); backdrop-filter: blur(6px);
  border-radius: .6rem;
}
.leadSearchWrap {
  display: flex; align-items: center; gap: .5rem; flex: 1 1 320px; min-width: 240px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem;
  transition: border-color .15s, box-shadow .15s;
}
.leadSearchWrap:focus-within { border-color: rgba(217, 119, 66, .6); box-shadow: var(--focus); }
.searchGlyph { color: var(--faint); }
.leadSearchWrap input { flex: 1; background: transparent; border: none; outline: none; color: var(--ink); font-size: .92rem; }
.leadSearchWrap input::placeholder { color: var(--faint); }
.leadSearchWrap input::-webkit-search-cancel-button { -webkit-appearance: none; }
#leadSearchClear { background: transparent; border: none; color: var(--faint); cursor: pointer; font-size: .9rem; padding: 0 .2rem; }
#leadSearchClear:hover { color: var(--ink); }
.srcPills { display: flex; gap: .35rem; flex-wrap: wrap; }
.srcPill {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .01em; padding: .32rem .6rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: border-color .12s, background .12s, color .12s;
}
.srcPill:hover { border-color: var(--line-strong); color: var(--ink); }
.srcPill.on { background: rgba(217, 119, 66, .14); border-color: rgba(217, 119, 66, .55); color: var(--rufous-br); }
.leadSortWrap {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: .78rem;
}
.leadSortWrap span { color: var(--rufous-br); }
.leadSortWrap select { background: transparent; border: none; color: var(--ink); font-size: .8rem; cursor: pointer; outline: none; }
.leadSortWrap select option { background: var(--panel-hi); color: var(--ink); }
.leadsCollapse {
  margin-left: auto; white-space: nowrap; font-weight: 600; font-size: .82rem; padding: .5rem 1rem;
  border-radius: 999px; background: var(--panel-hi); border: 1px solid var(--line-strong); color: var(--rufous-br);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.leadsCollapse:hover { background: rgba(217, 119, 66, .14); border-color: rgba(217, 119, 66, .55); }
.leadResultNote { color: var(--faint); font-size: .76rem; font-family: var(--mono); margin-bottom: .7rem; min-height: 1em; }
.showAllBtn {
  width: 100%; padding: 1rem; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--panel);
  color: var(--muted); font-size: .9rem; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.showAllBtn:hover { border-color: rgba(217, 119, 66, .55); color: var(--rufous-br); background: var(--panel-hi); }

/* ── how-to-use guide ──────────────────────────────────────── */
.guideBody { margin-top: .8rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; }
.guideStep {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1rem 1rem 1.05rem; overflow: hidden; transition: border-color .18s;
}
.guideStep:hover { border-color: rgba(217, 119, 66, .45); }
.guideStep::before { /* rufous spine */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--rufous), transparent);
}
.guideStep .gnum {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  border-radius: 999px; background: rgba(217, 119, 66, .15); color: var(--rufous-br);
  font-family: var(--mono); font-size: .78rem; font-weight: 700; margin-bottom: .5rem;
}
.guideStep h4 { margin-bottom: .2rem; font-size: .92rem; font-weight: 650; color: var(--ink); }
.guideStep h4 .gicon { margin-right: .35rem; }
.guideStep p { font-size: .82rem; line-height: 1.5; color: var(--muted); }
.guideStep p b { color: var(--rufous-br); font-weight: 600; }
.guideTip { margin-top: .8rem; font-size: .8rem; color: var(--faint); font-family: var(--mono); }

/* ── toast ─────────────────────────────────────────────────── */
#toastBox {
  position: fixed; top: 4.6rem; right: 1.2rem; z-index: 100; max-width: 22rem;
  padding: .85rem 1.1rem; border-radius: .8rem; font-weight: 600; font-size: .92rem; line-height: 1.4;
  background: var(--panel-hi); color: var(--ink); border: 1px solid var(--line-strong);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .75); cursor: pointer;
  transform: translateX(130%); opacity: 0; transition: transform .38s cubic-bezier(.2, .9, .3, 1), opacity .38s;
}
#toastBox.show { transform: translateX(0); opacity: 1; }
#toastBox.good { border-color: rgba(217, 119, 66, .6); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .75), 0 0 26px -6px rgba(217, 119, 66, .45); }
#toastBox.info { color: var(--muted); }

/* ── native dialogs ────────────────────────────────────────── */
dialog {
  margin: auto; /* the global margin reset kills the UA's auto-centering — restore it */
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 1.9rem 1.9rem 1.6rem; max-width: 460px; width: calc(100% - 2rem);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8);
  max-height: calc(100vh - 3rem); overflow-y: auto;
}
dialog form { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(10, 12, 15, .72); backdrop-filter: blur(3px); }
dialog h2 { margin-bottom: .3rem; font-family: var(--display); font-size: 1.3rem; font-weight: 700; }
dialog label { display: block; margin: .9rem 0 0; font-size: .82rem; font-weight: 600; color: var(--muted); }
dialog input {
  display: block; width: 100%; margin-top: .35rem; padding: .6rem .75rem;
  background: #10141a; border: 1px solid var(--line); border-radius: .5rem; color: var(--ink);
}
dialog input:focus { outline: none; border-color: rgba(217, 119, 66, .6); box-shadow: var(--focus); }
dialog input::placeholder { color: var(--faint); }
.hint { color: var(--muted); font-size: .8rem; line-height: 1.5; margin-top: .3rem; }
.credStatus { display: flex; flex-direction: column; gap: .3rem; margin: .9rem 0 .2rem; }
.credRow {
  display: grid; grid-template-columns: 1.1rem auto 1fr; align-items: baseline; gap: .5rem;
  padding: .4rem .6rem; border-radius: .5rem; background: var(--panel-hi); border: 1px solid var(--line); font-size: .8rem;
}
.credRow .credIcon { font-weight: 700; }
.credRow.ok .credIcon { color: var(--ok); }
.credRow.off { opacity: .8; }
.credRow.off .credIcon { color: var(--faint); }
.credRow .credLabel { font-weight: 600; color: var(--ink); }
.credRow .credDetail { color: var(--muted); font-family: var(--mono); font-size: .72rem; text-align: right; word-break: break-word; }
.opt { color: var(--faint); font-weight: 400; }
.row { display: flex; gap: .6rem; margin-top: 1.3rem; }
.row button {
  flex: 1; padding: .6rem 1rem; border-radius: .6rem; border: 1px solid transparent; font-weight: 600;
  background: linear-gradient(180deg, var(--rufous-br), var(--rufous-deep)); color: var(--on-rufous);
}
.row button.ghost { background: var(--panel-hi); color: var(--ink); border-color: var(--line); }
.row button.ghost:hover { background: var(--panel-hi2); }
.row button.danger { background: #37201c; color: var(--red); border-color: #6e352c; }
.row button.danger:hover { background: #45261f; }

/* ── reduced motion — every animation stands down ──────────── */
@media (prefers-reduced-motion: reduce) {
  .msg, .composerBanner { animation: none; }
  #messages { scroll-behavior: auto; }
  .runMeter.working .meterFill::after, .phaseDot.now::before, .badge.hunting::before,
  .activityBox.live .liveWrap::before, .cmdMic.rec,
  #messages .msg.status:last-child::before, #messages .msg.tool:last-child::before { animation: none; }
  .meterFill, .meterTrack::after { transition: none; }
}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page { padding: 24px 16px; }
  .topbarInner { padding: 10px 14px; }
  .brandName { font-size: 1.05rem; }
  #scanChromeBtn { white-space: nowrap; padding: .35rem .7rem; font-size: .78rem; }
  .heroTitle { font-size: 1.7rem; }
  .leadTools { gap: .5rem; }
  .srcPills { max-width: 100%; overflow-x: auto; }
  /* the 4 source chips can't shrink — wrap them onto their own line inside the summary pill,
     otherwise they shove the page 129px sideways at phone width */
  .activitySummary { flex-wrap: wrap; }
  #chips.chipRow { flex: 1 1 100%; }
  .huntHead, .leadHead { flex-wrap: wrap; gap: .45rem .6rem; }
  .leadHead .title, .huntHead .name { flex-basis: 100%; }
  .leadHead .src { max-width: 60%; }
  #latestMsg { max-width: 58vw; }
  .leadChips, .leadDetail { padding-left: 1.1rem; }
  .leadActions button, .leadActions .previewBtn { flex: 1 1 auto; text-align: center; }
  .huntControls { gap: .4rem; }
  #toastBox { left: 1rem; right: 1rem; max-width: none; }
}