/* ============================================================
   Reise-Chat — Schritt 31
   Nutzt die Farbvariablen aus 4myvip-reise.css, genau wie
   concierge.css. Keine neuen Schriftarten: Arial und Georgia,
   die schon im Auftritt stecken.
   ============================================================ */

.chat {
  max-width: 52rem;
  margin: 0 auto;
}

/* ---------- Kopf ---------- */

.ch-kopf {
  margin: 0 0 1.5rem;
}

.ch-kopf__titel {
  font-family: Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  color: var(--text, #1b1b1e);
}

.ch-kopf__text {
  margin: 0;
  color: var(--text-muted, #5f5e5e);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Zustandszeile ---------- */

.ch-zustand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--outline, #c1c6d7);
  border-radius: 0.6rem;
  background: var(--vip-blue-pale, #d8e2ff);
  font-size: 0.85rem;
  color: var(--text, #1b1b1e);
}

.ch-zustand--fehler {
  background: #fdecec;
  border-color: #e3b5b5;
}

.ch-zustand__punkt {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--vip-blue, #0058bc);
}

.ch-zustand--fehler .ch-zustand__punkt { background: #b32020; }

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

.ch-verlauf {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1.25rem;
}

.ch-blase {
  max-width: 100%;
  padding: 0.85rem 1.05rem;
  /* 18px ist der Radius von .card in 4myvip-reise.css. Damit sitzt die
     Sprechblase im gleichen Formenkanon wie alle anderen Kaesten der
     Seite und nicht in einem eigenen. */
  border-radius: 18px;
  line-height: 1.65;
  font-size: 0.95rem;
}

.ch-blase--frage {
  align-self: flex-end;
  max-width: 85%;
  background: var(--vip-blue, #0058bc);
  color: #fff;
  border-bottom-right-radius: 0.35rem;
}

.ch-blase--antwort {
  align-self: flex-start;
  background: var(--surface, #fff);
  /* Linie und Schatten wie .card: die harte Linie --outline ist fuer
     Eingabefelder gedacht und wirkt an einer grossen Flaeche zu schwer. */
  border: 1px solid rgba(0, 26, 65, 0.1);
  box-shadow: 0 8px 22px rgba(0, 44, 105, 0.07);
  border-bottom-left-radius: 0.35rem;
}

.ch-blase--hinweis {
  align-self: stretch;
  background: transparent;
  border: 1px dashed var(--outline, #c1c6d7);
  color: var(--text-muted, #5f5e5e);
  font-size: 0.88rem;
}

/* Der Vorspann der Antwort, zum Beispiel
   „Ganz genau finde ich dazu nichts." */
.ch-vorspann {
  margin: 0 0 0.9rem;
}

/* ---------- Ein Ziel in der Antwort ---------- */

.ch-ziel {
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--outline, #c1c6d7);
  margin-top: 0.8rem;
}

.ch-ziel:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.ch-ziel__name {
  font-family: Georgia, serif;
  font-size: 1.05rem;
  margin: 0 0 0.15rem;
}

.ch-ziel__name a {
  color: var(--vip-blue, #0058bc);
  text-decoration: none;
}

.ch-ziel__name a:hover,
.ch-ziel__name a:focus-visible { text-decoration: underline; }

.ch-ziel__wo {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted, #5f5e5e);
}

.ch-ziel__satz {
  margin: 0 0 0.5rem;
}

.ch-ziel__satz:last-child { margin-bottom: 0; }

/* ---------- Herkunftshinweis ---------- */

.ch-herkunft {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--outline, #c1c6d7);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-muted, #5f5e5e);
}

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

.ch-eingabe {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
}

.ch-eingabe__feld {
  flex: 1 1 auto;
  min-height: 2.9rem;
  max-height: 8rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--outline, #c1c6d7);
  border-radius: 0.6rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  background: var(--surface, #fff);
  color: var(--text, #1b1b1e);
}

.ch-eingabe__feld:focus-visible {
  outline: 2px solid var(--vip-blue, #0058bc);
  outline-offset: 1px;
}

.ch-eingabe__knopf {
  flex: 0 0 auto;
  min-height: 2.9rem;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 0.6rem;
  background: var(--vip-blue, #0058bc);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  cursor: pointer;
}

.ch-eingabe__knopf:hover:not(:disabled) { background: var(--vip-blue-bright, #0070eb); }

.ch-eingabe__knopf:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ch-zaehler {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted, #5f5e5e);
  text-align: right;
}

/* ---------- Vorschlaege ---------- */

.ch-vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.ch-vorschlag {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--outline, #c1c6d7);
  border-radius: 999px;
  background: var(--surface, #fff);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  color: var(--vip-blue, #0058bc);
  cursor: pointer;
}

.ch-vorschlag:hover { background: var(--vip-blue-pale, #d8e2ff); }

/* ---------- Warten ---------- */

.ch-punkte {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

.ch-punkte span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--text-muted, #5f5e5e);
  animation: ch-huepf 1.1s infinite ease-in-out;
}

.ch-punkte span:nth-child(2) { animation-delay: 0.18s; }
.ch-punkte span:nth-child(3) { animation-delay: 0.36s; }

@keyframes ch-huepf {
  0%, 70%, 100% { opacity: 0.3; transform: translateY(0); }
  35%           { opacity: 1;   transform: translateY(-0.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ch-punkte span { animation: none; opacity: 0.6; }
}

/* ---------- Messwerte, klein und unaufdringlich ---------- */

.ch-messung {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted, #5f5e5e);
}

/* ---------- Schmale Geraete ---------- */

@media (max-width: 30rem) {
  .ch-blase--frage { max-width: 92%; }
  .ch-eingabe { flex-direction: column; align-items: stretch; }
  .ch-eingabe__knopf { width: 100%; }
  /* Der Knopf ist hier vollbreit, deshalb steht der Zaehler mittig
     darunter und nicht rechts am Rand eines Knopfes, den es so nicht gibt. */
  .ch-zaehler { text-align: center; }
}

/* Schritt 31: Anriss und Weiterlesen-Knopf.
   Der Knopf sieht wie ein Link aus und steht in derselben Zeile wie der
   Text, damit er als Fortsetzung gelesen wird und nicht als Bedienelement
   neben dem Absatz. */
.ch-mehr {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--vip-blue, #0058bc);
  text-decoration: underline;
  cursor: pointer;
}

.ch-mehr:hover,
.ch-mehr:focus-visible {
  text-decoration: none;
}

/* Kein Auslassungszeichen davor: der Anriss endet immer an einer
   Satzgrenze, also mit Punkt. "verteilt.… weiterlesen" sah aus wie ein
   Tippfehler. Das Wort "weiterlesen" sagt schon, dass es weitergeht. */
.ch-mehr {
  margin-left: 0.15rem;
}

/* ============================================================
   Schritt 36 — neue Reihenfolge auf der Chatseite

   Die Reihenfolge steckt in chat.js. Hier stehen nur die
   Abstaende, die sich dadurch aendern. Angehaengt statt oben
   umgeschrieben: bei gleicher Genauigkeit gewinnt die spaetere
   Regel, und die urspruenglichen Regeln bleiben lesbar.
   ============================================================ */

/* Zwischen Titel und Eingabefeld darf nur wenig Luft sein, sonst
   steht das Feld nicht mehr "direkt unter dem Titel". */
.ch-kopf { margin: 0 0 0.9rem; }

/* Die Vorschlaege haengen jetzt am Feld und bilden mit ihm eine
   Einheit, deshalb oben wenig und unten mehr Abstand. */
.ch-vorschlagblock { margin: 1rem 0 1.5rem; }
.ch-vorschlaege { margin: 0; }

.ch-vorschlaege__titel {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted, #5f5e5e);
}

/* Der Erklaertext ist von der Ueberschrift zum Nachsatz geworden
   und steht unter den Vorschlaegen. */
.ch-kopf__text { margin: 0 0 1.5rem; }

/* Die Zustandszeile ist im Normalfall versteckt. Wenn sie
   erscheint, braucht sie Luft nach unten zum Verlauf. */
.ch-zustand { margin: 0 0 1.25rem; }

/* hidden ohne display:none wirkt bei display:flex nicht - die
   Zeile bliebe sichtbar. Das hier stellt es richtig. */
.ch-zustand[hidden] { display: none; }

/* ---------- Mikrofonknopf (Schritt 39) ----------

   Der Knopf sitzt zwischen Eingabefeld und Fragen-Knopf. Er erscheint nur,
   wenn der Browser die Spracherkennung wirklich beherrscht — in Firefox
   haengt chat.js ihn gar nicht ein. Deshalb gibt es hier auch keine Regel,
   die ihn versteckt: was nicht im Dokument steht, braucht kein CSS.

   Waehrend der Aufnahme pulsiert der Knopf. Wer eine Bewegungsberuhigung
   eingestellt hat, bekommt stattdessen nur die Farbe — die Rueckmeldung
   bleibt also erhalten. */

.ch-eingabe__mikro {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--vip-line, #d7dce3);
  border-radius: 10px;
  background: #fff;
  color: var(--vip-blue, #0a4d8c);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.ch-eingabe__mikro:hover {
  background: var(--vip-tint, #eef4fb);
  border-color: var(--vip-blue, #0a4d8c);
}

.ch-eingabe__mikro:focus-visible {
  outline: 2px solid var(--vip-blue, #0a4d8c);
  outline-offset: 2px;
}

/* Aufnahme laeuft: rot, damit auf einen Blick klar ist, dass zugehoert
   wird. Das ist kein Schmuck, sondern eine Frage des Anstands. */
.ch-eingabe__mikro--an {
  background: #b32020;
  border-color: #b32020;
  color: #fff;
  animation: ch-mikro-puls 1.4s ease-in-out infinite;
}

@keyframes ch-mikro-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179, 32, 32, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(179, 32, 32, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ch-eingabe__mikro--an { animation: none; }
  .ch-eingabe__mikro { transition: none; }
}

/* Auf schmalen Anzeigen wird es eng. Der Mikrofonknopf bleibt quadratisch
   und mindestens 44 px gross, damit er mit dem Finger zu treffen ist. */
@media (max-width: 420px) {
  .ch-eingabe__mikro {
    width: 42px;
    height: 42px;
  }
}

/* Schritt 40: der Fliesstext des Sprachmodells. Etwas groesser als die
   Quellen darunter, damit klar ist, was die Antwort ist und was der Beleg. */
.ch-formuliert {
  margin: 0 0 .75rem;
  font-size: 1.02rem;
  line-height: 1.6;
}

/* ---------- Schritt 41, Punkt 2: Weiterfragen unter dem Ergebnis ----------

   Bis Schritt 40 stand nur oben ein Eingabefeld. Nach jeder Antwort musste
   man wieder ganz nach oben rollen. Dieser Abschnitt steht hinter dem
   Verlauf, also unmittelbar unter der neuesten Antwort, und ist verborgen,
   bis die erste Antwort da ist (Attribut hidden in chat.js).

   Die Linie oben trennt ihn vom Verlauf, ohne einen zweiten Kasten
   aufzuziehen. Die Felder selbst erben ihr Aussehen von .ch-eingabe. */

.ch-weiter {
  margin: 1.5rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--outline, #c1c6d7);
}

.ch-weiter[hidden] { display: none; }

.ch-weiter__titel {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted, #5f5e5e);
}

/* Auf schmalen Geraeten untereinander statt nebeneinander: bei 320 px
   bleiben neben dem Knopf sonst rund 150 px fuer das Feld uebrig. */
@media (max-width: 26rem) {
  .ch-eingabe--unten { flex-direction: column; align-items: stretch; }
  .ch-eingabe--unten .ch-eingabe__knopf { min-height: 2.9rem; }
}

/* --- Schritt 41: allgemeines Erdkundewissen -------------------------------
   Der Kasten ist absichtlich zurueckhaltender als die belegten Treffer:
   heller Grund, keine Umrandung, nur eine Linie links. Er soll lesbar sein,
   aber nie wichtiger wirken als die eigenen, nachlesbaren Inhalte. */
.ch-basis {
  margin: 0.9rem 0 0.2rem;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid rgba(120, 130, 145, 0.55);
  background: rgba(120, 130, 145, 0.08);
  border-radius: 0 6px 6px 0;
}

.ch-basis-marke {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(70, 80, 95, 0.85);
}

.ch-basis-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Auf schmalen Geraeten etwas weniger Innenabstand, damit der Text nicht in
   eine schmale Spalte gedraengt wird. */
@media (max-width: 480px) {
  .ch-basis {
    padding: 0.6rem 0.7rem;
  }

  .ch-basis-text {
    font-size: 0.92rem;
  }
}