From fddd206cfee1245d5de166db3a49a1df634c0fa4 Mon Sep 17 00:00:00 2001
From: DevMando <codefilez@gmail.com>
Date: Fri, 17 Jul 2026 01:35:01 -0700
Subject: [PATCH] Add custom chat background image with live preview;
 reorganize Appearance page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Users can pick a background image shown behind the transcript in every tab,
with an opacity slider that fades only the image — text keeps full contrast.
The image is copied into local app data and served to the WebView through a
mandocode.userdata virtual host; image and opacity persist in ui-settings.json
and apply to open tabs live via the existing theme-script pipeline. The
Appearance page gains a preview card (theme colors + image + sample chat
lines) and is reorganized into Win11-style collapsible sections with current
values on the headers. Also guards the opacity handlers behind an
_appearanceReady flag: their XAML defaults fire during InitializeComponent
and previously saved default settings over the user's file at every launch.
---
 .../Controls/ChatTabView.xaml.cs              |  12 ++
 src/MandoCode.Desktop/MainWindow.xaml         | 107 +++++++++++++++---
 src/MandoCode.Desktop/MainWindow.xaml.cs      |  79 ++++++++++++-
 .../Services/ThemeManager.cs                  |  80 ++++++++++++-
 .../Services/TranscriptHtmlBuilder.cs         |  10 ++
 5 files changed, 268 insertions(+), 20 deletions(-)

diff --git a/src/MandoCode.Desktop/Controls/ChatTabView.xaml.cs b/src/MandoCode.Desktop/Controls/ChatTabView.xaml.cs
index c2c7fc8..345b8ea 100644
--- a/src/MandoCode.Desktop/Controls/ChatTabView.xaml.cs
+++ b/src/MandoCode.Desktop/Controls/ChatTabView.xaml.cs
@@ -218,6 +218,18 @@ public async Task InitializeAsync()
             }
             catch { }
 
+            // User-data host: serves the chat background image (see ThemeManager.SetChatBackground).
+            // Missing folder just means no background renders.
+            try
+            {
+                Directory.CreateDirectory(ThemeManager.UserDataFolder);
+                core.SetVirtualHostNameToFolderMapping(
+                    "mandocode.userdata",
+                    ThemeManager.UserDataFolder,
+                    Microsoft.Web.WebView2.Core.CoreWebView2HostResourceAccessKind.Allow);
+            }
+            catch { }
+
             core.NavigateToString(TranscriptHtmlBuilder.BaseDocument(ThemeManager.Current));
         }
         catch (Exception ex)
diff --git a/src/MandoCode.Desktop/MainWindow.xaml b/src/MandoCode.Desktop/MainWindow.xaml
index f51fcf5..469d52c 100644
--- a/src/MandoCode.Desktop/MainWindow.xaml
+++ b/src/MandoCode.Desktop/MainWindow.xaml
@@ -414,25 +414,28 @@
                     <StackPanel Spacing="4">
                         <TextBlock Text="Appearance" FontSize="22" FontWeight="SemiBold"
                                    Foreground="{StaticResource MandoAccentBrush}"/>
-                        <TextBlock Text="A property of the window, not per-agent. Themes restyle everything, transcripts included. Saved on this machine only; never touches the shared CLI config."
+                        <TextBlock Text="App-wide, not per-agent. Saved on this machine only; never touches the shared CLI config."
                                    Opacity="0.6" FontSize="12" TextWrapping="Wrap"/>
                     </StackPanel>
 
                     <ScrollViewer Grid.Row="1">
