/* ===========================================================================
   demo-fullscreen.css — Kiosk-/Vollbild-Overrides für die Offline-Demo-PWA
   Lädt NACH landing-blue.css + demo-scene.css und macht aus der kleinen
   Hero-Peek-Szene eine bildschirmfüllende Landscape-Demo (Galaxy Tab S).
   =========================================================================== */

html, body.demo-kiosk {
  height: 100%;
  margin: 0;
  overflow: hidden;                 /* Kiosk: kein Scrollen */
  background: #060912;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;               /* kein Pinch-Zoom des Browsers; Skalierung via Panel */
}

/* Bühne füllt den ganzen Bildschirm, Szene wird darin zentriert */
#sceneViewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0%, #10131c 0%, #090b12 55%, #050710 100%);
}

/* Hero-Wrapper: keine Landing-Ränder mehr */
#demoScene.hero-scene {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
/* Seitliche Fokus-„Wolken" der Landing hier nicht nötig (Viewport clippt) */
#demoScene.hero-scene::before,
#demoScene.hero-scene::after { display: none; }

/* Die ganze macOS-Desktop-Komposition: skaliert + verschiebbar per Bediener-Panel */
#macDesktop.mac-desktop {
  margin: 0;
  /* Feste Hero-Design-Breite (sonst schrumpft der Block im Flex-Container auf die
     Zoom-Fenster-Breite und die seitlichen Overlay-Ränder gehen verloren). */
  width: 1120px;
  max-width: 1120px;
  flex: none;
  transform-origin: center center;
  transform:
    translate(calc(var(--demo-x, 0) * 1px), calc(var(--demo-y, 0) * 1px))
    scale(var(--demo-scale, 1));
  will-change: transform;
}

/* =========================================================================
   Bediener-Steuerung (Button oben rechts + Einstell-Panel) — Liquid-Glass
   ========================================================================= */
#demoCtrlBtn {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.015)),
    rgba(24, 26, 32, 0.62);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 18px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.28);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
#demoCtrlBtn:hover,
#demoCtrlBtn.active { opacity: 1; }
#demoCtrlBtn.active { background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.015)),
    rgba(124, 92, 255, 0.30); }
#demoCtrlBtn svg { width: 22px; height: 22px; }

#demoPanel {
  position: fixed;
  top: calc(max(14px, env(safe-area-inset-top, 0px)) + 56px);
  right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 9999;
  width: 300px;
  max-width: calc(100vw - 28px);
  padding: 14px;
  border-radius: 18px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.015)),
    rgba(20, 22, 28, 0.92);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.28);
  font-family: var(--sans, system-ui, sans-serif);
}
#demoPanel[hidden] { display: none; }

.dpx-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dpx-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.dpx-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,0.06); border: none; color: rgba(255,255,255,0.72); cursor: pointer;
}
.dpx-x:hover { background: rgba(255,255,255,0.12); color: #fff; }
.dpx-x svg { width: 15px; height: 15px; }

.dpx-sec { padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.dpx-sec:first-of-type { border-top: none; padding-top: 0; }
.dpx-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72); margin-bottom: 8px;
}
.dpx-val { font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.9); }

.dpx-btnrow { display: flex; gap: 8px; }
.dpx-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 12px; border-radius: 11px;
  font: 600 13px/1 var(--sans, system-ui, sans-serif);
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dpx-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.dpx-btn-primary { background: #7C5CFF; border-color: transparent; color: #fff; }
.dpx-btn-primary:hover { background: #6b4cf0; }

.dpx-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.14);
  outline: none; cursor: pointer;
  accent-color: #7C5CFF;
}
.dpx-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid #7C5CFF; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.dpx-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid #7C5CFF; cursor: pointer;
}

.dpx-hint {
  margin: 10px 0 0;
  font-size: 11px; line-height: 1.45; color: rgba(255,255,255,0.55);
}

/* Portrait-Hinweis: die Demo ist fürs Querformat gebaut */
#rotateHint {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  padding: 40px; text-align: center;
  background: #060912; color: rgba(255,255,255,0.85);
  font: 500 17px/1.5 var(--sans, system-ui, sans-serif);
}
#rotateHint svg { width: 44px; height: 44px; margin-bottom: 16px; color: #7C5CFF; }
@media (orientation: portrait) and (max-width: 900px) {
  #rotateHint { display: flex; flex-direction: column; }
}

/* =========================================================================
   Widgets 1:1 wie die Desktop-App (Werte aus desktop/src/styles/liquid-glass.css)
   Die Landing macht die Panels absichtlich deckend (0.94) — die echte Software
   nutzt 0.66; nur die Auswertung ist deckender (.insights-popup.panel-solid).
   ========================================================================= */
