From 0c477ac037be622f4051f0ee952111c606e4edb3 Mon Sep 17 00:00:00 2001
From: EP <ep@Mac.lan>
Date: Wed, 20 Aug 2025 20:11:29 -0700
Subject: [PATCH] Danger modal: move inside #app to inherit Vue state and
 center correctly; fix always-on artifact

---
 index.html | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 8d3aeaf..a4ec7c3 100644
--- a/index.html
+++ b/index.html
@@ -802,21 +802,21 @@
                 </div>
             </div>
         </div>
-    </div>
 
-    <!-- Danger Zone Modal -->
-    <div :class="['danger-modal-backdrop', showDangerModal ? 'danger-active' : '']">
-        <div class="danger-modal">
-            <div class="danger-header">
-                <i class="fas fa-radiation"></i>
-                <strong>Danger zone warning</strong>
-            </div>
-            <div class="danger-body">
-                <p>Your projected payload size exceeds <strong>25,000,000</strong> characters. Generating this will very likely <strong>freeze/crash</strong> your browser or downstream tools, and can rack up serious costs if sent to a model.</p>
-                <p>Proceed only if you fully understand the risks and are testing in a safe, isolated environment.</p>
-            </div>
-            <div class="danger-actions">
-                <button class="danger-proceed" @click="proceedDangerAction"><i class="fas fa-skull-crossbones"></i> I understand, proceed</button>
+        <!-- Danger Zone Modal (must live inside #app for Vue bindings) -->
+        <div :class="['danger-modal-backdrop', showDangerModal ? 'danger-active' : '']">
+            <div class="danger-modal">
+                <div class="danger-header">
+                    <i class="fas fa-radiation"></i>
+                    <strong>Danger zone warning</strong>
+                </div>
+                <div class="danger-body">
+                    <p>Your projected payload size exceeds <strong>25,000,000</strong> characters. Generating this will very likely <strong>freeze/crash</strong> your browser or downstream tools, and can rack up serious costs if sent to a model.</p>
+                    <p>Proceed only if you fully understand the risks and are testing in a safe, isolated environment.</p>
+                </div>
+                <div class="danger-actions">
+                    <button class="danger-proceed" @click="proceedDangerAction"><i class="fas fa-skull-crossbones"></i> I understand, proceed</button>
+                </div>
             </div>
         </div>
     </div>