/* Sarbach Design · Chat-Widget
 *
 * Alle Klassen tragen das Praefix sbd-chat-. Kein einziger globaler Selektor,
 * kein Zugriff auf body, html oder Elementnamen: das Widget wird in eine
 * fertige, live laufende Seite gelegt und darf an deren Layout nichts aendern.
 *
 * Farben kommen aus den Tokens der Seite, jeweils mit Rueckfallwert. Faellt
 * style.css aus oder laeuft das Widget spaeter auf einer anderen Seite, sieht
 * es trotzdem richtig aus statt schwarz auf schwarz.
 *
 * z-index 250: ueber Kopfzeile (100), Handy-Menue (200) und Burger (210),
 * aber unter dem eigenen Mauszeiger (300) und der Sprungmarke (400).
 */

.sbd-chat-knopf,
.sbd-chat-fenster {
  --sbd-tinte:  var(--tinte,  oklch(0.16 0.02 235));
  --sbd-hell:   var(--hell,   oklch(0.96 0.006 200));
  --sbd-moos:   var(--moos,   oklch(0.52 0.09 205));
  --sbd-papier: var(--papier, oklch(0.97 0.008 200));
  --sbd-weiss:  var(--weiss,  oklch(1 0 0));
  --sbd-grau:   var(--grau,   oklch(0.45 0.02 220));
  --sbd-linie:  var(--linie,  oklch(0.89 0.014 205));
  --sbd-schrift: 'Archivo', system-ui, sans-serif;
  --sbd-titel: 'Bricolage Grotesque', var(--sbd-schrift);
}

/* ---------- Knopf ---------- */

.sbd-chat-knopf {
  position: fixed; right: 24px; bottom: 24px; z-index: 250;
  /* Grid statt Flex: das Zusammenklappen laeuft ueber grid-template-columns
     und nicht ueber padding. Animiertes padding wuerde in jedem Frame ein
     Layout ausloesen — bei einem Element, das ueber der ganzen Seite schwebt,
     ist das die teuerste Art, eine Ecke frei zu raeumen. */
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px;
  background: var(--sbd-moos); color: var(--sbd-hell);
  border: 0; border-radius: 999px; padding: 28px;
  font-family: var(--sbd-schrift); font-size: 22px; font-weight: 500;
  line-height: 1; cursor: pointer;
  /* Doppelte Groesse heisst auf dem Handy: die ausgeklappte Pille waere breiter
     als der Bildschirm. Die Deckelung laesst die 1fr-Spalte schrumpfen, der
     Text wird geschnitten statt die Seite quer zu schieben. */
  max-width: calc(100vw - 32px);
  box-shadow: 0 10px 30px -12px oklch(0 0 0 / 0.55);
  /* Startet unsichtbar UND unklickbar: solange der Intro-Vorhang laeuft,
     darf hier nichts liegen, was man versehentlich trifft. */
  /* visibility bewusst NICHT im Uebergang: die Eigenschaft springt, sie
     gleitet nicht, und in einem Hintergrund-Tab bleibt sie dann auf dem
     Zwischenwert stehen — der Knopf waere sichtbar geschaltet und trotzdem
     unsichtbar. Das Ein- und Ausblenden macht opacity. */
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease,
              grid-template-columns .4s ease, gap .4s ease, transform .2s ease;
}
.sbd-chat-knopf.ist-sichtbar { opacity: 1; visibility: visible; }
.sbd-chat-knopf:hover { transform: translateY(-2px); }
.sbd-chat-knopf:focus-visible {
  outline: 3px solid var(--sbd-tinte); outline-offset: 3px;
}
/* Nach ein paar Sekunden schrumpft der Knopf auf das Symbol und gibt die
   Ecke wieder frei. Die Beschriftung bleibt im Baum stehen, damit der Knopf
   fuer Screenreader und Tastatur derselbe bleibt — sie wird nur weggeblendet. */
.sbd-chat-knopf-text { overflow: hidden; white-space: nowrap; min-width: 0; }
.sbd-chat-knopf.ist-kompakt { grid-template-columns: auto 0fr; gap: 0; }
.sbd-chat-knopf-symbol { width: 40px; height: 40px; display: block; }
.sbd-chat-knopf[aria-expanded="true"] { opacity: 0; visibility: hidden; }

/* Der Knopf tritt zurueck, sobald das Kontaktformular im Bild ist. Dort ist er
   nicht der schwaechere, sondern der falsche Weg: Das Formular fragt mehr ab
   und schafft mehr Vertrauen. Ein schwebender Knopf, der ueber dem Absenden
   liegt, kostet genau die Anfrage, fuer die die ganze Seite gebaut ist.
   pointer-events zusaetzlich zu visibility, damit in dem Moment, in dem der
   Uebergang noch laeuft, nichts mehr getroffen werden kann. */