-                        <StackPanel Spacing="14" MaxWidth="680" HorizontalAlignment="Left" Padding="0,8,0,8">
-                            <Grid ColumnSpacing="12">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto"/>
-                                    <ColumnDefinition Width="Auto"/>
-                                </Grid.ColumnDefinitions>
-                                <Slider x:Name="S_WindowOpacity" Header="Window opacity" Minimum="30" Maximum="100"
-                                        Value="100" MinWidth="320" ValueChanged="WindowOpacity_Changed"
-                                        ToolTipService.ToolTip="Makes the whole window translucent so you can see what's behind it. 100% = solid (default). Purely visual — never affects the model."/>
-                                <TextBlock x:Name="S_WindowOpacityLabel" Grid.Column="1" Text="100%"
-                                           VerticalAlignment="Bottom" Margin="0,0,0,8" Opacity="0.7"
-                                           FontSize="13" MinWidth="44"/>
-                            </Grid>
-                            <ListView x:Name="ThemeList" SelectionMode="Single" SelectionChanged="ThemeList_SelectionChanged">
+                        <StackPanel Spacing="8" MaxWidth="680" HorizontalAlignment="Left" Padding="0,8,0,8">
+                            <!-- Win11-Settings style: one collapsible card per setting, with the
+                                 current value on the header so the collapsed page reads at a glance. -->
+                            <Expander MinWidth="640"
+                                      HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
+                                <Expander.Header>
+                                    <StackPanel Orientation="Horizontal" Spacing="10" Padding="0,14">
+                                        <FontIcon Glyph="&#xE790;" FontSize="16"/>
+                                        <TextBlock Text="Theme" FontWeight="SemiBold"/>
+                                        <TextBlock x:Name="ThemeHeaderValue" Opacity="0.6" FontSize="13"
+                                                   VerticalAlignment="Center"/>
+                                    </StackPanel>
+                                </Expander.Header>
+                                <StackPanel Spacing="4">
+                                <TextBlock Text="Themes restyle everything, transcripts included."
+                                           Opacity="0.6" FontSize="12" TextWrapping="Wrap"/>
+                                <ListView x:Name="ThemeList" SelectionMode="Single" SelectionChanged="ThemeList_SelectionChanged">
                                 <ListView.ItemTemplate>
                                     <DataTemplate x:DataType="local:ThemeVm">
                                         <Border Background="{x:Bind BgBrush}" BorderBrush="{x:Bind EdgeBrush}"
@@ -458,6 +461,80 @@
                                     </DataTemplate>
                                 </ListView.ItemTemplate>
                             </ListView>
+                                </StackPanel>
+                            </Expander>
+
+                            <Expander MinWidth="640"
+                                      HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
+                                <Expander.Header>
+                                    <StackPanel Orientation="Horizontal" Spacing="10" Padding="0,14">
+                                        <FontIcon Glyph="&#xE8B9;" FontSize="16"/>
+                                        <TextBlock Text="Chat background" FontWeight="SemiBold"/>
+                                        <TextBlock x:Name="BgFileLabel" Text="No image set" Opacity="0.6"
+                                                   FontSize="13" VerticalAlignment="Center"/>
+                                    </StackPanel>
+                                </Expander.Header>
+                                <StackPanel Spacing="10">
+                                    <TextBlock Text="Shown behind the conversation in every agent tab. The slider fades the image only — text always stays fully readable."
+                                               Opacity="0.6" FontSize="12" TextWrapping="Wrap"/>
+
+                                    <!-- Live preview: theme background + the image at slider opacity,
+                                         with sample chat lines on top to judge readability. -->
+                                    <Border Height="120" CornerRadius="8"
+                                            BorderBrush="{StaticResource MandoBorderBrush}" BorderThickness="1"
+                                            Background="{StaticResource MandoBackgroundBrush}">
+                                        <Grid>
+                                            <Image x:Name="BgPreviewImage" Stretch="UniformToFill" Opacity="0.3"/>
+                                            <StackPanel Padding="14,0" Spacing="2" VerticalAlignment="Center">
+                                                <TextBlock Text="&gt; how does this look?"
+                                                           Foreground="{StaticResource MandoGoldBrush}"
+                                                           FontWeight="SemiBold" FontSize="13"/>
+                                                <TextBlock Text="MandoCode"
+                                                           Foreground="{StaticResource MandoGreenBrush}"
+                                                           FontWeight="Bold" FontSize="12"/>
+                                                <TextBlock Text="Like this — the image fades, the text never does."
+                                                           Foreground="{StaticResource MandoTextBrush}" FontSize="13"/>
+                                            </StackPanel>
+                                        </Grid>
+                                    </Border>
+
+                                    <StackPanel Orientation="Horizontal" Spacing="8">
+                                        <Button x:Name="BgChooseButton" Content="Choose image…" Click="BgChoose_Click"/>
+                                        <Button x:Name="BgClearButton" Content="Remove" Click="BgClear_Click"/>
+                                    </StackPanel>
+                                    <Grid ColumnSpacing="12">
+                                        <Grid.ColumnDefinitions>
+                                            <ColumnDefinition Width="Auto"/>
+                                            <ColumnDefinition Width="Auto"/>
+                                        </Grid.ColumnDefinitions>
+                                        <Slider x:Name="S_BgOpacity" Header="Image opacity" Minimum="5" Maximum="100"
+                                                Value="30" MinWidth="320" ValueChanged="BgOpacity_Changed"
+                                                ToolTipService.ToolTip="How strongly the image shows through. Lower it if text gets hard to read — the text itself never fades."/>
+                                        <TextBlock x:Name="S_BgOpacityLabel" Grid.Column="1" Text="30%"
+                                                   VerticalAlignment="Bottom" Margin="0,0,0,8" Opacity="0.7"
+                                                   FontSize="13" MinWidth="44"/>
+                                    </Grid>
+                                </StackPanel>
+                            </Expander>
+
+                            <Expander MinWidth="640"
+                                      HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
+                                <Expander.Header>
+                                    <StackPanel Orientation="Horizontal" Spacing="10" Padding="0,14">
+                                        <FontIcon Glyph="&#xE706;" FontSize="16"/>
+                                        <TextBlock Text="Window opacity" FontWeight="SemiBold"/>
+                                        <TextBlock x:Name="S_WindowOpacityLabel" Text="100%" Opacity="0.6"
+                                                   FontSize="13" VerticalAlignment="Center"/>
+                                    </StackPanel>
+                                </Expander.Header>
+                                <StackPanel Spacing="4">
+                                    <TextBlock Text="Makes the whole window translucent so you can see what's behind it. 100% = solid (default). Purely visual — never affects the model."
+                                               Opacity="0.6" FontSize="12" TextWrapping="Wrap"/>
+                                    <Slider x:Name="S_WindowOpacity" Minimum="30" Maximum="100" Value="100"
+                                            MinWidth="320" HorizontalAlignment="Left"
+                                            ValueChanged="WindowOpacity_Changed"/>
+                                </StackPanel>
+                            </Expander>
                         </StackPanel>
                     </ScrollViewer>
                 </Grid>
