/* ── Xlue Design Tokens ────────────────────────────────────────────────────── */
:root {
  --color-primary:        #007D7D;
  --color-primary-hover:  #00A7A2;
  --color-primary-dark:   #005A5A;
  --color-gradient-start: #00948A;
  --color-gradient-end:   #3A5A56;
  --bg-l0:   #FAFAF8;
  --bg-l1:   #EFF4F4;
  --bg-l2:   #F4F7F6;
  --bg-card: #FFFFFF;
  --text-primary:   #0D2B2B;
  --text-secondary: #2C4444;
  --text-tertiary:  #5C6C6C;
  --border-default: #D8E2E0;
  --shadow-card:  0 4px 12px rgba(0,0,0,0.15);
  --shadow-light: 0 2px 8px rgba(0,0,0,0.08);
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  background: var(--bg-l0);
  color: var(--text-primary);
}

/* ── App shell ────────────────────────────────────────────────────────────── */
#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
  padding: 12px;
}

/* ── Sidebar (floating rounded card) ─────────────────────────────────────── */
#sidebar {
  width: 272px;
  min-width: 220px;
  max-width: 600px;
  flex-shrink: 0;
  background: var(--bg-card);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  gap: 16px;
  border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid #E8EDEC;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}
#sidebar::-webkit-scrollbar { width: 5px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 4px; }
#sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

#sidebar-resize-handle {
  width: 6px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
#sidebar-resize-handle:hover,
#sidebar-resize-handle.dragging {
  background: var(--color-primary);
  border-radius: 3px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
}
.sidebar-logo { height: 64px; width: auto; }

#sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}
#sidebar-body::-webkit-scrollbar { width: 5px; }
#sidebar-body::-webkit-scrollbar-track { background: transparent; }
#sidebar-body::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 4px; }
#sidebar-body::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ── Sidebar dividers & sections ─────────────────────────────────────────── */
.sidebar-divider {
  height: 1px;
  background: #E8EDEC;
  margin: 0 -4px;
}
.sidebar-section { }
.sidebar-section:last-child { }

.sidebar-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  font-weight: 600;
}
.sidebar-patient { font-size: 0.9rem; color: var(--text-primary); font-weight: 600; }
.sidebar-mode {
  font-size: 0.7rem;
  color: var(--color-primary);
  margin-top: 4px;
  background: rgba(0,125,125,0.08);
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-weight: 500;
}

/* ── Sidebar tips (welcome screen) ───────────────────────────────────────── */
.sidebar-tips {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.sidebar-tip-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,125,125,0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
}
.sidebar-about {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  line-height: 1.55;
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.progress-bar-track {
  width: 100%;
  height: 6px;
  background: var(--bg-l1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--color-gradient-start), var(--color-primary));
  border-radius: 3px;
  transition: width 0.5s ease;
}
.progress-pct {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  text-align: right;
  margin-bottom: 10px;
  font-weight: 500;
}

/* ── Progress steps (compact list) ────────────────────────────────────────── */
.progress-steps { display: flex; flex-direction: column; gap: 4px; }
.step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  padding: 4px 8px;
  border-radius: var(--radius-md);
  transition: background-color 0.2s;
}
.step.done   { color: var(--color-primary); }
.step.active {
  color: var(--color-primary);
  font-weight: 600;
  background: rgba(0,125,125,0.08);
}
.step-marker {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.75rem;
}
.step-marker--done   { color: var(--color-primary); }
.step-marker--active { color: var(--color-primary); font-size: 0.6rem; }
.step-marker--pending { color: var(--border-default); }

/* ── Emergency badge ──────────────────────────────────────────────────────── */
.emergency-badge {
  background: rgba(185,28,28,0.08);
  color: #B91C1C;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  border-left: 3px solid #B91C1C;
}
.telehealth-badge {
  background: rgba(146,64,14,0.08);
  color: #92400E;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  border-left: 3px solid #92400E;
}
.telehealth-badge strong { display: block; margin-bottom: 4px; font-size: 0.8rem; }
.telehealth-badge p { margin-top: 3px; line-height: 1.4; }
.telehealth-badge-cta { font-weight: 600; margin-top: 6px; }