.demo-panel,
.scene-stage .sw-transcript {
  background: var(--g-sheen), rgba(var(--g-base), 0.66);
  border: 1px solid var(--g-edge);
  border-radius: 16px;
  /* .insights-popup box-shadow */
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 var(--g-rim),
    inset 0 -1px 1px rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Auswertung: bewusst deckender (Ergebnis-Lesen braucht Ruhe) */
.demo-panel.demo-summary { background: var(--g-sheen), rgba(var(--g-base), 0.94); }

/* Innere Karten: .popup-section / .popup-section-highlight */
.demo-panel .popup-section,
.demo-panel .ia-sec {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.demo-panel .popup-section-highlight {
  background: rgba(74, 222, 128, 0.11);
  border: 1px solid rgba(74, 222, 128, 0.18);
  border-radius: 16px;
}

/* ---- Live Coach: Kennzahlen-Zeile (Reden % / WPM) wie InsightApp ---- */
.ia-metrics {
  display: flex; align-items: center; gap: 16px;
  padding: 0 0 8px;                 /* sitzt bereits im gepolsterten .dp-body */
  font-size: 11px; color: var(--g-txt-3); white-space: nowrap;
}
.ia-metrics b { font-weight: 700; }
.ia-m-good { color: #5EC770; }
.ia-m-warn { color: #f2a54e; }
.ia-m-bad { color: #ef6d6d; }

/* ---- Einwände: Kopfzeile + „Weiter" + Tastenkürzel wie EinwaendeBody ---- */
.demo-einw .ew-card { position: relative; padding: 10px 12px; }
.ewx-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ewx-head svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--g-txt-2); }
.ewx-cat {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--g-txt-3);
  background: none; border: none; padding: 0;   /* Landing-Pill neutralisieren */
}
.ewx-list { list-style: none; margin: 0; padding: 0 44px 0 0; display: flex; flex-direction: column; gap: 3px; }
.ewx-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--g-txt); }
.ewx-list li .ewx-b { color: var(--g-txt-3); flex-shrink: 0; margin-top: 1px; }
.ew-weiter {
  position: absolute; right: 8px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: none; padding: 0;
  font: 500 10px/1 inherit; color: var(--g-txt-3); cursor: pointer;
}
.ew-weiter svg { width: 11px; height: 11px; }
.ew-hint { padding: 6px 4px 0; font-size: 10px; color: var(--g-txt-3); }
.ew-hint b { font-weight: 500; color: var(--g-txt-2); }

/* ---- Transkript: Chat-Turns wie TranscriptView (Ich orange / Kunde grün) ---- */
.scene-stage .sw-transcript { width: clamp(240px, 24%, 330px); animation: none; }
/* Chat-Höhe begrenzen, damit das Transkript nicht ins Einwände-Fenster läuft.
   Scrollt intern (Scrollbar versteckt) und hängt am neuesten Turn — wie die App. */
.scene-stage .sw-transcript .dp-body {
  max-height: 118px; overflow-y: auto; padding: 2px 14px 13px;
  scrollbar-width: none; -ms-overflow-style: none;
}
/* Chat ist höher als die alte Ein-Satz-Anzeige -> Transkript hoch, Einwände
   runter, damit sich die beiden linken Fenster nicht überlappen. */
.zoom-window .scene-stage .sw-transcript { top: 13%; }
.scene-stage .demo-panel.demo-einw { top: 58%; }
.scene-stage .sw-transcript .dp-body::-webkit-scrollbar { display: none; }
.tr-list { display: flex; flex-direction: column; gap: 10px; }
.tr-row { display: flex; align-items: flex-start; gap: 10px; }
.tr-av {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; margin-top: 2px;
}
.tr-av-me { background: rgba(251,146,60,0.20); border: 1px solid rgba(251,146,60,0.45); color: rgba(254,200,145,0.95); }
.tr-av-cust { background: rgba(74,222,128,0.18); border: 1px solid rgba(74,222,128,0.45); color: rgba(167,243,196,0.95); }
.tr-av-int { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--g-txt-3); }
.tr-main { flex: 1; min-width: 0; }
.tr-name {
  display: block; margin-bottom: 2px;
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.tr-name-me { color: rgba(254,200,145,0.95); }
.tr-name-cust { color: rgba(167,243,196,0.95); }
.tr-txt { margin: 0; font-size: 11px; line-height: 1.625; color: var(--g-txt); font-weight: 400; }
.tr-txt-int { color: var(--g-txt-2); font-style: italic; }
.tr-cursor {
  display: inline-block; width: 3px; height: 10px; margin-left: 2px;
  background: rgba(255,255,255,0.4); vertical-align: middle;
  animation: trBlink 1s steps(2, start) infinite;
}
@keyframes trBlink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }