Help with Mobile theme CSS

Hello there, i’m hoping this is still monitored?

I am working on a site on behalf of a friend and client and are making some minor changes.

One of these changes was to hide a very annoying facebook chat pop up as we decided to use another plugin that enables contact from FB and Whatsapp combined.

I managed to hide the widget by inserting some customer css as below:

.fb_dialog_advanced {
    border-radius: 8px;
    padding: 10px;
    display: none;
}

I did of course forget about the mobile experience and as you would expect it still pops up on ipads, phones etc.

Ideally I would love to find the code and remove it altogether, and in fact I found that the source of the widget is being published by a module within Jetpack called “sharedaddy” – or at least that’s where I find the hits for code snippet:

<!-- Load Facebook SDK for JavaScript -->
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            xfbml            : true,
            version          : 'v4.0'
          });
        };

        (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

      <!-- Your customer chat code -->
      <div class="fb-customerchat"
        attribution=setup_tool
        page_id="XXXXXXXXXXXXXXX"> //REDACTED
      </div><script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/XXXXX.js");// REDACTED
</script>	
<script type="text/javascript">
		(function () {
			var c = document.body.className;
			c = c.replace(/woocommerce-no-js/, 'woocommerce-js');
			document.body.className = c;
		})();
</script>