FIX: better supports ipad and hub footer nav (#25518)

Since https://github.com/discourse/discourse/pull/25501 this behavior was broken. This PR attempts to fix it by being more fine grain.

Also note that this PR is moving `footer-nav-ipad` and `footer-nav-visible` to the `html` element and not the `body`. It makes more sense as we are already adding most of other global state class like `keyboard-visible` to the `html` element.

Tested on:
- chrome desktop
- safari ios - iphone
- PWA ios - iphone
- PWA ios - ipad
- DiscourseHub iphone

plugins/chat/assets/stylesheets/common/chat-height-mixin.scss

@@ -1,26 +1,24 @@
 @mixin chat-height($inset: 0px) {
   // desktop and mobile
   // -1px is for the bottom border of the chat navbar
-
-  height: calc(
-    var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
-      var(--composer-height, 0px) - var(--footer-nav-height, 0px) - 1px - $inset
+  $base-height: calc(
+    var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - 1px - $inset
   );
 
+  height: calc($base-height - var(--composer-height, 0px));
+
   // mobile with keyboard opened
-  .keyboard-visible & {
-    height: calc(
-      var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
-        var(--footer-nav-height, 0px) - 1px - $inset
-    );
+  html.keyboard-visible & {
+    height: calc($base-height);
   }
 
   // ipad
-  .footer-nav-ipad & {
-    height: calc(
-      var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
-        var(--composer-height, 0px) - var(--footer-nav-height, 0px) - 1px -
-        $inset
-    );
+  html.footer-nav-ipad & {
+    height: calc($base-height - var(--composer-height, 0px));
+  }
+
+  // PWA/HUB without keyboard
+  html.footer-nav-visible:not(.keyboard-visible) & {
+    height: calc($base-height - var(--footer-nav-height, 0px));
   }
 }

plugins/chat/assets/stylesheets/mobile/chat-footer.scss

@@ -20,9 +20,14 @@
     position: sticky;
     bottom: 0;
     left: 0;
-    padding-bottom: calc(
-      env(safe-area-inset-bottom) + var(--footer-nav-height, 0px)
-    );
+    padding-bottom: env(safe-area-inset-bottom);
+
+    html.footer-nav-ipad &,
+    html.footer-nav-visible & {
+      padding-bottom: calc(
+        env(safe-area-inset-bottom) + var(--footer-nav-height, 0px)
+      );
+    }
 
     &__item {
       display: flex;