/* ── Sidebar accordion widgets (emergency + telehealth) ──────────────────── */
.sidebar-accordion {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.sidebar-accordion--emergency { border: 1px solid rgba(185,28,28,0.20); }
.sidebar-accordion--telehealth { border: 1px solid rgba(146,64,14,0.20); }

.accordion-banner {
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-accordion--emergency .accordion-banner { background: rgba(185,28,28,0.10); }
.sidebar-accordion--telehealth .accordion-banner { background: rgba(146,64,14,0.10); }

.accordion-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sidebar-accordion--emergency .accordion-dot {
  background: #EF4444;
  box-shadow: 0 0 5px rgba(239,68,68,0.5);
  animation: emergency-pulse 2s ease-in-out infinite;
}
@keyframes emergency-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 10px rgba(239,68,68,0.7); }
}
.sidebar-accordion--telehealth .accordion-dot { background: #B45309; }

.accordion-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.sidebar-accordion--emergency .accordion-title { color: #EF4444; }
.sidebar-accordion--telehealth .accordion-title { color: #B45309; }

.accordion-summary {
  padding: 4px 12px;
  font-size: 0.75rem;
}
.sidebar-accordion--emergency .accordion-summary { color: #FCA5A5; border-bottom: 1px solid rgba(185,28,28,0.10); }
.sidebar-accordion--telehealth .accordion-summary { color: #D97706; border-bottom: 1px solid rgba(146,64,14,0.10); }

.accordion-section {
  border-top: 1px solid rgba(255,255,255,0.04);
}
.accordion-header {
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.accordion-header:hover { background: rgba(255,255,255,0.03); }
.sidebar-accordion--emergency .accordion-header { color: #F87171; }
.sidebar-accordion--telehealth .accordion-header { color: #B45309; }

.accordion-chevron {
  font-size: 0.65rem;
  transition: transform 0.2s;
}
.accordion-section.open .accordion-chevron { transform: rotate(90deg); }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-section.open .accordion-body {
  max-height: 2000px;
  overflow: visible;
}

.accordion-body-inner {
  padding: 4px 12px 10px;
}

/* Symptom / action chips */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.symptom-chip {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 12px;
}
.sidebar-accordion--emergency .symptom-chip {
  color: #FCA5A5;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.20);
}
.sidebar-accordion--telehealth .symptom-chip {
  color: #D97706;
  background: rgba(146,64,14,0.10);
  border: 1px solid rgba(146,64,14,0.20);
}

/* Cause / reason bullet list */
.cause-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cause-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.75rem;
  line-height: 1.5;
}
.cause-bullet {
  font-size: 0.5rem;
  flex-shrink: 0;
}
.sidebar-accordion--emergency .cause-item { color: #F87171; }
.sidebar-accordion--emergency .cause-bullet { color: #EF4444; }
.sidebar-accordion--telehealth .cause-item { color: #D97706; }
.sidebar-accordion--telehealth .cause-bullet { color: #B45309; }

/* "+N more" expand chips */
.symptom-chip--more,
.cause-item--more {
  cursor: pointer;
  opacity: 0.7;
  font-style: italic;
}
.symptom-chip--more:hover,
.cause-item--more:hover {
  opacity: 1;
}

/* Hidden lists for expand/collapse */
.expand--hidden {
  display: none;
}

/* Emergency 911 CTA */
.accordion-cta {
  padding: 6px 12px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
}
.sidebar-accordion--emergency .accordion-cta {
  background: rgba(185,28,28,0.08);
  color: #B91C1C;
}

/* ── Clinical Reasoning donut ─────────────────────────────────────────────── */
/* Single SVG with 5 equal arcs (72° each, ~1.5° gap) driven by [data-step]
   on the parent. CSS decides which segments are done/active/pending; no JS
   pixel math anywhere — the donut reflows smoothly with sidebar drag
   (240–600 px). Center text is updated by updateDonutInPlace(); the rest
   of the geometry is static markup.                                         */
.reasoning-donut {
  position: relative;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.reasoning-donut .donut-svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg); /* segment 1 starts at 12 o'clock */
}
.reasoning-donut .donut-seg {
  opacity: 0; /* default = pending; visible rules below, keyed on data-step */
  transition: opacity 220ms ease-out;
}
.reasoning-donut .donut-seg.seg-bg { opacity: 1; }
/* Step N: segments 1..N-1 solid, segment N pulsing, N+1..5 pending. */
.reasoning-donut[data-step="1"] .seg-1 { opacity: 0.55; animation: donut-seg-pulse 2.2s ease-in-out infinite; }
.reasoning-donut[data-step="2"] .seg-1 { opacity: 1; }
.reasoning-donut[data-step="2"] .seg-2 { opacity: 0.55; animation: donut-seg-pulse 2.2s ease-in-out infinite; }
.reasoning-donut[data-step="3"] .seg-1,
.reasoning-donut[data-step="3"] .seg-2 { opacity: 1; }
.reasoning-donut[data-step="3"] .seg-3 { opacity: 0.55; animation: donut-seg-pulse 2.2s ease-in-out infinite; }
.reasoning-donut[data-step="4"] .seg-1,
.reasoning-donut[data-step="4"] .seg-2,
.reasoning-donut[data-step="4"] .seg-3 { opacity: 1; }
.reasoning-donut[data-step="4"] .seg-4 { opacity: 0.55; animation: donut-seg-pulse 2.2s ease-in-out infinite; }
.reasoning-donut[data-step="5"] .seg-1,
.reasoning-donut[data-step="5"] .seg-2,
.reasoning-donut[data-step="5"] .seg-3,
.reasoning-donut[data-step="5"] .seg-4 { opacity: 1; }
.reasoning-donut[data-step="5"] .seg-5 { opacity: 0.85; animation: donut-seg-pulse 1.8s ease-in-out infinite; }
@keyframes donut-seg-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}
.reasoning-donut .donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10%;
  gap: 2px;
  pointer-events: none;
}
.reasoning-donut .donut-stage {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
}
.reasoning-donut .donut-turn {
  font-size: 0.62rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.reasoning-donut .donut-action {
  font-size: 0.55rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  margin-top: 2px;
  opacity: 0.75;
}
/* Legend below the donut: 5 tiny labels. At narrow widths collapse to numeric
   only; at very narrow (≤ ~200 px rendered donut) the labels hide entirely
   and the colored segments carry the whole signal. */
.reasoning-donut .donut-legend {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  font-size: 0.5rem;
  color: var(--text-tertiary);
  margin-top: 8px;
  margin-bottom: 24px; /* ~2 lines gap before the next sidebar section */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.reasoning-donut .donut-lbl .lbl-num { display: none; }
.reasoning-donut .donut-lbl .lbl-full { display: inline; }
/* Active + done legend coloring keyed off data-step. */
.reasoning-donut[data-step="1"] .lbl-1 { color: var(--color-primary); font-weight: 800; }
.reasoning-donut[data-step="2"] .lbl-1 { color: var(--color-primary); }
.reasoning-donut[data-step="2"] .lbl-2 { color: var(--color-primary); font-weight: 800; }
.reasoning-donut[data-step="3"] .lbl-1,
.reasoning-donut[data-step="3"] .lbl-2 { color: var(--color-primary); }
.reasoning-donut[data-step="3"] .lbl-3 { color: var(--color-primary); font-weight: 800; }
.reasoning-donut[data-step="4"] .lbl-1,
.reasoning-donut[data-step="4"] .lbl-2,
.reasoning-donut[data-step="4"] .lbl-3 { color: var(--color-primary); }
.reasoning-donut[data-step="4"] .lbl-4 { color: var(--color-primary); font-weight: 800; }
.reasoning-donut[data-step="5"] .lbl-1,
.reasoning-donut[data-step="5"] .lbl-2,
.reasoning-donut[data-step="5"] .lbl-3,
.reasoning-donut[data-step="5"] .lbl-4 { color: var(--color-primary); }
.reasoning-donut[data-step="5"] .lbl-5 { color: var(--color-primary); font-weight: 800; }
/* Responsive legend collapse — swap to numeric-only at narrow sidebars.
   Uses a media query on the overall viewport since sidebar width isn't
   directly queryable without container queries; the sidebar clamps at
   240 px so viewports ≤ 900 px tend to correlate with narrow sidebars. */
@media (max-width: 900px) {
  .reasoning-donut .donut-legend { font-size: 0.55rem; letter-spacing: 0.02em; }
  .reasoning-donut .donut-lbl .lbl-full { display: none; }
  .reasoning-donut .donut-lbl .lbl-num  { display: inline; }
}

/* ── Sidebar differential diagnosis ──────────────────────────────────────── */
.differential-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  flex-shrink: 0;
}
.differential-item {
  padding: 0 4px;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms ease-out;
}
.differential-item.enter {
  opacity: 0;
  transform: translateY(4px);
}
.differential-item.exit {
  opacity: 0;
  transform: translateY(-4px);
}
.differential-item.differential-primary .diff-condition {
  font-weight: 600;
  color: var(--color-primary-dark);
}
.diff-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
}
.diff-label {
  display: flex;
  gap: 5px;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--text-secondary);
  min-width: 0;
}
.diff-rank {
  color: var(--text-tertiary);
  flex-shrink: 0;
  min-width: 16px;
}
.diff-condition {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The headline value. Bold and a step larger than .wm-pct, and the two swapped sizes when the
   Working Differential moved above the world-model panel: this is the resident's own confidence
   and the arm's output, so it is what the eye should land on. tabular-nums keeps the column
   steady as the ranking reorders between turns. */
.diff-probability {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: 8px;
}

/* ── Enhanced differential: right-cluster (probability + trend arrow) ───── */
/* .diff-right wraps the probability and the ↑/↓/— trend arrow so they travel
   together. flex-shrink: 0 keeps them visible when the condition name is long
   — the condition name's own ellipsis yields first. */
.diff-right {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 8px;
}
.diff-right .diff-probability {
  margin-left: 0; /* .diff-right already provides the spacing */
}
.diff-trend {
  font-size: 0.65rem;
  font-weight: 700;
  width: 14px;
  text-align: center;
  line-height: 1;
}
.diff-trend.up   { color: #16A34A; }
.diff-trend.down { color: #DC2626; }
.diff-trend.same { color: var(--text-tertiary); }

/* ── Italic reasoning line under each condition ─────────────────────────── */
/* 21 px indent matches the width of .diff-rank so the italic text aligns with
   the condition name above it, regardless of sidebar width. Wraps naturally
   (no nowrap) so long reasons flow onto multiple lines. */
.diff-reason {
  font-size: 0.63rem;
  color: var(--text-tertiary);
  margin: 1px 0 4px 21px;
  font-style: italic;
  line-height: 1.35;
  word-break: normal;
}

/* ── Question Rationale card ─────────────────────────────────────────────── */
/* Shows the AI's current checklist question + 1-line rationale, driven by the
   next_q_update SSE event. Positioned between the donut and the differential
   in the sidebar. Ported verbatim from feature/chat-ux-overhaul's style.css. */
.next-q-card {
  background: var(--bg-l1);
  border-radius: 8px;
  padding: 12px;
  border-left: 3px solid var(--color-primary);
}
.next-q-question {
  font-size: 0.78rem;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.4;
}
.next-q-question::before {
  content: 'Q: ';
  font-weight: 700;
  color: var(--color-primary);
}
.next-q-rationale {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  line-height: 1.4;
  display: flex;
  gap: 4px;
}
.next-q-rationale::before {
  content: '\2192';
  color: var(--color-primary);
  flex-shrink: 0;
  font-weight: 700;
}
.diff-bar-track {
  width: 100%;
  height: 6px;
  background: var(--bg-l1);
  border-radius: 3px;
  overflow: hidden;
}
.diff-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.differential-primary .diff-bar-fill {
  background: linear-gradient(to right, var(--color-gradient-start), var(--color-primary));
}
.differential-item:nth-child(2) .diff-bar-fill { background: rgba(0,125,125,0.45); }
.differential-item:nth-child(3) .diff-bar-fill { background: rgba(0,125,125,0.30); }
.differential-item:nth-child(n+4) .diff-bar-fill { background: rgba(0,125,125,0.18); }

/* ── EHR world-model prior panel (co-physician arm) ──────────────────────── */
/* Rows reuse .differential-item and its bar/rank/condition children, so the two
   ranked lists read as the same kind of object. The right slot holds the value
   (.wm-pct); the code is not drawn at all and lives on the row's title tooltip.
   .wm-pct rather than .diff-probability because these are different quantities:
   one is the resident's own posterior, the other a softmax over ~50k candidates,
   and they should not be able to drift into looking identical by sharing a rule.
   The provenance and history-depth lines that used to sit above the list were removed on
   request -- two paragraphs of small print over ten rows. "(reference)" in the heading and the
   wm-chip are what remain on screen; see app.js for what that gives up. */
.wm-prior-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  flex-shrink: 0;
}
/* Subtitle under the Working Differential in arm ON. Its own class, not .wm-status-note: that one
   is amber service-health copy, and reusing it meant the differential's explanatory line was styled
   as a warning and matched by the status patcher's sibling lookup. */
.diff-subtitle {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  line-height: 1.45;
  margin-bottom: 6px;
}
.wm-status-note {
  font-size: 0.65rem;
  color: #B45309;
  line-height: 1.4;
  margin-bottom: 4px;
}
/* ── Operator's patient-actor script (co-physician arm, chosen-patient mode) ──
   Whoever types is role-playing the selected patient and reads this while answering. It is the one
   sidebar panel meant for a single person rather than an audience, so it is visually quieter than
   the two ranked panels above it and capped in height: the scripts run 4,700-7,500 characters and
   an uncapped block would push the differential off screen. */
.persona-panel {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}
.persona-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.persona-chev {
  font-size: 0.6rem;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
/* The coded outcome of the visit being predicted, at the foot of a patient's summary.
   Deliberately set apart -- boxed, its own label -- so it can never be misread as something the
   patient said or something the model produced. It is the answer key, shown to the operator on
   purpose; it is fetched by the browser from its own endpoint and appears in no prompt. */
.outcome-strip {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,125,125,0.06);
  border-left: 3px solid var(--color-primary);
}
.outcome-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}
.outcome-dx {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.outcome-icd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-left: 4px;
}
/* Wider column on the selection screen, so the strip can breathe there. */
.select-detail .outcome-strip { margin-top: 20px; padding: 12px 14px; }
.select-detail .outcome-dx { font-size: 0.92rem; }
.persona-body {
  /* 440, not 260. The briefs run 1,300-2,600 characters and this is the panel the operator reads
     while typing -- at 260px a third of it was visible and the rest cost a scroll mid-question.
     The sidebar itself scrolls, so a taller panel lengthens the column rather than trapping the
     text; the cap only exists so the briefing cannot push the ranked panels off screen entirely. */
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
}
.persona-sec-title {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin: 10px 0 3px;
}
/* The briefing on the selection screen. Wider column than the sidebar's copy, so it can breathe:
   the operator is reading it to decide, not glancing at it mid-question. */
.select-brief {
  font-size: 0.82rem;
  line-height: 1.6;
}
.select-brief h3 { font-size: 0.68rem; margin: 16px 0 5px; }
.select-brief li { margin-bottom: 4px; }
/* Reveals the coded chart. Deliberately quiet: it is the secondary question on this screen, and a
   prominent control here pulled attention away from the briefing the operator actually needs. */
.select-chart-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 18px;
  padding: 9px 0;
  background: none;
  border: none;
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  font: inherit;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  cursor: pointer;
  text-align: left;
}
.select-chart-toggle:hover { color: var(--color-primary); }
.select-chart-chev { font-size: 0.6rem; flex-shrink: 0; }

/* The authored briefing, rendered from markdown. Tighter than body copy because it lives in a
   240px column and the operator reads it while typing. */
.persona-brief {
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.persona-brief h3 {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 12px 0 4px;
}
.persona-brief p { margin: 0 0 8px; }
.persona-brief ul { margin: 0 0 8px; padding-left: 16px; }
.persona-brief li { margin-bottom: 3px; }
.persona-brief strong { color: var(--text-primary); }
.persona-brief em { font-style: italic; }

/* pre-wrap, not a <pre>: the scripts are bullet lists whose line breaks carry meaning, but they
   still have to wrap inside a 240px column. */
.persona-sec-body {
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Truncation notice under the world-model list. The panel shows WM_PRIOR_VISIBLE_ROWS of the
   WM_TOPK the resident is handed, so it says how many it is not showing -- a shortened ranked list
   that does not admit it is shortened reads as the whole ranking. */
.wm-prior-more {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  font-style: italic;
  margin-top: 8px;
}
/* Shared empty-state note: the world-model panel before its first ranking, and an
   empty chart section. (The Working Differential uses it too during Phase 1 -- there the
   panel simply does not render until the resident's first differential arrives.) */
.sidebar-empty-note {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  line-height: 1.45;
  font-style: italic;
  padding: 4px 0;
}
/* The value in the world-model list. Bold and a step larger than .diff-probability, which is
   now a deliberate WEIGHTING rather than a description: this panel sits BELOW the resident's own
   differential and is its input, so the size difference is what stops a compact five-row
   reference from reading as the headline. tabular-nums keeps the column steady as the ranking
   reorders between turns. */
.wm-pct {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* Service-health chip, now on the Clinical Reasoning heading rather than on the world model's own
   panel -- that panel is gone, and this chip was the only thing on screen separating "the world
   model is contributing" from "the world model is down and the resident is reasoning unaided". The
   ranking is not shown; the fact that there is one is. Sits at the end of the heading rather than
   as a block, so the heading still reads as one line. */
.wm-chip {
  display: inline-block;
  margin-left: 8px;
  vertical-align: 1px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.wm-chip--pending { color: var(--text-tertiary); background: var(--bg-l1); }
.wm-chip--ok      { color: var(--color-primary); background: rgba(0,125,125,0.10); }
.wm-chip--stale   { color: #B45309; background: rgba(146,64,14,0.12); }
.wm-chip--offline { color: #B91C1C; background: rgba(185,28,28,0.10); }

/* ── Main content ─────────────────────────────────────────────────────────── */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

#content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 24px;
}
/* When chat-page is direct child, content must not scroll — chat-area scrolls instead */
#content:has(.chat-page) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page { max-width: 960px; margin: 0 auto; width: 100%; }

/* ── Typography ───────────────────────────────────────────────────────────── */
h1 { font-size: 1.875rem; font-weight: 700; color: var(--text-primary); }
h2 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.subtitle { font-size: 0.85rem; color: var(--text-tertiary); margin-bottom: 24px; }
.disclaimer { font-size: 0.78rem; color: var(--text-tertiary); font-style: italic; }

.gradient-heading {
  background: linear-gradient(to right, var(--color-gradient-start), var(--color-gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-light);
  margin-bottom: 16px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  text-decoration: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary  { background: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-secondary { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-secondary:hover:not(:disabled) { background: rgba(0,125,125,0.06); border-color: var(--color-primary-hover); color: var(--color-primary-hover); }
.btn-success  { background: var(--color-primary); color: #fff; }
.btn-success:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-full { width: 100%; }

/* ── Form elements ────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); }
.form-group input {
  padding: 8px 12px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: var(--bg-card);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group select {
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  font-size: 0.875rem;
  background: var(--bg-l2);
  color: var(--text-primary);
}
.form-group input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,125,125,0.12); }
.form-group input.input-error { border-color: #B91C1C; box-shadow: 0 0 0 2px rgba(185,28,28,0.12); }
.form-group input::placeholder { color: #9ca3af; }
.field-error { font-size: 0.75rem; color: #B91C1C; min-height: 1em; line-height: 1.2; }

.radio-group { display: flex; gap: 12px; margin-bottom: 20px; }
.radio-option {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.radio-option.selected { border-color: var(--color-primary); background: rgba(0,125,125,0.06); }
.radio-option input[type=radio],
.radio-option input[type=checkbox] { accent-color: var(--color-primary); margin-top: 3px; }
.radio-option span { font-size: 0.875rem; font-weight: 500; }

.radio-icon {
  display: flex;
  align-items: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: color 0.2s;
}
.radio-option.selected .radio-icon { color: var(--color-primary); }

.radio-text { display: flex; flex-direction: column; gap: 2px; }
.radio-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.radio-desc { font-size: 0.75rem; font-weight: 400; color: var(--text-tertiary); }

.name-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  margin-bottom: 20px;
  color: var(--text-primary);
}
.name-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,125,125,0.12); }
.name-input::placeholder { color: #9ca3af; }

/* ── Welcome page ─────────────────────────────────────────────────────────── */
.welcome-header { text-align: center; margin-bottom: 32px; }
.welcome-header h1 { margin-bottom: 8px; }
.welcome-tagline {
  font-size: 0.95rem;
  color: var(--text-tertiary);
  margin-top: 4px;
  font-weight: 400;
}

#content:has(.welcome-page) {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Welcome hero layout ─────────────────────────────────────────────────── */
.welcome-hero {
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
  padding-top: 32px;
}
.welcome-hero .gradient-heading {
  font-size: 2.25rem;
  margin-bottom: 8px;
}

/* Step preview — subtle pill chips */
.step-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 32px;
  flex-wrap: wrap;
}
.step-chip {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-primary-dark);
  background: rgba(0, 125, 125, 0.07);
  border: 1px solid rgba(0, 125, 125, 0.15);
  border-radius: 20px;
  padding: 6px 14px;
  white-space: nowrap;
}
.step-arrow {
  color: var(--text-tertiary);
  font-size: 0.85rem;
}

/* Hero CTA */
.btn-hero {
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-lg);
}

/* Subtle link button */
.btn-link {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 10px;
  display: inline-block;
  margin-top: 8px;
  font-family: inherit;
}
.btn-link:hover { color: var(--color-primary); }

/* Disclaimer */
.welcome-disclaimer {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin-top: 20px;
  line-height: 1.6;
}

/* Admin panel (collapsible model config below hero) */
.admin-panel {
  max-width: 780px;
  margin: 20px auto 0;
  border-left: 3px solid var(--color-primary);
  text-align: left;
}
.admin-panel-header {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 0;
  user-select: none;
}
.admin-panel-header::-webkit-details-marker { color: var(--color-primary); }
.admin-panel-body {
  margin-top: 16px;
}
.admin-models-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.admin-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-default);
}
@media (max-width: 640px) {
  .admin-models-grid { grid-template-columns: 1fr; }
  .admin-panel { max-width: 100%; }
}

/* Smooth text→markdown transition for streaming */
.bubble [id^="stream-text"] {
  transition: opacity 0.15s ease;
}

/* ── Vitals table ─────────────────────────────────────────────────────────── */
.vitals-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.vitals-table th {
  text-align: left; padding: 8px 12px;
  background: var(--bg-l1); color: var(--text-tertiary);
  font-weight: 500; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-default);
}
.vitals-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-default); }
.vitals-table tr:last-child td { border-bottom: none; }

.nurse-summary-text {
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Chat (full-page layout) ──────────────────────────────────────────────── */
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}
.chat-page-header { flex-shrink: 0; padding-bottom: 12px; }

.chat-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 48px;  /* 48px bottom padding to clear gradient overlay */
}

.chat-message-wrapper { display: flex; flex-direction: column; max-width: 80%; }
.chat-message-wrapper.agent { align-self: flex-start; }
.chat-message-wrapper.user  { align-self: flex-end; }

.chat-message { display: flex; gap: 10px; max-width: 80%; }
.chat-message-wrapper > .chat-message { max-width: 100%; }
.chat-message.user  { align-self: flex-end; flex-direction: row-reverse; }
.chat-message.agent { align-self: flex-start; }

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 600; flex-shrink: 0;
  background: var(--bg-l1);
  color: var(--text-secondary);
}
.avatar.nurse  { background: var(--bg-l1); color: var(--text-secondary); }
.avatar.doctor { background: var(--bg-l1); color: var(--text-secondary); }
.avatar.user   { background: var(--color-primary); color: #fff; }
.avatar.sim    { background: var(--color-primary); color: #fff; }

.bubble {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  line-height: 1.55;
  max-width: 100%;
}
.bubble.nurse,
.bubble.doctor {
  background: var(--bg-l1);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 16px 16px 16px 4px;
}
.bubble.user,
.bubble.sim {
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 16px 16px 4px 16px;
}

.bubble-label { font-size: 0.7rem; font-weight: 600; color: var(--text-tertiary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.bubble-label--light { color: rgba(255,255,255,0.7); }
.bubble-text  { white-space: normal; }
.bubble-text h1, .bubble-text h2, .bubble-text h3 { font-size: 1rem; font-weight: 600; margin: 8px 0 4px; }
.bubble-text h1 { font-size: 1.1rem; }
.bubble-text p { margin: 4px 0; }
.bubble-text p:last-child { margin-bottom: 0; }
.bubble-text ul, .bubble-text ol { margin: 4px 0; padding-left: 20px; }
.bubble-text li { margin-bottom: 2px; }

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-l1);
  border-radius: var(--radius-lg);
  font-size: 0.8rem;
  color: var(--text-tertiary);
  align-self: flex-start;
}
.typing-indicator.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.typing-indicator.agent {
  align-self: flex-start;
}
.typing-dots { display: flex; gap: 3px; }
.typing-dots span {
  width: 6px; height: 6px; background: var(--color-primary);
  border-radius: 50%; animation: bounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-6px); }
}

/* ── Chat input ───────────────────────────────────────────────────────────── */
.chat-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 0 0;
  border-top: 1px solid var(--border-default);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  resize: none;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-card);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,125,125,0.12); }
.chat-input::placeholder { color: #9ca3af; }

/* ── Provider mode ─────────────────────────────────────────────────────── */
.provider-role-label {
  width: 100%;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding-bottom: 4px;
}
.chat-input-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.input-btn-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Voice input ─────────────────────────────────────────────────────────── */
.mic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  align-self: flex-end;
}
.mic-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(0,125,125,0.06);
}
.mic-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mic-btn.recording {
  background: #DC2626;
  border-color: #DC2626;
  color: #fff;
  animation: mic-pulse 1.5s ease-in-out infinite;
}
.mic-btn.recording:hover {
  background: #B91C1C;
  border-color: #B91C1C;
}
.mic-btn.transcribing {
  border-color: var(--color-primary);
  color: var(--color-primary);
  cursor: wait;
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

.mic-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: mic-spin 0.8s linear infinite;
}

@keyframes mic-spin {
  to { transform: rotate(360deg); }
}

.recording-indicator {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 1.5px solid #DC2626;
  border-radius: var(--radius-md);
  background: rgba(220, 38, 38, 0.04);
  min-height: 44px;
}

#waveform-canvas {
  flex: 1;
  height: 36px;
  border-radius: 4px;
}

.recording-time {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  color: #DC2626;
  min-width: 36px;
  text-align: right;
}

/* ── Provider review page ────────────────────────────────────────────────── */
.provider-review-section { margin-bottom: 24px; }
.provider-review-section:last-of-type { margin-bottom: 0; }
.provider-review-label { font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-primary); }
.provider-review-textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.875rem;
  resize: vertical;
  color: var(--text-primary);
  background: var(--bg-card);
  box-sizing: border-box;
  line-height: 1.6;
}
.provider-review-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,125,125,0.12);
}
.provider-review-textarea::placeholder { color: #9ca3af; }

/* ── Sim status indicator ─────────────────────────────────────────────────── */
.sim-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  color: var(--text-tertiary);
  font-size: 0.8rem;
  flex-shrink: 0;
}
.sim-status-dots { display: flex; gap: 3px; }
.sim-status-dots span {
  width: 5px; height: 5px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: bounce 1.2s infinite;
}
.sim-status-dots span:nth-child(2) { animation-delay: 0.2s; }
.sim-status-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ── Phase transition card ────────────────────────────────────────────────── */
.phase-transition-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 24px auto;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-light);
  max-width: 420px;
  width: 100%;
  animation: fadeSlideUp 0.4s ease;
}
.phase-transition-check {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,125,125,0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
}
.phase-transition-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}
.phase-transition-btn {
  margin-top: 4px;
  padding: 10px 28px;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.transition-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 125, 125, 0.15);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 0.875rem;
  margin-bottom: 12px;
}
.alert-success { background: rgba(0,125,125,0.06); border: 1px solid var(--color-primary); color: var(--color-primary); }
.alert-warning { background: rgba(180,83,9,0.06); border: 1px solid #B45309; color: #B45309; }
.alert-danger  { background: rgba(185,28,28,0.06); border: 1px solid #B91C1C; color: #B91C1C; }
.alert-info    { background: rgba(29,78,216,0.06); border: 1px solid #1D4ED8; color: #1D4ED8; }

/* ── Emergency bar ────────────────────────────────────────────────────────── */
#emergency-bar { padding: 16px 24px 0; max-width: 960px; width: 100%; margin: 0 auto; flex-shrink: 0; }
.emergency-card {
  background: rgba(185,28,28,0.06);
  border: none;
  border-left: 4px solid #B91C1C;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 8px;
  font-size: 0.875rem;
  color: #B91C1C;
  box-shadow: var(--shadow-light);
}
.emergency-card strong { display: block; margin-bottom: 6px; font-size: 0.9rem; }
.emergency-card p { margin-top: 4px; }

.telehealth-card {
  background: rgba(146,64,14,0.06);
  border: none;
  border-left: 4px solid #92400E;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 8px;
  font-size: 0.875rem;
  color: #92400E;
  box-shadow: var(--shadow-light);
}
.telehealth-card strong { display: block; margin-bottom: 6px; font-size: 0.9rem; }
.telehealth-card p { margin-top: 4px; }

/* ── Persona expander ─────────────────────────────────────────────────────── */
details { margin-bottom: 16px; }
details summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  padding: 6px 0;
  user-select: none;
  transition: color 0.2s;
}
details summary:hover { color: var(--text-primary); }
.persona-text {
  background: var(--bg-l1);
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: 0.78rem;
  white-space: pre-wrap;
  color: var(--text-secondary);
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}

/* ── Complete page ────────────────────────────────────────────────────────── */

/* Completion banner */
.completion-banner {
  background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0,125,125,0.2);
}
.completion-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.completion-text h1 { font-size: 1.125rem; font-weight: 700; color: white; margin-bottom: 2px; }
.completion-text p  { font-size: 0.8125rem; color: rgba(255,255,255,0.8); margin: 0; }
.completion-badge {
  margin-left: auto;
  padding: 5px 14px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: white;
  white-space: nowrap;
}

/* Completion confirmation (simplified — no summaries shown to patient) */
.completion-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 40px;
  min-height: 400px;
}
.big-check {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gradient-start), var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 6px 24px rgba(0,125,125,0.25);
  animation: check-pop 0.5s ease;
}
@keyframes check-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.completion-confirm-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.completion-confirm-subtitle {
  font-size: 0.95rem;
  color: var(--text-tertiary);
  margin-bottom: 32px;
  max-width: 360px;
}
.completion-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.completion-confirm-actions .btn {
  padding: 12px 24px;
  font-size: 0.85rem;
}

