fix: add debug toggle as draggable mobile FAB button

PROBLEM:
- Debug logs only accessible via browser console (impractical on mobile)
- User (Salixfire) reporting parsing issues but can't debug on mobile device
- Need mobile-friendly debug mode for troubleshooting data display issues

SOLUTION:
Implemented debug toggle FAB button following exact pattern of existing mobile FABs:

Files Changed:
- src/core/state.js: Added debugFabPosition and debugMode to extensionSettings
- src/core/config.js: Added debugFabPosition to defaultSettings (reference)
- index.js: Created debug toggle button, imported setupDebugButtonDrag
- style.css: Added debug toggle CSS matching mobile FAB pattern (44px, grab cursor, theme colors)
- src/systems/ui/mobile.js: Added setupDebugButtonDrag() with drag-to-reposition
- src/systems/ui/debug.js: Removed button creation, added just-dragged check, updated visibility control

Implementation Details:
- Button created in index.js (not debug.js) following mobile FAB pattern
- CSS matches mobile toggle/refresh buttons (44px, theme colors, grab cursor, user-select: none)
- Drag support with touch/mouse handlers, 200ms/10px threshold
- Position saved to extensionSettings.debugFabPosition
- Just-dragged flag prevents accidental clicks after drag
- Mobile (≤1000px): slide from right with rpg-mobile-open/closing classes
- Desktop (>1000px): slide from bottom with rpg-debug-open class
- Event delegation for reliable click handling
- Default position: bottom 140px, left 20px (below other FABs)

Bug Fix:
- Initial implementation had debugFabPosition only in config.js
- extensionSettings uses state.js as source, not config.js
- Without debugFabPosition in state.js, button had no position and was invisible
- Now properly initialized in both files

The debug button is hidden by default (debugMode: false) and shown when user enables debug mode in RPG Companion settings. This allows Salixfire to view parser logs on mobile and troubleshoot the data display issues.

style.css

@@ -4784,42 +4784,46 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
    Debug Panel Styles - Mobile-Friendly Debug Log Viewer
    =================================================================== */
 
-/* Debug toggle button (FAB-style) */
+/* ============================================
+   DEBUG TOGGLE FAB BUTTON (Same pattern as mobile FABs)
+   ============================================ */
 .rpg-debug-toggle {
     display: none; /* Hidden by default, shown when debugMode is enabled */
     align-items: center;
     justify-content: center;
     position: fixed;
-    bottom: 20px;
-    left: 20px;
-    width: 50px;
-    height: 50px;
+    /* Position set by JavaScript based on saved settings */
+    width: 44px;
+    height: 44px;
     border-radius: 50%;
-    background: #ff6b6b;
-    border: 2px solid #c92a2a;
-    color: white;
-    font-size: 1.5rem;
-    cursor: pointer;
-    z-index: 10003; /* Above everything else */
-    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.5);
-    transition: all 0.3s ease;
+    background: var(--SmartThemeBlurTintColor);
+    border: 2px solid var(--SmartThemeBorderColor);
+    color: var(--rpg-text, #ecf0f1);
+    font-size: 1.85vw;
+    cursor: grab;
+    z-index: 1000; /* Below refresh (1001) and mobile toggle (10002) */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: opacity 0.3s ease, transform 0.2s ease, top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
+    user-select: none;
+    -webkit-user-select: none;
+    will-change: top, left;
+}
+
+/* Disable transitions while actively dragging */
+.rpg-debug-toggle.dragging {
+    transition: none;
+    cursor: grabbing;
 }
 
 .rpg-debug-toggle:hover {
     transform: scale(1.1);
-    box-shadow: 0 6px 16px rgba(255, 107, 107, 0.7);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
 }
 
 .rpg-debug-toggle:active {
     transform: scale(0.95);
 }
 
-@media (max-width: 1000px) {
-    .rpg-debug-toggle {
-        display: flex; /* Show on mobile when debugMode is enabled */
-    }
-}
-
 /* Debug panel */
 .rpg-debug-panel {
     position: fixed;
@@ -4937,6 +4941,67 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     word-break: break-word;
 }
 
+/* Mobile view - slide from right like main panel */
+@media (max-width: 1000px) {
+    .rpg-debug-panel {
+        /* Reset bottom slide positioning */
+        transform: none;
+        transition: none;
+        bottom: auto;
+
+        /* Mobile panel - slide from right */
+        position: fixed !important;
+        top: var(--topBarBlockSize) !important;
+        right: 0 !important;
+        left: auto !important;
+
+        /* Mobile sizing using dynamic viewport units */
+        width: 85dvw !important;
+        max-width: 400px !important;
+        height: calc(100dvh - var(--topBarBlockSize)) !important;
+
+        /* Hidden by default */
+        display: none !important;
+
+        /* Mobile scrolling */
+        overflow-y: auto !important;
+        -webkit-overflow-scrolling: touch;
+
+        /* Styling */
+        border-radius: 20px 0 0 0;
+        border-left: 1px solid var(--SmartThemeBorderColor);
+        border-top: 1px solid var(--SmartThemeBorderColor);
+        border-bottom: none;
+        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
+    }
+
+    /* Show panel when opened with slide-in animation */
+    .rpg-debug-panel.rpg-mobile-open {
+        display: flex !important;
+        z-index: 10002;
+        animation: rpgSlideInFromRight 0.3s ease-in-out;
+    }
+
+    /* Closing animation - slide out to right */
+    .rpg-debug-panel.rpg-mobile-closing {
+        display: flex !important;
+        z-index: 10002;
+        animation: rpgSlideOutToRight 0.3s ease-in-out;
+    }
+
+    /* Debug logs container needs to stay scrollable */
+    .rpg-debug-logs {
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* Debug toggle button on mobile */
+    .rpg-debug-toggle {
+        font-size: clamp(20px, 5.1vw, 26px) !important;
+    }
+}
+
 /* Desktop view - smaller panel in bottom right */
 @media (min-width: 1001px) {
     .rpg-debug-panel {
@@ -4949,8 +5014,4 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         border-radius: 12px;
         border: 2px solid var(--SmartThemeBorderColor, #333);
     }
-
-    .rpg-debug-toggle {
-        display: flex; /* Show on desktop too when debugMode enabled */
-    }
 }