/* ── Dashboard page styles ─────────────────────────────────────────────────
 * Folder-based dashboard: KPI strip + left rail status folders + main list.
 * Complements base.css; does not override the shared top-nav styles.
 * ────────────────────────────────────────────────────────────────────────── */

:root {
  --blue: #0468FF;
  --blue-dk: #0352CC;
  --blue-10: #E6F0FF;
  --blue-20: #CCE0FF;
  --blue-50: rgba(4, 104, 255, .07);
  --white: #FFFFFF;
  --bg: #F4F6FA;
  --ink: #0D1526;
  --ink2: #2D3748;
  --ink3: #64748B;
  --ink4: #94A3B8;
  --border: #E2E8F0;
  --border2: #CBD5E1;
  --green: #059669;
  --green-bg: #ECFDF5;
  --green-bd: #BBF7D0;
  --amber: #D97706;
  --amber-bg: #FFFBEB;
  --amber-bd: #FDE68A;
  --rose: #DC2626;
  --rose-bg: #FEF2F2;
  --rose-bd: #FECACA;
  --violet: #7C3AED;
  --violet-bg: #F5F3FF;
  --disp: 'Sora', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
}

body[data-page="dashboard"] {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
  /* Lock the page viewport. Scroll happens inside .dash-main instead of
     the document, which is what lets the rail (and its logo) stay
     truly fixed as a column rather than chasing the scroll position. */
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html:has(body[data-page="dashboard"]) {
  height: 100%;
  overflow: hidden;
}

body[data-page="dashboard"] *,
body[data-page="dashboard"] *::before,
body[data-page="dashboard"] *::after {
  box-sizing: border-box;
}

/* ── Top-nav (shared with chat.css visual identity; re-declared here so the
      dashboard page doesn't have to include chat.css). ── */
body[data-page="dashboard"] .top-nav {
  background: #ffffff;
  border-bottom: 1px solid #b6b6b6;
  box-shadow: 0 4px 20px rgba(0, 0, 128, 0.05);
  /* No longer position:sticky — the page doesn't scroll, so a plain
     flex child stays pinned at the top of the viewport naturally. */
  position: relative;
  z-index: 200;
  flex-shrink: 0;
}
body[data-page="dashboard"] .top-nav-inner {
  width: 100%;
  margin: 0;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body[data-page="dashboard"] .top-nav-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
body[data-page="dashboard"] .top-nav-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
body[data-page="dashboard"] .top-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--blue-10);
  color: var(--blue);
  border: 1px solid var(--blue-20);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
body[data-page="dashboard"] .top-nav-back:hover {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(4, 104, 255, .25);
}
body[data-page="dashboard"] .top-nav-back i { font-size: 13px; }
body[data-page="dashboard"] .nav-logo {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}
body[data-page="dashboard"] .nav-title {
  font-family: 'Manrope', 'Avenir Next', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1e3a8a;
  letter-spacing: -0.5px;
}
.top-nav-links {
  display: flex;
  gap: 2px;
}
/* Concierto attribution pill — pinned to the far right of the topnav so
   the platform branding stays visible without overlapping the left-side
   navigation buttons. */
body[data-page="dashboard"] .top-nav .logo-powered {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0240A0 0%, #0468FF 100%);
  box-shadow: 0 2px 6px rgba(4, 104, 255, 0.20);
  flex-shrink: 0;
}
body[data-page="dashboard"] .top-nav .logo-powered .lp-label {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
body[data-page="dashboard"] .top-nav .logo-powered .lp-logo {
  height: 24px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.top-nav-links .nav-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink3);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, color .12s;
}
.top-nav-links .nav-link:hover {
  background: var(--bg);
  color: var(--ink);
}
.top-nav-links .nav-link.is-active {
  background: var(--blue-10);
  color: var(--blue);
}

/* ── Page heading ──
   Navy banner inspired by the reference: dark gradient background with
   a light-blue eyebrow, bold white title, muted subtitle, and a slim
   accent bar on the left of the title. */
.page-header {
  background: linear-gradient(135deg, #0b1f3f 0%, #1e3a8a 70%, #2563eb 100%);
  color: #fff;
  padding: 26px 2rem 22px;
  border-bottom: 1px solid #0a1836;
  flex-shrink: 0;
}
.page-header-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.page-header .page-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #93c5fd;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.9;
}
.page-header .page-title {
  margin: 0;
  font-family: var(--disp, "Sora", "Segoe UI", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Slim accent bar on the left of the title. Light blue so it stays
   readable against the navy gradient. */
.page-header .page-title-accent {
  display: inline-block;
  width: 4px;
  height: 28px;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  border-radius: 3px;
}
.page-header .page-title i {
  font-size: 22px;
  color: #93c5fd;
}
.page-header .page-subtitle {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 720px;
  line-height: 1.5;
}

/* ── KPI strip ── */
.kpi-strip {
  background: linear-gradient(90deg, #F0F7FF, #FFFFFF);
  border-bottom: 1px solid var(--border);
  padding: 14px 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;                 /* Fixed-height header, never compressed */
}
.kpi-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  grid-column: 2;
}
.kpi-tail-left { grid-column: 1; justify-self: start; }
.kpi { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.kpi-val {
  font-family: var(--disp);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.kpi-lbl {
  font-size: 10px;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 600;
  margin-top: 3px;
}
.kpi-div { width: 1px; height: 28px; background: var(--border2); }
.kpi-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.kpi-ico-run { background: var(--blue-10); color: var(--blue); }
.kpi-ico-hold { background: var(--amber-bg); color: var(--amber); }
.kpi-ico-wait { background: #F1F5F9; color: var(--ink3); }
.kpi-ico-done { background: var(--green-bg); color: var(--green); }
.kpi-tail {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-bg);
  color: #065F46;
  border: 1px solid var(--green-bd);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 10.5px;
  font-weight: 600;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: live-blink 1.5s ease-in-out infinite;
}
@keyframes live-blink { 50% { opacity: .3; } }

/* ── Layout ──
 * The dashboard is an app shell, not a document. The body is a column
 * flex container (see body[data-page="dashboard"]) with the top-nav +
 * KPI strip as fixed-height headers; this layout row takes the rest of
 * the viewport and splits horizontally. Both children get their own
 * overflow context, so the rail NEVER scrolls with the page — because
 * the page never scrolls. Internal scrolling happens only inside
 * .dash-main. This is how every production SaaS shell is built
 * (Linear, Notion, Intercom, Stripe Dashboard).
 */
.dash-layout {
  display: flex;
  flex: 1;                        /* Take all remaining vertical space */
  min-height: 0;                  /* Critical: allows children to scroll */
}
.dash-rail {
  width: 236px;
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--border);
  padding: 1rem .75rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  /* Full-height column inside the layout row. No sticky, no calc'd
     height — just `height: 100%` inside a flex parent that already
     owns the viewport's remaining height. `margin-top: auto` on
     .rail-powered-by then reliably pushes the logo to the rail's
     true bottom. */
  height: 100%;
  overflow-y: auto;               /* Own scroll context if contents ever */
}                                 /* exceed the rail's height. */
.rail-domain {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
  margin-bottom: .6rem;
}
.rail-domain-btn {
  flex: 1;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  color: var(--ink3);
  border: none;
  background: transparent;
  font-family: var(--sans);
}
.rail-domain-btn.is-active {
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}

.rail-sec { margin-bottom: .55rem; }
.rail-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink4);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-bottom: 6px;
  padding: 0 6px;
}

.folder {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink2);
  margin-bottom: 2px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--sans);
  text-align: left;
}
.folder:hover { background: var(--blue-50); }
.folder.is-active {
  background: var(--blue-10);
  color: var(--blue);
  border-color: var(--blue-20);
  font-weight: 600;
}
.folder-ico {
  width: 22px;
  display: flex;
  justify-content: center;
  color: var(--ink4);
}
.folder.is-active .folder-ico { color: var(--blue); }
.folder-label { flex: 1; }
.folder-count {
  margin-left: auto;
  font-size: 10px;
  background: var(--bg);
  color: var(--ink4);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
.folder.is-active .folder-count {
  background: var(--blue-20);
  color: var(--blue-dk);
}

.rail-refresh,
.rail-scan {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border2);
  color: var(--ink2);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  margin-top: .5rem;
}
.rail-refresh:hover, .rail-scan:hover { background: var(--bg); }
.rail-scan { margin-top: .5rem; color: var(--blue); border-color: var(--blue-20); background: var(--blue-50); }
.rail-scan:hover { background: var(--blue-10); }
.rail-reset {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--rose-bd);
  color: var(--rose);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  margin-top: .35rem;
}
.rail-reset:hover { background: var(--rose-bg); }

