/* Reconnect card, ported from DDriven's pattern (js/reconnect.js builds the element, reveals it only
   after a grace period, and auto-recovers by polling /health). Styled with the app's own tokens from
   app.css so it follows the theme; each var() carries the charcoal value as a fallback in case app.css
   did not load. Solid background, no backdrop-filter, for the WebKit reason noted in DDriven. */

#components-reconnect-modal {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%) translateY(0.75rem);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
}
#components-reconnect-modal.rc-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

#components-reconnect-modal .rc-card { display: none; }
#components-reconnect-modal.rc-visible .rc-reconnecting { display: flex; }
#components-reconnect-modal.rc-visible.rc-lost-state .rc-reconnecting { display: none; }
#components-reconnect-modal.rc-visible.rc-lost-state .rc-lost { display: flex; }

.rc-card {
    align-items: center;
    gap: 0.85rem;
    background: var(--panel, #202020);
    color: var(--text, #d6d6d6);
    border: 1px solid var(--line, #353535);
    border-left: 3px solid var(--accent, #f0892b);
    border-radius: 3px;
    padding: 0.55rem 0.6rem 0.55rem 0.9rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    max-width: calc(100vw - 2rem);
}
.rc-lost { border-left-color: var(--down, #d9403a); }

.rc-spinner {
    width: 1rem;
    height: 1rem;
    flex: none;
    border: 2px solid var(--line, #353535);
    border-top-color: var(--accent, #f0892b);
    border-radius: 50%;
    animation: rc-spin 0.8s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }

.rc-dot {
    width: 0.55rem;
    height: 0.55rem;
    flex: none;
    border-radius: 2px;
    background: var(--down, #d9403a);
    box-shadow: 0 0 0 4px rgba(217, 64, 58, 0.2);
}

.rc-text { display: flex; flex-direction: column; line-height: 1.25; }
.rc-title { font-weight: 600; font-size: 0.85rem; color: #fff; }
.rc-sub { font-size: 0.72rem; color: var(--dim, #9a9a9a); font-family: "JetBrains Mono", ui-monospace, monospace; }
.rc-sub b { color: var(--text, #d6d6d6); font-weight: 500; }

.rc-reload {
    appearance: none;
    cursor: pointer;
    background: #1f1f1f;
    color: var(--dim, #9a9a9a);
    border: 1px solid var(--line, #353535);
    font: inherit;
    font-size: 12px;
    border-radius: 3px;
    padding: 0.3rem 0.7rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.rc-reload:hover { background: #2a2a2a; color: #fff; }
.rc-reload.rc-primary { background: var(--accent, #f0892b); color: #111; border-color: var(--accent, #f0892b); font-weight: 600; }
.rc-reload.rc-primary:hover { background: #ff9a3c; }

/* Blazor's unhandled-error strip, built by reconnect.js, in the same theme. */
#blazor-error-ui {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1999;
    background: var(--panel-head, #2a2a2a); color: var(--text, #d6d6d6);
    border-top: 1px solid var(--down, #d9403a);
    padding: 0.5rem 1rem; font-size: 12px;
}
#blazor-error-ui .reload { color: var(--accent, #f0892b); margin-left: 0.5rem; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; color: var(--dim, #9a9a9a); }

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal { transition: opacity 0.2s ease; transform: translateX(-50%); }
    #components-reconnect-modal.rc-visible { transform: translateX(-50%); }
    .rc-spinner { animation-duration: 1.4s; }
}