/* ==========================================================================
   Gesprächsverläufe – eine Optik für Nachrichten, Telefon und E-Mail
   (13.10.2026, Wunsch des Nutzers)

   Bis hierher sah jeder Bereich anders aus: Die große Nachrichtenansicht
   hatte 12er-Blasen mit Spitze und Schatten (whatsapp.css), der Verlauf in
   Telefon und Anfrage 8er-Blasen ohne beides (01-basis.css), die Abschrift
   des Assistenten eine dritte Form, und die E-Mail gar keinen Verlauf. Jetzt
   gilt EINE Blase, gleich wo sie steht – die Regeln aus der großen Ansicht
   sind hierher umgezogen und gelten für jedes .wa-thread.

   DIE SEITEN SIND ÜBERALL GLEICH VERTEILT: Rechts steht, was von uns kommt –
   eine gesendete Nachricht, eine Mail aus dem Ausgang, der Assistent am
   Telefon. Links steht der Kunde. Wer eine Seite kennt, kennt alle.

   Die Fläche dahinter (.wa-verlauf, auch .tel-chat und .ld-chat) trägt zwei
   zarte Orbit-Bänder (Higgsfield, gpt_image_2_5, Job 54a11f57; der weiße
   Grund ist herausgerechnet, deshalb tragen sie auch im Dunkeln:
   assets/bilder/verlauf/baender-1600|900.webp).
   ========================================================================== */

:root {
    --blase-r: 14px;
    --blase-ecke: 4px;
    --blase-breite: min(560px, 78%);
    --blase-schatten: 0 1px 1px rgba(26, 36, 48, 0.05), 0 2px 6px -3px rgba(26, 36, 48, 0.12);
}
html[data-farbschema="dunkel"] {
    --blase-schatten: 0 1px 2px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: dark) {
    html[data-farbschema="system"] {
        --blase-schatten: 0 1px 2px rgba(0, 0, 0, 0.35);
        }
}

/* --------------------------------------------------------------------------
   Die Fläche
   -------------------------------------------------------------------------- */
.wa-verlauf,
.tel-chat .wa-thread,
.ld-chat .wa-thread {
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    background-color: var(--brand-bg);
}
.wa-verlauf {
    min-height: 140px;
    padding: 14px 16px;
}
.tel-chat .wa-thread,
.ld-chat .wa-thread {
    padding: 12px 14px;
}
/* Die Bänder liegen direkt im Hintergrund der Fläche. Bei den Panelfassungen
   (Telefon, Anfrage), die in sich rollen, bleibt ein solcher Hintergrund von
   selbst stehen (background-attachment: scroll bezieht sich auf den Kasten,
   nicht auf seinen Inhalt) – die Blasen ziehen darüber hinweg. */
.wa-verlauf {
    background-image: url("../../bilder/verlauf/baender-1600.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.tel-chat .wa-thread,
.ld-chat .wa-thread {
    background-image: url("../../bilder/verlauf/baender-900.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Die Reihe und die Blase
   -------------------------------------------------------------------------- */
.wa-thread .wa-msg {
    flex-direction: column;
}
.wa-thread .wa-msg-in  { align-items: flex-start; }
.wa-thread .wa-msg-out { align-items: flex-end; }
.wa-thread .wa-msg + .wa-msg { margin-top: 1px; }
.wa-thread .wa-msg.hat-abstand { margin-top: 10px; }
.wa-thread > .wa-msg:first-child,
.wa-thread > .wa-tag-gruppe:first-child > .wa-msg:first-of-type { margin-top: 0; }

.wa-thread .wa-bubble {
    position: relative;
    max-width: var(--blase-breite);
    padding: 7px 12px 6px;
    border-radius: var(--blase-r);
    font-size: var(--fs-6);
    line-height: 1.45;
    box-shadow: var(--blase-schatten);
    overflow-wrap: anywhere;
}

/* Die Spitze: nur an der ersten Blase einer Reihe. Ein gedrehtes Quadrat
   HINTER der Blase (z-index -1 im eigenen Stapel des Verlaufs): Die Blase
   deckt die innere Hälfte samt deren Rahmenkanten zu, sichtbar bleibt nur
   die Ecke, die hinausragt. Vorher lag es obenauf und zeichnete an der
   eigenen Seite eine Kante quer durch die Blase. */
.wa-thread { isolation: isolate; }
/* KEIN QUERBALKEN (13.10.2026). Der Verlauf rollt senkrecht (overflow-y:
   auto in 01-basis.css), und damit stellt der Browser auch die Waagerechte
   auf „auto". Die Spitze ragt als gedrehtes Quadrat gut 7px über die Blase
   hinaus, das Polster war nur 4px – die 3px Rest reichten für einen
   Rollbalken unter jeder Abschrift. Die Blasen brechen ohnehin um
   (overflow-wrap), waagerecht gibt es also nie etwas zu rollen; 8px Polster
   seitlich lassen die Spitze ganz stehen. */
.wa-thread { overflow-x: hidden; padding-inline: var(--sp-3); }
.wa-thread .wa-msg.hat-abstand .wa-bubble::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 9px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: inherit;
    border: inherit;
    border-radius: 2px;
}
.wa-thread .wa-msg-in.hat-abstand .wa-bubble { border-top-left-radius: var(--blase-ecke); }
.wa-thread .wa-msg-in.hat-abstand .wa-bubble::before { left: -5px; }
.wa-thread .wa-msg-out.hat-abstand .wa-bubble { border-top-right-radius: var(--blase-ecke); }
.wa-thread .wa-msg-out.hat-abstand .wa-bubble::before { right: -5px; }

/* Unsere Seite trägt einen Hauch Glanz von oben – dieselbe Lichtkante wie
   der Hauptknopf, nur leiser. Die Farbe selbst bleibt die der eigenen Blase
   (01-basis.css, im Dunkeln --wa-eigen-*). */
.wa-thread .wa-msg-out .wa-bubble:not(.ist-fehler) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%);
}
html[data-farbschema="dunkel"] .wa-thread .wa-msg-out .wa-bubble:not(.ist-fehler) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%);
}
@media (prefers-color-scheme: dark) {
    html[data-farbschema="system"] .wa-thread .wa-msg-out .wa-bubble:not(.ist-fehler) {
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%);
    }
}

