/*
 * PMPS Chat -- das Chatfenster.
 *
 * NAMENSRAUM
 * Alles beginnt mit pmps-website-chat. Das Plugin laeuft in einem fremden Theme, und
 * ein Theme darf hier nichts treffen und nichts von hier getroffen bekommen.
 * Notation: pmps-website-chat__element--modifikator, Modifikatoren als parallele
 * Klassen, niemals konkateniert.
 *
 * DIE HAUSFARBE STEHT HIER (E-75, 03.09.2026)
 * Bis 0.6.1 war die Vorgabe ein neutrales Blaugrau, und die Hausfarbe sollte
 * von aussen kommen -- ueber das Theme oder die Einbettung (E-29). Fuer einen
 * Klon, der genau EINE Webseite bedient, ist das der falsche Weg: Er
 * verschiebt eine Entscheidung, die feststeht, in eine Datei, die jemand von
 * Hand pflegen muesste, und bis dahin steht ein fremdes Grau auf der Seite.
 *
 * PMPS-Blau ist #196297. Gemessen am 03.09.2026 an der Startseite von
 * www.project-management-partners.de: Die Farbe kommt dort in 104 berechneten
 * Stilen vor und ist damit die Hausfarbe, nicht eine von mehreren. Der
 * dunklere Ton #0f3f62 fuer Hover und besuchte Links stammt aus dem
 * PMPS-Briefing-Stylesheet.
 *
 * Weiss auf #196297 erreicht ein Kontrastverhaeltnis von rund 6,5:1 und
 * besteht damit WCAG AA -- geprueft, weil ein Absenden-Knopf, den jemand
 * nicht lesen kann, kein Absenden-Knopf ist.
 *
 * Wer die Farbe doch von aussen setzen will, ueberschreibt weiterhin
 * --pmps-website-chat-akzent; die Variablen sind geblieben.
 *
 * MOBILE FIRST
 * Die Grundregeln beschreiben das Handy: Fenster ueber die volle Breite und
 * fast volle Hoehe. Ab 480px wird daraus ein Kasten in der Ecke.
 */

:root {
    --pmps-website-chat-akzent:        #196297;
    --pmps-website-chat-akzent-dunkel: #0f3f62;
    --pmps-website-chat-akzent-text:   #ffffff;

    --pmps-website-chat-grund:      #ffffff;
    --pmps-website-chat-grund-matt: #f4f5f6;
    --pmps-website-chat-text:       #23282d;
    --pmps-website-chat-text-matt:  #6a7178;
    --pmps-website-chat-linie:      #dfe2e5;

    --pmps-website-chat-radius:  10px;
    --pmps-website-chat-schrift: inherit;
    --pmps-website-chat-ebene:   2147483000;
}

/* =====================================================================
   Die Blase
   ===================================================================== */

.pmps-website-chat__blase {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: var(--pmps-website-chat-ebene);

    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: var(--pmps-website-chat-akzent);
    color: var(--pmps-website-chat-akzent-text);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
    cursor: pointer;

    /* Ein Theme, das button { transition } setzt, soll hier nichts
       verzoegern, was aussieht wie ein Fehler. */
    transition: transform .15s ease, background-color .15s ease;
}

.pmps-website-chat__blase:hover  { background: var(--pmps-website-chat-akzent-dunkel); }
.pmps-website-chat__blase:active { transform: scale(.94); }

.pmps-website-chat__blase:focus-visible {
    outline: 3px solid var(--pmps-website-chat-akzent);
    outline-offset: 3px;
}

.pmps-website-chat__blase svg {
    width: 26px;
    height: 26px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pmps-website-chat__blase--verborgen { display: none; }

/* =====================================================================
   Das Fenster
   ===================================================================== */

.pmps-website-chat__fenster {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    z-index: var(--pmps-website-chat-ebene);

    display: flex;
    flex-direction: column;

    background: var(--pmps-website-chat-grund);
    color: var(--pmps-website-chat-text);
    font-family: var(--pmps-website-chat-schrift);
    font-size: 15px;
    line-height: 1.5;

    /* Ein Theme mit box-sizing: content-box wuerde die Breiten unten
       verschieben. Die Regel gilt nur innerhalb des Fensters. */
    box-sizing: border-box;
}

.pmps-website-chat__fenster *,
.pmps-website-chat__fenster *::before,
.pmps-website-chat__fenster *::after { box-sizing: border-box; }

.pmps-website-chat__fenster--zu { display: none; }

@media (min-width: 480px) {
    .pmps-website-chat__fenster {
        top: auto;
        left: auto;
        right: 16px;
        bottom: 16px;
        width: 380px;

        /* Das Fenster waechst mit dem Gespraech, statt von Anfang an
           560px hoch dazustehen. Eine leere weisse Flaeche ueber dem
           Eingabefeld sieht aus wie ein Feld, in das man tippen soll --
           und laesst das eigentliche Feld klein und nebensaechlich
           wirken. Untergrenze, damit die Blase nicht als Streifen
           erscheint; Obergrenze wie zuvor, danach scrollt der Verlauf. */
        height: auto;
        min-height: 220px;
        max-height: min(560px, calc(100vh - 32px));
        border: 1px solid var(--pmps-website-chat-linie);
        border-radius: var(--pmps-website-chat-radius);
        box-shadow: 0 6px 28px rgba(0, 0, 0, .22);
        overflow: hidden;
    }

    /* Gegenstueck zu height:auto oben: Der Verlauf ist nur so hoch wie
       sein Inhalt und schiebt das Fenster nicht auf. Ohne diese Zeile
       bliebe die Hoehenaenderung wirkungslos, weil flex:1 1 auto den
       Rest des Fensters fuellt -- auch wenn nichts darin steht. */
    .pmps-website-chat__verlauf { flex: 0 1 auto; }
}

/* --- Kopfzeile ------------------------------------------------------- */

.pmps-website-chat__kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 12px 14px;
    background: var(--pmps-website-chat-akzent);
    color: var(--pmps-website-chat-akzent-text);
}

