/* ==========================================================================
   MTS KI-Chatbot Widget (store.movetoshop.de) – TASK-445 v3
   Offcanvas-SEITENLEISTE (wie Warenkorb): Backdrop + full-height Drawer von
   rechts. Design-Sprache Multicycle: #5f8175/#7d9c92, Inter, soft shadows,
   borderless Cards, unsichtbare Scrollbalken.
   Seit 2026-08-15 kommen diese Werte nicht mehr aus den Literalen, sondern aus
   den Tokens (--mts-accent für die Fläche, --mts-accent-2 für die helle Stufe,
   --mts-accent-text für Text auf Weiß mit --mts-accent als Rückfall für
   Instanzen ohne dieses Token, --mts-c-primary-rgb für die alphahaltigen Ringe
   und Schatten); die Hexwerte oben bleiben als historischer Vermerk stehen.
   z-Index: Header 1050, Compare-Bar 1055, mts-modal 10500, mts-drawer 10600
   -> FAB 10400 / Backdrop 10440 / Chat-Drawer 10450.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Trigger-FAB (verschwindet, solange der Drawer offen ist)
   -------------------------------------------------------------------------- */
.mts-cb-fab {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 10400;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mts-accent-2), var(--mts-accent));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.mts-cb-fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
}
.mts-cb-fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--mts-c-primary-rgb), 0.35), 0 6px 18px rgba(15, 23, 42, 0.22);
}
/* Bike-mit-Sprechblase hat viewBox 40x31 (breiter als hoch) -> etwas groesser
   als das alte 24x24-Icon, damit es den FAB-Kreis gut fuellt. */
