/* ContForm — Dialog-Modus: das Formular als Frage-und-Antwort-Verlauf.
   Lädt nach base.css und form.css. Die Farben folgen der Akzentfarbe des
   Formulars (--accent), damit der Dialog zur übrigen Gestaltung passt.

   Aufbau: Kopfzeile (Avatar, Name, Status) · Verlauf · Auswahlreihe ·
   Eingabezeile. Das klassische Formular bleibt im Markup, wird aber
   ausgeblendet — ohne JavaScript erscheint es wieder und funktioniert. */

.bchat-page .bform-card {
  --bchat-bg: var(--card);
  --bchat-ink: var(--ink);
  --bchat-soft: var(--ink-soft);
  --bchat-line: var(--line);
  --bchat-bubble: var(--paper);
  /* Der Bogen am Kartenkopf fällt flacher aus als im klassischen Formular:
     darunter beginnt schon die Kopfzeile mit dem Zeichen. */
  --bf-arc: 8px;

  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  max-height: min(78svh, 720px);
}
.bchat-page.bform-embed .bform-card { max-height: none; }

/* Dunkle Variante — dieselbe Anordnung, ruhigerer Hintergrund */
.bchat-dark .bform-card {
  --bchat-bg: #14171a;
  --bchat-ink: #ECEFEA;
  --bchat-soft: #9AA3A0;
  --bchat-line: #262B2E;
  --bchat-bubble: #1D2225;
  background: var(--bchat-bg);
  color: var(--bchat-ink);
  border-color: #262B2E;
  /* nur die Karte, nicht die ganze Seite: Bildlaufleiste und Systemfenster im
     Dialog folgen dem dunklen Grund, das helle Papier ringsum bleibt hell */
  color-scheme: dark;
}

/* Titel und Beschreibung führen in den Dialog ein (sichtbar nur ohne
   JavaScript — sonst übernimmt die Kopfzeile) */
.bchat-page .bform__title {
  font-size: calc(clamp(1.15rem, 3.2vw, 1.35rem) * var(--titel-scale, 1));
  margin: 0;
  padding: clamp(14px, 3vw, 18px) clamp(16px, 4vw, 22px) 0;
  color: var(--bchat-ink);
}
.bchat-page .bform__desc {
  margin: .25em 0 0;
  padding: 0 clamp(16px, 4vw, 22px);
  font-size: .92rem;
  color: var(--bchat-soft);
}

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

.bchat__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 22px);
  border-bottom: 1px solid var(--bchat-line);
  order: -1;                       /* steht immer ganz oben */
}
/* Das Zeichen: kein Kreis mit Buchstabe, sondern eine Punze — ein geprägtes
   Feld, wie es in Papier oder Metall geschlagen wird. Die Ecke folgt der
   gewählten Eckenform (--radius-m), die Lichtkante oben und der farbige
   Schatten unten geben ihm Dicke. Ein Element, zwei Lagen Licht. */
.bchat__ava {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-m);
  background: var(--accent);
  background-image: linear-gradient(
    160deg,
    color-mix(in srgb, #fff 14%, transparent),
    transparent 62%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1;
  letter-spacing: .01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 3px 8px -4px color-mix(in srgb, var(--accent) 85%, transparent);
}
.bchat__who { display: flex; flex-direction: column; min-width: 0; gap: .12rem; }
.bchat__name {
  font-family: var(--font-display);
  font-weight: var(--titel-weight, 650);
  font-size: 1.02rem;
  letter-spacing: -.012em;
  color: var(--bchat-ink);
}
.bchat__stat {
  display: flex;
  align-items: center;
  gap: .45em;
  font-family: var(--font-mono);
  font-size: max(.72rem, 12px);
  letter-spacing: .05em;
  color: color-mix(in srgb, var(--accent) 88%, var(--bchat-soft));
}
.bchat__stat i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3FBF6A;
  box-shadow: 0 0 0 3px color-mix(in srgb, #3FBF6A 18%, transparent);
  flex: 0 0 auto;
}

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

.bchat__body {
  flex: 1 1 auto;
  min-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(14px, 3.5vw, 20px) clamp(16px, 4vw, 22px);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  /* schmale, farblich eingepasste Bildlaufleiste statt der Systemleiste */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--bchat-soft) 42%, transparent) transparent;
  /* Bewusst ohne weiches Scrollen: Der Verlauf wird nach jeder Nachricht
     mehrfach ans Ende geführt, und eine laufende Scroll-Animation würde
     dabei gegen die nächste arbeiten. */
  scroll-behavior: auto;
}

