/* ==========================================================================
   Der Fachberater in der Ecke – Figur und Fenster
   ==========================================================================

   Die Figur steht unten rechts auf jeder Seite des Dashboards. Sie ist KEINE
   Karte: kein Rahmen, kein Kasten, keine Fläche – nur der Kopf und sein
   Schatten, so wie ein eingeblendeter Sprecher in einem Video. Die Fläche
   kommt erst unter dem Zeiger (Hausregel „Fläche statt Rahmen").

   WARUM DIE FIGUR RUND IST UND DAS VIDEO QUADRATISCH: Die Schleife kommt als
   1:1-Film aus der Serie „Neon-Nacht" und wird vom Kreis beschnitten. Ein
   freigestellter Kopf ohne Grund wäre die Alternative gewesen; dagegen spricht
   das Farbpulver hinter den Schultern – es IST der Serienstil, und freigestellt
   bliebe davon nichts.

   DIE FARBE DER FIGUR IST NICHT DIE HAUSFARBE. Der Ring um den Kopf nimmt das
   Farbpaar der gewählten Figur (--fb-glanz, gesetzt im HTML). Die Hausfarbe
   ist einstellbar; ein Kopf, der bei einem Allianz-Kunden plötzlich blau
   leuchtet, wäre ein anderer Kopf.

   ZUR HÖHENORDNUNG: 1085 für die Figur, 1090 für das Fenster. Damit liegen
   beide über den klebenden Leisten (1020–1080) und unter allem, was sich über
   die Seite legt (ab 1100): Auswahlmenü, Blattbetrachter, Dialoge. Ein Berater,
   der eine Rückfrage „Wirklich löschen?" verdeckt, wäre ein Fehler.
   ========================================================================== */

/* --- Die Figur ---------------------------------------------------------- */

