/* ─────────────────────────────────────────────────────────────────
   DESIGN SYSTEM
   Виртуальный пациент — академический стиль для медобразования
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Цвета: тёмно-синяя академическая палитра ─────────────── */
  --color-bg:           #fafaf7;          /* мягкий cream вместо чисто белого */
  --color-surface:      #ffffff;
  --color-surface-2:    #f4f6f8;          /* фон для секций */
  --color-border:       #e5e7eb;
  --color-border-strong:#d0d7de;

  --color-text:         #1f2937;          /* чарcoal вместо чёрного */
  --color-text-muted:   #6b7280;
  --color-text-subtle:  #9ca3af;

  --color-primary:      #156082;          /* deep teal-blue (Microsoft Academic) */
  --color-primary-hover:#0F9ED5;
  --color-primary-soft: #e8f0f5;

  --color-accent:       #b45309;          /* warm amber для важных уведомлений */

  --color-success:      #166534;
  --color-success-bg:   #dcfce7;
  --color-warning:      #b45309;
  --color-warning-bg:   #fef3c7;
  --color-danger:       #991b1b;
  --color-danger-bg:    #fee2e2;

  /* ── Типографика ──────────────────────────────────────────── */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "Menlo", Consolas, monospace;
  --font-serif: "Charter", "Georgia", "Times New Roman", serif;

  /* шкала размеров (на основе 16px, modular ratio 1.125) */
  --fs-xs:    0.75rem;  /* 12 — captions, meta */
  --fs-sm:    0.875rem; /* 14 — body small */
  --fs-base:  1rem;     /* 16 — body */
  --fs-md:    1.125rem; /* 18 — section text */
  --fs-lg:    1.25rem;  /* 20 — h3 */
  --fs-xl:    1.5rem;   /* 24 — h2 */
  --fs-2xl:   1.875rem; /* 30 — h1 */

  --lh-tight: 1.25;
  --lh-base:  1.5;
  --lh-relaxed:1.625;

  /* ── Spacing scale (4px base) ─────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ── Скругления ───────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ── Тени (мягкие, академические — без heavy drop shadow) ─── */
  --shadow-xs: 0 1px 2px rgba(31,41,55,0.04);
  --shadow-sm: 0 1px 3px rgba(31,41,55,0.07), 0 1px 2px rgba(31,41,55,0.04);
  --shadow-md: 0 4px 8px rgba(31,41,55,0.08), 0 2px 4px rgba(31,41,55,0.04);
  --shadow-lg: 0 10px 20px rgba(31,41,55,0.10), 0 4px 8px rgba(31,41,55,0.06);

  /* ── Transition ───────────────────────────────────────────── */
  --t-fast:   120ms ease;
  --t-base:   200ms ease;

  /* ── z-index scale ────────────────────────────────────────── */
  --z-dropdown: 50;
  --z-modal: 100;
  --z-toast: 200;
}

/* ─────────────────────────────────────────────────────────────────
   RESET + BASE
   ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font: inherit; cursor: pointer; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

/* ─────────────────────────────────────────────────────────────────
   ШАПКА
   ─────────────────────────────────────────────────────────────── */
header {
  background: var(--color-primary);
  color: white;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.header-title { flex: 1; min-width: 0; }
header h1 {
  margin: 0 0 2px 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
#patient-info {
  font-size: var(--fs-sm);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
#session-timer {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: rgba(255,255,255,0.12);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-md);
  letter-spacing: 0.02em;
}
.header-toggle-debug {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  cursor: pointer;
  user-select: none;
}
.header-toggle-debug input { margin: 0; cursor: pointer; }
#settings-button {
  background: rgba(255,255,255,0.12);
  border: none;
  color: white;
  font-size: 20px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}
#settings-button:hover { background: rgba(255,255,255,0.24); }

/* ─────────────────────────────────────────────────────────────────
   ОСНОВНАЯ СЕТКА — «КИНОЭКРАН»
   ─────────────────────────────────────────────────────────────── */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* ── Stage: 4:3 «экран» с аватаром + диалог-оверлеем внизу ─── */
.stage {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 4 / 3;
  background: #0E2841;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
#avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Полупрозрачный диалог-оверлей внизу сцены ─── */
.dialog-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top,
    rgba(8, 18, 32, 0.92) 0%,
    rgba(8, 18, 32, 0.78) 60%,
    rgba(8, 18, 32, 0.45) 90%,
    rgba(8, 18, 32, 0) 100%);
  padding: var(--sp-7) var(--sp-5) var(--sp-4);
  pointer-events: auto;
  z-index: 1;
}

#transcript {
  max-height: 110px;        /* ~2-3 строки видны, остальное скроллится */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  scroll-behavior: smooth;
  /* Кастомный скроллбар поверх тёмного фона */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}
#transcript::-webkit-scrollbar { width: 4px; }
#transcript::-webkit-scrollbar-track { background: transparent; }
#transcript::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
}

/* ── Реплики поверх сцены — белый текст, без фона ─── */
.bubble {
  background: none;
  color: rgba(255,255,255,0.96);
  padding: 0;
  border: none;
  border-radius: 0;
  max-width: 100%;
  line-height: 1.45;
  font-size: var(--fs-md);
  word-wrap: break-word;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.bubble.patient::before {
  content: "Пациент: ";
  font-weight: 700;
  letter-spacing: 0.01em;
}
.bubble.student {
  padding-left: var(--sp-6);
}
.bubble.student::before {
  content: "Врач: ";
  font-weight: 700;
  color: rgba(180, 220, 255, 1);  /* slight cyan tint to differentiate */
  letter-spacing: 0.01em;
}

/* ── Control bar под сценой ─── */
.control-bar {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
/* TASK-04: технические метаданные скрыты по умолчанию */
.bubble-meta {
  display: none;
  font-size: var(--fs-xs);
  margin-top: var(--sp-2);
  opacity: 0.7;
  font-family: var(--font-mono);
}
.bubble-icon {
  font-size: var(--fs-xs);
  opacity: 0.6;
  margin-right: var(--sp-1);
}
body.debug .bubble-meta { display: block; }

/* ── Контролы ввода ─── */
#controls {
  display: flex;
  gap: var(--sp-2);
}
#ptt-button {
  flex: 1;
  background: var(--color-primary);
  color: white;
  border: none;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-lg);
  font-size: var(--fs-md);
  font-weight: 600;
  user-select: none;
  transition: background var(--t-fast), transform 50ms ease;
  min-height: 56px;     /* mobile-friendly tap target */
}
#ptt-button:hover:not(:disabled) { background: var(--color-primary-hover); }
#ptt-button.recording {
  background: var(--color-danger);
  transform: scale(0.98);
}
#ptt-button:disabled {
  background: var(--color-border-strong);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
