/*
 * W4Y Overlay – Dark Luxury Theme
 *
 * Architektur:
 *   .wt-overlay         Vollbild-Backdrop: semi-transparent + backdrop-filter
 *                       → Frontpage bleibt sichtbar, blurred, gedimmt
 *   .wt-overlay__inner  Solide dunkle Panel-Karte → Inhalt immer scharf
 *
 * Kein backdrop-filter auf dem Panel selbst: dadurch sind alle
 * Chat-Inhalte scharf, während der Hintergrund weich erscheint.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

/* ════════════════════════════════════════════════════════════════════════════
   TOKENS
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    --ov-gold:         #c9a96e;
    --ov-gold-soft:    #d9b98f;
    --ov-gold-bright:  rgba(255, 240, 200, 0.85);

    --ov-bg-panel:     #0e0b08;
    --ov-bg-surface:   rgba(30, 23, 15, 0.92);
    --ov-bg-raised:    rgba(42, 33, 20, 0.90);
    --ov-bg-inset:     rgba(10, 7, 4, 0.80);

    --ov-text-main:    rgba(255, 248, 238, 0.93);
    --ov-text-soft:    rgba(255, 248, 238, 0.62);
    --ov-text-muted:   rgba(255, 248, 238, 0.38);
    --ov-text-faint:   rgba(255, 248, 238, 0.22);

    --ov-border-gold:  rgba(201, 169, 110, 0.18);
    --ov-border-faint: rgba(201, 169, 110, 0.09);
    --ov-glow:         rgba(201, 169, 110, 0.07);
}

/* ════════════════════════════════════════════════════════════════════════════
   1. SEITEN-VEIL  (leichte Vorabdunkelung, bevor Overlay erscheint)
   ════════════════════════════════════════════════════════════════════════════ */

.wt-veil {
    position:       fixed;
    inset:          0;
    z-index:        95;
    background:     transparent;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   2. OVERLAY BACKDROP
   Semi-transparent → Frontpage sichtbar, unscharf, gedimmt hinter dem Panel.
   ════════════════════════════════════════════════════════════════════════════ */

.wt-overlay {
    position:        fixed;
    inset:           0;
    z-index:         100;
    display:         flex;
    align-items:     flex-start;
    justify-content: center;

    /* Dunkle Fläche – Frontpage bleibt durch Transparenz als unscharfer Hintergrund sichtbar */
    background: rgba(4, 3, 1, 0.72);

    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    transition:
        opacity    580ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 580ms step-end;
}

.wt-overlay.wt-overlay--open {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    transition:
        opacity    580ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0ms;
}

.wt-overlay.wt-overlay--closing {
    opacity:    0;
    transition: opacity 360ms ease, visibility 360ms step-end;
}

/* ════════════════════════════════════════════════════════════════════════════
   3. CLOSE BUTTON
   ════════════════════════════════════════════════════════════════════════════ */

.wt-overlay__close {
    position:        fixed;
    top:             1.25rem;
    right:           1.25rem;
    z-index:         120;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    border:          1px solid var(--ov-border-gold);
    background:      rgba(14, 11, 8, 0.80);
    backdrop-filter: blur(8px);
    color:           rgba(201, 169, 110, 0.55);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 200ms ease, color 200ms ease,
                     border-color 200ms ease, transform 180ms ease;
}

.wt-overlay__close:hover {
    background:   rgba(30, 22, 14, 0.95);
    color:        var(--ov-gold-soft);
    border-color: rgba(201, 169, 110, 0.40);
    transform:    scale(1.06);
}

.wt-overlay__close svg { width: 1rem; height: 1rem; }

/* ════════════════════════════════════════════════════════════════════════════
   4. INNER PANEL
   Eigener solider Hintergrund → Inhalt scharf, unabhängig vom Backdrop-blur.
   ════════════════════════════════════════════════════════════════════════════ */

.wt-overlay__inner {
    position:   relative;
    z-index:    1;
    width:      100%;

    /* Warmes, tiefes Dunkel – kein kaltes Grau */
    background:
        radial-gradient(ellipse at top center, rgba(201, 169, 110, 0.055) 0%, transparent 42%),
        linear-gradient(175deg, #120f0b 0%, #0d0a07 55%, #100d09 100%);

    /* Mobile: Vollbild */
    min-height: 100dvh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 169, 110, 0.16) transparent;
}

.wt-overlay__inner::before {
    content:  '';
    position: absolute;
    top:      0;
    left:     10%;
    right:    10%;
    height:   1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(201, 169, 110, 0.40) 20%,
        rgba(255, 240, 200, 0.70) 50%,
        rgba(201, 169, 110, 0.40) 80%,
        transparent
    );
    opacity:    0;
    transition: opacity 600ms 400ms ease;
    pointer-events: none;
}

