/* One record graph evolves through Records, Agents and Learning. */
.product-preview .wi-demo.has-agent-scenes{height:auto}
.wi-demo.has-agent-scenes .wi-demo-scenes{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.wi-demo.has-agent-scenes .wi-demo-scenes::-webkit-scrollbar{display:none}
.wi-demo.has-agent-scenes .wi-demo-scenes li{flex:1 0 88px}
.wi-demo.has-agent-scenes .wi-demo-scenes button{min-height:44px;min-width:44px}
.wos[data-page="agents"] [data-p="graph"],.wos[data-page="learning"] [data-p="graph"]{opacity:1;transform:none;transition:none}
.wos-agent-conversation{display:none}
.wos[data-page="agents"] .wos-thread,.wos[data-page="learning"] .wos-thread{display:none}
.wos[data-page="agents"] .wos-agent-conversation,.wos[data-page="learning"] .wos-agent-conversation{display:block;flex:1;min-height:0;padding:12px;overflow:hidden}
.wos-agent-conversation [data-loop-chat]{display:none}
.wos[data-page="agents"] [data-loop-chat="agents"],.wos[data-page="learning"] [data-loop-chat="learning"]{display:block}
.wos-loop-chatcard{margin-top:12px}
.wos-loop-dl{margin:0;display:grid;gap:12px}
.wos-loop-dl dt{font-size:11px;color:var(--muted);margin-bottom:3px}
.wos-loop-dl dd{margin:0;font-size:12px;line-height:1.5;color:var(--ink)}
.wos-loop-chat-result{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--muted)}
.wos-loop-advice{margin:0;color:var(--ink);font-size:12px;line-height:1.6}
.wos-loop-note{margin-top:12px;padding:12px;border-left:2px solid var(--gold);font-size:12px;line-height:1.5;color:var(--ink);background:var(--gold-bg)}
.wos .wos-graph-status{display:none;position:absolute;right:24px;top:24px}
.wos[data-graph-stage="agents"] .wos-graph-status,.wos[data-graph-stage="learning"] .wos-graph-status{display:inline-flex}
.wos[data-graph-stage="agents"] [data-k="graph-title"],.wos[data-graph-stage="learning"] [data-k="graph-title"]{padding-right:100px}
.wos-gvsvg>svg{position:relative;z-index:1;pointer-events:none}
.wos-flow-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0}
.wos-flow-nodes{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}
.wos[data-graph-stage="agents"] .wos-flow-canvas,.wos[data-graph-stage="learning"] .wos-flow-canvas,.wos[data-graph-stage="agents"] .wos-flow-nodes,.wos[data-graph-stage="learning"] .wos-flow-nodes{opacity:1;transition:opacity .5s ease}
.wos-flow-node{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);box-sizing:border-box;transition:border-color .3s,box-shadow .3s}
.wos-flow-node b{font-size:12px;line-height:1.1;font-weight:600}
.wos-flow-node span{font-size:10px;line-height:1.2;color:var(--muted)}
.wos-flow-node i{position:absolute;right:7px;top:7px;width:4px;height:4px;border-radius:50%;background:var(--faint)}
.wos-flow-node[data-state="active"]{border-color:var(--info);box-shadow:0 0 14px color-mix(in srgb,var(--info) 15%,transparent)}
.wos-flow-node[data-state="active"] i{background:var(--info)}
.wos-flow-node[data-state="hold"]{border-color:var(--gold);box-shadow:0 0 16px color-mix(in srgb,var(--gold) 18%,transparent)}
.wos-flow-node[data-state="hold"] i{background:var(--gold)}
.wos-flow-node[data-state="done"]{border-color:color-mix(in srgb,var(--ok) 60%,var(--line))}
.wos-flow-node[data-state="done"] i{background:var(--ok)}
.wos-flow-node[data-state="done"] span{color:var(--ok)}
.wos-graph-legend{position:absolute;left:12px;top:9px;display:none;gap:14px;font-size:10px;line-height:1;color:var(--muted);z-index:3}
.wos-graph-legend span{display:flex;align-items:center;gap:5px}
.wos-graph-legend span:before{content:"";width:12px;border-top:1px solid var(--muted)}
.wos-graph-legend span:nth-child(2):before{border-color:var(--info)}
.wos-graph-legend span:nth-child(3):before{border-color:var(--gold);border-top-style:dashed}
.wos[data-graph-stage="agents"] .wos-graph-legend,.wos[data-graph-stage="learning"] .wos-graph-legend{display:flex}
.wos[data-graph-stage="agents"] .wos-ge,.wos[data-graph-stage="learning"] .wos-ge{opacity:.22}
.wos[data-graph-stage="agents"] .wos-gn,.wos[data-graph-stage="learning"] .wos-gn{opacity:.4;transition:opacity .5s}
.wos[data-graph-stage="agents"] .wos-gn.is-context,.wos[data-graph-stage="learning"] .wos-gn.is-context{opacity:1}
.wos[data-graph-stage="agents"] .wos-gnew,.wos[data-graph-stage="learning"] .wos-gnew,.wos[data-graph-stage="agents"] .wos-halo,.wos[data-graph-stage="learning"] .wos-halo{opacity:0}
.wos-gn.is-reading .wos-gb{stroke:var(--info);filter:drop-shadow(0 0 5px var(--info))}
.wos-gn.is-checked .wos-gb{stroke:var(--ok);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ok) 30%,transparent))}
.wos[data-graph-stage="agents"] .wos-gvnote,.wos[data-graph-stage="learning"] .wos-gvnote{opacity:1;transform:none;background:var(--panel);border-color:var(--line);color:var(--muted)}
.wos .wos-gvnote.is-hold{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));color:var(--gold-lt)}
.wos .wos-gvnote.is-checked{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));color:var(--ink)}
.wos.is-narrow .wos-flow-node,.wos.is-graph-compact .wos-flow-node{padding:4px 6px;gap:3px}
.wos.is-narrow .wos-flow-node b,.wos.is-graph-compact .wos-flow-node b{font-size:11px}
.wos.is-narrow .wos-flow-node span,.wos.is-graph-compact .wos-flow-node span{font-size:10px}
.wos.is-narrow .wos-flow-node i,.wos.is-graph-compact .wos-flow-node i{right:4px;top:4px;width:3px;height:3px}
.wos.is-narrow .wos-graph-status{right:14px;top:18px}
.wos.is-narrow[data-graph-stage="learning"] [data-k="graph-title"]{padding-right:70px;font-size:16px}
.wos.is-narrow .wos-graph-legend{left:9px;top:7px;font-size:9px;gap:10px}
.wos.is-narrow .wos-gvnote{font-size:10.5px;line-height:1.4;padding:6px 8px}
@media(max-width:760px){.wi-demo.has-agent-scenes .wi-demo-scenes li{flex:0 0 48px}.wi-demo.has-agent-scenes .wi-demo-play{height:44px;min-width:44px;width:44px}.wi-demo.has-agent-scenes .wi-demo-now{height:auto;min-height:68px}}
@media(prefers-reduced-motion:reduce){.wos-flow-node,.wos-flow-canvas,.wos-flow-nodes,.wos-gn{transition:none!important}}