diff --git a/src/MandoCode.Desktop/MainWindow.xaml.cs b/src/MandoCode.Desktop/MainWindow.xaml.cs
index fb06934..f2dbe1a 100644
--- a/src/MandoCode.Desktop/MainWindow.xaml.cs
+++ b/src/MandoCode.Desktop/MainWindow.xaml.cs
@@ -12,6 +12,7 @@
 using Microsoft.UI.Xaml.Input;
 using Microsoft.UI.Xaml.Media;
 using Microsoft.UI.Xaml.Media.Animation;
+using Microsoft.UI.Xaml.Media.Imaging;
 using Microsoft.UI.Xaml.Shapes;
 using Windows.ApplicationModel.DataTransfer;
 using Windows.System;
@@ -152,9 +153,15 @@ public MainWindow()
         ThemeManager.ThemeChanged += () => OnUi(ApplyThemeToAllTabs);
         SettingsTabs.SelectedItem = Tab_Model;   // the setup that matters most opens first
         ThemeList.ItemsSource = UiTheme.All.Select(t => new ThemeVm { Theme = t }).ToList();
+        ThemeHeaderValue.Text = ThemeManager.Current.Name;
         ModelCombo.Loaded += (_, _) => ApplyModelComboTarget();
         S_WindowOpacity.Value = ThemeManager.WindowOpacity * 100;
+        S_WindowOpacityLabel.Text = $"{(int)S_WindowOpacity.Value}%";
         ApplyWindowOpacity(ThemeManager.WindowOpacity);
+        S_BgOpacity.Value = ThemeManager.ChatBackgroundOpacity * 100;
+        S_BgOpacityLabel.Text = $"{(int)S_BgOpacity.Value}%";
+        UpdateBgControls();
+        _appearanceReady = true;   // opacity handlers may persist from here on
 
         _dispatcher = Microsoft.UI.Dispatching.DispatcherQueue.GetForCurrentThread();
 
@@ -836,17 +843,80 @@ private void SettingsTabs_SelectionChanged(SelectorBar sender, SelectorBarSelect
         // "Make Default for New Agents" always applies.
     }
 
