/* ════════════════════════════════════════════════════════════════
   Design tokens — mirrored 1:1 from lib/style_guide.dart.
   Do not introduce values outside this list.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Colors — AppColors */
  --primary-blue:         #185FA5;
  --primary-blue-surface: #E6F1FB;
  --primary-blue-text:    #0C447C;

  --success-green:   #0F6E56;
  --success-surface: #E1F5EE;
  --warning-amber:   #854F0B;
  --warning-surface: #FAEEDA;
  --error-red:       #A32D2D;
  --error-surface:   #FCEBEB;

  --ai-badge-bg:        #E6F1FB;
  --ai-badge-text:      #0C447C;
  --ai-draft-border-l:  #185FA5;

  --surface-primary:   #FFFFFF;
  --surface-secondary: #F8F8F8;
  --surface-tertiary:  #F1F0EA;
  --border-default:    rgba(0,0,0,0.15);
  --border-emphasis:   rgba(0,0,0,0.30);
  --text-primary:      #1A1A1A;
  --text-secondary:    #666666;
  --text-tertiary:     #999999;

  --sync-synced: #0F6E56;

  /* Spacing — AppSpacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;

  /* Radius — AppRadius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Typography — AppTypography (weights: 400 normal / 500 bold — NEVER 600/700) */
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-md: 12px;
  --fs-base: 13px;
  --fs-lg: 14px;
  --fs-xl: 16px;
  --fs-h3: 16px;
  --fs-h2: 18px;
  --fs-h1: 22px;
  --fw-normal: 400;
  --fw-bold: 500;

  /* Panels — AppPanels */
  --topbar-h: 42px;
  --right-default: 260px;
  --left-default: 240px;
}

* , *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: var(--fs-base); color: var(--text-primary); background: var(--surface-secondary); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }

.v4-text-tertiary { color: var(--text-tertiary); }
.v4-icon-muted { color: var(--text-tertiary); }

/* ─── Design-review-only control bar ──────────────────────────── */
.v4-review-bar {
  height: 40px; background: #FFF3C4; border-bottom: 2px dashed #B8860B;
  font-size: var(--fs-sm); color: #5C4400;
}
.v4-review-label { font-weight: var(--fw-bold); }
.v4-toggle { display: flex; gap: 6px; margin-left: 8px; }
.v4-toggle-btn {
  background: #fff; border: 1px solid #B8860B; color: #5C4400;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  padding: 5px 12px; border-radius: var(--r-md);
}
.v4-toggle-btn.active { background: #B8860B; color: #fff; }

/* ─── App shell ───────────────────────────────────────────────── */
.v4-app { display: flex; flex-direction: column; height: calc(100vh - 40px); }

/* ─── Crisis/Routine mode toggle — drives every data-dependent element ── */
.v4-app[data-mode="crisis"]  .v4-only-routine { display: none !important; }
.v4-app[data-mode="routine"] .v4-only-crisis  { display: none !important; }

.v4-topbar {
  height: var(--topbar-h); background: var(--surface-primary);
  border-bottom: 1px solid var(--border-default);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; flex-shrink: 0;
}
.v4-topbar-brand { display: flex; flex-direction: column; }
.v4-topbar-center { display: flex; justify-content: center; }
.v4-topbar-right { display: flex; align-items: center; gap: var(--sp-sm); justify-content: flex-end; }
.v4-brand-name { font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.2; }
.v4-brand-sub { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.2; }

.v4-btn-ai {
  display: flex; align-items: center; gap: 6px; background: transparent;
  border: 1px solid var(--success-green); color: var(--success-green);
  font-size: var(--fs-md); font-weight: var(--fw-bold); padding: 4px 12px; border-radius: var(--r-md);
}
.v4-ai-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-green); display: inline-block; }

.v4-btn-outline {
  background: transparent; border: 1px solid var(--border-emphasis); color: var(--primary-blue);
  font-size: var(--fs-md); padding: 4px 12px; border-radius: var(--r-md);
}
.v4-btn-outline:hover { background: var(--surface-secondary); }

