/* ──────────────────────────────────────────────────────────────
   TextRad Redesign — overrides on top of app.css + Tailwind
   Scope: #recorder-section + nav header chrome
   ────────────────────────────────────────────────────────────── */

:root {
  /* Dark theme defaults */
  --app-bg: #0b1220;
  --app-bg-2: #0f172a;
  --app-bg-3: #131c30;
  --app-bg-4: #1a2540;
  --app-bg-5: #243150;
  --app-fg: #e5e7eb;
  --app-fg-muted: #9ca3af;
  --app-fg-soft: #6b7280;
  --app-border: rgba(255,255,255,0.06);
  --app-border-strong: rgba(255,255,255,0.12);
  --app-card: #111a2e;
  --app-card-2: #0e1626;
  --app-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 24px rgba(0,0,0,0.35);
  --app-glow: 0 0 0 1px rgba(96,165,250,0.18), 0 8px 28px -8px rgba(59,130,246,0.5);
  /* Paper surface: matches the panel surface in each theme so dark mode is dark.
     User wants no big white block in dark mode. */
  --app-paper: #131c30;
  --app-paper-fg: #e5e7eb;
  --app-paper-muted: #94a3b8;
  --app-paper-border: rgba(255,255,255,0.08);
  --app-paper-rule: rgba(255,255,255,0.10);

  /* Accent (blue, default) */
  --accent: #3b82f6;
  --accent-2: #2563eb;
  --accent-soft: rgba(59,130,246,0.15);
  --accent-fg: #ffffff;
  --accent-glow: 0 6px 22px -6px rgba(59,130,246,0.6);
}

body.light-mode {
  --app-bg: #eef1f6;
  --app-bg-2: #ffffff;
  --app-bg-3: #f6f8fb;
  --app-bg-4: #eef2f7;
  --app-bg-5: #e3eafc;
  --app-fg: #0f172a;
  --app-fg-muted: #475569;
  --app-fg-soft: #64748b;
  --app-border: rgba(15,23,42,0.06);
  --app-border-strong: rgba(15,23,42,0.12);
  --app-card: #ffffff;
  --app-card-2: #f7f9fc;
  --app-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 16px rgba(15,23,42,0.06);
  --app-glow: 0 0 0 1px rgba(37,99,235,0.18), 0 8px 28px -10px rgba(37,99,235,0.4);
  --app-paper: #ffffff;
  --app-paper-fg: #0f172a;
  --app-paper-muted: #64748b;
  --app-paper-border: #e2e8f0;
  --app-paper-rule: #e2e8f0;
}

/* ─── Nav header (TextRad/v2 wordmark + segmented theme toggle) ─── */
.tr-nav {
  background: var(--app-bg-2);
  border-bottom: 1px solid var(--app-border);
  box-shadow: 0 1px 0 var(--app-border);
}
.tr-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.tr-brand img {
  height: 32px;
  width: 32px;
  border-radius: 8px;
}
.tr-brand-text {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.tr-brand-text .text { color: var(--app-fg); }
.tr-brand-text .rad {
  color: var(--accent);
}
.tr-brand-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-left: 8px;
  text-transform: uppercase;
}

/* Top-nav links (Home / My Reports / News / Feedback) — accent on hover, with
   a clean tab underline for the active route. */
.tr-nav .hidden.md\:flex a,
nav.nav-dark .hidden.md\:flex a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--app-fg-muted) !important;
  padding: 6px 14px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tr-nav .hidden.md\:flex a:hover,
nav.nav-dark .hidden.md\:flex a:hover {
  color: var(--app-fg) !important;
  background: var(--app-bg-3);
}
.tr-nav .hidden.md\:flex a.tr-nav-active,
nav.nav-dark .hidden.md\:flex a.tr-nav-active {
  color: var(--accent) !important;
}
.tr-nav .hidden.md\:flex a.tr-nav-active::after,
nav.nav-dark .hidden.md\:flex a.tr-nav-active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -10px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

/* Segmented theme switch */
.tr-theme-seg {
  display: inline-flex;
  align-items: center;
  background: var(--app-bg-3);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 4px;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
}
.tr-theme-seg button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--app-fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  letter-spacing: 0.01em;
  transition: color 0.15s ease, background 0.15s ease;
  line-height: 1;
}
.tr-theme-seg button i {
  font-size: 12px !important; /* override the inline 11px on the FA icons */
}
.tr-theme-seg button:hover:not(.on) {
  color: var(--app-fg);
}
.tr-theme-seg button.on {
  background: var(--app-bg-5);
  color: var(--app-fg);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px var(--app-border);
}
.tr-theme-seg button.on i {
  color: var(--accent);
}

/* ─── Workspace shell overrides ──────────────────────────────── */
#recorder-section {
  background: var(--app-bg);
}

#recorder-section .three-panel-layout {
  display: grid !important;
  grid-template-columns: 280px 1fr 420px !important;
  gap: 12px !important;
  padding: 12px !important;
  background: transparent !important;
  height: calc(100vh - 5.5rem);
  overflow: hidden;
  contain: layout style;
}

/* Reset original flex sizing on the panels — grid handles widths now */
#recorder-section .panel-templates,
#recorder-section .panel-report,
#recorder-section .panel-dictation {
  flex: initial !important;
  min-width: 0 !important;
  max-width: none !important;
  border-right: 0 !important;
}

/* Layout variants (driven by .three-panel-layout[data-layout="..."]) */
#recorder-section .three-panel-layout[data-layout="preview-first"] {
  grid-template-columns: 240px 1fr 360px !important;
}
#recorder-section .three-panel-layout[data-layout="dictation-focus"] {
  grid-template-columns: 240px 1fr 440px !important;
}

/* ─── Workflow layout (variant) ───────────────────────────────
   Single-column page with a stepper bar on top.
   Step 0 = Templates only. Steps 1+ = Preview + Dictation. */
#recorder-section .three-panel-layout[data-layout="workflow"] {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
}
#recorder-section .three-panel-layout[data-layout="workflow"][data-step="0"] {
  grid-template-columns: 1fr !important;
}
#recorder-section .three-panel-layout[data-layout="workflow"][data-step="0"] .panel-templates {
  display: flex !important;
  grid-column: 1 / -1;
}
#recorder-section .three-panel-layout[data-layout="workflow"][data-step="0"] .panel-report,
#recorder-section .three-panel-layout[data-layout="workflow"][data-step="0"] .panel-dictation {
  display: none !important;
}
#recorder-section .three-panel-layout[data-layout="workflow"]:not([data-step="0"]) {
  grid-template-columns: 1fr 420px !important;
}
#recorder-section .three-panel-layout[data-layout="workflow"]:not([data-step="0"]) .panel-templates {
  display: none !important;
}
#recorder-section .three-panel-layout[data-layout="workflow"]:not([data-step="0"]) .panel-report,
#recorder-section .three-panel-layout[data-layout="workflow"]:not([data-step="0"]) .panel-dictation {
  display: flex !important;
}

.workflow-bar {
  grid-column: 1 / -1;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  padding: 8px;
  display: none;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}
