/**
 * @file css/redesign/chatbox.css - Feedback-Welle WF-1
 *
 * Schwebender Chat-Knopf und Chat-Panel des regelbasierten Prototyps
 * (js/feb-chatbox.js). Kundenanmerkung 20260820-ade04e77: der
 * Back-to-top-Knopf entfaellt, an seine Stelle tritt eine Chatbox.
 *
 * Regeln des Designsystems, die hier gelten:
 *   - Radius 0 (--feb-radius), ausnahmslos. Die einzige erlaubte
 *     Ausnahme im System ist der runde Video-Pausenknopf; ein Chat ist
 *     keine Player-Bedienung und bleibt deshalb rechteckig.
 *   - KEINE Verlaeufe. Alle Flaechen sind flach.
 *   - Der Akzent #006ABC bleibt der Primaeraktion vorbehalten. Genau
 *     eine Flaeche traegt ihn: der Senden-Knopf im Eingabefeld.
 *     Kopfzeile, Knopf, Chips und Nachrichten bleiben monochrom.
 *   - Fokusring monochrom, 2 px, 2 px Offset (--feb-focus-*), auf
 *     dunklem Grund die inverse Variante.
 *   - Der einzige Schatten ist --feb-shadow-overlay. Das Panel ist ein
 *     ueber der Seite stehendes Overlay und damit einer der zulaessigen
 *     Faelle.
 *
 * Position: unten RECHTS. Der Video-Pausenknopf der Heros sitzt unten
 * links (.brm-hero__mediatoggle in media.css) - die beiden kommen sich
 * nicht ins Gehege. Der Stapelwert 55 liegt knapp ueber der Kopfzeile
 * (50) und unter Overlay (60), Offcanvas (70) und Suchmodal: oeffnet
 * sich das Mobilmenue oder die Suche, liegt die Chatbox darunter.
 * Auf breiten Fenstern beruehrt das Panel die Kopfzeile ohnehin nicht,
 * weil seine Hoehe auf calc(100vh - 14rem) gedeckelt ist.
 *
 * Kontraste (Weiss = #FFF, Ink = #0B0D0E):
 *   Weiss auf Ink                   19,48:1   Knopf, Kopfzeile, eigene Nachricht
 *   grey-300 (#B0B5BA) auf Ink       9,43:1   Hinweiszeile im Kopf
 *   Ink auf grey-50 (#F4F5F6)       18,3 :1   Antworttext
 *   Weiss auf Akzent (#006ABC)       5,54:1   Senden-Knopf
 *   grey-500 (#666C72) auf Weiss     5,31:1   Platzhaltertext
 *
 * Ladereihenfolge: nach suche.css, siehe libraries.yml. Die Datei
 * ueberschreibt nichts aus den vorherigen Ebenen; alle Selektoren
 * beginnen mit .feb-chat.
 */

/* ============================================================
   1. Wurzel und schwebender Knopf
   ============================================================ */

.feb-chat {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  /* Der tatsaechliche Stapel des Redesigns steht in header-footer.css:
     Kopfzeile 50, Overlay 60, Offcanvas 70; das Suchmodal liegt mit
     --feb-z-modal darueber. 55 setzt die Chatbox knapp ueber die
     Kopfzeile - noetig, weil das Panel auf schmalen Geraeten
     vollflaechig wird und dann auch die Kopfzeile verdecken muss - und
     zugleich unter Mobilmenue und Suchmodal. Die --feb-z-*-Token bilden
     diesen Stapel nicht ab und sind hier deshalb bewusst nicht
     verwendet. */
  z-index: 55;

  /* column-reverse dreht die Baumreihenfolge (Knopf, dann Panel) in die
     gewuenschte Optik um: Panel oben, Knopf unten. Der Tabfluss bleibt
     dabei Ausloeser -> Panel. */
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--feb-space-3, 0.75rem);

  font-family: var(--feb-font-sans, "Inter", sans-serif);
}

