fix(styles): update unread message count badge styles

Author: HMarzban

packages/webapp/src/styles/components/_heading-actions.scss

@@ -78,19 +78,23 @@
 
 // Unread message count badge
 .ha-chat-btn[data-unread-count]:not([data-unread-count='']) {
-  // Hide the chat icon when showing count
-  .chatLeft {
-    display: none;
-  }
-
   // Show count inside button
   &::before {
     content: attr(data-unread-count);
     color: #fff;
-    font-weight: 600;
-    font-size: 12px;
+    font-weight: semibold;
     display: flex;
     align-items: center;
     justify-content: center;
+    transform: none;
+    opacity: 1;
+    background-color: red !important;
+    font-size: 16px;
+    top: 0px;
+    right: 0px;
+    left: 23px;
+  }
+  &::after {
+    display: none;
   }
 }

packages/webapp/src/styles/styles.scss

@@ -305,19 +305,6 @@ $bg-root: #f8f9fa;
         &[data-unread-count] {
           visibility: visible;
         }
-        &[data-unread-count]::after {
-          content: attr(data-unread-count);
-          position: absolute;
-          top: -2px;
-          right: -2px;
-          background: red;
-          color: white;
-          border-radius: 50%;
-          font-size: 14px;
-          min-width: 24px;
-          text-align: center;
-          padding: 2px 4px;
-        }
         svg {
           position: relative;
           top: 1px;