/* ============================================================
   Asklepios Dashboard — Navy-Card Layered Design System

   Color palette from mobile/src/components/asklepios/colors.ts
   Layer 0: #0B1120 (deepest)
   Layer 1: #141B2D (page bg)
   Layer 2: #1F2937 (card surface)
   Layer 3: #283548 (elevated)
   Layer 4: #334155 (input bg)
   ============================================================ */

/* --- Global Asklepios variables (dark default) --- */
:root {
  --ask-bg: #141B2D;
  --ask-card: #1F2937;
  --ask-card-hover: #283548;
  --ask-input: #334155;
  --ask-border: #475569;
  --ask-muted: #64748B;
  --ask-text: #F1F5F9;
  --ask-text-secondary: #94A3B8;
  --ask-text-tertiary: #90A0B5; /* AA on bg/card/hover (was #64748B = 3.6/3.1/2.6:1, failed) */
  --ask-focus-ring: #38BDF8; /* sky-400 — visible focus indicator on dark surfaces */
  --ask-brand-500: #10B981;
  --ask-brand-600: #059669;
  --ask-blue-500: #3B82F6;
  --ask-blue-text: #60A5FA; /* a11y: AA blue for TEXT on dark (blue-500 #3B82F6 = 3.99:1, fails); bg stays blue-500 */
  --ask-red-text: #F87171; /* a11y: AA red for text on dark (risk-critical #EF4444 = 3.9:1) */
  --ask-blue-600: #2563EB;
  --ask-purple-500: #8B5CF6;
  --ask-purple-600: #7C3AED;
  --ask-orange-500: #F59E0B;
  --ask-orange-600: #D97706;
  --ask-rose-500: #F43F5E;
  --ask-teal-500: #14B8A6;
  --ask-risk-normal: #10B981;
  --ask-risk-mild: #F59E0B;
  --ask-risk-elevated: #F97316;
  --ask-risk-critical: #EF4444;
  --ask-radius: 16px;
  --ask-radius-sm: 12px;
  --ask-radius-xs: 8px;
}

/* --- Light theme overrides --- */
[data-theme="light"] {
  --ask-blue-text: #1D4ED8; /* a11y: AA blue text on light */
  --ask-red-text: #B91C1C;
  --ask-bg: #F1F5F9;
  --ask-card: #FFFFFF;
  --ask-card-hover: #F8FAFC;
  --ask-input: #F1F5F9;
  --ask-border: #CBD5E1;
  --ask-muted: #94A3B8;
  --ask-text: #0F172A;
  --ask-text-secondary: #475569;
  --ask-text-tertiary: #5E6B7E; /* AA on light bg/card (was #94A3B8 = 2.3:1, failed) */
  --ask-focus-ring: #0284C7; /* sky-600 — darker ring for visibility on light surfaces */
}

/* WCAG 2.4.7 — consistent, high-contrast keyboard focus indicator across all
 * interactive elements. :where() keeps specificity 0 so intentional per-
 * component focus styles still win. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ask-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Light mode: stronger button & badge contrast */
[data-theme="light"] .ask-btn--ghost,
[data-theme="light"] a.ask-btn--ghost {
  background: rgba(16,185,129,0.06);
  border-color: rgba(16,185,129,0.3);
  color: #047857 !important;
}
[data-theme="light"] .ask-btn--ghost:hover {
  background: rgba(16,185,129,0.12);
  border-color: #10B981;
}
[data-theme="light"] .ask-btn--primary {
  box-shadow: 0 1px 3px rgba(16,185,129,0.3);
}
[data-theme="light"] .ask-badge--normal { background: #DCFCE7; color: #166534; }
[data-theme="light"] .ask-badge--success,[data-theme="light"] .ask-badge--green { background: #DCFCE7; color: #166534; }
[data-theme="light"] .ask-badge--mild,[data-theme="light"] .ask-badge--amber,[data-theme="light"] .ask-badge--warning { background: #FEF3C7; color: #92400E; }
[data-theme="light"] .ask-badge--elevated { background: #FFEDD5; color: #9A3412; }
[data-theme="light"] .ask-badge--critical,[data-theme="light"] .ask-badge--danger,[data-theme="light"] .ask-badge--red { background: #FEE2E2; color: #991B1B; }
[data-theme="light"] .ask-badge--info,[data-theme="light"] .ask-badge--blue { background: #DBEAFE; color: #1E40AF; }
[data-theme="light"] .ask-badge--purple { background: #EDE9FE; color: #5B21B6; }
[data-theme="light"] .ask-badge--unknown,[data-theme="light"] .ask-badge--gray { background: #E2E8F0; color: #475569; }

/* Light mode: table header contrast */
[data-theme="light"] .ask-table th {
  background: #F1F5F9;
  color: #475569;
  border-bottom-color: #CBD5E1;
}
[data-theme="light"] .ask-table td {
  border-bottom-color: #E2E8F0;
}
[data-theme="light"] .ask-table tr:hover td {
  background: #F8FAFC;
}

/* Light mode: section card */
[data-theme="light"] .ask-section {
  border-color: #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Light mode: metric card */
[data-theme="light"] .ask-metric {
  border-color: #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .ask-metric:hover {
  border-color: #CBD5E1;
}

/* --- Dashboard container --- */
.ask-dashboard {

  background: var(--ask-bg) !important;
  min-height: 100vh;
  color: var(--ask-text);
  font-family: var(--ask-font-body);
}

/* --- Greeting Section --- */
.ask-greeting {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.ask-greeting__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ask-brand-500), var(--ask-teal-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.ask-greeting__text h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ask-text);
  margin: 0;
  line-height: 1.2;
}

.ask-greeting__text p {
  font-size: 14px;
  color: var(--ask-text-secondary);
  margin: 2px 0 0;
}

.ask-greeting__actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.ask-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  color: var(--ask-text-secondary);
}

.ask-icon-btn:hover {
  background: var(--ask-card-hover);
  border-color: var(--ask-text-secondary);
}

/* --- AI Brief Card (hero) --- */
.ask-ai-brief {
  background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.1));
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: var(--ask-radius);
  padding: 20px 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.ask-ai-brief::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.ask-ai-brief__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ask-ai-brief__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(139,92,246,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ask-ai-brief__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ask-purple-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ask-ai-brief__badge {
  margin-left: auto;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(16,185,129,0.15);
  color: var(--ask-brand-500);
  font-weight: 600;
}

.ask-ai-brief__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ask-text);
  position: relative;
  z-index: 1;
  min-height: 20px;
}

.ask-ai-brief__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

/* --- Metric Cards Grid --- */
.ask-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.ask-metric {
  background: var(--ask-card);
  border-radius: var(--ask-radius-sm);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
}

.ask-metric:hover {
  border-color: var(--ask-border);
  transform: translateY(-1px);
}

.ask-metric__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ask-metric__icon--blue { background: rgba(59,130,246,0.12); color: var(--ask-blue-text); }
.ask-metric__icon--green { background: rgba(16,185,129,0.12); color: var(--ask-brand-500); }
.ask-metric__icon--amber { background: rgba(245,158,11,0.12); color: var(--ask-orange-500); }
.ask-metric__icon--purple { background: rgba(139,92,246,0.12); color: var(--ask-purple-500); }
.ask-metric__icon--teal { background: rgba(20,184,166,0.12); color: var(--ask-teal-500); }
.ask-metric__icon--rose { background: rgba(244,63,94,0.12); color: var(--ask-rose-500); }

.ask-metric__value {
  font-family: var(--ask-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--ask-text);
  line-height: 1;
}

.ask-metric__label {
  font-family: var(--ask-font-body);
  font-size: 12px;
  color: var(--ask-text-secondary);
  margin-top: 2px;
}

/* --- Section Cards (navy layer 2) --- */
.ask-section {
  background: var(--ask-card);
  border-radius: var(--ask-radius);
  padding: 0;
  margin-bottom: 20px;
  border: 1px solid transparent;
  overflow: hidden;
}

.ask-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(71,85,105,0.3);
}

.ask-section__title {
  font-family: var(--ask-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ask-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ask-section__link {
  font-size: 12px;
  color: var(--ask-brand-500);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.ask-section__link:hover {
  color: var(--ask-brand-600);
}

/* a11y: brand green on white fails AA in light mode (2.5:1) — use a darker emerald */
[data-theme="light"] .ask-section__link { color: #047857; }
[data-theme="light"] .ask-section__link:hover { color: #065F46; }

/* a11y: .ask-link is a link inside body text — underline so it's distinguishable
   without relying on color (WCAG 1.4.1 / axe link-in-text-block). */
.ask-link { text-decoration: underline; text-underline-offset: 2px; }

.ask-section__body {
  padding: 0;
}

/* --- Tables inside sections --- */
.ask-table {
  width: 100%;
  border-collapse: collapse;
}

.ask-table th {
  font-family: var(--ask-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ask-text-tertiary);
  padding: 10px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(71,85,105,0.2);
}

.ask-table td {
  font-family: var(--ask-font-body);
  padding: 12px 20px;
  font-size: 13px;
  color: var(--ask-text);
  border-bottom: 1px solid rgba(71,85,105,0.1);
}

.ask-table tr:last-child td {
  border-bottom: none;
}

.ask-table tr:hover td {
  background: rgba(71,85,105,0.08);
}

.ask-table a {
  color: var(--ask-blue-text);
  text-decoration: none;
  font-weight: 600;
}

.ask-table a:hover {
  text-decoration: underline;
}

.ask-empty {
  text-align: center;
  color: var(--ask-text-secondary);
  padding: 32px 20px !important;
  font-size: 13px;
}

/* --- Badges --- */
.ask-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--ask-font-body);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ask-badge--normal { background: rgba(16,185,129,0.15); color: #34D399; } /* a11y: 400 shades — -500 accents were ~3.3:1 on the tint */
.ask-badge--mild { background: rgba(245,158,11,0.15); color: var(--ask-risk-mild); }
.ask-badge--elevated { background: rgba(249,115,22,0.15); color: var(--ask-risk-elevated); }
.ask-badge--critical { background: rgba(239,68,68,0.15); color: #F87171; }
.ask-badge--info { background: rgba(59,130,246,0.15); color: #60A5FA; }
.ask-badge--success { background: rgba(16,185,129,0.15); color: #34D399; }
.ask-badge--warning { background: rgba(245,158,11,0.15); color: #FBBF24; }

/* Badge aliases for convenience */
/* a11y: badge text raised to 400-shades — the -500 accents on the 0.15 tint
   composited only ~3.3:1 on dark; the 400 shades clear AA (≥4.5:1). */
.ask-badge--danger { background: rgba(239,68,68,0.15); color: #F87171; }
.ask-badge--purple { background: rgba(139,92,246,0.15); color: #A78BFA; }
.ask-badge--unknown { background: rgba(100,116,139,0.15); color: var(--ask-text-secondary); }
.ask-badge--amber { background: rgba(245,158,11,0.15); color: #FBBF24; }
.ask-badge--green { background: rgba(16,185,129,0.15); color: #34D399; }
.ask-badge--blue { background: rgba(59,130,246,0.15); color: #60A5FA; }
.ask-badge--red { background: rgba(239,68,68,0.15); color: #F87171; }
.ask-badge--gray { background: rgba(100,116,139,0.15); color: var(--ask-text-secondary); }

/* --- Quick Actions Grid --- */
.ask-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ask-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: var(--ask-radius-sm);
  background: var(--ask-card);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.ask-action:hover {
  border-color: var(--ask-border);
  background: var(--ask-card-hover);
  transform: translateY(-2px);
}

.ask-action__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ask-action__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ask-text-secondary);
  text-align: center;
}

/* --- AI Insights Panel --- */
.ask-insights {
  background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(59,130,246,0.05));
  border: 1px solid rgba(139,92,246,0.15);
  border-radius: var(--ask-radius);
  padding: 20px;
}

.ask-insights__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ask-purple-500);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.ask-insight {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(71,85,105,0.15);
}

.ask-insight:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ask-insight__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.ask-insight__icon--ai { background: rgba(139,92,246,0.15); }
.ask-insight__icon--trend { background: rgba(16,185,129,0.15); }
.ask-insight__icon--sla { background: rgba(245,158,11,0.15); }

.ask-insight__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ask-text);
  margin-bottom: 2px;
}

.ask-insight__text {
  font-size: 12px;
  color: var(--ask-text-secondary);
  line-height: 1.5;
}

/* --- Two-Column Layout --- */
.ask-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .ask-grid { grid-template-columns: 1fr; }
  .ask-metrics { grid-template-columns: repeat(2, 1fr); }
  .ask-actions { grid-template-columns: repeat(2, 1fr); }
}

/* --- Streaming cursor for AI text --- */
.ask-streaming::after {
  content: '▊';
  animation: ask-blink 0.8s infinite;
  color: var(--ask-purple-500);
  margin-left: 2px;
}

@keyframes ask-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Loading dots --- */
.ask-dots {
  display: inline-flex;
  gap: 4px;
}

.ask-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ask-purple-500);
  animation: ask-dot-bounce 1.2s infinite;
}

.ask-dots span:nth-child(2) { animation-delay: 0.2s; }
.ask-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ask-dot-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* --- Override portal content area background --- */
.ask-dashboard .portal__main,
.ask-dashboard .content-area {
  background: var(--ask-bg) !important;
}

/* --- Button overrides for Asklepios --- */
.ask-btn,
a.ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--ask-font-body);
  cursor: pointer;
  border: none;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none !important;
  color: inherit;
}

.ask-btn:active { transform: scale(0.97); }

.ask-btn--primary,
a.ask-btn--primary,
a.ask-btn--primary:visited,
a.ask-btn--primary:hover {
  background: var(--ask-brand-500);
  color: #0F172A !important; /* a11y: white on brand-green was 2.5:1; dark text = 7:1, keeps the green */
}
.ask-btn--primary:hover { background: var(--ask-brand-600); }

.ask-btn--ghost,
a.ask-btn--ghost,
a.ask-btn--ghost:visited {
  background: rgba(16,185,129,0.08);
  color: var(--ask-brand-500) !important;
  border: 1px solid rgba(16,185,129,0.25);
}
.ask-btn--ghost:hover,
a.ask-btn--ghost:hover {
  background: rgba(16,185,129,0.15);
  border-color: var(--ask-brand-500);
}

.ask-btn--ai {
  background: rgba(139,92,246,0.15);
  color: var(--ask-purple-500);
}
.ask-btn--ai:hover { background: rgba(139,92,246,0.25); }

.ask-btn--danger,
a.ask-btn--danger,
a.ask-btn--danger:visited {
  background: #B91C1C; /* a11y: was risk-critical #EF4444 (white 3.8:1); red-700 gives white 5.9:1 */
  color: #fff !important;
}
.ask-btn--danger:hover,
a.ask-btn--danger:hover { background: #dc2626; }

.ask-btn--sm {
  padding: 4px 10px;
  font-size: 11px;
}

/* --- Modal Dialog --- */
.ask-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.ask-modal__card {
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius);
  padding: 28px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  color: var(--ask-text);
}

.ask-modal__card--wide { max-width: 640px; max-height: 90vh; overflow-y: auto; }
.ask-modal__card--narrow { max-width: 440px; }

.ask-modal__title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ask-text);
}

.ask-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(71,85,105,0.3);
}

/* --- Form Field --- */
.ask-field { margin-bottom: 16px; }

.ask-field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ask-text-secondary);
}

.ask-field__label .req { color: var(--ask-risk-critical); }

.ask-field__input,
.ask-field select,
.ask-field input,
.ask-field textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  background: var(--ask-input);
  color: var(--ask-text);
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius-xs);
  transition: border-color .2s, box-shadow .2s;
}

.ask-field__input:focus,
.ask-field input:focus,
.ask-field select:focus,
.ask-field textarea:focus {
  outline: none;
  border-color: var(--ask-brand-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}

.ask-field input::placeholder,
.ask-field textarea::placeholder { color: var(--ask-text-tertiary); }

/* --- Info Grid (key-value pairs) --- */
.ask-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.ask-info-grid--2col { grid-template-columns: repeat(2, 1fr); }
.ask-info-grid--3col { grid-template-columns: repeat(3, 1fr); }

.ask-info-item {
  padding: 14px;
  background: var(--ask-card);
  border: 1px solid transparent;
  border-radius: var(--ask-radius-sm);
}

.ask-info-item__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ask-text-secondary);
  margin-bottom: 4px;
}

