{# HTMX partial — message bubbles appended to chat #}
{% for msg in messages %}
{% if msg.role == 'user' %}
<div class="flex justify-end animate-fade-in">
  <div class="max-w-[70%] rounded-2xl rounded-tr-md bg-[--primary] px-4 py-3 text-sm text-[--primary-foreground] shadow-sm">
    {{ msg.content }}
  </div>
</div>
{% elif msg.role == 'assistant' %}
<div class="flex justify-start animate-fade-in">
  <div class="flex gap-3 max-w-[70%]">
    <div class="flex-shrink-0 mt-1">
      <div class="h-7 w-7 rounded-lg bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center shadow-sm">
        <svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
      </div>
    </div>
    <div class="rounded-2xl rounded-tl-md bg-[--card] border border-[--border] px-4 py-3 text-sm text-[--foreground] shadow-sm">
      {{ msg.content }}
    </div>
  </div>
</div>
{% endif %}
{% endfor %}