#recorder-section .three-panel-layout[data-layout="workflow"] .workflow-bar {
  display: flex;
}
.workflow-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  border: 0;
  font: inherit;
  color: var(--app-fg-muted);
  transition: background 0.15s ease, color 0.15s ease;
  min-width: 200px;
  text-align: left;
}
.workflow-step:hover { background: var(--app-bg-3); }
.workflow-step.on    { background: var(--accent-soft); color: var(--app-fg); }
.workflow-step.done  { color: var(--app-fg); }
.workflow-step:disabled { cursor: not-allowed; opacity: 0.6; }
.workflow-step:disabled:hover { background: transparent; }
.workflow-step .num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--app-bg-4); color: var(--app-fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.workflow-step.on   .num { background: var(--accent); color: var(--accent-fg); }
.workflow-step.done .num { background: rgba(52,211,153,0.15); color: #34d399; }
.workflow-step .meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; min-width: 0; }
.workflow-step .meta .lab { font-size: 13px; font-weight: 600; }
.workflow-step .meta .sub { font-size: 11px; color: var(--app-fg-soft); }
.workflow-arrow { color: var(--app-fg-soft); flex-shrink: 0; }

/* Hide the mobile tab bar when workflow layout is active (the stepper replaces it). */
#recorder-section:has(.three-panel-layout[data-layout="workflow"]) .panel-tab-bar {
  display: none !important;
}

/* ─── Mobile: workflow layout disabled ─────────────────────────
   On small screens, fall back to the standard three-panel (tab-based) view
   even when the user has chosen "Workflow" in Tweaks on desktop.
   Rules must match or exceed the desktop selectors' specificity.  */
@media (max-width: 880px) {
  /* Hide the stepper bar entirely. */
  .workflow-bar { display: none !important; }

  /* Restore the mobile tab bar that was hidden by the :has() rule above. */
  #recorder-section:has(.three-panel-layout[data-layout="workflow"]) .panel-tab-bar {
    display: flex !important;
  }

  /* Neutralise the workflow grid overrides so the default mobile CSS kicks in. */
  #recorder-section .three-panel-layout[data-layout="workflow"],
  #recorder-section .three-panel-layout[data-layout="workflow"][data-step="0"],
  #recorder-section .three-panel-layout[data-layout="workflow"]:not([data-step="0"]) {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
  }

  /* Override step-0 hiding (desktop hides report + dictation at step 0). */
  #recorder-section .three-panel-layout[data-layout="workflow"][data-step="0"] .panel-report,
  #recorder-section .three-panel-layout[data-layout="workflow"][data-step="0"] .panel-dictation,
  #recorder-section .three-panel-layout[data-layout="workflow"][data-step="0"] .panel-templates,
  /* Override non-step-0 hiding (desktop hides templates at step 1+). */
  #recorder-section .three-panel-layout[data-layout="workflow"]:not([data-step="0"]) .panel-templates,
  #recorder-section .three-panel-layout[data-layout="workflow"]:not([data-step="0"]) .panel-report,
  #recorder-section .three-panel-layout[data-layout="workflow"]:not([data-step="0"]) .panel-dictation {
    display: flex !important;
  }

  /* But still hide panels with the mobile tab-switcher class. */
  #recorder-section .three-panel-layout[data-layout="workflow"][data-step="0"] .panel.panel-hidden,
  #recorder-section .three-panel-layout[data-layout="workflow"]:not([data-step="0"]) .panel.panel-hidden,
  #recorder-section .three-panel-layout[data-layout="workflow"] .panel.panel-hidden {
    display: none !important;
  }
}

#recorder-section .panel {
  background: var(--app-card) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--app-shadow);
  overflow: hidden;
}

#recorder-section .panel-report .panel-header { position: relative; z-index: 2; }
.report-gen-time-badge { z-index: 5; }

#recorder-section .panel-header {
  background: transparent;
  border-bottom: 1px solid var(--app-border);
  padding: 8px 14px;
}
#recorder-section .panel-header .panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-fg-muted);
  margin: 0;
}

/* Close-to-Reports button on the dictation panel — hidden on desktop (the primary
   action is the panel itself), shown red on mobile so the user has a clear way
   back to the My Reports list. */
#recorder-section .panel-dictation .panel-header-action.panel-close-action {
  display: none !important;
}
@media (max-width: 880px) {
  #recorder-section .panel-dictation .panel-header-action.panel-close-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    background: rgba(239,68,68,0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239,68,68,0.3) !important;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  #recorder-section .panel-dictation .panel-header-action.panel-close-action:hover {
    background: rgba(239,68,68,0.25) !important;
    color: #fca5a5 !important;
  }
}

/* ─── Templates panel ────────────────────────────────────────── */
#recorder-section .panel-templates .panel-search-area {
  padding: 2px 12px 4px;
  border-bottom: 0;
}
#recorder-section .panel-templates #format-selector-container {
  position: relative;
}
#recorder-section .panel-templates #format-search {
  width: 100%;
  background: var(--app-bg-3) !important;
  color: var(--app-fg) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 9px !important;
  padding: 9px 12px 9px 34px !important;
  font-size: 13px !important;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#recorder-section .panel-templates #format-search:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #000 !important;
}
#recorder-section .panel-templates #format-selector-container::before {
  content: "\f002"; /* fa-search */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--app-fg-soft);
  font-size: 12px;
  pointer-events: none;
  z-index: 2;
}
#recorder-section .panel-templates .tr-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--app-bg-4);
  color: var(--app-fg-muted);
  border: 1px solid var(--app-border-strong);
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* Category tabs */
.tr-tpl-tabs {
  display: flex;
  gap: 2px;
  padding: 0 10px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tr-tpl-tabs::-webkit-scrollbar { display: none; }
.tr-tpl-tab {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 5px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--app-fg-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.tr-tpl-tab:hover { color: var(--app-fg); background: var(--app-bg-3); }
.tr-tpl-tab.on {
  background: var(--accent-soft);
  color: var(--accent);
}
.tr-tpl-tab .count {
  background: var(--app-bg-4);
  color: var(--app-fg-muted);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}
.tr-tpl-tab.on .count {
  background: rgba(59,130,246,0.25);
  color: var(--accent);
}

/* Format list — restyle the existing #format-list rows to design density */
#recorder-section .panel-format-list-area {
  background: transparent !important;
  flex: 1;
  min-height: 0;
}
#recorder-section .panel-format-list,
#recorder-section #format-dropdown {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#recorder-section #format-list {
  padding: 0 8px 8px;
}

/* List mode — default. Scope so grid mode can take over cleanly.
   NOTE: `display` is intentionally NOT !important — TextRadApp's search filter
   sets inline `display: none` on non-matching rows, and we need that to win. */
#recorder-section #format-list:not([data-style="grid"]) > div,
#recorder-section #format-list:not([data-style="grid"]) .format-list-item {
  display: flex;
  align-items: center !important;
  gap: 9px !important;
  padding: 6px 10px !important;
  border-radius: 7px !important;
  cursor: pointer;
  transition: background 0.12s ease;
  position: relative;
  background: transparent !important;
  border: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--app-fg) !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#recorder-section #format-list:not([data-style="grid"]) > div:hover,
#recorder-section #format-list:not([data-style="grid"]) .format-list-item:hover {
  background: var(--app-bg-3) !important;
}
#recorder-section #format-list:not([data-style="grid"]) > div.selected,
#recorder-section #format-list:not([data-style="grid"]) .format-list-item.selected,
#recorder-section #format-list:not([data-style="grid"]) > div.active,
#recorder-section #format-list:not([data-style="grid"]) .format-list-item.active {
  background: var(--accent-soft) !important;
  color: var(--app-fg) !important;
  font-weight: 600 !important;
}
#recorder-section #format-list:not([data-style="grid"]) > div.selected::before,
#recorder-section #format-list:not([data-style="grid"]) .format-list-item.selected::before,
#recorder-section #format-list:not([data-style="grid"]) > div.active::before,
#recorder-section #format-list:not([data-style="grid"]) .format-list-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

