/* =================================================================== QUOTEE V3 — AI SURFACE Mascot FAB, drawer, info popups, AND the new ambient layer: per-element provenance badges + section confidence + inline nudges. Surface modes (via [data-ai-mode] on ): "fab" → Mascot FAB only (legacy) "ambient" → Inline badges + provenance + nudges, no FAB "hybrid" → Both (recommended) =================================================================== */ /* ═════════════════════════════════════════════════════════════════ 1. THE MASCOT FAB Persistent bottom-right. Mascot avatar inside a gold ring with pulse. Hover slides out an "Ask Quotee" label. ═════════════════════════════════════════════════════════════════ */ /* Inside-right-dock Quotee avatar (operator 2026-06-03 directive: avatar docks on the inside-right edge of the viewer, not the viewport corner). The mascot anchors at the LEFT edge of the configuration rail via --rail-w, so it visually docks at the boundary between the viewer and the rail. Default --rail-w: 0 restores the original viewport-corner placement on surfaces without a rail. */ .qt-fab { position: fixed; bottom: 24px; right: calc(var(--rail-w, 0px) + 24px); z-index: 150; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .qt-fab__label { position: absolute; right: calc(100% + 14px); top: 50%; white-space: nowrap; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: var(--w-bold); letter-spacing: var(--tr-body); padding: 7px 12px; border-radius: 8px; box-shadow: var(--shadow-3); opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(8px); transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft); } .qt-fab:hover .qt-fab__label, .qt-fab.is-open .qt-fab__label { opacity: 1; transform: translateY(-50%) translateX(0); } .qt-fab__avatar { position: relative; width: 60px; height: 60px; flex: 0 0 auto; animation: qt-fab-float 4s var(--ease-soft) infinite; transition: transform var(--dur-base) var(--ease-soft); } .qt-fab:hover .qt-fab__avatar { transform: scale(1.06); } .qt-fab__avatar img { width: 100%; height: 100%; border-radius: 50%; background: var(--gold-pale); object-fit: cover; position: relative; z-index: 2; box-shadow: 0 8px 22px -8px rgba(0,0,0,0.40), 0 0 0 2px var(--paper), 0 0 18px -2px var(--gold-glow); } /* Pulsing glow ring radiating outward */ .qt-fab__avatar::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow) 0%, transparent 68%); animation: qt-fab-pulse 2.6s var(--ease-soft) infinite; z-index: 1; } /* Online status dot with a soft ping */ .qt-fab__avatar::after { content: ""; position: absolute; bottom: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--emerald); border: 2px solid var(--paper); z-index: 3; animation: qt-fab-ping 2.2s var(--ease-soft) infinite; } @keyframes qt-fab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes qt-fab-pulse { 0% { transform: scale(0.85); opacity: 0.8; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } } @keyframes qt-fab-ping { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } } [data-ai-mode="ambient"] .qt-fab { display: none; } /* In deck modes (present/slides) suppress the floating avatar + greeting so they never sit over a projected slide. They return in Browse. */ [data-proposal-mode="present"] .qt-fab, [data-proposal-mode="slides"] .qt-fab, [data-proposal-mode="present"] .qt-greet, [data-proposal-mode="slides"] .qt-greet { display: none !important; } /* The CLOSED chat drawer must never peek onto a projected slide. Its closed position (translateX off-screen, anchored to --rail-w) can still sit partly on-screen when a rail width is set, so in deck modes hide it entirely unless the customer has explicitly opened it (then it slides in over the stage). */ [data-proposal-mode="present"] .qt-drawer:not(.is-open), [data-proposal-mode="slides"] .qt-drawer:not(.is-open) { display: none !important; } /* On the proposal (browse), seat the avatar + greeting INSIDE the right rail column, inset off the far screen corner, per operator. The rail is the right-most ~360px column; this pulls the avatar in so it reads as part of the rail rather than hugging the viewport edge. */ [data-proposal-mode="browse"] .qt-fab { right: clamp(28px, 6vw, 108px); bottom: 30px; } [data-proposal-mode="browse"] .qt-greet { right: clamp(28px, 6vw, 108px); } /* ═════════════════════════════════════════════════════════════════ 2. GREETING BUBBLE — first-load chat from the mascot ═════════════════════════════════════════════════════════════════ */ .qt-greet { position: fixed; bottom: 90px; right: 24px; width: 320px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-xl); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-pop); z-index: 145; animation: fade-up 0.4s var(--ease-soft); } .qt-greet::after { content: ""; position: absolute; right: 26px; bottom: -8px; width: 16px; height: 16px; background: var(--paper); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transform: rotate(45deg); } .qt-greet__head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-2); } .qt-greet__head .eyebrow { font-size: 9.5px; } .qt-greet__head .name { color: var(--ink); font-weight: var(--w-bold); font-size: 11px; letter-spacing: var(--tr-caps); text-transform: uppercase; } .qt-greet__head .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); } .qt-greet__head .kind { font-size: 9.5px; font-weight: var(--w-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--gold-deep); } .qt-greet h4 { font-size: 15px; font-weight: var(--w-bold); color: var(--ink); margin: 0 0 6px; letter-spacing: -0.005em; } .qt-greet p { font-size: 13px; line-height: 1.5; color: var(--ink-mid); margin: 0 0 var(--sp-3); } .qt-greet__actions { display: flex; gap: 8px; align-items: center; } .qt-greet__close { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-mute); font-size: 16px; line-height: 1; } .qt-greet__close:hover { background: var(--paper-2); color: var(--ink); } /* ═════════════════════════════════════════════════════════════════ 3. DRAWER — Quotee conversation, slides FROM the configuration rail INWARD across the viewer area (operator 2026-06-03 directive). Right edge anchors at --rail-w (the rail's left edge) so the drawer overlays only the viewer area, leaving the configuration rail visible. ═════════════════════════════════════════════════════════════════ */ .qt-drawer { position: fixed; top: 0; right: var(--rail-w, 0px); width: 420px; max-width: 92vw; height: 100vh; background: var(--paper); border-left: 1px solid var(--rule); box-shadow: var(--shadow-pop); z-index: 180; display: flex; flex-direction: column; /* Closed position: fully off-screen to the RIGHT past the configuration rail. With right: --rail-w anchoring the drawer's right edge at the rail's left edge, a plain translateX(100%) only shifts by the drawer's own width and lands the drawer INSIDE the rail area, hiding the configuration pane (operator 2026-06-03 P0). Translating by drawer width PLUS the rail width PLUS a small buffer parks it fully off the viewport so the rail stays visible and clickable. */ transform: translateX(calc(100% + var(--rail-w, 0px) + 24px)); pointer-events: none; transition: transform var(--dur-slow) var(--ease-soft); } .qt-drawer.is-open { transform: translateX(0); pointer-events: auto; } .qt-drawer__head { display: flex; align-items: center; gap: 12px; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--rule); background: var(--paper-2); } .qt-drawer__head .ava { width: 32px; height: 32px; border-radius: 50%; background: var(--gold-pale); background-image: url("../assets/onward/quotee-mascot.png"); background-size: cover; background-position: center; } .qt-drawer__head .title { font-weight: var(--w-bold); color: var(--ink); font-size: 14px; } .qt-drawer__head .sub { font-size: 11px; color: var(--ink-mid); } .qt-drawer__head .close { margin-left: auto; padding: 6px; color: var(--ink-mid); border-radius: var(--r-md); } .qt-drawer__head .close:hover { background: var(--paper); color: var(--ink); } .qt-drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); } .qt-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 90%; } .qt-msg__ava { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; background: var(--gold-pale); background-image: url("../assets/onward/quotee-mascot.png"); background-size: cover; background-position: center; } .qt-msg__bubble { background: var(--paper-2); border: 1px solid var(--rule); padding: 10px 14px; border-radius: 4px 14px 14px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); } .qt-msg.is-user { flex-direction: row-reverse; margin-left: auto; } .qt-msg.is-user .qt-msg__ava { background: var(--ink); } .qt-msg.is-user .qt-msg__bubble { background: var(--gold-pale); border-color: var(--gold-line); color: var(--ink); border-radius: 14px 4px 14px 14px; } .qt-drawer__suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .qt-drawer__suggestions .chip { cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: var(--w-medium); } .qt-drawer__suggestions .chip:hover { background: var(--gold-pale); border-color: var(--gold-line); color: var(--gold-deep); } .qt-drawer__compose { border-top: 1px solid var(--rule); padding: var(--sp-3) var(--sp-4); background: var(--paper); } .qt-drawer__compose .input-row { display: flex; align-items: flex-end; gap: 8px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 8px 10px; } .qt-drawer__compose textarea { flex: 1; background: transparent; border: none; outline: none; font: inherit; resize: none; color: var(--ink); font-size: 13px; min-height: 22px; max-height: 120px; } .qt-drawer__compose .send { width: 30px; height: 30px; border-radius: var(--r-md); background: var(--gold); color: var(--ink); display: grid; place-items: center; flex: 0 0 auto; } .qt-drawer__compose .send:hover { background: var(--gold-leaf); } .qt-drawer__compose .hint { font-size: 10.5px; color: var(--ink-mute); letter-spacing: var(--tr-caps); text-transform: uppercase; margin-top: 6px; display: flex; gap: 8px; } /* drawer backdrop (lighter than modal) */ .qt-drawer__scrim { position: fixed; inset: 0; background: rgba(20,20,18,0.16); z-index: 170; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-soft); } .qt-drawer__scrim.is-open { opacity: 1; pointer-events: auto; } /* ═════════════════════════════════════════════════════════════════ 4. INFO POPUP — dotted-gold underlined hyperlinks Hover/click reveals a small tooltip authored by Quotee. ═════════════════════════════════════════════════════════════════ */ .qt-info { border-bottom: 1px dotted var(--gold); cursor: help; color: inherit; text-decoration: none; position: relative; } .qt-info:hover { border-bottom-color: var(--gold-deep); color: var(--gold-deep); } .qt-info__pop { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -8px); width: 280px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-pop); font-size: 12px; line-height: 1.5; color: var(--ink-mid); letter-spacing: 0; text-transform: none; z-index: 90; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-soft); } .qt-info:hover .qt-info__pop, .qt-info:focus-within .qt-info__pop { opacity: 1; pointer-events: auto; } .qt-info__pop .head { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: var(--w-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--gold-deep); margin-bottom: 4px; } .qt-info__pop .head img { width: 14px; height: 14px; border-radius: 50%; } .qt-info__pop strong { color: var(--ink); font-weight: var(--w-bold); } /* ═════════════════════════════════════════════════════════════════ 5. AMBIENT PROVENANCE — per-element badges + section confidence The new Nexus-tier requirement. Every piece of generated content declares its source: AI / human / template / vendor / customer. ═════════════════════════════════════════════════════════════════ */ /* Inline badge that sits next to a section title or near content */ .prov { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px 0 6px; font-size: 9.5px; font-weight: var(--w-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-mid); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-pill); font-feature-settings: "ss02"; cursor: help; white-space: nowrap; vertical-align: middle; position: relative; } .prov__ico { width: 11px; height: 11px; display: grid; place-items: center; font-size: 10px; line-height: 1; } .prov--ai { color: var(--violet); background: var(--violet-soft); border-color: rgba(91,33,182,0.20); } .prov--human { color: var(--ink); background: var(--paper-2); border-color: var(--rule-strong); } .prov--template{ color: var(--cobalt); background: var(--cobalt-soft); border-color: rgba(29,78,216,0.20); } .prov--vendor { color: var(--coral); background: var(--coral-soft); border-color: rgba(184,67,26,0.25); } .prov--customer{ color: var(--emerald); background: var(--emerald-soft); border-color: rgba(4,120,87,0.25); } .prov--locked { color: var(--gold-deep); background: var(--gold-pale); border-color: var(--gold-line); } .prov__pop { position: absolute; top: calc(100% + 6px); left: 0; width: 280px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--sp-3); box-shadow: var(--shadow-pop); font-size: 12px; line-height: 1.5; color: var(--ink-mid); letter-spacing: 0; text-transform: none; z-index: 90; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-soft); } .prov:hover .prov__pop, .prov:focus-within .prov__pop { opacity: 1; pointer-events: auto; } /* The proposal's provenance badge sits top-right of each section (.prop-section__meta), so the default left:0 / 280px popover ran straight off the right edge of the page and got clipped (operator report: "the callout is clipped off the page"). Anchor it to the badge's RIGHT edge so it opens leftward, into the page. Also cap width to the viewport on small screens. */ .prop-section__meta .prov__pop { left: auto; right: 0; max-width: min(280px, 86vw); } .prov__pop .who { font-weight: var(--w-bold); color: var(--ink); font-size: 12.5px; margin-bottom: 2px; } .prov__pop .when { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); } .prov__pop .meter { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .prov__pop .meter .bar { flex: 1; height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; } .prov__pop .meter .bar .fill { height: 100%; background: var(--gold); } .prov__pop .meter .val { font-family: var(--font-mono); font-size: 11px; color: var(--ink); font-weight: var(--w-bold); } /* Section confidence — small ribbon at top-right of editorial sections */ .prov-ribbon { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-pill); font-size: 10.5px; font-weight: var(--w-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-mid); } .prov-ribbon .ring { width: 14px; height: 14px; position: relative; } .prov-ribbon .ring svg { transform: rotate(-90deg); } .prov-ribbon .ring .bg { fill: none; stroke: var(--rule); stroke-width: 2.5; } .prov-ribbon .ring .fill { fill: none; stroke: var(--emerald); stroke-width: 2.5; stroke-linecap: round; } .prov-ribbon .val { font-family: var(--font-mono); color: var(--ink); } .prov-ribbon.is-warn .ring .fill { stroke: var(--warning); } .prov-ribbon.is-danger .ring .fill { stroke: var(--danger); } /* Inline nudge — Quotee whispers in margin, alongside content */ .qt-nudge { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: var(--r-md); font-size: 13px; line-height: 1.5; color: var(--ink-soft); position: relative; } .qt-nudge__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--gold-pale); background-image: url("../assets/onward/quotee-mascot.png"); background-size: cover; flex: 0 0 auto; } .qt-nudge__body { flex: 1; min-width: 0; } .qt-nudge__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .qt-nudge__head .name { font-size: 11px; font-weight: var(--w-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--gold-deep); } .qt-nudge__head .reason { font-size: 11px; color: var(--ink-mute); } .qt-nudge__actions { display: flex; gap: 6px; margin-top: var(--sp-2); } .qt-nudge__dismiss { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; color: var(--ink-mute); display: grid; place-items: center; font-size: 14px; line-height: 1; } .qt-nudge__dismiss:hover { background: var(--paper-2); color: var(--ink); } .qt-nudge--margin { border-left-color: var(--warning); } .qt-nudge--margin .qt-nudge__head .name { color: var(--warning); } [data-ai-mode="fab"] .prov, [data-ai-mode="fab"] .prov-ribbon, [data-ai-mode="fab"] .qt-nudge { display: none; } /* ═════════════════════════════════════════════════════════════════ 6. AGENT METRICS ROW — margin meter (agent-only) ═════════════════════════════════════════════════════════════════ */ .qt-margin { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); font-size: 12px; color: var(--ink-mid); } .qt-margin__label { font-size: 9.5px; font-weight: var(--w-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-mute); } .qt-margin__val { font-family: var(--font-mono); font-size: 15px; font-weight: var(--w-bold); color: var(--emerald); font-variant-numeric: tabular-nums; } .qt-margin__val.is-warn { color: var(--warning); } .qt-margin__val.is-danger { color: var(--danger); } .qt-margin__bar { flex: 1; height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; position: relative; } .qt-margin__bar .fill { height: 100%; background: var(--emerald); transition: width var(--dur-base) var(--ease-soft); } .qt-margin__bar .threshold { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--ink); left: 38%; /* AT 38% — Onward's floor */ } .qt-margin__bar .threshold::after { content: "38%"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; color: var(--ink-mid); } /* ═════════════════════════════════════════════════════════════════ V4 — TRUST PLANE Components: Trust Banner, Lineage Drawer (agent + customer views), AI Run History row, Provenance Chain block, Catalogue Promotion Queue card, Negotiation Playback diff. ═════════════════════════════════════════════════════════════════ */ /* ── TRUST BANNER — customer-facing top-of-proposal ─────────────── */ .qt-trust { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 18px; background: linear-gradient(90deg, var(--gold-paler) 0%, var(--paper) 60%); border: 1px solid var(--gold-line); border-radius: var(--r-lg); position: relative; overflow: hidden; } .qt-trust::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-leaf) 100%); } .qt-trust__ico { width: 36px; height: 36px; background: url(../assets/onward/quotee-mascot.png) center/cover var(--gold-pale); border-radius: 50%; border: 1px solid var(--gold-line); flex: 0 0 36px; } .qt-trust__body { min-width: 0; } .qt-trust__lbl { font-size: 10.5px; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; font-weight: var(--w-bold); color: var(--gold-deep); } .qt-trust__txt { font-size: 13px; color: var(--ink); margin-top: 2px; line-height: 1.45; } .qt-trust__txt strong { font-weight: var(--w-bold); } .qt-trust__txt .ck { color: var(--success); font-weight: var(--w-bold); } .qt-trust__expand { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--w-bold); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-deep); padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--gold-line); background: var(--paper); cursor: pointer; } .qt-trust__expand:hover { background: var(--gold-pale); } /* Trust banner — agent variant — quieter, with extra metadata */ .qt-trust--agent { background: var(--paper-2); border-color: var(--rule); } .qt-trust--agent::before { background: var(--ink-mid); } .qt-trust--agent .qt-trust__lbl { color: var(--ink-mute); } /* Expanded provenance tree */ .qt-trust__tree { display: none; margin-top: 12px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); } .qt-trust__tree.is-open { display: block; animation: fade-up .26s var(--ease-soft); } .qt-trust__tree dl { margin: 0; display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; } .qt-trust__tree dt { font-size: 10.5px; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-mute); font-weight: var(--w-bold); } .qt-trust__tree dd { margin: 0; font-size: 12.5px; color: var(--ink); font-family: var(--font-mono); } /* ── LINEAGE DRAWER — per-line-item provenance ──────────────────── */ .qt-lin { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; background: var(--paper); border-left: 1px solid var(--rule); box-shadow: var(--shadow-pop); z-index: 220; transform: translateX(100%); transition: transform var(--dur-curtain) var(--ease-soft); display: flex; flex-direction: column; } .qt-lin.is-open { transform: translateX(0); } .qt-lin__head { padding: 18px 22px; border-bottom: 1px solid var(--rule); display: flex; align-items: flex-start; gap: 14px; } .qt-lin__head .x { margin-left: auto; padding: 4px; color: var(--ink-mute); } .qt-lin__eyebrow { font-size: 10.5px; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-mute); font-weight: var(--w-bold); } .qt-lin__title { font-size: 16px; margin-top: 4px; line-height: 1.3; } .qt-lin__body { padding: 18px 22px; overflow-y: auto; flex: 1; } .qt-lin__step { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--rule); } .qt-lin__step:last-child { border-bottom: 0; } .qt-lin__bullet { width: 22px; height: 22px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--rule); display: grid; place-items: center; font-size: 11px; font-weight: var(--w-bold); color: var(--ink-mid); position: relative; } .qt-lin__step--ai .qt-lin__bullet { background: var(--gold-pale); color: var(--gold-deep); border-color: var(--gold-line); } .qt-lin__step--human .qt-lin__bullet { background: var(--cobalt-soft); color: var(--cobalt); } .qt-lin__step--vendor .qt-lin__bullet { background: var(--violet-soft); color: var(--violet); } .qt-lin__step--system .qt-lin__bullet { background: var(--paper-2); color: var(--ink-mid); } .qt-lin__lbl { font-size: 10.5px; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; font-weight: var(--w-bold); color: var(--ink-mute); } .qt-lin__what { font-size: 13.5px; color: var(--ink); margin-top: 2px; line-height: 1.45; } .qt-lin__when { font-size: 11px; color: var(--ink-mute); font-family: var(--font-mono); margin-top: 4px; } .qt-lin__price { margin: 6px 0 0; display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mid); padding: 4px 8px; background: var(--paper-2); border-radius: var(--r-md); } .qt-lin__price .arrow { color: var(--gold-deep); } /* customer view of lineage hides anything labelled agent-only */ body[data-persona="customer"] .qt-lin .agent-only { display: none; } body[data-persona="customer"] .qt-lin__step--vendor .qt-lin__what .vendor { color: var(--ink-mid); } body[data-persona="customer"] .qt-lin__step--vendor .qt-lin__what .vendor::before { content: "Onward catalogue"; } body[data-persona="customer"] .qt-lin__step--vendor .qt-lin__what .vendor span { display: none; } /* ── AI RUN HISTORY ROW — Execution Ledger ──────────────────────── */ .qt-run { display: grid; grid-template-columns: 150px 160px 1fr 96px 80px 24px; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rule); font-size: 12px; transition: background var(--dur-fast); } .qt-run:hover { background: var(--paper-2); } .qt-run__ts { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); } .qt-run__actor { display: flex; align-items: center; gap: 6px; color: var(--ink); } .qt-run__actor .av { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px; } .qt-run__actor--ai .av { background: url(../assets/onward/quotee-mascot.png) center/cover var(--gold-pale); } .qt-run__actor--human .av { background: var(--graphite); color: var(--ink-inverse); display: grid; place-items: center; font-size: 8.5px; font-weight: var(--w-bold); } .qt-run__what { color: var(--ink-soft); line-height: 1.4; } .qt-run__what .ref { font-family: var(--font-mono); color: var(--gold-deep); font-size: 11px; padding: 1px 5px; background: var(--gold-pale); border-radius: var(--r-sm); margin-right: 4px; } .qt-run__model { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); } .qt-run__conf { justify-self: end; } .qt-run__expand { color: var(--ink-mute); justify-self: end; } .qt-run.is-override { background: linear-gradient(90deg, var(--gold-paler) 0%, transparent 18%); } .qt-run.is-override .qt-run__what::before { content: "OVERRIDE"; display: inline-block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; background: var(--gold); color: var(--ink); padding: 1px 5px; border-radius: var(--r-sm); margin-right: 6px; vertical-align: 1px; } /* Dark mode contrast tweaks for run ledger */ [data-mode="dark"] .qt-run { border-bottom-color: var(--rule); } /* ── NEGOTIATION PLAYBACK — diff inside Version Diff Viewer ─────── */ .qt-nego { border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; } .qt-nego__turn { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--rule-soft); } .qt-nego__turn:first-child { border-top: 0; } .qt-nego__who { font-size: 10.5px; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-mute); font-weight: var(--w-bold); align-self: start; padding-top: 2px; } .qt-nego__turn--customer .qt-nego__who { color: var(--cobalt); } .qt-nego__turn--internal .qt-nego__who { color: var(--gold-deep); } .qt-nego__turn--human .qt-nego__who { color: var(--violet); } .qt-nego__msg { font-size: 13px; color: var(--ink); line-height: 1.5; } .qt-nego__delta { margin-top: 6px; font-family: var(--font-mono); font-size: 11.5px; display: flex; gap: 6px; flex-wrap: wrap; } .qt-nego__delta .add { color: var(--success); background: var(--emerald-soft); padding: 1px 6px; border-radius: var(--r-sm); } .qt-nego__delta .rem { color: var(--danger); background: var(--coral-soft); padding: 1px 6px; border-radius: var(--r-sm); text-decoration: line-through; } /* ── MSA UNRESOLVED REVIEW PILL ─────────────────────────────────── */ .qt-msa-pending { display: inline-flex; align-items: center; gap: 4px; background: var(--gold-pale); color: var(--gold-deep); padding: 1px 7px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px dashed var(--gold-line); cursor: help; } .qt-msa-pending::before { content: "⚑"; }