/* witan — multi-tenant civic Q&A. Vanilla CSS, no external assets. */

:root {
  /* Slightly desaturated/darker page bg makes white chat bubbles + the
     full-width composer feel like distinct surfaces floating above. */
  --bg: #e9eef4;
  --surface: #ffffff;
  --surface-alt: #eef2f7;
  --border: #d9dee5;
  --border-strong: #c2cad6;
  --text: #1a2433;
  --text-muted: #5a6675;
  /* witan defaults; per-tenant overrides come from index.html <style> block. */
  --accent: #004BFE;        /* witan blue */
  --accent-dark: #011240;   /* witan navy */
  --accent-soft: #E5EDFF;
  --teal: #00C2C0;          /* witan cyan accent (used sparingly) */
  --user-bg: var(--accent);
  --user-fg: #ffffff;
  --assistant-bg: #ffffff;
  --assistant-fg: #1a2433;
  --shadow: 0 1px 2px rgba(15, 30, 50, 0.05), 0 2px 8px rgba(15, 30, 50, 0.04);
  --shadow-strong: 0 -4px 16px rgba(15, 30, 50, 0.08);
  --shadow-pop: 0 8px 24px rgba(15, 30, 50, 0.18);
  --shadow-tip: 0 6px 24px rgba(15, 30, 50, 0.14), 0 2px 6px rgba(15, 30, 50, 0.06);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  /* Single content width used by header, chat, composer-inner, and footer
     so every horizontal block aligns vertically (no jarring width steps). */
  --max-width: 860px;
  --composer-h: 68px;       /* approximate; chat scroll padding uses this */
  --header-h: 64px;

  /* --- Public Record direction (2026-05-27) ---
     New tokens used by the refreshed UI. Coexist with the legacy tokens
     above during the transition; later tasks gradually retire the legacy
     ones as components are migrated. */
  --paper:        #fbfaf6;
  --paper-edge:   #f3f0e8;
  --rule:         rgba(1, 17, 63, 0.10);
  --rule-strong:  rgba(1, 17, 63, 0.18);
  --ink:          #15181f;
  --ink-soft:     #4a5160;
  --ink-quiet:    #7c8494;
  --navy:         #01113f;
  --blue:         #024bf5;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow-md:    0 10px 30px rgba(1, 17, 63, 0.08), 0 2px 6px rgba(1, 17, 63, 0.04);
  --shell-w:      1180px;
  --rail-w:       300px;
  --gutter:       56px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

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

/* --- Top bar (Public Record direction) ------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(251, 250, 246, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.site-header__inner {
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
}
.site-header__left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.site-header__crest {
  width: 38px; height: 38px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}
.site-header__titles {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
  gap: 1px;
}
.site-header__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--navy);
  letter-spacing: 0.1px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-header__meta {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .site-header__center removed — was redundant with crest + meta line. */
.site-header__nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-header__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font: inherit;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.site-header__nav-btn:hover {
  background: rgba(1, 17, 63, 0.05);
  color: var(--navy);
}
.site-header__nav-btn[aria-expanded="true"] {
  background: var(--navy);
  color: #fff;
}
.site-header__nav-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
/* Ghost variant — lower-emphasis nav action (e.g. "New chat"). */
.site-header__nav-btn--ghost { color: var(--ink-quiet); }
.site-header__nav-btn--ghost:hover { color: var(--navy); }
/* .site-header__divider + .site-header__witan removed — the W mark in the
   top right wasn't pulling its weight; the footer's "powered by witan"
   carries the brand attribution. */

/* --- Layout ---------------------------------------------------------- */
/* Single scroll container = .chat. The composer is sticky bottom:0 of
   .layout__main, so it sits at the bottom of the chat area while messages
   scroll behind it. Footer is OUTSIDE .layout in the body flex column —
   flex:0 so it always shows at the bottom of the viewport without the
   body itself scrolling. */
.layout {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.layout__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  min-height: 0;
}
.layout__columns {
  flex: 1;
  min-height: 0;
  max-width: var(--shell-w);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: var(--gutter);
}

/* --- Source rail -------------------------------------------------- */
.rail {
  position: sticky;
  top: var(--header-h);
  align-self: start;
  /* Leave room for header + composer so content never underlaps either. */
  max-height: calc(100dvh - var(--header-h) - var(--composer-h) - 24px);
  overflow: auto;
  padding: 24px 22px 16px 0;
  /* Soft fade so "more below/above" is obvious. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%);
  scrollbar-width: thin;
}
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-thumb { background: rgba(1, 17, 63, 0.18); border-radius: 3px; }
.rail__empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-quiet);
  margin: 0;
  line-height: 1.5;
}

/* Empty-state "The record" library panel. */
.rail-lib__stats { display: flex; gap: 22px; margin-bottom: 14px; }
.rail-lib__num { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--navy); line-height: 1.1; }
.rail-lib__lbl { font-family: var(--sans); font-size: 11px; color: var(--ink-quiet); }
.rail-lib__browse {
  font-family: var(--sans); font-size: 12px; font-weight: 700; color: #fff; background: var(--blue);
  border: 0; border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
.rail-lib__browse:hover { background: var(--navy); }
.rail-lib__recent { margin-top: 16px; }
.rail-lib__rh { font-family: var(--sans); font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-quiet); font-weight: 700; margin-bottom: 8px; }
.rail-lib__rdoc { font-family: var(--serif); font-size: 13px; color: var(--navy); margin-bottom: 7px; }
.rail-lib__rdoc span { display: block; font-family: var(--sans); font-size: 10px; color: var(--ink-quiet); }
.rail-lib__indexed { font-family: var(--sans); font-size: 10.5px; color: var(--ink-quiet); margin-top: 14px; }

/* Section header — small tracked-caps with a hairline below. */
.rail__section { margin: 0 0 26px; }
.rail__section:last-child { margin-bottom: 0; }
.rail__section-h {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-weight: 700;
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--rule);
}

