/* agent-badge: round accent badge + inline line mark (see agent-badge.js). Colours are brand tokens. */
.agent-badge {
  --badge-size: 140px;
  --mark-scale: 0.6;          /* mark box as a share of the badge */
  --mark-stroke: 1.9;         /* in the mark's 24-unit viewBox: ~6.6 px at 140 px, close to the UI's 3 px pill outline x2 */
  flex: 0 0 var(--badge-size);
  width: var(--badge-size); height: var(--badge-size); border-radius: 50%;
  background: var(--accent); color: var(--on-ink);
  display: flex; align-items: center; justify-content: center;
}
.agent-badge .agent-mark {
  width: calc(var(--badge-size) * var(--mark-scale));
  height: calc(var(--badge-size) * var(--mark-scale));
  stroke-width: var(--mark-stroke);
  display: block;
}