/* ConsultAI v2 — main stylesheet */

/* Reserve scrollbar space permanently so pages don't reflow when the
   scrollbar appears/disappears. Without this, Chart.js canvases on the
   admin stats page (and anywhere else a flex row straddles the whole
   viewport) see their container width change every time scroll toggles
   the scrollbar, which triggers a ResizeObserver redraw — visible as a
   jitter/bounce as you scroll. */
html {
  scrollbar-gutter: stable;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

:root {
  --text-secondary: #555577;  /* muted helper/hint text used throughout the builder */

  /* ── Surface tokens ──────────────────────────────────────────────────
     Two parallel panel concepts: ``--bg-panel`` is the new translucent
     "glass" surface used on large card-style components (history rows,
     report cards, feedback tiles, scenario cards) — semi-transparent
     so the mesh-gradient body background shows through, giving the
     same lighter feel as the marketing landing page. ``--bg-panel-solid``
     is the legacy opaque surface kept for places where readability is
     paramount (modals, video panels, secondary buttons, table headers,
     code blocks) and translucence would reduce contrast. Hover state
     intentionally goes to the solid hover colour even when the base
     panel is glass — hover should feel definite, not floaty.
     Light-mode overrides re-point each token below. Add new tokens
     here rather than hex-coding selector-side; that's the whole point. */
  --bg-base: #1e2a45;
  --bg-panel: rgba(22, 33, 62, 0.55);
  --bg-panel-solid: #16213e;
  --bg-panel-hover: #0f3460;
  --bg-code: #1a1a2e;
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-solid: #333;
  --panel-blur: blur(8px);
}

/* Light-mode surface token overrides — selector-side light-mode rules
   further down the file still use explicit hex codes (they predate this
   refactor); the tokens here only affect selectors that have been
   migrated to var() references. Migrate as the rest of the file is
   refreshed. */
body.light-mode {
  --bg-base: #e8e2f8;
  --bg-panel: rgba(255, 255, 255, 0.72);
  --bg-panel-solid: #f0f4fb;
  --bg-panel-hover: #e0e8f4;
  --bg-code: #e8eef7;
  --border-soft: rgba(0, 0, 0, 0.06);
  --border-solid: #c8d4e8;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-base);
  color: #e0e0e0;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Mesh gradient background — soft blurred colour blobs */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(83, 120, 190, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 15%, rgba(60, 100, 170, 0.30) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 75% 80%, rgba(100, 140, 210, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 20% 85%, rgba(50, 110, 150, 0.20) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(70, 100, 160, 0.15) 0%, transparent 50%);
}

/* ── Consultation layout ── */

.consultation-container {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100vh;
  overflow: hidden;
}

/* Top area: avatar + transcript side by side */
.consultation-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

/* ── Avatar panel ── */

.avatar-panel {
  position: relative;
  background: var(--bg-panel-solid);
  min-height: 0;
  overflow: hidden;
}

#patient-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  /* Smooth crossfade with D-ID live video */
  transition: opacity 200ms ease-in-out;
}

/* ── D-ID live video overlay (video mode only) ── */
#did-live-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;           /* sits above idle video */
  opacity: 0;           /* hidden until avatar speaks */
  transition: opacity 200ms ease-in-out;
  pointer-events: none; /* don't block clicks on overlapping controls */
}

/* D-ID status badge (top-right corner of avatar panel) */
.did-status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.did-status-badge.did-connecting {
  background: rgba(240,165,0,0.18);
  border: 1px solid rgba(240,165,0,0.5);
  color: #f0a500;
}
.did-status-badge.did-live {
  background: rgba(39,168,101,0.18);
  border: 1px solid rgba(39,168,101,0.5);
  color: #27a865;
}
.did-status-badge.did-error {
  background: rgba(233,69,96,0.18);
  border: 1px solid rgba(233,69,96,0.4);
  color: #e94560;
}

.patient-name-badge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  z-index: 5;
}

/* ── Transcript panel ── */

.transcript-panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel-hover);
  border-left: 1px solid #1a1a4e;
  min-height: 0;
  overflow: hidden;
}

.transcript-header {
  padding: 12px 20px;
  border-bottom: 1px solid #1a1a4e;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8888aa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.transcript-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  padding: 10px 14px;
  border-radius: 12px;
  max-width: 90%;
  font-size: 14px;
  line-height: 1.5;
}

.message.student {
  background: #6d35b8;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.message.patient {
  background: #1a3a6e;
  color: #e8f0ff;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.message .label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.message.student .label {
  color: #d8b4fe;
}

.message.patient .label {
  color: #7dd3fc;
}

/* ── Bottom bar: controls + competency progress ── */

.controls-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg-panel-solid);
  border-top: 1px solid #1a1a4e;
  gap: 24px;
}

/* Left column: status flush left, resource buttons centred in remaining space */
.controls-left {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

/* Images / Records buttons centred within their 1fr cell */
.avatar-resource-btns {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
}

/* Right column: BNF/BNFc centred horizontally; competency stack flush right */
.controls-right {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.controls-right .transcript-resource-btns {
  justify-self: center;
}

.controls-right-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
}

/* Guidance / future right-side buttons */
.right-resource-btns {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
}

/* Push-to-talk button */
.ptt-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.ptt-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  gap: 12px;
}

/* Resource buttons (Images / Records) */
.resource-btn {
  background: #1a1a4e;
  border: 1px solid #533483;
  color: #c0c0e0;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.resource-btn:hover {
  background: #2a1a5e;
  border-color: #7b4fb8;
  color: #fff;
}

.resource-btn.hidden {
  display: none;
}

/* BNF / BNFc reference links — sit centred below the transcript box */
.transcript-resource-btns {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
}

.resource-btn.resource-btn-bnf {
  background: rgba(39, 168, 101, 0.15);
  border-color: #27a865;
  color: #6fe0a4;
  text-decoration: none;
}
.resource-btn.resource-btn-bnf:hover {
  background: rgba(39, 168, 101, 0.28);
  border-color: #2fcc7a;
  color: #fff;
}

.resource-btn.resource-btn-bnfc {
  background: rgba(232, 91, 168, 0.15);
  border-color: #e85ba8;
  color: #f7a8d3;
  text-decoration: none;
}
.resource-btn.resource-btn-bnfc:hover {
  background: rgba(232, 91, 168, 0.28);
  border-color: #ff7ec0;
  color: #fff;
}

/* Counter Intelligence Plus (CI+) — pharmacy clinical reference site.
   Sky-blue accent so it sits alongside BNF (green) and BNFc (pink)
   without colour-clashing. Same opacity / hover treatment as the
   other two so the three buttons read as a coherent set. */
.resource-btn.resource-btn-ciplus {
  background: rgba(108, 176, 255, 0.15);
  border-color: #6cb0ff;
  color: #a8d0ff;
  text-decoration: none;
}
.resource-btn.resource-btn-ciplus:hover {
  background: rgba(108, 176, 255, 0.28);
  border-color: #8fc4ff;
  color: #fff;
}

#ptt-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #27a865;
  background: rgba(39, 168, 101, 0.1);
  color: #e0e0e0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

#ptt-btn:hover {
  border-color: #34d27e;
  background: rgba(39, 168, 101, 0.2);
}

#ptt-btn.recording {
  border-color: #e94560;
  background: rgba(233, 69, 96, 0.15);
  box-shadow: 0 0 20px rgba(233, 69, 96, 0.4);
}

#ptt-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#ptt-btn.hidden {
  display: none;
}

/* Text input area (text-mode replacement for the PTT button) */
.text-input-area {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  min-width: 620px;
  max-width: 1560px;
}

.text-input-area.hidden {
  display: none;
}

.text-input-area textarea {
  flex: 1;
  resize: none;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #533483;
  background: #1a1a3e;
  color: #e0e0e0;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  outline: none;
  min-height: 44px;
  max-height: 110px;
  overflow-y: auto;
}

.text-input-area textarea:focus {
  border-color: #7b5ea7;
  box-shadow: 0 0 0 2px rgba(83, 52, 131, 0.25);
}

.text-input-area textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.text-send-btn {
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 10px;
  background: #533483;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.text-send-btn:hover:not(:disabled) {
  background: #7b5ea7;
}

.text-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Compact control pills in the transcript header ── */

.ctrl-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.ctrl-pill {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #b0b8cc;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ctrl-pill:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  color: #e0e0f0;
}

.ctrl-pill.open {
  background: rgba(83,52,131,0.4);
  border-color: #533483;
  color: #e0e0f0;
}

/* Popover dropdown */
.ctrl-popover {
  position: fixed;
  background: #1a1a3e;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 9999;
  overflow: hidden;
  min-width: 110px;
  animation: ctrlPopIn 0.12s ease;
}

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

.ctrl-pop-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  color: #8888aa;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.ctrl-pop-item:hover {
  background: rgba(255,255,255,0.07);
  color: #e0e0f0;
}

.ctrl-pop-item.active {
  color: #c0a8f0;
  font-weight: 600;
}

