feat: user-choosable avatar colors with settings picker

Add avatarColor as a stored, user-selectable field (mint, sky, lavender,
coral, rose, teal, amber). Randomly assigned on registration, changeable
in profile settings. Existing users keep hash-based fallback until they
choose a color. Includes DB migration, API validation, gradient map,
live preview in settings, and banner fallback integration.

packages/web/src/components/ui/Avatar.tsx

@@ -48,7 +48,7 @@ export function Avatar({ src, name, size = 40, status, className = '', onClick,
   const initials = name.charAt(0).toUpperCase();
   // Match prototype: 24px→10px, 32-34px→12px, 40px→15px, 56px+→18px
   const fontPx = size <= 24 ? 10 : size <= 34 ? 12 : size <= 44 ? 15 : 18;
-  const gradient = getAvatarGradient(userId ?? user?.homeUserId ?? user?.id, name);
+  const gradient = getAvatarGradient(userId ?? user?.homeUserId ?? user?.id, name, user?.avatarColor);
 
   const handleClick = (e: React.MouseEvent) => {
     if (onClick) {

packages/web/src/components/ui/UserProfilePopout.tsx

@@ -72,7 +72,7 @@ export function UserProfilePopout({ user, onClose, position }: UserProfilePopout
     : null;
   const bannerFallback = user.accentColor
     ? `linear-gradient(135deg, ${user.accentColor}, ${adjustColor(user.accentColor, -40)})`
-    : getAvatarGradient(user.homeUserId ?? user.id, displayName).gradient;
+    : getAvatarGradient(user.homeUserId ?? user.id, displayName, user.avatarColor).gradient;
 
   return (
     <div