/* ==========================================================================
   Blazor circuit reconnection notice.

   The framework toggles four mutually exclusive classes on
   #components-reconnect-modal: components-reconnect-show / -hide / -failed /
   -rejected (it removes all of them before adding the new one).

   Strategy: the "reconnecting" state carries a 5s animation-delay. Because the
   framework REMOVES and re-ADDS the class on every drop, the animation restarts
   from zero each time. Short blips (< 5s) are therefore never seen. The .NET 8
   client makes its first reconnect attempt at t=3s, so 5s leaves enough room for
   the handshake to complete with nothing shown on screen.

   Loaded from App.razor as css/reconnect.css?v=1.
   ========================================================================== */

#components-reconnect-modal {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 20000; /* above MudDialog / MudOverlay / MudSnackbar */
    /* Base state (no class at all, e.g. first page load): invisible and
       non-interactive. */
    display: none;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
    max-width: min(92vw, 360px);
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--mud-typography-body2-size, .875rem);
    line-height: 1.43;
    /* MudBlazor declares --mud-palette-* at runtime via MudThemeProvider, so
       every var() below needs a fallback for pages rendered without it. */
    color: var(--mud-palette-text-primary, #424242);
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    border-radius: var(--mud-default-borderradius, 4px);
    box-shadow: var(--mud-elevation-8, 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12));
}

/* --- Reconnecting: only becomes visible if the drop lasts past 5s --------- */
#components-reconnect-modal.components-reconnect-show {
    display: flex;
    animation: fn-reconnect-in 240ms ease-out 5s both;
    /* pointer-events stays "none": this state never blocks the UI. */
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Reconnected --------------------------------------------------------- */
#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

/* --- Failed / rejected: immediate and clickable -------------------------- */
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    border-color: var(--mud-palette-warning, #ff9800);
}

/* --- Per-state content --------------------------------------------------- */
#components-reconnect-modal .fn-reconnect-msg,
#components-reconnect-modal .fn-reconnect-spinner,
#components-reconnect-modal .fn-reconnect-reload {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .fn-reconnect-msg-retrying,
#components-reconnect-modal.components-reconnect-failed .fn-reconnect-msg-failed,
#components-reconnect-modal.components-reconnect-rejected .fn-reconnect-msg-rejected {
    display: inline;
}

#components-reconnect-modal.components-reconnect-show .fn-reconnect-spinner {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed .fn-reconnect-reload,
#components-reconnect-modal.components-reconnect-rejected .fn-reconnect-reload {
    display: inline-flex;
}

.fn-reconnect-spinner {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .2));
    border-top-color: var(--mud-palette-primary, #594ae2);
    border-radius: 50%;
    animation: fn-reconnect-spin .9s linear infinite;
}

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

.fn-reconnect-msg {
    flex: 1 1 auto;
}

.fn-reconnect-reload {
    flex: 0 0 auto;
    align-items: center;
    padding: 4px 8px;
    border: 0;
    background: none;
    border-radius: var(--mud-default-borderradius, 4px);
    font: inherit;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    color: var(--mud-palette-primary, #594ae2);
}

    .fn-reconnect-reload:hover {
        background: rgba(89, 74, 226, .08);
    }

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal.components-reconnect-show {
        animation: fn-reconnect-in 1ms linear 5s both;
    }

    .fn-reconnect-spinner {
        animation: none;
    }
}