diff --git a/frontend/app.js b/frontend/app.js
index c6013ef..103d17a 100755
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -5597,7 +5597,9 @@ const SectionRail = (() => {
       // it entirely and the rail was parked underneath it.
       if (box.top > window.innerHeight * 0.5) occupied = Math.max(occupied, window.innerHeight - box.top);
     }
-    const want = Math.round(occupied + 14);
+    // 14px was too tight: the mini player is a floating CARD with a shadow and
+    // rounded corners, so its visual edge reads higher than its box.
+    const want = Math.round(occupied + 24);
     if (st.bottom !== want) {
       st.bottom = want;
       if (r) r.style.setProperty('--rail-bottom', want + 'px');
diff --git a/frontend/styles.css b/frontend/styles.css
index 5748552..b1036e9 100755
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -4261,6 +4261,12 @@ body.landscape-fs .player-stage { touch-action: none; } /* fullscreen (real or t
   .sec-rail {
     top: auto;
     bottom: max(var(--rail-bottom, 0px), calc(96px + env(safe-area-inset-bottom) + 14px));
+  }
+  /* The mini player is a floating card ABOVE the nav, so when it is on screen
+     the rail has to clear both. Keeps the last icon visible even if the JS
+     measurement is stale (e.g. the PWA is still on a cached shell). */
+  body:has(#miniBar:not(.hidden)) .sec-rail {
+    bottom: max(var(--rail-bottom, 0px), calc(186px + env(safe-area-inset-bottom)));
     transform: none;
   }
 }