.fb-figur {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1085;
    width: 92px;
    height: 92px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #0b0d12;          /* der schwarze Grund der Serie, fest wie unter jedem Video */
    cursor: pointer;
    overflow: hidden;
    box-shadow: var(--sh-3);
    /* Der Ring ist das Farbpaar der Figur, nicht die Hausfarbe. */
    outline: 2px solid color-mix(in srgb, var(--fb-glanz, #b8763a) 55%, transparent);
    outline-offset: 2px;
    transition: transform .18s ease, outline-color .18s ease, box-shadow .18s ease;
}

.fb-figur video,
.fb-figur img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Der Kopf sitzt im Quadrat etwas über der Mitte – beschnitten wird unten. */
    object-position: 50% 22%;
}

.fb-figur:hover,
.fb-figur:focus-visible {
    transform: translateY(-2px) scale(1.03);
    outline-color: var(--fb-glanz, #b8763a);
}

.fb-figur:focus-visible {
    box-shadow: var(--sh-3), 0 0 0 4px color-mix(in srgb, var(--btn-leucht) 35%, transparent);
}

/* Der Name unter dem Kopf – nur unter dem Zeiger, und ohne eigene Fläche,
   damit die Ecke im Ruhezustand still bleibt. */
.fb-name {
    position: fixed;
    right: 24px;
    bottom: 4px;
    z-index: 1085;
    width: 92px;
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    color: var(--brand-quiet);
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}

.fb-figur:hover + .fb-name,
.fb-figur:focus-visible + .fb-name { opacity: 1; }

/* Der Punkt, der sagt „hier steht noch eine Antwort" – dieselbe Sprache wie
   die Zählblasen der Kopfleiste, aber ohne Zahl: Es ist immer genau eine. */
.fb-figur.hat-neues::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--btn-green-signal, #1db954);
    box-shadow: 0 0 0 2px #0b0d12;
}

/* --- Es klingelt: die Figur macht Platz (23.09.2026) --------------------
   Solange eine Anrufkarte steht (telefon-klingelt.js setzt die Klasse an
   <html>), gleitet der Kopf um genau die Breite der Karte nach links, und
   die Karte steht dort, wo er war. Die Breite kommt aus demselben Token wie
   die Karte (04-arbeitsflaechen.css), damit beide nie auseinanderlaufen.
   Der Name wandert mit, sonst stünde er unter der Karte. */

html.tel-klingelt-aktiv .fb-figur,
html.tel-klingelt-aktiv .fb-name {
    transform: translateX(calc(-1 * (var(--tel-karte-b) + var(--tel-fuge))));
}
html.tel-klingelt-aktiv .fb-figur:hover,
html.tel-klingelt-aktiv .fb-figur:focus-visible {
    transform: translateX(calc(-1 * (var(--tel-karte-b) + var(--tel-fuge)))) translateY(-2px) scale(1.03);
}
.fb-figur,
.fb-name {
    /* Platz machen über einem Knopf (fachberater.js, platzMachen): eigene
       Eigenschaft translate, damit es sich mit dem Klingeln oben addiert. */
    translate: var(--fb-weg-x, 0px) var(--fb-weg-y, 0px);
    /* Das Ausweichen gleitet mit der Feder des Hauses; Zeiger und Ring bleiben schnell. */
    transition: transform var(--t-lang) var(--ease-feder), translate var(--t-lang) var(--ease-feder), outline-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

/* --- Das Fenster -------------------------------------------------------- */

.fb-fenster {
    position: fixed;
    right: 24px;
    bottom: 130px;
    z-index: 1090;
    width: 420px;
    max-width: calc(100vw - 48px);
    max-height: min(640px, calc(100vh - 170px));
    display: none;
    flex-direction: column;
    border-radius: var(--r-card);
    border: 1px solid var(--brand-border);
    box-shadow: var(--sh-3);
    overflow: hidden;

    /* Glas nach dem Rezept des Hauses (GLAS.md): Das Fenster liegt über einer
       Liste, unter der weitergeblättert wird. */
    background: color-mix(in srgb, var(--brand-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
}

.fb-fenster.offen {
    display: flex;
    animation: fb-auf .18s ease-out;
}

@keyframes fb-auf {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fb-fenster { background: color-mix(in srgb, var(--brand-surface) 96%, transparent); }
}

@media (prefers-reduced-transparency: reduce) {
    .fb-fenster {
        background: var(--brand-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Kopfzeile: Name, Fach, zwei stille Knöpfe. */
.fb-kopfzeile {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--brand-border);
}

.fb-kopfzeile .fb-kopf-bild {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 22%;
    background: #0b0d12;
    flex: 0 0 auto;
}

.fb-kopf-text { min-width: 0; flex: 1 1 auto; }
.fb-kopf-name { font-weight: 600; font-size: .92rem; line-height: 1.2; }
.fb-kopf-fach { font-size: .74rem; color: var(--brand-faint); line-height: 1.2; }

.fb-kopf-knopf {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--brand-quiet);
    border-radius: var(--r-sm);
    padding: .25rem .4rem;
    line-height: 1;
    cursor: pointer;
}
.fb-kopf-knopf:hover { background: var(--brand-row); color: var(--brand-text); }

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

.fb-verlauf {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .9rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    font-size: .88rem;
    line-height: 1.5;
}

/* Die Frage: eine getönte Blase rechts, wie im WhatsApp-Verlauf des Hauses.
   Die Antwort steht ohne Blase – sie ist oft zwanzig Zeilen lang, und zwanzig
   Zeilen in einer Blase liest niemand. */
.fb-frage {
    align-self: flex-end;
    max-width: 85%;
    padding: .45rem .7rem;
    border-radius: var(--r-ctl);
    background: color-mix(in srgb, var(--btn-leucht) 12%, var(--brand-surface));
    color: var(--brand-text);
}

.fb-antwort { align-self: stretch; color: var(--brand-text); }
.fb-antwort p { margin: 0 0 .55rem; }
.fb-antwort p:last-child { margin-bottom: 0; }
.fb-antwort ul { margin: 0 0 .55rem; padding-left: 1.1rem; }
.fb-antwort li { margin-bottom: .2rem; }
.fb-antwort strong { font-weight: 600; }
.fb-antwort h4 {
    font-size: .88rem;
    font-weight: 600;
    margin: .8rem 0 .3rem;
    color: var(--brand-titel);
}
.fb-antwort h4:first-child { margin-top: 0; }
.fb-antwort a { color: var(--btn-leucht-tief); word-break: break-word; }

.fb-fehler {
    align-self: stretch;
    color: var(--btn-red-text);
    font-size: .84rem;
}

/* Die gelesenen Seiten – zugeklappt eine Zeile, aufgeklappt die Liste.
   Das ist das Protokoll und keine zweite Quellenangabe: Was er zitiert,
   schreibt er selbst unter die Antwort. */
.fb-quellen { margin-top: .4rem; font-size: .78rem; }
.fb-quellen summary {
    cursor: pointer;
    color: var(--brand-faint);
    list-style: none;
}
.fb-quellen summary::-webkit-details-marker { display: none; }
.fb-quellen summary:hover { color: var(--brand-quiet); }
.fb-quellen ul { margin: .35rem 0 0; padding-left: 1rem; }
.fb-quellen a { color: var(--brand-quiet); }

/* Während er nachschaut. Die Sekunden stehen dabei, weil zwei Minuten ohne
   Zahl wie ein Absturz aussehen. */
.fb-wartet {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--brand-quiet);
    font-size: .84rem;
}

.fb-puls {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fb-glanz, #b8763a);
    animation: fb-puls 1.4s ease-in-out infinite;
}

@keyframes fb-puls {
    0%, 100% { opacity: .35; transform: scale(.8); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

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

.fb-eingabe {
    border-top: 1px solid var(--brand-border);
    padding: .6rem .7rem .7rem;
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}

.fb-eingabe textarea {
    flex: 1 1 auto;
    resize: none;
    max-height: 140px;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: var(--brand-surface);
    color: var(--brand-text);
    padding: .45rem .6rem;
    /* Ohne diese Zeile nimmt ein <textarea> die Schreibmaschinenschrift des
       Browsers und nicht die des Hauses – aufgefallen auf der Prüfseite. */
    font-family: inherit;
    font-size: .88rem;
    line-height: 1.4;
}

.fb-eingabe textarea:focus {
    outline: none;
    border-color: var(--btn-leucht);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-leucht) 22%, transparent);
}

/* Der Sendeknopf ist .btn-primary aus 01-basis.css – Fläche, Verlauf und
   Weiß darauf kommen von dort. Hier steht nur, dass er schmal ist und nicht
   mitwächst. Ein eigener blauer Knopf wäre ein zweiter Hauptknopf im Haus
   gewesen, und ein flaches --btn-leucht trüge Weiß bei 2,6 : 1. */
.fb-senden {
    flex: 0 0 auto;
    padding: .45rem .7rem;
    line-height: 1;
}

/* Das Mikrofon (22.09.2026): freischwebend wie die Knöpfe der Kopfzeile, die
   Fläche kommt erst unter dem Zeiger. Es steht VOR dem Sendeknopf und ist
   bewusst kein zweiter Hauptknopf – abgeschickt wird rechts.

   WÄHREND ER ZUHÖRT, IST ES ROT, und zwar das Signalrot des Hauses und weder
   die Hausfarbe noch das Farbpaar der Figur: „Das Mikrofon ist offen" ist ein
   Zustand, und den erkennt man an Rot, egal bei welcher Gesellschaft. */
.fb-mikro {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--brand-quiet);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.fb-mikro svg { width: 17px; height: 17px; vertical-align: 0 !important; }
.fb-mikro:hover { background: var(--brand-row); color: var(--brand-text); }
.fb-mikro:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-leucht) 30%, transparent);
}

.fb-mikro.hoert,
.fb-mikro.hoert:hover {
    color: var(--btn-red-text);
    background: color-mix(in srgb, var(--btn-red-signal, #e5342a) 14%, transparent);
    animation: fb-hoert 1.6s ease-out infinite;
}

@keyframes fb-hoert {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--btn-red-signal, #e5342a) 45%, transparent); }
    100% { box-shadow: 0 0 0 9px transparent; }
}

.fb-hinweis {
    padding: 0 .8rem .6rem;
    font-size: .72rem;
    color: var(--brand-faint);
}
.fb-hinweis.ist-fehler { color: var(--btn-red-text); }

/* --- Kleine Bildschirme -------------------------------------------------
   Das Fenster nimmt die Breite, die Figur schrumpft. Ganz weg darf sie nicht:
   Das Dashboard wird auch auf dem Tablet bedient (tablet.css), und dort ist
   Nachschlagen eher nötig als am großen Bildschirm. */

@media (max-width: 720px) {
    .fb-figur { width: 68px; height: 68px; right: 16px; bottom: 16px; }
    .fb-name { display: none; }
    .fb-fenster {
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        bottom: 96px;
        max-height: calc(100vh - 130px);
    }
}

/* --- Weniger Bewegung ---------------------------------------------------
   Wer Bewegung abbestellt hat, bekommt das Standbild statt der Schleife. Das
   Skript hält das Video dann an; diese Regel sorgt dafür, dass auch das
   Aufziehen des Fensters und der Puls stillstehen. */

@media (prefers-reduced-motion: reduce) {
    .fb-fenster.offen { animation: none; }
    .fb-puls { animation: none; opacity: .8; }
    .fb-figur { transition: none; }
    .fb-mikro.hoert { animation: none; }
}

/* --- Die Wahl der Figur (assistent_einrichten.php) ----------------------
   Zwei Köpfe nebeneinander, angeklickt wird der Kopf und nicht ein
   Radioknopf daneben. Die Fläche entsteht erst unter dem Zeiger und bleibt
   bei der gewählten stehen – dieselbe Sprache wie bei den Wahl-Chips. */

.fb-wahl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .6rem .8rem;
    border-radius: var(--r-card);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.fb-wahl img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 22%;
    background: #0b0d12;
}

.fb-wahl-name { font-size: .86rem; font-weight: 600; color: var(--brand-text); }
.fb-wahl-farbe { font-size: .72rem; color: var(--brand-faint); }

.fb-wahl:hover { background: var(--brand-row); }

.fb-wahl.ist-gewaehlt {
    background: color-mix(in srgb, var(--btn-leucht) 10%, transparent);
    border-color: color-mix(in srgb, var(--btn-leucht) 45%, transparent);
}

.fb-wahl:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-leucht) 30%, transparent);
}

