fix(editor): rebalance per-heading chat unread badges

Unread counts on heading chat controls were as loud as the icon on
desktop. Tighten the pseudo-badge and anchor it to the control. Bump
the mobile docked-tab figure size slightly so short counts stay legible
on the smaller tab.

Made-with: Cursor

Author: HMarzban

packages/webapp/src/styles/_mobile.scss

@@ -228,7 +228,7 @@ html.m_mobile #__next {
               background-color: var(--color-error) !important;
               color: var(--color-error-content) !important;
               border-radius: 0.35rem;
-              font-size: 0.6875rem;
+              font-size: 0.78rem;
               font-weight: 600;
               line-height: 1;
               order: -1;

packages/webapp/src/styles/components/_unread-badge.scss

@@ -61,14 +61,20 @@
 
 // =============================================================================
 // Heading Actions — badge only on .ha-chat-btn (not .ha-group) to avoid duplicates
+// Hit target is size-11 (2.75rem ≈ 44px): keep badge clearly subordinate to the icon.
 // =============================================================================
 .ha-chat-btn[data-unread-count]:not([data-unread-count='']) {
-  @include unread-badge($top: 0, $right: 0, $size: 20px, $font-size: 16px);
+  @include unread-badge($top: -1px, $right: -1px, $size: 18px, $font-size: 13px);
   visibility: visible !important;
 
   &::before {
-    left: 23px;
-    right: auto;
+    left: auto;
+    padding: 0 4px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    // Upper-right of the circle without dominating the 44px hit target
+    top: 1px;
+    right: 1px;
   }
 
   &::after {