Update style.css

style.css

@@ -147,4 +147,44 @@ button:hover {
   opacity: 0;
   transition: opacity 0.1s;
   z-index: 9999;
+}
+/* === Mobile Responsive Overrides === */
+@media (max-width: 600px) {
+  /* allow vertical scrolling on small screens */
+  body {
+    overflow: auto;
+  }
+
+  /* tighten up padding */
+  .interface {
+    padding: 5rem 1rem 1rem !important;
+    height: auto !important;
+  }
+
+  /* smaller, centered avatar */
+  #avatar {
+    width: 100px !important;
+    height: 100px !important;
+    margin-bottom: 0.75rem !important;
+  }
+
+  /* adjust chatbox sizing & font */
+  #chatbox {
+    font-size: 0.9rem;
+    max-height: 50vh;
+  }
+
+  /* stack form vertically */
+  form {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  input[type="text"],
+  button {
+    width: 100%;
+    box-sizing: border-box;
+  }
+  button {
+    margin: 0; /* remove side margin */
+  }
 }