/* Disclaimer box */
.complete-disclaimer {
  background: var(--bg-l1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-bottom: 14px;
  line-height: 1.5;
}
.complete-disclaimer strong { color: var(--text-secondary); }

/* Dual-panel grid */
.dual-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Document card */
.doc-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.doc-card:hover { box-shadow: var(--shadow-card); }

/* Card header */
.doc-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-l2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.doc-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: #E0F2F1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.doc-header-text h2 { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.doc-header-text span { font-size: 0.6875rem; color: var(--text-tertiary); }

/* Card body — scrollable document content */
.doc-body {
  padding: 18px 20px;
  flex: 1;
  max-height: 640px;
  overflow-y: auto;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.doc-body::-webkit-scrollbar { width: 4px; }
.doc-body::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 2px; }
.doc-body::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* Section headings in rendered markdown */
.doc-body h1, .doc-body h2, .doc-body h3 {
  font-weight: 600;
  color: var(--color-primary-dark);
  margin: 16px 0 6px;
  padding-left: 11px;
  border-left: 3px solid var(--color-primary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.doc-body h1:first-child, .doc-body h2:first-child, .doc-body h3:first-child { margin-top: 0; }
.doc-body p {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 4px 0;
  padding-left: 14px;
}
.doc-body ul, .doc-body ol {
  padding-left: 28px;
  margin: 4px 0;
}
.doc-body li {
  margin-bottom: 4px;
  line-height: 1.6;
  font-size: 0.8125rem;
}
.doc-body hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: 14px 0;
}
.doc-body strong { color: var(--text-primary); }
.doc-body blockquote {
  border-left: 3px solid var(--border-default);
  padding-left: 12px;
  margin: 8px 0;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Card footer */
.doc-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border-default);
}
.doc-footer .btn { width: 100%; }

/* Action row */
.action-row {
  display: flex;
  gap: 10px;
}
.action-row .btn {
  flex: 1;
  padding: 12px 16px;
  font-size: 0.8125rem;
}

/* Responsive: stack panels on narrow screens */
@media (max-width: 768px) {
  .dual-panels { grid-template-columns: 1fr; }
  .completion-badge { display: none; }
  .action-row { flex-direction: column; }
}

/* ── Tabbed document viewer (used in history, survey, clinician editor) ──── */
.doc-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-default);
  margin-bottom: 0;
}
.doc-tab {
  flex: 1;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-tertiary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  text-align: center;
}
.doc-tab:hover { color: var(--text-primary); }
.doc-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}
.doc-panel {
  display: none;
  padding: 20px 4px;
  max-height: 520px;
  overflow-y: auto;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.doc-panel.active { display: block; }
.doc-panel h1, .doc-panel h2, .doc-panel h3 {
  font-weight: 600;
  color: var(--color-primary-dark);
  margin: 20px 0 8px;
  padding-left: 10px;
  border-left: 3px solid var(--color-primary);
}
.doc-panel h1 { font-size: 1rem; }
.doc-panel h2 { font-size: 0.92rem; }
.doc-panel h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.doc-panel h1:first-child, .doc-panel h2:first-child, .doc-panel h3:first-child { margin-top: 0; }
.doc-panel p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 8px 0;
  padding-left: 14px;
}
.doc-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
}
.doc-actions .btn { flex: 1; }

