feat: add mobile responsiveness, design consistency, and micro-interactions

- Add mobile hamburger menu with slide-out nav drawer (AppLayout)
- Make modals responsive: full-width on mobile, slide-up animation
- Scratchpad becomes full-screen overlay on mobile with backdrop
- Folder sidebar hidden on mobile, opens as slide-over drawer
- Tree editor shows "Desktop Required" gate on mobile
- Stack action buttons vertically on mobile (sessions, detail pages)
- Increase touch targets throughout (buttons, close icons)
- Add CSS animations: fade-in, slide-in-left, scale-in, btn-press
- Add card hover lift effect and consistent border highlights
- Standardize page padding (px-4 py-6 sm:px-6 sm:py-8)
- Responsive headings (text-2xl sm:text-3xl)
- CustomStepModal goes full-screen on mobile
- Tighten auth page spacing on mobile

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

frontend/src/components/library/FolderSidebar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
-import { Folder, ChevronDown, ChevronRight, Plus, MoreVertical, Pencil, Trash2, FolderPlus } from 'lucide-react'
+import { Folder, ChevronDown, ChevronRight, Plus, MoreVertical, Pencil, Trash2, FolderPlus, X } from 'lucide-react'
 import { foldersApi } from '@/api'
 import type { FolderListItem, FolderTreeItem } from '@/types'
 import { cn } from '@/lib/utils'
@@ -9,6 +9,8 @@ interface FolderSidebarProps {
   onFolderSelect: (folderId: string | null) => void
   onCreateFolder: (parentId?: string | null) => void
   onEditFolder: (folder: FolderListItem) => void
+  mobileOpen?: boolean
+  onMobileClose?: () => void
 }
 
 // Build tree structure from flat folder list
@@ -233,6 +235,8 @@ export function FolderSidebar({
   onFolderSelect,
   onCreateFolder,
   onEditFolder,
+  mobileOpen = false,
+  onMobileClose,
 }: FolderSidebarProps) {
   const [folders, setFolders] = useState<FolderListItem[]>([])
   const [folderTree, setFolderTree] = useState<FolderTreeItem[]>([])
@@ -349,8 +353,33 @@ export function FolderSidebar({
 
   return (
     <>
-    <div className="w-56 shrink-0 border-r border-border bg-card">
+    {/* Mobile backdrop */}
+    {mobileOpen && (
+      <div
+        className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm md:hidden"
+        onClick={onMobileClose}
+        aria-hidden="true"
+      />
+    )}
+    <div className={cn(
+      'w-56 shrink-0 border-r border-border bg-card',
+      'hidden md:block',
+      mobileOpen && 'fixed inset-y-0 left-0 z-50 block animate-slide-in-left md:relative md:animate-none'
+    )}>
       <div className="p-4">
+        {/* Mobile close button */}
+        {mobileOpen && (
+          <div className="mb-3 flex items-center justify-between md:hidden">
+            <span className="text-sm font-medium text-card-foreground">Folders</span>
+            <button
+              onClick={onMobileClose}
+              className="rounded-md p-1.5 text-muted-foreground hover:bg-accent"
+              aria-label="Close folders"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        )}
         <button
           onClick={() => setIsExpanded(!isExpanded)}
           className="flex w-full items-center gap-2 text-sm font-medium text-card-foreground"