/* ===== OO ReconnectDialog =====
   Dialog #components-reconnect-modal: Blazor setzt den Zustand als Klasse components-reconnect-* am Dialog,
   sichtbar ist nur die Zeile mit der passenden Klasse *-visible. Vorschau (--preview) inline statt modal.
   ============================== */

.oo-reconnect-dialog .components-reconnect-first-attempt-visible,
.oo-reconnect-dialog .components-reconnect-repeated-attempt-visible,
.oo-reconnect-dialog .components-reconnect-failed-visible,
.oo-reconnect-dialog .components-pause-visible,
.oo-reconnect-dialog .components-resume-failed-visible {
    display: none;
}

.oo-reconnect-dialog.components-reconnect-show .components-reconnect-first-attempt-visible,
.oo-reconnect-dialog.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
.oo-reconnect-dialog.components-reconnect-failed .components-reconnect-failed-visible,
.oo-reconnect-dialog.components-reconnect-rejected .components-reconnect-failed-visible,
.oo-reconnect-dialog.components-reconnect-paused .components-pause-visible,
.oo-reconnect-dialog.components-reconnect-resume-failed .components-resume-failed-visible {
    display: block;
}

/* [open] wie in dialog.css (dialog[open] { border: 0; padding: 0; }), sonst gewinnt deren Regel */
.oo-reconnect-dialog[open] {
    width: min(22rem, calc(100vw - 2 * var(--oo-space-4)));
    margin: 20vh auto;
    padding: var(--oo-space-6);
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-radius-lg);
    background: var(--oo-color-surface);
    color: var(--oo-color-text);
    box-shadow: var(--oo-shadow-lg);
    font-size: var(--oo-font-size-md);
}

/* Vorschau: im Fluss der Seite statt als modaler Dialog */
.oo-reconnect-dialog.oo-reconnect-dialog--preview[open] {
    position: static;
    margin: 0;
}

.oo-reconnect-dialog__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--oo-space-4);
    text-align: center;
}

.oo-reconnect-dialog__content p {
    margin: 0;
}

.oo-reconnect-dialog__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 0.1875rem solid var(--oo-color-border);
    border-top-color: var(--oo-primary);
    /* Kreis unabhängig vom Theme (theme7 setzt --oo-radius-full auf 0) */
    border-radius: 50%;
    animation: oo-reconnect-dialog-drehen 1s linear infinite;
}

@keyframes oo-reconnect-dialog-drehen {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .oo-reconnect-dialog__spinner {
        animation-duration: 3s;
    }
}