From 608d39a4f2f3a99dfaa3c1fdba95621cd14d881b Mon Sep 17 00:00:00 2001
From: rajchales-monito <rajchales-monito@users.noreply.github.com>
Date: Thu, 30 Jul 2026 17:28:17 +0200
Subject: [PATCH] Prioritize message alert over online launcher effects

---
 public/admin.css | 4 ++--
 public/widget.js | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/public/admin.css b/public/admin.css
index 5a580a9..de4e43c 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -288,8 +288,8 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 }
 .launcher-preview-status {
   position: absolute;
-  top: -3px;
-  left: -3px;
+  top: -5px;
+  right: -5px;
   width: 14px;
   height: 14px;
   border: 2px solid #ffffff;
diff --git a/public/widget.js b/public/widget.js
index 2c11a9b..d39aeea 100644
--- a/public/widget.js
+++ b/public/widget.js
@@ -560,6 +560,7 @@
 
   function applyAdminReplyEffects(launcher, settings, unreadCount) {
     const notifications = settings.notifications || {};
+    launcher.classList.add("mf-has-message-alert");
     if (notifications.pulseOnAdminReply !== false) {
       launcher.classList.remove("mf-notify");
       void launcher.offsetWidth;
@@ -569,7 +570,6 @@
     if (notifications.labelOnAdminReply !== false) {
       launcher.classList.add("mf-show-message-label");
       clearTimeout(applyAdminReplyEffects.labelTimer);
-      applyAdminReplyEffects.labelTimer = setTimeout(() => launcher.classList.remove("mf-show-message-label"), 4200);
     }
     if (notifications.wiggleOnAdminReply !== false) {
       launcher.classList.remove("mf-wiggle");
@@ -581,7 +581,7 @@
   }
 
   function clearMessageEffects(launcher) {
-    launcher.classList.remove("mf-notify", "mf-wiggle", "mf-show-message-label");
+    launcher.classList.remove("mf-notify", "mf-wiggle", "mf-show-message-label", "mf-has-message-alert");
     clearTimeout(applyAdminReplyEffects.labelTimer);
     clearTimeout(applyAdminReplyEffects.wiggleTimer);
   }
@@ -643,10 +643,12 @@
       .mf-launcher-label { position: absolute; ${labelOffset} top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: ${c.text}; color: white; font-size: 12px; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: opacity .18s ease, transform .18s ease; }
       .mf-online.mf-effect-hover-label:hover .mf-launcher-label { opacity: 1; transform: translateY(-50%) translateX(0); }
       .mf-effect-persistent-label .mf-launcher-label { opacity: 1; transform: translateY(-50%) translateX(0); }
+      .mf-has-message-alert .mf-launcher-label { opacity: 0; transform: translateY(-50%) translateX(8px); }
       .mf-message-label { position: absolute; ${labelOffset} top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: ${c.text}; color: white; font-size: 12px; font-weight: 700; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: opacity .18s ease, transform .18s ease; }
       .mf-show-message-label .mf-message-label { opacity: 1; transform: translateY(-50%) translateX(0); }
-      .mf-status-dot { position: absolute; top: -3px; left: -3px; width: 14px; height: 14px; display: none; border: 2px solid white; border-radius: 50%; background: #c9d4ce; box-shadow: 0 0 0 4px rgb(201 212 206 / 24%); }
+      .mf-status-dot { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; display: none; border: 2px solid white; border-radius: 50%; background: #c9d4ce; box-shadow: 0 0 0 4px rgb(201 212 206 / 24%); }
       .mf-effect-status-dot .mf-status-dot { display: block; }
+      .mf-has-message-alert .mf-status-dot { display: none; }
       .mf-online .mf-status-dot { background: #2f9e44; box-shadow: 0 0 0 4px rgb(47 158 68 / 16%); }
       .mf-message-badge { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; border: 2px solid white; background: #ff3b30; color: white; font-size: 12px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px rgb(0 0 0 / 18%); }
       .mf-message-badge[hidden] { display: none !important; }