diff --git a/extensions/chat-bubble/assets/chat.css b/extensions/chat-bubble/assets/chat.css
index 001cd1de..203564c8 100644
--- a/extensions/chat-bubble/assets/chat.css
+++ b/extensions/chat-bubble/assets/chat.css
@@ -24,6 +24,9 @@
   }
   
   @media (max-width: 480px) {
+    .shop-ai-chat-container.chat-open .shop-ai-chat-bubble {
+      display: none;
+    }
     .shop-ai-chat-bubble {
       width: 50px;
       height: 50px;
diff --git a/extensions/chat-bubble/assets/chat.js b/extensions/chat-bubble/assets/chat.js
index 52f0e04b..1b485855 100644
--- a/extensions/chat-bubble/assets/chat.js
+++ b/extensions/chat-bubble/assets/chat.js
@@ -114,9 +114,10 @@
        * Toggle chat window visibility
        */
       toggleChatWindow: function() {
-        const { chatWindow, chatInput } = this.elements;
+        const { chatWindow, chatInput,container } = this.elements;
 
         chatWindow.classList.toggle('active');
+        container.classList.toggle("chat-open"); // ✅ added
 
         if (chatWindow.classList.contains('active')) {
           // On mobile, prevent body scrolling and delay focus
@@ -138,9 +139,10 @@
        * Close chat window
        */
       closeChatWindow: function() {
-        const { chatWindow, chatInput } = this.elements;
+        const { chatWindow, chatInput ,container} = this.elements;
 
         chatWindow.classList.remove('active');
+        container.classList.remove("chat-open"); // ✅ added
 
         // On mobile, blur input to hide keyboard and enable body scrolling
         if (this.isMobile) {