/* ============================================================
   Artemed Showcase — Shell (Base, Header, Video, Status, Overlays)
   Token-Quelle: showcase-theme.css. Issue #50.
   DOM/IDs/Klassen eingefroren — nur Optik.
   ============================================================ */

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

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-text-size-adjust: 100%;
}

/* Auf breiten Viewports als zentrierte Kiosk-Spalte (Embed-/Desktop-tauglich) */
@media (min-width: 1024px) {
  body {
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: var(--shadow-lg);
  }
}

/* --- Header: weiß mit Navy-Logo + Gradient-Akzentlinie (Artemed) --- */
.header {
  position: relative;
  background: var(--surface);
  color: var(--navy);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gradient-brand);
}
.header-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
  margin-right: var(--space-2);
  flex-shrink: 0;
  filter: var(--logo-to-navy);
}
.header-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}
.header-phase {
  margin-left: auto;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
  background: var(--accent-tint);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
}

/* --- Main --- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

/* --- Video-Bereich --- */
.video-container {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  max-height: 55vh;
  min-height: 30vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: max-height 0.25s ease, min-height 0.25s ease;
}

/* Prüft der Patient seine Angaben (Bestätigung/Korrektur/Zusammenfassung),
   tritt das Video zurück und gibt die volle Höhe für die Liste frei —
   damit nichts abgeschnitten wird und nicht gescrollt werden muss. */
.main:has(.answer-list-panel.visible) .video-container,
.main:has(.correction-panel.visible) .video-container,
.main:has(.summary-panel.visible) .video-container {
  max-height: 20vh;
  min-height: 0;
}
.video-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}
/* Aspect-ratio spacer: hält Container-Höhe stabil auch ohne Video */
.video-container::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}
.video-container video::cue {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 1rem;
  line-height: 1.4;
}

/* Text-Platzhalter wenn kein Video */
.text-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, #eef0f6, var(--bg));
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 3;
}
.text-placeholder.visible { display: flex; }
.text-placeholder .avatar-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow);
}
.text-placeholder .speech-bubble {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  max-width: 90%;
  box-shadow: var(--shadow);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text);
}

/* Freeze-Canvas: letztes Video-Frame als Standbild */
.freeze-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.freeze-canvas.visible { opacity: 1; visibility: visible; }

/* Idle-Video: transition clips + loop zwischen Haupt-Clips */
.idle-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
.idle-video.visible { opacity: 1; visibility: visible; }

/* Idle-Filler Fallback (CSS-only, bis Idle-Videos geladen sind) */
.idle-filler {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef0f6, var(--bg));
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.idle-filler.visible { display: flex; }
.idle-filler .idle-avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: white;
  font-size: 3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}
.idle-dots { margin-top: var(--space-4); display: flex; gap: 6px; }
.idle-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.3;
  animation: idlePulse 1.2s ease-in-out infinite;
}
.idle-dots span:nth-child(2) { animation-delay: 0.2s; }
.idle-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes idlePulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* Untertitel (Captions) — synchron zum Avatar-Clip, Artemed-CI */
.caption-overlay {
  position: absolute;
  left: 50%;
  bottom: var(--space-5, 1.5rem);
  transform: translateX(-50%);
  z-index: 4;
  max-width: min(92%, 60ch);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-radius: var(--radius, 14px);
  background: rgba(15, 19, 41, 0.82); /* var(--navy-dark) translucent */
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--fs-md, 1.15rem);
  line-height: var(--lh-normal, 1.5);
  text-align: center;
  white-space: pre-line; /* Mehrzeiler aus VTT erhalten */
  box-shadow: var(--shadow-lg, 0 8px 30px rgba(0, 0, 0, 0.25));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.caption-overlay.visible { opacity: 1; visibility: visible; }

/* Transcript-Overlay (klein, unaufdringlich) */
.transcript-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  text-align: center;
  display: none;
}
.transcript-bar.visible { display: block; }

