/* ==========================================================================
   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.
   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, #7d9c92, #5f8175);
  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(95, 129, 117, 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;
  pointer-events: auto;
}
.mts-cb-teaser strong { color: #4d6b60; }
.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; }
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: volles Multicycle-Logo (SVG = gestochen scharf) zentriert,
   Close-Button absolut rechts */
.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;
}
.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: #4d6b60; 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 Multicycle-Bildmarke als Avatar links daneben */
.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, #7d9c92, #5f8175);
  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: #7d9c92;
  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 #5f8175;
}

.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(95, 129, 117, 0.4);
  background: #fff;
  color: #4d6b60;
  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: #5f8175;
  border-color: #5f8175;
  color: #fff;
  transform: translateY(-1px);
}
.mts-cb-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #7d9c92, #5f8175);
  color: #fff;
  border-radius: 9999px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(95, 129, 117, 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(95, 129, 117, 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(95, 129, 117, 0.4);
  background: #fff;
  color: #4d6b60;
  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: #5f8175;
  border-color: #5f8175;
  color: #fff;
  transform: translateY(-1px);
}
.mts-cb-resume__btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, #7d9c92, #5f8175);
  color: #fff;
  box-shadow: 0 4px 14px rgba(95, 129, 117, 0.35);
}
.mts-cb-resume__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(95, 129, 117, 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(95, 129, 117, 0.55);
  box-shadow: 0 0 0 3px rgba(95, 129, 117, 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, #7d9c92, #5f8175);
  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(95, 129, 117, 0.3);
}
.mts-cb-lead__submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(95, 129, 117, 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(95, 129, 117, 0.5);
  box-shadow: 0 0 0 3px rgba(95, 129, 117, 0.15);
  background: #fff;
}
.mts-cb-send {
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7d9c92, #5f8175);
  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(95, 129, 117, 0.3);
}
.mts-cb-send:hover:not(:disabled) { transform: scale(1.07); box-shadow: 0 6px 16px rgba(95, 129, 117, 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;
  color: #b0b6bd;
  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%; }
}