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)

src/systems/ui/layout.js

@@ -273,12 +273,12 @@ export function applyPanelPosition() {
  */
 export function updateGenerationModeUI() {
     if (extensionSettings.generationMode === 'together') {
-        // In "together" mode, both update buttons are hidden
+        // In "together" mode, hide both update buttons
         $('#rpg-manual-update').hide();
         $('#rpg-manual-update-mobile').hide();
     } else {
-        // In "separate" mode, both update buttons are visible
-        // (CSS media queries will control which one is displayed)
+        // In "separate" mode, show both buttons
+        // (CSS media queries control which one is visible based on viewport)
         $('#rpg-manual-update').show();
         $('#rpg-manual-update-mobile').show();
     }