/* Category icon prefixed via JS as a span.tr-cat-pill */
.tr-cat-pill {
  width: 24px;
  height: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tr-cat-CT      { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.tr-cat-MRI     { background: rgba(168,85,247,0.15);  color: #c084fc; }
.tr-cat-USG     { background: rgba(20,184,166,0.15);  color: #2dd4bf; }
.tr-cat-XR      { background: rgba(245,158,11,0.15);  color: #fbbf24; }
.tr-cat-Special { background: rgba(236,72,153,0.15);  color: #f472b6; }

body.light-mode .tr-cat-CT      { background: rgba(59,130,246,0.12);  color: #2563eb; }
body.light-mode .tr-cat-MRI     { background: rgba(168,85,247,0.12);  color: #7c3aed; }
body.light-mode .tr-cat-USG     { background: rgba(20,184,166,0.12);  color: #0d9488; }
body.light-mode .tr-cat-XR      { background: rgba(245,158,11,0.14);  color: #b45309; }
body.light-mode .tr-cat-Special { background: rgba(236,72,153,0.12);  color: #be185d; }

/* Pinned section header */
.tr-tpl-section-head {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-fg-soft);
  padding: 12px 14px 6px;
}

/* Category tab filter — hide rows whose data-category doesn't match */
#format-list[data-active-cat="CT"]      > [data-category]:not([data-category="CT"]) { display: none !important; }
#format-list[data-active-cat="MRI"]     > [data-category]:not([data-category="MRI"]) { display: none !important; }
#format-list[data-active-cat="USG"]     > [data-category]:not([data-category="USG"]) { display: none !important; }
#format-list[data-active-cat="XR"]      > [data-category]:not([data-category="XR"]) { display: none !important; }
#format-list[data-active-cat="Special"] > [data-category]:not([data-category="Special"]) { display: none !important; }
#format-list[data-active-cat="recent"]  > [data-category]:not([data-recent="1"]) { display: none !important; }
#format-list[data-active-cat="user"]    > [data-category]:not([data-type="custom"]) { display: none !important; }

/* TextRadApp's search filter toggles Tailwind's `.hidden` on .format-item rows.
   My row selectors are more specific than `.hidden`, so without this rule the
   class does nothing and search appears broken. */
#recorder-section #format-list .hidden,
#recorder-section #format-list .format-item.hidden {
  display: none !important;
}

/* Footer of templates panel — restyle existing .template-actions */
#recorder-section .template-actions {
  border-top: 1px solid var(--app-border) !important;
  padding: 8px !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
#recorder-section .template-actions .template-action-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--app-fg-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
#recorder-section .template-actions .template-action-btn:hover {
  background: var(--app-bg-3) !important;
  color: var(--app-fg) !important;
}

/* ─── Center: report preview panel ───────────────────────────── */
#recorder-section .panel-report {
  background: var(--app-bg-2) !important;
}
#recorder-section .panel-report .panel-header {
  background: transparent;
}

#recorder-section .panel-report-content {
  background: transparent !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The "stage" that holds the paper. Flex column so the paper can grow to fill
   the available height (instead of stopping at its content height). Padding
   kept tight so the paper hugs the panel edges and the toolbar pins close
   to the bottom — the previous 24px ate noticeable space above and below. */
#recorder-section .panel-report-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
}

#recorder-section .panel-report-inner::-webkit-scrollbar { width: 10px; }
#recorder-section .panel-report-inner::-webkit-scrollbar-track { background: transparent; }
#recorder-section .panel-report-inner::-webkit-scrollbar-thumb {
  background: var(--app-border-strong);
  border-radius: 999px;
}

/* The report-results-content + format-preview-content both wrap in a paper sheet.
   Width fills the available column (max 1080px so it doesn't get unreadably wide
   on ultra-wide monitors). flex:1 grows the paper into available height; we
   intentionally do NOT use min-height:100% — that would push siblings (the
   bottom toolbar) out of the visible area. */
#recorder-section #format-preview-content,
#recorder-section #report-results-content {
  width: 100%;
  max-width: 1080px;
  flex: 1 1 auto !important;
  background: var(--app-paper) !important;
  color: var(--app-paper-fg) !important;
  border: 1px solid var(--app-paper-border) !important;
  border-radius: 10px !important;
  padding: 24px 24px 28px !important;
  box-shadow: 0 6px 24px -12px rgba(0,0,0,0.35);
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
}
body.light-mode #recorder-section #format-preview-content,
body.light-mode #recorder-section #report-results-content {
  box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 24px 48px -24px rgba(15,23,42,0.18);
  border: 1px solid var(--app-paper-border) !important;
}
#recorder-section #format-preview-content *,
#recorder-section #report-results-content * {
  color: var(--app-paper-fg) !important;
}
/* TextRad IQ markers — the universal color rule above was repainting them
   white. Restore as accent-colored buttons so they're visible AND theme-aware. */
#recorder-section #report-results-content .radqc-insert-marker,
#recorder-section #report-results-content .radqc-insert-marker *,
#recorder-section .radqc-insert-marker,
#recorder-section .radqc-insert-marker * {
  color: var(--accent) !important;
}
#recorder-section .radqc-insert-marker {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  margin: 0 4px !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}
#recorder-section .radqc-insert-marker:hover {
  background: color-mix(in srgb, var(--accent) 30%, transparent) !important;
  transform: scale(1.08);
}
#recorder-section .radqc-block-marker {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
}
#recorder-section .radqc-block-marker:hover {
  background: color-mix(in srgb, var(--accent) 25%, transparent) !important;
}
/* Kill the legacy lavender/blue/gray boxed highlights that the prose renderer
   adds around section values. The paper itself is the surface — nested cards
   look like little boxes-in-a-box. */
#recorder-section #format-preview-content [class*="bg-"],
#recorder-section #report-results-content [class*="bg-"] {
  background: transparent !important;
  box-shadow: none !important;
}
#recorder-section #format-preview-content [class*="border"],
#recorder-section #report-results-content [class*="border"] {
  border-color: var(--app-paper-rule) !important;
}
#recorder-section #format-preview-content h1,
#recorder-section #format-preview-content h2,
#recorder-section #format-preview-content h3,
#recorder-section #format-preview-content h4,
#recorder-section #report-results-content h1,
#recorder-section #report-results-content h2,
#recorder-section #report-results-content h3,
#recorder-section #report-results-content h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 22px 0 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--app-paper-rule) !important;
  color: var(--app-paper-fg) !important;
}
#recorder-section #format-preview-content p,
#recorder-section #report-results-content p,
#recorder-section #format-preview-content li,
#recorder-section #report-results-content li {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--app-paper-fg) !important;
}
#recorder-section #format-preview-content strong,
#recorder-section #report-results-content strong {
  color: var(--app-paper-fg) !important;
  font-weight: 700 !important;
}

/* Inner heading row above the paper is redundant with the panel-header.
   Hide it to reclaim the wasted vertical space above the report content. */
#recorder-section .format-preview-panel > .text-center,
#recorder-section .report-results-panel > .text-center {
  display: none !important;
}

/* Toolbar at the bottom of report-results-panel — restyle.
   `align-self: stretch` + `width: 100%` overrides the parent's `align-items: center`
   (set on .panel-report-inner so the paper card centers) so the toolbar spans
   full width and `justify-between` actually pushes the action groups to the edges.
   `margin-top: auto` pins it to the bottom of the panel so it lines up with the
   Generate Report button in the dictation column. */
