Fix media viewer chrome to match the approved Noo design

The viewer's top/bottom bars still used the pre-rework
FrostedGlassContainer verbatim: a floating inset pill with a Material
colorScheme tint, an outline border and a drop shadow (violating the
design system's no-shadow rule), and theme-derived icon colors that
went near-invisible against the new dark panel in light mode. The
video transport controls were a second, separate floating pill above
the action bar instead of one continuous panel.

- FrostedGlassContainer: drop the shadow/border/ColorScheme tint for a
  fixed dark translucent fill matching the approved design canvas: no
  shadow anywhere in this screen now.
- file_viewer_screen.dart: top/bottom bars sit flush edge-to-edge
  (no floating-pill inset) with a gradient scrim behind each, and use
  fixed white (not theme-derived) text/icon color, since this chrome
  always sits over a black media stage regardless of app theme.
- ViewerIconButton: same fix - fixed white by default instead of
  colors.fg1.
- MediaActionBar: takes an optional transportControls slot so video's
  transport row renders inside the same panel as the action row,
  above a thin divider, instead of as a separate floating pill.
- MediaVideoPreview: renders only the video surface now; reports its
  controller up via onController (only when active, so a neighboring
  PageView page can't steal the transport row) instead of owning a
  floating panel. VideoTransportControls is the extracted, chrome-less
  transport row content, rendered by the parent via MediaActionBar's
  new slot.

Verified live on device: photo and video viewing, favorite/delete
coloring, and the merged transport+action panel all match the
approved canvas (https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

lib/widgets/frosted_glass_container.dart

@@ -1,9 +1,15 @@
 import 'dart:ui';
 import 'package:flutter/material.dart';
 
-/// The frosted-glass pill background shared by all floating chrome in the
-/// app (bottom nav bar, media viewer action bar): blurred backdrop, a
-/// translucent tonal fill, a faint outline, and a soft drop shadow.
+/// The blurred/translucent chrome for the media viewer's overlay bars
+/// (`file_viewer_screen.dart`'s top bar, `MediaActionBar`, the video
+/// transport row) - the one deliberate exception to the design system's
+/// flat, no-shadow product UI (DESIGN_SYSTEM.md 1.4), since this chrome
+/// floats over photo/video content rather than over the app's own
+/// surfaces. No shadow, no outline, no `ColorScheme` tint: a fixed dark
+/// translucent fill (`color`) that reads correctly over any media,
+/// regardless of the app's light/dark theme - matching the canvas at
+/// https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4.
 class FrostedGlassContainer extends StatelessWidget {
   final Widget child;
   final double borderRadius;
@@ -17,39 +23,31 @@ class FrostedGlassContainer extends StatelessWidget {
   /// adjustable.
   final double opacity;
 
+  /// The tint under the blur. Defaults to the design's fixed dark tone
+  /// (`#141311`, the spec's `fg-1` dark value) - deliberately not a
+  /// `ColorScheme`/`NooColors` lookup, since this chrome always sits over a
+  /// black media stage, not over a themed surface.
+  final Color color;
+
   const FrostedGlassContainer({
     super.key,
     required this.child,
-    this.borderRadius = 32,
-    this.blurSigma = 28,
+    this.borderRadius = 0,
+    this.blurSigma = 20,
     this.opacity = 0.55,
+    this.color = const Color(0xFF141311),
   });
 
   @override
   Widget build(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
-
     return ClipRRect(
       borderRadius: BorderRadius.circular(borderRadius),
       child: BackdropFilter(
         filter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
         child: Container(
           decoration: BoxDecoration(
-            color: colorScheme.surfaceContainerHighest.withValues(
-              alpha: opacity,
-            ),
+            color: color.withValues(alpha: opacity),
             borderRadius: BorderRadius.circular(borderRadius),
-            border: Border.all(
-              color: colorScheme.outlineVariant.withValues(alpha: 0.35),
-              width: 1,
-            ),
-            boxShadow: [
-              BoxShadow(
-                color: Colors.black.withValues(alpha: 0.14),
-                blurRadius: 24,
-                offset: const Offset(0, 8),
-              ),
-            ],
           ),
           child: child,
         ),