/* ====================================================================
   KI-Chat-Widget "Sarah" – schwebende Sprechblase unten rechts.
   Laeuft nur auf den Marketingseiten (/, /projekte, /ueber, /kontakt).

   Die Traegerseiten sind dunkel (body: var(--black-2) = #171717), und das
   einzige bestehende schwebende Element – der Cookie-Banner – ist dort
   ebenfalls dunkel. Das Panel uebernimmt diese Optik, damit es zur Seite
   gehoert statt darauf zu liegen. Rot bleibt reiner Akzent.

   Flaechen sind bewusst HART gesetzt (nicht von der Seite geerbt), damit das
   Panel ueberall identisch aussieht. Nur die Markenfarbe kommt aus der
   Variable – die ist in beiden Token-Saetzen der Website identisch.
   ==================================================================== */
.ic-root {
  --ic-red: var(--red, #8b1e2d);
  --ic-red-bright: var(--red-bright, #b5293c);
  --ic-red-dark: var(--red-dark, #6f1623);
  --ic-red-glow: var(--red-glow, rgba(181, 41, 60, 0.45));
  --ic-surface: #171717;
  --ic-surface-2: #1f1f1f;
  --ic-surface-3: #262626;
  --ic-text: #ffffff;
  --ic-muted: #9b9b9b;
  --ic-line: #2e2e2e;
  font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  position: fixed;
  inset: auto 18px 18px auto; /* gleicher Randabstand wie der Cookie-Banner */
  z-index: 998; /* UNTER dem Cookie-Banner (999) – Einwilligung hat Vorrang */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* Die Webflow-CSS setzt global a{font-size:15px}. Ohne diese Zeile springt
   z. B. der Datenschutz-Link auf 15px, waehrend der Text daneben 0.72rem hat. */
.ic-root a { font-size: inherit; line-height: inherit; }

.ic-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Sprechblase (geschlossener Zustand) ---------- */
.ic-launcher {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--ic-red-bright), var(--ic-red-dark));
  box-shadow: 0 8px 22px var(--ic-red-glow);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.ic-launcher:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(181, 41, 60, 0.55);
}
.ic-launcher svg { width: 26px; height: 26px; display: block; }
.ic-root[data-state="open"] .ic-launcher { display: none; }

/* ---------- Panel (offener Zustand) ---------- */
.ic-panel {
  display: flex;
  flex-direction: column;
  width: 380px;
  height: min(560px, calc(100vh - 120px));
  background: var(--ic-surface);
  color: var(--ic-text);
  border: 1px solid var(--ic-line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: ic-slide-up 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ic-panel[hidden] { display: none; }
@keyframes ic-slide-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Kopfzeile ---------- */
.ic-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--ic-line);
  background: var(--ic-surface-2);
  flex: 0 0 auto;
}
.ic-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ic-red-bright), var(--ic-red-dark));
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}
.ic-ident { flex: 1 1 auto; min-width: 0; }
.ic-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.ic-subtitle {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ic-muted);
}
.ic-close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ic-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ic-close:hover { background: var(--ic-surface-3); color: var(--ic-text); }
.ic-close svg { width: 16px; height: 16px; display: block; }

/* ---------- Nachrichtenverlauf ---------- */
.ic-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Bildlaufleiste ausblenden – gescrollt wird weiterhin per Rad, Wischen und
     Tastatur (der Verlauf ist fokussierbar), und neue Nachrichten scrollen
     ohnehin automatisch ans Ende. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.ic-log::-webkit-scrollbar,
.ic-input::-webkit-scrollbar { width: 0; height: 0; }