#recorder-section .report-results-panel > .flex.justify-between {
  background: transparent !important;
  border-top: 1px solid color-mix(in srgb, var(--app-border) 60%, transparent) !important;
  padding: 14px 4px 2px 4px !important;
  margin-top: auto !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
#recorder-section .report-results-panel > .flex.justify-between > div:first-child {
  margin-right: auto !important;
}

/* Make the inner panels (format-preview-panel, report-results-panel) flex column —
   but ONLY when NOT hidden (Tailwind's .hidden must still win). */
#recorder-section .format-preview-panel:not(.hidden),
#recorder-section .report-results-panel:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
}
#recorder-section .format-preview-panel.hidden,
#recorder-section .report-results-panel.hidden,
#recorder-section #report-empty-state.hidden {
  display: none !important;
}

/* Empty state: hide when something else is showing (Tailwind .hidden). Otherwise
   it expands to fill the panel. */
#recorder-section #report-empty-state:not(.hidden) {
  flex: 1 !important;
}

/* ─── Empty state — new hero ─────────────────────────────────── */
#recorder-section #report-empty-state {
  background: transparent !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 40px !important;
  opacity: 1 !important;
  gap: 18px;
}
#recorder-section #report-empty-state > div:first-child {
  display: contents; /* let our nested flex shine through */
}
.tr-empty-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tr-empty-headline {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--app-fg);
  margin: 0;
  line-height: 1.1;
  max-width: 520px;
}
.tr-empty-headline em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent), #34d399);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tr-empty-sub {
  font-size: 15px;
  color: var(--app-fg-muted);
  max-width: 440px;
  margin: 0;
  line-height: 1.5;
}
.tr-empty-recents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 540px;
  margin-top: 8px;
}
.tr-empty-recents .tr-r-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--app-fg-soft);
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 4px;
}
.tr-empty-recents .tr-r {
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--app-bg-3);
  border: 1px solid var(--app-border);
  color: var(--app-fg);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tr-empty-recents .tr-r:hover {
  background: var(--app-bg-4);
  border-color: var(--accent);
  color: var(--accent);
}

/* Hide old empty-state inner placeholders — we use the new hero. The legacy
   `#recording-tip` block is now reused as the rotating tip card under the
   hero subtitle (see #recorder-section #recording-tip styling below). */
#recorder-section #report-empty-state .fa-file-medical.text-4xl,
#recorder-section #report-empty-state > div:first-child > p {
  display: none !important;
}

/* Rotating dictation tip — sits below the hero subtitle, swaps every 15s. */
#recorder-section #recording-tip.tr-empty-tip {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 540px;
  margin: 4px auto 0;
  opacity: 1 !important;
}
#recorder-section #recording-tip #dictation-tips-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--app-bg-3);
  border: 1px solid var(--app-border);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  max-width: 100%;
}
#recorder-section #recording-tip #dictation-tips-placeholder:hover {
  background: var(--app-bg-4);
  border-color: var(--accent);
}
#recorder-section #recording-tip #dictation-tips-placeholder.hidden {
  display: none;
}
#recorder-section #recording-tip #tip-content {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: opacity 0.3s ease;
  color: var(--app-fg-muted);
}
#recorder-section #recording-tip #tip-content i {
  color: var(--accent);
  flex-shrink: 0;
}
#recorder-section #recording-tip #tip-content span {
  color: var(--app-fg-muted);
  line-height: 1.5;
}

/* ─── Generation overlay ─────────────────────────────────────── */
#tr-gen-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11,18,32,0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
body.light-mode #tr-gen-overlay { background: rgba(238,241,246,0.75); }
#tr-gen-overlay.hidden { display: none !important; }

.tr-gen-card {
  background: var(--app-card);
  border: 1px solid var(--app-border-strong);
  border-radius: 14px;
  padding: 24px 28px;
  width: min(420px, 90%);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tr-gen-card .tr-gen-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tr-gen-card .tr-gen-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--app-fg);
}
.tr-gen-card .tr-gen-step-count {
  font-size: 12px;
  color: var(--app-fg-muted);
}
.tr-gen-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--app-bg-3);
  overflow: hidden;
  position: relative;
}
.tr-gen-progress .bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--accent), #34d399);
  border-radius: 2px;
  transition: width 0.4s ease;
  width: 0%;
}
.tr-gen-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.tr-gen-row .ic {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  position: relative;
}
.tr-gen-row.done .ic { background: rgba(52,211,153,0.15); color: #34d399; }
.tr-gen-row.active .ic { background: var(--accent-soft); color: var(--accent); }
.tr-gen-row.active .ic::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 8px;
  animation: tr-spin 0.9s linear infinite;
}
@keyframes tr-spin { to { transform: rotate(360deg); } }
.tr-gen-row.pending { opacity: 0.45; }
.tr-gen-row.pending .ic { background: var(--app-bg-3); color: var(--app-fg-soft); }
.tr-gen-row .label { color: var(--app-fg); }
.tr-gen-row.pending .label { color: var(--app-fg-muted); }

/* ─── Right: Dictation panel ─────────────────────────────────── */
#recorder-section .panel-dictation .recorder-container {
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

#recorder-section #recording-status {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--app-fg) !important;
  margin-top: 6px;
}
body.is-recording #recorder-section #recording-status {
  color: var(--accent) !important;
}
#recorder-section #recording-instructions {
  font-size: 12px !important;
  color: var(--app-fg-muted) !important;
  margin-top: 2px;
}

/* Visualizer — keep the original canvas (it animates from real mic audio).
   Just style the surrounding container to match the design. */
#recorder-section #visualizer.visualizer-container-v3 {
  position: relative;
  display: block !important;
  height: 48px;
  margin: 8px 16px 10px !important;
  padding: 8px 12px;
  border-radius: 12px;
  background: transparent !important;
  border: 0 !important;
  overflow: hidden;
}
#recorder-section #visualizer #audio-visualizer {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
/* Decorative CSS bars are now hidden (canvas does the real waveform) */
.tr-viz-bar { display: none !important; }

/* Record button restyle */
#recorder-section #record-button {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  border: 0 !important;
  color: var(--accent-fg) !important;
  font-size: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--accent-glow);
  transition: all 0.2s ease;
  position: relative;
}
#recorder-section #record-button:hover { background: var(--accent-2) !important; transform: translateY(-1px); }
body.is-recording #recorder-section #record-button {
  background: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
  animation: tr-rec-pulse 1.6s ease-out infinite;
}
@keyframes tr-rec-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  100% { box-shadow: 0 0 0 18px rgba(239,68,68,0); }
}

#recorder-section #type-directly-button,
#recorder-section #continue-recording-button {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: var(--app-bg-3) !important;
  border: 1px solid var(--app-border-strong) !important;
  color: var(--app-fg) !important;
  font-size: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
}
#recorder-section #type-directly-button:hover,
#recorder-section #continue-recording-button:hover {
  background: var(--app-bg-4) !important;
  transform: translateY(-1px);
}

#recorder-section #record-button-label,
#recorder-section #type-directly-container .text-\\[10px\\],
#recorder-section #continue-button-container .text-\\[10px\\] {
  font-size: 11px !important;
  color: var(--app-fg-muted) !important;
  font-weight: 500 !important;
  margin-top: 6px !important;
}