.wt-overlay--open .wt-overlay__inner::before { opacity: 1; }

.wt-overlay__inner::-webkit-scrollbar       { width: 3px; }
.wt-overlay__inner::-webkit-scrollbar-track { background: transparent; }
.wt-overlay__inner::-webkit-scrollbar-thumb {
    background:    rgba(201, 169, 110, 0.18);
    border-radius: 2px;
}

/* Panel: Einblenden mit leichtem Slide */
.wt-overlay__inner {
    transform:  translateY(22px);
    transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wt-overlay--open .wt-overlay__inner {
    transform: translateY(0);
}

/* Ambient Glow oben im Panel */
.wt-overlay-ambient {
    position:       absolute;
    top:            -60px;
    left:           50%;
    transform:      translateX(-50%);
    width:          min(700px, 100%);
    height:         320px;
    background:     radial-gradient(
        ellipse at center top,
        rgba(201, 169, 110, 0.07) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index:        0;
}

/* ── Desktop: Panel-Karte ──────────────────────────────────────────────── */

@media (min-width: 769px) {
    .wt-overlay {
        align-items:     center;
        justify-content: center;
        padding:         0;
    }

    .wt-overlay__inner {
        max-width:  720px;
        width:      calc(100% - 64px);
        min-height: unset;
        height:     auto;
        /* 48px Abstand oben + unten vom Viewport-Rand */
        max-height: calc(100dvh - 96px);

        border-radius: 20px;
        border:        1px solid var(--ov-border-gold);
        box-shadow:
            0 0 0 1px var(--ov-border-faint),
            0 40px 120px rgba(0, 0, 0, 0.75),
            0  8px  40px rgba(0, 0, 0, 0.50),
            inset 0 1px 0 rgba(255, 240, 200, 0.04);
    }

    #w4y-overlay #w4y-app > div { min-height: unset !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   5. CHAT-UI DARK-MODE OVERRIDES
   !important wo Vue inline-styles setzen.
   Ziel: warmes Dunkel, gold Akzente – kein generisches Grau.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Basis ─────────────────────────────────────────────────────────────── */

#w4y-overlay #w4y-app > div {
    background: transparent !important;
    min-height: 100dvh;
    color: var(--ov-text-main) !important;
}

/* Schriften */
#w4y-overlay {
    font-family: 'Inter', system-ui, sans-serif;
}

/* ── Typografie ─────────────────────────────────────────────────────────── */

#w4y-overlay .text-gray-900,
#w4y-overlay .text-gray-800,
#w4y-overlay .text-gray-700 { color: var(--ov-text-main) !important; }

#w4y-overlay .text-gray-600,
#w4y-overlay .text-gray-500 { color: var(--ov-text-soft) !important; }

#w4y-overlay .text-gray-400,
#w4y-overlay .text-gray-300 { color: var(--ov-text-muted) !important; }

/* ── Header ─────────────────────────────────────────────────────────────── */

#w4y-overlay header {
    border-bottom: 1px solid var(--ov-border-faint) !important;
    background: transparent !important;
}

#w4y-overlay header h1 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: rgba(255, 248, 238, 0.96) !important;
    letter-spacing: 0.04em;
    font-size: 1.1rem !important;
}

