/* Chat Widget Styles */

/* Ensure chat widget container is positioned correctly */
#chat-widget-container {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  pointer-events: auto !important;
  /* Ensure it's not affected by flex containers */
  flex: none !important;
  transform: none !important;
  /* Additional overrides for positioning conflicts */
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  float: none !important;
  display: block !important;
  isolation: isolate;                 /* new: its own stacking context */
  z-index: 2147483647 !important;     /* max safe z-index */
}

/* Custom animations */
@keyframes chat-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
}

.chat-animate-bounce {
    animation: chat-bounce 1s infinite;
}

@keyframes chat-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.chat-animate-pulse {
    animation: chat-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Ensure popups appear above button with proper spacing */
#chat-options,
#web-chat-interface {
  position: fixed !important;
  right: 1.5rem !important;                       /* aligns with FAB */
  bottom: calc(1.5rem + 64px) !important;         /* sits just above FAB */
  margin: 0 !important;
  z-index: 2147483646 !important;                 /* options under chat sheet */
  box-shadow: 0 10px 25px rgba(0,0,0,.2) !important;
  pointer-events: auto !important;
  /* Prevent paint leaks */
  contain: layout paint !important;
}

/* Grid + scrolling (bulletproof) */
#web-chat-interface {
  grid-template-rows: auto 1fr auto !important;
  height: clamp(520px, 70vh, 640px) !important;
  max-height: 80vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Mobile adjustments only for sizing, not positioning */
@media (max-width: 640px) {
  #chat-options, #web-chat-interface {
    width: calc(100vw - 3rem) !important;
    max-width: calc(100vw - 3rem) !important;
  }
}

/* Scrollbar styling for chat messages */
#chat-messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

#chat-messages::-webkit-scrollbar {
    width: 4px;
}

#chat-messages::-webkit-scrollbar-track {
    background: #f7fafc;
}

#chat-messages::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 2px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Widget specific bounce animation for typing indicators */
.typing-bounce {
    animation: chat-bounce 1s infinite;
}

.typing-bounce:nth-child(2) {
    animation-delay: 0.1s;
}

.typing-bounce:nth-child(3) {
    animation-delay: 0.2s;
}