/* Transcription container expands to fill available dictation panel height. */
#recorder-section #transcription-container:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 16px 12px !important;
  gap: 8px;
}
#recorder-section #transcription-container .transcription-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex;
}
#recorder-section #transcription-text {
  background: var(--app-bg-3) !important;
  color: var(--app-fg) !important;
  border: 1px dashed var(--app-border-strong) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  outline: none;
  resize: none;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  /* Was 200px — too tall when Quick Generate is also visible inside the
     transcription-container, causing the textarea to overflow on top of it. */
  min-height: 80px !important;
}
#recorder-section #transcription-text:focus {
  border-color: var(--accent) !important;
  border-style: solid !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #000 !important;
}

#recorder-section #active-format-display {
  background: var(--accent-soft) !important;
  border: 1px solid rgba(59,130,246,0.2) !important;
  border-radius: 8px !important;
  color: var(--app-fg) !important;
  padding: 8px 10px !important;
  margin: 0 16px 12px !important;
}
#recorder-section #active-format-display .text-blue-300,
#recorder-section #active-format-display * {
  color: var(--app-fg) !important;
}
#recorder-section #active-format-display #active-format-name {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Primary button family — anything that ships work or generates output. All
   follow the chosen accent so theming feels consistent. */
#recorder-section #generate-quick-container,
#recorder-section #us-complete-scan-container,
#recorder-section #generate-container {
  margin: 0 16px 12px !important;
  flex-shrink: 0;
}
#recorder-section #us-complete-scan-container,
#recorder-section #generate-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#recorder-section #generate-quick-button,
#recorder-section #generate-button,
#recorder-section #save-inline-report {
  background: var(--accent) !important;
  background-image: none !important; /* kill the legacy blue→indigo gradient */
  color: var(--accent-fg) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: var(--accent-glow) !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* Theme-aware gradient override for primary generation and ultrasound completion buttons */
#recorder-section #us-complete-scan,
#recorder-section #generate-button {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  color: var(--accent-fg) !important;
  box-shadow: var(--accent-glow) !important;
}
/* Match Quick Generate's two-line layout height so the two CTAs feel identical
   when stacked. Box-sizing keeps padding inside the explicit min-height. */
#recorder-section #generate-quick-button,
#recorder-section #generate-button {
  min-height: 40px !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
}
/* Shrink the inline SVGs (Tailwind w-6 h-6 = 24px is too chunky at this scale). */
#recorder-section #generate-quick-button svg,
#recorder-section #generate-button svg {
  width: 16px !important;
  height: 16px !important;
}
#recorder-section #generate-quick-button:hover,
#recorder-section #generate-button:hover,
#recorder-section #save-inline-report:hover {
  background: var(--accent-2) !important;
  transform: translateY(-1px);
}
/* Hover override to shift gradient for gradient buttons */
#recorder-section #us-complete-scan:hover,
#recorder-section #generate-button:hover {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%) !important;
  transform: translateY(-1px) !important;
}
#recorder-section #generate-quick-button:disabled,
#recorder-section #generate-button:disabled,
#recorder-section #us-complete-scan:disabled,
#recorder-section #save-inline-report:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
/* Keep opacity fully visible and cursor set to wait when processing/generating report */
#recorder-section #us-complete-scan.processing:disabled {
  opacity: 1 !important;
  cursor: wait !important;
}
/* Save Report sits inside the report toolbar — keep it sized like a chip, not
   a full-width CTA. */
#recorder-section #save-inline-report {
  width: auto !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
}
/* Quick Generate's nested label — keep it readable in any accent. */
#recorder-section #generate-quick-button [class*="text-green"] {
  color: rgba(255,255,255,0.7) !important;
}

/* Live speech preview chip */
#recorder-section #live-speech-preview {
  background: transparent !important;
  border: 0 !important;
  color: var(--app-fg-muted) !important;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 16px 12px;
  font-size: 12px;
}

/* ─── Mobile tab bar (sits ABOVE the panels — restored to original location) ── */
#recorder-section .panel-tab-bar {
  background: var(--app-card) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  margin: 10px 10px 0 !important;
  gap: 4px !important;
  display: none; /* hidden on desktop, set to flex in mobile media query */
  grid-template-columns: unset;
}
#recorder-section .panel-tab-bar .panel-tab {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--app-fg-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
#recorder-section .panel-tab-bar .panel-tab i { font-size: 12px; }
#recorder-section .panel-tab-bar .panel-tab:hover {
  color: var(--app-fg) !important;
  background: var(--app-bg-3) !important;
}
#recorder-section .panel-tab-bar .panel-tab.active {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* ─── Responsive tiers ───────────────────────────────────────── */
@media (max-width: 1280px) {
  #recorder-section .three-panel-layout {
    grid-template-columns: 232px 1fr 296px;
  }
  #recorder-section #format-preview-content,
  #recorder-section #report-results-content {
    padding: 36px 40px 44px !important;
  }
}

@media (max-width: 1100px) {
  #recorder-section .three-panel-layout {
    grid-template-columns: 220px 1fr 280px;
    gap: 10px;
    padding: 10px;
  }
  #recorder-section #format-preview-content,
  #recorder-section #report-results-content {
    padding: 28px 28px 36px !important;
  }
}

@media (max-width: 880px) {
  /* Mobile: tabs at top, then a single column for the active panel.
     Total height = viewport - top nav (~56px) - tabs (~52px) - margins. */
  #recorder-section { margin-left: 0 !important; margin-right: 0 !important; }

  /* Smaller textarea floor so the Generate Report button doesn't get pushed
     out of the panel / overlap on small screens. */
  #recorder-section #transcription-text {
    min-height: 100px !important;
  }
  /* Visualizer thinner on mobile so the dictate area doesn't dominate. */
  #recorder-section #visualizer.visualizer-container-v3 {
    height: 44px !important;
    margin: 6px 10px 8px !important;
  }
  /* Smaller record buttons + tighter gap so the row fits on 375px phones. */
  #recorder-section #record-button,
  #recorder-section #type-directly-button,
  #recorder-section #continue-recording-button {
    width: 52px !important;
    height: 52px !important;
    font-size: 18px !important;
  }
  /* Override Tailwind's space-x-6 (24px) on the button row. */
  #recorder-section .recorder-container > .flex.justify-center > * + * {
    margin-left: 12px !important;
  }
  #recorder-section .panel-tab-bar {
    display: flex !important;
    flex-shrink: 0;
  }
  #recorder-section .three-panel-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    gap: 0 !important;
    height: calc(100vh - 4.5rem - 60px);
    overflow: hidden;
  }
  /* When mobile-active panel is hidden, take it out of the layout entirely so
     the visible one fills 100%. */
  #recorder-section .panel.panel-hidden { display: none !important; }
  #recorder-section .panel:not(.panel-hidden) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  #recorder-section #format-preview-content,
  #recorder-section #report-results-content {
    padding: 22px 18px 28px !important;
    border-radius: 10px !important;
    max-width: 100% !important;
  }
  #recorder-section .panel-report-inner { padding: 14px !important; }
  /* Empty hero scales down */
  .tr-empty-headline { font-size: 28px !important; line-height: 1.15 !important; }
  .tr-empty-sub { font-size: 14px !important; }
  .tr-tweaks-panel { width: auto !important; }
}

