/*
  Branded reconnect overlay (portal). The <dialog> is display:none until
  js/reconnect.js calls showModal(). Styling rides MudBlazor palette variables.
  Deliberately hidden on the public marketing pages (mirrors the Hie portal):
  a dropped circuit there is harmless and a modal would just alarm visitors.
*/
#components-reconnect-modal.xo-reconnect {
    border: none;
    border-radius: 14px;
    padding: 0;
    background: transparent;
}
#components-reconnect-modal.xo-reconnect::backdrop {
    background: rgba(15, 19, 27, .55);
    backdrop-filter: blur(2px);
}

.xo-reconnect-card {
    background: var(--mud-palette-surface, #ffffff);
    color: var(--mud-palette-text-primary, #1d2b50);
    padding: 28px 34px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    min-width: 260px;
}

.xo-reconnect-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 3px solid rgba(127, 127, 127, .25);
    border-top-color: var(--mud-palette-primary, #3a5fef);
    animation: xo-reconnect-spin .8s linear infinite;
}
@keyframes xo-reconnect-spin { to { transform: rotate(360deg); } }

.xo-reconnect-msg { margin: 0; font-weight: 600; }

/* Manual retry appears only once automatic retries have failed. */
.xo-reconnect-retry {
    margin-top: 16px;
    border: 1px solid var(--mud-palette-primary, #3a5fef);
    background: var(--mud-palette-primary, #3a5fef);
    color: #fff;
    border-radius: 999px;
    padding: 8px 20px;
    font-weight: 600;
    cursor: pointer;
    display: none;
}
#components-reconnect-modal.xo-failed .xo-reconnect-retry { display: inline-block; }
#components-reconnect-modal.xo-failed .xo-reconnect-spinner { opacity: .4; }

/* Public marketing pages: never show the reconnect modal. */
body:has(.public-appbar) #components-reconnect-modal { display: none !important; }