.ask-info-item__value {
  font-size: 16px;
  font-weight: 600;
  color: var(--ask-text);
}

/* --- Status Dot --- */
.ask-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ask-muted);
  flex-shrink: 0;
}

.ask-dot--lg { width: 12px; height: 12px; }
.ask-dot--ok { background: var(--ask-brand-500); }
.ask-dot--warning { background: var(--ask-orange-500); }
.ask-dot--error { background: var(--ask-risk-critical); }
.ask-dot--muted { background: var(--ask-muted); }

/* --- Alert / Banner --- */
.ask-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--ask-radius-xs);
  font-size: 13px;
  color: var(--ask-text);
  margin-bottom: 8px;
}

.ask-alert--critical { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--ask-risk-critical); }
.ask-alert--elevated { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); color: var(--ask-orange-500); }
.ask-alert--warning { background: rgba(245,158,11,0.12); }
.ask-alert--info { background: rgba(59,130,246,0.12); }
.ask-alert--success { background: rgba(16,185,129,0.12); }

.ask-alert--overdue {
  background: rgba(239,68,68,0.1);
  border: 1px solid var(--ask-risk-critical);
  border-radius: var(--ask-radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
}

.ask-alert__icon { flex-shrink: 0; font-size: 16px; }
.ask-alert__count { font-size: 24px; font-weight: 700; color: var(--ask-risk-critical); }
.ask-alert__text { font-size: 14px; color: var(--ask-text); }

/* --- Status Message --- */
.ask-status-msg {
  padding: 10px 14px;
  border-radius: var(--ask-radius-xs);
  font-size: 14px;
  margin-top: 12px;
  display: none;
}

.ask-status-msg--success { background: rgba(16,185,129,0.12); color: #059669; display: block; }
.ask-status-msg--error { background: rgba(239,68,68,0.12); color: #dc2626; display: block; }

/* --- Code / Credential Display --- */
.ask-code-display {
  background: var(--ask-input);
  padding: 12px;
  border-radius: var(--ask-radius-xs);
  font-family: var(--ask-font-mono);
  word-break: break-all;
  margin: 12px 0;
  color: var(--ask-text);
}

.ask-credential-box {
  background: var(--ask-input);
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius-xs);
  padding: 16px;
  margin-top: 12px;
}

.ask-credential-box p { margin: 4px 0; font-size: 14px; color: var(--ask-text); }

.ask-credential-box code {
  font-size: 13px;
  word-break: break-all;
  background: var(--ask-card);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--ask-border);
  color: var(--ask-text);
}

/* --- Stars Rating --- */
.ask-stars { color: var(--ask-orange-500); font-size: 16px; }

/* --- Accent Section (left border) --- */
.ask-accent-section {
  border-left: 3px solid var(--ask-brand-500);
  padding-left: 12px;
  margin-bottom: 12px;
}

.ask-accent-section label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ask-brand-500);
}

/* --- Progress Bar --- */
.ask-progress-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(59,130,246,0.12);
  overflow: hidden;
}

.ask-progress-bar__fill {
  height: 100%;
  border-radius: 4px;
  background: var(--ask-blue-500);
}

/* --- Controls Bar (filter/date controls) --- */
.ask-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.ask-controls label {
  font-family: var(--ask-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ask-text-secondary);
}

.ask-controls input,
.ask-controls select {
  padding: 8px 12px;
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius-xs);
  font-size: 14px;
  background: var(--ask-input);
  color: var(--ask-text);
}

/* --- Vitals Grid --- */
.ask-vitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

/* --- Item List (editable rows for billing, prescriptions) --- */
.ask-item-list { margin-top: 8px; }

.ask-item-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
}

.ask-item-row input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius-xs);
  font-size: 13px;
  background: var(--ask-input);
  color: var(--ask-text);
}

.ask-item-row input[type=number] { max-width: 100px; }
.ask-item-row button { flex-shrink: 0; }

.ask-item-row__remove {
  padding: 4px 10px;
  background: var(--ask-risk-critical);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* --- Preconsult Icon --- */
.ask-preconsult-icon { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; }

/* --- Loading State --- */
.ask-loading {
  text-align: center;
  padding: 60px 0;
  color: var(--ask-text-secondary);
}

/* --- Radio Group (channel selector) --- */
.ask-radio-group { display: flex; gap: 12px; margin-top: 6px; }

.ask-radio-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 14px;
  border: 2px solid var(--ask-border);
  border-radius: var(--ask-radius-xs);
  transition: border-color .15s, background .15s;
}

.ask-radio-option:has(input:checked) {
  border-color: var(--ask-brand-500);
  background: rgba(16,185,129,.06);
}

.ask-radio-option input[type="radio"] { margin: 0; accent-color: var(--ask-brand-500); }

.ask-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.ask-radio-label svg { flex-shrink: 0; vertical-align: middle; }

/* --- Inline Vitals Form (expandable row) --- */
.ask-vitals-row {
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius-sm);
  padding: 16px 20px;
  margin-top: 8px;
  animation: askSlideDown .2s ease-out;
}

@keyframes askSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ask-vitals-footer { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ask-bmi-display { font-size: 14px; font-weight: 600; color: var(--ask-text-secondary); }

/* --- Stat Card (accent left-border) --- */
.ask-stat-cards { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }

.ask-stat-card {
  background: var(--ask-card);
  border-radius: var(--ask-radius);
  padding: 16px 20px;
  flex: 1;
  min-width: 140px;
  border-left: 4px solid var(--ask-border);
  transition: transform .15s, box-shadow .15s;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ask-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.ask-stat-card h3 { margin: 0 0 6px; font-size: 12px; color: var(--ask-text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.ask-stat-card__value { font-size: 32px; font-weight: 800; }
.ask-stat-card__sub { font-size: 12px; color: var(--ask-text-secondary); margin-top: 2px; font-weight: 500; }
.ask-stat-card__icon { flex-shrink: 0; opacity: .85; }
.ask-stat-card__content { flex: 1; }

.ask-stat-card--waiting { border-left-color: var(--ask-orange-500); background: rgba(245,158,11,.08); }
.ask-stat-card--waiting .ask-stat-card__value { color: var(--ask-orange-500); }
.ask-stat-card--active { border-left-color: var(--ask-blue-500); background: rgba(59,130,246,.08); }
.ask-stat-card--active .ask-stat-card__value { color: var(--ask-blue-text); }
.ask-stat-card--done { border-left-color: var(--ask-brand-500); background: rgba(16,185,129,.08); }
.ask-stat-card--done .ask-stat-card__value { color: var(--ask-brand-500); }
.ask-stat-card--muted { border-left-color: var(--ask-muted); background: rgba(148,163,184,.06); }
.ask-stat-card--muted .ask-stat-card__value { color: var(--ask-muted); }

/* --- Wizard Step Animation --- */
.ask-wizard-step { animation: askFadeIn 0.3s ease; }
@keyframes askFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* --- Plan Card (selectable) --- */
.ask-plan-card {
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius);
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ask-plan-card:hover { border-color: var(--ask-brand-500); }
.ask-plan-card--selected { border-color: var(--ask-brand-500); box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }

/* --- Service Grid (ops infrastructure) --- */
.ask-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.ask-service-card {
  background: var(--ask-card);
  border: 1px solid transparent;
  border-radius: var(--ask-radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease;
}

.ask-service-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.ask-service-card__header { display: flex; align-items: center; justify-content: space-between; }
.ask-service-card__name { font-weight: 600; font-size: 14px; }

.ask-service-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
}

.ask-service-card__status--ok { background: rgba(16,185,129,0.15); color: #34D399; }
.ask-service-card__status--degraded { background: rgba(245,158,11,0.15); color: var(--ask-orange-500); }
.ask-service-card__status--down { background: rgba(239,68,68,0.15); color: var(--ask-risk-critical); }
.ask-service-card__status--unknown { background: var(--ask-input); color: #B6C2D1; }

.ask-service-card__metrics { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--ask-text-secondary); }
.ask-service-card__metric { display: flex; flex-direction: column; }
.ask-service-card__metric-value { font-weight: 600; color: var(--ask-text); font-variant-numeric: tabular-nums; }

/* --- Detail Grid (ops key-value) --- */
.ask-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.ask-detail-item { display: flex; flex-direction: column; gap: 2px; }
.ask-detail-item__label { font-size: 12px; color: var(--ask-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.ask-detail-item__value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Ops Channel Dot --- */
.ask-channel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cbd5e1;
  display: inline-block;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.ask-channel-dot--green { background: var(--ask-brand-500); }
.ask-channel-dot--yellow { background: var(--ask-orange-500); }
.ask-channel-dot--red { background: var(--ask-risk-critical); }
.ask-channel-dot--grey { background: var(--ask-muted); }

/* --- GenBI Widget --- */
.ask-genbi-widget { margin-bottom: 1rem; }
.ask-genbi-input-row { display: flex; gap: 8px; margin-bottom: 12px; }
.ask-genbi-input-row input { flex: 1; }
.ask-genbi-status { padding: 8px 12px; border-radius: var(--ask-radius-xs); font-size: 14px; }
.ask-genbi-status--loading { background: rgba(59,130,246,0.12); color: var(--ask-blue-text); }
.ask-genbi-status--success { background: rgba(16,185,129,0.12); color: var(--ask-brand-500); }
.ask-genbi-status--error { background: rgba(239,68,68,0.12); color: var(--ask-risk-critical); }
.ask-genbi-narrative { padding: 12px; background: var(--ask-input); border-radius: var(--ask-radius-xs); margin-bottom: 12px; font-size: 15px; color: var(--ask-text); }
.ask-genbi-chart { margin-bottom: 16px; min-height: 50px; }
.ask-genbi-sql pre { background: #263238; color: #aed581; padding: 12px; border-radius: var(--ask-radius-xs); font-size: 12px; overflow-x: auto; margin-top: 12px; }

/* --- AI Text Display --- */
.ask-ai-text {
  padding: 16px;
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius-sm);
  line-height: 1.7;
  font-size: 15px;
  white-space: pre-wrap;
  color: var(--ask-text);
}

/* --- Consulted Badge --- */
.ask-consulted-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  color: var(--ask-brand-500);
  border-radius: var(--ask-radius-xs);
  font-weight: 600;
  font-size: 14px;
}

.ask-consulted-badge svg { flex-shrink: 0; }

/* --- Notes Area --- */
.ask-notes-area {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius-xs);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  font-family: var(--ask-font-body);
  background: var(--ask-bg);
  color: var(--ask-text);
}

.ask-notes-area:focus {
  outline: none;
  border-color: var(--ask-brand-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}

/* --- Action Row --- */
.ask-action-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

/* --- Risk Bars (lab dashboard) --- */
.ask-risk-bars { display: flex; gap: 12px; align-items: flex-end; height: 200px; padding: 0 20px; }
.ask-risk-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; }
.ask-risk-bar { width: 60px; border-radius: 6px 6px 0 0; min-height: 4px; transition: height 0.5s ease; }
.ask-risk-bar-label { margin-top: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.ask-risk-bar-count { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.ask-risk-bar--normal { background: var(--ask-risk-normal); }
.ask-risk-bar--mild { background: var(--ask-risk-mild); }
.ask-risk-bar--elevated { background: var(--ask-risk-elevated); }
.ask-risk-bar--critical { background: var(--ask-risk-critical); }

/* --- ROI Highlight Card --- */
.ask-roi-highlight {
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(16,185,129,0.08));
  border: 2px solid var(--ask-blue-500);
  border-radius: var(--ask-radius-sm);
  padding: 28px;
  text-align: center;
  margin-bottom: 20px;
}

.ask-roi-highlight .ask-metric__value { font-size: 48px; font-weight: 800; color: var(--ask-brand-500); }
.ask-roi-highlight .ask-metric__label { color: var(--ask-text-secondary); font-size: 16px; margin-top: 4px; }

/* --- Generated Timestamp --- */
.ask-generated-at { color: var(--ask-text-tertiary); font-size: 12px; text-align: right; margin-top: 12px; }

/* --- Color Utilities --- */
.ask-color-blue { color: var(--ask-blue-text); }
.ask-color-green { color: var(--ask-brand-500); }
.ask-color-orange { color: var(--ask-orange-500); }
.ask-color-red { color: var(--ask-risk-critical); }
.ask-color-purple { color: var(--ask-purple-500); }
.ask-color-teal { color: var(--ask-teal-500); }

/* --- Workspace (full-width consultation) --- */
.portal__content:has(#consult-main) { max-width: 100%; padding: 12px 16px; }

.ask-workspace {
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
}

.ask-workspace__header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 100%);
  border-bottom: 1px solid var(--ask-border);
}

.ask-workspace__header-left { display: flex; align-items: center; gap: 12px; }
.ask-workspace__patient { font-size: 24px; font-weight: 700; }
.ask-workspace__token { font-size: 14px; color: var(--ask-text-secondary); }
.ask-workspace__header-right { display: flex; align-items: center; gap: 12px; }

.ask-timer {
  font-family: var(--ask-font-display);
  font-size: 20px; font-weight: 600;
  color: var(--ask-blue-text);
  background: rgba(59,130,246,.12);
  padding: 6px 14px;
  border-radius: var(--ask-radius-xs);
}

/* --- Split Panel Layout --- */
.ask-split-panel { display: grid; grid-template-columns: 38% 1px 1fr; gap: 0; min-height: calc(100vh - 180px); }
.ask-split-panel--even { grid-template-columns: 1fr 24px 1fr; }
.ask-split-panel__divider { background: var(--ask-border); width: 1px; align-self: stretch; }
@media (max-width: 1024px) { .ask-split-panel { grid-template-columns: 1fr; } .ask-split-panel__divider { display: none; } }

.ask-split-panel__left {
  overflow-y: auto; max-height: calc(100vh - 180px);
  padding: 20px 24px;
  background: rgba(0,0,0,.08);
}

.ask-split-panel__right {
  overflow-y: auto; max-height: calc(100vh - 180px);
  padding: 20px 24px;
}

.ask-split-panel__left::-webkit-scrollbar,
.ask-split-panel__right::-webkit-scrollbar { width: 6px; }
.ask-split-panel__left::-webkit-scrollbar-thumb,
.ask-split-panel__right::-webkit-scrollbar-thumb { background: var(--ask-muted); border-radius: 3px; }

/* --- Inner Card (within workspace) --- */
.ask-card {
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.ask-card__title {
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ask-text-secondary);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}

/* --- Vital Card --- */
.ask-vital {
  text-align: center;
  padding: 10px;
  background: var(--ask-card);
  border-radius: var(--ask-radius-xs);
}

.ask-vital__label { font-size: 12px; color: var(--ask-text-secondary); text-transform: uppercase; }
.ask-vital__value { font-size: 20px; font-weight: 700; }
.ask-vital__trend { font-size: 13px; }
.ask-vital__trend--up { color: var(--ask-risk-critical); }
.ask-vital__trend--down { color: var(--ask-brand-500); }
.ask-vital__trend--stable { color: var(--ask-text-secondary); }

/* --- QA Grid --- */
.ask-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.ask-qa-item__question { font-size: 13px; text-transform: uppercase; color: var(--ask-text-secondary); }
.ask-qa-item__answer { font-size: 15px; font-weight: 500; }

/* --- Med List & Allergy Tag --- */
.ask-med-list { list-style: none; padding: 0; margin: 0; }
.ask-med-list li { padding: 6px 0; font-size: 15px; border-bottom: 1px solid rgba(71,85,105,.15); }
.ask-med-list li:last-child { border-bottom: none; }

.ask-allergy-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(239,68,68,.12);
  color: #dc2626;
  border-radius: var(--ask-radius-xs);
  font-size: 13px; font-weight: 600;
  margin: 2px;
}

/* --- AI Insight Box --- */
.ask-ai-box {
  background: rgba(59,130,246,.12);
  border: 1px solid var(--ask-blue-500);
  border-radius: var(--ask-radius-sm);
  padding: 16px 18px;
  font-size: 15px; line-height: 1.7;
  white-space: pre-wrap;
  color: var(--ask-text);
}

.ask-ai-box__header {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ask-blue-600);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}

/* --- Collapse Button --- */
.ask-collapse-btn {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600;
  color: var(--ask-blue-text); padding: 0;
}

.ask-collapse-btn:hover { text-decoration: underline; }

/* --- SOAP Editor --- */
.ask-soap-editor { margin-bottom: 20px; }
.ask-soap-editor__section { margin-bottom: 18px; }

.ask-soap-editor__label {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}

.ask-soap-editor__label-text { font-size: 16px; font-weight: 700; color: var(--ask-blue-text); }

.ask-soap-editor__tag { font-size: 12px; padding: 3px 10px; border-radius: 20px; }
.ask-soap-editor__tag--ai { background: rgba(59,130,246,.12); color: var(--ask-blue-600); }
.ask-soap-editor__tag--suggestion { background: rgba(71,85,105,.15); color: var(--ask-text-tertiary); font-style: italic; }

.ask-soap-editor__textarea {
  width: 100%; min-height: 90px;
  padding: 12px 14px;
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius-xs);
  font-size: 15px; line-height: 1.6;
  resize: vertical;
  font-family: var(--ask-font-body);
  background: var(--ask-bg); color: var(--ask-text);
}

.ask-soap-editor__textarea:focus {
  outline: none;
  border-color: var(--ask-blue-500);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* --- Dictate Button --- */
.ask-dictate-btn {
  background: none;
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius-xs);
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ask-text-secondary);
}

.ask-dictate-btn:hover { background: var(--ask-card); color: var(--ask-text); }

/* --- Rx Table (prescription editor) --- */
.ask-rx-table { width: 100%; border-collapse: collapse; font-size: 15px; }

.ask-rx-table th {
  text-align: left; padding: 8px 10px;
  background: var(--ask-card);
  font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--ask-text-secondary);
  border-bottom: 1px solid var(--ask-border);
}