/* Sprechblasen: die Rundung folgt der gewählten Eckenform, die angesetzte
   Ecke bleibt immer die kleinere — daran erkennt man, wer spricht, auch wenn
   die Farben einmal blass ausfallen. */
.bmsg {
  --bmsg-eck: var(--radius-l, 16px);
  max-width: min(85%, 34rem);
  padding: .68em .95em;
  border-radius: var(--bmsg-eck);
  font-size: .96rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-line;
  animation: bmsg-auf .26s var(--ease) both;
}
@keyframes bmsg-auf {
  from { opacity: 0; transform: translateY(7px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bmsg { animation: none; }
}
.bmsg--bot {
  align-self: flex-start;
  background: var(--bchat-bubble);
  color: var(--bchat-ink);
  border: 1px solid var(--bchat-line);
  border-bottom-left-radius: min(5px, var(--bmsg-eck));
  box-shadow: 0 1px 2px -1px rgba(27, 32, 29, .1);
}
.bmsg--user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: min(5px, var(--bmsg-eck));
  box-shadow: 0 2px 8px -5px color-mix(in srgb, var(--accent) 90%, transparent);
}
.bmsg--hint {
  align-self: flex-start;
  background: none;
  border: none;
  box-shadow: none;
  padding: .1em .2em;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--bchat-soft);
}
.bmsg--fehler {
  align-self: flex-start;
  background: var(--red-tint);
  border-color: var(--red);
  border-left: 3px solid var(--red);
  color: var(--red);
  font-weight: 600;
  box-shadow: none;
}
/* Zusammenfassung am Ende */
.bmsg dl { margin: .4rem 0 0; display: grid; gap: .3rem; }
.bmsg dt {
  font-family: var(--font-mono);
  font-size: max(.7rem, 11.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bchat-soft);
}
.bmsg dd { margin: 0 0 .2rem; }

/* Tipp-Punkte, solange die nächste Frage „geschrieben" wird */
.btyping {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: .85em .95em;
  background: var(--bchat-bubble);
  border: 1px solid var(--bchat-line);
  border-radius: var(--radius-l, 16px);
  border-bottom-left-radius: min(5px, var(--radius-l, 16px));
  box-shadow: 0 1px 2px -1px rgba(27, 32, 29, .1);
  animation: bmsg-auf .26s var(--ease) both;
}
.btyping i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bchat-soft);
  animation: btip 1.25s infinite var(--ease);
}
.btyping i:nth-child(2) { animation-delay: .16s; }
.btyping i:nth-child(3) { animation-delay: .32s; }
@keyframes btip {
  0%, 62%, 100% { opacity: .28; transform: none; }
  31%           { opacity: .9;  transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .btyping { animation: none; }
  .btyping i { animation: none; opacity: .55; }
}

/* ---------------------------------------------------------- Auswahlreihe */

.bchat__quick {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0 clamp(16px, 4vw, 22px);
}
.bchat__quick:empty { display: none; }
.bchat__quick + .bchat__foot { margin-top: .7rem; }

/* Antwortmarken: in Ruhe eine Kontur mit einem Hauch Farbe darin, beim Zeigen
   voll gefüllt. Die Ecke folgt der Knopfform der Vorlage. */
.bchip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;
  padding: .45em 1.05em;
  border: 1.5px solid color-mix(in srgb, var(--accent) 58%, transparent);
  border-radius: var(--knopf-radius, 999px);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent);
  font: 600 .93rem/1.25 var(--font-body);
  letter-spacing: -.004em;
  cursor: pointer;
  transition:
    background-color .16s var(--ease),
    border-color .16s var(--ease),
    color .16s var(--ease),
    transform .1s var(--ease);
}
.bchip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.bchip:active { transform: translateY(1px); }
.bchip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* „Weiter" ist ein Vorschlag, kein Befehl: gestrichelt, ohne Füllung */
.bchip--weiter {
  border-style: dashed;
  background: none;
}
.bchip--still {
  border-color: var(--bchat-line);
  background: none;
  color: var(--bchat-soft);
}
.bchip--still:hover { background: var(--bchat-line); color: var(--bchat-ink); }
/* Sternmarken tragen dasselbe Gold wie die Sterne im klassischen Formular.
   Gemischt wird mit der Schriftfarbe des Dialogs, nicht mit der der Seite:
   im dunklen Dialog auf hellem Papier wird das Gold heller, nicht dunkler. */