/* ── Spinner (full-page) ──────────────────────────────────────────────────── */
.spinner-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  color: var(--text-tertiary);
  font-size: 0.875rem;
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border-default);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Divider ──────────────────────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border-default); margin: 20px 0; }

/* ── History table ────────────────────────────────────────────────────────── */
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.history-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--bg-l1);
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-default);
}
.history-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
}
.history-table tr:last-child td { border-bottom: none; }
.history-row {
  cursor: pointer;
  transition: background-color 0.15s;
}
.history-row:hover { background: var(--bg-l1); }
.history-row code {
  font-size: 0.78rem;
  background: var(--bg-l1);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
}

/* ── History detail phase card ───────────────────────────────────────────── */
.history-phase-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 12px 0;
  background: var(--bg-l1);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
}
.history-phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.history-messages {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-section {
  margin-top: 24px;
}
.history-phase-card + .history-section {
  margin-top: 0;
}

.doc-full {
  background: var(--bg-l1);
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: 0.78rem;
  white-space: pre-wrap;
  color: var(--text-secondary);
  margin-top: 4px;
}

.history-section .doc-panel {
  max-height: none;
  overflow-y: visible;
}

.doc-panel ul, .doc-panel ol { padding-left: 24px; margin: 8px 0; }
.doc-panel li { font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); }
.doc-panel hr { border: none; border-top: 1px solid var(--border-default); margin: 12px 0; }
.doc-panel strong { color: var(--text-primary); }

