diff --git a/packages/web/src/styles/globals.css b/packages/web/src/styles/globals.css
index 437bfd40..e81a17a9 100644
--- a/packages/web/src/styles/globals.css
+++ b/packages/web/src/styles/globals.css
@@ -456,6 +456,19 @@
   .call-refraction::after { animation: none !important; opacity: 0; }
 }
 
+/* ── MOBILE SCREEN TRANSITIONS ── */
+.mobile-screen-enter {
+  transform: translateX(100%);
+}
+.mobile-screen-enter-active {
+  transform: translateX(0);
+  transition: transform 200ms ease-out;
+}
+.mobile-screen-exit-active {
+  transform: translateX(100%);
+  transition: transform 200ms ease-out;
+}
+
 /* ── Electron window drag regions ── */
 .titlebar-drag { -webkit-app-region: drag; }
 .titlebar-no-drag { -webkit-app-region: no-drag; }
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index 242ff677..f869d0bc 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -73,6 +73,15 @@ export default {
       fontFamily: {
         sans: ['DM Sans', '-apple-system', 'BlinkMacSystemFont', 'system-ui', 'sans-serif'],
       },
+      animation: {
+        'slide-up-sheet': 'slide-up-sheet 200ms ease-out',
+      },
+      keyframes: {
+        'slide-up-sheet': {
+          '0%': { transform: 'translateY(100%)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+      },
     },
   },
   plugins: [],