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

:root {
    --primary: #3b82f6;
    --primary-hover: #2563eb;
}

.dark {
    color-scheme: dark;
}

/* Chat message styling */
.chat-message {
    @apply p-3 rounded-lg max-w-[80%];
}

.user-message {
    @apply bg-blue-100 dark:bg-blue-900 ml-auto;
}

.ai-message {
    @apply bg-gray-100 dark:bg-gray-700 mr-auto;
}

/* Typing indicator */
.typing-indicator {
    @apply flex items-center space-x-1 bg-gray-100 dark:bg-gray-700 p-2 rounded-lg w-fit;
}

.typing-dot {
    @apply w-2 h-2 bg-gray-500 rounded-full;
    animation: typingAnimation 1.4s infinite ease-in-out;
}

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

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

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

@keyframes typingAnimation {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-5px);
    }
}

/* Smooth transitions */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-500;
}