/* Custom styles to complement Tailwind */
.animate-bounce {
  animation: bounce 1.4s infinite;
}

.animate-bounce:nth-child(2) {
  animation-delay: 0.2s;
}

.animate-bounce:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(-3px);
  }
}

/* Smooth scrolling for chat container */
#chat-container {
  scroll-behavior: smooth;
}

/* Custom scrollbar for chat container - desktop only */
@media (min-width: 768px) {
  #chat-container::-webkit-scrollbar {
    width: 6px;
  }

  #chat-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  #chat-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }

  #chat-container::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
  }
}

/* Mobile-first focus states */
input:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

@media (min-width: 768px) {
  input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
}

/* Button hover effects - desktop only */
@media (min-width: 768px) {
  button:hover {
    transform: translateY(-1px);
  }

  button:active {
    transform: translateY(0);
  }
}

/* Ensure mobile viewport handling */
@media (max-width: 640px) {
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }
  
  /* Ensure chat messages don't overflow */
  .break-words {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Better touch targets */
  button, input {
    min-height: 44px;
  }
}

/* Fix viewport height issues on mobile */
.min-h-screen {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for modern browsers */
}