/* ============================================================
   Anamnese Showcase — Fullscreen-Immersion-Layout (Issue #75)
   Token-Quelle: showcase-theme.css.
   Avatar/Video großflächig (vollflächig), Frage/Optionen/Listen
   als schwebende Karten als OVERLAY über dem Video.
   DOM/IDs/Klassen eingefroren — nur Layout/Optik. Diese Datei
   ÜBERSCHREIBT bewusst Teile von showcase.css/showcase-panels.css
   (zuletzt eingebunden → gewinnt bei gleicher Spezifität).
   ============================================================ */

/* --- Kiosk-Cap aufheben: echtes Vollbild auf Desktop/Notebook (#128) ---
   showcase.css:23-29 deckelt den ganzen Body bei >=1024px auf eine zentrierte
   1100px-Kiosk-Spalte → Avatar war auf dem Notebook nur ein Kasten mit grauen
   Rändern, NICHT vollflächig (Ninos Immersions-Anforderung #75). Im immersiven
   Modus (diese Datei ist immer geladen) brechen wir den Cap auf: der Body füllt
   die volle Viewport-Breite, damit `.video-container` (position:absolute; inset:0)
   den ganzen Bildschirm bekommt. Mobile (<1024px) war nie gedeckelt → unverändert.
   Die schwebenden Karten (Frage/Optionen/Summary) sitzen relativ zur `.main`-Bühne
   und bleiben korrekt. Der Wegfall des Caps ist embed-freundlich (eine künftige
   iFrame-Einbettung füllt den Frame statt einer zentrierten Spalte) — eine reale
   goAlice-iFrame-Integration existiert im Code aber (noch) nicht. */
@media (min-width: 1024px) {
  body {
    max-width: none;
    margin: 0;
    box-shadow: none;
  }
}

/* --- Main wird zum Vollbild-Bühnenraum (Positionierungs-Kontext) --- */
.main {
  position: relative;
  padding: 0;
  overflow: hidden;
}

/* --- Video füllt die gesamte Bühne (immersiv) --- */
.video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  flex: 1 1 auto;
  border-radius: 0;
}
/* Aspect-Spacer aus showcase.css deaktivieren — wir füllen jetzt die Höhe. */
.video-container::before { content: none; }
/* Avatar formatfüllend statt eingepasst → echtes Vollbild-Gefühl.
   contain ließ schwarze Balken; cover füllt die Bühne mit dem Gesicht.
   object-position oben verankert: auf breiten Desktop-Viewports (seit dem
   Vollbild-Fix #128) beschneidet cover sonst symmetrisch oben+unten → der
   Kopf des Avatars wurde oben abgeschnitten. "center top" verlagert den
   Beschnitt nach unten (dort liegen ohnehin die Overlay-Karten), der Kopf
   bleibt vollständig im Bild. Auf Mobile (Video wird horizontal beschnitten)
   ist die vertikale Verankerung neutral. */
.video-container video,
.freeze-canvas,
.idle-video {
  object-fit: cover;
  object-position: center top;
}

/* Auch beim Prüfen (Bestätigung/Korrektur/Zusammenfassung) bleibt das Video
   vollflächig — die Liste schwebt darüber und scrollt bei Bedarf, statt das
   Video zu verkleinern. Damit kein Layout-Sprung mehr (überschreibt das
   :has()-Schrumpfen aus showcase.css). */
.main:has(.answer-list-panel.visible) .video-container,
.main:has(.correction-panel.visible) .video-container,
.main:has(.summary-panel.visible) .video-container {
  max-height: none;
  min-height: 0;
}

/* Lesbarkeits-Verlauf am unteren Rand, damit weiße Karten auf hellem
   Avatar-Hintergrund Halt bekommen (dezent, Navy). */
.video-container::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(15, 19, 41, 0.55), rgba(15, 19, 41, 0));
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--transition);
}
/* Verlauf nur zeigen, wenn auch eine Karte sichtbar ist. */
.main:has(.bottom-panel .visible) .video-container::after { opacity: 1; }

/* --- Bottom-Panel: schwebendes Overlay über dem Video --- */
.bottom-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  flex: none;
  padding: var(--space-4);
  gap: var(--space-3);
  /* Karten nur so hoch wie nötig; lange Inhalte scrollen INNERHALB der Karte
     (siehe Panel-Regeln unten), nicht das ganze Overlay. */
  max-height: 78%;
  overflow: visible;
  /* Klicks gehen durch leere Flächen hindurch zum Video/Skip; die Karten
     selbst fangen Klicks (pointer-events: auto unten). */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Sichtbare Karten fangen Zeiger wieder ein. */