.v4-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary-blue); color: #fff;
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.v4-trial { height: 32px; background: var(--primary-blue); color: #fff; font-size: var(--fs-md); flex-shrink: 0; }
.v4-upgrade { color: #fff; font-weight: var(--fw-bold); text-decoration: underline; }

.v4-app-body { flex-grow: 1; min-height: 0; overflow: hidden; }

/* ─── Sidebar ─────────────────────────────────────────────────── */
.v4-sidebar { width: var(--left-default); min-width: var(--left-default); background: var(--surface-primary); border-right: 1px solid var(--border-default); overflow: hidden; }
.v4-sidebar-header { border-bottom: 1px solid var(--border-default); font-size: var(--fs-base); font-weight: var(--fw-bold); }
.v4-sidebar-title { font-size: var(--fs-base); font-weight: var(--fw-bold); }
.v4-search { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 5px 8px; }
.v4-search-input { background: transparent; border: none; outline: none; font-size: var(--fs-md); width: 100%; }
.v4-search-input::placeholder { color: var(--text-tertiary); }
.v4-patient-chip { background: var(--surface-secondary); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); cursor: pointer; }
.v4-avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-blue); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v4-chip-name { font-size: var(--fs-md); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v4-chip-meta { font-size: var(--fs-sm); color: var(--text-secondary); }
.v4-nav-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; color: var(--text-tertiary); text-transform: uppercase; margin-top: 4px; }
.v4-nav { overflow-y: auto; }
.v4-nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: var(--fs-base); color: var(--text-secondary); }
.v4-nav-item i { font-size: 14px; flex-shrink: 0; }
.v4-nav-item:hover { background: var(--surface-secondary); color: var(--text-primary); }
.v4-nav-active { background: var(--primary-blue-surface); color: var(--primary-blue); border-left: 2px solid var(--primary-blue); }
.v4-nav-ai { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--primary-blue); border-top: 1px solid var(--border-default); flex-shrink: 0; }
.v4-nav-ai:hover { background: var(--surface-secondary); }

/* ─── Main ────────────────────────────────────────────────────── */
.v4-main { background: var(--surface-secondary); min-width: 0; position: relative; }

.v4-patient-header { background: var(--surface-primary); border-bottom: 1px solid var(--border-default); padding: 10px var(--sp-xl); flex-shrink: 0; min-height: 54px; }
.v4-avatar-lg { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-blue); color: #fff; font-size: var(--fs-base); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v4-ph-name { font-size: var(--fs-xl); font-weight: var(--fw-bold); display: flex; align-items: center; gap: 8px; }
.v4-age-chip { font-size: var(--fs-sm); font-weight: var(--fw-bold); background: var(--primary-blue-surface); color: var(--primary-blue-text); border: 1px solid var(--border-default); padding: 1px 8px; border-radius: 20px; }
.v4-ph-meta { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 2px; }
.v4-btn-ghost { background: transparent; border: 1px solid var(--border-emphasis); color: var(--text-secondary); font-size: var(--fs-md); padding: 5px 14px; border-radius: var(--r-md); }
.v4-btn-ghost:hover { background: var(--surface-secondary); color: var(--text-primary); }

.v4-tabbar { background: var(--surface-primary); border-bottom: 1px solid var(--border-default); height: 40px; padding: 0 12px; flex-shrink: 0; overflow-x: auto; }
.v4-tab { display: flex; align-items: center; padding: 0 14px; height: 40px; font-size: var(--fs-md); color: var(--text-secondary); border-bottom: 2px solid transparent; white-space: nowrap; }
.v4-tab:hover { color: var(--text-primary); }
.v4-tab-active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); }
.v4-tab-add { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--text-tertiary); font-size: 16px; }
.v4-tab-add:hover { background: var(--surface-secondary); }

.v4-body { overflow-y: auto; }
.v4-stream { max-width: 980px; display: flex; flex-direction: column; gap: var(--sp-lg); }

