ai: Use HTML for brain emoji in collapsible block.

src/ui/reasoning.py

@@ -34,9 +34,13 @@ def styles(reasoning: str, content: str, expanded: bool = False) -> str:
     # so the block starts expanded when rendered in the browser.
     open_attr = "open" if expanded else ""
 
+    # Use the HTML numeric character reference for the brain emoji instead of manual emoji character.
+    # This ensures consistent rendering and avoids direct emoji input.
+    emoji = "🧠"  # Unicode code point U+1F9E0 for 🧠 emoji
+
     # Return the full HTML string with inline CSS styles applied to create an eye-catching, user-friendly collapsible block.
     # The <details> element acts as a toggleable container with smooth rounded corners and a dynamic shadow that subtly intensifies on hover.
-    # The <summary> element serves as the clickable header with a brain emoji to visually represent reasoning, 
+    # The <summary> element serves as the clickable header with a brain emoji represented by its HTML code to visually represent reasoning,
     # featuring a color transition on hover to encourage user interaction.
     # The reasoning text is enclosed in a <div> with generous spacing, a delicate top border, and crisp white text for excellent readability.
     # The entire block uses a clean, modern sans-serif font and avoids any background color override to maintain design flexibility.
@@ -58,7 +62,7 @@ def styles(reasoning: str, content: str, expanded: bool = False) -> str:
     user-select: none;                        /* Prevent text selection on click for cleaner interaction */
     transition: color 0.25s ease-in-out;     /* Smooth color transition when hovering */
   " onmouseover="this.style.color='#FFD700';" onmouseout="this.style.color='white';">
-    🧠 Reasoning
+    {emoji} Reasoning
   </summary>
   <div style="
     margin-top: 12px;                         /* Clear separation between summary and content */