/* ADO 49235: corner reconnect indicator.
   blazor.web.js toggles components-reconnect-* classes on #components-reconnect-modal
   (see Components/Layout/ReconnectIndicator.razor). Everything visual lives here so the
   framework's default reconnection handler can own show/hide without any custom JS timers. */

/* Hidden until a state class is present. Message spans are hidden until their state is active. */
#components-reconnect-modal,
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-reconnect-rejected-visible,
.components-pause-visible,
.components-resume-failed-visible {
    display: none;
}

/* Non-blocking corner pill: no backdrop, no pointer capture, page stays scrollable. */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: block;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 10000;
    opacity: 0;
    /* Blip suppression: nothing paints for the first 1.5 s. Attempts 1-10 fire with no wait,
       so a normal blip reaches "hide" (display:none) before this animation starts. */
    animation: psp-reconnect-in .25s ease-out 1.5s forwards;
}

/* Terminal states are shown immediately. */
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed {
    animation-delay: 0s;
}

@keyframes psp-reconnect-in {
    to { opacity: 1; }
}

.psp-reconnect__pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border-radius: 999px;
    background: #1b2a3a; /* placeholder: business signs off on final colors */
    color: #fff;
    font-size: .875rem;
    line-height: 1.25;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

/* Wi-Fi "connecting" glyph: the three arcs light up outward from the dot, then fade,
   on a 1.5 s loop while a reconnect is in progress. */
.psp-reconnect__wifi {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    color: #fff;
}

.psp-wifi__arc {
    opacity: .25;
    animation: psp-wifi-pulse 1.5s ease-in-out infinite;
}

.psp-wifi__arc--2 { animation-delay: .25s; }
.psp-wifi__arc--3 { animation-delay: .5s; }

@keyframes psp-wifi-pulse {
    0%, 60%, 100% { opacity: .25; }
    20%, 40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .psp-wifi__arc {
        animation: none;
        opacity: 1;
    }
}

.psp-reconnect__btn {
    border: 0;
    border-radius: 4px;
    padding: .125rem .625rem;
    background: #0a7bd6; /* placeholder */
    color: #fff;
    font-size: inherit;
}

/* Which message is visible in which state. */
.components-reconnect-show .components-reconnect-first-attempt-visible,
.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
.components-reconnect-failed .components-reconnect-failed-visible,
.components-reconnect-rejected .components-reconnect-rejected-visible,
.components-reconnect-paused .components-pause-visible,
.components-reconnect-resume-failed .components-resume-failed-visible {
    display: inline;
}

/* "retrying" is added on top of "show" (the framework never removes "show" for it),
   so hide the first-attempt text once a countdown is running. */
.components-reconnect-retrying .components-reconnect-first-attempt-visible {
    display: none;
}

/* Terminal states: stop the animation and leave the arcs dim, which reads as "not connected";
   the Retry / Resume button is the affordance. */
.components-reconnect-failed .psp-wifi__arc,
.components-reconnect-rejected .psp-wifi__arc,
.components-reconnect-paused .psp-wifi__arc,
.components-reconnect-resume-failed .psp-wifi__arc {
    animation: none;
    opacity: .25;
}