/* ── Feedback widget ──────────────────────────────────────────────────────── */
.feedback-widget {
  margin: 2px 0 4px 0;
}
.chat-message-wrapper.agent .feedback-widget { align-self: flex-start; padding-left: 44px; }
.chat-message-wrapper.user  .feedback-widget { align-self: flex-end; text-align: right; }
.chat-message-wrapper.user  .feedback-detail,
.chat-message-wrapper.user  .feedback-existing { text-align: left; }

.feedback-toggle-btn {
  background: rgba(0,125,125,0.04);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  cursor: pointer;
  padding: 4px 12px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.feedback-toggle-btn:hover {
  background: rgba(0,125,125,0.08);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.feedback-toggle-btn.has-feedback {
  background: rgba(0,125,125,0.08);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.feedback-detail {
  margin-top: 6px;
  padding: 10px;
  background: var(--bg-l1);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
}

.feedback-help-toggle-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.feedback-help-toggle {
  background: none;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 0.7rem;
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.feedback-help-toggle:hover {
  background: rgba(0,125,125,0.08);
  border-color: var(--color-primary);
}

.feedback-help-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
  overflow: hidden;
  max-height: 300px;
  transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}
.feedback-help-panel.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-color: transparent;
  opacity: 0;
}
.feedback-help-panel p {
  margin: 0 0 4px;
}
.feedback-help-panel ul {
  margin: 0 0 4px;
  padding-left: 18px;
}
.feedback-help-panel li {
  margin-bottom: 2px;
}
.feedback-help-panel strong {
  color: var(--text-primary);
}

/* commented out — replaced by star rating
.feedback-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.feedback-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  color: var(--text-secondary);
  text-transform: capitalize;
}
.feedback-tag input[type="checkbox"] { display: none; }
.feedback-tag.selected,
.feedback-tag:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(0,125,125,0.08);
  color: var(--color-primary);
  font-weight: 500;
}
*/

/* Star rating */
.feedback-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.feedback-rating-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-right: 4px;
}
.feedback-star {
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--border-default);
  transition: color 0.15s;
  user-select: none;
  line-height: 1;
}
.feedback-star.active {
  color: #f5a623;
}
.feedback-star:hover {
  color: #f5c563;
}
.feedback-existing-rating {
  color: #f5a623;
  font-size: 0.85rem;
  letter-spacing: 1px;
  margin-right: 6px;
}

