/* Fisher — "A chatbot talks. An agent acts." diagram (v07): responsive five-tool
   layout, computed connectors, staggered reveal, replay control.
   Progressive enhancement: without JS (or with reduced motion) the complete
   diagram is shown statically. */

/* --- layout ---------------------------------------------------------- */
.agent-fig .hands{position:relative;width:min(100%,290px);aspect-ratio:290/250;height:auto;margin-inline:auto}
.agent-fig .hands .tool.t0{transform:translateX(-50%)}
.agent-fig .hands .hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3}
.agent-fig .hands .tool{position:absolute;z-index:2}
.agent-fig .hands .spoke{position:absolute;top:50%;left:50%;height:2px;background:var(--teal);transform-origin:left center;z-index:1}

/* narrow phones: keep all five nodes inside the diagram, no overlap */
@container (max-width:340px){
  .agent-fig .hands{width:100%;aspect-ratio:1/1;max-width:300px}
  .agent-fig .hands .hub{width:64px;height:64px;border-radius:15px;font-size:28px}
  .agent-fig .hands .hub .gic{width:32px;height:32px}
  .agent-fig .tool{width:56px;font-size:10.5px}
  .agent-fig .tool .ic{width:40px;height:40px;font-size:18px}
  .agent-fig .tool.t1{top:12%;right:0}.agent-fig .tool.t4{top:12%;left:0}
  .agent-fig .tool.t2{bottom:6%;right:3%}.agent-fig .tool.t3{bottom:6%;left:3%}
}

/* single-column layouts: chatbot card becomes a compact row */
@container (max-width:520px){
  .agent-fig .fig-card:not(.agent-card){display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}
  .agent-fig .fig-card:not(.agent-card) .brain{width:64px;height:64px;border-radius:16px;font-size:30px;margin:0;flex:0 0 auto}
  .agent-fig .fig-card:not(.agent-card) .cap{margin-top:0}
  .agent-fig .agent-connector{line-height:1}
}

/* --- animation states (only while the controller has armed the diagram) ---- */
.agent-fig .hands.agent-armed .tool{opacity:0;transition:opacity .45s ease}
.agent-fig .hands.agent-armed .tool.on{opacity:1}
.agent-fig .hands.agent-armed .spoke{opacity:0;transition:opacity .45s ease}
.agent-fig .hands.agent-armed .spoke.on{opacity:.55}
.agent-fig .hands.agent-armed .tool .door{opacity:0;transition:opacity .4s ease}
.agent-fig .hands.agent-armed.doors .tool.on .door{opacity:.85}
/* static / finished states */
.agent-fig .hands:not(.agent-armed) .tool,.agent-fig .hands.agent-static .tool{opacity:1}
.agent-fig .hands:not(.agent-armed) .spoke,.agent-fig .hands.agent-static .spoke{opacity:.55}
.agent-fig .hands:not(.agent-armed) .tool .door,.agent-fig .hands.agent-static .tool .door{opacity:.85}

/* --- replay control (explanatory, not a commercial CTA) ------------------- */
.agent-replay{display:inline-flex;align-items:center;gap:6px;margin:14px auto 0;padding:9px 16px;border-radius:10px;
  border:1px solid var(--line);background:transparent;color:var(--teal);font:inherit;font-family:var(--font-brand,inherit);font-size:14px;font-weight:600;cursor:pointer;
  transition:background .2s ease,border-color .2s ease}
.agent-replay:hover{border-color:var(--teal)}
.agent-replay:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.agent-replay[disabled]{opacity:.55;cursor:default}
.agent-replay-wrap{text-align:center}
.agent-replay[hidden]{display:none}
@media (prefers-reduced-motion: reduce){
  .agent-replay{display:none}
  .agent-fig .hands .tool{opacity:1 !important;transition:none !important}
  .agent-fig .hands .tool.t0{transform:translateX(-50%) !important}
  .agent-fig .hands .tool .door{opacity:.85 !important;transition:none !important}
  .agent-fig .hands .spoke{opacity:.55 !important;transition:none !important}
}