/* Custom Blazor Server reconnect UI (see wwwroot/js/leos-blazor-reconnect.js
   for the retry logic that drives these classes). Replaces the framework's
   unstyled, page-blocking default (a full-width plain-text bar reading
   "Could not reconnect to the server. Reload the page to restore
   functionality.") with a small, non-blocking corner toast that stays out of
   the way while our JS keeps retrying quietly in the background, and only
   asks the user to act if automatic recovery genuinely can't get there.

   Blazor Server itself adds/removes these class names on #components-reconnect-modal
   as the circuit's connection state changes -- component structure and class
   names are framework-owned and have been stable since these states were
   introduced; only the visual presentation here is custom. */

#components-reconnect-modal {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    max-width: 320px;
    display: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#components-reconnect-modal .leos-reconnect-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #1c2024;
    color: #e7eaed;
    border: 1px solid #2e343a;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    font-size: 0.8125rem;
    line-height: 1.3;
}

html[data-leos-theme="light"] #components-reconnect-modal .leos-reconnect-toast {
    background: #ffffff;
    color: #16191d;
    border-color: #e2e5e9;
    box-shadow: 0 6px 20px rgba(16, 20, 24, 0.18);
}

#components-reconnect-modal .leos-reconnect-spinner {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(143, 182, 226, 0.35);
    border-top-color: #8fb6e2;
    animation: leos-reconnect-spin 0.8s linear infinite;
}

html[data-leos-theme="light"] #components-reconnect-modal .leos-reconnect-spinner {
    border: 2px solid rgba(27, 79, 134, 0.25);
    border-top-color: #1b4f86;
}

#components-reconnect-modal .leos-reconnect-text {
    flex: 1 1 auto;
}

#components-reconnect-modal .leos-reconnect-action {
    display: none;
    margin-top: 8px;
}

#components-reconnect-modal .leos-reconnect-action button {
    width: 100%;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #2e343a;
    background: #23282d;
    color: #e7eaed;
    font-size: 0.75rem;
    cursor: pointer;
}

html[data-leos-theme="light"] #components-reconnect-modal .leos-reconnect-action button {
    border-color: #e2e5e9;
    background: #eef1f4;
    color: #16191d;
}

/* Actively retrying (either Blazor's own built-in attempts, or our extended
   background retries) -- quiet corner toast, spinner visible. */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.leos-reconnect-retrying {
    display: block;
}

/* Circuit confirmed gone (server restarted/redeployed and no longer knows
   this circuit id) -- our JS takes over from here and waits for the server
   to actually respond again before reloading, so this state is intentionally
   styled the same quiet way rather than the alarming default text. */
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

/* Our JS gives up only after an extended silent-retry window; at that point
   it adds this class itself so there's a visible way to force it, instead of
   retrying forever with no escape hatch. */
#components-reconnect-modal.leos-reconnect-give-up .leos-reconnect-action {
    display: block;
}

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