/* Scene "flow" — workflow nodes, travelling tokens, human review gate, run log */
.fl { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 16px 0; }
.fl-tabs { flex: none; display: flex; gap: 6px; margin-bottom: 12px; overflow: hidden; }
.fl-tab { flex: none; height: 26px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 13px; border: 1px solid var(--line); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--dim); transition: all 0.35s var(--ease); }
.fl-tab.is-on { border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.14); color: var(--text); }
.fl-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 14px; }
.fl-nodes { display: flex; flex-direction: column; justify-content: center; min-height: 0; transition: opacity 0.25s; }
.fl-nodes.is-swap { opacity: 0; }
.fl-node { position: relative; flex: 0 1 46px; min-height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 11px; border: 1px solid var(--line); background: rgba(140, 165, 255, 0.05); transition: border-color 0.35s, background 0.35s, box-shadow 0.35s; }
.fl-code { flex: none; display: grid; place-items: center; width: 34px; height: 24px; border-radius: 7px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.04em; color: #9bb8ff; background: rgba(var(--accent-rgb), 0.16); border: 1px solid rgba(var(--accent-rgb), 0.3); }
.fl-ai .fl-code { color: #c9b8ff; background: rgba(154, 131, 255, 0.18); border-color: rgba(154, 131, 255, 0.4); }
.fl-human .fl-code { color: var(--amber); background: rgba(255, 190, 92, 0.12); border-color: rgba(255, 190, 92, 0.4); }
.fl-action .fl-code { color: var(--mint); background: rgba(87, 242, 176, 0.1); border-color: rgba(87, 242, 176, 0.35); }
.fl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fl-txt b { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-txt span { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-state { flex: none; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.fl-node.is-run { border-color: rgba(var(--accent-rgb), 0.8); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14); }
.fl-node.is-run .fl-state { color: var(--cyan); animation: fl-blink 0.8s steps(2) infinite; }
.fl-ai.is-run { border-color: rgba(154, 131, 255, 0.85); box-shadow: 0 0 0 3px rgba(154, 131, 255, 0.16), 0 0 24px -6px rgba(154, 131, 255, 0.8); }
.fl-node.is-wait { border-color: rgba(255, 190, 92, 0.8); background: rgba(255, 190, 92, 0.06); box-shadow: 0 0 0 3px rgba(255, 190, 92, 0.12); }
.fl-node.is-wait .fl-state { color: var(--amber); animation: fl-blink 0.8s steps(2) infinite; }
.fl-node.is-done { border-color: rgba(87, 242, 176, 0.4); }
.fl-node.is-done .fl-state { color: var(--mint); }
.fl-node.is-done .fl-state::before { content: "✓ "; }
@keyframes fl-blink { 50% { opacity: 0.35; } }
.fl-wire { position: relative; flex: 0 1 12px; min-height: 5px; width: 2px; margin-left: 26px; background: var(--line-2); transition: background 0.3s; }
.fl-wire.is-lit { background: linear-gradient(180deg, var(--accent), var(--mint)); }
.fl-wire i { position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); opacity: 0; }
.fl-wire.is-go i { animation: fl-tok 0.4s linear forwards; }
@keyframes fl-tok { 0% { top: -4px; opacity: 1; } 100% { top: calc(100% - 4px); opacity: 1; } }
.fl-log { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: 11px; border: 1px solid var(--line); background: rgba(5, 10, 28, 0.55); padding: 10px 12px; overflow: hidden; font-family: var(--f-mono); }
.fl-log-h { flex: none; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.fl-lines { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; }
.fl-line { display: flex; gap: 8px; font-size: 10.5px; line-height: 1.35; color: var(--muted); animation: fl-in 0.4s var(--ease); }
.fl-line .fl-t { flex: none; color: var(--dim); }
.fl-line.is-ai span:last-child { color: #c9b8ff; }
.fl-line.is-wait span:last-child { color: var(--amber); }
.fl-line.is-human span:last-child { color: var(--mint); }
@keyframes fl-in { from { opacity: 0; transform: translateY(6px); } }
.fl-status { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; margin: 12px -16px 0; padding: 0 16px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.fl-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.fl-status.is-done { color: var(--mint); }
@media (max-width: 560px) {
  .fl { padding: 10px 10px 0; }
  .fl-tabs { margin-bottom: 8px; gap: 4px; }
  .fl-tab { height: 22px; padding: 0 8px; font-size: 9.5px; }
  .fl-main { grid-template-columns: minmax(0, 1fr); }
  .fl-log { display: none; }
  .fl-node { flex-basis: 40px; gap: 8px; }
  .fl-wire { flex-basis: 8px; margin-left: 24px; }
  .fl-status { margin: 8px -10px 0; padding: 0 10px; height: 34px; font-size: 9.5px; }
}