.ask-rx-table td { padding: 8px 10px; border-bottom: 1px solid rgba(71,85,105,.15); }

.ask-rx-table input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--ask-border);
  border-radius: 6px; font-size: 14px;
  background: var(--ask-bg); color: var(--ask-text);
}

.ask-rx-table input:focus { outline: none; border-color: var(--ask-blue-500); }

.ask-rx-remove {
  background: none; border: none;
  color: var(--ask-risk-critical);
  cursor: pointer; font-size: 18px; padding: 4px 8px;
}

.ask-rx-remove:hover { background: rgba(239,68,68,.12); border-radius: 4px; }

.ask-rx-add {
  background: none;
  border: 1px dashed var(--ask-border);
  border-radius: var(--ask-radius-xs);
  padding: 8px 14px;
  cursor: pointer; font-size: 14px;
  color: var(--ask-blue-text);
  width: 100%; margin-top: 8px;
}

.ask-rx-add:hover { background: rgba(59,130,246,.12); border-color: var(--ask-blue-500); }

/* --- Lab Orders Grid --- */
.ask-lab-orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }

.ask-lab-order-check {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--ask-card);
  border-radius: var(--ask-radius-xs);
  font-size: 14px; cursor: pointer;
}

.ask-lab-order-check:hover { background: rgba(71,85,105,.15); }
.ask-lab-order-check input { accent-color: var(--ask-blue-500); width: 16px; height: 16px; }

/* --- Consult Actions Bar --- */
.ask-consult-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--ask-border);
  flex-wrap: wrap;
}

/* --- Drug Search Layout --- */
.ask-drug-search { display: flex; gap: 24px; flex-wrap: wrap; }
.ask-drug-search__panel { flex: 1; min-width: 400px; }

.ask-search-box { display: flex; gap: 8px; margin-bottom: 16px; }
.ask-search-box input {
  flex: 1; padding: 10px 14px;
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius-xs);
  font-size: 15px;
  background: var(--ask-card); color: var(--ask-text);
}

.ask-search-results {
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius-sm);
  overflow: hidden;
}

.ask-search-results__header {
  padding: 12px 16px;
  background: var(--ask-card-hover);
  font-weight: 600; font-size: 13px;
  color: var(--ask-text-secondary);
  border-bottom: 1px solid var(--ask-border);
}

.ask-search-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ask-border);
  display: flex; justify-content: space-between; align-items: center;
  transition: background .15s;
}

.ask-search-item:hover { background: var(--ask-card-hover); }
.ask-search-item:last-child { border-bottom: none; }
.ask-search-item__name { font-weight: 500; font-size: 15px; color: var(--ask-text); }
.ask-search-item__meta { font-size: 12px; color: var(--ask-text-secondary); margin-top: 2px; }

/* --- Chip Area --- */
.ask-chip-area {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px; min-height: 40px;
  padding: 8px;
  border: 1px dashed var(--ask-border);
  border-radius: var(--ask-radius-xs);
}

.ask-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: rgba(16,185,129,.15);
  color: var(--ask-text);
  border-radius: 16px; font-size: 13px;
}

.ask-chip__remove { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--ask-text-secondary); padding: 0; line-height: 1; }

/* --- Interaction Checker --- */
.ask-checker {
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  border-radius: var(--ask-radius-sm);
  padding: 20px;
}

.ask-checker h3 { margin: 0 0 12px; font-size: 16px; color: var(--ask-text); }

.ask-interaction {
  padding: 10px;
  border-left: 3px solid var(--ask-orange-500);
  margin-bottom: 8px;
  background: var(--ask-card-hover);
  border-radius: 0 6px 6px 0;
}

.ask-interaction--severe { border-left-color: var(--ask-risk-critical); }
.ask-interaction--moderate { border-left-color: var(--ask-orange-500); }
.ask-interaction--mild { border-left-color: var(--ask-brand-500); }
.ask-interaction__severity { font-size: 12px; font-weight: 600; text-transform: uppercase; }
.ask-interaction__desc { font-size: 13px; margin-top: 4px; color: var(--ask-text); }

/* --- Responsive: mobile grid --- */
@media (max-width: 768px) {
  .ask-info-grid { grid-template-columns: 1fr 1fr; }
  .ask-vitals-grid { grid-template-columns: repeat(2, 1fr); }
  .ask-drug-search { flex-direction: column; }
  .ask-drug-search__panel { min-width: auto; }
}

/* --- Font Utility Classes --- */
.ask-font-display { font-family: var(--ask-font-display) !important; }
.ask-font-body { font-family: var(--ask-font-body) !important; }
.ask-font-mono { font-family: var(--ask-font-mono) !important; }

/* --- Global Font Rules — enforce Asklepios typography hierarchy --- */
.ask-dashboard h1,
.ask-dashboard h2,
.ask-dashboard h3 {
  font-family: var(--ask-font-display);
}

.ask-dashboard body,
.ask-dashboard p,
.ask-dashboard span,
.ask-dashboard td,
.ask-dashboard th,
.ask-dashboard label,
.ask-dashboard input,
.ask-dashboard select,
.ask-dashboard textarea,
.ask-dashboard button,
.ask-dashboard a {
  font-family: var(--ask-font-body);
}

/* ============================================================
   PUBLIC PAGES — Queue Board, Self Check-in, Booking
   ============================================================ */

