/* Campo de etiquetas (chips.js). Usa os tokens de app.css. */
.chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 44px; padding: 6px 8px;
  background: var(--sup); border: 1px solid var(--linha); border-radius: 8px;
  cursor: text;
}
.chips:focus-within { border-color: var(--roxo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--roxo) 30%, transparent); }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--roxo) 16%, transparent); color: var(--texto);
  font-size: 13px; line-height: 1.4; max-width: 100%;
}
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-x {
  width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: inherit;
  font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.chip-x:hover, .chip-x:focus-visible { background: color-mix(in srgb, var(--texto) 16%, transparent); }
/* Dois seletores de proposito: a regra geral de input[type="text"] do app.css nao pode vencer. */
.chips input.chips-entrada {
  flex: 1 1 120px; min-width: 120px; width: auto; height: 30px; padding: 0 2px;
  border: 0; border-radius: 0; outline: 0; box-shadow: none;
  background: transparent; color: var(--texto); font: inherit;
}
.chips input.chips-entrada:focus { border: 0; outline: 0; box-shadow: none; }