{% load humanize %}
<div class="flex gap-2.5 items-start">
    <div class="w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0" style="background: var(--primary);">
        {{ reply.author.email|make_list|first|upper }}
    </div>
    <div class="flex-1 min-w-0">
        <div class="bg-white border border-stone-200 rounded-xl rounded-tl-sm px-3.5 py-2.5" style="box-shadow: var(--shadow-xs);">
            <div class="flex items-center gap-2 mb-1">
                <span class="text-[12px] font-semibold text-stone-800">{{ reply.author.get_short_name|default:reply.author.email }}</span>
                <span class="badge-pill" style="background: var(--primary-soft); color: var(--brand-700);">Reply</span>
                <span class="text-[11px] text-stone-400 ml-auto">{{ reply.sent_at|timesince }} ago</span>
            </div>
            <p class="text-[13px] text-stone-700 leading-relaxed whitespace-pre-wrap">{{ reply.body }}</p>
        </div>
    </div>
</div>