/* --- Public Page Base --- */
.ask-public-page { min-height: 100vh; font-family: var(--ask-font-body); }
.ask-public-page--dark { background: var(--ask-bg); color: var(--ask-text); }
.ask-public-page--light { background: #f8fafc; color: #1e293b; }
.ask-public-page--centered { display: flex; align-items: center; justify-content: center; padding: 24px; }

/* --- Booking Card --- */
.ask-booking-card { background: var(--ask-card); border-radius: var(--ask-radius); padding: 32px; width: 100%; max-width: 480px; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.ask-booking-card h1 { font-size: 24px; margin-bottom: 4px; color: var(--ask-text); }
.ask-booking-card .subtitle { color: var(--ask-text-secondary); font-size: 14px; margin-bottom: 24px; }
.ask-booking-field { margin-bottom: 16px; }
.ask-booking-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ask-text-secondary); }
.ask-booking-field input, .ask-booking-field select { width: 100%; padding: 10px 14px; border: 1px solid var(--ask-border); border-radius: var(--ask-radius-xs); font-size: 14px; background: var(--ask-input); color: var(--ask-text); outline: none; }
.ask-booking-field input:focus, .ask-booking-field select:focus { border-color: var(--ask-blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.ask-booking-submit { width: 100%; padding: 12px; background: #2563EB; color:#fff; border: none; border-radius: var(--ask-radius-xs); font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 8px; } /* a11y: blue-600 bg so white text = 5.2:1 */
.ask-booking-submit:hover { background: var(--ask-blue-600); }
.ask-booking-success { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); border-radius: var(--ask-radius-xs); padding: 16px; margin-top: 16px; display: none; }
.ask-booking-success h3 { color: var(--ask-brand-500); margin-bottom: 8px; }
.ask-booking-success p { color: var(--ask-brand-600); font-size: 14px; }
.ask-booking-error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: var(--ask-radius-xs); padding: 12px; margin-top: 12px; color: var(--ask-risk-critical); font-size: 14px; display: none; }

/* --- Queue Board --- */
.ask-qb-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; background: linear-gradient(135deg, #1e293b 0%, var(--ask-bg) 100%); border-bottom: 2px solid var(--ask-brand-500); }
.ask-qb-clinic-name { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.ask-qb-clinic-name .accent { color: var(--ask-brand-500); }
.ask-qb-clock { font-size: 36px; font-weight: 700; color: var(--ask-brand-500); font-variant-numeric: tabular-nums; }
.ask-qb-date { font-size: 14px; color: var(--ask-text-secondary); margin-top: 2px; }
.ask-qb-main { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 120px); }
.ask-qb-now-serving { background: linear-gradient(180deg, #1e3a5f 0%, var(--ask-bg) 100%); padding: 32px 24px; display: flex; flex-direction: column; align-items: center; border-right: 1px solid rgba(16,185,129,.2); overflow-y: auto; }
.ask-qb-ns-label { font-size: 14px; font-weight: 700; color: var(--ask-brand-500); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 16px; }
.ask-qb-ns-token { font-size: 120px; font-weight: 900; color: var(--ask-brand-500); line-height: 1; text-shadow: 0 0 40px rgba(16,185,129,.3); animation: ask-qb-pulse 2s ease-in-out infinite; }
@keyframes ask-qb-pulse { 0%,100% { opacity: 1; } 50% { opacity: .7; } }
.ask-qb-ns-name { font-size: 28px; font-weight: 600; color: #fff; margin-top: 8px; }
.ask-qb-ns-room { font-size: 16px; color: var(--ask-text-secondary); margin-top: 4px; }
.ask-qb-ns-room span { color: var(--ask-blue-text); font-weight: 600; }
.ask-qb-doctors { margin-top: auto; width: 100%; padding-bottom: 50px; }
.ask-qb-doctors-title { font-size: 12px; font-weight: 700; color: var(--ask-text-tertiary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.05); }
.ask-qb-doc-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--ask-radius-xs); margin-bottom: 10px; background: rgba(255,255,255,.03); }
.ask-qb-doc-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.ask-qb-doc-dot--available { background: var(--ask-brand-500); box-shadow: 0 0 8px rgba(16,185,129,.5); }
.ask-qb-doc-dot--in-consult { background: var(--ask-blue-500); box-shadow: 0 0 8px rgba(59,130,246,.5); }
.ask-qb-doc-dot--on-break { background: var(--ask-orange-500); box-shadow: 0 0 8px rgba(245,158,11,.5); }
.ask-qb-doc-dot--not-available { background: var(--ask-risk-critical); }
.ask-qb-doc-dot--not-in { background: var(--ask-text-tertiary); }
.ask-qb-doc-info { flex: 1; }
.ask-qb-doc-name { font-size: 14px; font-weight: 600; color: var(--ask-text); }
.ask-qb-doc-status { font-size: 11px; color: var(--ask-text-secondary); }
.ask-qb-doc-token { font-size: 13px; font-weight: 700; color: var(--ask-brand-500); }
.ask-qb-doc-waiting { font-size: 11px; color: var(--ask-orange-500); }
.ask-qb-panel { padding: 24px 32px; overflow-y: auto; padding-bottom: 60px; }
.ask-qb-title { font-size: 14px; font-weight: 700; color: var(--ask-text-tertiary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
.ask-qb-grid-header { display: grid; grid-template-columns: 80px 1fr 160px 120px 100px; padding: 8px 16px; font-size: 11px; font-weight: 700; color: var(--ask-text-tertiary); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid rgba(255,255,255,.05); }
.ask-qb-row { display: grid; grid-template-columns: 80px 1fr 160px 120px 100px; padding: 14px 16px; border-radius: var(--ask-radius-sm); margin-bottom: 6px; align-items: center; transition: all .3s; }
.ask-qb-row--current { background: linear-gradient(90deg, rgba(16,185,129,.15) 0%, rgba(16,185,129,.05) 100%); border: 1px solid rgba(16,185,129,.3); animation: ask-qb-glow 2s ease-in-out infinite; }
@keyframes ask-qb-glow { 0%,100% { box-shadow: 0 0 0 rgba(16,185,129,0); } 50% { box-shadow: 0 0 20px rgba(16,185,129,.15); } }
.ask-qb-row--waiting { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); }
.ask-qb-row--done { opacity: .4; background: rgba(255,255,255,.01); border: 1px solid transparent; }
.ask-qb-token { font-size: 24px; font-weight: 800; }
.ask-qb-row--current .ask-qb-token { color: var(--ask-brand-500); }
.ask-qb-row--waiting .ask-qb-token { color: var(--ask-orange-500); }
.ask-qb-row--done .ask-qb-token { color: var(--ask-text-tertiary); }
.ask-qb-name { font-size: 18px; font-weight: 600; }
.ask-qb-doctor { font-size: 13px; color: var(--ask-text-secondary); }
.ask-qb-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.ask-qb-badge--in-consult { background: rgba(59,130,246,.15); color: var(--ask-blue-text); border: 1px solid rgba(59,130,246,.3); }
.ask-qb-badge--waiting { background: rgba(245,158,11,.15); color: var(--ask-orange-500); border: 1px solid rgba(245,158,11,.3); }
.ask-qb-badge--done { background: rgba(16,185,129,.1); color: var(--ask-brand-500); border: 1px solid rgba(16,185,129,.2); }
.ask-qb-badge--noshow { background: rgba(239,68,68,.1); color: var(--ask-risk-critical); border: 1px solid rgba(239,68,68,.2); }
.ask-qb-wait { font-size: 14px; color: var(--ask-text-secondary); font-variant-numeric: tabular-nums; }
.ask-qb-marquee { background: linear-gradient(90deg, #1e3a5f, var(--ask-bg), #1e3a5f); padding: 10px 0; border-top: 1px solid rgba(16,185,129,.2); position: fixed; bottom: 0; left: 0; right: 0; overflow: hidden; z-index: 10; }
.ask-qb-marquee-text { display: inline-block; white-space: nowrap; animation: ask-qb-scroll 25s linear infinite; font-size: 14px; color: var(--ask-brand-500); font-weight: 600; letter-spacing: .5px; }
.ask-qb-marquee.hidden { display: none; }
@keyframes ask-qb-scroll { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }
.ask-qb-holiday { display: flex; align-items: center; justify-content: center; height: calc(100vh - 80px); text-align: center; }
.ask-qb-holiday h1 { font-size: 48px; color: var(--ask-orange-500); margin-bottom: 12px; }
.ask-qb-holiday p { font-size: 24px; color: var(--ask-text-secondary); }
.ask-qb-empty { text-align: center; padding: 60px 20px; color: var(--ask-text-secondary); font-size: 20px; }

/* --- Self Check-in --- */
.ask-ci-page { font-family: var(--ask-font-display); background: #f8fafc; color: #1e293b; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.ask-ci-container { width: 100%; max-width: 440px; text-align: center; }
.ask-ci-logo { width: 64px; height: 64px; background: linear-gradient(135deg, var(--ask-blue-500), var(--ask-purple-500)); border-radius: var(--ask-radius); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 28px; margin: 0 auto 16px; }
.ask-ci-clinic-name { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.ask-ci-subtitle { font-size: 16px; color: var(--ask-text-secondary); margin-bottom: 32px; }
.ask-ci-step { display: none; }
.ask-ci-step.active { display: block; }
.ask-ci-checkin-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 320px; padding: 20px 32px; font-size: 22px; font-weight: 700; color: #fff; background:#2563EB; border: none; border-radius: var(--ask-radius); cursor: pointer; transition: background .15s, transform .1s; box-shadow: 0 4px 16px rgba(59,130,246,.3); }
.ask-ci-checkin-btn:hover { background: var(--ask-blue-600); }
.ask-ci-checkin-btn:active { transform: scale(.97); }
.ask-ci-phone-group { display: flex; gap: 8px; margin-bottom: 16px; }
.ask-ci-phone-prefix { padding: 14px 16px; font-size: 18px; font-weight: 600; background: #f8fafc; border: 2px solid var(--ask-border); border-radius: var(--ask-radius-sm); width: 80px; text-align: center; color: var(--ask-text-secondary); }
.ask-ci-phone-input { flex: 1; padding: 14px 16px; font-size: 20px; font-weight: 600; border: 2px solid var(--ask-border); border-radius: var(--ask-radius-sm); outline: none; transition: border-color .15s; letter-spacing: 1px; }
.ask-ci-phone-input:focus { border-color: var(--ask-blue-500); box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
.ask-ci-phone-input::placeholder { color: var(--ask-border); font-weight: 400; }
.ask-ci-search-btn { width: 100%; padding: 16px; font-size: 18px; font-weight: 700; color: #fff; background:#2563EB; border: none; border-radius: var(--ask-radius-sm); cursor: pointer; transition: background .15s; }
.ask-ci-search-btn:hover { background: var(--ask-blue-600); }
.ask-ci-search-btn:disabled { opacity: .5; cursor: not-allowed; }
.ask-ci-error { background: rgba(239,68,68,.1); color: var(--ask-risk-critical); padding: 12px 16px; border-radius: var(--ask-radius-sm); font-size: 14px; font-weight: 500; margin-bottom: 16px; display: none; }
.ask-ci-confirm-card { background: #fff; border: 2px solid var(--ask-border); border-radius: var(--ask-radius); padding: 24px; margin-bottom: 20px; text-align: left; }
.ask-ci-confirm-label { font-size: 13px; font-weight: 600; color: var(--ask-text-secondary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.ask-ci-confirm-value { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.ask-ci-confirm-value:last-child { margin-bottom: 0; }
.ask-ci-confirm-actions { display: flex; gap: 10px; }
.ask-ci-confirm-btn { flex: 1; padding: 16px; font-size: 18px; font-weight: 700; color: #fff; background: var(--ask-brand-500); border: none; border-radius: var(--ask-radius-sm); cursor: pointer; transition: background .15s; }
.ask-ci-confirm-btn:hover { background: var(--ask-brand-600); }
.ask-ci-back-btn { padding: 16px 24px; font-size: 16px; font-weight: 600; color: var(--ask-text-secondary); background: #f8fafc; border: 2px solid var(--ask-border); border-radius: var(--ask-radius-sm); cursor: pointer; transition: border-color .15s; }
.ask-ci-back-btn:hover { border-color: var(--ask-text-secondary); }
.ask-ci-success-icon { width: 80px; height: 80px; background: rgba(16,185,129,.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 20px; }
.ask-ci-token-display { font-size: 72px; font-weight: 800; color: var(--ask-blue-text); line-height: 1; margin-bottom: 12px; }
.ask-ci-wait-estimate { font-size: 18px; color: var(--ask-text-secondary); margin-bottom: 32px; }
.ask-ci-new-checkin-btn { padding: 14px 32px; font-size: 16px; font-weight: 600; color: var(--ask-blue-text); background: rgba(59,130,246,.12); border: none; border-radius: var(--ask-radius-sm); cursor: pointer; transition: background .15s; }
.ask-ci-new-checkin-btn:hover { background: rgba(59,130,246,.2); }
.ask-ci-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: ask-ci-spin .6s linear infinite; margin-right: 8px; vertical-align: middle; }
@keyframes ask-ci-spin { to { transform: rotate(360deg); } }

/* ============================================================
   MERGED: hsb-theme.css — Design tokens & legacy components
   ============================================================ */
/* =========================================================
   HSB Design System v3.0 — hsb-theme.css
   Unified design tokens for web + mobile parity.
   Source of truth: mobile/src/theme/tokens.json
   ========================================================= */

/* ----- 1. Google Fonts — Asklepios Typography ----- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ----- 2. Design Tokens (Light Mode — default) ----- */
:root {
  /* Brand Primary — Health Green (aligned with mobile palette.primary) */
  --hsb-primary:       #2EBD59;
  --hsb-primary-dark:  #1F9A46;
  --hsb-primary-light: #E8F8EE;
  --hsb-primary-50:    #E8F8EE;
  --hsb-primary-100:   #C6EDCF;
  --hsb-primary-400:   #55CA75;
  --hsb-primary-500:   #2EBD59;
  --hsb-primary-600:   #27AE51;
  --hsb-primary-700:   #1F9A46;
  --hsb-primary-900:   #0B662B;

  /* Brand Secondary — Trust Blue (aligned with mobile palette.secondary) */
  --hsb-secondary:       #2196F3;
  --hsb-secondary-dark:  #1565C0;
  --hsb-secondary-light: #E3F2FD;

  /* Accent — Warm Orange */
  --hsb-accent:       #FF9800;
  --hsb-accent-dark:  #F57C00;
  --hsb-accent-light: #FFF3E0;

  /* Legacy aliases (backward compat — used across 87 templates + 81 JS files) */
  --hsb-blue:       var(--hsb-secondary);
  --hsb-blue-dark:  var(--hsb-secondary-dark);
  --hsb-blue-light: var(--hsb-secondary-light);
  --hsb-green:      var(--hsb-primary);
  --hsb-green-dark: var(--hsb-primary-dark);
  --hsb-green-light:var(--hsb-primary-light);
  --hsb-purple:     #8B5CF6;
  --hsb-purple-light:#EDE9FE;
  --hsb-amber:      #FFB300;
  --hsb-amber-light:#FFF8E1;
  --hsb-red:        #EF4444;
  --hsb-red-dark:   #C62828;
  --hsb-red-light:  #FFEBEE;

  /* AI-Specific Colors */
  --hsb-ai:           #8B5CF6;
  --hsb-ai-light:     rgba(139, 92, 246, 0.08);
  --hsb-ai-glow:      rgba(46, 189, 89, 0.15);
  --hsb-ai-border:    rgba(139, 92, 246, 0.15);
  --hsb-confidence-high:   var(--hsb-primary);
  --hsb-confidence-medium: var(--hsb-amber);
  --hsb-confidence-low:    var(--hsb-red);

  /* Neutrals (aligned with mobile palette.neutral) */
  --hsb-gray-0:   #FFFFFF;
  --hsb-gray-50:  #FAFBFC;
  --hsb-gray-100: #F4F6F8;
  --hsb-gray-200: #E8ECF0;
  --hsb-gray-300: #D1D9E0;
  --hsb-gray-400: #A0AEC0;
  --hsb-gray-500: #718096;
  --hsb-gray-600: #4A5568;
  --hsb-gray-700: #2D3748;
  --hsb-gray-800: #1A202C;
  --hsb-gray-900: #0F1419;

  /* Semantic (theme-aware) */
  --hsb-bg:             var(--hsb-gray-50);
  --hsb-surface:        #FFFFFF;
  --hsb-surface-elevated: #FFFFFF;
  --hsb-text:           var(--hsb-gray-800);
  --hsb-text-secondary: var(--hsb-gray-500);
  --hsb-text-tertiary:  var(--hsb-gray-400);
  --hsb-text-inverse:   #FFFFFF;
  --hsb-text-link:      var(--hsb-secondary);
  --hsb-border:         var(--hsb-gray-200);
  --hsb-divider:        var(--hsb-gray-100);
  --hsb-input-bg:       var(--hsb-gray-100);
  --hsb-overlay:        rgba(0, 0, 0, 0.5);

  /* Glass surfaces */
  --hsb-glass-bg:       rgba(255, 255, 255, 0.72);
  --hsb-glass-border:   rgba(255, 255, 255, 0.3);
  --hsb-glass-blur:     blur(20px) saturate(180%);
  --hsb-glass-ai-bg:    rgba(139, 92, 246, 0.08);
  --hsb-glass-ai-border: rgba(139, 92, 246, 0.15);

  /* Risk levels (immutable — same across all themes) */
  --hsb-risk-normal:    #2EBD59;
  --hsb-risk-mild:      #FFB300;
  --hsb-risk-elevated:  #FF6D00;
  --hsb-risk-critical:  #EF4444;

  /* ── Asklepios Font System ────────────────────────────── */
  --ask-font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --ask-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --ask-font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  /* Legacy aliases (backward compat) */
  --font-primary: var(--ask-font-body);
  --font-display: var(--ask-font-display);
  --font-body:    var(--ask-font-body);
  --font-mono:    var(--ask-font-mono);

  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */

  /* Spacing (4px base grid — aligned with mobile) */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* Shadows */
  --shadow-none: none;
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 24px -4px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 48px -8px rgba(0, 0, 0, 0.15);
  --shadow-ai:  0 0 20px rgba(139, 92, 246, 0.15);

  /* Radii (aligned with mobile) */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* Component sizes */
  --header-height: 56px;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --ai-panel-width: 400px;
  --button-height-sm: 36px;
  --button-height-md: 44px;
  --button-height-lg: 52px;
  --input-height: 48px;
}

/* ----- 2b. Dark Mode Tokens (Asklepios Navy Palette) ----- */
[data-theme="dark"] {
  --hsb-primary:       #10B981;
  --hsb-primary-dark:  #059669;
  --hsb-primary-light: #047857;
  --hsb-primary-50:    #ECFDF5;
  --hsb-primary-500:   #10B981;
  --hsb-primary-600:   #059669;
  --hsb-secondary:     #3B82F6;
  --hsb-secondary-dark:#2563EB;
  --hsb-secondary-light:#1E40AF;
  --hsb-accent:        #F59E0B;
  --hsb-accent-light:  #D97706;
  --hsb-purple:        #8B5CF6;
  --hsb-purple-light:  rgba(139, 92, 246, 0.15);

  /* Asklepios navy layered grays */
  --hsb-gray-50:  #0B1120;
  --hsb-gray-100: #141B2D;
  --hsb-gray-200: #1F2937;
  --hsb-gray-300: #283548;
  --hsb-gray-400: #475569;
  --hsb-gray-500: #94A3B8;
  --hsb-gray-600: #CBD5E1;
  --hsb-gray-700: #E2E8F0;
  --hsb-gray-800: #F1F5F9;
  --hsb-gray-900: #F8FAFC;

  /* Semantic — Asklepios navy */
  --hsb-bg:               #141B2D;
  --hsb-surface:          #1F2937;
  --hsb-surface-elevated: #283548;
  --hsb-text:             #F1F5F9;
  --hsb-text-secondary:   #94A3B8;
  --hsb-text-tertiary:    #64748B;
  --hsb-text-inverse:     #0F172A;
  --hsb-text-link:        #3B82F6;
  --hsb-border:           #475569;
  --hsb-divider:          #1F2937;
  --hsb-input-bg:         #334155;
  --hsb-overlay:          rgba(0, 0, 0, 0.7);

  /* Glass — Asklepios */
  --hsb-glass-bg:       rgba(20, 27, 45, 0.85);
  --hsb-glass-border:   rgba(71, 85, 105, 0.3);
  --hsb-glass-ai-bg:    rgba(139, 92, 246, 0.15);
  --hsb-glass-ai-border: rgba(139, 92, 246, 0.25);
  --hsb-ai-light:       rgba(139, 92, 246, 0.15);

  /* Risk — Asklepios */
  --hsb-risk-normal:    #10B981;
  --hsb-risk-mild:      #F59E0B;
  --hsb-risk-elevated:  #F97316;
  --hsb-risk-critical:  #EF4444;

  /* Asklepios aliases (same variables as asklepios-dashboard.css) */
  --ask-bg:             #141B2D;
  --ask-card:           #1F2937;
  --ask-card-hover:     #283548;
  --ask-input:          #334155;
  --ask-border:         #475569;
  --ask-text:           #F1F5F9;
  --ask-text-secondary: #94A3B8;
  --ask-text-tertiary:  #90A0B5; /* a11y: AA on dark surfaces (was #64748B; this [data-theme=dark] block was overriding :root) */
  --ask-brand-500:      #10B981;
  --ask-brand-600:      #059669;
  --ask-blue-500:       #3B82F6;
  --ask-blue-600:       #2563EB;
  --ask-purple-500:     #8B5CF6;
  --ask-purple-600:     #7C3AED;
  --ask-orange-500:     #F59E0B;
  --ask-orange-600:     #D97706;
  --ask-rose-500:       #F43F5E;
  --ask-teal-500:       #14B8A6;
  --ask-risk-normal:    #10B981;
  --ask-risk-mild:      #F59E0B;
  --ask-risk-elevated:  #F97316;
  --ask-risk-critical:  #EF4444;
  --ask-radius:         16px;
  --ask-radius-sm:      12px;
  --ask-radius-xs:      8px;

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 24px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 16px 48px -8px rgba(0, 0, 0, 0.6);
  --shadow-ai:  0 0 20px rgba(139, 92, 246, 0.25);
}

/* Auto dark mode via system preference — Asklepios Navy */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hsb-primary:       #10B981;
    --hsb-primary-dark:  #059669;
    --hsb-primary-light: #047857;
    --hsb-secondary:     #3B82F6;
    --hsb-secondary-dark:#2563EB;
    --hsb-secondary-light:#1E40AF;
    --hsb-accent:        #F59E0B;
    --hsb-accent-light:  #D97706;

    --hsb-gray-50:  #0B1120;
    --hsb-gray-100: #141B2D;
    --hsb-gray-200: #1F2937;
    --hsb-gray-300: #283548;
    --hsb-gray-400: #475569;
    --hsb-gray-500: #94A3B8;
    --hsb-gray-600: #CBD5E1;
    --hsb-gray-700: #E2E8F0;
    --hsb-gray-800: #F1F5F9;
    --hsb-gray-900: #F8FAFC;

    --hsb-bg:               #141B2D;
    --hsb-surface:          #1F2937;
    --hsb-surface-elevated: #283548;
    --hsb-text:             #F1F5F9;
    --hsb-text-secondary:   #94A3B8;
    --hsb-text-tertiary:    #64748B;
    --hsb-text-inverse:     #0F172A;
    --hsb-text-link:        #3B82F6;
    --hsb-border:           #475569;
    --hsb-divider:          #1F2937;
    --hsb-input-bg:         #334155;
    --hsb-overlay:          rgba(0, 0, 0, 0.7);

    --hsb-glass-bg:       rgba(20, 27, 45, 0.85);
    --hsb-glass-border:   rgba(71, 85, 105, 0.3);
    --hsb-glass-ai-bg:    rgba(139, 92, 246, 0.15);
    --hsb-glass-ai-border: rgba(139, 92, 246, 0.25);
    --hsb-ai-light:       rgba(139, 92, 246, 0.15);

    --hsb-risk-normal:    #10B981;
    --hsb-risk-mild:      #F59E0B;
    --hsb-risk-elevated:  #F97316;
    --hsb-risk-critical:  #EF4444;

    --ask-bg: #141B2D; --ask-card: #1F2937; --ask-card-hover: #283548;
    --ask-input: #334155; --ask-border: #475569;
    --ask-text: #F1F5F9; --ask-text-secondary: #94A3B8; --ask-text-tertiary: #90A0B5; /* a11y: AA (was #64748B; :root:not([data-theme=light]) overrode :root) */
    --ask-brand-500: #10B981; --ask-brand-600: #059669;
    --ask-blue-500: #3B82F6; --ask-purple-500: #8B5CF6;
    --ask-orange-500: #F59E0B; --ask-rose-500: #F43F5E; --ask-teal-500: #14B8A6;
    --ask-risk-normal: #10B981; --ask-risk-mild: #F59E0B;
    --ask-risk-elevated: #F97316; --ask-risk-critical: #EF4444;
    --ask-radius: 16px; --ask-radius-sm: 12px; --ask-radius-xs: 8px;

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 8px 24px -4px rgba(0, 0, 0, 0.5);
    --shadow-xl:  0 16px 48px -8px rgba(0, 0, 0, 0.6);
    --shadow-ai:  0 0 20px rgba(139, 92, 246, 0.25);
  }
}

/* ----- 3. Reset & Base ----- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light dark;
}

body {
  font-family: var(--ask-font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ask-text);
  background: var(--ask-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration-normal) var(--ease-default),
              color var(--duration-normal) var(--ease-default);
}

img { max-width: 100%; display: block; }
a { color: var(--ask-blue-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- 4. Accessibility ----- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--ask-blue-500);
  color: #fff;
  border-radius: var(--radius-sm);
  z-index: 10000;
  font-weight: 600;
}
.skip-link:focus {
  top: var(--space-4);
}

:focus-visible {
  outline: 2px solid var(--ask-blue-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----- 5. Layout Utilities ----- */
.hsb-container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.hsb-container--wide {
  max-width: 1280px;
}

/* ----- 6. Navigation / Header ----- */
.hsb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ask-card);
  backdrop-filter: var(--ask-card);
  -webkit-backdrop-filter: var(--ask-card);
  border-bottom: 1px solid var(--ask-border);
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.hsb-header.scrolled {
  box-shadow: var(--shadow-md);
}

.hsb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  max-width: 1120px;
  margin-inline: auto;
}

.hsb-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ask-text);
}

.hsb-header__logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--ask-brand-500), var(--ask-brand-600));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-family: var(--ask-font-body);
  font-size: var(--text-lg);
}

.hsb-header__title {
  font-family: var(--ask-font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}

.hsb-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.hsb-header__nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ask-text-secondary);
  transition: color var(--duration-fast);
}

.hsb-header__nav a:hover,
.hsb-header__nav a.active {
  color: var(--ask-blue-text);
  text-decoration: none;
}

.hsb-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ----- 7. Badge / Tag System ----- */
.hsb-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.8;
}

.hsb-badge--count {
  background: var(--ask-risk-critical);
  color: #fff;
  min-width: 22px;
  text-align: center;
}

.hsb-badge--critical {
  background: var(--ask-rose-500);
  color: var(--ask-risk-critical);
  border: 1px solid rgba(239,68,68,0.2);
}

.hsb-badge--elevated {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid rgba(234,88,12,0.2);
}

.hsb-badge--mild {
  background: var(--ask-orange-500);
  color: #92400e;
  border: 1px solid rgba(245,158,11,0.2);
}

.hsb-badge--normal {
  background: var(--ask-brand-600);
  color: var(--ask-brand-600);
  border: 1px solid rgba(16,185,129,0.2);
}

.hsb-badge--unknown {
  background: var(--ask-bg);
  color: var(--ask-muted);
  border: 1px solid var(--ask-border);
}

.hsb-badge--info {
  background: var(--ask-blue-600);
  color: var(--ask-blue-600);
}

/* ----- 8. Card Component ----- */
.hsb-card {
  background: var(--ask-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--ask-border);
  padding: var(--space-6);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.hsb-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* ----- 9. Button System ----- */
.hsb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--ask-font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  border: none;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.hsb-btn:focus-visible {
  outline: 2px solid var(--ask-blue-500);
  outline-offset: 2px;
}

.hsb-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary (green) */
.hsb-btn--primary {
  background: var(--ask-brand-500);
  color: #fff;
}
.hsb-btn--primary:hover { background: var(--ask-brand-600); }
.hsb-btn--primary:active { transform: scale(0.97); }

/* Secondary (blue) */
.hsb-btn--secondary {
  background: var(--ask-blue-500);
  color: #fff;
}
.hsb-btn--secondary:hover { background: var(--ask-blue-600); }
.hsb-btn--secondary:active { transform: scale(0.97); }

/* Success */
.hsb-btn--success {
  background: var(--ask-brand-500);
  color: #fff;
}
.hsb-btn--success:hover { background: var(--ask-brand-600); }
.hsb-btn--success:active { transform: scale(0.97); }

/* Danger */
.hsb-btn--danger {
  background: var(--ask-risk-critical);
  color: #fff;
}
.hsb-btn--danger:hover { background: var(--ask-risk-critical); }
.hsb-btn--danger:active { transform: scale(0.97); }

/* Warning / Edit */
.hsb-btn--warning {
  background: var(--ask-orange-500);
  color: #fff;
}
.hsb-btn--warning:hover { background: #FF8F00; }
.hsb-btn--warning:active { transform: scale(0.97); }

/* Ghost */
.hsb-btn--ghost {
  background: transparent;
  color: var(--ask-text-secondary);
}
.hsb-btn--ghost:hover {
  background: var(--ask-bg);
  color: var(--ask-text);
}

/* Small */
.hsb-btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  height: var(--button-height-sm);
}

/* Large */
.hsb-btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  gap: var(--space-3);
  height: var(--button-height-lg);
}

/* ----- 10. Table Styling ----- */
.hsb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.hsb-table thead th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ask-muted);
  border-bottom: 2px solid var(--ask-border);
}

.hsb-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--ask-bg);
  vertical-align: middle;
}

.hsb-table tbody tr:hover {
  background: var(--ask-bg);
}

.hsb-table tbody tr:last-child td {
  border-bottom: none;
}

/* ----- 11. Form Components ----- */
.hsb-textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ask-card-hover);
  border-radius: var(--radius-md);
  font-family: var(--ask-font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ask-text);
  background: var(--ask-card);
  resize: vertical;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.hsb-textarea:focus {
  outline: none;
  border-color: var(--ask-blue-500);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.hsb-input {
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ask-card-hover);
  border-radius: var(--radius-sm);
  font-family: var(--ask-font-body);
  font-size: var(--text-sm);
  color: var(--ask-text);
  background: var(--ask-card);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.hsb-input:focus {
  outline: none;
  border-color: var(--ask-blue-500);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.hsb-select {
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--ask-card-hover);
  border-radius: var(--radius-sm);
  font-family: var(--ask-font-body);
  font-size: var(--text-sm);
  color: var(--ask-text);
  background: var(--ask-card);
  cursor: pointer;
  transition: border-color var(--duration-fast);
  appearance: auto;
}

.hsb-select:focus {
  outline: none;
  border-color: var(--ask-blue-500);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.hsb-select--sm {
  padding: 4px 8px 4px 6px;
  font-size: var(--text-xs);
}

/* ----- 12. Empty State ----- */
.hsb-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.hsb-empty__icon {
  width: 80px;
  height: 80px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  background: var(--ask-brand-600);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hsb-empty__title {
  font-family: var(--ask-font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ask-text);
  margin-bottom: var(--space-2);
}

.hsb-empty__text {
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
}

/* ----- 14. Scroll Reveal Animation ----- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- 15. Auto-refresh indicator ----- */
.hsb-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ask-brand-500);
  animation: hsb-pulse-anim 2s infinite;
}

@keyframes hsb-pulse-anim {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46,189,89,0.4); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 6px rgba(46,189,89,0); }
}

