diff --git a/js/src/features/compose/recording-overlay.tsx b/js/src/features/compose/recording-overlay.tsx
index bf69b41..195d2cd 100644
--- a/js/src/features/compose/recording-overlay.tsx
+++ b/js/src/features/compose/recording-overlay.tsx
@@ -191,6 +191,11 @@ export function RecordingOverlay({
         />
       )}
 
+      {/* Bottom gradient scrim for keyboard hint readability */}
+      {(isRecording || isReviewing) && !isLoading && (
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-1/4 bg-gradient-to-t from-black/60 to-transparent" />
+      )}
+
       {/* Top center: recording indicator */}
       <div className="absolute top-8 z-10">
         {isRecording && !isLoading ? (
diff --git a/js/src/features/particles/stream-view.tsx b/js/src/features/particles/stream-view.tsx
index e2db8a1..68a8d2b 100644
--- a/js/src/features/particles/stream-view.tsx
+++ b/js/src/features/particles/stream-view.tsx
@@ -436,6 +436,9 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
         disabled={streamParticle.status === "closed"}
       />
 
+      {/* Bottom gradient safe zone for keyboard hints */}
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-1/4 bg-gradient-to-t from-black/60 to-transparent" />
+
       {/* BottomBar */}
       <BottomBar
         visible={controlsVisible}