/* Competency progress */
.competency-area {
  text-align: right;
}

.competency-progress {
  font-size: 13px;
  color: #8888aa;
}

.competency-progress .score {
  font-size: 20px;
  font-weight: 700;
  color: #53d8a8;
}

/* Status area */
.status-area {
  font-size: 13px;
  color: #8888aa;
}

.status-area .status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: #666;
}

.status-area .status-dot.connected {
  background: #53d8a8;
}

.status-area .status-dot.error {
  background: #e94560;
}

/* ── Consultation timer pill ── */

.timer-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(83, 216, 168, 0.15);
  color: #53d8a8;
  border: 1px solid rgba(83, 216, 168, 0.3);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  letter-spacing: 0.04em;
}

.timer-pill::before {
  content: "⏱";
  font-size: 11px;
}

.timer-pill.amber {
  background: rgba(255, 180, 0, 0.15);
  color: #ffb400;
  border-color: rgba(255, 180, 0, 0.35);
  animation: timer-pulse 1.5s ease-in-out infinite;
}

.timer-pill.red {
  background: rgba(233, 69, 96, 0.2);
  color: #e94560;
  border-color: rgba(233, 69, 96, 0.45);
  animation: timer-pulse 0.8s ease-in-out infinite;
}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ── End consultation button ── */

#end-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #e94560;
  background: rgba(233, 69, 96, 0.1);
  color: #e0e0f0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}

#end-btn:hover {
  background: rgba(233, 69, 96, 0.25);
  border-color: #ff6b84;
  box-shadow: 0 0 16px rgba(233, 69, 96, 0.35);
}

#end-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#end-btn.generating {
  border-color: #27a865;
  background: rgba(39, 168, 101, 0.15);
  color: #7de8b0;
  cursor: default;
  font-size: 10px;
  box-shadow: 0 0 16px rgba(39, 168, 101, 0.3);
}

/* ── Panel toggle slider (in transcript header) ── */

.panel-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: 10px;
  flex-shrink: 0;
}

.panel-toggle input {
  display: none;
}

.panel-toggle-track {
  position: relative;
  width: 32px;
  height: 18px;
  background: #6b6b80;
  border-radius: 9px;
  transition: background 0.2s;
}

.panel-toggle input:not(:checked) ~ .panel-toggle-track {
  background: #333;
}

.panel-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.panel-toggle input:not(:checked) ~ .panel-toggle-track .panel-toggle-thumb {
  transform: translateX(0);
}

.panel-toggle input:checked ~ .panel-toggle-track .panel-toggle-thumb {
  transform: translateX(14px);
}

/* ── Immersive mode restore button (avatar panel, only visible when immersive) ── */

#immersive-restore-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(30, 20, 60, 0.75);
  color: #c0b8e0;
  border: 1px solid rgba(180, 160, 255, 0.3);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#immersive-restore-btn:hover {
  background: rgba(83, 52, 131, 0.7);
  color: #fff;
  border-color: rgba(180, 160, 255, 0.6);
}

.consultation-main.immersive-mode #immersive-restore-btn {
  display: flex;
}

/* ── Immersive mode: hide transcript + competency panel ── */

.consultation-main.immersive-mode {
  grid-template-columns: 1fr;
}

.consultation-main.immersive-mode .transcript-panel {
  display: none;
}


.consultation-main.immersive-mode #patient-video,
.consultation-main.immersive-mode #did-live-video {
  object-fit: contain;
  object-position: center;
}

/* ── Loading overlay ── */

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  z-index: 100;
  font-size: 16px;
}

.loading-overlay.hidden {
  display: none;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #333;
  border-top-color: #533483;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ── Scrollbar ── */

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

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

.transcript-messages::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}

/* ══════════════════════════════════════════
   Results page
   ══════════════════════════════════════════ */

.results-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  overflow-y: auto;
  height: 100vh;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.results-header h1 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 4px;
}

.results-subtitle {
  font-size: 14px;
  color: #fff;
}

.results-header-actions {
  display: flex;
  gap: 10px;
}

/* Buttons */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s;
}

.btn-primary {
  background: #533483;
  color: #fff;
}

.btn-primary:hover { background: #7b5ea7; }

.btn-secondary {
  background: var(--bg-panel-solid);
  color: #e0e0e0;
  border: 1px solid #333;
}

.btn-secondary:hover { background: var(--bg-panel-hover); }

.btn-danger {
  background: #c0392b;
  color: #fff;
}

.btn-danger:hover { background: #e94560; }

/* Bulk-select column in admin tables */
.col-select {
  width: 32px;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

.col-select input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #533483;
}

.col-thumb {
  width: 44px;
  padding-left: 4px;
  padding-right: 4px;
}

.scenario-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #0f0f28;
  border: 1px solid #333;
  display: block;
}

.scenario-thumb-empty {
  background: #0f0f28;
}

/* Score ring */
.results-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  margin-bottom: 32px;
  align-items: start;
}

.results-grid.two-col {
  grid-template-columns: 1fr 1fr;
}

.score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.score-ring {
  position: relative;
  width: 120px;
  height: 120px;
}

.score-ring svg {
  width: 100%;
  height: 100%;
}

.score-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

.score-label {
  font-size: 13px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Report cards — glass-treatment surface (translucent + backdrop blur)
   matching the marketing landing's panel style. Falls back to the solid
   panel token via the @supports query for browsers without
   backdrop-filter so text doesn't end up on a near-transparent box. */
.report-card {
  background: var(--bg-panel);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 20px 24px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .report-card { background: var(--bg-panel-solid); }
}

.report-card h2, .report-card h3 {
  font-size: 15px;
  color: #8888aa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.report-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #d0d0e0;
}

.highlight-card {
  border-left: 3px solid #53d8a8;
}

.improvement-card {
  border-left: 3px solid #f0a500;
}

/* Report sections */
.report-section {
  margin-bottom: 32px;
}

.report-section h2 {
  font-size: 15px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

/* Competency grid */
.competency-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.competency-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg-panel);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 14px 18px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .competency-card { background: var(--bg-panel-solid); }
}

.competency-status {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.competency-status.passed {
  background: rgba(83, 216, 168, 0.15);
  color: #53d8a8;
}

.competency-status.missed {
  background: rgba(233, 69, 96, 0.15);
  color: #e94560;
}

.competency-status.partial {
  background: rgba(240, 165, 0, 0.18);
  color: #f0a500;
}

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

.competency-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.competency-score {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.03);
  line-height: 1.4;
}

/* Wraps the achievement score and the weight label as a single column
   in the title row. Score sits on top (visually dominant), weight label
   sits below in muted text so students can see the contribution-to-
   overall without it competing with the headline score. */
.competency-score-stack {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

/* Small subtext under the achievement score showing the competency's
   weight in the overall rubric — e.g. "weight: 30%". Deliberately
   muted (smaller, lower-contrast) so the achievement % stays the
   primary number on the card. Hidden entirely when the report
   payload doesn't carry a weight (older sessions, or scenarios
   whose competencies don't declare weights). */
.competency-weight-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #8a8aaa;
  text-transform: lowercase;
  padding: 0 6px;
}
body.light-mode .competency-weight-label,
html.light-mode body .competency-weight-label {
  color: #7a80a0;
}

.competency-title {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

.competency-feedback {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg-panel);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 12px 16px;
}

.timeline-turn {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #c5b3e6;
  background: rgba(83, 52, 131, 0.25);
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
  margin-top: 2px;
}

.timeline-content {
  font-size: 13px;
  line-height: 1.5;
  color: #ccc;
}

.timeline-content strong {
  color: #e0e0e0;
}

.timeline-content p {
  margin-top: 4px;
  color: #666;
}

.empty-state {
  color: #666;
  font-style: italic;
  font-size: 14px;
}

/* ══════════════════════════════════════════
   Assessment panel (consultation sidebar)
   ══════════════════════════════════════════ */

.assessment-panel {
  padding: 12px 16px;
  max-height: 200px;
  overflow-y: auto;
  flex-shrink: 0;
  transition: max-height 0.2s ease, padding 0.2s ease;
}

.assessment-panel.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.assessment-panel-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8888aa;
  padding: 10px 16px;
  border-top: 1px solid #1a1a4e;
  flex-shrink: 0;
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}

.assessment-panel-header:hover { color: #c8c8e0; }

.assessment-caret {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 10px;
}

.assessment-panel-header.collapsed .assessment-caret {
  transform: rotate(-90deg);
}

.assessment-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.assessment-item.demonstrated {
  opacity: 1;
}

.assessment-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.assessment-icon.pending {
  color: #666;
}

.assessment-icon.achieved {
  color: #53d8a8;
  background: rgba(83, 216, 168, 0.15);
}

.assessment-name {
  font-size: 12px;
  color: #ccc;
  flex: 1;
}

.assessment-weight {
  font-size: 11px;
  color: #666;
}

/* ══════════════════════════════════════════
   Feedback modal
   ══════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  background: var(--bg-panel-solid);
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 0;
}

.modal-header h2 {
  font-size: 18px;
  color: #fff;
}

.modal-close {
  background: none;
  border: none;
  color: #8888aa;
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
}

.modal-close:hover { color: #fff; }

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #1a1a4e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ── Large modal (Images / Records) ── */

.modal.modal-lg {
  max-width: 800px;
  width: 95%;
}

/* Image gallery */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.image-card {
  background: #0f1a35;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1a1a4e;
}

.image-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.2s ease;
  display: block;
}