/* ── "Powered by Concierto" footer credit ───────────────────────────
 * Pinned to the bottom of the rail via margin-top:auto (the rail is a
 * column flex container). The inverse logo asset renders glyphs in
 * white and brand-orange, so it needs a dark plate to be legible —
 * we can't drop it onto the white rail background. Going with a deep
 * charcoal (#0D1526 == --ink) so it sits within the existing NYL
 * palette rather than introducing a new brand colour. The thin label
 * above signals the credit relationship without overwhelming it. */
.rail-powered-by {
  /* Anchor the credit to the rail's visual bottom. The rail's
     min-height (see .dash-rail) is calibrated to the first-paint
     viewport, so `margin-top: auto` on a column flex child eats the
     empty space between Reset All and the rail bottom — the logo
     then lines up with the bottom of the screen on load. */
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.rail-powered-by-label {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink4);
}
.rail-powered-by-plate {
  width: 100%;
  background: var(--ink);               /* Deep charcoal backing plate */
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(13, 21, 38, .06);
  transition: background-color .15s ease, box-shadow .15s ease;
}
.rail-powered-by-plate:hover {
  background: #1A2234;                  /* One shade lighter on hover — */
  box-shadow: 0 2px 6px rgba(13, 21, 38, .12);
}
.rail-powered-by-logo {
  display: block;
  width: 100%;
  max-width: 140px;
  height: auto;
  /* SVG has its own 350x100 viewBox so it scales cleanly. No filters
     or colour overrides — the asset is already the correct "inverse"
     variant engineered for dark backgrounds. */
}

