/* ========================================
   VOICE ORB OVERLAY (Conversation Mode, Phase 2)
   ========================================
   Vollbild-Overlay über .chat-container (Sidebar bleibt bewusst
   unbedeckt, siehe #conversationOverlay-Platzierung in index.html:
   Geschwister-Element von .chat-container, nicht von .container).

   Design-Vorlage: voice-orb-animation-lilac.html (separat geliefert,
   eigenständige Demo-Seite). Struktur (.orb-wrap/.orb/.hud) und
   Keyframes von dort übernommen, Farben aber NICHT dupliziert -
   --violet in style.css ist bereits identisch zum Vorlagen-Akzent
   (#6C63C7), deshalb hier auf die bestehenden Mentana-Variablen
   verwiesen statt eigene Hex-Werte zu pflegen.

   z-index 1200: bewusst über .modal/.category-feedback (1000/950) UND
   über die mobile Sidebar-Drawer-Overlay-Kette (.sidebar-overlay 1100,
   .sidebar.open 1101) - siehe Phase-3-Kommentar zu Popups. Die Sidebar
   selbst liegt AUSSERHALB dieses Overlays im DOM (siehe HTML) und bleibt
   dadurch auf DESKTOP (permanent sichtbar, kein Hamburger-Button nötig)
   unabhängig vom z-index bedienbar.

   Live-Fund (Mobile-Test): auf Mobile/Tablet stimmt das NICHT - dort gibt
   es keine permanente Sidebar, der einzige Zugang ist der Hamburger-
   Button (#sidebarToggleBtn), der anders als <aside> INNERHALB von
   .chat-header/.chat-container sitzt und deshalb vom Overlay verdeckt
   wurde. Siehe .conversation-close-btn weiter unten - eigener,
   ausschließlich auf Mobile sichtbarer Schließen-Button als Fix. */

#conversationOverlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(108, 99, 199, .22), transparent 29rem),
        radial-gradient(circle at 20% 10%, rgba(152, 74, 170, .12), transparent 22rem),
        var(--bg);
    color: var(--ink);
}

#conversationOverlay.is-active {
    display: flex;
}

.orb-wrap {
    width: min(60vw, 20rem);
    aspect-ratio: 1;
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    filter: drop-shadow(0 0 3rem rgba(108, 99, 199, .27));
}

.orb-wrap::before,
.orb-wrap::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.orb-wrap::before {
    inset: -12%;
    background: radial-gradient(circle, rgba(108, 99, 199, .24) 0 17%, transparent 58%);
    filter: blur(1.3rem);
    animation: orb-glow-breathe 4.8s ease-in-out infinite;
}

.orb-wrap::after {
    inset: -5%;
    border: 1px solid rgba(180, 169, 244, .13);
    box-shadow: 0 0 2rem rgba(108, 99, 199, .12), inset 0 0 2rem rgba(216, 117, 201, .06);
    animation: orb-halo 4.8s ease-in-out infinite;
}

/* Leise Lichtstruktur statt klassischem Assistenz-HUD - siehe Vorlage.
   Sternsymbole bewusst nur dezent (Tabellen-Vorgabe "Lange Pause"),
   in allen Zuständen gleich schwach, da wir echte Pausenerkennung ohne
   Amplituden-Daten nicht sauber von "Stille" unterscheiden können
   (siehe Rücksprache zur reduzierten State-Machine unten). */
