/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-dkgykcgeax] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-dkgykcgeax] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Shared/ReconnectOverlay.razor.rz.scp.css */
/* Branded replacement for Blazor's built-in reconnect dialog.
   The framework toggles .components-reconnect-show / -hide / -failed / -rejected on the overlay. */

.reconnect-overlay[b-iaui55geie] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(10 42 91 / .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.reconnect-overlay.components-reconnect-show[b-iaui55geie],
.reconnect-overlay.components-reconnect-failed[b-iaui55geie],
.reconnect-overlay.components-reconnect-rejected[b-iaui55geie] {
    display: flex;
    animation: reconnect-fade-in-b-iaui55geie .25s ease-out both;
}

.reconnect-overlay.components-reconnect-hide[b-iaui55geie] {
    display: none;
}

.reconnect-card[b-iaui55geie] {
    width: min(100%, 22rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2rem 1.75rem 1.5rem;
    border-radius: 1.5rem;
    background: #ffffff;
    color: #0a2a5b;
    text-align: center;
    box-shadow: 0 30px 60px -20px rgb(10 42 91 / .55), 0 0 0 1px rgb(11 77 162 / .08);
    animation: reconnect-rise-b-iaui55geie .35s cubic-bezier(.2, .8, .2, 1) both;
}

/* Logo with two expanding rings (brand blue + gold) and a gentle breathing pulse. */
.reconnect-logo[b-iaui55geie] {
    position: relative;
    display: grid;
    place-items: center;
    width: 7.5rem;
    height: 7.5rem;
    margin-bottom: .5rem;
}

.reconnect-ring[b-iaui55geie] {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid #0b4da2;
    opacity: 0;
    animation: reconnect-ripple-b-iaui55geie 2.2s ease-out infinite;
}

.reconnect-ring--gold[b-iaui55geie] {
    border-color: #f4b400;
    animation-delay: 1.1s;
}

.reconnect-logo__tile[b-iaui55geie] {
    position: relative;
    display: grid;
    place-items: center;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 1.25rem;
    background: #f5f8ff;
    box-shadow: 0 12px 24px -12px rgb(11 77 162 / .6), inset 0 0 0 1px rgb(11 77 162 / .1);
    animation: reconnect-breathe-b-iaui55geie 2.2s ease-in-out infinite;
}

.reconnect-logo__tile img[b-iaui55geie] {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    border-radius: .75rem;
}

.reconnect-name[b-iaui55geie] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.reconnect-status[b-iaui55geie] {
    margin: 0;
    font-size: .9rem;
    color: #3b5687;
}

.reconnect-msg[b-iaui55geie] {
    display: none;
}

.reconnect-attempt[b-iaui55geie] {
    margin: 0;
    font-size: .75rem;
    color: #6b7fa3;
}

/* Hidden until the framework writes the attempt counter. */
.reconnect-attempt:has(#components-reconnect-current-attempt:empty)[b-iaui55geie] {
    display: none;
}

.reconnect-dots[b-iaui55geie] {
    display: flex;
    gap: .4rem;
    margin-top: .6rem;
}

.reconnect-dots span[b-iaui55geie] {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: #0b4da2;
    animation: reconnect-bounce-b-iaui55geie 1.2s ease-in-out infinite;
}

.reconnect-dots span:nth-child(2)[b-iaui55geie] {
    background: #f4b400;
    animation-delay: .15s;
}

.reconnect-dots span:nth-child(3)[b-iaui55geie] {
    animation-delay: .3s;
}

.reconnect-actions[b-iaui55geie] {
    display: none;
    gap: .5rem;
    margin-top: 1rem;
}

.reconnect-btn[b-iaui55geie] {
    padding: .55rem 1.1rem;
    border-radius: .75rem;
    border: 1px solid transparent;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.reconnect-btn:hover[b-iaui55geie] {
    transform: translateY(-1px);
}

.reconnect-btn:disabled[b-iaui55geie] {
    opacity: .6;
    cursor: wait;
    transform: none;
}

.reconnect-btn--primary[b-iaui55geie] {
    background: linear-gradient(135deg, #0b4da2, #0a2a5b);
    color: #ffffff;
    box-shadow: 0 10px 20px -12px rgb(11 77 162 / .9);
}

.reconnect-btn--ghost[b-iaui55geie] {
    background: transparent;
    color: #0b4da2;
    border-color: rgb(11 77 162 / .35);
}

/* State: connecting */
.reconnect-overlay.components-reconnect-show .reconnect-msg--rejoining[b-iaui55geie] {
    display: inline;
}

/* State: failed / rejected -> stop the motion, offer retry/reload */
.reconnect-overlay.components-reconnect-failed .reconnect-msg--failed[b-iaui55geie],
.reconnect-overlay.components-reconnect-rejected .reconnect-msg--rejected[b-iaui55geie] {
    display: inline;
}

.reconnect-overlay.components-reconnect-failed .reconnect-actions[b-iaui55geie],
.reconnect-overlay.components-reconnect-rejected .reconnect-actions[b-iaui55geie] {
    display: flex;
}

.reconnect-overlay.components-reconnect-rejected [data-reconnect-retry][b-iaui55geie] {
    display: none;
}

.reconnect-overlay.components-reconnect-failed .reconnect-dots[b-iaui55geie],
.reconnect-overlay.components-reconnect-rejected .reconnect-dots[b-iaui55geie],
.reconnect-overlay.components-reconnect-failed .reconnect-attempt[b-iaui55geie],
.reconnect-overlay.components-reconnect-rejected .reconnect-attempt[b-iaui55geie] {
    display: none;
}

.reconnect-overlay.components-reconnect-failed .reconnect-ring[b-iaui55geie],
.reconnect-overlay.components-reconnect-rejected .reconnect-ring[b-iaui55geie],
.reconnect-overlay.components-reconnect-failed .reconnect-logo__tile[b-iaui55geie],
.reconnect-overlay.components-reconnect-rejected .reconnect-logo__tile[b-iaui55geie] {
    animation: none;
}

.reconnect-overlay.components-reconnect-failed .reconnect-ring--blue[b-iaui55geie],
.reconnect-overlay.components-reconnect-rejected .reconnect-ring--blue[b-iaui55geie] {
    opacity: .25;
    transform: scale(.85);
}

/* Dark theme (marketplace toggles the .dark class on <html>) */
html.dark .reconnect-card[b-iaui55geie] {
    background: #16223b;
    color: #f5f8ff;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7), 0 0 0 1px rgb(244 180 0 / .15);
}

html.dark .reconnect-status[b-iaui55geie] {
    color: #c9d6ee;
}

html.dark .reconnect-attempt[b-iaui55geie] {
    color: #93a7cc;
}

html.dark .reconnect-logo__tile[b-iaui55geie] {
    background: #ffffff;
}

html.dark .reconnect-btn--ghost[b-iaui55geie] {
    color: #f5f8ff;
    border-color: rgb(255 255 255 / .35);
}

html.dark .reconnect-dots span:nth-child(odd)[b-iaui55geie] {
    background: #8fb3ff;
}

@keyframes reconnect-fade-in-b-iaui55geie {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes reconnect-rise-b-iaui55geie {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes reconnect-ripple-b-iaui55geie {
    0% { opacity: .75; transform: scale(.6); }
    100% { opacity: 0; transform: scale(1.15); }
}

@keyframes reconnect-breathe-b-iaui55geie {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes reconnect-bounce-b-iaui55geie {
    0%, 80%, 100% { transform: translateY(0); opacity: .5; }
    40% { transform: translateY(-.35rem); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .reconnect-ring[b-iaui55geie],
    .reconnect-logo__tile[b-iaui55geie],
    .reconnect-dots span[b-iaui55geie],
    .reconnect-card[b-iaui55geie],
    .reconnect-overlay[b-iaui55geie] {
        animation: none !important;
    }

    .reconnect-ring--blue[b-iaui55geie] {
        opacity: .3;
        transform: scale(.85);
    }

    .reconnect-ring--gold[b-iaui55geie] {
        opacity: 0;
    }
}
