Make widget fullscreen on mobile

public/widget.js

@@ -88,6 +88,7 @@
 
     launcher.addEventListener("click", () => {
       panel.classList.toggle("open");
+      launcher.classList.toggle("mf-panel-open", panel.classList.contains("open"));
       if (panel.classList.contains("open")) {
         launcher.classList.remove("mf-notify");
         clearMessageEffects(launcher);
@@ -97,7 +98,10 @@
         markConversationSeen();
       }
     });
-    close.addEventListener("click", () => panel.classList.remove("open"));
+    close.addEventListener("click", () => {
+      panel.classList.remove("open");
+      launcher.classList.remove("mf-panel-open");
+    });
     infoButton.addEventListener("click", () => {
       root.querySelector(".mf-gdpr").hidden = !root.querySelector(".mf-gdpr").hidden;
     });
@@ -662,8 +666,49 @@
         72% { transform: translateY(-1px) rotate(-2deg); }
       }
       @media (max-width: 640px) {
-        .mf-launcher { ${mobile.side}: ${mobile.sideOffsetPx}px; bottom: ${mobile.bottomPx}px; }
-        .mf-panel { ${mobile.side}: ${mobile.sideOffsetPx}px; bottom: ${mobile.bottomPx + 68}px; width: min(${mobile.widthPx}px, calc(100vw - 24px)); max-height: calc(100vh - 96px); }
+        .mf-launcher {
+          ${mobile.side}: max(${mobile.sideOffsetPx}px, env(safe-area-inset-${mobile.side}, 0px));
+          bottom: max(${mobile.bottomPx}px, env(safe-area-inset-bottom, 0px));
+        }
+        .mf-launcher.mf-panel-open { display: none; }
+        .mf-panel {
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: 0;
+          width: 100vw;
+          max-width: none;
+          height: 100dvh;
+          max-height: none;
+          border: 0;
+          border-radius: 0;
+          box-shadow: none;
+        }
+        .mf-panel.open {
+          grid-template-rows: auto minmax(0, 1fr) auto auto;
+        }
+        header {
+          padding-top: max(15px, env(safe-area-inset-top, 0px));
+        }
+        .mf-messages {
+          min-height: 0;
+          padding: 14px 12px;
+        }
+        .mf-form {
+          padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
+          gap: 8px;
+        }
+        textarea {
+          min-height: 60px;
+          max-height: 96px;
+        }
+        .mf-send {
+          min-height: 60px;
+        }
+        .mf-dropzone {
+          min-height: 54px;
+          padding: 10px 12px;
+        }
       }
     `;
   }