/* ── Main area ── */
.dash-main {
  flex: 1;
  padding: 1.5rem 2rem;
  min-width: 0;
  /* This is the ONLY thing that scrolls on the dashboard. The rail
     stays put, headers stay put, only this column moves. Reviewers
     with 100 On Hold claims scroll the list here without ever losing
     sight of the status folders or the Concierto credit. */
  min-height: 0;
  overflow-y: auto;
}
.bucket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 1rem;
}
.bucket-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bucket-title h2 {
  font-family: var(--disp);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.bucket-count-chip {
  background: var(--bg);
  color: var(--ink3);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.bucket-desc {
  font-size: 12px;
  color: var(--ink4);
  margin: 2px 0 1rem;
}

.btn-primary {
  font-size: 12px;
  font-weight: 700;
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(4, 104, 255, .24);
  font-family: var(--sans);
}
.btn-primary:hover:not(:disabled) { background: var(--blue-dk); }
.btn-primary:disabled { opacity: .55; cursor: default; box-shadow: none; }
.btn-ghost {
  font-size: 11px;
  font-weight: 600;
  background: var(--white);
  color: var(--ink2);
  border: 1px solid var(--border2);
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--sans);
}
.btn-ghost:hover { background: var(--bg); }

/* ── Search / filter bar ── */
.search-bar { display: flex; gap: 10px; margin-bottom: 1rem; }
.search-wrap { flex: 1; position: relative; }
.search-wrap i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink4);
  font-size: 12px;
}
.search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 12px;
  background: var(--white);
  outline: none;
}
.search-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(4, 104, 255, .1);
}

/* Reset button at the right edge of the search bar — only visible when the
   input has a value. Clicking returns the list to the unfiltered view. */
.search-clear {
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink3);
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.search-clear:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-10);
}
.search-clear[hidden] { display: none; }

/* ── Claim card list ── */
.claim-list { display: flex; flex-direction: column; gap: 10px; }