.feedback-comment {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-family: inherit;
  resize: vertical;
  min-height: 40px;
  color: var(--text-primary);
  background: var(--bg-card);
  box-sizing: border-box;
}
.feedback-comment:focus {
  outline: none;
  border-color: var(--color-primary);
}

.feedback-save-btn {
  margin-top: 6px;
  padding: 6px 16px;
  font-size: 0.78rem;
}
.feedback-validation-error { font-size: 0.78rem; color: #B91C1C; padding: 4px 0 8px; }

.feedback-existing {
  margin-top: 6px;
  padding: 6px 0;
  border-top: 1px solid var(--border-default);
}
.feedback-existing-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}
.feedback-existing-reviewer {
  font-weight: 600;
  color: var(--text-secondary);
}
.feedback-existing-tags {
  font-style: italic;
}
.feedback-existing-comment {
  color: var(--text-secondary);
}
.feedback-edit-btn {
  background: none;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: var(--color-primary);
  cursor: pointer;
  margin-left: auto;
  transition: background 0.15s, border-color 0.15s;
}
.feedback-edit-btn:hover {
  background: rgba(0,125,125,0.08);
  border-color: var(--color-primary);
}
.feedback-delete-btn {
  background: none;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: #B91C1C;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.feedback-delete-btn:hover {
  background: rgba(185,28,28,0.08);
  border-color: #B91C1C;
}
/* ── Session delete button (history list table) ──────────────────────────── */
.session-delete-btn {
  background: none;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.78rem;
  color: #B91C1C;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.session-delete-btn:hover {
  background: rgba(185,28,28,0.08);
  border-color: #B91C1C;
}
/* ── Danger button variant ──────────────────────────────────────────────── */
.btn-danger {
  background: #B91C1C;
  color: #fff;
  border: none;
}
.btn-danger:hover {
  background: #991B1B;
}
/* ── Custom confirm dialog ──────────────────────────────────────────────────── */
.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.confirm-dialog {
  background: var(--bg-card);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  max-width: 360px;
  width: 90%;
}
.confirm-dialog-message {
  margin: 0 0 20px;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.4;
}
.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.confirm-dialog-cancel,
.confirm-dialog-confirm {
  border: none;
  border-radius: 6px;
  padding: 7px 18px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}
.confirm-dialog-cancel {
  background: var(--bg-l1);
  color: var(--text-secondary);
}
.confirm-dialog-cancel:hover {
  background: var(--border-default);
}
.confirm-dialog-confirm {
  background: #B91C1C;
  color: #fff;
}
.confirm-dialog-confirm:hover {
  background: #991B1B;
}
.confirm-dialog-confirm--primary {
  background: var(--color-primary);
  color: #fff;
}
.confirm-dialog-confirm--primary:hover {
  background: var(--color-primary-dark);
}
.feedback-tag-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--color-primary);
  background: rgba(0,125,125,0.06);
  font-size: 0.75rem;
  color: var(--color-primary);
  margin-right: 4px;
  text-transform: capitalize;
}

/* ── Guidance card dismiss button ─────────────────────────────────────────── */
.guidance-card { position: relative; padding-right: 32px; margin: 0 0 8px; }
.guidance-dismiss {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; font-size: 1.1rem; line-height: 1;
  color: var(--color-primary); cursor: pointer; padding: 2px 6px;
  border-radius: 4px; opacity: 0.6; transition: opacity 0.15s;
}
.guidance-dismiss:hover { opacity: 1; background: rgba(0,125,125,0.08); }

/* ── Streaming cursor ─────────────────────────────────────────────────────── */
/* Target the last child element so the cursor appears inline at the end of
   parsed markdown (e.g. inside the last block-level element) instead of below it. */
.streaming-cursor > *:last-child::after,
.streaming-cursor:empty::after {
  content: '▋';
  animation: cursor-blink 0.7s step-end infinite;
  color: inherit;
  opacity: 0.5;
  margin-left: 1px;
}
.bubble.nurse .streaming-cursor > *:last-child::after,
.bubble.doctor .streaming-cursor > *:last-child::after {
  color: var(--text-tertiary);
  opacity: 1;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #sidebar { display: none; }
  #sidebar-resize-handle { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .radio-group { flex-direction: column; }
  .download-row { grid-template-columns: 1fr; }
  #content { padding: 20px 16px; }
}

/* ── Evaluation Survey & Dashboard ───────────────────────────────────────── */

/* Survey split-screen layout */
.survey-page {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: none;
}
#content:has(.survey-page) {
  overflow: hidden;
  padding: 0;
}
.survey-left {
  flex: 0 0 60%;
  overflow-y: auto;
  padding: 24px;
  border-right: 1px solid var(--border-default);
}
.survey-right {
  flex: 0 0 40%;
  overflow-y: auto;
  padding: 24px;
  background: var(--bg-l2);
}
.survey-transcript {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.survey-left h2 {
  font-size: 1rem;
  margin-bottom: 8px;
}

/* Survey form elements */
.survey-section {
  margin-bottom: 24px;
}
.survey-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-primary);
}
.survey-question {
  margin-bottom: 16px;
}
.survey-question-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

/* Likert scale (radio group) */
.survey-likert-row {
  display: flex;
  gap: 4px;
}
.survey-likert-option {
  flex: 1;
  text-align: center;
}
.survey-likert-option input[type="radio"] {
  display: none;
}
.survey-likert-option label {
  display: block;
  padding: 6px 4px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 0.72rem;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.survey-likert-option label:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.survey-likert-option input[type="radio"]:checked + label {
  border-color: var(--color-primary);
  background: rgba(0,125,125,0.1);
  color: var(--color-primary);
  font-weight: 600;
}

/* Yes/No/Not Sure pills */
.survey-yesno-row {
  display: flex;
  gap: 8px;
}
.survey-yesno-option input[type="radio"] {
  display: none;
}
.survey-yesno-option label {
  display: inline-block;
  padding: 6px 16px;
  border: 1.5px solid var(--border-default);
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.survey-yesno-option label:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.survey-yesno-option input[type="radio"]:checked + label {
  border-color: var(--color-primary);
  background: rgba(0,125,125,0.1);
  color: var(--color-primary);
  font-weight: 600;
}

/* Survey form bottom */
.survey-comments {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
}
.survey-comments:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,125,125,0.12);
}
.survey-submit-row {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
}
.survey-success {
  color: #2a7d2a;
  font-weight: 500;
  margin-top: 8px;
}

/* Survey success overlay */
.survey-success-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
  padding: 40px 24px;
}
.survey-tick-circle {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
}
.survey-tick-svg {
  width: 80px;
  height: 80px;
}
.survey-tick-circle-bg {
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: survey-tick-circle-draw 0.6s ease forwards;
}
.survey-tick-check {
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: survey-tick-check-draw 0.4s 0.4s ease forwards;
}
@keyframes survey-tick-circle-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes survey-tick-check-draw {
  to { stroke-dashoffset: 0; }
}
.survey-thankyou-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  opacity: 0;
  animation: survey-fade-in 0.4s 0.8s ease forwards;
}
.survey-thankyou-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 28px;
  opacity: 0;
  animation: survey-fade-in 0.4s 1.0s ease forwards;
}
.survey-success-overlay .btn {
  opacity: 0;
  animation: survey-fade-in 0.4s 1.2s ease forwards;
  min-width: 180px;
}
@keyframes survey-fade-in {
  to { opacity: 1; }
}

