@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

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

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

/* Base styles */
* {
  box-sizing: border-box;
}

body {
  @apply bg-gray-50 text-gray-900 antialiased;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom utility classes */
@layer components {
  .btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-lg font-medium
           hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
           disabled:opacity-50 disabled:cursor-not-allowed
           transition-colors duration-200;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-800 px-4 py-2 rounded-lg font-medium
           hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2
           disabled:opacity-50 disabled:cursor-not-allowed
           transition-colors duration-200;
  }

  .input-field {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
           placeholder-gray-400 transition-all duration-200;
  }

  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100;
  }

  .message-user {
    @apply bg-blue-600 text-white rounded-2xl rounded-br-md px-4 py-2;
    display: inline-block;
    max-width: 100%;
    min-width: fit-content;
    word-break: keep-all;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .message-assistant {
    @apply bg-gray-100 text-gray-900 rounded-2xl rounded-bl-md px-4 py-2;
    display: inline-block;
    max-width: 100%;
    min-width: fit-content;
    word-break: keep-all;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .whitespace-nowrap-for-short {
    display: inline;
    white-space: normal;
  }
}

/* Animation for loading dots */
@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
}

.loading-dot {
  animation: bounce 1.4s infinite ease-in-out both;
}

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

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