/* ─── Ambient scribe bar ──────────────────────────────────────── */
.v4-scribe-bar { height: 46px; flex-shrink: 0; background: var(--primary-blue-surface); border-bottom: 1px solid var(--border-default); transition: background 0.2s; }
.v4-scribe-bar.paused { background: var(--surface-secondary); }
.v4-mic-pulse { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--primary-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); animation: v4MicPulse 1.8s infinite; }
.v4-scribe-bar.paused .v4-mic-pulse { background: var(--text-tertiary); animation: none; }
@keyframes v4MicPulse {
  0%   { box-shadow: 0 0 0 0 rgba(24,95,165,0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(24,95,165,0); }
  100% { box-shadow: 0 0 0 0 rgba(24,95,165,0); }
}
.v4-scribe-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--primary-blue-text); }
.v4-scribe-bar.paused .v4-scribe-label { color: var(--text-secondary); }
.v4-scribe-caption { font-size: var(--fs-md); color: var(--text-secondary); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v4-ask-ai-pill { display: flex; align-items: center; gap: 6px; white-space: nowrap; background: var(--surface-primary); border: 1px solid var(--border-emphasis); color: var(--text-secondary); font-size: var(--fs-md); padding: 5px 12px; border-radius: 20px; }
.v4-ask-ai-pill i { color: var(--primary-blue); }
.v4-ask-ai-pill kbd { font-size: var(--fs-xs); background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: 4px; padding: 1px 4px; }
.v4-scribe-toggle { display: flex; align-items: center; gap: 4px; white-space: nowrap; background: var(--surface-primary); border: 1px solid var(--border-emphasis); color: var(--primary-blue-text); font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: 4px 10px; border-radius: var(--r-md); }

/* ─── RIGHT NOW focus card ────────────────────────────────────── */
.v4-focus-card {
  display: flex; align-items: center; gap: var(--sp-lg);
  background: var(--error-surface); border: 1.5px solid var(--error-red);
  border-radius: var(--r-lg); padding: var(--sp-lg) var(--sp-xl);
}
.v4-focus-icon { width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0; background: var(--error-red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.v4-focus-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.1em; color: var(--error-red); }
.v4-focus-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-primary); margin-top: 2px; }
.v4-focus-sub { font-size: var(--fs-base); color: var(--text-secondary); margin-top: 3px; }
.v4-focus-btn { background: var(--error-red); color: #fff; border: none; font-size: var(--fs-md); font-weight: var(--fw-bold); padding: 10px 16px; border-radius: var(--r-md); white-space: nowrap; flex-shrink: 0; }
.v4-focus-btn:hover { opacity: 0.9; }

/* ─── AI Patient Brief — neutral, always present ─────────────── */
.v4-brief {
  background: var(--surface-primary); border: 1px solid var(--border-default);
  border-left: 3px solid var(--primary-blue);
  border-radius: var(--r-lg); padding: var(--sp-lg);
}
.v4-brief-icon { width: 30px; height: 30px; border-radius: var(--r-md); flex-shrink: 0; background: var(--primary-blue-surface); color: var(--primary-blue-text); display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); }
.v4-brief-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; }
.v4-brief-text { font-size: var(--fs-base); line-height: 1.55; color: var(--text-primary); margin-bottom: 6px; }
.v4-brief-meta { font-size: var(--fs-sm); color: var(--text-tertiary); }
.v4-brief-meta a { color: var(--primary-blue); font-weight: var(--fw-bold); }

/* ─── Unified risk strip ──────────────────────────────────────── */
.v4-risk-strip { padding: 0; }
.v4-risk-badge { font-size: var(--fs-md); font-weight: var(--fw-bold); padding: 5px 12px; border-radius: 20px; white-space: nowrap; background: var(--error-surface); color: var(--error-red); border: 1px solid var(--error-red); }
.v4-chip { font-size: var(--fs-md); font-weight: var(--fw-bold); padding: 5px 12px; border-radius: 20px; white-space: nowrap; display: inline-flex; align-items: center; }
.v4-chip.chip-error { background: var(--error-surface); color: var(--error-red); border: 1px solid var(--error-red); }
.v4-chip.chip-warning { background: var(--warning-surface); color: var(--warning-amber); border: 1px solid var(--warning-amber); }
.v4-link { font-size: var(--fs-md); color: var(--text-secondary); white-space: nowrap; }
.v4-link:hover { color: var(--primary-blue); }

/* ─── Block header / generic ──────────────────────────────────── */
.v4-block { display: flex; flex-direction: column; gap: var(--sp-sm); }
.v4-block-title { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.v4-block-sub { font-size: var(--fs-sm); color: var(--text-tertiary); }
.v4-synced-tag { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--success-green); background: var(--success-surface); border: 1px solid var(--success-green); padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.v4-ai-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: var(--fw-bold); background: var(--ai-badge-bg); color: var(--ai-badge-text); padding: 3px 9px; border-radius: 20px; }
.v4-count-badge { font-size: var(--fs-xs); font-weight: var(--fw-bold); background: var(--surface-tertiary); color: var(--text-secondary); border: 1px solid var(--border-default); padding: 1px 7px; border-radius: 20px; }

