/* ══════════════════════════════════════════════════════════════
   Blazor reconnect dialog (#components-reconnect-modal, App.razor)
   States set by Blazor: components-reconnect-show / -failed / -rejected / -hide
   ══════════════════════════════════════════════════════════════ */

#components-reconnect-modal {
    --rc-a: #10b981;
    --rc-b: #06b6d4;
    --rc-card: var(--bs-body-bg, #fff);
    --rc-txt: var(--bs-heading-color, #181c32);
    --rc-muted: var(--bs-gray-600, #7e8299);
    --rc-leaf: #10b981;
    --rc-leaf-2: #34d399;
    --rc-stem: #059669;
    display: none;
}

#components-reconnect-modal.components-reconnect-failed { --rc-a: #f97316; --rc-b: #ef4444; --rc-leaf: #d6a24a; --rc-leaf-2: #e9c46a; --rc-stem: #a16207; }
#components-reconnect-modal.components-reconnect-rejected { --rc-a: #f59e0b; --rc-b: #f97316; }

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(ellipse at center, rgba(6, 182, 212, .16), rgba(2, 6, 23, .55) 70%);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    backdrop-filter: blur(6px) saturate(1.1);
    animation: rc-fade .35s ease-out both;
}

/* ── card with a rotating gradient border ─────────────────────── */
.rc-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(380px, 100%);
    padding: 22px 28px 26px;
    border-radius: 24px;
    background: var(--rc-card);
    color: var(--rc-txt);
    text-align: center;
    box-shadow: 0 30px 80px -20px rgba(2, 6, 23, .5), 0 0 40px -10px color-mix(in srgb, var(--rc-a) 45%, transparent);
    animation: rc-pop .55s cubic-bezier(.2, .9, .3, 1.25) both;
}

    .rc-card::before {
        content: "";
        position: absolute;
        inset: -60%;
        z-index: -2;
        background: conic-gradient(from 0deg, transparent 0 62%, var(--rc-a) 78%, var(--rc-b) 90%, transparent 100%);
        animation: rc-spin 3.6s linear infinite;
    }

    .rc-card::after {
        content: "";
        position: absolute;
        inset: 2px;
        z-index: -1;
        border-radius: 22px;
        background:
            radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rc-b) 12%, transparent), transparent 60%),
            var(--rc-card);
    }

/* ── illustration ─────────────────────────────────────────────── */
.rc-art { display: block; width: 100%; max-width: 250px; height: auto; margin: 0 auto; overflow: visible; }

