.pb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}


.pb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.375rem 0.8125rem;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-warm);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}


.pb-chip > pb-icon { flex: 0 0 auto; line-height: 0; }
.pb-chip svg {
  width: 15px;
  height: 15px;
  color: var(--text-faint);
  transition: color var(--dur) var(--ease);
}


.pb-chip .ct { color: var(--text-faint); }


.pb-chip:hover {
  background: color-mix(in srgb, var(--text) 8%, var(--surface-warm));
  border-color: var(--border-strong);
  color: var(--text);
}
.pb-chip:hover svg { color: var(--text-soft); }


.pb-chip.on {
  background: color-mix(in srgb, var(--text) 8%, var(--surface-warm));
  border-color: transparent;
  color: var(--text);
}
.pb-chip.on svg { color: var(--text-soft); }


.pb-chip.ai {
  background: var(--ai-tint);
  border-color: var(--ai-border);
  color: var(--ai);
}
.pb-chip.ai svg { color: var(--ai); }
.pb-chip.ai:hover {
  background: var(--ai-tint);
  border-color: var(--ai);
  color: var(--ai);
}
.pb-chip.ai:hover svg { color: var(--ai); }