/* --- Rail collapsible disclosures (Sources / Related) ----------------- */
.rail__head {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  margin: 0 0 6px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--rule-strong);
}
.rail__disclosure {
  border-bottom: 1px solid var(--rule);
}
.rail__disclosure[open] { padding-bottom: 14px; }
.rail__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 12px 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
}
.rail__summary::-webkit-details-marker { display: none; }
.rail__summary-label { flex: 0 0 auto; }
.rail__count {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--blue);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 8px;
}
.rail__summary-chevron {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-quiet);
  transition: transform 0.15s ease;
}
.rail__disclosure[open] .rail__summary-chevron { transform: rotate(90deg); }
.rail__disclosure-body { padding-top: 2px; }

/* Document entry — title (shown once), meta, then wrapping locator chips.
   Borderless; whitespace + a hairline separate entries. */
.source { padding: 13px 0; }
.source:first-child { padding-top: 0; }
.source + .source { border-top: 1px solid var(--rule); }
.source__head { display: flex; align-items: flex-start; gap: 11px; }
.source__headbody { min-width: 0; flex: 1; }
.source__title-link { text-decoration: none; }
.source__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--navy);
  transition: color 0.12s ease;
}
.source__title-link:hover .source__title { color: var(--blue); }
/* Type "pill" leads the title inline (left of the name), one line per source. */
.source__type {
  display: inline-block;
  vertical-align: 1px;
  margin-right: 7px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 8.5px;
  color: var(--ink-soft);
  background: rgba(1, 17, 63, 0.06);
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.source__type--yt { color: #c4302b; background: rgba(196, 48, 43, 0.10); }
.source__date {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-quiet);
  margin-left: 7px;
  white-space: nowrap;
}
.rail__status {
  font-family: var(--sans); font-size: 11.5px; color: var(--ink-quiet);
  margin: 8px 0 2px; font-style: italic;
}

/* Locator chips — small, low-contrast; each is a `.cite` so the popup
   + new-tab open apply. They wrap, so a heavily-cited doc stays calm. */
.source__chips { display: flex; flex-wrap: wrap; gap: 5px 4px; margin-top: 9px; }
.loc-chip {
  font-family: var(--sans); font-size: 12px; color: var(--navy); font-weight: 600;
  padding: 2px 7px; border-radius: 6px; background: rgba(1, 17, 63, 0.045);
  text-decoration: none; font-feature-settings: "tnum" 1; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease; vertical-align: baseline;
}
.loc-chip sup { color: var(--blue); font-weight: 700; font-size: 9px; margin-left: 1px; }
.loc-chip:hover { background: var(--blue); color: #fff; }
.loc-chip:hover sup { color: #cfe0ff; }

/* Per-source "Find similar" — hidden until the entry is hovered/focused. */
.source__similar {
  flex: 0 0 auto; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  color: var(--blue); background: rgba(2, 75, 245, 0.08); border: 0; border-radius: 6px;
  padding: 3px 7px; cursor: pointer; opacity: 0; transition: opacity 0.12s ease; white-space: nowrap;
}
.source:hover .source__similar, .source__similar:focus-visible { opacity: 1; }

/* Related items — quieter title, no chips. */
.source--related .source__title { font-weight: 400; color: var(--ink-soft); }
.source--related:hover .source__title { color: var(--blue); }

/* Related-section actions. */
.rail__showmore, .rail__findmore {
  font-family: var(--sans); font-weight: 700; cursor: pointer; background: #fff;
  border: 1px solid var(--rule); border-radius: 8px; padding: 7px 11px; margin-top: 10px;
  color: var(--navy); font-size: 12px; display: inline-flex; gap: 6px; align-items: center;
}
.rail__showmore { border: 0; background: transparent; color: var(--ink-quiet); padding: 6px 2px; display: block; }
.rail__showmore:hover, .rail__findmore:hover { color: var(--blue); }

/* Video screengrab — small leading thumbnail; gradient fallback if the
   YouTube image fails to load. */
.source__thumb {
  position: relative; flex: 0 0 auto; width: 74px; height: 46px; border-radius: 7px;
  overflow: hidden; background: linear-gradient(135deg, #1d2b4a, #33406a 60%, #4a4f72);
  display: block; text-decoration: none;
}
.source__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.source__thumb-play {
  position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.92);
}
.source--related .source__thumb { width: 46px; height: 29px; }

/* --- Library drawer -------------------------------------------------- */
.library {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(92vw, 440px);
  z-index: 20;
  background: var(--paper);
  border-right: 1px solid var(--rule);
  box-shadow: 0 30px 60px -20px rgba(1,17,63,0.25), 0 10px 24px -8px rgba(1,17,63,0.12);
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
}
.library--open { transform: translateX(0); }
.library[aria-hidden="true"] { pointer-events: none; }
.library--open[aria-hidden="false"] { pointer-events: auto; }

.library__head {
  flex: 0 0 auto;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.library__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.library__title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--navy);
  text-transform: none;
}
.library__close {
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-quiet);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.library__close:hover { color: var(--navy); background: rgba(1,17,63,0.04); }
.library__close:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* Segmented Browse / Search toggle */
.library__tabs {
  display: inline-flex;
  margin-top: 14px;
  padding: 3px;
  background: rgba(1,17,63,0.04);
  border: 1px solid var(--rule);
  border-radius: 8px;
  width: 100%;
}
.library__tab {
  flex: 1;
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.library__tab:hover { color: var(--navy); }
.library__tab--active {
  background: var(--navy);
  color: #fff;
}
.library__tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.library__search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.library__search-row input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.library__search-row input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(1,17,63,0.08);
}
.library__meta {
  margin-top: 8px;
  min-height: 16px;
  display: flex;
  align-items: center;
}
.library__count {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-quiet);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.library__panel {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.library__panel[hidden] { display: none; }

/* Browse tree --------------------------------------------------------- */
.tree {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.tree__loading,
.tree__empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 16px;
  text-align: center;
}
.tree__node { list-style: none; }
.tree__row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text);
  padding: 7px 14px 7px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s ease;
}
.tree__row:hover { background: rgba(1,17,63,0.04); }
.tree__row:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.tree__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.tree__row[aria-expanded="true"] .tree__chevron { transform: rotate(90deg); color: var(--navy); }
.tree__folder-icon {
  display: inline-flex;
  align-items: center;
  color: var(--ink-quiet);
  flex: 0 0 auto;
}
.tree__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--navy);
}
.tree__count {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-quiet);
  background: transparent;
  border: 0;
  padding: 1px 0;
  min-width: 0;
  text-align: right;
}
.tree__children {
  list-style: none;
  margin: 0 0 0 17px;
  padding: 0 0 0 14px;
  border-left: 1px solid var(--rule);
}
.tree__children[hidden] { display: none; }