#reset-button {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md);
  min-width: 56px;
  transition: background var(--t-fast);
}
#reset-button:hover { background: var(--color-surface-2); }

/* ── TASK-02: Текстовый ввод ─── */
.input-mode-toggle {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  user-select: none;
  padding: var(--sp-1);
}
.input-mode-toggle:hover { color: var(--color-primary); }

#text-input-container {
  display: none;
  flex-direction: column;
  gap: var(--sp-2);
}
body.text-input-mode #text-input-container { display: flex; }
body.text-input-mode #controls { display: none; }
body.text-input-mode .ptt-only { display: none; }

#text-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  resize: vertical;
  min-height: 76px;
  background: var(--color-surface);
}
#text-input-send {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  font-weight: 600;
  align-self: flex-end;
}
#text-input-send:hover:not(:disabled) { background: var(--color-primary-hover); }
#text-input-send:disabled {
  background: var(--color-border-strong);
  cursor: not-allowed;
}

/* ── TASK-06: индикатор подсказки при ASR-сбое ─── */
#asr-hint {
  font-size: var(--fs-sm);
  color: var(--color-warning);
  text-align: center;
  padding: var(--sp-2);
  display: none;
}
#asr-hint.visible { display: block; }

/* ── Кнопка завершения сессии ─── */
/* Отделена от PTT разделительной линией и расстоянием — чтобы случайно
   не нажать вместо «удерживайте, чтобы говорить» при голосовом режиме. */
#end-session-row {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--color-border);
  display: flex;
  justify-content: center;
}
#end-session-button {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  min-height: 36px;
  width: auto;
}
#end-session-button:hover:not(:disabled) {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-primary);
}
#end-session-button:disabled {
  border-color: var(--color-border-strong);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

/* ── Унифицированный pipeline-статус ─── */
/* Заменяет 6 разных текстовых состояний одной визуальной моделью:
   pipeline (mic → asr → llm → tts) + цветная полоса прогресса.
   Активная стадия подсвечивается, выполненные — тушатся. Цвет полосы
   меняется в зависимости от стадии (нейтрал/синий/фиолетовый/зелёный/красный). */
#status-bar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--t-base);
}
.status-stages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  flex-wrap: nowrap;
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}
.status-stage {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  white-space: nowrap;
  opacity: 0.5;
  transition: opacity var(--t-base), background var(--t-base), color var(--t-base);
}
.status-stage-icon { font-size: 13px; }
.status-stage-label {
  font-size: 11px;
  font-weight: 500;
}
.status-arrow {
  font-size: 11px;
  color: var(--color-text-subtle);
  opacity: 0.4;
}

/* Active stage */
.status-stage.active {
  opacity: 1;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
  animation: status-pulse 1.4s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.status-stage.done {
  opacity: 0.85;
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* Полоса прогресса */
.status-progress {
  height: 3px;
  background: var(--color-surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.status-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 0.4s ease, background 0.3s ease;
}

/* Цветовая схема по стадиям */
#status-bar[data-stage="idle"]      .status-progress-fill { width: 0%;   background: var(--color-border-strong); }
#status-bar[data-stage="connecting"] .status-progress-fill { width: 8%;  background: var(--color-text-subtle); }
#status-bar[data-stage="mic"]       .status-progress-fill { width: 12%;  background: var(--color-danger); }
#status-bar[data-stage="asr"]       .status-progress-fill { width: 30%;  background: var(--color-primary); }
#status-bar[data-stage="cleanup"]   .status-progress-fill { width: 45%;  background: var(--color-primary); }
#status-bar[data-stage="llm"]       .status-progress-fill { width: 65%;  background: #6b46c1; }
#status-bar[data-stage="tts"]       .status-progress-fill { width: 85%;  background: #0F9ED5; }
#status-bar[data-stage="speaking"]  .status-progress-fill { width: 100%; background: var(--color-success); }
#status-bar[data-stage="report"]    .status-progress-fill { width: 60%;  background: var(--color-warning); animation: status-shimmer 1.6s linear infinite; }
#status-bar[data-stage="error"]     .status-progress-fill { width: 100%; background: var(--color-danger); }

/* Активная стадия pipeline — подсветка по data-stage */
#status-bar[data-stage="mic"]       .status-stage[data-stage-id="mic"],
#status-bar[data-stage="asr"]       .status-stage[data-stage-id="asr"],
#status-bar[data-stage="cleanup"]   .status-stage[data-stage-id="asr"],
#status-bar[data-stage="llm"]       .status-stage[data-stage-id="llm"],
#status-bar[data-stage="tts"]       .status-stage[data-stage-id="tts"],
#status-bar[data-stage="speaking"]  .status-stage[data-stage-id="tts"] {
  opacity: 1;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
  animation: status-pulse 1.4s ease-in-out infinite;
}

/* Каскад «выполнено» — стадии левее активной */
#status-bar[data-stage="asr"]      .status-stage[data-stage-id="mic"],
#status-bar[data-stage="cleanup"]  .status-stage[data-stage-id="mic"],
#status-bar[data-stage="llm"]      .status-stage[data-stage-id="mic"],
#status-bar[data-stage="llm"]      .status-stage[data-stage-id="asr"],
#status-bar[data-stage="tts"]      .status-stage[data-stage-id="mic"],
#status-bar[data-stage="tts"]      .status-stage[data-stage-id="asr"],
#status-bar[data-stage="tts"]      .status-stage[data-stage-id="llm"],
#status-bar[data-stage="speaking"] .status-stage[data-stage-id="mic"],
#status-bar[data-stage="speaking"] .status-stage[data-stage-id="asr"],
#status-bar[data-stage="speaking"] .status-stage[data-stage-id="llm"] {
  opacity: 0.85;
  background: var(--color-success-bg);
  color: var(--color-success);
  animation: none;
}

@keyframes status-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

#status-bar[data-stage="error"] {
  border-color: var(--color-danger);
}
#status-bar.report-mode .status-stages { display: none; }

