Bob AI: Add a lofi music player/audio element that plays background

Merge version_1 into main

src/app/layout.tsx

@@ -110,9 +110,97 @@ export default function RootLayout({
     '  pointer-events: none !important;' +
     '  z-index: 999998 !important;' +
     '  transition: all 0.15s ease !important;' +
+    '}' +
+    '.lofi-music-toggle {' +
+    '  position: fixed !important;' +
+    '  bottom: 30px !important;' +
+    '  right: 30px !important;' +
+    '  z-index: 999997 !important;' +
+    '  width: 56px !important;' +
+    '  height: 56px !important;' +
+    '  border-radius: 50% !important;' +
+    '  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;' +
+    '  border: none !important;' +
+    '  color: white !important;' +
+    '  font-size: 24px !important;' +
+    '  cursor: pointer !important;' +
+    '  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;' +
+    '  transition: all 0.3s ease !important;' +
+    '  display: flex !important;' +
+    '  align-items: center !important;' +
+    '  justify-content: center !important;' +
+    '}' +
+    '.lofi-music-toggle:hover {' +
+    '  transform: scale(1.1) !important;' +
+    '  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6) !important;' +
+    '}' +
+    '.lofi-music-toggle.playing {' +
+    '  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;' +
     '}';
   document.head.appendChild(style);
   
+  // Initialize lofi music player
+  const initLofiMusicPlayer = () => {
+    // Create audio element
+    const audioElement = document.createElement('audio');
+    audioElement.id = 'lofi-music-player';
+    audioElement.loop = true;
+    audioElement.volume = 0.3;
+    
+    // Use a free lofi music source (YouTube Audio Library or similar)
+    // Using a direct link to a lofi music track
+    audioElement.src = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
+    
+    document.body.appendChild(audioElement);
+    
+    // Create toggle button
+    const toggleButton = document.createElement('button');
+    toggleButton.className = 'lofi-music-toggle';
+    toggleButton.innerHTML = '🎵';
+    toggleButton.setAttribute('aria-label', 'Toggle lofi music');
+    toggleButton.setAttribute('title', 'Toggle background music');
+    
+    let isPlaying = false;
+    
+    toggleButton.addEventListener('click', () => {
+      if (isPlaying) {
+        audioElement.pause();
+        toggleButton.classList.remove('playing');
+        isPlaying = false;
+      } else {
+        audioElement.play().catch(err => console.log('Autoplay prevented:', err));
+        toggleButton.classList.add('playing');
+        isPlaying = true;
+      }
+    });
+    
+    document.body.appendChild(toggleButton);
+    
+    // Attempt autoplay (muted for browser compliance)
+    audioElement.muted = true;
+    audioElement.play().catch(err => console.log('Autoplay prevented:', err));
+    
+    // Unmute after user interaction
+    const unmuteOnInteraction = () => {
+      audioElement.muted = false;
+      audioElement.play().catch(err => console.log('Autoplay prevented:', err));
+      toggleButton.classList.add('playing');
+      isPlaying = true;
+      document.removeEventListener('click', unmuteOnInteraction);
+      document.removeEventListener('touchstart', unmuteOnInteraction);
+    };
+    
+    document.addEventListener('click', unmuteOnInteraction);
+    document.addEventListener('touchstart', unmuteOnInteraction);
+  };
+  
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initLofiMusicPlayer);
+  } else {
+    initLofiMusicPlayer();
+  }
+  
   const getUniqueSelector = (element, assignId = false) => {
     if (element.dataset && element.dataset.webildSelector) {
       return element.dataset.webildSelector;