Offer background effects as a grid in the camera menu

- The camera menu's blur toggle becomes a Background effects section
  under the cameras: no effect, blur and the two shipped backgrounds as
  one radio choice of tiles, three across. It scrolls with the device
  list, so it stays reachable in a short call, and choosing keeps the
  menu open. The lobby gets it too, as both render the same footer.
- The footer's view model gives the options, the notice and the actions;
  the footer only names them.
- The tile is its own component, not a restyled Compound MenuItem. On
  desktop it is Radix's radio item, from the copy Compound uses, so the
  arrow keys walk the tiles with the device rows; a unit check fails if
  Compound ever resolves another copy. In the phone drawer, which is
  outside Radix, it is a plain menuitemradio button.
- Where the browser can't run effects the tiles are shown, disabled and
  explained by a notice the group is described by. No effect stays
  choosable and shows as in force. The notice is in the scrolling list,
  so a short call doesn't push the menu out of it.
- Section headings are raised, or the positioned tiles scroll over the
  one they sit under. Tiles clip with overflow: clip; with hidden they are
  scroll containers, which focus scrolls into view without their border.
- End to end on Chromium and Firefox: a shipped background chosen in the
  lobby shows in the preview, and None after Blur draws nothing, counted
  in WebGL draws (Blur: about 1400 a second on Chromium, 2300 on
  Firefox).
- The Quick Audio Menu's test of the camera menu keeps its name and now
  finds blur among the effects rather than as a toggle.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

src/components/MediaMuteAndSwitchButton.module.css

@@ -68,9 +68,11 @@ Please see LICENSE in the repository root for full details.
 }
 
 /* Sticky within its own section. Opaque and inset a border width so it doesn't
-   paint over the menu's outline. */
+   paint over the menu's outline; raised, or the positioned tiles scroll over
+   it. */
 .sectionHeading {
   position: sticky;
+  z-index: 1;
   inset-block-start: 0;
   background: var(--cpd-color-bg-canvas-default);
   margin-block-start: var(--cpd-border-width-1);
@@ -95,3 +97,21 @@ Please see LICENSE in the repository root for full details.
   outline: var(--cpd-border-width-2) solid var(--cpd-color-border-focused);
   outline-offset: calc(-1 * var(--cpd-border-width-2));
 }
+
+.notice {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--cpd-space-3x);
+  margin: var(--cpd-space-2x)
+    calc(var(--cpd-space-4x) - var(--cpd-border-width-1)) 0;
+  padding: var(--cpd-space-3x);
+  border-radius: var(--cpd-space-2x);
+  background: var(--cpd-color-bg-subtle-secondary);
+  color: var(--cpd-color-text-primary);
+  font: var(--cpd-font-body-md-regular);
+}
+
+.notice > svg {
+  flex-shrink: 0;
+  color: var(--cpd-color-icon-secondary);
+}