diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index d5f95ae0b..237830b27 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -365,7 +365,7 @@
       .chat-box {
         border-radius: 0;
         border: 2px solid var(--foreground-color);
-        margin-bottom: 61px;
+        margin-bottom: var(--thumb-navigation-height);
 
         &__actions {
           padding: 0;
diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss
index a770f58ab..9f5ee753e 100644
--- a/app/styles/navigation.scss
+++ b/app/styles/navigation.scss
@@ -50,13 +50,14 @@
   left: 0;
   right: 0;
   width: 100%;
-  height: 60px;
+  height: var(--thumb-navigation-base-height);
   display: flex;
   background: var(--foreground-color);
   justify-content: space-around;
-  border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
+  box-shadow: 0 -1px hsla(var(--primary-text-color_hsl), 0.2);
   border-radius: 0;
   z-index: 999;
+  padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */
 
   &__link {
     padding: 10px;
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index b4407526c..e1318fd48 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -354,7 +354,7 @@
   z-index: 1000;
   display: none;
   position: fixed;
-  bottom: 74px;
+  bottom: calc(var(--thumb-navigation-height) + 14px);
   right: 14px;
   width: 58px;
   height: 58px;
diff --git a/app/styles/variables.scss b/app/styles/variables.scss
index 38afac611..e2d7f393a 100644
--- a/app/styles/variables.scss
+++ b/app/styles/variables.scss
@@ -34,3 +34,11 @@ $media-modal-media-max-width: 100%;
 $media-modal-media-max-height: 80%;
 
 $no-gap-breakpoint: 415px;
+
+// CSS variables
+// NOTE: Prefer CSS variables whenever possible.
+// They're future-proof and more flexible.
+:root {
+  --thumb-navigation-base-height: 60px;
+  --thumb-navigation-height: calc(var(--thumb-navigation-base-height) + env(safe-area-inset-bottom));
+}