diff --git a/assistant.css b/assistant.css index e78fd253..dd604b7e 100644 --- a/assistant.css +++ b/assistant.css @@ -18,6 +18,8 @@ bottom-right, so move the assistant to the bottom-left there. */ .msa-root.msa-left { right: auto; left: 20px; } .msa-root.msa-left .msa-panel { right: auto; left: 0; } +/* Hidden while a bottom overlay (cookie consent / language banner) is up. */ +.msa-root.msa-hidden { display: none !important; } /* launcher */ .msa-launch { diff --git a/assistant.js b/assistant.js index a4372a7d..57ad655c 100644 --- a/assistant.js +++ b/assistant.js @@ -321,6 +321,19 @@ root.querySelector(".msa-x").addEventListener("click", close); root.querySelector(".msa-form").addEventListener("submit", function (e) { e.preventDefault(); submit(); }); document.addEventListener("keydown", function (e) { if (e.key === "Escape" && opened) close(); }); + + // Yield to bottom-anchored overlays (cookie-consent banner, language + // banner) so the launcher never sits on top of their action buttons — + // important in in-app browsers (Instagram/Facebook) where everything + // stacks at the bottom. The pill reappears once they are dismissed. + (function () { + function overlayUp() { + return !!document.querySelector(".msos-cc") || !!document.querySelector(".lang-suggest"); + } + function sync() { root.classList.toggle("msa-hidden", overlayUp()); } + try { new MutationObserver(sync).observe(document.body, { childList: true }); } catch (e) {} + sync(); + })(); } if (document.readyState !== "loading") build(); diff --git a/css/components/_lang-banner.css b/css/components/_lang-banner.css index 8fb9bd6f..e3c5c7fc 100644 --- a/css/components/_lang-banner.css +++ b/css/components/_lang-banner.css @@ -56,9 +56,9 @@ .lang-suggest { left: 16px; right: 16px; - /* sit above the floating "Ask MSOS" pill (bottom-right, z-index above - this banner) so it never covers the dismiss (×) button */ - bottom: 84px; + /* The Ask-MSOS pill now hides while this banner is up (see assistant.js), + so the banner can sit at the bottom without colliding with it. */ + bottom: 16px; transform: translateY(24px); flex-wrap: wrap; }