diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index 40d46b5b..1321a36d 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -221,7 +221,7 @@
   {@const media = $mediaStateByIdentity(tile.liveKitIdentity)}
   <div
     class={cx(
-      "relative isolate overflow-hidden rounded-2xl shadow-sm border border-line",
+      "relative isolate overflow-hidden rounded-2xl drop-shadow-sm border border-line",
       layout === "spotlight" && "min-h-0 flex-1",
       layout === "default" && "aspect-video w-full min-h-0",
       layout === "strip" && "aspect-video w-44 shrink-0",
diff --git a/src/lib/components/base.css b/src/lib/components/base.css
index b5601321..6be4a4c5 100644
--- a/src/lib/components/base.css
+++ b/src/lib/components/base.css
@@ -43,6 +43,19 @@
   --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.05);
   --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
 
+  /* drop-shadow-* mirror of the shadow-* scale above, same raw values. Use
+     these (filter: drop-shadow, via the drop-shadow-* utilities) instead of
+     shadow-* on any element inside a scroll container (overflow-y/x: auto|
+     scroll): Chromium's box-shadow fast path misrenders rounded corners at
+     fractional pixel offsets there, producing a diagonal wedge instead of a
+     crescent. filter effects don't hit that path and also extend scrollable
+     overflow instead of being clipped by it. Tailwind v4 wraps this token
+     as drop-shadow(<value>) itself, so keep these as raw shadow lists, not
+     already wrapped in drop-shadow(). */
+  --drop-shadow: 6px 6px 0 color-mix(in srgb, var(--primary) 12%, transparent);
+  --drop-shadow-sm: 4px 4px 0 color-mix(in srgb, var(--primary) 10%, transparent);
+  --drop-shadow-lg: 8px 8px 0 color-mix(in srgb, var(--primary) 15%, transparent);
+
   --border-thin: 1px;
   --border-thick: 1px;
 
diff --git a/src/lib/components/clay.css b/src/lib/components/clay.css
index 6aad650e..0770be28 100644
--- a/src/lib/components/clay.css
+++ b/src/lib/components/clay.css
@@ -62,6 +62,10 @@
     --shadow-lg: 8px 8px 0 rgba(var(--shadow-color), 0.15);
     --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.05);
     --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
+
+    --drop-shadow-sm: 4px 4px 0 rgba(var(--shadow-color), 0.1);
+    --drop-shadow: 6px 6px 0 rgba(var(--shadow-color), 0.12);
+    --drop-shadow-lg: 8px 8px 0 rgba(var(--shadow-color), 0.15);
   }
 
   /* `.primary-nav` opts the primary nav into this dark palette unconditionally */
@@ -103,6 +107,10 @@
     --shadow-lg: 8px 8px 0 rgba(var(--shadow-color), 0.4);
     --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
     --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
+
+    --drop-shadow-sm: 4px 4px 0 rgba(var(--shadow-color), 0.3);
+    --drop-shadow: 6px 6px 0 rgba(var(--shadow-color), 0.35);
+    --drop-shadow-lg: 8px 8px 0 rgba(var(--shadow-color), 0.4);
   }
 
   .chat-editor .tiptap {
diff --git a/src/lib/components/navy.css b/src/lib/components/navy.css
index 380a83d1..94c7cd43 100644
--- a/src/lib/components/navy.css
+++ b/src/lib/components/navy.css
@@ -41,6 +41,10 @@
     --shadow-lg: 0 10px 30px rgba(var(--shadow-color), 0.12);
     --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.05);
     --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
+
+    --drop-shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.1);
+    --drop-shadow: 0 4px 12px rgba(var(--shadow-color), 0.1);
+    --drop-shadow-lg: 0 10px 30px rgba(var(--shadow-color), 0.12);
   }
 
   &[data-theme="dark"],
@@ -81,5 +85,9 @@
     --shadow-lg: 0 10px 30px rgba(var(--shadow-color), 0.5);
     --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
     --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
+
+    --drop-shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.35);
+    --drop-shadow: 0 4px 12px rgba(var(--shadow-color), 0.4);
+    --drop-shadow-lg: 0 10px 30px rgba(var(--shadow-color), 0.5);
   }
 }