Compositor com anexos

<article class="u-ai-card">
  <div class="u-ai-card__panel" data-u="ai-composer" role="group" aria-label="Demonstração: anexos do compositor">
    <div class="u-ai-composer__ctx">
      <span><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="6" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="9" r="2"/><path d="M6 7v10M18 11c0 4-6 3-12 6"/></svg>Principal</span>
      <span><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>projeto-mar</span>
    </div>
    <div class="u-ai-tile u-ai-composer__box">
      <div class="u-ai-composer__files">
        <div class="u-ai-file u-ai-file--img u-ai-x">
          <svg class="u-ai-thumb" viewBox="0 0 76 76" aria-hidden="true">
            <defs><linearGradient id="u-ai-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" style="stop-color:var(--c2)"/><stop offset="1" style="stop-color:var(--c1)"/></linearGradient></defs>
            <rect width="76" height="76" rx="12" fill="url(#u-ai-sky)"/>
            <circle cx="52" cy="25" r="9" style="fill:var(--card)" opacity=".85"/>
            <path d="M0 58 24 36 44 54 58 42 76 58v18H0z" style="fill:var(--c3)"/>
            <path d="M0 66 20 54 40 66 60 56 76 66v10H0z" style="fill:var(--c5)" opacity=".85"/>
          </svg>
          <button class="u-ai-file__x" type="button" aria-label="Remover paisagem.png"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
        </div>
        <div class="u-ai-file u-ai-x">
          <span class="u-ai-file__kind u-ai-file__kind--pdf"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/></svg></span>
          <span class="u-ai-file__name">relatorio.pdf</span>
          <button class="u-ai-file__x" type="button" aria-label="Remover relatorio.pdf"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
        </div>
        <div class="u-ai-file u-ai-x">
          <span class="u-ai-file__kind u-ai-file__kind--xls"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="5" width="16" height="14" rx="2"/><path d="M4 10h16M4 14.5h16M10 5v14"/></svg></span>
          <span class="u-ai-file__name">orcamento.xlsx</span>
          <button class="u-ai-file__x" type="button" aria-label="Remover orcamento.xlsx"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
        </div>
      </div>
      <div class="u-ai-composer__input">Olá, o que você precisa hoje?</div>
      <div class="u-ai-composer__bar">
        <button class="u-ai-composer__plus" type="button" aria-label="Adicionar anexo"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
        <span class="u-ai-composer__chip"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg>Passar por tudo</span>
      </div>
    </div>
  </div>
  <div class="u-ai-card__text">
    <h3 class="u-ai-card__title">Anexos do compositor</h3>
    <p class="u-ai-card__desc">Cards de arquivo entram um a um acima do prompt, com miniatura e botão para remover.</p>
  </div>
</article>