fix(mobile): move refresh button to top-right icon, fix tiny text issue

- Add compact 36px circular icon button in user stats header (mobile only)
- Hide full-width bottom button on mobile (<=1000px)
- Fixes 1.1vw font-size being ~4px on mobile viewports
- Fixes button blocking attributes at bottom
- Desktop unchanged: keeps full-width button at bottom

Mobile: [Avatar] [Name] | LVL [5] [🔄]
Desktop: [🔄 Refresh RPG Info] at bottom

index.js

@@ -297,7 +297,8 @@ async function initUI() {
         toggleAnimations();
     });
 
-    $('#rpg-manual-update').on('click', async function() {
+    // Bind to both desktop and mobile refresh buttons
+    $('#rpg-manual-update, #rpg-manual-update-mobile').on('click', async function() {
         if (!extensionSettings.enabled) {
             // console.log('[RPG Companion] Extension is disabled. Please enable it in the Extensions tab.');
             return;

src/systems/rendering/userStats.js

@@ -61,6 +61,9 @@ export function renderUserStats() {
                     <span style="opacity: 0.5;">|</span>
                     <span class="rpg-level-label">LVL</span>
                     <span class="rpg-level-value rpg-editable" contenteditable="true" data-field="level" title="Click to edit level">${extensionSettings.level}</span>
+                    <button id="rpg-manual-update-mobile" class="rpg-refresh-icon-btn" title="Refresh RPG Info">
+                        <i class="fa-solid fa-sync"></i>
+                    </button>
                 </div>
                 <div class="rpg-stats-grid">
                     <div class="rpg-stat-row">

src/systems/ui/layout.js

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

style.css

@@ -2670,7 +2670,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 }
 
 /* ============================================
-   MANUAL UPDATE BUTTON
+   MANUAL UPDATE BUTTON (Desktop)
    ============================================ */
 .rpg-manual-update-btn {
     width: 100%;
@@ -2707,6 +2707,42 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }
 
+/* ============================================
+   REFRESH ICON BUTTON (Mobile)
+   ============================================ */
+.rpg-refresh-icon-btn {
+    display: none; /* Hidden by default, shown on mobile */
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    margin-left: auto; /* Push to right side */
+    background: var(--rpg-highlight);
+    border: 2px solid var(--rpg-highlight);
+    border-radius: 50%;
+    color: var(--rpg-text);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    flex-shrink: 0;
+}
+
+.rpg-refresh-icon-btn:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px var(--rpg-highlight);
+    background: var(--rpg-accent);
+}
+
+.rpg-refresh-icon-btn:active {
+    transform: scale(0.95);
+}
+
+.rpg-refresh-icon-btn i {
+    pointer-events: none;
+}
+
 /* ============================================
    SETTINGS BUTTON
    ============================================ */
@@ -3292,6 +3328,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 
 /* Mobile-specific panel behavior - matches SillyTavern's 1000px breakpoint */
 /* CACHE BUST v2025-01-16 */
+/* Mobile: Show icon button, hide desktop button */
+@media (max-width: 1000px) {
+    .rpg-refresh-icon-btn {
+        display: flex !important; /* Show mobile icon button */
+    }
+
+    .rpg-manual-update-btn {
+        display: none !important; /* Hide desktop button */
+    }
+}
+
 @media (max-width: 1000px) {
     /* ========================================
        MOBILE PANEL FOUNDATION