/* ==========================================================================
   MAGGIE CHAT WIDGET STYLES (ISOLATED) • NURTURED SKIN
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Floating Trigger Button with Butter-Smooth White Beam Orbit
   --------------------------------------------------------------------------- */
#chat-widget-button {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 99999 !important;
  
  background-color: #2c3e3a !important;
  color: #f4efeb !important;
  border-radius: 30px !important;
  padding: 12px 22px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  
  border: none !important;
  overflow: hidden !important; /* Traps light beam inside pill border */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 15px rgba(193, 127, 104, 0.25) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* ⚪ Circulating Pure White Specular Light Beam (Soft Feathered Transition) */
#chat-widget-button::before {
  content: '' !important;
  position: absolute !important;
  top: -150% !important;
  left: -50% !important;
  width: 200% !important;
  height: 400% !important;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 180deg,
    rgba(193, 127, 104, 0.15) 230deg,
    #c17f68 280deg,
    rgba(255, 255, 255, 0.5) 330deg,
    rgba(255, 255, 255, 0.9) 350deg,
    transparent 360deg
  ) !important;
  animation: smoothBeamRotate 4s linear infinite !important;
  will-change: transform !important;
  z-index: 1 !important;
}

/* 🛡️ Inner Dark Sage Mask (Creates 2px Light Track) */
#chat-widget-button::after {
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  border-radius: 28px !important;
  background-color: #2c3e3a !important;
  z-index: 2 !important;
  transition: background-color 0.25s ease !important;
}

.chat-btn-content {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #f4efeb !important;
}

#chat-widget-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), 0 0 22px rgba(193, 127, 104, 0.45) !important;
}

#chat-widget-button:hover::after {
  background-color: #354a45 !important;
}

/* Smooth 360° Continuous Orbit Keyframes */
@keyframes smoothBeamRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Unread Notification Badge Counter (Safely Positioned Inside Mask) */
.chat-badge {
  position: absolute !important;
  top: 2px !important;
  right: 8px !important;
  background-color: #a35f49 !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid #2c3e3a !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  z-index: 10 !important;
}

/* ---------------------------------------------------------------------------
   2. Main Chat Overlay Window
   --------------------------------------------------------------------------- */
#chat-widget-window {
  position: fixed !important;
  bottom: 80px !important;
  right: 20px !important;
  width: 360px !important;
  max-width: calc(100vw - 40px) !important;
  height: 520px !important;
  max-height: calc(100vh - 120px) !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(15px) scale(0.95) !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
}

#chat-widget-window.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

