/* ---------------------------------------------------------------------
   chat.css  -  Kundenbot-Seite

   Gehoert zu chat.htm (Quelldatei in d:\temp\htmlvorlagen) und
   js\chat.js. Die Seite laeuft im normalen p23-Rahmen, deshalb steht
   hier nur, was der Rahmen nicht schon mitbringt.

   Der Verlauf hat eine feste Hoehe und scrollt in sich. Sonst waechst
   die Seite bei jeder Antwort, und das Eingabefeld wandert nach unten
   aus dem Bild - auf dem Telefon nach drei Saetzen.
   --------------------------------------------------------------------- */

#chatSeite {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 14px 40px 14px;
  font-size: 15px;
  line-height: 1.5;
}

#chatSeite h1 { font-size: 26px; margin: 18px 0 14px 0; }
#chatSeite h2 { font-size: 18px; margin: 22px 0 8px 0; }

#chatKiHinweis {
  border: 1px solid #c8c8c8;
  border-left: 4px solid #6b8f3a;
  background: #f6f7f2;
  padding: 12px 14px;
  margin: 0 0 22px 0;
  font-size: 14px;
}

/* Der Hinweis hat zwei Absaetze: was der Assistent kann, und was mit dem
   wird, was man ihm schreibt. Ohne diese beiden Regeln setzt der Browser
   seine eigenen Absatzabstaende und sprengt den Kasten oben und unten. */
#chatKiHinweis p            { margin: 0 0 8px 0; }
#chatKiHinweis p:last-child { margin: 0; }

.chatHilf  { font-size: 14px; color: #444; margin: 0 0 14px 0; }
.chatKlein { font-size: 12px; color: #666; margin: 12px 0 0 0; }

/* ---------------- Anmeldung ---------------- */

.chatFeld { margin: 0 0 12px 0; }

.chatFeld label {
  display: block;
  font-size: 13px;
  color: #444;
  margin: 0 0 3px 0;
}

.chatFeld input {
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid #b9b9b9;
  border-radius: 3px;
  font-size: 16px;          /* unter 16px zoomt iOS beim Antippen hinein */
  font-family: inherit;
  background: #fff;
}

.chatFeld input:focus,
#chText:focus { outline: 2px solid #6b8f3a; outline-offset: 1px; }

/* ---------------- Knoepfe ---------------- */

.chatKnopf {
  display: inline-block;
  padding: 10px 20px;
  border: 0;
  border-radius: 3px;
  background: #6b8f3a;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}

.chatKnopf:hover { background: #5c7d30; }

.chatKnopf[disabled] { background: #b5b5b5; cursor: default; }

.chatKnopfKlein {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #b9b9b9;
  border-radius: 3px;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.chatKnopfKlein:hover { background: #f0f0f0; }

/* ---------------- Gespraech ---------------- */

#chatKopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #555;
  border-bottom: 1px solid #ddd;
  padding: 0 0 8px 0;
  margin: 0 0 10px 0;
}

#chatVorgang { font-weight: bold; color: #222; }

#chatVerlauf {
  height: 46vh;
  min-height: 260px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fcfcfc;
  padding: 12px;
}

.chatZeile { margin: 0 0 12px 0; display: flex; }

.chatZeile.vonMir { justify-content: flex-end; }

.chatBlase {
  max-width: 80%;
  padding: 9px 12px;
  border-radius: 10px;
  white-space: pre-wrap;    /* Zeilenumbrueche aus der Antwort bleiben */
  word-wrap: break-word;
  overflow-wrap: anywhere;  /* lange Sendungsnummern sprengen sonst die Blase */
}

.vonBot .chatBlase { background: #eef1e7; border: 1px solid #dde3ce; }
.vonMir .chatBlase { background: #e7eef5; border: 1px solid #cedbe6; }

.chatBlase a { text-decoration: underline; }

.chatAbsender {
  display: block;
  font-size: 11px;
  color: #777;
  margin: 0 0 2px 0;
}

/* Die drei Punkte, solange die KI denkt. Ein Bild waere eine weitere
   Datei und ein weiterer Zugriff - drei Zeichen tun es auch. */
.chatTippt .chatBlase { color: #888; letter-spacing: 3px; }

/* ---------------- Vermerk ---------------- */

#chatVermerk {
  border: 1px solid #d8c48a;
  background: #fdf8e8;
  border-radius: 3px;
  padding: 12px 14px;
  margin: 12px 0 0 0;
  font-size: 14px;
}

#chatVermerkText { margin: 0 0 10px 0; }

#chatVermerkText b { display: block; margin: 0 0 4px 0; }

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

#chatEingabe {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin: 12px 0 0 0;
}

#chText {
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid #b9b9b9;
  border-radius: 3px;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.4;
  resize: vertical;
  background: #fff;
}

.chatFehler {
  color: #a32020;
  font-size: 14px;
  margin: 10px 0 0 0;
  min-height: 1px;
}

/* Die Liste im KI-Hinweis: was der Assistent gleich erledigt.
   Eigene Klasse und keine Formatierung ueber #chatKiHinweis ul, damit
   eine spaetere zweite Liste dort nicht ungewollt mitgefasst wird. */

.chatKann {
  margin: 0 0 8px 0;
  padding-left: 20px;
}

.chatKann li {
  margin: 0 0 4px 0;
}

.chatKann li:last-child {
  margin: 0;
}

/* ---------------- Telefon ---------------- */

@media (max-width: 560px) {
  #chatSeite h1 { font-size: 22px; }
  #chatVerlauf  { height: 52vh; min-height: 220px; }
  .chatBlase    { max-width: 90%; }
  .chatFeld input { max-width: 100%; }
  #chatKopf { flex-wrap: wrap; }
  .chatKann { padding-left: 18px; }
}