/* Custom Blazor Server reconnect modal.
   Replaces the default white-on-white "Attempting to reconnect..." overlay with
   a blurred dark backdrop and a card matching the LiveSpace.Cloud aesthetic.

   Blazor toggles these classes on the #components-reconnect-modal element:
     .components-reconnect-show     → connection dropped, attempting reconnect
     .components-reconnect-failed   → retries exhausted but server reachable
     .components-reconnect-rejected → server rejected this session (needs reload)
*/

#components-reconnect-modal {
    /* Hidden by default. Blazor adds the state class when the SignalR circuit goes down. */
    display: none;
    position: fixed;
    inset: 0;
    /* Above any fixed page chrome so the modal covers everything,
       including the iOS Safari tab bar area — no visual gap. */
    z-index: 100000;
    /* Fairly opaque so the modal color reads through iOS Safari's
       translucent tab bar overlay, making the tab bar area visually merge
       with the rest of the modal instead of showing body bg as a gap. */
    background: rgba(15, 23, 42, 0.92);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    backdrop-filter: blur(4px) saturate(120%);
    align-items: center;
    justify-content: center;
    animation: lvsk-reconnect-fade-in 220ms ease-out;
}

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

/* Card */
.lvsk-reconnect-card {
    background: rgba(30, 41, 59, 0.92);
    border: 1px solid rgba(99, 102, 241, 0.28);
    border-radius: 14px;
    padding: 2.25rem 2.5rem;
    color: #f8fafc;
    text-align: center;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    min-width: 340px;
    max-width: 90vw;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Spinner — two counter-rotating rings in the brand indigo palette */
.lvsk-reconnect-spinner {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    position: relative;
}

.lvsk-reconnect-spinner::before,
.lvsk-reconnect-spinner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}

.lvsk-reconnect-spinner::before {
    inset: 0;
    border-top-color: #6366f1;
    border-right-color: #6366f1;
    animation: lvsk-reconnect-spin 1.1s linear infinite;
}

.lvsk-reconnect-spinner::after {
    inset: 12px;
    border-bottom-color: #a5b4fc;
    border-left-color: #a5b4fc;
    animation: lvsk-reconnect-spin-rev 1.4s linear infinite;
}

@keyframes lvsk-reconnect-spin {
    to { transform: rotate(360deg); }
}

@keyframes lvsk-reconnect-spin-rev {
    to { transform: rotate(-360deg); }
}

@keyframes lvsk-reconnect-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Card text */
.lvsk-reconnect-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: #e0e7ff;
    letter-spacing: -0.01em;
}

.lvsk-reconnect-message {
    font-size: 0.9rem;
    color: #cbd5e1;
    margin: 0;
    line-height: 1.55;
    max-width: 360px;
}

/* State-specific content */
#components-reconnect-modal .lvsk-reconnect-content-failed,
#components-reconnect-modal .lvsk-reconnect-content-rejected {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .lvsk-reconnect-content-attempting,
#components-reconnect-modal.components-reconnect-rejected .lvsk-reconnect-content-attempting {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .lvsk-reconnect-content-failed {
    display: block;
}

#components-reconnect-modal.components-reconnect-rejected .lvsk-reconnect-content-rejected {
    display: block;
}

/* Hide the spinner when we're in a terminal state — show button instead */
#components-reconnect-modal.components-reconnect-failed .lvsk-reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .lvsk-reconnect-spinner {
    display: none;
}

/* Static "warning" icon for failed / rejected states (CSS-only) */
#components-reconnect-modal.components-reconnect-failed .lvsk-reconnect-card::before,
#components-reconnect-modal.components-reconnect-rejected .lvsk-reconnect-card::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.18);
    border: 2px solid rgba(99, 102, 241, 0.5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

/* Action button (Try again / Reload) */
.lvsk-reconnect-button {
    margin-top: 1.25rem;
    background: #6366f1;
    color: white;
    border: none;
    padding: 0.55rem 1.75rem;
    border-radius: 7px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, transform 80ms ease;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.lvsk-reconnect-button:hover {
    background: #4f46e5;
    transform: translateY(-1px);
}

.lvsk-reconnect-button:active {
    transform: translateY(0);
}