/* Doc rows inside the tree share the .doc styling, but compacter. */
.tree .doc { padding: 5px 14px 5px 8px; }

/* Doc list (search results + tree leaves) ------------------------------ */
.doclist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.doclist__loading,
.doclist__empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 16px;
  text-align: center;
}
.doc {
  padding: 6px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.doc:hover { background: rgba(1, 17, 63, 0.04); }
.doc:last-child { border-bottom: 0; }
.doc__title {
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.doc__title-link {
  color: inherit;
  text-decoration: none;
  flex: 1;
  padding-top: 1px;
}
.doc__title-link:hover { color: var(--blue); }
.doc__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Box matches the document SVG's 4:5 ratio (was 18x22, which stretched the
     16x20 glyph into a flame). The svg now fills the box undistorted. */
  width: 16px;
  height: 20px;
  color: var(--ink-quiet);
  margin-top: 1px;
}
.doc__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Muted file-type tag trailing the title (e.g. ".PDF"). */
.doc__type {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 8.5px;
  color: var(--ink-soft);
  background: rgba(1, 17, 63, 0.06);
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.doc__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-quiet);
  padding-left: 26px;
}
.doc__folder {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.doc__folder-icon {
  display: inline-flex;
  align-items: center;
  color: var(--ink-quiet);
  opacity: 0.7;
}

/* --- Buttons --------------------------------------------------------- */
.btn {
  font: inherit;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  font-weight: 600;
}
.btn--primary:hover:not(:disabled) {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-1px);
}
.btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(2,75,245,0.30);
}
.btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Chat surface ---------------------------------------------------- */
.chat {
  flex: 1;
  width: 100%;
  max-width: var(--shell-w);
  margin: 0 auto;
  /* Bottom padding clears the sticky composer so the last message is
     never hidden behind the input. */
  padding: 56px 28px var(--composer-h);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

/* Each .msg is one side of a turn — kept as separate elements (not wrapped
   in a single <article>) so the existing append-on-stream rendering flow
   stays simple. Vertical rhythm is set per-msg below. */
.msg { display: block; margin: 0; max-width: 62ch; }
.msg__bubble {
  padding: 0;
  border-radius: 0;
  white-space: normal;
  word-wrap: break-word;
  background: transparent;
  box-shadow: none;
  border: 0;
  font-size: 17px;
}
.msg__bubble a { color: inherit; text-decoration: underline; }

/* User question → italic serif heading with the floating "Q." mark. */
.msg--user {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: baseline;
  margin: 0 0 14px;
}
.msg--user::before {
  content: "Q.";
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.5px;
}
.msg--user .msg__bubble {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.35;
  color: var(--navy);
  letter-spacing: -0.1px;
  white-space: pre-wrap;
}

/* Assistant answer → serif paragraphs with a navy left-rule. */
.msg--assistant { display: block; margin: 0 0 32px; }
/* The last message's bottom margin would stack with the chat container's
   composer padding into a dead gap — drop it. The composer clearance comes
   from .chat's bottom padding (var(--composer-h)), which stays. */
.chat .msg:last-child { margin-bottom: 0; }
.msg--assistant .msg__bubble {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  border-left: 1px solid var(--rule-strong);
  padding: 0 0 0 22px;
  white-space: normal;
}
/* --- Inline markdown in assistant answers ---------------------------- */
.msg--assistant .msg__bubble .md-p {
  margin: 0 0 10px;
  line-height: 1.55;
}
.msg--assistant .msg__bubble .md-p:last-child { margin-bottom: 0; }
.msg--assistant .msg__bubble .md-h {
  margin: 14px 0 6px;
  line-height: 1.3;
  color: var(--text);
  font-weight: 600;
}
.msg--assistant .msg__bubble .md-h:first-child { margin-top: 0; }
.msg--assistant .msg__bubble .md-h2 {
  font-size: 1.06rem;
  letter-spacing: -0.01em;
}
.msg--assistant .msg__bubble .md-h3 {
  font-size: 0.99rem;
  color: var(--accent-dark);
}
.msg--assistant .msg__bubble .md-h4,
.msg--assistant .msg__bubble .md-h5,
.msg--assistant .msg__bubble .md-h6 {
  font-size: 0.94rem;
  color: var(--text-muted);
  text-transform: none;
  font-weight: 600;
}
.msg--assistant .msg__bubble .md-ul,
.msg--assistant .msg__bubble .md-ol {
  margin: 4px 0 10px;
  padding-left: 22px;
}
.msg--assistant .msg__bubble .md-ul li,
.msg--assistant .msg__bubble .md-ol li {
  margin: 2px 0;
}
.msg--assistant .msg__bubble .md-ul { list-style: disc; }
.msg--assistant .msg__bubble .md-ol { list-style: decimal; }
.msg--assistant .msg__bubble strong {
  font-weight: 650;
  color: var(--text);
}
.msg--assistant .msg__bubble em { font-style: italic; }
/* Tables — clean, readable, with a header rule and a hairline grid. Wrapped
   in a horizontally scrolling container so a wide table never blows out
   the chat bubble on narrow viewports. */
.msg--assistant .msg__bubble .md-table-wrap {
  margin: 8px 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.msg--assistant .msg__bubble .md-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
  line-height: 1.45;
}
.msg--assistant .msg__bubble .md-table th,
.msg--assistant .msg__bubble .md-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.msg--assistant .msg__bubble .md-table th {
  background: var(--surface-alt);
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border-strong, var(--border));
}
.msg--assistant .msg__bubble .md-table tbody tr:last-child td { border-bottom: 0; }
.msg--assistant .msg__bubble .md-table tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.015);
}
/* Subtle divider — a short, faint, left-aligned line that separates
   sections without breaking chat flow. */
