@tailwind base;
@tailwind components;
@tailwind utilities;

/* BoostBot Widget Styles */
/* Scoped to #boostbot-widget-root to avoid conflicts */

#boostbot-widget-root {
  /* Reset FIRST (so our own styling below wins). */
  all: initial;

  /* CSS Variables */
  --boostbot-primary: #3BC2D0;
  --boostbot-primary-dark: #2FA0AC;
  --boostbot-accent: #E32774;
  --boostbot-text: #1e293b;
  --boostbot-text-secondary: #64748b;
  --boostbot-bg: #ffffff;
  --boostbot-bg-secondary: #f1f5f9;
  --boostbot-border: #e2e8f0;
  
  /* Font (theme-proof). Some themes/plugins apply `* { font-family: ... !important; }`.
     We must win inside our root to keep typography parity with the admin preview. */
  font-family: var(--bb-font-family, 'Heebo', system-ui, sans-serif) !important;
  
  font-size: 16px;
  line-height: 1.5;
  color: var(--boostbot-text);
  
  /* Ensure widget is always on top */
  position: fixed;
  z-index: 999999;
}

#boostbot-widget-root * {
  box-sizing: border-box;
  /* Enforce inheritance so theme-wide `font-family: ... !important` rules can’t leak in. */
  font-family: inherit !important;
}

/* -------------------------------------------------------------------------- */
/* Theme Reset Protection (Hello Elementor, etc.)                               */
/* -------------------------------------------------------------------------- */
/* Many WP themes (including hello-elementor reset.css) apply global rules like:
   h1..h6 { line-height: 1.2; margin-block-start: .5rem; margin-block-end: 1rem; }
   p { margin-block-end: .9rem; }
   These break our live widget unless we neutralize them inside our root. */

#boostbot-widget-root h1,
#boostbot-widget-root h2,
#boostbot-widget-root h3,
#boostbot-widget-root h4,
#boostbot-widget-root h5,
#boostbot-widget-root h6 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

#boostbot-widget-root p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* -------------------------------------------------------------------------- */
/* Message bubble protection                                                  */
/* -------------------------------------------------------------------------- */
/* Message bubbles use inline styles for colors. We need to prevent theme CSS
   from overriding these. The approach: DON'T set color on children, let them
   inherit naturally from the bubble's inline style. Only reset elements that
   themes typically target aggressively. */
#boostbot-widget-root .bb-message-bubble p,
#boostbot-widget-root .bb-message-bubble span,
#boostbot-widget-root .bb-message-bubble div,
#boostbot-widget-root .bb-message-bubble strong,
#boostbot-widget-root .bb-message-bubble em,
#boostbot-widget-root .bb-message-bubble li,
#boostbot-widget-root .bb-message-bubble ul,
#boostbot-widget-root .bb-message-bubble ol {
  /* Don't set color - let it inherit from parent's inline style */
  /* Reset only properties that themes commonly override */
  margin: 0;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
}

#boostbot-widget-root a {
  text-decoration: none;
}

/* Inputs/selects/textarea also get styled by theme resets; keep them predictable. */
#boostbot-widget-root input,
#boostbot-widget-root textarea,
#boostbot-widget-root select {
  font-family: inherit !important;
  line-height: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}

#boostbot-widget-root .bb-survey-feedback-textarea::placeholder {
  color: var(--bb-survey-feedback-placeholder, var(--boostbot-text-secondary));
  opacity: 1;
}

#boostbot-widget-root .bb-survey-feedback-textarea:focus {
  border-color: var(--bb-survey-feedback-focus-border, var(--boostbot-border));
}

/* RTL Support */
#boostbot-widget-root[dir="rtl"] {
  direction: rtl;
  text-align: start;
}

/* Scrollbar Styling */
#boostbot-widget-root .custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

#boostbot-widget-root .custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

#boostbot-widget-root .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

#boostbot-widget-root .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Animation Classes */
@layer utilities {
  .animate-typing-dot {
    animation: typing-bounce 1.4s infinite ease-in-out both;
  }
  
  .animate-typing-dot-delay-1 {
    animation-delay: 0.16s;
  }
  
  .animate-typing-dot-delay-2 {
    animation-delay: 0.32s;
  }
}