.image-card img.zoomed {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.9);
  z-index: 300;
  cursor: zoom-out;
  border-radius: 0;
}

.image-caption {
  padding: 10px 12px;
  font-size: 13px;
  color: #aaa;
}

/* Records list */
.records-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.record-card {
  background: #0f1a35;
  border-radius: 10px;
  border: 1px solid #1a1a4e;
  padding: 16px 20px;
}

.record-card h3 {
  font-size: 15px;
  color: #7b9fd4;
  margin-bottom: 10px;
}

.record-content {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  color: #c0c0e0;
  white-space: pre-wrap;
  line-height: 1.6;
  background: #0a1228;
  padding: 12px 16px;
  border-radius: 8px;
  overflow-x: auto;
}

.feedback-msg {
  font-size: 13px;
}

.rating-group {
  margin-bottom: 18px;
}

.rating-group label {
  display: block;
  font-size: 13px;
  color: #aaa;
  margin-bottom: 8px;
}

.star-rating {
  display: flex;
  gap: 6px;
}

.star {
  font-size: 28px;
  color: #444;
  cursor: pointer;
  transition: color 0.1s;
  user-select: none;
}

.star.active, .star:hover {
  color: #f0a500;
}

/* MCQ radio buttons in feedback modal */
.fb-mcq-radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-body .form-group label.fb-mcq-radio-label,
.fb-mcq-radio-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1;
  color: #ccc;
  cursor: pointer;
  padding: 10px 12px;
  margin-bottom: 0;
  border-radius: 6px;
  border: 1px solid #2a2a4e;
  background: rgba(22, 33, 62, 0.5);
  transition: border-color 0.15s, background 0.15s;
}
.fb-mcq-radio-label:hover {
  border-color: #533483;
  background: rgba(83, 52, 131, 0.15);
}
.fb-mcq-radio-label input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  margin: 0;
  flex-shrink: 0;
  accent-color: #7b5ea7;
  vertical-align: middle;
  position: relative;
  top: 0;
}

.modal-body .form-group {
  margin-bottom: 14px;
}

.modal-body .form-group label {
  display: block;
  font-size: 13px;
  color: #aaa;
  margin-bottom: 6px;
}

.modal-body .form-group input,
.modal-body .form-group select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #333;
  background: var(--bg-panel-hover);
  color: #e0e0e0;
  font-size: 14px;
  outline: none;
}

.modal-body .form-group input:focus,
.modal-body .form-group select:focus {
  border-color: #533483;
}

.modal-body textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #333;
  background: var(--bg-panel-hover);
  color: #e0e0e0;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
}

.modal-body textarea:focus {
  border-color: #533483;
}

/* Trophy / XP modal uses .form-row / .form-row-2col / .form-row-3col instead
   of .form-group (legacy markup variant). Mirror the dark-themed input
   styling onto those classes so the inputs don't fall through to the
   browser's light defaults inside the dark modal shell. */
.modal-body .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.modal-body .form-row.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.modal-body .form-row.form-row-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.modal-body .form-row.form-row-2col > div,
.modal-body .form-row.form-row-3col > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-body .form-row label {
  font-size: 13px;
  color: #aaa;
  margin: 0;
  display: block;
}
.modal-body .form-row input,
.modal-body .form-row select,
.modal-body .form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #333;
  background: var(--bg-panel-hover);
  color: #e0e0e0;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.modal-body .form-row input:focus,
.modal-body .form-row select:focus,
.modal-body .form-row textarea:focus {
  border-color: #533483;
}

/* Emoji picker for the trophy icon field — opens below the input as a grid
   of common achievement emoji. Tap one to fill the input and close. */
.trophy-icon-wrap {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.trophy-icon-wrap input { flex: 1; }
.trophy-icon-picker-btn {
  background: var(--bg-panel-hover);
  border: 1px solid #333;
  color: #e0e0e0;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.trophy-icon-picker-btn:hover {
  background: #1a4a7a;
  border-color: #533483;
}
.trophy-icon-panel {
  margin-top: 6px;
  padding: 8px;
  background: #0a1428;
  border: 1px solid #2a2a4e;
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
.trophy-icon-panel.hidden { display: none; }
.trophy-icon-panel button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  border-radius: 6px;
  font-size: 20px;
  line-height: 1;
}
.trophy-icon-panel button:hover {
  background: rgba(83, 52, 131, 0.3);
}

/* ── Feedback icon button (consultation page corner) ── */

#feedback-icon-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(0, 0, 0, 0.5);
  color: #8888aa;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}

#feedback-icon-btn:hover {
  color: #fff;
}

/* ══════════════════════════════════════════
   Admin dashboard
   ══════════════════════════════════════════ */

/* Login screen */
.admin-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.admin-login.hidden { display: none; }

.admin-login-card {
  background: var(--bg-panel-solid);
  border-radius: 16px;
  padding: 40px 36px;
  width: 90%;
  max-width: 380px;
  text-align: center;
}

.admin-login-card h1 {
  font-size: 22px;
  color: #fff;
  margin-bottom: 8px;
}

.admin-login-card p {
  font-size: 14px;
  color: #8888aa;
  margin-bottom: 20px;
}

.admin-login-card .form-group {
  margin-bottom: 14px;
}

.admin-login-card input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #333;
  background: var(--bg-panel-hover);
  color: #e0e0e0;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.admin-login-card input:focus {
  border-color: #533483;
}

.error-msg {
  margin-top: 12px;
  font-size: 13px;
  color: #e94560;
}

/* Allow body scroll on admin page */
body:has(.admin-dashboard:not(.hidden)) {
  overflow: auto;
}

/* Dashboard layout */
.admin-dashboard {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-dashboard.hidden { display: none; }

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #1a1a4e;
  flex-shrink: 0;
}

.admin-header h1 {
  font-size: 18px;
  color: #fff;
}

.admin-header-actions {
  display: flex;
  gap: 10px;
}

/* Tabs */
.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #1a1a4e;
  padding: 0 24px;
  flex-shrink: 0;
}

.admin-tab {
  background: none;
  border: none;
  color: #8888aa;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.admin-tab:hover {
  color: #ccc;
}

.admin-tab.active {
  color: #fff;
  border-bottom-color: #533483;
}

/* Builder tabs — distinct amber/gold colour to separate them from data tabs */
.admin-tab.builder-tab {
  color: #a07830;
}

.admin-tab.builder-tab:hover {
  color: #c99a48;
}

.admin-tab.builder-tab.active {
  color: #f0b84a;
  border-bottom-color: #f0b84a;
}

