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/pages/SessionHistoryPage.tsx

@@ -35,9 +35,9 @@ export function SessionHistoryPage() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground">Session History</h1>
+        <h1 className="text-2xl font-bold text-foreground sm:text-3xl">Session History</h1>
         <p className="mt-2 text-muted-foreground">
           View and manage your troubleshooting sessions
         </p>
@@ -88,14 +88,14 @@ export function SessionHistoryPage() {
           {sessions.map((session) => (
             <div
               key={session.id}
-              className="rounded-lg border border-border bg-card p-4 shadow-sm transition-shadow hover:shadow-md"
+              className="rounded-lg border border-border bg-card p-4 shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md"
             >
-              <div className="flex items-start justify-between">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                 <div>
                   <div className="flex items-center gap-2">
                     <span
                       className={cn(
-                        'inline-block h-2 w-2 rounded-full',
+                        'inline-block h-2.5 w-2.5 rounded-full',
                         session.completed_at ? 'bg-green-500' : 'bg-yellow-500'
                       )}
                     />
@@ -122,7 +122,7 @@ export function SessionHistoryPage() {
                   <button
                     onClick={() => navigate(`/sessions/${session.id}`)}
                     className={cn(
-                      'rounded-md border border-input px-3 py-1.5 text-sm font-medium',
+                      'rounded-md border border-input px-3 py-2 text-sm font-medium',
                       'hover:bg-accent hover:text-accent-foreground'
                     )}
                   >
@@ -132,7 +132,7 @@ export function SessionHistoryPage() {
                     <button
                       onClick={() => navigate(`/trees/${session.tree_id}/navigate`, { state: { sessionId: session.id } })}
                       className={cn(
-                        'rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground',
+                        'rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground',
                         'hover:bg-primary/90'
                       )}
                     >