.chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
  background: #1a1a2e;
  border: 1px solid #2a2a3d;
  border-radius: 6px;

  &:focus-within {
    border-color: #6c63ff;
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  background: #1e1c3a;
  color: #a5b4fc;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.2;

  .chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;

    &:hover { opacity: 1; color: #fca5a5; }
  }
}

.chip-input {
  flex: 1;
  min-width: 140px;
  background: transparent;
  border: none;
  color: white;
  font-size: 0.88rem;
  padding: 0.15rem 0;
  outline: none;

  &::placeholder { color: #6b7280; }
}
