From 60e371c726d1c6f61e47e57fb599e9d978d3fb8b Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Thu, 16 Oct 2025 11:25:38 +1100
Subject: [PATCH] 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  | 27 ++++++++++++++++++++++++++-
 style.css | 11 +++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index b03fe29..8958ff0 100644
--- a/index.js
+++ b/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
diff --git a/style.css b/style.css
index 639f762..f553756 100644
--- a/style.css
+++ b/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 */