.mts-cb-fab svg { width: 32px; height: 32px; }
.mts-cb-root.is-open .mts-cb-fab {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

/* Compare-Bar-Kollision: FAB anheben, solange die Bar sichtbar ist */
body:has(.mts-compare-bar.is-visible) .mts-cb-fab {
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   Teaser-Bubble am FAB (einmalig nach 5s)
   -------------------------------------------------------------------------- */
.mts-cb-teaser {
  position: fixed;
  right: 96px;
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  z-index: 10400;
  max-width: 264px;
  padding: 13px 34px 13px 16px;
  background: #fff;
  color: #1f2937;
  border-radius: 16px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  font-family: var(--mts-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mts-cb-teaser.is-visible {
  opacity: 1;
  transform: none;
  /* WAR `pointer-events: auto` (bis 2026-08-14). Die Blase ist `position:fixed`
     mit z-index 10400 und war damit 20 s lang ein ganzflächiger Klickfänger
     über der Seite – eingeblendet 5 s nach Init, ausgeblendet nach weiteren
     20 s (chatbot.js:699 und :698).

     Gemessen am Livestand mc.movetoshop.com, drei Gerätebreiten:
       390 x 844   Kasten 230 x 87 px bei y = 735..822
       360 x 800   Kasten 230 x 87 px bei y = 691..778
       768 x 1024  Kasten 264 x 87 px bei y = 905..992
     In diesem Fenster meldete elementFromPoint für die darunterliegenden
     Bedienelemente die Blase; bei 768 px traf es "In den Warenkorb".

     Durchlässig wird nur die FLÄCHE. Die Kinder holen sich die Bedienbarkeit
     in der nächsten Regel zurück. */
  pointer-events: none;
}
/* Der Schließknopf und der <strong>-Botname bleiben bedienbar, alles
   dazwischen reicht zur Seite darunter durch.

   HAKEN, der beim Nachmessen zählt: der Hinweissatz hängt als DIREKTER
   Textknoten in der Blase – chatbot.js:682-684 setzt als Elemente nur den
   Schließknopf und ein <strong> um den Botnamen. `> *` trifft Textknoten
   nicht, die Blase öffnet den Chat also nur noch über den Botnamen.

   Das ist bewusst so gelassen. Die ganze Fläche per ::after-Overlay
   zurückzuholen würde exakt den Klickfänger wiederherstellen, den die Regel
   darüber beseitigt – ein Overlay ist gegenüber elementFromPoint dasselbe
   wie der Kasten selbst. Ein vollflächiger Öffner steht ohnehin 72 px
   daneben (.mts-cb-fab, 58 x 58, z-index 10400). Wer den Satz wieder
   anklickbar braucht, muss ihn in chatbot.js in ein <span> fassen; eine
   CSS-Lösung dafür gibt es nicht.

   NUR IM SICHTBAREN ZUSTAND (Gegenprobe 2026-08-15). Die Grundregel oben trägt
   `opacity: 0` – das schaltet die Trefferprüfung NICHT ab. Ohne die Bindung an
   `.is-visible` entstünde zusammen mit der 44-px-Trefferfläche des
   Schließknopfes ein unsichtbares Klickziel: dismissTeaser nimmt `is-visible`
   weg und entfernt den Knoten erst 350 ms später, und in diesem Fenster finge
   ein unsichtbarer Kasten Klicks ab. Das wäre derselbe Fehler wie vorher, nur
   umgedreht. */
.mts-cb-teaser.is-visible > * { pointer-events: auto; }
.mts-cb-teaser strong { color: var(--mts-accent-text, var(--mts-accent)); }
.mts-cb-teaser__close {
  position: absolute;
  top: 7px;
  right: 7px;
  border: 0;
  background: transparent;
  color: #9ca3af;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mts-cb-teaser__close:hover { background: #f2f5f4; color: #1f2937; }
.mts-cb-teaser__close svg { width: 11px; height: 11px; }
/* Trefferfläche 22 -> 44 px, ohne eine einzige sichtbare Zahl zu ändern:
   22 + 2 x 11 = 44. `width: 44px` hätte den grauen Hover-Kreis mitvergrößert
   und das 11-px-Symbol aus der Ecke geschoben – der Knopf zentriert seinen
   Inhalt per flex.

   Der Kasten ragt 4 px über den oberen und rechten Blasenrand hinaus (top/right
   stehen bei 7 px). Das ist unschädlich: die Blase clippt nichts, und rechts
   davon liegen 72 px Luft bis zum FAB.

   `pointer-events` erbt vom Knopf, der es sich in der Regel oben zurückgeholt
   hat – ohne diese Vererbung wäre die Fläche hier wirkungslos. */
.mts-cb-teaser__close::after {
  content: '';
  position: absolute;
  inset: -11px;
  border-radius: 50%;
}
body:has(.mts-compare-bar.is-visible) .mts-cb-teaser {
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   Backdrop
   -------------------------------------------------------------------------- */
.mts-cb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10440;
  background: rgba(15, 23, 42, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mts-cb-root.is-open .mts-cb-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Drawer (Seitenleiste, full height)
   -------------------------------------------------------------------------- */
.mts-cb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10450;
  /* Hoehe gegen body{zoom} gerechnet (2026-07-30).
     `zoom` skaliert JEDE Laenge, auch die 100dvh eines fixierten Elements:
     bei zoom 1.1 und 1080 px Viewport wurde das Panel 1188 px hoch, Eingabefeld
     und Fusszeile lagen 108 px UNTER dem Bildschirmrand. Auf beiden Instanzen
     gemessen und dort vom Nutzer gemeldet.
     storefront.css rechnet sechs weitere Overlays mit --mts-vh gegen; diese
     Stelle wurde beim Einschalten des Zooms uebersehen.
     `--mts-zoom` ist der richtige Nenner, weil er beide Gate-Bauarten
     abdeckt: die Demo laesst die Klasse stehen und setzt den Token unterhalb
     der Schwelle auf 1, die Kundenbox entfernt die Klasse ganz (dann greift
     der Fallback). Gemessen ergibt die Formel auf beiden Instanzen und in
     beiden Zustaenden exakt die Viewport-Hoehe. dvh bleibt erhalten - auf
     Telefonen mit einfahrender Adressleiste ist das die richtige Einheit. */
  height: calc(100dvh / var(--mts-zoom, 1));
  width: 580px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -16px 0 48px rgba(15, 23, 42, 0.16);
  transform: translateX(105%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--mts-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}
.mts-cb-root.is-open .mts-cb-drawer { transform: translateX(0); }

/* Header: volle Wortmarke des Shops (SVG = gestochen scharf) zentriert,
   Close-Button absolut rechts. Die Datei steht in chatbot.js
   (bike365-logo.svg), die Bidex-Instanz tauscht sie per content:url() in
   ihrem Marken-Teil 40-chatbot.css. */
.mts-cb-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 64px 14px;
  flex-shrink: 0;
}
.mts-cb-head__logo {
  height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
/* Bike365-Wortmarke braucht mehr Hoehe als die Multicycle-Wortmarke, die hier
   bis 2026-08-09 stand. Gemessen, nicht geschaetzt: bike365-logo.svg hat die
   viewBox 480,875 x 112,23, aber die BUCHSTABEN belegen davon nur y 36,6..75,6
   - rund 35 % der Boxhoehe, den Rest fuellt der senkrechte Trennstrich. Bei
   height:30px sind die Lettern also 10,4 px hoch; die Kopfzeile des Shops
   selbst rendert dieselbe Datei mit 206 x 48 px (Multicycle.Header.cshtml),
   dort sind es 16,7 px. 44 px ergibt 188 x 44 px und 15,4 px Lettern und passt
   auf Mobil (100vw, Polsterung 2 x 64 px) ohne Verkleinerung.

   WARUM AUF DIE MARKE VERENGT UND NICHT GLOBAL: chatbot.css ist eine GETEILTE
   Moduldatei. Die Bidex-Instanz laesst dieselbe Regel auf ihr eigenes
   Kopfbild wirken (logo-bidex-header.png, 595 x 180, heute 99 x 30 px) - eine
   globale Erhoehung wuerde dort unangekuendigt auf 145 x 44 px springen. Der
   Selektor ist der White-Label-Schluessel aus MtsBrandKey, den die
   ViewComponent auf <html> setzt; die Bidex-Instanz setzt ihn gar nicht.
   "multicycle" ist dabei der technische Mandanten-/Marken-Schluessel der
   Instanz mc.movetoshop.com und bleibt es - er wird beim Rebrand auf Bike365
   ausdruecklich NICHT umbenannt, weil daran die Dashboard-Kopplung haengt. */
[data-mts-brand="multicycle"] .mts-cb-head__logo {
  height: 44px;
}
.mts-cb-head__close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: #f2f5f4;
  color: #1f2937;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.mts-cb-head__close:hover { background: #e4eae7; transform: translateY(-50%) rotate(90deg); }
.mts-cb-head__close svg { width: 16px; height: 16px; }

/* Status-Zeile unter dem Logo (zentriert, passend zum Logo) */
.mts-cb-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px 14px;
  font-size: 12.5px;
  color: #6b7280;
  flex-shrink: 0;
}
.mts-cb-status strong { color: var(--mts-accent-text, var(--mts-accent)); font-weight: 600; }
.mts-cb-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Nachrichten (Scrollbalken unsichtbar)
   -------------------------------------------------------------------------- */
.mts-cb-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mts-cb-body::-webkit-scrollbar { display: none; }

.mts-cb-msg {
  max-width: 86%;
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #1f2937;
  word-wrap: break-word;
  white-space: pre-line;
}
/* Bot-Nachrichten: flach auf dem weissen Chat-Hintergrund (kein Bubble-Grau),
   mit der Bildmarke des Shops als Avatar links daneben (bike365-avatar.svg,
   quadratisch, deshalb 16 x 16 px statt der frueheren 16 x 9,8 px) */
.mts-cb-botrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
.mts-cb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.mts-cb-avatar img {
  width: 16px;
  height: auto;
  display: block;
}
.mts-cb-msg--bot {
  align-self: flex-start;
  background: transparent;
  padding: 0 2px;
  border-radius: 0;
  max-width: 96%;
}
.mts-cb-botrow .mts-cb-msg--bot {
  flex: 0 1 auto;
  max-width: 100%;
  padding-top: 3px; /* Textzeile optisch auf Avatar-Mitte ausrichten */
}
.mts-cb-msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--mts-accent-2), var(--mts-accent));
  color: #fff;
  border-bottom-right-radius: 6px;
}
.mts-cb-msg ul { margin: 6px 0 0; padding-left: 18px; }
.mts-cb-msg li { margin: 2px 0; }

/* Tipp-Indikator (flach, ohne Bubble, in der Avatar-Zeile) */
.mts-cb-typing {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 10px 2px;
}
.mts-cb-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mts-accent-2);
  animation: mts-cb-bounce 1.2s infinite ease-in-out;
}
.mts-cb-typing span:nth-child(2) { animation-delay: 0.15s; }
.mts-cb-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mts-cb-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Produkt-Karten: borderless, soft shadow, Farb-Swatches wie Kategorie-Karten
   -------------------------------------------------------------------------- */
.mts-cb-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  align-self: stretch;
}
/* Produkte liegen FLACH auf dem weissen Chat-Hintergrund — keine Karten-Box,
   kein Schatten, keine Abgrenzung (Noh-Feedback Iteration 5). Affordanz
   kommt vom "Ansehen"-Link + dezentem Bild-Zoom beim Hover. */