/* Resizable divider between survey panels */
.survey-divider {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.survey-divider:hover,
.survey-divider.dragging {
  background: var(--color-primary);
}

/* ── Evaluation Dashboard ────────────────────────────────────────────────── */
.eval-dashboard {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.eval-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.eval-stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border-left: 4px solid var(--border-default);
}
.eval-stat-card.green  { border-left-color: #2a7d2a; }
.eval-stat-card.yellow { border-left-color: #c49a20; }
.eval-stat-card.red    { border-left-color: #c42020; }
.eval-section-heading {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 8px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eval-stat-card-score-single {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.eval-stat-card-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.eval-stat-card-dual {
  display: flex;
  gap: 16px;
  margin-bottom: 6px;
}
.eval-stat-card-score {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.eval-score-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
}
.eval-stat-card-score.human .eval-score-value { color: #007D7D; }
.eval-stat-card-score.llm .eval-score-value { color: #7C3AED; }
.eval-score-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.eval-score-count {
  font-size: 0.65rem;
  color: var(--text-tertiary);
}
.eval-delta-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
}
.eval-delta-badge.positive { background: #e6f4e6; color: #2a7d2a; }
.eval-delta-badge.negative { background: #fde8e8; color: #c42020; }

/* Charts row */
.eval-charts-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}
.eval-chart-container {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 16px;
}
.eval-chart-container canvas {
  max-height: 320px;
}
.eval-chart-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text-secondary);
}

/* Dashboard controls */
.eval-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.eval-controls select {
  padding: 6px 12px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  background: var(--bg-card);
}
.eval-controls label {
  font-size: 0.82rem;
  font-weight: 600;
}

/* Filter bar */
.eval-filter-bar {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.eval-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eval-filter-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.eval-filter-input,
.eval-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  font-size: 0.8rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.eval-filter-input:focus,
.eval-filter-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Dashboard session table */
.eval-session-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.eval-session-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid var(--border-default);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
}
.eval-session-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}
.eval-session-table tr:hover {
  background: var(--bg-l1);
}

/* Badges */
.eval-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
}
.eval-badge-green { background: #e6f4e6; color: #2a7d2a; }
.eval-badge-gray  { background: var(--bg-l1); color: var(--text-tertiary); }
.eval-badge-blue  { background: #e6f0f4; color: #2a5a7d; }

/* Score comparison table (eval detail) */
.eval-score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.eval-score-table th,
.eval-score-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-default);
  text-align: center;
}
.eval-score-table th:first-child,
.eval-score-table td:first-child {
  text-align: left;
}
.eval-score-cell {
  font-weight: 600;
}
.eval-score-cell.high { color: #2a7d2a; }
.eval-score-cell.mid  { color: #c49a20; }
.eval-score-cell.low  { color: #c42020; }
.eval-gap-warning {
  background: #fff3e0;
}

/* Eval detail header */
.eval-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* Comparison mode */
.eval-comparison-header {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.eval-comparison-header div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.eval-comparison-header label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.eval-comparison-header select {
  padding: 4px 10px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  background: var(--bg-card);
}
.eval-comparison-summary {
  display: flex;
  gap: 24px;
  padding: 12px 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-default);
  margin-top: 8px;
}
.eval-delta-pos { color: #2a7d2a; font-weight: 600; }
.eval-delta-neg { color: #c42020; font-weight: 600; }
.eval-delta-large { color: #c42020; font-weight: 700; background: #fde8e8; }

/* Spinner (inline row) */
.eval-row-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-default);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── Survey & Dashboard responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
  .survey-page {
    flex-direction: column;
  }
  .survey-left,
  .survey-right {
    flex: auto;
    width: 100%;
  }
  .survey-divider {
    display: none;
  }
  .survey-left {
    border-right: none;
    border-bottom: 1px solid var(--border-default);
  }
  .eval-charts-row {
    flex-direction: column;
  }
  .eval-comparison-summary {
    flex-direction: column;
    gap: 4px;
  }
}

/* ── File upload / attachments ─────────────────────────────────────────────── */
.attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 1.5px solid var(--border-default);
  border-radius: 50%;
  background: var(--bg-l0);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.attach-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.attachment-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 0;
  min-height: 0;
}
.attach-preview-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-l1);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.82rem;
  max-width: 200px;
}
.attach-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
}
.attach-file-icon {
  font-size: 1.3rem;
  line-height: 1;
}
.attach-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  color: var(--text-secondary);
}
.attach-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-muted);
  padding: 0 2px;
  line-height: 1;
}
.attach-remove:hover {
  color: var(--color-danger, #d33);
}

/* Attachment thumbnails in chat bubbles */
.bubble-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.chat-attachment-thumb {
  max-width: 200px;
  max-height: 160px;
  border-radius: 6px;
  object-fit: contain;
  border: 1px solid var(--border-default);
  cursor: pointer;
}
.chat-attachment-thumb:hover {
  opacity: .85;
}
.chat-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-l1);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ── Auto-eval results (ground truth) ──────────────────────────────────────── */
.eval-judge-bars {
  margin-bottom: 8px;
}
.eval-field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 8px;
}
.eval-field-table th,
.eval-field-table td {
  text-align: left;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border-default);
}
.eval-field-table th {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.eval-badge-ok {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #e6f4e6;
  color: #2a7d2a;
}
.eval-badge-fail {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #fde8e8;
  color: #c42020;
}

/* Auto-eval dashboard tab */
.auto-eval-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-default);
  margin-bottom: 16px;
}
.auto-eval-tab {
  padding: 8px 20px;
  cursor: pointer;
  border: none;
  background: none;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.auto-eval-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════════
   One Medical Design Language — New Components
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar: New Chat button ─────────────────────────────────────────────── */
.sidebar-new-chat-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border: none;
  background: var(--bg-l1);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.sidebar-new-chat-btn:hover {
  background: var(--bg-l2);
}
.new-chat-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Sidebar heading ──────────────────────────────────────────────────────── */
.sidebar-heading {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

/* ── Queued message (vitals page) ─────────────────────────────────────────── */
.queued-msg {
  background: rgba(0,125,125,0.06);
  border: 1px solid rgba(0,125,125,0.15);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.queued-msg strong { color: var(--color-primary); }

/* ── Begin consultation button ────────────────────────────────────────────── */
.begin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.begin-btn:hover { background: var(--color-primary-hover); }
/* Matches .btn:disabled — the patient picker holds Begin closed until a case is chosen. */
.begin-btn:disabled { opacity: 0.45; cursor: not-allowed; background: var(--color-primary); }

/* ── Sidebar: Conversation History ────────────────────────────────────────── */
.sidebar-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}
.sidebar-history-list::-webkit-scrollbar {
  width: 5px;
}
.sidebar-history-list::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-history-list::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 4px;
}
.sidebar-history-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}
.sidebar-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
.sidebar-history-item:hover {
  background: var(--bg-l1);
}
.sidebar-history-item.active {
  background: rgba(0,125,125,0.08);
}
.sidebar-history-info {
  flex: 1;
  min-width: 0;
}
.sidebar-history-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-history-date {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.sidebar-history-menu-btn {
  opacity: 0;
  transition: opacity 0.15s;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
}
.sidebar-history-item:hover .sidebar-history-menu-btn {
  opacity: 1;
}
.sidebar-history-menu-btn:hover {
  background: var(--bg-l1);
  color: var(--text-primary);
}
.sidebar-history-empty {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  text-align: center;
  padding: 12px 0;
}

/* ── Home page (One Medical welcome) ──────────────────────────────────────── */
.home-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}
.home-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 24px 24px;
}
.greeting-heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.greeting-subtitle {
  font-size: 1rem;
  color: var(--text-tertiary);
  margin-bottom: 32px;
  line-height: 1.5;
}

/* Quick-action pills */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.quick-pill {
  padding: 10px 20px;
  border-radius: 24px;
  border: 1.5px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}
.quick-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(0,125,125,0.04);
}

/* Feature cards grid */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.feature-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-light);
  border: 1px solid var(--border-default);
  cursor: default;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.feature-card:hover {
  box-shadow: var(--shadow-card);
  border-color: rgba(0,125,125,0.2);
}
.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-l1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--color-primary);
}
.feature-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.feature-desc {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  line-height: 1.45;
}
.card-step {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(0,125,125,0.08);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* ── Patient selection: list + wide detail ─────────────────────────────────── */
/* The first version reused .patient-grid — auto-fill cards at minmax(210px) that expanded in place.
   A dated event trace inside a 210px column is unreadable, and .home-page's 800px cap left most of
   the screen empty while doing it. Two panes instead, which is how Xlue-ai/patient-data-viewer
   solves the same problem: a narrow list to choose from, and the history at a width it can be read
   at. Deliberately NOT capped at 800px like the welcome page, which is a centred explainer and
   wants to be. */
.select-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 24px 20px;
  min-height: 0;
}
.select-head { flex-shrink: 0; }
.select-head .greeting-heading { font-size: 1.6rem; margin-bottom: 4px; }
.select-head .greeting-subtitle { margin-bottom: 18px; }

