/* static/css/session-status.css */

.session-status {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;

    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 36px;
    padding: 7px 14px;

    border: 1px solid #777;
    border-radius: 20px;
    background: #eeeeee;
    color: #222222;

    font-size: 0.9rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.session-status__dot {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border-radius: 50%;
    background: #777777;
}

.session-status[data-state="live"] {
    background: #e6f5e6;
    border-color: #237a23;
    color: #174f17;
}

.session-status[data-state="live"] .session-status__dot {
    background: #21a521;
}

.session-status[data-state="guest"] {
    background: #e8f1ff;
    border-color: #2864a8;
    color: #174576;
}

.session-status[data-state="guest"] .session-status__dot {
    background: #2f79c5;
}

.session-status[data-state="checking"],
.session-status[data-state="stale"] {
    background: #fff4cc;
    border-color: #a37800;
    color: #674d00;
}

.session-status[data-state="checking"] .session-status__dot,
.session-status[data-state="stale"] .session-status__dot {
    background: #e5a900;
}

.session-status[data-state="expired"] {
    background: #9f1d1d;
    border-color: #650000;
    color: #ffffff;
    font-weight: 700;
}

.session-status[data-state="expired"] .session-status__dot {
    background: #ffffff;
}

.session-status[data-state="offline"] {
    background: #333333;
    border-color: #111111;
    color: #ffffff;
}

.session-status[data-state="offline"] .session-status__dot {
    background: #aaaaaa;
}

.session-status__login {
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 12px;
    background: #ffffff;
    color: #7a0000;
    text-decoration: none;
    font-weight: 700;
}

.session-status__login[hidden] {
    display: none;
}

/*
 * The last healthy server response is now old.
 *
 * This does not mean expired. Red remains reserved for a
 * server-confirmed expiry.
 */
#session-status[data-state="stale"] {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}