fix: move debug mode toggle to proper settings location

The debug toggle was incorrectly added to settings.html (SillyTavern Extensions tab).
It should be in template.html (RPG Companion Settings popup) where all the
other extension settings are.

Changes:
- template.html: Added debug mode checkbox in Display Options section
- index.js: Added event listener and initial state setter
- settings.html: Removed incorrect debug toggle placement

Now users can find the debug toggle by clicking the gear icon in the RPG panel,
under Display Options, right below "Show Plot Progression Buttons".

index.js

@@ -193,13 +193,6 @@ function addExtensionSettings() {
             updateChatThoughts(); // This will re-create the thought bubble if data exists
         }
     });
-
-    // Set up the debug mode toggle
-    $('#rpg-debug-mode').prop('checked', extensionSettings.debugMode).on('change', function() {
-        extensionSettings.debugMode = $(this).prop('checked');
-        saveSettings();
-        updateDebugUIVisibility();
-    });
 }
 
 /**
@@ -310,6 +303,12 @@ async function initUI() {
         togglePlotButtons();
     });
 
+    $('#rpg-toggle-debug-mode').on('change', function() {
+        extensionSettings.debugMode = $(this).prop('checked');
+        saveSettings();
+        updateDebugUIVisibility();
+    });
+
     $('#rpg-toggle-animations').on('change', function() {
         extensionSettings.enableAnimations = $(this).prop('checked');
         saveSettings();
@@ -421,6 +420,7 @@ async function initUI() {
     $('#rpg-toggle-thoughts-in-chat').prop('checked', extensionSettings.showThoughtsInChat);
     $('#rpg-toggle-html-prompt').prop('checked', extensionSettings.enableHtmlPrompt);
     $('#rpg-toggle-plot-buttons').prop('checked', extensionSettings.enablePlotButtons);
+    $('#rpg-toggle-debug-mode').prop('checked', extensionSettings.debugMode);
     $('#rpg-toggle-animations').prop('checked', extensionSettings.enableAnimations);
     $('#rpg-stat-bar-color-low').val(extensionSettings.statBarColorLow);
     $('#rpg-stat-bar-color-high').val(extensionSettings.statBarColorHigh);

settings.html

@@ -11,12 +11,6 @@
             </label>
             <small class="notes">Toggle to enable/disable the RPG Companion extension. Configure additional settings within the panel itself.</small>
 
-            <label class="checkbox_label" for="rpg-debug-mode" style="margin-top: 10px;">
-                <input type="checkbox" id="rpg-debug-mode" />
-                <span>🔍 Debug Mode (Mobile-Friendly)</span>
-            </label>
-            <small class="notes">Enable debug logging visible in UI. Useful for troubleshooting parsing issues on mobile devices. Shows a red bug button to view parser logs.</small>
-
             <div style="margin-top: 10px; display: flex; gap: 10px;">
                 <a href="https://discord.com/invite/KdAkTg94ME" target="_blank" class="menu_button" style="flex: 1; text-align: center; text-decoration: none;">
                     <i class="fa-brands fa-discord"></i> Discord

template.html

@@ -195,6 +195,14 @@
                 <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
                     Display buttons above chat input for plot progression prompts
                 </small>
+
+                <label class="checkbox_label">
+                    <input type="checkbox" id="rpg-toggle-debug-mode" />
+                    <span>🔍 Enable Debug Mode (Mobile-Friendly)</span>
+                </label>
+                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
+                    Shows parser logs in a mobile-friendly UI panel. Useful for troubleshooting. Look for the red bug button.
+                </small>
             </div>
 
             <div class="rpg-settings-group">