fix: glassmorphism sidebar background visibility + image upload cleanup

Glassmorphism: the sidebar is a flex sibling of the room view, so
backdrop-filter had nothing behind it to blur. Fix: apply the active
chat background to document.body when glassmorphismSidebar is on
(cleaned up when it's turned off or the component unmounts). Now the
sidebar blurs through the same background pattern as the room view,
making the frosted-glass effect obvious.

Image upload cleanup: delete the pre-uploaded original MXC from the
homeserver after the compressed version is successfully uploaded
(Synapse 1.97+ DELETE /_matrix/client/v1/media/{server}/{mediaId}).
Also delete on cancel when a successful upload is removed by the user.
Both are best-effort — failures are swallowed so UX is unaffected.
Added tryDeleteMxcContent() utility to src/app/utils/matrix.ts.

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

src/app/pages/client/SidebarNav.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Scroll } from 'folds';
 import classNames from 'classnames';
 
@@ -23,10 +23,42 @@ import {
 import { CreateTab } from './sidebar/CreateTab';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
+import { useTheme, ThemeKind } from '../../hooks/useTheme';
+import { getChatBg } from '../../features/lotus/chatBackground';
 
 export function SidebarNav() {
   const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const [glassmorphismSidebar] = useSetting(settingsAtom, 'glassmorphismSidebar');
+  const [chatBackground] = useSetting(settingsAtom, 'chatBackground');
+  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
+  const theme = useTheme();
+  const isDark = theme.kind === ThemeKind.Dark;
+
+  // backdrop-filter only blurs content directly behind the element in the z-axis.
+  // The sidebar is a flex sibling of the room view, so nothing sits behind it by default.
+  // Fix: mirror the active chat background onto document.body so the sidebar blurs through it.
+  useEffect(() => {
+    const { style } = document.body;
+    if (!glassmorphismSidebar) {
+      style.removeProperty('background-image');
+      style.removeProperty('background-color');
+      style.removeProperty('background-size');
+      style.removeProperty('background-position');
+      return;
+    }
+    const effectiveBg = lotusTerminal && chatBackground === 'none' ? 'tactical' : chatBackground;
+    const bgStyle = getChatBg(effectiveBg, isDark);
+    style.backgroundImage = (bgStyle.backgroundImage as string | undefined) ?? '';
+    style.backgroundColor = (bgStyle.backgroundColor as string | undefined) ?? '';
+    style.backgroundSize = (bgStyle.backgroundSize as string | undefined) ?? '';
+    style.backgroundPosition = (bgStyle.backgroundPosition as string | undefined) ?? '';
+    return () => {
+      style.removeProperty('background-image');
+      style.removeProperty('background-color');
+      style.removeProperty('background-size');
+      style.removeProperty('background-position');
+    };
+  }, [glassmorphismSidebar, chatBackground, lotusTerminal, isDark]);
 
   return (
     <Sidebar className={classNames(glassmorphismSidebar && SidebarGlass)}>