/* ==========================================================
   scene.css — Hintergrundfoto, Glow, Schallwellen
   ========================================================== */

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  background: var(--color-bg-dark);
}

.scene {
  position: relative;
  flex: 0 0 auto;
  /* Aspect-Ratio 3:4 (= 9:12) damit FE und Admin-Vorschau identisch sind */
  aspect-ratio: 3 / 4;
  width: 100%;
  /* Hoehen-Cap damit auf Mobile nicht zuviel Platz fuer Foto, dann passt auch der Chat-Bereich */
  max-height: 50vh;
  overflow: hidden;
  background: var(--color-bg-dark);
}
@media (min-width: 600px) {
  .scene {
    /* Desktop: etwas weniger streng — bleibt aber Hochformat-orientiert */
    aspect-ratio: 4 / 5;
    max-height: 55vh;
  }
}

.scene-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* Default; wird per JS bei zoom != 100 ueberschrieben */
  display: block;
  /* Filter wird per JS gesetzt aus Config (visual.comic_filter) */
}

/* Vordergrund-Layer: freigestellte Skulptur als transparentes PNG.
   Sitzt zwischen scene-photo (Hintergrund) und scene-overlay (SVG-Effekte).
   Wird per JS gefuellt wenn die Skulptur ein image_foreground hat.

   Drei Varianten:
   - scene-foreground (Single): die ganze Skulptur, animiert. Einfach aber sieht
     bei steifen Holzskulpturen unnatuerlich aus weil der Stamm "umkippt".
   - scene-foreground-bottom: untere Skulptur-Haelfte (Stiel/Stamm), STATISCH.
   - scene-foreground-top: obere Skulptur-Haelfte (Bluete/Krone), animiert
     mit Pivot am Uebergangspunkt. Sieht aus als ob nur die Bluete im Wind nickt.
   Wenn Bottom + Top vorhanden sind, sollte Single nicht genutzt werden. */
.scene-foreground,
.scene-foreground-top,
.scene-foreground-bottom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  will-change: transform;
}
.scene-foreground.hidden,
.scene-foreground-top.hidden,
.scene-foreground-bottom.hidden {
  display: none;
}

/* Single-Layer-Variante: dreht um den Boden — Fallback wenn nur ein PNG da ist */
.scene-foreground {
  transform-origin: center bottom;
  animation: scene-foreground-sway 5s ease-in-out infinite;
}

/* Top-Layer-Variante: dreht um den Bluetenansatz (siehe data-pivot-x/y aus JS) */
.scene-foreground-top {
  /* transform-origin wird von JS gesetzt aus image_pivot in DB */
  transform-origin: 36% 52%; /* Default fuer Narzisse, wird per JS ueberschrieben */
  animation: scene-foreground-sway 5s ease-in-out infinite;
}

