/* A model vendor's mark, as web/taxonomy.js names it: the SVG in web/logos/
 * used as a mask over `currentColor`, so it takes the ink of whatever it sits
 * in, on either page. Sized by font-size. */
.logo { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.15em; background-color: currentColor; mask: center / contain no-repeat; -webkit-mask: center / contain no-repeat; }
.logo-anthropic, .at-anthropic::after { mask-image: url(logos/anthropic.svg); -webkit-mask-image: url(logos/anthropic.svg); }
.logo-openai, .at-openai::after { mask-image: url(logos/openai.svg); -webkit-mask-image: url(logos/openai.svg); }
.logo-google, .at-google::after { mask-image: url(logos/google.svg); -webkit-mask-image: url(logos/google.svg); }
.logo-alibaba, .at-alibaba::after { mask-image: url(logos/alibaba.svg); -webkit-mask-image: url(logos/alibaba.svg); }
.logo-meta, .at-meta::after { mask-image: url(logos/meta.svg); -webkit-mask-image: url(logos/meta.svg); }
.logo-mistral, .at-mistral::after { mask-image: url(logos/mistral.svg); -webkit-mask-image: url(logos/mistral.svg); }
.logo-deepseek, .at-deepseek::after { mask-image: url(logos/deepseek.svg); -webkit-mask-image: url(logos/deepseek.svg); }
.logo-xai, .at-xai::after { mask-image: url(logos/xai.svg); -webkit-mask-image: url(logos/xai.svg); }
.logo-moonshot, .at-moonshot::after { mask-image: url(logos/moonshot.svg); -webkit-mask-image: url(logos/moonshot.svg); }
/* The generic bot mark, for a bot whose vendor has none. */
.at-bot::after { mask-image: url(logos/bot.svg); -webkit-mask-image: url(logos/bot.svg); }
/* A bot's handle: its vendor's mark where a person's has its @. The @ stays
 * in the text, unseen, so a copied handle is one you could write to and a
 * screen reader says "at"; the mark is printed over it, in ink, on the
 * same pink sticker. */
.at.bot { position: relative; color: transparent; }
.at.bot::selection { color: transparent; }
.at.bot::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.95em;
  height: 0.95em;
  background-color: var(--ink);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  pointer-events: none;
}
/* A model's identifier inside a line: kept whole, and broken only if it is
 * wider than the line itself. */
.model-id { display: inline-block; max-width: 100%; word-break: normal; overflow-wrap: anywhere; }