#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

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

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

.app-reconnect-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 32, 51, .42);
    backdrop-filter: blur(2px);
}

.app-reconnect-panel {
    position: relative;
    width: min(100%, 22rem);
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--color-border, #dde2ea);
    border-radius: 14px;
    background: var(--color-surface, #fff);
    box-shadow: 0 16px 40px rgba(23, 32, 51, .18);
    text-align: center;
}

.app-reconnect-state {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .app-reconnect-state-show,
#components-reconnect-modal.components-reconnect-failed .app-reconnect-state-failed,
#components-reconnect-modal.components-reconnect-rejected .app-reconnect-state-rejected {
    display: block;
}

.app-reconnect-spinner {
    width: 2rem;
    height: 2rem;
    margin: 0 auto .85rem;
    border: 3px solid var(--color-primary-soft, #ebe4ff);
    border-top-color: var(--color-primary, #7c6cff);
    border-radius: 50%;
    animation: app-reconnect-spin .85s linear infinite;
}

@keyframes app-reconnect-spin {
    to {
        transform: rotate(360deg);
    }
}

.app-reconnect-title {
    margin: 0 0 .35rem;
    color: var(--color-text, #2f2a38);
    font-size: 1rem;
    font-weight: 700;
}

.app-reconnect-text,
.app-reconnect-hint,
.app-reconnect-attempt {
    margin: 0;
    color: var(--color-text-muted, #667085);
    font-size: .875rem;
    line-height: 1.45;
}

.app-reconnect-hint {
    margin-top: .5rem;
    font-size: .8125rem;
}

.app-reconnect-attempt {
    margin-top: .65rem;
    font-size: .75rem;
    font-weight: 600;
}

.app-reconnect-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto .75rem;
    border-radius: 999px;
    color: var(--color-warning, #c98200);
    background: var(--color-warning-soft, #fff4df);
    font-size: 1.15rem;
}

.app-reconnect-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: 1rem;
}

.app-reconnect-actions .app-button {
    min-width: 7rem;
}