/* Skip-Button */
.skip-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.skip-btn:hover { opacity: 1; }

/* --- Status-Bar --- */
.status-bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.status-text {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  min-height: 1.2em;
}
.status-text.error { color: var(--error); }
.status-text.processing { color: var(--primary); }

/* Level-Meter */
.level-meter {
  width: 120px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.level-meter.hidden { visibility: hidden; }
.level-bar {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 50ms;
}
.level-bar.speaking { background: var(--success); }
.level-bar.silent { background: var(--border); }
.level-threshold {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--error);
  left: 0%;
}

/* Mic-Button */
.mic-btn {
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: white;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mic-btn:hover { background: var(--primary-dark); }
.mic-btn.listening { background: var(--accent); animation: pulse 1.5s infinite; }
.mic-btn.disabled { background: var(--border); cursor: not-allowed; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 62, 106, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(233, 62, 106, 0); }
}

/* Hangup */
.hangup-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--error);
  border: 1.5px solid var(--border);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.hangup-btn:hover { border-color: var(--error); background: #fff5f5; }

/* --- Fallnummer-Overlay --- */
.fallnummer-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-6);
}
.fallnummer-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-brand);
}
.fallnummer-overlay.hidden { display: none; }
.fallnummer-logo {
  height: 52px;
  width: auto;
  object-fit: contain;
  margin-bottom: var(--space-5);
  filter: var(--logo-to-navy);
}
.fallnummer-overlay h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.fallnummer-overlay p {
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  font-size: var(--fs-base);
}
.anonymization-hint {
  max-width: 380px;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--tint);
}
.fallnummer-input {
  font-size: var(--fs-lg);
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  width: 260px;
  outline: none;
  transition: border-color var(--transition);
}
.fallnummer-input:focus { border-color: var(--accent); }
.fallnummer-submit {
  margin-top: var(--space-4);
  padding: 0 var(--space-6);
  min-height: var(--touch-min);
  border-radius: var(--radius-pill);
  border: none;
  background: var(--accent);
  color: white;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.fallnummer-submit:hover { background: var(--accent-hover); }
.fallnummer-submit:disabled { background: var(--border); cursor: not-allowed; }

/* --- Ended-Overlay --- */
.ended-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-6);
}
.ended-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-brand);
}
.ended-overlay.visible { display: flex; }
.ended-overlay h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--success);
  margin-bottom: var(--space-2);
}
.ended-overlay p { color: var(--text-secondary); margin-bottom: var(--space-5); }
.ended-overlay .restart-btn {
  padding: 0 var(--space-6);
  min-height: var(--touch-min);
  border-radius: var(--radius-pill);
  border: none;
  background: var(--primary);
  color: white;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.ended-overlay .restart-btn:hover { background: var(--primary-dark); }

/* --- Metrics Debug-Overlay (M-Taste) --- */
.metrics-overlay {
  position: fixed;
  bottom: 4.5rem;
  right: 1rem;
  z-index: 90;
  background: rgba(0, 0, 0, 0.78);
  color: #e0e0e0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  min-width: 180px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.metrics-overlay.hidden { display: none; }
.metrics-overlay .metrics-title {
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.2rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.metrics-overlay .metrics-row { display: flex; justify-content: space-between; gap: 1rem; }
.metrics-overlay .metrics-label { color: #aaa; }
.metrics-overlay .metrics-value { font-weight: 600; text-align: right; }
.metrics-overlay .metrics-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 0.3rem 0;
}
.metrics-overlay .metrics-value.green { color: #4caf50; }
.metrics-overlay .metrics-value.yellow { color: #ff9800; }
.metrics-overlay .metrics-value.red { color: #f44336; }
.metrics-overlay .metrics-hint {
  font-size: 0.6rem;
  color: #777;
  margin-top: 0.3rem;
  text-align: center;
}