Drop tile shadow instead of switching to drop-shadow-sm

drop-shadow-sm (previous commit) didn't fix the corner artifact in
testing, so revert to the simplest option instead of chasing which
rasterization path is actually at fault: video tiles just don't get
an offset shadow. Border stays.

Reverts the --drop-shadow-* token additions in base.css/clay.css/
navy.css from the previous commit since nothing else used them.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/components/VideoCallContent.svelte

@@ -221,7 +221,7 @@
   {@const media = $mediaStateByIdentity(tile.liveKitIdentity)}
   <div
     class={cx(
-      "relative isolate overflow-hidden rounded-2xl drop-shadow-sm border border-line",
+      "relative isolate overflow-hidden rounded-2xl 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",

src/lib/components/base.css

@@ -43,19 +43,6 @@
   --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;
 

src/lib/components/clay.css

@@ -62,10 +62,6 @@
     --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 */
@@ -107,10 +103,6 @@
     --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 {

src/lib/components/navy.css

@@ -41,10 +41,6 @@
     --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"],
@@ -85,9 +81,5 @@
     --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);
   }
 }