/* Chat-Assistent — ergänzt die bestehenden Panel-Klassen (.cp/.ch/.cb/.cf)
   aus dem Inline-Stylesheet. Nutzt dieselben Design-Tokens, damit das Widget
   nicht wie ein Fremdkörper wirkt. */

/* Höhe -------------------------------------------------------------------- */

/* Das Panel hängt unten rechts und wächst mit dem Verlauf nach oben. Ohne
   Deckel läuft seine Kopfzeile auf kurzen Bildschirmen über den oberen Rand
   hinaus — samt Schließen-Knopf, der Chat lässt sich dann nicht mehr zumachen
   (auf 375x667 gemessen: 56px außerhalb).

   Deshalb bekommt das Panel selbst das Höhenlimit, und der Verlauf schrumpft
   als einziger flexibler Teil. `min-height: 0` ist dabei nicht optional: ohne
   sie weigert sich ein Flex-Kind, unter seine Inhaltshöhe zu schrumpfen, und
   der Deckel bliebe wirkungslos.

   Der Deckel besteht aus zwei Grenzen zugleich: dem Bildschirm und einem festen
   Maximum. Ohne das feste Maximum wächst das Panel auf großen Bildschirmen bis
   fast nach oben durch und verdeckt die Kopfzeile der Seite — Sprachumschalter
   und „Demo anfragen" inbegriffen.

   Die Selektoren sind auf #cp gehängt, weil diese Datei vor dem Inline-
   Stylesheet der Seite geladen wird — über die ID gewinnen sie trotzdem. */

#cp {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  max-height: min(calc(100dvh - 48px), 620px); /* dvh: ohne Browserleisten mobil */
}

#cp .ch,
#cp .cacts,
#cp .cform,
#cp .cf { flex: 0 0 auto; }

#cp .cb {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* 18px reichten auf 375x667 um zwei Pixel nicht — die Begrüßung wurde unten
     angeschnitten und sah nach einem Fehler aus, obwohl der Verlauf scrollt. */
  gap: 13px;
}

#cp .clog {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

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

.clog {
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}

.cm {
  font-size: 0.9rem;
  line-height: 1.55;
  padding: 12px 15px;
  max-width: 88%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cm.bot {
  background: var(--cream);
  border-radius: var(--r-m) var(--r-m) var(--r-m) 5px;
  align-self: flex-start;
}

.cm.user {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-m) var(--r-m) 5px var(--r-m);
  align-self: flex-end;
}

.cm.err {
  background: #fdf2f2;
  border: 1px solid #f0d4d4;
  color: #8a2b2b;
  border-radius: var(--r-m);
  align-self: flex-start;
}

/* Vorschlagsfragen --------------------------------------------------------- */

/* Als umbrechende Pillen sahen die fünf Fragen unruhig aus: unterschiedlich
   breit, unterschiedlich viele pro Zeile, die letzte allein. Eine Liste mit
   bündiger linker Kante liest sich ruhiger — man springt eine Spalte hinunter
   statt über ein Feld.

   Damit das nicht die Höhe der alten breiten Zeilen zurückholt, sind sie
   schmaler gehalten: kein Pfeil, weniger Innenabstand, kleinere Schrift.
   Rund 34px je Zeile statt 52px. */

.cchips {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
}

.cchip {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.cchip::before {
  content: "→";
  color: var(--ink-soft);
  margin-right: 9px;
  font-size: 0.8em;
  transition: color 0.18s;
}

.cchip:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.cchip:hover::before { color: var(--accent); }

.cchip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* Auf niedrigen Fenstern — ein halbhoher Desktop-Browser, ein Laptop mit
   geöffneter Konsole — bleibt nach Kopfzeile, Fragen und Eingabe zu wenig für
   die Begrüßung übrig, und die trägt den Hinweis, dass hier eine KI antwortet.
   Der lässt sich nicht anschneiden. Also überall ein paar Pixel abgeben. */

@media (max-height: 700px) {
  #cp .cb { gap: 9px; padding: 14px 18px; }
  .cchips { padding: 3px 0; margin-bottom: 6px; }
  .cchip { padding: 5px 10px; font-size: 0.82rem; }
  #cp .cf { padding: 10px 18px; }
}

/* Tipp-Indikator ----------------------------------------------------------- */

.ctyping {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 2px 0;
}

.ctyping i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: 0.45;
  animation: cblink 1.25s infinite ease-in-out;
}

.ctyping i:nth-child(2) { animation-delay: 0.18s; }
.ctyping i:nth-child(3) { animation-delay: 0.36s; }

@keyframes cblink {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 0.85; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .ctyping i { animation: none; opacity: 0.5; }
}

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

.cform {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

.cform textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  max-height: 96px;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.2s;
}

.cform textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.cform textarea:disabled { background: var(--cream); cursor: not-allowed; }

.csend {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--ease), opacity 0.2s;
}

.csend:hover:not(:disabled) { transform: scale(1.06); }
.csend:disabled { opacity: 0.4; cursor: not-allowed; }

/* Der Assistent ist eine KI — das steht sichtbar in der Fußzeile,
   nicht im Kleingedruckten. */
.cf .cai {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cf .cai::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}