/* Multi-Agent Orchestration — mock simulation styles (no framework) */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0b1120; --panel:#0f172a; --line:#243049; --muted:#94a3b8;
  --idle:#64748b; --active:#38bdf8; --agg:#f59e0b; --done:#34d399; --violet:#a78bfa;
}
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:#e2e8f0; min-height:100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #1e293b 0%, #0b1120 60%);
}
.wrap { max-width:1200px; margin:0 auto; padding:24px 16px 40px; }

/* header */
header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:18px; }
header h1 { font-size:20px; font-weight:700; }
header p { font-size:13px; color:var(--muted); margin-top:2px; }
header .task { color:#cbd5e1; }
.controls { display:flex; align-items:center; gap:6px; }
.controls .lbl { font-size:12px; color:var(--muted); margin-right:2px; }
.speed-btn { font-size:12px; padding:5px 8px; border-radius:6px; border:1px solid var(--line);
  background:transparent; color:#cbd5e1; cursor:pointer; }
.speed-btn:hover { background:#1e293b; }
.speed-btn.on { background:var(--active); border-color:var(--active); color:#04121f; font-weight:600; }
.btn { font-size:13px; padding:7px 14px; border-radius:8px; cursor:pointer; border:1px solid var(--line); background:transparent; color:#cbd5e1; }
.btn:hover { background:#1e293b; }
.btn.run { background:var(--done); border-color:var(--done); color:#04231a; font-weight:700; margin-left:8px; }

/* layout */
.grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.panel { background:rgba(15,23,42,.55); border:1px solid var(--line); border-radius:16px; padding:16px; }
.panel h2 { font-size:13px; font-weight:600; color:#cbd5e1; margin-bottom:12px; letter-spacing:.02em; }
@media (max-width:900px) { .grid { grid-template-columns:1fr; } }

/* tree */
.row-top { max-width:420px; margin:0 auto; }
.conn { width:2px; height:22px; margin:0 auto; background:linear-gradient(#334155,#1e293b); }
.conn.small { height:16px; }
.agent-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.col { display:flex; flex-direction:column; }
.subs { display:flex; flex-direction:column; gap:10px; }

/* node card */
.card { border:1px solid var(--idle); border-radius:12px; padding:10px 11px; cursor:pointer; transition:all .2s;
  background:rgba(100,116,139,.10); }
.card:hover { transform:translateY(-1px); }
.card.selected { outline:2px solid var(--active); outline-offset:2px; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.card-name { font-weight:600; font-size:13px; }
.card-role { font-size:11px; color:var(--muted); margin-top:2px; }
.card-act { font-size:11px; margin-top:6px; height:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.9; }
.badge { font-size:9px; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:999px; border:1px solid currentColor; }
.bar { margin-top:8px; height:6px; border-radius:4px; background:#1e293b; overflow:hidden; }
.bar > i { display:block; height:100%; width:0; background:currentColor; transition:width .3s; }

/* status colours */
.status-idle   { border-color:var(--idle);   color:#cbd5e1; }
.status-active { border-color:var(--active); color:var(--active); background:rgba(56,189,248,.10);
  animation:glow 1.4s ease-in-out infinite; }
.status-agg    { border-color:var(--agg);    color:var(--agg);    background:rgba(245,158,11,.10); }
.status-done   { border-color:var(--done);   color:var(--done);   background:rgba(52,211,153,.10); }
.status-idle .card-name, .status-active .card-name, .status-agg .card-name, .status-done .card-name { color:#f1f5f9; }
@keyframes glow { 0%,100%{ box-shadow:0 0 0 0 rgba(56,189,248,0);} 50%{ box-shadow:0 0 0 4px rgba(56,189,248,.22);} }

/* legend */
.legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; font-size:11px; color:var(--muted); }
.legend span { display:flex; align-items:center; gap:6px; }
.dot { width:11px; height:11px; border-radius:3px; border:1px solid currentColor; }
.dot.idle{color:var(--idle)} .dot.active{color:var(--active)} .dot.agg{color:var(--agg)} .dot.done{color:var(--done)}

/* inspector */
#inspector-body .muted { color:var(--muted); font-size:12px; }
.insp-name { font-weight:700; font-size:15px; }
.insp-sub { font-size:11px; color:var(--muted); margin:2px 0 10px; }
.insp-h { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--violet); margin:12px 0 4px; }
.insp-p { font-size:12px; }
.insp-pre { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; white-space:pre-wrap;
  background:#0b1220; border:1px solid var(--line); border-radius:8px; padding:8px; color:#cbd5e1; }

/* log */
.log-panel #log-body { max-height:56vh; overflow-y:auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; }
.log-entry { padding:2px 0; }
.log-head { display:flex; gap:6px; align-items:baseline; }
.log-head.has-detail { cursor:pointer; }
.log-head.has-detail:hover .log-text { text-decoration:underline; }
.log-node { color:var(--muted); }
.caret { color:var(--muted); font-size:10px; margin-left:auto; }
.log-detail { margin:4px 0 8px 14px; padding:8px; white-space:pre-wrap; font-size:10.5px;
  background:#0b1220; border-left:2px solid var(--active); border-radius:0 6px 6px 0; color:#9fb4d0; }
.kind-orch .log-text { color:var(--active); } .kind-agent .log-text { color:var(--violet); }
.kind-sub .log-text { color:#cbd5e1; } .kind-step .log-text { color:var(--muted); } .kind-done .log-text { color:var(--done); }

/* code panel */
.code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; line-height:1.55;
  background:#0b1220; border:1px solid var(--line); border-radius:10px; padding:10px 8px; overflow-x:auto; }
.codeline { padding:1px 8px; border-left:2px solid transparent; white-space:pre; color:#93a4c0; }
.codeline.active { background:rgba(56,189,248,.14); border-left-color:var(--active); color:#e6f3ff; }
.foot { font-size:11px; color:#64748b; margin-top:16px; }