/* ---------- Nexus Agents — module-specific hero visual ----------
   Agent reasoning trace. Generic chrome (.mock*) in module.css. */
.mag-q { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); margin-bottom: 16px; }
.mag-q .av { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--surface-inset); color: var(--fg-muted); border: 1px solid var(--border); }
.mag-q .bubble { font-size: 13.5px; font-weight: 600; color: var(--fg-strong); line-height: 1.45; }

.mag-trace { position: relative; padding-left: 26px; }
.mag-trace::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 14px; width: 2px; background: var(--border); }
.mag-node { position: relative; padding: 7px 0; }
.mag-node::before { content: ""; position: absolute; left: -22px; top: 11px; width: 12px; height: 12px; border-radius: 999px; background: var(--nx-green); border: 2px solid var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-green) 16%, transparent); }
.mag-node .t { font-size: 13px; font-weight: 600; color: var(--fg-strong); }
.mag-node .d { font-size: 12px; color: var(--fg-subtle); margin-top: 2px; line-height: 1.45; }
.mag-tool { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; padding: 3px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--nx-green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--nx-green) 32%, transparent); font-size: 10.5px; font-weight: 700; font-family: var(--font-mono); color: var(--nx-green); }
.mag-node.is-idle { opacity: .5; }
.mag-node.is-idle::before { background: var(--border-strong); box-shadow: none; }
.mag-node.is-idle .mag-tool { background: var(--surface-inset); border-color: var(--border); color: var(--fg-subtle); border-style: dashed; }