+    /// <summary>False until the constructor has loaded persisted appearance settings into the
+    /// sliders. The sliders' XAML default Values fire ValueChanged during InitializeComponent —
+    /// BEFORE ThemeManager.Initialize reads ui-settings.json — and a Save() in that window
+    /// overwrites the file with defaults (that bug ate users' saved background image).</summary>
+    private bool _appearanceReady;
+
     private void WindowOpacity_Changed(object sender, Microsoft.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)
     {
-        // The slider's XAML Value fires this during InitializeComponent, before the
-        // label (declared after it) exists — nothing to update yet, the constructor
-        // applies the persisted opacity right after the tree is built.
-        if (S_WindowOpacityLabel is null) return;
+        if (!_appearanceReady) return;
         S_WindowOpacityLabel.Text = $"{(int)e.NewValue}%";
         ThemeManager.SetWindowOpacity(e.NewValue / 100.0);
         ApplyWindowOpacity(ThemeManager.WindowOpacity);
     }
 
+    // ============================================================
+    // Chat background image (Appearance page)
+    // ============================================================
+
+    private async void BgChoose_Click(object sender, RoutedEventArgs e)
+    {
+        var picker = new Windows.Storage.Pickers.FileOpenPicker();
+        // Desktop apps must marry the picker to an HWND before use.
+        WinRT.Interop.InitializeWithWindow.Initialize(picker, WinRT.Interop.WindowNative.GetWindowHandle(this));
+        foreach (var ext in new[] { ".png", ".jpg", ".jpeg", ".gif", ".webp", ".bmp" })
+            picker.FileTypeFilter.Add(ext);
+
+        var file = await picker.PickSingleFileAsync();
+        if (file == null) return;
+
+        ThemeManager.SetChatBackground(file.Path);
+        UpdateBgControls();
+        ApplyThemeToAllTabs();
+    }
+
+    private void BgClear_Click(object sender, RoutedEventArgs e)
+    {
+        ThemeManager.SetChatBackground(null);
+        UpdateBgControls();
+        ApplyThemeToAllTabs();
+    }
+
+    private void BgOpacity_Changed(object sender, Microsoft.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)
+    {
+        if (!_appearanceReady) return;   // see _appearanceReady — a Save() here wipes settings
+        S_BgOpacityLabel.Text = $"{(int)e.NewValue}%";
+        BgPreviewImage.Opacity = e.NewValue / 100.0;
+        ThemeManager.SetChatBackgroundOpacity(e.NewValue / 100.0);
+        ApplyThemeToAllTabs();   // live preview while dragging — the script is tiny
+    }
+
+    private void UpdateBgControls()
+    {
+        var hasImage = ThemeManager.ChatBackgroundFile != null;
+        BgFileLabel.Text = hasImage ? "Image set ✓" : "No image set";
+        BgClearButton.IsEnabled = hasImage;
+        S_BgOpacity.IsEnabled = hasImage;
+        BgPreviewImage.Opacity = ThemeManager.ChatBackgroundOpacity;
+
+        // Decode from bytes, not from the file URI — a URI-sourced BitmapImage keeps the
+        // file open, and SetChatBackground must be able to overwrite it on the next pick.
+        BitmapImage? bmp = null;
+        if (hasImage)
+        {
+            try
+            {
+                using var ms = new MemoryStream(File.ReadAllBytes(ThemeManager.ChatBackgroundFile!));
+                bmp = new BitmapImage();
+                bmp.SetSource(ms.AsRandomAccessStream());
+            }
+            catch { bmp = null; /* unreadable image — preview just shows the theme colors */ }
+        }
+        BgPreviewImage.Source = bmp;
+    }
+
     // WinUI has no Window.Opacity — whole-window translucency is a Win32 layered-window
     // attribute on the HWND. At 100% the layered style is removed entirely so the
     // compositor does no extra work for the default solid window.
