<!DOCTYPE html>
<html lang="zh-CN">
<body style="font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #4e5969; background-color: #f2f3f5; margin: 0; padding: 20px;">
<div style="max-width: 800px; margin: 0 auto;">
    {% for conversation in conversations %}
    <div style="background-color: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-radius: 12px; margin-bottom: 20px; padding: 16px;">
        <div style="color: #86909c; border-bottom: 1px solid #e5e6eb; margin-bottom: 12px; padding-bottom: 8px;">会话开始时间：{{ conversation.started_at }}</div>
        <div style="display: flex; flex-direction: column; gap: 12px;">
            {% for message in conversation.messages %}
            <div style="max-width: 75%; padding: 10px 14px; border-radius: 18px; line-height: 1.4; position: relative; word-wrap: break-word; {% if message.sender_type == 'customer' %}background-color: #94BFFF; border-top-right-radius: 4px; margin-left: 25%; align-self: flex-end;{% else %}background-color: white; border: 1px solid #e5e6eb; border-top-left-radius: 4px; margin-right: 25%; align-self: flex-start;{% endif %}">
                <div style="font-size: 12px; color: #86909c; margin-bottom: 4px; {% if message.sender_type == 'customer' %}text-align: right;{% else %}text-align: left;{% endif %}">{{ message.sender }}</div>
                <div>
                    {{ message.content }}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>
</body>
</html>