.bottom-panel > .visible { pointer-events: auto; }

/* Karten bekommen mehr „Float": stärkerer Schatten, leichte Transluzenz für
   die Frage/Optionen (Avatar bleibt durchscheinend spürbar). */
.question-text-area,
.options-panel {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg);
}
.text-answer-panel,
.answer-list-panel,
.correction-panel,
.summary-panel {
  /* Prüf-/Antwort-Karten brauchen vollen Kontrast (viel Text) → opak. */
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

/* Lange Listen dürfen das Overlay nicht sprengen: jede inhaltsschwere Karte
   scrollt intern. So bleiben 10-12 Medikamente bzw. ~48 Q&A-Paare sichtbar,
   während Avatar + Bestätigungs-Buttons im Bild bleiben (#75). */
.answer-list-panel,
.correction-panel,
.summary-panel,
.text-answer-panel {
  max-height: 72vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Finale Q&A-Zusammenfassung großzügiger + klare Scroll-Affordance (#129) ---
   Bei ~48 Q&A zeigte die Bottom-Karte nur ~5-6 Einträge mit Innen-Scroll, aber
   OHNE sichtbaren Scrollbalken → wirkte abgeschnitten („Liste sehe ich nicht").
   Nach dem Kiosk-Cap-Fix (#128) ist mehr Breite da; zusätzlich geben wir der
   finalen Übersicht mehr Höhe und eine deutliche Scroll-Affordance:
   (1) sichtbarer, gestylter Scrollbalken (auch WebKit/Blink, wo er sonst
       overlay-unsichtbar ist), (2) ein „mehr unten"-Fade-Verlauf am unteren
       Kartenrand, der nur erscheint, wenn der Inhalt überläuft. */
.summary-panel {
  max-height: 84vh;
  /* Platz für den Fade-Indikator unten, damit der letzte Eintrag nicht
     dauerhaft unter dem Verlauf klebt. */
  scrollbar-width: thin;                       /* Firefox: schmaler, aber sichtbar */
  scrollbar-color: var(--accent) transparent;  /* Firefox: Daumen in Akzentfarbe */
  /* Position für das ::after-Fade (innerhalb der scrollenden Karte) */
  position: relative;
}
/* Sichtbarer Scrollbalken in Blink/WebKit (sonst nur Overlay → unsichtbar). */
.summary-panel::-webkit-scrollbar { width: 10px; }
.summary-panel::-webkit-scrollbar-track {
  background: var(--tint, rgba(0, 0, 0, 0.05));
  border-radius: var(--radius-sm);
}
.summary-panel::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: var(--radius-sm);
  border: 2px solid var(--surface);
}
/* „Es geht weiter unten"-Fade: am unteren Kartenrand fixiert (sticky), erscheint
   als sanfter Verlauf über dem letzten sichtbaren Eintrag → signalisiert Scroll.
   pointer-events:none, damit Klicks/Scrollen durchgehen.
   NUR bei echtem Überlauf: showcase-app.js setzt .has-overflow auf #summaryPanel
   (Messung scrollHeight>clientHeight nach Layout). Ohne diese Klasse wäre der Fade
   sonst auch bei kurzer Liste (Demo: 5 Fragen) dauerhaft sichtbar — sticky
   unterdrückt das bei nicht-scrollbarem Inhalt nicht. */
/* Reserve am Listenende, damit der Fade über LEEREM Raum liegt statt über dem
   letzten Eintrag (#154). Der Verlauf wird zudem am Kartenrand fixiert (bottom:0)
   und am Listenende komplett ausgeblendet (showcase-app.js entfernt .has-overflow,
   sobald ans Ende gescrollt ist) — so bleibt der letzte Eintrag immer frei lesbar. */
.summary-panel .summary-list {
  padding-bottom: var(--space-6, 2.5rem);
}
.summary-panel.has-overflow .summary-list::after {
  content: '';
  display: block;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--space-6, 2.5rem);
  margin-top: calc(-1 * var(--space-6, 2.5rem));
  background: linear-gradient(to top, var(--surface) 12%, rgba(255, 255, 255, 0));
  pointer-events: none;
}

@media (max-height: 720px) {
  .summary-panel { max-height: 88vh; }
}
/* Bestätigungs-Buttons im Sichtbereich halten, auch wenn die Liste scrollt:
   Buttons kleben am unteren Kartenrand. */
.answer-list-panel .confirm-buttons {
  position: sticky;
  bottom: calc(-1 * var(--space-4));
  margin-bottom: calc(-1 * var(--space-4));
  padding: var(--space-3) 0 var(--space-4);
  background: linear-gradient(to top, var(--surface) 70%, rgba(255, 255, 255, 0));
}

/* --- Sprech-Status-Anzeige (#75): zeigt, ob der Patient reden darf --- */
.speech-status {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgba(15, 19, 41, 0.78);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
  white-space: nowrap;
}
.speech-status.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.speech-status .speech-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Zustand: Avatar spricht / Clip läuft → Patient soll zuhören. */
.speech-status.speaking { background: rgba(25, 31, 62, 0.82); }
.speech-status.speaking .speech-status-dot {
  color: var(--blue);
  animation: speechSpeak 1.1s ease-in-out infinite;
}
/* Zustand: Mikro offen → Patient darf/soll reden. */
.speech-status.listening { background: rgba(124, 169, 92, 0.92); }
.speech-status.listening .speech-status-dot {
  color: #fff;
  animation: speechListen 1.3s ease-in-out infinite;
}
/* Zustand: Verarbeitung. */
.speech-status.processing { background: rgba(233, 62, 106, 0.92); }
.speech-status.processing .speech-status-dot { color: #fff; animation: speechProcess 0.9s linear infinite; }

/* #120: Der #151-Dauerhinweis (.voice-hint) wurde entfernt — die Einladung trägt
   jetzt der funktionale "Ich habe eine Frage"-Button in der Rückfragen-Phase. */

@keyframes speechSpeak {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.5); opacity: 1; }
}
@keyframes speechListen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
  50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}
@keyframes speechProcess {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.5; }
}