.feb-chat__launcher {
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;   /* 52 px - ueber der 44-px-Mindestgroesse */
  height: 3.25rem;
  padding: 0;

  border: var(--feb-hairline-width, 1px) solid var(--feb-ink, #0B0D0E);
  border-radius: var(--feb-radius, 0);
  background-color: var(--feb-ink, #0B0D0E);
  color: var(--feb-white, #FFFFFF);
  cursor: pointer;

  -webkit-appearance: none;
  appearance: none;
  box-shadow: var(--feb-shadow-overlay, 0 24px 64px rgba(11, 13, 14, 0.28));

  transition:
    background-color var(--feb-dur-base, 180ms) var(--feb-ease, ease),
    border-color var(--feb-dur-base, 180ms) var(--feb-ease, ease);
}

.feb-chat__launcher:hover {
  background-color: var(--feb-grey-800, #1F2326);
  border-color: var(--feb-grey-800, #1F2326);
}

.feb-chat__launcher:focus-visible {
  outline: var(--feb-focus-width, 2px) solid var(--feb-focus, #0B0D0E);
  outline-offset: var(--feb-focus-offset, 2px);
}

.feb-chat__launcher svg {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
}

/* ============================================================
   2. Panel
   ============================================================ */

.feb-chat__panel[hidden] {
  display: none;
}

.feb-chat__panel {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  width: min(23.75rem, calc(100vw - 2rem));
  /* 34rem: Kopf (rund 5,5rem), sechs Chips in vier Reihen (11rem),
     Eingabezeile (3rem) und ein Verlauf, der noch zwei Antworten ohne
     Scrollen zeigt.
     Der zweite Wert haelt das Panel unterhalb der fixierten Kopfzeile:
     124 px Kopfzeile + 52 px Knopf + Abstaende ergeben rund 14rem, die
     oben und unten frei bleiben muessen. */
  height: min(34rem, calc(100vh - 14rem));
  overflow: hidden;

  border: var(--feb-hairline-width, 1px) solid var(--feb-ink, #0B0D0E);
  border-radius: var(--feb-radius, 0);
  background-color: var(--feb-white, #FFFFFF);
  box-shadow: var(--feb-shadow-overlay, 0 24px 64px rgba(11, 13, 14, 0.28));
}

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

.feb-chat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--feb-space-3, 0.75rem);
  flex: 0 0 auto;

  padding: var(--feb-space-4, 1rem);
  background-color: var(--feb-ink, #0B0D0E);
  color: var(--feb-white, #FFFFFF);
}

.feb-chat__headtext {
  min-width: 0;
}

.feb-chat__title {
  margin: 0;
  font-size: var(--feb-fs-h6, 0.9375rem);
  font-weight: var(--feb-fw-semibold, 600);
  line-height: var(--feb-lh-snug, 1.35);
  letter-spacing: 0;
  color: var(--feb-white, #FFFFFF);
}

/* Die dauerhafte Kennzeichnung als automatischer Assistent. Bewusst
   klein und in grey-300 - sichtbar, aber nicht als Werbung gesetzt. */
.feb-chat__note {
  margin: var(--feb-space-1, 0.25rem) 0 0;
  font-size: var(--feb-fs-xs, 0.8125rem);
  line-height: var(--feb-lh-snug, 1.35);
  color: var(--feb-grey-300, #B0B5BA);
}

.feb-chat__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin: -0.25rem -0.25rem 0 0;

  border: 0;
  border-radius: var(--feb-radius, 0);
  background-color: transparent;
  color: var(--feb-white, #FFFFFF);
  cursor: pointer;

  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--feb-dur-fast, 120ms) var(--feb-ease, ease);
}

.feb-chat__close:hover {
  background-color: var(--feb-grey-800, #1F2326);
}

.feb-chat__close:focus-visible {
  outline: var(--feb-focus-width, 2px) solid var(--feb-focus-inverse, #FFFFFF);
  outline-offset: var(--feb-focus-offset, 2px);
}

.feb-chat__close svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

/* ============================================================
   3. Nachrichtenverlauf
   ============================================================ */

.feb-chat__log {
  /* Basis 0, nicht auto: mit auto ginge die (mit dem Verlauf wachsende)
     Inhaltshoehe in die Flex-Rechnung ein, das negative Restmass wuerde
     anteilig verteilt und die Chipleiste mit dem Gespraech schrumpfen.
     Mit Basis 0 nimmt der Verlauf genau den Rest und laesst Kopf,
     Chips und Eingabezeile unangetastet.
     min-height: 0 ist in einer Flex-Spalte Pflicht, sonst weigert sich
     ein scrollender Bereich, unter seine Inhaltshoehe zu schrumpfen. */
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--feb-space-3, 0.75rem);

  padding: var(--feb-space-4, 1rem);
  background-color: var(--feb-white, #FFFFFF);
}

/* Der Bereich scrollt und traegt deshalb tabindex="0" im Skript. Der
   Fokusring liegt innen, damit er nicht unter die Kopfzeile rutscht. */
.feb-chat__log:focus-visible {
  outline: var(--feb-focus-width, 2px) solid var(--feb-focus, #0B0D0E);
  outline-offset: calc(var(--feb-focus-offset, 2px) * -1);
}

.feb-chat__msg {
  max-width: 90%;
  padding: var(--feb-space-3, 0.75rem);
  border-radius: var(--feb-radius, 0);
}

.feb-chat__msg--bot {
  align-self: flex-start;
  background-color: var(--feb-grey-50, #F4F5F6);
  border-left: 2px solid var(--feb-ink, #0B0D0E);
  color: var(--feb-text, #0B0D0E);
}

/* Die eigene Nachricht steht rechts und invers - so bleibt der Verlauf
   ohne Farbe lesbar, allein ueber Position und Helligkeit. */
.feb-chat__msg--ich {
  align-self: flex-end;
  background-color: var(--feb-ink, #0B0D0E);
  color: var(--feb-text-inverse, #FFFFFF);
}

.feb-chat__text {
  margin: 0;
  font-size: var(--feb-fs-sm, 0.875rem);
  line-height: var(--feb-lh-body, 1.65);
  color: inherit;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---- Verweise unter einer Antwort -------------------------------- */

.feb-chat__links {
  list-style: none;
  margin: var(--feb-space-3, 0.75rem) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--feb-space-1, 0.25rem);
}

.feb-chat__link {
  display: inline-block;
  font-size: var(--feb-fs-sm, 0.875rem);
  font-weight: var(--feb-fw-medium, 500);
  line-height: var(--feb-lh-snug, 1.35);
  color: var(--feb-ink, #0B0D0E);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.feb-chat__link:hover {
  text-decoration-thickness: 2px;
  color: var(--feb-ink, #0B0D0E);
}

.feb-chat__link:focus-visible {
  outline: var(--feb-focus-width, 2px) solid var(--feb-focus, #0B0D0E);
  outline-offset: var(--feb-focus-offset, 2px);
}

/* ---- Schreibanzeige ---------------------------------------------- */

.feb-chat__typing {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: var(--feb-space-3, 0.75rem);
}

.feb-chat__dot {
  width: 0.3125rem;
  height: 0.3125rem;
  background-color: var(--feb-grey-500, #666C72);
  opacity: 0.35;
}

/* ============================================================
   4. Schnellauswahl
   ============================================================ */

.feb-chat__chips {
  /* 0 1 auto: die Chipleiste darf schrumpfen, wenn das Panel niedrig
     ist - sonst schoebe sie die Eingabezeile aus dem Panel. Sie scrollt
     dann intern und behaelt mindestens eine Reihe. */
  flex: 0 1 auto;
  min-height: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--feb-space-2, 0.5rem);

  padding: var(--feb-space-3, 0.75rem) var(--feb-space-4, 1rem);
  border-top: var(--feb-hairline-width, 1px) solid var(--feb-border, #D3D6D9);
  background-color: var(--feb-surface-muted, #F4F5F6);

  /* 11rem fasst alle sechs Chips in vier Reihen. Nur wenn das Panel
     wegen eines niedrigen Fensters schrumpft, wird hier gescrollt. */
  max-height: 11rem;
  overflow-y: auto;
}

.feb-chat__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.3125rem var(--feb-space-3, 0.75rem);

  border: var(--feb-hairline-width, 1px) solid var(--feb-border-strong, #8A9096);
  border-radius: var(--feb-radius, 0);
  background-color: var(--feb-white, #FFFFFF);
  color: var(--feb-text, #0B0D0E);

  font-family: inherit;
  font-size: var(--feb-fs-xs, 0.8125rem);
  font-weight: var(--feb-fw-medium, 500);
  line-height: var(--feb-lh-tight, 1.45);
  text-align: left;
  cursor: pointer;

  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color var(--feb-dur-fast, 120ms) var(--feb-ease, ease),
    border-color var(--feb-dur-fast, 120ms) var(--feb-ease, ease);
}

.feb-chat__chip:hover {
  background-color: var(--feb-grey-100, #E8EAEC);
  border-color: var(--feb-ink, #0B0D0E);
}

.feb-chat__chip:focus-visible {
  outline: var(--feb-focus-width, 2px) solid var(--feb-focus, #0B0D0E);
  outline-offset: var(--feb-focus-offset, 2px);
}

/* ============================================================
   5. Eingabe
   ============================================================ */

.feb-chat__form {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0;

  border-top: var(--feb-hairline-width, 1px) solid var(--feb-border, #D3D6D9);
  background-color: var(--feb-white, #FFFFFF);
}

.feb-chat__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 3rem;
  padding: 0 var(--feb-space-4, 1rem);

  border: 0;
  border-radius: var(--feb-radius, 0);
  background-color: var(--feb-white, #FFFFFF);
  color: var(--feb-text, #0B0D0E);

  font-family: inherit;
  font-size: var(--feb-fs-sm, 0.875rem);
  line-height: 1.4;

  -webkit-appearance: none;
  appearance: none;
}

.feb-chat__input::placeholder {
  color: var(--feb-text-muted, #666C72);
  opacity: 1;
}

.feb-chat__input:focus-visible {
  outline: var(--feb-focus-width, 2px) solid var(--feb-focus, #0B0D0E);
  outline-offset: calc(var(--feb-focus-offset, 2px) * -1);
}

/* Die EINZIGE Akzentflaeche der Chatbox: die Primaeraktion. */
.feb-chat__send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;

  border: 0;
  border-radius: var(--feb-radius, 0);
  background-color: var(--feb-accent, #006ABC);
  color: var(--feb-on-accent, #FFFFFF);
  cursor: pointer;

  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--feb-dur-fast, 120ms) var(--feb-ease, ease);
}

.feb-chat__send:hover {
  background-color: var(--feb-accent-hover, #0065B3);
}

.feb-chat__send:active {
  background-color: var(--feb-accent-active, #0061AC);
}

.feb-chat__send:focus-visible {
  outline: var(--feb-focus-width, 2px) solid var(--feb-focus, #0B0D0E);
  outline-offset: calc(var(--feb-focus-offset, 2px) * -1);
}

.feb-chat__send svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

/* ============================================================
   6. Schmale und flache Viewports
   ------------------------------------------------------------
   Unter 36rem Breite - und ebenso auf sehr flachen Fenstern, etwa im
   Querformat des Telefons - wird das Panel vollflaechig. Der Knopf
   bleibt im Baum (der Fokus kehrt beim Schliessen auf ihn zurueck),
   liegt aber mit z-index 1 unter dem Panel und ist damit verdeckt.
   ============================================================ */

@media (max-width: 36rem), (max-height: 30rem) {
  .feb-chat__panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
  }

  .feb-chat__log {
    padding: var(--feb-space-4, 1rem) var(--feb-space-4, 1rem)
      var(--feb-space-5, 1.5rem);
  }

  .feb-chat__msg {
    max-width: 95%;
  }

  .feb-chat__chips {
    max-height: 7.5rem;
  }
}

/* ============================================================
   7. Bewegung und Druck
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .feb-chat__dot {
    animation: feb-chat-dot 1.2s var(--feb-ease, ease) infinite;
  }

  .feb-chat__dot:nth-child(2) {
    animation-delay: 0.15s;
  }

  .feb-chat__dot:nth-child(3) {
    animation-delay: 0.3s;
  }
}

@keyframes feb-chat-dot {
  0%, 60%, 100% { opacity: 0.25; }
  30%           { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .feb-chat__launcher,
  .feb-chat__close,
  .feb-chat__chip,
  .feb-chat__send {
    transition: none;
  }
}

/* Ein schwebender Chat hat auf Papier nichts zu suchen. */
@media print {
  .feb-chat {
    display: none !important;
  }
}