1<div class="w-60 rounded-lg bg-[#1f1b18] p-3 font-sans ring-1 ring-[#3a332d]">2 <div class="mb-3 flex items-center gap-2 border-b border-[#3a332d] pb-2.5">3 <span class="grid size-7 place-items-center rounded bg-[#d9a53a] text-[11px] font-bold text-[#1f1b18]">CA</span>4 <div class="leading-tight"><p class="text-xs font-semibold text-[#f1ebe0]">Carlos · entregador</p><p class="text-[10px] tabular-nums text-[#a89c8c]">Pedido 4821 · a caminho</p></div>5 </div>6 <p class="ml-auto w-fit max-w-[80%] rounded-md rounded-br-sm bg-[#46603f] px-3 py-1.5 text-xs text-[#f1ebe0]">Pode deixar na portaria?</p>7 <div tabindex="0" aria-describedby="dica-digitando" class="group relative mt-12 flex w-fit cursor-help items-end gap-2 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-[#d9a53a] focus-visible:ring-offset-4 focus-visible:ring-offset-[#1f1b18]">8 <span class="grid size-6 shrink-0 place-items-center rounded bg-[#d9a53a] text-[9px] font-bold text-[#1f1b18]">CA</span>9 <span class="flex items-center gap-1 rounded-md rounded-bl-sm bg-[#2e2823] px-3 py-2.5 ring-1 ring-[#3a332d] transition-colors group-hover:bg-[#3a332d]">10 <span class="ponto size-1.5 rounded-full bg-[#cfc4b3]"></span>11 <span class="ponto size-1.5 rounded-full bg-[#cfc4b3] [animation-delay:.15s]"></span>12 <span class="ponto size-1.5 rounded-full bg-[#cfc4b3] [animation-delay:.3s]"></span>13 </span>14 <span role="tooltip" id="dica-digitando" class="pointer-events-none absolute bottom-[calc(100%+8px)] left-0 grid origin-bottom-left translate-y-1 scale-95 gap-0.5 whitespace-nowrap rounded bg-[#f1ebe0] px-2.5 py-1.5 text-[#1f1b18] opacity-0 shadow-[0_10px_18px_-10px_#000] transition duration-200 ease-out group-hover:translate-y-0 group-hover:scale-100 group-hover:opacity-100 group-focus-visible:translate-y-0 group-focus-visible:scale-100 group-focus-visible:opacity-100 motion-reduce:translate-y-0 motion-reduce:scale-100">15 <b class="text-[11px]">Carlos está digitando…</b>16 <small class="text-[10px] tabular-nums text-[#6f6456]">a 1,2 km · chega em 6 min</small>17 <span class="absolute -bottom-1 left-2 size-2 rotate-45 bg-[#f1ebe0]"></span>18 </span>19 </div>20</div>