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;
 }