/* Selector chip. Shared by the chat prompts and the asset-class pills, which
   are the same control doing the same job: pick one of a short set and swap
   what the surface below shows. One definition so the two never drift. */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.chip:hover { border-color: var(--accent); color: var(--accent); }

/* Pressed rather than a class, so the state a screen reader announces and the
   state the reader sees are the same attribute. */
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.chip[aria-pressed="true"]:hover { color: var(--on-accent); }

/* The chips wrap on a narrow screen, so they cannot rely on staying one row.
   Letting the label wrap instead would leave a two-line chip beside one-line
   ones; shrinking the type keeps the row tidy down to 320px. */
@media (max-width: 560px) {
  .chip { padding: 7px 12px; font-size: var(--text-xs); }
}