/**
 * Dify Chatbot Widget Styles
 * Custom styling for the Dify chatbot integration
 */

/* Force light theme - override dark mode colors */
#dify-chatbot-bubble-window,
#dify-chatbot-bubble-window *,
#dify-chatbot-bubble-window *::before,
#dify-chatbot-bubble-window *::after {
  color-scheme: light !important;
}

/* Light background for chat window */
#dify-chatbot-bubble-window {
  background-color: #ffffff !important;
}

/* Light backgrounds for messages area */
#dify-chatbot-bubble-window [class*="message"],
#dify-chatbot-bubble-window [class*="chat"],
#dify-chatbot-bubble-window [class*="content"] {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

/* Bot messages - light background */
#dify-chatbot-bubble-window [class*="bot"],
#dify-chatbot-bubble-window [class*="assistant"],
#dify-chatbot-bubble-window [class*="message"]:not([class*="user"]) {
  background-color: #f1f3f4 !important;
  color: #212529 !important;
}

/* User messages - brand color */
#dify-chatbot-bubble-window [class*="user"],
#dify-chatbot-bubble-window [class*="message-user"] {
  background-color: #76a602 !important;
  color: #ffffff !important;
}

/* Input area - light */
#dify-chatbot-bubble-window [class*="input"],
#dify-chatbot-bubble-window textarea,
#dify-chatbot-bubble-window input {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: #dee2e6 !important;
}

#dify-chatbot-bubble-window [class*="input"]::placeholder,
#dify-chatbot-bubble-window textarea::placeholder,
#dify-chatbot-bubble-window input::placeholder {
  color: #6c757d !important;
}

/* Buttons - light theme */
#dify-chatbot-bubble-window button {
  background-color: #ffffff !important;
  color: #212529 !important;
}

#dify-chatbot-bubble-window button[class*="send"],
#dify-chatbot-bubble-window .send-button {
  background-color: #76a602 !important;
  color: #ffffff !important;
}

#dify-chatbot-bubble-window button[class*="send"]:hover,
#dify-chatbot-bubble-window .send-button:hover {
  background-color: #658d02 !important;
}

/* Header - light theme with gradient */
#dify-chatbot-bubble-window header,
#dify-chatbot-bubble-window [class*="header"] {
  background: linear-gradient(135deg, #76a602 0%, #8fb815 100%) !important;
  color: #ffffff !important;
}

/* Footer - light */
#dify-chatbot-bubble-window footer,
#dify-chatbot-bubble-window [class*="footer"] {
  background-color: #ffffff !important;
  border-top-color: #dee2e6 !important;
}

/* Icons and SVGs - light theme colors */
#dify-chatbot-bubble-window svg,
#dify-chatbot-bubble-window i {
  color: #212529 !important;
  fill: #212529 !important;
}

#dify-chatbot-bubble-window header svg,
#dify-chatbot-bubble-window [class*="header"] svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Bubble button positioning and styling */
#dify-chatbot-bubble-button {
  position: fixed !important;
  background: linear-gradient(135deg, #8fb815 0%, #76a602 50%, #547502 100%) !important;
  background-size: 200% 200% !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  box-shadow: 0 4px 12px rgba(118, 166, 2, 0.3) !important;
  transition: box-shadow 0.3s ease, background-position 0.3s ease !important;
  z-index: 9999 !important;
  border-radius: 50% !important;
  /* Pulse animation: 0.5s pulse + 5s wait = 5.5s total cycle */
  animation: dify-shake 5.5s ease-in-out infinite;
}

#dify-chatbot-bubble-button::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: 100% !important;
  right: 0 !important;
  margin-bottom: 8px !important;
  transform: none !important;
  background-color: #333 !important;
  color: #fff !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s, visibility 0.3s !important;
  pointer-events: none !important;
}

#dify-chatbot-bubble-button:hover::after {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Icon size inside the button */
#dify-chatbot-bubble-button svg,
#dify-chatbot-bubble-button img,
#dify-chatbot-bubble-button i {
  width: 32px !important;
  height: 32px !important;
  font-size: 32px !important;
  transition: transform 0.3s ease !important;
}

#dify-chatbot-bubble-button:hover {
  box-shadow: 0 6px 16px rgba(118, 166, 2, 0.4) !important;
  background-position: 100% 0 !important;
  animation-play-state: paused !important;
}

#dify-chatbot-bubble-button:hover svg,
#dify-chatbot-bubble-button:hover img,
#dify-chatbot-bubble-button:hover i {
  transform: scale(1.15) !important;
}

/* Pulse keyframes: zoom in/out at 0-5% of cycle, then wait */
@keyframes dify-shake {
  0%, 9% { transform: scale(1); }
  4.5% { transform: scale(1.1); }
  9.1%, 100% { transform: scale(1); }
}

/* Chat window positioning and styling */
#dify-chatbot-bubble-window {
  position: fixed !important;
  width: 380px !important;
  height: 520px !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 100px) !important;
  border-radius: 16px !important;
  bottom: 24px !important;
  right: 24px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(118, 166, 2, 0.2) !important;
  z-index: 9999 !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  #dify-chatbot-bubble-button {
    bottom: 64px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
  }

  #dify-chatbot-bubble-window {
    width: calc(100vw - 32px) !important;
    height: calc(100vh - 120px) !important;
    bottom: 64px !important;
    right: 16px !important;
    left: 16px !important;
    max-width: none !important;
    border-radius: 12px !important;
  }
}