.bchip--stern,
.bchip__stern {
  font-size: 1.05em;
  line-height: 1;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--marker) 74%, var(--bchat-ink));
}

/* --------------------------------------------------------- Eingabezeile */

.bchat__foot {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 22px);
  border-top: 1px solid var(--bchat-line);
}
.bchat__foot[hidden] { display: none; }
.bchat__input {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 1rem/1.4 var(--font-body);
  color: var(--bchat-ink);
  background: var(--bchat-bubble);
  border: 1.5px solid var(--bchat-line);
  border-radius: var(--knopf-radius, 999px);   /* folgt der Eckenform der Vorlage */
  padding: .7em 1.05em;
  resize: none;
  transition:
    border-color .18s var(--ease),
    box-shadow .18s var(--ease);
}
.bchat__input::placeholder {
  color: color-mix(in srgb, var(--bchat-soft) 88%, transparent);
}
.bchat__input[hidden] { display: none; }
/* Mehrzeiliges Feld für Langtext-Fragen: kein Pillenrand, der bei mehreren
   Zeilen ins Leere liefe */
.bchat__area {
  border-radius: var(--radius-l, 16px);
  min-height: 3.4em;
  max-height: 40svh;
  line-height: 1.45;
  resize: vertical;
}
/* Datei-Chip ist ein <label> — der Browser öffnet den Dateidialog selbst */
.bchip--datei { cursor: pointer; }
.bchat__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.bchat__send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 2px 8px -4px color-mix(in srgb, var(--accent) 85%, transparent);
  transition:
    background-color .16s var(--ease),
    box-shadow .16s var(--ease),
    transform .1s var(--ease);
}
.bchat__send svg { width: 19px; height: 19px; }
.bchat__send:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--ink));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 4px 12px -4px color-mix(in srgb, var(--accent) 85%, transparent);
}
.bchat__send:active { transform: translateY(1px); }
.bchat__send[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Fortschritt: ein Haarstrich unter der Kopfzeile. Er füllt sich von links und
   endet abgerundet — wie ein Bleistiftstrich, der noch weiterläuft. */
.bchat__fort {
  height: 2px;
  background: var(--bchat-line);
  order: -1;
}
.bchat__fort span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 999px 999px 0;
  background: var(--accent);
  transition: width .4s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .bchat__fort span { transition: none; }
}

/* ------------------------------------------ Klassisches Formular im Dialog */

/* Sobald chat.js läuft, verschwindet das eigentliche Formular aus dem Bild —
   es bleibt aber im Markup und trägt die Werte, die abgeschickt werden.
   Ohne JavaScript greift diese Regel nie, dann sieht man das normale Formular.

   :not(.bchat__foot) ist zwingend: Die Eingabezeile des Dialogs ist selbst ein
   <form> in derselben Karte und wurde sonst gleich mit versteckt — der Dialog
   endete dann in einer Sackgasse, sobald eine Frage getippt werden sollte. */
.bchat-page.bchat-aktiv .bform-card > form:not(.bchat__foot) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.bchat-page.bchat-aktiv .bform__title,
.bchat-page.bchat-aktiv .bform__desc { display: none; }

/* Datei-Auswahl im Dialog: der Knopf sitzt in der Auswahlreihe */
.bchat__datei { display: none; }