@@ -1,5 +1,22 @@
 ## Unreleased
 
+- Styling for the runtime's own UI, all optional and left out of the JSON
+  when unset, so saved designs keep their look:
+  - `ShowToastAction`: `actionColor`, `showClose`, `closeColor`,
+    `cornerRadius`, `border` (`BorderSideModel`), `shadows` (drop shadow
+    `Effect`s), `padding`, `maxWidth`, `messageStyle`, `actionStyle`,
+    `iconSize`, and `bottomOffsets` (per `ScreenBreakpoint`, e.g.
+    `{"mobile": 84}`, see `bottomOffsetFor`).
+  - `ConfirmAction`: `border`, `shadows`, `titleStyle`, `messageStyle`,
+    `buttonStyle`, `buttonRadius`, `buttonBorder`, `buttonShadows`,
+    `confirmTextColor`, `cancelColor`, `cancelTextColor`.
+  - `DropdownProperties`: `menuStyle` (`DropdownMenuStyleModel`: an anchored
+    menu card's color, border, radius, shadows, offset, sizes, paddings,
+    selected and hover row colors, selected text style and check mark) and
+    `itemImage` (a URL or item template such as `${item.image}`),
+    `itemImageSize`, `itemImageRadius`.
+  - `TextStyleModel`: a partial text style (font family, weight, italic,
+    size, line height, letter spacing, color).
 - `LineChartNode` (`lineChart`) and `LineChartProperties`: a data-driven
   line chart. The series, domain, bands, grid lines, area bands, reference
   lines, x ticks, markers and vertical lines are bound through `variables`
 
@@ -11,7 +11,8 @@ part 'confirm_action.g.dart';
 ///
 /// By default the dialog is built by the runtime and takes the app's look:
 /// its font, primary color and surface come from the layout that shows it.
-/// The optional color and radius fields override that look.
+/// The optional color, radius, border, shadow and text style fields
+/// override that look.
 ///
 /// With a [dialogId] the dialog is that canvas instead, like
 /// [ShowDialogAction]. A button in it answers the dialog with a "Navigate
@@ -71,6 +72,44 @@ class ConfirmAction extends ActionModel with Equatable, SerializableMixin {
   /// Corner radius of the built-in dialog. Null follows the app's buttons.
   final double? cornerRadius;
 
+  /// Outline of the built-in dialog. Null draws none.
+  final BorderSideModel? border;
+
+  /// Drop shadows of the built-in dialog, e.g. a hard offset shadow (radius
+  /// 0). Null keeps the default elevation shadow; an empty list draws none.
+  final List<Effect>? shadows;
+
+  /// Font, size and color of the title. Unset values follow the app.
+  final TextStyleModel? titleStyle;
+
+  /// Font, size and color of the message. Unset values follow the app.
+  final TextStyleModel? messageStyle;
+
+  /// Font, size and color of both buttons' labels. Unset values follow the
+  /// app; the label colors come from [confirmTextColor] and
+  /// [cancelTextColor] when this sets none.
+  final TextStyleModel? buttonStyle;
+
+  /// Corner radius of the buttons. Null follows the app's buttons.
+  final double? buttonRadius;
+
+  /// Outline of both buttons. Null draws none.
+  final BorderSideModel? buttonBorder;
+
+  /// Drop shadows of the confirm button, and of the cancel button when it
+  /// has a [cancelColor]. Null draws none.
+  final List<Effect>? buttonShadows;
+
+  /// Label color of the confirm button. Null picks one that reads on its
+  /// fill.
+  final ColorRGBA? confirmTextColor;
+
+  /// Fill of the cancel button. Null leaves it a text button.
+  final ColorRGBA? cancelColor;
+
+  /// Label color of the cancel button. Null uses the dialog's text color.
+  final ColorRGBA? cancelTextColor;
+
   /// The key of the "Navigate back" params that answers a [dialogId] dialog.
   static const String resultKey = 'confirmed';
 
@@ -107,6 +146,17 @@ class ConfirmAction extends ActionModel with Equatable, SerializableMixin {
     this.textColor,
     this.confirmColor,
     this.cornerRadius,
+    this.border,
+    this.shadows,
+    this.titleStyle,
+    this.messageStyle,
+    this.buttonStyle,
+    this.buttonRadius,
+    this.buttonBorder,
+    this.buttonShadows,
+    this.confirmTextColor,
+    this.cancelColor,
+    this.cancelTextColor,
     super.nonBlocking,
     super.enabled,
   }) : actions = actions ?? [],
