#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex; position: fixed; inset: 0; z-index: 20000;
    flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem; background: var(--bg-base); color: var(--text-primary);
    text-align: center;
}
#components-reconnect-modal p { max-width: 36rem; }
#components-reconnect-modal .reconnect-waiting,
#components-reconnect-modal .reconnect-failed,
#components-reconnect-modal .reconnect-rejected { display: none; }
#components-reconnect-modal.components-reconnect-show .reconnect-waiting,
#components-reconnect-modal.components-reconnect-failed .reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-rejected { display: block; }

/* ── Boot placeholder (see _Host.cshtml) ───────────────────────────────────── */
.app-boot {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--text-muted, #6b6b6b);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.95rem;
}
#app-root > .app-boot:not(:first-child) { display: none; }
.app-boot__spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: app-boot-spin .8s linear infinite;
}
.app-boot__text { margin: 0; }
@keyframes app-boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .app-boot__spinner { animation: none; border-right-color: currentColor; opacity: .5; }
}