/* Carzuri AI Chatbot - Official Stylesheet */

/* Design System Variables with Fallbacks */
:root {
  /* --carzuri-navy-dark removed: Core already defines this token with the
     same meaning. This file used to redeclare it locally, which silently
     fought Core's real value for the WHOLE SITE (not just this widget)
     depending on plugin load order. Removing it lets the var() references
     below fall through to Core's one real token, keeping the original
     value only as a fallback for when Core isn't active. */
  --carzuri-navy-light: #1E293B;
  /* --carzuri-gold removed, same reason as --carzuri-navy-dark above.
     It was never actually read via var() anywhere in this file. */
  --carzuri-bg-light: #F8FAFC;
  --carzuri-chatbot-border: #E2E8F0;
  --carzuri-text-dark: #0F172A;
  --carzuri-text-muted: #64748B;
  --carzuri-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.2), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
}

/* Explicit SVG Icon Sizing to Prevent Astra Theme Collapse */
.carzuri-icon-svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* Floating Launcher Button - Bottom Right (Avoids Top-Right Notification Bell & Mobile Nav) */
.carzuri-chatbot-container {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 999999 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif !important;
  box-sizing: border-box !important;
}

.carzuri-chat-trigger-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background-color: var(--carzuri-navy-dark, #0F172A) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--carzuri-gold, #D4AF37) !important;
  padding: 12px 20px !important;
  border-radius: 9999px !important;
  box-shadow: var(--carzuri-shadow) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  outline: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  position: relative !important;
}

.carzuri-chat-trigger-btn:hover {
  background-color: var(--carzuri-navy-light, #1E293B) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 25px 30px -5px rgba(15, 23, 42, 0.3) !important;
}

.carzuri-trigger-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--carzuri-gold, #D4AF37) !important;
}