/* ----- 15b. AI Components ----- */

/* AI Typing Indicator */
.ai-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: var(--space-2) var(--space-3);
}

.ai-typing__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ask-purple-500);
  animation: ai-typing-bounce 1.4s ease-in-out infinite;
}

.ai-typing__dot:nth-child(2) { animation-delay: 0.2s; }
.ai-typing__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ai-typing-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

/* Confidence Badge */
.confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.confidence-badge--high {
  background: var(--ask-brand-600);
  color: var(--ask-brand-600);
}

.confidence-badge--medium {
  background: var(--ask-orange-500);
  color: #92400E;
}

.confidence-badge--low {
  background: var(--ask-rose-500);
  color: var(--ask-risk-critical);
}

.confidence-badge__icon {
  font-size: 10px;
}

/* Streaming text cursor */
.streaming-cursor::after {
  content: '|';
  animation: blink 0.8s step-end infinite;
  color: var(--ask-purple-500);
  font-weight: 400;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ----- 16. Responsive ----- */
@media (max-width: 1024px) {
  .hsb-container { padding-inline: var(--space-4); }
}

@media (max-width: 768px) {
  .hsb-header__inner { padding: var(--space-3) var(--space-4); }
  .hsb-header__nav { gap: var(--space-4); }
  .hsb-card { padding: var(--space-4); }
}

@media (max-width: 480px) {
  :root {
    --text-base: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.125rem;
    --text-2xl: 1.25rem;
  }
  .hsb-header__nav { display: none; }
  .hsb-card { border-radius: var(--radius-md); }
}

/* ----- 17. Print ----- */
@media print {
  .hsb-header { position: static; box-shadow: none; backdrop-filter: none; }
  .hsb-card { box-shadow: none; break-inside: avoid; }
  .hsb-btn { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   MERGED: dashboard.css — Detail pages, modals, pagination
   ============================================================ */
/* =========================================================
   Dashboard CSS — Grid view, filters, pagination, detail page
   Extends hsb-theme.css for all review dashboard screens.
   ========================================================= */

/* ===== PAGE LAYOUT ===== */
.dashboard-body {
  padding-top: var(--space-6);
  padding-bottom: var(--space-12);
  min-height: 100vh;
}

/* ===== PAGE TITLE ===== */
.dashboard-hero {
  margin-bottom: var(--space-6);
}

.dashboard-hero__title {
  font-family: var(--ask-font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ask-text);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}

.dashboard-hero__subtitle {
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
}

/* ===== FILTER BAR ===== */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.filter-tabs {
  display: flex;
  gap: var(--space-1);
  background: var(--ask-bg);
  border-radius: var(--radius-lg);
  padding: 4px;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ask-text-secondary);
  font-family: var(--ask-font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  white-space: nowrap;
}

.filter-tab:hover {
  color: var(--ask-text);
  background: rgba(255,255,255,0.5);
}

.filter-tab.active {
  background: var(--ask-card);
  color: var(--ask-blue-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.filter-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 600;
  background: var(--ask-border);
  color: var(--ask-text-secondary);
  transition: all 0.2s var(--ease-out);
}

.filter-tab.active .filter-tab__count {
  background: var(--ask-blue-600);
  color: var(--ask-blue-text);
}

.filter-bar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.filter-perpage {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ask-text-secondary);
  font-weight: 500;
}

/* ===== GRID / TABLE ===== */
.grid-wrapper {
  background: var(--ask-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ask-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.grid-wrapper .hsb-table {
  margin: 0;
  border-radius: 0;
}

.grid-wrapper .hsb-table thead th {
  background: var(--ask-bg);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  font-size: var(--text-xs);
  text-transform: uppercase;
  user-select: none;
  letter-spacing: 0.05em;
  color: var(--ask-muted);
  border-bottom: 1px solid var(--ask-border);
  padding: 12px 16px;
}

[data-theme="dark"] .grid-wrapper {
  background: var(--ask-card);
  border-color: var(--ask-border);
}
[data-theme="dark"] .grid-wrapper .hsb-table thead th {
  background: #1e293b;
  color: #94a3b8;
  border-bottom: 1px solid #334155;
}
[data-theme="dark"] .grid-wrapper .hsb-table tbody td {
  border-bottom-color: #1e293b;
}
[data-theme="dark"] .grid-wrapper .hsb-table tbody tr:hover {
  background: rgba(59,130,246,.04);
}

/* ===== DARK MODE — FILTER BAR & TABS ===== */
[data-theme="dark"] .filter-bar {
  background: var(--ask-card);
  border-color: var(--ask-border);
}
[data-theme="dark"] .filter-tabs {
  background: rgba(255,255,255,.04);
  border-color: var(--ask-border);
}
[data-theme="dark"] .filter-tab {
  color: var(--ask-text-secondary);
}
[data-theme="dark"] .filter-tab:hover {
  color: var(--ask-text);
  background: rgba(255,255,255,.06);
}
[data-theme="dark"] .filter-tab.active {
  background: var(--ask-card-hover);
  color: #60a5fa;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
[data-theme="dark"] .filter-tab__count {
  background: rgba(255,255,255,.08);
  color: var(--ask-text);
}
[data-theme="dark"] .filter-tab.active .filter-tab__count {
  background: rgba(96,165,250,.2);
  color: #60a5fa;
}

/* ===== DARK MODE — SEARCH / INPUT ===== */
[data-theme="dark"] .hsb-input,
[data-theme="dark"] .hsb-select,
[data-theme="dark"] .filter-bar input[type="text"],
[data-theme="dark"] .filter-bar input[type="search"],
[data-theme="dark"] .filter-bar input[type="date"],
[data-theme="dark"] .filter-bar select {
  background: var(--ask-card);
  color: var(--ask-text);
  border-color: var(--ask-border);
}
[data-theme="dark"] .hsb-input:focus,
[data-theme="dark"] .hsb-select:focus {
  border-color: #27ae60;
  box-shadow: 0 0 0 3px rgba(39,174,96,.15);
}

/* ===== MODALS (GLOBAL BASE) ===== */
.modal-overlay,
.hsb-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}
.modal-card,
.hsb-modal-card {
  background: var(--ask-bg, #0f1724);
  border: 1px solid var(--ask-border);
  border-radius: 14px;
  padding: 28px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  color: var(--ask-text);
}
.modal-card h2,
.hsb-modal-card h2 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ask-text);
}

/* Native <dialog class="modal-card"> — the .modal-card class was authored for a
   <div> inside a .modal-overlay (width:100%), so on a real <dialog> it renders
   full-bleed + top-anchored with no styled backdrop. Constrain it back to a
   centered card that shrinks to its content (honouring each dialog's inline
   min-width/max-width) and cap its height so long bodies scroll inside. */
dialog.modal-card,
dialog.hsb-modal-card {
  position: fixed;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  max-width: 94vw;
  max-height: 90vh;
  overflow: auto;
}
dialog.modal-card::backdrop,
dialog.hsb-modal-card::backdrop {
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
}

/* ===== DARK MODE — MODALS (OVERRIDES) ===== */
[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .hsb-modal-overlay {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}
[data-theme="dark"] .modal-card,
[data-theme="dark"] .hsb-modal-card {
  background: var(--ask-bg);
  border: 1px solid var(--ask-border);
  color: var(--ask-text);
}
[data-theme="dark"] .modal-card input,
[data-theme="dark"] .modal-card select,
[data-theme="dark"] .modal-card textarea,
[data-theme="dark"] .hsb-modal-card input,
[data-theme="dark"] .hsb-modal-card select,
[data-theme="dark"] .hsb-modal-card textarea {
  background: var(--ask-card) !important;
  color: var(--ask-text) !important;
  border-color: var(--ask-border) !important;
}
[data-theme="dark"] .modal-card input:focus,
[data-theme="dark"] .modal-card select:focus,
[data-theme="dark"] .modal-card textarea:focus,
[data-theme="dark"] .hsb-modal-card input:focus,
[data-theme="dark"] .hsb-modal-card select:focus,
[data-theme="dark"] .hsb-modal-card textarea:focus {
  border-color: #27ae60 !important;
  box-shadow: 0 0 0 3px rgba(39,174,96,.15) !important;
  outline: none !important;
}

/* ===== DARK MODE — PAGINATION ===== */
[data-theme="dark"] .pagination-btn {
  background: var(--ask-card);
  border-color: var(--ask-border);
  color: var(--ask-text-secondary);
}
[data-theme="dark"] .pagination-btn.active {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}
[data-theme="dark"] .pagination-btn:hover:not(.active):not(:disabled) {
  background: var(--ask-card-hover);
}

.grid-wrapper .hsb-table tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--ask-bg);
}

.grid-wrapper .hsb-table tbody tr:last-child td {
  border-bottom: none;
}

/* ===== SORTABLE COLUMN HEADERS ===== */
th.sortable {
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

th.sortable:hover {
  background: var(--ask-bg);
  color: var(--ask-text);
}

th.sortable.sorted {
  color: #ffffff; /* a11y: was blue-on-blue (--ask-blue-500 on --ask-blue-600 = 1.4:1); white = 5.7:1 */
  background: var(--ask-blue-600);
}

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sort-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--ask-text-tertiary);
  transition: color 0.15s var(--ease-out);
}

th.sortable:hover .sort-icon {
  color: var(--ask-muted);
}

.sort-icon--asc,
.sort-icon--desc {
  color: var(--ask-blue-text);
}

/* Grid row animation */
.grid-row {
  animation: grid-fade-in 0.3s var(--ease-out) both;
}

@keyframes grid-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Column widths */
.col-id      { width: 100px; }
.col-patient { width: 100px; }
.col-risk    { width: 100px; }
.col-reason  { min-width: 180px; }
.col-date    { width: 140px; }
.col-status  { width: 110px; }
.col-action  { width: 120px; text-align: right; }

/* Grid cell styles */
.grid-id {
  font-family: var(--ask-font-display);
  font-weight: 600;
  color: var(--ask-text);
  font-size: var(--text-sm);
}

.grid-patient {
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
  font-variant-numeric: tabular-nums;
}

.grid-reason {
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
  line-height: 1.4;
}

.grid-date {
  font-size: var(--text-xs);
  color: var(--ask-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ===== BADGES ===== */
.hsb-badge--sm {
  font-size: 10px;
  padding: 2px 8px;
}

.hsb-badge--status {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hsb-badge--success {
  background: var(--ask-brand-600);
  color: var(--ask-brand-600);
}

.hsb-badge--danger {
  background: var(--ask-rose-500);
  color: var(--ask-risk-critical);
}

.hsb-badge--warning {
  background: var(--ask-orange-500);
  color: #92400e;
}

.hsb-badge--info {
  background: var(--ask-purple-500);
  color: #6d28d9;
}

.hsb-badge--unknown {
  background: var(--ask-bg);
  color: var(--ask-muted);
}

/* ===== PAGINATION ===== */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-5);
  padding: var(--space-3) 0;
}

.pagination__info {
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
  font-variant-numeric: tabular-nums;
}

.pagination__controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination__btn,
.pagination__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-md);
  background: var(--ask-card);
  color: var(--ask-text-secondary);
  font-family: var(--ask-font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
}

.pagination__btn:hover:not(:disabled),
.pagination__num:hover:not(.active) {
  background: var(--ask-bg);
  border-color: var(--ask-card-hover);
  color: var(--ask-text);
}

.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination__num.active {
  background: var(--ask-blue-500);
  border-color: var(--ask-blue-500);
  color: white;
}

.pagination__pages {
  display: flex;
  gap: var(--space-1);
}

/* ===== EMPTY STATE (override for grid context) ===== */
.hsb-empty {
  flex-direction: column;
  align-items: center;
  padding: var(--space-12) var(--space-6);
}

/* ===== DETAIL PAGE: BACK LINK ===== */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ask-blue-text);
  font-weight: 500;
  text-decoration: none;
  margin-bottom: var(--space-6);
  transition: gap 0.2s var(--ease-out);
}

