fix: Use colored border instead of fill for emoji avatars

Emoji avatars are now displayed with a colored ring/outline
instead of filled background for better readability.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/static/css/style.css

@@ -80,6 +80,8 @@ main {
 
 .message-avatar.emoji {
     font-size: 1.25rem;
+    background-color: transparent !important;
+    border: 2.5px solid;
 }
 
 /* Message container - holds sender row + bubble + actions */

app/static/js/app.js

@@ -687,8 +687,12 @@ function createMessageElement(msg) {
         // Other messages: left-aligned with avatar
         const avatar = generateAvatar(msg.sender);
 
+        const avatarStyle = avatar.isEmoji
+            ? `border-color: ${avatar.color};`
+            : `background-color: ${avatar.color};`;
+
         wrapper.innerHTML = `
-            <div class="message-avatar${avatar.isEmoji ? ' emoji' : ''}" style="background-color: ${avatar.color};">
+            <div class="message-avatar${avatar.isEmoji ? ' emoji' : ''}" style="${avatarStyle}">
                 ${avatar.content}
             </div>
             <div class="message-container">