Player: quick chat box, danmaku notifications, the player panel, smooth subtitle lift

- Quick chat (Enter in the full player, whatever plays): a box at the
  bottom centre in the control bar's place, compact and widening with
  the text, sharing its draft with the chat panel; Enter sends, Esc or an
  empty Enter closes, it closes by itself after 8 s without typing (the
  draft stays). Keys go to it; the Enter that opened it no longer reaches
  a focused button. Typing never shows the cursor or the controls: the
  frame wakes only on real mouse movement and holds the controls hidden
  while the box or its echo is up. Your sent line shows as an echo (or
  flies as your own danmaku line); your own chat toast is not repeated.
- Subtitle lift: always for the box, for the control bar as a setting
  (off); 4 eased-out sub-pos steps 42 ms apart instead of one per frame.
- Notifications: Toasts / Danmaku (off by default): chat and short notices
  fly over the full player, problems stay toasts; every knob of the look
  plus boldness, persisted, with a live preview strip in Settings.
- Player panel: ⚙ → Player settings docks a foldable glass panel at the
  right (tracks, subtitle size and lift, picture, volume, notifications,
  controls) in place of the card; Esc closes it.
- Danmaku preview: the mock dialogue follows the lift; the stand-in page
  has the chat box too.

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

apps/desktop/lib/src/danmaku/danmaku.dart

@@ -11,7 +11,9 @@ import '../shell/avatar.dart' show AvatarInfo, StatusAvatar;
 // two ever touch), at most [DanmakuStyle.maxOnScreen] fly at once and the
 // rest wait their turn; every line crosses in the same time, so a long
 // one moves faster. The clock is the layer's own: lines keep flying while
-// the video is paused. Dev preview for now (DEVELOPMENT.md "Dev tools").
+// the video is paused. The session's notifications use it when the user
+// picks "Notifications as danmaku" (`danmaku_notices.dart`); the dev
+// preview tries it out (DEVELOPMENT.md "Dev tools").
 
 /// What a line is: a chat message or a short notice.
 enum DanmakuKind { chat, join, leave, upNext, starting }
@@ -32,7 +34,9 @@ class DanmakuItem {
       {required this.kind, required this.text, this.sender, this.senderColor, this.own = false, this.avatar});
 }
 
