diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx
index f3be5a6..fee46c1 100644
--- a/src/components/layout/AppShell.tsx
+++ b/src/components/layout/AppShell.tsx
@@ -101,7 +101,9 @@ export function AppShell() {
             bell far right. A shrink-0 sibling of the canvas, so the canvas
             gives up exactly its height and stays the only scroll region. */}
         <TopBar onSearch={openSearch} />
-        <div className="flex min-h-0 flex-1 flex-col p-2 pt-0 lg:p-3 lg:pl-0 lg:pt-3">
+        {/* Visible gap on every side between the floating canvas and the
+            outer shell (including sidebar-side, so the canvas is narrower). */}
+        <div className="flex min-h-0 flex-1 flex-col p-2 pt-0 lg:p-3 lg:pt-3">
           {/* Deliberate 8px exception to the 6px radius rule: the floating
               canvas alone reads better slightly softer at shell scale. */}
           <main className="min-h-0 flex-1 overflow-y-auto rounded-[8px] border border-steel/20 bg-canvas">
diff --git a/src/index.css b/src/index.css
index 40ba8cc..9b93939 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,4 +27,36 @@
   ::selection {
     @apply bg-primary/40 text-charcoal;
   }
+
+  /* Themed scrollbars, matching the shell palette in every scroll region
+     (canvas, sidebar nav, popovers). Standard properties for Firefox and
+     modern Chromium; the -webkit rules cover Safari. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: theme('colors.steel / 40%') transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+    background-color: theme('colors.steel / 40%');
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: theme('colors.steel / 60%');
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
 }