/* chats-flow.css — Supabot's Workflows builder (chats-flow.js, p21/features slice W1). Every rule is under html[data-look="chats"].
   n8n's geometry (n8n-look.md): a #0a0a0a canvas with a 1.25 px dot every 16 px, 96 px nodes (#1b1b1b, 1.5 px white 12 %,
   radius 12), the trigger's D shape, labels under the node, 2 px #3a3a3a beziers, 12 px handles, a "+" after the last node;
   green #3ddc97 done, a white arc while it runs, amber #f5b544 while it waits for a person, red #ff5f57 when it failed.
   Supabot's tokens (p21 SPEC §3.2): page #070707, 14/20 text, secondary #9a9a9a, primary white on black, secondary #2b2b2b,
   44 px composer pill #292929. Widths (D22): the rail 248 px in the grid at ≥ 1280 (folded to a pill while the step panel is
   open), an overlay sheet at 801–1279, the phone ≤ 800 (a vertical canvas, the panel as a bottom sheet). */

@property --chflow-a{syntax:"<angle>";inherits:false;initial-value:0deg}

html[data-look="chats"] .surf-pane[data-surf="workflows"]{background:#070707}
html[data-look="chats"] .chflow-root{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:248px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);grid-template-areas:"rail canvas";overflow:hidden;color:#ececec;font-size:14px;line-height:20px}

/* ------------------------------------------------------------------ buttons */
html[data-look="chats"] .chflow-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 14px;border:0;border-radius:999px;
  font:inherit;font-size:13.5px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;flex:none}
