ThumbNavigation: probably fix padding for iOS PWA

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;

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;

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;

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));
+}