/* The notices made by js/connection.js: reconnecting, and the error that stopped the page */

.elwiz-connection {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 2000;
    display: none;
    align-items: center;
    gap: 0.6rem;
    max-width: calc(100% - 2rem);
    padding: 0.6rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Brief blips pass without the notice flashing up */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying {
    display: flex;
    animation: elwiz-connection-in 0.2s ease-out 1s both;
}

@keyframes elwiz-connection-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.elwiz-connection-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--text-muted);
    border-right-color: transparent;
    border-radius: 50%;
    animation: elwiz-connection-spin 0.8s linear infinite;
}

@keyframes elwiz-connection-spin {
    to { transform: rotate(360deg); }
}

/* Blazor shows it by setting display: block on the element itself, so its parts sit inline */
.elwiz-connection-error .bi {
    color: var(--bad-text);
    margin-right: 0.5rem;
}

.elwiz-connection-error .reload {
    margin-left: 0.75rem;
    border: 0;
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    background: var(--link);
    color: #fff;
    font: inherit;
    font-weight: 600;
}