Fix full-screen mode usability issues and enhance reading experience

Full-Screen Mode Improvements:
- Fix navigation controls background transparency issue in reading mode
- Add semi-transparent backgrounds with backdrop blur for better visibility
- Implement theme-aware colors matching user's selected theme (light/dark/sepia)
- Add subtle borders for better visual definition without distraction

Verse Action Buttons Enhancement:
- Enable bookmark, copy, and chat buttons in full-screen reading mode
- Remove reading mode restriction that was hiding essential verse-level functionality
- Add theme-aware hover effects for better integration in reading mode
- Implement adaptive opacity (0.2 in reading mode, 0.3 in normal mode)
- Smooth hover transitions that reveal buttons when needed

Smart Chat Integration:
- Automatically exit full-screen mode when chat icon is clicked from reading mode
- Add smooth transition timing to allow exit animation to complete
- Preserve verse context and pre-filled AI messages through mode transitions
- Prevent chat from opening hidden behind full-screen overlay
- Maintain authentication flow and redirect logic

User Experience Enhancements:
- Professional navigation bar with backdrop blur effect (modern glass morphism)
- Non-intrusive verse actions that don't distract from reading
- Intelligent behavior that adapts based on current reading mode
- Seamless transition from immersive reading to AI conversations
- Consistent visual experience across all themes and modes

Technical Implementation:
- Theme-aware styling for dark, light, and sepia modes
- CSS backdrop-filter for modern blur effects
- Smart timing with setTimeout for smooth transitions
- Preserved functionality while improving visual integration
- Enhanced hover states with custom theme-matching colors

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/[locale]/bible/reader.tsx

@@ -702,18 +702,26 @@ export default function BibleReaderNew() {
       return
     }
 
+    // Exit full-screen mode if currently in reading mode so chat is visible
+    if (preferences.readingMode) {
+      setPreferences(prev => ({ ...prev, readingMode: false }))
+    }
+
     const versionName = versions.find(v => v.id === selectedVersion)?.name || selectedVersion
     const bookName = currentBook?.name || 'Unknown Book'
 
     const initialMessage = `Explain in depth this verse "${verse.text}" from ${versionName}, ${bookName} ${selectedChapter}:${verse.verseNum} and its meaning`
 
-    // Dispatch event to open floating chat with the pre-filled message
+    // Small delay to allow full-screen exit animation to complete
-    window.dispatchEvent(new CustomEvent('floating-chat:open', {
+    setTimeout(() => {
-      detail: {
+      // Dispatch event to open floating chat with the pre-filled message
-        initialMessage: initialMessage,
+      window.dispatchEvent(new CustomEvent('floating-chat:open', {
-        fullscreen: false
+        detail: {
-      }
+          initialMessage: initialMessage,
-    }))
+          fullscreen: false
+        }
+      }))
+    }, 200)
   }
 
   const getThemeStyles = () => {
@@ -796,31 +804,67 @@ export default function BibleReaderNew() {
           </Typography>
         </Box>
 
-        {!preferences.readingMode && (
+        <Box
-          <Box className="verse-actions" sx={{ opacity: 0.3, transition: 'opacity 0.2s', display: 'flex', gap: 0.5 }}>
+          className="verse-actions"
-            <IconButton
+          sx={{
-              size="small"
+            opacity: preferences.readingMode ? 0.2 : 0.3,
-              onClick={() => handleVerseBookmark(verse)}
+            transition: 'opacity 0.2s',
-              sx={{ color: isBookmarked ? 'warning.main' : 'action.active' }}
+            display: 'flex',
-            >
+            gap: 0.5,
-              {isBookmarked ? <Bookmark fontSize="small" /> : <BookmarkBorder fontSize="small" />}
+            '&:hover': {
-            </IconButton>
+              opacity: 1
-            <IconButton
+            }
-              size="small"
+          }}
-              onClick={() => handleCopyVerse(verse)}
+        >
-              sx={{ color: 'action.active' }}
+          <IconButton
-            >
+            size="small"
-              <ContentCopy fontSize="small" />
+            onClick={() => handleVerseBookmark(verse)}
-            </IconButton>
+            sx={{
-            <IconButton
+              color: isBookmarked ? 'warning.main' : 'action.active',
-              size="small"
+              '&:hover': {
-              onClick={() => handleVerseChat(verse)}
+                backgroundColor: preferences.readingMode
-              sx={{ color: 'action.active' }}
+                  ? (preferences.theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' :
-            >
+                     preferences.theme === 'sepia' ? 'rgba(92, 75, 58, 0.1)' :
-              <Chat fontSize="small" />
+                     'rgba(0, 0, 0, 0.05)')
-            </IconButton>
+                  : 'action.hover'
-          </Box>
+              }
-        )}
+            }}
+          >
+            {isBookmarked ? <Bookmark fontSize="small" /> : <BookmarkBorder fontSize="small" />}
+          </IconButton>
+          <IconButton
+            size="small"
+            onClick={() => handleCopyVerse(verse)}
+            sx={{
+              color: 'action.active',
+              '&:hover': {
+                backgroundColor: preferences.readingMode
+                  ? (preferences.theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' :
+                     preferences.theme === 'sepia' ? 'rgba(92, 75, 58, 0.1)' :
+                     'rgba(0, 0, 0, 0.05)')
+                  : 'action.hover'
+              }
+            }}
+          >
+            <ContentCopy fontSize="small" />
+          </IconButton>
+          <IconButton
+            size="small"
+            onClick={() => handleVerseChat(verse)}
+            sx={{
+              color: 'action.active',
+              '&:hover': {
+                backgroundColor: preferences.readingMode
+                  ? (preferences.theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' :
+                     preferences.theme === 'sepia' ? 'rgba(92, 75, 58, 0.1)' :
+                     'rgba(0, 0, 0, 0.05)')
+                  : 'action.hover'
+              }
+            }}
+          >
+            <Chat fontSize="small" />
+          </IconButton>
+        </Box>
       </Box>
     )
   }
@@ -832,8 +876,17 @@ export default function BibleReaderNew() {
         mb: preferences.readingMode ? 1 : 2,
         p: preferences.readingMode ? 1 : 2,
         ...getThemeStyles(),
-        border: preferences.readingMode ? 'none' : `1px solid ${getThemeStyles().borderColor}`,
+        border: preferences.readingMode
-        backgroundColor: preferences.readingMode ? 'transparent' : getThemeStyles().backgroundColor,
+          ? `1px solid ${preferences.theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' :
+                           preferences.theme === 'sepia' ? 'rgba(92, 75, 58, 0.1)' :
+                           'rgba(0, 0, 0, 0.1)'}`
+          : `1px solid ${getThemeStyles().borderColor}`,
+        backgroundColor: preferences.readingMode
+          ? (preferences.theme === 'dark' ? 'rgba(26, 26, 26, 0.95)' :
+             preferences.theme === 'sepia' ? 'rgba(247, 243, 233, 0.95)' :
+             'rgba(255, 255, 255, 0.95)')
+          : getThemeStyles().backgroundColor,
+        backdropFilter: preferences.readingMode ? 'blur(8px)' : 'none',
         position: 'sticky',
         top: 0,
         zIndex: 1,