/* Captions sitzen ÜBER dem Karten-Overlay tiefer, damit sie sich nicht mit den
   Karten überlagern: leicht höher anheben, wenn eine Karte sichtbar ist. */
.main:has(.bottom-panel .visible) .caption-overlay {
  bottom: auto;
  top: var(--space-6);
}

/* --- Live-STT-Transkript aus der Überlappungszone holen (#127) ---
   Der Live-Transkript (.transcript-bar / #transcriptBar) erscheint, während das
   Mikro scharf ist — und das passiert ZEITGLEICH mit dem Optionen-Panel
   (Server schickt start_listening VOR show_options → „sprechen ODER klicken").
   Die Transkript-Bar liegt im .video-container (kein z-index → malt unter dem
   .bottom-panel mit z-index:6) und war unten verankert (showcase.css: bottom:0)
   → vom Optionen-Panel verdeckt und unleserlich (Stacking-Regression aus #75).
   Lösung (Option B, Layout-Reflow): die Bar nach OBEN unter die Sprech-Status-
   Pille versetzen, als kompakte zentrierte Karte — analog zur Caption-Lift-Regel.
   Offset gegen .speech-status (top:var(--space-4) + Pillenhöhe) gewählt; z-index:7
   hebt sie über den Verlauf/Skip, der display:none/.visible-Toggle aus
   showcase.css:280-282 bleibt intakt (nur Positionierung überschrieben). */
.transcript-bar {
  bottom: auto;
  top: calc(var(--space-4) + 3rem);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  max-width: min(92%, 60ch);
  border-radius: var(--radius);
  z-index: 7;
}
/* Sind gleichzeitig VTT-Captions sichtbar (oben angehoben, top:var(--space-6)),
   rückt der Transkript noch ein Stück tiefer, damit beide nebeneinander lesbar
   bleiben und nicht aufeinander liegen. */
.main:has(.bottom-panel .visible) .transcript-bar {
  top: calc(var(--space-6) + 3.25rem);
}

/* Skip-Button bleibt erreichbar (über dem Verlauf, unter den Karten). */
.skip-btn { z-index: 6; }

/* --- Schmale Viewports: Karten dürfen mehr Höhe nehmen --- */
@media (max-height: 720px) {
  .bottom-panel { max-height: 85%; }
  .answer-list-panel,
  .correction-panel,
  .summary-panel,
  .text-answer-panel { max-height: 78vh; }
}