{% set styles = {
    "normal": "bg-gray-700 text-gray-100",
    "error": "bg-red-800 text-white whitespace-pre-wrap"
} %}

<!-- AI Message Container (Left Aligned) -->
<div class="flex justify-start mb-4">
    <script>document.body.dispatchEvent(new Event('chat:stopLoading'));</script>
    <!-- 
        Dynamic Style Selection 
        - prose/prose-invert: Tailwind typography for Markdown content
    -->
    <div class="{{ styles[ai_message_style] }} rounded-lg py-2 px-4 w-fit max-w-none !max-w-[80%] prose prose-invert markdown-view break-words">
{{ ai_message }}
    </div>
</div>