diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index dc928b40d..05c92341a 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -1,4 +1,4 @@
-@layer reset, base, components, modules, utilities;
+@layer reset, base, components, modules, utilities, native, android, ios;
 
 :root {
   /* Spacing */
diff --git a/app/assets/stylesheets/android.css b/app/assets/stylesheets/android.css
new file mode 100644
index 000000000..4707c2cd0
--- /dev/null
+++ b/app/assets/stylesheets/android.css
@@ -0,0 +1,7 @@
+@layer native {
+  [data-platform~=android] {
+    .hide-on-android {
+      display: none;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/ios.css b/app/assets/stylesheets/ios.css
new file mode 100644
index 000000000..93c67022d
--- /dev/null
+++ b/app/assets/stylesheets/ios.css
@@ -0,0 +1,7 @@
+@layer native {
+  [data-platform~=ios] {
+    .hide-on-ios {
+      display: none;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/native.css b/app/assets/stylesheets/native.css
new file mode 100644
index 000000000..f97174954
--- /dev/null
+++ b/app/assets/stylesheets/native.css
@@ -0,0 +1,17 @@
+@layer native {
+  [data-platform~=native] {
+    /* The mobile apps may inject their own custom insets based on native elements on screen, like a floating navigation */
+    --custom-safe-inset-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px));
+    --custom-safe-inset-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px));
+    --custom-safe-inset-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px));
+    --custom-safe-inset-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px));
+
+    .hide-on-native {
+      display: none;
+    }
+
+    .show-on-native {
+      display: unset;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index d139f28f9..22e72a9eb 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -269,6 +269,10 @@
     }
   }
 
+  .show-on-native {
+    display: none;
+  }
+
   .hide-scrollbar {
     -ms-overflow-style: none;  /* Edge */
     scrollbar-width: none; /* FF */