/* ─────────────────────────────────────────────────────────────────
   PayCheqq Operator Workspace — v2 aesthetic
   Cool-gray surface + Inter, glossy black accents, layered shadows.
   Class API matches the screens; this file only changes the look.
───────────────────────────────────────────────────────────────── */

:root {
  /* Surface */
  --bg: #eef0f3;
  --bg-2: #e4e7ec;
  --surface: #ffffff;
  --surface-soft: #f3f5f8;
  --surface-blur: rgba(255, 255, 255, 0.72);

  /* Ink */
  --ink: #16181c;
  --ink-2: #4a4d54;
  --ink-3: #82858d;
  --ink-4: #b4b7be;

  /* Lines */
  --line: rgba(22, 24, 28, 0.08);
  --line-2: rgba(22, 24, 28, 0.05);

  /* Pill / interactive */
  --pill: rgba(22, 24, 28, 0.06);
  --pill-hover: rgba(22, 24, 28, 0.1);
  --pill-active: #16181c;
  --pill-active-ink: #fbfcfd;

  /* Tag palette */
  --tag-mint: #e3f1ea;     --tag-mint-ink: #2a7a52;
  --tag-amber: #f6ebd6;    --tag-amber-ink: #7a5614;
  --tag-rose: #f6e0e0;     --tag-rose-ink: #983b3b;
  --tag-lavender: #e8e4f6; --tag-lavender-ink: #5849b0;
  --tag-sand: #ebebe2;     --tag-sand-ink: #5c5d4e;
  --tag-sky: #dde8f5;      --tag-sky-ink: #34598e;

  /* Status */
  --ok:   #2f9e62;
  --warn: #e0a341;
  --err:  #d65b3c;

  /* Legacy aliases the screens still reference */
  --muted: var(--ink-3);
  --muted-2: var(--ink-4);
  --pos: var(--ok);
  --neg: var(--err);
  --accent: var(--ink);
  --accent-bg: var(--surface-soft);
  --gray-1: #f4f5f7;
  --gray-2: #e7eaef;
  --gray-3: #dadde2;
  --sage-muted: var(--ink-3);
  --surface-2: var(--surface-soft);
  --border: var(--line);

  /* Shape */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --radius-pill: 999px;
  --sidebar-w: 232px;

  /* Shadow */
  --shadow-card: 0 1px 0 rgba(22,24,28,0.04), 0 12px 32px -16px rgba(22,24,28,0.12);
  --shadow-pop:  0 1px 0 rgba(22,24,28,0.04), 0 24px 60px -20px rgba(22,24,28,0.25);
  --shadow-shell:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 0 rgba(22,24,28,0.04),
    0 2px 6px rgba(22,24,28,0.06),
    0 18px 50px -20px rgba(22,24,28,0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Type */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-display);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(900px 500px at -5% 110%, rgba(255,255,255,0.5), transparent 60%),
    var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.005em;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Subtle entrance for screen swaps */
@keyframes viewFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rowFadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.main > * { animation: viewFadeUp 280ms var(--ease-out) both; }

/* ── Layout ─────────────────────────────────────────────────────── */
.app {
  height: 100vh;        /* lock to viewport — no page-level scroll */
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
}
.shell { gap: 0; padding: 0; width: 100%; }

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 18px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  overflow: hidden;     /* contain the nav scroll within the sidebar */
}
.brand-mark {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 14px;
  color: var(--ink);
}
.brand-tile {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--pill-active-ink);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.04em;
  flex: 0 0 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 1px 2px rgba(22,24,28,0.25);
}
.brand-text { line-height: 1.15; min-width: 0; }
.brand-name {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.brand-sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 1px;
  font-weight: 400;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;              /* fill all space between brand-mark and side-foot */
  min-height: 0;        /* allow flex child to shrink below content size */
  overflow-y: auto;     /* scroll nav items when they overflow */
  scrollbar-width: none;/* Firefox: hide scrollbar track */
}
.nav::-webkit-scrollbar { display: none; } /* Chrome/Safari: hide scrollbar */
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out), transform 120ms var(--ease-out);
}
.nav a:hover {
  background: var(--pill);
  color: var(--ink);
  transform: translateX(2px);
  text-decoration: none;
}
.nav a.active {
  background: rgba(22,24,28,0.07);
  color: var(--ink);
  font-weight: 500;
  box-shadow: none;
}
.nav a svg {
  width: 16px; height: 16px; flex: 0 0 16px;
  color: var(--ink-3);
  transition: color 180ms var(--ease-out), transform 240ms var(--ease-spring);
}
.nav a.active svg { color: var(--ink); }
.nav a:hover svg { transform: scale(1.08); }
.nav .sec {
  font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.06em;
  padding: 14px 10px 4px;
  text-transform: uppercase;
  font-weight: 500;
}

.side-foot {
  margin-top: auto;
  padding: 8px 10px;
  border: 0;
  display: flex; align-items: center; gap: 10px;
  border-radius: 12px;
  background: transparent;
}
.side-foot:hover { background: var(--pill); }
.side-foot .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5), transparent 55%),
    linear-gradient(140deg, #f7c8a8, #e08850);
  color: #fff; font-weight: 600; font-size: 11px;
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 1px 2px rgba(224,136,80,0.4);
  flex: 0 0 28px;
}
.side-foot .who { font-size: 13px; min-width: 0; flex: 1; line-height: 1.2; font-weight: 500; }
.side-foot .role { font-size: 11px; color: var(--ink-3); margin-top: 2px; font-weight: 400; }
.side-foot .signout {
  font-size: 10.5px; color: var(--ink-3);
  padding: 3px 7px; border-radius: 6px;
}
.side-foot .signout:hover { color: var(--err); background: rgba(214,91,60,0.08); }

/* ── Main = single workspace panel ──────────────────────────────── */
.main {
  margin: 14px 22px 22px 0;
  padding: 28px 34px 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-shell);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;        /* allow the grid to constrain height */
  overflow-y: auto;     /* content scrolls inside the panel */
}
/* Drop the panel styling when the sign-in screen is shown (sidebar hidden) */
.main:has(.signin-wrap) {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
/* Collapse the sidebar grid column when sign-in is showing, so the card
   has the full viewport to center in (instead of being stuck in the left
   sidebar slot). */
.app:has(.signin-wrap) {
  grid-template-columns: 1fr;
}

/* ── Generic kicker (used in cards as a small section label) ────── */
.kicker {
  font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 500;
}

/* ── Page header = topbar strip at top of the panel ─────────────── */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: -28px -34px 22px;
  padding: 12px 20px;
  border-bottom: 0;
  min-height: 52px;
  background: var(--surface);
}
.page-head > div:first-child {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ink-3);
}
.page-head .kicker {
  font-size: 13.5px;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0;
}
.page-head .kicker::after {
  content: '/';
  color: var(--ink-4);
  margin-left: 8px;
}
.page-head h1 {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.005em;
}
.page-head h1::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5), transparent 55%),
    linear-gradient(140deg, #d6cef5, #b9a9eb);
  display: inline-block;
  flex: 0 0 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.1),
    0 1px 1.5px rgba(22,24,28,0.12);
}
.page-head .sub { display: none; }

