/* Webchat-Widget — nimmt die Tokens der Gastgeberseite, wenn es sie findet,
   und bringt sonst eigene mit. Alle Klassen mit wcx- praefixiert, damit nichts
   mit der Seite kollidiert. */

.wcx {
  --wcx-bg: var(--bg-elev, #ffffff);
  --wcx-flaeche: var(--panel, rgba(255, 255, 255, 0.04));
  --wcx-linie: var(--hairline, rgba(15, 18, 28, 0.1));
  --wcx-linie-stark: var(--hairline-strong, rgba(15, 18, 28, 0.16));
  --wcx-text: var(--text, #0c1020);
  --wcx-leise: var(--text-muted, #4b5572);
  --wcx-akzent: var(--accent, #4f5dff);
  --wcx-r: var(--r-lg, 20px);
  --wcx-r-klein: var(--r-sm, 10px);
  --wcx-schatten: var(--shadow-3, 0 24px 60px -20px rgba(15, 18, 28, 0.26));

  /* Sitzplatz. Die Gastgeberseite darf beides ueberschreiben — noetig, wenn dort
     schon etwas in der Ecke steht, etwa ein Sprach-Orb. */
  --wcx-rechts: 20px;
  --wcx-unten: 20px;
  --wcx-ebene: 70;

  position: fixed;
  right: var(--wcx-rechts);
  bottom: var(--wcx-unten);
  z-index: var(--wcx-ebene);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
}

/* ── Auslöser ───────────────────────────────────────────────────────────── */
.wcx-knopf {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--wcx-linie-stark);
  background: var(--wcx-bg);
  color: var(--wcx-text);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: var(--wcx-schatten);
  transition: transform 150ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 220ms;
}
.wcx-knopf:hover { transform: translateY(-1px); }
.wcx-knopf:focus-visible { outline: 2px solid var(--wcx-akzent); outline-offset: 3px; }
.wcx-knopf svg { flex: none; opacity: 0.75; }
.wcx[data-offen="ja"] .wcx-knopf { display: none; }

/* ── Fenster ────────────────────────────────────────────────────────────── */
.wcx-fenster {
  display: none;
  flex-direction: column;
  width: min(380px, calc(100vw - 40px));
  height: min(560px, calc(100vh - var(--wcx-unten) - 100px));
  border-radius: var(--wcx-r);
  border: 1px solid var(--wcx-linie);
  background: var(--wcx-bg);
  box-shadow: var(--wcx-schatten);
  overflow: hidden;
}
.wcx[data-offen="ja"] .wcx-fenster { display: flex; }

@media (prefers-reduced-motion: no-preference) {
  .wcx[data-offen="ja"] .wcx-fenster {
    animation: wcx-auf 300ms cubic-bezier(0.16, 0.84, 0.28, 1);
  }
  @keyframes wcx-auf {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to { opacity: 1; transform: none; }
  }
}

.wcx-kopf {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 15px 13px 18px;
  border-bottom: 1px solid var(--wcx-linie);
}
.wcx-kopf-text { flex: 1; min-width: 0; }
.wcx-kopf b {
  display: block;
  font-size: 0.94rem;
  font-weight: 650;
  color: var(--wcx-text);
  letter-spacing: -0.01em;
}
.wcx-hinweis {
  display: block;
  margin-top: 3px;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--wcx-leise);
}
.wcx-zu {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--wcx-leise);
  cursor: pointer;
}
.wcx-zu:hover { background: var(--wcx-flaeche); color: var(--wcx-text); }
.wcx-zu:focus-visible { outline: 2px solid var(--wcx-akzent); outline-offset: 2px; }

/* ── Verlauf ────────────────────────────────────────────────────────────── */
.wcx-verlauf {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wcx-zeile { max-width: 88%; }
.wcx-zeile[data-wer="besucher"] { align-self: flex-end; }
.wcx-blase {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.wcx-zeile[data-wer="assistent"] .wcx-blase {
  background: var(--wcx-flaeche);
  border: 1px solid var(--wcx-linie);
  color: var(--wcx-text);
  border-bottom-left-radius: 5px;
}
.wcx-zeile[data-wer="besucher"] .wcx-blase {
  background: var(--wcx-text);
  color: var(--wcx-bg);
  border-bottom-right-radius: 5px;
}
.wcx-zeile[data-wer="fehler"] .wcx-blase {
  background: transparent;
  border: 1px dashed var(--wcx-linie-stark);
  color: var(--wcx-leise);
  font-size: 0.84rem;
}
.wcx-blase ul { margin: 6px 0 0; padding-left: 18px; }
.wcx-blase li { margin: 2px 0; }
.wcx-blase strong { font-weight: 650; }

/* Denkpunkte, solange noch kein Wort da ist */
.wcx-punkte { display: inline-flex; gap: 4px; padding: 3px 0; }
.wcx-punkte i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.35;
}
@media (prefers-reduced-motion: no-preference) {
  .wcx-punkte i { animation: wcx-blink 1.25s ease-in-out infinite; }
  .wcx-punkte i:nth-child(2) { animation-delay: 0.18s; }
  .wcx-punkte i:nth-child(3) { animation-delay: 0.36s; }
  @keyframes wcx-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 0.85; } }
}

