#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    place-items: center;
    padding: 1.25rem;
    background: rgba(20, 38, 52, 0.48);
    backdrop-filter: blur(5px);
}

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

.connection-recovery-card {
    width: min(100%, 31rem);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    color: var(--text);
    background: var(--bg-panel-strong);
    box-shadow: var(--shadow-xl);
    text-align: center;
}

.connection-recovery-status {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1.25rem;
    place-items: center;
    border: 1px solid rgba(57, 118, 184, 0.26);
    border-radius: 50%;
    background: var(--accent-soft);
}

.connection-recovery-status span {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(57, 118, 184, 0.28);
    border-top-color: var(--accent-strong);
    border-radius: 50%;
    animation: connection-recovery-spin 900ms linear infinite;
}

.connection-recovery-card h2 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.3rem, 4vw, 1.65rem);
}

.connection-recovery-card p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.55;
}

.connection-recovery-copy,
.connection-recovery-actions {
    display: none;
}

.components-reconnect-show .connection-recovery-connecting,
.components-reconnect-retrying .connection-recovery-connecting,
.components-reconnect-failed .connection-recovery-failed-copy,
.components-reconnect-rejected .connection-recovery-rejected-copy {
    display: block;
}

.components-reconnect-failed .connection-recovery-actions,
.components-reconnect-rejected .connection-recovery-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.35rem;
}

.connection-recovery-progress {
    margin-top: 1rem !important;
    font-size: 0.88rem;
}

.connection-recovery-primary,
.connection-recovery-secondary {
    min-height: 2.75rem;
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius-md);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.connection-recovery-primary {
    border: 1px solid var(--accent-strong);
    color: #fff;
    background: var(--accent-strong);
}

.connection-recovery-secondary {
    border: 1px solid var(--line-strong);
    color: var(--text);
    background: var(--bg-panel);
}

.components-reconnect-failed .connection-recovery-secondary,
.components-reconnect-rejected .connection-recovery-primary {
    display: none;
}

.connection-recovery-primary:disabled {
    cursor: wait;
    opacity: 0.65;
}

@keyframes connection-recovery-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .connection-recovery-status span {
        animation: none;
        border-color: var(--accent-strong);
    }
}