html[data-look="chats"] .chflow-btn>svg{flex:none}
html[data-look="chats"] .chflow-btn.primary{background:#fff;color:#000}
html[data-look="chats"] .chflow-btn.primary:hover:not(:disabled){background:#e9e9e9}
html[data-look="chats"] .chflow-btn.secondary{background:#2b2b2b;color:#fff}
html[data-look="chats"] .chflow-btn.secondary:hover:not(:disabled){background:#363636}
html[data-look="chats"] .chflow-btn.quiet{background:none;color:#a0a0a0;padding:0 8px}
html[data-look="chats"] .chflow-btn.quiet:hover:not(:disabled){color:#ececec}
html[data-look="chats"] .chflow-btn.sm{height:26px;padding:0 10px;font-size:12.5px}
html[data-look="chats"] .chflow-btn:disabled{opacity:.45;cursor:default}
html[data-look="chats"] .chflow-btn:focus-visible,html[data-look="chats"] .chflow-chip:focus-visible,html[data-look="chats"] .chflow-listbtn:focus-visible,
html[data-look="chats"] .chflow-railitem:focus-visible,html[data-look="chats"] .chflow-railnew:focus-visible,html[data-look="chats"] .fl-node:focus-visible,
html[data-look="chats"] .fl-plus:focus-visible,html[data-look="chats"] .fl-ctrl button:focus-visible,html[data-look="chats"] .chflow-px:focus-visible,
html[data-look="chats"] .chflow-pick:focus-visible,html[data-look="chats"] .fl-railpill:focus-visible,html[data-look="chats"] .fl-changego:focus-visible,
html[data-look="chats"] #view-title.chflow-editable:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}

/* ------------------------------------------------------------------ the head */
html[data-look="chats"] .chflow-listbtn{display:none;flex:none;width:32px;height:32px;place-items:center;margin-left:-6px;padding:0;border:0;border-radius:9px;
  background:none;color:#bdbdbd;cursor:pointer}
html[data-look="chats"] .chflow-listbtn:hover,html[data-look="chats"] .chflow-listbtn[aria-expanded="true"]{background:#1a1a1a;color:#fff}
html[data-look="chats"] .page-head:has([data-chflow-head]) #view-title.chflow-editable{cursor:text;padding:3px 6px;margin-left:-6px;border-radius:7px}
html[data-look="chats"] .page-head:has([data-chflow-head]) #view-title.chflow-editable:hover{background:#161616}
html[data-look="chats"] .chflow-nameinput{width:min(320px,100%);height:28px;padding:0 6px;border:1px solid #3a3a3a;border-radius:7px;background:#161616;color:#fff;
  font:inherit;font-size:14.5px;font-weight:600;outline:none}
html[data-look="chats"] .chflow-chip{display:inline-flex;align-items:center;gap:7px;min-width:0;height:32px;padding:0 8px 0 10px;border:1px solid #262626;border-radius:999px;
  background:#121212;color:#d8d8d8;font:inherit;font-size:13px;font-weight:500;line-height:1;cursor:pointer;flex:0 1 auto}
html[data-look="chats"] .chflow-chip:hover{background:#181818;border-color:#303030}
html[data-look="chats"] .chflow-chipbolt{display:grid;flex:none;color:#f5b544}
html[data-look="chats"] .chflow-chiptext{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chflow-chipstate{display:inline-flex;align-items:center;gap:5px;flex:none;color:#9a9a9a;white-space:pre}
/* the "·" is for screen readers and the words; the dot says it */
html[data-look="chats"] .chflow-chipsep{display:none}
html[data-look="chats"] .chflow-chipdot{width:6px;height:6px;border-radius:50%;background:#6a6a6a}
html[data-look="chats"] .chflow-chip.on .chflow-chipdot{background:#3ddc97}
html[data-look="chats"] .chflow-chipgo{display:grid;flex:none;color:#6a6a6a;margin-left:-2px}
html[data-look="chats"] #head-tools:has(.chflow-chip),html[data-look="chats"] #head-tools:has(.chflow-btn){min-width:0}
html[data-look="chats"] .chflow-banner{margin:0 16px 8px;padding:9px 14px;border:1px solid rgba(255,95,87,.35);border-radius:12px;background:rgba(255,95,87,.07);
  color:#ffd0cc;font-size:13.5px;line-height:20px}

/* ------------------------------------------------------------------ the rail */
html[data-look="chats"] .chflow-rail{grid-area:rail;min-height:0;display:flex;flex-direction:column;gap:1px;padding:10px 10px 12px;background:#0c0c0c;
  border-right:1px solid #161616;overflow-y:auto;overflow-x:hidden}
html[data-look="chats"] .chflow-railnew{display:flex;align-items:center;gap:9px;flex:none;height:36px;padding:0 8px;border:0;border-radius:9px;background:none;
  color:#ececec;font:inherit;font-size:13.5px;font-weight:500;text-align:left;cursor:pointer}
html[data-look="chats"] .chflow-railnew:hover{background:#161616}
html[data-look="chats"] .chflow-railnew>svg{flex:none;color:#cfcfcf}
html[data-look="chats"] .chflow-railsec{display:flex;flex-direction:column;gap:1px}
html[data-look="chats"] .chflow-railsec.drafts{margin-top:4px}
html[data-look="chats"] .chflow-railhead{padding:12px 8px 6px;font-size:12px;line-height:16px;font-weight:600;color:#7c7c7c}
html[data-look="chats"] .chflow-railitem{display:flex;align-items:center;gap:9px;width:100%;height:34px;flex:none;padding:0 8px;border:0;border-radius:9px;background:none;
  color:#bdbdbd;font:inherit;font-size:13.5px;text-align:left;white-space:nowrap;cursor:pointer}
html[data-look="chats"] .chflow-railitem:hover{background:#151515;color:#ececec}
html[data-look="chats"] .chflow-railitem[aria-current="page"]{background:#202020;color:#fff}
html[data-look="chats"] .chflow-railitem>svg{flex:none;color:#8a8a8a}
html[data-look="chats"] .chflow-railitem[aria-current="page"]>svg{color:#fff}
html[data-look="chats"] .chflow-railname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chflow-railtag{flex:none;font-size:11.5px;color:#6a6a6a}
html[data-look="chats"] .chflow-railtag.draft{color:#9a8a6a}
html[data-look="chats"] .chflow-railnone{padding:2px 8px 6px;font-size:12.5px;line-height:18px;color:#6a6a6a}
html[data-look="chats"] .chflow-railfoot{margin-top:auto;padding-top:12px}
html[data-look="chats"] .chflow-railfoot .chflow-btn{width:100%}
html[data-look="chats"] .chflow-railfoot .chflow-btn>svg{color:#ff5f57}
html[data-look="chats"] .chflow-scrim,html[data-look="chats"] .chflow-pscrim{display:none}

/* the rail as a sheet over the page (D22) */
@media (min-width:1280px){
  html[data-look="chats"] .chflow-root[data-panel="1"]{grid-template-columns:minmax(0,1fr) clamp(320px,24vw,440px);grid-template-areas:"canvas panel"}
  html[data-look="chats"] .chflow-root[data-panel="1"] .chflow-rail{position:absolute;left:0;top:0;bottom:0;width:248px;z-index:6;grid-area:auto;
    transform:translateX(-102%);visibility:hidden;transition:transform .2s ease-in,visibility 0s linear .2s;box-shadow:0 0 0 1px #1a1a1a,12px 0 40px rgba(0,0,0,.6)}
  html[data-look="chats"] .chflow-root[data-panel="1"][data-sheet="1"] .chflow-rail{transform:none;visibility:visible;transition:transform .22s ease-out}
  html[data-look="chats"] .chflow-root[data-panel="1"][data-sheet="1"] .chflow-scrim{display:block;position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.45)}
  html[data-look="chats"] .chflow-root[data-panel="1"] .fl-railpill{display:inline-flex}
}
@media (max-width:1279px){
  html[data-look="chats"] .chflow-root{grid-template-columns:minmax(0,1fr);grid-template-areas:"canvas"}
  html[data-look="chats"] .chflow-root[data-panel="1"]{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"canvas panel"}
  html[data-look="chats"] .chflow-rail{position:absolute;left:0;top:0;bottom:0;width:248px;z-index:6;grid-area:auto;transform:translateX(-102%);visibility:hidden;
    transition:transform .2s ease-in,visibility 0s linear .2s;box-shadow:0 0 0 1px #1a1a1a,12px 0 40px rgba(0,0,0,.6)}
  html[data-look="chats"] .chflow-root[data-sheet="1"] .chflow-rail{transform:none;visibility:visible;transition:transform .22s ease-out}
  html[data-look="chats"] .chflow-root[data-sheet="1"] .chflow-scrim{display:block;position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.45)}
  html[data-look="chats"] .page-head:has([data-chflow-head]) .chflow-listbtn{display:grid}
}

/* ------------------------------------------------------------------ the canvas */
html[data-look="chats"] .fl-canvas{grid-area:canvas;position:relative;min-width:0;min-height:0;overflow:hidden;background-color:#0a0a0a;
  background-image:radial-gradient(circle at 1px 1px,#262626 1.25px,transparent 1.5px);background-size:16px 16px;cursor:grab;touch-action:none;
  user-select:none;-webkit-user-select:none}
html[data-look="chats"] .fl-canvas.panning{cursor:grabbing}
html[data-look="chats"] .fl-world{position:absolute;left:0;top:0;transform-origin:0 0;transition:opacity .2s ease}
html[data-look="chats"] .fl-world.dim{opacity:.5}
html[data-look="chats"] .fl-wires{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
html[data-look="chats"] .fl-wire,html[data-look="chats"] .fl-stub{fill:none;stroke:#3a3a3a;stroke-width:2;stroke-linecap:round}
html[data-look="chats"] .fl-wire.ok,html[data-look="chats"] .fl-stub.ok{stroke:rgba(61,220,151,.75)}
html[data-look="chats"] .fl-wire.ghost{stroke:#3e3e3e;stroke-dasharray:5 6}

/* a node: 96 × 96, one glyph, the label under it */
html[data-look="chats"] .fl-node{position:absolute;width:96px;height:96px;border-radius:12px;background:#1b1b1b;border:1.5px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 6px 18px rgba(0,0,0,.35);color:rgba(255,255,255,.9);cursor:pointer;outline:none}
html[data-look="chats"] .fl-node:hover{border-color:rgba(255,255,255,.24)}
html[data-look="chats"] .fl-node.trigger{border-radius:40px 12px 12px 40px}
html[data-look="chats"] .fl-face{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
html[data-look="chats"] .fl-node.trigger .fl-face{padding-left:6px}
html[data-look="chats"] .fl-node.sel{box-shadow:0 0 0 2px #0a0a0a,0 0 0 6px rgba(255,255,255,.35),0 6px 18px rgba(0,0,0,.35)}
html[data-look="chats"] .fl-node.ok{border:2px solid rgba(61,220,151,.85)}
html[data-look="chats"] .fl-node.bad{border:2px solid #ff5f57}
html[data-look="chats"] .fl-h{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#1b1b1b;border:1.5px solid #4a4a4a;
  transition:transform .12s ease;pointer-events:none}
html[data-look="chats"] .fl-h.in{left:-7px}
html[data-look="chats"] .fl-h.out{right:-7px}
html[data-look="chats"] .fl-node:hover .fl-h{transform:scale(1.33)}
html[data-look="chats"] .fl-node.ok .fl-h{border-color:rgba(61,220,151,.85)}
html[data-look="chats"] .fl-bolt{position:absolute;left:-28px;top:50%;margin-top:-8px;display:grid;color:#f5b544;pointer-events:none}
html[data-look="chats"] .fl-tick{position:absolute;right:6px;bottom:5px;display:grid;color:#3ddc97;pointer-events:none}
html[data-look="chats"] .fl-bad{position:absolute;top:-8px;right:-8px;z-index:2;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#ff5f57;
  color:#170404;font-size:12px;line-height:1;font-weight:800;box-shadow:0 0 0 2px #0a0a0a;cursor:help;pointer-events:auto}
html[data-look="chats"] .fl-label{position:absolute;left:50%;top:100%;width:192px;margin:8px 0 0 -96px;text-align:center;pointer-events:none}
html[data-look="chats"] .fl-node.line .fl-label{width:176px;margin-left:-88px}
html[data-look="chats"] .fl-name{font-size:14px;line-height:20px;font-weight:600;color:#ececec;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere}
html[data-look="chats"] .fl-sub{margin-top:2px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px;line-height:16px;color:#8f8f8f;white-space:nowrap}
html[data-look="chats"] .fl-sub>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .fl-subbot{flex:none;width:22px;height:22px;margin:-3px 0 -3px -2px;display:grid;place-items:center}

/* running: a white arc turns round the edge (n8n's conic border); waiting on a person: the same in amber, slower */
html[data-look="chats"] .fl-node.run,html[data-look="chats"] .fl-node.wait{border-color:transparent}
html[data-look="chats"] .fl-node.run::before,html[data-look="chats"] .fl-node.wait::before,
html[data-look="chats"] .fl-group.run::before,html[data-look="chats"] .fl-group.wait::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;
  background:conic-gradient(from var(--chflow-a),#fff,rgba(255,255,255,.85) 16%,rgba(255,255,255,.1) 34%,rgba(255,255,255,.1) 72%,#fff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:chflow-turn 1.5s linear infinite;pointer-events:none}
html[data-look="chats"] .fl-node.wait::before,html[data-look="chats"] .fl-group.wait::before{
  background:conic-gradient(from var(--chflow-a),#f5b544,rgba(245,181,68,.85) 16%,rgba(245,181,68,.12) 34%,rgba(245,181,68,.12) 72%,#f5b544);animation-duration:4.5s}
@keyframes chflow-turn{to{--chflow-a:360deg}}

/* a job's line nodes: one dashed frame, one label on its top edge (D7) */
/* the spec's 8 % white could not be seen on #0a0a0a in the screenshots (W1): 16 %, still quieter than any node edge */
html[data-look="chats"] .fl-group{position:absolute;border:1px dashed rgba(255,255,255,.16);border-radius:16px;pointer-events:none}
html[data-look="chats"] .fl-group.ok{border:1.5px solid rgba(61,220,151,.55)}
html[data-look="chats"] .fl-group.bad{border:1.5px solid #ff5f57}
html[data-look="chats"] .fl-group.run,html[data-look="chats"] .fl-group.wait{border-color:transparent}
html[data-look="chats"] .fl-glabel{position:absolute;left:14px;top:0;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;height:24px;
  padding:0 8px 0 4px;border:0;border-radius:999px;background:#0a0a0a;color:#9a9a9a;font:inherit;font-size:12px;line-height:16px;white-space:nowrap;cursor:pointer;
  pointer-events:auto}
html[data-look="chats"] .fl-glabel:hover{color:#ececec}
html[data-look="chats"] .fl-glabel>.chats-av{flex:none}
html[data-look="chats"] .fl-gbot.none{width:4px}
html[data-look="chats"] .fl-group>.fl-bad{top:-9px;right:-9px}

/* the "+" after the last node */
html[data-look="chats"] .fl-plus{position:absolute;width:24px;height:24px;display:grid;place-items:center;padding:0;border:1px solid #333;border-radius:6px;background:#1f1f1f;
  color:#cfcfcf;cursor:pointer}
html[data-look="chats"] .fl-plus:hover,html[data-look="chats"] .fl-plus.sel{background:#2a2a2a;color:#fff;border-color:#4a4a4a}

/* not written yet: dashed boxes and grey label bars */
html[data-look="chats"] .fl-node.ghost{background:rgba(27,27,27,.55);border:1.5px dashed #444;box-shadow:none;cursor:default}
html[data-look="chats"] .fl-node.ghost .fl-bolt{color:#5a4a2a}
html[data-look="chats"] .fl-node.ghost .fl-h{border-style:dashed;border-color:#444}
html[data-look="chats"] .fl-skel{height:10px;width:118px;margin:5px auto 0;border-radius:5px;background:linear-gradient(90deg,#1c1c1c,#2a2a2a,#1c1c1c);background-size:200% 100%;
  animation:chflow-shimmer 1.4s ease-in-out infinite}
html[data-look="chats"] .fl-skel.short{width:70px;height:8px;margin-top:7px}
@keyframes chflow-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
html[data-look="chats"] .fl-in{animation:chflow-in .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes chflow-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* the canvas's furniture */
html[data-look="chats"] .fl-top{position:absolute;left:16px;top:14px;right:16px;z-index:3;display:flex;align-items:flex-start;gap:8px;pointer-events:none}
html[data-look="chats"] .fl-top>*{pointer-events:auto}
html[data-look="chats"] .fl-railpill{display:none;align-items:center;gap:6px;flex:none;height:30px;padding:0 12px 0 8px;border:1px solid #262626;border-radius:16px;
  background:#121212;color:#bdbdbd;font:inherit;font-size:12.5px;cursor:pointer}
html[data-look="chats"] .fl-railpill:hover{color:#fff;background:#181818}
html[data-look="chats"] .fl-notes{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;max-width:min(620px,100%)}
html[data-look="chats"] .fl-notes:empty{display:none}
html[data-look="chats"] .fl-note{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;height:30px;padding:0 12px 0 11px;border:1px solid #222;
  border-radius:999px;background:rgba(18,18,18,.92);color:#a8a8a8;font-size:12.5px;white-space:nowrap}
html[data-look="chats"] .fl-note>svg{flex:none;color:#ff5f57}
html[data-look="chats"] .fl-note b{font-weight:500;color:#e6e6e6;min-width:0;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .fl-notek{flex:none;color:#d6b073}
html[data-look="chats"] .fl-notet{min-width:0;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .fl-notelink{flex:none;padding:0;border:0;background:none;color:#e6e6e6;font:inherit;cursor:pointer}
html[data-look="chats"] .fl-notelink:hover{text-decoration:underline}
html[data-look="chats"] .fl-mid{position:absolute;left:50%;top:14px;z-index:4;transform:translateX(-50%);max-width:calc(100% - 32px);pointer-events:none}
html[data-look="chats"] .fl-mid>*{pointer-events:auto}
html[data-look="chats"] .fl-writing,html[data-look="chats"] .fl-readonly{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 6px 0 14px;border:1px solid #262626;
  border-radius:999px;background:rgba(20,20,20,.95);color:#bdbdbd;font-size:13px;line-height:18px;white-space:nowrap}
html[data-look="chats"] .fl-readonly{padding:0 14px}
html[data-look="chats"] .fl-writing b{font-weight:500;color:#f0f0f0;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .fl-writing .fl-dim{color:#7c7c7c}
html[data-look="chats"] .fl-sep{color:#4a4a4a}
html[data-look="chats"] .fl-writing.bad{border-color:rgba(255,95,87,.4);color:#ffd0cc;white-space:normal;padding:6px 6px 6px 14px;border-radius:17px}
html[data-look="chats"] .fl-spin{flex:none;width:12px;height:12px;border-radius:50%;border:1.75px solid #3a3a3a;border-top-color:#fff;animation:chflow-spin .9s linear infinite}
@keyframes chflow-spin{to{transform:rotate(360deg)}}
html[data-look="chats"] .fl-ctrl{position:absolute;left:16px;bottom:16px;z-index:3;display:flex;flex-direction:column;border:1px solid #232323;border-radius:10px;background:#141414;
  overflow:hidden}
html[data-look="chats"] .fl-ctrl[hidden]{display:none}
html[data-look="chats"] .fl-ctrl button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;background:none;color:#bdbdbd;cursor:pointer}
html[data-look="chats"] .fl-ctrl button:hover{background:#1c1c1c;color:#fff}
html[data-look="chats"] .fl-ctrl button+button{border-top:1px solid #1f1f1f}
html[data-look="chats"] .fl-noton{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;margin:0;
  color:#9a9a9a;font-size:14px;line-height:20px;text-align:center;padding:24px}
html[data-look="chats"] .fl-noton p{margin:0}

/* the foot: the last run, then the change box */
html[data-look="chats"] .fl-foot{position:absolute;left:50%;bottom:16px;z-index:3;transform:translateX(-50%);width:min(560px,calc(100% - 128px));display:flex;
  flex-direction:column;align-items:center;gap:8px;pointer-events:none}
html[data-look="chats"] .fl-runslot>*,html[data-look="chats"] .fl-changeslot>*{pointer-events:auto}
html[data-look="chats"] .fl-runslot,html[data-look="chats"] .fl-changeslot{display:flex;flex-direction:column;align-items:center;width:100%;pointer-events:none}
html[data-look="chats"] .fl-runslot:empty,html[data-look="chats"] .fl-changeslot:empty{display:none}
html[data-look="chats"] .fl-runwrap{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100%}
html[data-look="chats"] .fl-runline{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:32px;padding:0 14px 0 12px;border:1px solid #222;border-radius:999px;
  background:rgba(18,18,18,.94);color:#bdbdbd;font-size:12.5px;line-height:18px;white-space:nowrap}
html[data-look="chats"] .fl-runline:has(.chflow-btn){padding-right:4px}
html[data-look="chats"] .fl-runline>span:not(.fl-rundot):not(.fl-sep){min-width:0;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .fl-rundot{flex:none;width:7px;height:7px;border-radius:50%;background:#6a6a6a}
html[data-look="chats"] .fl-runline[data-state="done"] .fl-rundot{background:#3ddc97}
html[data-look="chats"] .fl-runline[data-state="failed"] .fl-rundot{background:#ff5f57}
html[data-look="chats"] .fl-runline[data-state="queued"] .fl-rundot,html[data-look="chats"] .fl-runline[data-state="waiting"] .fl-rundot{background:#f5b544}
html[data-look="chats"] .fl-runline[data-state="running"] .fl-rundot{background:#fff}
html[data-look="chats"] .fl-runline[data-state="queued"]{border-color:rgba(245,181,68,.3);color:#e6e6e6}
html[data-look="chats"] .fl-runerr{max-width:100%;padding:4px 12px;border-radius:10px;background:rgba(18,18,18,.94);color:#ff9a94;font-size:12.5px;line-height:18px;text-align:center}
html[data-look="chats"] .fl-changewrap{width:100%;display:flex;flex-direction:column;align-items:stretch}
html[data-look="chats"] .fl-changeerr{margin:0 0 6px;padding:6px 12px;border-radius:10px;background:rgba(18,18,18,.94);color:#ff9a94;font-size:13px;line-height:20px;text-align:center}
html[data-look="chats"] .fl-change{display:flex;align-items:center;gap:6px;width:100%;height:44px;padding:0 6px 0 16px;border:1px solid #333;border-radius:22px;background:#292929;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
html[data-look="chats"] .fl-change:focus-within{border-color:#4a4a4a}
html[data-look="chats"] .fl-changeinput{flex:1;min-width:0;height:100%;border:0;background:none;color:#fff;font:inherit;font-size:14px;outline:none}
html[data-look="chats"] .fl-changeinput::placeholder{color:#8f8f8f}
html[data-look="chats"] .fl-change.busy .fl-changeinput::placeholder{color:#cfcfcf}
html[data-look="chats"] .fl-changego{flex:none;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#fff;color:#000;cursor:pointer}
html[data-look="chats"] .fl-change.busy .fl-changego{background:#3a3a3a;color:#fff}
html[data-look="chats"] .fl-stopsq{width:10px;height:10px;border-radius:2px;background:#fff}

/* the describe card (an empty canvas) */
html[data-look="chats"] .fl-describe{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:24px 16px;pointer-events:none}
html[data-look="chats"] .fl-describe[hidden]{display:none}
html[data-look="chats"] .fl-desc{pointer-events:auto;width:min(620px,100%);padding:28px 28px 22px;border:1.5px dashed #2c2c2c;border-radius:22px;background:rgba(10,10,10,.86);
  text-align:center;cursor:default;user-select:text;-webkit-user-select:text}
html[data-look="chats"] .fl-desch{margin:0 0 16px;font-size:18px;line-height:26px;font-weight:600;color:#f4f4f4}
html[data-look="chats"] .fl-descform{display:flex;align-items:center;gap:6px;height:44px;margin:0;padding:0 6px 0 16px;border:1px solid #333;border-radius:22px;background:#292929}
html[data-look="chats"] .fl-descform:focus-within{border-color:#4a4a4a}
html[data-look="chats"] .fl-descinput{flex:1;min-width:0;height:100%;border:0;background:none;color:#fff;font:inherit;font-size:14px;outline:none}
html[data-look="chats"] .fl-descinput::placeholder{color:#8f8f8f}
html[data-look="chats"] .fl-descor{margin:12px 0 0;font-size:13px;line-height:20px;color:#9a9a9a}
html[data-look="chats"] .fl-descerr{margin:12px 0 0;font-size:13px;line-height:20px;color:#ff9a94}
html[data-look="chats"] .fl-descnote{margin:0;font-size:14px;line-height:20px;color:#cfcfcf}

/* ------------------------------------------------------------------ the step panel (n8n's focus panel, docked) */
html[data-look="chats"] .chflow-panel{grid-area:panel;min-width:0;min-height:0;display:flex;flex-direction:column;background:#101010;border-left:1px solid #171717;color-scheme:dark}
html[data-look="chats"] .chflow-panel[hidden]{display:none}
html[data-look="chats"] .chflow-phead{flex:none;display:flex;align-items:center;gap:11px;padding:14px 10px 12px 16px;border-bottom:1px solid #171717}
html[data-look="chats"] .chflow-ptile{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#1b1b1b;border:1.5px solid rgba(255,255,255,.14);color:#fff}
html[data-look="chats"] .chflow-ptitles{flex:1;min-width:0}
html[data-look="chats"] .chflow-ptitle{font-size:14.5px;line-height:20px;font-weight:600;color:#f4f4f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chflow-pkind{font-size:12.5px;line-height:17px;color:#8a8a8a}
html[data-look="chats"] .chflow-pkpart{white-space:nowrap}
html[data-look="chats"] .chflow-px{flex:none;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:9px;background:none;color:#9a9a9a;cursor:pointer}
html[data-look="chats"] .chflow-px:hover{background:#1c1c1c;color:#fff}
html[data-look="chats"] .chflow-pbody{flex:1;min-height:0;overflow-y:auto;padding:2px 16px 18px}
html[data-look="chats"] .chflow-pfield{display:block}
html[data-look="chats"] .chflow-plab{display:block;margin:16px 0 7px;font-size:12px;line-height:16px;font-weight:600;color:#8a8a8a}
html[data-look="chats"] .chflow-prow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
html[data-look="chats"] .chflow-pmuted{font-size:12.5px;line-height:18px;color:#7c7c7c}
html[data-look="chats"] .chflow-select,html[data-look="chats"] .chflow-input{height:40px;min-width:0;padding:0 10px;border:1px solid #262626;border-radius:12px;background:#141414;
  color:#ececec;font:inherit;font-size:13.5px;outline:none}
html[data-look="chats"] .chflow-select{padding-right:8px;cursor:pointer}
html[data-look="chats"] .chflow-select:focus,html[data-look="chats"] .chflow-input:focus,html[data-look="chats"] .chflow-task:focus{border-color:#4a4a4a}
html[data-look="chats"] .chflow-select:disabled,html[data-look="chats"] .chflow-input:disabled{opacity:.7;cursor:default}
html[data-look="chats"] .chflow-input.num{width:76px}
html[data-look="chats"] .chflow-input.time{width:112px}
html[data-look="chats"] .chflow-who{display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 6px;border:1px solid #262626;border-radius:12px;background:#141414}
html[data-look="chats"] .chflow-who .chflow-select{flex:1;height:40px;border:0;background:none;padding-left:0}
html[data-look="chats"] .chflow-whobot{flex:none;width:30px;height:30px;display:grid;place-items:center}
html[data-look="chats"] .chflow-whobot.free{border-radius:9px;background:#1f1f1f;color:#cfcfcf}
html[data-look="chats"] .chflow-task{display:block;width:100%;min-height:140px;max-height:44vh;padding:10px 12px;border:1px solid #262626;border-radius:12px;background:#141414;
  color:#e6e6e6;font:inherit;font-size:13.5px;line-height:20px;resize:vertical;outline:none;box-sizing:border-box}
html[data-look="chats"] .chflow-task::selection{background:rgba(107,140,255,.45)}
html[data-look="chats"] .chflow-punder{display:flex;align-items:flex-start;gap:10px;margin-top:6px}
html[data-look="chats"] .chflow-pprob{flex:1;min-width:0;font-size:13px;line-height:20px;color:#ff7a73}
html[data-look="chats"] .chflow-pprob[hidden],html[data-look="chats"] .chflow-pcount[hidden]{display:none}
html[data-look="chats"] .chflow-pcount{margin-left:auto;flex:none;font-size:12px;line-height:20px;color:#7c7c7c}
html[data-look="chats"] .chflow-ptext{margin-top:14px;padding:10px 12px;border:1px solid #262626;border-radius:12px;background:#141414;color:#d6d6d6;font-size:13.5px;line-height:20px;
  white-space:pre-wrap;overflow-wrap:anywhere}
html[data-look="chats"] .chflow-pnote{margin:10px 0 0;font-size:12.5px;line-height:18px;color:#8a8a8a}
html[data-look="chats"] .chflow-pquiet{margin:8px 0 0;font-size:12.5px;line-height:18px;color:#7c7c7c}
html[data-look="chats"] .chflow-pfoot .chflow-pquiet{margin:0}
html[data-look="chats"] .chflow-pfoot{flex:none;display:flex;align-items:center;min-height:52px;padding:8px 12px 12px 16px;border-top:1px solid #161616}
html[data-look="chats"] .chflow-pfoot .chflow-btn.quiet{margin-left:-8px}
html[data-look="chats"] .chflow-waitpart{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#9a9a9a}
html[data-look="chats"] .chflow-pick{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:12px;border:1px solid #232323;border-radius:14px;background:#141414;
  color:#ececec;font:inherit;text-align:left;cursor:pointer}
html[data-look="chats"] .chflow-pick:hover{background:#191919;border-color:#2e2e2e}
html[data-look="chats"] .chflow-pickg{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#1b1b1b;border:1.5px solid rgba(255,255,255,.12)}
html[data-look="chats"] .chflow-pickt{display:flex;flex-direction:column;min-width:0}
html[data-look="chats"] .chflow-pickv{font-size:14px;line-height:20px;font-weight:600}
html[data-look="chats"] .chflow-pickh{font-size:12.5px;line-height:18px;color:#8a8a8a}

/* ------------------------------------------------------------------ From Teach (W2): the rail's cards, the drop zone, "Made from", Teach's question */
/* the foot stays at the bottom of the rail while the cards scroll under it */
html[data-look="chats"] .chflow-rail{padding-bottom:0}
html[data-look="chats"] .chflow-railfoot{position:sticky;bottom:0;z-index:1;padding:12px 0;background:#0c0c0c}
html[data-look="chats"] .chflow-railfoot::before{content:"";position:absolute;left:-10px;right:-10px;top:-16px;height:16px;background:linear-gradient(rgba(12,12,12,0),#0c0c0c);pointer-events:none}
html[data-look="chats"] .chflow-teach{display:flex;flex-direction:column}
html[data-look="chats"] .chflow-teach::before{content:"";display:block;height:1px;margin:10px 4px 0;background:#1a1a1a}
html[data-look="chats"] .chflow-teachhint{padding:0 8px 10px;font-size:12.5px;line-height:18px;color:#8a8a8a}
html[data-look="chats"] .chflow-tcard{position:relative;flex:none;display:flex;flex-direction:column;gap:8px;margin:0 0 8px;padding:8px 8px 10px;border:1px solid #202020;
  border-radius:14px;background:#131313;cursor:grab;outline:none;-webkit-user-select:none;user-select:none}
html[data-look="chats"] .chflow-tcard:hover{border-color:#2c2c2c;background:#161616}
html[data-look="chats"] .chflow-tcard:active{cursor:grabbing}
html[data-look="chats"] .chflow-tcard:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
html[data-look="chats"] .chflow-tcard.lifted{opacity:.35;border-style:dashed}
html[data-look="chats"] .chflow-tpic{position:relative;aspect-ratio:16/10;display:grid;place-items:center;border-radius:9px;overflow:hidden;background:#161616}
html[data-look="chats"] .chflow-tpicg{display:grid;color:#5c5c5c}
html[data-look="chats"] .chflow-tpic>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;box-shadow:none;
  object-fit:cover;object-position:top left;background:#161616;pointer-events:none}
html[data-look="chats"] .chflow-tpic .mg-picname{display:none}
html[data-look="chats"] .chflow-tpic.has>.chflow-tpicg{visibility:hidden}
html[data-look="chats"] .chflow-tgrip{position:absolute;top:6px;right:6px;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:rgba(0,0,0,.55);
  color:#cfcfcf;pointer-events:none}
html[data-look="chats"] .chflow-tuse{position:absolute;right:6px;bottom:6px;opacity:0;transition:opacity .12s ease}
html[data-look="chats"] .chflow-btn.secondary.chflow-tuse{background:rgba(22,22,22,.94);box-shadow:0 0 0 1px rgba(255,255,255,.14)}
html[data-look="chats"] .chflow-btn.secondary.chflow-tuse:hover{background:#262626}
html[data-look="chats"] .chflow-tcard:hover .chflow-tuse,html[data-look="chats"] .chflow-tcard:focus-within .chflow-tuse{opacity:1}
html[data-look="chats"] .chflow-tuse:focus-visible{opacity:1;outline:2px solid #6b8cff;outline-offset:2px}
@media (hover:none),(max-width:800px){ html[data-look="chats"] .chflow-tuse{opacity:1} }
html[data-look="chats"] .chflow-ttitle{padding:0 2px;font-size:13.5px;line-height:18px;font-weight:600;color:#ececec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chflow-tmeta{margin-top:-6px;padding:0 2px;font-size:12px;line-height:16px;color:#7c7c7c}
html[data-look="chats"] .chflow-textbtn{padding:0;border:0;background:none;color:#cfcfcf;font:inherit;text-decoration:underline;cursor:pointer}

/* a card being dragged: the canvas shows where it goes (lit while it is over it); an open sheet's scrim lets it through */
html[data-look="chats"] .fl-drop{position:absolute;left:50%;top:47%;z-index:5;transform:translate(-50%,-50%);box-sizing:border-box;width:min(540px,calc(100% - 48px));
  min-height:min(340px,calc(100% - 140px));padding:34px 32px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:1.5px dashed #3a3a3a;border-radius:22px;background:rgba(12,12,12,.88)}
html[data-look="chats"] .fl-drop.lit{border-color:rgba(255,255,255,.55);background:rgba(20,20,20,.94);box-shadow:0 0 0 6px rgba(255,255,255,.03)}
html[data-look="chats"] .fl-dropic{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#1c1c1c;border:1px solid #2e2e2e;color:#fff}
html[data-look="chats"] .fl-droptitle{margin-top:14px;font-size:16px;line-height:22px;font-weight:600;color:#f4f4f4}
html[data-look="chats"] .fl-dropline{margin-top:4px;max-width:340px;font-size:13px;line-height:19px;color:#9a9a9a;text-wrap:balance}
html[data-look="chats"] .chflow-root[data-drag="1"] .chflow-scrim{background:transparent;pointer-events:none}
html[data-look="chats"] .chflow-root[data-drag="1"] .fl-describe{visibility:hidden}

/* the job panel's "Made from": the recording's card */
html[data-look="chats"] .chflow-src{display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;padding:8px 10px 8px 8px;border:1px solid #262626;border-radius:12px;
  background:#141414;color:inherit;font:inherit;text-align:left}
html[data-look="chats"] button.chflow-src{cursor:pointer}
html[data-look="chats"] button.chflow-src:hover{background:#181818;border-color:#303030}
html[data-look="chats"] button.chflow-src:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
html[data-look="chats"] .chflow-tpic.sm{flex:none;width:72px;height:45px;aspect-ratio:auto;border-radius:6px}
html[data-look="chats"] .chflow-srct{flex:1;min-width:0;display:flex;flex-direction:column}
html[data-look="chats"] .chflow-srcn{font-size:13.5px;line-height:19px;font-weight:600;color:#ececec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chflow-srcd{font-size:12px;line-height:17px;color:#7c7c7c}
html[data-look="chats"] .chflow-srcgo{flex:none;display:grid;color:#6a6a6a}

/* Teach's Saved card asks "Should your employees do this on their own?" (p21's question bubble: #222, radius 18, ≤ 640) */
html[data-look="chats"] .tc-card:has(> .chflow-offer){max-width:640px}
html[data-look="chats"] .chflow-offer{box-sizing:border-box;width:100%;max-width:640px;margin-top:6px;padding:14px 16px 14px 14px;display:flex;gap:12px;border-radius:18px;
  background:#222;text-align:left}
html[data-look="chats"] .chflow-offeric{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#2e2e2e;color:#fff}
html[data-look="chats"] .chflow-offert{flex:1;min-width:0}
html[data-look="chats"] .chflow-offerq{font-size:14.5px;line-height:20px;font-weight:600;color:#fff}
html[data-look="chats"] .chflow-offerwhy{margin-top:2px;font-size:13.5px;line-height:20px;color:#bdbdbd}
html[data-look="chats"] .chflow-offerrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
html[data-look="chats"] .chflow-offer .chflow-btn.secondary{background:#333}
html[data-look="chats"] .chflow-offer .chflow-btn.secondary:hover:not(:disabled){background:#3d3d3d}
/* one primary per area: while the question stands, "Teach another" steps back to a secondary button */
html[data-look="chats"] .tc-card:has(> .chflow-offer:not(.made)) > .tc-row .mem-choose{background:#2b2b2b;color:#fff}

/* ------------------------------------------------------------------ the phone (≤ 800 px): a vertical canvas, the panel a bottom sheet */
@media (max-width:1359px){
  /* the chip shows only the bolt and the dot (its words are its title) */
  html[data-look="chats"] .chflow-chip{gap:6px;padding:0 10px}
  html[data-look="chats"] .chflow-chiptext,html[data-look="chats"] .chflow-chipsep,html[data-look="chats"] .chflow-chipword,html[data-look="chats"] .chflow-chipgo{display:none}
}
@media (max-width:800px){
  html[data-look="chats"] .chflow-root,html[data-look="chats"] .chflow-root[data-panel="1"]{grid-template-columns:minmax(0,1fr);grid-template-areas:"canvas"}
  html[data-look="chats"] .chflow-chip{display:none}
  html[data-look="chats"] .chflow-panel{position:fixed;left:0;right:0;bottom:0;z-index:42;height:85vh;border-left:0;border-top:1px solid #242424;border-radius:16px 16px 0 0;
    box-shadow:0 -12px 40px rgba(0,0,0,.6)}
  html[data-look="chats"] .chflow-root[data-panel="1"] .chflow-pscrim{display:block;position:fixed;inset:0;z-index:41;background:rgba(0,0,0,.45)}
  html[data-look="chats"] .chflow-rail{width:min(280px,86vw)}
  /* labels to the right of the nodes, top to bottom */
  html[data-look="chats"] .fl-canvas[data-dir="v"] .fl-label{left:100%;top:50%;width:176px;margin:0 0 0 14px;transform:translateY(-50%);text-align:left}
  html[data-look="chats"] .fl-canvas[data-dir="v"] .fl-node.line .fl-label{width:176px;margin-left:14px}
  html[data-look="chats"] .fl-canvas[data-dir="v"] .fl-sub{justify-content:flex-start}
  html[data-look="chats"] .fl-canvas[data-dir="v"] .fl-h.in{left:50%;top:-7px;margin:0 0 0 -6px}
  html[data-look="chats"] .fl-canvas[data-dir="v"] .fl-h.out{left:50%;right:auto;top:auto;bottom:-7px;margin:0 0 0 -6px}
  html[data-look="chats"] .fl-top{left:12px;right:12px;top:10px}
  html[data-look="chats"] .fl-notes{max-width:calc(100% - 110px)}
  html[data-look="chats"] .fl-ctrl{left:auto;right:12px;top:10px;bottom:auto;flex-direction:row}
  html[data-look="chats"] .fl-ctrl button+button{border-top:0;border-left:1px solid #1f1f1f}
  html[data-look="chats"] .fl-foot{width:calc(100% - 24px);bottom:12px}
  html[data-look="chats"] .fl-desc{padding:22px 16px 18px}
  html[data-look="chats"] .fl-descform{height:auto;flex-wrap:wrap;padding:6px;border-radius:18px}
  html[data-look="chats"] .fl-descinput{flex:1 1 100%;height:36px;padding:0 10px}
  html[data-look="chats"] .fl-descform .chflow-btn{flex:1 1 100%}
  html[data-look="chats"] .fl-mid{top:52px}
}
@media (prefers-reduced-motion:reduce){
  html[data-look="chats"] .fl-in,html[data-look="chats"] .fl-skel,html[data-look="chats"] .fl-spin{animation:none}
  html[data-look="chats"] .fl-node.run::before,html[data-look="chats"] .fl-node.wait::before,
  html[data-look="chats"] .fl-group.run::before,html[data-look="chats"] .fl-group.wait::before{animation:none}
  html[data-look="chats"] .chflow-rail,html[data-look="chats"] .fl-world{transition:none}
  html[data-look="chats"] .chflow-tuse{transition:none}
}