.claim-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  transition: border-color .15s, box-shadow .2s, transform .15s, background-color .15s;
}
.claim-card:hover {
  border-color: var(--blue);
  box-shadow: 0 10px 28px rgba(4, 104, 255, .18), 0 2px 6px rgba(4, 104, 255, .08);
  transform: translateY(-2px);
  background: #FAFCFF;
}
.claim-card.bucket-active { border-left: 3px solid var(--blue); }
.claim-card.bucket-yet_to_start { border-left: 3px solid var(--ink4); }
.claim-card.bucket-on_hold { border-left: 3px solid var(--amber); }
.claim-card.bucket-completed { border-left: 3px solid var(--green); }

.cc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
/* Left column: stacks the ID row (claim identifiers) on top of the primary
   action buttons (Run Now / Open Chat) so the next-action is always within
   eye-line of the claim that owns it. */
.cc-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.cc-id-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
/* Primary actions (Run Now, Open Chat) — sit just below the claim ID line. */
.cc-actions-primary {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Secondary actions (Trail) — live on the right side of the card alongside
   the status pill so they don't compete with the primary CTAs. */
.cc-actions-secondary {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.cc-id {
  font-family: var(--disp);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .3px;
}
/* Smaller, muted claim-id rendered at the bottom of the card under the
   primary actions — secondary identifier, not the headline. */
.cc-id-bottom {
  font-family: var(--disp);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink4);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-top: 8px;
}
.cc-id-bottom .cc-id-bottom-label {
  color: var(--ink4);
  font-weight: 500;
  margin-right: 4px;
}
/* Claimant name as the headline — bold, sized like a card title. */
.cc-name-main {
  font-family: var(--disp);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.cc-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border2);
  flex-shrink: 0;
}
.cc-meta {
  font-size: 12px;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.cc-type-chip {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--violet-bg);
  color: var(--violet);
  border: 1px solid #DDD6FE;
}
.cc-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.cc-status-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.cc-status-pill.blue { background: var(--blue-10); color: var(--blue-dk); border: 1px solid var(--blue-20); }
.cc-status-pill.amber { background: var(--amber-bg); color: #92400E; border: 1px solid var(--amber-bd); }
.cc-status-pill.red { background: var(--rose-bg); color: #991B1B; border: 1px solid var(--rose-bd); }
.cc-status-pill.green { background: var(--green-bg); color: #065F46; border: 1px solid var(--green-bd); }
.cc-status-pill.slate { background: var(--bg); color: var(--ink3); border: 1px solid var(--border); }

/* ── Swim-lane for active cards ── */
.swim {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
.swim-step {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  border: 1px solid;
  position: relative;
  overflow: hidden;
}
.swim-step.done {
  background: var(--green-bg);
  color: #065F46;
  border-color: var(--green-bd);
}
.swim-step.run {
  background: var(--blue-10);
  color: var(--blue-dk);
  border-color: var(--blue-20);
}
.swim-step.run::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(4, 104, 255, .18), transparent);
  animation: swim-shimmer 1.8s linear infinite;
}
@keyframes swim-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.swim-step.pend {
  background: var(--bg);
  color: var(--ink4);
  border-color: var(--border);
}
/* Amber "stuck" step — used when an on-hold card's current_stage is where
   the pipeline paused. Matches the on-hold KPI and blocker strip tones so
   the swim lane reads consistently with the rest of the card. */
.swim-step.warn {
  background: var(--amber-bg);
  color: #92400E;
  border-color: var(--amber-bd);
}
.swim-step.warn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(217, 119, 6, .18), transparent);
  animation: swim-shimmer 2.2s linear infinite;
}
.swim-step .ss-ico { font-size: 10px; margin-right: 4px; }

.cc-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
  color: var(--ink3);
  flex-wrap: wrap;
}
.cc-now strong { color: var(--ink2); font-weight: 600; }
.cc-actions { display: inline-flex; gap: 6px; flex-shrink: 0; align-items: center; }
.cc-right .btn-sm { padding: 5px 10px; font-size: 10.5px; }