#status {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  text-align: center;
  min-height: 1.2em;
}
#status-bar[data-stage="error"] #status { color: var(--color-danger); }
#status-bar[data-stage="speaking"] #status { color: var(--color-success); }

/* Mobile: прячем подписи стадий, оставляем только иконки + полосу */
@media (max-width: 600px) {
  .status-stage-label { display: none; }
  .status-stage { padding: 4px 6px; }
  .status-arrow { font-size: 10px; }
}
#timings {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  text-align: center;
}
/* TASK-04: timings скрыты без debug-режима */
body:not(.debug) #timings { display: none; }

/* ── TASK-07: Блок «Отчёт готов» ─── */
#report-summary {
  background: var(--color-success-bg);
  border-left: 4px solid var(--color-success);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  margin-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
#report-summary .rubric-chip {
  background: rgba(255,255,255,0.7);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--color-success);
}
#report-summary .rubric-chip b { font-size: var(--fs-base); }
#report-summary a.open-report {
  margin-left: auto;
  background: var(--color-success);
  color: white;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
}
#report-summary a.open-report:hover {
  background: #14532d;
  color: white;
}
.report-progress {
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-primary);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--color-primary);
  margin-top: var(--sp-2);
}

/* ─────────────────────────────────────────────────────────────────
   FOOTER
   ─────────────────────────────────────────────────────────────── */
footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-5) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
footer summary { cursor: pointer; user-select: none; }
footer ul { padding-left: var(--sp-5); }

/* ─────────────────────────────────────────────────────────────────
   МОДАЛЬНОЕ ОКНО (settings + reset confirmation)
   ─────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  animation: fadeIn 150ms ease;
}
.modal-overlay[hidden] { display: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: slideUp 200ms ease;
}
@keyframes slideUp {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.modal-card.confirm { max-width: 440px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
}
.modal-header h2 {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--color-primary);
  font-weight: 600;
}
.modal-header button.modal-close {
  background: none; border: none;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
}
.modal-header button.modal-close:hover { background: var(--color-surface-2); }

.modal-body {
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
  flex: 1;
}
.modal-body p { margin: 0 0 var(--sp-3) 0; }

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
  gap: var(--sp-3);
}

/* ── Settings — секции ─── */
.settings-section {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}
.settings-section:last-child { border-bottom: none; }
.settings-section h3 {
  margin: 0 0 var(--sp-1) 0;
  font-size: var(--fs-sm);
  color: var(--color-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-section .section-desc {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-relaxed);
}
.field-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-2);
}
.field-label {
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.field-input input,
.field-input select {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  background: var(--color-surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field-input input:focus,
.field-input select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(21,96,130,0.12);
}
.field-hint {
  grid-column: 2;
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  margin-top: var(--sp-1);
}

#settings-status {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  flex: 1;
}
#settings-status.success { color: var(--color-success); }
#settings-status.error   { color: var(--color-danger); }

/* ── Кнопки ─── */
.btn-primary,
.btn-secondary,
.btn-danger {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background var(--t-fast), border-color var(--t-fast);
  min-height: 36px;
}
.btn-primary {
  background: var(--color-primary);
  color: white;
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-primary:disabled {
  background: var(--color-border-strong);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-surface-2); }
.btn-danger {
  background: var(--color-danger);
  color: white;
}
.btn-danger:hover:not(:disabled) { background: #7f1d1d; }

/* ── Avatar library chips (settings) ─── */
.avatar-library {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.avatar-chip {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--t-fast);
  font-family: inherit;
}
.avatar-chip.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.avatar-chip:hover:not(.active) { background: var(--color-primary-soft); }

.avatar-upload-btn {
  display: inline-block;
  font-size: var(--fs-xs);
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-surface);
  border: 1px dashed var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.avatar-upload-btn input { display: none; }

/* ─── Picker сценариев (стартовый экран) ─── */
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}
@media (max-width: 600px) {
  .picker-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
}
.picker-loading,
.picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-7);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ─── Баннер активной сессии в picker ─── */
.picker-active-banner {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.picker-active-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 240px;
  min-width: 0;
}
.picker-active-text strong {
  font-size: var(--fs-md);
  color: #92400e;
}
.picker-active-text span {
  font-size: var(--fs-xs);
  color: #78350f;
}
.picker-active-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.picker-active-actions .btn-primary {
  background: var(--color-success);
  border-color: var(--color-success);
}
.picker-active-actions .btn-primary:hover {
  background: var(--color-success-hover, #1f6e3a);
}

/* ─── Language bar в picker (i18n) ─── */
.picker-language-bar {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.picker-language-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #0c4a6e;
}
.picker-language-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.picker-language-options .lang-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid #bae6fd;
  border-radius: 999px;
  background: white;
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: all 150ms ease;
  user-select: none;
}
.picker-language-options .lang-chip:hover {
  border-color: #0284c7;
  background: #f0f9ff;
}
.picker-language-options .lang-chip.active {
  background: #0284c7;
  border-color: #0284c7;
  color: white;
  font-weight: 600;
}
.picker-language-options .lang-chip input { display: none; }
.picker-language-options .lang-chip .flag { font-size: 18px; }
.picker-language-help {
  font-size: var(--fs-xs);
  color: #075985;
  line-height: 1.4;
}

