/* Shared UI controls used across the AI-service pages (prime, pKALM, idp-elm, …).
   All colors come from the theme tokens in theme.css so chips stay legible in
   both light and dark themes — do not hard-code background/text colors here. */

/* ── Chips ──────────────────────────────────────────────────────────────── */

.chip-group { margin: 10px 0 4px; }
.chip-group-label {
    font-size: .8rem; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px; border-radius: 999px;
    font-size: .86rem; font-weight: 500;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Color dot for legend-style chips (e.g. idp-elm tracks). */
.chip-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

/* Primary-accent variant (e.g. pKALM side-chain groups, prime transition metals). */
.chip.is-accent {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}