feat: implement 6 research-backed mobile responsive features

- Bottom sheet for mobile tool settings (replaces top-collapsible panel)
- Pinch-to-zoom and wheel zoom on image viewer via @use-gesture/react
- Replace all vh units with dvh for dynamic viewport height
- Vertical before-after comparison on mobile devices
- Konva multi-touch pinch-to-zoom on editor canvas
- Container queries for adaptive tool settings + touch-friendly CSS

apps/web/src/pages/automate-page.tsx

@@ -546,7 +546,7 @@ export function AutomatePage() {
                 className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
                 onClick={() => setMobileToolPaletteOpen(false)}
               />
-              <div className="fixed inset-x-0 bottom-0 z-50 bg-background border-t border-border rounded-t-2xl shadow-xl max-h-[70vh] flex flex-col animate-in slide-in-from-bottom">
+              <div className="fixed inset-x-0 bottom-0 z-50 bg-background border-t border-border rounded-t-2xl shadow-xl max-h-[70dvh] flex flex-col animate-in slide-in-from-bottom">
                 <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
                   <h2 className="text-sm font-semibold text-foreground">{t.automate.addTool}</h2>
                   <button