/* Variante A: Wetterfahne — leichte Hin-und-Her-Drehung, Pivot am Stiel-Ansatz */
.scene-foreground-top.anim-tilt {
  animation: scene-fg-tilt 5s ease-in-out infinite;
}
@keyframes scene-fg-tilt {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

/* Variante B: Lenkrad — Pivot in Bluetenmitte, dreht wie ein Rad */
.scene-foreground-top.anim-spin {
  transform-origin: 36% 33% !important;
  animation: scene-fg-spin 5s ease-in-out infinite;
}
@keyframes scene-fg-spin {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

/* Variante C: 3D-Tuerknauf — Skalierung simuliert eine seitliche Drehung um die Hochachse */
.scene-foreground-top.anim-3d {
  transform-origin: 36% 33% !important;
  animation: scene-fg-3d 5s ease-in-out infinite;
}
@keyframes scene-fg-3d {
  0%, 100% { transform: scaleX(0.92); }
  50%      { transform: scaleX(1.05); }
}

/* Bottom-Layer: STATISCH, keine Animation */
.scene-foreground-bottom {
  /* keine Transformation — der Stamm steht still */
}

@keyframes scene-foreground-sway {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

/* Bei Reduced-Motion-Praeferenz Animation ausschalten */
@media (prefers-reduced-motion: reduce) {
  .scene-foreground,
  .scene-foreground-top {
    animation: none;
  }
}

.scene-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2; /* ueber scene-photo (1) und scene-photo-bg (0) */
}

.corner-btns {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 10;
}
.corner-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(45, 25, 10, 0.55);
  border: 1px solid rgba(255, 247, 237, 0.35);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s, transform 0.1s;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.corner-btn:hover { background: rgba(45, 25, 10, 0.75); }
.corner-btn:active { transform: scale(0.92); }
.corner-btn svg { width: 18px; height: 18px; }

/* === Glow / Schallwellen / Mund-Animationen === */
.glow, .waves, .mouth {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.glow, .waves { opacity: 0; }

.audio-fx[data-state="idle"] .glow {
  opacity: 0.25;
  animation: glow-idle 4s ease-in-out infinite;
}
.audio-fx[data-state="speaking"] .glow {
  animation: glow-talk 0.6s ease-in-out infinite;
}
.audio-fx[data-state="speaking"] .waves {
  animation: waves-out 2.4s ease-out infinite;
}

/* Mund: idle = sanftes 4-Sek-Atmen; speaking = wird per JS direkt gesteuert
   (style.transform). Wenn JS keinen Transform setzt, zeigt sich der Idle-State. */
.mouth {
  transition: transform 0.05s linear, opacity 0.3s ease;
}
.audio-fx[data-state="idle"] .mouth {
  animation: mouth-breathe 4.2s ease-in-out infinite;
  opacity: 0.55;
}
.audio-fx[data-state="speaking"] .mouth {
  animation: none;            /* JS übernimmt */
  opacity: 0.78;
}

@keyframes glow-idle {
  0%, 100% { opacity: 0.18; transform: scale(0.95); }
  50%      { opacity: 0.42; transform: scale(1.1); }
}
@keyframes glow-talk {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.82; transform: scale(1.35); }
}
@keyframes waves-out {
  0%   { opacity: 0;    transform: scale(0.5); }
  40%  { opacity: 0.40; }
  100% { opacity: 0;    transform: scale(1.55); }
}
@keyframes mouth-breathe {
  0%, 100% { transform: scale(0.96, 0.94); }
  50%      { transform: scale(0.98, 1.04); }
}


/* ==========================================================
   Wind-Overlay — DEPRECATED, ersetzt durch scene-foreground
   ========================================================== */

/* ==========================================================
   Skulptur-Titel: 4 Layout-Varianten (Admin via data-layout)
   ========================================================== */

/* Empty-state hide — gilt fuer alle Varianten */
.scene-title-name:empty,
.scene-title-latin:empty { display: none; }

/* ============= VARIANTE A — Halbtransparente Titelleiste oben ============= */
.app[data-layout="a"] .scene-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 12px 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%);
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 5;
}
.app[data-layout="a"] .scene-title-name  { font-size: 1.1rem; font-weight: 700; line-height: 1.1; }
.app[data-layout="a"] .scene-title-latin { font-size: 0.78rem; font-style: italic; opacity: 0.92; margin-top: 2px; line-height: 1.15; }

