/* ═══════════════════════════════════════════════
   BluQube — Dashboard Styles v1.0
   Extracted from dashboard.html inline styles
   Loaded after /static/dashboard/tailwind.css; design-system.css loads
   after this file (dashboard.html:7-10)
   ═══════════════════════════════════════════════ */

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; }
:root { --sidebar-w: 260px; }
.min-h-0 { min-height: 0; }
.phase-dot-pulse { animation: pulse 2s infinite; }
.scroll-panel-600 { max-height: 600px; }
.scroll-panel-500 { max-height: 500px; }
.hero-orb-top-right { transform: translate(30%, -30%); }
.hero-orb-bottom-left { transform: translate(-20%, 20%); }

/* ── Base utilities. Declared BEFORE the responsive blocks below: same
   specificity, so source order decides — a base rule placed after its
   sm:/lg: counterpart silently wins at every width (UI-BETA-GATE D-011:
   .w-44 here shadowed .lg\:w-72, pinning the top-bar search box to 176px
   and truncating its placeholder). ── */
.max-w-\[100px\] { max-width: 100px; }
.max-w-\[140px\] { max-width: 140px; }
.max-w-\[200px\] { max-width: 200px; }
.w-44 { width: 11rem; }

/* ── Responsive Utilities (not emitted by Tailwind — JS template strings) ── */
@media (min-width:375px) {
  .xs\:h-14 { height: 3.5rem; }
  .xs\:px-2 { padding-left: .5rem; padding-right: .5rem; }
  .xs\:py-1 { padding-top: .25rem; padding-bottom: .25rem; }
  .xs\:text-sm { font-size: .875rem; line-height: 1.25rem; }
  .xs\:text-xs { font-size: .75rem; line-height: 1rem; }
  .xs\:max-w-sm { max-width: 16rem; }
  .xs\:w-48 { width: 12rem; }
  .xs\:gap-2 { gap: .5rem; }
  .xs\:p-4 { padding: 1rem; }
  .xs\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@media (min-width:640px) {
  .sm\:h-16 { height: 4rem; }
  .sm\:px-3 { padding-left: .75rem; padding-right: .75rem; }
  .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .sm\:py-2 { padding-top: .5rem; padding-bottom: .5rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-sm { font-size: .875rem; line-height: 1.25rem; }
  .sm\:max-w-xs { max-width: 20rem; }
  .sm\:w-56 { width: 14rem; }
}
@media (min-width:768px) {
  .md\:h-16 { height: 4rem; }
  .md\:px-3 { padding-left: .75rem; padding-right: .75rem; }
  .md\:py-2 { padding-top: .5rem; padding-bottom: .5rem; }
  .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .md\:text-sm { font-size: .875rem; line-height: 1.25rem; }
  .md\:max-w-md { max-width: 28rem; }
  .md\:w-64 { width: 16rem; }
  .md\:gap-3 { gap: .75rem; }
}
@media (min-width:1024px) {
  .lg\:w-72 { width: 18rem; }
  .lg\:max-w-md { max-width: 28rem; }
}

/* ── Compass Brand Sidebar ── */
.sidebar-navy { background-color: #193962 !important; }
.sidebar-navy .sidebar-logo { border-bottom-color: rgba(255,255,255,0.08) !important; }
.compass-logo-glow { filter: drop-shadow(0 0 8px rgba(78,226,208,0.3)); }
.sidebar-user-avatar { background: #4EE2D0; color: #193962; }
.sidebar-user-name { color: #f1f5f9; }
.sidebar-user-role { color: rgba(255,255,255,0.45); }
/* UI-BETA-GATE D-041: the anonymous-state "Sign in" link sits inside
   .sidebar-user-role but does NOT inherit its colour — the global
   `a { color: var(--color-primary-700) }` in design-system.css paints it
   #334e68, and the sidebar is navy in BOTH themes (.sidebar-navy is a fixed
   #193962, not a token), so the link remains legible in light and dark.
   Raised to Vivid Teal (#4EE2D0, the v11 accent step): 7.25:1 on the navy,
   so it clears AA in both themes from
   one rule instead of a dark counterpart that would only fix half of it.
   The hover rule keeps the existing `hover:text-white` affordance, which the
   higher-specificity base rule would otherwise swallow. */
.sidebar-navy .sidebar-user-role a { color: #4EE2D0; }
.sidebar-navy .sidebar-user-role a:hover { color: #ffffff; }
.sidebar-navy .nav-item { color: rgba(255,255,255,0.65); }
.sidebar-navy .nav-item:hover { background-color: rgba(255,255,255,0.08) !important; color: #f1f5f9 !important; }
/* NEXUS-DESIGN-JOBS-086: the active door must be visible on the Ink Blue
   sidebar. The old rule painted #193962 (the sidebar's own colour) on the
   active item — a zero-delta door. Now: bg-white/10 (matching hover) + a
   3px brand-teal left border; padding-left compensates the 3px border so
   the item's content does not shift when the active door changes. The
   hover rule restores the affordance on the active door, which the old
   inline-style background used to swallow. */
.sidebar-navy .nav-item[aria-current="page"] { background-color: rgba(255,255,255,0.10) !important; border-left: 3px solid var(--color-brand-vivid-teal); padding-left: 9px; color: #fff !important; font-weight: 600; }
.sidebar-navy .nav-item[aria-current="page"]:hover { background-color: rgba(255,255,255,0.16) !important; }
.sidebar-navy .nav-section-title { color: rgba(255,255,255,0.35) !important; }
.sidebar-navy .sidebar-user { border-top-color: rgba(255,255,255,0.08) !important; }

/* UI-CHROME-001: the nav scroll container clipped its last item mid-glyph
   on short viewports (owner Firefox is ~625 CSS px tall; at ≤620 the list
   overflows and the item straddling the container's bottom edge was sliced
   through its text — and the footer's border-t sits exactly on that clip
   line, so the slice read as a strike-through, seen through "Analytics"
   on multiple pages). A bottom mask fade dissolves any straddling row into
   the navy before the border instead of slicing glyphs: overflow stays
   scrollable, nav text keeps its size, and the border never crosses text.
   The 14px fade sits inside the container's own bottom padding zone, so a
   fully-visible last item (30px clear at 1154x625) is untouched.
   The scrollbar was the unstyled browser default — thick gray on navy in
   Firefox/Windows Chrome. Thin + translucent white reads quiet on the
   fixed Ink Blue sidebar in BOTH themes (the sidebar is #193962 in light and
   dark, so one rule covers both). Non-text control: the thumb is a
   redundant affordance (wheel/keyboard scroll regardless), styled with
   color, never opacity on text. */
.sidebar-navy nav.flex-1 {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), rgba(0,0,0,0.15) 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), rgba(0,0,0,0.15) 100%);
}
.sidebar-navy nav.flex-1::-webkit-scrollbar { width: 6px; }
.sidebar-navy nav.flex-1::-webkit-scrollbar-track { background: transparent; }
.sidebar-navy nav.flex-1::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }

/* ── BluQube Case Workspace hero ──
 * The case identity is the screen's anchor: Ink Blue for authority, Soft
 * Off-White for calm working surfaces, and Vivid Teal only for status/action.
 * This is a flat operational surface, not a decorative glass treatment. */
.case-overview-hero {
  overflow: hidden;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.case-hero-surface {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: 32px;
  align-items: stretch;
  padding: 32px;
  background: #193962;
  color: #F7F8F5;
}
.case-hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.case-hero-topline {
  display: flex;
  justify-content: flex-end;
  min-height: 28px;
}
.case-hero-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #4EE2D0;
  color: #193962;
  font-size: 12px;
  font-weight: 700;
}
.case-hero-title {
  margin: 12px 0 8px;
  color: #F7F8F5;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.case-hero-summary {
  max-width: 62ch;
  margin: 0;
  color: #e0e8f0;
  font-size: 14px;
  line-height: 1.6;
}
.case-hero-progress {
  align-self: end;
  padding: 20px;
  border: 1px solid rgba(247, 248, 245, 0.24);
  border-radius: 6px;
  background: #12294a;
}
.case-hero-progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: #e0e8f0;
  font-size: 12px;
  font-weight: 700;
}
.case-hero-progress-label strong {
  color: #F7F8F5;
  font-size: 24px;
  line-height: 1;
}
.case-hero-progress-track {
  height: 8px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #071321;
}
.case-hero-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #4EE2D0;
}
.case-hero-progress p {
  margin: 12px 0 0;
  color: #e0e8f0;
  font-size: 12px;
}
.case-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 20px 32px 24px;
  background: #ffffff;
}
.case-hero-meta-item {
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid #dcdcdc;
}
.case-hero-meta-item span,
.case-hero-meta-item strong {
  display: block;
}
.case-hero-meta-item span {
  color: #555753;
  font-size: 12px;
  line-height: 1.4;
}
.case-hero-meta-item strong {
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: #193962;
  font-size: 14px;
  line-height: 1.4;
}
html.dark .case-overview-hero {
  border-color: #193962;
  background: #0c1c30;
}
html.dark .case-hero-meta {
  background: #0c1c30;
}
html.dark .case-hero-meta-item {
  border-top-color: #193962;
}
html.dark .case-hero-meta-item span {
  color: #c4d0e0;
}
html.dark .case-hero-meta-item strong {
  color: #F7F8F5;
}
@media (max-width: 767px) {
  .case-hero-surface {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
  .case-hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px 24px 20px;
  }
}

/* ── Dark Mode Overrides ── */
html.dark .dark\:bg-gray-900 { background-color: #111827; }
html.dark .dark\:bg-gray-800 { background-color: #1f2937; }
html.dark .dark\:bg-gray-750 { background-color: #1a2234; }
html.dark .dark\:border-gray-700 { border-color: #374151; }
html.dark .dark\:text-gray-100 { color: #f9fafb; }
html.dark .dark\:text-gray-200 { color: #e5e7eb; }
html.dark .dark\:text-gray-300 { color: #d1d5db; }
html.dark .dark\:text-gray-400 { color: #9ca3af; }

/* ── Sidebar Transitions ── */
.sidebar {
  transition: transform 0.3s cubic-bezier(0.23,1,0.32,1);
}
/* design-system.css loads after this file and sets .sidebar { width:
   var(--sidebar-width) } = 280px, which overrides the 260px width the
   dashboard layout and JS use for the content offset (ml-[260px],
   mainContent.style.marginLeft) — the fixed sidebar then covered the
   left 20px of the top bar and breadcrumb (UI-BETA-GATE D-011).
   Two-class selector keeps this dashboard rule ahead of that generic
   component rule regardless of load order. */
.sidebar.sidebar-navy {
  width: var(--sidebar-w);
}
/* UI-BETA-GATE D-014: at the intended 260px width the nav label slot is
   147px (button 203 − px-3×2 − icon 20 − gap 12) while "Evidence
   Management" needs 151px, so it wrapped to 2 lines and broke the row
   rhythm. Trimming 2px each off horizontal padding and icon gap gives a
   153px slot; nowrap guarantees a single line for every label. The
   sidebar stays at the 260px design-system spec. */
.sidebar .nav-item {
  padding-left: 10px;
  padding-right: 10px;
  gap: 10px;
}
.sidebar .nav-text {
  white-space: nowrap;
}
/* DESIGN-JOBS-010 / JOBS-014-R3: the page name is the header's only visible
   title on the deduped module pages. Keep its flex basis content-sized on
   desktop so the case selector and search field give up width before the
   page identity does; the h1 wraps instead of silently ellipsizing. */
.page-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
header[role="banner"],
header[role="banner"] button,
header[role="banner"] input,
header[role="banner"] select {
  font-family: Arial, Helvetica, sans-serif;
}
.page-title-wrap h1 {
  white-space: normal;
  overflow-wrap: anywhere;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: -0.01em;
  margin: 0;
}
#caseSelector,
#globalSearch,
#apiConnectionStatus {
  font-family: Arial, Helvetica, sans-serif;
}
#caseSelector {
  font-size: 14px;
  line-height: 1.25rem;
  font-weight: 700;
}
#globalSearch {
  font-size: 14px;
  line-height: 1.25rem;
  font-weight: 400;
}
#apiConnectionStatus {
  font-size: 12px;
  line-height: 1rem;
}
@media (min-width:1024px) {
  .page-title-wrap {
    flex: 0 0 auto;
    flex-shrink: 0;
  }
  .page-title-wrap h1 {
    white-space: nowrap;
    overflow-wrap: normal;
  }
}
/* UI-CHROME-002 / JOBS-014-R3: keep the case selector and search field
   shrinkable at the supported desktop width without collapsing either into
   an unusable sliver. */
#caseSelector { min-width: 0; }
#globalSearch { min-width: 10rem; }
/* UI-CHROME-003: the shared top bar has more fixed controls than fit beside
   the 260px rail at tablet/compact desktop widths. Wrap before the search
   input can overflow underneath the action cluster; this applies uniformly
   to every page because all views share this header. */
@media (min-width:640px) and (max-width:1199px) {
  header[role="banner"] {
    flex-wrap: wrap;
    height: auto;
    min-height: 3.5rem;
    row-gap: 0.25rem;
    padding-bottom: 0.5rem;
  }
  header[role="banner"] > .hidden.sm\\:flex {
    flex: 1 1 12rem;
  }
  #globalSearch { min-width: 10rem; }
}
/* DESIGN-JOBS-010: breadcrumbs are the defined give-way element. Keep the
   current page name readable in the header while the crumb row yields space
   through a single-line ellipsis. */
#breadcrumb { min-width: 0; }
#breadcrumb nav {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
#breadcrumb nav ol {
  min-width: 0;
  flex-wrap: nowrap;
}
#breadcrumb nav li {
  min-width: 0;
}
#breadcrumb nav [aria-current="page"] {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* UI-BETA-GATE D-028: at 375px the top bar's fixed content (hamburger,
   title, case chip, search, icon cluster) exceeds the viewport, so the
   action cluster was crushed to 14px buttons whose icons widened the
   document (scrollWidth 411-490 on every view). Below sm the top bar
   wraps instead: the icon cluster drops to its own row (ml-auto on the
   cluster keeps it right-aligned; no-op at sm+ where the title's grow
   already fills the row) and the mobile case menu anchors below the
   taller header. Verified live at 375x812: all views scrollWidth 375. */
@media (max-width:639px) {
  header[role=banner] { flex-wrap: wrap; height: auto; min-height: 3.5rem; row-gap: 0.25rem; padding-bottom: 0.5rem; }
  #mobileCaseMenu { top: calc(100% + 0.5rem); }
}
@media (min-width:1024px) {
  .sidebar { transform: translateX(0); }
  .sidebar.collapsed { transform: translateX(-100%); }
  .sidebar-backdrop { pointer-events: none; visibility: hidden; }
  .sidebar-backdrop.open { pointer-events: auto; visibility: visible; }
}
@media (max-width:1023px) {
  .sidebar { position: fixed; z-index: 50; transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop:not(.hidden) { display: block; }
  .main-content { margin-left: 0 !important; }
}

/* ── Page Transitions ── */
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.2s ease-out; }
/* NEXUS-DESIGN-JOBS-T3 (§6c): the AI analyst FAB is fixed bottom-right on
   every page (56px + 24px inset). Page content used to scroll under its
   footprint — the Admin training card's "Record completion" button sat
   beneath the mic. Reserve the FAB's corner so the last row of any page
   clears it; the page's own p-4/p-6 padding is not enough. */
.page.active { padding-bottom: 6.5rem; }

/* UI-CHROME-003: the Clinical Analyst FAB is fixed at bottom/right 24px and
   is 56px tall, so it covers the bottom-right 80px band of the viewport.
   On #forencot the pattern cards run the full content width and the app
   footer sits below them, so at max scroll the FAB sat permanently on top
   of content (owner saw it over the "Timely on Paper, Late in Reality"
   card; measured at max scroll the footer's bottom-right corner was under
   it too). No FAB-clearance convention existed in the codebase, so this is
   the convention: the scrollable content area reserves the FAB band below
   the footer (footer mb-4 + 72px = 88px > the 80px band). Content can
   always be scrolled clear of the FAB; nothing is permanently hidden. */
.main-content { padding-bottom: 4.5rem; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Phase Tracker ── */
.phase-dot { width: 28px; height: 28px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 8px; margin: -8px; }
.phase-line { flex: 1; min-width: 8px; height: 2px; }

/* PIPELINE-PHASES: the quiet note under the phase tracker that names the
   phases which run in the pipeline but have no screen of their own. Quiet by
   colour, never by opacity — the D-023/D-042 "no opacity muting" precedent
   applies: dimming text is how contrast failures get shipped here.
   Both values are design-system tokens measured against the surface the
   tracker card actually paints (bg-white #ffffff / dark:bg-gray-800
   #1f2937):
     light  --color-gray-600 #475569 on #ffffff  = 7.58:1
     dark   --color-gray-400 #94a3b8 on #1f2937  = 5.72:1
   Both clear AA (4.5:1) for small text in their own theme. The link inside
   the note is measured the same way: --color-primary-700 #334e68 on white
   = 8.64:1, --color-primary-300 #9fb3c8 on #1f2937 = 6.82:1, and it carries
   an underline so the affordance is not colour-only. Recomputed on every run
   by tests/unit/test_pipeline_only_phases.py. */
.phase-only-note { color: var(--color-gray-600); }
html.dark .phase-only-note { color: var(--color-gray-400); }
.phase-only-note a { color: var(--color-primary-700); text-decoration: underline; }
html.dark .phase-only-note a { color: var(--color-primary-300); }

/* ── Heatmap ── */
.heatmap-cell { transition: transform 0.15s ease; cursor: pointer; }
.heatmap-cell:hover { transform: scale(1.05); z-index: 10; }

/* ── Timeline ── */
.timeline-line { position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; }
.timeline-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 5; flex-shrink: 0; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
html.dark ::-webkit-scrollbar-thumb { background: #4b5563; }

/* ── Responsive Tables ── */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.table-wrapper table {
  min-width: 100%;
  border-collapse: collapse;
}

/* Mobile-specific table adjustments */
@media (max-width:767px) {
  .table-wrapper {
    margin: 0 -1rem; /* Negative margin to extend beyond container */
    padding: 0 1rem; /* Padding to restore container spacing */
  }

  .table-wrapper table {
    font-size: 0.875rem; /* Slightly smaller font on mobile */
  }

  .table-wrapper th,
  .table-wrapper td {
    padding: 0.5rem; /* Reduced padding on mobile */
    white-space: nowrap; /* Prevent text wrapping */
  }

  /* Stack table cells on very small screens */
  @media (max-width:374px) {
    .table-wrapper table {
      font-size: 0.75rem;
    }

    .table-wrapper th,
    .table-wrapper td {
      padding: 0.375rem;
    }
  }
}

/* ── Chart Keyboard Navigation Focus Indicators (C5-T003) ── */
.chart-element-focused {
  outline: 3px solid #193962;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(27, 42, 74, 0.2);
  transition: all 0.15s ease-in-out;
}

.dark .chart-element-focused {
  outline-color: #4EE2D0;
  box-shadow: 0 0 0 4px rgba(78, 226, 208, 0.3);
}

/* Ensure focus is visible on all chart types */
[role="img"][tabindex="0"]:focus {
  outline: 2px solid #193962;
  outline-offset: 2px;
}

.dark [role="img"][tabindex="0"]:focus {
  outline-color: #4EE2D0;
}

/* ── Mobile Navigation Enhancements (C4-T006) ── */

/* Minimum touch target size (WCAG 2.2 AA compliant) */
@media (max-width:1023px) {
  .nav-item {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }

  .nav-item button {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Hamburger menu button */
  button[aria-label="Open menu"],
  button[aria-label="Toggle sidebar"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px;
  }

  /* Mobile case selector */
  #mobileCaseBtn {
    min-height: 44px;
  }

  /* Mobile search button */
  #mobileSearchBtn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Action buttons */
  .btn {
    min-height: 44px;
  }

  /* Mobile menu dropdown */
  #mobileCaseMenu {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Larger tap areas for nav icons */
  .nav-item svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }

  .nav-text {
    font-size: 0.9375rem;
  }
}

/* Improved spacing for mobile nav items */
@media (max-width:767px) {
  nav .space-y-1 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  nav .space-y-1 > * + * {
    margin-top: 0.375rem;
  }
}

/* UI-POLISH-001 slice 1: the nav list still overflowed at the owner's
   133%-zoom viewport (1280x633: scrollH 456 > clientH 444, so the last
   row sat under the UI-CHROME-001 fade behind a scrollbar). cb9375ec1
   tuned the spacing for a 9-item nav; the demo role renders 11 items,
   and below 1024px the C4-T006 touch-target rules above inflate every
   row to 44px with 24px icons (scrollH 544 > clientH 411 at 960x600).
   A short viewport is the zoom signature, so compact the rows only when
   the viewport is short: 32px rows (20px icon + 6px padding) still clear
   WCAG 2.2 AA target size (2.5.8, 24px). Overflow stays scrollable —
   nothing is hidden; the 11-item role home simply no longer needs to
   scroll. Verified by injection at 1280x633 and 960x600: fits exactly. */
@media (max-height:680px) {
  .sidebar .nav-item {
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .sidebar .nav-item svg {
    width: 20px;
    height: 20px;
  }
  .sidebar-navy nav.flex-1 {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

/* ── Print & Misc ── */
.drop-zone { border: 2px dashed #d1d5db; transition: all 0.2s ease; cursor: pointer; }
.drop-zone.dragover { border-color: #4EE2D0; background: rgba(31,111,120,0.05); }
.terminal-bg { background: #0a0e17; color: #a9b7c6; }
.terminal-bg .terminal-header { background: #1a1f2e; }
.terminal-bg code, .terminal-bg .mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; scroll-behavior: auto; transition-duration: 0.01ms; }
}

/* ═══════════════════════════════════════════════
   AI Clinical Assistant Panel (C7)
   FAB trigger + sliding panel with conversation UI
   ═══════════════════════════════════════════════ */

/* ── AI Assistant FAB (T001) ── */
.ai-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #193962 0%, #12294a 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.35), 0 2px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  outline: none;
}

.ai-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(26, 115, 232, 0.45), 0 3px 6px rgba(0, 0, 0, 0.2);
}

.ai-fab:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.35), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.ai-fab:focus-visible {
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.5), 0 4px 12px rgba(26, 115, 232, 0.35);
}

.ai-fab[aria-expanded="true"] {
  background: linear-gradient(135deg, #4EE2D0 0%, #193962 100%);
  transform: rotate(90deg);
}

.ai-fab-icon {
  width: 26px;
  height: 26px;
  transition: transform 0.3s ease;
}

.ai-fab[aria-expanded="true"] .ai-fab-icon {
  transform: rotate(-90deg);
}

.ai-fab-tooltip {
  position: absolute;
  right: 68px;
  background: rgba(26, 30, 45, 0.95);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ai-fab:hover .ai-fab-tooltip,
.ai-fab:focus .ai-fab-tooltip {
  opacity: 1;
  visibility: visible;
  right: 72px;
}

html.dark .ai-fab-tooltip {
  background: rgba(31, 39, 54, 0.95);
}

/* FAB pulse animation on first load (one-time) */
.ai-fab.needs-attention {
  animation: fabPulse 2s infinite;
}

@keyframes fabPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(26, 115, 232, 0.35), 0 2px 4px rgba(0, 0, 0, 0.15); }
  50% { box-shadow: 0 6px 20px rgba(26, 115, 232, 0.5), 0 3px 8px rgba(0, 0, 0, 0.2); }
}

/* Remove pulse after first interaction */
.ai-fab.interacted {
  animation: none;
}

/* ── AI Assistant Panel (T002) ── */
.ai-panel {
  position: fixed;
  bottom: -520px;
  right: 24px;
  width: 380px;
  height: 500px;
  max-height: calc(100vh - 48px);
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 70;
  display: flex;
  flex-direction: column;
  transition: bottom 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  opacity: 0;
  pointer-events: none;
}

html.dark .ai-panel {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ai-panel.open {
  bottom: 92px;
  opacity: 1;
  pointer-events: auto;
}

/* Header */
.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #193962 0%, #12294a 100%);
  color: white;
  flex-shrink: 0;
}

/* FIX-CONTRAST: this stop was the raw Vivid Teal accent (#4EE2D0); white header
   text on it measured 1.60:1 — the D-042 cluster guard fails any stop under
   4.5:1. No single title colour can clear both stops of a teal→navy gradient
   (a dark title would vanish on the #193962 end), so the accent is pulled to
   the deep-teal step already in the brand scale (secondary-800 #17665f):
   white measures 6.77:1 there and 8.73:1 on the darkened status chip, 11.65:1
   on the navy stop. The teal→navy identity of the dark header is preserved. */
html.dark .ai-panel-header {
  background: linear-gradient(135deg, #17665f 0%, #193962 100%);
}

.ai-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
}

.ai-panel-icon {
  width: 20px;
  height: 20px;
}

/* UI-BETA-GATE D-042: the assistant identity/status cluster ("Clinical
   Analyst" / "Ready") failed AA, and the killer was not the white title on
   the gradient header (4.51-8.63:1 across the two gradient stops) — it was
   the status chip. Two multipliers stacked on it: `opacity: .85` dimmed the
   text, and `background: rgba(255,255,255,.15)` LIGHTENED the surface behind
   it, so white-on-white-chip measured 3.00:1 on the light header's #193962
   stop and 3.41-3.55:1 on the teal stops. Same treatment as D-023's
   "no opacity muting" precedent: drop the dim, and make the chip read as a
   chip with a darkening overlay instead of a lightening one. White on
   rgba(0,0,0,.18) over each gradient stop computes 6.22-9.65:1, so the chip
   clears AA in both themes with no per-theme override. */
.ai-panel-status {
  font-size: 11px;
  font-weight: 400;
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 10px;
}

.ai-panel-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.ai-panel-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.ai-panel-close svg {
  width: 16px;
  height: 16px;
  stroke: white;
}

/* Messages Area */
.ai-panel-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

.ai-panel-messages::-webkit-scrollbar {
  width: 6px;
}

.ai-panel-messages::-webkit-scrollbar-track {
  background: transparent;
}

.ai-panel-messages::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

html.dark .ai-panel-messages::-webkit-scrollbar-thumb {
  background: #4b5563;
}

/* Message Bubbles */
.ai-message {
  display: flex;
  gap: 10px;
  animation: messageSlideIn 0.3s ease-out;
}

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

.ai-message-user {
  flex-direction: row-reverse;
}

.ai-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #193962;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html.dark .ai-message-avatar {
  background: #4EE2D0;
}

.ai-message-user .ai-message-avatar {
  background: #6b7280;
}

html.dark .ai-message-user .ai-message-avatar {
  background: #9ca3af;
}

.ai-message-avatar svg {
  width: 18px;
  height: 18px;
}

.ai-message-content {
  flex: 1;
  min-width: 0;
}

.ai-message-bubble {
  background: #f3f4f6;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #1f2937;
  word-wrap: break-word;
}

html.dark .ai-message-bubble {
  background: #374151;
  color: #e5e7eb;
}

.ai-message-user .ai-message-bubble {
  background: #193962;
  color: white;
  border-bottom-right-radius: 4px;
}

html.dark .ai-message-user .ai-message-bubble {
  background: #4EE2D0;
}

.ai-message-assistant .ai-message-bubble {
  border-bottom-left-radius: 4px;
}

.ai-message-timestamp {
  font-size: 11px;
  color: #6b7280;
  margin-top: 6px;
  text-align: right;
}

html.dark .ai-message-timestamp {
  color: #9ca3af;
}

.ai-message-user .ai-message-timestamp {
  color: rgba(255, 255, 255, 0.7);
}

/* Typing Indicator */
.ai-panel-typing {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 12px;
  color: #6b7280;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

html.dark .ai-panel-typing {
  background: #111827;
  color: #9ca3af;
  border-top-color: #374151;
}

.ai-panel-typing.visible {
  display: flex;
}

.ai-typing-dots {
  display: flex;
  gap: 4px;
}

.ai-typing-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #193962;
  animation: typingBounce 1.4s infinite ease-in-out;
}

html.dark .ai-typing-dots span {
  background: #4EE2D0;
}

.ai-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.ai-typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Input Area */
.ai-panel-input {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  background: white;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

html.dark .ai-panel-input {
  background: #1f2937;
  border-top-color: #374151;
}

.ai-input-field {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
  background: white;
  color: #1f2937;
  max-height: 100px;
  line-height: 1.4;
}

html.dark .ai-input-field {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

.ai-input-field:focus {
  border-color: #193962;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15);
}

html.dark .ai-input-field:focus {
  border-color: #4EE2D0;
  box-shadow: 0 0 0 2px rgba(31, 111, 120, 0.2);
}

.ai-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #193962;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

html.dark .ai-send-btn {
  background: #4EE2D0;
}

.ai-send-btn:hover:not(:disabled) {
  background: #12294a;
  transform: scale(1.05);
}

html.dark .ai-send-btn:hover:not(:disabled) {
  background: #193962;
}

.ai-send-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  opacity: 0.6;
}

html.dark .ai-send-btn:disabled {
  background: #4b5563;
}

.ai-send-btn svg {
  width: 18px;
  height: 18px;
}

/* ── Quick Action Chips (T007) ── */
.ai-message-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ai-chip {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

html.dark .ai-chip {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

.ai-chip:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

html.dark .ai-chip:hover {
  background: #4b5563;
  border-color: #6b7280;
}

.ai-chip:active {
  transform: translateY(0);
}

/* ── AI Accessibility (T006) ── */
.ai-fab:focus-visible,
.ai-panel-close:focus-visible,
.ai-send-btn:focus-visible,
.ai-input-field:focus,
.ai-chip:focus-visible {
  outline: 3px solid #193962;
  outline-offset: 2px;
}

html.dark .ai-fab:focus-visible,
html.dark .ai-panel-close:focus-visible,
html.dark .ai-send-btn:focus-visible,
html.dark .ai-input-field:focus,
html.dark .ai-chip:focus-visible {
  outline-color: #4EE2D0;
}

.ai-panel:focus {
  outline: none;
}

/* Visually hidden but screen reader accessible */
.ai-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Touch target size (WCAG 2.2 AA: 44x44px minimum) */
.ai-panel-close,
.ai-send-btn,
.ai-chip {
  min-width: 44px;
  min-height: 44px;
}

/* ── AI Dark Mode & Polish (T008) ── */

/* Responsive sizing */
@media (max-width: 480px) {
  .ai-panel {
    width: calc(100vw - 32px);
    right: 16px;
    bottom: -540px;
    height: calc(100vh - 80px);
  }

  .ai-panel.open {
    bottom: 84px;
  }

  .ai-fab {
    bottom: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
  }

  .ai-fab-tooltip {
    display: none;
  }
}

/* Tablet optimization */
@media (min-width: 481px) and (max-width: 768px) {
  .ai-panel {
    width: 360px;
  }
}

/* Large screen optimization */
@media (min-width: 1200px) {
  .ai-panel {
    width: 400px;
  }
}

/* ── Print ── */
@page {
  margin: 2cm;
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 10pt;
    color: #666;
  }
  @bottom-left {
    content: "BluQube";
    font-size: 9pt;
    color: #999;
  }
}

@media print {
  html, body { background: #fff !important; color: #000 !important; height: auto !important; }
  .sidebar, .sidebar-backdrop, .no-print, #searchResults, #notificationPanel, #caseModal, #demoBanner, #notificationsButton, #mobileSearchBtn, .ai-fab, .ai-panel { display: none !important; }
  [data-client-hidden] { display: none !important; }
  .main-content { margin-left: 0 !important; width: 100% !important; min-height: 0 !important; }
  .main-content > header { position: static !important; background: #fff !important; border-bottom: 1px solid #d1d5db !important; backdrop-filter: none !important; }
  .page { animation: none !important; }
  .page:not(.active) { display: none !important; }
  .page.active { display: block !important; }
  .terminal-bg, pre, code { background: #fff !important; color: #000 !important; border: 1px solid #d1d5db !important; }
  .terminal-bg .terminal-header { background: #f3f4f6 !important; }
  table, img { break-inside: avoid; }
  tr { break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }
  a { color: #000 !important; text-decoration: underline !important; }

  /* Print-specific navigation (C6-T002) */
  #pageTitle {
    font-size: 18pt !important;
    font-weight: bold !important;
    margin-bottom: 1rem !important;
    color: #1a1a2e !important;
  }

  /* Hide all navigation links in print */
  .nav-item,
  .sidebar-nav,
  .breadcrumb,
  #mobileSearchBtn,
  #mobileCaseBtn {
    display: none !important;
  }

  /* Hide action buttons */
  button,
  .action-button,
  .quick-action {
    display: none !important;
  }

  /* Keep only content */
  main,
  .page,
  .section,
  .card {
    break-inside: avoid !important;
  }

  /* Remove interactive elements */
  [role="button"],
  [onclick],
  .cursor-pointer {
    pointer-events: none !important;
  }
}

/* ═══════════════════════════════════════════════
   NEXUS-SUPPORT-005 — Product support widget (Mode A)
   FAB + bounded conversation panel, lower-right quadrant.
   Stacks ABOVE the Clinical Analyst FAB (.ai-fab at bottom 24px)
   so the two never overlap; under the 480px breakpoint the panel
   goes near-full-height instead of floating over content.
   ═══════════════════════════════════════════════ */

.support-fab {
  position: fixed;
  bottom: 96px; /* clears .ai-fab (24 + 56 + 16) — same quadrant, no overlap */
  right: 24px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #193962 0%, #12294a 100%);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(25, 57, 98, 0.35), 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.support-fab[hidden] { display: none; }

.support-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(25, 57, 98, 0.45), 0 3px 6px rgba(0, 0, 0, 0.2);
}

.support-fab:active { transform: translateY(0); }

/* Visible focus state (ticket AC): ring on the affordance itself. */
.support-fab:focus-visible {
  outline: 3px solid rgba(78, 226, 208, 0.6);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(78, 226, 208, 0.5), 0 4px 12px rgba(25, 57, 98, 0.35);
}

.support-fab-icon { width: 24px; height: 24px; }

.support-fab-tooltip {
  position: absolute;
  right: 66px;
  background: #1f2937;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.support-fab:hover .support-fab-tooltip,
.support-fab:focus-visible .support-fab-tooltip { opacity: 1; }

.support-panel {
  position: fixed;
  bottom: 164px; /* clears the support FAB (96 + 56 + 12) */
  right: 24px;
  width: 360px;
  height: 440px;
  max-height: calc(100vh - 188px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 70;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: bottom 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s;
}

html.dark .support-panel {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.support-panel.open {
  bottom: 164px;
  opacity: 1;
  pointer-events: auto;
}

.support-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #193962 0%, #12294a 100%);
  color: #fff;
  flex-shrink: 0;
}

.support-panel-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }

.support-panel-icon { width: 18px; height: 18px; }

/* UI-BETA-GATE D-042: same cluster, same cause. "Product support" and its
   status had no chip background, so only the `opacity: .85` dim applied:
   4.42:1 on the old teal stop instead of 5.47:1. The stop is now Ink Blue
   (#193962, 11.6:1 with white); removing the dim restores
   the header gradient's own contrast in both themes. */
.support-panel-status {
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}

.support-panel-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 8px;
  color: #fff;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.support-panel-close:hover { background: rgba(255, 255, 255, 0.3); }

.support-panel-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.support-panel-close svg { width: 16px; height: 16px; }

/* Bounded conversation: fixed scroll region, never unbounded growth. */
.support-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f9fafb;
}

html.dark .support-messages { background: #111827; }

.support-msg { display: flex; }

.support-msg--user { justify-content: flex-end; }

.support-msg--assistant { justify-content: flex-start; }

.support-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.support-msg--user .support-bubble {
  background: #193962;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.support-msg--assistant .support-bubble {
  background: #fff;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 4px;
}

html.dark .support-msg--assistant .support-bubble {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #374151;
}

/* Honest states — a refusal or an error is visible text, never a dead spinner. */
.support-msg--refused .support-bubble { border-left: 3px solid #b45309; }

.support-msg--error .support-bubble { border-left: 3px solid #b91c1c; }

.support-msg--pending .support-bubble { color: #6b7280; font-style: italic; }

.support-unavailable {
  padding: 10px 16px;
  background: #fef3c7;
  color: #78350f;
  font-size: 12px;
  flex-shrink: 0;
}

html.dark .support-unavailable { background: #453108; color: #fcd34d; }

.support-unavailable[hidden] { display: none; }

.support-unavailable-title { font-weight: 700; margin: 0 0 2px; }

.support-unavailable p { margin: 0; }

.support-help-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

html.dark .support-help-links { border-top-color: #374151; }

.support-help-links[hidden] { display: none; }

.support-help-links a {
  font-size: 12px;
  color: #193962;
  text-decoration: underline;
  border-radius: 4px;
}

.support-help-links a:focus-visible {
  outline: 2px solid #193962;
  outline-offset: 2px;
}

.support-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

html.dark .support-prompts { border-top-color: #374151; }

.support-prompts[hidden] { display: none; }

.support-prompt {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid #193962;
  border-radius: 999px;
  color: #193962;
  background: transparent;
  cursor: pointer;
}

.support-prompt:hover { background: rgba(25, 57, 98, 0.08); }

.support-prompt:focus-visible {
  outline: 2px solid #193962;
  outline-offset: 2px;
}

.support-panel-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

html.dark .support-panel-input { border-top-color: #374151; }

.support-panel-input[hidden] { display: none; }

.support-input-field {
  flex: 1;
  resize: none;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  max-height: 96px;
  background: #fff;
  color: #111827;
}

html.dark .support-input-field {
  background: #111827;
  color: #e5e7eb;
  border-color: #374151;
}

.support-input-field:focus-visible {
  outline: 2px solid #193962;
  outline-offset: 1px;
}

.support-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: #4EE2D0;
  color: #193962;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.support-send-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.support-send-btn:focus-visible {
  outline: 2px solid #193962;
  outline-offset: 2px;
}

.support-send-btn svg { width: 16px; height: 16px; }

/* Mobile (same 480px breakpoint the Clinical Analyst panel uses): the
   panel goes near-full-height above the FAB row instead of floating over
   whatever is underneath. */
@media (max-width: 480px) {
  .support-panel {
    width: calc(100vw - 32px);
    right: 16px;
    height: calc(100vh - 160px);
    max-height: calc(100vh - 160px);
  }

  .support-panel.open { bottom: 148px; }

  .support-fab {
    bottom: 84px; /* clears the mobile .ai-fab (16 + 52 + 16) */
    right: 16px;
    width: 52px;
    height: 52px;
  }

  .support-fab-tooltip { display: none; }
}