/* --- Der Kasten „Agenten jetzt anlernen" --------------------------------
   Er steht an zwei Orten (Installation und Einrichtung) und muss an beiden
   funktionieren: Die Einrichtung liegt im Look B, der Installer hat seine
   eigene Karte (install.css). Deshalb nur Tokens und keine Annahme über den
   Grund, auf dem er liegt. */

.fb-lern {
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    background: var(--brand-surface);
    padding: .9rem 1rem;
}

.fb-lern-kopf {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

.fb-lern-kopf .btn { flex: 0 0 auto; }

.fb-lern-info {
    display: block;
    margin-top: .2rem;
    font-size: .82rem;
    color: var(--brand-quiet);
    max-width: 52ch;
}

/* Die Bahn berichtet, also trägt sie Blaugrau und nicht Leuchtblau – die
   Trennung aus DESIGN.md: angefasst wird der Knopf daneben. */
.fb-lern-bahn {
    margin-top: .8rem;
    height: 6px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--btn-blue) 15%, transparent);
    overflow: hidden;
}

.fb-lern-bahn span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--btn-blue);
    transition: width .35s ease;
}

.fb-lern-stand {
    margin: .5rem 0 0;
    font-size: .82rem;
    color: var(--brand-quiet);
}
.fb-lern-stand.ist-fertig { color: var(--btn-green-text, var(--brand-text)); }
.fb-lern-stand.ist-fehler { color: var(--btn-red-text); }