.sbd-chat-knopf.ist-zurueckhaltend {
  opacity: 0; visibility: hidden; pointer-events: none;
}

/* ---------- Fenster ---------- */

.sbd-chat-fenster {
  position: fixed; right: 24px; bottom: 24px; z-index: 250;
  width: min(585px, calc(100vw - 32px));
  max-height: min(960px, calc(100vh - 48px));
  display: none; flex-direction: column; overflow: hidden;
  background: var(--sbd-papier); color: var(--sbd-tinte);
  border: 1px solid var(--sbd-linie); border-radius: 18px;
  box-shadow: 0 30px 70px -25px oklch(0 0 0 / 0.6);
  font-family: var(--sbd-schrift); font-size: 16.5px; line-height: 1.5;
}
.sbd-chat-fenster.ist-offen { display: flex; }

.sbd-chat-kopf {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 20px 18px; background: var(--sbd-tinte); color: var(--sbd-hell);
}
.sbd-chat-kopf-text { flex: 1; min-width: 0; }
.sbd-chat-kopf h2 {
  margin: 0 0 3px; font-family: var(--sbd-titel); font-weight: 800;
  text-transform: uppercase; font-size: 20px; line-height: 1.1; letter-spacing: .01em;
}
.sbd-chat-kopf p { margin: 0; font-size: 13px; opacity: .72; }
.sbd-chat-kopf p a { color: inherit; text-underline-offset: 2px; }

.sbd-chat-schliessen {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 8px;
  color: inherit; font-size: 22px; line-height: 1; cursor: pointer;
}
.sbd-chat-schliessen:hover { background: oklch(1 0 0 / 0.12); }
.sbd-chat-schliessen:focus-visible { outline: 2px solid var(--sbd-hell); outline-offset: 1px; }

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

.sbd-chat-verlauf {
  /* Die Hoehe des Fensters richtet sich nach dem Inhalt, max-height ist nur der
     Deckel. Ohne diesen Boden waere ein frisch geoeffneter Chat mit zwei Zeilen
     genauso klein wie vorher — der Boden ist das, was man wirklich sieht. */
  flex: 1; min-height: 310px; overflow-y: auto;
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
  overscroll-behavior: contain;
}
.sbd-chat-blase {
  max-width: 85%; padding: 10px 14px; border-radius: 14px;
  overflow-wrap: anywhere;
}
/* Nur beim Besucher: sein Text steht unveraendert da, samt Zeilenumbruechen.
   Die Bot-Antwort wird in Absaetze und Listen umgesetzt, dort wuerde
   pre-wrap jeden Umbruch ein zweites Mal setzen. */
.sbd-chat-blase.von-besucher { white-space: pre-wrap; }
.sbd-chat-blase p { margin: 0 0 8px; }
.sbd-chat-blase p:last-child { margin-bottom: 0; }
.sbd-chat-blase ul { margin: 0 0 8px; padding-left: 18px; }
.sbd-chat-blase ul:last-child { margin-bottom: 0; }
.sbd-chat-blase li { margin-bottom: 4px; }
.sbd-chat-blase li:last-child { margin-bottom: 0; }
.sbd-chat-blase strong { font-weight: 700; }
.sbd-chat-blase.von-bot {
  align-self: flex-start; background: var(--sbd-weiss);
  border: 1px solid var(--sbd-linie); border-bottom-left-radius: 4px;
}
.sbd-chat-blase.von-besucher {
  align-self: flex-end; background: var(--sbd-moos); color: var(--sbd-hell);
  border-bottom-right-radius: 4px;
}
.sbd-chat-blase.ist-hinweis {
  align-self: stretch; max-width: none; background: transparent;
  border: 1px dashed var(--sbd-linie); color: var(--sbd-grau); font-size: 13px;
}

.sbd-chat-tippt { align-self: flex-start; display: flex; gap: 5px; padding: 12px 14px; }
.sbd-chat-tippt span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sbd-grau);
  animation: sbd-chat-huepf 1.2s infinite ease-in-out;
}
.sbd-chat-tippt span:nth-child(2) { animation-delay: .18s; }
.sbd-chat-tippt span:nth-child(3) { animation-delay: .36s; }
@keyframes sbd-chat-huepf {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-4px); }
}

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

.sbd-chat-vorschlaege {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px;
}
.sbd-chat-vorschlag {
  background: var(--sbd-weiss); color: var(--sbd-tinte);
  border: 1px solid var(--sbd-linie); border-radius: 999px;
  padding: 8px 14px; font-family: inherit; font-size: 13px; cursor: pointer;
}
.sbd-chat-vorschlag:hover { border-color: var(--sbd-moos); color: var(--sbd-moos); }
.sbd-chat-vorschlag:focus-visible { outline: 2px solid var(--sbd-moos); outline-offset: 2px; }

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