/* ─── Vitals trend cards ──────────────────────────────────────── */
.v4-trend-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-md); }
.v4-trend-card { border-radius: var(--r-lg); border: 1px solid var(--border-default); border-top-width: 3px; padding: var(--sp-md) var(--sp-md) var(--sp-sm); background: var(--surface-primary); }
.v4-trend-card.sev-error   { border-top-color: var(--error-red);     background: var(--error-surface); }
.v4-trend-card.sev-warning { border-top-color: var(--warning-amber); background: var(--warning-surface); }
.v4-trend-card.sev-normal  { border-top-color: var(--success-green); }
.v4-trend-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.v4-vs-badge { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.04em; padding: 1px 7px; border-radius: var(--r-sm); }
.v4-vs-badge.badge-error   { background: var(--error-red);     color: #fff; }
.v4-vs-badge.badge-warning { background: var(--warning-amber); color: #fff; }
.v4-vs-badge.badge-normal  { background: var(--success-green); color: #fff; }
.v4-trend-value { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--text-primary); margin-top: 4px; line-height: 1; }
.v4-trend-slash { font-size: var(--fs-xl); color: var(--text-tertiary); font-weight: var(--fw-normal); margin: 0 1px; }
.v4-spark { width: 100%; height: 22px; margin-top: 6px; display: block; }
.v4-spark polyline { fill: none; stroke-width: 2; stroke: var(--text-tertiary); }
.sev-error .v4-spark polyline   { stroke: var(--error-red); }
.sev-warning .v4-spark polyline { stroke: var(--warning-amber); }
.sev-normal .v4-spark polyline  { stroke: var(--success-green); }
.v4-trend-delta { font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-top: 2px; }
.v4-trend-delta.up   { color: var(--error-red); }
.v4-trend-delta.down { color: var(--warning-amber); }
.v4-trend-delta.flat { color: var(--text-tertiary); font-weight: var(--fw-normal); }
.v4-trend-unit { font-size: var(--fs-sm); color: var(--text-tertiary); margin-top: 2px; }

/* Fallback for < 3 historical readings (not triggered by current sample data —
   both sample patients have 5-visit history; included for new-patient cases). */
.v4-spark-empty { width: 100%; height: 22px; margin-top: 6px; border-top: 1px dashed var(--border-emphasis); position: relative; }
.v4-spark-empty-label { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }

/* ─── AI Draft findings ───────────────────────────────────────── */
.v4-finding-list { display: flex; flex-direction: column; gap: var(--sp-sm); }
.v4-finding-item {
  display: flex; align-items: center; gap: var(--sp-md);
  background: var(--surface-primary); border: 1px solid var(--border-default);
  border-left: 3px solid var(--ai-draft-border-l);
  border-radius: var(--r-lg); padding: var(--sp-sm) var(--sp-md);
  transition: opacity 0.3s, height 0.3s, padding 0.3s, margin 0.3s; overflow: hidden;
}
.v4-grip { color: var(--text-tertiary); font-size: var(--fs-md); cursor: grab; flex-shrink: 0; }
.v4-finding-item.resolved-confirm { background: var(--success-surface); border-color: var(--success-green); }
.v4-finding-item.resolved-dismiss { background: var(--surface-secondary); opacity: 0.5; }
.v4-finding-text { font-size: var(--fs-base); color: var(--text-primary); flex-grow: 1; }
.v4-finding-actions { display: flex; gap: 6px; flex-shrink: 0; }
.v4-btn-confirm, .v4-btn-dismiss { width: 30px; height: 30px; border-radius: var(--r-md); border: 1px solid var(--border-emphasis); display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); background: var(--surface-secondary); color: var(--text-secondary); }
.v4-btn-confirm:hover { background: var(--success-surface); border-color: var(--success-green); color: var(--success-green); }
.v4-btn-dismiss:hover { background: var(--error-surface); border-color: var(--error-red); color: var(--error-red); }

.v4-finding-empty { display: flex; align-items: center; font-size: var(--fs-base); color: var(--text-tertiary); background: var(--surface-primary); border: 1px dashed var(--border-emphasis); border-radius: var(--r-lg); padding: var(--sp-md) var(--sp-lg); }

/* ─── Two-column row + generic card ───────────────────────────── */
.v4-lower-grid { display: grid; grid-template-columns: 1fr 1.2fr; }
.v4-col { min-width: 0; }
.v4-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--r-lg); padding: var(--sp-lg); }
.v4-empty-card { font-size: var(--fs-base); color: var(--text-tertiary); display: flex; align-items: center; }

