fix: copy mobile toggle pattern for refresh button

- Moved refresh button creation from template.html to index.js (appended to body)
- Created new CSS class .rpg-mobile-refresh (exact copy of .rpg-mobile-toggle pattern)
- Uses opacity for show/hide instead of display (CSS controls visibility based on panel state)
- Show when panel open (body:has(.rpg-panel.rpg-mobile-open))
- Hide when panel closed (opacity: 0, pointer-events: none)
- Updated constrainFabToViewport() to accept optional button parameter
- Automatically detects which button and uses correct settings (mobileFabPosition or mobileRefreshPosition)
- Simplified updateGenerationModeUI() - CSS handles visibility
- Kept full drag functionality with touch and mouse support
- Button positioned via JavaScript with saved position
- z-index: 1001 (above panel, below toggle at 10002)

index.js

@@ -210,6 +210,14 @@ async function initUI() {
     `;
     $('body').append(mobileToggleHtml);
 
+    // Add mobile refresh button (same pattern as toggle button)
+    const mobileRefreshHtml = `
+        <button id="rpg-manual-update-mobile" class="rpg-mobile-refresh" title="Refresh RPG Info">
+            <i class="fa-solid fa-sync"></i>
+        </button>
+    `;
+    $('body').append(mobileRefreshHtml);
+
     // Cache UI elements using state setters
     setPanelContainer($('#rpg-companion-panel'));
     setUserStatsContainer($('#rpg-user-stats'));