/* The toast, in its own file rather than theme.css.
 *
 * Nine screens (agents, projects, settings, operations, audit, mapping,
 * aljazira, home, public_form) never loaded theme.css -- they each declare a
 * rival :root -- so a rule that lived there would simply not exist on them.
 * Every var() therefore carries a literal fallback: tokens win where the
 * design system is present, and the toast still renders where it is not.
 *
 * Deliberately NOT called .toast. Eleven screens define their own under that
 * name and this must not reach into any of them.
 */
.grc-toast {
    position: fixed;
    right: var(--sp-6, 24px);
    /* Pages that park something in this corner (the voice FAB) raise
       --toast-bottom. A custom property, not a later rule: toast.css is
       linked last, so any plain .grc-toast override elsewhere would lose. */
    bottom: var(--toast-bottom, var(--sp-6, 24px));
    z-index: 10000;  /* above the voice FAB (9999), below the API-key gate (99999) */
    max-width: 360px;
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    border: 1px solid var(--border, rgba(148, 163, 184, 0.16));
    border-left: 3px solid var(--c-neutral, #9aa7bb);
    border-radius: var(--r-sm, 8px);
    background: var(--surface2, #1a2740);
    color: var(--text, #f2f6fb);
    font-size: var(--fs-sm, 13px);
    line-height: var(--lh-base, 1.5);
    /* Messages inherited from alert() carry their own line breaks. */
    white-space: pre-line;
    box-shadow: var(--elev-3, 0 14px 40px -14px rgba(0, 0, 0, 0.72));
    opacity: 0;
    transform: translateY(var(--sp-2, 8px));
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.grc-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.grc-toast.ok { border-left-color: var(--success, #34d399); }
.grc-toast.error { border-left-color: var(--danger, #fb7185); }

@media (prefers-reduced-motion: reduce) {
    .grc-toast { transition: none; }
}