/* ── Tabs (for grouping independent sections inside a panel) ───── */
.tabs {
  display: flex; align-items: center; gap: 4px;
  margin: 0 0 20px;
  padding: 4px;
  background: var(--surface-soft);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  width: fit-content;
}
.tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background 120ms ease, color 120ms ease, box-shadow 140ms ease, transform 100ms ease;
}
.tab:hover:not(.active) { color: var(--ink); background: rgba(22,24,28,0.04); }
.tab.active {
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
  color: var(--ink);
  border-color: rgba(22,24,28,0.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(22,24,28,0.04),
    0 1px 2px rgba(22,24,28,0.06),
    0 2px 6px -2px rgba(22,24,28,0.1);
}
.tab .num {
  color: var(--ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tab.active .num { color: var(--ink-2); }

/* ── Cards = flat content sections inside the panel ─────────────── */
.card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 28px;
  box-shadow: none;
}
.card + .card {
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
}
.card h2 {
  margin: 0 0 12px;
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.card .sub { color: var(--ink-3); font-size: 12.5px; margin-bottom: 14px; }

/* ── Tables ─────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left; padding: 11px 12px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
  font-size: 13.5px;
}
th {
  font-weight: 500; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
  background: transparent;
  border-bottom: 1px solid var(--line);
}
tr.clickable { cursor: pointer; transition: background 180ms var(--ease-out); }
tr.clickable:hover { background: var(--surface-soft); }
tr:last-child td { border-bottom: 0; }

/* ── Pills ──────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 500;
  background: var(--pill);
  color: var(--ink-2);
  border: 0;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(22,24,28,0.05),
    0 1px 1px rgba(22,24,28,0.04);
}
.pill.resolved, .pill.ok, .pill.parsed, .pill.success {
  background: var(--tag-mint); color: var(--tag-mint-ink);
}
.pill.open, .pill.warn, .pill.pending {
  background: var(--tag-amber); color: var(--tag-amber-ink);
}
.pill.attention, .pill.error, .pill.failed, .pill.danger {
  background: var(--tag-rose); color: var(--tag-rose-ink);
}
.pill.needs_advisor {
  background: var(--tag-lavender); color: var(--tag-lavender-ink);
}
.pill.dismissed {
  background: var(--tag-sand); color: var(--tag-sand-ink);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(22,24,28,0.12);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ffffff 0%, #f0f2f5 100%);
  color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 500;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(22,24,28,0.06),
    0 1px 2px rgba(22,24,28,0.06),
    0 2px 6px -2px rgba(22,24,28,0.08);
  transition: transform 100ms ease, box-shadow 140ms ease, background 120ms ease, filter 120ms ease;
}
.btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eaedf1 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(22,24,28,0.08),
    0 2px 4px rgba(22,24,28,0.08),
    0 4px 10px -2px rgba(22,24,28,0.12);
}
.btn:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #e8ebef 0%, #eef1f4 100%);
  box-shadow: inset 0 2px 3px rgba(22,24,28,0.1);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn.primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #2c2f36 0%, #16181c 100%);
  color: var(--pill-active-ink);
  border-color: #0a0c10;
  padding: 9px 16px;
  font-size: 13.5px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 1px 0 rgba(255,255,255,0.6),
    0 6px 16px -8px rgba(22,24,28,0.5),
    0 2px 4px -2px rgba(22,24,28,0.3);
}
.btn.primary:hover {
  filter: brightness(1.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #2c2f36 0%, #16181c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 1px 0 rgba(255,255,255,0.6),
    0 10px 22px -8px rgba(22,24,28,0.55),
    0 3px 6px -2px rgba(22,24,28,0.35);
}
.btn.primary:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.4),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 1px 0 rgba(255,255,255,0.5);
}

.btn.danger {
  color: var(--err);
  border-color: rgba(214,91,60,0.3);
  background: linear-gradient(180deg, #ffffff 0%, #fbf2f0 100%);
}
.btn.danger:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f5e3df 100%);
  border-color: rgba(214,91,60,0.45);
}
.btn.small { padding: 5px 11px; font-size: 12px; }
.btn.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink-2);
}
.btn.ghost:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eef1f5 100%);
  border-color: rgba(22,24,28,0.1);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(22,24,28,0.06),
    0 2px 5px -2px rgba(22,24,28,0.08);
}

/* ── Inputs ─────────────────────────────────────────────────────── */
input, select, textarea {
  font: inherit; font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), background 120ms ease;
  width: 100%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(22,24,28,0.04);
}
input:hover, select:hover, textarea:hover { border-color: rgba(22,24,28,0.16); }
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 0 0 3px rgba(22,24,28,0.08);
}
label {
  display: block; font-size: 11px; color: var(--ink-3);
  margin-bottom: 5px; letter-spacing: 0.02em;
  font-weight: 500; text-transform: uppercase;
}
.field { margin-bottom: 12px; }

/* ── Code / mono ────────────────────────────────────────────────── */
pre, code, .mono { font-family: var(--font-mono); font-size: 12px; }
pre {
  background: var(--surface-soft);
  padding: 12px 14px; border-radius: 10px;
  overflow-x: auto;
  border: 1px solid var(--line);
  white-space: pre-wrap; word-wrap: break-word;
  color: var(--ink-2);
}
code {
  background: var(--pill);
  padding: 1px 6px; border-radius: 5px;
  color: var(--ink-2);
}

/* ── Utilities ──────────────────────────────────────────────────── */
.muted { color: var(--ink-3); }
.danger { color: var(--err); }
.ok { color: var(--ok); }
.right { text-align: right; }
.small { font-size: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }

/* ── Toolbar (flat filter strip inside the panel) ───────────────── */
.toolbar {
  display: flex; gap: 10px; align-items: end; flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
}
.toolbar .field { margin-bottom: 0; min-width: 140px; }
.toolbar .spacer { flex: 1; }

/* ── Empty state ────────────────────────────────────────────────── */
.empty {
  padding: 44px 24px;
  text-align: center; color: var(--ink-3);
  font-size: 13px;
}

/* ── Toast ──────────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 22px; right: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, #2c2f36 0%, #16181c 100%);
  color: #fff;
  padding: 11px 18px; border-radius: var(--radius-pill);
  opacity: 0; transform: translateY(8px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  pointer-events: none; z-index: 100;
  font-size: 13px; font-weight: 500;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  border: 1px solid #0a0c10;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 12px 32px -10px rgba(22,24,28,0.5);
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.error {
  background: linear-gradient(180deg, #e87a5d 0%, #c84a2c 100%);
  border-color: #8a2f17;
}

/* ── Sign-in card ───────────────────────────────────────────────── */
.signin-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
}
.signin-card {
  width: 100%; max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 32px 34px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 0 rgba(22,24,28,0.04),
    0 30px 80px -40px rgba(22,24,28,0.35);
}
.signin-card h1 {
  margin: 0 0 8px; font-size: 22px; font-weight: 600;
  letter-spacing: -0.025em;
}
.signin-card .sub { color: var(--ink-3); margin: 0 0 22px; font-size: 13px; }
.signin-card .field { margin-bottom: 14px; }
.signin-card .btn { width: 100%; justify-content: center; padding: 10px 14px; }
.signin-card .btn.primary { padding: 11px 16px; }
.signin-card .advanced {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.signin-card .advanced summary {
  cursor: pointer; font-size: 12px; color: var(--ink-3);
  list-style: none;
}
.signin-card .advanced summary::-webkit-details-marker { display: none; }
.signin-card .advanced summary::before { content: "▸ "; font-size: 10px; }
.signin-card .advanced[open] summary::before { content: "▾ "; }
.signin-card textarea { font-family: var(--font-mono); font-size: 11px; }

/* ── AI chat (mock-faithful Assistant) ──────────────────────────── */
.assistant-pane {
  flex: 1;
  display: flex; flex-direction: column;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  min-height: 0;
  position: relative;
  /* CRITICAL: cancel the .main > * fade-up animation on the assistant-pane.
     That animation has fill-mode: both, which leaves `transform: translateY(0)`
     applied permanently. Any transform on an ancestor creates a containing
     block for position:fixed descendants — which is why the composer was
     pinning to .assistant-pane (growing with content, scrolling with the
     page) instead of the viewport. Caught 2026-05-27 after 3 failed
     attempts to make the composer sticky/fixed. */
  animation: none;
  transform: none;
}
.assistant-inner {
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
}

/* Floating history button — AI chat screen only. Mirrors the rail-toggle
   button in .page-head, becomes visible once the user scrolls past the
   header. Scoped class so no other section is affected (the .page-head
   sticky approach was reverted 2026-05-27 because it broke every other
   page's layout). */
.ai-floating-history {
  /* Cancel inherited fade-up animation so position: fixed pins to the
     viewport, not to .main's transformed box. */
  animation: none;
  /* Completely removed from layout until JS adds .is-visible. Using
     display: none (not opacity:0) so the button can't even paint a
     pixel when the user is at the top of the page — fixes the
     "stuff in the corner" complaint 2026-05-27 where the button was
     showing through despite opacity:0. */
  display: none;
  position: fixed;
  top: 18px;
  right: 40px;
  z-index: 25;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px -6px rgba(22, 24, 28, 0.28),
              0 1px 0 0 rgba(22, 24, 28, 0.08);
  color: var(--ink-2);
  cursor: pointer;
  transition:
    opacity 220ms var(--ease-out),
    transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ai-floating-history.is-visible {
  display: inline-flex;
  /* Entry animation: fade + slide-down from translateY(-8px) to 0.
     Using a CSS animation rather than a state-driven transition so the
     keyframes run cleanly on every show, even after display switch. */
  animation: floatingBtnEnter 280ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes floatingBtnEnter {
  from { opacity: 0; transform: translateY(-8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.ai-floating-history:hover {
  background: color-mix(in oklab, var(--surface) 90%, var(--ink-2) 10%);
  color: var(--ink);
}
.ai-floating-history:active {
  transform: translateY(0) scale(0.95);
  transition-duration: 80ms;
}
/* Mobile / narrow viewports — pull the button closer to the right edge. */
@media (max-width: 900px) {
  .ai-floating-history {
    right: 20px;
    top: 14px;
  }
}

/* Conversation rail (slides in over the assistant pane).
   Switched 2026-05-27 from position: absolute (only covered
   .assistant-pane) to position: fixed (covers the whole viewport), so
   the rail backdrop properly hides the fixed-position composer and
   floating history button while open. z-index bumped from 30 → 50 to
   sit above the composer (z:10) and the floating btn (z:25). */
.rail-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(22, 24, 28, 0);
  display: flex;
  pointer-events: none;
  transition: background 220ms var(--ease-out);
}
.rail-overlay.open {
  background: rgba(22, 24, 28, 0.18);
  pointer-events: auto;
}
/* When the rail is open, hide the floating history button so it
   doesn't peek through. JS toggles `ai-rail-open` on body in
   openRail/closeRail — that's the reliable trigger across browsers
   (no :has() dependency, no DOM-order siblings issues). */
body.ai-rail-open .ai-floating-history {
  display: none !important;
}
.rail-drawer {
  width: min(280px, 80%);
  background: var(--surface);
  border-right: 1px solid var(--line);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  transform: translateX(-100%);
  transition: transform 240ms var(--ease-out);
  box-shadow: none;
}
.rail-overlay.open .rail-drawer { transform: translateX(0); }
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 6px;
}
.rail-title {
  font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.rail-new {
  width: 100%;
  justify-content: center;
}
.rail-list {
  display: flex; flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  margin: 4px -4px 0;
  padding: 0 4px;
}
.rail-item {
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: left;
  padding: 6px 4px 6px 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--ink-2);
  width: 100%;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out), transform 100ms ease;
}
.rail-item:hover {
  background: var(--pill);
  color: var(--ink);
  transform: translateX(2px);
}
.rail-item.active {
  background: rgba(22,24,28,0.07);
  color: var(--ink);
}
.rail-item-body {
  flex: 1;
  min-width: 0;
  padding: 2px 0;
}
.rail-item-title {
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.rail-item-time {
  font-size: 10.5px; color: var(--ink-3);
  margin-top: 2px;
}
.rail-item-delete {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
  flex-shrink: 0;
}
.rail-item:hover .rail-item-delete { opacity: 1; }
.rail-item.active .rail-item-delete { opacity: 0.6; }
.rail-item-delete:hover {
  background: rgba(214, 91, 60, 0.12);
  color: var(--err);
  opacity: 1;
}

/* Empty state — sparkle + suggest pills + composer, all centered */
.assistant-wrap {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px;
  height: 100%;
}
@keyframes shimmerIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes floatSpark {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(8deg); }
}
.spark {
  margin-bottom: 20px;
  color: var(--ink);
  display: inline-flex;
  animation: shimmerIn 500ms var(--ease-spring) both, floatSpark 4s ease-in-out infinite 500ms;
}
.spark-sm { margin-bottom: 0; animation: shimmerIn 360ms var(--ease-spring) both; flex: 0 0 auto; }

.suggest-pills {
  display: flex; flex-direction: column;
  gap: 10px; align-items: center;
  margin-bottom: 28px;
}
.suggest-pill {
  background: linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%);
  border: 1px solid rgba(22,24,28,0.1);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  font: inherit; font-size: 13.5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(22,24,28,0.05),
    0 1px 2px rgba(22,24,28,0.05),
    0 3px 8px -3px rgba(22,24,28,0.1);
  transition: transform 100ms ease, box-shadow 160ms ease, background 140ms ease, color 120ms ease;
}
.suggest-pill:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e9ecf0 100%);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(22,24,28,0.07),
    0 3px 6px rgba(22,24,28,0.08),
    0 8px 18px -4px rgba(22,24,28,0.15);
}
.suggest-pill:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(22,24,28,0.1); }

/* Suggestion rotation: each newly-rendered pill fades + slides in.
   Stagger is set inline via animation-delay so the four pills cascade
   instead of popping together. */
.suggest-pill {
  animation: suggestFadeIn 260ms var(--ease-out) both;
}
@keyframes suggestFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* While the container is in the swap phase, all current pills fade out
   in unison before the JS replaces innerHTML. */
.suggest-pills.is-swapping .suggest-pill {
  animation: suggestFadeOut 200ms var(--ease-out) forwards;
  animation-delay: 0ms !important;
}
@keyframes suggestFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
/* Conversation state — messages above, composer pinned at bottom */
.assistant-conv {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 32px 40px;
  overflow-y: auto;
  height: 100%;
}
/* The conversation scrolls (either here or on .main depending on
   content height) but shows no scrollbar — operator request 2026-08-01:
   the visible gutter next to the chat read as clutter. Scrolling still
   works via wheel/trackpad/keys; JS auto-scrolls to the newest reply. */
