/* Chat-Widget der Online-Rezeption (Plan `rezeption`, Phase 5)
   ──────────────────────────────────────────────────────────────────────────
   Eigene Datei, kein Inline-Block: Die Rezeption läuft unter der strikten CSP
   der öffentlichen Seiten (`app/security_headers.py`) — `style-src 'self'`
   deckt diese Datei, ein zweiter <style>-Block bräuchte die Nonce und stünde
   im Markup neben dem Skript, das ihn braucht.

   Alle Farben kommen als Variable aus der Seite (`rezeption.html`, :root) und
   tragen einen Rückfallwert: Wer dieses Widget später woanders einhängt, soll
   keine unsichtbare Schrift bekommen.

   Mobil zuerst (Leitlinie 12). Rechnung für 400 px Anzeigebreite:
     Seitenrand der Seite 2 × 14 px                     → 372 px
     Chatfenster: 372 − 2 × 12 px Innenabstand          → 348 px Inhalt
     Blase: 348 × 0,88 − 2 × 12 px Innenabstand         → 282 px Text
     Eingabezeile: 348 − 44 px Knopf − 8 px Lücke       → 296 px Feld
   Nichts scrollt quer; das Fenster selbst scrollt senkrecht. */

/* `hidden` schlägt hier NICHT von allein durch: Eine Autorenregel mit
   `display` gewinnt gegen die `[hidden] { display: none }`-Regel des
   Browsers. Ohne diese Zeile stünde das Eingabefeld (`.ch-form` ist
   `display: flex`) schon vor der Einwilligung da, und der Umschalter zum
   Formular (`display: inline-block`) bliebe nach dem Klick stehen. Die Regel
   steht **vor** allen anderen, damit sie niemand versehentlich überholt —
   sie gewinnt ohnehin über die höhere Spezifität des Attributs. */
.ch-form[hidden],
.ch-alt[hidden],
.ch-wrap[hidden] { display: none; }

.ch-wrap {
    border: 1px solid var(--border, #e9ecef);
    border-radius: var(--radius, 14px);
    background: var(--card, #ffffff);
    padding: 12px;
    margin-bottom: 14px;
}

/* Der Verlauf. `max-height` in vh, damit auf einem kleinen Gerät Eingabe und
   Tastatur nicht aus dem Bild rutschen. */
.ch-log {
    max-height: 46vh;
    min-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
}

.ch-msg {
    max-width: 88%;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.ch-bot {
    align-self: flex-start;
    background: var(--primary-light, #e8f0e8);
    color: var(--text, #1a1a1a);
    border-bottom-left-radius: 4px;
}

.ch-user {
    align-self: flex-end;
    background: var(--primary, #5a7a59);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.ch-msg p { margin: 0 0 6px; }
.ch-msg p:last-child { margin-bottom: 0; }
.ch-msg ul { margin: 4px 0 4px 18px; }
.ch-msg li { margin-bottom: 2px; }
.ch-msg a { color: inherit; text-decoration: underline; }
.ch-bot a { color: var(--primary-dark, #4a6549); }

/* „Prüfe verfügbare Termine …" — der Zwischenstand eines Werkzeugaufrufs. */
.ch-status {
    align-self: flex-start;
    font-size: 12.5px;
    color: var(--text-muted, #939ba0);
    font-style: italic;
    padding: 2px 4px;
}

.ch-err {
    align-self: stretch;
    background: var(--danger-light, #fff5f5);
    color: var(--danger, #dc3545);
    border: 1px solid var(--danger, #dc3545);
    font-size: 13px;
}

/* Der Knopf zur Kachel (Triage, Plan 5.2). Volle Breite: Er ist das Ergebnis
   der Antwort, nicht eine Verzierung an ihrem Rand. */
.ch-tile {
    align-self: stretch;
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 13px;
    border: 1px solid var(--primary, #5a7a59);
    border-radius: 12px;
    background: var(--card, #ffffff);
    color: var(--primary-dark, #4a6549);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.ch-tile:hover { background: var(--primary-light, #e8f0e8); }
.ch-tile small {
    display: block;
    font-weight: 400;
    font-size: 12.5px;
    color: var(--text-secondary, #5d646c);
    margin-top: 2px;
}

/* ── Einwilligung vor der ersten Nachricht ── */

.ch-consent {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border, #e9ecef);
    font-size: 13px;
    color: var(--text-secondary, #5d646c);
}
.ch-consent label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 10px;
    line-height: 1.45;
    cursor: pointer;
}
/* Feste Breite, sonst schrumpft die Box im Flex-Kontext auf einen Strich. */
.ch-consent input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}
.ch-consent a { color: var(--primary-dark, #4a6549); }

/* ── Eingabe ── */

.ch-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border, #e9ecef);
}
.ch-form textarea {
    flex: 1 1 auto;
    min-width: 0;
    resize: none;
    border: 1px solid var(--border, #e9ecef);
    border-radius: 10px;
    padding: 10px 12px;
    /* 16 px, darunter zoomt iOS beim Fokus ins Feld hinein. */
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    max-height: 120px;
}
.ch-form textarea:focus {
    outline: none;
    border-color: var(--primary, #5a7a59);
}
.ch-send {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: var(--primary, #5a7a59);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
}
.ch-send:disabled { opacity: 0.5; cursor: default; }

.ch-btn {
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: 10px;
    background: var(--primary, #5a7a59);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.ch-btn:disabled { opacity: 0.5; cursor: default; }

.ch-note {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted, #939ba0);
    line-height: 1.45;
}

/* Der Weg zum Formular, wenn jemand lieber schreibt als chattet. */
.ch-alt {
    display: inline-block;
    margin: 0 0 16px;
    padding: 0;
    border: none;
    background: none;
    color: var(--primary-dark, #4a6549);
    font-size: 14px;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}