.mts-cb-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  text-decoration: none;
  color: #1f2937;
  border: 0;
  box-shadow: none;
}
.mts-cb-card:hover {
  text-decoration: none;
  color: #1f2937;
}
.mts-cb-card:hover .mts-cb-card__imgwrap img { transform: scale(1.04); }

/* Sanfte, gestaffelte Einblendung frischer Karten (nur neue Antworten,
   Klasse kommt aus renderBot; Verlauf-Restore bleibt ohne Animation) */
.mts-cb-products--in .mts-cb-card {
  animation: mts-cb-cardin 0.38s ease backwards;
}
.mts-cb-products--in .mts-cb-card:nth-child(2) { animation-delay: 0.07s; }
.mts-cb-products--in .mts-cb-card:nth-child(3) { animation-delay: 0.14s; }
.mts-cb-products--in .mts-cb-card:nth-child(4) { animation-delay: 0.21s; }
@keyframes mts-cb-cardin {
  from { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .mts-cb-products--in .mts-cb-card { animation: none; }
  .mts-cb-teaser { transition: opacity 0.3s ease; transform: none; }
}
.mts-cb-card__imgwrap {
  aspect-ratio: 4 / 3;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 2px 0;
}
.mts-cb-card__imgwrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 0.18s ease, transform 0.25s ease;
}