.assistant-conv {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.assistant-conv::-webkit-scrollbar { width: 0; height: 0; display: none; }
.assistant-msgs {
  display: flex; flex-direction: column;
  gap: 18px;
}
.composer-anchor {
  /* Pin the composer to the bottom of the viewport (fixed, not sticky —
     the body is what scrolls, not the conv). Horizontally centered in
     the DISCUSSION PANEL, not the viewport: we shift right by half the
     sidebar width so the composer visually sits in the middle of the
     chat content area, not the middle of (sidebar + chat).

     Vertical position: bottom: 38px keeps the composer INSIDE the chat
     panel's visible boundary. The panel (.main) has margin-bottom: 22px
     (so its bottom edge is 22px above viewport bottom). A bare bottom:
     16px would put the composer 6px past the panel's bottom edge —
     visible as the composer "hanging out" below the rounded panel
     corner. Fixed 2026-05-27 after operator complaint. */
  position: fixed;
  bottom: 38px;
  /* Offset by half the sidebar width so the composer is centered in
     the chat panel rather than the full viewport. Falls back to
     viewport center if --sidebar-w isn't defined. */
  left: calc(50% + (var(--sidebar-w, 0px) / 2));
  transform: translateX(-50%);
  width: min(640px, calc(100vw - var(--sidebar-w, 0px) - 80px));
  margin-top: 0;
  display: flex; justify-content: center;
  padding-top: 16px;
  padding-bottom: 0;
  z-index: 10;
  pointer-events: none;
  background: transparent;
}
.composer-anchor > .composer {
  pointer-events: auto;
  /* Elevation shadow using plain rgba — color-mix(in oklab, ...) was
     silently invalidating the whole property in some browsers so the
     shadow never rendered. !important guarantees it wins over the
     .composer rule's --shadow-card default further down the file. */
  box-shadow:
    0 16px 36px -14px rgba(22, 24, 28, 0.28),
    0 6px 14px -8px rgba(22, 24, 28, 0.18),
    0 1px 0 0 rgba(22, 24, 28, 0.08) !important;
}
/* Compensate for the fixed composer with bottom padding on the conv
   so the last message isn't covered. With the composer now at
   bottom: 38px (to stay inside the panel) and a height of ~100px
   including its padding, plus a 20px breathing buffer, we reserve
   ~170px. */
.assistant-conv {
  padding-bottom: 170px;
}
/* Narrow viewports — sidebar collapses, composer takes more width and
   centers on viewport instead of offset by sidebar. */
@media (max-width: 900px) {
  .composer-anchor {
    left: 50%;
    width: min(640px, calc(100vw - 32px));
  }
}

/* User bubble (right-aligned, soft surface) */
.user-bubble-row {
  display: flex; justify-content: flex-end;
  animation: rowFadeIn 280ms var(--ease-out) both;
}
.user-bubble {
  align-self: flex-end;
  background: var(--surface-soft);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 70%;
  white-space: pre-wrap; word-wrap: break-word;
}

/* AI reply (sparkle + text, left-aligned) */
.ai-reply {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 85%;
  animation: rowFadeIn 320ms var(--ease-out) both;
}
.ai-reply-body { min-width: 0; flex: 1; }
.ai-reply-text {
  font-size: 15px; line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap; word-wrap: break-word;
}
.ai-reply-text p { margin: 0 0 10px; }
.ai-reply-text p:last-child { margin-bottom: 0; }
.ai-reply-text ul, .ai-reply-text ol { margin: 6px 0 10px 1.25rem; padding: 0; }
.ai-reply-text li { margin-bottom: 3px; }
.ai-reply-text code {
  background: var(--pill); padding: 1px 6px;
  border-radius: 5px; font-size: 12.5px;
}
.ai-reply-error .ai-reply-text {
  color: var(--tag-rose-ink);
}

/* Typewriter — while a fresh reply is being revealed, the body is a
   plain <span class="tw-text"> followed by a blinking caret block.
   The caret MUST be a DOM sibling of the text so it slides with the
   trailing edge as characters are appended. */
.ai-reply-text.streaming .tw-text {
  /* inherits font-size/line-height from .ai-reply-text */
}
.tw-caret {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--ink);
  animation: tw-blink 0.9s steps(2, end) infinite;
}
@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-caret { display: none; }
}

/* Coworker-style thinking indicator: rotating status text only —
   the old 3-dot animation was retired 2026-05-28 in favour of a
   sparkle that rotates continuously and a "wave of reflection"
   shimmer that sweeps across the status text. Status phrase advances
   through phases as time passes (see THINKING_PHASES in ai-chat.js). */
.thinking-coworker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}
.thinking-status {
  font-size: 13.5px;
  color: var(--ink-2);
  font-style: italic;
  /* JS swaps the textContent on phrase change; the transition smooths
     the in/out opacity flip. The shimmer-sweep below runs independently
     and is only paused while the text is being replaced. */
  transition: opacity 200ms ease;
  animation: thinkingFadeIn 220ms var(--ease-out) both;
}
@keyframes thinkingFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Glassy "wave of reflection" — a vertical band of light sweeps left-
   to-right across the letterforms via a moving linear-gradient that's
   clipped to text. The base color stays the muted ink so the text
   remains legible; only the sheen moves. Two layers stacked:
     - layer 1: text color (clipped fallback, in case background-clip
       is unsupported)
     - layer 2: the sweeping gradient, clipped to the letters
   On WebKit-derived engines we use -webkit-text-fill-color: transparent
   so the background shows through; the fallback color: var(--ink-2)
   keeps the text visible everywhere else. */
.thinking-shimmer {
  background: linear-gradient(
    100deg,
    var(--ink-2) 0%,
    var(--ink-2) 38%,
    rgba(255, 255, 255, 0.95) 50%,
    var(--ink-2) 62%,
    var(--ink-2) 100%
  );
  background-size: 220% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    thinkingFadeIn  220ms var(--ease-out) both,
    shimmer-sweep   2.4s  ease-in-out 220ms infinite;
}
@keyframes shimmer-sweep {
  0%   { background-position:  200%  0; }
  100% { background-position: -100%  0; }
}

/* Spinning sparkle while pending. Overrides the floatSpark bob that
   the .spark base sets — we want continuous rotation, not bobbing,
   when work is in flight. The spin starts gently (no spring) so the
   moment of "send" reads as engaged-but-calm, not frantic. */
.spark-spinning {
  animation:
    shimmerIn  360ms var(--ease-spring) both,
    spark-spin 2.2s  linear 360ms infinite;
}
@keyframes spark-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Honor reduced-motion: drop both animations, keep the static look. */
@media (prefers-reduced-motion: reduce) {
  .thinking-shimmer {
    animation: thinkingFadeIn 220ms var(--ease-out) both;
    background: none;
    -webkit-text-fill-color: var(--ink-2);
            color: var(--ink-2);
  }
  .spark-spinning { animation: shimmerIn 360ms var(--ease-spring) both; }
}

/* Inline single-select picker raised by the askUserChoice meta-tool.
   Sits inside .ai-reply-body, between the reply text and any artifacts.
   Card is tight (no full-width fill) so it reads as part of the message,
   not a modal. Once the user answers, the .answered variant collapses
   to just the question line in muted color. */
.choice-card {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 540px;
}
.choice-card-answered {
  border-style: dashed;
  padding: 8px 12px;
  background: transparent;
}
.choice-question {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
}
.choice-card-answered .choice-question { font-size: 12.5px; }
.choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choice-btn {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt, var(--surface));
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms;
}
.choice-btn:hover {
  background: var(--surface-hover, #f3f3ef);
  border-color: var(--text-muted, #b3b3a8);
}
.choice-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.choice-btn-ghost {
  background: transparent;
  color: var(--text-muted, #6a6e64);
}
.choice-freeform { display: flex; flex-direction: column; gap: 8px; }
.choice-freeform-input {
  display: flex;
  gap: 6px;
  align-items: center;
}
.choice-freeform-field {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  background: var(--surface);
}
.choice-freeform-field:focus {
  outline: none;
  border-color: var(--accent, #1d1f22);
}

/* Artifacts (kept below AI reply) */
.artifact-stack { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.artifact-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.artifact-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}
.artifact-icon.pdf  { background: linear-gradient(160deg, #e87a5d, #c84a2c); }
.artifact-icon.xlsx { background: linear-gradient(160deg, #4ab27a, #2f8050); }
.artifact-icon.html { background: linear-gradient(160deg, #6a7480, #3a4250); }
.artifact-body { min-width: 0; }
.artifact-name {
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artifact-meta { margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
.artifact-actions { display: flex; gap: 6px; }

.msg-evidence {
  margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  font-size: 11px;
}
.msg-evidence code {
  background: var(--tag-mint); color: var(--tag-mint-ink);
  border: 0;
}
.msg-actions { display: flex; gap: 6px; margin-top: 12px; }

/* Composer (mock-style) */
.composer {
  width: min(640px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.context-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--tag-sky);
  color: var(--tag-sky-ink);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 500;
}
.context-bar .articles {
  margin-left: auto;
  background: rgba(52, 89, 142, 0.15);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  flex-shrink: 0;
}
.context-bar .ctx-files {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.context-bar .ctx-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(52, 89, 142, 0.15);
  padding: 2px 4px 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  max-width: 100%;
}
.context-bar .ctx-file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.context-bar .ctx-file-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--tag-sky-ink);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms ease, background 120ms ease;
  padding: 0;
  flex-shrink: 0;
}
.context-bar .ctx-file-x:hover {
  opacity: 1;
  background: rgba(52, 89, 142, 0.2);
}
.composer-input {
  border: 0;
  background: transparent;
  resize: none;
  outline: none;
  min-height: 40px;
  /* Auto-grow: JS (autosizeComposer in ai-chat.js) sets the height to
     match the content up to this cap; past it the textarea scrolls
     internally, with the scrollbar hidden below so it never shows a
     "box in a box" scroll gutter. Keep in sync with
     COMPOSER_INPUT_MAX_PX in ai-chat.js. */
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge */
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  padding: 0;
  box-shadow: none;
  width: 100%;
}
.composer-input::-webkit-scrollbar { width: 0; height: 0; display: none; }
.composer-input:hover, .composer-input:focus {
  border: 0;
  box-shadow: none;
  background: transparent;
}
.composer-input::placeholder { color: var(--ink-3); }
.composer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.composer-actions .right { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 7px;
  cursor: pointer;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, box-shadow 140ms ease, color 120ms ease, transform 100ms ease;
}
.icon-btn.small {
  padding: 5px;
  border-radius: 8px;
}
.icon-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eef1f5 100%);
  color: var(--ink);
  border-color: rgba(22,24,28,0.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(22,24,28,0.06),
    0 2px 5px -2px rgba(22,24,28,0.08);
}
.icon-btn:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #e8ebef 0%, #eef1f4 100%);
  box-shadow: inset 0 2px 3px rgba(22,24,28,0.08);
}

.send-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.25), transparent 55%),
    linear-gradient(180deg, #2c2f36 0%, #16181c 100%);
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid #0a0c10;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 1px 0 rgba(255,255,255,0.6),
    0 4px 10px -2px rgba(22,24,28,0.4),
    0 2px 4px -2px rgba(22,24,28,0.25);
  transition: transform 100ms ease, filter 120ms ease, box-shadow 140ms ease;
}
.send-btn:hover { filter: brightness(1.1); }
.send-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); }
.send-btn:disabled { cursor: not-allowed; opacity: 0.7; }

.spinner {
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Modal = right-slide side panel ─────────────────────────────── */
.modal {
  position: fixed; inset: 0;
  overflow: hidden;     /* prevent the slide-in card from causing a scrollbar flash */
  background: rgba(22,24,28,0.22);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  z-index: 80; padding: 0;
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms var(--ease-out), visibility 0s linear 0s;
}
.modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
}

/* ── Modal centered dialog variant ──────────────────────────────── *
 * Apply .modal--center on the backdrop element to get a floating
 * dialog instead of a right-side drawer. Card uses scale+fade so
 * nothing ever moves laterally — no scroll flash possible.          */
.modal--center {
  justify-content: center;
  align-items: center;
  padding: 24px;
  background: rgba(22,24,28,0.32);
}
.modal--center .modal-card {
  width: min(540px, 92vw);
  max-height: 72vh;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  box-shadow:
    0 0 0 1px rgba(22,24,28,0.04),
    0 8px 24px -4px rgba(22,24,28,0.14),
    0 24px 56px -8px rgba(22,24,28,0.18);
  animation: modalCenterIn 180ms var(--ease-out) both;
}
@keyframes modalCenterIn {
  from { transform: scale(0.96) translateY(6px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);   opacity: 1; }
}

.modal-card {
  background: var(--surface);
  border-radius: 0;
  border: 0;
  border-left: 1px solid var(--line);
  width: min(720px, 92vw);
  height: 100%;
  max-height: none;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: -20px 0 60px -20px rgba(22,24,28,0.25);
  animation: modalSlideIn 320ms var(--ease-out) both;
  /* Promote to its own compositor layer so the slide-in is GPU-only. */
  will-change: transform;
}
@keyframes modalSlideIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--line-2);
  flex-shrink: 0;
}
.modal-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.modal-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0;
}
.doc-frame {
  width: 100%;
  height: 100%;
  min-height: 70vh;
  border: 0;
  background: #fff;
}
.doc-pre {
  white-space: pre-wrap; word-wrap: break-word;
  padding: 22px 26px; margin: 0;
  background: var(--surface); border: 0;
  font-family: var(--font-display); font-size: 13.5px;
  line-height: 1.55;
}
.modal-meta {
  padding: 12px 26px 18px;
  border-top: 1px solid var(--line-2);
  font-size: 12px;
  flex-shrink: 0;
}
.modal-meta summary { cursor: pointer; color: var(--ink-3); }
.modal-meta pre { margin-top: 8px; }

/* ── Document tiles ─────────────────────────────────────────────── */
.doc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.doc-tile {
  position: relative;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, box-shadow 200ms var(--ease-out);
}
.doc-tile:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(22,24,28,0.04),
    0 4px 10px rgba(22,24,28,0.08),
    0 18px 40px -16px rgba(22,24,28,0.18);
}
.doc-tile h3 {
  margin: 0; font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.doc-tile .doc-meta {
  display: flex; gap: 8px; align-items: center;
  font-size: 11px; color: var(--ink-3);
}
.doc-tile .doc-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: auto;
}

