/**
 * 🎨 MAISON DALÍ FLOATING CHATBOT V3 - CMS THEME OVERRIDE
 * This CSS overrides the default dark/surreal theme with a clean, modern CMS look
 * 
 * Colors:
 * - Primary: #eab308 (yellow-500)  
 * - Background: #ffffff (white)
 * - Chat area: #f9fafb (gray-50)
 * - Header: #1f2937 (gray-800)
 * - Text: #1f2937 (gray-800)
 * - Border: #d1d5db (gray-300)
 * 
 * Changes from original:
 * - White background instead of dark red
 * - Yellow accent instead of gold
 * - Larger, friendlier fonts
 * - Cleaner, more professional appearance
 * - Modern UI/UX patterns
 */

/* ========== CHAT TRIGGER BUTTON ========== */
html body .mdali-floating-chatbot-container .mdali-chat-trigger,
body .mdali-floating-chatbot-container .mdali-chat-trigger,
.mdali-floating-chatbot-container .mdali-chat-trigger {
  background: linear-gradient(135deg, #eab308 0%, #d97706 100%) !important;
  box-shadow: 0 8px 24px rgba(234, 179, 8, 0.4) !important;
  width: 64px !important;
  height: 64px !important;
  font-size: 28px !important;
}

html body .mdali-floating-chatbot-container .mdali-chat-trigger:hover,
body .mdali-floating-chatbot-container .mdali-chat-trigger:hover,
.mdali-floating-chatbot-container .mdali-chat-trigger:hover {
  box-shadow: 0 12px 32px rgba(234, 179, 8, 0.5) !important;
  transform: scale(1.05) !important;
}

/* Animation with yellow shadow */
@keyframes mdali-pulse-cms {
  0%, 100% { 
    transform: translateY(0) !important;
    box-shadow: 0 8px 24px rgba(234, 179, 8, 0.4) !important;
  }
  50% { 
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(234, 179, 8, 0.5) !important;
  }
}

html body .mdali-floating-chatbot-container .mdali-chat-trigger,
body .mdali-floating-chatbot-container .mdali-chat-trigger,
.mdali-floating-chatbot-container .mdali-chat-trigger {
  animation: mdali-pulse-cms 3s ease-in-out infinite !important;
}

/* ========== CHAT POPUP WINDOW ========== */
html body .mdali-floating-chatbot-container .mdali-chat-popup,
body .mdali-floating-chatbot-container .mdali-chat-popup,
.mdali-floating-chatbot-container .mdali-chat-popup {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  width: 400px !important;
  height: 620px !important;
}

/* ========== HEADER ========== */
html body .mdali-floating-chatbot-container .mdali-chat-header,
body .mdali-floating-chatbot-container .mdali-chat-header,
.mdali-floating-chatbot-container .mdali-chat-header {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  border-bottom: 2px solid #eab308 !important;
  padding: 18px 20px !important;
}

html body .mdali-floating-chatbot-container .mdali-restaurant-title,
body .mdali-floating-chatbot-container .mdali-restaurant-title,
.mdali-floating-chatbot-container .mdali-restaurant-title {
  color: #eab308 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

html body .mdali-floating-chatbot-container .mdali-restaurant-location,
body .mdali-floating-chatbot-container .mdali-restaurant-location,
.mdali-floating-chatbot-container .mdali-restaurant-location {
  color: #f3f4f6 !important;
  font-size: 13px !important;
  opacity: 0.95 !important;
}

html body .mdali-floating-chatbot-container .mdali-close-btn,
body .mdali-floating-chatbot-container .mdali-close-btn,
.mdali-floating-chatbot-container .mdali-close-btn {
  color: #eab308 !important;
  background: none !important;
}

html body .mdali-floating-chatbot-container .mdali-close-btn:hover,
body .mdali-floating-chatbot-container .mdali-close-btn:hover,
.mdali-floating-chatbot-container .mdali-close-btn:hover {
  background: rgba(234, 179, 8, 0.15) !important;
}

/* ========== MESSAGES CONTAINER ========== */
html body .mdali-floating-chatbot-container .mdali-messages-container,
body .mdali-floating-chatbot-container .mdali-messages-container,
.mdali-floating-chatbot-container .mdali-messages-container {
  background: #f9fafb !important;
  padding: 20px !important;
  scrollbar-color: #eab308 #f3f4f6 !important;
}

html body .mdali-floating-chatbot-container .mdali-messages-container::-webkit-scrollbar-thumb,
body .mdali-floating-chatbot-container .mdali-messages-container::-webkit-scrollbar-thumb,
.mdali-floating-chatbot-container .mdali-messages-container::-webkit-scrollbar-thumb {
  background: #eab308 !important;
}

html body .mdali-floating-chatbot-container .mdali-messages-container::-webkit-scrollbar-track,
body .mdali-floating-chatbot-container .mdali-messages-container::-webkit-scrollbar-track,
.mdali-floating-chatbot-container .mdali-messages-container::-webkit-scrollbar-track {
  background: #f3f4f6 !important;
}

/* ========== BOT MESSAGES ========== */
html body .mdali-floating-chatbot-container .mdali-bot-message,
body .mdali-floating-chatbot-container .mdali-bot-message,
.mdali-floating-chatbot-container .mdali-bot-message {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  padding: 14px 16px !important;
  border-radius: 16px 16px 16px 4px !important;
  max-width: 290px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

html body .mdali-floating-chatbot-container .mdali-bot-message strong,
body .mdali-floating-chatbot-container .mdali-bot-message strong,
.mdali-floating-chatbot-container .mdali-bot-message strong {
  color: #1f2937 !important;
  font-weight: 600 !important;
}

/* ========== USER MESSAGES ========== */
html body .mdali-floating-chatbot-container .mdali-user-message,
body .mdali-floating-chatbot-container .mdali-user-message,
.mdali-floating-chatbot-container .mdali-user-message {
  background: linear-gradient(135deg, #eab308 0%, #d97706 100%) !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  border-radius: 16px 16px 4px 16px !important;
  max-width: 250px !important;
  box-shadow: 0 2px 8px rgba(234, 179, 8, 0.3) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* ========== OPTIONS/BUTTONS ========== */
html body .mdali-floating-chatbot-container .mdali-option-btn,
body .mdali-floating-chatbot-container .mdali-option-btn,
.mdali-floating-chatbot-container .mdali-option-btn {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fbbf24 !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

html body .mdali-floating-chatbot-container .mdali-option-btn:hover,
body .mdali-floating-chatbot-container .mdali-option-btn:hover,
.mdali-floating-chatbot-container .mdali-option-btn:hover {
  background: #fde68a !important;
  border-color: #f59e0b !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.25) !important;
}

/* ========== SUGGESTIONS ========== */
html body .mdali-floating-chatbot-container .mdali-suggestion-chip,
body .mdali-floating-chatbot-container .mdali-suggestion-chip,
.mdali-floating-chatbot-container .mdali-suggestion-chip {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fbbf24 !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

html body .mdali-floating-chatbot-container .mdali-suggestion-chip:hover,
body .mdali-floating-chatbot-container .mdali-suggestion-chip:hover,
.mdali-floating-chatbot-container .mdali-suggestion-chip:hover {
  background: #fde68a !important;
  border-color: #f59e0b !important;
  box-shadow: 0 2px 8px rgba(234, 179, 8, 0.2) !important;
}

/* ========== INPUT CONTAINER ========== */
html body .mdali-floating-chatbot-container .mdali-input-container,
body .mdali-floating-chatbot-container .mdali-input-container,
.mdali-floating-chatbot-container .mdali-input-container {
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 16px !important;
}

html body .mdali-floating-chatbot-container .mdali-text-input,
body .mdali-floating-chatbot-container .mdali-text-input,
.mdali-floating-chatbot-container .mdali-text-input {
  background: #f9fafb !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
  padding: 11px 16px !important;
  border-radius: 22px !important;
  font-size: 14px !important;
}

html body .mdali-floating-chatbot-container .mdali-text-input:focus,
body .mdali-floating-chatbot-container .mdali-text-input:focus,
.mdali-floating-chatbot-container .mdali-text-input:focus {
  border-color: #eab308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
  background: #ffffff !important;
}

html body .mdali-floating-chatbot-container .mdali-text-input::placeholder,
body .mdali-floating-chatbot-container .mdali-text-input::placeholder,
.mdali-floating-chatbot-container .mdali-text-input::placeholder {
  color: #9ca3af !important;
}

/* ========== SEND BUTTON ========== */
html body .mdali-floating-chatbot-container .mdali-send-btn,
body .mdali-floating-chatbot-container .mdali-send-btn,
.mdali-floating-chatbot-container .mdali-send-btn {
  background: linear-gradient(135deg, #eab308 0%, #d97706 100%) !important;
  color: #ffffff !important;
  width: 42px !important;
  height: 42px !important;
  box-shadow: 0 2px 8px rgba(234, 179, 8, 0.3) !important;
}

html body .mdali-floating-chatbot-container .mdali-send-btn:hover,
body .mdali-floating-chatbot-container .mdali-send-btn:hover,
.mdali-floating-chatbot-container .mdali-send-btn:hover {
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.4) !important;
  transform: scale(1.05) !important;
}

/* ========== TYPING INDICATOR ========== */
html body .mdali-floating-chatbot-container .mdali-typing-dot,
body .mdali-floating-chatbot-container .mdali-typing-dot,
.mdali-floating-chatbot-container .mdali-typing-dot {
  background: #eab308 !important;
}

/* ========== MOBILE RESPONSIVENESS ========== */
@media (max-width: 480px) {
  html body .mdali-floating-chatbot-container .mdali-chat-popup,
  body .mdali-floating-chatbot-container .mdali-chat-popup,
  .mdali-floating-chatbot-container .mdali-chat-popup {
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 90px) !important;
    right: 8px !important;
    bottom: 75px !important;
  }

  html body .mdali-floating-chatbot-container .mdali-chat-trigger,
  body .mdali-floating-chatbot-container .mdali-chat-trigger,
  .mdali-floating-chatbot-container .mdali-chat-trigger {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
  }
}

/* ========== ENSURE ALL INLINE STYLES ARE OVERRIDDEN ========== */
html body .mdali-floating-chatbot-container [style*="background"],
body .mdali-floating-chatbot-container [style*="background"] {
  /* This will be overridden by the specific selectors above */
}

/* Force override any inline !important styles */
.mdali-floating-chatbot-container .mdali-chat-trigger[style] {
  background: linear-gradient(135deg, #eab308 0%, #d97706 100%) !important;
}

.mdali-floating-chatbot-container .mdali-chat-popup[style] {
  background: #ffffff !important;
}

.mdali-floating-chatbot-container .mdali-chat-header[style] {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
}

.mdali-floating-chatbot-container .mdali-messages-container[style] {
  background: #f9fafb !important;
}

.mdali-floating-chatbot-container .mdali-bot-message[style] {
  background: #ffffff !important;
  color: #1f2937 !important;
}

.mdali-floating-chatbot-container .mdali-user-message[style] {
  background: linear-gradient(135deg, #eab308 0%, #d97706 100%) !important;
  color: #ffffff !important;
}

.mdali-floating-chatbot-container .mdali-input-container[style] {
  background: #ffffff !important;
}

.mdali-floating-chatbot-container .mdali-text-input[style] {
  background: #f9fafb !important;
  color: #1f2937 !important;
}

.mdali-floating-chatbot-container .mdali-send-btn[style] {
  background: linear-gradient(135deg, #eab308 0%, #d97706 100%) !important;
}