.hud {
    position: absolute;
    inset: -17%;
    border-radius: 50%;
    pointer-events: none;
    opacity: .6;
    background:
        conic-gradient(from 78deg, transparent 0 12%, rgba(216, 117, 201, .28) 12.2% 13.2%, transparent 13.5% 36%, rgba(154, 146, 227, .3) 36.2% 37.2%, transparent 37.5% 100%);
    -webkit-mask: radial-gradient(circle, transparent 0 70%, #000 70.5% 71.5%, transparent 72% 83%, #000 83.5% 84.1%, transparent 84.6%);
    mask: radial-gradient(circle, transparent 0 70%, #000 70.5% 71.5%, transparent 72% 83%, #000 83.5% 84.1%, transparent 84.6%);
    animation: orb-hud-rotate 24s linear infinite;
}

.hud::before,
.hud::after {
    content: "✦";
    position: absolute;
    display: grid;
    place-items: center;
    width: .34rem;
    height: .34rem;
    color: rgba(236, 201, 247, .85);
    font-size: .42rem;
    line-height: 1;
    text-shadow: 0 0 .45rem rgba(216, 117, 201, .85), 0 0 .9rem rgba(108, 99, 199, .65);
    -webkit-mask: none;
    mask: none;
    animation: orb-star-drift 5.6s ease-in-out infinite;
}

.hud::before { top: 11%; left: 22%; }
.hud::after { right: 16%; bottom: 19%; animation-delay: -2.7s; animation-duration: 6.4s; }

.orb {
    width: 72%;
    height: 72%;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    transform: translateZ(0) scale(.94);
    background:
        radial-gradient(circle at 67% 25%, rgba(236, 201, 247, .28) 0 .8%, rgba(216, 117, 201, .18) 4%, transparent 17%),
        radial-gradient(circle at 25% 30%, rgba(154, 146, 227, .92) 0 7%, var(--violet) 16%, transparent 39%),
        radial-gradient(circle at 73% 73%, rgba(216, 117, 201, .82) 0 10%, rgba(119, 69, 171, .68) 27%, transparent 53%),
        radial-gradient(circle at 44% 54%, var(--violet-bright) 0%, var(--violet) 33%, var(--violet-deep) 71%, #100e2d 100%);
    box-shadow:
        inset -1rem -1rem 2rem rgba(10, 8, 38, .62),
        inset .7rem .6rem 1.4rem rgba(218, 208, 255, .2),
        0 0 1.2rem rgba(108, 99, 199, .7),
        0 0 3.8rem rgba(108, 99, 199, .52),
        0 0 7rem rgba(216, 117, 201, .19);
    transition: transform .6s ease-out, box-shadow .6s ease-out;
}

.orb::before,
.orb::after {
    content: "";
    position: absolute;
    inset: -25%;
    border-radius: 42% 58% 63% 37% / 45% 39% 61% 55%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.orb::before {
    background:
        conic-gradient(from 40deg at 50% 50%, transparent 0 18%, rgba(154, 146, 227, .56) 25%, transparent 35% 50%, rgba(216, 117, 201, .6) 60%, transparent 71% 100%);
    filter: blur(.65rem);
    animation: orb-swirl-one 8s linear infinite;
}

.orb::after {
    inset: 7%;
    background:
        radial-gradient(ellipse at 30% 22%, rgba(255, 255, 255, .5), transparent 7%),
        radial-gradient(ellipse at 58% 68%, rgba(216, 160, 237, .24), transparent 16%),
        linear-gradient(128deg, transparent 28%, rgba(154, 146, 227, .44) 44%, transparent 55%, rgba(216, 117, 201, .34) 73%, transparent 85%);
    filter: blur(.35rem);
    animation: orb-swirl-two 6s ease-in-out infinite alternate;
}

/* ========================================
   ZUSTÄNDE (State-Machine, siehe voice-orb-overlay.js)
   ========================================
   Reduziert auf das, was die Realtime API tatsächlich liefert (siehe
   Rücksprache Phase 2): nur Turn-Level-Signale (Nutzer spricht /
   Mentana antwortet / dazwischen), keine Lautstärke-/Betonungs-Daten
   pro Frame. "Betonte Stelle" und "Lange Pause" aus der ursprünglichen
   5-Zustands-Tabelle entfallen deshalb ersatzlos statt erfundene Werte
   zu simulieren.

   Choreografie (Rücksprache nach erstem Live-Test): NICHT "Nutzer
   spricht" ist der lebhafteste Zustand, sondern "Mentana spricht" -
   soll wirken wie ein redender, lebendiger ChatGPT-Voice-Orb, während
   Zuhören/Stille bewusst ruhig bleiben (beide ohnehin nicht sauber
   unterscheidbar ohne echte Lautstärkedaten, siehe oben). */

/* idle: Stille / Bereitschaft - ruhiges, langsames Atmen. */
#conversationOverlay.state-idle .orb {
    animation: orb-breathe-idle 4.8s ease-in-out infinite;
}
#conversationOverlay.state-idle .orb-wrap::before,
#conversationOverlay.state-idle .orb-wrap::after {
    animation-duration: 4.8s;
    opacity: .7;
}

/* listening: Nutzer spricht gerade (input_audio_buffer.speech_started) -
   bewusst genauso ruhig wie idle (siehe Rücksprache: nicht der Zustand,
   der "lebendig" wirken soll), nur ein minimal saftigerer Grundton als
   Bestätigung, dass zugehört wird. */
#conversationOverlay.state-listening .orb {
    animation: orb-breathe-idle 4.2s ease-in-out infinite;
}
#conversationOverlay.state-listening .orb-wrap::before,
#conversationOverlay.state-listening .orb-wrap::after {
    animation-duration: 4.2s;
    opacity: .78;
}

/* responding: Mentana spricht gerade (response.created ... response.done)
   - der lebendige, "redende" Zustand. Drei sich überlagernde, UNTERSCHIEDLICH
   lange Animationen (Skalierung + Rotation + innere Farbwolken) statt einer
   einzigen symmetrischen Atem-Kurve - das unregelmäßige Zusammenspiel
   erzeugt den Eindruck von tatsächlicher Sprachbewegung statt reinem
   Pulsieren. Deutlich kürzere Zyklen und stärkerer Glow als idle/listening. */
