/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Visibility per state. The success class swaps the connecting animation for
   the tick without moving anything else. */
.components-reconnect-first-attempt-visible[b-wg4u20bl2u],
.components-reconnect-repeated-attempt-visible[b-wg4u20bl2u],
.components-reconnect-failed-visible[b-wg4u20bl2u],
.components-pause-visible[b-wg4u20bl2u],
.components-resume-failed-visible[b-wg4u20bl2u],
.components-rejoining-animation[b-wg4u20bl2u],
.components-reconnect-success-tick[b-wg4u20bl2u],
.components-reconnect-success-text[b-wg4u20bl2u] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-success) .components-reconnect-first-attempt-visible[b-wg4u20bl2u],
#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-success) .components-rejoining-animation[b-wg4u20bl2u],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-wg4u20bl2u],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-wg4u20bl2u],
#components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-success)[b-wg4u20bl2u],
#components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-success) .components-reconnect-repeated-attempt-visible[b-wg4u20bl2u],
#components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-success) .components-rejoining-animation[b-wg4u20bl2u],
#components-reconnect-modal.components-reconnect-failed[b-wg4u20bl2u],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-wg4u20bl2u] {
    display: block;
}

#components-reconnect-modal.components-reconnect-success .components-reconnect-success-tick[b-wg4u20bl2u],
#components-reconnect-modal.components-reconnect-success .components-reconnect-success-text[b-wg4u20bl2u] {
    display: block;
}

/* Full-screen overlay in the app's own palette; the tokens flip for dark mode
   automatically (tokens.css handles prefers-color-scheme). */
#components-reconnect-modal[b-wg4u20bl2u] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: var(--hc-bg, #f5f7fb);
    color: var(--hc-text, #16233a);
    font-family: inherit;
    opacity: 0;
    transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-wg4u20bl2u 0.4s both;
}

#components-reconnect-modal[open][b-wg4u20bl2u] {
    display: grid;
    place-items: center;
    animation: components-reconnect-modal-fadeInOpacity-b-wg4u20bl2u 0.3s ease-in-out;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-wg4u20bl2u]::backdrop {
    background: none;
}

@keyframes components-reconnect-modal-fadeInOpacity-b-wg4u20bl2u {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-wg4u20bl2u {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.components-reconnect-container[b-wg4u20bl2u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem;
    text-align: center;
}

#components-reconnect-modal p[b-wg4u20bl2u] {
    margin: 0;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 550;
}

#components-reconnect-modal button[b-wg4u20bl2u] {
    border: 0;
    background-color: var(--hc-accent, #e75f87);
    color: #ffffff;
    padding: 10px 28px;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#components-reconnect-modal button:hover[b-wg4u20bl2u] {
    filter: brightness(1.08);
}

/* Connecting ripple. */
.components-rejoining-animation[b-wg4u20bl2u] {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div[b-wg4u20bl2u] {
    position: absolute;
    border: 3px solid var(--hc-accent, #e75f87);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-wg4u20bl2u 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-wg4u20bl2u] {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation-b-wg4u20bl2u {
    0% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; }
    100% { top: 0px; left: 0px; width: 80px; height: 80px; opacity: 0; }
}

/* Success: a green tick draws itself in where the ripple was. */
.components-reconnect-success-tick[b-wg4u20bl2u] {
    width: 80px;
    height: 80px;
}

.components-reconnect-success-tick svg[b-wg4u20bl2u] {
    width: 80px;
    height: 80px;
    stroke: #22a06b;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.components-reconnect-success-tick circle[b-wg4u20bl2u] {
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: components-tick-draw-b-wg4u20bl2u 0.45s ease-out forwards;
}

.components-reconnect-success-tick path[b-wg4u20bl2u] {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: components-tick-draw-b-wg4u20bl2u 0.3s ease-out 0.35s forwards;
}

#components-reconnect-modal.components-reconnect-success .components-reconnect-success-text[b-wg4u20bl2u] {
    color: #22a06b;
}

@keyframes components-tick-draw-b-wg4u20bl2u {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation div[b-wg4u20bl2u],
    .components-reconnect-success-tick circle[b-wg4u20bl2u],
    .components-reconnect-success-tick path[b-wg4u20bl2u] {
        animation-duration: 0.01s;
    }
}