/* ── Policy hub KPIs ────────────────────────────────────────────── */
.totals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}
.kpi {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  min-width: 0;
}
.kpi-label {
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.kpi-value {
  font-size: 18px;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.contract-block {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.contract-block:first-of-type { border-top: 0; padding-top: 0; }
.contract-block summary { list-style: revert; cursor: pointer; }
.banner {
  background: var(--tag-amber);
  border: 0;
  color: var(--tag-amber-ink);
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Compliance-feed pattern (lists + filter pills + status rows) ── */
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 14px;
  flex-wrap: wrap;
  /* New stacking context that contains the setup popover. isolation
     forces it regardless of z-index inheritance quirks; the high z-index
     keeps it above the feed-list below. */
  position: relative;
  z-index: 50;
  isolation: isolate;
}
.filter-row .spacer { flex: 1; }

.tab-pill {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease, box-shadow 140ms ease, transform 100ms ease;
}
.tab-pill:hover:not(.active) { background: rgba(22,24,28,0.05); color: var(--ink); }
.tab-pill.active {
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
  border-color: rgba(22,24,28,0.1);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(22,24,28,0.04),
    0 1px 2px rgba(22,24,28,0.06),
    0 2px 6px -2px rgba(22,24,28,0.1);
}
.tab-pill .num {
  color: var(--ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tab-pill.active .num { color: var(--ink-2); }

.search-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ffffff 0%, #f0f2f5 100%);
  border: 1px solid rgba(22,24,28,0.1);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(22,24,28,0.05),
    0 1px 2px rgba(22,24,28,0.06),
    0 2px 6px -2px rgba(22,24,28,0.08);
  transition: transform 100ms ease, box-shadow 140ms ease, background 120ms ease;
}
.search-pill:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e9ecf0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(22,24,28,0.07),
    0 2px 4px rgba(22,24,28,0.08),
    0 4px 10px -2px rgba(22,24,28,0.12);
}
.search-pill:active { transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(22,24,28,0.1); }

/* Feed list (status circle + body + flag/extra + tags) */
.feed-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  /* Explicit stacking context below the filter-row so the setup popover
     and tab pills always sit on top of the rows. */
  position: relative;
  z-index: 1;
}
.feed-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  /* Animate only transform/background. Dropping box-shadow from the
     transition (and from :hover) eliminates per-frame repaints on a
     list that can be hundreds of rows. The hairline separator below
     uses border-top instead of inset shadow for the same reason. */
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
  position: relative;
  animation: rowFadeIn 280ms var(--ease-out) both;
  border: 0;
  background: transparent;
  font: inherit;
  width: 100%;
  text-align: left;
  /* Hint to the browser: this element will animate transform. The row
     gets its own compositor layer so hover lifts are GPU-only. */
  will-change: transform;
  /* Isolate paint to this row — hovering one doesn't invalidate the
     paint area of its siblings. */
  contain: layout style;
}
.feed-row + .feed-row { border-top: 1px solid var(--line-2); }
.feed-row:hover {
  background: var(--surface-soft);
  transform: translateX(2px);
}

/* Status circle (clickable) */
.row-status {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform 200ms var(--ease-spring);
}
.row-status:hover { transform: scale(1.12); }

.status-ring {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px dashed var(--ink-4);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), transparent 60%);
  box-shadow: inset 0 1px 1px rgba(22,24,28,0.06);
  transition: border-color 180ms var(--ease-out);
}
.status-ring.solid { border-style: solid; border-color: var(--ink-4); }
.row-status:hover .status-ring { border-color: var(--ink-3); }

.status-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.45), transparent 55%),
    linear-gradient(180deg, #3eb878 0%, #2f9e62 60%, #258450 100%);
  color: white;
  display: grid; place-items: center;
  animation: statusPop 360ms var(--ease-spring) both;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 1px 2px rgba(47,158,98,0.4),
    0 2px 6px -2px rgba(47,158,98,0.35);
}
.status-x {
  width: 20px; height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.4), transparent 55%),
    linear-gradient(180deg, #c5c8cf 0%, #9ea2a9 100%);
  color: white;
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 1px 2px rgba(22,24,28,0.15);
}
.status-warn {
  width: 20px; height: 20px;
  border-radius: 5px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.4), transparent 55%),
    linear-gradient(180deg, #e87a5d 0%, #d65b3c 100%);
  color: white;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 1px 2px rgba(214,91,60,0.4),
    0 2px 6px -2px rgba(214,91,60,0.35);
}

/* Golden variant of the warn badge - pending ("a confirmer") advisors and
   firms in Organization. Same rounded-square shape as the red warn badge,
   brighter gold gradient, dark glyph for contrast. */
.status-warn.amber {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(180deg, #fbcf3a 0%, #f7b500 60%, #e0950a 100%);
  color: #5b2c08;
}

@keyframes statusPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* Row body */
.row-body { min-width: 0; }
.row-title {
  font-size: 14.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-3);
}
.src-chip {
  background: linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%);
  border: 1px solid rgba(22,24,28,0.1);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 11.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 1px rgba(22,24,28,0.04);
}
.dot-sep { color: var(--ink-4); }

/* Overlap-conflict badge on /reports rows. Red-tinted chip indicates the
   report shares a period with another report for the same advisor+insurer
   — operator may want to review which is authoritative. Title attribute
   gives the full overlap details on hover. */
.overlap-badge {
  display: inline-flex;
  align-items: center;
  background: #fde4e2;
  border: 1px solid #f3c5c2;
  color: #b3261e;
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-left: 4px;
  cursor: help;
}
[data-theme="dark"] .overlap-badge {
  background: rgba(179, 38, 30, 0.18);
  border-color: rgba(179, 38, 30, 0.45);
  color: #f8b3ae;
}

/* Tag chips (colored pills on the right of feed rows) */
.feed-tags {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end;
}
.tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(22,24,28,0.05),
    0 1px 1px rgba(22,24,28,0.04);
}
.tag.mint     { background: var(--tag-mint);     color: var(--tag-mint-ink); }
.tag.amber    { background: var(--tag-amber);    color: var(--tag-amber-ink); }
.tag.rose     { background: var(--tag-rose);     color: var(--tag-rose-ink); }
.tag.lavender { background: var(--tag-lavender); color: var(--tag-lavender-ink); }
.tag.sand     { background: var(--tag-sand);     color: var(--tag-sand-ink); }
.tag.sky      { background: var(--tag-sky);      color: var(--tag-sky-ink); }

/* Filter popover (secondary filters). Internal class name kept as
   .setup-pop for backwards compatibility; user-facing label is "Filter". */
