Merge pull request #16 from paperboygold/main

fix: refresh button placement (mobile)

style.css

@@ -744,7 +744,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     font-size: 0.7vw;
     font-weight: 700;
     color: var(--rpg-highlight-color);
-    padding: clamp(1px, 0.2vh, 2px) 0.375em;
+    padding: 0 0.375em;
     background: var(--rpg-accent-color);
     border-radius: clamp(2px, 0.3vh, 3px);
     border: 1px solid var(--rpg-highlight-color);
@@ -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,64 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }
 
+/* ============================================
+   MOBILE REFRESH BUTTON (FAB - Same pattern as toggle)
+   ============================================ */
+.rpg-mobile-refresh {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    /* Position set by JavaScript based on saved settings */
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: var(--SmartThemeBlurTintColor);
+    border: 2px solid var(--SmartThemeBorderColor);
+    color: var(--rpg-text, #ecf0f1);
+    font-size: 1.85vw;
+    cursor: grab;
+    z-index: 1001; /* Above panel (1000) but below 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-mobile-refresh.dragging {
+    transition: none;
+    cursor: grabbing;
+}
+
+.rpg-mobile-refresh:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+.rpg-mobile-refresh:active {
+    transform: scale(0.95);
+}
+
+/* Spinning animation when refreshing */
+.rpg-mobile-refresh.spinning i {
+    animation: rpg-spin 0.8s linear infinite;
+}
+
+.rpg-mobile-refresh i {
+    pointer-events: none;
+}
+
+@keyframes rpg-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 /* ============================================
    SETTINGS BUTTON
    ============================================ */
@@ -3292,6 +3350,31 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 
 /* Mobile-specific panel behavior - matches SillyTavern's 1000px breakpoint */
 /* CACHE BUST v2025-01-16 */
+/* Mobile refresh button visibility - opposite of toggle */
+@media (max-width: 1000px) {
+    /* Show mobile refresh button */
+    .rpg-mobile-refresh {
+        display: flex;
+    }
+
+    /* Hide desktop refresh button */
+    .rpg-manual-update-btn {
+        display: none !important;
+    }
+
+    /* Show refresh button when panel is open (opposite of toggle) */
+    body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-refresh {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    /* Hide refresh button when panel is closed */
+    .rpg-mobile-refresh {
+        opacity: 0;
+        pointer-events: none;
+    }
+}
+
 @media (max-width: 1000px) {
     /* ========================================
        MOBILE PANEL FOUNDATION
@@ -3616,6 +3699,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 
     .rpg-calendar-day {
         font-size: clamp(11px, 2.9vw, 14px) !important;
+        min-height: 3em !important; /* Ensure enough height for content to center */
+        padding: 0.75em 0.5em !important; /* More vertical padding on mobile */
+        line-height: 1.2 !important; /* Tighter line height */
     }
 
     .rpg-calendar-year {
@@ -3753,14 +3839,20 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         grid-row: 3;
         display: flex;
         flex-direction: column;
-        gap: 6px;
+        gap: 3px !important; /* Reduced from 6px for more compact display */
         min-width: 0;
+        padding: 4px 0.375em !important; /* Reduced vertical padding */
     }
 
     /* Make mood text readable on mobile */
     .rpg-mood-conditions {
         font-size: clamp(11px, 2.8vw, 14px);
-        line-height: 1.3;
+        line-height: 1.2 !important; /* Tighter line height */
+    }
+
+    /* Smaller emoji on mobile */
+    .rpg-mood-emoji {
+        font-size: clamp(14px, 3.5vw, 18px) !important; /* Slightly smaller */
     }
 
     /* Attributes - right side, rows 4-6 aligned with mood */
@@ -3960,6 +4052,11 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         font-size: clamp(20px, 5.1vw, 26px) !important;
     }
 
+    /* Larger mobile refresh icon (same as toggle) */
+    .rpg-mobile-refresh {
+        font-size: clamp(20px, 5.1vw, 26px) !important;
+    }
+
     /* ========================================
        MOBILE SETTINGS POPUP
        ======================================== */
@@ -4059,6 +4156,13 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         min-height: 2.75rem;
     }
 
+    /* Exception: Level value should stay compact */
+    .rpg-level-value.rpg-editable {
+        padding: 0 0.375em;
+        min-height: auto;
+        line-height: 1.2;
+    }
+
     /* Larger close buttons */
     .rpg-thought-close {
         min-width: 2.75rem;