/* Amaya-Widget — Feindesign (quiet luxury, Würde durch Reduktion).
 * Alles unter .amaya-widget gescoped, keine globalen Selektoren.
 * Bewegung nur über transform/opacity, vollständig aus unter
 * prefers-reduced-motion.
 *
 * Typo-Doktrin: Cormorant Garamond NUR für den Kopf-Namen (Würde),
 * Instrument Sans für alles andere. Beide lokal (public/amaya/fonts/,
 * DSGVO — kein Google-CDN), latin-Subset, System-Fallback.
 *
 * Gold-Doktrin: Champagne Gold (#C9A96E) ist LINIE, nie Fläche —
 * Kopf-Unterkante, Input-Fokus, Send-Hover. Sonst Greige-Ruhe.
 *
 * Zwei Footprint-Modi über data-amaya-mode:
 *   audience — fast Vollbild (svh, nicht vh: mobile Browser-Leisten)
 *   panel    — Tröpfchen schwebt fixiert unten LINKS (safe-area-fest);
 *              das Panel zieht sich von dort auf
 * Bewusst NIE unten rechts. Still by default: sichtbar ist nur der
 * Tröpfchen-Slot, bis jemand ruft; jederzeit schließbar — die Seite
 * steht ohne das Widget.
 */

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/cormorant-garamond-500-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700; /* Variable Font — eine Datei für alle Gewichte */
    font-display: swap;
    src: url('fonts/instrument-sans-latin.woff2') format('woff2');
}

.amaya-widget {
    --amaya-ink: #33312e;
    --amaya-soft: #6b675f;
    --amaya-bg: #faf9f7;
    --amaya-line: #e4e0d8;
    /* User-Fläche: warmes Greige statt kühlem Blau — leise, zur Palette. */
    --amaya-user: #efeae1;
    --amaya-gold: #c9a96e;
    box-sizing: border-box;
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: var(--amaya-ink);
    line-height: 1.45;
}

.amaya-widget *,
.amaya-widget *::before,
.amaya-widget *::after {
    box-sizing: inherit;
}

/* --- Tröpfchen-Slot: das SVG-Motiv IST der Kreis (bringt seine eigene
       Kreisform mit) — kein Button-Hintergrund, keine Border. Farbe NUR
       über die Variable (currentColor); --amaya-ink für Präsenz auf hellem
       Grund. Gold bleibt Linie/Akzent, nie Fläche. border-radius bleibt
       für einen runden Focus-Ring. */

.amaya-drop {
    display: grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    padding: 0;
    border: 0;
    /* Kein Ring, kein Grund: das Motiv schwebt frei — border-radius
       bleibt nur für einen runden Focus-Ring. */
    border-radius: 50%;
    background: none;
    /* Instanz-Farbe (Partial setzt --amaya-drop-color am Mount), sonst Tinte. */
    color: var(--amaya-drop-color, var(--amaya-ink));
    cursor: pointer;
    transition: transform 0.2s ease;
    /* 3D-Glaskante ohne Kreis-Grund: drop-shadow folgt der Alpha-Form des
       Motivs — 1px Lichtkante oben links, harte dunkle Ablösung direkt
       unten, weicher Tiefenschatten darunter. Bewusst am BUTTON, nicht am
       SVG: das SVG rotiert, und die Lichtrichtung muss stehen bleiben. */
    filter:
        drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.6))
        drop-shadow(0 1.5px 1px rgba(30, 42, 50, 0.3))
        drop-shadow(0 4px 8px rgba(30, 42, 50, 0.3));
}

/* Motiv füllt den Slot; drop-shadow folgt der SVG-Form (nicht dem
   Button-Quadrat) und gibt dezente Tiefe. Die langsame Rotation liegt
   auf dem SVG (nur transform, GPU-freundlich) — der Hover-Lift auf dem
   Button bleibt davon unberührt. */
.amaya-drop svg {
    display: block;
    width: 100%;
    height: 100%;
    /* Halbtransparent: der Untergrund scheint durchs Motiv. opacity statt
       rgba, weil die Instanzfarbe als beliebiger Wert hereinkommt; die
       Glaskanten-Filter liegen auf dem Button (Lichtrichtung fix). */
    opacity: 0.75;
    animation: amaya-drop-spin 28s linear infinite;
}

@keyframes amaya-drop-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .amaya-drop svg {
        animation: none;
    }
}

.amaya-drop:hover,
.amaya-drop:focus-visible {
    transform: translateY(-2px);
}

.amaya-widget.is-open .amaya-drop {
    display: none;
}

/* panel: Tröpfchen schwebt unten links im Viewport — nicht im Fluss unter
   dem Footer, nah an den Kanten; auf Mobile hebt die safe-area
   (Home-Indicator) ihn zusätzlich an. */
