#0b1020
1<div class="w-60 rounded-2xl bg-slate-900 p-3 ring-1 ring-white/10">2 <div class="mb-3 flex items-center gap-2 border-b border-white/10 pb-2">3 <span class="grid size-7 place-items-center rounded-full bg-gradient-to-br from-pink-400 to-orange-400 text-xs font-bold text-white">M</span>4 <div class="leading-tight"><p class="text-xs font-semibold text-white">Marina</p><p class="text-[10px] text-emerald-400">online</p></div>5 </div>6 <p class="ml-auto w-fit max-w-[80%] rounded-2xl rounded-br-sm bg-indigo-500 px-3 py-1.5 text-xs text-white">Conseguiu ver o orçamento?</p>7 <div class="mt-9 flex items-end gap-2">8 <span class="relative grid size-6 shrink-0 place-items-center rounded-full bg-gradient-to-br from-pink-400 to-orange-400 text-[10px] font-bold text-white">M9 <span class="aparece absolute bottom-[calc(100%+8px)] left-0 whitespace-nowrap rounded-lg bg-white px-2 py-1 text-[10px] font-medium text-slate-700 shadow-lg">Marina está digitando…<span class="absolute -bottom-1 left-2.5 size-2 rotate-45 bg-white"></span></span>10 </span>11 <span class="flex items-center gap-1 rounded-2xl rounded-bl-sm bg-slate-800 px-3 py-2.5">12 <span class="size-1.5 animate-bounce rounded-full bg-slate-300"></span>13 <span class="size-1.5 animate-bounce rounded-full bg-slate-300 [animation-delay:.15s]"></span>14 <span class="size-1.5 animate-bounce rounded-full bg-slate-300 [animation-delay:.3s]"></span>15 </span>16 </div>17</div>