/* ── Blazor reconnect overlay ─────────────────────────────── */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 12vh;
    gap: 20px;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

/* ── State visibility ─────────────────────────────────────── */

.fz-reconnect-connecting,
.fz-reconnect-failed {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.components-reconnect-show .fz-reconnect-connecting {
    display: flex;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    padding: 28px 36px;
}

html.mud-dark .components-reconnect-show .fz-reconnect-connecting {
    border-color: rgba(255, 255, 255, 0.15);
}

.components-reconnect-failed .fz-reconnect-failed,
.components-reconnect-rejected .fz-reconnect-failed {
    display: flex;
}

/* ── Animated logo ────────────────────────────────────────── */

.fz-reconnect-logo {
    width: 68px;
    height: 68px;
}

.fz-rl-p1,
.fz-rl-p2,
.fz-rl-p3 {
    transform-box: fill-box;
    transform-origin: center;
    animation: fz-logo-pulse 2.0s ease-in-out infinite both;
}

/* Clockwise order: top bar → bottom-right → bottom-left */
.fz-rl-p1 { animation-delay: 0s; }
.fz-rl-p3 { animation-delay: 0.67s; }
.fz-rl-p2 { animation-delay: 1.33s; }

@keyframes fz-logo-pulse {
    0%, 45%, 100% { transform: scale(1); }
    22%            { transform: scale(1.22); }
}

/* ── Accent polygon — bottom-right L ─────────────────────── */

.fz-reconnect-accent { fill: #424242; }
html.mud-dark .fz-reconnect-accent { fill: #ffffff; }

/* ── Failed state — dim static logo ──────────────────────── */

.fz-reconnect-failed .fz-reconnect-logo {
    opacity: 0.5;
}

/* ── Labels ───────────────────────────────────────────────── */

.fz-reconnect-title {
    margin: 0;
    color: rgba(20, 20, 20, 0.95);
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.01em;
}

html.mud-dark .fz-reconnect-title {
    color: rgba(255, 255, 255, 0.95);
}

.fz-reconnect-label {
    margin: 0;
    color: rgba(20, 20, 20, 0.6);
    font-size: 0.875rem;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.02em;
    text-align: center;
}

html.mud-dark .fz-reconnect-label {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Reload button ────────────────────────────────────────── */

.fz-reconnect-reload {
    margin-top: 4px;
    padding: 9px 28px;
    border-radius: 6px;
    background: #E64A19;
    color: #ffffff !important;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.fz-reconnect-reload:hover {
    background: #bf360c;
}

.fz-reconnect-reload:active {
    transform: scale(0.97);
}