/* Stage pill: inline marker of which agent is currently running on this claim. */
.cc-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--blue-10);
  color: var(--blue-dk);
  border: 1px solid var(--blue-20);
  margin-left: 4px;
}
.cc-stage-pill i { font-size: 9px; }

/* Repeat-claimant / fraud-history pill — surfaces A7's pattern flag
   directly on the card so reviewers can triage before clicking in. */
.cc-flag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 4px;
  letter-spacing: .2px;
}
.cc-flag-pill i { font-size: 9px; }
.cc-flag-repeat {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber-bd);
}

/* Blocker strip: surfaces why an on-hold claim is paused and gives a direct
   resolve action. Gradient tone changes with severity. */
.cc-blocker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 10px 0 4px;
  border-radius: 10px;
  background: linear-gradient(90deg, #FFF7E8, #FFFEF7);
  border: 1px solid var(--amber-bd);
  color: #92400E;
  font-size: 12px;
}
/* Red is reserved exclusively for SIU quarantine — every other on-hold
   reason (NIGO, adjuster review for green/yellow scenarios) keeps the
   default amber treatment regardless of the backend severity field. */
.cc-blocker.severity-siu {
  background: linear-gradient(90deg, #FEE9E9, #FFF6F6);
  border-color: var(--rose-bd);
  color: #991B1B;
}
.cc-blocker > i {
  font-size: 14px;
  flex-shrink: 0;
}
.cc-blocker-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cc-blocker-reason {
  font-weight: 600;
  line-height: 1.4;
}
.cc-blocker-action {
  font-size: 11px;
  color: inherit;
  opacity: .85;
}
.cc-blocker-cta {
  flex-shrink: 0;
}

.btn-sm {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border2);
  background: var(--white);
  color: var(--ink2);
  font-family: var(--sans);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-sm:hover:not(:disabled) { background: var(--bg); }
.btn-sm:disabled { opacity: .55; cursor: default; }
.btn-sm.primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-sm.primary:hover:not(:disabled) { background: var(--blue-dk); }
/* Run Now while a run is in flight — render in a clearly inactive
   neutral grey so it reads as "exists but not available" rather
   than the default primary blue. */
.btn-sm.primary:disabled {
  background: #E5E9F2;
  border-color: #D8DEEC;
  color: #6B7796;
  opacity: 1;
  cursor: not-allowed;
}
.btn-sm.blue {
  background: var(--blue-10);
  color: var(--blue);
  border-color: var(--blue-20);
}

.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ink4);
  background: var(--white);
  border: 1px dashed var(--border2);
  border-radius: 12px;
}
.empty-state i {
  font-size: 28px;
  display: block;
  margin-bottom: 10px;
  opacity: .6;
}
.empty-state p { font-size: 13px; margin: 0; color: var(--ink3); }

/* ── Toasts (match base style) ── */
#toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  box-shadow: 0 6px 20px rgba(13, 21, 38, .12);
  animation: toast-in .18s ease-out;
  min-width: 260px;
  max-width: 380px;
}
.toast-success { border-left: 3px solid var(--green); }
.toast-error { border-left: 3px solid var(--rose); }
.toast-warn { border-left: 3px solid var(--amber); }
.toast-info { border-left: 3px solid var(--blue); }
.toast-icon { font-weight: 700; color: var(--ink3); }
.toast-text { flex: 1; color: var(--ink2); }
.toast-dismiss {
  background: transparent;
  border: none;
  color: var(--ink4);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.toast-hide { animation: toast-out .2s ease-in forwards; }
@keyframes toast-in {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateY(-8px); opacity: 0; }
}

@media (max-width: 900px) {
  /* On narrow screens the fixed-viewport app shell collapses to a
     normal document scroll — the rail becomes a header strip at the
     top and the whole page scrolls together, which is the expected
     mobile pattern and avoids nested scroll traps. */
  body[data-page="dashboard"] {
    height: auto;
    overflow: auto;
    display: block;
  }
  html:has(body[data-page="dashboard"]) {
    height: auto;
    overflow: auto;
  }
  .dash-layout {
    flex-direction: column;
    flex: initial;
    min-height: 0;
  }
  .dash-rail {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    height: auto;
    overflow: visible;
  }
  .dash-main {
    padding: 1rem;
    overflow: visible;
    min-height: 0;
  }
  /* Logo on mobile should hug the rail content instead of forcing a
     "bottom of viewport" push that no longer applies. */
  .rail-powered-by { margin-top: 1rem; }
}