.carzuri-unread-dot {
  width: 10px !important;
  height: 10px !important;
  background-color: #10B981 !important;
  border: 2px solid var(--carzuri-navy-dark, #0F172A) !important;
  border-radius: 50% !important;
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
}

/* Chat Expanded Panel */
.carzuri-chat-panel-box {
  position: absolute !important;
  bottom: 64px !important;
  right: 0 !important;
  width: 410px !important;
  max-width: calc(100vw - 32px) !important;
  height: 600px !important;
  max-height: calc(100vh - 120px) !important;
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 1px solid var(--carzuri-chatbot-border, #E2E8F0) !important;
  box-shadow: var(--carzuri-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.carzuri-hidden {
  display: none !important;
}

/* Chat Header */
.carzuri-chat-header {
  background: var(--carzuri-navy-dark, #0F172A) !important;
  color: #FFFFFF !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 2px solid var(--carzuri-gold, #D4AF37) !important;
}

.carzuri-chat-header-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.carzuri-avatar-circle {
  width: 38px !important;
  height: 38px !important;
  background: rgba(var(--carzuri-gold-rgb, 212, 175, 55), 0.15) !important;
  border: 1px solid var(--carzuri-gold, #D4AF37) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--carzuri-gold, #D4AF37) !important;
  flex-shrink: 0 !important;
}

.carzuri-chat-title {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}

.carzuri-chat-subtitle {
  margin: 4px 0 0 0 !important;
  font-size: 11px !important;
  color: #94A3B8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.carzuri-online-indicator {
  width: 6px !important;
  height: 6px !important;
  background-color: #10B981 !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.carzuri-chat-close-btn {
  background: transparent !important;
  border: none !important;
  color: #94A3B8 !important;
  cursor: pointer !important;
  padding: 4px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.carzuri-chat-close-btn:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Chat Messages Area */
.carzuri-chat-body {
  flex: 1 !important;
  padding: 16px !important;
  overflow-y: auto !important;
  background: var(--carzuri-bg-light, #F8FAFC) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.carzuri-chat-msg {
  display: flex !important;
  flex-direction: column !important;
  max-width: 88% !important;
}

.carzuri-msg-bot {
  align-self: flex-start !important;
}

.carzuri-msg-user {
  align-self: flex-end !important;
}

.carzuri-msg-content {
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.carzuri-msg-bot .carzuri-msg-content {
  background: #FFFFFF !important;
  color: var(--carzuri-text-dark, #0F172A) !important;
  border: 1px solid var(--carzuri-chatbot-border, #E2E8F0) !important;
  border-top-left-radius: 2px !important;
}

.carzuri-msg-user .carzuri-msg-content {
  background: var(--carzuri-navy-dark, #0F172A) !important;
  color: #FFFFFF !important;
  border-top-right-radius: 2px !important;
}

.carzuri-msg-content p {
  margin: 0 0 8px 0 !important;
}

.carzuri-msg-content p:last-child {
  margin-bottom: 0 !important;
}

/* Quick Prompts Chips */
.carzuri-quick-prompts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.carzuri-prompt-btn {
  background: #FEF3C7 !important;   /* hardcoded, not var — per project's CSS-variable rule */
  color: #0F172A !important;        /* was #C19B26 — navy gives ~15:1 contrast, easily readable */
  border: 1px solid rgba(var(--carzuri-gold-rgb, 212, 175, 55), 0.3) !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.carzuri-prompt-btn:hover {
  background: var(--carzuri-gold, #D4AF37) !important;
  color: #FFFFFF !important;
}

/* Action Button in Chat (Contact Dealer) */
.carzuri-action-box {
  margin-top: 10px !important;
  padding: 12px !important;
  background: #FFFBEB !important;
  border: 1px solid #FCD34D !important;
  border-radius: 10px !important;
}

.carzuri-dealer-contact-btn {
  width: 100% !important;
  background: var(--carzuri-gold, #D4AF37) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: background 0.2s ease !important;
}

.carzuri-dealer-contact-btn:hover {
  background: var(--carzuri-gold-dark, #C19B26) !important;
}

/* Inline Inquiry Form Inside Chat */
.carzuri-inquiry-form-card {
  margin-top: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--carzuri-gold, #D4AF37) !important;
  border-radius: 10px !important;
  padding: 14px !important;
}

.carzuri-inquiry-form-card h4 {
  margin: 0 0 10px 0 !important;
  font-size: 13px !important;
  color: var(--carzuri-navy-dark, #0F172A) !important;
  font-weight: 700 !important;
}

.carzuri-form-group {
  margin-bottom: 8px !important;
}

/* Explicit Input Padding !important against Astra Theme Override */
.carzuri-field-input {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid var(--carzuri-chatbot-border, #E2E8F0) !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  color: var(--carzuri-text-dark, #0F172A) !important;
}

.carzuri-field-input:focus {
  outline: none !important;
  border-color: var(--carzuri-gold, #D4AF37) !important;
}

.carzuri-submit-inquiry-btn {
  width: 100% !important;
  background: var(--carzuri-navy-dark, #0F172A) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--carzuri-gold, #D4AF37) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin-top: 4px !important;
}

/* Chat Input Row */
.carzuri-chat-footer {
  padding: 12px 16px !important;
  background: #FFFFFF !important;
  border-top: 1px solid var(--carzuri-chatbot-border, #E2E8F0) !important;
}

.carzuri-chat-input-row {
  display: flex !important;
  gap: 8px !important;
}

.carzuri-chat-field {
  flex: 1 !important;
  padding: 10px 14px !important;
  border: 1px solid var(--carzuri-chatbot-border, #E2E8F0) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
}

.carzuri-chat-field:focus {
  outline: none !important;
  border-color: var(--carzuri-gold, #D4AF37) !important;
}

.carzuri-chat-send-btn {
  background: var(--carzuri-gold, #D4AF37) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease !important;
}

.carzuri-chat-send-btn:hover {
  background: var(--carzuri-gold-dark, #C19B26) !important;
}

.carzuri-footer-tag {
  font-size: 10px !important;
  color: var(--carzuri-text-muted, #64748B) !important;
  text-align: center !important;
  margin-top: 6px !important;
}

/* Mobile Responsiveness (~375px) */
@media (max-width: 480px) {
  .carzuri-chatbot-container {
    bottom: 16px !important;
    right: 16px !important;
  }
  
  .carzuri-chat-panel-box {
    width: calc(100vw - 32px) !important;
    right: 0 !important;
    bottom: 56px !important;
    height: calc(100vh - 100px) !important;
    max-height: 560px !important;
  }

  .carzuri-trigger-label {
    display: none !important;
  }
}