/* Flow editor, night colours (Juanlu 2026-10-01: make the night version look better "from a
   color perspective"; "don't change the current design").

   Colours only. Every rule is scoped to night and sets a colour, a background, a border
   colour or a shadow: never a size, a width, a position or a font, so the night editor has
   exactly the day editor's geometry, and the day editor (its colours stay in chatflow.html)
   is untouched. Values are tokens (tokens.css: the night grounds and inks, the status
   colours and the --fe-* group).

   Same design, night tones: the canvas on the app's night ground, blocks as dark cards
   with light words, every action line in its own day hue (dark tint, hue edge, light
   words), START / POST-REG / POST-FTD on the solid status colours, lines and ports in the
   same meaning per colour, a blue selection ring, and the top bar and palette buttons as
   night versions of themselves.

   The editor keeps some states only in inline styles (the Analytics and Skip Old Leads
   toggles, the Save flash, the port words of Condition and AI Chatter blocks). Those few
   rules match the style attribute and need !important: the one place this layer themes
   through [style*=], until the editor sets classes for its states. The rules are in the
   order of the day rules they shadow, so the cascade between states stays the same. */

/* ---------- Canvas ---------- */
:root[data-theme="night"] .viewport { background: var(--bg); }

/* ---------- Connections (z-index under the blocks, on the canvas ground) ---------- */
:root[data-theme="night"] .arrows-svg path.c-default { stroke: var(--fe-line); }
:root[data-theme="night"] .arrows-svg path.c-green { stroke: var(--fe-line-ok); }
:root[data-theme="night"] .arrows-svg path.c-red { stroke: var(--fe-line-bad); }
:root[data-theme="night"] .arrows-svg path.c-yellow { stroke: var(--fe-line-warn); }
:root[data-theme="night"] .arrows-svg path.c-temp { stroke: var(--reply); }
/* arrowheads carry their colour as a fill attribute (renderArrows) */
:root[data-theme="night"] .arrows-svg polygon[fill="#b0b8c8"] { fill: var(--fe-line); }
:root[data-theme="night"] .arrows-svg polygon[fill="#22c55e"] { fill: var(--fe-line-ok); }
:root[data-theme="night"] .arrows-svg polygon[fill="#ef4444"] { fill: var(--fe-line-bad); }
:root[data-theme="night"] .arrows-svg polygon[fill="#eab308"] { fill: var(--fe-line-warn); }

/* ---------- Blocks ---------- */
:root[data-theme="night"] .node { background: var(--fe-card); border-color: var(--fe-card-edge); color: var(--ink); box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
:root[data-theme="night"] .node:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, .5); }
:root[data-theme="night"] .node.selected { border-color: var(--reply); box-shadow: 0 0 0 3px rgba(76, 141, 246, .38); }
:root[data-theme="night"] .node.start-node { border-color: var(--fe-line-bad); }
:root[data-theme="night"] .node.start-node.selected { border-color: var(--fe-line-bad); box-shadow: 0 0 0 3px rgba(224, 87, 79, .38); }
:root[data-theme="night"] .node.multi-selected { border-color: var(--reply); box-shadow: 0 0 0 3px rgba(76, 141, 246, .45); }
:root[data-theme="night"] .sel-rect { border-color: var(--reply); background: rgba(76, 141, 246, .14); }

:root[data-theme="night"] .node-head { color: var(--ink); }
:root[data-theme="night"] .node-head .start-badge { background: var(--bad-solid); color: var(--on-solid); }
:root[data-theme="night"] .node-head .postreg-badge { background: var(--ok-solid); color: var(--on-solid); }
:root[data-theme="night"] .node-head .postftd-badge { background: var(--warn-solid); color: var(--on-solid); }

/* action lines: each keeps its day hue */
:root[data-theme="night"] .node-action.a-text { background: var(--fe-text-tint); border-left-color: var(--fe-text-edge); color: var(--ink); }
:root[data-theme="night"] .node-action.a-typing { background: var(--fe-typing-tint); border-left-color: var(--fe-typing-edge); color: var(--ink-2); }
:root[data-theme="night"] .node-action.a-delay { background: var(--fe-delay-tint); border-left-color: var(--fe-delay-edge); color: var(--fe-delay); }
:root[data-theme="night"] .node-action:is(.a-image, .a-video, .a-audio, .a-circle-video) { background: var(--fe-media-tint); border-left-color: var(--fe-media-edge); color: var(--fe-media); }
:root[data-theme="night"] .node-action.a-tag { background: var(--fe-tag-tint); border-left-color: var(--fe-tag-edge); color: var(--fe-tag); }
:root[data-theme="night"] .node-action.a-condition { background: var(--fe-cond-tint); border-left-color: var(--fe-cond-edge); color: var(--fe-cond); }
:root[data-theme="night"] .node-action.a-reg-verify { background: var(--fe-verify-tint); border-left-color: var(--fe-verify-edge); color: var(--fe-verify); }
:root[data-theme="night"] .node-action.a-ai-chatter { background: var(--fe-ai-tint); border-left-color: var(--fe-ai-edge); color: var(--fe-ai); }

