/* Tailwind customizations and additional styles */

/* Basic scrollbar styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
.dark ::-webkit-scrollbar-track { background: #2d3748; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Modal styles */
#aiModal {
    opacity: 0; /* Ensures it starts invisible */
    transform: translateY(20px); /* Ensures it starts slightly down for slide-up */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Smooth transition */
}
#aiModal.hidden { 
    display: none !important; /* Added !important for robustness */
    opacity: 0; /* Ensure opacity is 0 when hidden */
    transform: translateY(20px); /* Ensure transform is reset when hidden */
}

/* Spinner animation */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
    border: 4px solid rgba(0, 0, 0, .1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #4f46e5;
    animation: spin 1s ease infinite;
}
.dark .spinner { border-left-color: #818cf8; }

/* Fade-in animation for sections */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animated banner specific styles */
.animated-banner {
    background: linear-gradient(90deg, #4f46e5, #8b5cf6, #4f46e5);
    background-size: 200% 100%;
    animation: gradient-shift 10s ease infinite;
}