Fix tab switching: force animation restart on mode change

The mode-fade-in CSS animation wasn't replaying when toggling between
Charge Now and Book a Slot because the browser caches completed
animations. Fix: remove .active from both panels, force a reflow via
offsetWidth read, then add .active to the target panel.

Author: nmayalais

apps-script/script_v3.html

@@ -1597,8 +1597,14 @@
     document.querySelectorAll('.mobile-tab').forEach((btn) => {
       btn.classList.toggle('active', btn.dataset.mode === mode);
     });
-    document.getElementById('mode-now').classList.toggle('active', mode === 'now');
-    document.getElementById('mode-reserve').classList.toggle('active', mode === 'reserve');
+    var modeNow = document.getElementById('mode-now');
+    var modeReserve = document.getElementById('mode-reserve');
+    // Remove active from both, force reflow, then add to target — restarts CSS animation
+    modeNow.classList.remove('active');
+    modeReserve.classList.remove('active');
+    var target = (mode === 'now') ? modeNow : modeReserve;
+    void target.offsetWidth; // force reflow to restart animation
+    target.classList.add('active');
     clearSelection();
     if (mode === 'reserve' && state.board) {
       updateReservationUI(state.board);

apps-script/styles_v3.html

@@ -775,9 +775,7 @@
 
   .mode.active {
     display: block;
-    opacity: 0;
-    transform: translateY(8px);
-    animation: mode-fade-in 200ms ease both;
+    animation: mode-fade-in 200ms ease forwards;
   }
 
   .reserve-header {