/* ── Final-outcome modal ────────────────────────────────────────────── */
.outcome-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.outcome-modal[hidden] { display: none; }
.outcome-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 21, 38, .55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.outcome-dialog {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(13, 21, 38, .28);
  width: min(820px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: outcome-in .18s ease-out;
}
@keyframes outcome-in {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.outcome-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.outcome-head-main { flex: 1; min-width: 0; }
.outcome-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink4);
  margin-bottom: 4px;
}
.outcome-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
}
.outcome-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink3);
}
.outcome-close {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink3);
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease;
  flex-shrink: 0;
}
.outcome-close:hover { background: var(--bg); color: var(--ink); }

.outcome-body {
  padding: 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.outcome-loading,
.outcome-empty {
  text-align: center;
  padding: 28px 12px;
  color: var(--ink3);
  font-size: 13px;
}
.outcome-empty i { display: block; font-size: 28px; margin-bottom: 8px; color: var(--ink4); }
.outcome-empty-inline { font-size: 12px; color: var(--ink3); font-style: italic; }

.outcome-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.outcome-section-title {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink4);
}

.outcome-decision {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  gap: 6px;
}
.outcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  width: fit-content;
}
.outcome-badge i { font-size: 14px; }
.outcome-badge-approve { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bd); }
.outcome-badge-escalate { background: var(--rose-bg); color: var(--rose); border: 1px solid var(--rose-bd); }
.outcome-badge-info { background: var(--blue-10); color: var(--blue-dk); border: 1px solid var(--blue-20); }

.outcome-eligible { font-size: 13px; color: var(--ink2); }
.outcome-eligible strong { color: var(--ink); }
.outcome-approval { font-size: 12px; color: var(--ink3); }
.outcome-completed { font-size: 11.5px; color: var(--ink4); font-style: italic; }

.outcome-kv {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}
.outcome-kv-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.outcome-kv-row dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ink4);
}
.outcome-kv-row dd {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  word-break: break-word;
}

