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/viewer/viewer_icon_button.dart

@@ -1,21 +1,22 @@
 import 'package:flutter/material.dart';
-import '../../theme/design_tokens.dart';
 
 /// Icon-only action button for the media viewer's floating chrome (top bar,
 /// bottom action bar, video transport controls) - a fixed 22px icon in a
-/// round hit box, colored from [NooColors] rather than Material's
-/// [ColorScheme]. Kept as one small widget (matching the pre-rework
-/// `_ActionIconButton` it replaces - see `styling.md`) so every floating
-/// control in this screen looks the same instead of drifting apart across
-/// the three call sites that need one.
+/// round hit box. Colored white by default, not from [NooColors]/
+/// [ColorScheme]: this chrome always sits on the dark translucent panel
+/// over a black media stage (see `FrostedGlassContainer`'s doc comment),
+/// regardless of the app's light/dark theme, so a theme-derived color would
+/// go near-invisible in light mode. Kept as one small widget so every
+/// floating control in this screen looks the same instead of drifting
+/// apart across the three call sites that need one.
 class ViewerIconButton extends StatelessWidget {
   final IconData icon;
   final String tooltip;
   final VoidCallback? onTap;
 
-  /// Overrides the default `fg-1` (e.g. `danger` for delete). Ignored while
-  /// [onTap] is null - a disabled button always dims to the same faded fg-1
-  /// regardless of its normal color.
+  /// Overrides the default white (e.g. `danger` for delete, `accent-text`
+  /// for a favorited state). Ignored while [onTap] is null - a disabled
+  /// button always dims to faded white regardless of its normal color.
   final Color? color;
 
   const ViewerIconButton({
@@ -28,10 +29,9 @@ class ViewerIconButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final colors = context.nooColors;
     final fg = onTap == null
-        ? colors.fg1.withValues(alpha: 0.4)
-        : (color ?? colors.fg1);
+        ? Colors.white.withValues(alpha: 0.4)
+        : (color ?? Colors.white);
 
     return Tooltip(
       message: tooltip,