/* BROSEN AI Chat-Widget */
:root {
    --brosen-primary:       #a3195b;
    --brosen-bubble:        #f3e8ef;
    --brosen-radius:        16px;
    --brosen-shadow:        0 8px 32px rgba(0,0,0,.15);
    --brosen-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Gescopter Reset: verhindert, dass Theme/Browser-Default-Padding/-Border
   (z. B. bei <button>) festgelegte Breiten/Höhen innerhalb des Widgets
   verzerrt – betrifft u. a. den 44×44px-Action-Slot im Eingabebereich. */
.brosen-ai-chatbot, .brosen-ai-chatbot *, .brosen-ai-chatbot *::before, .brosen-ai-chatbot *::after {
    box-sizing: border-box;
}

/* ── Container ───────────────────────────────────────────── */
.brosen-ai-chatbot {
    display:         flex;
    flex-direction:  column;
    width:           100%;
    max-width:       520px;
    height:          580px;
    border-radius:   var(--brosen-radius);
    box-shadow:      var(--brosen-shadow);
    overflow:        hidden;
    font-family:     var(--brosen-font);
    font-size:       15px;
    background:      #fff;
}

/* ── Header ──────────────────────────────────────────────── */
.brosen-chat-header {
    background:      var(--brosen-primary);
    color:           #fff;
    padding:         14px 16px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-shrink:     0;
}
.brosen-chat-header-info { display:flex; align-items:center; gap:10px; }
.brosen-chat-avatar {
    width:40px; height:40px;
    background:rgba(255,255,255,.2);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.brosen-chat-title    { font-weight:700; font-size:15px; line-height:1.2; }
.brosen-chat-subtitle { font-size:12px; opacity:.85; margin-top:2px; }
.brosen-chat-close {
    background:none; border:none; color:#fff; cursor:pointer;
    font-size:18px; padding:4px 8px; border-radius:4px; line-height:1;
    opacity:.8; transition:opacity .2s;
}
.brosen-chat-close:hover { opacity:1; background:rgba(255,255,255,.15); }

/* ── Nachrichten ─────────────────────────────────────────── */
.brosen-chat-messages {
    flex:1; overflow-y:auto; padding:16px; display:flex;
    flex-direction:column; gap:10px; scroll-behavior:smooth;
    background:#fafafa;
}
.brosen-msg {
    max-width:82%; padding:10px 14px; border-radius:12px;
    line-height:1.5; word-break:break-word; animation:brosenFadeIn .25s ease;
}
@keyframes brosenFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.brosen-msg-bot  { background:var(--brosen-bubble); color:#222; align-self:flex-start; border-bottom-left-radius:4px; }
.brosen-msg-user { background:var(--brosen-primary); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.brosen-msg-system { background:#e8f5e9; color:#1b5e20; align-self:center; font-size:13px; border-radius:20px; padding:6px 14px; }
.brosen-msg-error  { background:#fdecea; color:#b71c1c; align-self:center; border-radius:20px; padding:6px 14px; font-size:13px; }

/* Tippen-Indikator */
.brosen-msg-typing {
    background:var(--brosen-bubble); align-self:flex-start;
    border-radius:12px; border-bottom-left-radius:4px;
    padding:10px 16px; display:flex; gap:4px; align-items:center;
}
.brosen-msg-typing span {
    width:7px; height:7px; background:#999; border-radius:50%;
    animation:brosenBounce 1s infinite;
}
.brosen-msg-typing span:nth-child(2) { animation-delay:.15s; }
.brosen-msg-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes brosenBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

/* ── Datenschutz-Einwilligung (Gate) ─────────────────────────────────────
   Wird angezeigt, bis der Nutzer zugestimmt und "Chat starten" geklickt hat.
   Nimmt denselben Platz ein wie später die Nachrichten/Eingabe (#brosen-chat-main
   ist bis dahin [hidden]) – dadurch ändert sich am bestehenden Chat-Design nach
   erfolgter Zustimmung nichts, es wird nur umgeschaltet.
   Alle Regeln sind über Klassen(-kombinationen) mit Spezifität ≥ (0,1,0)
   formuliert, damit sie generische Theme-Resets (z. B. hello-elementor
   reset.css: "button, [type=button] { width:auto }") zuverlässig schlagen –
   siehe Kommentar bei .brosen-consent-start-btn für die eine Stelle, an der
   das aufgrund einer echten Spezifitäts-Pattsituation nicht reicht. */
.brosen-consent-gate {
    /* min-height:0 (statt des früheren, fehlerhaften min-height:100%) ist
       hier zwingend: Flex-Items haben als Default min-height:auto, d. h. sie
       dürfen sich nicht unter ihre Inhaltsgröße zusammenziehen. In einem
       Desktop-Rahmen mit fester Höhe (.brosen-ai-chatbot: height:580px/520px,
       overflow:hidden) sprengte der Consent-Inhalt dadurch den Rahmen nach
       unten, statt in den eigenen overflow-y:auto zu scrollen – der
       "Chat starten"-Button war abgeschnitten. Auf Mobile (height:100%/100vh)
       fiel das nicht auf, da dort ohnehin genug Platz vorhanden war. */
    flex:1; display:flex; flex-direction:column;
    width:100%; min-height:0;
    background:#fff; color:#2b2b2b;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
.brosen-consent-content {
    width:100%; box-sizing:border-box;
    padding:22px 20px 28px;
    display:flex; flex-direction:column; gap:0;
}
.brosen-consent-content h3 {
    margin:0 0 12px; font-size:19px; line-height:1.3;
    color:#222; font-weight:700;
}
.brosen-consent-hint {
    margin:0 0 12px; font-size:14px; line-height:1.5; color:#4a4a4a;
}
.brosen-consent-privacy-link {
    display:inline-block; width:fit-content;
    margin-bottom:18px; font-size:14px; font-weight:600;
    color:var(--brosen-primary); text-decoration:underline;
}
.brosen-consent-privacy-link:hover { text-decoration:none; }
.brosen-consent-label {
    display:flex; align-items:flex-start; gap:10px;
    width:100%; box-sizing:border-box; margin-bottom:18px;
    font-size:13px; line-height:1.45; color:#333; cursor:pointer;
    background:#fff8e1; border:1px solid #ffe082; border-radius:10px;
    padding:12px 14px;
}
.brosen-consent-label input[type="checkbox"] {
    flex:0 0 auto; width:18px; height:18px; margin:2px 0 0;
    accent-color:var(--brosen-primary); cursor:pointer;
}
/* !important nötig für display/width: das Theme-Reset trifft unser
   <button type="button"> zusätzlich über [type="button"] – dieselbe
   Spezifität (0,1,0) wie unser Klassenselektor, gewinnt aber durch spätere
   Ladereihenfolge im Cascade (width:auto). Ohne !important bliebe der Button
   auf Inhaltsbreite geschrumpft (genau das gemeldete Symptom). Dieselbe
   Absicherung nutzt dieses Stylesheet bereits für .brosen-mic-btn/
   .brosen-chat-send-btn (siehe unten). */
.brosen-consent-start-btn {
    display:block !important; width:100% !important;
    min-height:46px; padding:12px 16px; box-sizing:border-box;
    border:0 !important; border-radius:8px;
    background:var(--brosen-primary) !important; color:#fff !important;
    font-size:15px; font-weight:700; font-family:inherit;
    cursor:pointer; transition:filter .2s;
}
.brosen-consent-start-btn:not(:disabled):hover { filter:brightness(.94); }
.brosen-consent-start-btn:disabled {
    background:#d8d8d8 !important; color:#777 !important;
    cursor:not-allowed; opacity:1;
}

/* Sichtbarer Fokuszustand für alle Bedienelemente der Einwilligung
   (Tastaturbedienung: Tab zu Link → Checkbox → Button) */
.brosen-consent-gate a:focus-visible,
.brosen-consent-gate input:focus-visible,
.brosen-consent-start-btn:focus-visible {
    outline:3px solid var(--brosen-primary);
    outline-offset:2px;
}

/* #brosen-chat-main ist bis zur Zustimmung [hidden] (siehe chat-widget.php) –
   dieselbe Regel unabhängig vom Layout, damit Nachrichten/Eingabe/Footer
   garantiert weder sichtbar noch fokussierbar sind. */
#brosen-chat-main[hidden] { display:none; }
#brosen-chat-main {
    display:flex; flex-direction:column; flex:1; min-height:0;
}

/* ── Eingabe ─────────────────────────────────────────────────────────────
   Eine durchgehende "Pill" (.brosen-input-bar) statt einzelner freistehender
   Boxen. Mic und Senden teilen sich einen FESTEN Slot (.brosen-input-action,
   44×44px) rechts im Feld: bei leerem Text steht dort das Mikrofon, sobald
   Text vorhanden ist, blendet per JS stattdessen der Senden-Pfeil ein. Der
   Slot selbst ändert nie seine Größe → keine Layout-Sprünge, kein Konkurrieren
   zweier Buttons um denselben Platz.                                      */
.brosen-chat-input-area {
    padding:12px 14px;
    border-top:1px solid #eee;
    background:#fff;
    flex-shrink:0;
}
.brosen-input-bar {
    display:flex;
    align-items:center;
    gap:2px;
    width:100%;
    max-width:100%;
    background:#f3f3f4;
    border:1px solid #e3e3e3;
    border-radius:26px;
    padding:4px 4px 4px 18px;
    transition:border-color .2s, background-color .2s;
}
.brosen-input-bar:focus-within {
    border-color:var(--brosen-primary);
    background:#fff;
}
.brosen-chat-textarea {
    flex:1 1 auto;
    min-width:0;
    border:none; outline:none; background:transparent;
    padding:12px 6px;
    font-size:15px; font-family:inherit; color:#222;
    resize:none; overflow-y:auto;
    min-height:24px; max-height:120px;
    line-height:1.4;
}
.brosen-chat-textarea::placeholder { color:#999; }

/* Fester Slot – Größe bleibt immer gleich, egal welcher Button gerade drin steht */
.brosen-input-action {
    box-sizing:border-box;
    width:44px; height:44px; flex:0 0 44px;
    display:flex; align-items:center; justify-content:center;
}
/* !important nötig: Theme-Reset-Stylesheets (z. B. hello-elementor/reset.css)
   matchen u. a. via [type="button"] – das hat dieselbe CSS-Spezifität wie
   unsere Klassenselektoren, gewinnt aber durch spätere Ladereihenfolge im
   Cascade (width:auto, padding:.5rem 1rem, border:1px solid, display:
   inline-block) und verformt sonst unsere runden Buttons zu eckigen Boxen. */
.brosen-mic-btn,
.brosen-chat-send-btn {
    box-sizing:border-box !important;
    width:44px !important; height:44px !important;
    padding:0 !important; margin:0 !important;
    border:none !important; border-radius:50% !important;
    display:flex !important; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0; line-height:1;
    transition:background .2s, transform .1s, color .2s;
}
.brosen-mic-btn[hidden],
.brosen-chat-send-btn[hidden] { display:none !important; }

.brosen-mic-btn { background:transparent !important; color:#888; }
.brosen-mic-btn:hover  { background:rgba(0,0,0,.06) !important; color:var(--brosen-primary); }
.brosen-mic-btn:active { transform:scale(.92); }
.brosen-mic-btn.brosen-mic-recording {
    background:#e53935 !important; color:#fff;
    animation:brosen-mic-pulse 1.2s ease-in-out infinite;
}
.brosen-mic-btn.brosen-mic-processing { background:#ccc !important; color:#fff; cursor:wait; animation:none; }
@keyframes brosen-mic-pulse {
    0%, 100% { box-shadow:0 0 0 0 rgba(229,57,53,.5); }
    50%      { box-shadow:0 0 0 8px rgba(229,57,53,0); }
}

.brosen-chat-send-btn {
    background:var(--brosen-primary) !important; color:#fff;
    animation:brosen-send-in .15s ease;
}
.brosen-chat-send-btn:hover  { background:#8a1049 !important; }
.brosen-chat-send-btn:active { transform:scale(.92); }
.brosen-chat-send-btn:disabled { background:#ccc; cursor:not-allowed; }
@keyframes brosen-send-in {
    from { opacity:0; transform:scale(.6); }
    to   { opacity:1; transform:scale(1); }
}

/* ── Footer ──────────────────────────────────────────────── */
.brosen-chat-footer {
    text-align:center; font-size:11px; color:#bbb;
    padding:5px; background:#fff; border-top:1px solid #f5f5f5;
    flex-shrink:0;
}

/* ── Floating Button ─────────────────────────────────────── */
.brosen-ai-float-trigger {
    position:fixed; bottom:24px; right:24px;
    width:58px; height:58px; border-radius:50%;
    background:var(--brosen-primary); color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 4px 16px rgba(163,25,91,.4);
    z-index:9998; transition:transform .2s, box-shadow .2s;
    user-select:none;
}
.brosen-ai-float-trigger:hover { transform:scale(1.08); box-shadow:0 6px 20px rgba(163,25,91,.5); }
.brosen-float-badge {
    position:absolute; top:-4px; right:-4px;
    background:#e53935; color:#fff; border-radius:50%;
    width:18px; height:18px; font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
}

.brosen-ai-float-chat {
    position:fixed; bottom:96px; right:24px;
    z-index:9997; box-shadow:var(--brosen-shadow);
    border-radius:var(--brosen-radius);
    transition:opacity .25s, transform .25s;
}
.brosen-ai-float-chat .brosen-ai-chatbot { max-width:380px; height:520px; }
.brosen-ai-float-chat.brosen-ai-hidden { opacity:0; transform:translateY(12px) scale(.97); pointer-events:none; }

/* ── Avatar ──────────────────────────────────────────────── */
.brosen-chat-body { display:flex; flex:1; overflow:hidden; min-height:0; }
.brosen-chat-body .brosen-chat-messages { flex:1; }

/* Top-Layout: Avatar über Nachrichten */
.brosen-avatar-top {
    display:flex; align-items:center; gap:14px;
    padding:14px 16px; background:linear-gradient(135deg,var(--brosen-bubble) 0%,#fff 100%);
    border-bottom:1px solid rgba(163,25,91,.12); flex-shrink:0;
}

/* Side-Layout: Avatar links, Nachrichten rechts */
.brosen-avatar-side {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:14px 10px; background:linear-gradient(180deg,var(--brosen-bubble) 0%,#fff 100%);
    border-right:1px solid rgba(163,25,91,.12); flex-shrink:0; width:120px;
    overflow:hidden;
}

/* Avatar-Rahmen */
.brosen-avatar-frame { position:relative; flex-shrink:0; }
.brosen-avatar-media { display:block; object-fit:cover; }

/* Zustandswechsel: idle/talking */
.brosen-avatar-media             { opacity:1; transition:opacity .25s; }
.brosen-avatar-media:not(.brosen-avatar-active) { opacity:0; position:absolute; top:0; left:0; }

/* Pulse-Overlay wenn kein Talking-GIF gesetzt */
.brosen-avatar-pulse {
    position:absolute; inset:0; border-radius:inherit;
    border:3px solid transparent; pointer-events:none;
    transition:border-color .3s;
}
.brosen-avatar-pulse.brosen-talking {
    border-color:var(--brosen-primary);
    animation:brosenPulse 0.6s ease-in-out infinite alternate;
}
@keyframes brosenPulse {
    from { box-shadow:0 0 0 0 rgba(163,25,91,.4); }
    to   { box-shadow:0 0 0 8px rgba(163,25,91,0); }
}

/* Avatar-Info */
.brosen-avatar-info { flex:1; min-width:0; }
.brosen-avatar-name { font-weight:700; font-size:14px; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brosen-avatar-sublabel { font-size:11px; color:#888; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brosen-avatar-status { display:flex; align-items:center; gap:5px; margin-top:5px; }
.brosen-status-dot {
    width:8px; height:8px; border-radius:50%; background:#4caf50; flex-shrink:0;
    box-shadow:0 0 0 0 rgba(76,175,80,.5);
    animation:brosenOnline 2s infinite;
}
.brosen-status-dot.brosen-typing { background:#f5a623; animation:brosenTypingDot 0.8s infinite alternate; }
.brosen-status-text { font-size:11px; color:#777; }
@keyframes brosenOnline  { 0%,100%{box-shadow:0 0 0 0 rgba(76,175,80,.5)} 50%{box-shadow:0 0 0 5px rgba(76,175,80,0)} }
@keyframes brosenTypingDot { from{opacity:.5} to{opacity:1} }

/* Side-Avatar: Info-Texte zentriert */
.brosen-avatar-side .brosen-avatar-info { text-align:center; width:100%; }
.brosen-avatar-side .brosen-avatar-name { font-size:12px; }
.brosen-avatar-side .brosen-avatar-status { justify-content:center; }

/* TTS-Toggle Button */
.brosen-header-actions { display:flex; align-items:center; gap:6px; }
.brosen-tts-toggle {
    background:none; border:none; color:#fff; cursor:pointer;
    padding:4px 6px; border-radius:4px; opacity:.8; transition:opacity .2s, background .2s;
    display:flex; align-items:center;
}
.brosen-tts-toggle:hover    { opacity:1; background:rgba(255,255,255,.15); }
.brosen-tts-toggle.muted svg { opacity:.4; }

/* Brosen-Layout: Side braucht mehr Breite */
.brosen-layout-side .brosen-ai-chatbot { max-width:580px; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width:600px) {
    .brosen-ai-chatbot { max-width:100%; height:100%; border-radius:0; }
    .brosen-ai-float-chat {
        position:fixed; inset:0; bottom:0; right:0;
        border-radius:0; max-width:none;
    }
    .brosen-ai-float-chat .brosen-ai-chatbot { max-width:100%; height:100vh; border-radius:0; }
    .brosen-ai-float-trigger { bottom:16px; right:16px; }

    /* Eingabebereich: volle Breite nutzen, großzügiger Innenabstand, iPhone-Home-Indicator beachten */
    .brosen-chat-input-area {
        padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    }
    .brosen-input-bar { padding:4px 4px 4px 16px; border-radius:28px; }
    .brosen-chat-textarea {
        font-size:16px; /* verhindert Auto-Zoom beim Fokussieren in iOS Safari */
        padding:13px 6px;
        max-height:160px;
    }

    /* Einwilligungs-Gate: großzügiger Innenabstand, iPhone-Home-Indicator beachten */
    .brosen-consent-content {
        padding:20px 16px calc(20px + env(safe-area-inset-bottom));
    }
    .brosen-consent-start-btn { padding:14px 16px; font-size:16px; }
}

/* Schwebender Chat-Trigger darf den offenen Chat (inkl. Eingabebereich)
   niemals optisch überlagern – wird ausgeblendet, solange der Chat offen ist. */
.brosen-ai-float-trigger.brosen-ai-hidden {
    opacity:0; transform:scale(.8); pointer-events:none;
    transition:opacity .2s, transform .2s;
}