/* Nabgol flagship chat polish v3.8.1 — typography, bubbles, RTL, media */ /* G0 scale mirror — numbers live in assets/js/chat/diagram-tokens.js */ :root { --nbg-diag-min-on-screen: 16px; --nbg-diag-bubble-inner-m: 316; --nbg-diag-bubble-inner-d: 560; --nbg-diag-node-pad-x: 16px; --nbg-diag-node-pad-y: 12px; --nbg-diag-node-min-h: 34px; --nbg-diag-rank-gap: 26px; --nbg-diag-node-gap: 22px; --nbg-diag-mermaid-rank-spacing: 22px; --nbg-diag-mermaid-node-spacing: 36px; --nbg-diag-mermaid-wrap-width: 100px; --nbg-diag-stroke-node: 2px; --nbg-diag-stroke-edge: 1.6px; --nbg-diag-radius-rect: 8px; --nbg-diag-max-aspect: 2.4; } body.desktop-chat, body.mobile-chat { font-family: "Vazirmatn", "IRANSansX", Tahoma, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body:is(.desktop-chat, .mobile-chat) .message { margin-bottom: 16px; } body.mobile-chat .message-body { max-width: min(92vw, 520px); } body.desktop-chat .chat-messages .message-body { max-width: min(100%, 640px); } /* —— Bubbles —— */ body:is(.desktop-chat, .mobile-chat) .message.assistant .message-bubble { background: linear-gradient(165deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.94) 100%); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 20px 20px 20px 8px; padding: 15px 17px 12px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05); } body:is(.desktop-chat, .mobile-chat) .message.user .message-bubble { background: linear-gradient(135deg, #10b981 0%, #059669 52%, #047857 100%); border: 1px solid rgba(167, 243, 208, 0.28); border-radius: 20px 20px 8px 20px; padding: 12px 16px 10px; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.32); } body:is(.desktop-chat, .mobile-chat) .message .text { font-size: 15.5px; line-height: 1.92; letter-spacing: 0.008em; word-spacing: 0.02em; word-break: normal; overflow-wrap: break-word; max-width: 38em; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; } /* Safe horizontal containment ONLY — never clip message bubbles/diagrams vertically (v830 overflow:hidden on .message/.bubble/.figure crushed layout + cut flowcharts). */ body:is(.desktop-chat, .mobile-chat) #messages, body:is(.desktop-chat, .mobile-chat) #chatMessages, body:is(.desktop-chat, .mobile-chat) .chat-messages { overflow-x: hidden; } body:is(.desktop-chat, .mobile-chat) .message .text pre, body:is(.desktop-chat, .mobile-chat) .message .text code, body:is(.desktop-chat, .mobile-chat) .message .text .nabgol-code-block { white-space: pre-wrap !important; overflow-wrap: anywhere !important; word-break: break-word !important; max-width: 100%; box-sizing: border-box; } body:is(.desktop-chat, .mobile-chat) .message .text svg.nabgol-diagram-svg, body:is(.desktop-chat, .mobile-chat) .message .text svg.nabgol-mermaid-svg { max-width: 100%; height: auto; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) { color: #e8eef7; /* `emoji` (not `normal`) forced EMOJI presentation on every character that has one — which in Unicode includes the ASCII digits 0-9, `#` and `*`, because they are the bases of the keycap sequences. Measured on the real page 2026-09-02, both shells: `query=1234567890` inside inline code painted as ten blue emoji tiles with white numerals, and a bare `#` or `*` in prose painted as one. Persian digits were never affected (they have no emoji form), which is why it survived: the digit normaliser hides it everywhere EXCEPT inside code, where digits must stay ASCII. Real emoji render in colour at `normal` anyway — this property was never what made them work. */ font-variant-emoji: normal; hyphens: none; -webkit-hyphens: none; } body:is(.desktop-chat, .mobile-chat) .message.user .text { color: #f0fdf4; max-width: 34em; } /* Strong RTL even when parent shell is LTR */ body.desktop-chat .message, body.desktop-chat .message-body, body.desktop-chat .message-bubble, body.desktop-chat .message .text, body.mobile-chat .message, body.mobile-chat .message-body, body.mobile-chat .message-bubble, body.mobile-chat .message .text { direction: rtl !important; text-align: right !important; } body:is(.desktop-chat, .mobile-chat) .message .text p, body:is(.desktop-chat, .mobile-chat) .message .text li, body:is(.desktop-chat, .mobile-chat) .message .text h1, body:is(.desktop-chat, .mobile-chat) .message .text h2, body:is(.desktop-chat, .mobile-chat) .message .text h3, body:is(.desktop-chat, .mobile-chat) .message .text h4, body:is(.desktop-chat, .mobile-chat) .message .text blockquote { direction: rtl !important; text-align: right !important; } /* Magazine editorial — assistant chat ONLY. Unmistakable vs notepad. */ body:is(.desktop-chat, .mobile-chat) .message.assistant .message-bubble { padding: 18px 18px 14px; } /* Deliberately NOT widened to reach fullscreen (see nabgol-media-fullscreen__zoomwrap elsewhere in this file): this caps PROSE READING WIDTH to 34em, which is exactly backwards for the one thing that ever gets fullscreened (a table or diagram) — the whole point of opening it is to let it be as big as the screen allows, not squeeze it back down to reading-column width. Confirmed live: widening this one used to shrink and mis-position the ENTIRE fullscreen overlay, not just its content. */ body:is(.desktop-chat, .mobile-chat) .message.assistant .text, body:is(.desktop-chat, .mobile-chat) .message.assistant .text.nabgol-mag-prose, body:is(.desktop-chat, .mobile-chat) .message.assistant .text.nabgol-mag-article { max-width: 34em; font-size: 16.75px; line-height: 2.18; letter-spacing: 0.012em; word-spacing: 0.045em; color: #eef2f7; text-wrap: pretty; hanging-punctuation: first last; } body:is(.desktop-chat, .mobile-chat) .message.assistant .text.nabgol-mag-article { display: block; padding: 0.15em 0.1em 0.35em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p.nabgol-mag-eyebrow { margin: 0 0 0.95em; padding: 0; font-size: 0.9em; font-weight: 700; letter-spacing: 0.05em; color: #6ee7b7; background: none; border: 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p.nabgol-mag-title { margin: 0.15em 0 1em; padding: 0 0 0.55em; font-size: 1.42em; font-weight: 800; line-height: 1.45; letter-spacing: -0.018em; color: #f0fdf4; background: none; border: 0; border-bottom: 2px solid rgba(52, 211, 153, 0.55); border-radius: 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p.nabgol-mag-title strong { background: none; color: inherit; font-weight: inherit; padding: 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p.nabgol-mag-section { margin: 1.15em 0 0.55em; padding: 0; font-size: 0.98em; font-weight: 750; line-height: 1.55; letter-spacing: 0.02em; color: #a7f3d0; background: none; border: 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p.nabgol-mag-lead { margin: 0 0 1.15em; font-size: 1.06em; font-weight: 560; line-height: 2.12; color: #f8fafc; background: none; border: 0; } body:is(.desktop-chat, .mobile-chat) .message.assistant .text.nabgol-mag-article > p { margin: 0 0 1.15em; background: none; border: 0; padding: 0; } body:is(.desktop-chat, .mobile-chat) .message.assistant .text.nabgol-mag-article > p:last-child { margin-bottom: 0.2em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p.nabgol-mag-kicker, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p.nabgol-mag-pull { margin: 0.15em 0 0.95em; padding: 0 0 0.55em; font-size: 1.42em; font-weight: 800; line-height: 1.45; color: #f0fdf4; background: none !important; border: 0 !important; border-bottom: 2px solid rgba(52, 211, 153, 0.55) !important; border-radius: 0 !important; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p.nabgol-mag-question { margin: 1.25em 0 0.3em; padding: 0.9em 1.05em; font-size: 1.05em; font-weight: 750; line-height: 1.8; color: #ecfdf5; background: linear-gradient(145deg, rgba(16, 185, 129, 0.22), rgba(15, 23, 42, 0.65)); border: 1px solid rgba(52, 211, 153, 0.42); border-radius: 14px; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p.nabgol-mag-note { margin: 0.95em 0 1.1em; padding: 0.6em 0.9em; font-size: 0.98em; font-weight: 600; line-height: 1.9; color: #d1fae5; background: rgba(6, 78, 59, 0.28); border-right: 3px solid rgba(52, 211, 153, 0.55); border-radius: 0 12px 12px 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p { margin: 0 0 1.15em; line-height: 2.12; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p:last-child { margin-bottom: 0.2em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h1, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h2, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h3, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h4 { margin: 1.05em 0 0.45em; line-height: 1.4; font-weight: 800; letter-spacing: -0.015em; color: #f0fdf4; border-bottom: 2px solid rgba(52, 211, 153, 0.4); padding-bottom: 0.4em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h1 { font-size: 1.42em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h2 { font-size: 1.28em; color: #ecfdf5; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h3, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h4 { font-size: 1.12em; color: #a7f3d0; border-bottom-width: 1px; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h1:first-child, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h2:first-child, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) h3:first-child { margin-top: 0.05em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) strong { color: #ecfdf5; font-weight: 800; background: linear-gradient(180deg, transparent 55%, rgba(52, 211, 153, 0.4) 55%); padding: 0 0.16em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) em { color: #cbd5e1; font-style: italic; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) blockquote { margin: 0.8em 0 1.05em; padding: 0.65em 1em; border-right: 3px solid rgba(52, 211, 153, 0.65); border-left: 0; background: rgba(15, 23, 42, 0.5); border-radius: 0 12px 12px 0; color: #d1d9e6; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) hr { border: 0; height: 1px; margin: 1.15em 0; background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.4), transparent); } /* Persian list counters (magazine) */ @counter-style nabgol-fa { system: numeric; symbols: "۰" "۱" "۲" "۳" "۴" "۵" "۶" "۷" "۸" "۹"; suffix: ""; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) ul, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) ol { list-style: none; margin: 0.35em 0 1.15em; padding: 0.65em 0.9em 0.65em 0.55em; background: rgba(15, 23, 42, 0.45); border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 14px; counter-reset: magitem; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) li { position: relative; margin: 0.6em 0; padding: 0.2em 0.25em 0.2em 0; padding-right: 2.15em; line-height: 1.95; } /* Ordered: Persian digit pills from data-n (never rely on Latin counters) */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) li[data-kind="num"]::before, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) ol.nabgol-mag-list-ol > li::before { content: attr(data-n); position: absolute; right: 0; top: 0.2em; width: 1.55em; height: 1.55em; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 0.78em; font-weight: 800; color: #042f2e; background: #6ee7b7; line-height: 1; } /* Unordered: mint bullet — not fake 1…n */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) li[data-kind="bullet"]::before, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) ul.nabgol-mag-list-ul > li::before { content: ""; position: absolute; right: 0.45em; top: 0.72em; width: 0.55em; height: 0.55em; border-radius: 999px; background: #6ee7b7; box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.18); } /* Legacy fallback when data-kind missing: still prefer data-n if present */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) li:not([data-kind])::before { content: attr(data-n); position: absolute; right: 0; top: 0.2em; width: 1.55em; height: 1.55em; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 0.78em; font-weight: 800; color: #042f2e; background: #6ee7b7; line-height: 1; } /* ============================================================================ DIAGRAM PALETTE (`--nbgd-*`) — the diagram interior, in TWO themes. ---------------------------------------------------------------------------- Why this block exists (measured 2026-08-28 with tools/_chat_canvas_shot.js on the real cascade, mobile-light / desktop-light): every colour in the diagram region below was a hard dark-scheme hex. On a light page the formula card and every `figure.nabgol-diagram` rendered as a BLACK SLAB in the middle of a white answer, with its own expression nearly illegible — exactly the defect that was fixed for the step accordion in chat-canvas.css section 17. The rule that keeps it fixed: no rule under `figure.nabgol-diagram` / `.nabgol-diagram-shell` may name a colour again. It reads a token from here. Three families, and the reason each behaves differently in light theme: 1. NEUTRAL SURFACES + NEUTRAL INK — these INVERT. A slate panel or a near-black well is the whole defect; on a light canvas it becomes a white/tinted panel and the ink goes dark. 2. SOLID SATURATED CHIPS (`*-face`) — these DO NOT invert. A dark emerald terminal node or a navy IO node with light text is a legible, deliberate chip on white just as it is on black, and inverting them would throw away the shape language the four flowchart node types depend on. Where a token keeps one value for both themes, that is the reason. 3. TRANSLUCENT TINTS + BRIGHT ACCENT INK — these invert TOGETHER. A 0.28 emerald wash over white is pale, so its `#ecfdf5`-class ink has to darken with it or the label disappears. Never move one without the other. These tokens live HERE, with the rules they serve, and not in chat-canvas.css: the diagram region ships in this file, so a session that re-skins the canvas cannot leave the diagrams colourless, and the lab's canvas=0 mode still paints. The values mirror the --nbgc-* scale in chat-canvas.css section 1 (same canvases, same contrast targets) — when that scale moves, move these with it. ========================================================================== */ :root { /* 0) GEOMETRY, not colour — the one non-colour token in this block, and it belongs here because it is the other half of the same contract the palette keeps: every rule about a diagram reads its value from one place. 316 is DIAGRAM_BUBBLE_W in chat-flowchart.js — the coordinate space every layout in that file is drawn on, one unit to one CSS pixel. It is the size the diagrams were designed at, so it is the size they are shown at; see the 1:1 cap under `.nabgol-diagram-svg` for what happened when nothing said so. Move this only together with DIAGRAM_BUBBLE_W. */ --nbgd-canvas-w: 316px; /* 1) the card itself */ --nbgd-card-a: rgba(15, 23, 42, 0.98); --nbgd-card-b: rgba(6, 78, 59, 0.32); --nbgd-card-edge: rgba(52, 211, 153, 0.38); /* --nbgd-card-shadow removed 2026-08-30: the card no longer casts one. S2 canvas law is hairline over shadow, and the fullscreen viewer — the version the owner calls clean — never had one. A token nothing reads is a decoy the next session would try to tune. */ /* 2) neutral surfaces that sit ON the card — these invert */ --nbgd-panel: rgba(30, 41, 59, 0.95); --nbgd-panel-2: rgba(30, 41, 59, 0.92); --nbgd-panel-3: rgba(30, 41, 59, 0.75); --nbgd-well: rgba(15, 23, 42, 0.88); --nbgd-well-2: rgba(15, 23, 42, 0.92); --nbgd-well-3: rgba(15, 23, 42, 0.95); --nbgd-well-4: rgba(15, 23, 42, 0.9); --nbgd-track: rgba(15, 23, 42, 0.85); --nbgd-bars-track: #0f172a; /* the bar chart's empty rail (was an inline fill) */ --nbgd-tint: rgba(15, 23, 42, 0.2); --nbgd-tint-2: rgba(15, 23, 42, 0.15); --nbgd-node: #1e293b; /* a solid chip: same in both themes */ /* 3) hairlines */ --nbgd-line: rgba(148, 163, 184, 0.28); --nbgd-line-soft: rgba(148, 163, 184, 0.18); --nbgd-line-mid: rgba(148, 163, 184, 0.3); --nbgd-line-mid-2: rgba(148, 163, 184, 0.35); --nbgd-line-strong: rgba(148, 163, 184, 0.55); /* 4) ink */ --nbgd-ink: #f8fafc; --nbgd-ink-2: #e2e8f0; --nbgd-ink-3: #f1f5f9; --nbgd-ink-soft: #94a3b8; --nbgd-ink-faint: #cbd5e1; --nbgd-stroke-soft: #94a3b8; /* a neutral node outline / graph line */ --nbgd-on-dark: #f8fafc; /* text ON a solid dark chip — never inverts */ --nbgd-on-bright: #0f172a; /* text ON a bright fill — never inverts */ --nbgd-on-bright-em: #042f2e; --nbgd-on-white: #fff; /* 5) the book-page mock (annotate) is PAPER — light in both themes by design */ --nbgd-paper: #f8fafc; --nbgd-paper-2: #e2e8f0; --nbgd-paper-ink: #334155; --nbgd-paper-chip: rgba(255, 255, 255, 0.85); --nbgd-paper-rule: rgba(100, 116, 139, 0.22); --nbgd-paper-edge: rgba(148, 163, 184, 0.55); --nbgd-paper-inset: rgba(255, 255, 255, 0.65); /* the pin tooltip is a dark chip ON the paper — dark in both themes */ --nbgd-paper-tip: rgba(15, 23, 42, 0.92); --nbgd-paper-tip-ink: #f8fafc; /* 6) emerald — the brand hue: terminal nodes, "good", the spine */ --nbgd-em-face: #065f46; --nbgd-em-face-2: #047857; /* #059669 put the pros badge at 3.58:1 */ --nbgd-em-face-deep: #064e3b; --nbgd-em-face-mid: rgba(6, 78, 59, 0.85); --nbgd-em-face-nav: rgba(6, 78, 59, 0.55); --nbgd-em-edge: #34d399; --nbgd-em-edge-2: #6ee7b7; --nbgd-em-edge-45: rgba(52, 211, 153, 0.45); --nbgd-em-ink: #6ee7b7; --nbgd-em-ink-2: #a7f3d0; --nbgd-em-on: #ecfdf5; --nbgd-em-wash: rgba(52, 211, 153, 0.16); --nbgd-em-wash-2: rgba(52, 211, 153, 0.1); --nbgd-em-wash-edge: rgba(110, 231, 183, 0.38); --nbgd-em-wash-edge-2: rgba(110, 231, 183, 0.28); --nbgd-em-tint: rgba(16, 185, 129, 0.22); --nbgd-em-tint-2: rgba(16, 185, 129, 0.28); --nbgd-em-tint-3: rgba(16, 185, 129, 0.32); --nbgd-em-glow: rgba(52, 211, 153, 0.35); /* 7) sky + cyan — IO nodes, the cycle, the tree rails */ --nbgd-sky-face: #0c4a6e; --nbgd-sky-face-2: #0369a1; --nbgd-sky-face-3: #bae6fd; --nbgd-sky-edge: #38bdf8; --nbgd-sky-edge-2: #7dd3fc; --nbgd-sky-tint: rgba(56, 189, 248, 0.28); --nbgd-sky-line: rgba(125, 211, 252, 0.35); --nbgd-sky-line-2: rgba(125, 211, 252, 0.4); --nbgd-cy-face: #155e75; --nbgd-cy-face-2: #0e7490; --nbgd-cy-face-deep: rgba(8, 47, 73, 0.95); --nbgd-cy-face-mid: rgba(14, 116, 144, 0.92); --nbgd-cy-edge: #67e8f9; --nbgd-cy-edge-soft: rgba(103, 232, 249, 0.42); --nbgd-cy-edge-50: rgba(103, 232, 249, 0.5); --nbgd-cy-edge-70: rgba(165, 243, 252, 0.7); --nbgd-cy-ink: #a5f3fc; --nbgd-cy-on: #ecfeff; --nbgd-cy-glow: rgba(34, 211, 238, 0.08); --nbgd-cy-shadow: rgba(8, 47, 73, 0.45); /* 8) blue — the formula card */ --nbgd-bl-face: #1e3a8a; --nbgd-bl-tint: rgba(30, 64, 175, 0.35); --nbgd-bl-tint-2: rgba(59, 130, 246, 0.28); --nbgd-bl-edge: rgba(147, 197, 253, 0.55); --nbgd-bl-edge-2: rgba(147, 197, 253, 0.45); --nbgd-bl-ink: #93c5fd; --nbgd-bl-ink-2: #dbeafe; --nbgd-bl-ink-3: #eff6ff; --nbgd-bl-highlight: rgba(255, 255, 255, 0.06); /* 9) amber — the decision rhombus, "attention" */ --nbgd-am-face: #7c2d12; --nbgd-am-face-2: #854d0e; --nbgd-am-face-3: #b45309; --nbgd-am-face-4: #fde68a; --nbgd-am-edge: #fbbf24; --nbgd-am-tint: rgba(251, 191, 36, 0.28); /* 10) violet — the sequence diagram, the deck */ --nbgd-vi-face: #4c1d95; --nbgd-vi-face-2: #6d28d9; --nbgd-vi-tint: rgba(91, 33, 182, 0.35); --nbgd-vi-tint-2: rgba(91, 33, 182, 0.55); --nbgd-vi-edge: #a78bfa; --nbgd-vi-edge-2: #c4b5fd; --nbgd-vi-edge-soft: rgba(196, 181, 253, 0.35); --nbgd-vi-edge-45: rgba(167, 139, 250, 0.45); --nbgd-vi-ink: #ddd6fe; --nbgd-vi-on: #ede9fe; --nbgd-vi-on-2: #f5f3ff; /* 11) red — "cons", the annotate pin */ --nbgd-rd-face: #dc2626; --nbgd-rd-face-2: #b91c1c; --nbgd-rd-face-3: #f87171; --nbgd-rd-face-4: rgba(220, 38, 38, 0.9); --nbgd-rd-tint: rgba(239, 68, 68, 0.28); --nbgd-rd-on: #fef2f2; --nbgd-rd-shadow: rgba(127, 29, 29, 0.45); /* 12) the accent SERIES — a bars/stat card cycles through it, one hue per row. chat-flowchart.js emits these as inline custom properties, so they must be tokens: a #34d399 stat value on a white card measured 1.79:1. */ --nbgd-acc-1: #34d399; --nbgd-acc-2: #38bdf8; --nbgd-acc-3: #fbbf24; --nbgd-acc-4: #a78bfa; --nbgd-acc-5: #f472b6; --nbgd-acc-6: #22d3ee; /* 13) drop shadows */ --nbgd-shadow: rgba(2, 6, 23, 0.28); --nbgd-shadow-2: rgba(2, 6, 23, 0.35); --nbgd-shadow-3: rgba(15, 23, 42, 0.85); } html[data-theme="light"] { /* 1) the card: a white sheet with the faintest mint, not a slab */ --nbgd-card-a: #ffffff; --nbgd-card-b: rgba(21, 128, 61, 0.05); --nbgd-card-edge: rgba(21, 128, 61, 0.22); /* 2) surfaces invert: a panel is now lighter than the card, a well darker */ --nbgd-panel: #ffffff; --nbgd-panel-2: rgba(255, 255, 255, 0.94); --nbgd-panel-3: rgba(15, 23, 42, 0.035); --nbgd-well: rgba(15, 23, 42, 0.035); --nbgd-well-2: rgba(15, 23, 42, 0.05); --nbgd-well-3: rgba(15, 23, 42, 0.06); --nbgd-well-4: rgba(15, 23, 42, 0.04); --nbgd-track: rgba(15, 23, 42, 0.07); --nbgd-bars-track: rgba(15, 23, 42, 0.07); --nbgd-tint: rgba(15, 23, 42, 0.05); --nbgd-tint-2: rgba(15, 23, 42, 0.04); /* --nbgd-node stays #1e293b: see family (2) in the header comment. */ /* 3) hairlines: slate alpha is invisible on white, so switch to ink alpha */ --nbgd-line: rgba(15, 23, 42, 0.14); --nbgd-line-soft: rgba(15, 23, 42, 0.09); --nbgd-line-mid: rgba(15, 23, 42, 0.15); --nbgd-line-mid-2: rgba(15, 23, 42, 0.18); --nbgd-line-strong: rgba(15, 23, 42, 0.3); /* 4) ink (contrast measured against the light canvas #ffffff / #f6f8fa) */ --nbgd-ink: #14181d; /* 15.8:1 */ --nbgd-ink-2: #1f2733; /* 13.8:1 */ --nbgd-ink-3: #14181d; --nbgd-ink-soft: #5b6672; /* 6.4:1 */ --nbgd-ink-faint: #4b5563; /* 8.0:1 */ --nbgd-stroke-soft: #64748b; /* 4.8:1 — a visible graph line on white */ /* --nbgd-on-dark / --nbgd-on-bright / --nbgd-on-white do not invert: they are the ink ON a chip, and the chips do not invert either. */ /* 5) paper stays paper */ --nbgd-paper: #ffffff; --nbgd-paper-2: #eef2f6; --nbgd-paper-chip: rgba(255, 255, 255, 0.92); --nbgd-paper-edge: rgba(15, 23, 42, 0.22); --nbgd-paper-inset: rgba(255, 255, 255, 0.8); /* 6) emerald: the mints all fail on white — the ink and every stroke darken, the washes get lighter, the solid chips stay. */ --nbgd-em-face-2: #15803d; --nbgd-em-face-mid: rgba(6, 78, 59, 0.9); --nbgd-em-face-nav: rgba(6, 95, 70, 0.96); /* 0.92 green put the deck arrows at 4.12:1 */ --nbgd-em-edge: #15803d; /* 4.6:1 — a bar, a spine, a border */ --nbgd-em-edge-2: #16a34a; --nbgd-em-edge-45: rgba(21, 128, 61, 0.3); --nbgd-em-ink: #0f6a37; /* 5.6:1 */ --nbgd-em-ink-2: #15803d; --nbgd-em-wash: rgba(21, 128, 61, 0.08); --nbgd-em-wash-2: rgba(21, 128, 61, 0.06); --nbgd-em-wash-edge: rgba(21, 128, 61, 0.25); --nbgd-em-wash-edge-2: rgba(21, 128, 61, 0.2); --nbgd-em-tint: rgba(21, 128, 61, 0.1); --nbgd-em-tint-2: rgba(21, 128, 61, 0.12); --nbgd-em-tint-3: rgba(21, 128, 61, 0.13); --nbgd-em-glow: rgba(21, 128, 61, 0.18); /* 7) sky + cyan */ --nbgd-sky-edge: #0284c7; --nbgd-sky-edge-2: #0369a1; --nbgd-sky-tint: rgba(2, 132, 199, 0.12); --nbgd-sky-line: rgba(2, 132, 199, 0.28); --nbgd-sky-line-2: rgba(2, 132, 199, 0.3); --nbgd-cy-edge: #0e7490; --nbgd-cy-edge-soft: rgba(14, 116, 144, 0.4); --nbgd-cy-edge-50: rgba(14, 116, 144, 0.55); --nbgd-cy-ink: #0e7490; /* 4.6:1 */ --nbgd-cy-glow: rgba(14, 116, 144, 0.06); --nbgd-cy-shadow: rgba(8, 47, 73, 0.18); /* 8) blue — the formula expression box stops being a dark plate */ --nbgd-bl-tint: rgba(37, 99, 235, 0.1); --nbgd-bl-tint-2: rgba(37, 99, 235, 0.12); --nbgd-bl-edge: rgba(37, 99, 235, 0.35); --nbgd-bl-edge-2: rgba(37, 99, 235, 0.3); --nbgd-bl-ink: #1d4ed8; /* 6.3:1 */ --nbgd-bl-ink-2: #1e3a8a; --nbgd-bl-ink-3: #14203a; --nbgd-bl-highlight: rgba(255, 255, 255, 0.9); /* 9) amber */ --nbgd-am-edge: #b45309; /* 4.9:1 — #fbbf24 is 1.8:1 on white */ --nbgd-am-tint: rgba(180, 83, 9, 0.14); /* 10) violet */ --nbgd-vi-tint: rgba(91, 33, 182, 0.13); --nbgd-vi-tint-2: rgba(91, 33, 182, 0.9); --nbgd-vi-edge: #6d28d9; --nbgd-vi-edge-2: #7c3aed; --nbgd-vi-edge-soft: rgba(124, 58, 237, 0.28); --nbgd-vi-edge-45: rgba(109, 40, 217, 0.45); --nbgd-vi-ink: #5b21b6; /* 7.2:1 */ --nbgd-vi-on: #3b0764; /* the 0.13 tint is pale, so its ink is dark */ /* 11) red */ --nbgd-rd-face-3: #dc2626; --nbgd-rd-face-4: rgba(185, 28, 28, 0.96); /* 0.9 red put the legend pin at 4.32:1 */ --nbgd-rd-tint: rgba(220, 38, 38, 0.12); --nbgd-rd-shadow: rgba(127, 29, 29, 0.3); /* 12) the accent series, dark enough to be TEXT on white (>= 4.5:1) */ --nbgd-acc-1: #0f6a37; /* #15803d was 4.40:1 on the desktop canvas #f6f8fa */ --nbgd-acc-2: #0369a1; --nbgd-acc-3: #a3560a; --nbgd-acc-4: #6d28d9; --nbgd-acc-5: #be185d; --nbgd-acc-6: #0e7490; /* 13) shadows: a black drop shadow on white reads as dirt */ --nbgd-shadow: rgba(15, 23, 42, 0.08); --nbgd-shadow-2: rgba(15, 23, 42, 0.1); --nbgd-shadow-3: rgba(15, 23, 42, 0.12); } /* Diagram cards — HTML/RTL-first, Persian digits, fit assistant bubble --------------------------------------------------------------------------- CHROME: the card is a block on the answer canvas, so it speaks the canvas's chrome language, not its own. Every other boxed block chat-canvas.css paints — `pre`, `.nabgol-table-scroll`, `.nabgol-step` — is the same thing: a 12px radius, a hairline, a flat surface, 24px of rhythm above and below, and NO shadow. This card used to be the only one that disagreed with all four, which is why it read as an object imported from a different app. · `box-shadow: 0 12px 30px` is gone. S2's law is hairline over shadow and surface depth must be invisible — and the fullscreen viewer, the version the owner calls clean, has never had a shadow. Bringing that here costs nothing. · radius 18px -> --nbgc-radius-sm, the value its neighbours already use. · margin 1.1em/1.25em -> the modular scale (24px), the same step `pre` and the table scroller take, so three blocks in one answer no longer sit on three different grids. The fallbacks exist because a dozen tool pages load this sheet without chat-canvas.css; they resolve to the same numbers that file declares. PADDING is deliberately NOT changed: the flowchart/sequence canvases reclaim it by name (`calc(-0.85em - 1px)` further down) to reach the 316px design canvas on a small phone, and retuning one without the other silently breaks that. */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-flowchart, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-diagram { display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin: var(--nbgc-r-075, 24px) 0; padding: 0.95em 0.85em 0.7em; direction: rtl !important; text-align: right !important; line-height: 1.55 !important; font-family: Vazirmatn, Tahoma, sans-serif; background: radial-gradient(120% 90% at 0% 0%, var(--nbgd-em-wash), transparent 55%), linear-gradient(160deg, var(--nbgd-card-a), var(--nbgd-card-b)); border: 1px solid var(--nbgd-card-edge); border-radius: var(--nbgc-radius-sm, 12px); overflow: visible; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-diagram .nabgol-diagram-shell, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-flowchart .nabgol-diagram-shell, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-diagram .nabgol-diagram-kicker, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-flowchart .nabgol-diagram-kicker, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-diagram .nabgol-diagram-title, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-flowchart .nabgol-diagram-title, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-diagram .nabgol-diagram-canvas, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-flowchart .nabgol-diagram-canvas { box-sizing: border-box; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-shell { width: 100%; } /* ── A CARD IS A FIGURE, NOT A FLUID BLOCK (chat surface only) ─────────────── The 1:1 cap above fixes the seven kinds that draw an SVG. The other six — compare, formula, proscons, annotate, stat, deck — are built from HTML, so no viewBox scale applies to them, and they were stretching a different way: their rows, chips and wells are tuned for the same 316px bubble, and on the 560px desktop column they turned into vast empty rectangles. Measured on the desktop light shell: `compare` was 597px tall to say three words, each item a 150px bar about three-quarters empty; every `formula` row was a full-width white pill with its content pushed to the right edge (the "empty white bar" S2 logged as open debt and handed to this session). Same cause as the SVG, same cure: lay the content out at the width it was designed for, and let the frame hug it instead of the other way round. That is also, exactly, what the fullscreen viewer does — its panel is `width: fit-content` — which is the other half of why it reads as tidy. Chat only, deliberately. The viewer already reaches the same place by its own route (fit-content panel + the JS contain-fit), and its shell is explicitly `width: 100%` in chat-components.css; re-deciding that from here would have two files arguing about one box. A FIXED design width, not `fit-content` — that was tried first and measured wrong in both directions: shrink-to-fit resolves HTML content toward min-content, so `compare` collapsed to a 132px ribbon while staying 588px tall, and the SVG kinds under-shot to 0.95 with 15.2px type. The card is not asking its content how wide to be; the design canvas already decided. 1.7em + 2px is this card's own horizontal padding and border, so the CONTENT box lands exactly on --nbgd-canvas-w and the frame sits around it. */ body:is(.desktop-chat, .mobile-chat) #messages .message.assistant .text figure.nabgol-diagram, body:is(.desktop-chat, .mobile-chat) #messages .message.assistant .text figure.nabgol-flowchart { width: min(100%, calc(var(--nbgd-canvas-w) + 1.7em + 2px)); } /* The kicker: an EYEBROW, not a badge. Measured (tools/_diagram_size_probe.js, 2026-08-30): the pill was exactly 36px tall on every one of the 13 kinds in both shells — on a `stat` card only 303px tall on a phone, the label plus its margin was 15% of the whole card, set in 16px/800 filled green. It was the loudest ink on a card whose entire job is to show its CONTENT first. Reading order was inverted: you learned what the card was called before you saw what it said. Quieted along S2's own hierarchy law (space > weight > size > colour), spending the cheap currencies first: the FILL and the BORDER go (they were the badge), weight 800 -> 600, and only then size 16 -> 13 with tracking, which is what turns a heading into a label. The accent ink stays — it is the one accent this card is allowed, and it is what still says "this is a label". NEVER hide it. There is no title bar in the chat to carry the name (the fullscreen viewer has one, which is why it may hide this), and several diagrams can share one bubble — hiding it once turned the kitchen-sink screenshot into one unlabelled neon wall (real defect). Quiet, never absent. */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-kicker { display: block; margin: 0 0 var(--nbgc-r-025, 8px); padding: 0; background: none; border: 0; color: var(--nbgd-em-ink); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; } /* Standard SVG diagrams (ISO shapes, not HTML lists) */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-canvas { direction: ltr; width: 100%; margin: 0.1em 0 0.15em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-svg { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; font-family: Vazirmatn, Tahoma, sans-serif; } /* ── THE 1:1 CAP — this is the fix for "flowcharts are oversize in the chat" ── Measured, not guessed (tools/_diagram_size_probe.js, all 13 kinds x 2 shells): surface scale (rendered width / viewBox width) chat, phone 390 1.06 – 1.16 chat, desktop 1280 1.67 – 1.77 <- the complaint fullscreen, both 0.93 – 1.04 Every layout in chat-flowchart.js is drawn on a DIAGRAM_BUBBLE_W = 316 unit canvas where one unit is meant to be one CSS pixel — the sheet already says so further down ("makes viewBox 316 map 1:1"). But the SVG is sized `width: 100%`, so the drawing simply takes whatever column it is given. A phone's 338px column is close enough to 316 that nobody noticed. The desktop answer column is 560px, which magnifies EVERY diagram by ~1.7x: a 16-unit label lands at 26.8px on glass next to 16px prose, and the flowchart grows to 1092.8px — 121% of the window, taller than the screen it is drawn on. The fullscreen viewer escapes this only because chat-markdown.js contain-fits the SVG into the panel's `min(92vh, 880px)` height budget, and the size that fits is — measured — 0.93-1.04. So "fullscreen is minimal and clean" was never a styling difference at all: fullscreen is the diagram at 1:1, and the chat was showing the same diagram blown up by 70%. The cap states that intent as a rule instead of an accident. Nothing shrinks below what it does today; the cap only stops the stretch ABOVE the size the diagram was drawn at, so the design canvas maps 1:1 on every screen. Two exemptions, both deliberate: · Mermaid lays out its own coordinate space, so 316 is meaningless to it — and it has its own sizing rule plus the scroll-x machinery further down. · A diagram too dense to hold the 16px on-screen floor is deliberately allowed to render LARGER than its column and pan sideways (enforceOnScreenFloor in chat-flowchart.js). That path sets `max-width: none` inline with !important, which outranks this rule — so the floor still wins over the cap, which is the correct precedence: legibility first, then restraint. WHY THE SELECTOR IS LONG, and why it is NOT written with this file's usual `:where(chat, fullscreen)` shorthand: chat-canvas.css:1068 resets body:is(.desktop-chat,.mobile-chat) #messages .message .text :is(img,video,svg):not(.katex *) { max-width: 100% !important } at specificity (1,4,2). `:where()` contributes nothing, so the shorthand form of this rule scored (0,2,0) and lost silently — measured: the cap changed the card heights by 0 and the scale stayed at 1.77. Written out, this is (1,6,1) and wins on specificity, independent of file order. If that reset ever moves or is rewritten, re-measure with tools/_diagram_size_probe.js rather than trusting that this still binds; a cap that loses looks exactly like a cap that works. */ body:is(.desktop-chat, .mobile-chat) #messages .message.assistant .text .nabgol-diagram-svg:not(.nabgol-mermaid-svg), .nabgol-media-fullscreen__zoomwrap .nabgol-diagram-shell .nabgol-diagram-svg:not(.nabgol-mermaid-svg) { max-width: min(100%, var(--nbgd-canvas-w)) !important; margin-inline: auto !important; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) svg.nabgol-fc-svg, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) svg.nabgol-cycle-svg, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) svg.nabgol-tree-svg, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) svg.nabgol-timeline-svg, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) svg.nabgol-compare-svg, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) svg.nabgol-sequence-svg, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) svg.nabgol-bars-svg { overflow: visible; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-process rect { fill: var(--nbgd-node); stroke: var(--nbgd-stroke-soft); stroke-width: 2; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-terminal rect { fill: var(--nbgd-em-face); stroke: var(--nbgd-em-edge); stroke-width: 2.5; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-io polygon { fill: var(--nbgd-sky-face); stroke: var(--nbgd-sky-edge); stroke-width: 2.5; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-decision polygon { fill: var(--nbgd-am-face); stroke: var(--nbgd-am-edge); stroke-width: 2.6; } /* An SVG label's ink depends on WHAT IT SITS ON, and that is the one thing a blanket rule cannot know. These eight were one rule with one fill until 2026-08-28, so on a light page the sequence labels stayed white on a pale panel — invisible (screenshot, DIAGRAM_THEME_GATE). ON A SOLID CHIP: the chip does not invert, so neither does the ink. */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-label, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-edge-label, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-hub-label { fill: var(--nbgd-on-dark); font-size: 16px; font-weight: 800; font-family: Vazirmatn, Tahoma, sans-serif; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-edge-label { fill: var(--nbgd-em-on); } /* ON THE CARD (or on a panel that inverts with it): the ink inverts too. */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-label, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-name, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-point, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-svg-label, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-lens-label, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-svg .nabgol-diagram-title { fill: var(--nbgd-ink); font-size: 16px; font-weight: 800; font-family: Vazirmatn, Tahoma, sans-serif; } /* `.nabgol-ink-light` is the GENERATOR's verdict ("this text sits on a dark fill"), decided while emitting the SVG and true only for the theme it was written for. The venn lenses are translucent hue over the CARD, so on a light page that verdict is a lie and the "both" label went white on pale amber. This rule is (0,2,1) like the .nabgol-ink-light rule above and sits after it, so it wins; in dark theme --nbgd-ink is the same #f8fafc as before. */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-svg text.nabgol-ink-light, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-svg text.nabgol-ink-dark { fill: var(--nbgd-ink); } /* The renderer picks ink from the fill it sits on; these must outrank the blanket .nabgol-fc-label fill above, or dark-on-light labels silently turn white again. */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-svg text.nabgol-ink-dark { fill: var(--nbgd-on-bright); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-svg text.nabgol-ink-light { fill: var(--nbgd-on-dark); } /* THE BAR CHART sits on the CARD, not on a chip — so its row label, its empty rail, and a value written on that rail (a bar too short to hold it) all invert with the card. renderBarsHtml still writes the old dark-card literals as SVG attributes (fill="#f8fafc", fill="#0f172a"), which is what the print sheet in chat-print.js keys on; CSS outranks a presentation attribute, so these rules repaint the chat and the fullscreen viewer only. Before 2026-09-13 the label was a `.nabgol-fc-label` and took the blanket chip ink above: white on the light card, invisible (live, dabir-karofanavari-9, 375px, light theme). The label/value rules are (0,3,1) and sit after the (0,2,1) ink rules, so they win; the rail and label also match by structure, so a bars SVG painted by an older chat-flowchart.js (no classes yet) is repainted too. */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-svg text.nabgol-bars-label, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-svg text.nabgol-fc-label:not(.nabgol-bars-val), :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-svg text.nabgol-bars-val.nabgol-bars-offbar { fill: var(--nbgd-ink); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-svg rect.nabgol-bars-track, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-svg rect[fill="#0f172a"] { fill: var(--nbgd-bars-track); stroke: var(--nbgd-line-mid-2); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-edge { fill: none; stroke: var(--nbgd-em-edge-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-edge-pill { fill: var(--nbgd-em-face-deep); stroke: var(--nbgd-em-edge-2); stroke-width: 1.3; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-tree-edge, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-spine, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-track, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-arc, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-life { fill: none; stroke: var(--nbgd-cy-edge); stroke-width: 1.8; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-arc { stroke: var(--nbgd-em-edge-2); stroke-width: 2; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-life { stroke-dasharray: 3 5; stroke: var(--nbgd-vi-edge-2); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-msg { fill: none; stroke: var(--nbgd-vi-edge); stroke-width: 1.8; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-label { fill: var(--nbgd-ink); font-weight: 800; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-val { font-weight: 900; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-tree-node rect, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-card, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-card { fill: var(--nbgd-node); stroke: var(--nbgd-sky-edge-2); stroke-width: 1.5; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-tree-node.is-root rect, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-tree-node.is-list-head rect { fill: var(--nbgd-em-face); stroke: var(--nbgd-em-edge); stroke-width: 1.6; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-tree-node.is-flat rect, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-tree-node.is-branch rect, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-tree-node.is-leaf rect { fill: var(--nbgd-node); stroke: var(--nbgd-sky-edge-2); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-dot { fill: var(--nbgd-em-face); stroke: var(--nbgd-em-edge-2); stroke-width: 1.6; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-num { fill: var(--nbgd-em-on); font-size: 16px; font-weight: 800; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-card { fill: var(--nbgd-cy-face-2); stroke: var(--nbgd-cy-edge); stroke-width: 1.5; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) svg .nabgol-cycle-hub { fill: var(--nbgd-cy-face); stroke: var(--nbgd-cy-edge); stroke-width: 1.6; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-actor { fill: var(--nbgd-vi-face); stroke: var(--nbgd-vi-edge-2); stroke-width: 1.5; } /* Kill magazine list pills inside diagrams (they break RTL cards). */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-diagram ul, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-diagram ol, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-flowchart ul, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-flowchart ol { list-style: none !important; margin: 0; padding: 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-diagram li::before, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-flowchart li::before { content: none !important; display: none !important; background: none !important; border: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-diagram .nabgol-compare-points li::before { content: "" !important; display: block !important; position: absolute !important; right: 0 !important; top: 0.55em !important; width: 0.4em !important; height: 0.4em !important; border-radius: 999px !important; background: var(--nbgd-em-edge) !important; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-title { margin: 0 0 0.75em; padding: 0 0.15em; color: var(--nbgd-em-ink-2); /* 0.98em alone breaks the 16px on-screen floor on the 15px mobile bubble base (0.98 * 15 = 14.7px, measured on the formula/compare/proscons/stat HTML cards that have no for compensateCardFontFloor() to bump -- see G6 note above and CHAT_GRAPHICS_OPERATING_PLAN.md 5c). max() keeps the em-based scaling for larger ambient contexts while guaranteeing the floor on the smallest one. */ font-size: max(var(--nbg-diag-min-on-screen, 16px), 0.98em); font-weight: 800; letter-spacing: 0.01em; text-align: center; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flowchart-cap { margin: 0.65em 0 0; text-align: center; font-size: 0.8em; font-weight: 700; letter-spacing: 0.03em; color: var(--nbgd-em-ink); } /* Compare — ALWAYS one column inside chat bubble. Multi-column inside a ~360–500px bubble is the cramped 3-card screenshot defect. Do not re-enable side-by-side via min-width media queries. */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-grid { display: grid; gap: 0.75em; grid-template-columns: 1fr !important; align-items: start; } :where(body.mobile-chat .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-grid { grid-template-columns: 1fr !important; } :where(body.mobile-chat .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-grid:not([data-layout="side"]) { grid-template-columns: 1fr !important; } @media (max-width: 540px) { :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-grid { grid-template-columns: 1fr !important; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-grid:not([data-layout="side"]) { grid-template-columns: 1fr !important; } } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-col { margin: 0; padding: 0; border-radius: 12px; background: var(--nbgd-well); border: 1px solid var(--nbgd-line); overflow: hidden; height: auto; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-col[data-i="0"] .nabgol-compare-head { background: linear-gradient(135deg, var(--nbgd-em-tint-2), var(--nbgd-tint)); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-col[data-i="1"] .nabgol-compare-head { background: linear-gradient(135deg, var(--nbgd-sky-tint), var(--nbgd-tint)); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-col[data-i="2"] .nabgol-compare-head { background: linear-gradient(135deg, var(--nbgd-am-tint), var(--nbgd-tint)); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-head { display: flex; align-items: center; gap: 0.55em; padding: 0.7em 0.8em; border-bottom: 1px solid var(--nbgd-line-soft); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-badge { flex: 0 0 auto; width: 1.7em; height: 1.7em; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--nbgd-em-face-mid); color: var(--nbgd-em-on); font-size: 16px; font-weight: 800; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-name { margin: 0; color: var(--nbgd-ink); font-size: 1em; font-weight: 800; line-height: 1.35; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-points { list-style: none; margin: 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-points li { position: relative; margin: 0 0 0.45em; padding: 0 1em 0 0; color: var(--nbgd-ink-2); font-size: 0.92em; font-weight: 600; line-height: 1.55; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-points li::before { content: ""; position: absolute; right: 0; top: 0.55em; width: 0.4em; height: 0.4em; border-radius: 999px; background: var(--nbgd-em-edge); } /* Stat (KPI tiles) — plain HTML grid, not SVG; see chat-flowchart.js renderStatHtml. */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr) !important; gap: 0.6em; margin: 0; } @media (min-width: 541px) { :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-stat-grid[data-count="3"], :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-stat-grid[data-count="6"] { grid-template-columns: repeat(3, 1fr) !important; } } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-stat-tile { position: relative; margin: 0; padding: 0.75em 0.7em 0.65em; border-radius: 12px; background: var(--nbgd-well); border: 1px solid var(--nbgd-line); border-top: 2px solid var(--nabgol-stat-accent, var(--nbgd-em-edge)); text-align: center; overflow: hidden; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-stat-value { font-size: 1.5em; font-weight: 800; line-height: 1.2; color: var(--nabgol-stat-accent, var(--nbgd-em-edge)); direction: rtl; unicode-bidi: plaintext; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-stat-label { margin-top: 0.3em; font-size: 0.85em; font-weight: 700; color: var(--nbgd-ink-2); line-height: 1.5; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-stat-caption { margin-top: 0.2em; font-size: 0.72em; font-weight: 500; color: var(--nbgd-ink-soft); line-height: 1.5; } /* Timeline */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-list { list-style: none; margin: 0; padding: 0.15em 0.2em 0.2em; border-right: 3px solid var(--nbgd-em-edge-45); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-item { display: flex; align-items: flex-start; gap: 0.7em; margin: 0 0 0.75em; padding: 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-index { flex: 0 0 auto; width: 1.85em; height: 1.85em; margin-right: -1.05em; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--nbgd-em-face-2); border: 2px solid var(--nbgd-em-edge-2); color: var(--nbgd-em-on); font-size: 0.85em; font-weight: 800; box-shadow: 0 0 0 4px var(--nbgd-shadow-3); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-list .nabgol-timeline-card { flex: 1 1 auto; min-width: 0; padding: 0.65em 0.8em; border-radius: 12px; background: var(--nbgd-panel); border: 1px solid var(--nbgd-line-mid); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-label { color: var(--nbgd-ink); font-weight: 800; font-size: 0.98em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-detail { margin-top: 0.25em; color: var(--nbgd-ink-soft); font-size: 0.88em; font-weight: 600; } /* Step-by-step solution cards — native
/, see chat-markdown.js groupSolutionSteps(). Native gives keyboard + screen-reader toggling for free. */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-step { margin: 0 0 0.6em; padding: 0; border-radius: 12px; background: rgba(30, 41, 59, 0.95); border: 1px solid rgba(148, 163, 184, 0.3); overflow: hidden; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-step > summary { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.8em; cursor: pointer; color: #f8fafc; font-weight: 800; font-size: 0.98em; list-style: none; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-step > summary::-webkit-details-marker, :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-step > summary::marker { display: none; content: ""; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-step > summary::after { content: ""; margin-right: auto; width: 0.55em; height: 0.55em; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: rotate(45deg); transition: transform 0.15s ease; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-step[open] > summary::after { transform: rotate(-135deg); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-step-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; border-radius: 999px; background: #059669; border: 2px solid #6ee7b7; color: #ecfdf5; font-size: 0.82em; font-weight: 800; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-step-body { padding: 0 0.9em 0.75em; color: #e2e8f0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-step-body > :first-child { margin-top: 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-step-body > :last-child { margin-bottom: 0; } /* پاسخ نهایی — mint accent border marks the destination card among the steps */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-step-final { border-color: #34d399; border-width: 2px; background: rgba(6, 78, 59, 0.35); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-step-final > summary { color: #34d399; } /* Tree */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-tree-list { list-style: none; margin: 0; padding: 0 0.85em 0 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-tree-item { margin: 0 0 0.45em; padding: 0; position: relative; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-tree-list .nabgol-tree-list { margin-top: 0.4em; border-right: 2px solid var(--nbgd-sky-line); } /* HTML leftover. Unscoped display:inline-block on svg g.nabgol-tree-node turned every tree into a stack of green buttons (screenshot). */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-tree-list .nabgol-tree-node { display: inline-block; max-width: 100%; padding: 0.45em 0.75em; border-radius: 11px; background: var(--nbgd-panel); border: 1px solid var(--nbgd-sky-line-2); color: var(--nbgd-ink); font-weight: 700; font-size: 0.95em; line-height: 1.4; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-tree-shell > .nabgol-tree-list > .nabgol-tree-item > .nabgol-tree-node { background: var(--nbgd-em-tint); border-color: var(--nbgd-em-edge); } /* Sequence */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-actors { display: flex; flex-wrap: wrap; gap: 0.45em; justify-content: flex-start; margin-bottom: 0.75em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-actors .nabgol-sequence-actor { display: inline-flex; padding: 0.35em 0.75em; border-radius: 999px; background: var(--nbgd-vi-tint); border: 1px solid var(--nbgd-vi-edge-2); color: var(--nbgd-vi-on); font-size: 0.88em; font-weight: 800; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-msgs { list-style: none; margin: 0; padding: 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-msgs .nabgol-sequence-msg { display: flex; gap: 0.65em; align-items: flex-start; margin: 0 0 0.65em; padding: 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-step { flex: 0 0 auto; width: 1.7em; height: 1.7em; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--nbgd-vi-tint-2); color: var(--nbgd-vi-on-2); font-size: 0.82em; font-weight: 800; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-body { flex: 1 1 auto; min-width: 0; padding: 0.55em 0.75em; border-radius: 12px; background: var(--nbgd-panel-2); border: 1px solid var(--nbgd-vi-edge-soft); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; color: var(--nbgd-vi-ink); font-size: 0.88em; font-weight: 700; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-arrow { color: var(--nbgd-vi-edge); font-weight: 900; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-text { margin-top: 0.25em; color: var(--nbgd-ink); font-size: 0.95em; font-weight: 700; } /* Cycle — true ring, not a wrapped pill row */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-ring { position: relative; width: min(100%, 17.5rem); aspect-ratio: 1; margin: 0.35em auto 0.55em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-orbit { position: absolute; inset: 22%; border: 2px dashed var(--nbgd-cy-edge-soft); border-radius: 50%; box-shadow: 0 0 24px var(--nbgd-cy-glow) inset; } /* HTML-only leftover ring. NEVER apply to svg .nabgol-cycle-hub — that painted the floating teal blob on the cycle screenshot. */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-ring .nabgol-cycle-hub { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: 4.4em; height: 4.4em; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--nbgd-cy-edge), var(--nbgd-cy-face-2) 70%); border: 2px solid var(--nbgd-cy-edge-70); color: var(--nbgd-on-bright-em); font-size: 0.78em; font-weight: 900; box-shadow: 0 8px 20px var(--nbgd-cy-shadow); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-list { list-style: none; position: absolute; inset: 0; margin: 0; padding: 0; display: block; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-stage { position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.2em; width: max-content; max-width: 6.8em; margin: 0; padding: 0.4em 0.55em; border-radius: 14px; background: linear-gradient(165deg, var(--nbgd-cy-face-mid), var(--nbgd-cy-face-deep)); border: 1px solid var(--nbgd-cy-edge-50); color: var(--nbgd-cy-on); font-weight: 800; font-size: 0.82em; line-height: 1.3; text-align: center; --ang: calc((var(--i) * 360deg / var(--n, 4)) - 90deg); transform: translate(-50%, -50%) rotate(var(--ang)) translate(6.55em) rotate(calc(-1 * var(--ang))); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-num { width: 1.35em; height: 1.35em; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--nbgd-cy-face-deep); border: 1px solid var(--nbgd-cy-edge); font-size: 0.8em; font-weight: 800; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-foot { margin-top: 0.15em; text-align: center; color: var(--nbgd-cy-ink); font-size: 0.85em; font-weight: 700; } /* Flowchart (HTML steps — flagship card, not code) */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-shell { position: relative; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-list { list-style: none; margin: 0; padding: 0.15em 0.1em 0.25em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-step { display: flex; gap: 0.7em; align-items: stretch; margin: 0 0 0.4em; padding: 0; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-index { flex: 0 0 auto; align-self: center; width: 1.85em; height: 1.85em; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: linear-gradient(145deg, #065f46, #047857); border: 1px solid #6ee7b7; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); color: #ecfdf5; font-size: 0.82em; font-weight: 800; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-card { flex: 1 1 auto; min-width: 0; padding: 0.65em 0.9em 0.7em; border-radius: 14px; background: linear-gradient(165deg, rgba(51, 65, 85, 1), rgba(30, 41, 59, 0.98)); border: 1px solid rgba(203, 213, 225, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 16px rgba(2, 6, 23, 0.28); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-decision .nabgol-flow-card { border-color: rgba(251, 191, 36, 0.62); background: linear-gradient(165deg, rgba(120, 53, 15, 0.42), rgba(30, 41, 59, 0.9)); border-radius: 4px 28px; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.15); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-terminal .nabgol-flow-card { border-color: #34d399; background: linear-gradient(165deg, rgba(16, 185, 129, 0.28), rgba(6, 78, 59, 0.35)); border-radius: 999px; text-align: center; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-io .nabgol-flow-card { border-color: rgba(56, 189, 248, 0.6); background: linear-gradient(165deg, rgba(12, 74, 110, 0.45), rgba(30, 41, 59, 0.92)); transform: skewX(-8deg); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-io .nabgol-flow-card > * { transform: skewX(8deg); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-shape-tag { display: inline-block; margin-bottom: 0.25em; padding: 0.05em 0.45em; border-radius: 999px; color: #a7f3d0; background: rgba(6, 78, 59, 0.45); font-size: 0.72em; font-weight: 800; letter-spacing: 0.02em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-decision .nabgol-flow-shape-tag { color: #fde68a; background: rgba(120, 53, 15, 0.55); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-io .nabgol-flow-shape-tag { color: #bae6fd; background: rgba(12, 74, 110, 0.55); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-label { color: #f8fafc; font-size: 1.02em; font-weight: 800; line-height: 1.5; font-feature-settings: "ss01"; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-edges { margin: 0 0 0.55em 2.55em; padding: 0.15em 0 0.2em; list-style: none; border-right: 2px dashed rgba(52, 211, 153, 0.35); padding-right: 0.75em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; margin: 0.15em 0 0.65em 2.35em; padding: 0; list-style: none; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-branch { display: flex; flex-direction: column; align-items: center; gap: 0.4em; padding: 0.65em 0.55em 0.7em; border-radius: 16px; background: linear-gradient(180deg, rgba(6, 78, 59, 0.55), rgba(15, 23, 42, 0.75)); border: 1px solid rgba(52, 211, 153, 0.42); text-align: center; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-branch .nabgol-flow-edge-if { align-self: center; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-branch-card { color: #f8fafc; font-weight: 800; font-size: 0.95em; line-height: 1.4; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-merge { border-right-style: solid; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-edge-box { display: flex; flex-direction: column; gap: 0.35em; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-edge { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; color: #bbf7d0; font-size: 0.9em; font-weight: 700; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-edge-if { padding: 0.15em 0.55em; border-radius: 999px; background: linear-gradient(135deg, rgba(6, 78, 59, 0.95), rgba(4, 120, 87, 0.85)); border: 1px solid rgba(110, 231, 183, 0.55); color: #ecfdf5; box-shadow: 0 2px 8px rgba(2, 6, 23, 0.25); } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-edge-arrow { color: #6ee7b7; font-weight: 900; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-flow-edge-to { color: #e2e8f0; font-weight: 800; } /* Never set display on SVG descendants — that pulls shapes out of SVG layout into a chip row. */ :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-canvas { direction: ltr !important; unicode-bidi: isolate; overflow: visible; } :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-canvas svg.nabgol-diagram-svg { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; } /* ─────────────────────────────────────────────────────────────────────────────── Diagram cards own their own list chrome (2026-08-20). Every