/* ===============================
   Chatbot Panel Animations
=============================== */
#chatbot-panel.show {
  opacity: 1 !important;
  transform: scale(1) !important;
}

@keyframes chatbot-pop {
  0%   { transform: scale(0.8) translateY(30px); opacity: 0; }
  60%  { transform: scale(1.05) translateY(-5px); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}

#chatbot-panel.dance {
  animation: chatbot-pop 0.6s ease-out;
}

/* ===============================
   Typing Indicator (3 dots)
=============================== */
.dot {
  width: 6px;
  height: 6px;
  background-color: #555;
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1.2s infinite;
}

.dot1 { animation-delay: 0s; }
.dot2 { animation-delay: 0.2s; }
.dot3 { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}

/* ===============================
   Chat Bubble Styling Tweaks
=============================== */
#chat-messages .bg-gray-100,
#chat-messages .bg-red-600 {
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
}

#chat-messages {
  scroll-behavior: smooth; /* auto-scroll smoothly */
}

/* ===============================
   Message Fade-in Animation
=============================== */
@keyframes message-fade-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

#chat-messages > div {
  animation: message-fade-in 0.4s ease forwards;
}


/* Futuristic typing dots */
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(45deg, #6d28d9, #3b82f6);
  animation: bounce 1.4s infinite;
}
.dot.dot1 { animation-delay: 0s; }
.dot.dot2 { animation-delay: 0.2s; }
.dot.dot3 { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.6; }
  40% { transform: scale(1.2); opacity: 1; }
}

/* Animations */
.animate-fade-in { animation: fadeIn 0.3s ease; }
.animate-slide-in { animation: slideIn 0.35s ease; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}