diff --git a/src/app.css b/src/app.css
index 96d7bbe8..d63b10f9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -456,13 +456,18 @@ a.mention span {
 
 .carousel-top-controls {
   top: 0;
+  top: env(safe-area-inset-top, 0);
 }
 .carousel-controls {
   bottom: 0;
+  bottom: env(safe-area-inset-bottom, 0);
 }
 :is(.carousel-top-controls, .carousel-controls) {
   position: fixed;
-  width: 100%;
+  left: 0;
+  left: env(safe-area-inset-left, 0);
+  right: 0;
+  right: env(safe-area-inset-right, 0);
   padding: 16px;
   display: flex;
   gap: 8px;
@@ -535,7 +540,9 @@ button.carousel-dot[disabled].active {
 #compose-button {
   position: fixed;
   bottom: 16px;
+  bottom: max(16px, env(safe-area-inset-bottom));
   right: 16px;
+  right: max(16px, env(safe-area-inset-right));
   padding: 16px;
   box-shadow: 0 0 32px var(--bg-color);
   z-index: 1;
@@ -566,6 +573,9 @@ button.carousel-dot[disabled].active {
   max-width: calc(40em - 50px - 16px);
   border-radius: 16px 16px 0 0;
   padding: 16px;
+  padding-left: max(16px, env(safe-area-inset-left));
+  padding-right: max(16px, env(safe-area-inset-right));
+  padding-bottom: max(16px, env(safe-area-inset-bottom));
   box-shadow: 0 -1px 32px var(--divider-color);
   animation: slide-up 0.2s ease-out;
   border: 1px solid var(--outline-color);