Update static/style.css

static/style.css

@@ -52,6 +52,7 @@
     bottom: 90px;
     width: 380px;
     height: 560px;
+    max-width: calc(100vw - 20px); /* prevents left cut */
     background: #fff;
     border-radius: 20px;
     box-shadow: 0 30px 80px rgba(0,0,0,0.25);
@@ -65,7 +66,6 @@
     transition: 0.25s ease;
 }
 
-/* OPEN STATE */
 .chatbot-container.open {
     opacity: 1;
     transform: translateY(0);
@@ -159,7 +159,9 @@
     background: #eef3ff;
 }
 
-/* CHAT BUBBLES */
+/* ============================= */
+/* BUBBLES */
+/* ============================= */
 .message {
     display: flex;
 }
@@ -227,30 +229,30 @@
 }
 
 /* ============================= */
-/* 📱 RESPONSIVE FIXES */
+/* 📱 RESPONSIVE */
 /* ============================= */
 
 /* Tablet */
 @media (max-width: 768px) {
     .chatbot-container {
-        width: 92%;
-        right: 4%;
-        left: 4%;
+        width: 90%;
+        right: 5%;
+        left: auto;
         bottom: 80px;
-        height: 80vh;
+        height: 75vh;
         border-radius: 16px;
     }
 }
 
-/* Mobile */
+/* Mobile (widget style, NOT fullscreen) */
 @media (max-width: 480px) {
     .chatbot-container {
-        width: 100%;
-        height: 100%;
-        right: 0;
-        left: 0;
-        bottom: 0;
-        border-radius: 0;
+        width: calc(100% - 20px); /* margin both sides */
+        right: 10px;
+        left: 10px;
+        bottom: 80px;
+        height: 70vh; /* not full screen */
+        border-radius: 18px;
     }
 
     .chat-header {