@import '_content/PSC.Blazor.Components.MarkdownEditor/PSC.Blazor.Components.MarkdownEditor.mlg14ggzcc.bundle.scp.css';

/* /Components/Layout/AppErrorBar.razor.rz.scp.css */
/* The framework reveals the bar by setting an inline display:block on #blazor-error-ui, so the
   hidden state has to be the stylesheet's default. Scoped CSS resolves to #blazor-error-ui[b-…],
   which outranks any plain #blazor-error-ui rule that survives elsewhere. */
#blazor-error-ui[b-nmm92sl24h] {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
    background: var(--color-surface-800);
    border-top: 1px solid var(--color-warn);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 0.35);
    font-size: 0.875rem;
}

.aeb-row[b-nmm92sl24h] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 80rem;
    margin: 0 auto;
}

/* min-width:0 so a full sentence wraps inside the row instead of pushing the buttons off a phone
   screen; ru/uk/fr run 20-50% longer than the English. */
.aeb-msg[b-nmm92sl24h] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-text-secondary);
    text-wrap: pretty;
}

.aeb-reload[b-nmm92sl24h] {
    flex-shrink: 0;
    color: var(--color-accent-400);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aeb-reload:hover[b-nmm92sl24h] {
    color: var(--color-accent-300);
}

.aeb-dismiss[b-nmm92sl24h] {
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 0.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
}

.aeb-dismiss:hover[b-nmm92sl24h] {
    color: var(--color-text-secondary);
}

/* States. Each line is keyed to the data-state the module sets; the default line shows only while
   the attribute is absent, which is also what renders before the /healthz probe answers. */
.aeb-default[b-nmm92sl24h],
.aeb-state-updating[b-nmm92sl24h],
.aeb-state-offline[b-nmm92sl24h],
.aeb-spinner[b-nmm92sl24h] {
    display: none;
}

#blazor-error-ui:not([data-state]) .aeb-default[b-nmm92sl24h],
#blazor-error-ui[data-state="updating"] .aeb-state-updating[b-nmm92sl24h],
#blazor-error-ui[data-state="offline"] .aeb-state-offline[b-nmm92sl24h] {
    display: inline;
}

/* A state the module diagnosed is a wait, not a failure: spinner on, warning edge off. */
#blazor-error-ui[data-state] .aeb-spinner[b-nmm92sl24h] {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-accent-500);
}

#blazor-error-ui[data-state][b-nmm92sl24h] {
    border-top-color: var(--color-accent-500);
}

.aeb-spinner svg[b-nmm92sl24h] {
    width: 100%;
    height: 100%;
    animation: aeb-spin-b-nmm92sl24h 0.8s linear infinite;
}

@keyframes aeb-spin-b-nmm92sl24h {
    to { transform: rotate(360deg); }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Hide all state-specific elements by default */
.components-reconnect-first-attempt-visible[b-cgq314jq5e],
.components-reconnect-repeated-attempt-visible[b-cgq314jq5e],
.components-reconnect-failed-visible[b-cgq314jq5e],
.components-pause-visible[b-cgq314jq5e],
.components-resume-failed-visible[b-cgq314jq5e],
.rc-reason-down[b-cgq314jq5e],
.rc-reason-offline[b-cgq314jq5e] {
    display: none !important;
}

/* Show text per state */
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-cgq314jq5e],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-cgq314jq5e],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-cgq314jq5e],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-cgq314jq5e],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-cgq314jq5e] {
    display: block !important;
}

/* Once the module has probed WHY the connection dropped, the reason replaces the generic
   "Reconnecting…" / countdown lines (ReconnectModal.razor.js sets data-reason). The attribute is
   only ever present in a connectivity state, so paused/resume text is unaffected. */
#components-reconnect-modal[data-reason] .rc-generic[b-cgq314jq5e] {
    display: none !important;
}

#components-reconnect-modal[data-reason="down"] .rc-reason-down[b-cgq314jq5e],
#components-reconnect-modal[data-reason="offline"] .rc-reason-offline[b-cgq314jq5e] {
    display: block !important;
}

/* Dialog — centered, themed, no scrollbar */
#components-reconnect-modal[b-cgq314jq5e] {
    position: fixed;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    max-width: min(22rem, calc(100vw - 2rem));
    background: var(--color-surface-800);
    border: 1px solid var(--color-surface-600);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    opacity: 0;
    animation: reconnect-fadeOut-b-cgq314jq5e 0.3s both;
}

#components-reconnect-modal[open][b-cgq314jq5e] {
    animation: reconnect-fadeIn-b-cgq314jq5e 0.35s ease-out both;
}

#components-reconnect-modal[b-cgq314jq5e]::backdrop {
    background: rgba(0, 0, 0, 0.3);
}

/* Layout: spinner + text inline */
.reconnect-container[b-cgq314jq5e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* min-width:0 so the message wraps instead of stretching the flex row past max-width — the
   reason lines are full sentences, and ru/uk/fr run 20-50% longer than the English. */
.reconnect-msg[b-cgq314jq5e] {
    min-width: 0;
}

.reconnect-container p[b-cgq314jq5e] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--color-text-secondary);
    text-wrap: pretty;
}

/* Single spinner — always visible when dialog is open */
.reconnect-spinner[b-cgq314jq5e] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-accent-500);
}

.reconnect-spinner svg[b-cgq314jq5e] {
    width: 100%;
    height: 100%;
    animation: reconnect-spin-b-cgq314jq5e 0.8s linear infinite;
}

/* Resume button */
#components-reconnect-modal button[b-cgq314jq5e] {
    border: 0;
    background: var(--color-accent-500);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
}

#components-reconnect-modal button:hover[b-cgq314jq5e] {
    background: var(--color-accent-400);
}

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

@keyframes reconnect-fadeIn-b-cgq314jq5e {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes reconnect-fadeOut-b-cgq314jq5e {
    from { opacity: 1; }
    to { opacity: 0; }
}