fix(ui): GIF picker surface tokens + background swatch chrome (N8, N70)

- N8: GifPicker non-TDS container used undefined var(--bg-surface) + raw
  rgba/12px/boxShadow. Switch to folds tokens (color.Surface.Container,
  config.radii.R400, color.Surface.ContainerLine, color.Other.Shadow).
  TDS branch keeps its --lt-* glow chrome.
- N70: ChatBgGrid/SeasonalBgGrid swatch buttons moved chrome (radius, border,
  hover, keyboard :focus-visible ring, selected via data-selected) into shared
  BgSwatch.css.ts using design tokens; only per-swatch size + live preview
  background stay inline (custom preview tiles, not MenuItem/Chip candidates).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/settings/general/General.tsx

@@ -35,6 +35,7 @@ import { isKeyHotkey } from 'is-hotkey';
 import { HexColorPicker } from 'react-colorful';
 import FocusTrap from 'focus-trap-react';
 import { HexColorPickerPopOut } from '../../../components/HexColorPickerPopOut';
+import { BgSwatch as BgSwatchStyle } from './BgSwatch.css';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import {
@@ -1655,19 +1656,13 @@ function SeasonalBgGrid({
               type="button"
               aria-label={opt.label}
               aria-pressed={selected}
+              data-selected={selected}
+              className={BgSwatchStyle}
               onClick={() => onChange(opt.value)}
               style={{
                 position: 'relative',
-                display: 'block',
                 width: toRem(76),
                 height: toRem(56),
-                borderRadius: toRem(8),
-                cursor: 'pointer',
-                border: selected
-                  ? `2px solid ${color.Primary.Main}`
-                  : '2px solid rgba(128,128,128,0.25)',
-                padding: 0,
-                overflow: 'hidden',
                 backgroundColor: '#030508',
               }}
             >
@@ -1718,22 +1713,15 @@ function ChatBgGrid() {
             type="button"
             aria-label={opt.label}
             aria-pressed={chatBackground === opt.value}
+            data-selected={chatBackground === opt.value}
+            className={BgSwatchStyle}
             onClick={() => {
               setChatBackground(opt.value as ChatBackground);
               if (opt.value !== 'none') setSeasonalThemeOverride('off');
             }}
             style={{
-              display: 'block',
               width: toRem(76),
               height: toRem(50),
-              borderRadius: toRem(8),
-              cursor: 'pointer',
-              border:
-                chatBackground === opt.value
-                  ? `2px solid ${color.Primary.Main}`
-                  : '2px solid rgba(128,128,128,0.25)',
-              padding: 0,
-              overflow: 'hidden',
               ...getChatBg(opt.value as ChatBackground, isDark, pauseAnimations),
             }}
           />