:root {
  --bg: #f6f8fa;
  --panel: #ffffff;
  --ink: #1f2328;
  --muted: #66707a;
  --line: #e2e6ea;
  /* Primary. #0078d4 rather than the breadcrumb's lighter #6dadde because this token
     also paints SOLID buttons (Continue, Send) whose labels are white: #6dadde gives
     white 2.42:1, #0078d4 gives 4.53:1. The lighter blue is the hover tone below. */
  --accent: #0078d4;
  --accent-soft: #eaf4fc;
  /* Hover / focus affordance. Matches the breadcrumb's current-page blue rather than
     the orange accent, whose soft tint reads as peach.
       --hover       borders and outlines
       --hover-soft  fills
       --hover-text  labels
     NOTE: #6dadde on white is 2.42:1 — below the 4.5:1 WCAG AA minimum for text.
     Borders and fills are fine at that contrast; labels are not. If hover text is
     hard to read, set --hover-text to #2c7fb0 (4.52:1), which is the same hue,
     darkened. Nothing else needs to change. */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --hover: #6dadde;
  --hover-soft: #eef6fc;
  --hover-text: #6dadde;
  --ok: #15803d;
  --okbg: #e7f5ec;
  --warn: #b45309;
  --warnbg: #fdf2e2;
  --bad: #b91c1c;
  --badbg: #fbe9e9;
  --info: #475569;
  --infobg: #eef1f5;
  --radius: 12px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  /* Inter is loaded in index.html. The stack degrades to the platform UI face, which is
     what the old rule got anyway: 'Poppins' was never loaded, and "sans-serif" was quoted,
     making it an invalid family name rather than the generic keyword. */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'ss01' 1;  /* single-storey l, disambiguated I/l/1 */
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;   /* mobile: exclude the browser chrome */
  overflow: hidden; /* the PAGE never scrolls — only .messages does */
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    transition: right 0.3s ease;
    background-color: #564dc0;
    height: 40px;
    flex: 0 0 40px;   /* never compresses, never scrolls away */
}

.name-container {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
}

.align-items-stretch {
  align-items: stretch !important;
}

