/* Agent-card rules copied unchanged from the Midnight Glass kit (components.css) so the working state matches the product. */
.mg-pip{position:absolute;right:0;bottom:0;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 3px var(--card)}
.mg-pip--online{background:var(--online);box-shadow:0 0 0 3px var(--card),0 0 12px rgba(52,224,161,.75)}
.mg-pip--working{box-shadow:0 0 0 3px var(--card)}
.mg-pip--offline{background:var(--card);box-shadow:0 0 0 3px var(--card),inset 0 0 0 2px var(--faint)}
.mg-tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--radius-pill);background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px var(--faint);color:var(--text);font-size:11.5px;line-height:16px;font-weight:500;white-space:nowrap}
.mg-tag--model{color:var(--text);background:color-mix(in srgb,var(--model) 26%,transparent);box-shadow:inset 0 0 0 1px var(--model)}
.mg-tag--voice{color:var(--text);background:color-mix(in srgb,var(--accent) 24%,transparent);box-shadow:inset 0 0 0 1px var(--accent)}
/* ---------- AgentCard ---------- */
.mg-agent{--model:var(--model-blue);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:14px;
  border:1px solid transparent;border-radius:var(--radius-xl);background:transparent;
  box-shadow:none;color:var(--text);font-family:var(--font-sans);transition:border-color .2s,box-shadow .2s}
.mg-agent--indigo{--model:var(--model-indigo)}
.mg-agent--sky{--model:var(--model-sky)}
.mg-agent:hover{background:rgba(255,255,255,.05)}
.mg-agent--ready{}
.mg-agent--working{}
.mg-agent--offline{}
.mg-agent__av{position:relative;width:52px;height:52px;display:grid;place-items:center;border-radius:var(--radius-pill);color:var(--model);
  background:color-mix(in srgb,var(--model) 14%,var(--card));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--model) 38%,transparent)}
.mg-agent--offline .mg-agent__av{color:var(--faint);background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.mg-emb{width:36px;height:36px;display:block}
.mg-agent__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.mg-agent__row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.mg-agent__name{display:flex;align-items:center;gap:7px;min-width:0;font-size:17px;line-height:22px;font-weight:700;letter-spacing:-.01em}
.mg-agent__name svg{flex:none;color:var(--accent-soft)}
.mg-agent__status{display:inline-flex;align-items:center;gap:8px;flex:none;color:var(--muted);font-size:13px;line-height:16px;font-weight:700;transition:opacity .15s}
.mg-agent--ready .mg-agent__status{color:var(--online)}
.mg-agent--working .mg-agent__status{color:var(--accent)}
.mg-agent__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.mg-agent__meta .mg-tag--model{margin-left:auto}
.mg-agent__name .mg-tag{padding:1px 6px;font-size:10.5px;line-height:14px;font-weight:500;color:var(--muted)}
.mg-agent__role{color:color-mix(in srgb,var(--text) 75%,var(--muted));font-size:12.5px;line-height:16px}
.mg-agent__ctx{display:flex;align-items:center;gap:10px}
.mg-bar{flex:1;height:5px;overflow:hidden;border-radius:var(--radius-pill);background:rgba(255,255,255,.08)}
.mg-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-soft));box-shadow:0 0 10px rgba(59,140,255,.7)}
.mg-agent__pct{flex:none;color:var(--muted);font-size:11px;line-height:14px;font-variant-numeric:tabular-nums}
.mg-agent--offline .mg-agent__row{align-items:center}

.mg-agent--working .mg-agent__av{background:color-mix(in srgb,var(--accent) 14%,var(--card));animation:mg-breathe 2.4s ease-in-out infinite}
.mg-agent--working .mg-agent__av::before,.mg-agent--working .mg-agent__av::after{content:"";position:absolute;inset:-5px;border-radius:50%;pointer-events:none;animation:mg-orbit 1.9s linear infinite}
.mg-agent--working .mg-agent__av::before{background:conic-gradient(from 0deg,transparent 0 40%,color-mix(in srgb,var(--accent) 25%,transparent) 70%,var(--accent) 100%),linear-gradient(color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent) 20%,transparent));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px))}
.mg-agent--working .mg-agent__av::after{background:radial-gradient(circle at 50% 1px,#fff 0 1.7px,color-mix(in srgb,var(--accent-soft) 85%,transparent) 2.6px,transparent 5.5px)}
.mg-pip--working{background:radial-gradient(circle at 35% 30%,var(--accent-soft),var(--accent) 62%)}
.mg-pip--working::before,.mg-pip--working::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent-soft);opacity:0;pointer-events:none;animation:mg-ping 1.8s ease-out infinite}
.mg-pip--working::after{animation-delay:.9s}
@keyframes mg-orbit{to{transform:rotate(360deg)}}
@keyframes mg-breathe{0%,100%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}50%{box-shadow:inset 0 0 0 1px var(--accent)}}
@keyframes mg-ping{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.mg-agent--working .mg-agent__av,.mg-agent--working .mg-agent__av::before,.mg-agent--working .mg-agent__av::after{animation:none}.mg-pip--working::before,.mg-pip--working::after{display:none}}
/* Working agent: a light sweeps along the filled part of the context bar, and its leading edge glints. */
.mg-agent--working .mg-bar i{position:relative;overflow:hidden}
.mg-agent--working .mg-bar i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-120%);animation:mg-sweep 1.5s ease-in-out infinite}
.mg-agent--working .mg-bar i::before{content:"";position:absolute;top:0;right:0;bottom:0;width:3px;background:#fff;animation:mg-glint 1.5s ease-in-out infinite}
@keyframes mg-sweep{0%{transform:translateX(-120%)}70%,100%{transform:translateX(260%)}}
@keyframes mg-glint{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.mg-agent--working .mg-bar i::after,.mg-agent--working .mg-bar i::before{animation:none}.mg-agent--working .mg-bar i::after{display:none}}