.outcome-reasoning {
  margin: 0;
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.55;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.outcome-email {
  border: 1px solid var(--blue-20);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.outcome-email-head {
  background: #f8fafc;
  border-bottom: 1px solid var(--blue-20);
  padding: 12px 16px;
  display: grid;
  gap: 4px;
}
.outcome-email-head-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 8px;
  font-size: 12px;
  color: #475569;
}
.outcome-email-head-row span {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8;
  font-weight: 600;
  font-size: 11px;
}
.outcome-email-head-row strong {
  color: #0f172a;
  font-weight: 500;
  word-break: break-word;
}
.outcome-email .outcome-letter {
  border: 0;
  border-radius: 0;
  background: #fff !important;
  margin: 0;
  color: #1f2937 !important;
}
.outcome-letter .letter-doc-name {
  display: inline-block;
  font-weight: 700;
  color: #0f172a;
  background: #fef3c7;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #fde68a;
  font-family: "Segoe UI", "Calibri", Arial, sans-serif;
}
.outcome-letter {
  margin: 0;
  background: #FBFDFF;
  border: 1px solid var(--blue-20);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: "Segoe UI", "Calibri", Arial, sans-serif;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
}
.outcome-letter-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.outcome-letter-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.outcome-letter-btn:hover { background: var(--bg); }
/* When an <a> carries this class (e.g. the Outlook mailto link) the
   default underline has to go so it reads as a button instead. */
a.outcome-letter-btn { text-decoration: none; }
/* Outlook-style variant — Microsoft Outlook's signature blue so the
   action reads as "email this" rather than a generic secondary button. */
.outcome-letter-btn-outlook {
  background: #0078D4;
  border-color: #0078D4;
  color: #fff;
}
.outcome-letter-btn-outlook:hover {
  background: #106EBE;
  border-color: #106EBE;
  color: #fff;
}
.outcome-letter-btn-outlook i { color: #fff; }

/* Settlement-notice PDF attachment chip in the outcome modal. */
.outcome-letter-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  background: #f0f7f0;
  border: 1px solid #c8e0cc;
  border-left: 3px solid #2d7a3a;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ink1, #1f2937);
}
.outcome-letter-attachment i.fa-paperclip { color: #2d7a3a; }
.outcome-letter-attachment .outcome-attach-name {
  font-weight: 600;
  word-break: break-all;
}
.outcome-letter-attachment .outcome-attach-size {
  color: var(--ink3, #6b7280);
  font-size: 11.5px;
}
.outcome-letter-attachment .outcome-attach-download {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 5px;
  background: #2d7a3a;
  color: #fff;
  font-weight: 600;
  font-size: 11.5px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.outcome-letter-attachment .outcome-attach-download:hover { background: #24632d; }
.outcome-letter-attachment .outcome-attach-download i { color: #fff; }

.outcome-valstats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.outcome-statchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
}
.outcome-statchip strong { color: var(--ink); font-weight: 700; }
.outcome-statchip-ok { background: var(--green-bg); border-color: var(--green-bd); color: var(--green); }
.outcome-statchip-ok strong { color: var(--green); }
.outcome-statchip-warn { background: var(--amber-bg); border-color: var(--amber-bd); color: var(--amber); }
.outcome-statchip-warn strong { color: var(--amber); }

.outcome-valtable {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.outcome-valrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink2);
  border-top: 1px solid var(--border);
}
.outcome-valrow:first-child { border-top: none; }
.outcome-valfield { font-weight: 500; color: var(--ink); }
.outcome-valstatus {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.outcome-valrow-ok .outcome-valstatus { background: var(--green-bg); color: var(--green); }
.outcome-valrow-bad .outcome-valstatus { background: var(--rose-bg); color: var(--rose); }
.outcome-valrow-info .outcome-valstatus { background: var(--bg); color: var(--ink3); }

body.is-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .outcome-modal { padding: 12px; }
  .outcome-kv { grid-template-columns: 1fr; }
}

/* ── Audit History drawer ──────────────────────────────────────────── */
.audit-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.audit-drawer[hidden] { display: none; }
.audit-drawer .audit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 21, 38, .45);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: auto;
  cursor: pointer;
}
.audit-drawer.is-open .audit-backdrop { opacity: 1; }
.audit-panel {
  position: relative;
  width: min(560px, 100%);
  height: 100vh;
  background: var(--white);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 48px rgba(13, 21, 38, .18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(16px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  pointer-events: auto;
}
.audit-drawer.is-open .audit-panel {
  transform: translateX(0);
  opacity: 1;
}
.audit-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.audit-head-main { flex: 1; min-width: 0; }
.audit-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink4);
  margin-bottom: 4px;
}
.audit-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
}
.audit-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink3);
}
.audit-close {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink3);
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease;
  flex-shrink: 0;
}
.audit-close:hover { background: var(--bg); color: var(--ink); }