/* ─── Mode bar (PTT / Continuous) — рядом с language bar ────── */
.picker-mode-bar {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 1px solid #fde68a;
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.picker-mode-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #78350f;
}
.picker-mode-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.picker-mode-options .mode-chip {
  padding: 6px 14px;
  border: 1.5px solid #fde68a;
  border-radius: 999px;
  background: white;
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: all 150ms ease;
  user-select: none;
}
.picker-mode-options .mode-chip:hover {
  border-color: #d97706;
  background: #fffbeb;
}
.picker-mode-options .mode-chip.active {
  background: #d97706;
  border-color: #d97706;
  color: white;
  font-weight: 600;
}
.picker-mode-options .mode-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: white;
}
.picker-mode-help {
  font-size: var(--fs-xs);
  color: #78350f;
  line-height: 1.4;
}

/* ─── Toolbar фильтров (search + category + specialty) ──────── */
.picker-filters {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
}
.picker-search {
  width: 100%;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: white;
}
.picker-search:focus {
  outline: none;
  border-color: #156082;
  box-shadow: 0 0 0 3px rgba(21, 96, 130, 0.15);
}
.picker-filter-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
}
.picker-filter-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  min-width: 110px;
}
.picker-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.picker-chip {
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: white;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.picker-chip:hover { background: #f1f5f9; }
.picker-chip.active {
  background: #156082;
  border-color: #156082;
  color: white;
}
.picker-select {
  padding: 6px 10px;
  font-size: var(--fs-xs);
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  cursor: pointer;
}
.picker-filter-stats {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  justify-content: space-between;
}
.picker-stats-text { font-style: italic; }
.picker-link-btn {
  background: none; border: none;
  color: #156082;
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.picker-link-btn:hover { color: #0f4566; }

/* Метки на карточках (категория, специальность, ключевики) */
.picker-card .pills {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
.picker-card .pill {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  white-space: nowrap;
}
.picker-card .pill.cat {
  background: #fef3c7;
  color: #78350f;
  font-weight: 600;
}
.picker-card .pill.spec {
  background: #dbeafe;
  color: #1e40af;
}
.picker-card .pill.kw {
  background: #f1f5f9;
  color: #475569;
}
.picker-card .pill.kw mark {
  background: #fde047;
  color: inherit;
  padding: 0 1px;
}

.picker-card {
  cursor: pointer;
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 0;
  background: linear-gradient(135deg, #ffffff 0%, #fafaf7 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  /* объёмная многослойная тень */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 8px rgba(15, 23, 42, 0.06),
    0 8px 16px rgba(15, 23, 42, 0.04);
  transition:
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms ease;
}
.picker-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
  opacity: 0; transition: opacity 200ms ease;
}
.picker-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: var(--color-primary);
  box-shadow:
    0 2px 4px rgba(21, 96, 130, 0.08),
    0 8px 16px rgba(21, 96, 130, 0.10),
    0 16px 32px rgba(21, 96, 130, 0.10),
    0 24px 48px rgba(21, 96, 130, 0.08);
}
.picker-card:hover::before { opacity: 1; }
.picker-card:active { transform: translateY(-2px) scale(0.998); }

@media (max-width: 600px) {
  .picker-card { grid-template-columns: 100px 1fr; }
}

/* Левая колонка — аватар */
.picker-card .thumb-wrap {
  position: relative;
  width: 168px; height: 100%;
  min-height: 200px;
  background: linear-gradient(135deg, #0E2841 0%, #156082 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 48px;
  overflow: hidden;
}
@media (max-width: 600px) {
  .picker-card .thumb-wrap { width: 100px; min-height: 160px; font-size: 36px; }
}
.picker-card .thumb-wrap::after {
  /* тонкий внутренний вертикальный разделитель */
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.08), transparent);
}
.picker-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Правая колонка — текст */
.picker-card .info {
  padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-width: 0;
}
@media (max-width: 600px) {
  .picker-card .info { padding: var(--sp-3); }
}
.picker-card .info .head-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-2);
}
.picker-card .info .name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.picker-card .info .age {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  background: var(--color-surface-2);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.picker-card .info .occupation {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  margin-top: -4px;
}
.picker-card .info .chief {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.4;
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}
.picker-card .info .chief b {
  color: var(--color-primary);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}
.picker-card .info .anamnesis {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  /* три строки максимум */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.picker-card .info .meta {
  display: flex; gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-subtle);
  align-items: center;
}
.picker-card .info .emotion-pill {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 11px;
}
.picker-card .info .start-cue {
  margin-left: auto;
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--fs-xs);
  opacity: 0; transition: opacity 200ms ease, transform 200ms ease;
  transform: translateX(-4px);
}
.picker-card:hover .info .start-cue {
  opacity: 1;
  transform: translateX(0);
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE / TABLET
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  main {
    padding: var(--sp-3);
    gap: var(--sp-3);
  }
  /* На планшете оставляем 4:3 — просто меньше */
  .stage { max-width: 100%; }
  #transcript { max-height: 90px; }
  .bubble { font-size: var(--fs-base); }
}

@media (max-width: 600px) {
  /* Шапка тоньше на телефоне */
  header { padding: var(--sp-3) var(--sp-4); }
  header h1 { font-size: var(--fs-base); }
  #patient-info { font-size: var(--fs-xs); }
  #session-timer { font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-2); }
  .header-toggle-debug { display: none; }  /* debug toggle прячем — есть в settings */
  #settings-button { width: 36px; height: 36px; font-size: 18px; }

  /* На телефоне портретная сцена 3:4 — иначе аватар совсем мелкий */
  .stage { aspect-ratio: 3 / 4; }
  .dialog-overlay { padding: var(--sp-5) var(--sp-3) var(--sp-3); }
  #transcript { max-height: 80px; }
  .bubble { font-size: var(--fs-sm); }

  /* PTT кнопка ещё больше для пальца */
  #ptt-button {
    font-size: var(--fs-base);
    min-height: 64px;
  }

  /* Bubble на полную ширину */
  .bubble { max-width: 92%; font-size: var(--fs-sm); }

  /* Modals — почти полный экран */
  .modal-overlay { padding: var(--sp-2); }
  .modal-card { max-height: 95vh; }
  .field-row {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
  .field-hint { grid-column: 1; }
}

/* ─────────────────────────────────────────────────────────────────
   LOGIN — magic-link auth (shown when /api/auth/me returns 401)
   ─────────────────────────────────────────────────────────────── */
.login-card { max-width: 460px; }
.login-intro {
  margin: 0 0 var(--sp-3) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.login-field {
  display: block;
  margin-bottom: var(--sp-3);
}
.login-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--sp-1);
}
.login-field input {
  width: 100%;
  padding: var(--sp-3);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.login-field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(21,96,130,0.12);
}
#login-submit {
  width: 100%;
  padding: var(--sp-3);
  font-size: var(--fs-base);
  margin-top: var(--sp-2);
}
.login-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
}
.login-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
}
.login-success h3 {
  margin: 0 0 var(--sp-2) 0;
  color: var(--color-success);
  font-size: var(--fs-md);
}
.login-success p { margin: 0 0 var(--sp-2) 0; }
.login-success .login-tip {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--sp-2);
}
.login-link {
  background: none;
  border: none;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.login-link:hover { color: var(--color-primary-hover); }

/* ─── User chip в шапке (после успешного login) ─── */
#user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: rgba(255,255,255,0.12);
  padding: 4px 4px 4px var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  max-width: 200px;
}
.user-chip-email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#user-chip-logout {
  background: rgba(0,0,0,0.18);
  border: none;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}
