/* 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;
  font-variant-emoji: emoji;
  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 cards — HTML/RTL-first, Persian digits, fit assistant bubble */
: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: 1.1em 0 1.25em;
  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%, rgba(52, 211, 153, 0.16), transparent 55%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(6, 78, 59, 0.32));
  border: 1px solid rgba(52, 211, 153, 0.38);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.38);
  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%;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0 0 0.55em;
  padding: 0.28em 0.75em;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(110, 231, 183, 0.38);
  color: #6ee7b7;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
/* NEVER hide kickers when multiple diagrams share a bubble — that made the
   kitchen-sink screenshot look like one unlabeled neon wall (real defect). */

/* 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;
}
: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: #1e293b;
  stroke: #94a3b8;
  stroke-width: 2;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-terminal rect {
  fill: #065f46;
  stroke: #34d399;
  stroke-width: 2.5;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-io polygon {
  fill: #0c4a6e;
  stroke: #38bdf8;
  stroke-width: 2.5;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-decision polygon {
  fill: #7c2d12;
  stroke: #fbbf24;
  stroke-width: 2.6;
}
: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,
: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-diagram-svg .nabgol-diagram-title {
  fill: #f8fafc;
  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: #ecfdf5;
}
/* 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: #0f172a;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-svg text.nabgol-ink-light {
  fill: #f8fafc;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-fc-edge {
  fill: none;
  stroke: #6ee7b7;
  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: #064e3b;
  stroke: #6ee7b7;
  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: #67e8f9;
  stroke-width: 1.8;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-arc {
  stroke: #6ee7b7;
  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: #c4b5fd;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-msg {
  fill: none;
  stroke: #a78bfa;
  stroke-width: 1.8;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-label {
  fill: #f8fafc;
  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: #1e293b;
  stroke: #7dd3fc;
  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: #065f46;
  stroke: #34d399;
  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: #1e293b;
  stroke: #7dd3fc;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-dot {
  fill: #065f46;
  stroke: #6ee7b7;
  stroke-width: 1.6;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-num {
  fill: #ecfdf5;
  font-size: 16px;
  font-weight: 800;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-cycle-card {
  fill: #0e7490;
  stroke: #67e8f9;
  stroke-width: 1.5;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) svg .nabgol-cycle-hub {
  fill: #155e75;
  stroke: #67e8f9;
  stroke-width: 1.6;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-actor {
  fill: #4c1d95;
  stroke: #c4b5fd;
  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: #34d399 !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: #a7f3d0;
  /* 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 <svg> 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: #6ee7b7;
}

/* 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: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.28);
  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, rgba(16, 185, 129, 0.28), rgba(15, 23, 42, 0.2));
}
: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, rgba(56, 189, 248, 0.28), rgba(15, 23, 42, 0.2));
}
: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, rgba(251, 191, 36, 0.28), rgba(15, 23, 42, 0.2));
}
: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 rgba(148, 163, 184, 0.18);
}
: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: rgba(6, 78, 59, 0.85);
  color: #ecfdf5;
  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: #f8fafc;
  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;
  padding: 0.65em 0.85em 0.8em;
}
: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: #e2e8f0;
  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: #34d399;
}

/* 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: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-top: 2px solid var(--nabgol-stat-accent, #34d399);
  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, #34d399);
  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: #e2e8f0;
  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: #94a3b8;
  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 rgba(52, 211, 153, 0.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: #059669;
  border: 2px solid #6ee7b7;
  color: #ecfdf5;
  font-size: 0.85em;
  font-weight: 800;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.85);
}
: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: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.3);
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-timeline-label {
  color: #f8fafc;
  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: #94a3b8;
  font-size: 0.88em;
  font-weight: 600;
}

/* Step-by-step solution cards — native <details>/<summary>, 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 rgba(125, 211, 252, 0.35);
}
/* 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: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(125, 211, 252, 0.4);
  color: #f8fafc;
  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: rgba(16, 185, 129, 0.22);
  border-color: #34d399;
}

/* 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: rgba(91, 33, 182, 0.35);
  border: 1px solid #c4b5fd;
  color: #ede9fe;
  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: rgba(91, 33, 182, 0.55);
  color: #f5f3ff;
  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: rgba(30, 41, 59, 0.92);
  border: 1px solid rgba(196, 181, 253, 0.35);
}
: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: #ddd6fe;
  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: #a78bfa;
  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: #f8fafc;
  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 rgba(103, 232, 249, 0.42);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.08) 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%, #67e8f9, #0e7490 70%);
  border: 2px solid rgba(165, 243, 252, 0.7);
  color: #042f2e;
  font-size: 0.78em;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(8, 47, 73, 0.45);
}
: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, rgba(14, 116, 144, 0.92), rgba(8, 47, 73, 0.95));
  border: 1px solid rgba(103, 232, 249, 0.5);
  color: #ecfeff;
  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: rgba(8, 47, 73, 0.95);
  border: 1px solid #67e8f9;
  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: #a5f3fc;
  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 <ul>/<ol> in an assistant bubble gets the magazine treatment: a translucent
   card background, a 1px border, side padding, and a mint dot or Persian numeral pill
   on each <li>. Inside a diagram card that is a second frame drawn on top of the card's
   own frame, and the dots land on formula symbols as stray green blobs.

   Two earlier kill-switches existed but both missed real cases:
     · they were scoped to `figure.nabgol-diagram` — and the fullscreen viewer moves the
       .nabgol-diagram-shell ALONE into the overlay, leaving that figure behind, so every
       suppressed dot came back the moment a card was opened fullscreen (the misplaced
       green dot in the user's report);
     · they never touched background/border/padding, only ::before, so on mobile the
       formula list still painted a full-width bordered box flush against the card's own
       border (measured: list box 37→463px inside a shell that is itself 37→463px).

   Scoping to .nabgol-diagram-shell fixes both at once: the shell is exactly what travels
   into the fullscreen overlay, so in-bubble and fullscreen now render identically. */
/* Specificity note: the legacy `body.mobile-chat .message .text ul { padding-right: 22px
   !important }` in style-mobile.css is (0,3,2) with !important, so a `:where()`-scoped
   reset silently loses to it on phones — which is where every one of these reports came
   from. These selectors are written out longhand to outrank it. */
body:is(.desktop-chat, .mobile-chat) .message .text .nabgol-diagram-shell :is(ul, ol),
.nabgol-media-fullscreen .nabgol-diagram-shell :is(ul, ol) {
  list-style: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  counter-reset: none !important;
}

body:is(.desktop-chat, .mobile-chat) .message .text .nabgol-diagram-shell :is(ul, ol) > li,
.nabgol-media-fullscreen .nabgol-diagram-shell :is(ul, ol) > li {
  padding-right: 0;
  padding-left: 0;
  line-height: 1.5;
}

:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-shell li::before,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-shell li::marker,
.nabgol-media-fullscreen .nabgol-diagram-shell li::before,
.nabgol-media-fullscreen .nabgol-diagram-shell li::marker {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* …but the .nabgol-compare-points bullets are part of a compare card's design, not
   magazine chrome bleeding in, so they are restored explicitly. */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-shell .nabgol-compare-points li::before,
.nabgol-media-fullscreen .nabgol-diagram-shell .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: #34d399 !important;
}