/* Farb-Swatches (Datenquelle mts-card-colors.json, wie Listing-Karten) */
.mts-cb-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 2px 0;
  min-height: 14px;
}
.mts-cb-swatch {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mts-cb-swatch:hover { transform: scale(1.15); }
.mts-cb-swatch.is-active {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18), 0 0 0 2px #fff, 0 0 0 4px var(--mts-accent);
}

.mts-cb-card__body { padding: 8px 2px 10px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.mts-cb-card__name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.mts-cb-card__price { font-size: 14px; font-weight: 700; color: #1f2937; margin-top: auto; }
/* UVP: rot + durchgestrichen neben dem (rabattierten) Preis */
.mts-cb-card__oldprice {
  font-size: 11.5px;
  color: #dc2626;
  text-decoration: line-through;
  font-weight: 600;
  margin-left: 6px;
}
/* Vorraetig-Status mit Punkt in currentColor — Muster der Listing-Karten
   (.mts-pcard__stock / __stock-dot, #15803d) */
.mts-cb-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #15803d;
  font-weight: 600;
}
.mts-cb-card__stock--out { color: #d97706; }
.mts-cb-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.mts-cb-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.mts-cb-card__view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #1f2937;
}
.mts-cb-card__view svg { width: 11px; height: 11px; }

/* --------------------------------------------------------------------------
   Chips + CTA
   -------------------------------------------------------------------------- */
.mts-cb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
  max-width: 95%;
}
.mts-cb-chip {
  border: 1px solid rgba(var(--mts-c-primary-rgb), 0.4);
  background: #fff;
  color: var(--mts-accent-text, var(--mts-accent));
  border-radius: 9999px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.mts-cb-chip:hover {
  background: var(--mts-accent);
  border-color: var(--mts-accent);
  color: #fff;
  transform: translateY(-1px);
}
.mts-cb-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--mts-accent-2), var(--mts-accent));
  color: #fff;
  border-radius: 9999px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(var(--mts-c-primary-rgb), 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mts-cb-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--mts-c-primary-rgb), 0.45);
  color: #fff;
  text-decoration: none;
}
.mts-cb-cta svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   Resume-Gate ("Gespraech fortsetzen / neuen Chat starten")
   -------------------------------------------------------------------------- */
.mts-cb-resume {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mts-cb-resume__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-left: 38px; /* Avatar (28px) + gap (10px) — auf Bot-Textspalte ausrichten */
}
.mts-cb-resume__btn {
  border: 1px solid rgba(var(--mts-c-primary-rgb), 0.4);
  background: #fff;
  color: var(--mts-accent-text, var(--mts-accent));
  border-radius: 9999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.mts-cb-resume__btn:not(.mts-cb-resume__btn--primary):hover {
  background: var(--mts-accent);
  border-color: var(--mts-accent);
  color: #fff;
  transform: translateY(-1px);
}
.mts-cb-resume__btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--mts-accent-2), var(--mts-accent));
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--mts-c-primary-rgb), 0.35);
}
.mts-cb-resume__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--mts-c-primary-rgb), 0.45);
}

