/* ============================================
   CHAT-ASSISTENT
   Runder Bot-Knopf unten RECHTS + eckiges Panel.

   Designsystem: Die Seite ist durchgehend eckig — saemtliche
   --radius-*-Tokens sind 0. Flaechen sind weiss mit 1px --gray-200,
   Schatten weich und blaustichig, Fokus als 3px-Ring in --blue.

   Ausnahme von der Eckig-Regel: Der Launcher ist rund. Ein schwebender
   Aktionsknopf ist ein eigenes Muster und wird als Knopf erkannt, nicht als
   Flaeche. Alles andere — Panel, Blasen, Eingabe — bleibt eckig.

   Rechts unten: Die Bewertungssiegel sind auf die linke Seite gewandert
   (.pe-seal left:20px, .google-seal left:156px, beide z-index 9990),
   der Chat sitzt jetzt rechts.

   Stapelordnung:
     consent-banner        z-index 99999  — muss immer oben bleiben
     chat                  z-index  9998  — hier
     pe-seal / google-seal z-index  9990  — unten links, nicht anfassen
     sticky-bottom-bar     z-index    99  — volle Breite, --chat-offset weicht aus
   ============================================ */

:root {
    --chat-offset: 20px;          /* setzt chat.js, wenn die Sticky-Bar auftaucht */
    --chat-blue: var(--blue, #5271ff);
    --chat-linie: var(--gray-200, #e5e7eb);
}

/* ─── Launcher: Hinweisblase + runder Knopf ─── */

.chat-start {
    position: fixed;
    right: 20px;
    bottom: var(--chat-offset);
    z-index: 9998;

    display: flex;
    align-items: center;
    gap: 12px;

    transition: bottom 400ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 250ms ease,
                visibility 250ms ease;
}

/* Panel offen, oder Consent-Banner blockiert die Ecke.
   visibility statt display: haelt den Uebergang weich und nimmt den
   Knopf gleichzeitig aus der Tab-Reihenfolge. */
.chat-start[hidden],
.chat-start.is-suppressed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Hinweisblase ── */

.chat-hinweisblase {
    position: relative;
    max-width: 190px;
    padding: 10px 14px;
    background: var(--white, #fff);
    border: 1px solid var(--chat-linie);
    border-radius: var(--radius-md, 0);
    box-shadow: 0 8px 24px rgba(82, 113, 255, 0.14);
    color: var(--gray-800, #1f2937);
    font-family: var(--font-family, 'Inter', system-ui, sans-serif);
    font-size: var(--body-small, 13px);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    animation: chat-blase-auf 400ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both;
}

/* Zeiger auf den Kreis: zwei Dreiecke, damit der 1px-Rahmen durchlaeuft */
.chat-hinweisblase::before,
.chat-hinweisblase::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-left-color: var(--chat-linie);
    transform: translateY(-50%);
}

.chat-hinweisblase::after {
    left: calc(100% - 1px);
    border-left-color: var(--white, #fff);
}

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

@keyframes chat-blase-auf {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Runder Knopf ── */

.chat-launcher {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;
    padding: 0;
    border: none;
    border-radius: 50%;

    background: var(--chat-blue);
    color: #fff;
    line-height: 1;
    cursor: pointer;

    box-shadow: 0 8px 22px rgba(82, 113, 255, 0.32);
    transition: transform var(--transition-fast, 150ms ease),
                background var(--transition-fast, 150ms ease),
                box-shadow var(--transition-fast, 150ms ease);
}

.chat-launcher:hover {
    background: var(--blue-hover, #3d5bd9);
    transform: scale(1.06);
    box-shadow: 0 12px 30px rgba(82, 113, 255, 0.42);
}

.chat-launcher:active { transform: scale(0.98); }

.chat-launcher:focus-visible {
    outline: 3px solid var(--chat-blue);
    outline-offset: 3px;
}

.chat-launcher__icon {
    display: block;
    pointer-events: none;   /* Klick geht immer an den Knopf, nie an das SVG */
}

/* ── Puls beim Seitenaufruf ── */

/* Ring als box-shadow statt als Pseudo-Element: ein positioniertes ::after
   laege ueber dem Icon und wuerde es bei jedem Puls ueberdecken. Der
   Ruheschatten steht in jedem Keyframe mit drin, sonst faellt er waehrend
   der Animation weg. Gleiches Muster wie beim Live-Punkt im Header. */
.chat-launcher--puls {
    animation: chat-ring 1.6s ease-out 2;
}

@keyframes chat-ring {
    0% {
        box-shadow: 0 8px 22px rgba(82, 113, 255, 0.32),
                    0 0 0 0 rgba(82, 113, 255, 0.55);
    }
    70% {
        box-shadow: 0 8px 22px rgba(82, 113, 255, 0.32),
                    0 0 0 20px rgba(82, 113, 255, 0);
    }
    100% {
        box-shadow: 0 8px 22px rgba(82, 113, 255, 0.32),
                    0 0 0 0 rgba(82, 113, 255, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-launcher--puls { animation: none; }
    .chat-hinweisblase { animation: none; }
}

/* ─── Panel ─────────────────────────────────── */

.chat-panel {
    position: fixed;
    right: 20px;
    bottom: var(--chat-offset);
    z-index: 9998;

    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 40px));
    height: min(620px, calc(100vh - 40px));

    background: var(--white, #fff);
    border: 1px solid var(--chat-linie);
    border-radius: var(--radius-lg, 0);
    box-shadow: 0 16px 48px rgba(82, 113, 255, 0.14);
    overflow: hidden;

    font-family: var(--font-family, 'Inter', system-ui, sans-serif);

    transform-origin: bottom right;
    animation: chat-auf 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* display:flex oben wuerde das hidden-Attribut sonst aushebeln */
.chat-panel[hidden] { display: none; }

@keyframes chat-auf {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-panel { animation: none; }
    .chat-launcher:hover { transform: none; }
}

/* ─── Kopfzeile ─────────────────────────────── */

.chat-kopf {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: 14px 12px 14px 20px;
    background: var(--white, #fff);
    border-bottom: 1px solid var(--chat-linie);
}

.chat-kopf__text { flex: 1; min-width: 0; }

.chat-kopf__titel {
    margin: 0;
    color: var(--gray-900, #111);
    font-size: var(--body, 15px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.chat-kopf__status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0 0;
    color: var(--gray-500, #6b7280);
    font-size: var(--caption, 11px);
    line-height: 1.3;
}

/* Ruhiger Statuspunkt statt Text-Behauptung */
.chat-kopf__punkt {
    width: 6px;
    height: 6px;
    background: #16a34a;
    flex: none;
}

/* Icon-Knoepfe im Kopf: neu starten, schliessen */
.chat-kopfknopf {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 0);
    background: transparent;
    color: var(--gray-500, #6b7280);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease),
                color var(--transition-fast, 150ms ease);
}

.chat-kopfknopf:hover {
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-900, #111);
}

.chat-kopfknopf:focus-visible {
    outline: 2px solid var(--chat-blue);
    outline-offset: 1px;
}

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

/* ─── Weg zum Menschen ──────────────────────── */

.chat-mensch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    background: var(--gray-50, #f9fafb);
    border-bottom: 1px solid var(--chat-linie);
    color: var(--gray-700, #374151);
    font-size: var(--body-small, 13px);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast, 150ms ease),
                color var(--transition-fast, 150ms ease);
}

.chat-mensch:hover {
    background: var(--blue-lighter, #f0f3ff);
    color: var(--chat-blue);
}

.chat-mensch:focus-visible {
    outline: 2px solid var(--chat-blue);
    outline-offset: -2px;
}

.chat-mensch__label { flex: 1; }

.chat-mensch svg { flex: none; }
.chat-mensch__pfeil { color: var(--gray-400, #9ca3af); }
.chat-mensch:hover .chat-mensch__pfeil { color: var(--chat-blue); }

/* ─── Verlauf ───────────────────────────────── */

.chat-verlauf {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    background: var(--white, #fff);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chat-verlauf::-webkit-scrollbar { width: 10px; }
.chat-verlauf::-webkit-scrollbar-track { background: transparent; }
.chat-verlauf::-webkit-scrollbar-thumb {
    background: var(--gray-200, #e5e7eb);
    border: 3px solid var(--white, #fff);
}
.chat-verlauf::-webkit-scrollbar-thumb:hover { background: var(--gray-300, #d1d5db); }

.chat-blase {
    max-width: 86%;
    padding: 12px 15px;
    border-radius: var(--radius-md, 0);
    font-size: var(--body-small, 13px);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.chat-blase--bot {
    align-self: flex-start;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--chat-linie);
    color: var(--gray-800, #1f2937);
}

.chat-blase--nutzer {
    align-self: flex-end;
    background: var(--chat-blue);
    border: 1px solid var(--chat-blue);
    color: #fff;
}

.chat-blase--fehler {
    align-self: stretch;
    max-width: 100%;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: var(--caption, 11px);
    line-height: 1.55;
}

.chat-blase p { margin: 0 0 9px; }
.chat-blase p:last-child { margin-bottom: 0; }
.chat-blase strong { font-weight: 600; }

.chat-blase a {
    color: var(--chat-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.chat-blase--nutzer a { color: #fff; }

.chat-blase ul { margin: 8px 0 0; padding-left: 18px; }
.chat-blase li { margin-bottom: 4px; }
.chat-blase li:last-child { margin-bottom: 0; }

/* Tipp-Indikator */
.chat-tippt {
    align-self: flex-start;
    display: flex;
    gap: 5px;
    padding: 15px;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--chat-linie);
    border-radius: var(--radius-md, 0);
}

.chat-tippt span {
    width: 6px;
    height: 6px;
    background: var(--gray-400, #9ca3af);
    animation: chat-puls 1.3s ease-in-out infinite;
}

.chat-tippt span:nth-child(2) { animation-delay: 0.18s; }
.chat-tippt span:nth-child(3) { animation-delay: 0.36s; }

@keyframes chat-puls {
    0%, 60%, 100% { opacity: 0.25; }
    30%           { opacity: 1; }
}

/* ─── Startvorschlaege ──────────────────────── */

.chat-vorschlaege {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 20px 14px;
    background: var(--white, #fff);
}

/* Ohne diese Zeile bliebe display:flex staerker als das hidden-Attribut
   und die Vorschlaege stuenden mitten im Dialog. */
.chat-vorschlaege[hidden] { display: none; }

.chat-vorschlag {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--chat-linie);
    border-radius: var(--radius-sm, 0);
    background: var(--white, #fff);
    color: var(--gray-700, #374151);
    font-family: inherit;
    font-size: var(--body-small, 13px);
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast, 150ms ease),
                color var(--transition-fast, 150ms ease),
                background var(--transition-fast, 150ms ease);
}

.chat-vorschlag:hover {
    border-color: var(--chat-blue);
    background: var(--blue-lighter, #f0f3ff);
    color: var(--chat-blue);
}

.chat-vorschlag:focus-visible {
    outline: 2px solid var(--chat-blue);
    outline-offset: 1px;
}

/* ─── Eingabe ───────────────────────────────── */

.chat-eingabe {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2, 0.5rem);
    padding: 12px 20px;
    border-top: 1px solid var(--chat-linie);
    background: var(--white, #fff);
}

/* Uebernimmt bewusst die Werte aus components/forms.css */
.chat-eingabe textarea {
    flex: 1;
    max-height: 110px;
    padding: 11px 13px;
    border: 1px solid var(--chat-linie);
    border-radius: var(--radius-sm, 0);
    background: var(--gray-50, #f9fafb);
    color: var(--gray-900, #111);
    font-family: inherit;
    font-size: var(--body-small, 13px);
    line-height: 1.5;
    resize: none;
    transition: border-color var(--transition-fast, 150ms ease),
                box-shadow var(--transition-fast, 150ms ease),
                background var(--transition-fast, 150ms ease);
}

.chat-eingabe textarea::placeholder { color: var(--gray-400, #9ca3af); }

.chat-eingabe textarea:focus {
    outline: none;
    border-color: var(--chat-blue);
    box-shadow: 0 0 0 3px rgba(82, 113, 255, 0.1);
    background: var(--white, #fff);
}

.chat-eingabe textarea:disabled {
    background: var(--gray-100, #f3f4f6);
    cursor: not-allowed;
}

.chat-senden {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--chat-blue);
    border-radius: var(--radius-sm, 0);
    background: var(--chat-blue);
    color: #fff;
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease),
                border-color var(--transition-fast, 150ms ease);
}

.chat-senden:hover:not(:disabled) {
    background: var(--blue-hover, #3d5bd9);
    border-color: var(--blue-hover, #3d5bd9);
}

.chat-senden:disabled {
    background: var(--gray-200, #e5e7eb);
    border-color: var(--gray-200, #e5e7eb);
    color: var(--gray-400, #9ca3af);
    cursor: not-allowed;
}

.chat-senden:focus-visible {
    outline: 2px solid var(--chat-blue);
    outline-offset: 2px;
}

.chat-hinweis {
    padding: 0 20px 12px;
    background: var(--white, #fff);
    color: var(--gray-400, #9ca3af);
    font-size: var(--caption, 11px);
    line-height: 1.45;
}

.chat-hinweis a {
    color: var(--gray-500, #6b7280);
    text-underline-offset: 2px;
}

/* ─── Mobil ─────────────────────────────────── */

@media (max-width: 560px) {
    .chat-panel {
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100dvh;
        border: none;
        box-shadow: none;
    }

    .chat-start { right: 16px; }

    .chat-launcher {
        width: 56px;
        height: 56px;
    }

    /* Auf schmalen Displays wuerde die Blase sonst den halben Bildschirm
       einnehmen — umbrechen statt einzeilig quetschen. */
    .chat-hinweisblase {
        max-width: 44vw;
        white-space: normal;
        font-size: var(--caption, 11px);
        padding: 8px 11px;
    }
}