/* ============================================================================
   Model wordmark chips — the 6 entrants.
   Text chips in brand-true colours. NEVER logos (per brief).
   Requires colors_and_type.css for the --m-* vars.
   ============================================================================ */

.model-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 5px 10px 6px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  border: 1px solid transparent;
}

/* a small leading dot in the model colour (used in outline + ghost variants) */
.model-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

/* ---- SOLID variant — filled brand colour, ink text (use for emphasis) ---- */
.model-chip.solid.m-anthropic { background: var(--m-anthropic); color: var(--m-anthropic-ink); }
.model-chip.solid.m-openai    { background: var(--m-openai);    color: var(--m-openai-ink); }
.model-chip.solid.m-google    { background: var(--m-google);    color: var(--m-google-ink); }
.model-chip.solid.m-xai       { background: var(--m-xai);       color: var(--m-xai-ink); }
.model-chip.solid.m-deepseek  { background: var(--m-deepseek);  color: var(--m-deepseek-ink); }
.model-chip.solid.m-consensus { background: var(--m-consensus); color: var(--m-consensus-ink); }

/* ---- OUTLINE variant — tinted text on subtle tinted fill (default in UI) -- */
.model-chip.outline {
  background: var(--surface-2);
  border-color: var(--border-1);
  color: var(--fg-1);
}
.model-chip.outline.m-anthropic .dot { background: var(--m-anthropic); }
.model-chip.outline.m-openai    .dot { background: var(--m-openai); }
.model-chip.outline.m-google    .dot { background: var(--m-google); }
.model-chip.outline.m-xai       .dot { background: var(--m-xai); }
.model-chip.outline.m-deepseek  .dot { background: var(--m-deepseek); }
.model-chip.outline.m-consensus .dot { background: var(--m-consensus); }

/* ---- GHOST variant — colour text, no fill (inline mentions) -------------- */
.model-chip.ghost { background: transparent; padding-left: 0; padding-right: 0; }
.model-chip.ghost.m-anthropic { color: var(--m-anthropic); }
.model-chip.ghost.m-openai    { color: var(--m-openai); }
.model-chip.ghost.m-google    { color: var(--m-google); }
.model-chip.ghost.m-xai       { color: #DDE1E6; }
.model-chip.ghost.m-deepseek  { color: var(--m-deepseek); }
.model-chip.ghost.m-consensus { color: var(--m-consensus); }

/* ---- size modifiers ------------------------------------------------------ */
.model-chip.sm { font-size: 11px; padding: 3px 8px 4px; gap: 5px; }
.model-chip.sm .dot { width: 6px; height: 6px; }
.model-chip.lg { font-size: 15px; padding: 7px 13px 8px; }

/* ---- avatar token — square colour tile with 1-2 letter monogram ---------- */
.model-avatar {
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: 13px;
  flex: none;
}
.model-avatar.m-anthropic { background: var(--m-anthropic); color: var(--m-anthropic-ink); }
.model-avatar.m-openai    { background: var(--m-openai);    color: var(--m-openai-ink); }
.model-avatar.m-google    { background: var(--m-google);    color: var(--m-google-ink); }
.model-avatar.m-xai       { background: var(--m-xai);       color: var(--m-xai-ink); }
.model-avatar.m-deepseek  { background: var(--m-deepseek);  color: var(--m-deepseek-ink); }
.model-avatar.m-consensus { background: var(--m-consensus); color: var(--m-consensus-ink); }