/* ─── Inline rich-text editor toolbar (Edit mode on a generated report) ──── */
#recorder-section .report-editor-toolbar {
  position: sticky !important;
  top: 0;
  z-index: 20;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 8px !important;
  background: var(--app-card) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 10px !important;
  margin: 0 0 12px 0 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.3);
}
#recorder-section .report-editor-toolbar button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 30px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--app-fg-muted) !important;
  font-size: 12px !important;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease !important;
}
#recorder-section .report-editor-toolbar button:hover {
  background: var(--app-bg-3) !important;
  color: var(--app-fg) !important;
}
#recorder-section .report-editor-toolbar button.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
#recorder-section .report-editor-toolbar .toolbar-separator {
  width: 1px !important;
  height: 20px !important;
  background: var(--app-border-strong) !important;
  margin: 0 4px !important;
  flex-shrink: 0;
}
#recorder-section .report-editor-toolbar select {
  height: 30px !important;
  padding: 0 8px !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 6px !important;
  background: var(--app-bg-3) !important;
  color: var(--app-fg) !important;
  font-size: 12px !important;
  outline: none;
  cursor: pointer;
  min-width: 90px;
}
#recorder-section .report-editor-toolbar select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;
}

/* ─── Misc utility ───────────────────────────────────────────── */
/* .panel-hidden is ONLY a mobile concern. On desktop, all 3 panels show. */
@media (max-width: 880px) {
  #recorder-section .panel.panel-hidden { display: none !important; }
}
@media (min-width: 881px) {
  #recorder-section .panel.panel-hidden { display: flex !important; }
}

/* ─── Templates: Grid + Categorized variants ─────────────────── */
#recorder-section #format-list[data-style="grid"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  padding: 0 10px 10px !important;
  align-items: stretch !important;
}
#recorder-section #format-list[data-style="grid"] > div {
  display: flex;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 10px !important;
  background: var(--app-bg-3) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 10px !important;
  min-height: 64px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--app-fg) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  position: relative;
}
#recorder-section #format-list[data-style="grid"] > div:hover {
  background: var(--app-bg-4) !important;
}
#recorder-section #format-list[data-style="grid"] > div.selected,
#recorder-section #format-list[data-style="grid"] > div.active {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: 0 0 0 2px var(--accent-soft);
}
#recorder-section #format-list[data-style="grid"] > div::before {
  display: none !important;
}
#recorder-section #format-list[data-style="grid"] .tr-cat-pill {
  align-self: flex-start;
  width: 28px;
  height: 22px;
  flex-shrink: 0;
}
/* Hide pin icons / suffix elements in grid mode (they break the card) */
#recorder-section #format-list[data-style="grid"] > div .pin,
#recorder-section #format-list[data-style="grid"] > div > i.fa-thumbtack {
  display: none !important;
}

/* Edit / delete buttons on user-template cards in grid mode. Float them in the
   top-right corner at small size so they don't push the card any taller than a
   plain standard-template card. */
#recorder-section #format-list[data-style="grid"] > div .format-action-btn {
  position: absolute;
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  padding: 0 !important;
  background: transparent !important;
}
#recorder-section #format-list[data-style="grid"] > div .format-action-btn i {
  font-size: 10px !important;
}
#recorder-section #format-list[data-style="grid"] > div .edit-btn {
  top: 6px;
  right: 30px;
}
#recorder-section #format-list[data-style="grid"] > div .delete-btn {
  top: 6px;
  right: 6px;
}
/* Reserve a sliver of right padding on user cards so a long title doesn't slide
   under the floating action buttons. */
#recorder-section #format-list[data-style="grid"] > div[data-type="custom"] {
  padding-right: 56px !important;
}
/* Categorized — divider rows must span both grid columns */
#recorder-section #format-list[data-style="grid"] > .tr-cat-divider {
  grid-column: 1 / -1;
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
  padding: 14px 4px 4px !important;
}

/* Categorized — JS injects .tr-cat-divider rows between groups */
.tr-cat-divider {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-fg-soft);
  padding: 14px 14px 4px !important;
  pointer-events: none;
  display: block !important;
  background: transparent !important;
}
.tr-cat-divider::before { display: none !important; }
.tr-cat-divider .tr-cat-pill { display: none !important; }

/* ─── Tweaks panel (opened from profile dropdown) ────────────── */
/* No backdrop — page stays fully interactive so the user can click templates,
   start dictating, etc. while the panel is open and watch tweaks apply live. */