#user-chip-logout:hover { background: rgba(0,0,0,0.32); }

@media (max-width: 600px) {
  #user-chip { max-width: 130px; }
}

/* ─────────────────────────────────────────────────────────────────
   BRIEFING — «doorway info» перед входом в кабинет (OSCE-style)
   ─────────────────────────────────────────────────────────────── */
.briefing-card { max-width: 640px; }
.briefing-icon { display: inline-block; margin-right: var(--sp-1); font-size: 22px; }
.briefing-intro {
  margin: 0 0 var(--sp-4) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.briefing-patient {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background: linear-gradient(135deg, var(--color-surface-2) 0%, #ffffff 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.briefing-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #0E2841 0%, var(--color-primary) 100%);
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  overflow: hidden;
  flex-shrink: 0;
}
.briefing-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.briefing-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.briefing-meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.briefing-occupation {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  margin-top: 4px;
}

.briefing-section {
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
}
.briefing-section-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.briefing-complaint {
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-primary);
}
.briefing-complaint .briefing-section-label { color: var(--color-primary); }
.briefing-task {
  background: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning);
}
.briefing-task .briefing-section-label { color: var(--color-warning); }
.briefing-task ul {
  margin: 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.briefing-task li { margin: 2px 0; }

.briefing-tip {
  margin: var(--sp-3) 0 0 0;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  line-height: var(--lh-relaxed);
}

.briefing-countdown {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  flex: 1;
  text-align: left;
}
.briefing-countdown b {
  color: var(--color-primary);
  font-size: var(--fs-sm);
}
.briefing-countdown.expiring b { color: var(--color-danger); }
.briefing-countdown.hidden { visibility: hidden; }

@media (max-width: 520px) {
  .briefing-patient {
    grid-template-columns: 60px 1fr;
  }
  .briefing-avatar { width: 60px; height: 60px; font-size: 24px; }
  .briefing-name { font-size: var(--fs-base); }
}

/* ─────────────────────────────────────────────────────────────────
   DEBRIEF — confidence Likert + focus chips
   ─────────────────────────────────────────────────────────────── */
.debrief-fieldset {
  margin: 0 0 var(--sp-4) 0;
  padding: var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.debrief-fieldset legend {
  padding: 0 var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.confidence-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.conf-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  user-select: none;
}
.conf-option:hover { background: var(--color-primary-soft); }
.conf-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.conf-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 2px rgba(21,96,130,0.18);
  transform: translateY(-1px);
}
.conf-option .conf-emoji { font-size: 24px; line-height: 1; }
.conf-option .conf-text { font-size: 11px; color: var(--color-text-muted); text-align: center; }

@media (max-width: 520px) {
  .confidence-scale { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .conf-option { padding: 6px 2px; }
  .conf-option .conf-emoji { font-size: 20px; }
  .conf-option .conf-text { font-size: 10px; }
}

.focus-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.focus-chip-input {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.focus-chip-input input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.focus-chip-input span {
  display: inline-block;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: var(--fs-xs);
  color: var(--color-text);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.focus-chip-input:hover span { background: var(--color-primary-soft); }
.focus-chip-input input:checked + span {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
   INLINE-ОТЧЁТ — поверх всей страницы (full-viewport iframe)
   ─────────────────────────────────────────────────────────────── */
#report-view {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}
#report-view[hidden] { display: none; }

.report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.report-toolbar .report-toolbar-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  flex: 1;
  text-align: center;
  opacity: 0.9;
}
.report-toolbar .btn-secondary {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
}
.report-toolbar .btn-secondary:hover { background: rgba(255,255,255,0.26); }
.report-toolbar .btn-primary {
  background: white;
  color: var(--color-primary);
}
.report-toolbar .btn-primary:hover { background: rgba(255,255,255,0.92); }

#report-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}

@media print {
  /* Когда пользователь нажмёт «Сохранить PDF», печатаем содержимое iframe.
     Сама внешняя обёртка (toolbar + остальное) скрывается на всякий случай. */
  body > *:not(#report-view) { display: none !important; }
  #report-view { position: static; }
  .report-toolbar { display: none !important; }
  #report-iframe { height: auto; }
}

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

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   ГЛАВНАЯ СТРАНИЦА: Двухколоночный layout (stage слева, dark sidebar
   справа). Перекрывает свойства main/.control-bar выше.
   Только на главной странице (body без класса admin-app/studio).
   ═══════════════════════════════════════════════════════════════════ */

body:not(.admin-app):not(.studio) main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 0;
  padding: 0;
  max-width: none;
  align-items: stretch;
  /* Высота — от хедера до низа экрана */
  height: calc(100vh - 64px);
}

body:not(.admin-app):not(.studio) .stage {
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

/* ── Правая dark-панель ────────────────────────────────────────── */
body:not(.admin-app):not(.studio) .control-bar {
  background: #0e1822;
  color: #e0e8f0;
  border-left: 1px solid #2a3444;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  /* Сбрасываем светлые фоновые свойства из старых стилей */
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  margin: 0;
}

/* ── Статус-бар (pipeline) на тёмном фоне, вертикальный ──────── */
body:not(.admin-app):not(.studio) #status-bar {
  background: #1a2332;
  border: 1px solid #2a3444;
  border-radius: 10px;
  padding: 14px 16px;
  color: #c0cfdc;
}
/* Колонка стадий — вертикальная, со светлыми соединителями. */
body:not(.admin-app):not(.studio) .status-stages {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  color: #6c7d8e;
}
body:not(.admin-app):not(.studio) .status-stage {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  background: transparent;
  border-radius: 0;
  border: none;
  font-size: 12.5px;
  white-space: nowrap;
}
body:not(.admin-app):not(.studio) .status-stage-icon {
  width: 22px;
  text-align: center;
  flex: 0 0 auto;
}
body:not(.admin-app):not(.studio) .status-stage-label {
  flex: 1 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* Стрелки → меняем на вертикальный соединитель (1px line) */
body:not(.admin-app):not(.studio) .status-arrow {
  align-self: flex-start;
  width: 1px;
  height: 8px;
  background: #2a3444;
  margin-left: 11px;       /* центрируем под иконку */
  font-size: 0;            /* убираем символ */
  color: transparent;
}
body:not(.admin-app):not(.studio) .status-stage.active,
body:not(.admin-app):not(.studio) .status-stage[data-active="true"] {
  color: #4a90e2;
  font-weight: 500;
}
body:not(.admin-app):not(.studio) .status-stage.done {
  color: #6c7d8e;
}
body:not(.admin-app):not(.studio) .status-text {
  color: #c0cfdc;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #2a3444;
  font-size: 12px;
}
body:not(.admin-app):not(.studio) .status-progress {
  background: #243245;
  margin-top: 10px;
}

/* ── PTT и ввод на dark-панели ────────────────────────────────── */
body:not(.admin-app):not(.studio) #controls {
  flex-direction: column;
  gap: 8px;
}
body:not(.admin-app):not(.studio) #ptt-button {
  background: #2563eb;
  color: #fff;
  border: none;
  font-size: 14px;
  padding: 14px;
  width: 100%;
  border-radius: 10px;
}
body:not(.admin-app):not(.studio) #ptt-button:hover:not(:disabled) {
  background: #1e4fc7;
}
body:not(.admin-app):not(.studio) #ptt-button.recording {
  background: #dc2626;
}
body:not(.admin-app):not(.studio) #reset-button {
  background: #1a2332;
  border: 1px solid #2a3444;
  color: #c0cfdc;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
}
body:not(.admin-app):not(.studio) #reset-button:hover {
  background: #243245;
}