/* Formula card */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-formula-expr {
  display: flex;
  justify-content: center;
  margin: 0.15em 0 0.85em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-formula-expr-inner {
  display: inline-block;
  padding: 0.7em 1.1em;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 64, 175, 0.35));
  border: 1px solid rgba(147, 197, 253, 0.55);
  color: #eff6ff;
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  unicode-bidi: isolate;
}
/* Legend rows (2026-08-20). Every row used to be `width: fit-content`, so the three
   rows of a legend ended up three different widths, each hugging the card's start edge —
   and because the magazine list chrome painted a bordered box around the whole list at
   the card's exact width, the widest row sat flush on that border and read as spilling
   out of the card. The list chrome is gone (see the diagram-shell list reset above) and
   the rows are now one aligned grid: symbol column, «یعنی» column, meaning column, so
   every symbol chip and every meaning lines up with the one above it. */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-formula-parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4em;
  direction: rtl;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-formula-part {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45em 0.55em;
  margin: 0;
  padding: 0.4em 0.7em;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.28);
  direction: rtl;
  text-align: right;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-formula-sym {
  min-width: 2.1em;
  padding: 0.15em 0.45em;
  border-radius: 7px;
  background: rgba(59, 130, 246, 0.28);
  border: 1px solid rgba(147, 197, 253, 0.45);
  color: #dbeafe;
  font-weight: 800;
  text-align: center;
  unicode-bidi: isolate;
  line-height: 1.3;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-formula-eq {
  color: #93c5fd;
  font-weight: 900;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-formula-mean {
  color: #f1f5f9;
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.45;
  text-align: right;
  min-width: 0;
}

/* Bars */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-unit {
  margin: -0.35em 0 0.7em;
  text-align: center;
  color: #94a3b8;
  font-size: 0.85em;
  font-weight: 700;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-row {
  margin: 0;
  padding: 0;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75em;
  margin-bottom: 0.28em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-label {
  color: #f8fafc;
  font-weight: 800;
  font-size: 0.95em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-value {
  color: #6ee7b7;
  font-weight: 800;
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-track {
  display: flex;
  justify-content: flex-end;
  height: 0.72em;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.28);
  overflow: hidden;
  direction: rtl;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(270deg, #059669, #34d399 55%, #a7f3d0);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.35);
  transition: width 0.35s ease;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-row[data-i="1"] .nabgol-bars-fill {
  background: linear-gradient(270deg, #0369a1, #38bdf8 55%, #bae6fd);
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-row[data-i="2"] .nabgol-bars-fill {
  background: linear-gradient(270deg, #b45309, #fbbf24 55%, #fde68a);
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-row[data-i="3"] .nabgol-bars-fill {
  background: linear-gradient(270deg, #6d28d9, #a78bfa 55%, #ddd6fe);
}

/* Venn (real SVG circles) */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-stage {
  margin: 0.2em auto 0.85em;
  max-width: 22em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-svg-label {
  fill: #f8fafc;
  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-venn-svg-both {
  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-venn-svg-bothv {
  fill: #0f172a;
  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-venn-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-legend li {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  color: #e2e8f0;
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1.45;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-dot {
  flex: 0 0 auto;
  width: 0.7em;
  height: 0.7em;
  margin-top: 0.35em;
  border-radius: 999px;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-dot.a { background: #34d399; }
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-dot.b { background: #38bdf8; }
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-dot.both { background: #fbbf24; }

/* Pros / Cons — stack by default; side-by-side only when data-layout=side (short copy). */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-grid {
  display: grid;
  gap: 0.65em;
  grid-template-columns: 1fr;
  align-items: start;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-grid[data-layout="side"] {
  grid-template-columns: 1fr 1fr;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.28);
  width: 100%;
  max-width: 100%;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.65em 0.8em;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col h4 {
  margin: 0;
  color: #f8fafc;
  font-size: 1em;
  font-weight: 800;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-badge {
  width: 1.55em;
  height: 1.55em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.95em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col.is-pro header {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.32), rgba(15, 23, 42, 0.15));
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col.is-pro .nabgol-proscons-badge {
  background: #059669;
  color: #ecfdf5;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col.is-con header {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.28), rgba(15, 23, 42, 0.15));
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col.is-con .nabgol-proscons-badge {
  background: #b91c1c;
  color: #fef2f2;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col ul {
  list-style: none;
  margin: 0;
  padding: 0.65em 0.85em 0.8em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col li {
  position: relative;
  margin: 0 0 0.45em;
  padding: 0 1em 0 0;
  color: #e2e8f0;
  font-size: 0.92em;
  font-weight: 600;
  line-height: 1.5;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col.is-pro li::before,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col.is-con 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;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col.is-pro li::before {
  background: #34d399 !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-proscons-col.is-con li::before {
  background: #f87171 !important;
}

:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-sequence-label-bg {
  fill: rgba(15, 23, 42, 0.92);
  stroke: rgba(167, 139, 250, 0.45);
  stroke-width: 1;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-bars-axis {
  fill: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-venn-lens-label {
  fill: #f8fafc;
  font-size: 16px;
  font-weight: 800;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-annotate-schematic-note {
  margin: 0 0 0.55em;
  padding: 0.45em 0.65em;
  border-radius: 10px;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(110, 231, 183, 0.28);
  color: #a7f3d0;
  font-size: 0.82em;
  line-height: 1.5;
}
@media (max-width: 480px) {
  :where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-compare-shell[data-stack="mobile"] .nabgol-compare-svg {
    min-height: 280px;
  }
}

/* Annotate (book page pins) */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-annotate-page {
  position: relative;
  direction: ltr;
  height: 12.5em;
  margin: 0.15em auto 0.85em;
  max-width: 18em;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    0 10px 24px rgba(2, 6, 23, 0.28);
  overflow: hidden;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-annotate-page-label {
  position: absolute;
  top: 0.45em;
  right: 0.55em;
  z-index: 2;
  direction: rtl;
  color: #334155;
  font-size: 0.78em;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.15em 0.45em;
  border-radius: 999px;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-annotate-lines {
  position: absolute;
  inset: 2.1em 1em 1em;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 0.85em,
      rgba(100, 116, 139, 0.22) 0.85em,
      rgba(100, 116, 139, 0.22) 0.9em
    );
  opacity: 0.85;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-annotate-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-annotate-pin-n {
  width: 1.55em;
  height: 1.55em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dc2626;
  border: 2px solid #fff;
  color: #fff;
  font-size: 0.78em;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(127, 29, 29, 0.45);
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-annotate-pin-cap {
  margin-top: 0.2em;
  max-width: 6.2em;
  padding: 0.12em 0.4em;
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  font-size: 0.62em;
  font-weight: 800;
  direction: rtl;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(2, 6, 23, 0.35);
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-annotate-pin-arrow {
  width: 0;
  height: 0;
  margin-top: -1px;
  border-left: 0.35em solid transparent;
  border-right: 0.35em solid transparent;
  border-top: 0.55em solid #dc2626;
  filter: drop-shadow(0 1px 0 #fff);
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-annotate-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-annotate-legend li {
  display: flex;
  gap: 0.55em;
  align-items: flex-start;
  margin: 0;
  color: #e2e8f0;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.45;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-annotate-leg-n {
  flex: 0 0 auto;
  width: 1.45em;
  height: 1.45em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.9);
  color: #fff;
  font-size: 0.8em;
  font-weight: 900;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-annotate-hint {
  margin: 0.75em 0 0;
  padding: 0.55em 0.7em;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.75);
  border: 1px dashed rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.45;
}

:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) pre,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) code,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .katex,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .katex-display,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-math-tex,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .MathJax,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) mjx-container,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .math {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate;
}

:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) p code,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) li code {
  margin: 0 0.12em;
  white-space: nowrap;
}


body:is(.desktop-chat, .mobile-chat) .message .text ol > li::marker,
body:is(.desktop-chat, .mobile-chat) .message .text ul > li::marker {
  unicode-bidi: isolate;
  color: #86efac;
  font-weight: 700;
}

body:is(.desktop-chat, .mobile-chat) .message .text pre,
body:is(.desktop-chat, .mobile-chat) .message .text code {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate;
}

:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) :not(pre) > code {
  font-size: 0.9em;
  padding: 0.12em 0.4em;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: #bbf7d0;
}

/* Images & media in messages */
body:is(.desktop-chat, .mobile-chat) .message .text img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.38);
}

body:is(.desktop-chat, .mobile-chat) .message .text table {
  border-radius: 10px;
  overflow: hidden;
}

/* Workflow step pill */
.nabgol-workflow-badge {
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-top: 10px;
}

/* Action chips — icon dock; labels stay hover-tooltips (style-desktop) */
body:is(.desktop-chat, .mobile-chat) .action-chip {
  min-height: 28px;
  padding: 0;
  border-radius: 8px;
  opacity: 0.88;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.12s ease, color 0.15s ease;
}

body:is(.desktop-chat, .mobile-chat) .message-bubble:hover .action-chip,
body:is(.desktop-chat, .mobile-chat) .action-chip:focus-visible {
  opacity: 1;
}

body:is(.desktop-chat, .mobile-chat) .action-chip:active {
  transform: scale(0.96);
}

body:is(.desktop-chat, .mobile-chat) .message-bubble > .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 8px;
}

body:is(.desktop-chat, .mobile-chat) .message-actions {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* Do not force visible text labels beside icons */
body:is(.desktop-chat, .mobile-chat) .message-actions > .action-chip {
  gap: 0;
}

body:is(.desktop-chat, .mobile-chat) .action-overflow {
  display: none !important;
}

/* Error bubble — large retry CTA */
body:is(.desktop-chat, .mobile-chat) .message.is-error .message-bubble {
  border-color: rgba(248, 113, 113, 0.45) !important;
  background: linear-gradient(165deg, rgba(69, 10, 10, 0.55) 0%, rgba(15, 23, 42, 0.94) 100%) !important;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-error-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 12px 0 4px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ecfdf5;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-error-retry:hover {
  filter: brightness(1.06);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-error-retry .ico {
  width: 18px;
  height: 18px;
}

body:is(.desktop-chat, .mobile-chat) .message.is-error .message-actions > .action-chip.regenerate-btn {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.4);
  opacity: 1;
  font-weight: 800;
}

/* Version bar under bubble — classic pill */
body:is(.desktop-chat, .mobile-chat) .message-body > .version-controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  color: rgba(226, 232, 240, 0.92);
  font-size: 12px;
}

body:is(.desktop-chat, .mobile-chat) .message-body > .version-controls.show,
body:is(.desktop-chat, .mobile-chat) .message-body > .version-controls:not([hidden]) {
  display: inline-flex !important;
}

body:is(.desktop-chat, .mobile-chat) .message-body > .version-controls button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0.85;
}

body:is(.desktop-chat, .mobile-chat) .message-body > .version-controls button:hover {
  opacity: 1;
  color: #6ee7b7;
}

body:is(.desktop-chat, .mobile-chat) .message-body > .version-controls .version-badge {
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* legacy overflow leftovers (unused) */
body:is(.desktop-chat, .mobile-chat) .action-menu {
  display: none !important;
}

/* Version controls beside bubble meta (not page bottom) */
body:is(.desktop-chat, .mobile-chat) .version-controls {
  display: none;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body:is(.desktop-chat, .mobile-chat) .version-controls.show,
body:is(.desktop-chat, .mobile-chat) .version-controls:not([hidden]).show {
  display: inline-flex !important;
}

body:is(.desktop-chat, .mobile-chat) .version-controls[hidden] {
  display: none !important;
}

body:is(.desktop-chat, .mobile-chat) .version-controls .prev-version,
body:is(.desktop-chat, .mobile-chat) .version-controls .next-version {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.55);
  color: #cbd5e1;
  cursor: pointer;
}

body:is(.desktop-chat, .mobile-chat) .version-controls .prev-version span,
body:is(.desktop-chat, .mobile-chat) .version-controls .next-version span {
  display: none;
}

body:is(.desktop-chat, .mobile-chat) .version-controls .version-badge {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  min-width: 2.6em;
  text-align: center;
  direction: ltr;
}

body:is(.desktop-chat, .mobile-chat) .footer-meta {
  opacity: 0.62;
  font-size: 10px;
}

/* Inline interactive block inside bubble */
body:is(.desktop-chat, .mobile-chat) .message-bubble > .nabgol-inline-components {
  margin-top: 14px;
  padding-top: 14px;
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* Desktop stage atmosphere — dark only; light uses --bg */
@media (min-width: 768px) {
  html:not([data-theme="light"]) body.desktop-chat .chat-main {
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(16, 185, 129, 0.06) 0%, transparent 55%),
      linear-gradient(180deg, #0a0f1a 0%, #0d1424 48%, #0a0f1a 100%);
  }
}

/* Phase 3 layering — empty never competes with open dossier (desktop+mobile) */
body.nabgol-workspace-open #emptyState,
body.nabgol-workspace-open .chat-messages > .empty {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Phase 3 — history popover must not dim/cover dossier (any viewport) */
body.nabgol-workspace-open.nabgol-chats-open .sidebar-overlay,
body.nabgol-workspace-open .sidebar-overlay.show {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* PDF preview — dark surround, paper centered */
.nabgol-print-sheet-frame {
  background: #1a2332 !important;
}

body.desktop-chat #splitPanel.open,
body.desktop-chat #splitPanel.nabgol-workspace-v2.open {
  background: #0b1220 !important;
}

/* External tool cards — high-contrast readable on dark chat chrome */
body:is(.desktop-chat, .mobile-chat) .external-tool-card {
  direction: rtl;
  text-align: right;
  border-radius: 16px;
  border: 1px solid rgba(110, 231, 183, 0.38);
  background: linear-gradient(165deg, #173528 0%, #0f241a 55%, #0c1b14 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  margin: 8px 0 12px;
  padding: 14px 16px;
  color: #eef8f1 !important;
}
body:is(.desktop-chat, .mobile-chat) .external-tool-badge {
  background: rgba(167, 243, 208, 0.18);
  color: #a7f3d0 !important;
  border: 1px solid rgba(167, 243, 208, 0.28);
}
body:is(.desktop-chat, .mobile-chat) .external-tool-card--disease .external-tool-badge {
  background: rgba(253, 186, 116, 0.18);
  color: #fdba74 !important;
  border-color: rgba(253, 186, 116, 0.3);
}
body:is(.desktop-chat, .mobile-chat) .external-tool-title {
  color: #f0fdf4 !important;
}
body:is(.desktop-chat, .mobile-chat) .external-tool-summary {
  color: #dcefe3 !important;
  font-weight: 600;
}
body:is(.desktop-chat, .mobile-chat) .external-tool-cand {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(167, 243, 208, 0.22);
  color: #eaf7ef !important;
}
body:is(.desktop-chat, .mobile-chat) .external-tool-cand-name {
  color: #f0fdf4 !important;
}
body:is(.desktop-chat, .mobile-chat) .external-tool-cand-score {
  background: rgba(167, 243, 208, 0.16);
  color: #bbf7d0 !important;
}
body:is(.desktop-chat, .mobile-chat) .external-tool-cand-meta {
  color: #b7d4c2 !important;
}
body:is(.desktop-chat, .mobile-chat) .external-tool-card.is-error {
  background: linear-gradient(165deg, #3a1d18, #2a1410);
  border-color: rgba(252, 165, 165, 0.35);
  color: #fee2e2 !important;
}
body:is(.desktop-chat, .mobile-chat) .external-tool-card.is-error .external-tool-title {
  color: #fecaca !important;
}

/* ============================================================================
   NABGOL THINK — the wait signature (v9 · forever)
   ---------------------------------------------------------------------------
   One composition, three beats, read top → down:
     1) the living mark          — brand film breathing inside a slow aura
     2) «در حال فکر کردن» + ⋯     — honest status line; three dots keep the pulse
     3) «ریشه در اندیشه دارم…»    — the motto, gold, lit by one specular sweep
   Laws proven by real device screenshots — do not undo:
     · frameless: no card, no glass matte — only a soft edgeless vignette
     · ghost layer: never captures a tap, never blocks scroll
     · the base motto text always keeps a real `color` (transparent fill on the
       base run = the “empty plaque” bug). Transparent fill is allowed ONLY on
       the duplicated `.nabgol-think-sub-gleam` overlay, inside @supports.
     · the motto never wraps and never sits in a pill (a plaque reads as a button)
     · no straight rule/bar near the copy (reads as a progress bar)
   ========================================================================== */
@keyframes nabgol-think-veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* ——— ENTRANCE LAW ———
   Every staggered entrance below animates TRANSFORM ONLY. No opacity, no
   clip-path, ever, on anything carrying words. Reason: with a delay plus
   `both`, the from-frame is painted during the delay, so an animation that is
   throttled, overridden or never advanced leaves the text stranded invisible —
   which is exactly how the motto disappeared in the field. A stranded
   transform costs a few pixels of offset; a stranded opacity costs the brand.
   The single fade of the whole composition lives on .typing-indicator. */
@keyframes nabgol-think-stage-in {
  /* transform only — filter:blur here destroys the film's alpha edges */
  from { transform: translateY(12px) scale(0.965); }
  to { transform: translateY(0) scale(1); }
}
@keyframes nabgol-think-breathe {
  0%, 100% { transform: scale(1) translateZ(0); }
  50% { transform: scale(1.028) translateZ(0); }
}
/* Two blooms drift on opposite slow orbits — organic light, never a spinner. */
@keyframes nabgol-think-aura-a {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 0.76; transform: translate(-53%, -47%) scale(1.12); }
}
@keyframes nabgol-think-aura-b {
  0%, 100% { opacity: 0.24; transform: translate(-50%, -50%) scale(1.08); }
  50% { opacity: 0.52; transform: translate(-47%, -53%) scale(0.9); }
}
/* One thought ring leaves the mark per cycle — the only literal “activity” tell. */
@keyframes nabgol-think-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  16% { opacity: 0.4; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}
/* Copy settles in once, then holds still — no infinite text glow (reads cheap). */
@keyframes nabgol-think-line-in {
  from { transform: translateY(7px); }
  to { transform: translateY(0); }
}
/* Resting opacity stays high enough that a still frame (screenshot, slow paint)
   still shows three dots — a loading tell nobody can see is not a tell. */
@keyframes nabgol-think-dot {
  0%, 62%, 100% { opacity: 0.42; transform: translateY(0) scale(0.85); }
  31% { opacity: 1; transform: translateY(-2.5px) scale(1); }
}
/* The motto rises once into place. There is deliberately NO clip-path wipe here:
   a stranded clip is an invisible motto, and the gleam already carries the
   “engraved metal” read without ever being able to hide a glyph. */
/* Idle life for the motto — transform only, same law as every other seal
   animation: a stalled loop just holds one harmless scale, never hides text. */
/* Specular sweep — light travelling across gold, right → left (RTL).
   With background-size 300% the offset is -2W·P, so -100% parks the band off
   the RIGHT and 100% parks it off the LEFT: -100% → 100% is an RTL sweep. */
/* A bare custom property animates by discrete jumps; registering it as a
   <percentage> is what makes the two bead combs glide instead of teleport. */
body:is(.desktop-chat, .mobile-chat) .typing-indicator[hidden],
body:is(.desktop-chat, .mobile-chat) #typing[hidden] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body:is(.desktop-chat, .mobile-chat) .typing-indicator {
  display: none;
  box-sizing: border-box;
  position: fixed !important;
  inset: 0 0 var(--nabgol-composer-offset, 76px) 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: var(--nabgol-composer-offset, 76px) !important;
  /* Above dossier/PDF (1400) so think stays visible when panel is open */
  z-index: 1500 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  align-self: auto !important;
  /* Ghost layer: visible only — scroll/click pass through to chat */
  pointer-events: none !important;
  opacity: 0;
  --think-live-opacity: 1;
  --think-live-scale: 1;
  transition: opacity 0.35s ease;
  transform: none !important;
  overflow: visible !important;
}

/* Beat desktop-shell in-flow rules — always fixed ghost overlay */
body.desktop-chat .chat-messages > .typing-indicator,
body.desktop-chat .chat-messages > .typing-indicator.show,
body.desktop-chat .chat-messages > .typing-indicator.show:not(.is-leaving) {
  position: fixed !important;
  /* Bound to .chat-main via --think-* (syncThinkBounds) */
  left: var(--think-left, 0px) !important;
  width: var(--think-width, 100%) !important;
  top: var(--think-top, 0px) !important;
  height: var(--think-height, auto) !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: auto !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: 1500 !important;
}

body.desktop-chat .typing-indicator.is-chat-bound.show:not(.is-leaving) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:is(.desktop-chat, .mobile-chat) .typing-indicator.show:not(.is-leaving) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  filter: none !important;
  animation: nabgol-think-veil-in 0.4s ease both;
  pointer-events: none !important;
}

body:is(.desktop-chat, .mobile-chat) .typing-indicator.show .nabgol-think-stage {
  opacity: var(--think-live-opacity, 1) !important;
  filter: none !important;
  transform: scale(var(--think-live-scale, 1));
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

body:is(.desktop-chat, .mobile-chat) .typing-indicator.is-leaving {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none !important;
}

body:is(.desktop-chat, .mobile-chat) .typing-indicator.is-leaving .nabgol-think-stage {
  opacity: 0 !important;
  filter: none !important;
  transform: translateY(-8px) scale(0.96) !important;
  transition:
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Page stays sharp — welcome card hides during think so it never looks like a frame */
body:is(.desktop-chat, .mobile-chat) .chat-messages:has(> .typing-indicator.show) > .empty,
body:is(.desktop-chat, .mobile-chat).nabgol-thinking #emptyState {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none;
}

/* —— The stage: one centred column, three beats, zero chrome —— */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-stage,
body:is(.desktop-chat, .mobile-chat) .nabgol-think-row {
  position: relative;
  z-index: 1;
  pointer-events: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: min(90vw, 420px);
  max-width: min(90vw, 420px);
  margin: 0 auto;
  padding: 4px 10px 8px;
  /* Frameless — no card, no glass matte over the page */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
  text-align: center;
  transform-origin: center center;
  will-change: opacity, transform;
}

/* Edgeless vignette: lifts the composition off live message text without ever
   drawing a card. No border, no radius, no hard edge anywhere — it cannot be
   mistaken for a dialog because it has no boundary to see. */
body:is(.desktop-chat, .mobile-chat) .typing-indicator.show::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse 64% 48% at 50% 47%,
    rgba(3, 9, 7, 0.8) 0%,
    rgba(3, 9, 7, 0.58) 40%,
    rgba(3, 9, 7, 0.24) 64%,
    rgba(3, 9, 7, 0) 82%);
  opacity: var(--think-live-opacity, 1);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  animation: nabgol-think-veil-in 0.5s ease both;
}

body:is(.desktop-chat, .mobile-chat) .typing-indicator.is-leaving::before {
  opacity: 0 !important;
  transition: opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ——— THE SPAN TRAP · read this before adding any <span> to the think stage ———
   style-common.css still ships the pre-2026 typing dots:

     .typing-indicator span { width: 8px; height: 8px; background: …; border-radius: 50% }

   It targets EVERY span inside the indicator. Measured consequence when the seal
   put its copy in spans: the motto rendered 8px wide and 8px tall — present in the
   DOM, gold, opacity 1, and completely invisible on screen (field report + measured
   2026-08-20). Blockification makes it worse: a span that is a flex item, or one we
   set to inline-block, starts honouring that width/height.

   So the legacy sizing is neutralised ONCE, here, before anything below re-declares
   what each span actually needs. Every rule after this point that wants a real size
   or animation on a span must say so with !important. Never narrow this selector to
   `span:not([class])` — that protects nothing, which is exactly how the bug shipped. */
body:is(.desktop-chat, .mobile-chat) .typing-indicator .nabgol-think-stage span:not([class^="nabgol-think-"]),
body:is(.desktop-chat, .mobile-chat) .typing-indicator.show .nabgol-think-stage span:not([class^="nabgol-think-"]) {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  animation: none !important;
}
/* ↑ The `:not([class^="nabgol-think-"])` is not cosmetic — it is a bug fix.
   This neutraliser originally matched EVERY span in the stage, and at
   (0,4,2) it outranks the seal's own (0,4,1) rules. So its
   `animation: none !important` and `background: transparent !important`
   silently killed the motto's gleam sweep and its reveal wash for several
   releases: the effects were authored, shipped, and never once ran.

   Our own spans are therefore excluded here, and every one of them instead
   pins its own `width`/`height`/`background` against the legacy
   `.typing-indicator span { width: 8px }` rule (see THE SPAN TRAP). Anything
   new added under the `nabgol-think-` namespace MUST carry those pins — and
   test_think_seal_visual.js measures real painted geometry, so a missing pin
   fails the gate instead of shipping. */

/* —— Beat 1 · the living mark —— */

/* single source of truth for the mark size; the roots derive from it */

/* single source of truth for the mark size; the roots derive from it */

/* single source of truth for the mark size; the roots derive from it */

/* single source of truth for the mark size; the roots derive from it */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-stage { --think-mark: min(52vw, 214px); }

body:is(.desktop-chat, .mobile-chat) .nabgol-think-mark {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--think-mark);
  height: var(--think-mark);
  margin: 0 auto;
  pointer-events: none !important;
  animation: nabgol-think-stage-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  grid-area: 1 / 1;
  width: 152% !important;
  height: 120% !important;
  border-radius: 50% !important;
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-aura.is-a {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(52, 211, 153, 0.34) 0%,
    rgba(16, 185, 129, 0.14) 44%,
    transparent 72%) !important;
  animation: nabgol-think-aura-a 5.6s ease-in-out infinite !important;
}

/* Kept as a faint gold undertone only — .is-a carries the halo everyone knows
   from the original mark; this must never compete with it or with the film. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-aura.is-b {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(251, 191, 36, 0.11) 0%,
    rgba(245, 158, 11, 0.05) 40%,
    transparent 68%) !important;
  animation: nabgol-think-aura-b 7.4s ease-in-out infinite !important;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  grid-area: 1 / 1;
  width: 76% !important;
  height: 76% !important;
  border-radius: 50% !important;
  border: 1px solid rgba(110, 231, 183, 0.42) !important;
  background: transparent !important;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  animation: nabgol-think-ring 3.6s cubic-bezier(0.16, 0.8, 0.3, 1) infinite !important;
}

/* One ring reads as "a thought just left the mark"; two read as a target
   sight. Second ring stays in the DOM (markup gate keeps checking for it) but
   is switched off here — `opacity: 0 !important` beats a running keyframe. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-ring.is-2 {
  opacity: 0 !important;
}



/* Legacy nodes from older builds — neutralised, never painted. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-halo,
body:is(.desktop-chat, .mobile-chat) .nabgol-think-glow,
body:is(.desktop-chat, .mobile-chat) .nabgol-think-wave,
body:is(.desktop-chat, .mobile-chat) .nabgol-think-orb::before {
  display: none !important;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-think-orb,
body:is(.desktop-chat, .mobile-chat) .nabgol-think-core {
  all: unset;
  display: contents;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-video {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0 auto;
  /* Prefer readable brand over blend tricks that vanish on dark panels */
  mix-blend-mode: normal;
  filter: drop-shadow(0 10px 30px rgba(52, 211, 153, 0.3)) !important;
  -webkit-filter: drop-shadow(0 10px 30px rgba(52, 211, 153, 0.3)) !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none !important;
  transform-origin: center center;
  animation: nabgol-think-breathe 4.2s ease-in-out infinite;
  will-change: transform;
}

@supports (mix-blend-mode: plus-lighter) {
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-video.is-alpha {
    mix-blend-mode: plus-lighter;
    filter: drop-shadow(0 10px 30px rgba(52, 211, 153, 0.34)) !important;
  }
}

@media (min-width: 768px) {
  body.desktop-chat .nabgol-think-stage { --think-mark: 224px; }
  body.desktop-chat .nabgol-think-stage {
    width: min(92vw, 460px);
    max-width: 460px;
    padding: 8px 24px 14px;
  }
}

/* —— Beats 2 + 3 · the copy —— */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-meta,
body:is(.desktop-chat, .mobile-chat) .nabgol-think-copy {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 2px;
  text-align: center;
  color: #e2e8f0;
  writing-mode: horizontal-tb;
  direction: rtl;
}

/* Beat 2 — the honest status line. Whisper weight: the motto is the focal point. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-title {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  /* Persian is a joined script — letter-spacing here breaks the connections. */
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  color: #a3b8b1 !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  writing-mode: horizontal-tb !important;
  animation: nabgol-think-line-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both !important;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-title.is-quiet {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: #a3b8b1 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Functional states (writing / stopped / timeout) put the title in front. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-meta:not(.is-brand-seal) .nabgol-think-title {
  font-size: 1.04rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  color: #ecfdf5 !important;
}

/* A copy run must always measure as text, never as a legacy 8px dot. See THE
   SPAN TRAP above: width/height/background are pinned on purpose. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-title-text {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit;
  letter-spacing: inherit;
}

/* Stale cached script/markup can leave the status line as a bare text node with
   the dots span gone. The line must still read «در حال فکر کردن …», so a
   pseudo-element ellipsis stands in — pseudo-elements survive textContent. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-title:not(:has(.nabgol-think-dots))::after {
  content: " …";
  opacity: 0.7;
  letter-spacing: 0;
}

/* The animated ellipsis of «در حال فکر کردن …» — three dots, RTL rhythm. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-dots {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  flex: 0 0 auto;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-dots i {
  display: block;
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: linear-gradient(180deg, #a7f3d0, #34d399);
  box-shadow: 0 0 9px -1px rgba(52, 211, 153, 0.9);
  animation: nabgol-think-dot 1.4s ease-in-out infinite;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-think-dots i:nth-child(1) { animation-delay: 0s; }
body:is(.desktop-chat, .mobile-chat) .nabgol-think-dots i:nth-child(2) { animation-delay: 0.16s; }
body:is(.desktop-chat, .mobile-chat) .nabgol-think-dots i:nth-child(3) { animation-delay: 0.32s; }



/* ══════ THE MOTTO IS WRITTEN BY THE LIGHT ══════
   Asked for repeatedly and never actually delivered until now: the phrase is
   invisible at rest, becomes readable only while light crosses it, then fades
   back into the dark.

   Two stacked copies of the same sentence:
     · .nabgol-think-sub-text is the BASE. It keeps the real text, the real box
       and the real layout — machines and a text search still find it — but it
       is painted at a whisper, so at rest there is only a ghost.
     · .nabgol-think-sub-gleam is a duplicate laid exactly on top at full
       brightness, revealed through a MOVING MASK. Only the band under the mask
       window is visible, so the letters light up as the band passes and go dark
       behind it.

   Why a duplicate rather than animating the base's own colour: an earlier
   attempt animated -webkit-text-fill-color and lost, because an !important
   base declaration on that property outranks a running animation. Two elements
   sidestep the whole cascade fight.

   The sweep runs right-to-left, following the direction of the script. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand .nabgol-think-sub-text {
  position: relative;
  z-index: 1;
  /* the ghost: present, never quite readable */
  color: rgba(233, 207, 146, 0.13) !important;
  -webkit-text-fill-color: rgba(233, 207, 146, 0.13) !important;
  text-shadow: none !important;
}

/* The BASE copy's «اندیشه» has to be dim too. `.nabgol-think-key` carries an
   !important colour of its own, which beat the ghost above and left that one
   word permanently lit while everything around it breathed — the reveal looked
   dead because the eye locked onto the word that never changed. This selector
   is deeper, so it wins. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand .nabgol-think-sub-text .nabgol-think-key {
  color: rgba(240, 218, 160, 0.16) !important;
  -webkit-text-fill-color: rgba(240, 218, 160, 0.16) !important;
  text-shadow: none !important;
}



/* THE PERCENTAGE IS NOT WHAT IT LOOKS LIKE. For mask-position, p% resolves to
   (elementWidth - imageWidth) * p. The image here is 300% of the element, so
   that factor is NEGATIVE (-200%) and the offset runs backwards: bigger p moves
   the band LEFT, and values outside 0..100% overshoot wildly. A first attempt
   animated 150% -> -170% and the band spent the whole cycle off the element,
   which is why the motto never lit up.
   The bright core sits at 48% of the image, i.e. 1.44 element-widths in, so:
     core at the right edge  -> offset -0.44 -> p = 22%
     core at the left edge   -> offset -1.44 -> p = 72%
   14% and 80% put a little dark margin either side, so the phrase is unlit for
   most of the cycle and is then written right-to-left, the way it is read. */
@keyframes nabgol-think-motto-reveal {
  0%, 6% { -webkit-mask-position: 14% 0; mask-position: 14% 0; }
  76%, 100% { -webkit-mask-position: 80% 0; mask-position: 80% 0; }
}



/* ══════ THE MOTTO IS WRITTEN BY THE LIGHT ══════
   Asked for repeatedly and never actually delivered until now: the phrase is
   invisible at rest, becomes readable only while light crosses it, then fades
   back into the dark.

   Two stacked copies of the same sentence:
     · .nabgol-think-sub-text is the BASE. It keeps the real text, the real box
       and the real layout — machines and a text search still find it — but it
       is painted at a whisper, so at rest there is only a ghost.
     · .nabgol-think-sub-gleam is a duplicate laid exactly on top at full
       brightness, revealed through a MOVING MASK. Only the band under the mask
       window is visible, so the letters light up as the band passes and go dark
       behind it.

   Why a duplicate rather than animating the base's own colour: an earlier
   attempt animated -webkit-text-fill-color and lost, because an !important
   base declaration on that property outranks a running animation. Two elements
   sidestep the whole cascade fight.

   The sweep runs right-to-left, following the direction of the script. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand .nabgol-think-sub-text {
  position: relative;
  z-index: 1;
  /* the ghost: present, never quite readable */
  color: rgba(233, 207, 146, 0.13) !important;
  -webkit-text-fill-color: rgba(233, 207, 146, 0.13) !important;
  text-shadow: none !important;
}

/* The BASE copy's «اندیشه» has to be dim too. `.nabgol-think-key` carries an
   !important colour of its own, which beat the ghost above and left that one
   word permanently lit while everything around it breathed — the reveal looked
   dead because the eye locked onto the word that never changed. This selector
   is deeper, so it wins. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand .nabgol-think-sub-text .nabgol-think-key {
  color: rgba(240, 218, 160, 0.16) !important;
  -webkit-text-fill-color: rgba(240, 218, 160, 0.16) !important;
  text-shadow: none !important;
}



/* THE PERCENTAGE IS NOT WHAT IT LOOKS LIKE. For mask-position, p% resolves to
   (elementWidth - imageWidth) * p. The image here is 300% of the element, so
   that factor is NEGATIVE (-200%) and the offset runs backwards: bigger p moves
   the band LEFT, and values outside 0..100% overshoot wildly. A first attempt
   animated 150% -> -170% and the band spent the whole cycle off the element,
   which is why the motto never lit up.
   The bright core sits at 48% of the image, i.e. 1.44 element-widths in, so:
     core at the right edge  -> offset -0.44 -> p = 22%
     core at the left edge   -> offset -1.44 -> p = 72%
   14% and 80% put a little dark margin either side, so the phrase is unlit for
   most of the cycle and is then written right-to-left, the way it is read. */
@keyframes nabgol-think-motto-reveal {
  0%, 6% { -webkit-mask-position: 14% 0; mask-position: 14% 0; }
  76%, 100% { -webkit-mask-position: 80% 0; mask-position: 80% 0; }
}



/* ══════ THE MOTTO IS WRITTEN BY THE LIGHT ══════
   Asked for repeatedly and never actually delivered until now: the phrase is
   invisible at rest, becomes readable only while light crosses it, then fades
   back into the dark.

   Two stacked copies of the same sentence:
     · .nabgol-think-sub-text is the BASE. It keeps the real text, the real box
       and the real layout — machines and a text search still find it — but it
       is painted at a whisper, so at rest there is only a ghost.
     · .nabgol-think-sub-gleam is a duplicate laid exactly on top at full
       brightness, revealed through a MOVING MASK. Only the band under the mask
       window is visible, so the letters light up as the band passes and go dark
       behind it.

   Why a duplicate rather than animating the base's own colour: an earlier
   attempt animated -webkit-text-fill-color and lost, because an !important
   base declaration on that property outranks a running animation. Two elements
   sidestep the whole cascade fight.

   The sweep runs right-to-left, following the direction of the script. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand .nabgol-think-sub-text {
  position: relative;
  z-index: 1;
  /* the ghost: present, never quite readable */
  color: rgba(233, 207, 146, 0.13) !important;
  -webkit-text-fill-color: rgba(233, 207, 146, 0.13) !important;
  text-shadow: none !important;
}

/* The BASE copy's «اندیشه» has to be dim too. `.nabgol-think-key` carries an
   !important colour of its own, which beat the ghost above and left that one
   word permanently lit while everything around it breathed — the reveal looked
   dead because the eye locked onto the word that never changed. This selector
   is deeper, so it wins. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand .nabgol-think-sub-text .nabgol-think-key {
  color: rgba(240, 218, 160, 0.16) !important;
  -webkit-text-fill-color: rgba(240, 218, 160, 0.16) !important;
  text-shadow: none !important;
}



/* THE PERCENTAGE IS NOT WHAT IT LOOKS LIKE. For mask-position, p% resolves to
   (elementWidth - imageWidth) * p. The image here is 300% of the element, so
   that factor is NEGATIVE (-200%) and the offset runs backwards: bigger p moves
   the band LEFT, and values outside 0..100% overshoot wildly. A first attempt
   animated 150% -> -170% and the band spent the whole cycle off the element,
   which is why the motto never lit up.
   The bright core sits at 48% of the image, i.e. 1.44 element-widths in, so:
     core at the right edge  -> offset -0.44 -> p = 22%
     core at the left edge   -> offset -1.44 -> p = 72%
   14% and 80% put a little dark margin either side, so the phrase is unlit for
   most of the cycle and is then written right-to-left, the way it is read. */
@keyframes nabgol-think-motto-reveal {
  0%, 6% { -webkit-mask-position: 14% 0; mask-position: 14% 0; }
  76%, 100% { -webkit-mask-position: 80% 0; mask-position: 80% 0; }
}



/* ══════ THE ROOTS THAT REACH THE WORD ══════
   The plant's roots grow DOWN and reach «اندیشه». Three thick mains leave from
   nearest the centre of symmetry, go deepest and twine around the word, each
   throwing one branch; the outer tips carry only short surface roots, because
   in a real root system the side roots do not go deep. Signals then travel back
   UP the mains and branches, from the word into the plant.

   Geometry, all measured off the film rather than guessed:
     · the box is pinned to the MARK's width. Sizing it from the viewport once
       made it 384px against a 214px plant, so the outer roots began in empty
       space beside it.
     · y=0 of the viewBox sits just above the shallowest measured root tip and
       y=56 is the mark's bottom edge, so every root starts exactly where a real
       one ends — and leaves along that root's MEASURED growth direction, which
       is what makes it read as the same root continuing rather than a new
       angled thing. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-nerve {
  position: relative;
  /* BEHIND the film. The mains start at the crown and run down through the real
     root mass; drawn on top they looked like a separate thing laid over the
     plant. The film blends with plus-lighter, so where it is dark the roots
     show through unchanged and where its own roots are bright they simply add —
     which is what makes the two read as one system. */
  z-index: 0;
  display: block;
  width: var(--think-mark);
  height: calc(var(--think-mark) * 0.525);
  margin: calc(var(--think-mark) * -0.38) auto calc(var(--think-mark) * -0.11);
  overflow: visible;
  pointer-events: none !important;
}

/* A root is thick where it leaves the parent and thins to a point. A STROKE
   cannot taper, so each root is a filled outline and the bead rides a separate
   unpainted centreline. No `opacity` here: an earlier shared rule carried 0.6
   and silently dimmed every root by 40%. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-rail,
body:is(.desktop-chat, .mobile-chat) .nabgol-think-rootlet {
  fill: url(#nabgolRootFill);
  stroke: none;
}

/* Surface roots: no signal rides these. They exist so the system reads as a
   root system instead of a comb. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-rootlet {
  opacity: 0.72;
}

/* THE SIGNAL, matched to the film by measurement (12 frames at 24fps):
   diameter 2.0-3.5 units, speed 67.6 units/s, about 9 lit at once. The old
   build set one flat duration for every root, so a short branch crawled at
   25 units/s while a long main raced at 96 — two visibly different signals.
   Each root now carries its own duration (length / 67.6) and its own dash
   period, both inline, so every bead everywhere moves at the film's rate.

   A near-zero dash with a round cap paints nothing but its own cap — a circle
   whose diameter is the stroke-width — so no streak can creep in at any speed.
   The REPEATING period is what gives several beads per root for nothing: no
   extra elements, which matters on an Android WebView. The glow is a second
   concentric stroke rather than filter: drop-shadow, measured as the most
   expensive thing in the seal.

   The 0.01 999 below is only a single-bead fallback; the real period arrives
   inline per root. It must divide 100 a whole number of times, because the
   animation slides the pattern by exactly 100 normalised units per cycle and
   any remainder shows up as a jump at the loop point. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-sparkhalo,
body:is(.desktop-chat, .mobile-chat) .nabgol-think-spark {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 0.01 999;
  stroke-dashoffset: 0;
  animation: nabgol-think-nerve-run 3s linear infinite backwards;
}

/* NOT named .nabgol-think-glow: that class is already force-hidden by the
   legacy-node neutraliser (display: none !important), which would have made
   every bead halo invisible the moment it shipped. The same trap cost a rename
   once before with .nabgol-think-halo. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-sparkhalo {
  stroke: rgba(198, 214, 150, 0.17);
}

/* The film's bead colour, measured in the rendered frame: rgb(194,195,135) mean
   with peak luminance 208. The old #fcf0c2 peaked at 236 — brighter and warmer
   than the film, which is a large part of why the two read as different signals.
   Note green sits just ABOVE red here; a warm yellow core is wrong. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-spark {
  stroke: #ced296;
}

/* -100 -> 0 is bottom-to-top on these paths: the signal is born in the word and
   travels up into the plant. Reversing these two numbers reverses the story, so
   do not tidy the negative sign away. There is deliberately NO opacity here:
   with a repeating dash period the beads flow continuously, and a global fade
   would blink every bead on the same root in unison. */
@keyframes nabgol-think-nerve-run {
  from { stroke-dashoffset: -100; }
  to { stroke-dashoffset: 0; }
}

body:is(.desktop-chat, .mobile-chat) .typing-indicator:not(.is-streaming) .nabgol-think-nerve {
  opacity: 0.3;
}
body:is(.desktop-chat, .mobile-chat) .typing-indicator:not(.is-streaming) .nabgol-think-sparkhalo,
body:is(.desktop-chat, .mobile-chat) .typing-indicator:not(.is-streaming) .nabgol-think-spark {
  animation-play-state: paused;
}

/* ══════ THE MOTTO IS WRITTEN BY THE LIGHT ══════
   Asked for repeatedly and never actually delivered until now: the phrase is
   invisible at rest, becomes readable only while light crosses it, then fades
   back into the dark.

   Two stacked copies of the same sentence:
     · .nabgol-think-sub-text is the BASE. It keeps the real text, the real box
       and the real layout — machines and a text search still find it — but it
       is painted at a whisper, so at rest there is only a ghost.
     · .nabgol-think-sub-gleam is a duplicate laid exactly on top at full
       brightness, revealed through a MOVING MASK. Only the band under the mask
       window is visible, so the letters light up as the band passes and go dark
       behind it.

   Why a duplicate rather than animating the base's own colour: an earlier
   attempt animated -webkit-text-fill-color and lost, because an !important
   base declaration on that property outranks a running animation. Two elements
   sidestep the whole cascade fight.

   The sweep runs right-to-left, following the direction of the script. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand .nabgol-think-sub-text {
  position: relative;
  z-index: 1;
  /* the ghost: present, never quite readable */
  color: rgba(233, 207, 146, 0.22) !important;
  -webkit-text-fill-color: rgba(233, 207, 146, 0.22) !important;
  text-shadow: none !important;
}

/* The BASE copy's «اندیشه» has to be dim too. `.nabgol-think-key` carries an
   !important colour of its own, which beat the ghost above and left that one
   word permanently lit while everything around it breathed — the reveal looked
   dead because the eye locked onto the word that never changed. This selector
   is deeper, so it wins. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand .nabgol-think-sub-text .nabgol-think-key {
  color: rgba(240, 218, 160, 0.26) !important;
  -webkit-text-fill-color: rgba(240, 218, 160, 0.26) !important;
  text-shadow: none !important;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub-gleam {
  /* This span used to be suppressed outright, and that is exactly why the
     reveal never appeared in any earlier build. NOTE: do not spell the
     suppressed-display declaration out in this comment — our own gate greps
     this rule body for it and would read the comment as the code. */
  position: absolute !important;
  inset: 0 !important;
  z-index: 2;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  pointer-events: none !important;
  /* inherit every metric from the paragraph so the two copies register exactly */
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap !important;
  text-align: inherit;
  color: #fdf3cf !important;
  -webkit-text-fill-color: #fdf3cf !important;
  text-shadow: 0 0 7px rgba(252, 240, 194, 0.5), 0 0 16px rgba(239, 210, 156, 0.28);

  /* The reveal window. Narrow bright core with long soft shoulders, so a letter
     brightens gradually instead of switching on. */
  -webkit-mask-image: linear-gradient(95deg,
    transparent 0%, transparent 18%,
    rgba(0, 0, 0, 0.4) 29%,
    #000 38%, #000 58%,
    rgba(0, 0, 0, 0.4) 67%,
    transparent 78%, transparent 100%);
  mask-image: linear-gradient(95deg,
    transparent 0%, transparent 18%,
    rgba(0, 0, 0, 0.4) 29%,
    #000 38%, #000 58%,
    rgba(0, 0, 0, 0.4) 67%,
    transparent 78%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: nabgol-think-motto-reveal 7.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* THE PERCENTAGE IS NOT WHAT IT LOOKS LIKE. For mask-position, p% resolves to
   (elementWidth - imageWidth) * p. The image here is 300% of the element, so
   that factor is NEGATIVE (-200%) and the offset runs backwards: bigger p moves
   the band LEFT, and values outside 0..100% overshoot wildly. A first attempt
   animated 150% -> -170% and the band spent the whole cycle off the element,
   which is why the motto never lit up.
   The bright core sits at 48% of the image, i.e. 1.44 element-widths in, so:
     core at the right edge  -> offset -0.44 -> p = 22%
     core at the left edge   -> offset -1.44 -> p = 72%
   14% and 80% put a little dark margin either side, so the phrase is unlit for
   most of the cycle and is then written right-to-left, the way it is read. */
@keyframes nabgol-think-motto-reveal {
  0%, 6% { -webkit-mask-position: 14% 0; mask-position: 14% 0; }
  76%, 100% { -webkit-mask-position: 80% 0; mask-position: 80% 0; }
}

/* «اندیشه» in the bright copy is the film's own measured bead core, so the word
   the signals leave is made of the same light as the signals. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub-gleam .nabgol-think-key {
  color: #fcf0c2 !important;
  -webkit-text-fill-color: #fcf0c2 !important;
}

/* Paused or finished, nothing is being thought: stop writing the motto. */
body:is(.desktop-chat, .mobile-chat) .typing-indicator:not(.is-streaming) .nabgol-think-sub-gleam {
  animation-play-state: paused;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  font-style: normal !important;
  opacity: 1 !important;
  line-height: 1.65 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip;
  letter-spacing: 0;
  color: #93a5b8 !important;
  background: transparent !important;
  text-shadow: none !important;
  animation: none !important;
}

/* ══════ ROLLBACK (2026-08-22) ══════
   The masked-artwork motto (alpha-mask wordmark + knotted strand network) that
   lived here shipped broken: the supplied artwork's «اندیشه» glyph is an
   unreadable blot at any size (verified by direct pixel inspection, not an
   opinion), the strand network read as disconnected decoration, and the
   "light travelling through the letters" effect had no visible signal in it.
   Rather than patch a design already rejected, this restores the last state
   proven acceptable before that artwork was introduced — v866, commit
   538d83d: quiet gold motto text, «اندیشه» bigger and coloured like its own
   signals, invisible-rail root pulses. The masked-artwork CSS/markup/asset
   stay in git history (commit d900157) if that direction is ever revisited
   properly instead of live. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand {
  position: relative;
  display: inline-block !important;
  box-sizing: border-box;
  width: max-content !important;
  max-width: calc(100% - 6px) !important;
  margin: 1px auto 0 !important;
  padding: 2px 10px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fcd34d !important;
  /* Smaller than the earlier draft — this is a signature line under the mark,
     not a headline. Life comes from motion (breathe), not from size. */
  font-size: clamp(0.86rem, 3.3vw, 1.02rem) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  /* Persian is a joined script: any letter-spacing breaks the connections. */
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-align: center;
  text-shadow: none !important;
  transform-origin: center center;
  animation:
    nabgol-think-motto-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both,
    nabgol-think-motto-breathe 3.2s ease-in-out 1.1s infinite !important;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 128%;
  height: 190%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(251, 191, 36, 0.2) 0%,
    rgba(245, 158, 11, 0.08) 45%,
    transparent 74%);
  filter: blur(14px);
  pointer-events: none;
  animation: nabgol-think-motto-glow 6.4s cubic-bezier(0.4, 0, 0.55, 1) 1.2s infinite;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand::after {
  content: none !important;
  display: none !important;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-key {
  display: inline !important;
  font-size: 1.42em !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  /* The bead core colour, measured off the film (#fcf0c2) — «اندیشه» is made
     of the same light as the signals so the kinship reads as cause, not
     coincidence. */
  color: #fcf0c2 !important;
  -webkit-text-fill-color: #fcf0c2 !important;
  background: none !important;
  vertical-align: -0.04em;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub-text {
  position: relative;
  z-index: 1;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  text-shadow: none !important;
  animation: none !important;
}





@keyframes nabgol-think-motto-in {
  from { transform: translateY(5px); }
  to { transform: translateY(0); }
}

@keyframes nabgol-think-motto-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@keyframes nabgol-think-motto-glow {
  0%, 100% { opacity: 0.16; transform: translate(-50%, -50%) scale(0.88, 1); }
  38% { opacity: 0.46; transform: translate(-50%, -50%) scale(1.04, 1); }
}



body:is(.desktop-chat, .mobile-chat) .nabgol-gen-ico {
  display: inline-flex !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  animation: none !important;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-gen-label {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1.2 !important;
  color: inherit !important;
  background: transparent !important;
  border-radius: 0 !important;
  animation: none !important;
}

/* Honesty: the pulse belongs to work in flight only. Paused or finished, the
   dots and the thought rings stop — a still frame never claims to be thinking. */
body:is(.desktop-chat, .mobile-chat) .typing-indicator .nabgol-think-dots {
  display: none !important;
}
body:is(.desktop-chat, .mobile-chat) .typing-indicator.is-streaming .nabgol-think-dots {
  display: inline-flex !important;
}
body:is(.desktop-chat, .mobile-chat) .typing-indicator.is-resume .nabgol-think-dots,
body:is(.desktop-chat, .mobile-chat) .typing-indicator.is-resume .nabgol-think-ring {
  display: none !important;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-think-actions {
  display: none !important; /* stop/resume on composer only — think never steals taps */
}

body:is(.desktop-chat, .mobile-chat) .nabgol-gen-btn {
  appearance: none;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  min-width: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-gen-btn:hover {
  transform: translateY(-1px);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-gen-btn:active {
  transform: translateY(0);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-gen-btn.is-stop {
  color: #fff5f5;
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.28), rgba(127, 29, 29, 0.38));
  border-color: rgba(252, 165, 165, 0.55);
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.12),
    0 8px 24px rgba(185, 28, 28, 0.28);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-gen-btn.is-stop:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.42), rgba(185, 28, 28, 0.5));
  border-color: rgba(254, 202, 202, 0.7);
  box-shadow:
    0 0 0 4px rgba(239, 68, 68, 0.14),
    0 10px 28px rgba(185, 28, 28, 0.35);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-gen-btn.is-resume {
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(52, 211, 153, 0.42);
  backdrop-filter: blur(10px);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-gen-btn.is-resume:hover {
  background: rgba(16, 185, 129, 0.26);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

body:is(.desktop-chat, .mobile-chat) .typing-indicator.is-resume .nabgol-think-video {
  opacity: 0.55;
  animation: none;
  filter: none !important;
}

body:is(.desktop-chat, .mobile-chat) .typing-indicator.is-streaming .nabgol-gen-btn.is-resume,
body:is(.desktop-chat, .mobile-chat) .typing-indicator:not(.is-resume) .nabgol-gen-btn.is-resume {
  display: none !important;
}

body:is(.desktop-chat, .mobile-chat) .typing-indicator.is-resume .nabgol-gen-btn.is-stop {
  display: none !important;
}

body:is(.desktop-chat, .mobile-chat) .typing-indicator.is-resume .nabgol-gen-btn.is-resume {
  display: inline-flex !important;
}

body:is(.desktop-chat, .mobile-chat) .message.is-gen-stopped .message-bubble {
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(248, 113, 113, 0.22);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-gen-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(127, 29, 29, 0.22);
  border: 1px solid rgba(248, 113, 113, 0.28);
  color: #fecaca;
  font-size: 0.8rem;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-gen-chip-resume {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #064e3b;
  background: linear-gradient(135deg, #6ee7b7, #34d399);
}

body:is(.desktop-chat, .mobile-chat) .send-btn.is-gen-stop {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35) !important;
}
body:is(.desktop-chat, .mobile-chat) .send-btn.is-gen-stop .nabgol-stop-ico,
body:is(.desktop-chat, .mobile-chat) .send-btn.is-gen-stop .ico {
  width: 18px !important;
  height: 18px !important;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-choice.is-spent-pack,
body:is(.desktop-chat, .mobile-chat) .nabgol-component.is-spent-pack {
  opacity: 0.55;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-spent,
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button:disabled {
  cursor: default;
  pointer-events: none;
}

body:is(.desktop-chat, .mobile-chat) .send-btn.is-gen-resume {
  background: linear-gradient(135deg, #34d399, #059669) !important;
}

@media (max-width: 520px) {
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-stage {
    padding: 4px 8px 8px;
    gap: 2px;
  }
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-stage { --think-mark: min(50vw, 170px); }
  body:is(.desktop-chat, .mobile-chat) .typing-indicator.show {
    min-height: 148px !important;
  }
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-title {
    font-size: 0.82rem !important;
    letter-spacing: 0.04em;
  }


}

/* Tutor free-intro notice — quiet, no dashed “sticker” look */
#emptyState .nabgol-free-intro-note,
.chat-messages .empty .nabgol-free-intro-note {
  margin: 12px auto 2px;
  max-width: 22rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: center;
  opacity: 0.92;
}

body.nabgol-chat-has-messages #starterChips,
body.nabgol-chat-has-messages #emptyState #starterChips,
#starterChips[hidden],
#emptyState #starterChips[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Forever V2: when chips are the empty-state entry, they must be tappable. */
#emptyState:not([hidden]) #starterChips:not([hidden]),
#emptyState:not([hidden]) #starterChips:not([hidden]) button,
#emptyState:not([hidden]) #starterChips:not([hidden]) .suggestion-chip,
.chat-messages > .empty:not([hidden]) #starterChips:not([hidden]),
.chat-messages > .empty:not([hidden]) #starterChips:not([hidden]) button {
  pointer-events: auto !important;
  visibility: visible !important;
}

/* —— Flagship empty-state starter chips ——
   Tutor studio: calm single column, dark-native rows, one emerald hero.
   Non-tutor flagship keeps a compact quiet stack. */
body:is(.desktop-chat, .mobile-chat) #starterChips.suggestion-chips--flagship,
body:is(.desktop-chat, .mobile-chat) .suggestion-chips.suggestion-chips--flagship {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: min(100%, 22.5rem) !important;
  max-width: 100% !important;
  margin: 1.25rem auto 0 !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
}

/* Colour comes from --nab-chip-* (chat-action-buttons.css), which flips on
   html[data-theme]. There used to be a second `body:not(.dark-mode)` block here
   for the day palette; nothing in live/ ever sets .dark-mode, so the negation
   always matched and the day palette also painted at night. */
body:is(.desktop-chat, .mobile-chat) #starterChips .starter-chips__paths {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  padding: 10px;
  border-radius: 1.15rem;
  border: 1px solid var(--nab-chip-panel-edge);
  background: var(--nab-chip-panel-face);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body:is(.desktop-chat, .mobile-chat) #starterChips .starter-chips__eyebrow {
  margin: 0 2px 10px;
  padding: 0 2px;
  color: var(--nab-chip-eyebrow);
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  text-align: center;
  line-height: 1.4;
  opacity: 1;
}

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--flagship:not(.suggestion-chip--live-power),
body:is(.desktop-chat, .mobile-chat) .suggestion-chips--flagship .suggestion-chip:not(.suggestion-chip--live-power) {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.7rem !important;
  width: 100% !important;
  min-height: var(--nab-chip-min) !important;
  padding: 0.75rem 0.9rem !important;
  margin: 0 !important;
  border-radius: var(--nab-chip-radius) !important;
  border: 1px solid var(--nab-chip-edge) !important;
  background: linear-gradient(
    180deg,
    var(--nab-chip-face-1) 0%,
    var(--nab-chip-face-2) 45%,
    var(--nab-chip-face-3) 100%) !important;
  color: var(--nab-chip-ink) !important;
  font-size: 0.92rem !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  text-align: right !important;
  white-space: normal !important;
  box-shadow:
    inset 0 1px 0 var(--nab-chip-ring),
    var(--nab-chip-lift) !important;
  transition:
    transform 0.22s var(--nab-btn-spring),
    border-color 0.2s var(--nab-btn-ease),
    background 0.2s var(--nab-btn-ease),
    box-shadow 0.24s var(--nab-btn-ease),
    color 0.18s var(--nab-btn-ease) !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow: hidden;
  direction: rtl;
}

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip__lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.55rem;
  background: var(--nab-chip-lead-face);
  color: var(--nab-chip-lead-ink);
}

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip__ico {
  display: block;
  color: inherit;
  stroke: currentColor;
}

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--flagship:not(.suggestion-chip--live-power):hover,
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--flagship:not(.suggestion-chip--live-power):focus-visible,
body:is(.desktop-chat, .mobile-chat) .suggestion-chips--flagship .suggestion-chip:not(.suggestion-chip--live-power):hover,
body:is(.desktop-chat, .mobile-chat) .suggestion-chips--flagship .suggestion-chip:not(.suggestion-chip--live-power):focus-visible {
  border-color: var(--nab-chip-edge-hover) !important;
  color: var(--nab-chip-ink-hover) !important;
  box-shadow:
    inset 0 1px 0 var(--nab-chip-ring),
    var(--nab-chip-lift-hover) !important;
  transform: translateY(-2px);
}

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--flagship:not(.suggestion-chip--live-power):hover .suggestion-chip__lead,
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--flagship:not(.suggestion-chip--live-power):focus-visible .suggestion-chip__lead {
  background: var(--nab-chip-lead-face);
  color: var(--nab-chip-lead-ink);
}

/* press — the same squash-and-spring as an in-chat option */
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--flagship:not(.suggestion-chip--live-power):active {
  transform: translateY(1px) scale(0.975);
  transition-duration: 0.06s !important;
}

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip__label,
body:is(.desktop-chat, .mobile-chat) #starterChips .live-power-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  color: inherit;
  text-align: right;
}

/* Live + attach: label must NOT flex-grow, or center group breaks */
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--live-power .live-power-label,
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--live-power .suggestion-chip__label,
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--attach .suggestion-chip__label {
  flex: 0 1 auto !important;
  width: auto !important;
  text-align: center !important;
}

/* Live stays on original power look — same outer size as attach; center dot+label */
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--live-power.suggestion-chip--hero {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0.55rem 1.1rem !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.45rem !important;
}

/* Teach — the primary path, so it wears the accent (--nab-btn-win-*): the same
   fill in both themes, exactly like a chosen option in the chat.
   The old recipe was #ecfdf5 on a #10b981 top stop — measured 2.47:1, i.e. under
   AA. Dark ink on the emerald is the fix the in-chat buttons already use. */
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip[data-kind="teach"] {
  min-height: 3.15rem !important;
  padding: 0.8rem 0.9rem !important;
  border: 1px solid var(--nab-chip-hero-edge) !important;
  background: linear-gradient(180deg, var(--nab-chip-hero-1) 0%, var(--nab-chip-hero-2) 100%) !important;
  color: var(--nab-chip-hero-ink) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 22px rgba(5, 150, 105, 0.26) !important;
}

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip[data-kind="teach"] .suggestion-chip__lead {
  background: var(--nab-chip-hero-lead-face) !important;
  color: var(--nab-chip-hero-ink) !important;
}

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip[data-kind="teach"]:hover,
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip[data-kind="teach"]:focus-visible {
  border-color: var(--nab-chip-hero-edge-hover) !important;
  color: var(--nab-chip-hero-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 0 0 3px var(--nab-chip-hero-ring),
    0 14px 32px rgba(5, 150, 105, 0.36) !important;
}

/* Attach pill size + centered icon+text */
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--flagship.suggestion-chip--attach {
  min-height: 44px !important;
  height: auto !important;
  padding: 0.55rem 1.1rem !important;
  border-radius: 999px !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  font-weight: 650 !important;
}

/* Its glyph is inline, not a badge — so it takes the chip ink and is AA by
   construction. Same rule as the studio embed, so both cascades agree. */
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--attach .suggestion-chip__lead {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: transparent !important;
  color: inherit !important;
  flex: 0 0 auto !important;
}

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--mode {
  min-height: 2.85rem !important;
  padding: 0.7rem 0.8rem !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}

/* Slate volume — the neutral family (modes + the photo pill). One rule, both
   themes: --nab-chip-face-* carries the palette.

   Deleted with this change: five `body:not(.dark-mode)` day blocks and two
   `body.dark-mode / html.dark` night blocks that used to fight over these same
   chips. Neither class is ever set in live/ (the theme is html[data-theme]), so
   the day blocks won unconditionally — a white card at night on desktop — while
   the night blocks only ever reached the phone through their `body.mobile-chat`
   arm. That is exactly the defect this rewrite removes.

   The old night recipe also failed AA: #f8fafc on the #94a3b8 top stop measured
   2.46:1. Ordering the gradient light→dark per theme keeps the ink safe in both
   (worst measured 7.06:1 day, 9.9:1 night). */
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--flagship.suggestion-chip--attach,
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--flagship.suggestion-chip--mode:not([data-kind="teach"]) {
  border: 1px solid var(--nab-chip-edge) !important;
  background: linear-gradient(
    180deg,
    var(--nab-chip-face-1) 0%,
    var(--nab-chip-face-2) 45%,
    var(--nab-chip-face-3) 100%) !important;
  color: var(--nab-chip-ink) !important;
  box-shadow:
    inset 0 1px 0 var(--nab-chip-ring),
    var(--nab-chip-lift) !important;
}

/* Forever W2: the label never renders near-black on a dark chip — it inherits
   the chip ink, which is now token-driven and therefore always on the right
   side of the surface. (Was a hard-coded #f8fafc keyed on the dead .dark-mode.) */
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip__label {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (min-width: 900px) {
  body.desktop-chat #starterChips.suggestion-chips--flagship {
    width: min(100%, 24rem) !important;
    gap: 12px !important;
  }
  body.desktop-chat #starterChips .suggestion-chip--flagship:not(.suggestion-chip--live-power) {
    min-height: 3.1rem !important;
    font-size: 0.95rem !important;
  }
  body.desktop-chat #starterChips .suggestion-chip--live-power.suggestion-chip--hero {
    /* original live-power sizing wins */
  }
  body.desktop-chat #starterChips .suggestion-chip[data-kind="teach"] {
    min-height: 3.25rem !important;
    font-size: 0.98rem !important;
  }
}

@media (max-width: 420px) {
  body.mobile-chat #starterChips.suggestion-chips--flagship {
    width: min(100%, 20.5rem) !important;
  }
  body.mobile-chat #starterChips .suggestion-chip--flagship:not(.suggestion-chip--live-power) {
    min-height: 2.9rem !important;
    font-size: 0.88rem !important;
    padding: 0.7rem 0.8rem !important;
  }
  body.mobile-chat #starterChips .suggestion-chip--mode {
    font-size: 0.86rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--flagship {
    transition: none !important;
  }
  body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--flagship:hover {
    transform: none !important;
  }
  /* Forever E9 · think under reduced-motion: the film, the aura drift, the rings,
     the dot pulse and the gleam all stop. Both copy lines stay fully readable —
     accessibility never costs the user the status or the motto. */
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-video {
    display: none !important;
    animation: none !important;
  }
  /* Drive the SIZE through the var, not through the mark's own width. The nerve
     derives its box from --think-mark too, so hardcoding the mark here would
     leave a 214px-wide conduit under a 108px plant. */
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-stage { --think-mark: 108px; }
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-mark {
    animation: none !important;
  }
  /* The rails stay: they are part of the picture, not motion. Only the
     travelling light stops. */
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-sparkhalo,
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-spark,
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub-gleam {
    display: none !important;
  }
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-aura {
    animation: none !important;
    opacity: 0.4 !important;
  }
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-ring,
body:is(.desktop-chat, .mobile-chat) .nabgol-think-halo,
body:is(.desktop-chat, .mobile-chat) .nabgol-think-wave {
    display: none !important;
  }


  body:is(.desktop-chat, .mobile-chat) .nabgol-think-dots i {
    animation: none !important;
    opacity: 0.7 !important;
    transform: none !important;
  }
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-title,
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand,
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand::before,
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub-text {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
  /* The motto is plain text again and is always readable, so this block only
     has to cancel the breathing and pin the colour. It used to compensate for
     a masked-artwork reveal that kept the words near-invisible until a signal
     crossed them; that mechanism is gone. */
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub-text,
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-sub.is-brand .nabgol-think-sub-text {
    background-image: none !important;
    animation: none !important;
    -webkit-text-fill-color: #fcd34d !important;
    color: #fcd34d !important;
  }
  body:is(.desktop-chat, .mobile-chat) .nabgol-think-static {
    display: flex !important;
  }
}

/* Forever E9: static think fallback (hidden unless reduced-motion).
   It paints the real brand mark — the film's own first frame — not a generic
   green ball. Reduced motion must never downgrade the brand, only the motion.
   The «…» glyph inside stays in the DOM for ancient engines but is not drawn. */
body:is(.desktop-chat, .mobile-chat) .nabgol-think-static {
  display: none;
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  align-items: center;
  justify-content: center;
  background: url("/assets/media/nabgol-thinking-poster.webp?v=1") center center / contain no-repeat;
  filter: drop-shadow(0 10px 30px rgba(52, 211, 153, 0.3));
  color: transparent;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
}

/* Live tutor power chip — only data-action=live_tutor_pdf */
body:is(.desktop-chat, .mobile-chat) .suggestion-chip--live-power {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.55rem 1.15rem 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.55);
  color: #ecfdf5;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  background:
    radial-gradient(120% 180% at 10% 20%, rgba(110, 231, 183, 0.35), transparent 55%),
    linear-gradient(135deg, #065f46 0%, #047857 42%, #0f766e 100%);
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.25),
    0 8px 28px rgba(16, 185, 129, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
  isolation: isolate;
  animation: nabgol-live-power-breathe 2.4s ease-in-out infinite;
  transform: translateZ(0);
}

body:is(.desktop-chat, .mobile-chat) .suggestion-chip--live-power:hover,
body:is(.desktop-chat, .mobile-chat) .suggestion-chip--live-power:focus-visible {
  border-color: rgba(167, 243, 208, 0.85);
  color: #fff;
  background:
    radial-gradient(120% 180% at 15% 15%, rgba(167, 243, 208, 0.45), transparent 50%),
    linear-gradient(135deg, #047857 0%, #059669 45%, #14b8a6 100%);
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.45),
    0 10px 34px rgba(16, 185, 129, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body:is(.desktop-chat, .mobile-chat) .suggestion-chip--live-power .live-power-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.75);
  animation: nabgol-live-power-pulse 1.6s ease-out infinite;
  flex-shrink: 0;
}

body:is(.desktop-chat, .mobile-chat) .suggestion-chip--live-power .live-power-ring {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    rgba(167, 243, 208, 0.55) 70deg,
    transparent 140deg,
    rgba(45, 212, 191, 0.4) 220deg,
    transparent 300deg
  );
  opacity: 0.55;
  animation: nabgol-live-power-spin 4.5s linear infinite;
  z-index: -1;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 2px;
}

body:is(.desktop-chat, .mobile-chat) .suggestion-chip--live-power .live-power-label {
  position: relative;
  z-index: 1;
}

@keyframes nabgol-live-power-pulse {
  0% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(110, 231, 183, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0); }
}

@keyframes nabgol-live-power-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@keyframes nabgol-live-power-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.desktop-chat, .mobile-chat) .suggestion-chip--live-power,
  body:is(.desktop-chat, .mobile-chat) .suggestion-chip--live-power .live-power-dot,
  body:is(.desktop-chat, .mobile-chat) .suggestion-chip--live-power .live-power-ring {
    /* pulse kept */
  }
}

/* Photo-homework chip outside #starterChips — practical, not competing with Live
   power. One token-driven rule; the old pair forked on the dead .dark-mode/.dark
   classes, so the day branch painted a pale blue card at night too. */
body:is(.desktop-chat, .mobile-chat) .suggestion-chip--attach {
  border-color: var(--nab-chip-edge);
  background: linear-gradient(180deg, var(--nab-chip-face-1) 0%, var(--nab-chip-face-3) 100%);
  color: var(--nab-chip-ink);
  font-weight: 650;
}

/* Mid-chat Live tutor CTA — same power effect as empty-state chip */
body:is(.desktop-chat, .mobile-chat) .nabgol-live-tutor-cta.suggestion-chip--live-power,
body:is(.desktop-chat, .mobile-chat) .nabgol-action-button-cta.nabgol-live-tutor-cta.suggestion-chip--live-power,
body:is(.desktop-chat, .mobile-chat) .nabgol-confirmation .nabgol-live-tutor-cta.suggestion-chip--live-power {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.55rem 1.15rem 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.55);
  color: #ecfdf5 !important;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  background:
    radial-gradient(120% 180% at 10% 20%, rgba(110, 231, 183, 0.35), transparent 55%),
    linear-gradient(135deg, #065f46 0%, #047857 42%, #0f766e 100%);
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.25),
    0 8px 28px rgba(16, 185, 129, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
  isolation: isolate;
  animation: nabgol-live-power-breathe 2.4s ease-in-out infinite;
  transform: translateZ(0);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-live-tutor-cta,
body:is(.desktop-chat, .mobile-chat) .nabgol-action-button-cta.nabgol-live-tutor-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.55rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.55);
  background: linear-gradient(145deg, #047857, #0f766e);
  color: #ecfdf5 !important;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(6, 78, 59, 0.28);
}

body:is(.desktop-chat, .mobile-chat) .live-call-btn--tutor {
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35);
}


/* —— Stream-in-progress: under partial assistant reply (replaces confusing think overlay) —— */
@keyframes nabgol-stream-dot {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
@keyframes nabgol-stream-sheen {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
body:is(.desktop-chat, .mobile-chat) .nabgol-stream-progress {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0.45rem 0.15rem 0.15rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.28);
  background:
    linear-gradient(105deg, rgba(6, 78, 59, 0.22), rgba(15, 118, 110, 0.14) 45%, rgba(6, 78, 59, 0.22));
  background-size: 200% 100%;
  animation: nabgol-stream-sheen 2.8s ease-in-out infinite;
  color: #d1fae5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  direction: rtl;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-stream-progress__pulse {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 0.35rem;
  flex: 0 0 auto;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-stream-progress__pulse i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  display: block;
  animation: nabgol-stream-dot 1.1s ease-in-out infinite;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-stream-progress__pulse i:nth-child(2) { animation-delay: 0.15s; }
body:is(.desktop-chat, .mobile-chat) .nabgol-stream-progress__pulse i:nth-child(3) { animation-delay: 0.3s; }
body:is(.desktop-chat, .mobile-chat) .nabgol-stream-progress__copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-stream-progress__copy strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ecfdf5;
  letter-spacing: -0.01em;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-stream-progress__copy span {
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(209, 250, 229, 0.82);
}
body:is(.desktop-chat, .mobile-chat) .message.is-streaming-reply .message-bubble {
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(52, 211, 153, 0.18);
}


/* tutor-honesty-hero-v786 */
/* Forever U3: chips inside empty welcome must stay clickable (never inherit a dead overlay). */
#emptyState:not([hidden]) #starterChips:not([hidden]),
#emptyState:not([hidden]) #starterChips:not([hidden]) button,
#emptyState:not([hidden]) #starterChips:not([hidden]) .suggestion-chip,
.chat-messages > .empty:not([hidden]) #starterChips:not([hidden]),
.chat-messages > .empty:not([hidden]) #starterChips:not([hidden]) button {
  pointer-events: auto !important;
}

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--mission-hero,
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--mission-more {
  min-height: 44px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem !important;
}
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip__hint {
  display: block;
  font-size: 0.72rem;
  opacity: 0.92;
  font-weight: 500;
}
/* «کمک بیشتر» — same panel tokens as the paths group, so it is not a dark slab
   sitting in a day-theme empty state (it was a hard-coded rgba(15,23,42,.28)). */
body:is(.desktop-chat, .mobile-chat) #starterChips .starter-chips__more {
  width: 100%;
  margin-top: 0.35rem;
  border-radius: 12px;
  border: 1px solid var(--nab-chip-panel-edge);
  padding: 0.35rem 0.55rem 0.55rem;
  background: var(--nab-chip-panel-face);
}
body:is(.desktop-chat, .mobile-chat) #starterChips .starter-chips__more > summary {
  cursor: pointer;
  list-style: none;
  color: var(--nab-chip-ink);
  font-size: 0.86rem;
  opacity: 0.9;
  padding: 0.35rem 0.15rem;
}
body:is(.desktop-chat, .mobile-chat) #starterChips .starter-chips__more-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0.35rem;
}
#input.nabgol-composer-check-locked {
  opacity: 0.72;
  cursor: not-allowed;
}

/* Wave 3: tutor default composer = mic + more; advanced tools behind panel */
body.tutor-composer-simple .composer-more-panel[hidden] {
  display: none !important;
}
body.tutor-composer-simple .composer-more-panel:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
body.tutor-composer-simple .composer-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.tutor-composer-simple .composer-more-label {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.85;
}
@media (max-width: 520px) {
  body.tutor-composer-simple .composer-more-label { display: none; }
}

/* —— S1 Entry purity: hide idle TTS dock, not key composer tools ——
   File / camera / send stay visible. Mission never occupies this bar. */
body.tutor-composer-simple:not(.nabgol-chat-has-messages):not(.nabgol-entry-settled) .composer-more-btn,
body.tutor-composer-simple:not(.nabgol-chat-has-messages):not(.nabgol-entry-settled) .composer-more-panel,
body.tutor-composer-simple:not(.nabgol-chat-has-messages):not(.nabgol-entry-settled) .mobile-primary-controls,
body.tutor-composer-simple:not(.nabgol-chat-has-messages):not(.nabgol-entry-settled) #ttsPlayer:not(.show),
body.tutor-composer-simple:not(.nabgol-chat-has-messages):not(.nabgol-entry-settled) .composer-ai-disclaimer {
  display: none !important;
}

/* —— S2 Tutor identity: subject hue ring + monogram —— */
body.tutor-composer-simple {
  --tutor-identity-hue: 168;
  --tutor-identity: hsl(var(--tutor-identity-hue) 55% 42%);
  --tutor-identity-soft: hsl(var(--tutor-identity-hue) 40% 18% / 0.55);
}
body.tutor-composer-simple .chat-header .avatar:not(.has-img),
body.tutor-composer-simple .brand-avatar:not(.has-img) {
  background: linear-gradient(145deg, var(--tutor-identity), hsl(var(--tutor-identity-hue) 45% 28%));
  color: #f4fffa;
  font-weight: 800;
  box-shadow: 0 0 0 2px hsl(var(--tutor-identity-hue) 60% 55% / 0.55);
}
body.tutor-composer-simple .chat-header .avatar.has-img,
body.tutor-composer-simple .brand-avatar.has-img {
  box-shadow: 0 0 0 2px hsl(var(--tutor-identity-hue) 55% 50% / 0.5);
}
body.tutor-composer-simple #starterChips .starter-chips__paths {
  border-color: hsl(var(--tutor-identity-hue) 35% 45% / 0.35);
}
body.tutor-composer-simple #starterChips .suggestion-chip--flagship:not(.suggestion-chip--live-power):focus-visible {
  outline: 2px solid hsl(var(--tutor-identity-hue) 70% 48%);
  outline-offset: 2px;
}

/* Mermaid flowchart pilot — ISO shapes must stay visible (htmlLabels + classDef) */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  background: transparent !important;
}
/* Dense diagrams keep 16px type and pan sideways instead of shrinking below the
   floor (see enforceOnScreenFloor). Only these two rules may win over the
   width/max-width above, and only for a canvas the renderer explicitly marked. */
/* The card's own 0.85em padding + 1px border eats 30px of the 316px text column, so
   an SVG is painted at 285.5px and its 16px type lands at 14.5px on screen — under
   the floor this design system is built on. Invisible until the audit was changed to
   measure the real rendered width instead of assuming the token.
   Only the Mermaid flowchart canvas reclaims that width: its layout already centres
   the drawing inside generous whitespace, so spanning the column costs nothing
   visually and makes viewBox 316 map 1:1. Card kinds (bars/venn/timeline…) are
   deliberately NOT included — they paint tracks and circles right out to their
   viewBox edge, and a screenshot of `bars` with this rule showed the bars welded to
   the card border. Their 14.5px shortfall needs the renderer-side fix logged in
   docs/CHAT_DIAGRAMS_PLAN.md, not this. */
/* `tree` was removed from this list on 2026-08-20. A tree is the one kind here whose
   drawing really does reach its own viewBox edge — the legacy renderer runs the spine
   and its connector stubs out to the frame, and a Mermaid mindmap pushes its outermost
   pills right to the boundary. Reclaiming the card's padding therefore did not buy a
   1:1 map, it painted the diagram straight over the card's rounded border and off the
   bubble (measured: canvas 357px inside a 330px shell, so 13px hanging past the border
   on each side — the "tree bleeds out of its card" half of the user's report). */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-diagram-flowchart .nabgol-diagram-canvas,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) figure.nabgol-diagram-sequence .nabgol-diagram-canvas {
  margin-inline: calc(-0.85em - 1px);
  width: calc(100% + 1.7em + 2px);
  max-width: none;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-canvas.nabgol-diagram-scroll-x {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Without an edge cue a diagram wider than the bubble just looks chopped off.
     Faded on BOTH sides: the scroll position is centred (see enforceOnScreenFloor),
     so content can be hidden on either edge depending on the layout, not only the
     one this was first written for. Reads as "there is more, pan to see it" on
     whichever side actually has it. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  scrollbar-width: thin;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-canvas.nabgol-diagram-scroll-x::-webkit-scrollbar {
  height: 6px;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-canvas.nabgol-diagram-scroll-x::-webkit-scrollbar-thumb {
  background: rgba(52, 211, 153, 0.45);
  border-radius: 3px;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-diagram-canvas.nabgol-diagram-scroll-x .nabgol-mermaid-svg[data-diag-scroll] {
  width: auto !important;
  max-width: none !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .node rect,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .node polygon,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .node circle,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .node ellipse,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .node path {
  stroke-width: 2.2px !important;
}
/* Text was clipped («دریافت عد») because these !important font rules changed the label
   size AFTER Mermaid had already measured the box with its own font — so the text grew
   past the fixed foreignObject width. Do NOT set font-size/weight/family here; Mermaid's
   init fontSize is the single source of truth so measured box == painted text. */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .nodeLabel,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .edgeLabel,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg foreignObject,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg foreignObject div,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg foreignObject span {
  color: #f8fafc !important;
  text-align: center !important;
  direction: rtl !important;
  unicode-bidi: isolate;
  overflow: visible !important;
}
/* The rule above only ever reached foreignObject labels. Since htmlLabels:false the
   labels are real SVG <text>, whose base direction stayed LTR — so a Persian
   sentence carrying a Latin identifier reordered into nonsense on screen
   (27 Mordad: «آیا i > جذر n است؟» painted as «آیا i ›جذر nاست؟»).
   `plaintext` picks each line's direction from its own first strong character, so
   «آیا باقیمانده…» goes RTL while a pure formula line like «i = ۲» stays LTR —
   one rule, both cases, no per-label tagging. Direction never changes measured
   width, so this cannot re-break the clipping the comment above guards. */
/* Scoped to .node/.edgeLabel only covered the flowchart engine. Sequence
   (.actor / .messageText / .loopText / .noteText) and mindmap (.mindmap-node)
   render real SVG <text> too and never got this rule — verified by measuring
   direction:ltr on both live in the browser (18 Aug). Every current fixture
   happens to be pure Persian so it never showed, but any Latin identifier in a
   sequence message or mindmap label would scramble exactly like the flowchart
   bug did. Target every <text>/<tspan> under the mermaid root instead of
   enumerating per-kind classes, so a future diagram kind cannot reopen this
   gap by not being named here. */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg text,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg tspan {
  direction: rtl;
  unicode-bidi: plaintext;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .edgeLabel foreignObject div,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .edgeLabel span {
  background: #064e3b !important;
  border: 1px solid #34d399 !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
  font-size: 16px !important;
  color: #ecfdf5 !important;
  display: inline-block !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .edgeLabel text {
  fill: #ecfdf5 !important;
  font-weight: 700 !important;
}
/* Mermaid mindmap colours each branch by an internal "section" scale we never
   set, so it fell back to defaults meant for a light theme: section-0 painted
   near-black (rgb(11,0,0)) with black text on top -- fully invisible, verified
   live in the browser (medium tree fixture, «فصل ۱ / درس ۱ / درس ۲» all blank
   black boxes while the root and section-1 branch happened to be visible by
   luck). Same fix pattern as the flowchart classDefs: a deliberate palette,
   not an unexamined default, plus text forced light regardless of section. */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .mindmap-node text,
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .mindmap-node tspan {
  fill: #f8fafc !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .mindmap-node .node-bkg {
  stroke: rgba(148, 163, 184, 0.55) !important;
  stroke-width: 1.6px !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .mindmap-node.section-root .node-bkg {
  fill: #0c4a6e !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .mindmap-node.section-0 .node-bkg {
  fill: #065f46 !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .mindmap-node.section-1 .node-bkg {
  fill: #7c2d12 !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .mindmap-node.section-2 .node-bkg {
  fill: #4c1d95 !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .mindmap-node.section-3 .node-bkg {
  fill: #1e3a8a !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .mindmap-node.section-4 .node-bkg {
  fill: #854d0e !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .mindmap-node.section-5 .node-bkg {
  fill: #155e75 !important;
}

:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg rect.nabgol-mmd-edge-pill {
  fill: #064e3b !important;
  stroke: #34d399 !important;
  stroke-width: 1.25px !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .edge-thickness-normal {
  stroke-width: 1.75px !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .marker {
  fill: #94a3b8 !important;
  stroke: #94a3b8 !important;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-mermaid-svg .edgePath .path {
  stroke: #94a3b8 !important;
  stroke-width: 1.75px !important;
}

/* G5 — deck (flip slides, no PPTX) */
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-deck-shell {
  padding-bottom: 0.35em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-deck-track {
  position: relative;
  min-height: 120px;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-deck-slide {
  display: none;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-deck-slide.is-active {
  display: block;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-deck-slide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.45em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-deck-slide-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #ecfdf5;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-deck-counter {
  font-size: 14px;
  color: #94a3b8;
  white-space: nowrap;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-deck-prose p {
  margin: 0 0 0.35em;
  font-size: 16px;
  line-height: 1.45;
  color: #e2e8f0;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-deck-visual {
  margin-top: 0.45em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-deck-nav {
  display: flex;
  justify-content: center;
  gap: 0.65em;
  margin-top: 0.55em;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-deck-nav button {
  min-width: 44px;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  background: rgba(6, 78, 59, 0.55);
  color: #ecfdf5;
  font-size: 18px;
  cursor: pointer;
}
:where(body:is(.desktop-chat, .mobile-chat) .message.assistant .text, .nabgol-media-fullscreen__zoomwrap) .nabgol-deck-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Chat chrome theme contrast forever — html[data-theme] is the only switch */
html[data-theme="light"] body.desktop-chat .chat-main {
  background: var(--bg) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .message-bubble {
  background: var(--assistant-msg, #fff);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .footer-meta,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .msg-date,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .msg-time {
  color: #334155 !important;
  opacity: 1 !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message .footer {
  border-top-color: rgba(15, 23, 42, 0.12) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .action-chip,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .message-actions button {
  background: transparent !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  color: #1e293b !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .action-chip .ico {
  color: #1e293b !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message .action-chip:hover {
  background: rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message .message-actions > .action-chip.regenerate-btn {
  background: transparent !important;
  color: #1e293b !important;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message .message-actions > .action-chip.regenerate-btn .ico {
  color: #1e293b !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message .message-actions > .action-chip.regenerate-btn:hover {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(5, 150, 105, 0.45) !important;
  color: #059669 !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message .message-actions > .action-chip.regenerate-btn:hover .ico {
  color: #059669 !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message-body > .version-controls {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
/* REMOVED 2026-08-21 — the day palette for #starterChips used to be re-declared
   here (a flat #ffffff chip, #f8fafc panel, hard #0f172a label). Correctly keyed,
   unlike the .dark-mode fork further up, but a second source of truth: because it
   also matched .suggestion-chip--mode it flattened the teach chip's accent to
   plain white, so in day theme the primary path was indistinguishable from the
   neutral ones. Day now comes from --nab-chip-* in chat-action-buttons.css.
   Measured after removal: teach 6.80:1, neutral 7.06:1, panel/summary AA-clean. */
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-header,
html[data-theme="light"] body.mobile-chat .chat-header {
  background: var(--bg-secondary) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-header .name,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .icon-btn {
  color: var(--text) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-input .input-wrapper {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-input #input {
  color: var(--text) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .composer-ai-disclaimer {
  color: #475569 !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .text {
  color: var(--text) !important;
}
html:not([data-theme="light"]) body:is(.desktop-chat, .mobile-chat) .message.assistant .message-bubble {
  background-color: var(--assistant-msg, #161b22);
  color: var(--text);
  border-color: var(--border);
}
html:not([data-theme="light"]) body:is(.desktop-chat, .mobile-chat) .message.assistant .text {
  color: var(--text);
}
html[data-theme="dark"] body:is(.desktop-chat, .mobile-chat) .message.assistant .action-chip,
html:not([data-theme="light"]) body:is(.desktop-chat, .mobile-chat) .message.assistant .action-chip {
  color: rgba(226, 232, 240, 0.92);
}
html:not([data-theme="light"]) body:is(.desktop-chat, .mobile-chat) .message .message-actions > .action-chip.regenerate-btn {
  background: transparent !important;
  color: rgba(226, 232, 240, 0.92) !important;
  border: 1px solid rgba(226, 232, 240, 0.18) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) body:is(.desktop-chat, .mobile-chat) .message .message-actions > .action-chip.regenerate-btn .ico {
  color: rgba(226, 232, 240, 0.92) !important;
}
html:not([data-theme="light"]) body:is(.desktop-chat, .mobile-chat) .message .message-actions > .action-chip.regenerate-btn:hover {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(52, 211, 153, 0.45) !important;
  color: #6ee7b7 !important;
}
html:not([data-theme="light"]) body:is(.desktop-chat, .mobile-chat) .message .message-actions > .action-chip.regenerate-btn:hover .ico {
  color: #6ee7b7 !important;
}

/* Light theme: one ink for every chrome surface. No per-robot hunt. */
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .icon-btn,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .ghost-btn,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .composer-action-btn,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .header-actions .icon-btn,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .header-actions .ghost-btn {
  color: #0f172a !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .icon-btn .ico,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .ghost-btn .ico,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .composer-action-btn .ico {
  color: #0f172a !important;
  stroke: currentColor !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-header .name,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-header .robot-status-line,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .empty-title,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .empty-sub,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .composer-hint,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .sidebar,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-item,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .sheet-select {
  color: var(--text) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .text,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .text :where(p, li, span, strong, em, a, h1, h2, h3, h4, blockquote) {
  color: #0f172a !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .text :where(h1, h2, h3) {
  color: #0f172a !important;
}
/* REMOVED 2026-08-21 — duplicate of the block above (same panel, same forced
   #0f172a chip ink). Both are now --nab-chip-ink / --nab-chip-panel-*. */
html[data-theme="light"] body.mobile-chat .input-wrapper {
  border-color: var(--border) !important;
  background: var(--bg-secondary) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] body.mobile-chat .message.assistant .message-bubble {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #d0d7de !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .file-preview .file-name,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .file-preview .file-meta,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .file-preview .fp-caption-hint {
  color: var(--text) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .file-preview .file-meta,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .file-preview .fp-caption-hint {
  color: var(--text-secondary) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .nabgol-workspace,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .nabgol-workspace-panel,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .control-surface {
  color: var(--text);
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .action-chip,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message.assistant .action-chip .ico {
  color: #0f172a !important;
}

/* Light theme — accent-on-soft & danger-red text forever (2026-08-20).
   --dc-accent/--tg-accent + their "-soft" translucent wash were tuned for a
   near-black page background: bright green/red text over a ~12% wash of the
   SAME hue reads fine on #0d1117 but becomes near-invisible (contrast ~2:1)
   once the page background turns white. Every place below measured under
   4.5:1 with a real browser + WCAG luminance formula, not by eye. Reuse the
   already-existing "-dark" tokens for the TEXT only — button/badge
   backgrounds elsewhere keep their bright brand green unchanged. */
html[data-theme="light"] body.desktop-chat .msg-avatar,
html[data-theme="light"] body.mobile-chat .msg-avatar,
html[data-theme="light"] body.mobile-chat .big-icon,
html[data-theme="light"] body.mobile-chat .brand-avatar,
html[data-theme="light"] body.desktop-chat .icon-btn.active,
html[data-theme="light"] body.desktop-chat .new-chat-sidebar:hover {
  color: #15803d !important;
}
/* `.suggestion-chip:hover` used to be in that list. On the day chip's darkest
   gradient stop (#94a3b8) #15803d measures 1.97:1 — the exact class of defect
   this whole block was written to remove, just on a surface that was white when
   it was written. Chip hover ink is --nab-chip-ink-hover now: 6.35:1 there. */
/* 2026-08-20 real re-measure: #15803d text on THIS pill's actual composited
   background (~rgb(222,237,228)) only hit 4.14:1 — still under the 4.5:1 AA
   floor for 11px text, which is exactly why the earlier "fix" here kept
   failing a fresh audit. #166534 on the same background measures 5.89:1. */
html[data-theme="light"] body.desktop-chat .robot-status.active {
  color: #166534 !important;
  background: rgba(21, 128, 61, 0.14) !important;
}
html[data-theme="light"] body.desktop-chat .robot-status.active .status-dot {
  background: #166534 !important;
  box-shadow: 0 0 6px rgba(21, 128, 61, 0.35) !important;
}
html[data-theme="light"] body.desktop-chat .icon-btn.active {
  background: rgba(21, 128, 61, 0.14) !important;
  border-color: #15803d !important;
}

html[data-theme="light"] body.desktop-chat .icon-btn.danger,
html[data-theme="light"] body.desktop-chat .ghost-btn.danger,
html[data-theme="light"] body.desktop-chat .chat-header .header-actions .icon-btn.danger,
html[data-theme="light"] body.desktop-chat .chat-header .header-actions .ghost-btn.danger,
html[data-theme="light"] body.desktop-chat .chat-header .header-actions .ghost-btn.danger .btn-label,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .voice-btn.recording,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .composer-action-btn.voice-btn.recording {
  color: #b91c1c !important;
}
html[data-theme="light"] body.desktop-chat .chat-header .header-actions .icon-btn.danger:hover,
html[data-theme="light"] body.desktop-chat .chat-header .header-actions .ghost-btn.danger:hover,
html[data-theme="light"] body.desktop-chat .icon-btn.danger:hover {
  background: rgba(185, 28, 28, 0.12) !important;
  color: #b91c1c !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .voice-btn.recording,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .composer-action-btn.voice-btn.recording {
  background: rgba(185, 28, 28, 0.12) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .message .delete-btn:hover {
  color: #b91c1c !important;
  border-color: rgba(185, 28, 28, 0.5) !important;
  background: rgba(185, 28, 28, 0.12) !important;
}

/* Telegram-standard attach card: guarantee the inner preview/input stay
   borderless so only the OUTER frame reads as a border, in light theme too. */
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-input.composer-has-attach {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-input.composer-has-attach .file-preview.show,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-input.composer-has-attach .input-wrapper {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}