/* ─── Medications ─────────────────────────────────────────────── */
.v4-med-row { display: flex; align-items: center; gap: var(--sp-md); padding: 7px 0; border-bottom: 1px solid var(--border-default); }
.v4-med-row:last-child { border-bottom: none; }
.v4-med-conflict { background: var(--error-surface); margin: 0 calc(var(--sp-lg) * -1); padding: var(--sp-sm) var(--sp-lg); position: relative; border-radius: var(--r-md); }
.v4-med-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--error-red); border-radius: 3px 0 0 3px; }
.v4-med-name { font-size: var(--fs-base); font-weight: var(--fw-normal); color: var(--text-primary); }
.v4-med-name-conflict { color: var(--error-red); font-weight: var(--fw-bold); }
.v4-med-dose { font-size: var(--fs-sm); color: var(--text-tertiary); }
.v4-med-divider { height: 1px; background: var(--border-default); margin: 4px 0; }
.v4-med-flag { font-size: var(--fs-sm); font-weight: var(--fw-bold); background: var(--error-red); color: #fff; padding: 3px 8px; border-radius: var(--r-sm); white-space: nowrap; flex-shrink: 0; }

/* ─── Labs ────────────────────────────────────────────────────── */
.v4-lab-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--sp-md); padding: 7px 0; border-bottom: 1px solid var(--border-default); font-size: var(--fs-base); }
.v4-lab-row:last-child { border-bottom: none; }
.v4-lab-flagged { background: var(--error-surface); margin: 0 calc(var(--sp-lg) * -1); padding: 7px var(--sp-lg); }
.v4-lab-name { color: var(--text-primary); }
.v4-lab-val { color: var(--text-primary); font-weight: var(--fw-bold); white-space: nowrap; }
.v4-lab-unit { font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--text-tertiary); }
.v4-lab-ref { font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; }
.v4-lab-ref.ref-normal { color: var(--success-green); }
.v4-lab-ref.ref-error  { color: var(--error-red); }
.v4-lab-date { font-size: var(--fs-sm); color: var(--text-tertiary); white-space: nowrap; }

/* ─── Sign-off capstone ───────────────────────────────────────── */
.v4-signoff-card {
  display: flex; align-items: center; gap: var(--sp-lg);
  background: var(--success-surface); border: 1.5px solid var(--success-green);
  border-radius: var(--r-lg); padding: var(--sp-lg) var(--sp-xl);
}
.v4-signoff-icon { width: 36px; height: 36px; border-radius: var(--r-md); flex-shrink: 0; background: var(--success-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xl); }
.v4-signoff-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-primary); }
.v4-signoff-sub { font-size: var(--fs-md); color: var(--text-secondary); margin-top: 2px; }
.v4-btn-secondary { background: var(--surface-primary); border: 1px solid var(--border-emphasis); color: var(--text-secondary); font-size: var(--fs-md); font-weight: var(--fw-bold); padding: 9px 16px; border-radius: var(--r-md); white-space: nowrap; flex-shrink: 0; }
.v4-btn-success { background: var(--success-green); border: none; color: #fff; font-size: var(--fs-md); font-weight: var(--fw-bold); padding: 9px 16px; border-radius: var(--r-md); white-space: nowrap; flex-shrink: 0; }
.v4-btn-success:hover { opacity: 0.9; }

/* ─── Patient info accordion ──────────────────────────────────── */
.v4-info-accordion { border-top: 1px solid var(--border-default); padding-top: 4px; }
.v4-accordion-toggle { background: none; border: none; padding: 10px 0; cursor: pointer; text-align: left; width: 100%; }
.v4-accordion-label { font-size: var(--fs-md); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.v4-acc-chevron { font-size: var(--fs-md); color: var(--text-tertiary); transition: transform 0.2s ease; }
.v4-accordion-body { display: none; }
.v4-accordion-body.open { display: block; }
.v4-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); padding-bottom: var(--sp-sm); }
.v4-info-block { background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--r-md); padding: var(--sp-md) var(--sp-lg); }
.v4-info-block-title { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: var(--sp-sm); padding-bottom: 6px; border-bottom: 1px solid var(--border-default); }
.v4-info-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-sm); padding: 4px 0; font-size: var(--fs-md); }
.v4-info-row > span:first-child { color: var(--text-secondary); white-space: nowrap; }
.v4-info-row > span:last-child { color: var(--text-primary); text-align: right; }