.detail-back:hover {
  gap: var(--space-3);
}

/* ===== DETAIL PAGE: LOADING ===== */
.detail-loading {
  padding: var(--space-8) 0;
}

/* ===== DETAIL PAGE: HEADER ===== */
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--ask-border);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.detail-header__title {
  font-family: var(--ask-font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ask-text);
  letter-spacing: -0.01em;
}

.detail-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
}

.detail-meta__sep {
  color: var(--ask-card-hover);
}

.detail-header__badges {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* ===== DETAIL PAGE: SECTIONS ===== */
.detail-section {
  margin-bottom: var(--space-6);
}

.detail-section__title {
  font-family: var(--ask-font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ask-muted);
  margin-bottom: var(--space-3);
}

.detail-section__text {
  font-size: var(--text-base);
  color: var(--ask-text);
  line-height: 1.6;
}

.detail-tests-wrapper {
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.detail-tests-wrapper .hsb-table {
  margin: 0;
}

/* ===== DETAIL PAGE: SIDE-BY-SIDE COMPARISON ===== */
.detail-comparison {
  margin-bottom: var(--space-6);
}

.detail-comparison__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.detail-comparison__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.detail-comparison__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.detail-comparison__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ask-muted);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--ask-border);
}

.detail-comparison__label--edited {
  color: var(--ask-brand-600);
  border-bottom-color: var(--ask-brand-500);
}

.detail-comparison__body {
  background: var(--ask-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 600px;
  overflow-y: auto;
  flex: 1;
  border: 1px solid var(--ask-border);
}

/* Diff highlight marks — inline word changes */
.diff-removed {
  background: #fecaca;
  color: #991b1b;
  text-decoration: line-through;
  text-decoration-color: #dc2626;
  border-radius: 2px;
  padding: 1px 3px;
  margin: 0 1px;
}

.diff-added {
  background: #bbf7d0;
  color: #166534;
  border-radius: 2px;
  padding: 1px 3px;
  margin: 0 1px;
}

/* Diff highlight marks — full line changes */
.diff-line-removed {
  display: inline;
  background: #fee2e2;
  color: #991b1b;
  text-decoration: line-through;
  text-decoration-color: rgba(220, 38, 38, 0.4);
}

.diff-line-added {
  display: inline;
  background: #dcfce7;
  color: #166534;
}

/* Legend */
.diff-legend {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.diff-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--ask-text-secondary);
  font-weight: 500;
}

.diff-legend__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.diff-legend__swatch--removed {
  background: #fecaca;
  border: 1px solid #fca5a5;
}

.diff-legend__swatch--added {
  background: #bbf7d0;
  border: 1px solid #86efac;
}

/* Comparison meta row */
.detail-comparison__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--ask-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--ask-border);
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
}

.detail-comparison__meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.detail-comparison__meta-item {
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
}

.diff-stats {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.diff-stats__removed {
  color: var(--ask-risk-critical);
}

.diff-stats__added {
  color: var(--ask-brand-600);
}

/* Responsive: stack comparison on mobile */
@media (max-width: 768px) {
  .detail-comparison__grid {
    grid-template-columns: 1fr;
  }

  .detail-comparison__body {
    max-height: 400px;
  }
}

/* ===== DETAIL PAGE: AI RESPONSE ===== */
.detail-ai-response {
  background: var(--ask-bg);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--ask-purple-500);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
}

/* ===== DETAIL PAGE: DECISION BOX ===== */
.detail-decision-box {
  background: var(--ask-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--ask-border);
}

.detail-decision-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.detail-decision-row + .detail-decision-row {
  border-top: 1px solid var(--ask-bg);
}

.detail-decision-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ask-text-tertiary); /* a11y: was --ask-muted #64748b = 3.08:1 */
  min-width: 100px;
}

/* ===== DETAIL PAGE: ACTION PANEL ===== */
.detail-action-panel {
  background: var(--ask-card);
  border-radius: var(--radius-lg);
  border: 2px solid var(--ask-blue-600);
  padding: var(--space-6);
  margin-top: var(--space-6);
}

.detail-action-buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.detail-edit-area {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--ask-border);
}

.detail-edit-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ask-text);
  margin-bottom: var(--space-2);
}

.detail-edit-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ===== DETAIL PAGE: STATUS MSG ===== */
.detail-status-msg {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  animation: status-fade-in 0.3s var(--ease-out);
}

.detail-status-msg.success {
  background: var(--ask-brand-600);
  color: var(--ask-brand-600);
}

.detail-status-msg.error {
  background: var(--ask-rose-500);
  color: var(--ask-risk-critical);
}

@keyframes status-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== LOADING SKELETON ===== */
.skeleton {
  background: linear-gradient(90deg, var(--ask-bg) 25%, var(--ask-border) 50%, var(--ask-bg) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== HEADER EXTRAS ===== */
.hsb-header__refresh-indicator {
  font-size: var(--text-xs);
  color: var(--ask-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .grid-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .grid-wrapper .hsb-table {
    min-width: 700px;
  }

  .pagination {
    flex-direction: column;
    gap: var(--space-3);
  }

  .detail-header {
    flex-direction: column;
  }

  .detail-action-buttons {
    flex-direction: column;
  }

  .detail-action-buttons .hsb-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .dashboard-hero__title {
    font-size: var(--text-xl);
  }

  .filter-tab {
    padding: 6px 12px;
    font-size: var(--text-xs);
  }
}


/* =========================================================
   AUDIT TIMELINE
   ========================================================= */

/* --- Filters --- */
.audit-filters {
  margin-bottom: var(--space-5);
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.audit-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
}

.audit-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 140px;
  flex: 1;
}

.audit-filter-group--actions {
  flex-direction: row;
  align-items: flex-end;
  gap: var(--space-2);
  min-width: auto;
  flex: 0 0 auto;
}

.audit-filter-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ask-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hsb-input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: var(--ask-font-body);
  font-size: var(--text-sm);
  color: var(--ask-text);
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.hsb-input:focus {
  outline: none;
  border-color: var(--ask-blue-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* --- Timeline vertical line --- */
.audit-timeline {
  position: relative;
  padding-left: 32px;
}

.audit-timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ask-border);
  border-radius: 1px;
}

/* --- Timeline item --- */
.timeline-item {
  position: relative;
  margin-bottom: var(--space-4);
  animation: grid-fade-in 0.3s var(--ease-out) both;
}

/* --- Timeline dot --- */
.timeline-dot {
  position: absolute;
  left: -25px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ask-card-hover);
  border: 2px solid var(--ask-card);
  z-index: 1;
}

.timeline-dot--success  { background: var(--ask-brand-500); }
.timeline-dot--danger   { background: var(--ask-risk-critical); }
.timeline-dot--warning  { background: var(--ask-orange-500); }
.timeline-dot--info     { background: var(--ask-blue-500); }
.timeline-dot--purple   { background: var(--ask-purple-500); }
.timeline-dot--elevated { background: #ea580c; }
.timeline-dot--unknown  { background: var(--ask-text-tertiary); }

/* --- Timeline card --- */
.timeline-card {
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

.timeline-card:hover {
  box-shadow: var(--shadow-md);
}

.timeline-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.timeline-card__time {
  font-size: var(--text-xs);
  color: var(--ask-text-secondary);
  font-variant-numeric: tabular-nums;
}

.timeline-card__body {
  margin-bottom: var(--space-2);
}

.timeline-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--ask-text-secondary);
}

.timeline-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.timeline-meta-item a {
  color: var(--ask-blue-text);
  text-decoration: none;
}

.timeline-meta-item a:hover {
  text-decoration: underline;
}

.timeline-card__summary {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
  line-height: 1.4;
}

.timeline-card__expand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: none;
  background: none;
  color: var(--ask-blue-text);
  font-family: var(--ask-font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-1) 0;
}

.timeline-card__expand:hover {
  text-decoration: underline;
}

.expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  color: var(--ask-blue-text);
  font-weight: 700;
  font-size: 11px;
}

.timeline-card__details {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ask-bg);
}

.timeline-json {
  font-family: var(--ask-font-mono);
  font-size: var(--text-xs);
  background: var(--ask-bg);
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ask-text-secondary);
  max-height: 300px;
  overflow-y: auto;
}

/* --- Purple badge for FSM events --- */
.hsb-badge--purple {
  background: rgba(139, 92, 246, 0.1);
  color: #6d28d9;
}