.msg--assistant .msg__bubble .md-hr {
  border: 0;
  border-top: 1px solid var(--border);
  width: 48px;
  margin: 14px 0;
  opacity: 0.7;
}
/* Intro message — the assistant's welcome greeting on first load. Keep
   it visually quiet, no left-rule, italic serif so it doesn't compete
   with real answers. */
.msg--intro { margin-bottom: 24px; }
.msg--intro .msg__bubble {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  border-left: 0;
  padding: 0;
  background: transparent;
}

/* --- Inline citation pill (superscript anchor) --------------------- */
.cite,
.msg__bubble .cite {
  display: inline-block;
  margin-left: 1px;
  vertical-align: super;
  font-family: var(--sans);
  font-feature-settings: "tnum" 1;
  font-size: 0.62em;
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
  background: rgba(2, 75, 245, 0.08);
  border: 1px solid rgba(2, 75, 245, 0.18);
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  min-width: 0;
  height: auto;
  transition: background 0.12s ease, transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cite:hover,
.cite:focus-visible,
.msg__bubble .cite:hover,
.msg__bubble .cite:focus-visible {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  transform: translateY(-1px);
  outline: none;
  box-shadow: none;
}

/* --- Sources panel --------------------------------------------------- */
.sources {
  margin-top: 10px;
  font-size: 0.84rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  max-width: 100%;
  box-shadow: var(--shadow);
}
.sources__title {
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.sources ul { margin: 0; padding-left: 0; list-style: none; }
.sources__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.sources__item:first-child { border-top: 0; padding-top: 2px; }
.sources__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: 1px;
}
.sources__type-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  margin-top: 2px;
}
.sources__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sources__link {
  color: var(--accent-dark);
  text-decoration: none;
  font-weight: 500;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.sources__link:hover { text-decoration: underline; color: var(--accent); }
/* Folder breadcrumb sits below the title in the references panel — lighter
   and smaller so the title carries the visual weight. */
.sources__folder {
  font-size: 0.74rem;
  color: var(--text-muted);
  opacity: 0.85;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.sources__date {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Citation hover tooltip ----------------------------------------- */
.cite-tooltip {
  position: absolute;
  z-index: 100;
  max-width: 360px;
  min-width: 220px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-md);
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
}
.cite-tooltip[hidden] { display: none; }
.cite-tooltip__arrow {
  position: absolute;
  top: -7px;
  left: 14px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-left: 1px solid var(--rule-strong);
  border-top: 1px solid var(--rule-strong);
  transform: rotate(45deg);
}
.cite-tooltip--below .cite-tooltip__arrow {
  top: auto;
  bottom: -7px;
  transform: rotate(225deg);
}
.cite-tooltip__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cite-tooltip__type {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  font-size: 9.5px;
  color: var(--ink-soft);
}
.cite-tooltip__type.is-yt { color: #c4302b; }
.cite-tooltip__type:empty { display: none; }
.cite-tooltip__loc {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  font-feature-settings: "tnum" 1;
}
.cite-tooltip__loc:empty { display: none; }
.cite-tooltip__head:empty { display: none; }
.cite-tooltip__title {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 4px;
}
.cite-tooltip__date {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-feature-settings: "tnum" 1;
}
.cite-tooltip__date:empty { display: none; }
.cite-tooltip__body {
  color: var(--ink-soft);
  font-style: italic;
  max-height: 9.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
.cite-tooltip__body:empty { display: none; }
.cite-tooltip__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  padding: 6px 11px;
  border-radius: 7px;
  text-decoration: none;
}
.cite-tooltip__action:hover { background: var(--navy); }
.cite-tooltip__action:empty { display: none; }

/* --- Copy + followups ------------------------------------------------ */
.msg__actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  align-self: flex-start;
}
.msg__copy {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.76rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.msg__copy:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
.msg__copy--copied { color: var(--accent-dark); border-color: var(--accent); background: var(--accent-soft); }

/* Per-turn rating — quiet, inline thumbs under the answer. Indented to line
   up with the answer's left-rule. */
.msg__rating {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  padding-left: 22px;
  align-items: center;
}
.msg__rating-btn {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  font-size: 13px;
  line-height: 1.1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.msg__rating-btn:hover { opacity: 1; background: var(--surface); border-color: var(--border-strong); }
.msg__rating-btn.is-active {
  opacity: 1;
  border-color: var(--blue);
  background: var(--accent-soft);
}

.followups {
  margin-top: 18px;
  max-width: 62ch;
  padding-left: 22px;  /* match .msg--assistant .msg__bubble's left rule indent */
}
.followups__label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-weight: 600;
  margin-bottom: 8px;
}
.followups__chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.followups__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  background: transparent;
  border: 0;
  color: var(--navy);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  padding: 4px 0;
  cursor: pointer;
  max-width: 100%;
  transition: color 0.12s ease;
}
.followups__chip::before {
  content: "→";
  font-style: normal;
  color: var(--blue);
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.followups__chip:hover { color: var(--blue); }
.followups__chip:hover::before { transform: translateX(3px); }

/* Typing cursor while streaming */
.cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  vertical-align: -2px;
  margin-left: 2px;
  background: var(--accent);
  animation: blink 1s steps(2, start) infinite;
  border-radius: 1px;
}
@keyframes blink { to { visibility: hidden; } }

/* --- Composer (Public Record direction) ----------------------------- */
/* Sticks to the bottom of the .layout__main flex column. Page (not .chat)
   scrolls in this design, so sticky positioning is relative to the body
   viewport. Composer card sits inside the conversation column visually
   even though it spans the full layout__main width. */
.composer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: linear-gradient(180deg,
    rgba(251,250,246,0) 0%,
    rgba(251,250,246,0.92) 30%,
    var(--paper) 70%);
  border-top: 0;
  box-shadow: none;
  width: 100%;
  padding: 28px 0 24px;
}
/* Composer card occupies the full layout__main width so the sticky-bottom
   behaviour spans the whole viewport; inside, the inner grid carves out a
   1fr + rail-w pattern so the textarea aligns with the conversation column
   and the rail column stays empty above it. */
.composer__inner {
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: var(--gutter);
  align-items: end;
}
.composer__field {
  grid-column: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  padding: 8px 8px 8px 18px;
  box-shadow: var(--shadow-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.composer__field:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(1,17,63,0.06), var(--shadow-md);
}
.composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  max-height: 160px;
  min-height: 34px;
  padding: 8px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
}
.composer textarea::placeholder {
  color: var(--ink-quiet);
  opacity: 0.9;
  font-style: italic;
}
.composer__hint {
  max-width: var(--shell-w);
  margin: 10px auto 0;
  padding: 0 32px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-quiet);
}
/* Send button — round navy circle, sits inside the field, anchored bottom-right. */
.composer .btn--primary,
.composer #send-btn {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-size: 0;
  letter-spacing: 0;
  box-shadow: 0 2px 6px rgba(1,17,63,0.12);
  transition: transform 0.12s ease, background 0.12s ease;
}
.composer .btn--primary:hover:not(:disabled),
.composer #send-btn:hover:not(:disabled) {
  background: var(--blue);
  transform: translateY(-1px);
}
.composer .btn--primary:disabled,
.composer #send-btn:disabled {
  background: var(--ink-quiet);
  cursor: default;
  box-shadow: none;
}
.composer .btn--primary svg,
.composer #send-btn svg { width: 15px; height: 15px; }