.ic-msg {
  max-width: 85%;
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ic-msg.is-bot {
  align-self: flex-start;
  background: var(--ic-surface-2);
  border: 1px solid var(--ic-line);
  border-radius: 14px 14px 14px 4px;
}
/* Besuchernachricht: roter Akzent an der Kante statt grosser Farbflaeche. */
.ic-msg.is-user {
  align-self: flex-end;
  background: var(--ic-surface-2);
  border: 1px solid var(--ic-line);
  border-right: 3px solid var(--ic-red-bright);
  border-radius: 14px 14px 4px 14px;
}
.ic-greeting { color: var(--ic-text); }
/* Links in Nachrichten: heller Akzent statt Rot, damit sie auf der dunklen
   Blase lesbar bleiben. overflow-wrap, weil lange URLs sonst die Blase sprengen. */
.ic-msg a {
  color: #e8a3ad;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.ic-msg a:hover { color: #fff; }

/* ---------- Tipp-Anzeige ---------- */
.ic-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 1rem 0.5rem;
  flex: 0 0 auto;
}
.ic-typing[hidden] { display: none; }
.ic-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ic-muted);
  animation: ic-blink 1.2s infinite ease-in-out;
}
.ic-typing span:nth-child(2) { animation-delay: 0.18s; }
.ic-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ic-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* ---------- Fehlerzustand ---------- */
.ic-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 1rem;
  flex: 0 0 auto;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ic-text);
  background: rgba(139, 30, 45, 0.14);
  border-top: 1px solid var(--ic-line);
}
.ic-error[hidden] { display: none; }
.ic-error-text { flex: 1 1 auto; }
.ic-retry {
  flex: 0 0 auto;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ic-red-bright);
  border-radius: 9px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.ic-retry:hover { background: var(--ic-red); }

/* ---------- Eingabe ---------- */
.ic-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.5rem;
  border-top: 1px solid var(--ic-line);
  background: var(--ic-surface-2);
  flex: 0 0 auto;
}
.ic-input {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 7.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ic-line);
  border-radius: 12px;
  background: var(--ic-surface);
  color: var(--ic-text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  resize: none;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ic-input::placeholder { color: var(--ic-muted); }
.ic-input:focus-visible,
.ic-launcher:focus-visible,
.ic-close:focus-visible,
.ic-send:focus-visible,
.ic-retry:focus-visible,
.ic-log:focus-visible {
  outline: 2px solid var(--ic-red-bright);
  outline-offset: 2px;
}
/* Honeypot – fuer Menschen unsichtbar, fuer Bots ein verlockendes Feld. */
.ic-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.ic-send {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--ic-red-bright), var(--ic-red-dark));
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.ic-send:hover:not(:disabled) { transform: translateY(-1px); }
.ic-send:disabled { opacity: 0.45; cursor: not-allowed; }
.ic-send svg { width: 17px; height: 17px; display: block; }

.ic-legal {
  margin: 0;
  padding: 0 1rem 0.75rem;
  flex: 0 0 auto;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--ic-muted);
  background: var(--ic-surface-2);
}
.ic-legal a { color: var(--ic-muted); text-decoration: underline; }
.ic-legal a:hover { color: var(--ic-text); }

/* ---------- Mobil: nahezu Vollbild ---------- */
@media (max-width: 767px) {
  .ic-root { inset: auto 14px 14px auto; gap: 0; }
  .ic-root[data-state="open"] { inset: 0; }
  .ic-panel {
    width: 100%;
    height: 100dvh; /* nicht 100vh – sonst schneidet die Browserleiste ab */
    border: 0;
    border-radius: 0;
  }
  .ic-header { padding-top: calc(0.9rem + env(safe-area-inset-top)); }
  .ic-legal { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
}
/* Scroll-Sperre der Seite, solange das Panel als Vollbild-Sheet offen ist. */
@media (max-width: 767px) {
  html.ic-locked, html.ic-locked body { overflow: hidden; }
}

@media (max-width: 767px) {
  /* Solange die Einwilligung noch offen ist, tritt das Widget zurueck: Auf
     dieser Breite wuerde das Panel die ganze Seite verdecken – und unter 480px
     belegt der Banner ohnehin die komplette untere Kante. */
  .ic-root.is-cc-open { display: none; }

  /* Als Vollbild-Sheet muss das Panel ueber der fixierten Navigation liegen
     (.navigation-wrapper hat z-index 999, genau wie der Cookie-Banner).
     Zulaessig, weil auf dieser Breite dank der Regel darueber gar kein Panel
     offen sein kann, solange der Banner noch steht. */
  .ic-root[data-state="open"] { z-index: 1001; }
}

@media (prefers-reduced-motion: reduce) {
  .ic-panel { animation: none; }
  .ic-launcher, .ic-send, .ic-close, .ic-retry { transition: none; }
  .ic-launcher:hover, .ic-send:hover:not(:disabled) { transform: none; }
  .ic-typing span { animation: none; opacity: 0.6; }
}