/* Reconnect card — replaces Blazor Server's default full-page "Attempting to reconnect… /
   Could not reconnect. Reload" overlay with a corner card. Ported from Sarx_V2 and rethemed.

   Blazor toggles ONE of these classes on the wrapper: components-reconnect-show / -failed /
   -rejected. reconnect.js decides when the wrapper is visible (a short grace period suppresses
   flashes during ordinary navigation) and, on failed/rejected, polls the server and reloads. */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: auto;
    pointer-events: none;
    z-index: 9999;
}

#components-reconnect-modal > .show,
#components-reconnect-modal > .failed,
#components-reconnect-modal > .rejected {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: min(360px, calc(100vw - 3rem));
    pointer-events: auto;
    background: var(--surface-1, #141414);
    border: 1px solid var(--border, #262626);
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 25px 50px -12px rgba(0,0,0,0.6);
    padding: 1rem 1.125rem;
    color: var(--text, #e5e7eb);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.875rem;
    animation: trace-reconnect-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Blazor's default stylesheet shows these children; only the wrapper's class decides which. */
#components-reconnect-modal > .show,
#components-reconnect-modal > .failed,
#components-reconnect-modal > .rejected { display: none; }
#components-reconnect-modal.components-reconnect-show     > .show,
#components-reconnect-modal.components-reconnect-failed   > .failed,
#components-reconnect-modal.components-reconnect-rejected > .rejected { display: block; }

@keyframes trace-reconnect-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    #components-reconnect-modal > .show,
    #components-reconnect-modal > .failed,
    #components-reconnect-modal > .rejected { right: .75rem; bottom: .75rem; left: .75rem; width: auto; }
}

.trace-reconnect-row  { display: flex; align-items: center; gap: .875rem; }
.trace-reconnect-body { flex: 1 1 auto; min-width: 0; }

.trace-reconnect-spinner {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid rgba(59,130,246,0.18);
    border-top-color: var(--accent, #3b82f6);
    animation: trace-reconnect-spin 800ms linear infinite;
}
@keyframes trace-reconnect-spin { to { transform: rotate(360deg); } }

.trace-reconnect-title { margin: 0; color: var(--text, #e5e7eb); font-size: .9375rem; font-weight: 600; line-height: 1.2; }
.trace-reconnect-sub   { margin: .125rem 0 0; color: var(--muted, #9ca3af); font-size: .75rem; line-height: 1.45;
                         font-family: var(--mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.trace-reconnect-sub b { color: var(--text, #e5e7eb); font-weight: 600; }

.trace-reconnect-fail-title { margin: 0 0 .375rem; color: var(--text, #e5e7eb); font-size: .9375rem; font-weight: 600; }
.trace-reconnect-fail-text  { margin: 0 0 .875rem; color: var(--muted, #9ca3af); font-size: .8125rem; line-height: 1.5; }

.trace-reconnect-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    padding: .5rem 1rem; border-radius: 8px;
    background: var(--accent, #3b82f6); color: #fff;
    font-family: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
    cursor: pointer; border: 1px solid rgba(255,255,255,0.08);
    transition: filter 180ms, transform 100ms;
}
.trace-reconnect-btn:hover  { filter: brightness(1.1); }
.trace-reconnect-btn:active { transform: translateY(1px); }

#components-reconnect-modal > .failed   { border-color: rgba(234,179,8,0.45); }
#components-reconnect-modal > .rejected { border-color: rgba(239,68,68,0.5); }