.tr-tweaks-panel {
  position: fixed;
  right: 20px;
  top: 76px;
  width: 340px;
  z-index: 100;
  background: var(--app-card);
  border: 1px solid var(--app-border-strong);
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 13px;
  color: var(--app-fg);
  animation: tr-pop 0.18s ease;
}
@keyframes tr-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tr-tweaks-panel.hidden { display: none !important; }
@media (max-width: 880px) {
  /* Bottom-sheet style on mobile: slides up from the bottom edge,
     spans full width, drag-handle pill at the top, content scrolls. */
  .tr-tweaks-panel {
    right: 0;
    left: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-width: 100%;
    max-height: 85dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px 20px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -20px 60px -10px rgba(0,0,0,0.6);
    animation: tr-sheet-up 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* Grab handle */
  .tr-tweaks-panel::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    width: 40px;
    height: 4px;
    margin: -6px auto 8px;
    border-radius: 99px;
    background: var(--app-fg-muted);
    opacity: 0.4;
  }
  .tr-tweaks-panel .twk-title {
    font-size: 17px;
  }
  /* Backdrop only renders on mobile. Tap to close (handler in HTML). */
  .tr-tweaks-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
    animation: tr-fade-in 0.2s ease;
    cursor: pointer;
  }
}
/* Desktop: keep page interactive while tweaking — no backdrop. */
@media (min-width: 881px) {
  .tr-tweaks-backdrop { display: none !important; }
}
.tr-tweaks-backdrop.hidden { display: none !important; }
@keyframes tr-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes tr-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.tr-tweaks-panel .twk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Tinted band to match the heading treatment in other modals. */
  margin: -18px -18px 4px;
  padding: 14px 18px;
  background: var(--app-bg-3);
  border-bottom: 1px solid var(--app-border);
  border-radius: 16px 16px 0 0;
}
@media (max-width: 880px) {
  /* Account for the panel's larger top padding on mobile (drag-handle space). */
  .tr-tweaks-panel .twk-head {
    margin-top: -22px;
    padding-top: 18px;
  }
}
.tr-tweaks-panel .twk-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--app-fg);
  font-family: 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tr-tweaks-panel .twk-title::before {
  content: '';
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: var(--accent, #6366f1);
  box-shadow: 0 0 8px -1px var(--accent, #6366f1);
}
.tr-tweaks-panel .twk-close {
  background: transparent;
  border: 0;
  color: var(--app-fg-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  transition: all 0.15s ease;
}
.tr-tweaks-panel .twk-close:hover {
  background: var(--app-bg-3);
  color: var(--app-fg);
}
.tr-tweaks-panel .twk-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tr-tweaks-panel .twk-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-fg-soft);
}
.tr-tweaks-panel .twk-radio-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--app-bg-3);
  border-radius: 10px;
  border: 1px solid var(--app-border);
}
.tr-tweaks-panel .twk-radio-row button {
  border: 0;
  background: transparent;
  color: var(--app-fg-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 36px;
}
.tr-tweaks-panel .twk-radio-row button:hover {
  color: var(--app-fg);
  background: var(--app-bg-4, rgba(255,255,255,0.04));
}
.tr-tweaks-panel .twk-radio-row button.on {
  background: var(--accent-soft, rgba(99,102,241,0.18));
  color: var(--app-fg);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 0 1px var(--accent, #6366f1);
}

/* ─── Shared overlay-modal presentation ────────────────────────────────────
   Applied to existing fullscreen modals (Manage Macros, Hospital Templates,
   Create / Upload Template, Report Preferences). Doesn't change any DOM —
   only adds aesthetic polish on desktop and a bottom-sheet animation on
   mobile, matching the Workspace Layout panel. */
.app-overlay-modal {
  animation: tr-fade-in 0.2s ease;
}
.app-overlay-modal.hidden { animation: none; }

.app-overlay-panel {
  animation: tr-pop 0.2s ease;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02);
  border-radius: 16px !important;
}

/* Title aesthetic — mirrors the Workspace Layout panel: accent bar prefix,
   Outfit font, tighter letter-spacing. Targets the first heading inside
   the panel's header row, regardless of original structure. */
.app-overlay-panel > div:first-child h3 {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}
.app-overlay-panel > div:first-child h3::before {
  content: '';
  width: 4px;
  height: 1.1em;
  border-radius: 3px;
  background: var(--accent, #6366f1);
  box-shadow: 0 0 8px -1px var(--accent, #6366f1);
  flex-shrink: 0;
}
/* Hide any pre-existing leading icon inside the title — the accent bar
   replaces it for consistency with the Workspace Layout panel. */
.app-overlay-panel > div:first-child h3 > svg:first-child,
.app-overlay-panel > div:first-child h3 > i:first-child {
  display: none !important;
}
/* Close button: round, soft hover — matches WL's twk-close. */
.app-overlay-panel > div:first-child button[aria-label="Close"],
.app-overlay-panel > div:first-child button[title="Close"] {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

@media (max-width: 880px) {
  /* Bottom-sheet treatment on phones. */
  .app-overlay-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .app-overlay-panel {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    max-height: 92dvh !important;
    animation: tr-sheet-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -20px 60px -10px rgba(0,0,0,0.6);
  }
  /* Drag-handle pill — absolutely positioned over the header band so it
     blends into the same background instead of creating a seam above it. */
  .app-overlay-panel::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255,255,255,0.28);
    z-index: 2;
    pointer-events: none;
  }
  /* Slight extra top padding inside the header so the title doesn't
     crowd the drag handle. */
  .app-overlay-panel > div:first-child {
    padding-top: 18px !important;
  }
}

/* Accent — segmented row of NAMED buttons (matches design brief). Each button
   has a small dot in the swatch color so you can still see at a glance, but
   the label is the source of truth. */
.tr-tweaks-panel .twk-accents {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--app-bg-3);
  border-radius: 10px;
  border: 1px solid var(--app-border);
}
.tr-tweaks-panel .twk-accent {
  border: 0;
  background: transparent;
  color: var(--app-fg-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 4px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
}
.tr-tweaks-panel .twk-accent:hover {
  color: var(--app-fg);
  background: var(--app-bg-4, rgba(255,255,255,0.04));
}
.tr-tweaks-panel .twk-accent::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}
.tr-tweaks-panel .twk-accent[data-accent="blue"]::before  { background: #3b82f6; }
.tr-tweaks-panel .twk-accent[data-accent="teal"]::before  { background: #14b8a6; }
.tr-tweaks-panel .twk-accent[data-accent="amber"]::before { background: #f59e0b; }
.tr-tweaks-panel .twk-accent[data-accent="rose"]::before  { background: #f43f5e; }
.tr-tweaks-panel .twk-accent.on {
  background: var(--accent-soft, rgba(99,102,241,0.18));
  color: var(--app-fg);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 0 1px var(--accent, #6366f1);
}

/* Accent overrides applied via [data-accent="..."] on <html> */
html[data-accent="teal"] {
  --accent: #14b8a6;
  --accent-2: #0d9488;
  --accent-soft: rgba(20,184,166,0.15);
  --accent-glow: 0 6px 22px -6px rgba(20,184,166,0.6);
}
html[data-accent="amber"] {
  --accent: #f59e0b;
  --accent-2: #d97706;
  --accent-soft: rgba(245,158,11,0.18);
  --accent-glow: 0 6px 22px -6px rgba(245,158,11,0.55);
}
html[data-accent="rose"] {
  --accent: #f43f5e;
  --accent-2: #e11d48;
  --accent-soft: rgba(244,63,94,0.15);
  --accent-glow: 0 6px 22px -6px rgba(244,63,94,0.55);
}

/* Force the existing `text-gray-*` Tailwind utilities used inside panels to
   pick up our redesign-aware foreground color so light mode reads cleanly. */
body.light-mode #recorder-section .text-gray-200,
body.light-mode #recorder-section .text-gray-300,
body.light-mode #recorder-section .text-gray-400,
body.light-mode #recorder-section .text-white {
  color: var(--app-fg) !important;
}
body.light-mode #recorder-section .text-gray-500,
body.light-mode #recorder-section .text-gray-600 {
  color: var(--app-fg-muted) !important;
}

/* ─── Accent-aware overrides for Tailwind utility classes ────────────────────
   Remaps every hardcoded bg-blue-*, ring-blue-*, accent-blue-*, text-blue-*
   used in modals, buttons, badges, and inputs to follow `--accent`. ─────── */

/* --- Primary action buttons (blue → accent) --- */
.bg-blue-600,
.bg-blue-500 {
  background-color: var(--accent) !important;
}
.hover\:bg-blue-700:hover {
  background-color: var(--accent-2) !important;
}

/* Focus rings on inputs and textareas */
.focus\:ring-blue-500:focus {
  --tw-ring-color: var(--accent) !important;
}

/* Checkbox / radio accent */
.accent-blue-500 {
  accent-color: var(--accent) !important;
}

/* Focus border for feedback modal inputs */
.focus\:border-blue-500:focus {
  border-color: var(--accent) !important;
}
.focus\:ring-blue-500:focus {
  --tw-ring-color: var(--accent) !important;
}

/* --- Text accents (badges, icons, labels) ---
   Scoped to modals / onboarding / empty-states so report-card action buttons
   keep their distinct colours (Word=blue, PDF=red, Copy=green, etc.) */
#report-preferences-onboarding .text-blue-300,
#report-preferences-modal .text-blue-300,
#no-reports-message .text-blue-300,
.rp-onboarding-card .text-blue-300,
#no-reports-message .text-blue-400 {
  color: var(--accent) !important;
}
/* "New" badge and onboarding card border */
.bg-blue-500\/15 {
  background-color: var(--accent-soft) !important;
}
.border-blue-400\/30,
.border-blue-500\/40 {
  border-color: var(--accent-soft) !important;
}
/* Onboarding "Open preferences" button shadow */
.shadow-blue-900\/40 {
  --tw-shadow-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}

/* --- Type-directly button (the keyboard icon circle) --- */
.type-directly-button.bg-blue-600 {
  background-color: var(--accent) !important;
}
.type-directly-button.bg-blue-600:hover,
.type-directly-button.hover\:bg-blue-700:hover {
  background-color: var(--accent-2) !important;
}

/* --- Profile avatar ring --- */
.rounded-full.bg-blue-600 {
  background-color: var(--accent) !important;
}

/* --- Inline "New Report" pill shown in the no-reports empty state --- */
#no-reports-message .bg-blue-600 {
  background-color: var(--accent) !important;
}

/* --- Notification badge --- */
span.bg-blue-500 {
  background-color: var(--accent) !important;
}

/* --- My Reports empty-state icon --- */
#no-reports-message .text-blue-400\/50 {
  color: var(--accent) !important;
  opacity: 0.5;
}

/* --- File upload bar accent --- */
.bg-blue-500.rounded-full {
  background-color: var(--accent) !important;
}

/* --- "Export in Hospital Template" icon ---
   Only override inside the report-editor toolbar, NOT in report cards. */
#recorder-section .export-template-button.text-purple-400 {
  color: var(--accent) !important;
}
#recorder-section .export-template-button.text-purple-400:hover,
#recorder-section .export-template-button.hover\:text-purple-300:hover {
  color: var(--accent-2) !important;
}

