/* State-based visibility - Blazor applies these classes */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible {
    display: none !important;
}

/* Default message - shown when no state class is applied */
.components-reconnect-default-visible {
    display: block;
}

/* Hide default when any state class is present */
#components-reconnect-modal.components-reconnect-show .components-reconnect-default-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-default-visible,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-default-visible,
#components-reconnect-modal.components-reconnect-paused .components-reconnect-default-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-default-visible {
    display: none !important;
}

#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-retrying):not(.components-reconnect-failed) .components-reconnect-first-attempt-visible {
    display: block !important;
}

#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible {
    display: block !important;
}

#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible {
    display: none !important;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block !important;
}

#components-reconnect-modal.components-reconnect-paused .components-pause-visible {
    display: block !important;
}

#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible {
    display: block !important;
}

/* Dialog positioning - hidden by default until Blazor adds a state class */
#components-reconnect-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
}

/* Dialog is hidden by default (browser behavior), shown when .showModal() adds [open] */

#components-reconnect-modal::backdrop {
    background: rgba(16, 44, 90, 0.4);
    backdrop-filter: blur(4px);
}

/* Float animation for Baby Yoda */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Bounce animation for loading dots */
@keyframes bounce-dot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.animate-bounce-dot {
    animation: bounce-dot 1.4s infinite ease-in-out both;
}

.animate-bounce-dot:nth-child(1) { animation-delay: -0.32s; }
.animate-bounce-dot:nth-child(2) { animation-delay: -0.16s; }