.audit-body {
  padding: 16px 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audit-loading,
.audit-empty {
  text-align: center;
  padding: 28px 12px;
  color: var(--ink3);
  font-size: 13px;
}
.audit-empty i { display: block; font-size: 28px; margin-bottom: 8px; color: var(--ink4); }

.audit-signals {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audit-signals-desc { font-size: 12.5px; color: var(--ink2); }
.audit-sigstats { display: flex; flex-wrap: wrap; gap: 6px; }
.audit-sigchip {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 11.5px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--ink2);
}
.audit-sigchip strong { color: var(--ink); font-weight: 700; }
.audit-sigchip-ok { background: var(--green-bg); border-color: var(--green-bd); color: var(--green); }
.audit-sigchip-ok strong { color: var(--green); }
.audit-sigchip-warn { background: var(--amber-bg); border-color: var(--amber-bd); color: var(--amber); }
.audit-sigchip-warn strong { color: var(--amber); }
.audit-sigchip-bad { background: var(--rose-bg); border-color: var(--rose-bd); color: var(--rose); }
.audit-sigchip-bad strong { color: var(--rose); }
.audit-sigchip-info { background: var(--blue-10); border-color: var(--blue-20); color: var(--blue-dk); }
.audit-sigchip-info strong { color: var(--blue-dk); }

.audit-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.audit-run {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.audit-run-current {
  border-color: var(--blue-20);
  box-shadow: 0 0 0 2px var(--blue-10);
}
.audit-run-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.audit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.audit-badge-approve { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bd); }
.audit-badge-escalate { background: var(--rose-bg); color: var(--rose); border: 1px solid var(--rose-bd); }
.audit-badge-info { background: var(--blue-10); color: var(--blue-dk); border: 1px solid var(--blue-20); }

.audit-relpill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink3);
  letter-spacing: .2px;
}
.audit-relpill-blue   { background: var(--blue-10); border-color: var(--blue-20); color: var(--blue-dk); }
.audit-relpill-amber  { background: var(--amber-bg); border-color: var(--amber-bd); color: var(--amber); }
.audit-relpill-violet { background: var(--violet-bg); border-color: #E9D5FF; color: var(--violet); }

.audit-run-id {
  font-size: 12px;
  color: var(--ink2);
}
.audit-run-id code {
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}

.audit-run-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11.5px;
  color: var(--ink3);
}
.audit-run-meta span { display: inline-flex; gap: 5px; align-items: center; }
.audit-run-meta i { color: var(--ink4); font-size: 10.5px; }

.audit-rationale {
  background: var(--blue-50);
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.audit-rationale-h { font-weight: 700; font-size: 12px; color: var(--ink); }
.audit-rationale-d { font-size: 11.5px; color: var(--ink2); line-height: 1.5; }

.audit-reasoning {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.55;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}

.audit-adjuster {
  font-size: 11.5px;
  color: var(--ink2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg);
  border-radius: 6px;
  width: fit-content;
}
.audit-adjuster i { color: var(--ink4); }

.audit-run-actions {
  display: flex;
  justify-content: flex-end;
}
.audit-run-actions .btn-sm {
  text-decoration: none;
}

@media (max-width: 640px) {
  .audit-panel { width: 100%; }
}

/* ── Documents dialog ───────────────────────────────────────────────── */
.docs-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.docs-modal[hidden] { display: none; }
.docs-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 21, 38, .55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.docs-dialog {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(13, 21, 38, .28);
  width: min(820px, 100%);
  height: min(720px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: outcome-in .18s ease-out;
}
.docs-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.docs-head-main { flex: 1; min-width: 0; }
.docs-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink4);
  margin-bottom: 4px;
}
.docs-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.docs-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink3);
}
.docs-close {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink3);
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease;
  flex-shrink: 0;
}
.docs-close:hover { background: var(--bg); color: var(--ink); }
.docs-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.docs-conversa {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.docs-conversa-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.docs-conversa-panel[hidden] { display: none; }
.docs-conversa .inputs-drawer-tabs {
  flex: 0 0 auto;
}
.docs-conversa #inputs-drawer-chat.docs-conversa-panel {
  /* Match the agent-page chat tab: panel itself doesn't scroll — the inner
     rag-chat-log flexes and scrolls so the form/status stay pinned. */
  padding: 14px 18px 18px;
  gap: 10px;
  overflow: hidden;
}
.docs-search-section {
  flex: 0 0 auto;
}
.docs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.docs-loading,
.docs-empty {
  text-align: center;
  padding: 28px 12px;
  color: var(--ink3);
  font-size: 13px;
}
.docs-empty i { display: block; font-size: 28px; margin-bottom: 8px; color: var(--ink4); }
.docs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  transition: border-color .15s, background .15s;
  text-decoration: none;
  color: inherit;
}
.docs-row:hover {
  border-color: var(--blue-20);
  background: var(--blue-50);
}
.docs-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--blue-10);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.docs-row-body { flex: 1; min-width: 0; }
.docs-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docs-row-meta {
  font-size: 11px;
  color: var(--ink4);
  margin-top: 2px;
}
.docs-row-open {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue);
  flex-shrink: 0;
}