/* ===========================================================================
   private-flow-shared.css   (v3 — TOKENS ONLY)
   ---------------------------------------------------------------------------
   What this file is:
     A tiny, side-effect-free stylesheet that defines design tokens used
     by the agent flow (and a small toast helper). Loaded globally from
     _Layout.cshtml without affecting any other page — it sets no body,
     html, layout, or font rules. Just :root custom properties.

   What CHANGED from v2:
     • REMOVED .pa-prompt-mask + .pa-prompt-modal styles. The Change Role
       button no longer opens a confirmation modal — it navigates directly
       to the role picker. Modal markup is dead code.
     • Agent palette REWORKED: now LIGHT-THEME with black + cyan accents
       (matching the brand wordmark and the brand cyan from the "I" dot
       in the IKHAYALAMI logo). The dark/charcoal background theme from
       v2 has been replaced with the same white-on-light chrome the
       seller uses, just with cyan replacing orange.

   Loaded globally from _Layout.cshtml. ~80 lines.
   =========================================================================== */

:root {
    /* ── Brand palette (from logo) ─────────────────────────────────── */
    --brand-charcoal: #0e0e11; /* the IKHAYALAMI wordmark */
    --brand-charcoal-soft: #1a1a1f;
    --brand-orange: #f58220; /* the sun in the logo (seller accent) */
    --brand-cyan: #56c4f8; /* the dot on the "I" + the wave */
    --brand-cyan-deep: #3fa9d9;
    --brand-cyan-soft: #b8e3f7;
    /* ── Agent flow tokens (light theme, black + cyan) ─────────────── */
    --pa-bg: #ffffff;
    --pa-bg-soft: #fafbfc;
    --pa-bg-tint: #f3f8fc; /* very pale cyan for accent panels */
    --pa-line: rgba(14,14,17,0.08);
    --pa-line-strong: rgba(14,14,17,0.16);
    --pa-line-cyan: rgba(86,196,248,0.28);
    --pa-ink: var(--brand-charcoal);
    --pa-ink-soft: #4a4d57;
    --pa-ink-mute: #7a7e8c;
    --pa-accent: var(--brand-cyan);
    --pa-accent-deep: var(--brand-cyan-deep);
    --pa-accent-on: var(--brand-charcoal); /* text colour ON cyan backgrounds */

    --pa-success: #10b981;
    --pa-warn: #f59e0b;
    --pa-danger: #ef4444;
    --pa-shadow-soft: 0 6px 18px -8px rgba(14,14,17,0.12);
    --pa-shadow-card: 0 14px 36px -16px rgba(14,14,17,0.18), 0 2px 6px rgba(14,14,17,0.04);
}

/* ── Toast (reused by both flows for transient hints) ──────────────── */
.pa-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 16px);
    padding: 11px 18px;
    border-radius: 11px;
    background: var(--brand-charcoal);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 16px 36px -10px rgba(14,14,17,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 10000;
    max-width: calc(100vw - 32px);
}

    .pa-toast.is-visible {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    .pa-toast i {
        color: var(--brand-cyan);
        font-size: 14px;
    }

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