@@ -137,6 +187,28 @@ class ConfirmAction extends ActionModel with Equatable, SerializableMixin {
     bool clearConfirmColor = false,
     double? cornerRadius,
     bool clearCornerRadius = false,
+    BorderSideModel? border,
+    bool clearBorder = false,
+    List<Effect>? shadows,
+    bool clearShadows = false,
+    TextStyleModel? titleStyle,
+    bool clearTitleStyle = false,
+    TextStyleModel? messageStyle,
+    bool clearMessageStyle = false,
+    TextStyleModel? buttonStyle,
+    bool clearButtonStyle = false,
+    double? buttonRadius,
+    bool clearButtonRadius = false,
+    BorderSideModel? buttonBorder,
+    bool clearButtonBorder = false,
+    List<Effect>? buttonShadows,
+    bool clearButtonShadows = false,
+    ColorRGBA? confirmTextColor,
+    bool clearConfirmTextColor = false,
+    ColorRGBA? cancelColor,
+    bool clearCancelColor = false,
+    ColorRGBA? cancelTextColor,
+    bool clearCancelTextColor = false,
   }) => ConfirmAction(
     title: title ?? this.title,
     message: message ?? this.message,
@@ -155,6 +227,23 @@ class ConfirmAction extends ActionModel with Equatable, SerializableMixin {
     textColor: clearTextColor ? null : textColor ?? this.textColor,
     confirmColor: clearConfirmColor ? null : confirmColor ?? this.confirmColor,
     cornerRadius: clearCornerRadius ? null : cornerRadius ?? this.cornerRadius,
+    border: clearBorder ? null : border ?? this.border,
+    shadows: clearShadows ? null : shadows ?? this.shadows,
+    titleStyle: clearTitleStyle ? null : titleStyle ?? this.titleStyle,
+    messageStyle: clearMessageStyle ? null : messageStyle ?? this.messageStyle,
+    buttonStyle: clearButtonStyle ? null : buttonStyle ?? this.buttonStyle,
+    buttonRadius: clearButtonRadius ? null : buttonRadius ?? this.buttonRadius,
+    buttonBorder: clearButtonBorder ? null : buttonBorder ?? this.buttonBorder,
+    buttonShadows: clearButtonShadows
+        ? null
+        : buttonShadows ?? this.buttonShadows,
+    confirmTextColor: clearConfirmTextColor
+        ? null
+        : confirmTextColor ?? this.confirmTextColor,
+    cancelColor: clearCancelColor ? null : cancelColor ?? this.cancelColor,
+    cancelTextColor: clearCancelTextColor
+        ? null
+        : cancelTextColor ?? this.cancelTextColor,
     nonBlocking: nonBlocking,
     enabled: enabled,
   );
@@ -176,6 +265,17 @@ class ConfirmAction extends ActionModel with Equatable, SerializableMixin {
     textColor,
     confirmColor,
     cornerRadius,
+    border,
+    shadows,
+    titleStyle,
+    messageStyle,
+    buttonStyle,
+    buttonRadius,
+    buttonBorder,
+    buttonShadows,
+    confirmTextColor,
+    cancelColor,
+    cancelTextColor,
   ];
 
   /// Creates an instance from a JSON object.
 
@@ -53,7 +53,9 @@ enum ToastPosition {
 /// [actions].
 ///
 /// Its colors come from [style] and the app's theme unless [backgroundColor]
-/// or [textColor] are set. Its font is the app's.
+/// or [textColor] are set. Its font is the app's unless [messageStyle] or
+/// [actionStyle] set one. [cornerRadius], [border], [shadows], [padding] and
+/// [maxWidth] shape the toast; [showClose] adds a dismiss (×) button.
 @JsonSerializable()
 class ShowToastAction extends ActionModel with Equatable, SerializableMixin {
   /// The message. Supports variables and formulas, e.g.
@@ -84,13 +86,54 @@ class ShowToastAction extends ActionModel with Equatable, SerializableMixin {
   /// Actions to run, in order, when the toast's button is tapped.
   final List<ActionModel> actions;
 
-  /// Optional icon before the message.
+  /// Optional icon before the message. Its own color wins over the
+  /// message's; an image icon shows as is, e.g. a stamp.
   final MultiSourceIconModel? icon;
 
+  /// Width and height of [icon].
+  final double iconSize;
+
   /// Distance from the bottom of the screen when [position] is
   /// [ToastPosition.bottom].
   final double bottomOffset;
 
+  /// [bottomOffset] per screen size, e.g. `{"mobile": 84}` to sit above a
+  /// mobile tab bar. A screen size without an entry uses [bottomOffset].
+  final Map<ScreenBreakpoint, double> bottomOffsets;
+
+  /// Color of the button's label. Null uses the message's color.
+  final ColorRGBA? actionColor;
+
+  /// Whether the toast shows a close (×) button that dismisses it.
+  final bool showClose;
+
+  /// Color of the close button. Null uses the message's color.
+  final ColorRGBA? closeColor;
+
+  /// Corner radius. Null keeps the default: a pill without a button, and the
+  /// app's button radius (at least 8) with one.
+  final double? cornerRadius;
+
+  /// Outline. Null draws none.
+  final BorderSideModel? border;
+
+  /// Drop shadows, e.g. a hard offset shadow (radius 0). Null keeps the
+  /// default soft shadow; an empty list draws none.
+  final List<Effect>? shadows;
+
+  /// Space around the content. Null keeps the default.
+  final EdgeInsetsModel? padding;
+
+  /// The widest the toast grows.
+  final double maxWidth;
+
+  /// Font, size and color of the message. Unset values follow the app.
+  final TextStyleModel? messageStyle;
+
+  /// Font, size and color of the button's label. Unset values follow the
+  /// app.
+  final TextStyleModel? actionStyle;
+
   /// Creates a new [ShowToastAction].
   ShowToastAction({
     required this.message,
@@ -102,15 +145,32 @@ class ShowToastAction extends ActionModel with Equatable, SerializableMixin {
     this.actionLabel = '',
     List<ActionModel>? actions,
     this.icon,
+    this.iconSize = 18,
     this.bottomOffset = 104,
+    Map<ScreenBreakpoint, double>? bottomOffsets,
+    this.actionColor,
+    this.showClose = false,
+    this.closeColor,
+    this.cornerRadius,
+    this.border,
+    this.shadows,
+    this.padding,
+    this.maxWidth = 560,
+    this.messageStyle,
+    this.actionStyle,
     super.nonBlocking,
     super.enabled,
   }) : actions = actions ?? [],
+       bottomOffsets = bottomOffsets ?? {},
        super(type: ActionType.showToast);
 
   /// Whether the toast shows a button.
   bool get hasAction => actionLabel.trim().isNotEmpty;
 
+  /// The distance from the bottom of a screen [width] wide.
+  double bottomOffsetFor(double width) =>
+      bottomOffsets[ScreenBreakpoint.forWidth(width)] ?? bottomOffset;
+
   @override
   List<Object?> get props => [
     message,
@@ -122,7 +182,19 @@ class ShowToastAction extends ActionModel with Equatable, SerializableMixin {
     actionLabel,
     actions,
     icon,
+    iconSize,
     bottomOffset,
+    bottomOffsets,
+    actionColor,
+    showClose,
+    closeColor,
+    cornerRadius,
+    border,
+    shadows,
+    padding,
+    maxWidth,
+    messageStyle,
+    actionStyle,
   ];
 
   /// Duplicates this [ShowToastAction] with given data overrides.
@@ -139,7 +211,27 @@ class ShowToastAction extends ActionModel with Equatable, SerializableMixin {
     List<ActionModel>? actions,
     MultiSourceIconModel? icon,
     bool clearIcon = false,
+    double? iconSize,
     double? bottomOffset,
+    Map<ScreenBreakpoint, double>? bottomOffsets,
+    ColorRGBA? actionColor,
+    bool clearActionColor = false,
+    bool? showClose,
+    ColorRGBA? closeColor,
+    bool clearCloseColor = false,
+    double? cornerRadius,
+    bool clearCornerRadius = false,
+    BorderSideModel? border,
+    bool clearBorder = false,
+    List<Effect>? shadows,
+    bool clearShadows = false,
+    EdgeInsetsModel? padding,
+    bool clearPadding = false,
+    double? maxWidth,
+    TextStyleModel? messageStyle,
+    bool clearMessageStyle = false,
+    TextStyleModel? actionStyle,
+    bool clearActionStyle = false,
   }) => ShowToastAction(
     message: message ?? this.message,
     duration: duration ?? this.duration,
@@ -152,7 +244,19 @@ class ShowToastAction extends ActionModel with Equatable, SerializableMixin {
     actionLabel: actionLabel ?? this.actionLabel,
     actions: actions ?? this.actions,
     icon: clearIcon ? null : icon ?? this.icon,
+    iconSize: iconSize ?? this.iconSize,
     bottomOffset: bottomOffset ?? this.bottomOffset,
+    bottomOffsets: bottomOffsets ?? this.bottomOffsets,
+    actionColor: clearActionColor ? null : actionColor ?? this.actionColor,
+    showClose: showClose ?? this.showClose,
+    closeColor: clearCloseColor ? null : closeColor ?? this.closeColor,
+    cornerRadius: clearCornerRadius ? null : cornerRadius ?? this.cornerRadius,
+    border: clearBorder ? null : border ?? this.border,
+    shadows: clearShadows ? null : shadows ?? this.shadows,
+    padding: clearPadding ? null : padding ?? this.padding,
+    maxWidth: maxWidth ?? this.maxWidth,
+    messageStyle: clearMessageStyle ? null : messageStyle ?? this.messageStyle,
+    actionStyle: clearActionStyle ? null : actionStyle ?? this.actionStyle,
     nonBlocking: nonBlocking,
     enabled: enabled,
   );