/* --------------------------------------------------------------------------
   Lead-Formular (Kontaktdaten direkt im Chat)
   -------------------------------------------------------------------------- */
.mts-cb-lead {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  border-radius: 18px;
  background: #f2f5f4;
  border-bottom-left-radius: 6px;
}
.mts-cb-lead__prompt {
  font-size: 13.5px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.45;
}
.mts-cb-lead__field {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #1f2937;
  background: #fff;
  width: 100%;
}
.mts-cb-lead__field:focus {
  outline: none;
  border-color: rgba(var(--mts-c-primary-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--mts-c-primary-rgb), 0.14);
}
/* Honeypot: fuer Menschen unsichtbar (kein display:none — manche Bots skippen das) */
.mts-cb-lead__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.mts-cb-lead__error {
  font-size: 12.5px;
  color: #dc2626;
  font-weight: 600;
}
.mts-cb-lead__submit {
  border: 0;
  border-radius: 9999px;
  padding: 11px 20px;
  background: linear-gradient(135deg, var(--mts-accent-2), var(--mts-accent));
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  box-shadow: 0 4px 14px rgba(var(--mts-c-primary-rgb), 0.3);
}
.mts-cb-lead__submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(var(--mts-c-primary-rgb), 0.4); }
.mts-cb-lead__submit:disabled { opacity: 0.6; cursor: default; }
.mts-cb-lead__consent {
  font-size: 10.5px;
  color: #8a939d;
  line-height: 1.4;
}
.mts-cb-lead-done {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  font-size: 13.5px;
  font-weight: 600;
  max-width: 86%;
}
.mts-cb-lead-done__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  flex-shrink: 0;
}
.mts-cb-lead-done__check svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   Eingabe
   -------------------------------------------------------------------------- */
.mts-cb-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  flex-shrink: 0;
}
.mts-cb-input {
  flex: 1;
  border: 1px solid transparent;
  border-radius: 22px;
  padding: 12px 18px;
  font-size: 16px; /* >=16px: verhindert iOS-Safari-Zoom beim Fokus */
  line-height: 1.4;
  font-family: inherit;
  resize: none;
  overflow-y: hidden; /* Autosize steuert die Hoehe */
  max-height: 120px;
  min-height: 48px;
  color: #1f2937;
  background: #f2f5f4;
  scrollbar-width: none;
}
.mts-cb-input::-webkit-scrollbar { display: none; }
.mts-cb-input:focus {
  outline: none;
  border-color: rgba(var(--mts-c-primary-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--mts-c-primary-rgb), 0.15);
  background: #fff;
}
.mts-cb-send {
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mts-accent-2), var(--mts-accent));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 3px 10px rgba(var(--mts-c-primary-rgb), 0.3);
}
.mts-cb-send:hover:not(:disabled) { transform: scale(1.07); box-shadow: 0 6px 16px rgba(var(--mts-c-primary-rgb), 0.4); }
.mts-cb-send:disabled { opacity: 0.5; cursor: default; }
.mts-cb-send svg { width: 19px; height: 19px; }

/* Footer-Disclaimer */
.mts-cb-foot {
  padding: 0 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  text-align: center;
  font-size: 10.5px;
  /* TASK-697 AC#9 (2026-08-13): war #b0b6bd = 2,04:1 auf Weiss und damit der
     schlechteste Kontrast der ganzen Storefront - bei 10,5 px ausgerechnet an
     dem Satz, der den Nutzer warnt, dass die Antwort falsch sein kann. Ein
     Hinweis, den man nicht lesen kann, ist keiner.
     #6e6e73 ist derselbe Ton, den mts-theme-global.css schon als
     --mts-text-muted fuehrt (5,07:1) - keine neue Farbe im System. */
  color: #6e6e73;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .mts-cb-fab {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
  }
  .mts-cb-drawer { width: 100vw; }
  .mts-cb-head { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  .mts-cb-teaser {
    right: 80px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    max-width: min(230px, calc(100vw - 104px));
  }
}
body.mts-cb-locked { overflow: hidden; }
@media (max-width: 640px) {
  body.mts-cb-locked { position: fixed; width: 100%; }
}