/*
 * Request guard box — injected by public/refactor/js/request-guard.js when an answer to a request
 * that sends data did not come from the application (no X-App-Handled stamp).
 * docs/request-guard/REQUEST-GUARD-COMPREHENSIVE-DESIGN.md §5.4
 *
 * Every token has a fallback: the login and signup pages do not load variables.css.
 *
 * At the bottom: the top of the page holds the toolbars — the builder's Save, Save & Close and
 * Close buttons — and the box must not cover the button the user will press again.
 *
 * Under every modal (just below their backdrop): the caller's own error dialog says the same and
 * has to be closed first; its OK button sat under the box when the box was above it.
 */
.mc-request-guard {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--z-modal-backdrop, 400) - 1);
    box-sizing: border-box;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-card-bg, #FFFFFF);
    color: var(--color-text, #111111);
    border: 1px solid var(--color-error, #D32F2F);
    border-left-width: 4px;
    border-radius: var(--radius-card, 12px);
    box-shadow: var(--shadow-modal, 0 4px 24px rgba(0, 0, 0, 0.12));
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: var(--text-base, 14px);
    line-height: var(--leading-normal, 1.5);
    text-align: left;
}

.mc-request-guard__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
}

.mc-request-guard__title {
    color: var(--color-error, #D32F2F);
    font-weight: var(--weight-semibold, 600);
}

.mc-request-guard__close {
    flex-shrink: 0;
    margin: -4px -6px 0 0;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted, #555555);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.mc-request-guard__message,
.mc-request-guard__status {
    margin: var(--space-2, 8px) 0 0;
    overflow-wrap: anywhere;
}

.mc-request-guard__label {
    margin-top: var(--space-2, 8px);
    color: var(--color-text-muted, #555555);
    font-size: var(--text-sm, 12px);
}

.mc-request-guard__excerpt {
    margin: var(--space-1, 4px) 0 0;
    max-height: 160px;
    overflow: auto;
    padding: var(--space-2, 8px);
    background: var(--color-error-bg, #F0F0F0);
    border-radius: var(--radius-input, 6px);
    font-family: var(--font-mono, "SF Mono", "Roboto Mono", monospace);
    font-size: var(--text-sm, 12px);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mc-request-guard__status {
    color: var(--color-text-muted, #555555);
    font-size: var(--text-sm, 12px);
}