.amaya-widget[data-amaya-mode="panel"] .amaya-drop {
    position: fixed;
    left: 1rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    z-index: 60;
}

/* --- Chat-Rahmen (gemeinsam) -------------------------------------------
   Spatial Glass (Referenz visionOS): großzügiger Radius, mehrstufiger
   weicher Schatten (schwebend) und eine 1px-Innenkante oben als Glanz —
   wirkt auch auf dem soliden Fallback-Grund. */

.amaya-chat {
    display: flex;
    flex-direction: column;
    background: var(--amaya-bg);
    border: 1px solid var(--amaya-line);
    border-radius: 1.75rem;
    overflow: hidden;
    /* Glanz oben+links (1.5px), unten dunkle Ablösekante — Licht fällt
       von oben links, das Panel löst sich unten vom Grund. */
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.7),
        inset 1.5px 0 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(30, 42, 50, 0.08),
        0 2px 8px rgba(30, 42, 50, 0.06),
        0 12px 28px -12px rgba(30, 42, 50, 0.14),
        0 36px 72px -24px rgba(30, 42, 50, 0.28);
    animation: amaya-in 0.22s ease-out;
}

.amaya-chat[hidden] {
    display: none;
}

@keyframes amaya-in {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

/* audience: fast Vollbild, zentriert, über der Seite. */
.amaya-widget[data-amaya-mode="audience"] .amaya-chat {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(94vw, 56rem);
    height: min(94svh, 60rem);
    z-index: 60;
}

/* panel geöffnet: zieht sich vom schwebenden Tröpfchen auf (Origin unten
   links), bleibt im unteren Bereich — klein, nie rechts geklebt. */
.amaya-widget[data-amaya-mode="panel"] .amaya-chat {
    position: fixed;
    left: 1.75rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.75rem);
    width: min(26rem, calc(100vw - 3.5rem));
    height: max(19rem, 34svh);
    z-index: 60;
    transform-origin: bottom left;
    animation: amaya-in-panel 0.22s ease-out;
}

/* Chat-Panel als DUNKLES Neutralglas (V2, Referenz visionOS) — für BEIDE
   Modi (audience + panel); die Geometrie bleibt je Modus getrennt (oben).
   Das geforderte
   Grau-Glas rgba(120,120,125,0.30) liegt unten im Stack; allein wäre es
   über hellen Host-Seiten aber eine HELLE Fläche (heller Text fiele auf
   1.5:1). Deshalb legt sich eine neutrale Tint-Schicht (rgba 30,30,34,
   0.68) darüber — gemessen: Ink 6.3:1 und Soft 5.05:1 im Worst Case
   (weiße Seite), Gold-Linie 3.1:1 (Non-Text). Nur unter @supports:
   Browser ohne backdrop-filter behalten den hellen soliden Grund samt
   dunkler Schrift — das Dunkelglas gibt es nie ohne blur. */
@supports ((backdrop-filter: blur(28px)) or (-webkit-backdrop-filter: blur(28px))) {
    .amaya-widget .amaya-chat {
        --amaya-ink: #f4f3f1;
        --amaya-soft: #dedbd5;
        --amaya-line: rgba(255, 255, 255, 0.22);
        color: var(--amaya-ink);
        background:
            linear-gradient(rgba(32, 32, 36, 0.66), rgba(26, 26, 30, 0.7)),
            rgba(120, 120, 125, 0.3);
        border-color: rgba(255, 255, 255, 0.22);
        -webkit-backdrop-filter: blur(28px) saturate(1.4);
        backdrop-filter: blur(28px) saturate(1.4);
        /* Glanz oben+links, dunkle Ablösekante unten, tiefe Schatten. */
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
            inset 1.5px 0 0 rgba(255, 255, 255, 0.18),
            inset 0 -1px 0 rgba(0, 0, 0, 0.45),
            0 2px 8px rgba(0, 0, 0, 0.12),
            0 16px 36px -12px rgba(0, 0, 0, 0.3),
            0 48px 96px -32px rgba(0, 0, 0, 0.45);
    }

    /* Kopf: schwebendes Glas-Element IM Panel (Referenz 2) — heller
       Innen-Verlauf oben, eigene Glanz-/Ablösekanten. Keine Gold-Unterkante. */
    .amaya-widget .amaya-chat .amaya-head {
        border-color: rgba(255, 255, 255, 0.22);
        background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
            inset 1.5px 0 0 rgba(255, 255, 255, 0.16),
            inset 0 -1px 0 rgba(0, 0, 0, 0.3),
            0 4px 14px -4px rgba(0, 0, 0, 0.35);
    }

    /* Gast-Kapseln: plastisch — Innen-Verlauf (oben heller, max. 10 %
       Weiß: darüber kippt Ink unter 4.5:1), spürbarer Schlagschatten. */
    .amaya-widget .amaya-chat .amaya-msg--user {
        border-color: rgba(255, 255, 255, 0.25);
        background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
            inset 0 -1px 0 rgba(0, 0, 0, 0.25),
            0 4px 12px rgba(0, 0, 0, 0.28);
    }

    /* Eingabe-Kapsel: gleiches schwebendes Glas wie der Kopf. */
    .amaya-widget .amaya-chat .amaya-form {
        border-color: rgba(255, 255, 255, 0.25);
        background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
            inset 0 -1px 0 rgba(0, 0, 0, 0.3),
            0 4px 14px -4px rgba(0, 0, 0, 0.35);
    }

    /* Send bleibt auch im Glas ein flacher Text-Button (Gold-Text) — keine
       Kapsel, kein Glas. Die flache Basis-Regel gilt hier unverändert. */

    /* Die zusätzliche Dimmstufe des Privacy-Hinweises entfällt im Glas —
       die Hierarchie trägt dort schon die kleinere Schriftgröße. */
    .amaya-widget .amaya-chat .amaya-privacy {
        opacity: 1;
    }
}

