.who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }

.who__disc {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  user-select: none;
}

.who--md .who__disc { width: 26px; height: 26px; font-size: var(--fs-2xs); }

.who__name {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--zk-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Five agents, five hues, all readable on white at 20px and all distinguishable
   from the Zurich blue the interface already uses for its own chrome. */
.who__disc--blue   { background: #2167ae; }
.who__disc--teal   { background: #0f7b78; }
.who__disc--violet { background: #5b4bb7; }
.who__disc--amber  { background: #a8651a; }
.who__disc--plum   { background: #8a3d6b; }
.who__disc--grey   { background: #6b7280; }

/* The chip becomes a control only where a card exists to open. */
.who--btn {
  font: inherit;
  cursor: pointer;
  padding: 2px 8px 2px 2px;
  border: 1px solid transparent;
  border-radius: var(--r-pill, 999px);
  background: transparent;
  transition: background .12s, border-color .12s;
}
.who--btn:hover { background: var(--zk-tint); border-color: var(--zk-line); }
.who--btn:hover .who__i { opacity: 1; }
.who--btn:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }

.who__i {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--zk-grey);
  opacity: 0;
  transition: opacity .12s;
}

/* The AI mark, on the disc rather than beside the name: it has to survive
   showName={false}, and it belongs to the worker, not to the label. Sits
   proud of the disc so it stays legible against every one of the five hues,
   with a white ring to separate it from the colour underneath. */
.who__ai {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  fill: var(--zk-amber, #b5761f);
  stroke: var(--zk-white, #fff);
  stroke-width: 0.9;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.who--md .who__ai { width: 13px; height: 13px; right: -3px; bottom: -3px; }

/* Said out loud for a screen reader, which cannot see a sparkle. */
.who__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}