Iframe and phone notch

I am using Intercom in my application and it works fine, however, since the messenger pops up in an iframe it does not account for the notch for iPhone X or similar devices and it covers the status bar. I have tried adjusting the iframe CSS for this several ways and I can’t get it to work.

What have you tried? Please share some code.

I have tried several different things for the iframe, here is one example below. I have tried margin, padding, etc.

.intercom-messenger-frame {
margin-top: env(safe-area-inset-top) !important;
margin-bottom: env(safe-area-inset-bottom) !important;
}