.sbd-chat-eingabe {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px; border-top: 1px solid var(--sbd-linie); background: var(--sbd-weiss);
}
.sbd-chat-eingabe textarea {
  flex: 1; resize: none; max-height: 110px;
  padding: 10px 12px; border: 1px solid var(--sbd-linie); border-radius: 10px;
  font-family: inherit; font-size: 15px; line-height: 1.4; color: inherit;
  background: var(--sbd-papier);
}
.sbd-chat-eingabe textarea:focus-visible {
  outline: 2px solid var(--sbd-moos); outline-offset: 0; border-color: var(--sbd-moos);
}
.sbd-chat-senden {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--sbd-moos); color: var(--sbd-hell);
  border: 0; border-radius: 10px; cursor: pointer;
}
.sbd-chat-senden:disabled { opacity: .45; cursor: default; }
.sbd-chat-senden:focus-visible { outline: 3px solid var(--sbd-tinte); outline-offset: 2px; }
.sbd-chat-senden svg { width: 18px; height: 18px; display: block; }

.sbd-chat-zaehler {
  padding: 0 12px 10px; margin: 0; font-size: 11px; color: var(--sbd-grau);
  background: var(--sbd-weiss); text-align: right;
}

/* Ohne diese Zeile bleibt die Eingabezeile trotz hidden stehen: das display
   aus der Klasse oben schlaegt die eingebaute Regel [hidden] { display: none }
   des Browsers. Faellt der Chat aus, staende dann ein totes Eingabefeld ueber
   dem Rueckfall-Formular. */
.sbd-chat-eingabe[hidden],
.sbd-chat-zaehler[hidden] { display: none; }

/* Honigtopf. Ein Mensch sieht das nie, ein einfacher Bot fuellt es aus.
   Bewusst nicht display:none — manche Bots ueberspringen genau das. */
.sbd-chat-topf {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* ---------- Rueckfall-Formular ---------- */

.sbd-chat-formular { display: none; padding: 14px 16px 16px; background: var(--sbd-weiss); }
.sbd-chat-formular.ist-offen { display: block; }
.sbd-chat-formular label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--sbd-grau); }
.sbd-chat-formular input,
.sbd-chat-formular textarea {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px;
  border: 1px solid var(--sbd-linie); border-radius: 10px; background: var(--sbd-papier);
  font-family: inherit; font-size: 15px; color: var(--sbd-tinte);
}
.sbd-chat-formular textarea { resize: vertical; min-height: 74px; }
.sbd-chat-formular input:focus-visible,
.sbd-chat-formular textarea:focus-visible {
  outline: 2px solid var(--sbd-moos); outline-offset: 0; border-color: var(--sbd-moos);
}
.sbd-chat-formular button {
  width: 100%; padding: 12px; margin-top: 2px;
  background: var(--sbd-moos); color: var(--sbd-hell);
  border: 0; border-radius: 10px; font-family: inherit; font-size: 15px; cursor: pointer;
}
.sbd-chat-formular button:focus-visible { outline: 3px solid var(--sbd-tinte); outline-offset: 2px; }
.sbd-chat-formular .sbd-chat-klein { margin: 10px 0 0; font-size: 11px; color: var(--sbd-grau); }

/* ---------- Handy: Vollbild ---------- */

@media (max-width: 640px) {
  .sbd-chat-knopf {
    /* Ueber dem Home-Balken, nicht darunter. */
    right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  }
  .sbd-chat-fenster {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%; max-height: none; border-radius: 0; border: 0;
    /* dvh statt vh: mit vh rutscht die Eingabezeile auf dem iPhone unter die
       eingeblendete Adressleiste, sobald sie beim Scrollen wieder auftaucht. */
    height: 100dvh;
  }
  .sbd-chat-verlauf { min-height: 0; }
  /* Kerbe oben, Home-Balken unten. Ohne das liegt die Eingabezeile auf einem
     neueren iPhone unter dem Balken und laesst sich schlecht treffen. */
  .sbd-chat-kopf { padding-top: max(16px, env(safe-area-inset-top)); }
  .sbd-chat-eingabe,
  .sbd-chat-formular { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

  /* Tippziele auf mindestens 44 Pixel. Am Schreibtisch trifft die Maus auch
     32 Pixel, der Daumen auf dem Handy nicht — und das Schliessen-Kreuz sitzt
     ausgerechnet in der Ecke, wo man am ungenauesten ist. */
  .sbd-chat-schliessen { width: 44px; height: 44px; font-size: 26px; }
  .sbd-chat-senden { width: 48px; height: 48px; }
  .sbd-chat-vorschlag { padding: 11px 16px; }
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  .sbd-chat-knopf { transition: opacity .01s, visibility .01s; }
  .sbd-chat-knopf:hover { transform: none; }
  .sbd-chat-tippt span { animation: none; opacity: .55; }
}