/* A person named inside running text: face and name, in the text's own color. */
.ds-mention {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  vertical-align: bottom;
  font-weight: var(--ds-weight-semibold);
  color: inherit;
  text-decoration: none;
}

.ds-mention__face {
  inline-size: 16px;
  block-size: 16px;
  border-radius: var(--ds-radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.ds-mention:hover { text-decoration: underline; }

/* v5: a soft fill around face and name, and the name in the link ink. */
:where(html[data-visual="v5"]) .ds-mention {
  padding: 1px var(--ds-space-2) 1px 2px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-fill);
  color: var(--ds-link);
}
:where(html[data-visual="v5"]) .ds-mention:hover { background: var(--ds-fill-hover); text-decoration: none; }
/* On a tinted bubble the fill vanishes into the tint: the sent one mixes the text color in, the mentioned one sits on the panel white. */
:where(html[data-visual="v5"]) .cs-msg--me .ds-mention { color: inherit; background: color-mix(in oklch, currentColor 15%, transparent); }
:where(html[data-visual="v5"]) .cs-msg--mentioned:not(.cs-msg--me) .ds-mention { background: var(--ds-bg-pure); }