Attachment Chip Composer

<!-- Attachment Chip Composer — file chips above a labelled textarea -->
<form class="nuda-ac2-attach" aria-label="Message composer">
  <div class="nuda-ac2-attach__chips">
    <span class="nuda-ac2-attach__chip">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M6 2 L14 2 L19 7 L19 22 L6 22 Z" />
        <path d="M14 2 L14 7 L19 7" />
      </svg>
      <span class="nuda-ac2-attach__name">spec.pdf</span>
      <button class="nuda-ac2-attach__remove" aria-label="Remove spec.pdf" type="button">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round">
          <path d="M6 6 L18 18 M18 6 L6 18" />
        </svg>
      </button>
    </span>
    <span class="nuda-ac2-attach__chip">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <rect x="3" y="4" width="18" height="16" rx="2" />
        <path d="M3 16 L9 10 L14 15 L17 12 L21 16" />
      </svg>
      <span class="nuda-ac2-attach__name">invoice.png</span>
      <button class="nuda-ac2-attach__remove" aria-label="Remove invoice.png" type="button">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round">
          <path d="M6 6 L18 18 M18 6 L6 18" />
        </svg>
      </button>
    </span>
  </div>
  <label class="nuda-ac2-attach__label" for="ac2-attach-input">Message</label>
  <textarea id="ac2-attach-input" class="nuda-ac2-attach__input" rows="1"
    placeholder="Send a message… (Enter to send, Shift+Enter for newline)"></textarea>
</form>

.nuda-ac2-attach {
  width: 300px;
  padding: 10px;
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-sizing: border-box;
  font: 12px ui-sans-serif,system-ui,sans-serif;
}

.nuda-ac2-attach__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.nuda-ac2-attach__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #cfcfcf;
  font-size: 11px;
  animation: _nuda-ac2attach .3s ease both;
}

.nuda-ac2-attach__chip:nth-child(2) {
  animation-delay: .08s;
}

.nuda-ac2-attach__chip svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: #e4ff54;
}

.nuda-ac2-attach__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  background: rgba(255,255,255,.08);
  border: none;
  border-radius: 50%;
  color: #a1a1aa;
  cursor: pointer;
  transition: background .2s,color .2s;
}

.nuda-ac2-attach__remove svg {
  width: 8px;
  height: 8px;
}

.nuda-ac2-attach__remove:hover {
  background: rgba(239,68,68,.2);
  color: #f87171;
}

.nuda-ac2-attach__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.nuda-ac2-attach__input {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  background: #0e0e0e;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #fafafa;
  font: 12px ui-sans-serif,system-ui,sans-serif;
  resize: none;
  box-sizing: border-box;
  transition: border-color .2s,box-shadow .2s;
}

.nuda-ac2-attach__input::placeholder {
  color: #666;
}

.nuda-ac2-attach__input:focus-visible {
  outline: none;
  border-color: #e4ff54;
  box-shadow: 0 0 0 3px rgba(228,255,84,.2);
}

@keyframes _nuda-ac2attach {
  from {
    opacity: 0;
    transform: scale(.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-ac2-attach__chip {
    animation: none !important;
  }
}