From 07de51e56a4f04bdc44e26614ac2130064b71d3f Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Tue, 20 Jan 2026 07:56:12 +0100
Subject: [PATCH] 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 | 2 ++
 app/static/js/app.js     | 6 +++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index ebbb26d..fadfd11 100644
--- a/app/static/css/style.css
+++ b/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 */
diff --git a/app/static/js/app.js b/app/static/js/app.js
index 326a7b5..d61d5f2 100644
--- a/app/static/js/app.js
+++ b/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">