{% for message in messages %}
<div class="message {% if message.is_user %}user{% else %}bot{% endif %}" id="msg-{{ message.id }}">
    <div class="message-avatar">
        {% if message.is_user %}
        <span class="avatar-user">U</span>
        {% else %}
        <span class="avatar-bot">🤖</span>
        {% endif %}
    </div>
    <div class="message-content">
        <div class="message-header">
            <span class="message-sender">{{ message.sender }}</span>
            <span class="message-time">{{ message.timestamp }}</span>
        </div>
        <div class="message-body">{{ message.content }}</div>
    </div>
</div>
{% endfor %}
{% if messages.is_empty() %}
<div class="empty-messages">
    <div class="empty-icon">💬</div>
    <p>Start a conversation</p>
    <p class="empty-hint">Type a message below or use voice input</p>
</div>
{% endif %}