.setup-pop {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 320px;
  /* Solid surface — was var(--surface-blur) at 72% alpha which let the
     feed-list rows underneath bleed through the popover, making the
     Apply button look like it was clipped by row content. */
  background: var(--surface, #ffffff);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow:
    0 12px 28px -8px rgba(22, 24, 28, 0.18),
    0 4px 12px -2px rgba(22, 24, 28, 0.10),
    0 0 0 1px rgba(22, 24, 28, 0.04);
  padding: 14px;
  /* Pushed well above feed-list rows. The earlier value of 50 was being
     defeated by a parent stacking context on some pages. 1000 covers any
     reasonable nesting. */
  z-index: 1000;
  animation: pop 240ms var(--ease-spring) both;
}
@keyframes pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.setup-pop h4 {
  margin: 4px 4px 12px;
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.setup-pop .field { margin-bottom: 10px; }
.setup-pop .field:last-child { margin-bottom: 0; }
.setup-pop label {
  font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.02em; text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 5px;
}
.setup-actions {
  display: flex; gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
}
.setup-anchor { position: relative; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 880px) {
  :root { --sidebar-w: 64px; }
  .brand-text, .nav a span.lbl, .side-foot .who, .nav .sec { display: none; }
  .nav a { justify-content: center; padding: 9px; }
  .side-foot { padding: 8px; justify-content: center; }
  .msg { max-width: 100%; }
  .brand-mark { padding: 6px 0 14px; justify-content: center; }
}
@media (max-width: 600px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: relative; height: auto; top: 0;
    flex-direction: row; align-items: center; gap: 8px;
    padding: 10px 12px;
  }
  .nav { flex-direction: row; gap: 4px; flex: 1; overflow-x: auto; }
  .side-foot { display: none; }
  .brand-text { display: block; }
  .shell { padding: 10px; }
  .main { padding: 10px; }
  .assistant-conv { padding: 20px 18px; }
  .assistant-wrap { padding: 28px 18px; }
}

/* ── Dark mode ──────────────────────────────────────────────────────
 * Overrides the :root variables so every var-driven element flips
 * automatically. A few elements use hard-coded gradients (buttons,
 * body background) and need explicit overrides below.
 *
 * Activated by setting `data-theme="dark"` on <html>. lib/theme.js handles
 * that, plus a tiny inline script in index.html applies it before CSS
 * parses to avoid a flash of light theme on load.
 * ─────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  /* Surface */
  --bg: #0d0f13;
  --bg-2: #11141a;
  --surface: #161a20;
  --surface-soft: #1e232a;
  --surface-blur: rgba(22, 26, 32, 0.72);

  /* Ink */
  --ink: #e8eaed;
  --ink-2: #b3b8c0;
  --ink-3: #7f858f;
  --ink-4: #4f545c;

  /* Lines */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.04);

  /* Pill */
  --pill: rgba(255, 255, 255, 0.06);
  --pill-hover: rgba(255, 255, 255, 0.1);
  --pill-active: #e8eaed;
  --pill-active-ink: #0d0f13;

  /* Tag palette — keep hue, darker fill, brighter ink for legibility */
  --tag-mint:     #1f3a2b;  --tag-mint-ink:     #6fc28e;
  --tag-amber:    #3a2c14;  --tag-amber-ink:    #d7a45c;
  --tag-rose:     #3a1f1f;  --tag-rose-ink:     #df8676;
  --tag-lavender: #2a2540;  --tag-lavender-ink: #b3a8e8;
  --tag-sand:     #2c2c25;  --tag-sand-ink:     #b8b8a3;
  --tag-sky:      #1c3146;  --tag-sky-ink:      #87aed8;

  /* Status — bumped slightly brighter so they pop on dark */
  --ok:   #45c486;
  --warn: #e8b357;
  --err:  #ec806a;

  /* Legacy aliases */
  --gray-1: #1a1d23;
  --gray-2: #22262d;
  --gray-3: #2d323b;

  /* Shadow — softer + darker, dark surfaces need less light bouncing */
  --shadow-card:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 6px 16px -8px rgba(0, 0, 0, 0.6);
  --shadow-pop:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 16px 40px -12px rgba(0, 0, 0, 0.7);
  --shadow-shell:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 18px 50px -20px rgba(0, 0, 0, 0.6);
}

/* Body background: kill the light radial highlights entirely. A perfectly
   flat surface reads better than a gradient that's just barely visible. */
[data-theme="dark"] body {
  background: var(--bg);
}

/* ── Flat design pass for dark mode ─────────────────────────────────
 * Light theme leans into texture: inset highlights, radial sheens,
 * top-to-bottom gradients on every button and chip. On a dark surface
 * that reads as visual noise — chips look like crusty 3D buttons. We
 * flatten everything: solid backgrounds, hairline borders for definition,
 * and a small outer drop shadow when the element should feel raised.
 *
 * Nothing in this section touches the light theme.
 * ─────────────────────────────────────────────────────────────────── */

