/**
 * Theme isolation — wins over Hello Elementor / generic WP theme resets.
 * Scoped to .smartchat-wrapper; loaded after chatbot.css.
 */

/* ═══════════════════════════════════════════════════════════
   CATCH-ALL: Reset all button + input base styles inside the
   chat shell before Hello Elementor's reset.css can pollute.
   ═══════════════════════════════════════════════════════════ */

/* Hello Elementor reset.css rule:
   [type=button],[type=submit],button { border:1px solid #666; border-radius:3px;
   padding:.5rem 1rem; width:100%; ... }
   → Override for ALL buttons inside the chat container. */
.smartchat-wrapper .sc-chat-container button,
.smartchat-wrapper .sc-chat-container [type="button"],
.smartchat-wrapper .sc-chat-container [type="submit"] {
  box-sizing: border-box !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Hello Elementor reset.css rule for inputs / textarea:
   input[type=text],input[type=email],...,textarea {
     border:1px solid #666; border-radius:3px; padding:.5rem 1rem; width:100%;
   }
   → Full override for ALL text-like inputs inside the chat shell. */
.smartchat-wrapper .sc-chat-container input,
.smartchat-wrapper .sc-chat-container textarea,
.smartchat-wrapper .sc-chat-container select {
  box-sizing: border-box !important;
  font-family: inherit !important;
}


/* ── Topbar: always visible when enabled (incl. buttons-only mode) ── */
.smartchat-wrapper .sc-mobile-topbar.is-enabled,
.smartchat-wrapper .sc-mobile-topbar.sc-topbar-buttons-only.is-enabled {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Close button: must remain visible whenever the topbar is enabled.
   Hello Elementor reset + inline style="display:none" from JS can
   both be overridden by author !important (CSS spec §6.4.2). */
.smartchat-wrapper .sc-mobile-topbar.is-enabled .sc-mobile-topbar-actions .sc-mobile-close-btn,
.smartchat-wrapper .sc-mobile-topbar.sc-topbar-buttons-only.is-enabled .sc-mobile-topbar-actions .sc-mobile-close-btn {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* ── Text inputs — main chat input (input or textarea) ── */
/* Hello Elementor applies width:100%, border:#666, padding:.5rem 1rem to
   input[type=text], textarea, etc. Override with flex-friendly values. */
.smartchat-wrapper #smartchat-floating-input,
.smartchat-wrapper input#smartchat-floating-input.sc-input,
.smartchat-wrapper textarea#smartchat-floating-input,
.smartchat-wrapper textarea#smartchat-floating-input.sc-input,
.smartchat-wrapper input[type="text"].sc-input,
.smartchat-wrapper .sc-input-area input[type="text"],
.smartchat-wrapper .sc-input-area textarea {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--sc-radius-input, 12px) !important;
  padding: 8px 12px !important;
  background: var(--sc-input-bg, var(--sc-dark3, #1e1e26)) !important;
  color: var(--sc-input-text, var(--sc-text, #e8e4dc)) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  transition: border-color 0.2s !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.smartchat-wrapper input[type="text"].sc-input:focus,
.smartchat-wrapper .sc-input-area input[type="text"]:focus,
.smartchat-wrapper .sc-input-area textarea:focus,
.smartchat-wrapper #smartchat-floating-input:focus {
  outline: none !important;
  border-color: rgba(184, 152, 90, 0.35) !important;
  transform: none !important;
  box-shadow: none !important;
}

.smartchat-wrapper input[type="text"].sc-input::placeholder,
.smartchat-wrapper textarea#smartchat-floating-input::placeholder {
  color: var(--sc-placeholder, var(--sc-muted)) !important;
  opacity: 1 !important;
}

/* ── Visitor fields (light card inputs) ── */
.smartchat-wrapper input[type="email"].sc-visitor-input,
.smartchat-wrapper input[type="text"].sc-visitor-input,
.smartchat-wrapper .sc-visitor-fields input[type="text"],
.smartchat-wrapper .sc-visitor-fields input[type="email"],
.smartchat-wrapper .sc-visitor-fields input[type="tel"],
.smartchat-wrapper .sc-visitor-fields input[type="url"] {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  border: 1px solid rgba(22, 31, 45, 0.35) !important;
  border-radius: var(--sc-radius-input, 12px) !important;
  padding: 10px 42px 10px 12px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #172033 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.smartchat-wrapper input[type="email"].sc-visitor-input:focus,
.smartchat-wrapper input[type="text"].sc-visitor-input:focus,
.smartchat-wrapper .sc-visitor-fields input[type="text"]:focus,
.smartchat-wrapper .sc-visitor-fields input[type="email"]:focus {
  outline: none !important;
  border-color: rgba(66, 133, 244, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.15) !important;
  transform: none !important;
}

.smartchat-wrapper input[type="email"].sc-visitor-input::placeholder,
.smartchat-wrapper input[type="text"].sc-visitor-input::placeholder {
  color: rgba(23, 32, 51, 0.42) !important;
  opacity: 1 !important;
}


/* ── Send button ── */
.smartchat-wrapper button.sc-send-btn,
.smartchat-wrapper .sc-send-btn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: var(--sc-radius-btn, 12px) !important;
  line-height: 1 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}

/* ── Live-Chat / attach / visitor action buttons ── */
.smartchat-wrapper button.sc-livechat-btn,
.smartchat-wrapper button.sc-livechat-attach-btn,
.smartchat-wrapper button.sc-visitor-next-btn,
.smartchat-wrapper button.sc-visitor-close-btn {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}

.smartchat-wrapper .sc-livechat-action .sc-livechat-btn {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

.smartchat-wrapper button.sc-livechat-attach-btn {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
}

/* ── Topbar icon buttons: layout only — background/color kein !important,
   damit inline style aus den Design-Einstellungen (JS) gewinnt. ── */
.smartchat-wrapper .sc-mobile-topbar-actions button,
.smartchat-wrapper .sc-mobile-topbar-actions button[type="button"] {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  line-height: 1 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  /* background + color intentionally without !important:
     JS sets these as inline styles from the admin design settings. */
  background: #fff;
  color: #0f172a;
}

/* lp-reopen / preview-reopen: Layout + Appearance.
   background/color OHNE !important — gewinnen inline style aus Design-Einstellungen. */
.smartchat-wrapper .sc-mobile-topbar-actions #smartchat-floating-lp-reopen,
.smartchat-wrapper .sc-mobile-topbar-actions #pv-reopen,
.smartchat-wrapper .sc-mobile-topbar-actions .sc-preview-reopen-btn,
.smartchat-wrapper .sc-mobile-topbar-actions .sc-lp-reopen-btn {
  width: auto !important;
  min-width: 118px !important;
  max-width: 160px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--sc-lp-reopen-btn-bg, #7c3aed);
  color: var(--sc-lp-reopen-btn-text, #ffffff);
}


/* ── Quicklinks overlay close button ──
   Hello Elementor reset.css: [type=button],button { border:1px solid #666;
   padding:.5rem 1rem; width:100%; border-radius:3px; }
   Override fully so the ✕ stays as a small 28×28 icon. */
.smartchat-wrapper button.sc-quicklinks-overlay-close,
.smartchat-wrapper .sc-quicklinks-overlay .sc-quicklinks-overlay-close,
.smartchat-wrapper .sc-quicklinks-overlay-close[type="button"],
.smartchat-wrapper [type="button"].sc-quicklinks-overlay-close {
  position: absolute !important;
  top: 2px !important;
  right: 4px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--sc-text, #e8e4dc) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

/* ── Human suggest / welcome / LP buttons ── */
.smartchat-wrapper button.sc-human-suggest-go,
.smartchat-wrapper button.sc-human-suggest-dismiss,
.smartchat-wrapper button.sc-welcome-start-btn,
.smartchat-wrapper button.sc-lp-reopen-btn,
.smartchat-wrapper button.sc-ql-toggle-btn {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}

.smartchat-wrapper button.sc-human-suggest-dismiss {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
}

/* ── Links inside chat (theme link resets) ── */
.smartchat-wrapper .sc-chat-container a.sc-mobile-terms-link {
  text-decoration: none !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

.smartchat-wrapper .sc-bubble a {
  text-decoration: underline !important;
}

/* Hello Elementor reset: generic button rules inside chat shell */
.smartchat-wrapper .sc-chat-container button[type="button"],
.smartchat-wrapper .sc-chat-container button[type="submit"],
.smartchat-wrapper .sc-chat-container [type="button"],
.smartchat-wrapper .sc-chat-container [type="submit"] {
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════
   HOVER / FOCUS PROTECTION
   Hello Elementor reset.css:
     button:hover, [type=button]:hover, [type=submit]:hover,
     button:focus, [type=button]:focus, [type=submit]:focus {
       background-color: #c36; color: #fff; text-decoration: none;
     }
   Diese Regel füllt jede background-color-Lücke in Plugin-Hover-Styles.
   Lösung: explizite Overrides pro Button-Kategorie mit !important.
   ═══════════════════════════════════════════════════════════ */

/* .sc-clear-memory — transparent hover bg, rote Schrift */
.smartchat-wrapper button.sc-clear-memory:hover,
.smartchat-wrapper button.sc-clear-memory:focus {
  background-color: transparent !important;
  color: #f87171 !important;
  text-decoration: none !important;
}

/* Topbar Icon-Buttons (close, fullscreen, ql-toggle, livechat) —
   helles Grau als Hover, keine #c36. */
.smartchat-wrapper .sc-mobile-topbar-actions .sc-mobile-close-btn:hover,
.smartchat-wrapper .sc-mobile-topbar-actions .sc-mobile-close-btn:focus,
.smartchat-wrapper .sc-mobile-topbar-actions .sc-mobile-fullscreen-btn:hover,
.smartchat-wrapper .sc-mobile-topbar-actions .sc-mobile-fullscreen-btn:focus,
.smartchat-wrapper .sc-mobile-topbar-actions .sc-ql-toggle-btn:hover,
.smartchat-wrapper .sc-mobile-topbar-actions .sc-ql-toggle-btn:focus,
.smartchat-wrapper .sc-mobile-topbar-actions .sc-livechat-topbar-btn:hover,
.smartchat-wrapper .sc-mobile-topbar-actions .sc-livechat-topbar-btn:focus {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  text-decoration: none !important;
}

/* lp-reopen / sc-lp-reopen-btn — Farbe kommt vom Admin-Design,
   nur text-decoration fixieren, kein #c36 durch theme. */
.smartchat-wrapper .sc-mobile-topbar-actions #smartchat-floating-lp-reopen:hover,
.smartchat-wrapper .sc-mobile-topbar-actions #smartchat-floating-lp-reopen:focus,
.smartchat-wrapper .sc-mobile-topbar-actions .sc-lp-reopen-btn:hover,
.smartchat-wrapper .sc-mobile-topbar-actions .sc-lp-reopen-btn:focus {
  text-decoration: none !important;
  /* background-color: theme #c36 gewinnt NICHT — der inline style
     (Spezifizität [1,0,0,0]) schlägt button:hover [0,0,0,2]. */
}

/* Human-suggest dismiss, visitor-close — dunkel auf weißem Grund */
.smartchat-wrapper button.sc-human-suggest-dismiss:hover,
.smartchat-wrapper button.sc-human-suggest-dismiss:focus,
.smartchat-wrapper button.sc-visitor-close-btn:hover,
.smartchat-wrapper button.sc-visitor-close-btn:focus {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  text-decoration: none !important;
}

/* Quicklinks overlay close: transparent hover */
.smartchat-wrapper button.sc-quicklinks-overlay-close:hover,
.smartchat-wrapper button.sc-quicklinks-overlay-close:focus {
  background: rgba(0, 0, 0, 0.12) !important;
  color: var(--sc-text, #e8e4dc) !important;
  text-decoration: none !important;
}

/* Offline-close button */
.smartchat-wrapper button.sc-offline-close:hover,
.smartchat-wrapper button.sc-offline-close:focus {
  text-decoration: none !important;
}

/* Live-confirm & chip buttons — semi-transparent hover (wie chatbot.css) */
.smartchat-wrapper button.sc-live-confirm-btn:hover,
.smartchat-wrapper button.sc-live-confirm-btn:focus,
.smartchat-wrapper button.sc-chip:hover,
.smartchat-wrapper button.sc-chip:focus {
  background: rgba(255, 255, 255, 0.18) !important;
  text-decoration: none !important;
}

/* Send-button — kein #c36, Gradient bleibt */
.smartchat-wrapper button.sc-send-btn:hover,
.smartchat-wrapper button.sc-send-btn:focus {
  background: linear-gradient(
    var(--sc-header-angle, 135deg),
    var(--sc-dark3, #1e1e26),
    var(--sc-dark3-2, var(--sc-dark3, #1e1e26))
  ) !important;
  color: var(--sc-send-icon, #ffffff) !important;
  text-decoration: none !important;
}