feat: Add weather foreground option (experimental)

- Add weatherEffectsForeground setting to render weather effects in front of chat
- Add UI toggle in main panel (visible when Dynamic Weather toggle is visible)
- Apply z-index 9998 when foreground option is enabled
- Fix weather container sizing with viewport units (100vh/100dvh) for better mobile support

src/core/state.js

@@ -35,6 +35,7 @@ export let extensionSettings = {
     customSpotifyPrompt: '', // Custom Spotify prompt text (empty = use default)
 
     enableDynamicWeather: true, // Enable dynamic weather effects based on Info Box weather field (v2: enabled by default)
+    weatherEffectsForeground: false, // Experimental: render weather effects in foreground (on top of chat)
     dismissedHolidayPromo: false, // User dismissed the holiday promotion banner
     showHtmlToggle: true, // Show Immersive HTML toggle in main panel
     showDialogueColoringToggle: true, // Show Dialogue Coloring toggle in main panel (enabled by default)

src/systems/ui/theme.js

@@ -143,6 +143,7 @@ export function updateFeatureTogglesVisibility() {
     const $spotifyToggle = $('#rpg-spotify-toggle-wrapper');
 
     const $dynamicWeatherToggle = $('#rpg-dynamic-weather-toggle-wrapper');
+    const $weatherForegroundToggle = $('#rpg-weather-foreground-toggle-wrapper');
     const $narratorToggle = $('#rpg-narrator-toggle-wrapper');
     const $autoAvatarsToggle = $('#rpg-auto-avatars-toggle-wrapper');
 
@@ -154,6 +155,8 @@ export function updateFeatureTogglesVisibility() {
     $spotifyToggle.toggle(extensionSettings.showSpotifyToggle);
 
     $dynamicWeatherToggle.toggle(extensionSettings.showDynamicWeatherToggle);
+    // Weather foreground toggle is only shown when dynamic weather toggle is visible
+    $weatherForegroundToggle.toggle(extensionSettings.showDynamicWeatherToggle);
     $narratorToggle.toggle(extensionSettings.showNarratorMode);
     $autoAvatarsToggle.toggle(extensionSettings.showAutoAvatars);
 

src/systems/ui/weatherEffects.js

@@ -270,6 +270,11 @@ export function updateWeatherEffect() {
     }
 
     if (weatherContainer) {
+        // Apply foreground z-index if experimental setting is enabled
+        if (extensionSettings.weatherEffectsForeground) {
+            weatherContainer.style.zIndex = '9998';
+        }
+
         document.body.appendChild(weatherContainer);
     }
 }