/* --- Elevated badge for HITL --- */
.hsb-badge--elevated {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .audit-filters__row {
    flex-direction: column;
  }

  .audit-filter-group {
    min-width: 100%;
  }

  .audit-filter-group--actions {
    flex-direction: row;
    min-width: 100%;
  }

  .audit-timeline {
    padding-left: 24px;
  }

  .audit-timeline::before {
    left: 8px;
  }

  .timeline-dot {
    left: -20px;
  }

  .timeline-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

/* =========================================================
   GLOBAL MODAL FORM FIELDS (.q-field)
   Reusable form field styling for modals across all templates.
   ========================================================= */
.q-field { margin-bottom: 16px; }
.q-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ask-text); }
.q-field label .req { color: #ef4444; }
.q-field input,
.q-field select,
.q-field textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  background: var(--ask-card, #1e2a3a);
  color: var(--ask-text, #e2e8f0);
  border: 1px solid var(--ask-border);
  border-radius: 8px;
  transition: border-color .2s, box-shadow .2s;
}
.q-field input:focus,
.q-field select:focus,
.q-field textarea:focus {
  outline: none;
  border-color: var(--ask-brand-500, #27ae60);
  box-shadow: 0 0 0 3px rgba(39,174,96,.15);
}
.q-field input::placeholder { color: var(--ask-text-secondary, #64748b); }

/* When `.q-field` is applied DIRECTLY to an input/select/textarea (not as a
   wrapper) — common in the toolbars/filter bars — style the element itself so
   it isn't left as a raw browser-default control. */
input.q-field,
select.q-field,
textarea.q-field {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  background: var(--ask-input, var(--ask-card, #1e2a3a));
  color: var(--ask-text, #e2e8f0);
  border: 1px solid var(--ask-border);
  border-radius: 8px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
select.q-field {
  /* native chevron, theme-coloured */
  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='%2390a0b5' stroke-width='2' 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;
  padding-right: 30px;
}
input.q-field::placeholder,
textarea.q-field::placeholder { color: var(--ask-text-secondary, #64748b); }
input.q-field:focus,
select.q-field:focus,
textarea.q-field:focus {
  border-color: var(--ask-brand-500, #27ae60);
  box-shadow: 0 0 0 3px rgba(39,174,96,.15);
}

/* ── Portal page helpers: stat grid, toolbar, empty state ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-4, 16px);
  margin-bottom: var(--space-5, 20px);
}
.portal-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.portal-toolbar .grow { flex: 1; min-width: 180px; }
.portal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 20px;
  color: var(--ask-text-secondary, #90a0b5);
  text-align: center;
}
.portal-empty svg { opacity: .5; }
.portal-empty__title { font-size: 15px; font-weight: 600; color: var(--ask-text); }
.portal-empty__hint { font-size: 13px; }

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ask-border);
}

/* ============================================================
   MERGED: portal.css — Portal shell layout
   ============================================================ */
/* =========================================================
   Portal CSS — Unified portal shell + page styles
   Extends hsb-theme.css design tokens.
   ========================================================= */

/* ===== PORTAL SHELL LAYOUT ===== */
.portal {
  display: flex;
  min-height: 100vh;
}

.portal__sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: var(--ask-bg);
  color: var(--ask-text);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-out),
              width var(--duration-normal) var(--ease-out);
  overflow: hidden;
}

.portal__main {
  flex: 1;
  margin-left: 260px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--duration-normal) var(--ease-out);
}

.portal__header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ask-card);
  backdrop-filter: var(--ask-card);
  -webkit-backdrop-filter: var(--ask-card);
  border-bottom: 1px solid var(--ask-border);
  padding: 0 var(--space-6);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: background-color var(--duration-normal) var(--ease-default);
}

.portal__content {
  flex: 1;
  padding: var(--space-6);
  max-width: 1280px;
  width: 100%;
  margin-inline: auto;
}

/* ===== SIDEBAR ===== */

/* Logo area */
.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
}

.sidebar__logo:hover {
  text-decoration: none;
  color: #fff;
}

.sidebar__logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--ask-brand-500), var(--ask-brand-600));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-family: var(--ask-font-body);
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.sidebar__logo-text {
  font-family: var(--ask-font-display);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Navigation */
.sidebar__nav {
  flex: 1;
  padding: var(--space-2) 0;
  overflow-y: auto;
}

.sidebar-group {
  margin-bottom: var(--space-2);
}

.sidebar-group__title {
  padding: var(--space-2) var(--space-5);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ask-text-tertiary); /* a11y: was --ask-muted #64748b = 3.6:1; tertiary clears AA both themes */
  white-space: nowrap;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-5);
  color: var(--ask-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--duration-fast) var(--ease-out);
  border-left: 3px solid transparent;
  cursor: pointer;
}

.sidebar-item:hover {
  color: var(--ask-text);
  background: rgba(128, 128, 128, 0.1);
  text-decoration: none;
}

.sidebar-item--active {
  color: var(--ask-text);
  background: rgba(16, 185, 129, 0.15);
  border-left-color: var(--ask-brand-500);
}

.sidebar-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.sidebar-item--active .sidebar-item__icon {
  opacity: 1;
}

.sidebar-item__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-item__badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ask-risk-critical);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__version {
  font-size: 10px;
  color: var(--ask-text-tertiary); /* a11y: AA both themes (was --ask-muted) */
  text-align: center;
}

/* a11y: light-mode sidebar bg is light, so the white logo text needs a dark color */
[data-theme="light"] .sidebar__logo-text { color: var(--ask-text); }

/* ===== HEADER ===== */

.portal-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}

.portal-header__hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--ask-text);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}

.portal-header__hamburger:hover {
  background: var(--ask-bg);
}

.portal-header__hamburger svg {
  display: block;
}

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
  min-width: 0;
  overflow: hidden;
}

.breadcrumb__item {
  white-space: nowrap;
  color: var(--ask-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.breadcrumb__item:hover {
  color: var(--ask-brand-500);
  text-decoration: none;
}

.breadcrumb__item--current {
  color: var(--ask-text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb__sep {
  color: var(--ask-card-hover);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

/* Header right */
.portal-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* User info + logout in header */
.user-info {
  font-family: var(--ask-font-body);
}

.logout-btn:hover {
  border-color: var(--ask-risk-critical, #ef4444);
  color: var(--ask-risk-critical, #ef4444);
}

/* ===== PAGE HEADER ===== */

.page-header {
  margin-bottom: var(--space-6);
}

.page-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.page-title {
  font-family: var(--ask-font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ask-text);
  letter-spacing: -0.02em;
  margin: 0;
}

.page-subtitle {
  font-family: var(--ask-font-body);
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
  margin-top: var(--space-1);
}

.page-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* ===== METRIC CARDS ===== */

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.metric-card {
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.metric-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.metric-card__value {
  font-family: var(--ask-font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ask-text);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.metric-card__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ask-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ===== PORTAL DATA TABLE ===== */

.portal-table-wrapper {
  background: var(--ask-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ask-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

.portal-table-wrapper .hsb-table thead th {
  background: var(--ask-bg);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  padding: 12px 16px;
}

.portal-table-wrapper .hsb-table tbody td {
  padding: 14px 16px;
}

/* ===== SECTION CARD ===== */

.section-card,
.portal-section-card {
  background: var(--ask-card);
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}



/* ===== ROLE VISIBILITY ===== */
/* Role-based sidebar visibility is now handled entirely by JS in shell.js
   using data-require-role and data-require-org attributes.
   CSS rules removed to avoid conflicts with JS logic. */

/* ===== MOBILE: Sidebar overlay ===== */

@media (max-width: 1024px) {
  .portal__sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }

  .portal__main {
    margin-left: 0;
  }

  .portal-header__hamburger {
    display: flex;
  }

  /* Sidebar open state on mobile */
  .portal--sidebar-open .portal__sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  }

  .portal--sidebar-open .portal__overlay {
    display: block;
  }

}

/* Overlay */
.portal__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 150;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .portal__content {
    padding: var(--space-4);
  }

  .portal__header {
    padding: 0 var(--space-4);
  }

  .page-title {
    font-size: var(--text-xl);
  }

  .metrics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .portal-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .portal-table-wrapper .hsb-table {
    min-width: 600px;
  }
}

@media (max-width: 480px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .breadcrumb {
    font-size: var(--text-xs);
  }
}

/* ===== DARK MODE: Portal Shell ===== */
[data-theme="dark"] .portal__sidebar {
  background: var(--ask-bg);
  border-right: 1px solid var(--ask-border);
}

[data-theme="dark"] .sidebar-item--active {
  background: rgba(85, 202, 117, 0.12);
}

[data-theme="dark"] .metric-card,
[data-theme="dark"] .section-card,
[data-theme="dark"] .portal-table-wrapper {
  background: var(--ask-card);
  border-color: var(--ask-border);
}

[data-theme="dark"] .portal-table-wrapper .hsb-table thead th {
  background: var(--ask-card-hover);
}

[data-theme="dark"] .portal-header__hamburger:hover {
  background: var(--ask-card-hover);
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--ask-text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  font-size: 18px;
}

.theme-toggle:hover {
  background: var(--ask-bg);
  color: var(--ask-text);
}

/* ===== AI FLOATING ACTION BUTTON ===== */
.ai-fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 300;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  border: none;
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
  transition: all var(--duration-fast) var(--ease-spring);
}

.ai-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(139, 92, 246, 0.5);
}

.ai-fab:active {
  transform: scale(0.95);
}

.ai-fab--has-insight {
  animation: ai-fab-pulse 2s ease-in-out infinite;
}

@keyframes ai-fab-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(139, 92, 246, 0.6), 0 0 0 8px rgba(139, 92, 246, 0.1); }
}

.ai-fab__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ask-risk-critical);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ask-bg);
}

/* ===== AI SIDE PANEL ===== */
.ai-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--ai-panel-width);
  z-index: 350;
  background: var(--ask-card);
  border-left: 1px solid var(--ask-border);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
}

.ai-panel--open {
  transform: translateX(0);
}

.ai-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--ask-border);
  flex-shrink: 0;
}

.ai-panel__header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ai-panel__header-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}

.ai-panel__header-title {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--ask-text);
}

.ai-panel__header-actions {
  display: flex;
  gap: var(--space-1);
}

.ai-panel__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ai-panel__input-area {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--ask-border);
  flex-shrink: 0;
}

.ai-panel__input-wrapper {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}

.ai-panel__input {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-md);
  font-family: var(--ask-font-body);
  font-size: var(--text-sm);
  color: var(--ask-text);
  background: var(--ask-input);
  resize: none;
  outline: none;
  transition: border-color var(--duration-fast);
}

.ai-panel__input:focus {
  border-color: var(--ask-purple-500);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.ai-panel__send {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--ask-purple-500);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background var(--duration-fast);
  flex-shrink: 0;
}

.ai-panel__send:hover { background: #7C3AED; }
.ai-panel__send:disabled { opacity: 0.5; cursor: not-allowed; }

.ai-panel__voice-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ask-border);
  background: transparent;
  color: var(--ask-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all var(--duration-fast);
  flex-shrink: 0;
}

.ai-panel__voice-btn:hover {
  background: var(--ask-bg);
  color: var(--ask-text);
}

.ai-panel__voice-btn--active {
  background: var(--ask-rose-500);
  border-color: var(--ask-risk-critical);
  color: var(--ask-risk-critical);
  animation: pulse-ring 1.5s ease infinite;
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* AI Message Bubbles */
.ai-msg {
  max-width: 90%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.6;
  word-wrap: break-word;
}

.ai-msg--user {
  align-self: flex-end;
  background: var(--ask-brand-500);
  color: #fff;
  border-bottom-right-radius: var(--radius-xs);
}

.ai-msg--assistant {
  align-self: flex-start;
  background: #4C1D95; /* a11y: deep purple (purple-900) so white text clears AA */
  color: var(--ask-text);
  border: 1px solid var(--ask-purple-500);
  border-bottom-left-radius: var(--radius-xs);
}

.ai-msg__meta {
  font-size: var(--text-xs);
  color: var(--ask-text-tertiary);
  margin-top: var(--space-1);
}

/* Quick Replies */
.ai-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.ai-quick-reply {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid rgba(139,92,246,0.4);
  background: rgba(139,92,246,0.15);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast);
  white-space: nowrap;
}

.ai-quick-reply:hover {
  background: var(--ask-purple-500);
  color: #fff;
  border-color: var(--ask-purple-500);
}

/* ===== COMMAND PALETTE ===== */
.cmd-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(rgba(0,0,0,0.5));
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
}

.cmd-palette-overlay.open {
  display: flex;
}

.cmd-palette {
  width: 560px;
  max-width: 90vw;
  max-height: 60vh;
  background: var(--ask-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--ask-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cmd-slide-down var(--duration-fast) var(--ease-out);
}

@keyframes cmd-slide-down {
  from { opacity: 0; transform: translateY(-20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cmd-palette__input-area {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--ask-border);
}

.cmd-palette__icon {
  color: var(--ask-text-tertiary);
  font-size: 20px;
  flex-shrink: 0;
}

.cmd-palette__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-lg);
  font-family: var(--ask-font-body);
  color: var(--ask-text);
  outline: none;
}

.cmd-palette__input::placeholder {
  color: var(--ask-text-tertiary);
}

.cmd-palette__shortcut {
  font-size: var(--text-xs);
  color: var(--ask-text-tertiary);
  padding: 2px 6px;
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-xs);
  font-family: var(--ask-font-mono);
  flex-shrink: 0;
}

.cmd-palette__results {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

.cmd-palette__group-title {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ask-text-tertiary);
}

.cmd-palette__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-instant);
}

.cmd-palette__item:hover,
.cmd-palette__item--selected {
  background: var(--ask-bg);
}

.cmd-palette__item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ask-text-secondary);
  font-size: 16px;
  flex-shrink: 0;
}

.cmd-palette__item-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--ask-text);
}

.cmd-palette__item-hint {
  font-size: var(--text-xs);
  color: var(--ask-text-tertiary);
}

.cmd-palette__footer {
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--ask-border);
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--ask-text-tertiary);
}

/* ===== AI BRIEF CARD (Dashboard) ===== */
.ai-brief {
  background: var(--ask-purple-500);
  border: 1px solid var(--ask-purple-500);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
}

.ai-brief::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8B5CF6, var(--ask-brand-500), #8B5CF6);
  background-size: 200% 100%;
  animation: ai-shimmer 3s ease infinite;
}

.ai-brief__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ai-brief__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.ai-brief__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ask-purple-500);
}

.ai-brief__body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ask-text);
  margin-bottom: var(--space-4);
}

.ai-brief__actions {
  display: flex;
  gap: var(--space-2);
}

/* ===== RESPONSIVE: AI Panel ===== */
@media (max-width: 768px) {
  .ai-panel {
    width: 100%;
  }

  .ai-fab {
    bottom: var(--space-4);
    right: var(--space-4);
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .cmd-palette {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    max-height: 80vh;
  }

  .cmd-palette-overlay {
    padding-top: 0;
    align-items: flex-start;
  }
}

/* ===== PRINT ===== */
@media print {
  .portal__sidebar,
  .portal__header,
  .portal__overlay,
  .ai-fab,
  .ai-panel,
  .cmd-palette-overlay {
    display: none !important;
  }

  .portal__main {
    margin-left: 0 !important;
  }
}

/* ============================================================
   MERGED: portal-table.css — Grid table system
   ============================================================ */
/* ── Filter row ────────────────────────────────────────── */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  align-items: center;
  margin-bottom: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem) 0;
}

.filter-row .hsb-input--sm,
.filter-row .hsb-select--sm {
  min-width: 140px;
  max-width: 220px;
}

.filter-row .pt-search {
  min-width: 200px;
  flex: 1;
  max-width: 320px;
}

/* ── Sort headers ──────────────────────────────────────── */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th.sortable:hover {
  background: var(--ask-card-hover, var(--ask-bg-hover, rgba(0,0,0,0.04)));
}

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sort-icon { display: inline-flex; }

/* ── Grid row animation ────────────────────────────────── */
.grid-row {
  animation: fadeIn 0.2s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MERGED: chat.css — AI chat panel
   ============================================================ */
/* =========================================================
   Chat Page — chat.css
   Three-panel layout for portal chat conversations.
   ========================================================= */

/* ── Layout ──────────────────────────────────────────────── */
.chat-layout {
  display: flex;
  height: calc(100vh - 130px);
  border: 1px solid var(--ask-border, var(--ask-border));
  border-radius: var(--ask-radius, var(--radius-md));
  background: var(--ask-card, var(--ask-card));
  overflow: hidden;
}

/* ── Panels ──────────────────────────────────────────────── */
.chat-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-panel--left {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--ask-border, var(--ask-border));
  background: var(--ask-bg, var(--ask-bg));
}

.chat-panel--center {
  flex: 1;
  min-width: 0;
}

.chat-panel--right {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--ask-border, var(--ask-border));
  background: var(--ask-bg, var(--ask-bg));
}

.chat-panel__header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ask-border);
  flex-shrink: 0;
}