/* Wer spricht – über der ersten Blase einer Reihe. Nur wo es mehr als zwei
   Beteiligte geben kann oder die Seite allein es nicht sagt: beim
   Assistenten am Telefon und bei der E-Mail mit ihren Absendern. */
.wa-wer {
    margin: 0 8px 3px;
    color: var(--brand-quiet);
    font-size: var(--fs-3);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Der Betreff einer Mail in der Blase – eine Zeile, fett, darunter der
   Anfang des Textes. */
.wa-betreff {
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}
a.wa-betreff:hover { text-decoration: underline; }
.wa-msg.ist-aktuell .wa-bubble {
    outline: 2px solid color-mix(in srgb, var(--btn-blue) 45%, transparent);
    outline-offset: 1px;
}

@media (max-width: 899.98px) {
    :root { --blase-breite: 86%; }
}

/* --------------------------------------------------------------------------
   Die große Ansicht nach Vorlage (14.10.2026)
   Der Mittelteil der Lesebereiche (.ml-read-inhalt: Nachrichten, Telefon, E-Mail)
   folgt der Vorlage des Nutzers: eine ruhige, helle Fläche ohne Bänder, Blasen ohne Spitze und
   Rahmen, großzügig gepolstert, die Uhrzeit mit Haken in einer eigenen Zeile
   rechts unten, der Tag als schlichte Zeile in Großbuchstaben statt als
   Plakette. Seit dem 14.10.2026 abends gilt sie auch für Telefon (.tel-chat)
   und den Gesprächsverlauf der E-Mail; die kleinen Verläufe in Anfrage und
   Lead-Detail bleiben, wie sie waren.
   -------------------------------------------------------------------------- */
.ml-read-inhalt .wa-verlauf,
.ml-read-inhalt .tel-chat .wa-thread {
    background-image: none;
    background-color: var(--brand-surface, var(--brand-bg));
    border-radius: 22px;
    padding: 22px 26px 26px;
}
.ml-read-inhalt .wa-verlauf .wa-thread {
    gap: 10px;
    padding-inline: 0;
}
.ml-read-inhalt .tel-chat .wa-thread { gap: 10px; }
.ml-read-inhalt .wa-thread .wa-msg + .wa-msg { margin-top: 0; }
.ml-read-inhalt .wa-thread .wa-bubble {
    max-width: min(640px, 74%);
    padding: 14px 16px 10px;
    border: 0;
    border-radius: 18px;
    box-shadow: none;
    font-size: var(--fs-6);
    line-height: 1.5;
    background-image: none;
    background-color: color-mix(in srgb, var(--brand-text) 7%, var(--brand-surface, #fff));
}
.ml-read-inhalt .wa-thread .wa-msg-out .wa-bubble:not(.ist-fehler) {
    background-image: none;
    /* Dasselbe Blau wie die gewählte Gesprächszeile in der Liste daneben. */
    background-color: var(--blau-hell);
    border: 0;
}
.ml-read-inhalt .wa-thread .wa-msg .wa-bubble::before { content: none; }
.ml-read-inhalt .wa-thread .wa-bubble .wa-meta {
    display: block;
    float: none;
    margin: 8px 0 0;
    text-align: right;
    font-size: var(--fs-3);
}
.ml-read-inhalt .wa-thread .wa-tag {
    position: static;
    margin: 12px auto 4px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--brand-quiet);
    font-size: var(--fs-3);
    font-weight: 500;
    letter-spacing: 0.12em;
}
.ml-read-inhalt .wa-thread .wa-tag-gruppe:first-child > .wa-tag { margin-top: 0; }