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

/* A soft disc in the worker's colour: blue for the AI at large, amber for KYC,
   teal for the Advisor, grey initials for a person. */
.who__disc {
  position: relative; display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; user-select: none;
  background: var(--zk-tint-blue); color: var(--zk-blue);
}
/* xs is the label on a chat bubble, where the disc sits beside 12.5px type. */
.who--xs { gap: 5px; }
.who--xs .who__disc { width: 16px; height: 16px; font-size: 8.5px; }
.who--xs .who__name { font-size: var(--fs-3xs); }
.who--xs .who__tag { font-size: 10px; padding: 0 4px; }
.who--md .who__disc { width: 36px; height: 36px; font-size: 13px; }
.who--lg .who__disc { width: 40px; height: 40px; font-size: 14px; }

.who__disc--blue, .who__disc--violet, .who__disc--plum { background: var(--zk-tint-blue); color: var(--zk-blue); }
.who__disc--teal  { background: var(--zk-teal-tint);  color: var(--zk-teal); }
.who__disc--amber { background: var(--zk-amber-tint); color: var(--zk-amber); }
.who__disc--grey  { background: var(--zk-line-soft);  color: var(--zk-muted); }

.who__glyph { width: 52%; height: 52%; }
.who__init { font-weight: 700; }

.who__name { font-size: var(--fs-sm); font-weight: 600; color: var(--zk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who__tag {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--zk-blue); background: var(--zk-tint-blue);
  padding: 1px 6px; border-radius: 4px;
}

.who--btn {
  font: inherit; cursor: pointer; padding: 2px 8px 2px 2px;
  border: 1px solid transparent; border-radius: var(--r-pill); background: transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.who--btn:hover { background: var(--zk-tint); border-color: var(--zk-line); }
.who--btn:hover .who__i { opacity: 1; }
.who--btn:focus-visible { outline: none; box-shadow: var(--ring); }
.who__i { width: 12px; height: 12px; flex: none; color: var(--zk-grey); opacity: 0; transition: opacity .12s; }

.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; }