/* ── Текстовый ввод на dark-панели ────────────────────────────── */
body:not(.admin-app):not(.studio) #text-input {
  background: #1a2332;
  color: #e0e8f0;
  border: 1px solid #2a3444;
  border-radius: 10px;
  font-size: 13px;
  min-height: 76px;
}
body:not(.admin-app):not(.studio) #text-input::placeholder { color: #6c7d8e; }
body:not(.admin-app):not(.studio) #text-input-send {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px;
}
body:not(.admin-app):not(.studio) #text-input-send:hover { background: #1e4fc7; }

body:not(.admin-app):not(.studio) .input-mode-toggle {
  color: #6c7d8e;
  font-size: 11px;
  text-decoration: none;
  border-top: 1px dashed #2a3444;
  padding-top: 10px;
}
body:not(.admin-app):not(.studio) .input-mode-toggle:hover { color: #4a90e2; }

/* Чекбокс «Звуки кабинета» в правой панели */
body:not(.admin-app):not(.studio) .ambient-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #9bb0c5;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
body:not(.admin-app):not(.studio) .ambient-toggle input { cursor: pointer; }
body:not(.admin-app):not(.studio) .ambient-toggle:hover { color: #c0cfdc; }

body:not(.admin-app):not(.studio) #asr-hint {
  color: #f59e0b;
  font-size: 12px;
}

body:not(.admin-app):not(.studio) #timings {
  color: #6c7d8e;
  font-size: 11px;
  font-family: var(--font-mono);
}
body:not(.admin-app):not(.studio) #report-summary {
  background: #1a3a2a;
  color: #a0e0c0;
  border: 1px solid #2a5a3a;
  padding: 10px;
  border-radius: 8px;
  font-size: 12px;
}

/* ── End-session — внизу панели, отделено разделителем ───────── */
body:not(.admin-app):not(.studio) #end-session-row {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #2a3444;
}
body:not(.admin-app):not(.studio) #end-session-button {
  width: 100%;
  background: #1a2332;
  color: #c0cfdc;
  border: 1px solid #2a3444;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
}
body:not(.admin-app):not(.studio) #end-session-button:hover {
  background: #2a3444;
  color: #fff;
}

/* ── Header чуть мельче и без settings-button (он удалён) ─────── */
body:not(.admin-app):not(.studio) header {
  height: 64px;
  padding: 0 18px;
}

/* ── Mobile: возврат к колоночному layout ─────────────────────── */
@media (max-width: 900px) {
  body:not(.admin-app):not(.studio) main {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 64px);
  }
  body:not(.admin-app):not(.studio) .stage {
    aspect-ratio: 4/3;
    height: auto;
  }
  body:not(.admin-app):not(.studio) .control-bar {
    border-left: none;
    border-top: 1px solid #2a3444;
  }
}


/* ─── Picker steps (1. Language → 2. Mode → 3. Case) ─── */
/* Числовой бейдж шага слева от каждого блока — визуально подчёркивает,
   что выбор языка / режима — отдельные шаги ДО выбора кейса. */
.picker-step {
  position: relative;
  padding-left: 56px !important;  /* место под цифру */
}
.picker-step-num {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.picker-step-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.picker-step-header {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-2) 0;
  padding-left: 0;
}
.picker-step-header .picker-step-num {
  position: static;
}
.picker-step-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-text);
}