/* min-height:0 on both the body and its children is what lets the two panes scroll independently
   instead of the whole page growing past the viewport. */
.select-body {
  flex: 1;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  min-height: 0;
}
.select-list {
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}
.select-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-default);
  border-left: 3px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.select-row:hover { background: var(--bg-l1); }
.select-row.selected {
  border-color: var(--color-primary);
  border-left-color: var(--color-primary);
  background: rgba(0,125,125,0.06);
}
.select-row-name { font-size: 0.85rem; font-weight: 600; }
.select-row-meta { font-size: 0.68rem; color: var(--text-tertiary); line-height: 1.3; }
.select-row-events {
  font-size: 0.6rem;
  color: var(--color-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.select-detail {
  overflow-y: auto;
  min-height: 0;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 18px 20px;
  background: var(--bg-surface, #fff);
}
.select-detail-head { margin-bottom: 12px; }
.select-detail-name { font-size: 1.1rem; font-weight: 700; }
.select-detail-meta { font-size: 0.75rem; color: var(--text-tertiary); }
.select-empty {
  color: var(--text-tertiary);
  font-size: 0.8rem;
  padding: 40px 0;
  text-align: center;
}
.select-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  padding-top: 16px;
}
@media (max-width: 900px) {
  .select-body { grid-template-columns: 1fr; }
  .select-list { max-height: 30vh; }
}

/* Expanded history on a selection card.
   Structure ported from Xlue-ai/patient-data-viewer, which solves the same problem: one bordered row
   per dated event, chips carrying the code with its description underneath, and the prediction anchor
   called out. Its palette is dark green on #f7f9f7; this is the demo's house teal on white, because
   dropping one product's colours into another reads as a bolted-on tool. */
.wm-detail {
  text-align: left;
}
.wm-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 160px));
  gap: 10px;
  margin-bottom: 14px;
}
.wm-stat {
  background: var(--bg-l1);
  border-radius: 8px;
  padding: 10px 12px;
}
.wm-stat b {
  display: block;
  font-size: 1.25rem;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.wm-stat span {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  line-height: 1.2;
}
.wm-legend { margin-bottom: 8px; }
.wm-legend-item {
  display: inline-block;
  font-size: 0.66rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 5px;
  color: var(--text-secondary);
}
.wm-legend-item--context { background: rgba(0,125,125,0.10); }
.wm-legend-item--withheld {
  background: var(--bg-l1);
  color: var(--text-tertiary);
  box-shadow: inset 0 0 0 1px var(--border-default);
}

/* One dated event. The left border is the "model context" marker; the anchor row inverts it, so the
   boundary between what the model sees and what it must not is visible without reading the labels. */
.wm-event {
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: rgba(0,125,125,0.04);
}
/* The boundary. Solid, full-weight left border and an outline, because in the viewer this is the
   one row that has to be findable at a glance -- everything above it the model reads, everything
   below it never existed as far as the model is concerned. */
.wm-event--anchor {
  background: rgba(0,125,125,0.10);
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* The gray half of the contrast. The first port kept the green events and the anchor and dropped
   this, which left the boundary carrying no visual weight at all -- a stack of green boxes and a
   dashed box. It stands in for the withheld period without showing any of it. */
/* Diagnoses the model cannot see because the case store truncated the history. Same gray family as
   .wm-withheld, because it is the same kind of statement: real history, outside the window. */
.wm-outside {
  border: 1px solid var(--border-default);
  border-left: 4px solid #9da6a1;
  border-radius: 8px;
  background: var(--bg-l1);
  color: var(--text-tertiary);
  font-size: 0.68rem;
  line-height: 1.45;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.wm-outside b { color: var(--text-secondary); }
.wm-withheld {
  border: 1px solid var(--border-default);
  border-top: 0;
  border-left: 4px solid #9da6a1;
  border-radius: 0 0 8px 8px;
  background: var(--bg-l1);
  color: var(--text-tertiary);
  font-size: 0.68rem;
  line-height: 1.45;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.wm-event-count {
  font-weight: 400;
  color: var(--text-tertiary);
  font-size: 0.66rem;
  margin-left: 6px;
}
.wm-event-head {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.wm-toks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
/* Code above description, so a trace reads without hovering or clicking — the one detail from that
   viewer most worth keeping, since an ICD code alone tells a reader nothing. */
.wm-tok {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 22em;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-default);
  border-radius: 5px;
  padding: 4px 8px;
  line-height: 1.3;
}
.wm-tok-code {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wm-tok-desc {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}
/* What the model is being tested on. Stated as the task; the answer arrives after the
   consultation, from its own endpoint, for the reason in app.js. */
.wm-task {
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
  background: rgba(0,125,125,0.06);
  font-size: 0.7rem;
  line-height: 1.5;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.wm-task b { color: var(--color-primary-dark, var(--color-primary)); }

/* Named diagnoses read differently from the labs around them -- they are the part a clinician
   scans, and the rest is what the model spends its context on. */
.wm-tok--dx {
  border-color: var(--color-primary);
  background: rgba(0,125,125,0.07);
}
/* Value bins, counted rather than drawn: 2,134 of the roster's 5,022 tokens, each of which reads
   "value bin 9 of value group IN-3026-2-UGDL". */
.wm-tok--values {
  border-style: dashed;
  color: var(--text-tertiary);
  align-self: center;
}
.wm-detail-note {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  line-height: 1.35;
  margin-top: 4px;
}

/* Home input bar (bottom-anchored) */
.home-input-bar {
  flex-shrink: 0;
  padding: 16px 24px 24px;
}
.home-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-default);
  border-radius: 28px;
  padding: 4px 8px 4px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.home-input-row:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,125,125,0.12);
}
.home-chat-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.9rem;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  padding: 8px 4px;
}
.home-chat-input::placeholder {
  color: var(--text-tertiary);
}

/* ── Chat input capsule (replaces flat row) ───────────────────────────────── */
.chat-input-container {
  flex-shrink: 0;
  padding: 12px 0 8px;
}
.chat-input-bar-capsule {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-default);
  border-radius: 24px;
  padding: 4px 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-input-bar-capsule:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,125,125,0.12);
}
.chat-input-field {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text-primary);
  background: transparent;
  padding: 8px 4px;
  max-height: 120px;
  line-height: 1.5;
}
.chat-input-field::placeholder {
  color: var(--text-tertiary);
}
.input-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.input-icon-btn:hover {
  color: var(--color-primary);
  background: rgba(0,125,125,0.06);
}
.input-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.input-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.input-send-btn:hover:not(:disabled) {
  background: var(--color-primary-hover);
}
.input-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Recording indicator inside capsule */
.chat-input-bar-capsule .recording-indicator {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}

/* ── Chat bottom gradient fade ────────────────────────────────────────────── */
#chat-input-area {
  position: relative;
}
#chat-input-area::before {
  content: '';
  display: block;
  height: 40px;
  margin-top: -40px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-l0));
  position: relative;
  z-index: 1;
}

/* ── Admin sidebar settings ───────────────────────────────────────────────── */
.sidebar-admin-settings summary {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 0;
}
.sidebar-admin-settings .admin-models-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.sidebar-admin-settings label {
  display: block;
  font-weight: 500;
  font-size: 0.75rem;
  margin-bottom: 2px;
  color: var(--text-secondary);
}
.sidebar-admin-settings select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-card);
}
.sidebar-mode-pills {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.sidebar-mode-pill {
  flex: 1;
  padding: 6px 4px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.sidebar-mode-pill.selected {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.sidebar-mode-pill:hover:not(.selected) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Welcome page disclaimer ──────────────────────────────────────────────── */
.home-disclaimer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 16px;
  font-style: italic;
}

/* ── Google Translate & language switcher — DISABLED (widget causes bugs) ──
.skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-te-banner-frame { display: none !important; }
#google_translate_element { display: none !important; }
.lang-switcher-wrap {
  padding: 0 0 4px;
}
.lang-switcher {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-l2);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6C6C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lang-switcher:hover {
  border-color: var(--color-primary);
}
.lang-switcher:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 125, 125, 0.15);
}
── end disabled block ──────────────────────────────────────────────────── */

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sidebar { display: none; }
  #sidebar-resize-handle { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .quick-actions { justify-content: center; }
  .greeting-heading { font-size: 1.5rem; }
  .home-content { padding: 24px 16px 16px; }
  .home-input-bar { padding: 12px 16px 16px; }
}