feat: Add mobile-optimized FAB toggle button for panel

- Added floating action button (FAB) that appears only on mobile (≤768px)
- Panel becomes a bottom sheet modal on mobile instead of fixed sidebar
- Smooth slide-up animation with backdrop overlay
- Panel hidden by default on mobile, opens when FAB clicked
- Touch-friendly button sizes (44px minimum per Apple HIG)
- 70vh height on tablets, 80vh on phones for better usability
- Rounded top corners for modern mobile UI
- Desktop behavior unchanged

index.js

@@ -302,6 +302,14 @@ async function initUI() {
     // Append panel to body - positioning handled by CSS
     $('body').append(templateHtml);
 
+    // Add mobile toggle button (FAB - Floating Action Button)
+    const mobileToggleHtml = `
+        <button id="rpg-mobile-toggle" class="rpg-mobile-toggle" title="Toggle RPG Panel">
+            <i class="fa-solid fa-dice-d20"></i>
+        </button>
+    `;
+    $('body').append(mobileToggleHtml);
+
     // Cache UI elements
     $panelContainer = $('#rpg-companion-panel');
     $userStatsContainer = $('#rpg-user-stats');
@@ -478,6 +486,9 @@ async function initUI() {
     toggleCustomColors();
     toggleAnimations();
 
+    // Setup mobile toggle button
+    setupMobileToggle();
+
     // Render initial data if available
     renderUserStats();
     renderInfoBox();
@@ -953,6 +964,37 @@ function setupSettingsPopup() {
     });
 }
 
+/**
+ * Sets up the mobile toggle button (FAB).
+ */
+function setupMobileToggle() {
+    const $mobileToggle = $('#rpg-mobile-toggle');
+    const $panel = $('#rpg-companion-panel');
+    const $overlay = $('<div class="rpg-mobile-overlay"></div>');
+
+    // Toggle panel visibility on mobile
+    $mobileToggle.on('click', function() {
+        if ($panel.hasClass('rpg-mobile-open')) {
+            // Close panel
+            $panel.removeClass('rpg-mobile-open');
+            $overlay.remove();
+            $mobileToggle.removeClass('active');
+        } else {
+            // Open panel
+            $panel.addClass('rpg-mobile-open');
+            $('body').append($overlay);
+            $mobileToggle.addClass('active');
+            
+            // Close when clicking overlay
+            $overlay.on('click', function() {
+                $panel.removeClass('rpg-mobile-open');
+                $overlay.remove();
+                $mobileToggle.removeClass('active');
+            });
+        }
+    });
+}
+
 /**
  * Updates the visibility of the entire panel.
  */