fix: improve mobile UX for relationship badge and thought panel

Fixed two mobile UI issues:

1. Relationship badge sizing on mobile:
   - Badge was stretching vertically due to .rpg-editable mobile styles
   - Override padding, min-height, and line-height for badge on mobile
   - Keep badge at compact 18px × 18px to prevent covering avatar

2. Thought panel initial state:
   - Panel was showing by default instead of the icon
   - Fixed initialization: hide panel, show icon
   - Users now click the 💭 icon to open the dialogue as intended

Changes ensure proper mobile experience with appropriately sized UI
elements and correct initial visibility states.

index.js

@@ -3647,8 +3647,9 @@ function createThoughtPanel($message, thoughtsArray) {
         right: 'auto' // Clear any right positioning
     });
 
-    // Initially hide the icon
+    // Initially hide the panel and show the icon
-    $thoughtIcon.hide();
+    $thoughtPanel.hide();
+    $thoughtIcon.show();
 
     // console.log('[RPG Companion] Thought panel created at:', { top, left });
 

style.css

@@ -3403,6 +3403,20 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         /* Use transform to shift icon above and to the right of avatar */
         transform: translate(50px, -45px) !important;
     }
+
+    /* ========================================
+       MOBILE CHARACTER RELATIONSHIP BADGE
+       ======================================== */
+
+    /* Keep relationship badge small on mobile to prevent it from covering avatar */
+    .rpg-relationship-badge {
+        width: 18px !important;
+        height: 18px !important;
+        font-size: 10px !important;
+        padding: 0 !important;
+        min-height: unset !important;
+        line-height: 18px !important;
+    }
 }
 
 /* Extra small screens - adjust FAB position */