/* Panels */
.admin-panel {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.admin-panel.hidden { display: none; }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.panel-header h2 {
  font-size: 16px;
  color: #fff;
}

.panel-filters {
  display: flex;
  gap: 10px;
}

.panel-filters input,
.panel-filters select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #333;
  background: var(--bg-panel-hover);
  color: #e0e0e0;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.panel-filters input:focus,
.panel-filters select:focus {
  border-color: #533483;
}

.badge {
  background: #533483;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

/* Admin table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table thead th {
  text-align: left;
  padding: 10px 12px;
  color: #8888aa;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #1a1a4e;
  white-space: nowrap;
}

.admin-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #1a1a4e;
  color: #d0d0e0;
  vertical-align: middle;
}

.admin-table tbody tr:hover {
  background: rgba(83, 52, 131, 0.08);
}

/* Bulk action bar */
.bulk-action-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #1a1a4e;
  border: 1px solid #533483;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 13px;
}
.bulk-action-bar.hidden { display: none; }
.bulk-action-bar .bulk-count { color: #c0b0e0; font-weight: 600; flex: 1; }
.bulk-action-bar .bulk-clear { background: none; border: none; color: #8888aa; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.bulk-action-bar .bulk-clear:hover { color: #e0e0e0; }

/* Checkbox column */
.admin-table .col-check { width: 36px; padding: 0 6px 0 10px; text-align: center; }
.admin-table input[type="checkbox"].row-check,
.admin-table input[type="checkbox"]#select-all-users {
  width: 15px; height: 15px; cursor: pointer; accent-color: #7b5ea7;
}

/* Sortable column headers */
.admin-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.admin-table thead th.sortable:hover {
  color: #c0b0e0;
}
.sort-icon {
  display: inline-block;
  margin-left: 4px;
  font-style: normal;
  opacity: 0.65;
  color: #a0aec0;
  font-size: 10px;
  vertical-align: middle;
}
.sort-icon.asc  { opacity: 1; color: #53d8a8; }
.sort-icon.desc { opacity: 1; color: #53d8a8; }

/* Per-column filter row */
.admin-table thead tr.filter-row td {
  padding: 4px 6px 8px;
  border-bottom: 2px solid #1a1a4e;
}
.col-filter {
  width: 100%;
  padding: 5px 7px;
  background: #0a0a20;
  border: 1px solid #2a2a4e;
  border-radius: 5px;
  color: #d0d0e0;
  font-size: 11px;
  box-sizing: border-box;
}
.col-filter:focus {
  border-color: #533483;
  outline: none;
}
.col-filter::placeholder { color: #44446a; }

/* Difficulty badges */
.difficulty-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.difficulty-badge.beginner {
  background: rgba(83, 216, 168, 0.15);
  color: #53d8a8;
}

.difficulty-badge.intermediate {
  background: rgba(240, 165, 0, 0.15);
  color: #f0a500;
}

.difficulty-badge.advanced {
  background: rgba(233, 69, 96, 0.15);
  color: #e94560;
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.score-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
}

.status-badge.completed {
  background: rgba(83, 216, 168, 0.15);
  color: #53d8a8;
}

.status-badge.active {
  background: rgba(240, 165, 0, 0.15);
  color: #f0a500;
}

.status-badge.inactive {
  background: rgba(136, 136, 170, 0.15);
  color: #8888aa;
}

/* Amendment 6: badge shown next to sessions the student has soft-deleted.
   Admin still sees the row — this flag warns them the student tried to hide it. */
.status-badge.hidden-by-student {
  background: rgba(233, 69, 96, 0.15);
  color: #e94560;
  margin-left: 4px;
}

/* Amendment 8: input mode badge in admin sessions table */
.mode-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.mode-badge.mode-voice {
  background: rgba(123, 94, 167, 0.18);
  color: #b9a2dd;
}

.mode-badge.mode-text {
  background: rgba(83, 216, 168, 0.15);
  color: #53d8a8;
}

.mode-badge.mode-video {
  background: rgba(74, 158, 255, 0.15);
  color: #4a9eff;
}

/* Button link */
.btn-link {
  background: none;
  border: none;
  color: #7b5ea7;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.btn-link:hover {
  color: #a88dd4;
}

.btn-link.danger {
  color: #e94560;
  margin-left: 10px;
}

.btn-link.danger:hover {
  color: #ff7088;
}

/* Session detail modal sections */
.detail-section {
  margin-bottom: 24px;
}

.detail-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: #8888aa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #1a1a4e;
}

.detail-section p {
  font-size: 14px;
  line-height: 1.6;
  color: #d0d0e0;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 13px;
  color: #ccc;
}

.detail-grid strong {
  color: #8888aa;
}

/* Transcript replay in modal */
.transcript-replay {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
}

/* Feedback summary stats */
.feedback-summary {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.feedback-stat {
  background: var(--bg-panel);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px 24px;
  text-align: center;
  min-width: 120px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .feedback-stat { background: var(--bg-panel-solid); }
}

.feedback-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

.feedback-stat-label {
  font-size: 12px;
  color: #8888aa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Star display in feedback table */
.star-display {
  color: #f0a500;
  font-size: 13px;
  letter-spacing: 1px;
}

/* Comment cell truncation */
.comment-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════
   Student session history page
   ══════════════════════════════════════════ */

.history-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  overflow-y: auto;
  height: 100vh;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.history-header h1 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 4px;
}

.history-subtitle {
  font-size: 14px;
  color: #8888aa;
}

.history-actions {
  display: flex;
  gap: 10px;
}

.history-prompt {
  text-align: center;
  margin-top: 60px;
}

.history-prompt .form-group {
  margin-bottom: 16px;
}

.history-prompt label {
  display: block;
  font-size: 14px;
  color: #aaa;
  margin-bottom: 10px;
}

.history-prompt input {
  width: 100%;
  max-width: 300px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #333;
  background: var(--bg-panel-solid);
  color: #e0e0e0;
  font-size: 15px;
  outline: none;
}

.history-prompt input:focus {
  border-color: #533483;
}

.history-loading {
  display: flex;
  justify-content: center;
  padding: 60px 0;
}

.history-empty {
  text-align: center;
  padding: 60px 0;
  color: #8888aa;
  font-size: 15px;
}

.history-empty a {
  color: #7b5ea7;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-panel);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px 20px;
  transition: background 0.15s;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .history-card { background: var(--bg-panel-solid); }
}

.history-card:hover {
  background: var(--bg-panel-hover);
}

.history-card-left {
  flex-shrink: 0;
}

.history-card-score {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  background: rgba(136, 136, 170, 0.1);
  color: #8888aa;
}

.history-card-score.score-high {
  background: rgba(83, 216, 168, 0.15);
  color: #53d8a8;
}

.history-card-score.score-mid {
  background: rgba(240, 165, 0, 0.15);
  color: #f0a500;
}

.history-card-score.score-low {
  background: rgba(233, 69, 96, 0.15);
  color: #e94560;
}

.history-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: rgba(136, 136, 170, 0.1);
}

.history-card-body {
  flex: 1;
  min-width: 0;
}

.history-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 6px;
}

.history-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: #8888aa;
  margin-bottom: 4px;
}

.history-card-date {
  font-size: 12px;
  color: #666;
}

.history-card-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-delete {
  background: none;
  border: none;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.btn-delete:hover {
  color: #e94560;
  background: rgba(233, 69, 96, 0.1);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

/* ══════════════════════════════════════════
   Print styles (results page export)
   ══════════════════════════════════════════ */

@media print {
  body {
    background: #fff;
    color: #222;
    overflow: visible;
  }

  .loading-overlay,
  #feedback-btn,
  .modal-overlay,
  .results-header-actions .btn-primary {
    display: none !important;
  }

  .results-container {
    max-width: 100%;
    padding: 20px;
    height: auto;
    overflow: visible;
  }

  .report-card,
  .competency-card,
  .timeline-item {
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #222;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-card h2,
  .report-card h3,
  .report-section h2,
  .detail-section h3 {
    color: #555;
  }

  .report-card p,
  .competency-feedback,
  .timeline-content {
    color: #333;
  }

  .score-ring svg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .highlight-card {
    border-left-color: #2a9d6a;
  }

  .improvement-card {
    border-left-color: #c08600;
  }

  .competency-status.passed { color: #2a9d6a; }
  .competency-status.missed { color: #c0392b; }

  .results-header h1 { color: #222; }
  .results-subtitle { color: #666; }
  .score-value { color: #222; }
  .score-label { color: #666; }
  .competency-title { color: #222; }
  .timeline-turn { color: #533483; background: #f0ebf5; }
  .timeline-content strong { color: #222; }
}

/* ══════════════════════════════════════════
   Responsive adjustments
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
  .consultation-main {
    grid-template-columns: 1fr;
    grid-template-rows: 45vh 1fr;
  }

  .transcript-panel {
    border-left: none;
    border-top: 1px solid #1a1a4e;
  }

  .controls-bar {
    grid-template-columns: 1fr auto;
    padding: 12px 16px;
  }

  .competency-area { display: none; }

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

  .results-grid.two-col {
    grid-template-columns: 1fr;
  }

  .score-card {
    justify-self: center;
  }

  /* Admin responsive */
  .admin-tabs {
    padding: 0 12px;
  }

  .admin-tab {
    padding: 10px 14px;
    font-size: 13px;
  }

  .admin-panel {
    padding: 16px;
  }

  .panel-filters {
    flex-direction: column;
    width: 100%;
  }

  .admin-table {
    font-size: 12px;
  }

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

  .feedback-summary {
    flex-direction: column;
    gap: 10px;
  }

  /* History responsive */
  .history-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .history-card-action {
    align-self: flex-end;
  }

  /* Resource buttons responsive */
  .resource-btn {
    padding: 8px 10px;
    font-size: 11px;
  }

  .image-gallery {
    grid-template-columns: 1fr;
  }

  .modal.modal-lg {
    width: 98%;
    max-height: 90vh;
  }
}

/* ── Feedback Form Builder ── */

.fb-builder-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fb-builder-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-panel-solid);
  border: 1px solid #333355;
  border-radius: 10px;
  padding: 12px 14px;
}

.fb-builder-handle {
  color: #666;
  font-size: 16px;
  padding-top: 24px;
  cursor: grab;
  user-select: none;
}

.fb-builder-fields {
  flex: 1;
  min-width: 0;
}

.fb-builder-fields .form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fb-builder-fields .form-group {
  margin-bottom: 0;
}

.fb-builder-fields .form-group label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8888aa;
  margin-bottom: 4px;
}

.fb-builder-fields .form-group input,
.fb-builder-fields .form-group select {
  width: 100%;
  padding: 7px 10px;
  background: #0f1a35;
  border: 1px solid #333355;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 13px;
  font-family: inherit;
}

.fb-builder-fields .form-group input:focus,
.fb-builder-fields .form-group select:focus {
  border-color: #53d8a8;
  outline: none;
}

/* MCQ option text inputs sit inside .fb-mcq-option (no .form-group wrapper),
   so they don't pick up the rule above. Mirror the same dark styling here. */
.fb-builder-fields .fb-mcq-opt-input {
  padding: 7px 10px;
  background: #0f1a35;
  border: 1px solid #333355;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.fb-builder-fields .fb-mcq-opt-input::placeholder {
  color: #5a6280;
}
.fb-builder-fields .fb-mcq-opt-input:focus {
  border-color: #53d8a8;
}

.fb-builder-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
}

.fb-builder-actions .btn-remove {
  font-size: 14px;
  padding: 2px 6px;
}

.fb-builder-actions .btn-remove:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

/* ── Model Builder (Prompt Editor) ── */

.prompt-editor-section {
  margin-bottom: 28px;
}

.prompt-editor-section h3 {
  color: #53d8a8;
  font-size: 15px;
  margin-bottom: 6px;
}

.prompt-editor-hint {
  font-size: 12px;
  color: #8888aa;
  margin-bottom: 10px;
  line-height: 1.5;
}

.prompt-editor-hint code {
  background: var(--bg-code);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #53d8a8;
}

.prompt-editor-textarea {
  width: 100%;
  background: var(--bg-code);
  color: #e0e0e0;
  border: 1px solid #333355;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  tab-size: 2;
}

.prompt-editor-textarea:focus {
  outline: none;
  border-color: #53d8a8;
}

.prompt-tone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.prompt-tone-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Model Builder preset cards ── */
.preset-card {
  background: #15152e;
  border: 1px solid #333355;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

.preset-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.preset-card-header h3 {
  color: #53d8a8;
  font-size: 15px;
  margin: 0;
}

.preset-active-line {
  font-size: 12px;
  color: #8888aa;
}

.preset-active-line strong {
  color: #e0e0e0;
}

.preset-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.preset-toolbar label {
  font-size: 12px;
  color: #8888aa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preset-toolbar .preset-select {
  background: var(--bg-panel-hover);
  color: #e0e0e0;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  min-width: 220px;
  font-family: inherit;
}

.preset-toolbar .preset-select:focus {
  outline: none;
  border-color: #53d8a8;
}

.preset-toolbar button {
  font-size: 12px;
  padding: 6px 12px;
}

.preset-active-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #53d8a8;
  background: rgba(83, 216, 168, 0.12);
  border: 1px solid rgba(83, 216, 168, 0.4);
  padding: 3px 8px;
  border-radius: 999px;
}

.preset-model-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: rgba(15, 52, 96, 0.35);
  border: 1px solid rgba(83, 216, 168, 0.2);
  border-radius: 8px;
}

.preset-model-row label {
  font-size: 12px;
  color: #8888aa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preset-model-row .preset-provider-select,
.preset-model-row .preset-model-picker {
  background: var(--bg-panel-hover);
  color: #e0e0e0;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  min-width: 180px;
}

.preset-model-row .preset-model-picker {
  flex: 1 1 260px;
  min-width: 260px;
  font-family: 'Courier New', monospace;
}

.preset-model-row .preset-provider-select:focus,
.preset-model-row .preset-model-picker:focus {
  outline: none;
  border-color: #53d8a8;
}

.preset-model-row .preset-model-refresh-btn {
  font-size: 14px;
  padding: 4px 10px;
  line-height: 1;
}

.preset-fields {
  margin-top: 8px;
}

.preset-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.preset-card-footer .preset-status {
  flex: 1;
  font-size: 12px;
}

.preset-card-footer button {
  margin-left: 8px;
}

.preset-card-footer button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Scenario Builder ── */

.builder-form {
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.builder-fieldset {
  background: #15152e;
  border: 1px solid #333355;
  border-radius: 10px;
  padding: 0;
  margin-bottom: 18px;
}

.builder-fieldset legend {
  /* Pull legend out of the fieldset border and into the card as a proper header */
  float: left;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 18px;
  margin: 0;
  font-weight: 600;
  font-size: 15px;
  color: #53d8a8;
  border-bottom: 1px solid #333355;
  cursor: pointer;
  user-select: none;
}

.builder-fieldset-body {
  clear: both;  /* clear the floated legend */
  padding: 14px 18px 18px;
}

.form-row {
  display: flex;
  gap: 14px;
}

.form-row .form-group {
  flex: 1;
}

.builder-form .form-group {
  margin-bottom: 12px;
}

.builder-form .form-group label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8888aa;
  margin-bottom: 4px;
}

.builder-form .form-group input,
.builder-form .form-group select,
.builder-form .form-group textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-panel-solid);
  border: 1px solid #333355;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 14px;
  font-family: inherit;
}

.builder-form .form-group textarea {
  resize: vertical;
}

.builder-form .form-group small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #555577;
  line-height: 1.4;
}

/* Timer option fields — greyed out until a time limit is entered */
.timer-options-disabled label {
  opacity: 0.4;
}

.timer-options-disabled select {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.timer-options-disabled small {
  opacity: 0.4;
}

.builder-form .form-group input:focus,
.builder-form .form-group select:focus,
.builder-form .form-group textarea:focus {
  border-color: #53d8a8;
  outline: none;
}

.checkbox-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #ccc;
  cursor: pointer;
}

.check-label input {
  width: auto !important;
}

/* Dynamic lists */
.dynamic-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.dynamic-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dynamic-list-item input,
.dynamic-list-item textarea {
  flex: 1;
  padding: 7px 10px;
  background: var(--bg-panel-solid);
  border: 1px solid #333355;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 13px;
  font-family: inherit;
}

.dynamic-list-item input:focus,
.dynamic-list-item textarea:focus {
  border-color: #53d8a8;
  outline: none;
}

.btn-remove {
  background: none;
  border: none;
  color: #e94560;
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.btn-remove:hover {
  color: #ff6b81;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
}

/* YAML preview */
.yaml-preview {
  background: #0a1228;
  color: #53d8a8;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 16px;
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 60vh;
  overflow-y: auto;
  line-height: 1.5;
}

/* Builder action bar */
.builder-actions {
  position: sticky;
  bottom: 0;
  background: var(--bg-code);
  border-top: 1px solid #333355;
  padding: 14px 0;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 10;
}

.builder-status {
  font-size: 13px;
  color: #8888aa;
  margin-left: 12px;
}

/* Responsive builder */
@media (max-width: 640px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  .builder-form {
    max-width: 100%;
    padding: 0 8px 80px;
  }
  .prompt-tone-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Avatar picker (Scenario Builder) ─── */
.avatar-picker { margin-bottom: 4px; }

.avatar-picker-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: rgba(15, 52, 96, 0.35);
  border: 1px solid rgba(83, 216, 168, 0.2);
  border-radius: 8px;
  min-height: 72px;
}

.avatar-picker-placeholder {
  color: #8888aa;
  font-style: italic;
}

.avatar-picker-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #53d8a8;
  flex-shrink: 0;
}

.avatar-picker-meta {
  flex: 1;
  min-width: 0;
}

.avatar-picker-name {
  font-weight: 600;
  color: #e0e0e0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-picker-path {
  font-size: 12px;
  color: #8888aa;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.avatar-picker-advanced {
  margin-top: 12px;
}

.avatar-picker-advanced summary {
  cursor: pointer;
  color: #8888aa;
  font-size: 13px;
  margin-bottom: 10px;
  user-select: none;
}

.avatar-picker-advanced summary:hover {
  color: #e0e0e0;
}

/* Picker modal */
.modal.modal-wide {
  max-width: 860px;
}

.avatar-picker-search {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 14px;
  background: var(--bg-panel-hover);
  color: #e0e0e0;
  border: 1px solid #333;
  border-radius: 8px;
  font-size: 14px;
}

.avatar-picker-search:focus {
  outline: none;
  border-color: #53d8a8;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}

.avatar-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  background: var(--bg-panel-hover);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  color: inherit;
  font-family: inherit;
}

.avatar-tile:hover {
  border-color: #53d8a8;
  transform: translateY(-1px);
}

.avatar-tile img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--bg-panel-solid);
}

.avatar-tile-label {
  margin-top: 8px;
  font-size: 11px;
  color: #aaa;
  font-family: 'Courier New', monospace;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.avatar-tile-unpaired {
  opacity: 0.55;
}

.avatar-tile-warn {
  display: block;
  font-size: 9px;
  color: #f0a500;
  text-transform: uppercase;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* ---- Voice picker (Scenario Builder) ---- */
.voice-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voice-picker-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.voice-picker-filters input[type="search"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 6px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  color: inherit;
  font-size: 13px;
}
.voice-picker-filters select {
  padding: 6px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  color: inherit;
  font-size: 13px;
}
.voice-picker-list {
  width: 100%;
  padding: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  color: inherit;
  font-size: 13px;
  font-family: inherit;
}
.voice-picker-list option {
  padding: 4px 6px;
}
.voice-picker-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.voice-picker-footer .text-muted {
  opacity: 0.7;
}
.voice-picker-active {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0, 200, 150, 0.08);
  border: 1px solid rgba(0, 200, 150, 0.35);
  border-radius: 6px;
}
.voice-picker-active-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.6;
  margin-right: 4px;
  align-self: flex-start;
  padding-top: 2px;
}
.voice-picker-active-body {
  flex: 1;
  min-width: 0;
}
.voice-picker-active-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.voice-picker-active-name.is-stale {
  color: #e94560;
}
.voice-picker-active-meta {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
  word-break: break-all;
}

/* ---- Fish Audio test row ---- */
.fish-audio-test-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.fish-audio-test-row input[type="text"] {
  flex: 1;
}

/* ---- Warning banner (Scenarios tab) ---- */
.warning-banner {
  margin: 12px 0 16px 0;
  padding: 12px 16px;
  background: rgba(240, 165, 0, 0.12);
  border: 1px solid rgba(240, 165, 0, 0.5);
  border-left: 4px solid #f0a500;
  border-radius: 4px;
  color: #f0d080;
  font-size: 13px;
  line-height: 1.5;
}
.warning-banner strong {
  display: block;
  margin-bottom: 4px;
  color: #ffd570;
}
.warning-banner ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}
.warning-banner li {
  margin: 2px 0;
}
.warning-banner code {
  background: rgba(255,255,255,0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

/* ═══ Statistics tab ═══ */
.admin-subtabs {
  display: flex;
  gap: 4px;
  margin: 0 0 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 2px;
}
.admin-subtab {
  background: transparent;
  border: 0;
  color: #8892a6;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.admin-subtab:hover:not(:disabled) { color: #d0d6e0; }
.admin-subtab.active {
  color: #4a9eff;
  border-bottom-color: #4a9eff;
}
.admin-subtab:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* system-subtab reuses the same visual rules as admin-subtab */
.system-subtab { }
.system-subtab.active { color: #4a9eff; border-bottom-color: #4a9eff; }

.stats-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  margin-bottom: 16px;
}
.stats-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.stats-filter-group label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.55;
  font-weight: 600;
}
.stats-filter-group select,
.stats-filter-group input[type="date"] {
  padding: 5px 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  color: inherit;
  font-size: 12px;
  min-width: 110px;
}
.stats-filter-toggles {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.stats-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 0.9 !important;
  cursor: pointer;
}
.stats-toggle input[type="checkbox"] { margin: 0; }

.stats-status {
  font-size: 11px;
  color: #8892a6;
  margin-bottom: 12px;
  text-align: right;
}

/* KPI card grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.kpi-card {
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
}
.kpi-card-accent {
  background: rgba(74,158,255,0.1);
  border-color: rgba(74,158,255,0.35);
}
.kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.55;
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

/* Chart card grid */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.chart-card {
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.chart-card-wide { grid-column: span 2; }
.chart-card h3 {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: #d0d6e0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chart-card canvas {
  flex: 1;
  max-height: 400px;
}
@media (max-width: 1100px) {
  .chart-grid { grid-template-columns: 1fr; }
  .chart-card-wide { grid-column: auto; }
}

/* ── Statistics: Students sub-tab ── */
.stats-subpanel.hidden { display: none; }

.stats-students-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.stats-students-toolbar input[type="text"],
.stats-students-toolbar select {
  background: #1a1d2c;
  color: #e0e0e0;
  border: 1px solid #2c3142;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}
.stats-students-toolbar input[type="text"] { flex: 1; max-width: 320px; }

.stats-students-table th.num,
.stats-students-table td.num,
.stats-detail-sessions th.num,
.stats-detail-sessions td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stats-students-row { cursor: pointer; }
.stats-students-row:hover { background: rgba(74,158,255,0.06); }

.trend-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.trend-pill.up   { background: rgba(0,255,163,0.15); color: #00ffa3; }
.trend-pill.down { background: rgba(233,69,96,0.15); color: #e94560; }
.trend-pill.flat { background: rgba(136,146,166,0.15); color: #8892a6; }

.stats-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.stats-detail-header h3 {
  margin: 0;
  font-size: 18px;
  color: #e8ecf3;
}

/* Competency heatmap */
.competency-heatmap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0;
}
.heat-row {
  display: grid;
  grid-template-columns: minmax(140px, 240px) 1fr 110px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #d0d6e0;
}
.heat-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.heat-bar {
  background: #1a1d2c;
  border: 1px solid #2c3142;
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
}
.heat-fill {
  height: 100%;
  transition: width 0.25s ease;
}
.heat-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.heat-counts {
  color: #8892a6;
  font-size: 11px;
}

.stats-detail-sessions th,
.stats-detail-sessions td {
  font-size: 12px;
}

/* ── Statistics: Cohorts & Scenarios ── */
.year-boxplot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 4px;
}
.box-row {
  display: grid;
  grid-template-columns: 90px 1fr 230px;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: #d0d6e0;
}
.box-label {
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.box-n {
  color: #8892a6;
  font-size: 11px;
  font-weight: 400;
}
.box-track {
  position: relative;
  height: 22px;
  background: #1a1d2c;
  border: 1px solid #2c3142;
  border-radius: 4px;
}
.box-whisker {
  position: absolute;
  top: 50%;
  height: 2px;
  background: #4a9eff;
  transform: translateY(-50%);
}
.box-iqr {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: rgba(74,158,255,0.35);
  border: 1px solid #4a9eff;
  border-radius: 3px;
}
.box-median {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: #00ffa3;
}
.box-tick {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: #4a9eff;
}
.box-stats {
  font-variant-numeric: tabular-nums;
  color: #8892a6;
  font-size: 11px;
  text-align: right;
}
.box-axis {
  display: grid;
  grid-template-columns: 90px 1fr 230px;
  margin-top: 4px;
  font-size: 10px;
  color: #8892a6;
}
.box-axis-ticks {
  display: flex;
  justify-content: space-between;
}

.stats-fairness-table th,
.stats-fairness-table td {
  font-size: 12px;
}
.stats-fairness-table td .num {
  font-variant-numeric: tabular-nums;
}

/* ── Statistics: Model & System Usage ── */
.stats-agent-table th,
.stats-agent-table td {
  font-size: 12px;
}
.stats-agent-table th.num,
.stats-agent-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════
   LIGHT MODE — body.light-mode overrides
   Toggle by adding/removing .light-mode on <body>.
   The consultation avatar panel and controls bar
   are permanently dark regardless of theme.
   ══════════════════════════════════════════ */

body.light-mode,
html.light-mode body {
  background: #e8e2f8;
  color: #1a1e2e;
}

/* Mesh gradient blobs in light mode — rich violet/indigo/rose tones */
body.light-mode::before {
  background:
    radial-gradient(ellipse 75% 65% at  8% 12%, rgba(120,  70, 210, 0.38) 0%, transparent 60%),
    radial-gradient(ellipse 55% 70% at 88% 10%, rgba( 80,  60, 200, 0.30) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 80% 88%, rgba(180,  80, 200, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 15% 90%, rgba( 90,  50, 180, 0.32) 0%, transparent 52%),
    radial-gradient(ellipse 45% 45% at 50% 48%, rgba(200, 160, 255, 0.18) 0%, transparent 55%);
}

/* ── Transcript panel ── */
body.light-mode .transcript-panel {
  background: #f0f4fb;
  border-left-color: #c8d4e8;
}

body.light-mode .transcript-header {
  border-bottom-color: #c8d4e8;
  color: #5a6280;
}

body.light-mode .message.patient {
  background: #e8f0ff;
  color: #1a2a4e;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

body.light-mode .message.student {
  background: #6d35b8;
  color: #fff;
}

body.light-mode .message.student .label {
  color: #d8b4fe;
}

body.light-mode .message.patient .label {
  color: #2563eb;
}

body.light-mode .assessment-panel-header {
  color: #4a5270;
  border-top-color: #c8d4e8;
}

body.light-mode .assessment-panel-header:hover { color: #1a1e2e; }

/* Pending (not yet demonstrated) items — raise opacity so they stay legible */
body.light-mode .assessment-item { opacity: 0.75; }
body.light-mode .assessment-item.demonstrated { opacity: 1; }

body.light-mode .assessment-name { color: #2a3050; }
body.light-mode .assessment-weight { color: #6a7090; }
body.light-mode .assessment-icon.pending { color: #7a82a0; }

/* Control pills (transcript header) */
body.light-mode .ctrl-pill {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
  color: #4a5270;
}

body.light-mode .ctrl-pill:hover {
  background: rgba(0,0,0,0.09);
  border-color: rgba(0,0,0,0.20);
  color: #1a1e2e;
}

body.light-mode .ctrl-pill.open {
  background: rgba(83,52,131,0.12);
  border-color: #533483;
  color: #1a1e2e;
}

body.light-mode .ctrl-popover {
  background: #ffffff;
  border-color: #c8d4e8;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

body.light-mode .ctrl-pop-item { color: #4a5270; }

body.light-mode .ctrl-pop-item:hover {
  background: rgba(83,52,131,0.06);
  color: #1a1e2e;
}

body.light-mode .ctrl-pop-item.active { color: #533483; }

/* ── Controls bar (bottom strip) ── */
body.light-mode .controls-bar {
  background: rgba(235, 230, 250, 0.97);
  border-top-color: rgba(145, 120, 200, 0.35);
}

body.light-mode .resource-btn {
  background: rgba(255,255,255,0.80);
  border-color: #b0a0d8;
  color: #4a3880;
}

body.light-mode .resource-btn:hover {
  background: rgba(195, 175, 238, 0.5);
  border-color: #7b5ea7;
  color: #2a1060;
}

body.light-mode #ptt-btn {
  background: rgba(39, 168, 101, 0.08);
  color: #1a4030;
}

body.light-mode #ptt-btn:hover {
  background: rgba(39, 168, 101, 0.15);
}

body.light-mode #ptt-btn.recording {
  background: rgba(233, 69, 96, 0.10);
}

body.light-mode #end-btn {
  background: rgba(233, 69, 96, 0.08);
  color: #7a1a2a;
}

body.light-mode #end-btn:hover {
  background: rgba(233, 69, 96, 0.18);
}

body.light-mode .status-area { color: #4a5270; }
body.light-mode .competency-progress { color: #4a5270; }
body.light-mode .competency-progress .score { color: #1a7a50; }

/* Timer pill — all three states need denser colour on the pale violet bar */
body.light-mode .timer-pill {
  background: rgba(39, 168, 101, 0.18);
  color: #1a6a40;
  border-color: rgba(39, 168, 101, 0.45);
}
body.light-mode .timer-pill.amber {
  background: rgba(200, 130, 0, 0.18);
  color: #8a5a00;
  border-color: rgba(200, 130, 0, 0.45);
}
body.light-mode .timer-pill.red {
  background: rgba(200, 40, 60, 0.18);
  color: #9a1a2a;
  border-color: rgba(200, 40, 60, 0.45);
}

body.light-mode .text-input-area textarea {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

body.light-mode .text-input-area textarea:focus {
  border-color: #533483;
  box-shadow: 0 0 0 2px rgba(83,52,131,0.12);
}

/* Panel toggle track */
body.light-mode .panel-toggle input:not(:checked) ~ .panel-toggle-track {
  background: #c0c8d8;
}

/* ── Buttons ── */
body.light-mode .btn-secondary {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

body.light-mode .btn-secondary:hover { background: #dce5f5; }

/* ── Modals ── */
body.light-mode .modal {
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

body.light-mode .modal-header h2 { color: #1a1e2e; }
body.light-mode .modal-close { color: #7a82a0; }
body.light-mode .modal-close:hover { color: #1a1e2e; }
body.light-mode .modal-footer { border-top-color: #c8d4e8; }

body.light-mode .modal-body .form-group label { color: #5a6280; }

body.light-mode .modal-body .form-group input,
body.light-mode .modal-body .form-group select,
body.light-mode .modal-body textarea {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

body.light-mode .rating-group label { color: #5a6280; }
body.light-mode .star { color: #c8c8d8; }

body.light-mode .fb-mcq-radio-label {
  color: #2a3050;
  border-color: #c8d4e8;
  background: rgba(240,244,251,0.6);
}

body.light-mode .image-card {
  background: #f0f4fb;
  border-color: #c8d4e8;
}

body.light-mode .image-caption { color: #5a6280; }

body.light-mode .record-card {
  background: #f0f4fb;
  border-color: #c8d4e8;
}

body.light-mode .record-card h3 { color: #4070a8; }

body.light-mode .record-content {
  background: #e4ecf8;
  color: #2a3050;
}

/* ── Results page ── */
body.light-mode .results-header h1 { color: #1a1e2e; }
body.light-mode .results-subtitle { color: #5a6280; }
body.light-mode .score-value { color: #1a1e2e; }
body.light-mode .score-label { color: #5a6280; }

body.light-mode .report-card {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

body.light-mode .report-card h2,
body.light-mode .report-card h3 { color: #5a6280; }

body.light-mode .report-card p { color: #2a3050; }
body.light-mode .report-section h2 { color: #1a1e2e; }

body.light-mode .competency-card {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

body.light-mode .competency-title { color: #1a1e2e; }
body.light-mode .competency-feedback { color: #4a5270; }

body.light-mode .timeline-item {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

body.light-mode .timeline-content { color: #3a4060; }
body.light-mode .timeline-content strong { color: #1a1e2e; }
body.light-mode .timeline-content p { color: #4a5270; }
body.light-mode .empty-state { color: #7a82a0; }

/* ── History page ── */
body.light-mode .history-header h1 { color: #1a1e2e; }
body.light-mode .history-subtitle { color: #6a7090; }
body.light-mode .history-empty { color: #6a7090; }

body.light-mode .history-card {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

body.light-mode .history-card:hover { background: #f0f4fb; }
body.light-mode .history-card-title { color: #1a1e2e; }
body.light-mode .history-card-meta { color: #6a7090; }
body.light-mode .history-card-date { color: #8890aa; }

body.light-mode .history-prompt label { color: #6a7090; }

body.light-mode .history-prompt input {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

/* ── Admin dashboard ── */
body.light-mode .admin-login-card {
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

body.light-mode .admin-login-card h1 { color: #1a1e2e; }
body.light-mode .admin-login-card p { color: #5a6280; }

body.light-mode .admin-login-card input {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

body.light-mode .admin-header { border-bottom-color: #c8d4e8; }
body.light-mode .admin-header h1 { color: #1a1e2e; }
body.light-mode .admin-tabs { border-bottom-color: #c8d4e8; }
body.light-mode .admin-tab { color: #5a6280; }
body.light-mode .admin-tab:hover { color: #2a3050; }
body.light-mode .admin-tab.active { color: #1a1e2e; border-bottom-color: #533483; }

body.light-mode .panel-header h2 { color: #1a1e2e; }

body.light-mode .panel-filters input,
body.light-mode .panel-filters select {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

body.light-mode .admin-table thead th {
  color: #6a7090;
  border-bottom-color: #c8d4e8;
}

body.light-mode .admin-table tbody td {
  border-bottom-color: #e0e8f4;
  color: #2a3050;
}

body.light-mode .admin-table tbody tr:hover {
  background: rgba(83,52,131,0.04);
}

body.light-mode .bulk-action-bar {
  background: #edf1f8;
  border-color: #a898cc;
}

body.light-mode .bulk-action-bar .bulk-count { color: #4a3080; }
body.light-mode .bulk-action-bar .bulk-clear { color: #7a82a0; }

body.light-mode .col-filter {
  background: #f5f8fc;
  border-color: #d0daea;
  color: #2a3050;
}

body.light-mode .col-filter::placeholder { color: #a8b0c4; }

body.light-mode .detail-section h3 {
  color: #6a7090;
  border-bottom-color: #c8d4e8;
}

body.light-mode .detail-section p,
body.light-mode .detail-grid { color: #2a3050; }
body.light-mode .detail-grid strong { color: #6a7090; }

body.light-mode .feedback-stat { background: #edf1f8; }
body.light-mode .feedback-stat-value { color: #1a1e2e; }
body.light-mode .feedback-stat-label { color: #6a7090; }

body.light-mode .btn-link { color: #5a40a0; }
body.light-mode .btn-link:hover { color: #7a60cc; }

/* ── Admin statistics sub-tabs ── */
body.light-mode .admin-subtabs { border-bottom-color: rgba(0,0,0,0.10); }
body.light-mode .admin-subtab { color: #5a6280; }
body.light-mode .admin-subtab:hover:not(:disabled) { color: #1a1e2e; }

body.light-mode .stats-filter-bar {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}

body.light-mode .stats-filter-group label { color: #6a7090; opacity: 1; }

body.light-mode .stats-filter-group select,
body.light-mode .stats-filter-group input[type="date"] {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

body.light-mode .stats-status { color: #6a7090; }

body.light-mode .kpi-card {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}

body.light-mode .kpi-label { color: #5a6280; opacity: 1; }
body.light-mode .kpi-value { color: #1a1e2e; }

body.light-mode .chart-card {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}

body.light-mode .chart-card h3 { color: #3a4060; }

body.light-mode .stats-students-toolbar input[type="text"],
body.light-mode .stats-students-toolbar select {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

body.light-mode .heat-row { color: #2a3050; }
body.light-mode .heat-bar { background: #e0e8f4; border-color: #c8d4e8; }
body.light-mode .heat-counts { color: #6a7090; }

body.light-mode .box-row { color: #2a3050; }
body.light-mode .box-label { color: #1a1e2e; }
body.light-mode .box-n,
body.light-mode .box-stats,
body.light-mode .box-axis { color: #6a7090; }

body.light-mode .box-track {
  background: #e0e8f4;
  border-color: #c8d4e8;
}

body.light-mode .stats-detail-header h3 { color: #1a1e2e; }

/* ── Scenario builder ── */
body.light-mode .builder-fieldset {
  background: #ffffff;
  border-color: #d0daea;
}

body.light-mode .builder-fieldset legend {
  color: #27a865;
  border-bottom-color: #d0daea;
}

body.light-mode .builder-form .form-group label { color: #5a6280; }
body.light-mode .builder-form .form-group small { color: #8890aa; }

body.light-mode .builder-form .form-group input,
body.light-mode .builder-form .form-group select,
body.light-mode .builder-form .form-group textarea,
body.light-mode .dynamic-list-item input,
body.light-mode .dynamic-list-item textarea {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

body.light-mode .check-label { color: #2a3050; }

body.light-mode .builder-actions {
  background: #f0f4fb;
  border-top-color: #c8d4e8;
}

body.light-mode .builder-status { color: #6a7090; }

/* YAML preview stays dark (monospace code block) */
/* body.light-mode .yaml-preview { } */

body.light-mode .prompt-editor-textarea {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

body.light-mode .prompt-editor-hint { color: #6a7090; }

body.light-mode .prompt-editor-hint code {
  background: #dce8f4;
  color: #1a7840;
}

body.light-mode .prompt-tone-item label { color: #2a3050; }

body.light-mode .preset-card {
  background: #ffffff !important;
  border-color: #d0daea !important;
}

body.light-mode .preset-active-line { color: #6a7090; }
body.light-mode .preset-active-line strong { color: #1a1e2e; }
body.light-mode .preset-toolbar label { color: #6a7090; }

body.light-mode .preset-toolbar .preset-select,
body.light-mode .preset-model-row .preset-provider-select,
body.light-mode .preset-model-row .preset-model-picker {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

body.light-mode .preset-model-row {
  background: rgba(100,150,230,0.05);
  border-color: rgba(39,168,101,0.2);
}

body.light-mode .preset-model-row label { color: #6a7090; }

body.light-mode .fb-builder-item {
  background: #ffffff;
  border-color: #d0daea;
}

body.light-mode .fb-builder-handle { color: #8890aa; }
body.light-mode .fb-builder-fields .form-group label { color: #6a7090; }

body.light-mode .fb-builder-fields .form-group input,
body.light-mode .fb-builder-fields .form-group select {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

body.light-mode .fb-builder-fields .fb-mcq-opt-input {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}
body.light-mode .fb-builder-fields .fb-mcq-opt-input::placeholder {
  color: #8890aa;
}

body.light-mode .avatar-picker-selected {
  background: rgba(100,150,230,0.06);
  border-color: rgba(39,168,101,0.2);
}

body.light-mode .avatar-picker-name { color: #1a1e2e; }
body.light-mode .avatar-picker-path { color: #6a7090; }
body.light-mode .avatar-picker-placeholder { color: #8890aa; }

body.light-mode .avatar-picker-search {
  background: #edf1f8;
  border-color: #c8d4e8;
  color: #1a1e2e;
}

body.light-mode .avatar-tile {
  background: #f0f4fb;
  border-color: transparent;
}

body.light-mode .avatar-tile img { background: #dce8f4; }
body.light-mode .avatar-tile-label { color: #5a6280; }

body.light-mode .warning-banner {
  background: rgba(240,165,0,0.08);
  color: #6b4800;
}

/* ── Scrollbar ── */
body.light-mode .transcript-messages::-webkit-scrollbar-thumb { background: #c0cce0; }

/* ══════════════════════════════════════════
   ADMIN LIGHT MODE — inline-style overrides
   These rules use !important to override dark
   backgrounds set directly on HTML elements.
   ══════════════════════════════════════════ */

/* ── Generic admin input/select/textarea reset ──
   Catches the majority of dark-background fields in every tab */
body.light-mode .admin-dashboard input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
body.light-mode .admin-dashboard select,
body.light-mode .admin-dashboard textarea {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
  color: #1a1e2e !important;
}

/* ── System tab ── */
/* Modes card */
body.light-mode #modes-card {
  background: #f0f4fb !important;
  border-color: #c8d4e8 !important;
}
body.light-mode #modes-card .mode-label,
body.light-mode #modes-card label {
  color: #2a3050 !important;
}
body.light-mode #modes-save-msg { color: #1a7840; }

/* Budget / credits section sub-containers */
body.light-mode .admin-dashboard .chart-card [style*="background:#1a2035"],
body.light-mode .admin-dashboard .chart-card [style*="background:#16213e"],
body.light-mode .admin-dashboard .chart-card [style*="background:#0f1833"],
body.light-mode .admin-dashboard .chart-card [style*="background:#0d1b2e"] {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
}

/* TTS concurrency table — slot limit / timeout number inputs */
body.light-mode .admin-table input[type="number"] {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
  color: #1a1e2e !important;
}

/* ── Statistics tab ── */
/* Fairness filter selects and number input */
body.light-mode #fairness-filter-cat,
body.light-mode #fairness-filter-scenario,
body.light-mode #fairness-filter-diff,
body.light-mode #fairness-filter-attempts {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
  color: #1a1e2e !important;
}

/* Sessions detail filters */
body.light-mode #sd-filter-scenario,
body.light-mode #sd-filter-category,
body.light-mode #sd-filter-difficulty,
body.light-mode #sd-filter-status {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
  color: #1a1e2e !important;
}

/* XP stats mini-cards */
body.light-mode [style*="background:#0f1833"] {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
}

/* ── Users tab ── */
/* XP level table expand panel */
body.light-mode #xp-level-table-details > div {
  background: #f0f4fb !important;
  border-color: #c8d4e8 !important;
}
body.light-mode #xp-level-table-details code {
  background: #dce8f4 !important;
  color: #1a7840;
}

/* ── Scenarios / Community tabs ── */
body.light-mode .scen-filter,
body.light-mode .comm-filter {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
  color: #1a1e2e !important;
}

body.light-mode #filter-community-source {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
  color: #1a1e2e !important;
}

/* ── Feedback tab ── */
body.light-mode #feedback-bulk-bar {
  background: #f0f4fb !important;
  border-color: #c8d4e8 !important;
}

/* ── Model Builder tab ── */
/* Inline-styled selects (.prompt-editor-select) */
body.light-mode .prompt-editor-select {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
  color: #1a1e2e !important;
}

/* RAG section container */
body.light-mode #panel-model-builder [style*="background:#0d1b2e"] {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
}

/* Model builder inline textareas (system prompts with monospace) */
body.light-mode #panel-model-builder textarea[style*="background:#0d1b2e"] {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
  color: #1a1e2e !important;
}

/* ── Knowledge Builder tab ── */
body.light-mode #kb-reembed-status {
  background: #f0f4fb !important;
  border-color: #c8d4e8 !important;
  color: #2a3050;
}

/* KB upload / detail modal inputs */
body.light-mode #kb-title-input,
body.light-mode #kb-category-input,
body.light-mode #kb-description-input {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
  color: #1a1e2e !important;
}

/* KB chunk viewer */
body.light-mode #kb-text-viewer-body { color: #1a1e2e; }

/* Chunk detail rows */
body.light-mode #kb-detail-body [style*="background:#0d1b2e"] {
  background: #edf1f8 !important;
  border-color: #c8d4e8 !important;
}

/* ── Range sliders (TTS / RAG settings in Model Builder) ── */
body.light-mode .admin-dashboard input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 16px; /* outer hit-target — keeps thumb vertically centred */
}
body.light-mode .admin-dashboard input[type="range"]::-webkit-slider-runnable-track {
  background: #c8d4e8;
  border-radius: 3px;
  height: 3px;
}
body.light-mode .admin-dashboard input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #533483;
  border: none;
  margin-top: -5.5px; /* centres 14px thumb on 3px track */
  cursor: pointer;
}
body.light-mode .admin-dashboard input[type="range"]::-moz-range-track {
  background: #c8d4e8;
  border-radius: 3px;
  height: 3px;
}
body.light-mode .admin-dashboard input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #533483;
  border: none;
  cursor: pointer;
}

/* ── Feedback Builder tab (drag-and-drop visual) ── */
.fb-builder-item.fb-drag-over {
  border-color: #53d8a8 !important;
  background: rgba(83, 216, 168, 0.08) !important;
}

.fb-builder-item[draggable="true"] .fb-builder-handle {
  cursor: grab;
}

.fb-builder-item[draggable="true"].dragging {
  opacity: 0.45;
}

/* ── Model Builder card descriptive text — dark-mode contrast ──────────────
   Inline styles using #556 or #666 are near-invisible on dark card backgrounds.
   Lift them to a legible mid-grey. .text-muted covers the <small> helper text
   under selectors. Light-mode override keeps them appropriately muted there.    */
.admin-dashboard [style*="color:#556"],
.admin-dashboard [style*="color:#666"] {
  color: #9baabf !important;
}
.admin-dashboard .text-muted {
  color: #9baabf !important;
  font-size: 11px;
}
body.light-mode .admin-dashboard [style*="color:#556"],
body.light-mode .admin-dashboard [style*="color:#666"] {
  color: #6b7a90 !important;
}
body.light-mode .admin-dashboard .text-muted {
  color: #6b7a90 !important;
}