fix: correct button order and restore smooth transitions

Fixes:
1. ✅ Reversed button order - Info at bottom, Download at top
   - Desktop (bottom→top): Info → Shortcuts → Zoom → Print → Download
   - Mobile (left→right): Download → Print → Shortcuts → Info

2. ✅ Restored smooth morphing transitions
   - Added transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
   - Container smoothly transforms from vertical to horizontal
   - Buttons smoothly reposition during responsive transition

3. ✅ Preserved all special hover behaviors
   - Zoom button: Blue hover + highlights zoom control
   - Print button: White bg + green icon on hover (synchronized)
   - Download button: Red bg on hover (synchronized)
   - All sync functions working: syncPdfHover, syncPrintHover, highlightZoomControl

The flexbox container now has the correct button order AND smooth animations!

static/css/main.css

@@ -2835,6 +2835,7 @@ html {
     gap: 1rem; /* 16px gap between buttons */
     align-items: center;
     z-index: 99;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth morphing transition */
 }
 
 /* All buttons inside container - shared styles */

templates/index.html

@@ -136,13 +136,13 @@
     </div> <!-- End zoom-wrapper -->
 
     {{template "error-toast" .}}
-    <!-- Fixed buttons container - Flexbox layout (desktop: right side bottom-to-top, mobile: bottom center horizontal) -->
+    <!-- Fixed buttons container - Flexbox layout (desktop: left side bottom-to-top, mobile: bottom center horizontal) -->
     <div class="fixed-buttons-container">
-        {{template "info-button" .}}
-        {{template "shortcuts-button" .}}
-        {{template "zoom-toggle-button" .}}
-        {{template "print-friendly-button" .}}
         {{template "download-button" .}}
+        {{template "print-friendly-button" .}}
+        {{template "zoom-toggle-button" .}}
+        {{template "shortcuts-button" .}}
+        {{template "info-button" .}}
     </div>
     {{template "back-to-top" .}}
     {{template "info-modal" .}}