.chat-panel__title {
  font-family: var(--ask-font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ask-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Search & Filters ────────────────────────────────────── */
.chat-search {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--ask-font-body);
  background: var(--ask-card);
  outline: none;
  transition: border-color 0.15s;
}

.chat-search:focus {
  border-color: var(--ask-blue-500);
  box-shadow: 0 0 0 2px var(--ask-blue-600);
}

.chat-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  border-bottom: 1px solid #e9ecef;
}

.chat-tab {
  padding: 0.25rem 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-family: var(--ask-font-body);
  color: var(--ask-text-secondary);
  transition: all 0.15s;
}

.chat-tab:hover {
  background: var(--ask-bg);
}

.chat-tab.active {
  background: var(--ask-brand-500, #2c6fad);
  color: #0F172A;
}

.chat-filter-row {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.chat-filter-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--ask-font-body);
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-full);
  background: var(--ask-card);
  color: var(--ask-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.chat-filter-btn:hover {
  border-color: var(--ask-blue-500);
  color: var(--ask-blue-text);
}

.chat-filter-btn--active {
  background: #2563EB;
  border-color: var(--ask-blue-500);
  color: #fff;
}

/* ── Conversation List ───────────────────────────────────── */
.chat-conv-list {
  flex: 1;
  overflow-y: auto;
}

.chat-conv-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ask-bg);
  cursor: pointer;
  transition: background 0.12s;
}

.chat-conv-item:hover {
  background: var(--ask-bg);
}

.chat-conv-item--active {
  background: var(--ask-blue-600);
  border-left: 3px solid var(--ask-blue-500);
}

.chat-conv-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--ask-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ask-font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ask-text-secondary);
  flex-shrink: 0;
}

.chat-conv-body {
  flex: 1;
  min-width: 0;
}

.chat-conv-name {
  font-family: var(--ask-font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ask-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-conv-preview {
  font-size: var(--text-xs);
  color: var(--ask-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.chat-conv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.chat-conv-time {
  font-size: 11px;
  color: var(--ask-text-secondary);
  white-space: nowrap;
}

.chat-conv-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--ask-blue-500);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 0 4px;
}

/* ── Channel Badges ──────────────────────────────────────── */
.chat-channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.chat-channel-badge--whatsapp {
  background: #dcfce7;
  color: #15803d;
}

.chat-channel-badge--telegram {
  background: #dbeafe;
  color: #1d4ed8;
}

.chat-channel-badge--mobile {
  background: #ede9fe;
  color: #7c3aed;
}

.chat-channel-badge--portal {
  background: #fef3c7;
  color: #b45309;
}

.chat-channel-badge--web {
  background: var(--ask-bg);
  color: var(--ask-text-secondary);
}

/* ── Escalation Badge ────────────────────────────────────── */
.chat-escalation-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--ask-orange-500);
  color: #92400e;
}

.chat-escalation-badge--critical {
  background: var(--ask-rose-500);
  color: var(--ask-risk-critical);
}

/* ── Thread Header ───────────────────────────────────────── */
.chat-thread-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ask-border);
  flex-shrink: 0;
}

.chat-back-btn {
  display: none;
  padding: var(--space-1);
  border: none;
  background: none;
  color: var(--ask-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.chat-back-btn:hover {
  background: var(--ask-bg);
}

.chat-thread-info {
  flex: 1;
  min-width: 0;
}

.chat-thread-name {
  font-family: var(--ask-font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--ask-text);
}

.chat-thread-channel {
  margin-left: var(--space-2);
}

.chat-context-toggle {
  padding: var(--space-2);
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-sm);
  background: var(--ask-card);
  color: var(--ask-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.chat-context-toggle:hover {
  border-color: var(--ask-blue-500);
  color: var(--ask-blue-text);
}

/* ── Thread Empty State ──────────────────────────────────── */
.chat-thread-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--ask-text-secondary);
  font-size: var(--text-sm);
}

/* ── Messages ────────────────────────────────────────────── */
.chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-messages__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.chat-msg--received {
  align-self: flex-start;
}

.chat-msg--sent {
  align-self: flex-end;
}

.chat-msg--bot {
  align-self: flex-start;
}

.chat-msg__bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-msg--received .chat-msg__bubble {
  background: var(--ask-bg);
  color: var(--ask-text);
  border-bottom-left-radius: 4px;
}

.chat-msg--sent .chat-msg__bubble {
  background: var(--ask-blue-500);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-msg--bot .chat-msg__bubble {
  background: #e0f2f1;
  color: #004d40;
  border-bottom-left-radius: 4px;
}

.chat-msg__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
  font-size: 11px;
  color: var(--ask-text-secondary);
}

.chat-msg--sent .chat-msg__meta {
  justify-content: flex-end;
}

.chat-msg--held .chat-msg__bubble {
  border: 2px solid var(--ask-orange-500);
  position: relative;
}

.chat-msg__held-label {
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
  background: var(--ask-orange-500);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.chat-voice-badge {
  font-size: 0.7rem;
  color: #6c757d;
  margin-right: 0.25rem;
}

/* ── Typing Indicator ────────────────────────────────────── */
.chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-4);
}

.chat-typing__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ask-card-hover);
  animation: chat-typing-bounce 1.4s infinite;
}

.chat-typing__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-typing__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ── Compose ─────────────────────────────────────────────── */
.chat-compose {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--ask-border);
  flex-shrink: 0;
}

.chat-compose__input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ask-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--ask-font-body);
  resize: none;
  max-height: 120px;
  outline: none;
  transition: border-color 0.15s;
}

.chat-compose__input:focus {
  border-color: var(--ask-blue-500);
  box-shadow: 0 0 0 2px var(--ask-blue-600);
}

.chat-compose__send {
  padding: var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--ask-blue-500);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.chat-compose__send:hover:not(:disabled) {
  background: var(--ask-blue-600);
}

.chat-compose__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── WebSocket Status ────────────────────────────────────── */
.chat-ws-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--ask-text-secondary);
}

.chat-ws-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.chat-ws-dot--connected {
  background: var(--ask-brand-500);
}

.chat-ws-dot--connecting {
  background: var(--ask-orange-500);
  animation: chat-ws-pulse 1.5s infinite;
}

.chat-ws-dot--disconnected {
  background: var(--ask-text-tertiary);
}

@keyframes chat-ws-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Patient Context (Right Panel) ───────────────────────── */
.chat-context-close {
  padding: var(--space-1);
  border: none;
  background: none;
  color: var(--ask-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: none;
}

.chat-context-close:hover {
  background: var(--ask-bg);
}

.chat-panel--right .chat-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-context-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.chat-context-section {
  margin-bottom: var(--space-5);
}

.chat-context-section__title {
  font-family: var(--ask-font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--ask-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.chat-context-field {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--ask-bg);
}

.chat-context-field__label {
  color: var(--ask-text-secondary);
}

.chat-context-field__value {
  color: var(--ask-text);
  font-weight: 500;
}

.chat-context-risk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.chat-context-risk--normal   { background: var(--ask-brand-600); color: var(--ask-brand-600); }
.chat-context-risk--mild     { background: var(--ask-orange-500); color: #92400e; }
.chat-context-risk--elevated { background: #fef3c7; color: #92400e; }
.chat-context-risk--critical { background: var(--ask-rose-500); color: var(--ask-risk-critical); }

/* ── Context Actions (Message Patient Button) ──────────────── */
.chat-context-actions {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--ask-border);
  flex-shrink: 0;
}

.chat-msg-btn {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--ask-blue-500);
  color: #fff;
  font-size: var(--text-sm);
  font-family: var(--ask-font-body);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.chat-msg-btn:hover {
  background: var(--ask-blue-600);
}

.chat-msg-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Empty State ─────────────────────────────────────────── */
.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--ask-text-secondary);
  font-size: var(--text-sm);
  text-align: center;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  .chat-panel--right {
    display: none;
  }

  .chat-panel--right.chat-panel--visible {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    box-shadow: var(--shadow-lg);
  }

  .chat-context-close {
    display: block;
  }

  .chat-layout {
    position: relative;
  }
}

@media (max-width: 768px) {
  .chat-layout {
    flex-direction: column;
    height: calc(100vh - 110px);
  }

  .chat-panel--left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--ask-border);
  }

  .chat-panel--left.chat-panel--hidden {
    display: none;
  }

  .chat-panel--center.chat-panel--hidden {
    display: none;
  }

  .chat-back-btn {
    display: block;
  }

  .chat-panel--center {
    flex: 1;
  }
}

/* --- Report Verification Page --- */
.ask-verify-page {
  font-family: var(--ask-font-body);
  background: linear-gradient(135deg, var(--ask-purple-500) 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ask-verify-card { background: #fff; border-radius: var(--ask-radius); box-shadow: 0 20px 60px rgba(0,0,0,0.15); max-width: 560px; width: 100%; overflow: hidden; }
.ask-verify-header { background: var(--ask-blue-600); color: #fff; padding: 24px 32px; }
.ask-verify-header h1 { font-family: var(--ask-font-display); font-size: 20px; font-weight: 700; }
.ask-verify-header p { font-size: 13px; opacity: 0.85; margin-top: 4px; }
.ask-verify-badge { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-top: 10px; }
.ask-verify-badge--verified { background: #dcfce7; color: #166534; }
.ask-verify-badge--not-found { background: #fef2f2; color: #991b1b; }
.ask-verify-body { padding: 28px 32px; }
.ask-verify-section { margin-bottom: 20px; }
.ask-verify-section-title { font-family: var(--ask-font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; margin-bottom: 10px; border-bottom: 1px solid #f3f4f6; padding-bottom: 6px; }
.ask-verify-row { display: flex; justify-content: space-between; padding: 6px 0; }
.ask-verify-row .label { color: #6b7280; font-size: 14px; }
.ask-verify-row .value { font-family: var(--ask-font-body); font-weight: 600; color: #111827; font-size: 14px; text-align: right; }
.ask-verify-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-family: var(--ask-font-body); font-size: 13px; }
.ask-verify-table th { background: #f9fafb; padding: 8px 10px; text-align: left; font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb; }
.ask-verify-table td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; }
.ask-verify-table .high { color: var(--ask-risk-critical); font-weight: 600; }
.ask-verify-table .normal { color: var(--ask-brand-500); }
.ask-verify-footer { padding: 16px 32px; background: #f9fafb; text-align: center; font-size: 12px; color: #6b7280; border-top: 1px solid #e5e7eb; }
.ask-verify-shield { font-size: 40px; text-align: center; margin-bottom: 12px; }
.ask-verify-not-found { text-align: center; padding: 40px 20px; color: #6b7280; }
.ask-verify-not-found h2 { color: #991b1b; margin-bottom: 8px; }

/* ────────────────────── Workflow Timeline Stepper ──────────────────────
   Acko-style vertical stepper. Drives every HSB workflow timeline UI.
   See docs/architecture/HSB-Workflow-Timeline-UI-2026.md §5.2.
*/
.ask-timeline {
  background: var(--ask-card-bg, #1f2937);
  border: 1px solid var(--ask-border, rgba(148, 163, 184, .25));
  border-radius: 16px;
  padding: 16px;
  color: var(--ask-text, #f1f5f9);
}
.ask-timeline__loading,
.ask-timeline__error {
  text-align: center;
  padding: 24px 8px;
  color: var(--ask-text-secondary, #94a3b8);
  font-size: 13px;
}
.ask-timeline__error {
  color: var(--ask-risk-critical, #ef4444);
}
.ask-timeline__header {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--ask-border, rgba(148, 163, 184, .15));
}
.ask-timeline__headline {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.ask-timeline__subhead {
  font-size: 13px;
  color: var(--ask-text-secondary, #94a3b8);
}

.ask-timeline__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  position: relative;
}
.ask-timeline__row--clickable {
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s;
}
.ask-timeline__row--clickable:hover {
  background: rgba(148, 163, 184, .06);
}
.ask-timeline__row--clickable:focus-visible {
  outline: 2px solid var(--ask-blue-500, #3b82f6);
  outline-offset: 2px;
}

.ask-timeline__indicator {
  width: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-top: 2px;
}
.ask-timeline__circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ask-text-secondary, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}
.ask-timeline__circle--done {
  background: var(--ask-brand-500, #22c55e);
  border-color: var(--ask-brand-500, #22c55e);
  color: #fff;
}
.ask-timeline__circle--in_progress {
  background: var(--ask-blue-500, #3b82f6);
  border-color: var(--ask-blue-500, #3b82f6);
}
.ask-timeline__circle--in_progress .ask-timeline__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: ask-timeline-pulse 1.4s ease-in-out infinite;
}
.ask-timeline__circle--blocked {
  border-color: var(--ask-risk-critical, #ef4444);
  color: var(--ask-risk-critical, #ef4444);
}
.ask-timeline__circle--skipped {
  border-style: dashed;
  border-color: var(--ask-text-secondary, #94a3b8);
}
.ask-timeline__circle--pending {
  border-color: rgba(148, 163, 184, .4);
}
.ask-timeline__check {
  font-size: 14px;
  font-weight: 700;
}
.ask-timeline__bang {
  font-size: 14px;
  font-weight: 700;
}

.ask-timeline__connector {
  width: 2px;
  flex: 1;
  min-height: 36px;
  margin: 2px 0;
  background: rgba(148, 163, 184, .25);
}
.ask-timeline__connector--done {
  background: var(--ask-brand-500, #22c55e);
  opacity: 0.6;
}
.ask-timeline__connector--skipped {
  background: repeating-linear-gradient(
    to bottom,
    rgba(148, 163, 184, .4) 0px,
    rgba(148, 163, 184, .4) 4px,
    transparent 4px,
    transparent 8px
  );
}

.ask-timeline__content {
  flex: 1;
  padding-left: 0;
  padding-bottom: 24px;
  min-width: 0;
}
.ask-timeline__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ask-timeline__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ask-text, #f1f5f9);
}
.ask-timeline__chevron {
  color: var(--ask-text-secondary, #94a3b8);
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}
.ask-timeline__desc {
  font-size: 12px;
  color: var(--ask-text-secondary, #94a3b8);
  margin-top: 2px;
}
.ask-timeline__meta {
  font-size: 11px;
  color: var(--ask-text-secondary, #94a3b8);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

@keyframes ask-timeline-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.85); }
}

/* Light-mode override */
[data-theme="light"] .ask-timeline {
  background: #ffffff;
  border-color: rgba(15, 23, 42, .08);
  color: #0f172a;
}
[data-theme="light"] .ask-timeline__row--clickable:hover {
  background: rgba(15, 23, 42, .04);
}

/* ── Tabs (ask-tabs) ─────────────────────────────────────────────── */
.ask-tabs {
  display: flex;
  gap: var(--space-1, 4px);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ask-card-hover, rgba(255, 255, 255, .08));
  margin-bottom: var(--space-4, 16px);
}
.ask-tabs__btn {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ask-text-secondary, #94a3b8);
  font-size: var(--text-sm, 14px);
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.ask-tabs__btn:hover {
  color: var(--ask-text, #e2e8f0);
}
.ask-tabs__btn--active {
  color: var(--ask-brand-500, #19c2a8);
  border-bottom-color: var(--ask-brand-500, #19c2a8);
}

/* Hidden tab panels */
.ask-hidden {
  display: none !important;
}

/* Tab panel body — .ask-section has padding:0, so panels self-pad. */
.ask-tab-panel {
  padding: 20px;
}

/* Toolbar row (filter + action button above a table) */
.ask-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
  margin-bottom: var(--space-4, 16px);
}
.ask-toolbar > .ask-btn {
  margin-left: auto;
}

.ask-hint {
  color: var(--ask-text-secondary, #94a3b8);
  font-size: 13px;
  margin: 0;
}
.ask-h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ask-text, #e2e8f0);
  margin: 24px 0 12px;
}