.composer__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.composer__icon:hover { color: var(--accent-dark); border-color: var(--border-strong); background: var(--surface-alt); }
.composer__icon[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.composer__icon:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}


/* --- Footer (cleaner, branded) --------------------------------------- */
/* --- Footer (Public Record direction) -------------------------------- */
.site-footer {
  flex: 0 0 auto;
  background: var(--paper-edge);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}
/* The ⓘ disclosure only appears on phones (desktop shows the full text). */
.site-footer__info { display: none; }
.site-footer__inner {
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer__left { flex: 1; min-width: 0; }
.site-footer__right { flex: 0 0 auto; }
.site-footer__disclaimer {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 60ch;
}
/* Footer colophon row — matches the disclaimer's italic-serif voice so
   share-feedback + last-indexed read as one publication footer rather
   than two pasted-in widgets. */
.site-footer__meta {
  margin: 4px 0 0;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
  flex-wrap: wrap;
}
.site-footer__feedback {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
.site-footer__feedback:hover {
  color: var(--blue);
  text-decoration-color: var(--blue);
}
.site-footer__feedback:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}
.site-footer__feedback svg { transform: translateY(1px); opacity: 0.7; }
.site-footer__feedback:hover svg { opacity: 1; }
.site-footer__bullet { color: var(--ink-quiet); opacity: 0.6; }
.site-footer__indexed {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  font-feature-settings: "tnum" 1;
}
.site-footer__indexed time {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  font-feature-settings: "tnum" 1;
  margin-left: 2px;
}
.site-footer a {
  color: var(--navy);
  text-decoration: none;
}
.site-footer a:hover { color: var(--blue); }

/* "powered by" sits as tiny tracked caps directly above the wordmark.
   1 px gap so the eye reads them as one unit. */
.site-footer__brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.12s ease;
}
.site-footer__brand:hover { opacity: 0.85; text-decoration: none; }
.site-footer__poweredby {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-quiet);
  line-height: 1;
}
.site-footer__logo {
  height: 18px;
  width: auto;
  display: block;
  opacity: 0.85;
}

