/*
 * Z.A.R.V.I.S. agent HUD — adapted from interaction/design patterns in
 * RubenM1990/APEX-UI (MIT) and Magic UI orbit concepts. See docs/APEX-UI-ATTRIBUTION.md.
 *
 * This layer is intentionally dependency-free: SVG/CSS only, with reduced-
 * motion support. Voice transport and approval semantics remain in app.js.
 */

.zarvis-stage{position:relative;isolation:isolate}
.zarvis-hud{position:relative;width:min(100%,340px);aspect-ratio:1;display:grid;place-items:center}
.zarvis-hud::before,.zarvis-hud::after{content:"";position:absolute;inset:8%;border:1px solid rgba(6,182,212,0.18);border-radius:50%;pointer-events:none}
.zarvis-hud::after{inset:18%;border-style:dashed;border-color:rgba(99,102,241,0.22);animation:zarvis-hud-spin 24s linear infinite reverse}

.zarvis-reasoning-web{position:absolute;inset:0;z-index:0;pointer-events:none}
.zarvis-reasoning-web svg{width:100%;height:100%;overflow:visible}
.zarvis-reasoning-web .hud-orbit{fill:none;stroke:rgba(6,182,212,0.2);stroke-width:.8;stroke-dasharray:3 6}
.zarvis-reasoning-web .hud-link{stroke:rgba(99,102,241,0.25);stroke-width:.85;vector-effect:non-scaling-stroke;transition:stroke 0.2s ease, filter 0.2s ease}
.zarvis-reasoning-web .hud-link.active{stroke:rgba(6,182,212,0.85);filter:drop-shadow(0 0 4px #06b6d4)}
.zarvis-reasoning-web .hud-node{pointer-events:auto;cursor:pointer;outline:none}
.zarvis-reasoning-web .hud-node circle{fill:#060d17;stroke:rgba(6,182,212,0.45);stroke-width:1.2;transition:fill 150ms ease,stroke 150ms ease,filter 150ms ease,transform 150ms ease}
.zarvis-reasoning-web .hud-node text{fill:#94a3b8;font-size:3.2px;font-weight:800;letter-spacing:.05em;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.zarvis-reasoning-web .hud-node:hover circle,.zarvis-reasoning-web .hud-node:focus-visible circle,.zarvis-reasoning-web .hud-node[data-selected="true"] circle{fill:#0e2238;stroke:#22d3ee;filter:drop-shadow(0 0 6px #06b6d4)}
.zarvis-reasoning-web .hud-node:focus-visible{outline:none}

.zarvis-hud .zarvis-orb{z-index:2;width:150px;height:150px;background:rgba(6,12,20,0.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.zarvis-hud .zarvis-core{inset:42px}
.zarvis-hud .zarvis-orbit{inset:16px}
.zarvis-hud .orbit-two{inset:8px}
.zarvis-hud .orbit-three{inset:27px}

.zarvis-agent-overview{position:absolute;left:50%;bottom:-2px;z-index:4;transform:translate(-50%,100%);width:min(300px,92%);padding:12px 14px;border:1px solid rgba(6,182,212,0.3);border-radius:12px;background:rgba(6,13,22,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 40px rgba(0,0,0,0.6),0 0 20px rgba(6,182,212,0.15);color:#cbd5e1;font-size:11px;line-height:1.5;pointer-events:auto}
.zarvis-agent-overview strong{display:block;color:#f8fafc;font-size:12px;margin-bottom:4px}
.zarvis-agent-overview span{display:inline-block;margin-top:6px;color:#22d3ee;font-weight:600;font-size:10px}

.zarvis-runtime-strip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:12px;padding:8px 12px;border:1px solid rgba(255,255,255,0.08);border-radius:10px;background:rgba(8,14,24,0.7);backdrop-filter:blur(12px);color:#94a3b8;font-size:10px;text-transform:uppercase;letter-spacing:.09em}
.zarvis-runtime-strip .zarvis-eq{display:flex;align-items:end;gap:3px;height:12px}
.zarvis-runtime-strip .zarvis-eq i{display:block;width:2px;height:35%;border-radius:999px;background:linear-gradient(180deg,#06b6d4,#6366f1);animation:zarvis-eq 1.1s ease-in-out infinite}
.zarvis-runtime-strip .zarvis-eq i:nth-child(2){height:80%;animation-delay:.12s}.zarvis-runtime-strip .zarvis-eq i:nth-child(3){height:55%;animation-delay:.22s}.zarvis-runtime-strip .zarvis-eq i:nth-child(4){height:100%;animation-delay:.34s}.zarvis-runtime-strip .zarvis-eq i:nth-child(5){height:45%;animation-delay:.48s}
.zarvis-runtime-strip strong{color:#5eead4;font-size:10px;letter-spacing:.12em;font-weight:700}
.zarvis-runtime-strip .zarvis-agent-count{color:#64748b;white-space:nowrap}

.zarvis-card[data-voice-state="listening"] .hud-link.active,.zarvis-card[data-voice-state="thinking"] .hud-link.active,.zarvis-card[data-voice-state="speaking"] .hud-link.active{animation:zarvis-link-pulse 1.15s ease-in-out infinite}
.zarvis-card[data-voice-state="approval_required"] .zarvis-runtime-strip{border-color:rgba(245,158,11,0.4);background:rgba(245,158,11,0.1);color:#fbbf24}
.zarvis-card[data-voice-state="error"] .zarvis-runtime-strip,.zarvis-card[data-voice-state="disconnected"] .zarvis-runtime-strip{border-color:rgba(239,68,68,0.4);background:rgba(239,68,68,0.1);color:#f87171}

@keyframes zarvis-hud-spin{to{transform:rotate(360deg)}}
@keyframes zarvis-eq{0%,100%{transform:scaleY(.45);opacity:.55}50%{transform:scaleY(1);opacity:1}}
@keyframes zarvis-link-pulse{0%,100%{opacity:.35}50%{opacity:1;filter:drop-shadow(0 0 6px #06b6d4)}}

@media(max-width:1100px){.zarvis-hud{width:min(100%,300px)}.zarvis-agent-overview{position:relative;left:auto;bottom:auto;transform:none;margin-top:12px}}
@media(max-width:700px){.zarvis-hud{width:min(100%,270px)}}
@media(prefers-reduced-motion:reduce){.zarvis-hud::after,.zarvis-runtime-strip .zarvis-eq i,.zarvis-card .hud-link.active{animation:none!important}.zarvis-reasoning-web .hud-node circle{transition:none}}