/* Custom Styles that extend Tailwind */

.glass-panel {
    background: rgba(17, 24, 39, 0.7); /* gray-900 with opacity */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Custom glow effect */
.glow-effect {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); /* Blue-500 glow */
}

/* Animations for transitioning questions */
.animate-fade-out {
    animation: fadeOut 0.3s forwards ease-in;
}

.animate-fade-in-up {
    animation: fadeInUp 0.4s forwards ease-out;
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Smooth color transitions for dynamic borders based on confidence */
.border-confidence-high {
    border-color: rgba(34, 197, 94, 0.5); /* green-500 */
    background: rgba(34, 197, 94, 0.05);
}

.border-confidence-medium {
    border-color: rgba(234, 179, 8, 0.5); /* yellow-500 */
    background: rgba(234, 179, 8, 0.05);
}

.border-confidence-low {
    border-color: rgba(239, 68, 68, 0.5); /* red-500 */
    background: rgba(239, 68, 68, 0.05);
}