@@ -880,6 +950,7 @@ private void ThemeList_SelectionChanged(object sender, SelectionChangedEventArgs
     {
         if (_loadingSettings || ThemeList.SelectedItem is not ThemeVm vm) return;
         ThemeManager.Apply(vm.Theme, Root);
+        ThemeHeaderValue.Text = vm.Theme.Name;
         SettingsStatus.Text = $"Theme set to {vm.Theme.Name}.";
     }
 
diff --git a/src/MandoCode.Desktop/Services/ThemeManager.cs b/src/MandoCode.Desktop/Services/ThemeManager.cs
index ae9ee3c..aaba31b 100644
--- a/src/MandoCode.Desktop/Services/ThemeManager.cs
+++ b/src/MandoCode.Desktop/Services/ThemeManager.cs
@@ -168,6 +168,15 @@ public static class ThemeManager
     /// it via the Win32 layered-window alpha; this just owns the value and persistence.</summary>
     public static double WindowOpacity { get; private set; } = 1.0;
 
+    /// <summary>Full path of the chat background image, or null when none is set. The picked
+    /// file is COPIED into <see cref="UserDataFolder"/> (as chat-bg.&lt;ext&gt;) so the setting
+    /// survives the original moving; transcripts load it via the mandocode.userdata host.</summary>
+    public static string? ChatBackgroundFile { get; private set; }
+
+    /// <summary>Opacity of the chat background image layer only (0.05–1.0). Text never
+    /// fades — the slider dims the picture, not the conversation.</summary>
+    public static double ChatBackgroundOpacity { get; private set; } = 0.30;
+
     /// <summary>Raised after a theme is applied so the window can retheme the WebView.</summary>
     public static event Action? ThemeChanged;
 
@@ -177,6 +186,10 @@ public static class ThemeManager
         Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData),
         "MandoCode.Desktop", "ui-settings.json");
 
+    /// <summary>Folder each tab's WebView2 serves as https://mandocode.userdata/ — holds the
+    /// copied chat background image (and the settings file itself, which is never requested).</summary>
+    public static string UserDataFolder => Path.GetDirectoryName(SettingsPath)!;
+
     /// <summary>Loads the saved theme (or the default) and applies it. Call once from
     /// the window constructor, before first render.</summary>
     public static void Initialize(FrameworkElement root)
@@ -188,6 +201,12 @@ public static void Initialize(FrameworkElement root)
                 var saved = JsonSerializer.Deserialize<UiSettings>(File.ReadAllText(SettingsPath));
                 Current = UiTheme.All.FirstOrDefault(t => t.Name == saved?.Theme) ?? Current;
                 if (saved?.Opacity is > 0) WindowOpacity = Math.Clamp(saved.Opacity, 0.3, 1.0);
+                if (saved?.ChatBgOpacity is > 0) ChatBackgroundOpacity = Math.Clamp(saved.ChatBgOpacity, 0.05, 1.0);
+                if (!string.IsNullOrEmpty(saved?.ChatBackground))
+                {
+                    var bg = Path.Combine(UserDataFolder, saved.ChatBackground);
+                    if (File.Exists(bg)) ChatBackgroundFile = bg;
+                }
             }
         }
         catch { /* unreadable settings file — fall back to the defaults */ }
@@ -209,13 +228,68 @@ public static void SetWindowOpacity(double value)
         Save();
     }
 
