/* Custom styles that extend Tailwind */
@layer components {
    .file-item {
        @apply bg-purple-50 border border-purple-200 rounded-lg p-4 flex items-center justify-between hover:bg-purple-100 transition-colors duration-200;
    }
    
    .file-icon {
        @apply w-10 h-10 flex items-center justify-center rounded-lg;
    }
    
    .progress-bar {
        @apply h-2 bg-purple-200 rounded-full overflow-hidden;
    }
    
    .progress-fill {
        @apply h-full bg-purple-600 transition-all duration-300;
    }
}

/* Animation for magic button */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(124, 58, 237, 0);
    }
}
.animate-pulse-magic {
    animation: pulse 2s infinite;
}

/* API response styling */
.api-response {
    @apply bg-white rounded-lg shadow-sm p-4 mb-4;
}

.api-response-error {
    @apply bg-red-50 border-l-4 border-red-500 p-4;
}

.api-response-success {
    @apply bg-green-50 border-l-4 border-green-500 p-4;
}