Chip Validation Error

<div class="nuda-chip-error">
  <div class="nuda-chip-error__field">
    <span class="nuda-chip-error__chip">valid@email.com</span>
    <span class="nuda-chip-error__chip nuda-chip-error__chip--bad">
      not-an-email
      <button class="nuda-chip-error__x" aria-label="Remove">×</button>
    </span>
    <input class="nuda-chip-error__input" value="bad@@"
           aria-invalid="true" aria-describedby="chip-err" />
  </div>
  <div class="nuda-chip-error__msg" id="chip-err" role="alert">
    <svg viewBox="0 0 12 12" width="11" height="11" aria-hidden="true">
      <circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1.4"/>
      <path d="M6 3.5v3M6 8.4v.1" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
    </svg>
    Invalid email format
  </div>
</div>

/* Chip Validation Error
   Red border + shake when input is invalid.
   Customize: --err-color */

.nuda-chip-error {
  --err-color: #fca5a5;
  width: 100%;
  max-width: 300px;
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
}

.nuda-chip-error__field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: #0c0c10;
  border: 1px solid var(--err-color);
  border-radius: 10px;
  animation: nuda-chip-shake 0.4s ease;
}

.nuda-chip-error__chip {
  padding: 4px 10px;
  color: #fafafa;
  background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
}

.nuda-chip-error__chip--bad {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 4px;
  color: var(--err-color);
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
}

.nuda-chip-error__x {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 12px;
  color: var(--err-color);
  background: transparent;
  border: 0;
  border-radius: 99px;
  cursor: pointer;
}

.nuda-chip-error__input {
  flex: 1;
  min-width: 60px;
  padding: 4px;
  color: var(--err-color);
  background: transparent;
  border: 0;
  outline: 0;
}

.nuda-chip-error__msg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--err-color);
}

@keyframes nuda-chip-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  50%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-chip-error__field { animation: none; }
}