/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Hide all state-specific elements by default */
.components-reconnect-first-attempt-visible[b-cgq314jq5e],
.components-reconnect-repeated-attempt-visible[b-cgq314jq5e],
.components-reconnect-failed-visible[b-cgq314jq5e],
.components-pause-visible[b-cgq314jq5e],
.components-resume-failed-visible[b-cgq314jq5e] {
    display: none !important;
}

/* Show text per state */
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-cgq314jq5e],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-cgq314jq5e],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-cgq314jq5e],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-cgq314jq5e],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-cgq314jq5e] {
    display: block !important;
}

/* Dialog — centered, themed, no scrollbar */
#components-reconnect-modal[b-cgq314jq5e] {
    position: fixed;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    max-width: 18rem;
    background: var(--color-surface-800);
    border: 1px solid var(--color-surface-600);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    opacity: 0;
    animation: reconnect-fadeOut-b-cgq314jq5e 0.3s both;
}

#components-reconnect-modal[open][b-cgq314jq5e] {
    animation: reconnect-fadeIn-b-cgq314jq5e 0.35s ease-out both;
}

#components-reconnect-modal[b-cgq314jq5e]::backdrop {
    background: rgba(0, 0, 0, 0.3);
}

/* Layout: spinner + text inline */
.reconnect-container[b-cgq314jq5e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reconnect-container p[b-cgq314jq5e] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Single spinner — always visible when dialog is open */
.reconnect-spinner[b-cgq314jq5e] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-accent-500);
}

.reconnect-spinner svg[b-cgq314jq5e] {
    width: 100%;
    height: 100%;
    animation: reconnect-spin-b-cgq314jq5e 0.8s linear infinite;
}

/* Resume button */
#components-reconnect-modal button[b-cgq314jq5e] {
    border: 0;
    background: var(--color-accent-500);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
}

#components-reconnect-modal button:hover[b-cgq314jq5e] {
    background: var(--color-accent-400);
}

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

@keyframes reconnect-fadeIn-b-cgq314jq5e {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes reconnect-fadeOut-b-cgq314jq5e {
    from { opacity: 1; }
    to { opacity: 0; }
}