@keyframes amaya-in-panel {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(0.5rem);
    }
}

/* --- Kopf ---------------------------------------------------------------
   Schwebt als eigene Glas-Leiste, leicht vom Rahmen abgesetzt (margin) —
   der Name in Cormorant, die Gold-Linie an der Unterkante bleibt der
   eine Akzent des Widgets. Kein eigener backdrop-filter: die Leiste
   liegt bereits auf dem Panel-Glas, ein Weißschleier + Glanzkante
   reichen für die Tiefe (und sparen GPU). */

.amaya-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 1rem 1rem 0;
    padding: 0.75rem 1.125rem 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 1.125rem;
    background: rgba(255, 255, 255, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 10px -4px rgba(30, 42, 50, 0.12);
}

.amaya-head-name {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.4375rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.1;
}

.amaya-close {
    padding: 0 0.375rem;
    border: 0;
    background: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--amaya-soft);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.amaya-close:hover,
.amaya-close:focus-visible {
    opacity: 1;
}

/* --- Verlauf -------------------------------------------------------------
   Großzügiger Weißraum: Amaya spricht OHNE Bubble direkt auf dem
   Chat-Grund (ruhige Zeilenhöhe), nur der Gast bekommt eine leise
   Greige-Fläche. */

.amaya-log {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.875rem;
    /* Oben etwas knapper: die schwebende Kopf-Leiste bringt eigene Luft mit. */
    padding: 1rem 1.375rem 1.375rem;
    overflow-y: auto;
}

.amaya-hint {
    margin: 0 0 0.25rem;
    color: var(--amaya-soft);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* DSGVO-Transparenzhinweis: Geschwister des Hints, eine Stufe leiser —
   kleiner Grauton, keine Warn-Optik. Link im selben Ton, unterstrichen. */
.amaya-privacy {
    margin: 0 0 0.5rem;
    color: var(--amaya-soft);
    opacity: 0.85;
    font-size: 0.78rem;
    line-height: 1.5;
}

.amaya-privacy a {
    color: inherit;
    text-decoration: underline;
}

.amaya-msg {
    max-width: 88%;
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.65;
}

/* Gast: Glas-Kapsel — voll gerundet, leicht transparentes Greige mit
   Glanzkante oben. Kein eigener backdrop-filter (liegt auf dem Panel-
   Glas); auf dem soliden Fallback-Grund bleibt die Kapsel lesbar, weil
   das Greige nur gegen --amaya-bg aufgehellt wird. */
.amaya-msg--user {
    align-self: flex-end;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 9999px;
    /* Plastisch: Innen-Verlauf (oben heller) über dem Greige-Glas. */
    background:
        linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08)),
        rgba(239, 234, 225, 0.55); /* --amaya-user als Glas */
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
        inset 0 -1px 0 rgba(30, 42, 50, 0.06),
        0 3px 10px -2px rgba(30, 42, 50, 0.14);
    line-height: 1.5;
}

/* Amaya: reiner Text auf dem Grund — keine Fläche, kein Rahmen. */
.amaya-msg--amaya {
    align-self: flex-start;
    padding: 0;
    background: none;
    border: 0;
}

/* Tipp-Indikator: drei ruhige Punkte, nur Opacity. */
.amaya-typing {
    display: flex;
    align-self: flex-start;
    gap: 0.25rem;
    margin: 0;
    padding: 0.25rem 0;
}

.amaya-typing span {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--amaya-soft);
    animation: amaya-blink 1.2s ease-in-out infinite;
}