/* Header Bar */
.chat-header {
  background-color: #2c3e3a !important;
  color: #f4efeb !important;
  padding: 14px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.chat-title-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.chat-title-box strong {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.chat-status {
  font-size: 0.65rem !important;
  color: #e0a894 !important;
  letter-spacing: 0.8px !important;
  font-weight: 600 !important;
}

#close-chat-btn {
  background: none !important;
  border: none !important;
  color: #f4efeb !important;
  font-size: 1.4rem !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 4px !important;
  opacity: 0.8 !important;
  transition: opacity 0.2s ease !important;
}

#close-chat-btn:hover {
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
   3. Chat Message Stream & Typography
   --------------------------------------------------------------------------- */
.chat-messages {
  flex: 1 !important;
  padding: 16px !important;
  overflow-y: auto !important;
  background-color: #fcfbfa !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.chat-msg {
  max-width: 85% !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 0.85rem !important;
  line-height: 1.65 !important;
  word-wrap: break-word !important;
}

.bot-msg {
  background-color: #f4efeb !important;
  color: #2c3e3a !important;
  align-self: flex-start !important;
  border-bottom-left-radius: 2px !important;
}

.user-msg {
  background-color: #2c3e3a !important;
  color: #ffffff !important;
  align-self: flex-end !important;
  border-bottom-right-radius: 2px !important;
}

.chat-msg strong {
  font-weight: 600 !important;
  color: #1f2d2a !important;
}

.chat-msg a.chat-link {
  color: #a35f49 !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}

.chat-msg a.chat-link:hover {
  color: #2c3e3a !important;
}

/* ---------------------------------------------------------------------------
   4. Quick Chips & Dynamic Follow-Up Buttons
   --------------------------------------------------------------------------- */
.chat-quick-chips,
.dynamic-chips-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.chip-btn,
.dynamic-chip-btn {
  background-color: #ffffff !important;
  border: 1px solid #c17f68 !important;
  color: #2c3e3a !important;
  border-radius: 16px !important;
  padding: 5px 11px !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.chip-btn:hover,
.dynamic-chip-btn:hover {
  background-color: #a35f49 !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   5. Direct CTAs (GlossGenius Booking & Contact)
   --------------------------------------------------------------------------- */
.chat-actions-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 12px !important;
}

.chat-book-btn {
  display: block !important;
  background-color: #a35f49 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 9px 12px !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.chat-book-btn:hover {
  background-color: #2c3e3a !important;
}

.chat-contact-trigger-btn {
  background-color: transparent !important;
  border: 1px solid #2c3e3a !important;
  color: #2c3e3a !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.chat-contact-trigger-btn:hover {
  background-color: #2c3e3a !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   6. Input Bar & Controls
   --------------------------------------------------------------------------- */
.chat-input-area {
  padding: 12px !important;
  background-color: #ffffff !important;
  border-top: 1px solid #eee !important;
  display: flex !important;
  gap: 8px !important;
}

#chat-user-input {
  flex: 1 !important;
  border: 1px solid #ddd !important;
  border-radius: 20px !important;
  padding: 8px 14px !important;
  font-size: 0.82rem !important;
  outline: none !important;
}

#chat-user-input:focus {
  border-color: #c17f68 !important;
}

#send-chat-btn {
  background-color: #2c3e3a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

#send-chat-btn:hover {
  background-color: #a35f49 !important;
}

/* ---------------------------------------------------------------------------
   7. Proactive Scroll-Depth Nudge Bubble
   --------------------------------------------------------------------------- */
.chat-nudge-bubble {
  position: fixed !important;
  bottom: 82px !important;
  right: 20px !important;
  background-color: #2c3e3a !important;
  color: #f4efeb !important;
  padding: 11px 15px !important;
  border-radius: 12px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
  z-index: 99998 !important;
  cursor: pointer !important;
  animation: nudgePop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 250px !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.chat-nudge-bubble.closing {
  opacity: 0 !important;
  transform: translateY(6px) scale(0.95) !important;
  pointer-events: none !important;
}

.chat-nudge-bubble::after {
  content: '' !important;
  position: absolute !important;
  bottom: -6px !important;
  right: 24px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 6px solid #2c3e3a !important;
}

.chat-nudge-close {
  background: none !important;
  border: none !important;
  color: #e0a894 !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 0 0 4px !important;
  opacity: 0.9 !important;
}

.chat-nudge-close:hover {
  opacity: 1 !important;
}

@keyframes nudgePop {
  0% { transform: scale(0.85) translateY(8px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Typing Indicator Animation */
.maggie-typing-indicator {
  font-style: italic !important;
  color: #777 !important;
  font-size: 0.78rem !important;
}

.typing-dots .dot {
  animation: typingDot 1.4s infinite fill-mode-both;
}

.typing-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dots .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
  0% { opacity: 0.2; }
  20% { opacity: 1; }
  100% { opacity: 0.2; }
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  #chat-widget-window {
    width: calc(100vw - 20px) !important;
    right: 10px !important;
    bottom: 75px !important;
    height: 480px !important;
  }

  #chat-widget-button {
    bottom: 15px !important;
    right: 15px !important;
    padding: 10px 16px !important;
    font-size: 0.82rem !important;
  }

  .chat-nudge-bubble {
    left: 12px !important;
    right: 12px !important;
    bottom: 72px !important;
    max-width: none !important;
    width: auto !important;
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
  }

  .chat-nudge-bubble::after {
    display: none !important;
  }

  /* Prevent iOS Safari from auto-zooming the page when the input is focused
     (Safari zooms any text input rendered under 16px) */
  #chat-user-input {
    font-size: 16px !important;
  }

  .chip-btn,
  .dynamic-chip-btn {
    padding: 8px 13px !important;
  }

  #send-chat-btn {
    padding: 10px 18px !important;
  }
}

/* ==========================================================================
   Maggie Header Action Buttons - Reset & Close Button Overrides
   ========================================================================== */
.chat-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#reset-chat-btn,
#close-chat-btn {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  border-radius: 4px !important;
}

#reset-chat-btn:focus-visible,
#close-chat-btn:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

#reset-chat-btn:hover,
#close-chat-btn:hover {
  color: #ffffff !important;
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

#reset-chat-btn svg {
  display: block !important;
  stroke: currentColor !important;
  width: 16px !important;
  height: 16px !important;
}

/* Enlarge header icon tap targets on mobile (placed after the rule above
   so it wins the cascade — both are equal specificity + !important) */
@media (max-width: 480px) {
  #reset-chat-btn,
  #close-chat-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* ---------------------------------------------------------------------------
   Draggable Widget (trigger button + chat window header act as drag handles)
   --------------------------------------------------------------------------- */
.chat-header {
  cursor: grab !important;
}

.chat-header:active {
  cursor: grabbing !important;
}

#reset-chat-btn,
#close-chat-btn {
  cursor: pointer !important;
}

#chat-widget-button.mg-dragging,
#chat-widget-window.mg-dragging {
  cursor: grabbing !important;
  opacity: 0.92 !important;
  transition: none !important;
}