/* Positioning you added already */
#session-alerts {
    font-size: 1.1rem;
    position: absolute;
    top: 90px;
    right: 0px;
    z-index: 999;
}

#session-alerts .alert i{
    font-size: 1.5rem;
    margin-right: 10px;
}

/* Initial hidden state for fade-in */
#session-alerts .alert {
    opacity: 0;
    transform: translateY(-6px);
    display: flex;
}

/* Fade-in transition */
#session-alerts .alert.enter {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s ease, transform 1s ease;
}

/* Existing slow fade-out (keep yours; example shown) */
#session-alerts .alert.fade-out {
    opacity: 0;
    transition: opacity 1.0s ease; /* match your chosen duration */
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #session-alerts .alert,
    #session-alerts .alert.enter,
    #session-alerts .alert.fade-out {
        transition: none !important;
        transform: none !important;
    }
}