#w4y-overlay header button {
    color: rgba(201, 169, 110, 0.48) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.68rem !important;
}

#w4y-overlay header button:hover {
    color: var(--ov-gold-soft) !important;
}

#w4y-overlay header p {
    color: rgba(201, 169, 110, 0.52) !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-size: 0.68rem !important;
}

/* ── Fortschrittsbalken ─────────────────────────────────────────────────── */

#w4y-overlay [style*="background:#F0E0C0"],
#w4y-overlay [style*="background: #F0E0C0"] {
    background: rgba(255, 255, 255, 0.07) !important;
    border-radius: 999px;
}

/* ── Anlass-Auswahl ─────────────────────────────────────────────────────── */

#w4y-overlay .grid.grid-cols-2 button {
    background:    var(--ov-bg-surface) !important;
    border:        1px solid var(--ov-border-gold) !important;
    border-radius: 14px !important;
    color:         var(--ov-text-main) !important;
    transition:    background 200ms ease, border-color 200ms ease,
                   transform 160ms ease, box-shadow 200ms ease !important;
    box-shadow:    inset 0 1px 0 rgba(255, 240, 200, 0.03) !important;
}

#w4y-overlay .grid.grid-cols-2 button:hover {
    background:   var(--ov-bg-raised) !important;
    border-color: rgba(201, 169, 110, 0.40) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.05),
        0 0 20px rgba(201, 169, 110, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* ── Bot-Avatar ─────────────────────────────────────────────────────────── */

#w4y-overlay .w-8.h-8[style*="#F0E0C0"],
#w4y-overlay .w-8.h-8[style*="F0E0C0"] {
    background: rgba(201, 169, 110, 0.10) !important;
    border:     1px solid var(--ov-border-gold) !important;
}

/* ── Frage-Bubble ───────────────────────────────────────────────────────── */

#w4y-overlay .flex-1.bg-white,
#w4y-overlay .flex-1[style*="border"] {
    background:    var(--ov-bg-surface) !important;
    border:        1px solid var(--ov-border-gold) !important;
    border-radius: 0 16px 16px 16px !important;
    box-shadow:    0 4px 24px rgba(0, 0, 0, 0.25),
                   inset 0 1px 0 rgba(255, 240, 200, 0.035) !important;
}

#w4y-overlay .flex-1.bg-white p,
#w4y-overlay .flex-1[style*="border"] p {
    color: var(--ov-text-main) !important;
    line-height: 1.75 !important;
}

#w4y-overlay .flex-1.bg-white p.text-xs,
#w4y-overlay .flex-1[style*="border"] p.text-xs {
    color: var(--ov-text-muted) !important;
}

/* ── Eingabefelder ──────────────────────────────────────────────────────── */

#w4y-overlay input[type="text"],
#w4y-overlay textarea {
    background:    var(--ov-bg-inset) !important;
    border:        1px solid var(--ov-border-gold) !important;
    color:         var(--ov-text-main) !important;
    border-radius: 999px !important;
    transition:    border-color 200ms ease, box-shadow 200ms ease !important;
}

#w4y-overlay textarea { border-radius: 14px !important; }

#w4y-overlay input:focus,
#w4y-overlay textarea:focus {
    border-color: rgba(201, 169, 110, 0.55) !important;
    box-shadow:
        0 0 0 3px rgba(201, 169, 110, 0.07),
        0 0 20px rgba(201, 169, 110, 0.06) !important;
    outline: none !important;
}

#w4y-overlay input::placeholder,
#w4y-overlay textarea::placeholder {
    color: var(--ov-text-faint) !important;
}

/* ── Sekundäre Buttons (Zurück, Neu starten) ────────────────────────────── */

#w4y-overlay button.bg-white,
#w4y-overlay .flex.gap-2 > button.rounded-full:not([style]) {
    background: var(--ov-bg-inset) !important;
    border:     1px solid rgba(255, 255, 255, 0.08) !important;
    color:      var(--ov-text-muted) !important;
}

