Nested Iframe with pointer-events style property

I am trying to add an iframe containing a button to pop up a window chat. It looks as follow:

<iframe
  id="chatSession"
  src="http://localhost:4200/chat-export"
  name="chat"
  style="
    display: inline-block !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    background: transparent !important;
    margin: 0px !important;
    padding: 0px !important;
    z-index: 1 !important;
    overflow: hidden !important;
    pointer-events: none;
  "
  frameborder="0"
  scrolling="yes"
  allowtransparency="true"
></iframe>

The content of http://localhost:4200/chat-export is also the following (The chat logic is implemented in another project, I want to be able to use this chat on any page):

<iframe
  id="chatWidget"
  src="http://localhost:4200/session/new?agentId=4HORORmF1i1gd1WVzaxC&agentName=Agente"
  name="ChatBot"
  scrolling="No"
  style="pointer-events: auto;"
></iframe>
<a id="chatButton" class="floatChat" (click)="controlShow()">
  <i class="fa fa-comment-o my-floatChat" style="pointer-events: auto;"></i>
</a>

As you can see on the first iframe, I set the property pointer-events: none, because I want the background not to stop me from scrolling, but only the button and the window, like the following image: This is the main idea of how I want it to work The problem is that when pointer-events are none, the nested iframe I'm using, even though I set pointer-events:auto doesn't detect any click on the screen.

In conclusion, how can I manage nested Iframes to work as follows:

parent Iframe (pointer-events: none) {

 child iframe (pointer-events:auto ) 

}