fix: wave fully opaque (outside button), animation plays twice with pause

static/css/04-interactive/_chat.css

@@ -43,36 +43,49 @@
 }
 
 /* Wave greeting — pops up 3 times then stays hidden */
+/* Wave greeting — independent of button opacity */
 .chat-wave {
-    position: absolute;
-    top: -8px;
-    left: -8px;
-    font-size: 1rem;
-    animation: chatWaveHello 3s ease-in-out 2s forwards;
+    position: fixed;
+    bottom: calc(6rem + 38px);
+    right: calc(2rem + 38px);
+    z-index: 1001;
+    font-size: 1.1rem;
+    animation: chatWaveHello 5s ease-in-out 2s forwards;
     opacity: 0;
     pointer-events: none;
 }
 
 @keyframes chatWaveHello {
-    /* Fade in */
+    /* === First wave === */
     0%   { opacity: 0; transform: rotate(0deg); }
-    8%   { opacity: 1; transform: rotate(0deg); }
-    /* Wave: clockwise → counter-clockwise, 3 swings */
-    14%  { transform: rotate(20deg); }
-    20%  { transform: rotate(-15deg); }
-    26%  { transform: rotate(18deg); }
-    32%  { transform: rotate(-12deg); }
-    38%  { transform: rotate(15deg); }
-    44%  { transform: rotate(-8deg); }
-    50%  { transform: rotate(0deg); }
-    /* Hold still briefly */
-    65%  { opacity: 1; transform: rotate(0deg); }
-    /* Fade out */
-    100% { opacity: 0; transform: rotate(0deg); }
+    4%   { opacity: 1; transform: rotate(0deg); }
+    7%   { transform: rotate(20deg); }
+    10%  { transform: rotate(-15deg); }
+    13%  { transform: rotate(18deg); }
+    16%  { transform: rotate(-12deg); }
+    19%  { transform: rotate(15deg); }
+    22%  { transform: rotate(-8deg); }
+    25%  { transform: rotate(0deg); }
+    30%  { opacity: 1; }
+    35%  { opacity: 0; }
+    /* === Pause === */
+    45%  { opacity: 0; transform: rotate(0deg); }
+    /* === Second wave === */
+    49%  { opacity: 1; transform: rotate(0deg); }
+    52%  { transform: rotate(20deg); }
+    55%  { transform: rotate(-15deg); }
+    58%  { transform: rotate(18deg); }
+    61%  { transform: rotate(-12deg); }
+    64%  { transform: rotate(15deg); }
+    67%  { transform: rotate(-8deg); }
+    70%  { transform: rotate(0deg); }
+    78%  { opacity: 1; }
+    90%  { opacity: 0; }
+    100% { opacity: 0; }
 }
 
 /* Hide wave when chat is open */
-.chat-toggle-btn.mascot-active .chat-wave {
+.chat-wave.chat-wave-hidden {
     display: none;
 }
 

templates/partials/widgets/chat-widget.html

@@ -9,8 +9,8 @@
     onclick="toggleChatPanel()">
     <iconify-icon icon="mdi:robot-happy-outline" class="chat-icon-open"></iconify-icon>
     <iconify-icon icon="mdi:close" class="chat-icon-close"></iconify-icon>
-    <span class="chat-wave">👋</span>
 </button>
+<span id="chat-wave" class="chat-wave no-print">👋</span>
 
 <div id="chat-panel" class="chat-panel no-print">
     <div class="chat-header">
@@ -126,8 +126,10 @@ function pollChatStatus() {
 function toggleChatPanel() {
     var panel = document.getElementById('chat-panel');
     var btn = document.getElementById('chat-toggle-btn');
+    var wave = document.getElementById('chat-wave');
     panel.classList.toggle('chat-open');
     btn.classList.toggle('mascot-active');
+    if (wave) wave.classList.add('chat-wave-hidden');
     if (panel.classList.contains('chat-open')) {
         document.getElementById('chat-input').focus();
     }