/* CUISnackbar + host - mirrors cui_snackbar.dart / cui_snackbar_host.dart. Variants success|failure (status gradients) | neutral (default surface + border).
   Radius 2xl card (no badge, icon-md for every variant), body-sm message clamped to 3 lines, optional action + 1px divider + close, 4px inner highlight, md shadow.
   Enter 420ms (slide cubic-bezier(.22,1.1,.36,1), fade cubic-bezier(.22,1,.36,1)); exit 220ms cubic-bezier(.4,0,.7,.3); exit is held while pressed. max-width 463, md margin from the host edges. */
.cui-snackbar-host { --_in: calc(420ms / var(--cui-speed, 1)); --_out: calc(220ms / var(--cui-speed, 1)); position: relative; isolation: isolate; width: 100%; height: 420px; overflow: hidden;
  border-radius: var(--cui-radius-lg); border: var(--cui-border-default) solid var(--cui-color-border-default); background: var(--cui-color-surface-bg-canvas); }
.cui-snackbar-host__page { position: absolute; inset: 0; padding: var(--cui-space-md); display: flex; flex-direction: column; gap: var(--cui-space-sm); color: var(--cui-color-text-default); }
.cui-snackbar-host__hint { margin: 0; font-family: var(--cui-type-body-sm-family); font-size: var(--cui-type-body-sm-size); line-height: var(--cui-type-body-sm-line); color: var(--cui-color-text-subtle); }
.cui-snackbar-host__buttons { display: flex; flex-wrap: wrap; gap: var(--cui-space-xs); }
.cui-snackbar-host__viewport { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; box-sizing: border-box; padding: var(--cui-space-md);
  display: flex; justify-content: center; pointer-events: none; }

.cui-snackbar { --_bg: var(--cui-color-surface-bg-default); --_fg: var(--cui-color-text-default); --_bg-img: none; --_border: transparent;
  position: relative; box-sizing: border-box; max-width: 463px; min-width: 0; overflow: hidden; pointer-events: auto;
  background: var(--_bg); background-image: var(--_bg-img); color: var(--_fg);
  border-radius: var(--cui-radius-2xl); box-shadow: var(--cui-shadow-md);
  transform: translateY(100%); opacity: 0;
  /* enter 420ms: slide overshoots slightly (1.1), fade eases out */
  transition: transform var(--_in) cubic-bezier(0.22, 1.1, 0.36, 1), opacity var(--_in) cubic-bezier(0.22, 1, 0.36, 1); }
/* exit 220ms, both easeIn-ish */
.cui-snackbar.is-exiting { transition: transform var(--_out) cubic-bezier(0.4, 0, 0.7, 0.3), opacity var(--_out) cubic-bezier(0.4, 0, 0.7, 0.3); }
.cui-snackbar.is-visible { transform: none; opacity: 1; }
.cui-snackbar--success { --_bg: #16A34A; --_bg-img: linear-gradient(to bottom, #16A34A, #083D1C); --_fg: #FFFFFF; }
.cui-snackbar--failure { --_bg: #6B2F1F; --_bg-img: linear-gradient(to bottom, #6B2F1F, #3A1D16); --_fg: #FFFFFF; }
.cui-snackbar--neutral { --_border: var(--cui-color-border-default); }
.cui-snackbar::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 var(--cui-border-default) var(--_border); }
/* inset highlight: the 4px crescent at the bottom, white @ 25% */
.cui-snackbar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 0.25); }

.cui-snackbar__content { display: flex; align-items: center; gap: var(--cui-space-sm); padding: var(--cui-space-sm) var(--cui-space-md) var(--cui-space-md); }
.cui-snackbar__message { margin: 0; min-width: 0; overflow-wrap: anywhere; font-family: var(--cui-type-body-sm-family); font-size: var(--cui-type-body-sm-size);
  font-weight: var(--cui-type-body-sm-weight); letter-spacing: var(--cui-type-body-sm-spacing); line-height: var(--cui-type-body-sm-line);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.cui-snackbar__icon { flex: none; display: inline-flex; width: var(--cui-size-icon-md); height: var(--cui-size-icon-md); }
.cui-snackbar__icon .cui-icon { width: 100%; height: 100%; }
.cui-snackbar__action { appearance: none; background: none; border: 0; margin: 0; padding: 0; flex: none; cursor: pointer; color: inherit; text-decoration: underline;
  font-family: var(--cui-type-body-sm-semi-family); font-size: var(--cui-type-body-sm-semi-size); font-weight: var(--cui-type-body-sm-semi-weight);
  letter-spacing: var(--cui-type-body-sm-semi-spacing); line-height: var(--cui-type-body-sm-semi-line); }
/* divider before close: 1px, full row height, (border colour | border-subtle) @ 20% */
.cui-snackbar__divider { flex: none; align-self: stretch; width: var(--cui-border-default); background: color-mix(in srgb, var(--_divider, var(--cui-color-border-subtle)) 20%, transparent); }
.cui-snackbar--neutral { --_divider: var(--cui-color-border-default); }
/* close: 16px glyph with a 48px hit area */
.cui-snackbar__close { appearance: none; background: none; border: 0; margin: 0; padding: 0; position: relative; flex: none; cursor: pointer; color: inherit;
  width: var(--cui-size-icon-sm); height: var(--cui-size-icon-sm); display: inline-flex; }
.cui-snackbar__close::before { content: ''; position: absolute; left: -16px; top: -16px; width: 48px; height: 48px; }
.cui-snackbar__x { display: inline-flex; width: 100%; height: 100%; transform: rotate(45deg); }
.cui-snackbar__x .cui-icon { width: 100%; height: 100%; }
.cui-snackbar__action:focus-visible, .cui-snackbar__close:focus-visible { outline: var(--cui-border-thick) solid var(--cui-color-border-focus); outline-offset: 2px; border-radius: var(--cui-radius-xs); }
@media (prefers-reduced-motion: reduce) { .cui-snackbar-host { --_in: 0.01ms; --_out: 0.01ms; } }
:root[data-app="device"] .cui-snackbar-host { height: 520px; }

.cui-snackbar-host--bare { border: 0; border-radius: 0; background: transparent; }
/* inside the playground's device frame the mock phone simply fills the screen width */
.pg-stage.framed > .cui-snackbar-host { align-self: stretch; width: 100%; max-width: 100%; border-left-width: 0; border-right-width: 0; border-radius: 0; }