-/// How lines look and move.
+/// How lines look and move. Persisted as [toJson] (Settings →
+/// Notifications & sounds); [DanmakuStyle.fromJson] clamps every value to
+/// its range ([limits]), so a hand-edited or older box never breaks it.
 @immutable
 class DanmakuStyle {
   /// Seconds a line takes from the right edge until it has left on the
@@ -51,6 +55,10 @@ class DanmakuStyle {
   /// Text size relative to the picture's height ([fontSizeFor]).
   final double size;
 
+  /// Font weight of the text, 400 (regular) to 900 (black); the sender's
+  /// name is a step bolder.
+  final int weight;
+
   /// Width of the dark outline round the white text, logical px.
   final double outline;
   final bool highlightOwn;
@@ -65,11 +73,24 @@ class DanmakuStyle {
     this.bandBottom = 0.45,
     this.opacity = 0.92,
     this.size = 1,
+    this.weight = 600,
     this.outline = 1.4,
     this.highlightOwn = true,
     this.avatars = true,
   });
 
+  /// The range of each knob (the settings' sliders use them too).
+  static const limits = (
+    crossSecs: (4.0, 16.0),
+    maxOnScreen: (1, 40),
+    band: (0.0, 0.9),
+    minBand: 0.05,
+    opacity: (0.3, 1.0),
+    size: (0.6, 1.8),
+    weight: (400, 900),
+    outline: (0.0, 4.0),
+  );
+
   DanmakuStyle copyWith({
     double? crossSecs,
     int? maxOnScreen,
@@ -77,6 +98,7 @@ class DanmakuStyle {
     double? bandBottom,
     double? opacity,
     double? size,
+    int? weight,
     double? outline,
     bool? highlightOwn,
     bool? avatars,
@@ -88,11 +110,69 @@ class DanmakuStyle {
         bandBottom: bandBottom ?? this.bandBottom,
         opacity: opacity ?? this.opacity,
         size: size ?? this.size,
+        weight: weight ?? this.weight,
         outline: outline ?? this.outline,
         highlightOwn: highlightOwn ?? this.highlightOwn,
         avatars: avatars ?? this.avatars,
       );
 
+  Map<String, Object> toJson() => {
+        'crossSecs': crossSecs,
+        'maxOnScreen': maxOnScreen,
+        'bandTop': bandTop,
+        'bandBottom': bandBottom,
+        'opacity': opacity,
+        'size': size,
+        'weight': weight,
+        'outline': outline,
+        'highlightOwn': highlightOwn,
+        'avatars': avatars,
+      };
+
+  /// [json] as stored ([toJson]); missing or wrong values take the
+  /// default, out-of-range ones the nearest end of their range.
+  factory DanmakuStyle.fromJson(Map<Object?, Object?> json) {
+    const d = DanmakuStyle();
+    const l = limits;
+    double num_(String k, double def, (double, double) r) {
+      final v = json[k];
+      return v is num && v.isFinite ? v.toDouble().clamp(r.$1, r.$2) : def;
+    }
+
+    int int_(String k, int def, (int, int) r) {
+      final v = json[k];
+      return v is num && v.isFinite ? v.round().clamp(r.$1, r.$2) : def;
+    }
+
+    bool bool_(String k, bool def) {
+      final v = json[k];
+      return v is bool ? v : def;
+    }
+
+    var top = num_('bandTop', d.bandTop, l.band);
+    var bottom = num_('bandBottom', d.bandBottom, l.band);
+    if (bottom - top < l.minBand) (top, bottom) = (d.bandTop, d.bandBottom);
+    return DanmakuStyle(
+      crossSecs: num_('crossSecs', d.crossSecs, l.crossSecs),
+      maxOnScreen: int_('maxOnScreen', d.maxOnScreen, l.maxOnScreen),
+      bandTop: top,
+      bandBottom: bottom,
+      opacity: num_('opacity', d.opacity, l.opacity),
+      size: num_('size', d.size, l.size),
+      weight: (int_('weight', d.weight, l.weight) / 100).round() * 100,
+      outline: num_('outline', d.outline, l.outline),
+      highlightOwn: bool_('highlightOwn', d.highlightOwn),
+      avatars: bool_('avatars', d.avatars),
+    );
+  }
+
+  /// [weight] as a [FontWeight] (400..900 in steps of 100).
+  FontWeight get fontWeight => FontWeight.values[((weight.clamp(100, 900) / 100).round() - 1)];
+
+  /// The sender's name: a step bolder than the text.
+  FontWeight get nameWeight =>
+      FontWeight.values[math.min(FontWeight.values.length - 1, (weight.clamp(100, 900) / 100).round())];
+
   /// The text size in a picture [height] px tall: 4.2 % of it (about 30 px
   /// on a 720 px player), 13 to 44 px, times [size].
   double fontSizeFor(double height) => (height * 0.042).clamp(13.0, 44.0) * size;
@@ -105,6 +185,24 @@ class DanmakuStyle {
     final band = (bandBottom - bandTop).clamp(0.0, 1.0) * height;
     return math.max(1, (band / laneHeightFor(height)).floor());
   }
+
+  @override
+  bool operator ==(Object other) =>
+      other is DanmakuStyle &&
+      other.crossSecs == crossSecs &&
+      other.maxOnScreen == maxOnScreen &&
+      other.bandTop == bandTop &&
+      other.bandBottom == bandBottom &&
+      other.opacity == opacity &&
+      other.size == size &&
+      other.weight == weight &&
+      other.outline == outline &&
+      other.highlightOwn == highlightOwn &&
+      other.avatars == avatars;
+
+  @override
+  int get hashCode =>
+      Object.hash(crossSecs, maxOnScreen, bandTop, bandBottom, opacity, size, weight, outline, highlightOwn, avatars);
 }
 
 /// One line in flight in [lane], from [start] (seconds on the layer's
@@ -286,18 +384,21 @@ class _DanmakuLayerState extends State<DanmakuLayer> with SingleTickerProviderSt
   late final Ticker _ticker = createTicker(_onTick);
   final _lanes = DanmakuLanes<_Line>();
   final _repaint = ValueNotifier(0);
+  // The layer's clock: [_base] from earlier runs of the ticker, which
+  // only runs while lines fly or wait (an idle layer asks for no frames).
+  Duration _base = Duration.zero;
   Duration _elapsed = Duration.zero;
   Size _size = Size.zero;
   var _pending = <DanmakuItem>[];
   var _shown = <DanmakuFlight<_Line>>[];
 
-  double get _t => _elapsed.inMicroseconds / 1e6;
+  double get _t => (_base + _elapsed).inMicroseconds / 1e6;
 
   @override
   void initState() {
     super.initState();
     widget.controller.addListener(_onAdd);
-    _ticker.start();
+    _onAdd();
   }
 
   @override
@@ -325,6 +426,7 @@ class _DanmakuLayerState extends State<DanmakuLayer> with SingleTickerProviderSt
       _pending = [];
     }
     _pending.addAll(c._take());
+    if (!_ticker.isActive) _ticker.start();
   }
 
   _Line _build(DanmakuItem item) {
@@ -333,7 +435,7 @@ class _DanmakuLayerState extends State<DanmakuLayer> with SingleTickerProviderSt
     final base = TextStyle(
       fontSize: size,
       height: 1.2,
-      fontWeight: FontWeight.w600,
+      fontWeight: s.fontWeight,
       color: Colors.white,
       letterSpacing: 0.2,
       shadows: const [],
@@ -346,7 +448,7 @@ class _DanmakuLayerState extends State<DanmakuLayer> with SingleTickerProviderSt
           TextSpan(
             text: item.kind == DanmakuKind.chat ? '$name  ' : '$name ',
             style: TextStyle(
-              fontWeight: FontWeight.w700,
+              fontWeight: s.nameWeight,
               color: stroke == null ? (item.senderColor ?? Colors.white) : null,
             ),
           ),
@@ -421,6 +523,11 @@ class _DanmakuLayerState extends State<DanmakuLayer> with SingleTickerProviderSt
     } else if (now.isNotEmpty) {
       _repaint.value++;
     }
+    if (now.isEmpty && _lanes.waiting == 0 && _pending.isEmpty) {
+      _base += _elapsed;
+      _elapsed = Duration.zero;
+      _ticker.stop();
+    }
   }
 
   static bool _sameFlights(List<DanmakuFlight<_Line>> a, List<DanmakuFlight<_Line>> b) {

apps/desktop/lib/src/danmaku/danmaku_notices.dart

@@ -0,0 +1,111 @@
+import 'package:flutter/material.dart';
+import 'package:signals/signals_flutter.dart';
+
+import '../session/notifier.dart' show NoticeCategory, ToastItem;
+import '../shell/avatar.dart' show AvatarInfo, colorForName;
+import 'danmaku.dart';
+
+// "Notifications: Danmaku" (Settings → Notifications & sounds): over the
+// full player, chat and short notices fly across the picture instead of
+// popping up as toasts. Problems, errors and the app's own notices stay
+// toasts, and so does everything while the player is small or closed.
+
+/// Whether [t] flies as a line (when danmaku is the style in use): chat,
+/// joins / leaves / lost connection / back, "starting now", and Up next
+/// news someone caused (added, changed the video). Nudges, problems, your
+/// own state and the app's notices stay toasts.
+bool fliesAsDanmaku(ToastItem t) => switch (t.category) {
+      NoticeCategory.chat || NoticeCategory.people || NoticeCategory.start => true,
+      NoticeCategory.upNext => t.actor != null && t.actor!.isNotEmpty,
+      _ => false,
+    };
+
+/// [t] as a line: the sender (their avatar from [avatar], their colour)
+/// before what they said or did; "starting now" without one. Null for
+/// what does not fly ([fliesAsDanmaku]).
+DanmakuItem? danmakuForToast(ToastItem t, {AvatarInfo Function(String name, String id)? avatar}) {
+  if (!fliesAsDanmaku(t)) return null;
+  final who = t.actor;
+  if (who == null || who.isEmpty) {
+    return DanmakuItem(kind: DanmakuKind.starting, text: '▶  ${t.text}');
+  }
+  final pic = avatar?.call(who, t.actorId) ?? AvatarInfo(name: who, color: colorForName(who));
+  final color = pic.color;
+  if (t.chat && t.text.startsWith('$who: ')) {
+    return DanmakuItem(
+        kind: DanmakuKind.chat,
+        sender: who,
+        senderColor: color,
+        text: t.text.substring(who.length + 2),
+        own: t.own,
+        avatar: pic);
+  }
+  final rest = t.text.startsWith('$who ') ? t.text.substring(who.length + 1) : t.text;
+  final kind = switch (t.category) {
+    NoticeCategory.upNext => DanmakuKind.upNext,
+    _ when rest.startsWith('left') || rest.startsWith('lost') => DanmakuKind.leave,
+    _ => DanmakuKind.join,
+  };
+  return DanmakuItem(kind: kind, sender: who, senderColor: color, text: rest, avatar: pic);
+}
+
+/// The session's lines over the picture: fresh toasts that fly
+/// ([fliesAsDanmaku], and not [skip]) go to [controller] while this is
+/// mounted (the player mounts it only while danmaku is the style and the
+/// full player is up); what was there before it mounted is old news.
+class DanmakuNotices extends StatefulWidget {
+  final ReadonlySignal<List<ToastItem>> toasts;
+  final ReadonlySignal<DanmakuStyle> style;
+  final DanmakuController controller;
+  final AvatarInfo Function(String name, String id)? avatar;
+
+  /// Toasts shown another way already (your own quick chat echo).
+  final bool Function(ToastItem t)? skip;
+  const DanmakuNotices({
+    super.key,
+    required this.toasts,
+    required this.style,
+    required this.controller,
+    this.avatar,
+    this.skip,
+  });
+
+  @override
+  State<DanmakuNotices> createState() => _DanmakuNoticesState();
+}
+
+class _DanmakuNoticesState extends State<DanmakuNotices> {
+  late Set<int> _seen = {for (final t in widget.toasts.peek()) t.id};
+  late final void Function() _stop;
+
+  @override
+  void initState() {
+    super.initState();
+    _stop = effect(() {
+      final items = widget.toasts.value;
+      untracked(() {
+        for (final t in items) {
+          if (_seen.contains(t.id) || (widget.skip?.call(t) ?? false)) continue;
+          final line = danmakuForToast(t, avatar: widget.avatar);
+          if (line != null) widget.controller.add(line);
+        }
+        _seen = {for (final t in items) t.id};
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    _stop();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) => SignalBuilder(
+        builder: (context) => DanmakuLayer(
+          controller: widget.controller,
+          style: widget.style.value,
+          accent: Theme.of(context).colorScheme.primary,
+        ),
+      );
+}

apps/desktop/lib/src/danmaku/danmaku_preview.dart

@@ -1,7 +1,9 @@
 import 'dart:async';
 import 'dart:math' as math;
 
+import 'package:flutter/foundation.dart' show ValueListenable;
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:signals/signals_flutter.dart';
 
 import '../controls/minimal/style.dart';
@@ -10,9 +12,12 @@ import '../session/notifier.dart' show ToastItem;
 import '../session/session_coordinator.dart' show SessionCoordinator;
 import '../shell/avatar.dart' show AvatarInfo, avatarForName, colorForName, memberAvatarInfo, selfAvatarInfo;
 import '../shell/motion.dart';
+import '../shell/quick_chat.dart';
+import '../shell/video_view.dart' show SubtitleLift;
 import '../app/app_graph.dart' show AppScope;
 import '../widgets/app_menu.dart' show AppGlass, AppMenuStyle;
 import 'danmaku.dart';
+import 'danmaku_notices.dart' show danmakuForToast;
 
 // Dev builds only (Settings → About → Developer): try the danmaku look on
 // the real player (when something is loaded) or on a stand-in picture,
@@ -25,7 +30,7 @@ class DanmakuPreview {
 
   /// Shown over the full session player.
   final active = signal(false);
-  final style = signal(const DanmakuStyle());
+  final Signal<DanmakuStyle> style;
 
   /// A random stream: lines per minute, lengths from one word to a long
   /// sentence, CJK and emoji among them.
@@ -50,7 +55,9 @@ class DanmakuPreview {
   Timer? _autoTimer;
   late final void Function() _stopAuto;
 
-  DanmakuPreview() {
+  /// Starts from [style] (the user's look, Settings → Notifications &
+  /// sounds); the preview's knobs change only the preview.
+  DanmakuPreview({DanmakuStyle style = const DanmakuStyle()}) : style = signal(style) {
     _stopAuto = effect(() {
       final on = auto.value;
       autoRate.value;
@@ -127,41 +134,15 @@ class DanmakuPreview {
     return sample(DanmakuKind.upNext);
   }
 
-  /// A toast of this session as a line: chat (name, then the message),
-  /// joins, leaves, Up next adds; the rest (problems) stay toasts.
-  DanmakuItem? fromToast(ToastItem t, {String? selfName}) {
-    final who = t.actor;
-    if (who == null || who.isEmpty) {
-      return t.text.toLowerCase().startsWith('starting')
-          ? DanmakuItem(kind: DanmakuKind.starting, text: '▶  ${t.text}')
-          : null;
-    }
-    final color = colorForName(who);
+  /// A toast of this session as a line, as "Notifications: Danmaku" maps
+  /// it ([danmakuForToast]); the rest (problems) stay toasts.
+  DanmakuItem? fromToast(ToastItem t) {
     final c = coord;
-    final avatar = c == null ? AvatarInfo(name: who, color: color) : avatarForName(who, c, t.actorId);
-    if (t.chat && t.text.startsWith('$who: ')) {
-      return DanmakuItem(
-          kind: DanmakuKind.chat,
-          sender: who,
-          senderColor: color,
-          text: t.text.substring(who.length + 2),
-          own: who == selfName,
-          avatar: avatar);
-    }
-    final rest = t.text.startsWith('$who ') ? t.text.substring(who.length + 1) : t.text;
-    final kind = rest.startsWith('joined')
-        ? DanmakuKind.join
-        : rest.startsWith('left')
-            ? DanmakuKind.leave
-            : rest.startsWith('added')
-                ? DanmakuKind.upNext
-                : null;
-    if (kind == null) return null;
-    return DanmakuItem(kind: kind, sender: who, senderColor: color, text: rest, avatar: avatar);
+    return danmakuForToast(t, avatar: c == null ? null : (name, id) => avatarForName(name, c, id));
   }
 
   /// Follows [toasts] while [live] is on; returns the stop.
-  void Function() watchToasts(ReadonlySignal<List<ToastItem>> toasts, {String? selfName}) {
+  void Function() watchToasts(ReadonlySignal<List<ToastItem>> toasts) {
     var seen = {for (final t in toasts.peek()) t.id};
     return effect(() {
       final items = toasts.value;
@@ -169,7 +150,7 @@ class DanmakuPreview {
       untracked(() {
         for (final t in items) {
           if (!seen.add(t.id) || !on) continue;
-          final line = fromToast(t, selfName: selfName);
+          final line = fromToast(t);
           if (line != null) controller.add(line);
         }
         seen = {for (final t in items) t.id};
@@ -209,7 +190,11 @@ class DanmakuPreview {
 /// picture; lets clicks through.
 class DanmakuPreviewLayers extends StatelessWidget {
   final DanmakuPreview preview;
-  const DanmakuPreviewLayers({super.key, required this.preview});
+
+  /// The covered bottom the mock dialogue moves above, as the real
+  /// subtitles do ([SubtitleLift]).
+  final ValueListenable<double>? lift;
+  const DanmakuPreviewLayers({super.key, required this.preview, this.lift});
 
   @override
   Widget build(BuildContext context) {
@@ -218,7 +203,7 @@ class DanmakuPreviewLayers extends StatelessWidget {
       builder: (context) => Stack(
         fit: StackFit.expand,
         children: [
-          MockSubtitles(top: preview.mockTop.value, bottom: preview.mockBottom.value),
+          MockSubtitles(top: preview.mockTop.value, bottom: preview.mockBottom.value, lift: lift),
           DanmakuLayer(controller: preview.controller, style: preview.style.value, accent: accent),
         ],
       ),
@@ -227,11 +212,14 @@ class DanmakuPreviewLayers extends StatelessWidget {
 }
 
 /// Stand-ins for subtitles where real ones sit: an ASS sign at the top
-/// (`\an8`, yellow serif) and two lines of dialogue at the bottom.
+/// (`\an8`, yellow serif) and two lines of dialogue at the bottom. The
+/// dialogue moves up by [lift] (px covered at the bottom) in the same
+/// steps as mpv's `sub-pos` moves the real ones; the sign stays.
 class MockSubtitles extends StatelessWidget {
   final bool top;
   final bool bottom;
-  const MockSubtitles({super.key, required this.top, required this.bottom});
+  final ValueListenable<double>? lift;
+  const MockSubtitles({super.key, required this.top, required this.bottom, this.lift});
 
   static Widget _outlined(String text, TextStyle style, double outline) => Stack(
         children: [
@@ -276,10 +264,15 @@ class MockSubtitles extends StatelessWidget {
                 ),
               ),
             if (bottom)
-              Positioned(
-                left: 0,
-                right: 0,
-                bottom: h * 0.05,
+              ValueListenableBuilder<double>(
+                valueListenable: lift ?? const AlwaysStoppedAnimation(0.0),
+                builder: (context, up, child) => Positioned(
+                  key: const ValueKey('mock-dialogue'),
+                  left: 0,
+                  right: 0,
+                  bottom: h * 0.05 + up,
+                  child: child!,
+                ),
                 child: Center(
                   child: _outlined(
                     'I told you the controls would cover this line.\nThey never do now — or do they?',
@@ -299,15 +292,29 @@ class MockSubtitles extends StatelessWidget {
 /// fields drifting over a dusk gradient, so motion and contrast behind
 /// the lines are realistic.
 class DanmakuStandIn extends StatefulWidget {
-  const DanmakuStandIn({super.key});
+  /// False: a still picture (the settings' strip while it rests).
+  final bool animate;
+  const DanmakuStandIn({super.key, this.animate = true});
 
   @override
   State<DanmakuStandIn> createState() => _DanmakuStandInState();
 }
 
 class _DanmakuStandInState extends State<DanmakuStandIn> with SingleTickerProviderStateMixin {
-  late final AnimationController _clock =
-      AnimationController(vsync: this, duration: const Duration(seconds: 60))..repeat();
+  late final AnimationController _clock = AnimationController(vsync: this, duration: const Duration(seconds: 60));
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.animate) _clock.repeat();
+  }
+
+  @override
+  void didUpdateWidget(DanmakuStandIn old) {
+    super.didUpdateWidget(old);
+    if (widget.animate && !_clock.isAnimating) _clock.repeat();
+    if (!widget.animate && _clock.isAnimating) _clock.stop();
+  }
 
   @override
   void dispose() {
@@ -521,6 +528,8 @@ class _DanmakuPanelState extends State<DanmakuPanel> {
         _Slider('Opacity', s.opacity, 0.3, 1, '${(s.opacity * 100).round()} %',
             (v) => _style((s) => s.copyWith(opacity: v))),
         _Slider('Size', s.size, 0.6, 1.8, '×${s.size.toStringAsFixed(2)}', (v) => _style((s) => s.copyWith(size: v))),
+        _Slider('Bold', s.weight.toDouble(), 400, 900, '${s.weight}',
+            (v) => _style((s) => s.copyWith(weight: (v / 100).round() * 100))),
         _Slider('Outline', s.outline, 0, 4, '${s.outline.toStringAsFixed(1)} px',
             (v) => _style((s) => s.copyWith(outline: v))),
         _Toggle('Avatars', s.avatars, (v) => _style((s) => s.copyWith(avatars: v))),
@@ -679,54 +688,127 @@ Future<void> showDanmakuPreviewPage(BuildContext context, DanmakuPreview preview
       ),
     );
 
-class DanmakuPreviewPage extends StatelessWidget {
+class DanmakuPreviewPage extends StatefulWidget {
   final DanmakuPreview preview;
   const DanmakuPreviewPage({super.key, required this.preview});
 
+  @override
+  State<DanmakuPreviewPage> createState() => _DanmakuPreviewPageState();
+}
+
+/// The page also has the quick chat box (Enter): what you send flies as
+/// your own line, and the mock dialogue moves above the box in the lift's
+/// steps, as the real subtitles do over the player.
+class _DanmakuPreviewPageState extends State<DanmakuPreviewPage> {
+  final _chat = QuickChat();
+  final _lift = SubtitleLift();
+  final _pageFocus = FocusNode(debugLabel: 'danmaku preview');
+  double _boxH = QuickChatBox.height;
+
+  DanmakuPreview get preview => widget.preview;
+
+  @override
+  void initState() {
+    super.initState();
+    _chat.open.addListener(_retarget);
+    WidgetsBinding.instance.addPostFrameCallback((_) => _pageFocus.requestFocus());
+  }
+
+  @override
+  void dispose() {
+    _chat.open.removeListener(_retarget);
+    _chat.dispose();
+    _lift.dispose();
+    _pageFocus.dispose();
+    super.dispose();
+  }
+
+  void _retarget() {
+    final s = AppScope.of(context).coordinator.settings;
+    final bar = preview.controlsBand.peek() && s.liftSubtitles.peek()
+        ? controlsBottomHeight(s.controlsSkin.peek(), s.controlsSize.peek()) + 8
+        : 0.0;
+    final box = _chat.open.value ? 16 + _boxH + 8 : 0.0;
+    _lift.animateTo(box > bar ? box : bar);
+    if (!_chat.open.value) _pageFocus.requestFocus();
+  }
+
+  KeyEventResult _key(FocusNode node, KeyEvent e) {
+    if (e is! KeyDownEvent) return KeyEventResult.ignored;
+    if (e.logicalKey == LogicalKeyboardKey.enter || e.logicalKey == LogicalKeyboardKey.numpadEnter) {
+      _chat.show();
+      return KeyEventResult.handled;
+    }
+    return KeyEventResult.ignored;
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Material(
-      color: Colors.black,
-      child: Stack(
-        fit: StackFit.expand,
-        children: [
-          const DanmakuStandIn(),
-          DanmakuPreviewLayers(preview: preview),
-          SignalBuilder(builder: (context) {
-            if (!preview.controlsBand.value) return const SizedBox.shrink();
-            final s = AppScope.of(context).coordinator.settings;
-            final h = controlsBottomHeight(s.controlsSkin.value, s.controlsSize.value);
-            return Align(
-              alignment: Alignment.bottomCenter,
-              child: IgnorePointer(
-                child: Container(
-                  height: h,
-                  decoration: const BoxDecoration(
-                    gradient: LinearGradient(
-                      begin: Alignment.topCenter,
-                      end: Alignment.bottomCenter,
-                      colors: [Color(0x00000000), MinimalStyle.band],
+    return Focus(
+      focusNode: _pageFocus,
+      onKeyEvent: _key,
+      child: Material(
+        color: Colors.black,
+        child: Stack(
+          fit: StackFit.expand,
+          children: [
+            const DanmakuStandIn(),
+            DanmakuPreviewLayers(preview: preview, lift: _lift),
+            SignalBuilder(builder: (context) {
+              if (!preview.controlsBand.value) return const SizedBox.shrink();
+              final s = AppScope.of(context).coordinator.settings;
+              final h = controlsBottomHeight(s.controlsSkin.value, s.controlsSize.value);
+              return Align(
+                alignment: Alignment.bottomCenter,
+                child: IgnorePointer(
+                  child: ValueListenableBuilder<bool>(
+                    valueListenable: _chat.open,
+                    builder: (context, open, child) =>
+                        AnimatedOpacity(opacity: open ? 0 : 1, duration: easeTime, curve: ease, child: child),
+                    child: Container(
+                      height: h,
+                      decoration: const BoxDecoration(
+                        gradient: LinearGradient(
+                          begin: Alignment.topCenter,
+                          end: Alignment.bottomCenter,
+                          colors: [Color(0x00000000), MinimalStyle.band],
+                        ),
+                        border: Border(top: BorderSide(color: AppMenuStyle.border, width: 0.5)),
+                      ),
+                      alignment: Alignment.center,
+                      child: Text('control bar',
+                          style: TextStyle(color: Colors.white.withValues(alpha: 0.35), fontSize: 12)),
                     ),
-                    border: Border(top: BorderSide(color: AppMenuStyle.border, width: 0.5)),
                   ),
-                  alignment: Alignment.center,
-                  child: Text('control bar', style: TextStyle(color: Colors.white.withValues(alpha: 0.35), fontSize: 12)),
                 ),
+              );
+            }),
+            Positioned(
+              left: 16,
+              right: 16,
+              bottom: 16,
+              child: QuickChatBox(
+                chat: _chat,
+                onSend: (text) => preview.controller.add(preview.own(text)),
+                onHeight: (h) {
+                  _boxH = h;
+                  if (_chat.open.value) _retarget();
+                },
               ),
-            );
-          }),
-          Positioned(
-            left: 16,
-            top: 14,
-            child: Text('Stand-in picture: load something to preview on the real player',
-                style: TextStyle(color: Colors.white.withValues(alpha: 0.55), fontSize: 12)),
-          ),
-          Positioned(
-            right: 16,
-            top: 16,
-            child: DanmakuPanel(preview: preview, onClose: () => Navigator.of(context).pop()),
-          ),
-        ],
+            ),
+            Positioned(
+              left: 16,
+              top: 14,
+              child: Text('Stand-in picture: load something to preview on the real player · Enter: chat box',
+                  style: TextStyle(color: Colors.white.withValues(alpha: 0.55), fontSize: 12)),
+            ),
+            Positioned(
+              right: 16,
+              top: 16,
+              child: DanmakuPanel(preview: preview, onClose: () => Navigator.of(context).pop()),
+            ),
+          ],
+        ),
       ),
     );
   }

apps/desktop/lib/src/danmaku/danmaku_settings.dart

@@ -0,0 +1,342 @@
+import 'dart:async';
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+import 'package:signals/signals_flutter.dart';
+
+import '../shell/avatar.dart' show AvatarInfo, colorForName, selfAvatarInfo;
+import '../state/settings.dart';
+import '../widgets/app_menu.dart' show AppSelect;
+import 'danmaku.dart';
+import 'danmaku_preview.dart' show DanmakuPreview, DanmakuStandIn, MockSubtitles;
+
+// Settings → Notifications & sounds: how notifications show over the full
+// player (Toasts or Danmaku) and every knob of the danmaku look, with a
+// live preview strip. The player's side panel shows the style and the
+// knobs too ([DanmakuKnobs]).
+
+/// Names of the weights the boldness slider steps through.
+const danmakuWeightNames = {
+  400: 'Regular',
+  500: 'Medium',
+  600: 'Semibold',
+  700: 'Bold',
+  800: 'Extra bold',
+  900: 'Black',
+};
+
+/// "Notifications: Toasts / Danmaku" ([AppSettings.notifyStyle]).
+class NotifyStyleSelect extends StatelessWidget {
+  final AppSettings settings;
+  const NotifyStyleSelect({super.key, required this.settings});
+
+  @override
+  Widget build(BuildContext context) => SignalBuilder(
+        builder: (context) => AppSelect<NotifyStyle>(
+          key: const ValueKey('notify-style'),
+          value: settings.notifyStyle.value,
+          onChanged: settings.setNotifyStyle,
+          items: [for (final m in NotifyStyle.values) (m, m.label)],
+        ),
+      );
+}
+
+/// The card: the style picker, the preview strip and the knobs.
+class DanmakuSettingsPanel extends StatelessWidget {
+  final AppSettings settings;
+  const DanmakuSettingsPanel({super.key, required this.settings});
+
+  @override
+  Widget build(BuildContext context) {
+    final muted = TextStyle(color: Theme.of(context).colorScheme.onSurfaceVariant, fontSize: 12);
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Row(
+          children: [
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const Text('Notifications'),
+                  Text(
+                      'Danmaku: over the full player, chat, joins, leaves, Up next and "starting now" fly across '
+                      'the top of the picture instead of popping up. Problems and errors stay pop-ups, and so does '
+                      'everything with the player small',
+                      style: muted),
+                ],
+              ),
+            ),
+            const SizedBox(width: 12),
+            NotifyStyleSelect(settings: settings),
+          ],
+        ),
+        const SizedBox(height: 12),
+        DanmakuPreviewStrip(settings: settings),
+        const SizedBox(height: 6),
+        DanmakuKnobs(settings: settings),
+      ],
+    );
+  }
+}
+
+/// A 16:9-ish strip with a moving picture, a top sign and bottom
+/// dialogue, and sample lines in the current look, a few a second.
+class DanmakuPreviewStrip extends StatefulWidget {
+  final AppSettings settings;
+  final double height;
+  const DanmakuPreviewStrip({super.key, required this.settings, this.height = 190});
+
+  @override
+  State<DanmakuPreviewStrip> createState() => _DanmakuPreviewStripState();
+}
+
+class _DanmakuPreviewStripState extends State<DanmakuPreviewStrip> {
+  /// The strip plays this long after it opens or a knob moves, then
+  /// rests (a click plays it again): a settings page left open costs
+  /// nothing.
+  static const playFor = Duration(seconds: 16);
+  final _controller = DanmakuController();
+  final _rng = math.Random(3);
+  Timer? _timer;
+  Timer? _rest;
+  bool _playing = false;
+  int _n = 0;
+  late final void Function() _stop;
+
+  @override
+  void initState() {
+    super.initState();
+    _stop = effect(() {
+      widget.settings.danmakuStyle.value;
+      untracked(_play);
+    });
+  }
+
+  @override
+  void dispose() {
+    _stop();
+    _timer?.cancel();
+    _rest?.cancel();
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _play() {
+    _rest?.cancel();
+    _rest = Timer(playFor, () {
+      _timer?.cancel();
+      _timer = null;
+      if (mounted) setState(() => _playing = false);
+    });
+    if (_timer != null) return;
+    _send();
+    _timer = Timer.periodic(const Duration(milliseconds: 1100), (_) => _send());
+    if (_playing) return;
+    _playing = true;
+    if (_built && mounted) setState(() {});
+  }
+
+  bool _built = false;
+
+  void _send() {
+    final i = _n++;
+    if (i % 7 == 3) {
+      final me = selfAvatarInfo();
+      _controller.add(DanmakuItem(
+          kind: DanmakuKind.chat, sender: me.name, senderColor: me.color, text: 'this is my line', own: true, avatar: me));
+      return;
+    }
+    final name = DanmakuPreview.sampleNames[_rng.nextInt(DanmakuPreview.sampleNames.length)];
+    final who = AvatarInfo(name: name, color: colorForName(name));
+    if (i % 9 == 5) {
+      _controller.add(DanmakuItem(kind: DanmakuKind.join, sender: name, senderColor: who.color, text: 'joined', avatar: who));
+      return;
+    }
+    // Short and medium lines: the long ones crowd a small strip.
+    final pool = [for (final t in DanmakuPreview.sampleChat) if (t.length < 48) t];
+    _controller.add(DanmakuItem(
+        kind: DanmakuKind.chat,
+        sender: name,
+        senderColor: who.color,
+        text: pool[_rng.nextInt(pool.length)],
+        avatar: who));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    _built = true;
+    final accent = Theme.of(context).colorScheme.primary;
+    return ClipRRect(
+      key: const ValueKey('danmaku-preview-strip'),
+      borderRadius: BorderRadius.circular(12),
+      child: SizedBox(
+        height: widget.height,
+        child: Stack(
+          fit: StackFit.expand,
+          children: [
+            DanmakuStandIn(animate: _playing),
+            const MockSubtitles(top: true, bottom: true),
+            SignalBuilder(
+              builder: (context) =>
+                  DanmakuLayer(controller: _controller, style: widget.settings.danmakuStyle.value, accent: accent),
+            ),
+            Center(
+              child: AnimatedOpacity(
+                opacity: _playing ? 0 : 1,
+                duration: const Duration(milliseconds: 200),
+                child: IgnorePointer(
+                  ignoring: _playing,
+                  child: FilledButton.tonalIcon(
+                    key: const ValueKey('danmaku-preview-play'),
+                    onPressed: _play,
+                    icon: const Icon(Icons.play_arrow_rounded, size: 18),
+                    label: const Text('Play preview'),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Every knob of the danmaku look, live and saved: crossing time, how
+/// many at once, the lane band, opacity, size, boldness, outline,
+/// avatars, your own lines framed; and a reset.
+class DanmakuKnobs extends StatelessWidget {
+  final AppSettings settings;
+
+  /// Narrow (the player's side panel): shorter labels column.
+  final bool dense;
+  const DanmakuKnobs({super.key, required this.settings, this.dense = false});
+
+  void _set(DanmakuStyle Function(DanmakuStyle s) f) => settings.setDanmakuStyle(f(settings.danmakuStyle.peek()));
+
+  @override
+  Widget build(BuildContext context) {
+    const l = DanmakuStyle.limits;
+    return SignalBuilder(builder: (context) {
+      final s = settings.danmakuStyle.value;
+      final labelW = dense ? 84.0 : 150.0;
+      Widget slider(String key, String label, double v, (num, num) r, String readout, ValueChanged<double> f,
+              {int? divisions}) =>
+          _Knob(
+            label: label,
+            labelWidth: labelW,
+            readout: readout,
+            child: Slider(
+              key: ValueKey('danmaku-$key'),
+              value: v.clamp(r.$1.toDouble(), r.$2.toDouble()),
+              min: r.$1.toDouble(),
+              max: r.$2.toDouble(),
+              divisions: divisions,
+              onChanged: f,
+            ),
+          );
+      Widget toggle(String key, String label, bool v, ValueChanged<bool> f) => _Knob(
+            label: label,
+            labelWidth: double.infinity,
+            child: Switch(key: ValueKey('danmaku-$key'), value: v, onChanged: f),
+          );
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          slider('cross', dense ? 'Crossing' : 'Crossing time', s.crossSecs, l.crossSecs,
+              '${s.crossSecs.toStringAsFixed(1)} s', (v) => _set((s) => s.copyWith(crossSecs: v))),
+          slider('cap', dense ? 'At most' : 'At most on screen', s.maxOnScreen.toDouble(), l.maxOnScreen,
+              '${s.maxOnScreen} lines', (v) => _set((s) => s.copyWith(maxOnScreen: v.round())),
+              divisions: l.maxOnScreen.$2 - l.maxOnScreen.$1),
+          _Knob(
+            label: dense ? 'Lanes' : 'Lanes (from the top)',
+            labelWidth: labelW,
+            readout: '${(s.bandTop * 100).round()}–${(s.bandBottom * 100).round()} %',
+            child: RangeSlider(
+              key: const ValueKey('danmaku-band'),
+              values: RangeValues(s.bandTop, s.bandBottom),
+              min: l.band.$1,
+              max: l.band.$2,
+              onChanged: (v) {
+                if (v.end - v.start >= l.minBand) _set((s) => s.copyWith(bandTop: v.start, bandBottom: v.end));
+              },
+            ),
+          ),
+          slider('opacity', 'Opacity', s.opacity, l.opacity, '${(s.opacity * 100).round()} %',
+              (v) => _set((s) => s.copyWith(opacity: v))),
+          slider('size', 'Size', s.size, l.size, '×${s.size.toStringAsFixed(2)}', (v) => _set((s) => s.copyWith(size: v))),
+          slider('weight', 'Boldness', s.weight.toDouble(), l.weight, danmakuWeightNames[s.weight] ?? '${s.weight}',
+              (v) => _set((s) => s.copyWith(weight: (v / 100).round() * 100)),
+              divisions: (l.weight.$2 - l.weight.$1) ~/ 100),
+          slider('outline', 'Outline', s.outline, l.outline,
+              s.outline < 0.05 ? 'none' : '${s.outline.toStringAsFixed(1)} px', (v) => _set((s) => s.copyWith(outline: v))),
+          toggle('avatars', 'Avatars before the lines', s.avatars, (v) => _set((s) => s.copyWith(avatars: v))),
+          toggle('own', 'Frame my own lines', s.highlightOwn, (v) => _set((s) => s.copyWith(highlightOwn: v))),
+          Align(
+            alignment: Alignment.centerRight,
+            child: TextButton.icon(
+              key: const ValueKey('danmaku-reset'),
+              onPressed: s == const DanmakuStyle() ? null : () => settings.setDanmakuStyle(const DanmakuStyle()),
+              icon: const Icon(Icons.restart_alt, size: 18),
+              label: const Text('Reset look'),
+            ),
+          ),
+        ],
+      );
+    });
+  }
+}
+
+class _Knob extends StatelessWidget {
+  final String label;
+  final double labelWidth;
+  final String? readout;
+  final Widget child;
+  const _Knob({required this.label, required this.labelWidth, this.readout, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    final text = Text(label, style: const TextStyle(fontSize: 13));
+    if (labelWidth == double.infinity) {
+      return SizedBox(
+        height: 38,
+        child: Row(children: [Expanded(child: text), Transform.scale(scale: 0.8, alignment: Alignment.centerRight, child: child)]),
+      );
+    }
+    return SizedBox(
+      height: 36,
+      child: Row(
+        children: [
+          SizedBox(width: labelWidth, child: text),
+          Expanded(
+            child: SliderTheme(
+              data: SliderTheme.of(context).copyWith(
+                trackHeight: 3,
+                overlayShape: SliderComponentShape.noOverlay,
+                thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 7),
+                rangeThumbShape: const RoundRangeSliderThumbShape(enabledThumbRadius: 7),
+                showValueIndicator: ShowValueIndicator.never,
+                tickMarkShape: SliderTickMarkShape.noTickMark,
+              ),
+              child: child,
+            ),
+          ),
+          SizedBox(
+            width: 78,
+            child: Text(
+              readout ?? '',
+              textAlign: TextAlign.right,
+              style: TextStyle(
+                fontSize: 12,
+                color: scheme.onSurfaceVariant,
+                fontFeatures: const [FontFeature.tabularFigures()],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}