{# Reactions go inside the bubble: <span class="ui-bubble-reactions"><button type="button" aria-pressed="true" aria-label="…">icon count</button></span> #}
<div class="ui-stack" style="max-width:560px;align-items:flex-start">
<.bubble variant="default"><p>Default: the current user's messages</p></.bubble>
<.bubble><p>Secondary: other people's messages</p></.bubble>
<.bubble variant="muted"><p>Muted: lower emphasis, quoted context</p></.bubble>
<.bubble variant="tinted"><p>Tinted: highlighted or pinned</p></.bubble>
<.bubble variant="outline"><p>Outline: drafts and system-like content</p><span class="ui-bubble-reactions"><button type="button" aria-pressed="true" aria-label="Thumbs up, 2 reactions, including you"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>2</button></span></.bubble>
<.bubble variant="ghost"><p>Ghost: assistant answers and rich content, full width.</p></.bubble>
<.bubble variant="destructive"><p>Failed to send. <a href="#" style="color:inherit;font-weight:600">Retry</a></p></.bubble>
</div>