:root{--ink:#10131a;--muted:#737c91;--line:rgba(16,18,24,.07);--ease:cubic-bezier(.16,1,.3,1);--green:#22a861;--amber:#d58a00}
*{box-sizing:border-box}
html,body{margin:0;background:transparent;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Arial,sans-serif;color:var(--ink)}
body{min-height:100vh;display:grid;place-items:center;overflow:hidden}
.demo{width:min(100%,1680px);padding:clamp(8px,1.4vw,22px)}
.frame{position:relative;aspect-ratio:1672/941;overflow:hidden;border-radius:clamp(18px,2vw,31px);background:#fbfaf8;box-shadow:0 30px 90px rgba(31,20,20,.10);opacity:0;transform:scale(1.015);animation:boot .9s var(--ease) .08s forwards}
@keyframes boot{to{opacity:1;transform:scale(1)}}
.screen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}

/* Input typing overlay — the composer itself always stays visible. */
.prompt-mask{position:absolute;left:21.55%;top:53.15%;width:50.2%;height:4.7%;border-radius:9px;background:linear-gradient(90deg,rgba(255,255,255,.995) 0%,rgba(255,255,255,.995) 90%,rgba(255,255,255,0) 100%);opacity:0;transition:.18s ease;z-index:8}
.prompt-mask.show{opacity:1}
.typed{position:absolute;left:22.2%;top:54.03%;width:47.8%;font-size:clamp(9px,1.2vw,19px);line-height:1.32;letter-spacing:-.015em;color:#182036;opacity:0;z-index:9;pointer-events:none}
.typed.show{opacity:1}
.caret{display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.12em;background:#e31021;animation:blink .75s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.cursor{position:absolute;left:42%;top:56%;width:18px;height:25px;z-index:20;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));transform:translate(-50%,-50%) scale(.88);transition:left .75s var(--ease),top .75s var(--ease),opacity .2s,transform .16s var(--ease);pointer-events:none}
.cursor.show{opacity:1} .cursor.click{transform:translate(-50%,-50%) scale(.68)}
.cursor svg{width:100%;height:100%}
.send-ring{position:absolute;left:73.25%;top:64.05%;width:3.45%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(227,16,33,.18);opacity:0;transform:translate(-50%,-50%) scale(.7);z-index:7;transition:.22s var(--ease)}
.send-ring.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.send-hit{position:absolute;left:71.5%;top:61.95%;width:4.2%;height:4.3%;z-index:30;background:transparent;border:0;border-radius:999px;cursor:pointer;padding:0;appearance:none;-webkit-appearance:none}
.send-hit:focus-visible{outline:2px solid rgba(227,16,33,.4);outline-offset:2px}

/* Chat is ABOVE the composer. It never covers or replaces the input. */
.chat{position:absolute;left:20.45%;top:8.35%;width:57.05%;height:43.8%;z-index:10;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.992);box-shadow:0 18px 46px rgba(0,0,0,.065);opacity:0;transform:translateY(10px);transition:.38s var(--ease);overflow:hidden}
.chat.show{opacity:1;transform:translateY(0)}
.chat-head{height:9%;min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;border-bottom:1px solid rgba(16,18,24,.055)}
.chat-title{display:flex;align-items:center;gap:9px;font-size:clamp(8px,.83vw,13px);font-weight:650}
.chat-title img{width:24px;height:24px;object-fit:contain}
.chat-meta{display:flex;align-items:center;gap:8px;font-size:clamp(7px,.68vw,11px);color:var(--muted)}
.live-dot{width:7px;height:7px;border-radius:50%;background:#28b969;box-shadow:0 0 0 4px rgba(40,185,105,.09)}
.chat-body{position:relative;height:91%;padding:16px 16px 16px}
.stage{position:absolute;inset:12px 15px 14px;opacity:0;transform:translateY(7px);pointer-events:none;transition:.32s var(--ease)}
.stage.show{opacity:1;transform:translateY(0)}
.user-line{display:flex;justify-content:flex-end;margin-bottom:10px}
.user-bubble{max-width:74%;padding:8px 11px;border-radius:15px 15px 5px 15px;background:#f1f2f4;font-size:clamp(7px,.73vw,11.5px);line-height:1.3;color:#2b3342}
.run-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.run-summary b{font-size:clamp(8px,.82vw,13px);letter-spacing:-.01em}
.run-summary span{font-size:clamp(7px,.68vw,10.8px);color:var(--muted);padding:4px 8px;border-radius:999px;background:#f5f6f7}
.agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.agent-card{display:grid;grid-template-columns:26px 1fr 15px;gap:8px;align-items:center;padding:9px 10px;border:1px solid rgba(16,18,24,.055);border-radius:14px;background:#fafbfc;min-width:0;transition:.28s var(--ease)}
.agent-card.running{background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.045)}
.agent-card.done{background:#f7fbf8;border-color:rgba(34,168,97,.16)}
.agent-card img{width:24px;height:24px;object-fit:contain}
.agent-copy{min-width:0}
.agent-copy b{display:block;font-size:clamp(7.3px,.74vw,11.8px);line-height:1.1;color:#171d2a;white-space:nowrap}
.agent-copy span{display:block;margin-top:3px;font-size:clamp(6.4px,.62vw,10px);line-height:1.15;color:#7a8295;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.state{width:14px;height:14px;display:grid;place-items:center}
.running .state:before{content:"";width:10px;height:10px;border:1.6px solid #c9ced7;border-top-color:#171b25;border-radius:50%;animation:spin .72s linear infinite}
.done .state:before{content:"✓";font-size:13px;font-weight:800;color:var(--green)}
.queued .state:before{content:"";width:7px;height:7px;border-radius:50%;background:#d8dce3}
@keyframes spin{to{transform:rotate(360deg)}}
.handoff{margin-top:8px;padding:7px 9px;border-radius:11px;background:#f6f7f8;font-size:clamp(6.7px,.66vw,10.5px);color:#657085;opacity:0;transform:translateY(5px);transition:.3s var(--ease)}
.handoff.show{opacity:1;transform:translateY(0)}
.handoff b{color:#222a39;font-weight:650}

.approval{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;height:100%;padding:10px 8px}
.approval h3,.results h3{margin:0;font-size:clamp(13px,1.18vw,19px);letter-spacing:-.025em}
.approval p,.results p{margin:5px 0 0;font-size:clamp(7.5px,.74vw,11.8px);line-height:1.3;color:#6f788d}
.approval-metrics{display:flex;gap:8px;margin-top:10px}
.metric{padding:7px 9px;border-radius:11px;background:#f7f8f9;border:1px solid rgba(0,0,0,.03);min-width:82px}
.metric b{display:block;font-size:clamp(10px,.98vw,15px);line-height:1} .metric span{display:block;margin-top:3px;font-size:clamp(6.4px,.62vw,9.8px);color:#7a8295}
.approval-badge{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:#fff8e8;color:#9d6600;font-size:clamp(7px,.7vw,11px);white-space:nowrap;border:1px solid rgba(213,138,0,.14)}
.approval-badge i{width:8px;height:8px;border-radius:50%;background:#e6a01a}

.results{height:100%;padding:8px 6px}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.results-head span{font-size:clamp(7px,.68vw,10.8px);color:#5f6a7e;padding:5px 8px;border-radius:999px;background:#f3f5f6}
.result-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.result-row{display:grid;grid-template-columns:1fr 15px;gap:8px;align-items:center;padding:9px 10px;border:1px solid rgba(16,18,24,.055);border-radius:13px;background:#fafbfc}
.result-row b{display:block;font-size:clamp(7.2px,.73vw,11.5px);line-height:1.1}
.result-row span{display:block;margin-top:3px;font-size:clamp(6.2px,.61vw,9.7px);line-height:1.15;color:#7a8295}
.result-check{width:15px;height:15px;border-radius:50%;background:#eaf7ef;color:var(--green);display:grid!important;place-items:center;font-size:10px!important;font-weight:800;margin:0!important}

/* Right panel fully replaces the screenshot's old In Progress card. */
.agents-panel{position:absolute;left:78.05%;top:51.4%;width:18.95%;height:27.15%;z-index:12;padding:15px 16px 14px;border-radius:22px;background:#fff;border:1px solid rgba(16,18,24,.06);box-shadow:0 13px 34px rgba(0,0,0,.045);overflow:hidden}
.agents-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.agents-head b{font-size:clamp(7px,.76vw,12px);letter-spacing:.22em;color:#2f3850}
.agent-count{min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:#f3f4f6;font-size:clamp(7px,.68vw,10.5px);font-weight:650;color:#566075}
.side-row{display:grid;grid-template-columns:30px 1fr 42px;gap:11px;align-items:center;padding:9px 0;border-top:1px solid rgba(16,18,24,.045)}
.side-row:first-of-type{border-top:0}
.side-row img{width:28px;height:28px;object-fit:contain}
.side-copy{min-width:0}
.side-copy b{display:block;font-size:clamp(7.4px,.76vw,12.2px);font-weight:610;line-height:1.1;color:#1d2432}
.side-copy span{display:block;margin-top:3px;font-size:clamp(6.2px,.61vw,9.8px);color:#7a8295;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track{height:4px;margin-top:6px;border-radius:99px;background:#e7e9ed;overflow:hidden}
.fill{height:100%;width:0;border-radius:inherit;transition:width .6s var(--ease)}
#side-agentcess .fill{background:linear-gradient(90deg,#1464ff,#42a5ff)}
#side-magpie .fill{background:linear-gradient(90deg,#171b25,#4158ff)}
#side-immersion .fill{background:linear-gradient(90deg,#e31021,#ff6a78)}
.side-state{text-align:right;font-size:clamp(6.5px,.65vw,10.4px);color:#677086}
.side-state.check{color:var(--green);font-size:16px;font-weight:800}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.frame{opacity:1;transform:none}}
@media (max-width:700px){.chat{left:20.1%;width:57.4%;top:9.2%;height:43.1%}.agents-panel{left:78.0%;width:19.0%;height:27.6%;padding:10px 10px 9px}.agent-card{padding:6px;grid-template-columns:20px 1fr 12px}.agent-card img{width:19px;height:19px}.side-row{grid-template-columns:22px 1fr 31px;gap:6px;padding:7px 0}.side-row img{width:21px;height:21px}.send-hit{left:71.2%;top:61.5%;width:4.6%;height:4.8%}}