fix(loader): correct theme mapping + per-shape gradient (Figma exact)

Two fixes against the Figma loader frames (simMothershipLoader_lightTheme
82:122 / _darkTheme 82:119):

- Theme mapping was inverted. Light mode must show the DARK-grey loader
  (#4F4F4F→#6F6F6F, glow 0.6) so it reads on white; dark mode shows the
  LIGHT-grey loader (#A7A7A7→#D6D6D6, glow 0.9). The squeeze ring's
  currentColor stroke already tracked that polarity, so only the gradient
  vars swapped.
- Gradient is now objectBoundingBox (per shape) instead of one canvas-wide
  radial. Figma fits the radial to each shape's box, so every blob —
  including small/offset dots — reads glossy (center dark → edge light)
  rather than flat.

Verified computed values live in both themes and rendered against the
Figma frames.

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

Author: andresdjasso

apps/sim/components/emcn/components/thinking-loader/thinking-loader.module.css

@@ -16,15 +16,19 @@
  */
 
 .frame {
+  /* currentColor paints the squeeze ring's stroked arcs (the only non-filled
+     geometry). It tracks the loader polarity — dark on light, light on dark —
+     matching the gradient stops below. */
   color: #4f4f4f;
   flex: none;
   /* Loader fill is a radial gradient (center → edge) plus a soft white inner
      glow, per the Figma loader spec. Stops and glow opacity are theme vars,
      inherited by the gradient stops and feFlood inside the SVG, so one set of
-     defs serves both themes. Light: #A7A7A7 → #D6D6D6, glow white 0.9. */
-  --tl-grad-inner: #a7a7a7;
-  --tl-grad-outer: #d6d6d6;
-  --tl-glow: rgba(255, 255, 255, 0.9);
+     defs serves both themes. Light mode = the DARK-grey loader (reads on white):
+     #4F4F4F → #6F6F6F, glow white 0.6. */
+  --tl-grad-inner: #4f4f4f;
+  --tl-grad-outer: #6f6f6f;
+  --tl-glow: rgba(255, 255, 255, 0.6);
 }
 
 /* Gradient stops + glow flood read the theme vars via CSS (a raw `var()` in an
@@ -50,10 +54,11 @@
 
 :global(.dark) .frame {
   color: #d6d6d6;
-  /* Dark: #4F4F4F → #6F6F6F, glow white 0.6. */
-  --tl-grad-inner: #4f4f4f;
-  --tl-grad-outer: #6f6f6f;
-  --tl-glow: rgba(255, 255, 255, 0.6);
+  /* Dark mode = the LIGHT-grey loader (reads on dark): #A7A7A7 → #D6D6D6,
+     glow white 0.9. */
+  --tl-grad-inner: #a7a7a7;
+  --tl-grad-outer: #d6d6d6;
+  --tl-glow: rgba(255, 255, 255, 0.9);
 }
 
 .labelRow {

apps/sim/components/emcn/components/thinking-loader/thinking-loader.tsx

@@ -257,8 +257,8 @@ export function ThinkingLoader({ variant, size = 20, label, className }: Thinkin
             k3='1'
             result='innerMask'
           />
-          {/* Glow color + per-theme opacity ride a CSS var (light 0.9 / dark
-              0.6) so one filter serves both themes. */}
+          {/* Glow color + per-theme opacity ride a CSS var (light 0.6 / dark
+              0.9) so one filter serves both themes. */}
           <feFlood className={styles.glow} result='glowColor' />
           <feComposite in='glowColor' in2='innerMask' operator='in' result='glow' />
           <feMerge>
@@ -267,8 +267,11 @@ export function ThinkingLoader({ variant, size = 20, label, className }: Thinkin
           </feMerge>
         </filter>
         {/* Radial gradient (center → edge), theme stops via CSS vars. Matches
-            the Figma loader: dark #4F4F4F→#6F6F6F, light #A7A7A7→#D6D6D6. */}
-        <radialGradient id={gradientId} cx='50' cy='50' r='50' gradientUnits='userSpaceOnUse'>
+            the Figma loader: light #4F4F4F→#6F6F6F, dark #A7A7A7→#D6D6D6.
+            objectBoundingBox (default units) so EACH blob is shaded on its own
+            box — Figma fits the gradient per shape, so small/offset dots read
+            glossy (center dark, edge light) instead of flat. */}
+        <radialGradient id={gradientId} cx='0.5' cy='0.5' r='0.5'>
           <stop className={styles.gradInner} />
           <stop offset='1' className={styles.gradOuter} />
         </radialGradient>