:root[data-theme="night"] .node-footer .await { color: var(--ink-2); border-top-color: var(--edge); }
/* port words of Condition and AI Chatter blocks (inline colours in renderNodes) */
:root[data-theme="night"] .node-footer[style*="color:#64748b"] { color: var(--ink-2) !important; }
:root[data-theme="night"] .node-footer span[style*="color:#22c55e"] { color: var(--ok) !important; }
:root[data-theme="night"] .node-footer span[style*="color:#ef4444"] { color: var(--bad) !important; }
:root[data-theme="night"] .node-footer span[style*="color:#eab308"] { color: var(--warn) !important; }

/* hover bar over a block */
:root[data-theme="night"] .node-hover-bar button { background: var(--fill); color: var(--ink-2); box-shadow: 0 1px 4px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--edge); }
:root[data-theme="night"] .node-hover-bar button:hover { background: var(--edge); color: var(--ink); }
:root[data-theme="night"] .node-hover-bar button.active-start { color: var(--bad); }
:root[data-theme="night"] .node-hover-bar button.active-postreg { color: var(--ok); background: var(--ok-tint); }
:root[data-theme="night"] .node-hover-bar button.active-postftd { color: var(--warn); background: var(--warn-tint); }
:root[data-theme="night"] .node-hover-bar button.del-btn:hover { background: var(--bad-tint); color: var(--bad); }

/* ---------- Ports ---------- */
:root[data-theme="night"] .port-in,
:root[data-theme="night"] .port-out,
:root[data-theme="night"] .port-continue-m { background: var(--fe-card); border-color: var(--fe-port-edge); }
:root[data-theme="night"] .port-replied { background: var(--ok-tint); border-color: var(--fe-line-ok); }
:root[data-theme="night"] .port-timeout { background: var(--bad-tint); border-color: var(--fe-line-bad); }

/* ---------- Analytics (stats) counts on the blocks ---------- */
:root[data-theme="night"] .analytics-badge { background: var(--bad-solid); color: var(--on-solid); box-shadow: 0 2px 4px rgba(0, 0, 0, .6); }

/* ---------- Bottom palette ---------- */
:root[data-theme="night"] .toolbar { background: var(--pop); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--edge); }
:root[data-theme="night"] .toolbar button { background: var(--fill); color: var(--ink); }
:root[data-theme="night"] .toolbar button:hover { background: var(--edge); }

/* ---------- Top bar: the editor's buttons ---------- */
:root[data-theme="night"] .topbar .btn { color: #FFFFFF; background: var(--fe-btn); }
:root[data-theme="night"] .topbar .btn:hover { background: var(--fe-btn-hover); }
:root[data-theme="night"] .topbar .btn-back { background: var(--fill); color: var(--ink); }
:root[data-theme="night"] .topbar .btn-back:hover { background: var(--fill) linear-gradient(var(--press-overlay), var(--press-overlay)); }
:root[data-theme="night"] .topbar .btn-save { background: var(--fe-save); color: var(--on-solid); }
:root[data-theme="night"] .topbar .btn-save:hover { background: var(--fe-save-hover); }
/* the Save flash ("Saved!", inline #22c55e for 1.5s) */
:root[data-theme="night"] .topbar .btn-save[style*="34, 197, 94"] { background: var(--fe-save) !important; }
/* Analytics: off #6b21a8, on #a855f7 by day (inline) */
:root[data-theme="night"] #analytics-toggle { background: var(--fe-analytics) !important; }
:root[data-theme="night"] #analytics-toggle[style*="168, 85, 247"] { background: var(--fe-analytics-on) !important; }
/* Skip Old Leads: off #334155, on #ef4444 by day (inline) */
:root[data-theme="night"] #skip-leads-toggle { background: var(--fe-skip) !important; color: var(--ink); }
:root[data-theme="night"] #skip-leads-toggle[style*="239, 68, 68"] { background: var(--bad-solid) !important; color: var(--on-solid); }