/* Legacy alias kept in case the survey trigger or other code references it. */
.site-footer__link-btn {
  background: transparent;
  border: 0;
  color: var(--navy);
  font: inherit;
  font-size: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.site-footer__link-btn:hover { color: var(--blue); }
.site-footer__link-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Survey modal ---------------------------------------------------- */
.survey {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.survey[aria-hidden="false"] { display: flex; }
.survey__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 18, 64, 0.55);
  backdrop-filter: blur(2px);
}
.survey__panel {
  position: relative;
  max-width: 520px;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow-md), 0 30px 60px rgba(1, 17, 63, 0.25);
  padding: 28px 28px 20px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.survey__close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-quiet);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.survey__close:hover { color: var(--navy); background: rgba(1,17,63,0.05); }
.survey h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.2px;
}
.survey__lede {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.survey__likert {
  border: 0;
  margin: 0 0 18px;
  padding: 0;
}
.survey__likert legend {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 10px;
}
.likert {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.likert label { position: relative; cursor: pointer; }
.likert label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.likert label span {
  display: block;
  text-align: center;
  padding: 12px 0;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.likert label:hover span { border-color: var(--navy); }
.likert label input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(1,17,63,0.10);
}
.likert label input:checked + span {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.likert__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.survey__followup { margin-bottom: 16px; }
.survey__followup label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 6px;
  color: var(--text);
}
.survey__followup textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.94rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  min-height: 80px;
  background: var(--surface-alt);
}
.survey__followup textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.survey__contact { margin-bottom: 16px; }
.survey__contact summary {
  /* Clear, solid-affordance disclosure: rotating chevron instead of the
     default triangle marker, no dashed underlines. */
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--accent-dark);
  padding: 6px 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.survey__contact summary::-webkit-details-marker { display: none; }
.survey__contact-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.survey__contact[open] .survey__contact-chevron { transform: rotate(90deg); color: var(--accent); }
.survey__contact summary .muted { color: var(--text-muted); font-weight: 400; }
.survey__contact summary:hover { color: var(--accent); }
.survey__contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.survey__contact-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.survey__contact-fields input[type=text],
.survey__contact-fields input[type=email] {
  padding: 8px 10px;
  font: inherit;
  font-size: 0.92rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alt);
}
.survey__contact-fields input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.survey__consent {
  grid-column: 1 / -1;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 8px;
  color: var(--text);
  font-size: 0.85rem;
}
.survey__consent input { margin-top: 3px; }