/* --- PRO PLAN badge in profile dropdown --- */
.text-green-500 {
  /* keep green for status dot — but override the "PRO PLAN" text */
}

/* --- Manage Macros / profile dropdown active item highlight --- */
/* Macro icon # — uses text-blue-400 which is already overridden above. */

/* --- Light mode overrides for modal backgrounds & text --- */
body.light-mode .bg-gray-800 {
  background-color: var(--app-card) !important;
}
body.light-mode .bg-gray-700 {
  background-color: var(--app-bg-3) !important;
}
body.light-mode .bg-gray-850,
body.light-mode .bg-gray-850\/60 {
  background-color: var(--app-card-2) !important;
}
body.light-mode .bg-gray-900 {
  background-color: var(--app-bg) !important;
}
body.light-mode .text-white {
  color: var(--app-fg) !important;
}
body.light-mode .text-gray-300,
body.light-mode .text-gray-200 {
  color: var(--app-fg) !important;
}
body.light-mode .text-gray-400 {
  color: var(--app-fg-muted) !important;
}
body.light-mode .border-gray-700,
body.light-mode .border-gray-600 {
  border-color: var(--app-border-strong) !important;
}
body.light-mode .border-gray-600\/30 {
  border-color: var(--app-border) !important;
}
/* Modal backdrop in light mode */
body.light-mode .bg-gray-900.bg-opacity-75 {
  background-color: rgba(0, 0, 0, 0.45) !important;
}

/* --- Ensure primary action buttons follow accent color conventions in light mode --- */
body.light-mode .bg-blue-600,
body.light-mode .bg-blue-500,
body.light-mode #us-start-new-case,
body.light-mode button:has(.fa-plus),
body.light-mode #generate-button,
body.light-mode #generate-quick-button,
body.light-mode #us-complete-scan,
body.light-mode #record-button {
  background-color: var(--accent) !important;
  background-image: none !important;
  color: var(--accent-fg) !important;
}

body.light-mode .bg-blue-600:hover,
body.light-mode .bg-blue-500:hover,
body.light-mode .hover\:bg-blue-700:hover,
body.light-mode #us-start-new-case:hover,
body.light-mode button:has(.fa-plus):hover,
body.light-mode #generate-button:hover,
body.light-mode #generate-quick-button:hover,
body.light-mode #us-complete-scan:hover,
body.light-mode #record-button:hover {
  background-color: var(--accent-2) !important;
  background-image: none !important;
  color: var(--accent-fg) !important;
}

body.light-mode #record-button,
body.light-mode #generate-button,
body.light-mode #generate-quick-button,
body.light-mode #us-complete-scan {
  box-shadow: var(--accent-glow) !important;
}

/* For gradient buttons like Complete Scan / Generate Report in light mode, preserve their gradient using theme accent colors */
body.light-mode #us-complete-scan,
body.light-mode #generate-button {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%) !important;
}
body.light-mode #us-complete-scan:hover,
body.light-mode #generate-button:hover {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%) !important;
}

/* --- Disabled-look styling for active ultrasound guard --- */
#recorder-section .record-button.us-disabled,
#recorder-section .type-directly-button.us-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
#recorder-section .record-button.us-disabled:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  transform: none !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) !important;
}
#recorder-section .type-directly-button.us-disabled:hover {
  background-color: #2563eb !important; /* bg-blue-600 */
  transform: none !important;
  box-shadow: none !important;
}

/* Segmented mode toggle (CT/MR vs Ultrasound) */
.tr-mode-seg {
  display: inline-flex;
  align-items: center;
  background: var(--app-bg-3);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 2px;
  font-size: 10px;
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
  transition: opacity 0.25s ease;
}

body.light-mode .tr-mode-seg {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.tr-mode-seg button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--app-fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  letter-spacing: 0.02em;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  line-height: 1;
}

.tr-mode-seg button:hover:not(.active):not(:disabled) {
  color: var(--app-fg);
}

.tr-mode-seg button.active {
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
}

body.light-mode .tr-mode-seg button.active {
  background: var(--accent-2); /* A slightly darker blue for better contrast in light mode */
  color: #ffffff;
}

.tr-mode-seg button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ==========================================================================
   Ultrasound Mode Onboarding Overlay
   ========================================================================== */

#ultrasound-mode-onboarding.wl-onboarding-overlay,
body.light-mode #ultrasound-mode-onboarding.wl-onboarding-overlay {
  background-color: rgba(15, 23, 42, 0.72) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Light-mode card surface: white card on the dim backdrop with blue accent */
body.light-mode #ultrasound-mode-onboarding .wl-onboarding-card {
  background: #FFFFFF !important;
  border: 1px solid #DBEAFE !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25) !important;
  color: #111827 !important;
}

body.light-mode #ultrasound-mode-onboarding .text-gray-200,
body.light-mode #ultrasound-mode-onboarding .text-gray-300,
body.light-mode #ultrasound-mode-onboarding .text-gray-400 {
  color: #374151 !important;
}

body.light-mode #ultrasound-mode-onboarding .text-xs.text-gray-400 {
  color: #4B5563 !important;
}

/* Mobile bottom sheet for Ultrasound onboarding */
@media (max-width: 640px) {
  #ultrasound-mode-onboarding.wl-onboarding-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #ultrasound-mode-onboarding .wl-onboarding-card {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 1rem 1rem 0 0 !important;
    max-height: 92dvh;
    max-height: calc(var(--vh, 1vh) * 92);
    display: flex;
    flex-direction: column;
    animation: wlOnboardingSlideUp 0.25s ease-out;
  }
  #ultrasound-mode-onboarding .wl-onboarding-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
  }
  #ultrasound-mode-onboarding .wl-onboarding-actions {
    position: sticky;
    bottom: calc(env(safe-area-inset-bottom) * -1);
    background: var(--app-card);
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-bottom: calc((0.75rem + env(safe-area-inset-bottom)) * -1);
    padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--app-border);
    z-index: 2;
  }
  body.light-mode #ultrasound-mode-onboarding .wl-onboarding-actions {
    background: #FFFFFF !important;
    border-top: 1px solid #DBEAFE !important;
  }
}

/* Onboarding Overlay Buttons Hover Transitions */
#workspace-layout-onboarding [data-wl-ob-open]:hover,
#ultrasound-mode-onboarding [data-us-ob-try]:hover {
  background: var(--accent-2, #4f46e5) !important;
  transform: translateY(-1px);
}
#workspace-layout-onboarding [data-wl-ob-open]:active,
#ultrasound-mode-onboarding [data-us-ob-try]:active {
  transform: translateY(0);
}
#workspace-layout-onboarding [data-wl-ob-snooze]:hover,
#ultrasound-mode-onboarding [data-us-ob-snooze]:hover {
  border-color: var(--accent, #6366f1) !important;
  color: var(--app-fg) !important;
}
#workspace-layout-onboarding [data-wl-ob-dismiss]:hover,
#ultrasound-mode-onboarding [data-us-ob-dismiss]:hover {
  color: var(--app-fg) !important;
}

/* Patient ID badge on report cards */
.report-patient-id-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  text-transform: uppercase;
  margin-top: 2px;
}