bulle glass et trois points qui respirent — parfait pour chat/support.

<!-- 6) Typing Bubble -->
<div class="fx6-bubble">
  <span class="d"></span><span class="d"></span><span class="d"></span>
</div>

<style>
.fx6-bubble{
  --blur:18px;
  display:inline-flex; gap:6px; padding:10px 14px; border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow: 0 10px 24px rgba(0,0,0,.12), inset 0 1px 0 #fff;
}
.fx6-bubble .d{
  width:8px; height:8px; border-radius:50%; background:#0a84ff; opacity:.9;
  animation: fx6 1.2s ease-in-out infinite;
}
.fx6-bubble .d:nth-child(2){ animation-delay:.15s }
.fx6-bubble .d:nth-child(3){ animation-delay:.3s }
@keyframes fx6{ 0%,100%{ transform:translateY(0); opacity:.6 } 50%{ transform:translateY(-4px); opacity:1 } }

@media (prefers-reduced-motion: reduce){ .fx6-bubble .d{ animation:none; } }
</style>