.pmps-website-chat__titel {
    flex: 1 1 auto;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

.pmps-website-chat__knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.pmps-website-chat__knopf:hover { background: rgba(255, 255, 255, .18); }

/* Der Neustart-Knopf erscheint erst, wenn es ein Gespräch zu verwerfen gibt
   (E-47). Ein Knopf, der nichts tut, ist schlimmer als keiner. */
.pmps-website-chat__knopf--verborgen { display: none; }

.pmps-website-chat__knopf:focus-visible {
    outline: 2px solid var(--pmps-website-chat-akzent-text);
    outline-offset: 1px;
}

.pmps-website-chat__knopf svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Der Verlauf ----------------------------------------------------- */

.pmps-website-chat__verlauf {
    /* Auf dem Handy fuellt das Fenster den Bildschirm -- hier muss der
       Verlauf den uebrigen Platz nehmen, sonst klebt die Eingabe oben.
       Am Schreibtisch gilt ab 480px die Gegenregel weiter unten. */
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    background: var(--pmps-website-chat-grund-matt);
}

.pmps-website-chat__leer {
    margin: 8px 4px;
    color: var(--pmps-website-chat-text-matt);
    font-size: 14px;
}

.pmps-website-chat__wechsel { margin: 0 0 12px; }
.pmps-website-chat__wechsel:last-child { margin-bottom: 0; }

.pmps-website-chat__blasetext {
    display: inline-block;
    max-width: 88%;
    padding: 9px 12px;
    border-radius: var(--pmps-website-chat-radius);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pmps-website-chat__wechsel--frage { text-align: right; }

.pmps-website-chat__wechsel--frage .pmps-website-chat__blasetext {
    background: var(--pmps-website-chat-akzent);
    color: var(--pmps-website-chat-akzent-text);
    text-align: left;
}

.pmps-website-chat__wechsel--antwort .pmps-website-chat__blasetext {
    background: var(--pmps-website-chat-grund);
    border: 1px solid var(--pmps-website-chat-linie);
}

/* Der Ersatzsatz, wenn nichts belegt ist. Er sieht anders aus als eine
   belegte Antwort -- nicht als Warnung, sondern zurueckgenommen: Der
   Unterschied zwischen "das steht so in den Unterlagen" und "dazu finde
   ich nichts" soll sichtbar sein, ohne zu erschrecken. */
.pmps-website-chat__wechsel--unbelegt .pmps-website-chat__blasetext {
    background: var(--pmps-website-chat-grund);
    border: 1px dashed var(--pmps-website-chat-linie);
    color: var(--pmps-website-chat-text-matt);
}

.pmps-website-chat__wechsel--fehler .pmps-website-chat__blasetext {
    background: #fdf3f2;
    border: 1px solid #e6c9c6;
    color: #7c3a34;
}

/* --- Quellen und Vorschlaege ----------------------------------------- */

/*
 * Sie kommen in derselben Struktur und bedeuten Verschiedenes:
 * Quellen sind das, worauf die Auskunft beruht -- Vorschlaege sind
 * Seiten, auf denen vielleicht steht, was der Bot nicht gefunden hat.
 * Deshalb zwei Ueberschriften und zwei Zeichnungen. Sie erscheinen nie
 * zugleich; das entscheidet das Skript, nicht dieses Stylesheet.
 */

.pmps-website-chat__quellen {
    max-width: 88%;
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
}

.pmps-website-chat__quellen--beleg {
    background: var(--pmps-website-chat-grund);
    border: 1px solid var(--pmps-website-chat-linie);
    border-left: 3px solid var(--pmps-website-chat-akzent);
}

.pmps-website-chat__quellen--vorschlag {
    background: transparent;
    border: 1px dashed var(--pmps-website-chat-linie);
}

.pmps-website-chat__quellenkopf {
    margin: 0 0 5px;
    color: var(--pmps-website-chat-text-matt);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

.pmps-website-chat__quellenliste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pmps-website-chat__quelle {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 4px;
}

.pmps-website-chat__quelle:last-child { margin-bottom: 0; }

.pmps-website-chat__quelle svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    fill: none;
    stroke: var(--pmps-website-chat-text-matt);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pmps-website-chat__quelle a {
    color: var(--pmps-website-chat-akzent);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.pmps-website-chat__quelle a:hover { color: var(--pmps-website-chat-akzent-dunkel); }

.pmps-website-chat__seite {
    color: var(--pmps-website-chat-text-matt);
    white-space: nowrap;
}

/* --- Der Wartezustand ------------------------------------------------ */

.pmps-website-chat__warten {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 1px solid var(--pmps-website-chat-linie);
    border-radius: var(--pmps-website-chat-radius);
    background: var(--pmps-website-chat-grund);
    color: var(--pmps-website-chat-text-matt);
    font-size: 14px;
}

.pmps-website-chat__punkte {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
}

.pmps-website-chat__punkt {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pmps-website-chat-text-matt);
    animation: pmps-website-chat-punkt 1.1s infinite ease-in-out;
}

.pmps-website-chat__punkt--zwei  { animation-delay: .18s; }
.pmps-website-chat__punkt--drei  { animation-delay: .36s; }

@keyframes pmps-website-chat-punkt {
    0%, 70%, 100% { opacity: .28; transform: translateY(0); }
    35%           { opacity: 1;   transform: translateY(-3px); }
}

/* Wer Bewegung abgestellt hat, bekommt keine. Die Punkte bleiben
   sichtbar -- sie sind dann eben still. */
@media (prefers-reduced-motion: reduce) {
    .pmps-website-chat__punkt { animation: none; opacity: .55; }
    .pmps-website-chat__blase { transition: none; }
}

/* --- Der Vorbehalt (E-38) -------------------------------------------- */

/*
 * Feste Fusszeile ueber dem Eingabefeld. Er scrollt nicht weg, weil er
 * genau dann dastehen soll, wenn die naechste Frage getippt wird -- und
 * er steht EINMAL im Fenster, nicht unter jeder Antwort. Warum, steht in
 * Uebergabe 07, E-38.
 */
.pmps-website-chat__vorbehalt {
    flex: 0 0 auto;
    padding: 7px 14px 0;
    border-top: 1px solid var(--pmps-website-chat-linie);
    background: var(--pmps-website-chat-grund);
    color: var(--pmps-website-chat-text-matt);
    font-size: 11.5px;
    line-height: 1.4;
}

.pmps-website-chat__vorbehalt--leer { display: none; }

/* --- Die Eingabe ----------------------------------------------------- */

.pmps-website-chat__eingabe {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    padding: 12px 14px 14px;

    /* Eine Trennlinie nach oben. Ohne sie geht der Eingabebereich in den
       Verlauf ueber, und wer das Fenster zum ersten Mal sieht, weiss
       nicht, wo er hintippen soll. */
    border-top: 1px solid var(--pmps-website-chat-linie);
    background: var(--pmps-website-chat-grund);
}

.pmps-website-chat__feld {
    flex: 1 1 auto;

    /* Groesser und deutlicher als zuvor (40px, 1px Rahmen, Fenstergrund).
       Das Feld ist das einzige Bedienelement des Fensters -- es darf
       nicht wie ein Nachtrag am unteren Rand aussehen. Der abgesetzte
       Grund macht es als Feld erkennbar, auch ohne Fokus. */
    min-height: 52px;
    max-height: 132px;
    padding: 14px 13px;
    border: 2px solid var(--pmps-website-chat-linie);
    border-radius: 10px;
    background: var(--pmps-website-chat-grund-matt);
    color: var(--pmps-website-chat-text);
    font-family: inherit;

    /* 16px, damit iOS beim Hineintippen nicht heranzoomt. Alles darunter
       loest das Zoomen aus, und die Seite kommt nicht von selbst zurueck. */
    font-size: 16px;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
}

.pmps-website-chat__feld::placeholder {
    color: var(--pmps-website-chat-text-matt);
    opacity: 1;                  /* Firefox blendet sonst zusaetzlich ab */
}

.pmps-website-chat__feld:focus {
    outline: none;
    border-color: var(--pmps-website-chat-akzent);
    background: var(--pmps-website-chat-grund);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .07);
}

.pmps-website-chat__senden {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    /* Gleich hoch wie das Feld, sonst steht der Knopf daneben verloren. */
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--pmps-website-chat-akzent);
    color: var(--pmps-website-chat-akzent-text);
    cursor: pointer;
}

.pmps-website-chat__senden:hover:not(:disabled) { background: var(--pmps-website-chat-akzent-dunkel); }

.pmps-website-chat__senden:disabled {
    opacity: .45;
    cursor: default;
}

.pmps-website-chat__senden:focus-visible {
    outline: 3px solid var(--pmps-website-chat-akzent);
    outline-offset: 2px;
}

.pmps-website-chat__senden svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Nur fuer Screenreader. Die Ueberschrift des Fensters und die Beschriftung
   der Knoepfe stehen hier, ohne dass sie Platz kosten. */
.pmps-website-chat__nurvorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}