style.css

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

/* Custom Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 4px;
}

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

/* Message styling */
.user-message {
    @apply ml-auto max-w-[85%] sm:max-w-[75%];
}

.assistant-message {
    @apply max-w-[85%] sm:max-w-[75%];
}

/* Status bar colors */
#status-bar.success {
    @apply bg-green-500;
}

#status-bar.error {
    @apply bg-red-500;
}

#status-bar.loading {
    @apply bg-blue-500;
}

/* Animation for typing indicator */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .user-message, .assistant-message {
        @apply max-w-full;
    }
    
    #example-prompts .grid {
        @apply grid-cols-1;
    }
    
    footer .flex-col {
        @apply gap-2;
    }
    
    footer button {
        @apply w-full justify-center;
    }
}