feat: add dynamic green highlighting for bottom scroll and zoom controls

- Add green background (#27ae60) to info and back-to-top buttons when at page bottom
- Implement bottom detection (within 50px threshold) in scroll handler
- Add conditional green hover to zoom reset button (only when zoom ≠ 100%)
- Enhance UX with visual feedback for scroll position and zoom state

static/css/main.css

@@ -2601,6 +2601,11 @@ html {
     background: #3a3a3a;
 }
 
+.back-to-top.at-bottom {
+    opacity: 1;
+    background: #27ae60;
+}
+
 .back-to-top:active {
     transform: translateY(-1px);
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
@@ -2647,6 +2652,11 @@ html {
     background: #3a3a3a;
 }
 
+.info-button.at-bottom {
+    opacity: 1;
+    background: #27ae60;
+}
+
 .info-button:active {
     transform: translateY(-1px);
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
@@ -3661,6 +3671,13 @@ html {
     color: white;
 }
 
+/* Green hover only when zoom is not at default (100) */
+.zoom-reset-btn.zoom-not-default:hover {
+    background: rgba(39, 174, 96, 0.5);
+    border-color: rgba(39, 174, 96, 0.5);
+    color: rgba(255, 255, 255, 0.5);
+}
+
 .zoom-reset-btn:active {
     transform: scale(0.95);
 }

static/js/main.js

@@ -375,6 +375,7 @@
     function updateZoomDisplay(zoomValue) {
         const slider = document.getElementById('zoom-slider');
         const display = document.getElementById('zoom-value-current');
+        const resetBtn = document.getElementById('zoom-reset');
 
         if (display) {
             display.textContent = zoomValue;
@@ -384,6 +385,15 @@
             slider.setAttribute('aria-valuenow', zoomValue);
             slider.setAttribute('aria-valuetext', `${zoomValue}%`);
         }
+
+        // Add/remove class to enable green hover only when zoom is not 100
+        if (resetBtn) {
+            if (zoomValue !== 100) {
+                resetBtn.classList.add('zoom-not-default');
+            } else {
+                resetBtn.classList.remove('zoom-not-default');
+            }
+        }
     }
 
     /**
@@ -676,9 +686,15 @@
             const actionBar = document.querySelector('.action-bar');
             const navMenu = document.querySelector('.navigation-menu');
             const backToTopBtn = document.getElementById('back-to-top');
+            const infoBtn = document.querySelector('.info-button');
             const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
             const isMenuOpen = navMenu.classList.contains('menu-open');
 
+            // Check if at bottom of page (within 50px threshold)
+            const scrollHeight = document.documentElement.scrollHeight;
+            const clientHeight = document.documentElement.clientHeight;
+            const isAtBottom = (scrollHeight - currentScroll - clientHeight) < 50;
+
             // If scrolling up, reset the keepHeaderVisible flag
             if (currentScroll < lastScrollTop) {
                 keepHeaderVisible = false;
@@ -717,6 +733,15 @@
                 backToTopBtn.style.display = 'none';
             }
 
+            // Add/remove at-bottom class for both buttons
+            if (isAtBottom) {
+                if (backToTopBtn) backToTopBtn.classList.add('at-bottom');
+                if (infoBtn) infoBtn.classList.add('at-bottom');
+            } else {
+                if (backToTopBtn) backToTopBtn.classList.remove('at-bottom');
+                if (infoBtn) infoBtn.classList.remove('at-bottom');
+            }
+
             lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
         }, false);