Fix hole-punch regressions: transparency chain, black backing, keyboard

Three fixes for the hole-punch build:
1. White background + shared screen not showing: body and .content both use
   var(--bg) (a light colour) and were still opaque, occluding the native
   video behind the WebView. Make the WHOLE meeting chain transparent under
   .bz-hp (body + .content, on top of .meet-grid/tiles).
2. Backing: also set the view controller's view background to black (saved/
   restored) so any transparent gap reads black, not white — belt-and-braces
   with webView.backgroundColor.
3. Keyboard covering the in-call chat: keyboard resize is "none", so the
   absolutely-positioned meet panels don't move for the keyboard. Lift
   .meet-panel by the reported keyboard height (body.kb-open → bottom:
   calc(var(--kb)+12px)); --kb/kb-open are already set globally by the
   Keyboard listener.

Plugin change (VC background) needs a build; the CSS is web-deployed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

mobile/plugins/native-call/ios/Sources/NativeCallPlugin/NativeCallPlugin.swift

@@ -58,6 +58,7 @@ public class NativeCallPlugin: CAPPlugin, CAPBridgedPlugin, PKPushRegistryDelega
     private var savedWebOpaque = true
     private var savedWebBg: UIColor?
     private var savedScrollBg: UIColor?
+    private var savedVCBg: UIColor?
 
     override public func load() {
         let config = CXProviderConfiguration(localizedName: "Biz Connect")
@@ -197,10 +198,12 @@ public class NativeCallPlugin: CAPPlugin, CAPBridgedPlugin, PKPushRegistryDelega
                     self.savedWebOpaque = web.isOpaque
                     self.savedWebBg = web.backgroundColor
                     self.savedScrollBg = web.scrollView.backgroundColor
+                    self.savedVCBg = self.bridge?.viewController?.view.backgroundColor
                 }
                 web.isOpaque = false
                 web.backgroundColor = .black          // shows through the transparent meeting; also the letterbox bg
                 web.scrollView.backgroundColor = .clear
+                self.bridge?.viewController?.view.backgroundColor = .black // backing so the transparent meeting reads black, not white
                 self.holePunchOn = true
             } else {
                 self.applyHolePunchRestore(web)
@@ -217,6 +220,7 @@ public class NativeCallPlugin: CAPPlugin, CAPBridgedPlugin, PKPushRegistryDelega
         web.isOpaque = savedWebOpaque
         web.backgroundColor = savedWebBg
         web.scrollView.backgroundColor = savedScrollBg
+        bridge?.viewController?.view.backgroundColor = savedVCBg
         holePunchOn = false
     }
 

server/public/home.html

@@ -420,9 +420,15 @@
   /* Hole-punch: native video renders BEHIND a transparent WebView, so all web UI (bar/menus/panels) floats on
      top. Make the meeting transparent so the video shows through; on tiles that have native video, hide the web
      avatar/bg (video shows) while keeping the name/mute/border the web draws. */
+  /* The whole ancestor chain (body + .content are var(--bg), a light colour) must be transparent, or it
+     occludes the native video behind the WebView (that was the "white background, screen not showing" bug). */
+  body.bz-hp, body.bz-hp .content{background:transparent!important;}
   body.bz-hp .meet-grid{background:transparent;}
   body.bz-hp .meet-tile.bz-hasvid{background:transparent;}
   body.bz-hp .meet-tile.bz-hasvid .meet-av{display:none;}
+  /* Keyboard resize is "none", so absolutely-positioned meet panels (chat / participants) don't move for the
+     keyboard — lift them above it using the reported height (--kb, set by the Keyboard listener). */
+  body.kb-open .meet-panel{bottom:calc(var(--kb) + 12px);}
   @media (max-width:760px){
     .meet-grid.sharing-mode{flex-flow:row wrap;height:auto;}
     .meet-grid.sharing-mode .meet-tile.stage{width:100%;height:auto;flex:1 1 100%;min-height:40vh;}