@keyframes bounce-dots {

      0%,
      80%,
      100% {
            transform: scale(0.3);
            opacity: 0.5;
      }

      40% {
            transform: scale(1);
            opacity: 1;
      }
}

.animate-bounce-dots-1 {
      animation: bounce-dots 1.4s ease-in-out infinite both;
      animation-delay: 0s;
}

.animate-bounce-dots-2 {
      animation: bounce-dots 1.4s ease-in-out infinite both;
      animation-delay: 0.15s;
}

.animate-bounce-dots-3 {
      animation: bounce-dots 1.4s ease-in-out infinite both;
      animation-delay: 0.3s;
}

/* Ensure the animation works even with Tailwind's purging */
.typing-dots .dot {
      width: 6px;
      height: 6px;
      background-color: #9ca3af;
      border-radius: 50%;
      display: inline-block;
      margin: 0 1px;
      animation: bounce-dots 1.4s ease-in-out infinite both;
}

.typing-dots .dot:nth-child(1) {
      animation-delay: 0s;
}

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

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

@keyframes slide-in {
      from {
            opacity: 0;
            transform: scale(0.9) translateY(-20px);
      }

      to {
            opacity: 1;
            transform: scale(1) translateY(0);
      }
}

.animate-slide-in {
      animation: slide-in 0.3s ease-out;
}

@keyframes dropdown-slide {
      from {
            opacity: 0;
            transform: translateY(-8px);
      }

      to {
            opacity: 1;
            transform: translateY(0);
      }
}

.animate-dropdown {
      animation: dropdown-slide 0.15s ease-out;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
      width: 6px;
      height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
      background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: #cbd5e1;
      border-radius: 20px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background-color: #94a3b8;
}

/* Message Animation */
@keyframes message-pop {
      0% {
            opacity: 0;
            transform: translateY(10px) scale(0.95);
      }
      100% {
            opacity: 1;
            transform: translateY(0) scale(1);
      }
}

.animate-message {
      animation: message-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Typing Indicator dots */
.typing-dot {
      animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
      animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
      animation-delay: -0.16s;
}

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