#components-reconnect-modal.l2-reconnect {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: transparent;
    backdrop-filter: blur(3px) saturate(0.9);
    -webkit-backdrop-filter: blur(3px) saturate(0.9);
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.l2-reconnect__card {
    position: relative;
    width: min(380px, 100%);
    padding: 28px 28px 22px;
    border-radius: 8px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--mud-palette-surface, #1d1c1c) 96%, var(--mud-palette-warning, #d97706) 4%) 0%,
        var(--mud-palette-surface, #1d1c1c) 100%);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning, #d97706) 35%, var(--mud-palette-divider, #444) 65%);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6),
                0 4px 14px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 color-mix(in srgb, var(--mud-palette-warning, #d97706) 35%, transparent);
    color: var(--mud-palette-text-primary, #e8e3d5);
    text-align: center;
    pointer-events: auto;
    animation: l2-reconnect-card-in 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.l2-reconnect__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        color-mix(in srgb, var(--mud-palette-warning, #d97706) 80%, transparent) 18%,
        var(--mud-palette-warning, #d97706) 50%,
        color-mix(in srgb, var(--mud-palette-warning, #d97706) 80%, transparent) 82%,
        transparent 100%);
    opacity: 0.85;
}

.l2-reconnect__spinner {
    display: inline-flex;
    gap: 8px;
    margin: 4px 0 18px;
}

.l2-reconnect__spinner span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mud-palette-warning, #d97706);
    box-shadow: 0 0 6px color-mix(in srgb, var(--mud-palette-warning, #d97706) 60%, transparent);
    animation: l2-reconnect-pulse 1.2s ease-in-out infinite;
}

.l2-reconnect__spinner span:nth-child(2) { animation-delay: 0.18s; }
.l2-reconnect__spinner span:nth-child(3) { animation-delay: 0.36s; }

#components-reconnect-modal.components-reconnect-failed .l2-reconnect__spinner,
#components-reconnect-modal.components-reconnect-rejected .l2-reconnect__spinner {
    display: none;
}

.l2-reconnect__title {
    font-family: var(--mud-typography-display-serif, serif);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--mud-palette-text-primary, #e8e3d5);
}

#components-reconnect-modal.components-reconnect-failed .l2-reconnect__title::after {
    content: ' failed';
    color: color-mix(in srgb, var(--mud-palette-error, #e11d48) 70%, var(--mud-palette-text-primary) 30%);
    font-style: italic;
}

#components-reconnect-modal.components-reconnect-rejected .l2-reconnect__title::after {
    content: ' lost';
    color: color-mix(in srgb, var(--mud-palette-error, #e11d48) 70%, var(--mud-palette-text-primary) 30%);
    font-style: italic;
}

.l2-reconnect__message {
    display: none;
    margin: 0 0 16px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary, #b8b1a1);
    font-style: italic;
}

.l2-reconnect__countdown {
    display: none;
    margin: -10px 0 18px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--mud-palette-text-secondary, #b8b1a1) 75%, transparent);
    letter-spacing: 0.01em;
}

.l2-reconnect__metric {
    display: inline-block;
    min-width: 1.4ch;
    padding: 0 0.18em;
    color: var(--mud-palette-warning, #d97706);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#components-reconnect-modal.components-reconnect-show .l2-reconnect__message--reconnecting,
#components-reconnect-modal.components-reconnect-failed .l2-reconnect__message--failed,
#components-reconnect-modal.components-reconnect-rejected .l2-reconnect__message--rejected {
    display: block;
}

#components-reconnect-modal.components-reconnect-show .l2-reconnect__countdown.l2-reconnect__message--reconnecting {
    display: block;
}

.l2-reconnect__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.l2-reconnect__btn {
    display: none;
    padding: 8px 18px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning, #d97706) 50%, transparent);
    background: transparent;
    color: var(--mud-palette-warning, #d97706);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.l2-reconnect__btn:hover {
    background: color-mix(in srgb, var(--mud-palette-warning, #d97706) 12%, transparent);
    border-color: var(--mud-palette-warning, #d97706);
}

.l2-reconnect__btn--retry { color: var(--mud-palette-warning, #d97706); }
.l2-reconnect__btn--reload { color: var(--mud-palette-text-primary, #e8e3d5); border-color: var(--mud-palette-divider, #444); }
.l2-reconnect__btn--reload:hover { border-color: var(--mud-palette-text-primary, #e8e3d5); }

#components-reconnect-modal.components-reconnect-failed .l2-reconnect__btn--retry,
#components-reconnect-modal.components-reconnect-failed .l2-reconnect__btn--reload,
#components-reconnect-modal.components-reconnect-rejected .l2-reconnect__btn--reload {
    display: inline-block;
}

@keyframes l2-reconnect-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
    40%          { opacity: 1;   transform: scale(1.05); }
}

@keyframes l2-reconnect-card-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}