#blazor-error-ui {
 background: lightyellow;
 bottom: 0;
 box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
 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-error-ui .reload {
 background: transparent;
 border: 0;
 color: inherit;
 cursor: pointer;
 padding: 0;
 text-decoration: underline;
}

.gixo-reconnect-overlay {
 position: fixed;
 inset: 0;
 z-index: 10000;
 align-items: center;
 justify-content: center;
 background: transparent;
}

.gixo-reconnect-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.75rem;
 max-width: 360px;
 padding: 2.5rem 2rem;
 background: var(--gixo-card, #1e293b);
 border: 1px solid var(--gixo-border, rgba(0, 217, 255, 0.2));
 border-radius: 18px;
 text-align: center;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Recovery shields controls whose circuit is offline, while leaving the work readable.
   The polite strip explains even a brief interruption; the larger card follows the existing grace period. */
.gixo-reconnect-status {
 display: none;
 position: absolute;
 top: max(1rem, env(safe-area-inset-top));
 left: 50%;
 transform: translateX(-50%);
 width: max-content;
 max-width: calc(100vw - 2rem);
 padding: .7rem 1rem;
 border: 1px solid var(--gixo-border, #475569);
 border-radius: 10px;
 background: var(--gixo-card, #1e293b);
 color: var(--gixo-text-primary, #f8fafc);
 font: inherit;
 box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
.gixo-reconnect-pending .gixo-reconnect-status { display: block; }
.gixo-reconnect-counter { display: none; }

.gixo-reconnect-overlay.gixo-reconnect-pending {
 background: transparent;
 backdrop-filter: none;
}

.gixo-reconnect-pending .gixo-reconnect-card {
 visibility: hidden;
}

.gixo-reconnect-title {
 margin: 0;
 color: var(--gixo-text-primary, #f1f5f9);
 font-size: 1.15rem;
 font-weight: 700;
}

.gixo-reconnect-body {
 margin: 0;
 color: var(--gixo-text-secondary, #94a3b8);
 font-size: 0.95rem;
 line-height: 1.5;
}

.gixo-reconnect-reload {
 min-height: 2.25rem;
 padding: 0.45rem 0.9rem;
 border: 1px solid rgba(0, 217, 255, 0.35);
 border-radius: 8px;
 background: rgba(0, 217, 255, 0.12);
 color: var(--gixo-text-primary, #e0faff);
 cursor: pointer;
 font-weight: 700;
}

.gixo-reconnect-reload:hover,
.gixo-reconnect-reload:focus-visible {
 background: rgba(0, 217, 255, 0.2);
 outline: none;
}

.gixo-reconnect-spinner {
 width: 36px;
 height: 36px;
 border: 3px solid rgba(0, 217, 255, 0.15);
 border-top-color: #00d9ff;
 border-radius: 50%;
 animation: gixo-reconnect-spin 0.8s linear infinite;
}

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