Unify widget close behavior

public/widget.js

@@ -86,22 +86,35 @@
       knownAdminMessageId: 0
     };
 
-    launcher.addEventListener("click", () => {
+    const closePanel = () => {
-      panel.classList.toggle("open");
+      panel.classList.remove("open");
-      launcher.classList.toggle("mf-panel-open", panel.classList.contains("open"));
+      launcher.classList.remove("mf-panel-open");
-      if (panel.classList.contains("open")) {
+    };
+    const openPanel = () => {
+      panel.classList.add("open");
+      launcher.classList.add("mf-panel-open");
       launcher.classList.remove("mf-notify");
       clearMessageEffects(launcher);
       messageEffectState.unreadAdminCount = 0;
       updateMessageBadge(launcher, messageEffectState.unreadAdminCount);
       scrollMessagesToBottom(messages);
       markConversationSeen();
+    };
+
+    launcher.addEventListener("click", () => {
+      if (panel.classList.contains("open")) {
+        closePanel();
+      } else {
+        openPanel();
       }
     });
-    close.addEventListener("click", () => {
+    document.addEventListener("pointerdown", (event) => {
-      panel.classList.remove("open");
+      if (!panel.classList.contains("open")) return;
-      launcher.classList.remove("mf-panel-open");
+      if (!window.matchMedia("(min-width: 641px)").matches) return;
+      if (event.composedPath().includes(panel) || event.composedPath().includes(launcher)) return;
+      closePanel();
     });
+    close.addEventListener("click", closePanel);
     infoButton.addEventListener("click", () => {
       root.querySelector(".mf-gdpr").hidden = !root.querySelector(".mf-gdpr").hidden;
     });
@@ -297,10 +310,7 @@
     infoButton.setAttribute("aria-label", copy.infoTitle || "GDPR informace");
     infoButton.title = copy.infoTitle || "GDPR informace";
     infoButton.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 10h2v7h-2v-7Zm0-3h2v2h-2V7Zm1-5a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"></path></svg>`;
-    closeButton.innerHTML = `
+    closeButton.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7.05 5.64 4.95 4.95 4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41Z"></path></svg>`;
-      <svg class="mf-close-minimize" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.7 8.7 12 14l5.3-5.3 1.4 1.4L12 16.8l-6.7-6.7 1.4-1.4Z"></path></svg>
-      <svg class="mf-close-fullscreen" viewBox="0 0 24 24" aria-hidden="true"><path d="m7.05 5.64 4.95 4.95 4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41Z"></path></svg>
-    `;
     closeButton.setAttribute("aria-label", copy.closeLabel || "Zmensit chat");
     closeButton.title = copy.closeLabel || "Zmensit chat";
     closeButton.before(actions);
@@ -613,13 +623,12 @@
         background: ${c.surface}; border: 1px solid #dfe6e2; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 50px rgb(0 0 0 / 18%);
       }
       .mf-panel.open { display: grid; grid-template-rows: auto minmax(130px, 1fr) auto auto; }
-      header { position: relative; display: grid; gap: 3px; background: ${c.brand}; color: ${c.brandText}; padding: 15px 122px 15px 16px; }
+      header { position: relative; display: grid; gap: 3px; background: ${c.brand}; color: ${c.brandText}; padding: 15px 118px 15px 16px; }
       header strong { font-size: 16px; }
       header small { opacity: .92; font-size: 13px; line-height: 1.35; }
-      .mf-header-actions { position: absolute; top: 9px; right: 9px; display: flex; gap: 6px; }
+      .mf-header-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; }
-      .mf-close, .mf-info { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: rgb(255 255 255 / 16%); color: ${c.brandText}; cursor: pointer; padding: 0; }
+      .mf-close, .mf-info { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgb(255 255 255 / 16%); color: ${c.brandText}; cursor: pointer; padding: 0; }
-      .mf-close svg, .mf-info svg { width: 19px; height: 19px; fill: currentColor; }
+      .mf-close svg, .mf-info svg { width: 24px; height: 24px; fill: currentColor; }
-      .mf-close-fullscreen { display: none; }
       .mf-messages { padding: 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
       .mf-message { max-width: 86%; padding: 9px 11px; border-radius: 8px; background: #f1f5f2; color: ${c.text}; }
       .mf-message.admin { align-self: flex-start; background: #eef7f4; }
@@ -708,8 +717,6 @@
           width: 26px;
           height: 26px;
         }
-        .mf-close-minimize { display: none; }
-        .mf-close-fullscreen { display: block; }
         .mf-messages {
           min-height: 0;
           padding: 14px 12px;