fix: mobile viewport overflow — no horizontal scroll on iPhone

- Replace 100vw with 100% on mobile chat panel (avoids scrollbar width)
- Add overflow-x: hidden on html/body for mobile
- Add box-sizing: border-box on mobile panel
- Add overflow: hidden and max-width: 100% on chat rows
- Add overflow-x: hidden on messages container

static/css/04-interactive/_chat.css

@@ -314,6 +314,7 @@
 .chat-messages {
     flex: 1;
     overflow-y: auto;
+    overflow-x: hidden;
     padding: 12px;
     display: flex;
     flex-direction: column;
@@ -327,6 +328,8 @@
     display: flex;
     gap: 8px;
     align-items: flex-start;
+    max-width: 100%;
+    overflow: hidden;
 }
 
 .chat-row-bot {
@@ -845,17 +848,23 @@
    ========================================================================== */
 
 @media (max-width: 480px) {
+    /* Prevent horizontal scroll when chat is open */
+    html, body {
+        overflow-x: hidden;
+    }
+
     /* Default compact: bottom sheet with clear separation */
     .chat-panel {
         bottom: 0;
         left: 0;
         right: 0;
-        width: 100vw;
-        max-width: 100vw;
+        width: 100%;
+        max-width: 100%;
         max-height: 50vh;
         border-radius: 12px 12px 0 0;
         box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
         overflow: hidden;
+        box-sizing: border-box;
     }
 
     .chat-toggle-btn {
@@ -880,8 +889,8 @@
         left: 0;
         right: 0;
         top: auto;
-        width: 100vw;
-        max-width: 100vw;
+        width: 100%;
+        max-width: 100%;
         height: 50vh;
         max-height: 50vh;
         border-radius: 12px 12px 0 0;
@@ -902,8 +911,8 @@
         left: 0;
         right: 0;
         top: auto;
-        width: 100vw;
-        max-width: 100vw;
+        width: 100%;
+        max-width: 100%;
         height: auto;
         max-height: 50vh;
         border-radius: 12px 12px 0 0;