fix: reposition 'Show thoughts' button above avatar on mobile

Previously, the thought icon button was positioned to the left of the
character avatar on mobile, causing it to appear partially off-screen
due to lack of left padding around avatars.

Changes:
- Add mobile-specific positioning logic in index.js to detect viewport
  width <= 1000px and calculate centered horizontal position
- Add CSS transform in mobile media query to shift icon 50px right
  and 45px upward from calculated position
- Center thought panel horizontally on mobile when opened
- Add debug logging to verify mobile detection

Result: On mobile, the thought icon now appears above and to the right
of the avatar, fully visible and accessible.

index.js

@@ -3554,7 +3554,32 @@ function createThoughtPanel($message, thoughtsArray) {
     let iconTop = avatarRect.top;
     let iconLeft;
 
-    if (panelPosition === 'left') {
+    // Detect mobile viewport (matches CSS breakpoint)
+    const isMobile = window.innerWidth <= 1000;
+
+    if (isMobile) {
+        // On mobile: position icon horizontally centered on avatar
+        // The CSS transform will shift it upward by 60px
+        iconTop = avatarRect.top; // Start at avatar top (CSS will move it up)
+        iconLeft = avatarRect.left + (avatarRect.width / 2) - 18; // Centered horizontally (18px = half of 36px icon width)
+
+        // Center the thought panel horizontally on mobile
+        left = window.innerWidth / 2 - panelWidth / 2;
+        top = avatarRect.top + avatarRect.height + 60; // Position below icon with spacing
+
+        // No side-specific classes on mobile
+        $thoughtPanel.removeClass('rpg-thought-panel-left rpg-thought-panel-right');
+        $thoughtIcon.removeClass('rpg-thought-icon-left rpg-thought-icon-right');
+
+        console.log('[RPG Companion] Mobile thought icon positioning:', {
+            isMobile,
+            windowWidth: window.innerWidth,
+            avatarLeft: avatarRect.left,
+            avatarWidth: avatarRect.width,
+            iconLeft,
+            iconTop
+        });
+    } else if (panelPosition === 'left') {
         // Main panel is on left, so thought bubble goes to RIGHT side
         // Mirror the left side positioning: bubble should be same distance from avatar
         // but on the opposite side, extending to the right

style.css

@@ -3392,6 +3392,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         justify-content: center;
         padding: 0;
     }
+
+    /* ========================================
+       MOBILE THOUGHT ICON POSITIONING
+       ======================================== */
+
+    /* Position thought icon above avatar on mobile to prevent off-screen clipping */
+    /* JavaScript will calculate position, but add transform to move it above and right */
+    #rpg-thought-icon {
+        /* Use transform to shift icon above and to the right of avatar */
+        transform: translate(50px, -45px) !important;
+    }
 }
 
 /* Extra small screens - adjust FAB position */