.rc-house {
    fill: url(#rc-fill);
    stroke: url(#rc-glass);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rc-draw 3.4s ease-in-out infinite;
}

.rc-mullion { fill: none; stroke: var(--rc-b); stroke-width: 1; opacity: .35; }
.rc-ground { stroke: var(--rc-muted); stroke-width: 1.5; stroke-linecap: round; opacity: .45; }

.rc-sun { fill: #fbbf24; }
.rc-halo { fill: #fbbf24; opacity: .25; transform-box: fill-box; transform-origin: center; animation: rc-halo 2.4s ease-in-out infinite; }

.rc-wave {
    fill: none;
    stroke: var(--rc-a);
    stroke-width: 2.6;
    stroke-linecap: round;
    opacity: .15;
    animation: rc-wave 1.6s ease-in-out infinite;
}

    .rc-wave.w2 { animation-delay: .2s; }
    .rc-wave.w3 { animation-delay: .4s; }

.rc-dot { fill: var(--rc-a); }

.rc-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: rc-grow 1.1s cubic-bezier(.2, .9, .3, 1.2) both; }
.rc-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: rc-sway 2.8s ease-in-out infinite; }
.rc-stem { fill: none; stroke: var(--rc-stem); stroke-width: 2; stroke-linecap: round; transition: stroke .6s; }
.rc-leaf { fill: var(--rc-leaf); transition: fill .6s; }
    .rc-leaf.is-alt { fill: var(--rc-leaf-2); }

.rc-dust { fill: var(--rc-b); opacity: 0; animation: rc-dust 3.2s ease-in-out infinite; }
    .rc-dust.d2 { animation-delay: .8s; }
    .rc-dust.d3 { animation-delay: 1.6s; }
    .rc-dust.d4 { animation-delay: 2.4s; }

/* failed: signal lost, plants droop */
.components-reconnect-failed .rc-wave { animation: none; opacity: .3; stroke-dasharray: 3 4; }
.components-reconnect-failed .rc-sway { animation: rc-droop 3.4s ease-in-out infinite; }
.components-reconnect-failed .rc-dust,
.components-reconnect-failed .rc-bar { display: none; }

/* ── text ─────────────────────────────────────────────────────── */
.rc-title { margin: 14px 0 6px; font-size: 1.15rem; font-weight: 800; color: var(--rc-txt); }
.rc-sub { margin: 0; min-height: 1.5em; font-size: .92rem; color: var(--rc-muted); }

.rc-num {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 .3em;
    border-radius: 8px;
    background: color-mix(in srgb, var(--rc-a) 14%, transparent);
    color: var(--rc-a);
    font-weight: 800;
    animation: rc-tick 1s ease-out infinite;
}

.rc-on-show, .rc-on-failed, .rc-on-rejected, .rc-trying { display: none; }
.components-reconnect-show .rc-on-show,
.components-reconnect-failed .rc-on-failed,
.components-reconnect-rejected .rc-on-rejected { display: inline; }
.is-trying .rc-wait { display: none; }
.is-trying .rc-trying { display: inline; }

/* ── progress + actions ───────────────────────────────────────── */
.rc-bar {
    width: 70%;
    height: 4px;
    margin: 18px auto 0;
    overflow: hidden;
    border-radius: 4px;
    background: color-mix(in srgb, var(--rc-a) 14%, transparent);
}

    .rc-bar i {
        display: block;
        width: 40%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--rc-a), var(--rc-b));
        animation: rc-slide 1.4s ease-in-out infinite;
    }

.rc-btn {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 18px auto 0;
    padding: 10px 24px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--rc-a), var(--rc-b));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 26px -12px var(--rc-a);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, opacity .15s;
}

    .rc-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px var(--rc-a); }
    .rc-btn:disabled { opacity: .6; cursor: wait; }
    .rc-btn:disabled i { animation: rc-spin 1s linear infinite; }

.components-reconnect-failed .rc-btn.rc-on-failed,
.components-reconnect-rejected .rc-btn.rc-on-rejected { display: inline-flex; }

/* ── dark theme ───────────────────────────────────────────────── */
[data-bs-theme="dark"] #components-reconnect-modal { --rc-muted: #9aa3b5; }
[data-bs-theme="dark"] .rc-sun,
[data-bs-theme="dark"] .rc-halo { fill: #e2e8f0; }

/* ── keyframes ────────────────────────────────────────────────── */
@keyframes rc-fade { from { opacity: 0; } }
@keyframes rc-pop { from { opacity: 0; transform: translateY(14px) scale(.92); } }
@keyframes rc-spin { to { transform: rotate(360deg); } }
@keyframes rc-draw {
    0% { stroke-dashoffset: 1; }
    45%, 75% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1; }
}
@keyframes rc-halo { 0%, 100% { transform: scale(.85); opacity: .18; } 50% { transform: scale(1.15); opacity: .35; } }
@keyframes rc-wave { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
@keyframes rc-grow { from { transform: scaleY(0); opacity: 0; } }
@keyframes rc-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes rc-droop { 0%, 100% { transform: rotate(14deg) scaleY(.92); } 50% { transform: rotate(10deg) scaleY(.95); } }
@keyframes rc-dust {
    0% { opacity: 0; transform: translateY(0); }
    30% { opacity: .8; }
    100% { opacity: 0; transform: translateY(-46px); }
}
@keyframes rc-slide { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes rc-tick { 0% { transform: scale(1.15); } 30%, 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal *,
    #components-reconnect-modal *::before,
    #components-reconnect-modal *::after,
    #components-reconnect-modal { animation: none !important; }
    .rc-house { stroke-dashoffset: 0; }
}