/* Blazor's own reconnect box is replaced by this element (same id): blazor.web.js only toggles the state classes. */
#components-reconnect-modal { display: none; }
#components-reconnect-modal:is(.components-reconnect-show, .components-reconnect-retrying, .components-reconnect-failed, .components-reconnect-rejected, .components-reconnect-paused, .components-reconnect-resume-failed) {
    position: fixed; inset: 0; z-index: 5000; display: grid; place-items: end center; padding: 0 16px 32px;
    background: rgba(8, 11, 19, .45); font-family: 'IBM Plex Sans', sans-serif; animation: pantheon-reconnect-fade .25s ease-out both;
}
.pantheon-reconnect-card {
    display: flex; align-items: center; gap: 14px; max-width: 520px; padding: 14px 16px 14px 18px;
    border: 1px solid #3a3f5c; border-top: 2px solid #8f8fda; border-radius: 12px;
    background: linear-gradient(150deg, #1a1f2e, #121722 60%); box-shadow: 0 18px 50px #0009; color: #e9ebf2;
}
.pantheon-reconnect-card p { margin: 0; font-size: 14px; line-height: 1.45; }
.pantheon-reconnect-card small { display: block; color: #98a3b8; font-size: 12px; }
.pantheon-reconnect-card button {
    flex: none; margin-left: auto; padding: 8px 14px; border: 1px solid #62618f; border-radius: 8px;
    background: #292a40; color: #dedff5; font: 600 13px 'IBM Plex Sans', sans-serif; cursor: pointer;
}
.pantheon-reconnect-card button:hover { background: #353653; border-color: #8f8fda; }
.pantheon-reconnect-pulse { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #8f8fda 0 3px, transparent 4px); }
.pantheon-reconnect-pulse::after { content: ""; position: absolute; inset: 0; border: 1px solid #8f8fda; border-radius: 50%; animation: pantheon-reconnect-ring 1.6s ease-out infinite; }

/* One line per state; only the matching one is shown. */
.pantheon-reconnect-state, .pantheon-reconnect-card button { display: none; }
.components-reconnect-show .pantheon-reconnect-state[data-state="retrying"],
.components-reconnect-retrying .pantheon-reconnect-state[data-state="retrying"],
.components-reconnect-failed .pantheon-reconnect-state[data-state="failed"],
.components-reconnect-rejected .pantheon-reconnect-state[data-state="rejected"],
.components-reconnect-paused .pantheon-reconnect-state[data-state="paused"],
.components-reconnect-resume-failed .pantheon-reconnect-state[data-state="rejected"] { display: block; }
.components-reconnect-failed [data-action="retry"],
.components-reconnect-paused [data-action="resume"],
:is(.components-reconnect-rejected, .components-reconnect-resume-failed) [data-action="reload"] { display: inline-block; }
:is(.components-reconnect-failed, .components-reconnect-rejected, .components-reconnect-paused, .components-reconnect-resume-failed) .pantheon-reconnect-pulse::after { animation: none; opacity: 0; }

@keyframes pantheon-reconnect-ring { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes pantheon-reconnect-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pantheon-reconnect-pulse::after { animation: none; } }