/* Buttons */
[data-theme="dark"] .btn {
  background: #1d2027;
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .btn:hover {
  background: #242830;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .btn:active {
  background: #181b21;
  box-shadow: 0 0 0 0 transparent;
  transform: translateY(1px);
}
[data-theme="dark"] .btn.primary {
  background: #0e1116;
  color: #f5f6f8;
  border-color: #000;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 4px 10px -4px rgba(0, 0, 0, 0.75);
}
[data-theme="dark"] .btn.primary:hover {
  filter: none;
  background: #15191f;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 6px 14px -4px rgba(0, 0, 0, 0.85);
}
[data-theme="dark"] .btn.primary:active {
  background: #0a0c10;
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .btn.danger {
  background: #241413;
  border-color: rgba(236, 128, 106, 0.32);
  color: var(--err);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .btn.danger:hover {
  background: #2c1816;
  border-color: rgba(236, 128, 106, 0.5);
}
[data-theme="dark"] .btn.ghost {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  color: var(--ink-2);
}
[data-theme="dark"] .btn.ghost:hover {
  background: #1d2027;
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Tabs, pills, chips — flat surface, hairline border. No inset glow. */
[data-theme="dark"] .tab.active,
[data-theme="dark"] .tab-pill.active,
[data-theme="dark"] .search-pill,
[data-theme="dark"] .suggest-pill {
  background: #1d2027;
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .src-chip {
  background: #1d2027;
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--ink-2);
  box-shadow: none;
}
[data-theme="dark"] .suggest-pill:hover,
[data-theme="dark"] .search-pill:hover {
  background: #242830;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Tag pills — keep the colored fill from the variables, kill the inset
   highlight and tiny drop shadow so they sit flat on the surface. */
[data-theme="dark"] .pill,
[data-theme="dark"] .tag {
  box-shadow: none;
}

/* Cards / panels / shells / sign-in card / KPI / banner / artifact-card
   / composer — all light-theme rules use inset top-row highlights.
   Override the shell shadow stack to a single soft drop shadow. */
[data-theme="dark"] .main,
[data-theme="dark"] .signin-card,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .artifact-card,
[data-theme="dark"] .composer,
[data-theme="dark"] .setup-pop,
[data-theme="dark"] .doc-tile {
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .doc-tile:hover {
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.8);
}

/* KPI tiles — flat solid surface, no inset. */
[data-theme="dark"] .kpi {
  background: #1a1d23;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* Inputs — strip the inset white highlight. A 1px border + the dark
   surface is enough definition. */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  box-shadow: none;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

/* Status icons (rounded badges with a sheen in light mode) — flatten to
   a single solid fill. The icon glyph inside stays white. */
[data-theme="dark"] .status-check {
  background: #2f9e62;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .status-x {
  background: #4f545c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .status-warn {
  background: #c84a2c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .status-warn.amber {
  background: #e0950a;
  color: #fff7ed;
}
[data-theme="dark"] .status-ring {
  background: transparent;
  box-shadow: none;
}

/* AI chat send button + composer icons — flatten the dark gradient and
   the white inset on the send button. */
[data-theme="dark"] .send-btn {
  background: #0e1116;
  border-color: #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .send-btn:hover { filter: none; background: #181b21; }
[data-theme="dark"] .send-btn:active { background: #0a0c10; transform: translateY(1px); box-shadow: none; }

/* Brand tile (sidebar P logo) and side-foot avatar — kill the radial
   sheen + bevel. Keep the brand recognizable with a flat fill. */
[data-theme="dark"] .brand-tile {
  background: #f0f1f3;
  color: #0d0f13;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .side-foot .avatar {
  background: #b95e2e;     /* the orange the light theme implied — solid */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Page-head h1 decoration (the purple square next to the screen title)
   was a radial gradient pseudo-element in light mode. Flatten it. */
[data-theme="dark"] .page-head h1::before {
  background: #a89fdc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Artifact-format icons (PDF / XLSX / HTML) — flat colored tiles. */
[data-theme="dark"] .artifact-icon.pdf  { background: #c84a2c; box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
[data-theme="dark"] .artifact-icon.xlsx { background: #2f8050; box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
[data-theme="dark"] .artifact-icon.html { background: #3a4250; box-shadow: 0 1px 2px rgba(0,0,0,0.5); }

/* Toast is already a near-black gradient. In flat dark mode we want a
   solid surface with a soft drop. */
[data-theme="dark"] #toast {
  background: #0e1116;
  border-color: #000;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.8);
}
[data-theme="dark"] #toast.error {
  background: #b9442b;
  border-color: #8a2f17;
}

/* Settings modal backdrop is inline-styled in settings.js (fixed rgba);
   the modal card uses var(--surface) so it inherits the dark surface. */

/* ── Settings sub-headings (h3 inside the Settings body panel) ──────
 * Used by the Account / Security / Firm sections to group related fields.
 * Light-weight: thin uppercase, low contrast — never competes with the
 * modal's main h2 title in the header. Theme-aware via vars. */
.set-h3 {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: 0 0 10px;
}

/* ── Book Valuation — summary bar ───────────────────────────────────────── */
.val-summary {
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-shell);
  border: 1px solid var(--line);
}

/* Hero cell — dark background, total valuation */
.val-summary-hero {
  background: var(--ink);
  padding: 14px 22px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}
.val-summary-hero .val-summary-label {
  color: rgba(255,255,255,0.45);
}
.val-summary-hero-val {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: 3px;
}

/* Stats grid — fills the rest */
.val-summary-stats {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  background: var(--surface);
}
.val-summary-stat {
  flex: 1;
  padding: 12px 16px;
  text-align: center;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 70px;
}
.val-summary-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.val-summary-num {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.val-summary-num--ok {
  color: #16a34a;
}
.val-summary-num--warn {
  color: #b45309;
}
.val-summary-num--danger {
  color: #dc2626;
}

/* Clickable stat cell highlight on hover */
#errors-stat:hover .val-summary-num--danger {
  text-decoration: underline dotted;
}

/* ── Book Valuation — confirmation card ──────────────────────────────────── */
.val-confirm-card {
  max-width: 560px;
  margin: 20px auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(22,24,28,0.04),
    0 4px 16px -2px rgba(22,24,28,0.08);
}

/* While the confirmation queue is active, the results section shows ONLY the
   confirmation card. Its other contents (back link, summary bar, unresolved
   banner, results table, resolve panel) are suppressed until every row is
   confirmed, then revealed when the card is hidden. The card itself is a child
   of #results-section, so this keeps it visible while hiding its siblings. */
#results-section.confirming > :not(#confirm-card) { display: none !important; }

/* Accent bar removed per feedback */
.val-confirm-accent { display: none; }

/* Progress row */
.val-confirm-progress-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.val-confirm-progress-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.val-confirm-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #2563eb);
}
.val-confirm-track {
  height: 4px;
  background: var(--line);
  border-radius: 4px;
  margin-bottom: 28px;
  overflow: hidden;
}
.val-confirm-bar {
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  border-radius: 4px;
  transition: width .25s ease;
}

/* Submitted product name — tinted inset box */
.val-confirm-submitted {
  background: color-mix(in srgb, var(--accent, #2563eb) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 15%, transparent);
  border-radius: 10px;
  padding: 18px 20px 16px;
  text-align: center;
  margin-bottom: 20px;
}
.val-confirm-submitted-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, #2563eb) 60%, var(--ink-3));
  margin-bottom: 8px;
}
.val-confirm-submitted-insurer {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.val-confirm-submitted-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}

/* Context line (client name / N policies) */
.val-confirm-client {
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 20px;
  min-height: 18px;
}

/* ── Book Valuation — confirmation option buttons ───────────────────────── */
.confirm-option-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
/* Left accent bar that slides in on hover */
.confirm-option-btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #2563eb, #7c3aed);
  border-radius: 8px 0 0 8px;
  transform: scaleY(0);
  transition: transform .15s var(--ease-out, cubic-bezier(.16,1,.3,1));
  transform-origin: center;
}
.confirm-option-btn:hover {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 40%, var(--line));
  background: color-mix(in srgb, var(--accent, #2563eb) 4%, var(--surface));
  box-shadow: 0 2px 8px -2px rgba(37,99,235,0.12);
}
.confirm-option-btn:hover::before {
  transform: scaleY(1);
}
.confirm-option-btn:active {
  transform: scale(0.995);
}
.confirm-option-insurer {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
  white-space: nowrap;
}
.confirm-option-sep {
  color: var(--ink-3);
  font-weight: 300;
}
.confirm-option-name {
  flex: 1;
}

/* Option card now stacks: identity row + schedule line. */
.confirm-option-btn { flex-direction: column; align-items: stretch; gap: 4px; }
.confirm-option-main { display: flex; align-items: center; gap: 8px; width: 100%; }
.confirm-option-rate {
  margin-left: auto; flex-shrink: 0;
  font-size: 12px; font-weight: 700; color: #0f766e;
  background: color-mix(in srgb, #0d9488 12%, transparent);
  padding: 1px 8px; border-radius: 999px;
}
.confirm-option-rate--none { color: var(--ink-3); background: var(--pill); font-weight: 500; }
.confirm-option-sched { display: block; }
.confirm-option-breakdown { display: block; margin-top: 1px; color: var(--ink-2); }

/* Hint banner above the options (all-same-rate / all-$0). */
.confirm-hint {
  font-size: 12.5px; padding: 8px 12px; border-radius: 8px; margin-bottom: 4px;
}
.confirm-hint--same { background: color-mix(in srgb, var(--accent,#2563eb) 9%, transparent); color: var(--accent,#2563eb); }
.confirm-hint--zero { background: color-mix(in srgb, var(--warn,#d97706) 12%, transparent); color: var(--warn,#d97706); }

.confirm-none-btn {
  display: block;
  width: 100%;
  padding: 11px 16px;
  margin-top: 4px;
  background: transparent;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  text-align: center;
  transition: border-color .12s, color .12s;
}
.confirm-none-btn:hover {
  border-color: var(--ink-3);
  color: var(--ink-2);
}

/* ── Book Valuation — drop zone ─────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 6%, transparent);
}
.drop-zone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.drop-zone-inner .btn {
  pointer-events: all;
}

/* Confidence tag colour variants */
.tag--exact       { background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; }
.tag--acronym     { background: color-mix(in srgb, #2563eb 12%, transparent); color: #1d4ed8; }
.tag--token       { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #6d28d9; }
.tag--levenshtein { background: color-mix(in srgb, #b45309 12%, transparent); color: #92400e; }
.tag--chosen      { background: color-mix(in srgb, #0891b2 12%, transparent); color: #0e7490; }
.tag--manual      { background: color-mix(in srgb, #dc2626 12%, transparent); color: #b91c1c; }
/* Report-sourced valuation (authoritative insurer report) — teal. */
.tag--report      { background: color-mix(in srgb, #0d9488 14%, transparent); color: #0f766e; }
/* Report match that couldn't be valued — amber "needs review", subtly bolder so
   it reads as an action item at a glance. Reason shown on hover (title attr). */
.tag--report_flagged { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; font-weight: 600; }
/* CPG (certificat de placement garanti / GIC) — no commission, no book value.
   Quiet slate, like a freed policy: a structural $0, not a real match. */
.tag--CPG { background: color-mix(in srgb, #64748b 14%, transparent); color: #475569; }
/* Inline commission schedule under each existing catalog product. Deliberately
   quiet — a faint sub-line that reads as PART of the product line above it, not a
   separate row: no divider between name and schedule, tight to the name, aligned
   to where the name text starts, with the row separator below the schedule. */
/* NOTE: prefixed with .catalog-table so these out-specify `.catalog-table td`
   (same specificity otherwise → the later .catalog-table td rule would win and
   these would silently do nothing). */
.catalog-table .cat-prod-row > td {
  border-bottom: none;   /* no line between the name and its schedule */
  padding-bottom: 1px;   /* pull the schedule up tight under the name */
}
.catalog-table .cat-sched-row > td {
  padding: 0 10px 11px 17px;   /* left 17px aligns with the name text (td 10 + input pad/border) */
}
.cat-sched-line {
  font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  letter-spacing: .01em; line-height: 1.3;
}
.cat-sched-empty { font-size: 11px; color: var(--ink-4, var(--ink-3)); font-style: italic; }
.cat-sched-editor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.cat-sched-bracket {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 6px;
}
.cat-sched-bracket.cat-sched-deleted { opacity: .5; text-decoration: line-through; }

/* Inline commission-schedule bracket editor for a new catalog product. */
.np-brackets { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 0; }
.np-bracket {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 6px;
}
.np-brackets-row > td { background: color-mix(in srgb, #16a34a 5%, transparent); }

/* Freed (libéré) policy — slate. Valued at $0, no further premiums. */
.tag--freed { background: color-mix(in srgb, #64748b 16%, transparent); color: #475569; }
/* "Freed" shown in the premium cell for a libéré row (vs a literal $0). */
.val-freed-premium { font-style: italic; color: #475569; }
/* Fund component (0 < rate < 1%) — indigo. Hover shows the normal/fund split. */
.tag--fund { background: color-mix(in srgb, #6366f1 14%, transparent); color: #4f46e5; }

/* ── Saved-books library ─────────────────────────────────────────────────────*/
.val-lib-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.val-lib-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.val-lib-card {
  position: relative; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px 14px; transition: border-color .14s, box-shadow .14s, transform .14s;
}
.val-lib-card:hover {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 45%, var(--line));
  box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--accent, #2563eb) 40%, transparent);
  transform: translateY(-2px);
}
.val-lib-card:focus-visible {
  outline: none;
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
}
.val-lib-card-name {
  font-weight: 600; font-size: 14.5px; color: var(--ink);
  padding-right: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.val-lib-card-total {
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 10px; color: var(--ink);
}
.val-lib-card-meta { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.val-lib-card-warn { color: var(--warn, #d97706); }
.val-lib-card-time { font-size: 11px; color: var(--ink-3); margin-top: 8px; }
.val-lib-card-actions {
  position: absolute; top: 10px; right: 10px; display: flex; gap: 2px;
  opacity: 0; transition: opacity .12s;
}
.val-lib-card:hover .val-lib-card-actions,
.val-lib-card:focus-within .val-lib-card-actions { opacity: 1; }
.val-lib-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
  background: var(--pill); color: var(--ink-2); cursor: pointer;
  font-size: 14px; line-height: 1; transition: background .12s, color .12s;
}
.val-lib-icon:hover { background: color-mix(in srgb, var(--accent, #2563eb) 16%, transparent); color: var(--accent, #2563eb); }
.val-lib-icon[data-delete]:hover { background: color-mix(in srgb, var(--danger, #dc2626) 14%, transparent); color: var(--danger, #dc2626); }
.val-lib-rename-input {
  width: 100%; box-sizing: border-box; font: inherit; font-weight: 600; font-size: 14.5px;
  padding: 2px 6px; border: 1px solid var(--accent, #2563eb); border-radius: 6px;
  background: var(--surface); color: var(--ink); outline: none;
}
.val-lib-empty { text-align: center; padding: 48px 20px; color: var(--ink-2); }
.val-lib-card--loading {
  pointer-events: none; opacity: .6;
  border-color: var(--accent, #2563eb);
}
.val-lib-card--loading::after {
  content: ""; position: absolute; top: 50%; right: 16px;
  width: 16px; height: 16px; margin-top: -8px;
  border: 2px solid color-mix(in srgb, var(--accent, #2563eb) 30%, transparent);
  border-top-color: var(--accent, #2563eb); border-radius: 50%;
  animation: valLibSpin .7s linear infinite;
}
@keyframes valLibSpin { to { transform: rotate(360deg); } }

/* Back link (library ← results / upload). */
.val-back-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 4px 8px 4px 0; margin: 0;
  font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer;
  border-radius: 6px; transition: color .12s;
}
.val-back-link:hover { color: var(--accent, #2563eb); }

/* Autosave state indicator in the results header. */
.val-save-state {
  font-size: 12px; color: var(--ink-3); font-style: italic;
  transition: color .2s; white-space: nowrap;
}
.val-save-state.val-save-error { color: var(--warn, #d97706); font-style: normal; }

/* Dismiss (×) for an unresolved-insurer banner row. */
.val-dismiss-insurer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--ink-2); font-size: 16px; line-height: 1;
  cursor: pointer; transition: background .12s, color .12s;
}
.val-dismiss-insurer:hover {
  background: color-mix(in srgb, var(--warn, #d97706) 16%, transparent);
  color: var(--warn, #d97706);
}

/* ── Fund retention control ─────────────────────────────────────────────────
   A clean, self-contained bar: title · % box · readout · toggle. No slider —
   a number is unambiguous and always correct. */
.val-fund-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, #0d9488 4%, transparent);
}
.val-fund-title {
  font-size: 13px; font-weight: 600; color: #0f766e; white-space: nowrap;
}

/* Value: a small editable pill that focuses cleanly; no spinner arrows. */
.val-fund-pct {
  display: inline-flex; align-items: center; gap: 1px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 9px; transition: border-color .12s, box-shadow .12s;
}
.val-fund-pct:focus-within { border-color: #0d9488; box-shadow: 0 0 0 2px color-mix(in srgb, #0d9488 18%, transparent); }
.val-fund-box {
  width: 34px; border: 0; background: transparent; outline: none; padding: 0;
  text-align: right; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink); -moz-appearance: textfield;
}
.val-fund-box::-webkit-outer-spin-button,
.val-fund-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.val-fund-pct-sign { font-size: 12px; color: var(--ink-3); }

.val-fund-readout { font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* "Funds only" — a proper toggle switch. */
.val-fund-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-left: auto; }
.val-fund-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.val-fund-switch {
  width: 34px; height: 18px; border-radius: 999px; background: var(--line-2);
  position: relative; flex-shrink: 0; transition: background .15s ease;
}
.val-fund-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s ease;
}
.val-fund-toggle input:checked + .val-fund-switch { background: #0d9488; }
.val-fund-toggle input:checked + .val-fund-switch::after { transform: translateX(16px); }
.val-fund-toggle input:focus-visible + .val-fund-switch { box-shadow: 0 0 0 3px color-mix(in srgb, #0d9488 22%, transparent); }
.val-fund-toggle-label {
  font-size: 12px; color: var(--ink-3); white-space: nowrap; user-select: none;
}

/* Hidden-but-scrollable: the Book Valuation page panel + the wide results table.
   Still scrolls; the scrollbar chrome is just not painted. */
.main--no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.main--no-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.val-x-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.val-x-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Book Valuation — results table ─────────────────────────────────────── */

/* Fixed table layout — browser computes column widths once at first render,
   never again. Without this, any DOM mutation in the table triggers a full
   column-width recalculation across all 2000+ rows. */
.val-results-table {
  table-layout: fixed;
  width: 100%;
}

/* Sortable header — active column highlighted, arrow indicator */
.val-th {
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: color .12s;
}
.val-th:hover { color: var(--ink-2); }
.val-th--active { color: var(--ink) !important; }
.val-sort-icon {
  display: inline-block;
  width: 14px;
  font-size: 10px;
  opacity: 0.5;
  transition: opacity .12s;
}
.val-th--active .val-sort-icon { opacity: 1; }

/* Manual (unmatched) rows — very faint tint so they stand out without screaming */
.val-row-manual td {
  background: color-mix(in srgb, #f97316 3%, transparent);
}

/* Editable cell input — seamless, inherits table cell style */
.val-edit-input {
  width: 100%;
  min-width: 60px;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: inherit;
  padding: 2px 0;
  border-radius: 4px;
  transition: background .12s, box-shadow .12s;
  /* Remove browser number spinners */
  -moz-appearance: textfield;
}
.val-edit-input::-webkit-outer-spin-button,
.val-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.val-edit-input:focus {
  background: color-mix(in srgb, var(--accent, #2563eb) 7%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 30%, transparent);
  padding: 2px 6px;
}

/* Empty manual cell — placeholder text coloured, faint */
.val-edit-empty::placeholder { color: #f97316; opacity: 0.7; }
.val-edit-empty:focus        { background: color-mix(in srgb, #f97316 6%, var(--surface)); }

/* Override confidence tag — teal-green, distinct from both "exact" and "chosen" */
.tag--override { background: color-mix(in srgb, #0891b2 12%, transparent); color: #0e7490; }

/* Insurer cell — narrow, no wrap */
.val-insurer-cell {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Product name cell — wider now that insurer is narrow */
.val-product-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Blue action button (e.g. Export CSV) */
.btn-blue {
  background: #2563eb;
  color: #fff;
  border-color: #1d4ed8;
  font-size: 13.5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 1px 3px rgba(37,99,235,0.3);
}
.btn-blue:hover {
  background: #1d4ed8;
  border-color: #1e40af;
}
.btn-blue:active { background: #1e40af; }

/* Start over — subtle red tint, not alarming */
.val-start-over-btn {
  color: var(--danger, #dc2626);
  border-color: color-mix(in srgb, var(--danger, #dc2626) 30%, var(--line));
  background: color-mix(in srgb, var(--danger, #dc2626) 5%, var(--surface));
}
.val-start-over-btn:hover {
  background: color-mix(in srgb, var(--danger, #dc2626) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--danger, #dc2626) 50%, var(--line));
}

/* Filter dropdowns in the results header */
.val-filter-select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color .12s;
}
.val-filter-select:hover  { border-color: var(--ink-3); }
.val-filter-select:focus  { border-color: var(--accent, #2563eb); }

/* ── Insurer Catalog — staged batch-edit UI ──────────────────────────────────
 * Color convention (per agreed design): orange = modified (reverts to neutral
 * if the value is changed back to its original), green = newly added row,
 * red = marked for archive/deletion. Nothing is written to the database until
 * "Save changes" is pressed; the whole view reloads (colors gone) afterward.
 */
.catalog-savebar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.catalog-savebar .sub { margin: 0; }
.catalog-savebar .spacer { flex: 1; }

.catalog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.catalog-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted, #6a6e64);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.catalog-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.catalog-table tr:last-child td { border-bottom: none; }
.catalog-table input,
.catalog-table select {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: 4px 6px;
  border-radius: 6px;
  outline: none;
}
.catalog-table input:hover,
.catalog-table select:hover { border-color: var(--border); }
.catalog-table input:focus,
.catalog-table select:focus { border-color: var(--accent, #2563eb); background: var(--surface); }

/* Cell-level state — applied to the wrapping <td> so the colored block hugs
 * the editable control, not the whole row. */
.cell-modified {
  background: color-mix(in srgb, #d9822b 16%, transparent);
  border-radius: 6px;
}
.cell-modified input,
.cell-modified select { background: transparent; }

/* Row-level state — applied to <tr>. Added/archived act on the whole record,
 * so the entire row is tinted. */
.row-added       { background: color-mix(in srgb, #2f9e57 12%, transparent); }
.row-archived    { background: color-mix(in srgb, #d23b3b 12%, transparent); }
.row-archived input,
.row-archived select { text-decoration: line-through; opacity: .65; }
.row-restored    { background: color-mix(in srgb, #2f9e57 8%, transparent); }

.catalog-state-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.catalog-state-dot.is-active   { background: #2f9e57; }
.catalog-state-dot.is-archived { background: var(--text-muted, #b3b3a8); }

.catalog-row-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.catalog-link {
  color: var(--accent, #2563eb);
  cursor: pointer;
  text-decoration: none;
}
.catalog-link:hover { text-decoration: underline; }

.catalog-archived-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted, #6a6e64); }

/* ── Book Valuation — inline resolve panel ───────────────────────────────── */

/* Each (insurer, product_name) group item */
.val-resolve-group {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 14px 18px;
  background: var(--surface);
  transition: border-color .15s;
}
.val-resolve-group:has(.val-resolve-ok) {
  border-color: color-mix(in srgb, var(--ok, #16a34a) 35%, transparent);
  background: color-mix(in srgb, var(--ok, #16a34a) 3%, var(--surface));
}

/* Header row: raw product name + insurer tag + row count + resolved badge */
.val-resolve-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.val-resolve-raw-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}

.val-resolve-insurer-tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-2);
  font-weight: 500;
}

/* Insurer selector in the resolve panel — correct a misread insurer. Styled to
   read like the insurer tag, but interactive. */
.val-resolve-insurer-select {
  font-size: 11px;
  padding: 2px 22px 2px 8px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-2);
  font-weight: 500;
  cursor: pointer;
  max-width: 220px;
}

/* "Already resolved" collapsed section (#3 — re-point resolved groups/overrides) */
.val-resolve-resolved-summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  list-style: revert;
  user-select: none;
}
.val-resolve-resolved-summary:hover { color: var(--ink); }

/* Green "✓ product name" badge shown once a group is resolved */
.val-resolve-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ok, #16a34a);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* Action button row (Assign / Create) */
.val-resolve-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Expandable sub-panel (loading spinner, browse list, form) */
.val-resolve-subpanel {
  margin-top: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--ink) 3%, var(--surface));
  border-radius: 8px;
  border: 1px solid var(--line-2);
}

/* Loading state */
.val-resolve-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: 13px;
}

/* Product search input */
.val-resolve-search {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 8px;
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.val-resolve-search:focus {
  outline: none;
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 20%, transparent);
}

/* Scrollable product list */
.val-resolve-product-list {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 10px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--surface);
}

/* Individual product option button */
.val-resolve-product-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  transition: background .1s;
}
.val-resolve-product-item:last-child { border-bottom: none; }
.val-resolve-product-item:hover {
  background: color-mix(in srgb, var(--accent, #2563eb) 6%, var(--surface));
}

/* Create product form */
.val-resolve-create-form {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.val-resolve-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.val-resolve-form-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--ink-2);
}

.val-resolve-form-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.val-resolve-form-input:focus {
  outline: none;
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2563eb) 20%, transparent);
}

/* Commission bracket rows (from_year + rate + remove) */
.val-resolve-bracket-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.val-resolve-bracket-row .val-resolve-form-input {
  flex: none; /* width set inline per field */
}

/* ── Confirmation card — remember toggle ─────────────────────────────────── */
.val-confirm-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #2563eb) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
}
/* ── Auto-create review queue (migration 091) ───────────────────────────── */

/* Yellow row background for advisors/firms with confirmation_status =
   'pending_confirmation'. Renders alongside .status-warn (already defined)
   and .pill.lavender (new below). */
.feed-row.feed-row-pending {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
}
[data-theme="dark"] .feed-row.feed-row-pending {
  background: #2a230b;
  border-left-color: #fbbf24;
}

/* Lavender pill — uses the existing .tag.lavender colour vars. */
.pill.lavender {
  background: var(--tag-lavender);
  color: var(--tag-lavender-ink);
}

/* Banner variant for the reports.js pending-confirmations row. */
.banner.banner-lavender {
  background: var(--tag-lavender);
  color: var(--tag-lavender-ink);
  border-left: 4px solid #7c3aed;
}

/* Row action button cluster — keeps Approve/Match/Edit/Reject from
   stretching the row. */
.feed-row .row-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Ingestion-run mode toggle styles live in screens/ingestion-run.js
   injectStyles() (.ir-mode-card), alongside the rest of the screen's CSS. */

/* ───────────────────────────────────────────────────────────────────
 * askUserChoice — stepped tray (design handoff 3a, 2026-08-13).
 * The picker no longer renders inside the assistant message: it docks
 * directly above the composer (same centered column) so it stays
 * reachable when the user has scrolled. One or many questions per
 * pause; answered steps collapse to chips; the transcript keeps the
 * old dashed .choice-card-answered line for PAST questions.
 * ─────────────────────────────────────────────────────────────────── */
:root {
  --ai-accent: #b9a9eb;
  --ai-accent-light: #d6cef5;
  --ai-accent-deep: #6a5bb5;
  --ai-tint: #faf9fc;
  --tray-head-bg: #16181c;
  --tray-head-ink: #fbfcfd;
  --tray-head-muted: #c9cbd2;
  --tray-head-counter-bg: rgba(255, 255, 255, 0.09);
  --tray-back-disabled: #4a4d54;
  --tray-ff-bg: #fbfbfc;
  --tray-send-bg: linear-gradient(180deg, #2c2f36, #16181c);
  --tray-send-ink: #ffffff;
  --tray-send-disabled-bg: #e7e8ec;
  --tray-send-disabled-ink: #a9acb4;
  --answered-fill: #f1f4f1;
  --answered-fill-hover: #e8efe9;
  --answered-border: rgba(93, 138, 99, 0.28);
  --answered-ink: #3f5c44;
  --answered-icon: #5d8a63;
  --answered-index: #7d9481;
  --tray-shadow: 0 20px 40px -18px rgba(22, 24, 28, 0.30), 0 3px 8px -4px rgba(22, 24, 28, 0.16);
}
:root[data-theme="dark"] {
  --ai-accent: #a393dd;
  --ai-accent-light: #7c6fc0;
  --ai-accent-deep: #b3a8e8;
  --ai-tint: #1d1a28;
  --tray-head-bg: #22262d;
  --tray-head-ink: #e8eaed;
  --tray-head-muted: #9aa0aa;
  --tray-head-counter-bg: rgba(255, 255, 255, 0.08);
  --tray-back-disabled: #5a5f68;
  --tray-ff-bg: #1a1d23;
  --tray-send-bg: linear-gradient(180deg, #e8eaed, #cfd3d9);
  --tray-send-ink: #0d0f13;
  --tray-send-disabled-bg: #2d323b;
  --tray-send-disabled-ink: #6a6f78;
  --answered-fill: #1f3a2b;
  --answered-fill-hover: #254733;
  --answered-border: rgba(111, 194, 142, 0.30);
  --answered-ink: #9fd4af;
  --answered-icon: #6fc28e;
  --answered-index: #7fae8d;
  --tray-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6), 0 3px 8px -4px rgba(0, 0, 0, 0.4);
}

@keyframes pickerIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Dock column: chips → tray → composer. Lives INSIDE .composer-anchor. */
.choice-dock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

/* ── Tray ── */
.choice-tray {
  background: var(--surface);
  border: 1px solid rgba(22, 24, 28, 0.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--tray-shadow);
  animation: pickerIn 220ms ease-out;
}
:root[data-theme="dark"] .choice-tray { border-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .choice-tray { animation: none; } }

.choice-tray-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px 11px 10px;
  background: var(--tray-head-bg);
  color: var(--tray-head-ink);
}
.choice-tray-back {
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 5px;
  display: inline-flex;
  color: var(--tray-head-ink);
  cursor: pointer;
  flex: 0 0 auto;
}
.choice-tray-back:hover { background: rgba(255, 255, 255, 0.1); }
.choice-tray-back:disabled { color: var(--tray-back-disabled); cursor: default; background: transparent; }
.choice-tray-mark {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: linear-gradient(140deg, var(--ai-accent-light), var(--ai-accent));
  flex: 0 0 15px;
}
.choice-tray-q {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  min-width: 0;
}
.choice-tray-counter {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--tray-head-muted);
  background: var(--tray-head-counter-bg);
  border-radius: 5px;
  padding: 3px 7px;
  flex: 0 0 auto;
}

.choice-tray-opts { max-height: 210px; overflow: auto; }

.choice-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-left: 3px solid transparent;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
}
.choice-opt:hover,
.choice-opt.prev-pick { background: var(--ai-tint); border-left-color: var(--ai-accent); }
.choice-opt:focus-visible { outline: 2px solid var(--ai-accent-deep); outline-offset: -2px; }
.choice-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.choice-opt-label { font-size: 14px; font-weight: 500; }
.choice-opt-desc { font-size: 12.5px; color: var(--ink-3); }
.choice-opt .opt-check { color: var(--ai-accent-deep); flex: 0 0 15px; }
.choice-opt .opt-chev { color: var(--ink-4); flex: 0 0 15px; }

/* ── Freeform footer (never inside the scroller) ── */
.choice-ff-closed {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-left: 3px solid transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink-3);
  background: var(--tray-ff-bg);
}
.choice-ff-closed:hover { background: var(--ai-tint); color: var(--ink); border-left-color: var(--ai-accent-light); }
.choice-ff-closed span { flex: 1; min-width: 0; font-size: 13.5px; }
.choice-ff-open {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 9px 14px;
  border-bottom: 1px solid var(--line-2);
  border-left: 3px solid var(--ai-accent);
  background: var(--ai-tint);
}
.choice-ff-field {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(22, 24, 28, 0.12);
  border-radius: 9px;
  padding: 8px 11px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
}
:root[data-theme="dark"] .choice-ff-field { border-color: var(--line); }
.choice-ff-field:focus { border-color: var(--ai-accent); box-shadow: 0 0 0 3px rgba(185, 169, 235, 0.2); }
.choice-ff-cancel {
  background: transparent;
  border: 0;
  padding: 6px;
  display: inline-flex;
  color: var(--ink-4);
  cursor: pointer;
  border-radius: 8px;
}
.choice-ff-cancel:hover { color: var(--ink); background: var(--pill); }
.choice-ff-send {
  border: 0;
  border-radius: 9px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--tray-send-bg);
  color: var(--tray-send-ink);
}
.choice-ff-send:disabled {
  background: var(--tray-send-disabled-bg);
  color: var(--tray-send-disabled-ink);
  cursor: default;
}

/* ── Answered chips ── */
.choice-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--answered-fill);
  border: 1px solid var(--answered-border);
  font: inherit;
  cursor: pointer;
  max-width: 100%;
}
.choice-chip:hover { background: var(--answered-fill-hover); }
.choice-chip:disabled { cursor: default; }
.choice-chip:disabled:hover { background: var(--answered-fill); }
.choice-chip .chip-check { color: var(--answered-icon); flex: 0 0 13px; }
.choice-chip .chip-n {
  font-size: 11px;
  font-weight: 600;
  color: var(--answered-index);
  letter-spacing: 0.03em;
  flex: 0 0 auto;
}
.choice-chip .chip-label {
  font-size: 13px;
  color: var(--answered-ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── "Améliorer avec l'IA" — interview-then-rewrite modal ─────────────────
   Reuses .modal / .modal-card / .modal-head. Only the tray, chips and diff
   are new. Values follow the askUserChoice picker handoff, expressed through
   the :root tokens so a theme change carries. */

.refine-trigger { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }

/* The mark sits inline in the <h2>; without this it butts against the text. */
.refine-card .modal-head h2 { display: flex; align-items: center; gap: 8px; }

.refine-mark {
  width: 15px; height: 15px; flex: 0 0 15px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; color: #fff;
  background: linear-gradient(140deg, #d6cef5, #b9a9eb);
}
.refine-mark svg { width: 11px; height: 11px; }
.refine-mark.small { width: 14px; height: 14px; flex-basis: 14px; }

/* Above the automation form overlay (z-index:100) — .modal's own 80 puts this
   BEHIND it, which reads as a washed-out panel rather than a dialog. */
.refine-modal { z-index: 120; }

/* Beat `.modal--center .modal-card` (0,2,0) on both width and height: the
   before/after diff needs more room than the 540px / 72vh default dialog. */
.modal--center .refine-card { width: min(680px, 94vw); max-height: 84vh; }
.refine-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }

/* loading */
.refine-loading { display: flex; align-items: center; gap: 10px; padding: 22px 4px; }
.refine-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: #b9a9eb;
  animation: refine-spin 0.7s linear infinite;
}
@keyframes refine-spin { to { transform: rotate(360deg); } }

/* answered chips */
.refine-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.refine-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: #f1f4f1; border: 1px solid rgba(93, 138, 99, 0.28);
  max-width: 100%;
}
.refine-chip:hover { background: #e8efe9; }
.refine-chip-ico { width: 13px; height: 13px; color: #5d8a63; display: inline-flex; }
.refine-chip-ico svg { width: 13px; height: 13px; }
.refine-chip-idx { font-size: 11px; font-weight: 600; color: #7d9481; letter-spacing: 0.03em; }
.refine-chip-label {
  font-size: 13px; font-weight: 500; color: #3f5c44;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* question tray */
.refine-tray {
  background: var(--surface); border: 1px solid rgba(22, 24, 28, 0.1);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 40px -18px rgba(22, 24, 28, 0.3), 0 3px 8px -4px rgba(22, 24, 28, 0.16);
  animation: refine-in 220ms ease-out;
}
@keyframes refine-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.refine-tray-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 11px 10px; background: #16181c; color: #fbfcfd;
}
.refine-back {
  display: inline-flex; padding: 5px; border-radius: 8px;
  background: transparent; border: 0; color: #fbfcfd; cursor: pointer;
}
.refine-back svg { width: 15px; height: 15px; }
.refine-back:hover { background: rgba(255, 255, 255, 0.1); }
.refine-back[disabled] { color: #4a4d54; cursor: default; }
.refine-back[disabled]:hover { background: transparent; }
.refine-q { font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; }
.refine-count {
  margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  color: #c9cbd2; background: rgba(255, 255, 255, 0.09);
  border-radius: 5px; padding: 3px 7px; white-space: nowrap;
}

.refine-opts { max-height: 210px; overflow: auto; }
.refine-opt {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 14px; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 0; border-bottom: 1px solid rgba(22, 24, 28, 0.06);
  border-left: 3px solid transparent;
}
.refine-opt:hover, .refine-opt.is-picked { background: #faf9fc; border-left-color: #b9a9eb; }
.refine-opt-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.refine-opt-label { font-size: 14px; font-weight: 500; }
.refine-opt-desc { font-size: 12.5px; color: var(--ink-3); }
.refine-opt-icons { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.refine-opt-check { width: 15px; height: 15px; color: #6a5bb5; display: inline-flex; }
.refine-opt-check svg { width: 15px; height: 15px; }
.refine-opt-chev { width: 15px; height: 15px; color: var(--ink-4); display: inline-flex; }
.refine-opt-chev svg { width: 15px; height: 15px; }

/* freeform footer — deliberately OUTSIDE the scroller so it never clips */
.refine-free {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 11px 16px 11px 14px; font-size: 13.5px; cursor: pointer;
  background: #fbfbfc; color: var(--ink-3);
  border: 0; border-left: 3px solid transparent; text-align: left;
}
.refine-free:hover { background: #faf9fc; color: var(--ink); border-left-color: #d6cef5; }
.refine-free-ico { width: 14px; height: 14px; display: inline-flex; }
.refine-free-ico svg { width: 14px; height: 14px; }
.refine-free.is-open {
  padding: 9px 12px 9px 14px; background: #faf9fc;
  border-left: 3px solid #b9a9eb; cursor: default;
}
.refine-free.is-open input {
  flex: 1; padding: 8px 11px; font-size: 13.5px;
  border: 1px solid rgba(22, 24, 28, 0.12); border-radius: 9px; background: var(--surface);
}
.refine-free.is-open input:focus {
  outline: none; border-color: #b9a9eb; box-shadow: 0 0 0 3px rgba(185, 169, 235, 0.2);
}

/* before / after */
.refine-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .refine-diff { grid-template-columns: 1fr; } }
.refine-diff-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.refine-diff-h {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-3);
}
.refine-diff-box {
  padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto;
}
.refine-diff-box.is-old { background: var(--surface-soft); color: var(--ink-2); }
.refine-diff-box.is-new { background: #faf9fc; border: 1px solid #d6cef5; color: var(--ink); }

.refine-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ── "Is this a client name?" — de-identification term confirmation ───────
   Shown when the residency gate refuses a payload because it met capitalized
   values it could not confirm are safe. Reuses .modal/.modal-card; only the
   rows are new. */

.term-modal { z-index: 120; }
.modal--center .term-card { width: min(620px, 94vw); max-height: 84vh; }
.term-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }

.term-card .modal-head h2 { display: flex; align-items: center; gap: 8px; }
.term-mark {
  width: 16px; height: 16px; flex: 0 0 16px; color: #6a5bb5;
  display: inline-flex; align-items: center; justify-content: center;
}
.term-mark svg { width: 16px; height: 16px; }

.term-intro { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }

.term-rows { display: flex; flex-direction: column; gap: 10px; }
.term-row {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 12px; background: var(--surface);
  display: flex; flex-direction: column; gap: 9px;
}
.term-word {
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  word-break: break-word;
}
.term-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px) { .term-opts { grid-template-columns: 1fr; } }

.term-opt {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 9px 11px; border-radius: 10px; cursor: pointer;
  background: var(--surface-soft); border: 1px solid transparent; color: var(--ink);
}
.term-opt:hover { background: #faf9fc; border-color: #d6cef5; }
.term-opt.is-on { background: #faf9fc; border-color: #b9a9eb; box-shadow: 0 0 0 1px #b9a9eb inset; }
.term-opt-label { font-size: 13.5px; font-weight: 500; }
.term-opt-hint { font-size: 11.5px; color: var(--ink-3); }

.term-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.term-once { font-size: 12px; color: var(--ink-3); }