fix(ui): mention color picker, send-animation conflict, DM virtualizer (N69,N10,N22)

- N69: @mention highlight color now uses HexColorPickerPopOut + react-colorful
  HexColorPicker behind a folds Button (color swatch); built-in onRemove
  replaces the separate Reset, dropping the OS-native <input type="color">
- N10: mentionPulseKeyframes animates only box-shadow (dropped the imperceptible
  scale(1.003)) so it no longer fights MsgAppearClass over `transform` on
  self-sent @mention messages
- N22: Direct.tsx virtualizer estimateSize 38 -> 52 (two-line DM row height) to
  avoid the initial-render jump before measureElement corrects each row

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

src/app/pages/client/direct/Direct.tsx

@@ -227,7 +227,11 @@ export function Direct() {
   const virtualizer = useVirtualizer({
     count: filteredDirects.length,
     getScrollElement: () => scrollRef.current,
-    estimateSize: () => 38,
+    // DM rows render a two-line layout (name + message preview), so they are
+    // taller than the 38px single-line rooms elsewhere. Estimating the common
+    // two-line height avoids the initial-render jump/overlap before
+    // `measureElement` corrects each row to its exact size.
+    estimateSize: () => 52,
     overscan: 10,
   });