/* Blazor Error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.3);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Blazor Reconnection UI — subtle corner indicator instead of a blocking modal.
   No dark backdrop and no pointer-events capture, so the user can keep
   interacting with (or just looking at) the page while we quietly retry. */
.components-reconnect-modal {
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    top: auto;
    left: auto;
    z-index: 1050;
    pointer-events: none;
    text-align: left;
    font-weight: normal;
    padding-top: 0;
}

.components-reconnect-modal .reconnect-content {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background-color: rgba(33, 33, 33, 0.85);
    color: #fff;
    font-size: 0.85rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    max-width: 90vw;
    pointer-events: auto;
}

.components-reconnect-modal .reconnect-content::before {
    content: "";
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: components-reconnect-spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

.components-reconnect-modal .reconnect-content a {
    color: #90caf9;
    text-decoration: underline;
}

/* Only the message matching the current reconnect state is shown. */
.components-reconnect-modal .reconnect-text-show,
.components-reconnect-modal .reconnect-text-failed,
.components-reconnect-modal .reconnect-text-rejected {
    display: none;
}

.components-reconnect-show {
    display: block;
}

    .components-reconnect-show .reconnect-text-show {
        display: inline;
    }

    /* Blazor adds this class the instant the connection drops, but most drops
       recover within a fraction of a second. Fade the indicator in only after
       it's been visible for a beat, so quick blips never flash on screen. */
    .components-reconnect-show .reconnect-content {
        opacity: 0;
        animation: components-reconnect-fade-in 0.2s ease-in 0.6s forwards;
    }

@keyframes components-reconnect-fade-in {
    to {
        opacity: 1;
    }
}

.components-reconnect-hide {
    display: none;
}

.components-reconnect-failed {
    display: block;
}

    .components-reconnect-failed .reconnect-text-failed {
        display: inline;
    }

.components-reconnect-rejected {
    display: block;
}

    .components-reconnect-rejected .reconnect-text-rejected {
        display: inline;
    }

/* Ensure modal is completely hidden when no state classes are present */
.components-reconnect-modal:not(.components-reconnect-show):not(.components-reconnect-failed):not(.components-reconnect-rejected) {
    display: none;
}