.session-timeout-warning {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1080;
    width: min(420px, calc(100vw - 2rem));
    border: 1px solid var(--border-color);
    background: white;
    box-shadow: var(--shadow);
}

.session-timeout-warning .fw-semibold {
    font-size: 1rem;
    color: var(--header-color);
}

.session-timeout-warning .text-muted {
    color: var(--text-muted-color) !important;
}

.session-timeout-warning #session-timeout-countdown {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--primary-color);
}

.session-timeout-warning.is-visible {
    animation: sessionWarningIn 0.2s ease-out;
}

@keyframes sessionWarningIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.session-timeout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
}

.session-timeout-warning.is-urgent #session-timeout-countdown {
    animation: sessionCountdownPulse 1s ease-in-out infinite;
}

@keyframes sessionCountdownPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.06);
    }
}