.amaya-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.amaya-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes amaya-blink {
    0%,
    100% {
        opacity: 0.25;
    }
    50% {
        opacity: 1;
    }
}

/* --- Eingabe --------------------------------------------------------------
   Eigene Glas-Kapsel (voll gerundet, leichter Weißschleier + Glanz-
   kante), vom Rahmen abgesetzt statt oben angeschnitten. Die Gold-
   Doktrin wandert vom Input-Unterstrich auf die Kapsel-Kontur
   (:focus-within) — Gold bleibt Linie, nie Fläche. */

.amaya-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.625rem 1rem 1rem;
    padding: 0.375rem 0.375rem 0.375rem 1.125rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 2px 10px -4px rgba(30, 42, 50, 0.1);
    transition: border-color 0.15s ease;
}

.amaya-form:focus-within {
    border-color: var(--amaya-gold);
}

.amaya-input {
    flex: 1;
    min-width: 0;
    padding: 0.375rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
}

.amaya-input::placeholder {
    color: var(--amaya-soft);
    opacity: 0.7;
}

.amaya-input:focus {
    outline: none;
}

/* Send: bewusst KEINE Kapsel — flacher, ruhiger Text-Button. Leise Gold-
   Textfarbe als Affordance (Gold bleibt Akzent, nie Fläche); Hover/Fokus
   nur über Deckkraft, kein Glas, kein 3D, kein Rahmen. */
.amaya-send {
    padding: 0.4375rem 0.5rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--amaya-gold);
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.amaya-send:hover,
.amaya-send:focus-visible {
    outline: none;
    opacity: 1;
}

/* Ruhende/geschlossene Eingabe: gedimmt, nie rot — der Grund steht warm
   im Gesprächsverlauf. */
.amaya-input:disabled,
.amaya-send:disabled {
    opacity: 0.55;
    cursor: default;
}

/* --- TTS Play-Button (pro Amaya-Antwort, nur Premium). ------------------ */

.amaya-tts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 2px 0 10px 2px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.04);
    color: inherit;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.amaya-tts-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

/* Flaches, dünnes 2D-Icon per CSS-Mask (monochrom, erbt currentColor) —
   kein Emoji, keine 3D-Optik. */
.amaya-tts-btn::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--amaya-ico-speaker) center / contain no-repeat;
            mask: var(--amaya-ico-speaker) center / contain no-repeat;
    --amaya-ico-speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h3l4.5 3.5V5.5L7 9H4z'/%3E%3Cpath d='M15.4 9a3.5 3.5 0 0 1 0 6'/%3E%3C/svg%3E");
    --amaya-ico-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='9' y1='6' x2='9' y2='18'/%3E%3Cline x1='15' y1='6' x2='15' y2='18'/%3E%3C/svg%3E");
}

.amaya-tts-btn.is-playing::before {
    -webkit-mask-image: var(--amaya-ico-pause);
            mask-image: var(--amaya-ico-pause);
}

.amaya-tts-btn.is-loading {
    pointer-events: none;
    animation: amaya-tts-pulse 1s ease-in-out infinite;
}

.amaya-tts-btn.is-error::before {
    background: #c0392b;
}

@keyframes amaya-tts-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

/* --- Reduced Motion: alle Animationen/Transitions aus. ------------------ */

@media (prefers-reduced-motion: reduce) {
    .amaya-widget,
    .amaya-widget *,
    .amaya-widget *::before,
    .amaya-widget *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Linkifizierte Kontaktdaten in Amaya-Bubbles (widget.js linkifyBubble):
   dezent unterstrichen, erbt die Textfarbe — funktioniert in beiden Modi. */
.amaya-msg--amaya .amaya-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(201, 169, 110, 0.55);
    text-underline-offset: 2px;
    word-break: break-all;
}
.amaya-msg--amaya .amaya-link:hover {
    text-decoration-color: currentColor;
}

/* Action-Chip (Amaya light, widget.js appendChip): Spatial-Glass-Pille mit
   Gold-Akzent — EIN empfohlener Kanal pro Antwort, Ziel serverseitig gebaut. */
.amaya-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    margin: 0.375rem 0 0.625rem;
    padding: 0.625rem 1.15rem;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.12);
    border: 1px solid rgba(201, 169, 110, 0.5);
    color: #C9A96E;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 20px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    animation: amaya-in 0.22s ease-out;
}
.amaya-chip:hover {
    background: rgba(201, 169, 110, 0.22);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 10px 26px rgba(0, 0, 0, 0.3),
        0 0 0 3px rgba(201, 169, 110, 0.1);
}
.amaya-chip-pfeil {
    font-size: 0.8em;
    opacity: 0.75;
}