/* ============= VARIANTE B — Gross zentriert oben ============= */
.app[data-layout="b"] .scene-title {
  position: absolute;
  top: 64px;
  left: 16px;
  right: 16px;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.75);
  pointer-events: none;
  z-index: 5;
}
.app[data-layout="b"] .scene-title-name  { font-size: 1.7rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.app[data-layout="b"] .scene-title-latin { font-size: 0.92rem; font-style: italic; opacity: 0.92; margin-top: 4px; }

/* ============= VARIANTE C — Buttons oben, Titel unten links (Magazin-Look) ============= */
.app[data-layout="c"] .scene-title {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 4px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 5;
}
.app[data-layout="c"] .scene-title-name  { font-size: 1.6rem; font-weight: 700; line-height: 1.05; }
.app[data-layout="c"] .scene-title-latin { font-size: 0.88rem; font-style: italic; opacity: 0.92; margin-top: 4px; }

/* ============= VARIANTE D — Pill-Container links, Buttons rechts ============= */
.app[data-layout="d"] .scene-title {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: calc(100% - 80px);
  padding: 8px 14px;
  background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  pointer-events: none;
  z-index: 5;
}
.app[data-layout="d"] .scene-title-name  { font-size: 1.1rem; font-weight: 700; line-height: 1.1; }
.app[data-layout="d"] .scene-title-latin { font-size: 0.78rem; font-style: italic; opacity: 0.88; margin-top: 2px; line-height: 1.15; }

/* Tablet/Desktop-Skalierung */
@media (min-width: 768px) {
  .app[data-layout="a"] .scene-title-name  { font-size: 1.3rem; }
  .app[data-layout="a"] .scene-title-latin { font-size: 0.9rem; }
  .app[data-layout="b"] .scene-title-name  { font-size: 2.1rem; }
  .app[data-layout="b"] .scene-title-latin { font-size: 1.05rem; }
  .app[data-layout="c"] .scene-title-name  { font-size: 2.0rem; }
  .app[data-layout="c"] .scene-title-latin { font-size: 1.0rem; }
  .app[data-layout="d"] .scene-title-name  { font-size: 1.3rem; }
  .app[data-layout="d"] .scene-title-latin { font-size: 0.9rem; }
}

/* ==========================================================
   Letterbox-Blur Hintergrund + Audio-Effects-Toggle
   ========================================================== */

/* Blur-Hintergrund — gleiches Bild gestreckt + verwischt, fuellt jeden leeren Raum */
.scene-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: block;
  z-index: 0;
  filter: blur(40px) brightness(0.85) saturate(1.1);
  transform: scale(1.15); /* leicht groesser, damit Blur-Raender nicht sichtbar */
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.scene-photo-bg.hidden,
.scene-photo-bg[data-empty="1"] {
  opacity: 0;
}

/* scene-photo darf nicht ueber dem Blur-Layer den ganzen Container fuellen
   wenn ein Bild-Background-Color gesetzt ist — den Z-Index hochstufen */
.scene-photo {
  z-index: 1;
}

/* Audio-Effects (Glow + Waves + Mouth) ausblendbar pro Skulptur */
.audio-fx[data-audio-effects="off"] .scene-overlay {
  display: none;
}

/* ==========================================================
   HTML-basierte Audio-Overlays (statt SVG) - container-relative Position
   ========================================================== */

.scene-overlay .glow,
.scene-overlay .mouth,
.scene-overlay .waves {
  position: absolute;
  left: 38%;
  top: 39%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.scene-overlay .glow {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 228, 160, 0.95) 0%,
    rgba(245, 184, 96, 0.5) 55%,
    rgba(245, 184, 96, 0) 100%);
}
@media (min-width: 600px) {
  .scene-overlay .glow { width: 150px; height: 150px; }
}

.scene-overlay .mouth {
  width: 80px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at center,
    rgba(26, 10, 2, 0.55) 0%,
    rgba(10, 5, 0, 0.42) 50%,
    rgba(10, 5, 0, 0.18) 80%,
    rgba(10, 5, 0, 0) 100%);
}
@media (min-width: 600px) {
  .scene-overlay .mouth { width: 110px; height: 125px; }
}