/* ── Eingabe ────────────────────────────────────────────────────────────── */
.wcx-fuss {
  border-top: 1px solid var(--wcx-linie);
  padding: 11px 12px 12px;
}
.wcx-form { display: flex; align-items: flex-end; gap: 8px; }
.wcx-eingabe {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 12px;
  border-radius: var(--wcx-r-klein);
  border: 1px solid var(--wcx-linie-stark);
  background: var(--wcx-flaeche);
  color: var(--wcx-text);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
}
.wcx-eingabe::placeholder { color: var(--wcx-leise); opacity: 0.85; }
.wcx-eingabe:focus-visible { outline: 2px solid var(--wcx-akzent); outline-offset: 1px; }
.wcx-senden {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--wcx-r-klein);
  border: 1px solid transparent;
  background: var(--wcx-text);
  color: var(--wcx-bg);
  cursor: pointer;
  transition: opacity 150ms;
}
.wcx-senden:disabled { opacity: 0.4; cursor: default; }
.wcx-senden:focus-visible { outline: 2px solid var(--wcx-akzent); outline-offset: 2px; }
.wcx-zaehler {
  display: block;
  margin-top: 6px;
  text-align: right;
  font-size: 0.7rem;
  color: var(--wcx-leise);
  opacity: 0;
  transition: opacity 180ms;
}
.wcx-zaehler[data-sichtbar="ja"] { opacity: 1; }

@media (max-width: 560px) {
  .wcx { right: var(--wcx-rechts); left: var(--wcx-rechts); }
  .wcx-fenster {
    width: 100%;
    /* An den Sitzplatz gekoppelt: steht unten etwas im Weg, wird das Fenster
       kuerzer statt darueberzulaufen. */
    height: min(70vh, calc(100vh - var(--wcx-unten) - 24px));
  }
  .wcx-knopf { width: 100%; justify-content: center; }
}

/* Datenschutzhinweis unter dem Eingabefeld — bewusst leise, nicht überdimensioniert.
   ACHTUNG: .wcx-fuss ist bereits der Eingabebereich, deshalb eigene Klasse. */
.wcx-datenschutz {
  padding: 0 12px 9px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--wcx-leise);
  text-align: center;
}
.wcx-datenschutz a { color: inherit; text-decoration: underline; }

/* Rückrufwunsch — schlichtes Formular über dem Eingabefeld. */
.wcx-rueckruf-leiste { padding: 0 12px 8px; text-align: center; }
.wcx-rueckruf-auf {
  background: none; border: 1px solid var(--wcx-rand, rgba(0,0,0,.16));
  border-radius: 999px; padding: 5px 13px; cursor: pointer;
  font: inherit; font-size: 0.76rem; color: var(--wcx-leise);
}
.wcx-rueckruf-auf:hover { color: inherit; }
.wcx-rueckruf-form {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; margin: 0 10px 8px;
  border: 1px solid var(--wcx-rand, rgba(0,0,0,.16)); border-radius: 10px;
}
.wcx-rueckruf-titel { font-size: 0.84rem; }
.wcx-rueckruf-form input,
.wcx-rueckruf-form textarea {
  font: inherit; font-size: 0.82rem; padding: 6px 8px;
  border: 1px solid var(--wcx-rand, rgba(0,0,0,.16)); border-radius: 7px;
  background: var(--wcx-feld, transparent); color: inherit; resize: vertical;
}
.wcx-rueckruf-hinweis { font-size: 0.68rem; line-height: 1.35; color: var(--wcx-leise); }
.wcx-rf-knoepfe { display: flex; gap: 6px; justify-content: flex-end; }
.wcx-rf-knoepfe button {
  font: inherit; font-size: 0.78rem; padding: 5px 12px;
  border-radius: 7px; cursor: pointer; border: 1px solid var(--wcx-rand, rgba(0,0,0,.16));
  background: none; color: inherit;
}
.wcx-rf-senden { background: var(--wcx-akzent, #222); color: #fff; border-color: transparent; }
.wcx-rf-senden:disabled { opacity: .55; cursor: default; }
.wcx-rf-status { font-size: 0.7rem; color: var(--wcx-leise); }

/* display:flex/block schlaegt das hidden-Attribut — hier zurueckholen. */
.wcx-rueckruf-form[hidden],
.wcx-rueckruf-leiste[hidden] { display: none !important; }