diff --git a/static/css/04-interactive/_chat.css b/static/css/04-interactive/_chat.css
index 8f52def..c0a8df1 100644
--- a/static/css/04-interactive/_chat.css
+++ b/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;
}
diff --git a/templates/partials/widgets/chat-widget.html b/templates/partials/widgets/chat-widget.html
index 1899075..4eccf11 100644
--- a/templates/partials/widgets/chat-widget.html
+++ b/templates/partials/widgets/chat-widget.html
@@ -9,8 +9,8 @@
onclick="toggleChatPanel()">