.scene-overlay .waves {
  width: 0;
  height: 0;
}
.scene-overlay .wave-circle {
  position: absolute;
  left: 0; top: 0;
  border: 2px solid #F5B860;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.scene-overlay .wave-1 { width: 110px; height: 110px; }
.scene-overlay .wave-2 { width: 160px; height: 160px; opacity: 0.65; border-width: 1.6px; }
.scene-overlay .wave-3 { width: 210px; height: 210px; opacity: 0.4;  border-width: 1.2px; }
@media (min-width: 600px) {
  .scene-overlay .wave-1 { width: 150px; height: 150px; }
  .scene-overlay .wave-2 { width: 220px; height: 220px; }
  .scene-overlay .wave-3 { width: 290px; height: 290px; }
}

.audio-fx[data-state="idle"] .scene-overlay .glow {
  opacity: 0.25;
  animation: glow-html-idle 4s ease-in-out infinite;
}
.audio-fx[data-state="speaking"] .scene-overlay .glow {
  opacity: 0.9;
  animation: glow-html-talk 0.6s ease-in-out infinite;
}
.audio-fx[data-state="idle"] .scene-overlay .wave-circle {
  opacity: 0;
}
.audio-fx[data-state="speaking"] .scene-overlay .wave-circle {
  animation: waves-html-out 2.4s ease-out infinite;
}
.audio-fx[data-state="speaking"] .scene-overlay .wave-2 { animation-delay: 0.4s; }
.audio-fx[data-state="speaking"] .scene-overlay .wave-3 { animation-delay: 0.8s; }
.audio-fx[data-state="idle"] .scene-overlay .mouth {
  opacity: 0.55;
  animation: mouth-html-breathe 4.2s ease-in-out infinite;
}
.audio-fx[data-state="speaking"] .scene-overlay .mouth {
  opacity: 0.78;
  animation: none;
}

@keyframes glow-html-idle {
  0%, 100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.2; }
  50%      { transform: translate(-50%, -50%) scale(1.1);  opacity: 0.35; }
}
@keyframes glow-html-talk {
  0%, 100% { transform: translate(-50%, -50%) scale(0.95); }
  50%      { transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes waves-html-out {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}
@keyframes mouth-html-breathe {
  0%, 100% { transform: translate(-50%, -50%) scaleY(1);    opacity: 0.55; }
  50%      { transform: translate(-50%, -50%) scaleY(1.08); opacity: 0.7; }
}

/* ==========================================================
   Audio-Effekt Stil-Varianten (5 Varianten)
   Custom Properties auf .app:
   --audio-size  : Skalierungsfaktor (z.B. 1.0 = 100%)
   --audio-color : Hauptfarbe als Hex (z.B. #F5B860)
   ========================================================== */

.app {
  --audio-size: 1;
  --audio-color: #F5B860;
  --audio-color-bright: #FFE4A0; /* heller Akzent fuer Glow-Center */
}

/* === Variante: GLOW (Default — warmes Leuchten) ============ */
.audio-fx[data-audio-style="glow"] .scene-overlay .glow {
  width: calc(110px * var(--audio-size));
  height: calc(110px * var(--audio-size));
  background: radial-gradient(circle,
    var(--audio-color-bright) 0%,
    var(--audio-color) 55%,
    transparent 100%);
}
@media (min-width: 600px) {
  .audio-fx[data-audio-style="glow"] .scene-overlay .glow {
    width: calc(150px * var(--audio-size));
    height: calc(150px * var(--audio-size));
  }
}
.audio-fx[data-audio-style="glow"] .scene-overlay .wave-circle {
  border-color: var(--audio-color);
}
/* Mund/Wellen wie bisher */

/* === Variante: WAVES (nur 3 konzentrische Ringe, kein Glow) ===== */
.audio-fx[data-audio-style="waves"] .scene-overlay .glow,
.audio-fx[data-audio-style="waves"] .scene-overlay .mouth { display: none; }
.audio-fx[data-audio-style="waves"] .scene-overlay .wave-circle {
  border-color: var(--audio-color);
  border-width: 2.5px;
  opacity: 0.8;
}
.audio-fx[data-audio-style="waves"][data-state="idle"] .scene-overlay .wave-circle {
  opacity: 0.35;
  animation: waves-idle-out 3s ease-out infinite;
}
.audio-fx[data-audio-style="waves"][data-state="idle"] .scene-overlay .wave-2 { animation-delay: 1s; }
.audio-fx[data-audio-style="waves"][data-state="idle"] .scene-overlay .wave-3 { animation-delay: 2s; }

/* === Variante: PULSE (kurze schnelle Schlaege, fuers Klopfen) === */
.audio-fx[data-audio-style="pulse"] .scene-overlay .glow,
.audio-fx[data-audio-style="pulse"] .scene-overlay .mouth { display: none; }
.audio-fx[data-audio-style="pulse"] .scene-overlay .wave-circle {
  border-color: var(--audio-color);
  border-width: 3px;
}
.audio-fx[data-audio-style="pulse"][data-state="idle"] .scene-overlay .wave-circle {
  animation: pulse-tap 1.4s ease-out infinite;
  opacity: 0;
}
.audio-fx[data-audio-style="pulse"][data-state="idle"] .scene-overlay .wave-2 { animation-delay: 0.15s; }
.audio-fx[data-audio-style="pulse"][data-state="idle"] .scene-overlay .wave-3 { animation-delay: 0.3s; }
.audio-fx[data-audio-style="pulse"][data-state="speaking"] .scene-overlay .wave-circle {
  animation: pulse-tap 0.55s ease-out infinite;
  opacity: 0;
}
.audio-fx[data-audio-style="pulse"][data-state="speaking"] .scene-overlay .wave-2 { animation-delay: 0.06s; }
.audio-fx[data-audio-style="pulse"][data-state="speaking"] .scene-overlay .wave-3 { animation-delay: 0.12s; }
@keyframes pulse-tap {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
  60%  { opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* === Variante: ECHO (grosse langsame Wellen, fuers Bergecho) ==== */
.audio-fx[data-audio-style="echo"] .scene-overlay .glow {
  /* sehr subtiler Glow im Zentrum */
  width: calc(80px * var(--audio-size));
  height: calc(80px * var(--audio-size));
  background: radial-gradient(circle,
    var(--audio-color) 0%,
    transparent 70%);
  opacity: 0.4;
}
.audio-fx[data-audio-style="echo"] .scene-overlay .mouth { display: none; }
.audio-fx[data-audio-style="echo"] .scene-overlay .wave-circle {
  border-color: var(--audio-color);
  border-width: 1.8px;
}
.audio-fx[data-audio-style="echo"] .scene-overlay .wave-1 {
  width: calc(150px * var(--audio-size)); height: calc(150px * var(--audio-size));
}
.audio-fx[data-audio-style="echo"] .scene-overlay .wave-2 {
  width: calc(240px * var(--audio-size)); height: calc(240px * var(--audio-size));
}
.audio-fx[data-audio-style="echo"] .scene-overlay .wave-3 {
  width: calc(330px * var(--audio-size)); height: calc(330px * var(--audio-size));
}
.audio-fx[data-audio-style="echo"][data-state="idle"] .scene-overlay .wave-circle,
.audio-fx[data-audio-style="echo"][data-state="speaking"] .scene-overlay .wave-circle {
  animation: echo-out 4.2s ease-out infinite;
  opacity: 0;
}
.audio-fx[data-audio-style="echo"][data-state="idle"] .scene-overlay .wave-2 { animation-delay: 1.4s; }
.audio-fx[data-audio-style="echo"][data-state="idle"] .scene-overlay .wave-3 { animation-delay: 2.8s; }
.audio-fx[data-audio-style="echo"][data-state="speaking"] .scene-overlay .wave-2 { animation-delay: 0.7s; }
.audio-fx[data-audio-style="echo"][data-state="speaking"] .scene-overlay .wave-3 { animation-delay: 1.4s; }
@keyframes echo-out {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* === Variante: SUBTLE (nur leichter Glow, keine Wellen) ========= */
.audio-fx[data-audio-style="subtle"] .scene-overlay .waves,
.audio-fx[data-audio-style="subtle"] .scene-overlay .wave-circle,
.audio-fx[data-audio-style="subtle"] .scene-overlay .mouth { display: none; }
.audio-fx[data-audio-style="subtle"] .scene-overlay .glow {
  width: calc(120px * var(--audio-size));
  height: calc(120px * var(--audio-size));
  background: radial-gradient(circle,
    var(--audio-color) 0%,
    transparent 75%);
  opacity: 0.3;
}
@media (min-width: 600px) {
  .audio-fx[data-audio-style="subtle"] .scene-overlay .glow {
    width: calc(170px * var(--audio-size));
    height: calc(170px * var(--audio-size));
  }
}
.audio-fx[data-audio-style="subtle"][data-state="speaking"] .scene-overlay .glow {
  opacity: 0.55;
}

@keyframes waves-idle-out {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}



/* === Quick-Replies Modi: disabled-Zustand + Toggle-Button === */
.quick-reply.used,
.quick-reply[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.quick-reply.used::after {
  content: " \2713";
  margin-left: 4px;
  color: #6abf69;
  font-weight: 600;
}
.quick-reply-toggle {
  display: inline-block;
  margin: 8px 12px;
  padding: 6px 14px;
  font-size: 13px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
}
.quick-reply-toggle:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.quick-reply-toggle::before {
  content: "\1F4A1 ";
  margin-right: 4px;
}