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/common/Modal.tsx

@@ -39,13 +39,13 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md' }:
   const sizeClasses = {
     sm: 'max-w-sm',
     md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-4xl',
+    lg: 'max-w-full sm:max-w-lg',
+    xl: 'max-w-full sm:max-w-4xl',
   }
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4"
       role="dialog"
       aria-modal="true"
       aria-labelledby="modal-title"
@@ -60,19 +60,21 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md' }:
       {/* Modal Content */}
       <div
         className={cn(
-          'relative flex max-h-[85vh] w-full flex-col rounded-lg border border-border bg-card shadow-lg',
+          'relative flex w-full flex-col border border-border bg-card shadow-lg',
+          'max-h-[100vh] rounded-t-lg sm:max-h-[85vh] sm:rounded-lg',
+          'animate-scale-in',
           sizeClasses[size]
         )}
       >
         {/* Header - Fixed at top */}
-        <div className="flex flex-shrink-0 items-center justify-between border-b border-border px-6 py-4">
+        <div className="flex flex-shrink-0 items-center justify-between border-b border-border px-4 py-3 sm:px-6 sm:py-4">
           <h2 id="modal-title" className="text-lg font-semibold text-card-foreground">
             {title}
           </h2>
           <button
             onClick={onClose}
             className={cn(
-              'rounded-md p-1 text-muted-foreground transition-colors',
+              'rounded-md p-1.5 text-muted-foreground transition-colors sm:p-1',
               'hover:bg-accent hover:text-accent-foreground',
               'focus:outline-none focus:ring-2 focus:ring-ring'
             )}
@@ -83,13 +85,13 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md' }:
         </div>
 
         {/* Body - Scrollable */}
-        <div className="flex-1 overflow-y-auto px-6 py-4">
+        <div className="flex-1 overflow-y-auto px-4 py-4 sm:px-6">
           {children}
         </div>
 
         {/* Footer - Fixed at bottom */}
         {footer && (
-          <div className="flex-shrink-0 border-t border-border px-6 py-4">
+          <div className="flex-shrink-0 border-t border-border px-4 py-3 sm:px-6 sm:py-4">
             {footer}
           </div>
         )}