feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup

- Sidebar: dynamic brand-accent colors, brainstorm section restyled
- AI chat general: popup panel with expand/collapse, hides when contextual AI open
- AI chat contextual: tabs reordered (Actions first), X close button, height fix
- Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.)
- Global color cleanup: emerald/orange hardcoded → brand-accent dynamic
- Brainstorm page: orange → brand-accent throughout
- PageEntry animation component added to key pages
- Floating AI button: bg-brand-accent instead of hardcoded black
- i18n: all 15 locales updated with new AI/billing keys
- Billing: freemium quota tracking, BYOK, stripe subscription scaffolding
- Admin: integrated into new design
- AGENTS.md + CLAUDE.md project rules added

memento-note/components/brainstorm/playback-bar.tsx

@@ -4,7 +4,7 @@ import React, { useState, useCallback, useRef, useEffect } from 'react'
 import { motion, AnimatePresence } from 'motion/react'
 import { Play, Pause, SkipBack, SkipForward, ChevronDown, ChevronUp, RotateCcw } from 'lucide-react'
 import { useBrainstormSnapshots } from '@/hooks/use-brainstorm'
-
+import { useLanguage } from '@/lib/i18n'
 interface SnapshotIdea {
   id: string
   title: string
@@ -32,6 +32,7 @@ interface PlaybackBarProps {
 }
 
 export function PlaybackBar({ sessionId, onSnapshotSelect, onExitPlayback }: PlaybackBarProps) {
+  const { t } = useLanguage()
   const { data: snapshots } = useBrainstormSnapshots(sessionId)
   const [isOpen, setIsOpen] = useState(false)
   const [currentStep, setCurrentStep] = useState(-1)
@@ -105,7 +106,9 @@ export function PlaybackBar({ sessionId, onSnapshotSelect, onExitPlayback }: Pla
             <div className="flex items-center gap-3">
               <div className={`w-2 h-2 rounded-full ${isLive ? 'bg-emerald-500 animate-pulse' : isPlaying ? 'bg-orange-500 animate-pulse' : 'bg-muted-foreground'}`} />
               <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-                {isLive ? 'Live' : `Step ${currentStep + 1}/${parsedSnapshots.length}`}
+                {isLive
+                  ? t('brainstorm.liveStatus')
+                  : t('brainstorm.playbackStep', { current: currentStep + 1, total: parsedSnapshots.length })}
               </span>
               {parsedSnapshots[currentStep]?.label && (
                 <span className="text-[10px] text-muted-foreground/60 truncate max-w-[200px]">
@@ -115,12 +118,12 @@ export function PlaybackBar({ sessionId, onSnapshotSelect, onExitPlayback }: Pla
             </div>
             <div className="flex items-center gap-2">
               {isLive ? (
-                <span className="text-[9px] font-bold text-emerald-500 uppercase tracking-wider">Live</span>
+                <span className="text-[9px] font-bold text-emerald-500 uppercase tracking-wider">{t('brainstorm.liveStatus')}</span>
               ) : (
                 <button
                   onClick={(e) => { e.stopPropagation(); handleStepChange(-1) }}
                   className="p-1.5 hover:bg-foreground/10 rounded-lg transition-colors"
-                  title="Return to live"
+                  title={t('brainstorm.playbackReturnToLive')}
                 >
                   <RotateCcw size={12} className="text-muted-foreground" />
                 </button>
@@ -167,8 +170,10 @@ export function PlaybackBar({ sessionId, onSnapshotSelect, onExitPlayback }: Pla
                     className="w-full h-1.5 bg-border rounded-full appearance-none cursor-pointer accent-orange-500"
                   />
                   <div className="flex justify-between mt-1">
-                    <span className="text-[8px] text-muted-foreground/40">Live</span>
-                    <span className="text-[8px] text-muted-foreground/40">{parsedSnapshots.length} steps</span>
+                    <span className="text-[8px] text-muted-foreground/40">{t('brainstorm.liveStatus')}</span>
+                    <span className="text-[8px] text-muted-foreground/40">
+                      {t('brainstorm.playbackStepsCount', { count: parsedSnapshots.length })}
+                    </span>
                   </div>
                 </div>
               </div>