Click-to-browse Button

<button class="nuda-browse" type="button">
  <svg class="nuda-browse__icon" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="1.8" aria-hidden="true">
    <path d="M21.5 11.5l-8.5 8.5a5 5 0 0 1-7-7l9-9a3.5 3.5 0 0 1 5 5l-9 9a2 2 0 0 1-3-3l8-8"
          stroke-linecap="round" stroke-linejoin="round" />
  </svg>
  <span>Attach files</span>
</button>

<!-- Pair with a hidden input for real uploads:
<input type="file" multiple hidden /> -->

/* Click-to-browse Button
   Paperclip-style button to open the file picker. */

.nuda-browse {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  background: #111114;
  color: #fafafa;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s;
}

.nuda-browse:hover {
  background: #0c0c10;
  border-color: rgba(228, 255, 84, 0.4);
}

.nuda-browse:hover .nuda-browse__icon {
  color: #e4ff54;
  transform: rotate(-12deg);
}

.nuda-browse:active { transform: translateY(1px); }

.nuda-browse__icon {
  width: 16px;
  height: 16px;
  color: #a0a0a8;
  transition: transform 0.2s, color 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-browse,
  .nuda-browse__icon { transition: none; }
  .nuda-browse:hover .nuda-browse__icon { transform: none; }
}