fix: avatar decoration centering, animation flickering, scheduled message persistence

- UserHero: move AvatarDecoration inside AvatarPresence so the decoration
  inline-flex container sizes to the avatar only, not the presence badge
- SidebarNav: add will-change: background-position, background-size on
  document.body for animated backgrounds, promoting them to a compositor
  layer so overlaid text/UI doesn't repaint on every animation frame
- scheduledMessages: back the atom with atomWithStorage so the scheduled
  message tray survives page refreshes via localStorage

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

src/app/components/user-profile/UserHero.tsx

@@ -49,12 +49,12 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
       </div>
       <div className={css.UserHeroAvatarContainer}>
         <div className={css.UserAvatarContainer}>
-          <AvatarDecoration userId={userId} inset={20}>
-            <AvatarPresence
-              badge={
-                presence && <PresenceBadge presence={presence.presence} status={presence.status} />
-              }
-            >
+          <AvatarPresence
+            badge={
+              presence && <PresenceBadge presence={presence.presence} status={presence.status} />
+            }
+          >
+            <AvatarDecoration userId={userId} inset={20}>
               <Avatar
                 as={avatarUrl ? 'button' : 'div'}
                 onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
@@ -69,8 +69,8 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
                   renderFallback={() => <Icon size="500" src={Icons.User} filled />}
                 />
               </Avatar>
-            </AvatarPresence>
-          </AvatarDecoration>
+            </AvatarDecoration>
+          </AvatarPresence>
         </div>
         {viewAvatar && (
           <Overlay open backdrop={<OverlayBackdrop />}>