Fix security reset UX: full-screen overlay, CSS class bug, and auto-reconnect

- Add security-reset-overlay HTML element to index.html that shows immediately
  when the user confirms "Erase & Reset", before the synchronous API call runs
- Add .security-reset-overlay CSS to security.css (reuses reboot-card styles,
  adds fade-in animation, z-index 1000 to sit above all other content)
- Fix reboot overlay class bug: classList.add("open") → classList.add("visible")
  so the overlay actually renders per the .reboot-overlay.visible CSS rule
- Show overlay step text "Erasing data and resetting credentials…" during wipe,
  update to "Reset complete. Rebooting now…" when API returns
- Call waitForServerReboot() (globally defined in update.js) after reset so the
  page auto-reloads when the system comes back online
- Hide the security-reset-overlay and re-enable the button on error

Agent-Logs-Url: https://github.com/naturallaw777/staging_alpha/sessions/185d0b41-d54d-4ea2-93d6-bfb7c15b8aed

Co-authored-by: naturallaw777 <99053422+naturallaw777@users.noreply.github.com>

app/sovran_systemsos_web/static/css/security.css

@@ -215,6 +215,33 @@
   min-width: 70px;
 }
 
+/* ── Security Reset full-screen overlay ──────────────────────────── */
+
+.security-reset-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background-color: rgba(15, 15, 25, 0.94);
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+  animation: security-reset-fade-in 0.35s ease-out;
+}
+
+.security-reset-overlay.visible {
+  display: flex;
+}
+
+@keyframes security-reset-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.security-reset-overlay-icon {
+  font-size: 3rem;
+  margin-bottom: 16px;
+}
+
 /* ── First-login security banner ─────────────────────────────────── */
 
 .security-first-login-banner {

app/sovran_systemsos_web/static/js/security.js

@@ -119,12 +119,22 @@ function openSecurityModal() {
         if (!eraseInput || eraseInput.value.trim() !== "ERASE") return;
         resetConfirmBtn.disabled = true;
         resetConfirmBtn.textContent = "Erasing\u2026";
+
+        // Show the full-screen blocking overlay immediately so the user knows
+        // the wipe is in progress even while the API call runs synchronously.
+        var $secResetOverlay = document.getElementById("security-reset-overlay");
+        var $secResetStep = document.getElementById("security-reset-overlay-step");
+        if ($secResetOverlay) $secResetOverlay.classList.add("visible");
+
         if (resetStatus) { resetStatus.textContent = "Running security reset\u2026"; resetStatus.className = "security-status-msg security-status-info"; }
         try {
           await apiFetch("/api/security/reset", { method: "POST" });
+          if ($secResetStep) $secResetStep.textContent = "Reset complete. Rebooting now\u2026";
           if (resetStatus) { resetStatus.textContent = "\u2713 Reset complete. Rebooting\u2026"; resetStatus.className = "security-status-msg security-status-ok"; }
-          if ($rebootOverlay) $rebootOverlay.classList.add("open");
+          if ($rebootOverlay) $rebootOverlay.classList.add("visible");
+          setTimeout(waitForServerReboot, REBOOT_CHECK_INTERVAL);
         } catch (err) {
+          if ($secResetOverlay) $secResetOverlay.classList.remove("visible");
           if (resetStatus) { resetStatus.textContent = "\u2717 Error: " + (err.message || "Reset failed."); resetStatus.className = "security-status-msg security-status-error"; }
           resetConfirmBtn.disabled = false;
           resetConfirmBtn.textContent = "Erase & Reset";

app/sovran_systemsos_web/templates/index.html

@@ -210,6 +210,25 @@
     </div>
   </div>
 
+  <!-- Security Reset overlay -->
+  <div class="security-reset-overlay" id="security-reset-overlay">
+    <div class="reboot-card">
+      <div class="security-reset-overlay-icon">🛡</div>
+      <h2 class="reboot-title">Security Reset In Progress</h2>
+      <p class="reboot-message">
+        ⚠️ Wiping all data and credentials.<br />
+        <strong>Do not power off your computer.</strong><br />
+        This may take several minutes. The system will reboot automatically when complete.
+      </p>
+      <div class="reboot-dots">
+        <span class="reboot-dot"></span>
+        <span class="reboot-dot"></span>
+        <span class="reboot-dot"></span>
+      </div>
+      <p class="reboot-submessage" id="security-reset-overlay-step">Erasing data and resetting credentials…</p>
+    </div>
+  </div>
+
   <!-- Reboot overlay -->
   <div class="reboot-overlay" id="reboot-overlay">
     <div class="reboot-card">