+    /// <summary>Copies the picked image into <see cref="UserDataFolder"/> and remembers it,
+    /// or clears the background when <paramref name="sourcePath"/> is null. The caller
+    /// re-scripts open transcripts (MainWindow.ApplyThemeToAllTabs).</summary>
+    public static void SetChatBackground(string? sourcePath)
+    {
+        try
+        {
+            if (Directory.Exists(UserDataFolder))
+                foreach (var old in Directory.GetFiles(UserDataFolder, "chat-bg.*"))
+                    File.Delete(old);
+        }
+        catch { /* an open WebView may briefly hold the old file — stale copies are harmless */ }
+
+        ChatBackgroundFile = null;
+        if (sourcePath != null)
+        {
+            try
+            {
+                Directory.CreateDirectory(UserDataFolder);
+                var dest = Path.Combine(UserDataFolder,
+                    "chat-bg" + Path.GetExtension(sourcePath).ToLowerInvariant());
+                File.Copy(sourcePath, dest, overwrite: true);
+                ChatBackgroundFile = dest;
+            }
+            catch { /* unreadable source — behave as if cleared */ }
+        }
+        Save();
+    }
+
+    public static void SetChatBackgroundOpacity(double value)
+    {
+        ChatBackgroundOpacity = Math.Clamp(value, 0.05, 1.0);
+        Save();
+    }
+
+    /// <summary>CSS value for the transcript's --chat-bg-image variable: a cache-busted
+    /// virtual-host URL, or 'none' when no background is set.</summary>
+    public static string ChatBackgroundCssValue()
+    {
+        if (ChatBackgroundFile == null || !File.Exists(ChatBackgroundFile)) return "none";
+        var v = File.GetLastWriteTimeUtc(ChatBackgroundFile).Ticks;
+        return $"url(\"https://mandocode.userdata/{Path.GetFileName(ChatBackgroundFile)}?v={v}\")";
+    }
+
+    /// <summary>Invariant-culture string for --chat-bg-opacity (a comma decimal would be
+    /// silently invalid CSS on some locales).</summary>
+    public static string ChatBackgroundOpacityCss() =>
+        ChatBackgroundOpacity.ToString("0.###", System.Globalization.CultureInfo.InvariantCulture);
+
     private static void Save()
     {
         try
         {
             Directory.CreateDirectory(Path.GetDirectoryName(SettingsPath)!);
             File.WriteAllText(SettingsPath, JsonSerializer.Serialize(
-                new UiSettings { Theme = Current.Name, Opacity = WindowOpacity }));
+                new UiSettings
+                {
+                    Theme = Current.Name,
+                    Opacity = WindowOpacity,
+                    ChatBackground = ChatBackgroundFile == null ? null : Path.GetFileName(ChatBackgroundFile),
+                    ChatBgOpacity = ChatBackgroundOpacity,
+                }));
         }
         catch { /* persistence is best-effort; the setting is still applied */ }
     }
@@ -275,6 +349,8 @@ public static string BuildTranscriptScript(UiTheme t) =>
         $"s.setProperty('--panel','{t.Panel}');" +
         $"s.setProperty('--border','{t.Border}');" +
         $"s.setProperty('--diffadd','{t.DiffAdd}');" +
+        $"s.setProperty('--chat-bg-image','{ChatBackgroundCssValue()}');" +
+        $"s.setProperty('--chat-bg-opacity','{ChatBackgroundOpacityCss()}');" +
         "})();";
 
     private static void SetBrush(ResourceDictionary res, string key, string hex) =>
@@ -299,5 +375,7 @@ private sealed class UiSettings
     {
         public string? Theme { get; set; }
         public double Opacity { get; set; } = 1.0;
+        public string? ChatBackground { get; set; }      // file name inside UserDataFolder
+        public double ChatBgOpacity { get; set; } = 0.30;
     }
 }
diff --git a/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs b/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs
index 6afa56b..1443c0d 100644
--- a/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs
+++ b/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs
@@ -263,6 +263,8 @@ public static string BaseDocument(UiTheme theme) => $$"""
     --panel: {{theme.Panel}};
     --border: {{theme.Border}};
     --diffadd: {{theme.DiffAdd}};
+    --chat-bg-image: {{ThemeManager.ChatBackgroundCssValue()}};
+    --chat-bg-opacity: {{ThemeManager.ChatBackgroundOpacityCss()}};
   }
   * { box-sizing: border-box; }
   body {
@@ -270,6 +272,13 @@ public static string BaseDocument(UiTheme theme) => $$"""
     font-family: "Segoe UI", sans-serif; font-size: 14px;
     margin: 0; padding: 14px 18px 24px 18px; line-height: 1.5;
   }
+  /* User-chosen chat background: a fixed full-bleed layer painted behind the log.
+     Only THIS layer fades with the appearance slider — text keeps full contrast,
+     and panels/code blocks keep their opaque theme backgrounds on top of it. */
+  #bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
+    background-image: var(--chat-bg-image); background-size: cover;
+    background-position: center; background-repeat: no-repeat;
+    opacity: var(--chat-bg-opacity); }
   #log > * { margin-bottom: 8px; animation: rise 0.18s ease-out; }
   @keyframes rise {
     from { opacity: 0; transform: translateY(4px); }
@@ -474,6 +483,7 @@ the run is active and collapses once a non-operation block lands after it. */
 </style>
 </head>
 <body>
+<div id="bg"></div>
 <div id="log"></div>
 <script>
   const log = document.getElementById('log');