@justin_evo/evo-ui 1.1.0 → 1.2.1

package/src/css/notification.module.scss

@@ -1,691 +1,691 @@
-@use 'base/variables' as *;
-@use 'base/color' as *;
-
-// ============================================================
-// EvoNotification — toast + inbox stylesheet
-// ------------------------------------------------------------
-// Two visual subsystems share this file:
-//   1. Toast (transient, portaled to body)
-//   2. Bell + Panel + Item (inbox center)
-// All colour comes from --evo-color-* tokens so dark mode is
-// automatic. Six anchors and a strict mobile breakpoint below.
-// ============================================================
-
-// ---------- Animations ----------
-
-@keyframes evoToastEnterRight {
-  from { transform: translateX(110%); opacity: 0; }
-  to   { transform: translateX(0);    opacity: 1; }
-}
-
-@keyframes evoToastEnterLeft {
-  from { transform: translateX(-110%); opacity: 0; }
-  to   { transform: translateX(0);     opacity: 1; }
-}
-
-@keyframes evoToastEnterTop {
-  from { transform: translateY(-110%); opacity: 0; }
-  to   { transform: translateY(0);     opacity: 1; }
-}
-
-@keyframes evoToastEnterBottom {
-  from { transform: translateY(110%); opacity: 0; }
-  to   { transform: translateY(0);    opacity: 1; }
-}
-
-@keyframes evoToastExit {
-  from { opacity: 1; transform: scale(1); }
-  to   { opacity: 0; transform: scale(0.92); }
-}
-
-@keyframes evoPanelEnter {
-  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
-  to   { opacity: 1; transform: translateY(0)   scale(1); }
-}
-
-// ---------- Toaster (portal root) ----------
-
-.toasterRoot {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 10000;
-}
-
-// Visually-hidden screen-reader live region. Always present in the DOM so
-// announcements fire reliably when its text content changes.
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-}
-
-.anchor {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 1rem;
-  max-width: min(420px, calc(100vw - 2rem));
-  pointer-events: none;
-}
-
-.anchor > * {
-  pointer-events: auto;
-}
-
-// Stacking direction. The newest toast is always rendered last in the DOM and
-// must sit flush against the anchored screen edge — top anchors grow downward
-// from the top, bottom anchors grow upward from the bottom. So top anchors
-// reverse the column (DOM-last renders visually first/topmost) while bottom
-// anchors keep the natural column (DOM-last renders visually last/bottom-most).
-// The depth offset in ToastRow then pushes older cards *away* from that edge.
-.anchor-top-left    { top: 0; left: 0; align-items: flex-start; flex-direction: column-reverse; }
-.anchor-top-center  { top: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
-.anchor-top-right   { top: 0; right: 0; align-items: flex-end; flex-direction: column-reverse; }
-.anchor-bottom-left { bottom: 0; left: 0; align-items: flex-start; }
-.anchor-bottom-center {
-  bottom: 0; left: 50%; transform: translateX(-50%);
-  align-items: center;
-}
-.anchor-bottom-right {
-  bottom: 0; right: 0; align-items: flex-end;
-}
-
-// Mobile: pin to top or bottom edge, full-width.
-@media (max-width: 23.4375rem) { // 375px
-  .anchor {
-    left: 0 !important;
-    right: 0 !important;
-    transform: none !important;
-    max-width: 100%;
-    padding: 0.5rem;
-    align-items: stretch;
-  }
-}
-
-.overflowPill {
-  font-size: $text-xs;
-  font-weight: 600;
-  color: $color-text-secondary;
-  background-color: $color-surface-elevated;
-  border: 1px solid $color-border;
-  border-radius: $radius-full;
-  padding: 0.25rem 0.625rem;
-  box-shadow: $shadow-sm;
-}
-
-// ---------- Single toast card ----------
-
-.toast {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-  padding: 0.75rem 0.875rem;
-  min-width: 280px;
-  max-width: 100%;
-  background-color: $color-surface-elevated;
-  color: $color-text-primary;
-  border: 1px solid $color-border;
-  border-radius: $radius-md;
-  box-shadow: $shadow-xl;
-  font-family: $font-sans;
-  font-size: $text-sm;
-  line-height: 1.45;
-  // Left colour bar (severity)
-  border-left-width: 3px;
-  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
-              opacity 220ms ease;
-  will-change: transform, opacity;
-
-  // Width parity on mobile.
-  @media (max-width: 23.4375rem) {
-    min-width: 0;
-    width: 100%;
-  }
-}
-
-// Anchor-aware enter animations applied via parent.
-.anchor-top-right    > .toast { animation: evoToastEnterRight 240ms cubic-bezier(0.16, 1, 0.3, 1); }
-.anchor-bottom-right > .toast { animation: evoToastEnterRight 240ms cubic-bezier(0.16, 1, 0.3, 1); }
-.anchor-top-left     > .toast { animation: evoToastEnterLeft  240ms cubic-bezier(0.16, 1, 0.3, 1); }
-.anchor-bottom-left  > .toast { animation: evoToastEnterLeft  240ms cubic-bezier(0.16, 1, 0.3, 1); }
-.anchor-top-center   > .toast { animation: evoToastEnterTop   240ms cubic-bezier(0.16, 1, 0.3, 1); }
-.anchor-bottom-center > .toast { animation: evoToastEnterBottom 240ms cubic-bezier(0.16, 1, 0.3, 1); }
-
-.toast.exiting {
-  animation: evoToastExit 180ms ease forwards;
-}
-
-.toast.noMotion,
-.toast.noMotion.exiting {
-  animation: none !important;
-  transition: opacity 1ms linear !important;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .toast,
-  .toast.exiting {
-    animation: none !important;
-    transition: opacity 1ms linear !important;
-  }
-}
-
-.sev-success {
-  border-left-color: $evo-success-color;
-  .toastIcon { background-color: $evo-success-color; color: $evo-success-fg; }
-}
-.sev-error {
-  border-left-color: $evo-danger-color;
-  .toastIcon { background-color: $evo-danger-color; color: $evo-danger-fg; }
-}
-.sev-warning {
-  border-left-color: $evo-warning-color;
-  .toastIcon { background-color: $evo-warning-color; color: $evo-warning-text; }
-}
-.sev-info {
-  border-left-color: $evo-info-color;
-  .toastIcon { background-color: $evo-info-color; color: $evo-info-fg; }
-}
-
-.toastIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 50%;
-  font-size: $text-xs;
-  font-weight: 700;
-  flex-shrink: 0;
-  margin-top: 0.0625rem;
-}
-
-.toastBody {
-  flex: 1;
-  min-width: 0;
-}
-
-.toastTitle {
-  font-weight: 600;
-  color: $color-text-primary;
-}
-
-.toastDescription {
-  margin-top: 0.1875rem;
-  color: $color-text-secondary;
-  font-size: $text-sm;
-}
-
-// Count badge for coalesced toasts (groupKey) — "×3" beside the title.
-.toastCount {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.25rem;
-  height: 1.125rem;
-  margin-left: 0.375rem;
-  padding: 0 0.3125rem;
-  font-size: $text-xs;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  color: $color-text-secondary;
-  background-color: $color-surface-sunken;
-  border: 1px solid $color-border;
-  border-radius: $radius-full;
-  vertical-align: middle;
-}
-
-// Determinate progress bar (toast.progress / EvoToastOptions.progress).
-// Pinned along the bottom edge of the card.
-.toastProgressTrack {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 3px;
-  background-color: $color-border-subtle;
-  border-bottom-left-radius: $radius-md;
-  border-bottom-right-radius: $radius-md;
-  overflow: hidden;
-}
-
-.toastProgressFill {
-  height: 100%;
-  width: 100%;
-  transform-origin: left center;
-  background-color: $evo-primary-color;
-  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-// Fill tracks the toast severity so a resolved progress toast reads green.
-.sev-success .toastProgressFill { background-color: $evo-success-color; }
-.sev-error   .toastProgressFill { background-color: $evo-danger-color; }
-.sev-warning .toastProgressFill { background-color: $evo-warning-color; }
-.sev-info    .toastProgressFill { background-color: $evo-info-color; }
-
-.toast.noMotion .toastProgressFill { transition: none; }
-
-@media (prefers-reduced-motion: reduce) {
-  .toastProgressFill { transition: none; }
-}
-
-.toastAction {
-  align-self: center;
-  font: inherit;
-  font-weight: 600;
-  font-size: $text-xs;
-  color: $evo-primary-color;
-  background: transparent;
-  border: 1px solid $color-border;
-  border-radius: $radius-sm;
-  padding: 0.25rem 0.5rem;
-  cursor: pointer;
-  flex-shrink: 0;
-  min-height: 1.75rem;
-  transition: background-color $transition-fast, border-color $transition-fast;
-
-  &:hover { background-color: $color-surface-hover; }
-  &:focus-visible {
-    outline: 2px solid $evo-primary-focus;
-    outline-offset: 1px;
-  }
-}
-
-.toastClose {
-  align-self: flex-start;
-  background: transparent;
-  border: none;
-  color: $color-text-muted;
-  font-size: $text-xs;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: $radius-sm;
-  flex-shrink: 0;
-  transition: color $transition-fast, background-color $transition-fast;
-
-  &:hover { color: $color-text-primary; background-color: $color-surface-hover; }
-  &:focus-visible {
-    outline: 2px solid $evo-primary-focus;
-    outline-offset: 1px;
-  }
-}
-
-// ---------- Bell ----------
-
-.bellWrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.bell {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: $radius-full;
-  color: $color-text-primary;
-  cursor: pointer;
-  font: inherit;
-  transition: background-color $transition-fast, color $transition-fast, border-color $transition-fast;
-
-  &:hover { background-color: $color-surface-hover; }
-  &:focus-visible {
-    outline: 2px solid $evo-primary-focus;
-    outline-offset: 2px;
-  }
-}
-
-.bell-ghost  { background-color: transparent; }
-.bell-solid  {
-  background-color: $color-surface-elevated;
-  border-color: $color-border;
-}
-
-.bell-sm { width: 2rem;    height: 2rem; }
-.bell-md { width: 2.75rem; height: 2.75rem; } // 44px — WCAG touch target
-.bell-lg { width: 3rem;    height: 3rem; }
-
-.bellOpen {
-  background-color: $color-surface-hover;
-}
-
-.bellBadge {
-  position: absolute;
-  top: 0.125rem;
-  right: 0.125rem;
-  min-width: 1rem;
-  height: 1rem;
-  padding: 0 0.25rem;
-  background-color: $evo-danger-color;
-  color: $evo-danger-fg;
-  font-size: 0.625rem;
-  font-weight: 700;
-  border-radius: $radius-full;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid $color-surface;
-  line-height: 1;
-}
-
-.bellBadgeZero {
-  background-color: $color-border-strong;
-  color: $color-text-inverted;
-}
-
-// ---------- Panel placement (anchored to Bell) ----------
-
-.bellPanelHost {
-  position: absolute;
-  z-index: 9001;
-  min-width: 22rem;
-  max-width: 24rem;
-
-  @media (max-width: 30rem) {
-    position: fixed;
-    top: auto !important;
-    bottom: auto !important;
-    left: 0.5rem !important;
-    right: 0.5rem !important;
-    min-width: 0;
-    max-width: none;
-  }
-}
-
-.place-bottom-end   { top: calc(100% + 0.5rem); right: 0; }
-.place-bottom-start { top: calc(100% + 0.5rem); left: 0; }
-.place-bottom       { top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); }
-.place-top-end      { bottom: calc(100% + 0.5rem); right: 0; }
-.place-top-start    { bottom: calc(100% + 0.5rem); left: 0; }
-
-// ---------- Panel ----------
-
-.panel {
-  background-color: $color-surface-elevated;
-  border: 1px solid $color-border;
-  border-radius: $radius-lg;
-  box-shadow: $shadow-xl;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  font-family: $font-sans;
-  color: $color-text-primary;
-  animation: evoPanelEnter 160ms ease;
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-}
-
-.panelHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid $color-border;
-  gap: 0.5rem;
-}
-
-.panelTitle {
-  font-weight: 600;
-  font-size: $text-sm;
-}
-
-.panelHeaderActions {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.panelMarkAll {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font: inherit;
-  font-size: $text-xs;
-  font-weight: 600;
-  color: $evo-primary-color;
-  padding: 0.25rem 0.5rem;
-  border-radius: $radius-sm;
-  min-height: 1.75rem;
-
-  &:hover { background-color: $color-surface-hover; }
-  &:focus-visible {
-    outline: 2px solid $evo-primary-focus;
-    outline-offset: 1px;
-  }
-}
-
-.panelClose {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: $color-text-muted;
-  padding: 0.25rem;
-  font-size: $text-xs;
-  border-radius: $radius-sm;
-  min-height: 1.75rem;
-  min-width: 1.75rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover { color: $color-text-primary; background-color: $color-surface-hover; }
-}
-
-.panelBody {
-  overflow-y: auto;
-}
-
-.panelState {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem 1.5rem;
-  color: $color-text-secondary;
-  font-size: $text-sm;
-  text-align: center;
-}
-
-.panelStateError {
-  color: $evo-danger-color;
-}
-
-.itemList {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  li {
-    border-bottom: 1px solid $color-border-subtle;
-
-    &:last-child { border-bottom: none; }
-  }
-}
-
-// ---------- Empty state ----------
-
-.emptyState {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 2rem 1rem;
-  text-align: center;
-}
-
-.emptyIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 50%;
-  background-color: $color-surface-sunken;
-  color: $color-text-muted;
-}
-
-.emptyTitle {
-  font-weight: 600;
-  font-size: $text-sm;
-  color: $color-text-primary;
-}
-
-.emptyHint {
-  font-size: $text-xs;
-  color: $color-text-secondary;
-}
-
-// ---------- Item ----------
-
-.item {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-  padding: 0.75rem 1rem 0.75rem 1.25rem;
-  background-color: transparent;
-  transition: background-color $transition-fast;
-
-  &.itemUnread { background-color: color-mix(in srgb, $evo-primary-color 6%, transparent); }
-}
-
-.itemInteractive {
-  cursor: pointer;
-
-  &:hover { background-color: $color-surface-hover; }
-  &:focus-visible {
-    outline: 2px solid $evo-primary-focus;
-    outline-offset: -2px;
-  }
-}
-
-.itemUnreadDot {
-  position: absolute;
-  left: 0.5rem;
-  top: 1rem;
-  width: 0.4375rem;
-  height: 0.4375rem;
-  border-radius: 50%;
-  background-color: $evo-primary-color;
-  opacity: 1;
-
-  // Hidden when read (parent doesn't get .itemUnread).
-  .item:not(.itemUnread) & { opacity: 0; }
-}
-
-.itemMedia {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: $color-text-inverted;
-  font-size: $text-xs;
-  font-weight: 700;
-  flex-shrink: 0;
-  overflow: hidden;
-
-  &.sev-success { background-color: $evo-success-color; }
-  &.sev-error   { background-color: $evo-danger-color; }
-  &.sev-warning { background-color: $evo-warning-color; }
-  &.sev-info    { background-color: $evo-info-color; }
-}
-
-.itemAvatar {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.itemMediaGlyph {
-  line-height: 1;
-}
-
-.itemBody {
-  flex: 1;
-  min-width: 0;
-}
-
-.itemTitle {
-  font-size: $text-sm;
-  font-weight: 600;
-  color: $color-text-primary;
-  line-height: 1.35;
-}
-
-.itemDescription {
-  margin-top: 0.125rem;
-  font-size: $text-sm;
-  color: $color-text-secondary;
-  line-height: 1.4;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.itemMeta {
-  margin-top: 0.375rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: $text-xs;
-  color: $color-text-muted;
-}
-
-.itemTimestamp {
-  font-variant-numeric: tabular-nums;
-}
-
-.itemAction {
-  background: transparent;
-  border: 1px solid $color-border;
-  color: $evo-primary-color;
-  border-radius: $radius-sm;
-  cursor: pointer;
-  font: inherit;
-  font-size: $text-xs;
-  font-weight: 600;
-  padding: 0.1875rem 0.5rem;
-  min-height: 1.5rem;
-
-  &:hover { background-color: $color-surface-hover; }
-  &:focus-visible {
-    outline: 2px solid $evo-primary-focus;
-    outline-offset: 1px;
-  }
-}
-
-.itemDismiss {
-  align-self: flex-start;
-  background: transparent;
-  border: none;
-  color: $color-text-muted;
-  font-size: $text-xs;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: $radius-sm;
-  opacity: 0;
-  transition: opacity $transition-fast, color $transition-fast;
-  flex-shrink: 0;
-
-  .item:hover &,
-  &:focus-visible { opacity: 1; }
-  &:hover { color: $color-text-primary; }
-  &:focus-visible {
-    outline: 2px solid $evo-primary-focus;
-    outline-offset: 1px;
-  }
-}
+@use 'base/variables' as *;
+@use 'base/color' as *;
+
+// ============================================================
+// EvoNotification — toast + inbox stylesheet
+// ------------------------------------------------------------
+// Two visual subsystems share this file:
+//   1. Toast (transient, portaled to body)
+//   2. Bell + Panel + Item (inbox center)
+// All colour comes from --evo-color-* tokens so dark mode is
+// automatic. Six anchors and a strict mobile breakpoint below.
+// ============================================================
+
+// ---------- Animations ----------
+
+@keyframes evoToastEnterRight {
+  from { transform: translateX(110%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+}
+
+@keyframes evoToastEnterLeft {
+  from { transform: translateX(-110%); opacity: 0; }
+  to   { transform: translateX(0);     opacity: 1; }
+}
+
+@keyframes evoToastEnterTop {
+  from { transform: translateY(-110%); opacity: 0; }
+  to   { transform: translateY(0);     opacity: 1; }
+}
+
+@keyframes evoToastEnterBottom {
+  from { transform: translateY(110%); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
+}
+
+@keyframes evoToastExit {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.92); }
+}
+
+@keyframes evoPanelEnter {
+  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0)   scale(1); }
+}
+
+// ---------- Toaster (portal root) ----------
+
+.toasterRoot {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10000;
+}
+
+// Visually-hidden screen-reader live region. Always present in the DOM so
+// announcements fire reliably when its text content changes.
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.anchor {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  max-width: min(420px, calc(100vw - 2rem));
+  pointer-events: none;
+}
+
+.anchor > * {
+  pointer-events: auto;
+}
+
+// Stacking direction. The newest toast is always rendered last in the DOM and
+// must sit flush against the anchored screen edge — top anchors grow downward
+// from the top, bottom anchors grow upward from the bottom. So top anchors
+// reverse the column (DOM-last renders visually first/topmost) while bottom
+// anchors keep the natural column (DOM-last renders visually last/bottom-most).
+// The depth offset in ToastRow then pushes older cards *away* from that edge.
+.anchor-top-left    { top: 0; left: 0; align-items: flex-start; flex-direction: column-reverse; }
+.anchor-top-center  { top: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
+.anchor-top-right   { top: 0; right: 0; align-items: flex-end; flex-direction: column-reverse; }
+.anchor-bottom-left { bottom: 0; left: 0; align-items: flex-start; }
+.anchor-bottom-center {
+  bottom: 0; left: 50%; transform: translateX(-50%);
+  align-items: center;
+}
+.anchor-bottom-right {
+  bottom: 0; right: 0; align-items: flex-end;
+}
+
+// Mobile: pin to top or bottom edge, full-width.
+@media (max-width: 23.4375rem) { // 375px
+  .anchor {
+    left: 0 !important;
+    right: 0 !important;
+    transform: none !important;
+    max-width: 100%;
+    padding: 0.5rem;
+    align-items: stretch;
+  }
+}
+
+.overflowPill {
+  font-size: $text-xs;
+  font-weight: 600;
+  color: $color-text-secondary;
+  background-color: $color-surface-elevated;
+  border: 1px solid $color-border;
+  border-radius: $radius-full;
+  padding: 0.25rem 0.625rem;
+  box-shadow: $shadow-sm;
+}
+
+// ---------- Single toast card ----------
+
+.toast {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.75rem 0.875rem;
+  min-width: 280px;
+  max-width: 100%;
+  background-color: $color-surface-elevated;
+  color: $color-text-primary;
+  border: 1px solid $color-border;
+  border-radius: $radius-md;
+  box-shadow: $shadow-xl;
+  font-family: $font-sans;
+  font-size: $text-sm;
+  line-height: 1.45;
+  // Left colour bar (severity)
+  border-left-width: 3px;
+  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
+              opacity 220ms ease;
+  will-change: transform, opacity;
+
+  // Width parity on mobile.
+  @media (max-width: 23.4375rem) {
+    min-width: 0;
+    width: 100%;
+  }
+}
+
+// Anchor-aware enter animations applied via parent.
+.anchor-top-right    > .toast { animation: evoToastEnterRight 240ms cubic-bezier(0.16, 1, 0.3, 1); }
+.anchor-bottom-right > .toast { animation: evoToastEnterRight 240ms cubic-bezier(0.16, 1, 0.3, 1); }
+.anchor-top-left     > .toast { animation: evoToastEnterLeft  240ms cubic-bezier(0.16, 1, 0.3, 1); }
+.anchor-bottom-left  > .toast { animation: evoToastEnterLeft  240ms cubic-bezier(0.16, 1, 0.3, 1); }
+.anchor-top-center   > .toast { animation: evoToastEnterTop   240ms cubic-bezier(0.16, 1, 0.3, 1); }
+.anchor-bottom-center > .toast { animation: evoToastEnterBottom 240ms cubic-bezier(0.16, 1, 0.3, 1); }
+
+.toast.exiting {
+  animation: evoToastExit 180ms ease forwards;
+}
+
+.toast.noMotion,
+.toast.noMotion.exiting {
+  animation: none !important;
+  transition: opacity 1ms linear !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast,
+  .toast.exiting {
+    animation: none !important;
+    transition: opacity 1ms linear !important;
+  }
+}
+
+.sev-success {
+  border-left-color: $evo-success-color;
+  .toastIcon { background-color: $evo-success-color; color: $evo-success-fg; }
+}
+.sev-error {
+  border-left-color: $evo-danger-color;
+  .toastIcon { background-color: $evo-danger-color; color: $evo-danger-fg; }
+}
+.sev-warning {
+  border-left-color: $evo-warning-color;
+  .toastIcon { background-color: $evo-warning-color; color: $evo-warning-text; }
+}
+.sev-info {
+  border-left-color: $evo-info-color;
+  .toastIcon { background-color: $evo-info-color; color: $evo-info-fg; }
+}
+
+.toastIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  font-size: $text-xs;
+  font-weight: 700;
+  flex-shrink: 0;
+  margin-top: 0.0625rem;
+}
+
+.toastBody {
+  flex: 1;
+  min-width: 0;
+}
+
+.toastTitle {
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.toastDescription {
+  margin-top: 0.1875rem;
+  color: $color-text-secondary;
+  font-size: $text-sm;
+}
+
+// Count badge for coalesced toasts (groupKey) — "×3" beside the title.
+.toastCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.125rem;
+  margin-left: 0.375rem;
+  padding: 0 0.3125rem;
+  font-size: $text-xs;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: $color-text-secondary;
+  background-color: $color-surface-sunken;
+  border: 1px solid $color-border;
+  border-radius: $radius-full;
+  vertical-align: middle;
+}
+
+// Determinate progress bar (toast.progress / EvoToastOptions.progress).
+// Pinned along the bottom edge of the card.
+.toastProgressTrack {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  background-color: $color-border-subtle;
+  border-bottom-left-radius: $radius-md;
+  border-bottom-right-radius: $radius-md;
+  overflow: hidden;
+}
+
+.toastProgressFill {
+  height: 100%;
+  width: 100%;
+  transform-origin: left center;
+  background-color: $evo-primary-color;
+  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+// Fill tracks the toast severity so a resolved progress toast reads green.
+.sev-success .toastProgressFill { background-color: $evo-success-color; }
+.sev-error   .toastProgressFill { background-color: $evo-danger-color; }
+.sev-warning .toastProgressFill { background-color: $evo-warning-color; }
+.sev-info    .toastProgressFill { background-color: $evo-info-color; }
+
+.toast.noMotion .toastProgressFill { transition: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .toastProgressFill { transition: none; }
+}
+
+.toastAction {
+  align-self: center;
+  font: inherit;
+  font-weight: 600;
+  font-size: $text-xs;
+  color: $evo-primary-color;
+  background: transparent;
+  border: 1px solid $color-border;
+  border-radius: $radius-sm;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  min-height: 1.75rem;
+  transition: background-color $transition-fast, border-color $transition-fast;
+
+  &:hover { background-color: $color-surface-hover; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 1px;
+  }
+}
+
+.toastClose {
+  align-self: flex-start;
+  background: transparent;
+  border: none;
+  color: $color-text-muted;
+  font-size: $text-xs;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: $radius-sm;
+  flex-shrink: 0;
+  transition: color $transition-fast, background-color $transition-fast;
+
+  &:hover { color: $color-text-primary; background-color: $color-surface-hover; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 1px;
+  }
+}
+
+// ---------- Bell ----------
+
+.bellWrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.bell {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: $radius-full;
+  color: $color-text-primary;
+  cursor: pointer;
+  font: inherit;
+  transition: background-color $transition-fast, color $transition-fast, border-color $transition-fast;
+
+  &:hover { background-color: $color-surface-hover; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 2px;
+  }
+}
+
+.bell-ghost  { background-color: transparent; }
+.bell-solid  {
+  background-color: $color-surface-elevated;
+  border-color: $color-border;
+}
+
+.bell-sm { width: 2rem;    height: 2rem; }
+.bell-md { width: 2.75rem; height: 2.75rem; } // 44px — WCAG touch target
+.bell-lg { width: 3rem;    height: 3rem; }
+
+.bellOpen {
+  background-color: $color-surface-hover;
+}
+
+.bellBadge {
+  position: absolute;
+  top: 0.125rem;
+  right: 0.125rem;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  background-color: $evo-danger-color;
+  color: $evo-danger-fg;
+  font-size: 0.625rem;
+  font-weight: 700;
+  border-radius: $radius-full;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid $color-surface;
+  line-height: 1;
+}
+
+.bellBadgeZero {
+  background-color: $color-border-strong;
+  color: $color-text-inverted;
+}
+
+// ---------- Panel placement (anchored to Bell) ----------
+
+.bellPanelHost {
+  position: absolute;
+  z-index: 9001;
+  min-width: 22rem;
+  max-width: 24rem;
+
+  @media (max-width: 30rem) {
+    position: fixed;
+    top: auto !important;
+    bottom: auto !important;
+    left: 0.5rem !important;
+    right: 0.5rem !important;
+    min-width: 0;
+    max-width: none;
+  }
+}
+
+.place-bottom-end   { top: calc(100% + 0.5rem); right: 0; }
+.place-bottom-start { top: calc(100% + 0.5rem); left: 0; }
+.place-bottom       { top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); }
+.place-top-end      { bottom: calc(100% + 0.5rem); right: 0; }
+.place-top-start    { bottom: calc(100% + 0.5rem); left: 0; }
+
+// ---------- Panel ----------
+
+.panel {
+  background-color: $color-surface-elevated;
+  border: 1px solid $color-border;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-xl;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: $font-sans;
+  color: $color-text-primary;
+  animation: evoPanelEnter 160ms ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid $color-border;
+  gap: 0.5rem;
+}
+
+.panelTitle {
+  font-weight: 600;
+  font-size: $text-sm;
+}
+
+.panelHeaderActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.panelMarkAll {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  font-size: $text-xs;
+  font-weight: 600;
+  color: $evo-primary-color;
+  padding: 0.25rem 0.5rem;
+  border-radius: $radius-sm;
+  min-height: 1.75rem;
+
+  &:hover { background-color: $color-surface-hover; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 1px;
+  }
+}
+
+.panelClose {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: $color-text-muted;
+  padding: 0.25rem;
+  font-size: $text-xs;
+  border-radius: $radius-sm;
+  min-height: 1.75rem;
+  min-width: 1.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover { color: $color-text-primary; background-color: $color-surface-hover; }
+}
+
+.panelBody {
+  overflow-y: auto;
+}
+
+.panelState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1.5rem;
+  color: $color-text-secondary;
+  font-size: $text-sm;
+  text-align: center;
+}
+
+.panelStateError {
+  color: $evo-danger-color;
+}
+
+.itemList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    border-bottom: 1px solid $color-border-subtle;
+
+    &:last-child { border-bottom: none; }
+  }
+}
+
+// ---------- Empty state ----------
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 2rem 1rem;
+  text-align: center;
+}
+
+.emptyIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background-color: $color-surface-sunken;
+  color: $color-text-muted;
+}
+
+.emptyTitle {
+  font-weight: 600;
+  font-size: $text-sm;
+  color: $color-text-primary;
+}
+
+.emptyHint {
+  font-size: $text-xs;
+  color: $color-text-secondary;
+}
+
+// ---------- Item ----------
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.75rem 1rem 0.75rem 1.25rem;
+  background-color: transparent;
+  transition: background-color $transition-fast;
+
+  &.itemUnread { background-color: color-mix(in srgb, $evo-primary-color 6%, transparent); }
+}
+
+.itemInteractive {
+  cursor: pointer;
+
+  &:hover { background-color: $color-surface-hover; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: -2px;
+  }
+}
+
+.itemUnreadDot {
+  position: absolute;
+  left: 0.5rem;
+  top: 1rem;
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 50%;
+  background-color: $evo-primary-color;
+  opacity: 1;
+
+  // Hidden when read (parent doesn't get .itemUnread).
+  .item:not(.itemUnread) & { opacity: 0; }
+}
+
+.itemMedia {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: $color-text-inverted;
+  font-size: $text-xs;
+  font-weight: 700;
+  flex-shrink: 0;
+  overflow: hidden;
+
+  &.sev-success { background-color: $evo-success-color; }
+  &.sev-error   { background-color: $evo-danger-color; }
+  &.sev-warning { background-color: $evo-warning-color; }
+  &.sev-info    { background-color: $evo-info-color; }
+}
+
+.itemAvatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.itemMediaGlyph {
+  line-height: 1;
+}
+
+.itemBody {
+  flex: 1;
+  min-width: 0;
+}
+
+.itemTitle {
+  font-size: $text-sm;
+  font-weight: 600;
+  color: $color-text-primary;
+  line-height: 1.35;
+}
+
+.itemDescription {
+  margin-top: 0.125rem;
+  font-size: $text-sm;
+  color: $color-text-secondary;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.itemMeta {
+  margin-top: 0.375rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: $text-xs;
+  color: $color-text-muted;
+}
+
+.itemTimestamp {
+  font-variant-numeric: tabular-nums;
+}
+
+.itemAction {
+  background: transparent;
+  border: 1px solid $color-border;
+  color: $evo-primary-color;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  font: inherit;
+  font-size: $text-xs;
+  font-weight: 600;
+  padding: 0.1875rem 0.5rem;
+  min-height: 1.5rem;
+
+  &:hover { background-color: $color-surface-hover; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 1px;
+  }
+}
+
+.itemDismiss {
+  align-self: flex-start;
+  background: transparent;
+  border: none;
+  color: $color-text-muted;
+  font-size: $text-xs;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: $radius-sm;
+  opacity: 0;
+  transition: opacity $transition-fast, color $transition-fast;
+  flex-shrink: 0;
+
+  .item:hover &,
+  &:focus-visible { opacity: 1; }
+  &:hover { color: $color-text-primary; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 1px;
+  }
+}