/* ════════════════════════════════════════════════════════════════════
   MOBILE SESSION UI (≤ 768px)
   ════════════════════════════════════════════════════════════════════
   Desktop UX не трогаем. На мобиле перестраиваем так, чтобы
   ОДНОВРЕМЕННО на экране были:
     • аватар (основная область)
     • компактная строка статуса
     • большая sticky PTT-кнопка снизу
   Всё остальное (режим, камера, текст, звуки, сбросить, сменить,
   завершить сессию) уезжает в bottom-sheet drawer, открываемый
   нажатием на бургер ☰ в шапке.
   ──────────────────────────────────────────────────────────────────── */

/* По умолчанию hamburger и backdrop ВЫКЛЮЧЕНЫ — desktop их не видит. */
#mobile-menu-btn,
#mobile-drawer-backdrop { display: none; }

@media (max-width: 768px) {

  /* ── 1. Шапка: компактная + кнопка ☰ ──────────────────────── */
  body:not(.admin-app):not(.studio) header {
    padding: 8px 12px;
    min-height: 48px;
    gap: 8px;
  }
  .header-title h1 { font-size: 15px; line-height: 1.2; }
  #patient-info { font-size: 11px; }

  /* Прячем второстепенные header-actions — они уезжают в drawer
     через JS (см. _initMobileDrawer в app.js). Видимыми оставляем
     только таймер + user-chip (выход).
     ПРИМЕЧАНИЕ: НЕ используем display:none — JS перемещает элементы
     внутрь .mobile-drawer-extras, там они должны быть видимы. */
  .header-actions { gap: 6px; }
  /* Если элемент остался в header (на случай если JS ещё не отработал
     или mobile-drawer-extras не существует) — скрываем визуально. */
  .header-actions > #lang-switcher,
  .header-actions > #change-scenario-button {
    display: none;
  }

  /* Когда move'нуты в drawer — выглядят как полноценные строки меню */
  .mobile-drawer-extras {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
  }
  .mobile-drawer-extras #lang-switcher,
  .mobile-drawer-extras #change-scenario-button {
    display: block !important;
    width: 100%;
    padding: 12px 14px;
    background: #f8fafc !important;
    color: var(--color-text, #1e293b) !important;
    border: 1px solid var(--color-border, #e2e8f0) !important;
    border-radius: 8px !important;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
  }
  .header-actions > #session-timer {
    font-size: 12px;
    padding: 4px 6px;
  }
  #user-chip { max-width: 100px; }
  .user-chip-email { font-size: 11px; max-width: 70px;
                     overflow: hidden; text-overflow: ellipsis; }

  /* Hamburger ☰ — справа от title, перед actions */
  #mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    margin-left: auto;       /* отжимает actions вправо */
    margin-right: 4px;
    border: none;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--t-fast);
  }
  #mobile-menu-btn:hover,
  #mobile-menu-btn[aria-expanded="true"] {
    background: rgba(255,255,255,0.28);
  }
  /* CSS-only 3-line hamburger icon */
  .mobile-menu-icon,
  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    display: block;
    width: 20px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
  }
  .mobile-menu-icon { position: relative; }
  .mobile-menu-icon::before,
  .mobile-menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .mobile-menu-icon::before { top: -6px; }
  .mobile-menu-icon::after  { top:  6px; }
  /* Когда drawer открыт — превращаем в крестик */
  #mobile-menu-btn[aria-expanded="true"] .mobile-menu-icon {
    background: transparent;
  }
  #mobile-menu-btn[aria-expanded="true"] .mobile-menu-icon::before {
    top: 0; transform: rotate(45deg);
  }
  #mobile-menu-btn[aria-expanded="true"] .mobile-menu-icon::after {
    top: 0; transform: rotate(-45deg);
  }

  /* ── 2. Сцена: аватар во всю ширину, компактная высота ──── */
  body:not(.admin-app):not(.studio) main {
    padding: 8px 0 90px 0;  /* 90px снизу — место под sticky PTT */
  }
  .stage {
    aspect-ratio: 1 / 1;     /* квадратный кроп для портретной ориентации */
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
  }
  /* Диалог-overlay поверх аватара компактнее */
  .dialog-overlay {
    max-height: 40%;
    padding: 8px 10px;
  }
  .dialog-overlay #transcript .bubble {
    font-size: 13px;
    padding: 6px 10px;
  }

  /* ── 3. Status-bar: только текущий этап + полоса прогресса ── */
  #status-bar {
    margin: 0 12px;
    padding: 6px 10px;
    border-radius: 8px;
  }
  /* Прячем 4 этапа со стрелочками — для мобилы перегружено */
  #status-bar .status-stages { display: none; }
  /* Текст статуса и progress bar остаются */
  #status-bar .status-text {
    font-size: 13px;
    padding: 0;
    text-align: center;
    margin: 0;
  }

  /* ── 4. PTT/Continuous: круглый FAB справа на середине экрана ───
     Большой target для большого пальца (правша). На середине высоты —
     удобно дотянуться, поверх центра туловища аватара (груди) —
     визуально согласуется с «говорю с этим человеком».
     Размер 84px = WCAG 2.5.5 (минимум 44px, рекомендуется 48+).

     ВАЖНО: PTT-кнопка переносится через JS из .control-bar (drawer)
     в #mobile-floating-controls — иначе её position:fixed
     позиционируется относительно drawer'а из-за его transform, и
     она «уезжает» вместе со sheet'ом.

     ⚠ СПЕЦИФИЧНОСТЬ: десктоп-правила имеют селектор
     body:not(.admin-app):not(.studio) #ptt-button (специфичность 0,3,1),
     поэтому в этой media-query МЫ ОБЯЗАНЫ использовать тот же префикс,
     иначе наши rules не перебьют десктопные width:100%/padding:14px. */
  #mobile-floating-controls {
    position: static;
  }
  body:not(.admin-app):not(.studio) #ptt-button {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 50;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    /* Скрываем текстовый лейбл на mobile через font-size: 0 —
       text content (даже после i18n) станет невидимым, а ::before
       сохранит свой явный font-size 36px. */
    font-size: 0;
    line-height: 0;
    padding: 0;
    margin: 0;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
    transition: transform 0.1s, box-shadow 0.1s;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Inherit color/border от desktop-правила — там background #2563eb */
  }
  body:not(.admin-app):not(.studio) #ptt-button::before {
    content: "🎙";
    font-size: 36px;
    line-height: 1;
    display: block;
  }
  /* active state: PTT удерживается → визуально «нажат» */
  body:not(.admin-app):not(.studio) #ptt-button:active,
  body:not(.admin-app):not(.studio) #ptt-button.recording {
    transform: translateY(-50%) scale(0.92);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.6);
    background: #dc2626;
  }
  body:not(.admin-app):not(.studio) #ptt-button:active::before,
  body:not(.admin-app):not(.studio) #ptt-button.recording::before {
    content: "⏺";
  }

  /* Continuous-button — те же rules с поднятой специфичностью */
  body:not(.admin-app):not(.studio) #continuous-button:not([hidden]) {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 50;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    padding: 0;
    margin: 0;
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.45);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  body:not(.admin-app):not(.studio) #continuous-button::before {
    content: "▶";
    font-size: 32px;
    line-height: 1;
    display: block;
    color: white;
  }
  body:not(.admin-app):not(.studio) #continuous-button[data-state="listening"]::before { content: "🎙"; }
  body:not(.admin-app):not(.studio) #continuous-button[data-state="paused"]::before    { content: "⏸"; }

  /* Reset/nv-toggle скрываем (они в drawer'е). Тут специфичность не
     критична — display:none перебивает любое. */
  body:not(.admin-app):not(.studio) #controls #reset-button,
  body:not(.admin-app):not(.studio) #controls #nv-toggle,
  body:not(.admin-app):not(.studio) #controls #nv-status { display: none; }

  /* КРИТИЧНО: #controls сам по себе НЕ display:none — иначе дочерние
     position:fixed элементы (PTT, continuous) тоже не отрисуются.
     Делаем контейнер «прозрачным» — нулевая высота, без флекс-флоу.
     После _moveFABsToFloating() кнопки переехали отсюда, но даже если
     не отработал JS — overflow:visible не клипает их.
     Специфичность как у строки 1840 (body:not()#controls). */
  body:not(.admin-app):not(.studio) #controls {
    display: block;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: visible;
    gap: 0;       /* перебиваем gap: 8px от desktop-правила */
  }

  /* ── 5. Control-bar превращается в bottom-sheet drawer ── */
  .control-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    max-height: 82vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-surface, white);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.22);
    padding: 20px 16px 28px;
    z-index: 90;
    transform: translateY(102%);   /* спрятан по умолчанию */
    transition: transform 0.28s cubic-bezier(.4,.0,.2,1);
    /* Drag-handle сверху */
  }
  .control-bar::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #cbd5e1;
  }
  body.mobile-drawer-open .control-bar {
    transform: translateY(0);
  }

  /* Backdrop за drawer'ом */
  #mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.45);
    z-index: 80;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
  }
  body.mobile-drawer-open #mobile-drawer-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  /* Внутри drawer: текстовый ввод сам по себе hidden до клика —
     остаётся так. Mode-toggle, ambient, end-session — видны вертикально. */
  #text-input-container {
    margin-top: 12px;
  }
  #input-mode-toggle {
    display: block;
    margin-top: 14px;
    padding: 12px;
    text-align: center;
    background: #f1f5f9;
    border-radius: 8px;
    cursor: pointer;
  }
  .ambient-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
  }

  /* End-session: визуально отделить + большая кнопка */
  #end-session-row {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border, #e2e8f0);
  }
  #end-session-button {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
  }

  /* Если показывается status-bar в drawer — тоже компактно */
  body.mobile-drawer-open #status-bar {
    /* остаётся как было */
  }

  /* Прячем технические блоки на mobile (отчёт-summary, hints, timings) */
  #report-summary,
  #asr-hint,
  #timings {
    /* отображаются только если активны — не трогаем visibility */
  }

  /* ── 6. PEARLS-debrief modal: занимает весь экран ─────────── */
  #debrief-modal .modal-card {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    margin: 0;
  }
}