/* ─── FAB ─────────────────────────────────────────────────────── */
.v4-fab {
  position: absolute; bottom: 20px; right: 24px; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  background: var(--primary-blue); color: #fff; border: none;
  font-size: var(--fs-md); font-weight: var(--fw-bold); padding: 12px 18px; border-radius: 30px;
  box-shadow: 0 8px 24px rgba(24,95,165,0.35);
  transition: opacity 0.2s, transform 0.2s;
}
.v4-fab:hover { opacity: 0.92; }
.v4-fab.ready { background: var(--success-green); box-shadow: 0 8px 24px rgba(15,110,86,0.35); }
.v4-fab-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* ─── AI chat panel ───────────────────────────────────────────── */
.v4-chat-panel { flex-shrink: 0; border-top: 1px solid var(--border-default); background: var(--surface-primary); display: flex; flex-direction: column; height: 200px; }
.v4-chat-panel.collapsed { height: 38px; }
.v4-chat-panel.collapsed .v4-chat-body { display: none; }
.v4-chat-panel:not(.collapsed) .v4-chat-chevron { transform: rotate(180deg); }
.v4-chat-tabbar { height: 38px; border-bottom: 1px solid var(--border-default); flex-shrink: 0; display: flex; align-items: center; padding: 0 16px; gap: 20px; cursor: pointer; }
.v4-chat-tab-active { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-primary); white-space: nowrap; }
.v4-chat-tab { font-size: var(--fs-md); color: var(--text-tertiary); white-space: nowrap; }
.v4-chat-tab:hover { color: var(--text-secondary); }
.v4-chat-body { flex-grow: 1; overflow-y: auto; padding: var(--sp-md) var(--sp-lg); }
.v4-chat-chevron { transition: transform 0.2s ease; }

/* ─── Right panel — matches DoctorRightPanel exactly ──────────── */
.v4-visit-panel { width: var(--right-default); min-width: var(--right-default); background: var(--surface-secondary); border-left: 1px solid var(--border-default); overflow-y: auto; }
.v4-vp-title { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-primary); }
.v4-vp-divider { height: 1px; background: var(--border-default); }
.v4-visit-meta { font-size: var(--fs-sm); color: var(--text-secondary); }
.v4-visit-status { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--warning-amber); }
.v4-btn-outlined-sm { background: transparent; border: 1px solid var(--border-emphasis); color: var(--text-primary); font-size: var(--fs-base); font-weight: var(--fw-bold); padding: 8px 0; border-radius: var(--r-md); }
.v4-btn-outlined-sm:hover { background: var(--surface-tertiary); }
.v4-section-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; color: var(--text-secondary); padding: var(--sp-md) var(--sp-lg) var(--sp-xs); }

.v4-check-item { display: flex; align-items: flex-start; gap: var(--sp-sm); padding: var(--sp-md) var(--sp-lg); }
.v4-check-icon { font-size: var(--fs-xl); flex-shrink: 0; margin-top: 1px; }
.v4-check-icon.completed { color: var(--success-green); }
.v4-check-icon.notstarted { color: var(--text-tertiary); }
.v4-check-label { font-size: var(--fs-base); color: var(--text-primary); }
.v4-check-status { font-size: var(--fs-sm); }
.v4-check-status.completed { color: var(--success-green); }
.v4-check-status.notstarted { color: var(--text-tertiary); }

.v4-sync-dot { font-size: 8px; color: var(--sync-synced); }
.v4-sync-text { font-size: var(--fs-sm); color: var(--text-secondary); }