@keyframes typing-bounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Message bubble animations */
@keyframes message-appear {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.message-appear {
  animation: message-appear 0.3s ease-out forwards;
}

/* Pulse animation for unread badge */
@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Focus styles for accessibility */
#boostbot-widget-root button:focus-visible,
#boostbot-widget-root textarea:focus-visible,
#boostbot-widget-root input:focus-visible {
  outline: 2px solid var(--boostbot-primary);
  outline-offset: 2px;
}

/* CSS Isolation for buttons - prevent theme overrides */
/* The ID selector (#boostbot-widget-root button) has higher specificity than 
   theme class selectors (.elementor-kit-10 button), so we don't need !important
   for properties that components set via inline styles. Keep !important only
   for cosmetic resets that are never set inline (appearance, text-shadow, background-image). */
#boostbot-widget-root button {
  /* Reset common button styles that themes often override */
  /* These don't use !important so inline styles can override them */
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  line-height: inherit;
  box-shadow: none;
  /* These use !important because components never set them inline */
  text-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  /* Padding/border/color: removed !important so inline styles win */
  padding: 0;
  border: none;
  color: inherit;
  /* Background reset */
  background-color: transparent;
}

/* -------------------------------------------------------------------------- */
/* Chat bubble protection                                                     */
/* -------------------------------------------------------------------------- */
/* The bubble uses a gradient background. Because we reset `button` to
   `background-image: none !important`, we must explicitly re-enable it for
   `.bb-chat-bubble` using CSS variables set inline (dynamic styles). */
#boostbot-widget-root .bb-chat-bubble {
  background-color: var(--bb-chat-bubble-bg-color, var(--boostbot-primary)) !important;
  background-image: var(--bb-chat-bubble-bg-image, none) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  /* Explicit padding control - bubble uses width/height for sizing */
  padding: 0 !important;
  /* Restore border for bubble (global button reset removes it) */
  border: var(--bb-chat-bubble-border, none) !important;
}

/* SVG icon protection - prevent theme from affecting icons */
#boostbot-widget-root button svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  /* Don't force svg to inherit button dimensions; allow Lucide's inline size (width/height) to work. */
  width: auto !important;
  height: auto !important;
}

/* Ensure button contents aren't replaced by theme */
#boostbot-widget-root button::before,
#boostbot-widget-root button::after {
  content: none !important;
  display: none !important;
}

/* Send button specific isolation */
#boostbot-widget-root button[aria-label*="Send"],
#boostbot-widget-root button[aria-label*="send"],
#boostbot-widget-root button[aria-label*="שלח"] {
  /* Ensure inline styles take precedence */
  margin: 0 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
}

/* Mobile Full Screen Mode */
@media (max-width: 639px) {
  .boostbot-window-mobile {
    position: fixed !important;
    top: 0 !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }
}

/* Gradient backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--boostbot-primary) 0%, var(--boostbot-primary-dark) 100%);
}

/* User message gradient */
.bg-gradient-user {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

/* Smooth transitions */
#boostbot-widget-root * {
  transition-property: color, background-color, border-color, transform, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* HTML Content Styling - for bot messages with HTML */
#boostbot-widget-root .html-content {
  color: #374151;
}

#boostbot-widget-root .html-content div {
  margin-bottom: 10px;
  border-radius: 15px;
  overflow: hidden;
}

#boostbot-widget-root .html-content strong,
#boostbot-widget-root .html-content b {
  font-weight: 600;
}

#boostbot-widget-root .html-content em,
#boostbot-widget-root .html-content i {
  font-style: italic;
}

#boostbot-widget-root .html-content a {
  color: var(--boostbot-primary);
  text-decoration: underline;
}

#boostbot-widget-root .html-content a:hover {
  opacity: 0.8;
}

#boostbot-widget-root .html-content ul,
#boostbot-widget-root .html-content ol {
  padding-inline-start: 20px;
  margin: 8px 0;
}

#boostbot-widget-root .html-content li {
  margin-bottom: 4px;
}

#boostbot-widget-root .html-content p {
  margin-bottom: 8px;
}

#boostbot-widget-root .html-content p:last-child {
  margin-bottom: 0;
}

