Fix widget reply effects

public/widget.js

@@ -26,6 +26,7 @@
     root.innerHTML = `
       <style>${styles(settings)}</style>
       <button class="mf-launcher ${launcherEffectClasses(settings, site.isOnline)}" type="button" aria-label="${copy.title}">
+        <span class="mf-reply-pulse" aria-hidden="true"></span>
         <span class="mf-launcher-icon"></span>
         <span class="mf-launcher-label">${escapeHtml(site.isOnline ? "Jsme online" : "Offline")}</span>
         <span class="mf-message-badge" hidden>0</span>
@@ -434,7 +435,11 @@
 
   function applyAdminReplyEffects(launcher, settings, unreadCount) {
     const notifications = settings.notifications || {};
-    if (notifications.pulseOnAdminReply !== false) launcher.classList.add("mf-notify");
+    if (notifications.pulseOnAdminReply !== false) {
+      launcher.classList.remove("mf-notify");
+      void launcher.offsetWidth;
+      launcher.classList.add("mf-notify");
+    }
     if (notifications.badgeOnAdminReply !== false) updateMessageBadge(launcher, unreadCount);
     if (notifications.labelOnAdminReply !== false) {
       launcher.classList.add("mf-show-message-label");
@@ -486,14 +491,16 @@
       .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-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; }
+      .mf-reply-pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; }
       .mf-online.mf-effect-breathe { animation: mfBreathe 2.8s ease-in-out infinite; }
       .mf-online.mf-effect-ring:before { position: absolute; inset: -5px; border: 2px solid ${c.brand}; border-radius: 50%; opacity: .62; content: ""; animation: mfRing 2.2s ease-out infinite; }
       .mf-effect-avatar .mf-launcher-icon { width: 26px; height: 20px; border-radius: 12px 12px 10px 10px; background: rgb(255 255 255 / 24%); border: 2px solid ${c.brandText}; position: relative; }
       .mf-effect-avatar .mf-launcher-icon:before { position: absolute; left: 6px; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: ${c.brandText}; transform: none; box-shadow: 10px 0 0 ${c.brandText}; }
       .mf-effect-avatar .mf-launcher-icon:after { position: absolute; left: 7px; top: 13px; width: 12px; height: 2px; border-radius: 999px; background: ${c.brandText}; transform: none; opacity: .88; }
       .mf-offline { filter: grayscale(.2) saturate(.72); opacity: .86; }
-      .mf-launcher.mf-notify { animation: mfPulse 1.15s ease-out infinite; }
+      .mf-notify .mf-reply-pulse { animation: mfPulse 1.15s ease-out infinite; }
-      .mf-launcher.mf-wiggle { animation: mfWiggle .62s ease-in-out 2; }
+      .mf-wiggle .mf-launcher-icon { animation: mfWiggle .62s ease-in-out 2; }
       .mf-panel {
         position: fixed; z-index: 2147483001; ${desktop.side}: ${desktop.sideOffsetPx}px; bottom: ${desktop.bottomPx + 72}px;
         width: min(${desktop.widthPx}px, calc(100vw - 24px)); max-height: min(680px, calc(100vh - 110px)); display: none;
@@ -539,9 +546,9 @@
       .mf-powered { justify-self: center; color: ${c.muted}; font-size: 11px; text-decoration: none; }
       .mf-powered:hover { color: ${c.brand}; text-decoration: underline; }
       @keyframes mfPulse {
-        0% { box-shadow: 0 12px 30px rgb(0 0 0 / 22%), 0 0 0 0 rgb(15 143 111 / 42%); transform: scale(1); }
+        0% { box-shadow: 0 0 0 0 rgb(255 59 48 / 46%); opacity: .9; transform: scale(1); }
-        70% { box-shadow: 0 12px 30px rgb(0 0 0 / 22%), 0 0 0 14px rgb(15 143 111 / 0%); transform: scale(1.04); }
+        70% { box-shadow: 0 0 0 18px rgb(255 59 48 / 0%); opacity: 0; transform: scale(1.08); }
-        100% { box-shadow: 0 12px 30px rgb(0 0 0 / 22%), 0 0 0 0 rgb(15 143 111 / 0%); transform: scale(1); }
+        100% { box-shadow: 0 0 0 0 rgb(255 59 48 / 0%); opacity: 0; transform: scale(1); }
       }
       @keyframes mfBreathe {
         0%, 100% { transform: scale(1); box-shadow: 0 12px 30px rgb(0 0 0 / 22%); }