Tokenade Danger Zone: lower threshold to 25M estimated chars and strengthen crash warning copy

css/style.css

@@ -1,3 +1,10 @@
+.danger-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 3000; display:flex; align-items:center; justify-content:center; }
+.danger-modal { width: 560px; max-width: calc(100% - 32px); background: #0b0f0b; border: 1px solid #2e7d32; border-radius: 10px; box-shadow: 0 18px 48px rgba(0,0,0,.6); }
+.danger-header { display:flex; align-items:center; gap:8px; padding: 14px 16px; color:#69f0ae; border-bottom:1px solid #1b5e20; font-size:1.05rem; }
+.danger-body { padding: 14px 16px; color:#e0f2f1; opacity:.95; }
+.danger-actions { display:flex; gap:8px; justify-content:flex-end; padding: 12px 16px; border-top:1px solid #1b5e20; }
+.danger-cancel { background: var(--button-bg); border:1px solid var(--input-border); padding:8px 12px; border-radius:6px; cursor:pointer; }
+.danger-proceed { background:#1b5e20; border:1px solid #2e7d32; color:#69f0ae; padding:8px 12px; border-radius:6px; cursor:pointer; box-shadow: 0 0 12px rgba(105,240,174,.35) inset, 0 0 16px rgba(105,240,174,.2); }
 /* Modern dark theme styling */
 :root {
     --main-bg-color: #1a1a1a;
@@ -2032,6 +2039,22 @@ html {
 .token-bomb-section .section-header { margin-bottom: 10px; }
 .token-bomb-section .output-instructions { margin-top: 8px; }
 
+/* Tokenade disclaimer styling */
+.tokenade-disclaimer {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin: 10px 0 12px 0;
+    padding: 10px 12px;
+    border: 1px solid #1b5e20;
+    background: rgba(27, 94, 32, 0.15);
+    color: #69f0ae;
+    border-radius: 6px;
+    font-size: 0.95rem;
+    line-height: 1.35;
+}
+.tokenade-disclaimer i { color: #69f0ae; margin-top: 2px; }
+
 /* Presets row polish */
 .tokenade-presets {
     display: flex;

index.html

@@ -250,10 +250,9 @@
                                 <small>Craft dense token sequences with emojis and zero-width characters</small>
                             </h3>
                         </div>
-                        <div class="output-instructions">
-                            <small>
-                                <strong>Disclaimer:</strong> These payloads can be disruptive to models, UIs, and tools. Use responsibly and avoid deploying in production or against systems without consent.
-                            </small>
+                        <div class="tokenade-disclaimer">
+                            <i class="fas fa-triangle-exclamation"></i>
+                            <span><strong>Safety notice:</strong> Tokenade payloads can severely degrade model performance and crash UIs. Use for testing only. Do not deploy to production or target systems without explicit permission.</span>
                         </div>
                         <div class="tokenade-presets">
                             <button class="transform-button" title="Very light density" @click="applyTokenadePreset('feather')">🪶 Featherweight</button>
@@ -331,7 +330,7 @@
                             </label>
                         </div>
                         <div class="token-bomb-actions">
-                            <button class="transform-button" @click="generateTokenBomb" title="Build the tokenade with current settings">
+                            <button class="transform-button" @click="checkTokenadeDangerThenGenerate" title="Build the tokenade with current settings">
                                 <i class="fas fa-hammer"></i> Generate Tokenade
                             </button>
                             <button class="copy-button" v-if="tokenBombOutput" @click="copyToClipboard(tokenBombOutput)">
@@ -805,6 +804,24 @@
         </div>
     </div>
 
+    <!-- Danger Zone Modal -->
+    <div v-if="showDangerModal" class="danger-modal-backdrop">
+        <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-cancel" @click="cancelDangerAction">Cancel</button>
+                <button class="danger-proceed" @click="proceedDangerAction"><i class="fas fa-skull-crossbones"></i> I understand, proceed</button>
+            </div>
+        </div>
+    </div>
+
         
     <!-- Global Advanced Settings Panel -->
     <div id="unicode-options-panel" class="unicode-options-panel">

js/app.js

@@ -86,7 +86,12 @@ window.app = new Vue({
         copyHistory: [],
         maxHistoryItems: 10,
         showCopyHistory: false,
-        showUnicodePanel: false
+        showUnicodePanel: false,
+
+        // Danger zone controls
+        showDangerModal: false,
+        dangerThresholdTokens: 25_000_000,
+        _pendingTokenadeAction: null
     },
     methods: {
         toggleUnicodePanel() {
@@ -1698,6 +1703,32 @@ window.app = new Vue({
             });
         }
         ,
+        // Quick estimate of token count for Tokenade
+        estimateTokenadeTokens() {
+            // Roughly approximate tokens by estimated character length
+            // This intentionally errs on the conservative side for warning purposes
+            const approx = this.estimateTokenadeLength();
+            return Math.max(0, approx);
+        },
+
+        // Confirm danger threshold before generating
+        checkTokenadeDangerThenGenerate() {
+            const estTokens = this.estimateTokenadeTokens();
+            if (estTokens > this.dangerThresholdTokens) {
+                this._pendingTokenadeAction = 'generate';
+                this.showDangerModal = true;
+                return;
+            }
+            this.generateTokenBomb();
+        },
+
+        // Proceed/cancel handlers for modal
+        proceedDangerAction() {
+            const action = this._pendingTokenadeAction; this._pendingTokenadeAction = null; this.showDangerModal = false;
+            if (action === 'generate') this.generateTokenBomb();
+        },
+        cancelDangerAction() { this._pendingTokenadeAction = null; this.showDangerModal = false; },
+
         // Token Bomb Generator Logic
         generateTokenBomb() {
             const depth = Math.max(1, Math.min(8, Number(this.tbDepth) || 1));