#conversationOverlay.state-responding .orb {
    animation: orb-speak-pulse 1.15s ease-in-out infinite;
    box-shadow:
        inset -1rem -1rem 2rem rgba(10, 8, 38, .62),
        inset .7rem .6rem 1.4rem rgba(218, 208, 255, .22),
        0 0 1.8rem rgba(108, 99, 199, .85),
        0 0 5.2rem rgba(108, 99, 199, .65),
        0 0 9.5rem rgba(216, 117, 201, .32);
}
#conversationOverlay.state-responding .orb::before {
    animation-duration: 2.4s;
}
#conversationOverlay.state-responding .orb::after {
    animation-duration: 1.6s;
}
#conversationOverlay.state-responding .orb-wrap::before,
#conversationOverlay.state-responding .orb-wrap::after {
    animation: orb-glow-speak 1.15s ease-in-out infinite;
    opacity: .95;
}

/* Nur auf Mobile/Tablet sichtbar (siehe @media 768px unten) - auf
   Desktop bleibt der bestehende Sidebar-Schalter der einzige Weg, dort
   braucht es diesen Button nicht (Rücksprache). display:none als
   Basiswert, damit ein fehlendes @media (z.B. gedrucktes CSS) den Button
   nicht versehentlich auf Desktop zeigt. */
.conversation-close-btn {
    display: none;
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(180, 169, 244, .28);
    background: rgba(22, 20, 62, .72);
    color: var(--ink);
    cursor: pointer;
    backdrop-filter: blur(12px);
    z-index: 1;
}

.conversation-close-btn:hover {
    background: rgba(61, 54, 126, .72);
    border-color: rgba(216, 160, 237, .62);
}

.conversation-hud-status {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: .9rem;
    text-align: center;
}

.conversation-hud-status p {
    margin: 0;
    color: var(--ink-soft);
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-family: var(--font-body);
}

.conversation-hint {
    color: var(--ink-faint);
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: none;
}

@keyframes orb-breathe-idle {
    0%, 100% { transform: translateZ(0) scale(.94); }
    50% { transform: translateZ(0) scale(.98); }
}

/* "Redender" Puls für state-responding: bewusst UNREGELMÄSSIGE
   Zwischenschritte (nicht einfach 0%/50%/100% symmetrisch) - ahmt den
   ungleichmäßigen Rhythmus gesprochener Sprache nach, statt wie reines
   mechanisches Atmen zu wirken. */
@keyframes orb-speak-pulse {
    0% { transform: translateZ(0) scale(1.0); }
    18% { transform: translateZ(0) scale(1.07); }
    32% { transform: translateZ(0) scale(1.02); }
    50% { transform: translateZ(0) scale(1.1); }
    68% { transform: translateZ(0) scale(1.03); }
    84% { transform: translateZ(0) scale(1.08); }
    100% { transform: translateZ(0) scale(1.0); }
}

@keyframes orb-glow-speak {
    0%, 100% { transform: scale(.95); opacity: .55; }
    40% { transform: scale(1.22); opacity: .95; }
    70% { transform: scale(1.05); opacity: .75; }
}

@keyframes orb-glow-breathe {
    0%, 100% { transform: scale(.8); opacity: .46; }
    50% { transform: scale(1.18); opacity: .86; }
}

@keyframes orb-hud-rotate {
    to { transform: rotate(360deg); }
}

@keyframes orb-star-drift {
    0%, 100% { opacity: .28; transform: scale(.7) rotate(0deg); }
    45% { opacity: .9; transform: scale(1.25) rotate(22deg); }
    70% { opacity: .48; transform: scale(.9) rotate(45deg); }
}

@keyframes orb-halo {
    0%, 100% { transform: scale(.9); opacity: .34; }
    50% { transform: scale(1.08); opacity: .78; }
}

@keyframes orb-swirl-one {
    to { transform: rotate(360deg) scale(1.08); }
}

@keyframes orb-swirl-two {
    0% { transform: rotate(-8deg) translate(-3%, 2%) scale(.95); }
    100% { transform: rotate(14deg) translate(4%, -2%) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    #conversationOverlay *,
    #conversationOverlay *::before,
    #conversationOverlay *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 768px) {
    .orb-wrap {
        width: min(72vw, 18rem);
    }

    /* Live-Fund: auf Mobile gibt es keine permanente Sidebar, der einzige
       Zugang (Hamburger-Button) sitzt innerhalb von .chat-container und
       wird vom Overlay verdeckt - ohne diesen Button war man im
       Conversation Mode auf dem Handy "gefangen". */
    .conversation-close-btn {
        display: flex;
    }
}