diff --git a/scss/composer.scss b/scss/composer.scss
index fece52f..5a8dce3 100644
--- a/scss/composer.scss
+++ b/scss/composer.scss
@@ -13,6 +13,10 @@
   }
 }
 
+#reply-control {
+  background-color: var(--background-color);
+}
+
 #reply-control.hide-preview:not(.draft) {
   @include viewport.from(sm) {
     background: var(--d-content-background);
@@ -119,3 +123,109 @@
     width: 47.25vw;
   }
 }
+
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 0.6;
+  }
+}
+
+@include viewport.until(sm) {
+  .composer-open {
+    body::after {
+      height: 100vh;
+      content: "";
+      top: 0;
+      bottom: 0;
+      position: fixed;
+      width: 100vw;
+      left: 0;
+      right: 0;
+      background: black;
+      z-index: calc(z("mobile-composer") - 1);
+      user-select: none;
+      animation: fade 0.3s forwards;
+
+      @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+      }
+    }
+  }
+
+  .toggle-toolbar {
+    display: none;
+  }
+
+  #reply-control {
+    background: var(--secondary);
+
+    .title-input {
+      order: 1;
+    }
+
+    #reply-title {
+      border: 0;
+      padding: var(--space-3) 0;
+      border-radius: 0;
+      background: var(--secondary);
+      font-size: var(--font-up-1);
+
+      &:focus {
+        outline: 0;
+      }
+    }
+
+    .reply-area {
+      padding-inline: var(--space-4);
+    }
+
+    .d-editor {
+      &-textarea-wrapper {
+        border: 0;
+
+        &.in-focus {
+          outline: 0;
+        }
+      }
+
+      &-input {
+        padding-inline: 0;
+      }
+
+      p[data-placeholder] {
+        margin: 0;
+      }
+
+      &-button-bar {
+        width: 100%;
+        justify-content: space-around;
+        flex-wrap: nowrap;
+        overflow-x: scroll;
+        position: absolute;
+        bottom: var(--space-4);
+        border: 1px solid var(--primary-low);
+        border-radius: var(--d-border-radius);
+        background: var(--secondary-very-high);
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        .btn {
+          font-size: var(--font-up-1);
+          color: var(--primary-high);
+
+          &:not(a) {
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/scss/misc.scss b/scss/misc.scss
index 7638baa..bb326dc 100644
--- a/scss/misc.scss
+++ b/scss/misc.scss
@@ -67,10 +67,6 @@ input[type="color"]:focus,
   outline: 2px solid var(--accent-color);
 }
 
-#reply-control {
-  background-color: var(--background-color);
-}
-
 @include viewport.until(sm) {
   // pinned topic excerpts are hidden on small screens too
   .fk-d-menu__trigger.topic-list-layout-trigger {