/* ──────────────────────────────────────────────────────────────────
   Подробный mobile (≤ 480px) — очень узкие экраны
   ────────────────────────────────────────────────────────────────── */
/* Trigger toast container: на mobile опускаем ниже шапки чтобы не
   перекрывал «Виртуальный пациент» / таймер / hamburger. */
@media (max-width: 768px) {
  #trigger-toasts {
    top: 60px !important;
    right: 8px !important;
    left: 8px !important;
    max-width: none !important;
  }
}

@media (max-width: 480px) {
  .header-title h1 { font-size: 13px; }
  #patient-info { display: none; }   /* совсем не помещается */
  body:not(.admin-app):not(.studio) #ptt-button,
  body:not(.admin-app):not(.studio) #continuous-button:not([hidden]) {
    width: 76px;
    height: 76px;
  }
  body:not(.admin-app):not(.studio) #ptt-button::before { font-size: 32px; }
  body:not(.admin-app):not(.studio) #continuous-button::before { font-size: 28px; }
}


/* ──────────────────────────────────────────────────────────────────
   Landscape phone (низкий viewport) — даём аватар горизонтально
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  body:not(.admin-app):not(.studio) main {
    padding: 4px 0 12px 0;
  }
  .stage { aspect-ratio: 16 / 9; }
  /* В landscape сделаем FAB чуть меньше и поднимем выше */
  body:not(.admin-app):not(.studio) #ptt-button,
  body:not(.admin-app):not(.studio) #continuous-button:not([hidden]) {
    width: 64px;
    height: 64px;
    top: 50%;
    right: 16px;
  }
  body:not(.admin-app):not(.studio) #ptt-button::before { font-size: 26px; }
  body:not(.admin-app):not(.studio) #continuous-button::before { font-size: 22px; }
}