#w4y-overlay button.bg-white:hover,
#w4y-overlay .flex.gap-2 > button.rounded-full:hover:not([style]) {
    background:   var(--ov-bg-surface) !important;
    border-color: var(--ov-border-gold) !important;
    color:        var(--ov-text-soft) !important;
}

/* Zeichenzähler */
#w4y-overlay .text-right span { color: var(--ov-text-faint) !important; }

/* ── Generierungs-Loader ────────────────────────────────────────────────── */

#w4y-overlay .font-serif {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: rgba(255, 248, 238, 0.88) !important;
}

/* ── Zusammenfassung (SummaryCard) ──────────────────────────────────────── */

#w4y-overlay .text-2xl,
#w4y-overlay .text-xl { color: var(--ov-text-main) !important; }

#w4y-overlay .rounded-2xl[style*="FAF7F2"],
#w4y-overlay .rounded-2xl[style*="background:#FAF7F2"],
#w4y-overlay .rounded-2xl[style*="background: #FAF7F2"] {
    background: var(--ov-bg-surface) !important;
    border:     1px solid var(--ov-border-gold) !important;
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.03) !important;
}

/* ── Fehler ─────────────────────────────────────────────────────────────── */

#w4y-overlay .bg-red-50 {
    background: rgba(180, 50, 50, 0.12) !important;
    border:     1px solid rgba(200, 80, 80, 0.25) !important;
}

/* ── Preview-Tabs ───────────────────────────────────────────────────────── */

#w4y-overlay [style*="background:#F0E0C0"] {
    background: var(--ov-bg-inset) !important;
    border-radius: 12px !important;
}

#w4y-overlay .flex.gap-2.p-1 button.bg-white {
    background:    var(--ov-bg-raised) !important;
    color:         var(--ov-text-main) !important;
    border:        1px solid var(--ov-border-gold) !important;
    box-shadow:    0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

#w4y-overlay .flex.gap-2.p-1 button:not(.bg-white) {
    color: var(--ov-text-muted) !important;
    background: transparent !important;
}

#w4y-overlay .flex.gap-2.p-1 button:not(.bg-white):hover {
    color: var(--ov-text-soft) !important;
}

/* ── Purchase ───────────────────────────────────────────────────────────── */

#w4y-overlay .space-y-2 button[style*="background:#fff"],
#w4y-overlay .space-y-2 button[style*="background:rgb"] {
    background: var(--ov-bg-surface) !important;
    border:     1px solid var(--ov-border-gold) !important;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

#w4y-overlay footer {
    border-top: 1px solid var(--ov-border-faint) !important;
    background: transparent !important;
}

#w4y-overlay footer p,
#w4y-overlay footer a { color: rgba(255, 248, 238, 0.52) !important; }

#w4y-overlay footer a:hover { color: rgba(255, 248, 238, 0.78) !important; }

/* ── Gold Lock (Wortmarke etc.) ─────────────────────────────────────────── */

#w4y-overlay [style*="color:#C9A96E"],
#w4y-overlay [style*="color: #C9A96E"],
#w4y-overlay [style*="color:#c9a96e"] {
    color: var(--ov-gold) !important;
}

/* ── Alle weißen / hellen Hintergründe auffangen ───────────────────────── */

#w4y-overlay [style*="background:#FAF7F2"],
#w4y-overlay [style*="background: #FAF7F2"],
#w4y-overlay [style*="background:#fff"],
#w4y-overlay [style*="background: #fff"],
#w4y-overlay [style*="background:white"],
#w4y-overlay [style*="background: white"],
#w4y-overlay [style*="background:#ffffff"],
#w4y-overlay [style*="background: #ffffff"] {
    background: var(--ov-bg-surface) !important;
}

#w4y-overlay .bg-white   { background: var(--ov-bg-surface)  !important; }
#w4y-overlay .bg-gray-50 { background: var(--ov-bg-inset)    !important; }
#w4y-overlay .bg-gray-100 { background: var(--ov-bg-inset)   !important; }