.survey__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.survey__actions .btn { padding: 9px 18px; }
.survey__actions .btn:not(.btn--primary) {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink-soft);
}
.survey__actions .btn:not(.btn--primary):hover {
  color: var(--navy); border-color: var(--navy); background: rgba(1,17,63,0.04);
}
.survey__thanks {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--teal) 18%, transparent);
  color: var(--accent-dark);
  border-radius: 6px;
  font-size: 0.92rem;
}
.survey__error {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: #fde8e7;
  color: #b3261e;
  border-radius: 6px;
  font-size: 0.9rem;
}

/* --- Small + medium screens (Public Record direction) -------------- */
@media (max-width: 880px) {
  /* Two-column grid collapses; rail moves below the conversation. */
  .layout__columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .rail {
    position: static;
    max-height: none;
    padding: 24px 20px 24px;
    border-top: 1px solid var(--rule);
    margin-top: 4px;
  }
  /* Composer grid stops carving out a rail column on phone widths. */
  .composer__inner {
    grid-template-columns: 1fr;
    padding: 0 20px;
    gap: 0;
  }
  .chat { padding: 32px 20px var(--composer-h); }
  .site-header__center { display: none; }
}

@media (max-width: 600px) {
  .site-header__inner { padding: 12px 16px; gap: 12px; min-height: 52px; }
  .site-header__crest { width: 30px; height: 30px; }
  .site-header__title { font-size: 15px; }
  /* Drop the tagline + button labels on phones; icon-only bordered buttons
     so the full tenant name gets the room. */
  .site-header__meta { display: none; }
  .site-header__nav-label { display: none; }
  .site-header__nav { gap: 8px; }
  .site-header__nav-btn {
    padding: 0; width: 34px; height: 34px; justify-content: center;
    border: 1px solid var(--rule-strong); border-radius: 9px; background: #fff;
  }
  .site-header__nav-btn[aria-expanded="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
  .site-header__witan img { height: 16px; }
  .msg { max-width: 100%; }
  .msg--user { gap: 12px; margin-bottom: 18px; }
  .msg--user::before { font-size: 24px; }
  .msg--user .msg__bubble { font-size: 19px; }
  .msg--assistant .msg__bubble { font-size: 16.5px; padding-left: 16px; }
  /* font-size: 16px on the composer textarea prevents iOS Safari from
     zooming the viewport on focus. */
  .composer textarea { font-size: 16px; }
  .composer__field { padding: 6px 6px 6px 14px; }
  .composer .btn--primary,
  .composer #send-btn { width: 36px; height: 36px; }
  /* Tight single-row footer: ⓘ + Feedback left, wordmark right. */
  .site-footer__inner { padding: 10px 16px; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .site-footer__left { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; }
  .site-footer__disclaimer { display: none; }
  body.footer-disclaimer-open .site-footer__disclaimer {
    display: block; position: absolute; bottom: 52px; left: 16px; right: 16px;
    background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px;
    box-shadow: var(--shadow-md); font-size: 12px; z-index: 6;
  }
  .site-footer__meta { margin: 0; gap: 8px; }
  .site-footer__indexed, .site-footer__bullet { display: none; }
  .site-footer__info {
    width: 20px; height: 20px; flex: 0 0 auto; border: 1px solid var(--rule-strong);
    border-radius: 50%; background: transparent; color: var(--ink-soft);
    font-family: var(--serif); font-style: italic; font-size: 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
  }
  .site-footer__feedback { font-family: var(--sans); font-style: normal; font-size: 12px; }
  .cite-tooltip { max-width: calc(100vw - 32px); }
}

/* ---- Agent status flash + research trail --------------------------------- */
/* The status flash sits above the assistant bubble while the agent is
   researching. One line, monospaced-ish, subtle. Each label fades in over
   ~200ms; the controller in app.js holds each label for at least 700ms. */
.status-flash {
  font-size: 0.83rem;
  color: var(--muted, #5a6675);
  padding: 4px 12px 6px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 1.2em;
  opacity: 0;
  transition: opacity 220ms ease-out;
  font-feature-settings: "tnum" 1;
}
.status-flash::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #004BFE);
  flex-shrink: 0;
  animation: status-flash-pulse 1.4s ease-in-out infinite;
}
.status-flash--in { opacity: 1; }
@keyframes status-flash-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* Research trail — collapsed by default, click to expand. Sits below the
   sources panel so the answer + citations get visual priority. */
.trail {
  margin-top: 6px;
  padding: 0 12px;
  font-size: 0.82rem;
}
.trail__summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin-left: -6px;
  color: var(--muted, #5a6675);
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
}
.trail__summary:hover,
.trail__summary:focus-visible {
  color: var(--accent-dark, #003ad1);
  background: rgba(0, 75, 254, 0.06);
  outline: none;
}
.trail__chevron {
  display: inline-block;
  width: 0.9em;
  text-align: center;
  font-size: 0.75em;
  line-height: 1;
  color: inherit;
}
.trail__cap {
  color: #a6611a;
  font-weight: 500;
  margin-left: 2px;
}
.trail__list {
  margin: 4px 0 0;
  padding: 0 0 0 22px;
  list-style: decimal;
  color: var(--muted, #5a6675);
  line-height: 1.55;
}
.trail__step { padding: 2px 0; }
.trail__label { color: var(--text, #1a1f2b); }
.trail__meta { margin-left: 6px; font-size: 0.95em; }

/* Cap-reached notice — sits between the bubble and the sources panel when
   the agent ran out of budget. Tone: informative, not alarming. */
.cap-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 12px 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff7ea;
  border: 1px solid #f3d9a4;
  color: #8a5a16;
  font-size: 0.86rem;
  line-height: 1.4;
}
.cap-notice__icon {
  font-size: 1rem;
  line-height: 1.4;
  flex-shrink: 0;
}

/* Certainty callout — answer drew an inference beyond the sources. */
.certainty {
  margin: 6px 12px 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff7ea;
  border: 1px solid #f3d9a4;
  color: #8a5a16;
  font-size: 0.86rem;
  line-height: 1.45;
}
.certainty__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 600;
}
.certainty__icon {
  font-size: 1rem;
  line-height: 1.4;
  flex-shrink: 0;
}
.certainty__list {
  margin: 6px 0 0;
  padding-left: 26px;
}
.certainty__list li { margin: 4px 0; }
.certainty__claim { font-weight: 500; }
.certainty__cites { opacity: 0.75; font-variant-numeric: tabular-nums; }
.certainty__why { font-weight: 400; opacity: 0.85; margin-top: 1px; }