.fb-lern-liste {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    font-size: .82rem;
}

.fb-lern-zeile {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .25rem 0;
    border-top: 1px solid var(--brand-border);
}
.fb-lern-zeile:first-child { border-top: 0; }

.fb-lern-thema { color: var(--brand-text); }
.fb-lern-ergebnis { color: var(--brand-faint); text-align: right; flex: 0 1 auto; }
.fb-lern-zeile.ist-ok .fb-lern-ergebnis { color: var(--brand-quiet); }
.fb-lern-zeile.ist-leer .fb-lern-ergebnis { color: var(--btn-red-text); }

@media (prefers-reduced-motion: reduce) {
    .fb-lern-bahn span { transition: none; }
}

/* Die Zeile über das mitgelieferte Verzeichnis – sie steht zwischen Stand und
   Themenliste und darf den Knopf in ihrer Mitte tragen, ohne die Zeilenhöhe
   zu sprengen. */
.fb-lern-saat {
    margin: .35rem 0 0;
    font-size: .82rem;
    color: var(--brand-quiet);
    line-height: 2;
}

/* Ein Treffer, den er gefunden, aber nie geöffnet hat – blasser als die
   gelesenen darüber. Der Unterschied zählt: Nur aus den gelesenen stammt die
   Antwort. */
.fb-quellen li.ist-treffer a { color: var(--brand-faint); }

/* --- Kurz oder gründlich ------------------------------------------------
   Zwei Wörter über dem Eingabefeld, dahinter ein Satz, der sagt, was sie
   bedeuten. Kein Segmentschalter mit gleitendem Daumen (.cal-seg): Der
   gehört an eine Bereichsleiste und wäre in einem 420 Pixel breiten Fenster
   über einem Textfeld zu laut für eine Entscheidung, die je Frage fällt. */

.fb-modus {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .7rem 0;
    flex-wrap: wrap;
}

.fb-modus-knopf {
    border: 1px solid var(--brand-border);
    background: transparent;
    color: var(--brand-quiet);
    border-radius: var(--r-pill);
    padding: .15rem .6rem;
    font-size: .78rem;
    line-height: 1.6;
    cursor: pointer;
}

.fb-modus-knopf:hover { background: var(--brand-row); color: var(--brand-text); }

/* Angefasst wird hier, also Leuchtblau – die Trennung aus DESIGN.md. */
.fb-modus-knopf.ist-gewaehlt {
    background: color-mix(in srgb, var(--btn-leucht) 12%, transparent);
    border-color: color-mix(in srgb, var(--btn-leucht) 45%, transparent);
    color: var(--btn-leucht-tief);
    font-weight: 600;
}

.fb-modus-info {
    font-size: .72rem;
    color: var(--brand-faint);
    flex: 1 1 100%;
}