diff --git a/static/css/04-interactive/_chat.css b/static/css/04-interactive/_chat.css
index fb97832..686d7dd 100644
--- a/static/css/04-interactive/_chat.css
+++ b/static/css/04-interactive/_chat.css
@@ -42,6 +42,47 @@
display: none;
}
+/* Wave greeting — pops up 3 times then stays hidden */
+.chat-wave {
+ position: absolute;
+ top: -8px;
+ right: -8px;
+ font-size: 0.85rem;
+ animation: chatWaveHello 6s ease-in-out 3s forwards;
+ opacity: 0;
+ pointer-events: none;
+}
+
+@keyframes chatWaveHello {
+ 0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
+ 5% { opacity: 1; transform: scale(1) rotate(0deg); }
+ 8% { transform: scale(1) rotate(15deg); }
+ 11% { transform: scale(1) rotate(-10deg); }
+ 14% { transform: scale(1) rotate(15deg); }
+ 17% { transform: scale(1) rotate(0deg); }
+ 25% { opacity: 0; transform: scale(0.5); }
+ 35% { opacity: 0; transform: scale(0.5) rotate(0deg); }
+ 40% { opacity: 1; transform: scale(1) rotate(0deg); }
+ 43% { transform: scale(1) rotate(15deg); }
+ 46% { transform: scale(1) rotate(-10deg); }
+ 49% { transform: scale(1) rotate(15deg); }
+ 52% { transform: scale(1) rotate(0deg); }
+ 60% { opacity: 0; transform: scale(0.5); }
+ 70% { opacity: 0; transform: scale(0.5) rotate(0deg); }
+ 75% { opacity: 1; transform: scale(1) rotate(0deg); }
+ 78% { transform: scale(1) rotate(15deg); }
+ 81% { transform: scale(1) rotate(-10deg); }
+ 84% { transform: scale(1) rotate(15deg); }
+ 87% { transform: scale(1) rotate(0deg); }
+ 95% { opacity: 0; transform: scale(0.5); }
+ 100% { opacity: 0; }
+}
+
+/* Hide wave when chat is open */
+.chat-toggle-btn.mascot-active .chat-wave {
+ display: none;
+}
+
.chat-toggle-btn.mascot-active {
opacity: 1;
background: var(--accent-green, #27ae60);
diff --git a/templates/partials/widgets/chat-widget.html b/templates/partials/widgets/chat-widget.html
index bbac6c6..1899075 100644
--- a/templates/partials/widgets/chat-widget.html
+++ b/templates/partials/widgets/chat-widget.html
@@ -9,6 +9,7 @@
onclick="toggleChatPanel()">