.container-fluid {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

.name-logo {
  font-weight: 600 !important;
  font-size: calc(1.1rem + 0.2vw) !important;
  color: #fff;
  align-items: center !important;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  height: 40px;
  flex: 0 0 40px;   /* fixed band; sticky no longer needed */
  z-index: 30;
}
.brand { display: flex; gap: 10px; align-items: center; }
.logo { color: var(--accent); font-size: 22px; }
.title {
    font-weight: 450;
    font-size: 14px;
    border-radius: 2px;
    padding: 6px 8px;
    text-decoration: none;
    white-space: nowrap;
    outline: 0;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    overflow: hidden;
    gap: 5px;
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.crumb-link    { color: #A4A5B8; }  /* parent — matches "Home" */
.grt-logo      { color: #96B5CC; }  /* chevron picks this up via fill:currentColor */
.crumb-current { color: #6DADDE; }

.grt-logo {
  display: inline-flex;
  align-items: center;
  margin: 0 0.35em;
  color: #888; /* controls the chevron color via currentColor */
}

.subtitle { font-size: 12px; color: var(--muted); }
.topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Scope + classification, relocated from under the composer. Both values are
   summarised (see scopeLabelShort), so nothing needs truncating — and nothing should,
   since the ⓘ popover has to escape the 40px band. */
.topbar-context {
  display: flex; align-items: center;
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap;
}
.topbar-context:empty { display: none; }
.topbar-context #scopeHint,
.topbar-context #classHint { flex: 0 0 auto; display: inline-flex; align-items: center; }

/* One straight line. Separation is a middot in the markup, not a border. */
.topbar-context #scopeHint:not(:empty) + #classHint:not(:empty) { margin-left: 16px; }

/* Values are ink. Blue is reserved for links, so a value never looks clickable.
   The margin is the space after "Scope:" / "Classification:" — the markup has no
   literal space there, since the separators are drawn in CSS. */
.topbar-context strong { color: var(--ink); font-weight: 600; margin-left: 4px; }
.topbar-context .hint-count { color: var(--muted); font-weight: 400; }
.topbar-context .hint-sep { color: var(--line); margin: 0 5px; }
.topbar-context a { color: var(--accent); text-decoration: none; }
.topbar-context a:hover { color: var(--hover-text); text-decoration: underline; }

/* ---------- ⓘ affordance + tooltip ---------- */
.hint-info {
  position: relative; display: inline-flex; align-items: center;
  margin-left: 5px; flex: 0 0 auto; cursor: help; outline: none;
}
.hint-i {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex: 0 0 15px;
  border: 1px solid var(--line); border-radius: 999px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-size: 10px; line-height: 1;
  color: var(--muted); background: var(--panel);
  transition: color .15s, border-color .15s;
}
.hint-info:hover .hint-i,
.hint-info:focus-visible .hint-i { border-color: var(--hover); color: var(--accent); }

/* Anchored to the icon's right edge so it opens leftward — both hints live near the
   right of the topbar, and a centred popover would clip. Each entry stays on one line. */
.hint-tip {
  position: absolute; top: calc(100% + 8px); right: -4px; left: auto; z-index: 40;
  display: none;
  padding: 8px 12px;
  background: var(--ink); color: #fff;
  border-radius: 8px;
  font-size: 11.5px; line-height: 1.7; font-weight: 400;
  white-space: nowrap; text-align: left;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.hint-info:hover .hint-tip,
.hint-info:focus-visible .hint-tip { display: block; }
/* little arrow */
.hint-tip::before {
  content: ""; position: absolute; bottom: 100%; right: 8px;
  border: 5px solid transparent; border-bottom-color: var(--ink);
}
/* Budget chip — sits immediately before the report button. */
.budget-chip {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 600;
  color: var(--ok); background: var(--okbg);
  border: 1px solid #bfe3cb; border-radius: 999px;
  padding: 3px 10px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.budget-chip.low   { color: var(--warn); background: var(--warnbg); border-color: #f0d9ae; }
.budget-chip.spent { color: var(--bad);  background: var(--badbg);  border-color: #f0c9c9; }
.budget-chip.hidden { display: none; }

/* Shown once, in-chat, when the balance hits zero. */
.budget-notice {
  border: 1px solid #f0c9c9; background: var(--badbg); border-radius: var(--radius);
  padding: 12px 14px;
}
.budget-notice strong { color: var(--bad); display: block; margin-bottom: 4px; }
.budget-notice p { margin: 0; font-size: 13px; color: var(--ink); }

.topbar-right .report-btn { height: 28px; padding: 0 10px; font-size: 12px; flex: 0 0 auto; background: var(--accent);
    color: #fff; }

/* Session tokens now live inside the ⋯ menu. */
.top-menu .token-meter { padding: 6px 10px; }

@media (max-width: 900px) { .topbar-context { display: none; } }
.menu-wrap { position: relative; }
.meatball-btn {
  border: 1px solid var(--line); background: var(--panel); border-radius: 8px;
  padding: 4px 10px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted);
}
.meatball-btn:hover, .meatball-btn[aria-expanded="true"] { border-color: var(--hover); color: var(--hover-text); }
.top-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; min-width: 240px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column; gap: 2px;
}
.top-menu.hidden { display: none; }
.menu-item {
  border: none; background: transparent; border-radius: 6px; text-align: left;
  padding: 8px 10px; cursor: pointer; font-size: 13px; color: var(--ink);
}
.menu-item:hover { background: var(--hover-soft); color: var(--hover-text); }
.menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
.top-menu .status { padding: 6px 10px; }
.status { font-size: 12px; color: var(--muted); }
.status.ok { color: var(--ok); }
.status.bad { color: var(--bad); }
.token-meter { font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.msgmeta { font-size: 11.5px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* Truncation / dropped-stream recovery bar under an assistant answer. */
.continuation:empty { display: none; }
.continuation {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line);
  border-radius: 8px; background: var(--warnbg);
}
.cont-note { font-size: 12px; color: var(--warn); }
.cont-note.err { color: var(--bad); }
.cont-btn {
  border: 1px solid var(--accent); background: var(--panel); color: var(--accent);
  border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
}
/* Same reason as .send-btn svg: an inline <svg> aligns to the text baseline and rides high. */
.cont-btn svg { display: block; flex: 0 0 auto; }
.cont-btn:hover { background: var(--hover-soft); }

/* The scroll chain: .layout > .chat > .messages. Each ancestor needs min-height:0,
   otherwise a flex item refuses to shrink below its content and the scrollbar
   migrates back up to the page. */
.layout { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; }
/* .chat is full-bleed so that .messages' scrollbar lands on the window edge, not on
   a centred column edge. The 860px reading width is applied to the CONTENT instead. */
.chat { width: 100%; max-width: none; display: flex; flex-direction: column; min-height: 0; }

.messages {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 24px 18px 8px;
}

/* ---------- one slim scrollbar, applied to every scroll surface ----------
   Firefox uses scrollbar-width/-color; WebKit gets a trackless channel with the
   arrow buttons removed. The transparent border + background-clip insets the
   thumb so it reads as a thin pill rather than filling the channel. */
.messages,
textarea#input,
.modal-body,
.report-summary,
#findingsWrap,
.table-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(31, 35, 40, 0.25) transparent;
}
.messages::-webkit-scrollbar,
textarea#input::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.report-summary::-webkit-scrollbar,
#findingsWrap::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }

.messages::-webkit-scrollbar-track,
textarea#input::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.report-summary::-webkit-scrollbar-track,
#findingsWrap::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track { background: transparent; }

.messages::-webkit-scrollbar-button,
textarea#input::-webkit-scrollbar-button,
.modal-body::-webkit-scrollbar-button,
.report-summary::-webkit-scrollbar-button,
#findingsWrap::-webkit-scrollbar-button,
.table-wrap::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

.messages::-webkit-scrollbar-thumb,
textarea#input::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.report-summary::-webkit-scrollbar-thumb,
#findingsWrap::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: rgba(31, 35, 40, 0.22);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.messages::-webkit-scrollbar-thumb:hover,
textarea#input::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.report-summary::-webkit-scrollbar-thumb:hover,
#findingsWrap::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 35, 40, 0.4);
  background-clip: content-box;
}
.messages::-webkit-scrollbar-corner,
.table-wrap::-webkit-scrollbar-corner { background: transparent; }
.welcome { max-width: 680px; margin: 6vh auto 0; text-align: center; color: var(--muted); }
.welcome h1 { color: var(--ink); font-size: 26px; margin-bottom: 6px; }
.suggestions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
/* The starter questions are hidden while the scope / classification gates run, then
   re-rendered below them by showStarters(). */
.welcome.gating .suggestions { display: none; }
.chip-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 8px 12px; border-radius: 999px; cursor: pointer; font-size: 13px;
}
.chip-btn:hover { border-color: var(--hover); color: var(--hover-text); }

/* ============================================================
   CHAT TRANSCRIPT — conversational restyle
   Append this to the END of styles.css (it intentionally
   overrides the earlier .msg rules).
   ============================================================ */

/* --- 1. Drop the "You" / "Assistant" labels and the user avatar ------- */
.msg .role { display: none; }
.msg.user .avatar { display: none; }

/* The assistant keeps a mark: a small sparkle to the left of every reply.
   app.js renders <div class="avatar">AI</div>; the text is suppressed and the
   glyph is painted as a mask so it inherits the accent colour. */
.msg.assistant { display: flex; align-items: flex-start; gap: 10px; }
.msg.assistant .bubble { flex: 1 1 auto; min-width: 0; }
/* The chip. The glyph itself lives in ::before — masking .avatar directly would
   clip its own background away, leaving the sparkle floating on the page. */
.msg.assistant .avatar {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin-top: 1px;          /* optical alignment with the first line of text */
  border-radius: 8px;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  font-size: 0;             /* hide the literal "AI" */
  color: transparent;
  padding-top: 5px;
}

/* The sparkle, painted as a mask so it inherits the accent colour. */
.msg.assistant .avatar::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.9 6.1L20 10l-6.1 1.9L12 18l-1.9-6.1L4 10l6.1-1.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.9 6.1L20 10l-6.1 1.9L12 18l-1.9-6.1L4 10l6.1-1.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* While a reply is streaming, the mark pulses. */
.msg.assistant:has(.typing) .avatar::before,
.msg.assistant:has(.chat-thinking) .avatar::before { animation: sparkle-pulse 1.4s ease-in-out infinite; }
@keyframes sparkle-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .msg.assistant .avatar::before { animation: none !important; }
}

/* --- 2. Turn structure ---------------------------------------------- */
.msg {
  display: block;          /* assistant rows re-enable flex below */
  max-width: 760px;
  margin: 0 auto 26px;
  gap: 0;
}
.msg .bubble { min-width: 0; }

/* --- 3. User turn: a compact bubble, right-aligned ------------------- */
.msg.user { display: flex; justify-content: flex-end; }
.msg.user .bubble { flex: 0 1 auto; max-width: 78%; }
.msg.user .bubble .body {
  background: #eef1f4;
  border: 1px solid var(--line);
  border-radius: 16px 16px 4px 16px;   /* tail notch, bottom-right */
  padding: 10px 15px;
  font-size: 15px;
  line-height: 1.55;
}
.msg.user .msgmeta { text-align: right; }

/* --- 4. Assistant turn: open prose, no box -------------------------- */
.msg.assistant .bubble .body {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.7;
}

/* Interim status line ("Scope set to US. Evaluating your question…") */
.msg.assistant .bubble .body .thinking {
  display: inline-block;
  color: var(--muted);
  font-style: normal;
  font-size: 13.5px;
}

/* --- 5. Markdown typography (the main readability fix) --------------- */
.msg .body > *:first-child { margin-top: 0; }
.msg .body > *:last-child  { margin-bottom: 0; }

.msg .body h1,
.msg .body h2,
.msg .body h3,
.msg .body h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
  margin: 26px 0 10px;
}
.msg .body h1 { font-size: 19px; letter-spacing: -0.01em; }
.msg .body h2 { font-size: 16px; }
.msg .body h3 { font-size: 14px; }
.msg .body h4 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.msg .body p { margin: 0 0 12px; }
.msg .body strong { font-weight: 600; color: var(--ink); }

.msg .body ul,
.msg .body ol { margin: 0 0 12px; padding-left: 22px; }
.msg .body li { margin: 5px 0; line-height: 1.65; }
.msg .body li > ul,
.msg .body li > ol { margin: 5px 0 0; }
.msg .body ol > li::marker { color: var(--muted); font-weight: 600; }

.msg .body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 22px 0;
}

/* Inline code: values like ALLERGEN_EGG = "contains" */
.msg .body code {
  background: #f0f3f6;
  border: 1px solid #dde3e9;
  border-radius: 5px;
  padding: 1.5px 5px;
  font-size: 0.86em;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.msg .body pre {
  background: #f4f7f9;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  overflow: auto;
  margin: 0 0 12px;
}
.msg .body pre code { background: none; border: 0; padding: 0; white-space: pre; }

/* Quoted label text (e.g. the "No Allergens Present" footer) */
.msg .body blockquote {
  margin: 0 0 12px;
  padding: 8px 14px;
  border-left: 3px solid var(--accent-soft);
  background: #f7f9fb;
  border-radius: 0 8px 8px 0;
  color: var(--ink);
}
.msg .body blockquote p:last-child { margin-bottom: 0; }

.msg .body table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 12px;
  font-size: 13px;
}
.msg .body th,
.msg .body td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.msg .body th { background: #f7f9fb; font-weight: 600; }

/* --- 6. Quieter per-message affordances ----------------------------- */
.msg .msgmeta,
.msg .feedback { opacity: 0.45; transition: opacity 0.15s ease-in-out; }
.msg:hover .msgmeta,
.msg:hover .feedback,
.msg .feedback:focus-within { opacity: 1; }

/* --- 7. Breathing room around the transcript ------------------------ */
.messages { padding: 28px 18px 16px; }

@media (max-width: 640px) {
  .msg.user .bubble { max-width: 88%; }
  .msg .body { font-size: 14.5px; }
}

.cites { margin-top: 8px; }
.cites-details > summary { cursor: pointer; color: var(--muted); font-size: 11.5px; user-select: none; }
.cites-details > summary:hover { color: var(--hover-text); }
.cites-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cite-chip {
  font-size: 11.5px; border: 1px solid var(--line); background: var(--panel);
  padding: 3px 9px; border-radius: 999px; cursor: pointer; color: var(--muted);
}
.cite-chip:hover { border-color: var(--hover); color: var(--hover-text); }
.cite-score { font-variant-numeric: tabular-nums; font-weight: 600; padding: 0 5px; border-radius: 999px; font-size: 10.5px; margin-left: 2px; }
.cite-score.lvl-cited { background: var(--okbg); color: var(--ok); }
.cite-score.lvl-high { background: var(--accent-soft); color: var(--accent); }
.cite-score.lvl-medium { background: #fff7e6; color: #92660b; }
.cite-score.lvl-low { background: var(--infobg); color: var(--info); }
.cite-score.lvl-none { background: var(--infobg); color: var(--info); }
.cite-chip.via-link { border-style: dashed; }
.cite-link-mark { font-size: 10px; }

/* Retrieval transparency ("Why these sources?") */
.retrieval:empty { display: none; }
.retrieval-details { margin-top: 6px; font-size: 12px; }
.retrieval-details > summary { cursor: pointer; color: var(--muted); font-size: 11.5px; user-select: none; }
.retrieval-details > summary:hover { color: var(--hover-text); }
.rt-list { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 5px; }
.rt-row { display: grid; grid-template-columns: minmax(120px, 1.6fr) auto 90px 44px minmax(0, 1.4fr); align-items: center; gap: 8px; }
.rt-title { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-origin { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.rt-search { background: var(--accent-soft); color: var(--accent); }
.rt-pin { background: var(--warnbg); color: var(--warn); }
.rt-link { background: var(--infobg); color: var(--info); }
.rt-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.rt-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.rt-score { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted); text-align: right; }
.rt-terms { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-note { margin-top: 6px; font-size: 10.5px; line-height: 1.4; }
@media (max-width: 640px) { .rt-row { grid-template-columns: 1fr auto; } .rt-bar, .rt-score, .rt-terms { display: none; } }

a.cite { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); cursor: pointer; }
a.lexlink { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); white-space: nowrap; }
a.lexlink::after { content: "↗"; font-size: 0.85em; margin-left: 1px; vertical-align: super; }

/* Scope clarifier (in-chat clarifying step) */
/* Open: the card fills the bubble, so Continue's flex-end lands on the message's right
   edge rather than wherever the widest chip row happens to end. */
.scope-clarify {
  display: block;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
/* Collapsed: one muted line, so shrink to the text and lose some of the air.
   The .collapsed class is set by app.js; the :has() rule is a belt-and-braces fallback. */
.scope-clarify.collapsed,
.scope-clarify:has(> .muted:only-child) {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 5px 14px;
}
.scope-q { font-size: 14px; margin-bottom: 12px; }

/* Each regime family is its own block, so a regime and its overlays never sit
   on the same visual row. */
.scope-group { margin-bottom: 14px; }
.scope-group:last-of-type { margin-bottom: 10px; }
.scope-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin-bottom: 7px;
}

.scope-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 0; }
.scope-chip {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 6px 13px; border-radius: 999px; cursor: pointer; font-size: 13px; user-select: none;
}
.scope-chip[data-cc]:hover { border-color: var(--hover); }
.scope-chip.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.scope-chip.sel::before { content: "\2713 "; }
.scope-chip.locked { background: var(--okbg); color: var(--ok); border-color: #bfe3cb; cursor: default; }

/* No KB coverage yet: visible (so the roadmap is legible) but inert. Tooltip explains. */
.scope-chip.unavailable,
.sub-chip.unavailable {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
  background: var(--panel);
  color: var(--muted);
}
.scope-chip.unavailable:hover,
.sub-chip.unavailable:hover { border-color: var(--line); color: var(--muted); }
.scope-chip.unavailable::before,
.sub-chip.unavailable::before { content: none; }
.scope-actions .ghost-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Nested overlay rows: EU member states under "EU baseline", UK nations under "UK". */
.subscope {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 8px 0 0 14px;                 /* indent: reads as "belongs to the chip above" */
  padding: 9px 12px;
  background: #f7f9fb;
  border: 1px dashed var(--line);
  border-left: 2px solid var(--accent-soft);
  border-radius: 0 10px 10px 0;
}
.subscope.hidden { display: none; }
.sub-label { font-size: 11.5px; color: var(--muted); margin-right: 4px; flex: 0 0 auto; }
.sub-chip {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 4px 11px; border-radius: 999px; cursor: pointer; font-size: 12px; user-select: none;
}
.sub-chip:hover { border-color: var(--hover); }
.sub-chip.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sub-chip.sel::before { content: "\2713 "; }
/* "All member states" / "All UK" read as controls, not jurisdictions. */
.sub-chip[data-eu="ALL"], .sub-chip[data-uk="ALL"] { font-weight: 600; }

/* Northern Ireland is part of the UK, but follows live EU law under the Windsor
   Framework rather than assimilated GB law — a separate baseline, so it sits
   after a divider rather than beside the GB nations. */
.sub-sep {
  width: 1px; align-self: stretch; min-height: 20px;
  background: var(--line); margin: 0 4px;
}
.sub-chip-ni { border-style: dashed; }
.sub-chip-ni.sel { border-style: solid; }

/* Actions stack: label, then the preset row, then Continue on its own line. */
.scope-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.scope-presets-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
}
.scope-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.scope-actions .ghost-btn { padding: 5px 11px; font-size: 12.5px; }
.scope-actions .send-btn {
  width: auto; height: 32px; padding: 0 14px 0 16px;   /* trims the optical gap after the arrow */
  align-self: flex-end;      /* own line, right edge */
  margin-top: 2px;
}
.scope-actions .send-btn:disabled { opacity: 0.45; cursor: default; filter: none; }
.scope-tip { font-size: 11.5px; color: var(--muted); margin-top: 10px; }

@media (max-width: 640px) {
  .subscope { margin-left: 0; border-left-width: 1px; border-radius: 10px; }
  .scope-actions .send-btn { align-self: stretch; width: 100%; margin-top: 6px; }
}

/* Product-classification chooser (in-chat disambiguation) */
.class-opts { display: flex; flex-direction: column; gap: 8px; margin: 4px 0; }
.class-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 9px 12px; cursor: pointer; }
.class-opt:hover { border-color: var(--hover); background: var(--hover-soft); }
.class-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.class-opt:hover .class-label { color: var(--hover-text); }
.class-detail { font-size: 11.5px; color: var(--muted); }
/* Per-regime classification groups (one block per jurisdiction, e.g. EU + US). */
.class-group { margin-bottom: 14px; }
.class-group:last-of-type { margin-bottom: 6px; }
.class-regime { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 6px; }
.class-opt.selected { border-color: var(--accent); background: var(--accent-soft); }
.class-opt.selected .class-label { color: var(--accent); }
.class-opt.selected .class-label::after { content: ' ✓'; }
.class-opt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.class-conf { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.class-product { font-size: 13px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.class-product-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-right: 6px; }
.class-opt-right { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.class-rec { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.class-opt-rec { border-color: var(--accent); }


.followups { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.followups-label { width: 100%; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.chip-btn.followup { font-size: 12.5px; text-align: left; }

/* Composer */
.composer { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--bg); padding: 10px 18px 14px; z-index: 20; /* fixed footer band of the chat column */ }
.composer > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.composer-row {
  display: flex; align-items: flex-end; gap: 8px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 8px;
}
textarea#input:disabled { color: var(--muted); cursor: not-allowed; }
textarea#input:disabled::placeholder { color: var(--muted); }

textarea#input {
  flex: 1; border: none; resize: none; outline: none; font: inherit; font-size: 15px;
  background: transparent; color: var(--ink); padding: 6px 4px;
  line-height: 1.5;
  min-height: 34px;      /* exactly one line + padding, so an empty box never gapes */
  max-height: 168px;     /* ~7 lines, then it scrolls */
  overflow-y: auto;
}
.icon-btn, .send-btn, .report-btn {
  border: 1px solid var(--line); background: var(--panel); cursor: pointer; border-radius: 10px;
}
.icon-btn { width: 36px; height: 36px; font-size: 20px; color: var(--muted); }
.icon-btn:hover { border-color: var(--hover); color: var(--hover-text); }
.send-btn {
  width: 36px; height: 36px; font-size: 15px;
  background: var(--accent); color: #fff; border-color: var(--accent);
  /* Centres the glyph in the icon-only Send button AND the label+arrow in Continue. */
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; line-height: 1; padding: 0;
}
/* An inline <svg> aligns to the TEXT BASELINE, which leaves it sitting high. `display:block`
   drops it out of inline layout so the flex centring actually applies. fill="currentColor"
   in the markup means it inherits the button's white. */
.send-btn svg { display: block; flex: 0 0 auto; }
.send-btn:hover { filter: brightness(1.05); }
.report-btn { height: 36px; padding: 0 12px; font-size: 13px; color: var(--ink); white-space: nowrap; border-radius: 0px; }
.report-btn:not(:disabled):hover { border-color: var(--hover); color: black; }
.report-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Running: the button is the progress readout once the modal is closed. */
.report-btn.running { color: #fff; border-color: var(--accent); font-variant-numeric: tabular-nums; }

/* Ready: a pulsing dot until the report is opened. */
.report-btn.ready { color: #fff; border-color: var(--accent); }
.report-btn.ready::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px;
  border-radius: 50%; background: #fff;; vertical-align: middle;
  animation: ready-pulse 1.6s ease-in-out infinite;
}
@keyframes ready-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .report-btn.ready::after { animation: none; } }
.composer-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; text-align: center; }
.composer-row { max-width: 860px; }

/* Overlays */
.overlay { position: fixed; inset: 0; background: rgba(20,20,18,0.45); display: grid; place-items: center; z-index: 50; padding: 24px; }
.overlay.hidden, .hidden { display: none; }
.overlay-panel { background: var(--panel); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden; }
.report-panel { width: min(1600px, 96vw); max-height: 92vh; transition: width .28s ease, max-height .28s ease; }

/* ---------- generating: a compact progress dialog ----------
   No rows yet, so the grid, its header and the coverage appendix are all hidden and the
   panel shrinks to the width of the progress bar. Everything returns in the finally block
   of runReport(), including on error — the error note lands in #reportSummary. */
.report-panel.generating { width: min(520px, 92vw); max-height: none; }
.report-panel.generating #findingsWrap,
.report-panel.generating #coverageWrap { display: none; }
.report-panel.generating .summary-wrap { border-bottom: 0; }
.report-panel.generating .summary-wrap > summary { display: none; }
.report-panel.generating .report-summary { max-height: none; overflow: visible; padding: 20px 22px; }

/* The "you may close this window" notice, shown only while a report is building. */
.report-running-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--accent);
  font-style: italic;
}
.report-running-note strong { font-style: normal; font-weight: 600; }
.report-panel.generating .overlay-head { border-bottom: 0; padding-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .report-panel { transition: none; } }
.overlay-head { flex: 0 0 auto; }
/* The report body is a flex column with TWO independent scroll areas: the summary
   block (.report-summary) and the findings table (#findingsWrap) each scroll on
   their own, so the summary stays readable while the table scrolls (and vice-versa). */
.report-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.modal-panel { width: min(780px, 94vw); max-height: 86vh; }
.overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.overlay-head h2 { margin: 0; font-size: 17px; }
.overlay-actions { display: flex; gap: 8px; }
.ghost-btn { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
.ghost-btn:hover { border-color: var(--hover); color: var(--hover-text); }
.ghost-btn.accent { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ghost-btn.danger { border-color: #f0c9c9; color: var(--bad); background: var(--badbg); }
.ghost-btn.danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); background: #f7dcdc; }
.ghost-btn.danger:disabled { opacity: 0.6; cursor: default; }
.ghost-btn:disabled { opacity: 0.6; cursor: default; }
/* Disabled state for anchor-based controls (e.g. the Feedback log link) — matches
   .ghost-btn:disabled and blocks clicks while a report is generating. */
.ghost-btn.disabled-link { opacity: 0.6; cursor: default; pointer-events: none; }
.ghost-btn.disabled-link:hover { border-color: var(--line); color: inherit; }
.muted { color: var(--muted); font-size: 12px; }

/* Scroll area 1 — the summary / overall verdict, rendered as bullet points. Capped in
   viewport units (a % max-height doesn't resolve against a flex parent, so it wasn't
   enforcing) so the summary scrolls on its own and the findings table stays readable. */
/* Collapsible wrapper for the summary (same interaction as the coverage appendix). */
.summary-wrap { flex: 0 0 auto; border-bottom: 1px solid var(--line); }
.summary-wrap > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); padding: 8px 18px; user-select: none; }
.summary-wrap > summary:hover { color: var(--hover-text); }
.summary-wrap[open] > summary { border-bottom: 1px solid var(--line); }
.report-summary { flex: 0 0 auto; max-height: 30vh; overflow-y: auto; padding: 12px 18px; font-size: 14px; }
.report-summary ul { margin: 4px 0; padding-left: 20px; }
.report-summary li { margin-bottom: 5px; line-height: 1.45; }
.report-summary p { margin: 5px 0; }
.progress { padding: 6px 0; }
.progress-track { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 0.35s ease; }
.progress-label { margin-top: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.table-wrap { overflow: auto; }
/* Scroll area 2 — the findings table (grows to fill the remaining height). */
#findingsWrap { flex: 1 1 auto; min-height: 140px; overflow-y: auto; overflow-x: hidden; }
#coverageWrap { flex: 0 0 auto; }
.coverage .table-wrap { max-height: 40vh; overflow: auto; }
.report-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.report-table th, .report-table td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
.report-table th { position: sticky; top: 0; background: #f7f9fb; font-weight: 600; white-space: nowrap; z-index: 1; }
/* Findings table: fixed layout so all 9 columns always fit the (now wider) popup with NO
   horizontal scrollbar — long text wraps in its cell instead. Column widths are set on the
   header row and sum to 100%. Scoped to #reportTable so the coverage table is unaffected. */
#reportTable { table-layout: fixed; }
#reportTable th { white-space: nowrap; overflow-wrap: normal; }
#reportTable th:nth-child(1) { width: 12%; }   /* Spec element */
#reportTable th:nth-child(2) { width: 9%; }    /* Element value */
#reportTable th:nth-child(3) { width: 9%; }    /* Scope — full regime names */
#reportTable th:nth-child(4) { width: 8%; }    /* Status */
#reportTable th:nth-child(5) { width: 7%; }    /* Severity */
#reportTable th:nth-child(6) { width: 20%; }   /* Reason */
#reportTable th:nth-child(7) { width: 17%; }   /* Recommendation */
#reportTable th:nth-child(8) { width: 11%; }   /* Citation links */
#reportTable th:nth-child(9) { width: 7%; }    /* Review */

/* Break between words, not inside them. `anywhere` shattered BULK_FORMULA into
   "BULK_FORM ULA"; only the citation column has URLs that genuinely need it. */
#reportTable td {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.5;
  padding: 10px 12px;
  vertical-align: top;
}
#reportTable td:nth-child(8) { overflow-wrap: anywhere; }

/* The feedback buttons stack rather than force the column wider. */
#reportTable .cell-fb { min-width: 0; }
#reportTable .cell-fb .feedback { flex-direction: column; align-items: flex-start; gap: 4px; }

/* Row separation: a hairline above each spec element, and a hover tint. */
#reportTable tbody tr:hover > td { background: #f2f7fb; }
#reportTable tbody tr.fam-eu:hover > td,
#reportTable tbody tr.fam-nat:hover > td { background: #eaf1f7; }
#reportTable .badge { white-space: nowrap; }   /* Status/Severity now have room; keep pills intact */

/* Per-jurisdiction finding rows. The EU BASE (main scope) row stays WHITE; each
   nation row is tinted, so the baseline vs. national overlay reads at a glance. */
.report-table tr.fam-eu > td { background: #fff; border-top: 2px solid var(--line); }
.report-table tr.fam-nat > td { background: #f2f7fb; }
.fam-elem { font-weight: 600; }
.fam-val { color: var(--muted); font-variant-numeric: tabular-nums; }
/* These used to hold short codes ("EU BASE"); the server now sends full regime names
   ("United States (FDA, 21 CFR)"), so nowrap made them overflow into the Status column. */
/* Report-grid scope cell ONLY — the bare `.scope-eu` selector also matched the
   "EU only" preset button in the scope chooser, painting it accent-blue as if it
   were the active preset. Active presets get `.accent` from syncPresets() instead. */
td.scope-eu { font-weight: 600; color: var(--accent); white-space: normal; overflow-wrap: break-word; }
.scope-nat { font-weight: 600; color: #2c5f8a; white-space: normal; overflow-wrap: break-word; padding-left: 14px !important; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.s-compliant { background: var(--okbg); color: var(--ok); }
.s-noncompliant { background: var(--badbg); color: var(--bad); }
.s-needsreview { background: var(--warnbg); color: var(--warn); }
.s-notcovered { background: var(--infobg); color: var(--info); }
.sev-critical { background: var(--badbg); color: var(--bad); }
.sev-high { background: var(--warnbg); color: var(--warn); }
.sev-medium { background: #fff7e6; color: #92660b; }
.sev-low { background: var(--infobg); color: var(--info); }
.sev-info { background: var(--infobg); color: var(--info); }

.cell-cites a { color: var(--accent); cursor: pointer; text-decoration: none; font-size: 12px; border-bottom: 1px dotted var(--accent); width: fit-content; }
.cell-cites .cite-item { display: block; margin-bottom: 4px; }
/* ↗ direct link to the external regulation source (opens in a new tab). */
.cite-ext { border-bottom: none !important; font-size: 12px; color: var(--muted) !important; padding: 0 2px; }
.cite-ext:hover { color: var(--hover-text) !important; }

/* Coverage appendix */
.coverage { border-top: 1px solid var(--line); padding: 10px 18px 16px; }
.coverage > summary { cursor: pointer; font-size: 13px; color: var(--ink); padding: 6px 0; }
.coverage-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.cov-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cov-f { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.cov-f.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cov-table { font-size: 12.5px; }
.cov-table code { background: #f0f3f6; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; font-family: var(--font-mono); }
.flag-dot { color: var(--bad); font-size: 11px; }

.source-docs { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.source-docs-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
a.rawlink { display: inline-block; color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); width: fit-content; margin: 0 10px 5px 0; font-size: 13px; cursor: pointer; }
.source-docs a.rawlink { display: block; }
.rawext { font-size: 11px; color: var(--muted); font-weight: 600; }
a.rawlink.rawpdf { border-bottom-style: solid; }

.modal-body { padding: 16px 20px; overflow-y: auto; }
.markdown h1 { font-size: 20px; } .markdown h2 { font-size: 16px; margin-top: 18px; } .markdown h3 { font-size: 14px; }
.markdown table { border-collapse: collapse; } .markdown th, .markdown td { border: 1px solid var(--line); padding: 5px 8px; font-size: 13px; }
.markdown code { background: #f0f3f6; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; font-family: var(--font-mono); }
.markdown pre { background: #f4f7f9; padding: 12px; border-radius: 8px; overflow:auto; }
.markdown a { color: var(--accent); }

.thinking { color: var(--muted); font-style: italic; margin-right: 4px; }
.typing { display: inline-block; width: 8px; height: 14px; background: var(--accent); animation: blink 1s steps(2) infinite; vertical-align: text-bottom; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.error-note { color: var(--bad); font-size: 13px; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; display:inline-block; animation: spin .7s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- feedback / disagreement capture (AI governance) ---------- */
.feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.feedback:empty { display: none; }
.fb-label { font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.fb-btn { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; cursor: pointer; }
.fb-btn:hover { border-color: var(--hover); color: var(--hover-text); }
.fb-done { font-size: 11.5px; color: var(--ok); font-weight: 600; }
.cell-fb { min-width: 140px; }
.cell-fb .feedback { margin-top: 0; }

.fb-panel { width: min(520px, 94vw); max-height: 88vh; }
.fb-body { padding: 14px 18px; overflow-y: auto; }
.fb-what { margin-bottom: 12px; padding: 8px 10px; background: #f7f9fb; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; word-break: break-word; }
.fb-field { margin-bottom: 12px; }
.fb-field > label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.fb-field textarea, .fb-field input[type="text"] { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical; }
.fb-field textarea:focus, .fb-field input:focus { outline: none; border-color: var(--accent); }
.fb-verdict-label { display: inline-block; border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; }
.fb-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1f2328; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 80; }
.toast-action { cursor: pointer; display: flex; align-items: center; gap: 14px; }
.toast-action:hover { background: #2b3138; }
.toast-link { color: #7fc0f0; font-weight: 600; }

/* KB modal and feedback dialog sit above the report/triage overlays */
#modal { z-index: 60; }
#fbOverlay { z-index: 65; }

/* ---------- feedback triage ---------- */
.triage-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.triage-controls label { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.triage-controls input[type="text"], .triage-controls select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; }
.triage-controls input:focus, .triage-controls select:focus { outline: none; border-color: var(--accent); }
.triage-filters { display: flex; gap: 8px; }
.triage-table td { font-size: 12.5px; }
.triage-table .nowrap { white-space: nowrap; }
.cell-res { min-width: 210px; }
.cell-res select, .cell-res input { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; font: inherit; font-size: 12px; margin-bottom: 5px; }
.cell-res .res-save { width: auto; padding: 4px 12px; font-size: 12px; }

/* ---------- validation / provenance badge ---------- */
.kb-validated { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; vertical-align: middle; }
.kv-approved { background: var(--okbg); color: var(--ok); }
.kv-reviewed { background: var(--infobg); color: var(--info); }
.kv-draft { background: var(--warnbg); color: var(--warn); }
.kv-none { background: var(--badbg); color: var(--bad); }

/* ---------- validation sign-off bar (KB modal) ---------- */
.kb-signoff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: #f7f9fb; }
.kb-signoff.hidden { display: none; }
.signoff-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.kb-signoff select, .kb-signoff input[type="text"] { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; }
.kb-signoff input[type="text"] { flex: 1; min-width: 140px; }
.kb-signoff .ghost-btn { padding: 6px 12px; }
#signoffMsg { font-size: 12px; }

/*---------- Thinking indicator ---------- */
.chat-thinking-row {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--fg-muted, #6b6b73);
    font-size: 13px;
}

.chat-thinking {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
}

    .chat-thinking.chat-thinking-inline {
        margin-left: 4px;
        vertical-align: middle;
    }

    .chat-thinking i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--asst-accent, #534AB7);
        animation: chat-bounce 1.2s infinite ease-in-out both;
    }

        .chat-thinking i:nth-child(2) {
            animation-delay: .15s;
        }

        .chat-thinking i:nth-child(3) {
            animation-delay: .3s;
        }

@keyframes chat-bounce {
    0%, 80%, 100% {
        transform: scale(0.5);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ---------- spec gate (blocks the app until the spec resolves) ---------- */
.spec-gate { z-index: 70; }                       /* above report(50), modal(60), fb(65) */
.spec-gate-panel {
  width: min(420px, 92vw);
  padding: 32px 28px;
  text-align: center;
  align-items: center;
}
.spec-gate-spinner { margin-bottom: 18px; }
.spec-gate-spinner .spinner { width: 28px; height: 28px; border-width: 3px; }
.spec-gate-title { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.spec-gate-detail { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.spec-gate-actions { margin-top: 20px; }
.spec-gate[data-state="error"] .spec-gate-title { color: var(--bad); }

/* Grey out and freeze everything behind the gate */
body.spec-gated .header,
body.spec-gated .topbar,
body.spec-gated .layout { filter: grayscale(0.6) opacity(0.55); pointer-events: none; }

/* Breadcrumb states */
.crumb-current[data-state="loading"] { color: var(--muted); }
.crumb-current[data-state="error"]   { color: var(--bad); }

.send-btn svg path { stroke: currentColor; stroke-width: 0.6; }

button { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }