atomicuilibrary 0.0.1

package/dist/collection/components/snackbar/snackbar.css

@@ -0,0 +1,1480 @@
+@charset "UTF-8";
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.snackbar-quick-input {
+  width: 100%;
+  margin: 12px 0 0 0;
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+}
+
+.snackbar-quick-input input {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border-default, #e5e7eb);
+  font-size: 15px;
+  background: var(--bg-primary, #ffffff);
+  outline: none;
+  transition: border 0.2s, box-shadow 0.2s;
+}
+
+.snackbar-quick-input input:focus {
+  border: 1.5px solid var(--color-primary, #6366f1);
+  box-shadow: 0 0 0 2px var(--color-primary, #c7d2fe);
+}
+
+:host {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: var(--snackbar-z-index, 10500);
+  transform: translateZ(0);
+  /* ── Theming Tokens (override from consumer) ─────────── */
+  --snackbar-radius: 12px;
+  --snackbar-font: inherit;
+  --snackbar-min-width: 320px;
+  --snackbar-max-width: 440px;
+  --snackbar-z-index: 10500;
+  /* Surface */
+  --snackbar-bg: var(--bg-primary, #fdfdfd);
+  --snackbar-color: var(--text-primary, #1f2937);
+  --snackbar-border: rgba(0, 0, 0, 0.08);
+  --snackbar-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  /* Variant color overrides */
+  --snackbar-success-bg: var(--color-success-hover, #059669);
+  --snackbar-error-bg: var(--color-danger-hover, #dc2626);
+  --snackbar-warning-bg: var(--color-warning-hover, #d97706);
+  --snackbar-info-bg: var(--color-primary-hover, #2563eb);
+  --snackbar-neutral-bg: var(--color-primary, #4b5563);
+  /* Stack badge */
+  --snackbar-badge-bg: rgba(15, 23, 42, 0.85);
+  --snackbar-badge-color: var(--color-primary, #60a5fa);
+}
+
+.snackbar-container {
+  display: block;
+  position: absolute;
+  /* Absolute relative to the fixed host */
+  z-index: 10501;
+  pointer-events: none;
+  width: auto;
+  max-width: 100vw;
+  box-sizing: border-box;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  /* Ensure container doesn't exceed screen and allows internal stacking */
+  max-height: calc(100vh - 40px);
+}
+
+/* Clear All Button Style */
+.snackbar-clear-all {
+  pointer-events: auto;
+  align-self: center;
+  margin-bottom: 8px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  padding: 6px 14px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary, #4b5563);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(8px);
+  transition: all 0.2s;
+  z-index: 2000;
+  /* Hide Clear All when in card-stack mode and not expanded */
+}
+.snackbar-container.card-stack:not(.hovered) .snackbar-clear-all {
+  display: none;
+}
+.snackbar-clear-all:hover {
+  background: var(--bg-primary, #ffffff);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 10px -1px rgba(0, 0, 0, 0.15);
+}
+.snackbar-clear-all .kb-hint {
+  background: rgba(0, 0, 0, 0.05);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 9px;
+  opacity: 0.6;
+}
+
+.snackbar-badge-btn {
+  background: var(--snackbar-badge-bg, rgba(15, 23, 42, 0.85));
+  color: #fff;
+  border-radius: 12px;
+  padding: 2px 8px;
+  font-size: 10px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  transition: transform 0.2s;
+  pointer-events: auto;
+}
+.snackbar-badge-btn:hover {
+  transform: scale(1.05);
+}
+.snackbar-badge-btn ui-icon {
+  margin-left: 4px;
+  display: flex;
+}
+
+.snackbar-history {
+  margin-top: 8px;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 6px;
+  font-size: 12px;
+  max-height: 120px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+.snackbar-history .history-item {
+  display: flex;
+  gap: 8px;
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+.snackbar-history .history-item:last-child {
+  border-bottom: none;
+}
+.snackbar-history .history-item .history-time {
+  color: var(--text-secondary, #6b7280);
+  font-family: monospace;
+  white-space: nowrap;
+}
+.snackbar-history .history-item .history-msg {
+  color: var(--text-primary, #111827);
+}
+
+.theme-dark .snackbar-clear-all {
+  background: var(--bg-primary, #1e293b);
+  color: var(--text-standard, #e2e8f0);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* ── Countdown Chip ────────────────────────────────────────── */
+.snackbar-countdown {
+  position: absolute;
+  bottom: 28px;
+  /* Sits just above the progress bar */
+  right: 12px;
+  background: rgba(0, 0, 0, 0.55);
+  color: rgba(255, 255, 255, 0.9);
+  border-radius: 10px;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 0.3s ease;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 10;
+  min-width: 24px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  /* RTL: flip to left side */
+}
+.snackbar-container.rtl .snackbar-countdown {
+  right: auto;
+  left: 12px;
+}
+
+/* Fade countdown when hovering (timer is paused) */
+.snackbar-container:hover .snackbar-countdown {
+  opacity: 0;
+}
+
+/* Positioning - Relative to viewport edges via absolute positioning on the fixed host */
+.snackbar-container.top-left {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.snackbar-container.top-right {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.snackbar-container.top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.snackbar-container.bottom-left {
+  bottom: 0;
+  left: 0;
+  flex-direction: column-reverse;
+  align-items: flex-start;
+}
+
+.snackbar-container.bottom-right {
+  bottom: 0;
+  right: 0;
+  flex-direction: column-reverse;
+  align-items: flex-end;
+}
+
+.snackbar-container.bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column-reverse;
+  align-items: center;
+}
+
+/* ── RTL Support: Mirror left/right anchors ───────────────── */
+/* When dir="rtl" is set on the page, left and right positions swap */
+.snackbar-container.rtl.top-left {
+  left: auto;
+  right: 0;
+  align-items: flex-end;
+}
+
+.snackbar-container.rtl.top-right {
+  right: auto;
+  left: 0;
+  align-items: flex-start;
+}
+
+.snackbar-container.rtl.bottom-left {
+  left: auto;
+  right: 0;
+  align-items: flex-end;
+}
+
+.snackbar-container.rtl.bottom-right {
+  right: auto;
+  left: 0;
+  align-items: flex-start;
+}
+
+/* RTL: reverse slide-in animations for left/right variants */
+.snackbar-container.rtl .snackbar-item.slide-right {
+  animation-name: slideInLeft;
+}
+
+.snackbar-container.rtl .snackbar-item.slide-left {
+  animation-name: slideInRight;
+}
+
+/* In normal (non-reverse) mode, newest item at TOP (index 0) */
+.snackbar-container:not(.bottom-left):not(.bottom-right):not(.bottom-center) .snackbar-item {
+  order: var(--stack-index);
+}
+
+/* Stacking Mode Specifics */
+.snackbar-container.bottom-left,
+.snackbar-container.bottom-right,
+.snackbar-container.bottom-center {
+  padding-bottom: 24px;
+}
+
+.snackbar-container.top-left,
+.snackbar-container.top-right,
+.snackbar-container.top-center {
+  padding-top: 24px;
+}
+
+/* Stack count badge — shown on collapsed deck */
+.stack-count-badge {
+  position: absolute;
+  bottom: -18px;
+  /* Default: sits below the deck (top-* positions) */
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: rgba(15, 23, 42, 0.85);
+  color: var(--text-standard, #ffffff);
+  border-radius: 20px;
+  padding: 4px 12px;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  z-index: 200;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  transition: all 0.2s ease;
+  pointer-events: auto;
+  white-space: nowrap;
+}
+.stack-count-badge:hover {
+  background: rgba(15, 23, 42, 0.98);
+  transform: translateX(-50%) translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+.stack-count-badge .stack-count-number {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--color-primary, #60a5fa);
+}
+.stack-count-badge .stack-count-label {
+  opacity: 0.7;
+  font-weight: 500;
+}
+
+/* Badge rests ABOVE the deck for bottom-anchored stacks */
+.snackbar-container.bottom-left .stack-count-badge,
+.snackbar-container.bottom-right .stack-count-badge,
+.snackbar-container.bottom-center .stack-count-badge {
+  bottom: auto;
+  top: -18px;
+}
+.snackbar-container.bottom-left .stack-count-badge:hover,
+.snackbar-container.bottom-right .stack-count-badge:hover,
+.snackbar-container.bottom-center .stack-count-badge:hover {
+  transform: translateX(-50%) translateY(2px);
+}
+
+/* Right-aligned stacks: anchor badge to right edge */
+.snackbar-container.top-right .stack-count-badge,
+.snackbar-container.bottom-right .stack-count-badge {
+  left: auto;
+  right: 0;
+  transform: none;
+}
+.snackbar-container.top-right .stack-count-badge:hover,
+.snackbar-container.bottom-right .stack-count-badge:hover {
+  transform: translateY(-2px);
+}
+
+/* Left-aligned stacks: anchor badge to left edge */
+.snackbar-container.top-left .stack-count-badge,
+.snackbar-container.bottom-left .stack-count-badge {
+  left: 0;
+  transform: none;
+}
+.snackbar-container.top-left .stack-count-badge:hover,
+.snackbar-container.bottom-left .stack-count-badge:hover {
+  transform: translateY(-2px);
+}
+
+/* ============================================================
+   CARD STACK MODE — Clean, Position-Aware Deck System
+   ============================================================ */
+.snackbar-container.card-stack {
+  display: flex !important;
+  flex-direction: column;
+  width: 360px;
+  max-width: calc(100vw - 32px);
+  min-height: 160px;
+  padding: 16px;
+  pointer-events: none;
+  /* Container itself is transparent; items re-enable */
+  overflow: visible;
+  --stack-gap: 8px;
+  /* Vertical offset per layer */
+  --stack-shrink: 0.04;
+  /* Width reduction per layer */
+  --stack-opacity: 0.15;
+  /* Opacity Step per layer */
+}
+
+/* Make the hover-detection buffer non-blocking */
+.snackbar-container.card-stack::before {
+  content: "";
+  position: absolute;
+  inset: -8px;
+  background: transparent;
+  pointer-events: auto;
+  z-index: 0;
+}
+
+/* ── Every item in collapsed stack ─────────────────────────── */
+.snackbar-container.card-stack:not(.hovered) .snackbar-item {
+  position: absolute !important;
+  margin: 0 !important;
+  pointer-events: none;
+  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease, width 0.5s ease;
+  width: calc(100% - var(--stack-index, 0) * 14px);
+  opacity: calc(1 - var(--stack-index, 0) * var(--stack-opacity));
+  filter: brightness(calc(1 - var(--stack-index, 0) * 0.08));
+  z-index: calc(50 - var(--stack-index, 0));
+}
+
+/* ── TOP orientations: primary card anchored to top ─────────── */
+.snackbar-container.card-stack.top-left:not(.hovered) .snackbar-item,
+.snackbar-container.card-stack.top-right:not(.hovered) .snackbar-item,
+.snackbar-container.card-stack.top-center:not(.hovered) .snackbar-item {
+  top: 16px;
+  /* Stack layers peek downward from the primary */
+  transform: translateY(calc(var(--stack-index, 0) * var(--stack-gap)));
+}
+
+/* ── BOTTOM orientations: primary card anchored to bottom ───── */
+.snackbar-container.card-stack.bottom-left:not(.hovered) .snackbar-item,
+.snackbar-container.card-stack.bottom-right:not(.hovered) .snackbar-item,
+.snackbar-container.card-stack.bottom-center:not(.hovered) .snackbar-item {
+  bottom: 16px;
+  /* Stack layers peek upward from the primary */
+  transform: translateY(calc(var(--stack-index, 0) * var(--stack-gap) * -1));
+}
+
+/* ── RIGHT alignment (top-right / bottom-right) ─────────────── */
+.snackbar-container.card-stack.top-right:not(.hovered) .snackbar-item,
+.snackbar-container.card-stack.bottom-right:not(.hovered) .snackbar-item {
+  right: 0;
+  left: auto !important;
+}
+
+/* ── LEFT alignment (top-left / bottom-left) ────────────────── */
+.snackbar-container.card-stack.top-left:not(.hovered) .snackbar-item,
+.snackbar-container.card-stack.bottom-left:not(.hovered) .snackbar-item {
+  left: 0 !important;
+  right: auto;
+}
+
+/* ── CENTER alignment (top-center / bottom-center) ───────────── */
+.snackbar-container.card-stack.top-center:not(.hovered) .snackbar-item,
+.snackbar-container.card-stack.bottom-center:not(.hovered) .snackbar-item {
+  left: 50% !important;
+  right: auto;
+  transform: translateX(-50%) translateY(calc(var(--stack-index, 0) * var(--stack-gap)));
+}
+
+.snackbar-container.card-stack.bottom-center:not(.hovered) .snackbar-item {
+  transform: translateX(-50%) translateY(calc(var(--stack-index, 0) * var(--stack-gap) * -1));
+}
+
+/* ── Slide-in animations for center positions ────────────────── */
+@keyframes stackSlideFromTop {
+  from {
+    transform: translateX(-50%) translateY(-40px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) translateY(calc(var(--stack-index, 0) * var(--stack-gap)));
+    opacity: calc(1 - var(--stack-index, 0) * var(--stack-opacity));
+  }
+}
+@keyframes stackSlideFromBottom {
+  from {
+    transform: translateX(-50%) translateY(40px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) translateY(calc(var(--stack-index, 0) * var(--stack-gap) * -1));
+    opacity: calc(1 - var(--stack-index, 0) * var(--stack-opacity));
+  }
+}
+.snackbar-container.card-stack.top-center:not(.hovered) .snackbar-item {
+  animation: stackSlideFromTop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  animation-delay: calc(var(--stack-index, 0) * 60ms);
+}
+
+.snackbar-container.card-stack.bottom-center:not(.hovered) .snackbar-item {
+  animation: stackSlideFromBottom 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  animation-delay: calc(var(--stack-index, 0) * 60ms);
+}
+
+/* ── Primary card (index 0) overrides ───────────────────────── */
+.snackbar-container.card-stack:not(.hovered) .snackbar-item[data-stack-index="0"] {
+  pointer-events: auto;
+  opacity: 1 !important;
+  filter: none !important;
+  z-index: 100 !important;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+}
+
+/* CENTER primary — ensure no extra translateX conflicts */
+.snackbar-container.card-stack.top-center:not(.hovered) .snackbar-item[data-stack-index="0"],
+.snackbar-container.card-stack.bottom-center:not(.hovered) .snackbar-item[data-stack-index="0"] {
+  transform: translateX(-50%) !important;
+}
+
+/* ============================================================
+   EXPANDED (HOVER) STATE — flat list
+   ============================================================ */
+.snackbar-container.card-stack.hovered {
+  pointer-events: auto;
+  align-items: stretch;
+  /* Default: items fill full container width */
+}
+
+.snackbar-container.card-stack.hovered .snackbar-item {
+  position: relative !important;
+  left: auto !important;
+  right: auto !important;
+  top: auto !important;
+  bottom: auto !important;
+  width: 100% !important;
+  transform: none !important;
+  opacity: 1 !important;
+  filter: none !important;
+  pointer-events: auto;
+  margin: 0 0 8px 0 !important;
+  z-index: auto !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.2s ease;
+}
+
+.snackbar-container.card-stack.hovered .snackbar-item:last-child {
+  margin-bottom: 0 !important;
+}
+
+/* Lift on item hover */
+.snackbar-container.card-stack.hovered .snackbar-item:hover {
+  transform: translateY(-2px) !important;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
+}
+
+/* Snack Item Core Styles */
+.snackbar-item {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  min-width: var(--snackbar-min-width, 320px);
+  max-width: var(--snackbar-max-width, 440px);
+  padding: 16px;
+  border-radius: var(--snackbar-radius, 12px);
+  pointer-events: auto;
+  box-shadow: var(--snackbar-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+  background: var(--snackbar-bg, #fdfdfd);
+  color: var(--snackbar-color, var(--text-primary, #1f2937));
+  transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28), transform 0.2s ease;
+  position: relative;
+  overflow: visible;
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--snackbar-border, rgba(0, 0, 0, 0.08));
+  z-index: calc(100 - var(--stack-index));
+}
+.snackbar-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+.snackbar-item:focus-visible {
+  outline: 2px solid var(--color-primary, #10b981);
+  outline-offset: 4px;
+  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4);
+  background: var(--bg-primary, #ffffff) !important;
+}
+.snackbar-item {
+  /* ── Sizes ──────────────────────────────── */
+}
+.snackbar-item.sm {
+  min-width: 280px;
+  padding: 10px 12px;
+  --snackbar-title-size: 13px;
+  --snackbar-msg-size: 12px;
+  --snackbar-icon-size: 1.1rem;
+  gap: 8px;
+}
+.snackbar-item.md {
+  min-width: 320px;
+  padding: 16px;
+  --snackbar-title-size: 15px;
+  --snackbar-msg-size: 14px;
+  --snackbar-icon-size: 1.25rem;
+}
+.snackbar-item.lg {
+  min-width: 400px;
+  padding: 20px 24px;
+  --snackbar-title-size: 18px;
+  --snackbar-msg-size: 16px;
+  --snackbar-icon-size: 1.5rem;
+  gap: 16px;
+}
+
+.item-main-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+}
+
+.snackbar-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.snackbar-title {
+  font-weight: 700;
+  font-size: var(--snackbar-title-size, 15px);
+  color: inherit;
+  margin-bottom: 2px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.snackbar-message {
+  font-size: var(--snackbar-msg-size, 14px);
+  line-height: 1.5;
+  color: inherit;
+  opacity: 0.9;
+  margin: 0;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.snackbar-icon,
+.snackbar-custom-icon {
+  font-size: var(--snackbar-icon-size, 1.25rem);
+}
+
+.snackbar-badge {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 800;
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.snackbar-badge.pulse {
+  animation: badgePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes badgePop {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.6);
+    background: var(--color-danger, #fbbf24);
+    color: var(--text-primary, #000);
+    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+/* Variant Styling — use CSS tokens where possible */
+.snackbar-item.filled {
+  color: var(--text-standard, #ffffff);
+  border: none;
+}
+
+.snackbar-item.filled.success {
+  background: var(--snackbar-success-bg, var(--color-success-hover, #059669));
+}
+
+.snackbar-item.filled.error {
+  background: var(--snackbar-error-bg, var(--color-danger-hover, #dc2626));
+}
+
+.snackbar-item.filled.warning {
+  background: var(--snackbar-warning-bg, var(--color-warning-hover, #d97706));
+}
+
+.snackbar-item.filled.info {
+  background: var(--snackbar-info-bg, var(--color-primary-hover, #2563eb));
+}
+
+.snackbar-item.filled.neutral {
+  background: var(--snackbar-neutral-bg, #4b5563);
+}
+
+.snackbar-item.filled.loading {
+  background: var(--snackbar-neutral-bg, #4b5563);
+}
+
+.snackbar-item.glass {
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+  color: var(--text-primary, #1e293b);
+}
+.snackbar-item.glass.success {
+  border-left: 4px solid var(--color-success, #10b981);
+  background: rgba(236, 253, 245, 0.6);
+}
+.snackbar-item.glass.error {
+  border-left: 4px solid var(--color-danger, #ef4444);
+  background: rgba(254, 242, 242, 0.6);
+}
+.snackbar-item.glass.warning {
+  border-left: 4px solid var(--color-warning, #f59e0b);
+  background: rgba(255, 251, 235, 0.6);
+}
+.snackbar-item.glass.info {
+  border-left: 4px solid var(--color-primary, #10b981);
+  background: rgba(239, 246, 255, 0.6);
+}
+.snackbar-item.glass .snackbar-action-btn:not(.variant-danger) {
+  background: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.1);
+  color: var(--color-primary, #334155);
+}
+.snackbar-item.glass .snackbar-action-btn:not(.variant-danger):hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.snackbar-item.outlined {
+  background: rgba(255, 255, 255, 0.9);
+  border-width: 1.5px;
+  border-style: solid;
+}
+
+.snackbar-item.outlined.success {
+  border-color: var(--color-success-hover, #059669);
+  color: var(--color-success-hover, #059669);
+}
+
+.snackbar-item.outlined.error {
+  border-color: var(--color-danger-hover, #dc2626);
+  color: var(--color-danger-hover, #dc2626);
+}
+
+.snackbar-item.outlined.warning {
+  border-color: var(--color-warning-hover, #d97706);
+  color: var(--color-warning-hover, #d97706);
+}
+
+.snackbar-item.outlined.info {
+  border-color: var(--color-primary-hover, #2563eb);
+  color: var(--color-primary-hover, #2563eb);
+}
+
+.snackbar-item.outlined.neutral {
+  border-color: var(--border-strong, #4b5563);
+  color: var(--text-secondary, #4b5563);
+}
+
+.snackbar-item.soft {
+  background: rgba(255, 255, 255, 0.95);
+}
+
+.snackbar-item.soft.success {
+  border-left: 4px solid var(--color-success, #10b981);
+  background: var(--bg-primary, #ecfdf5);
+  color: var(--color-primary, #065f46);
+}
+.snackbar-item.soft.success .snackbar-title,
+.snackbar-item.soft.success .snackbar-icon {
+  color: var(--color-success-hover, #059669);
+}
+
+.snackbar-item.soft.error {
+  border-left: 4px solid var(--color-danger, #ef4444);
+  background: var(--bg-primary, #fef2f2);
+  color: var(--color-danger, #991b1b);
+}
+.snackbar-item.soft.error .snackbar-title,
+.snackbar-item.soft.error .snackbar-icon {
+  color: var(--color-danger-hover, #dc2626);
+}
+
+.snackbar-item.soft.warning {
+  border-left: 4px solid var(--color-warning, #f59e0b);
+  background: var(--bg-primary, #fffbeb);
+  color: var(--color-danger, #92400e);
+}
+.snackbar-item.soft.warning .snackbar-title,
+.snackbar-item.soft.warning .snackbar-icon {
+  color: var(--color-warning-hover, #d97706);
+}
+
+.snackbar-item.soft.info {
+  border-left: 4px solid var(--color-primary, #10b981);
+  background: var(--bg-primary, #eff6ff);
+  color: var(--color-primary, #1e40af);
+}
+.snackbar-item.soft.info .snackbar-title,
+.snackbar-item.soft.info .snackbar-icon {
+  color: var(--color-primary-hover, #2563eb);
+}
+
+.snackbar-item.soft.neutral {
+  border-left: 4px solid var(--color-primary, #475569);
+  background: var(--bg-secondary, #f3f4f6);
+  color: var(--text-secondary, #374151);
+}
+.snackbar-item.soft.neutral .snackbar-title,
+.snackbar-item.soft.neutral .snackbar-icon {
+  color: var(--color-primary, #475569);
+}
+
+/* Explicit Overrides for Neutral and loading when they are NOT filled (var(--bg-primary, #ffffff)-ish mode) */
+.snackbar-item.neutral:not(.filled),
+.snackbar-item.loading:not(.filled) {
+  background: var(--bg-primary, #f8fafc);
+  border-color: var(--border-subtle, #e2e8f0);
+  color: var(--color-primary, #334155);
+}
+
+/* Ensure all types have a filled color by default or when requested */
+.snackbar-item.filled.success {
+  background: var(--color-success, #10b981);
+  color: var(--text-standard, #ffffff);
+}
+
+.snackbar-item.filled.error {
+  background: var(--color-danger, #ef4444);
+  color: var(--text-standard, #ffffff);
+}
+
+.snackbar-item.filled.warning {
+  background: var(--color-warning, #f59e0b);
+  color: var(--text-standard, #ffffff);
+}
+
+.snackbar-item.filled.info {
+  background: var(--color-primary, #10b981);
+  color: var(--text-standard, #ffffff);
+}
+
+.snackbar-item.filled.neutral {
+  background: var(--color-primary, #334155);
+  color: var(--text-standard, #ffffff);
+}
+
+.snackbar-item.filled.loading {
+  background: var(--color-primary, #475569);
+  color: var(--text-standard, #ffffff);
+}
+
+/* Sovereign Protocol - God Tier Variant */
+.snackbar-item.sovereign {
+  background: linear-gradient(135deg, var(--bg-primary, #1e293b) 0%, var(--bg-secondary, #0f172a) 100%);
+  color: var(--color-danger, #fbbf24);
+  border: 1px solid rgba(251, 191, 36, 0.4);
+  box-shadow: 0 0 20px rgba(251, 191, 36, 0.15), 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+.snackbar-item.sovereign::after {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 70%);
+  opacity: 0.5;
+  animation: sovereignPulse 4s infinite alternate;
+}
+.snackbar-item.sovereign .snackbar-title {
+  color: var(--color-danger, #fbbf24);
+  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
+  letter-spacing: 0.05em;
+}
+.snackbar-item.sovereign .snackbar-badge {
+  background: var(--color-danger, #fbbf24);
+  color: var(--text-primary, #0f172a);
+}
+.snackbar-item.sovereign .snackbar-progress {
+  background: var(--color-danger, #fbbf24);
+  box-shadow: 0 0 10px var(--color-danger, #fbbf24);
+  height: 3px;
+}
+.snackbar-item.sovereign .snackbar-icon {
+  color: var(--color-danger, #fbbf24);
+  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.6));
+}
+
+@keyframes sovereignPulse {
+  0% {
+    transform: scale(1) translate(0, 0);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1.2) translate(5%, 5%);
+    opacity: 0.6;
+  }
+}
+/* Dark Theme Support for Items */
+.snackbar-item.theme-dark {
+  background: var(--bg-secondary, #111827);
+  color: var(--text-standard, #ffffff);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+}
+
+/* Entry / Exit Transitions */
+.snackbar-item {
+  opacity: 0;
+  /* Smooth everything by default */
+  transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.3s ease, max-height 0.4s ease, margin 0.4s ease;
+  max-height: 200px;
+}
+
+.snackbar-item.slide-up {
+  transform: translateY(40px) scale(0.9);
+}
+
+.snackbar-item.slide-down {
+  transform: translateY(-40px) scale(0.9);
+}
+
+.snackbar-item.slide-left {
+  transform: translateX(-100%) scale(0.9);
+}
+
+.snackbar-item.slide-right {
+  transform: translateX(100%) scale(0.9);
+}
+
+.snackbar-item.fade {
+  transform: scale(0.95);
+}
+
+.snackbar-item.scale {
+  transform: scale(0.1);
+}
+
+.snackbar-item.spring {
+  transform: translateY(100px);
+}
+
+/* Show state */
+.snackbar-item.show {
+  opacity: 1;
+  transform: translate(0, 0) scale(1);
+}
+
+/* Graceful Closing State - Premium Exit Animation */
+.snackbar-item.closing {
+  opacity: 0 !important;
+  transform: scale(0.8) translateY(20px) !important;
+  pointer-events: none;
+  max-height: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  overflow: hidden;
+  filter: blur(8px);
+}
+
+/* Specific closing for top positions */
+.snackbar-container.top-left .snackbar-item.closing,
+.snackbar-container.top-right .snackbar-item.closing,
+.snackbar-container.top-center .snackbar-item.closing {
+  transform: scale(0.8) translateY(-20px) !important;
+}
+
+.snackbar-item.spring.show {
+  animation: springEntry 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
+}
+
+@keyframes springEntry {
+  0% {
+    transform: translateY(100px) scale(0.4);
+    opacity: 0;
+  }
+  70% {
+    transform: translateY(-10px) scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+.snackbar-item.bounce.show {
+  animation: bounceIn 0.5s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
+}
+
+@keyframes bounceIn {
+  0% {
+    transform: scale(0.3);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+/* Action Buttons & Links */
+.snackbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.snackbar-action-btn {
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  color: inherit;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.snackbar-action-btn:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.snackbar-item.filled .snackbar-action-btn {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+.snackbar-item.filled .snackbar-action-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Action Button Variants */
+.snackbar-action-btn.variant-primary {
+  background: var(--color-primary, #10b981);
+  color: var(--text-standard, #ffffff);
+  border-color: var(--color-primary-hover, #2563eb);
+}
+.snackbar-action-btn.variant-primary:hover {
+  background: var(--color-primary-hover, #2563eb);
+}
+
+.snackbar-action-btn.variant-danger {
+  background: var(--color-danger, #ef4444);
+  color: var(--text-standard, #ffffff);
+  border-color: var(--color-danger-hover, #dc2626);
+}
+.snackbar-action-btn.variant-danger:hover {
+  background: var(--color-danger-hover, #dc2626);
+}
+
+.snackbar-action-btn.variant-text {
+  background: transparent;
+  border: none;
+  font-weight: 600;
+  padding: 4px 6px;
+}
+.snackbar-action-btn.variant-text:hover {
+  text-decoration: underline;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.snackbar-link {
+  font-size: 12px;
+  text-decoration: underline;
+  color: inherit;
+  opacity: 0.8;
+  font-weight: 500;
+}
+.snackbar-link:hover {
+  opacity: 1;
+}
+
+/* Progress Indicators - Modern Gradient Style */
+.snackbar-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.5);
+  /* Good for filled (on dark) */
+  width: 0%;
+  transition: width linear;
+  /* Pulse when paused */
+}
+.snackbar-container.hovered .snackbar-progress {
+  animation: progressPulse 2s infinite ease-in-out;
+}
+
+@keyframes progressPulse {
+  0%, 100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+/* Visibility fix for non-filled or var(--bg-primary, #ffffff) variants */
+.snackbar-item:not(.filled) .snackbar-progress,
+.snackbar-item.neutral.filled .snackbar-progress,
+.snackbar-item.outlined .snackbar-progress,
+.snackbar-item.soft .snackbar-progress {
+  background: currentColor;
+  /* Matches the text color of the notification */
+  opacity: 0.15;
+}
+
+.snackbar-progress-ring {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 20px;
+  height: 20px;
+  transform: rotate(-90deg);
+}
+
+.snackbar-progress-ring circle {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-dasharray: 56.5;
+  /* 2 * PI * 9 */
+  stroke-dashoffset: 56.5;
+  opacity: 0.3;
+}
+
+/* Close Button */
+.snackbar-close {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.6;
+  transition: all 0.2s;
+}
+.snackbar-close:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+/* Icon Animations */
+.snackbar-icon-draw {
+  width: 24px;
+  height: 24px;
+}
+
+.circle {
+  stroke-dasharray: 157;
+  stroke-dashoffset: 157;
+  stroke-width: 2;
+  stroke-miterlimit: 10;
+  stroke: currentColor;
+  fill: none;
+  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+}
+
+.check {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  stroke: currentColor;
+  stroke-width: 3;
+  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+/* ── History Expansion ── */
+.snackbar-history-indicator {
+  margin-top: 12px;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  padding-top: 8px;
+  width: 100%;
+}
+
+.expand-history-btn {
+  background: transparent;
+  border: none;
+  font-size: 11px;
+  font-weight: 600;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  padding: 4px 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.expand-history-btn:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+
+.snackbar-history-list {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.snackbar-item.history-expanded .snackbar-history-list {
+  max-height: 150px;
+  margin-top: 8px;
+  overflow-y: auto;
+}
+
+.history-item {
+  display: flex;
+  flex-direction: column;
+  padding: 6px 8px;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 4px;
+  font-size: 12px;
+}
+.history-item .history-time {
+  font-size: 10px;
+  font-weight: 700;
+  opacity: 0.5;
+}
+.history-item .history-msg {
+  opacity: 0.8;
+}
+
+.theme-dark .history-item {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.snackbar-item.filled .history-item {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Loading Spinner */
+.snackbar-loading-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: var(--bg-primary, #ffffff);
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* Quick Input */
+.snackbar-quick-input {
+  width: 100%;
+  margin-top: 8px;
+}
+
+.snackbar-quick-input input {
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+  outline: none;
+}
+.snackbar-quick-input input:focus {
+  border-color: var(--color-primary, #10b981);
+  background: var(--bg-primary, #ffffff);
+}
+
+/* Mobile Optimizations - 100% width on sm screens */
+@media (max-width: 500px) {
+  .snackbar-container {
+    left: 0 !important;
+    right: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    transform: none !important;
+    padding: 12px !important;
+    bottom: 0 !important;
+    top: auto !important;
+    /* Force bottom on mobile for better reachability */
+  }
+  .snackbar-container.top-left, .snackbar-container.top-right, .snackbar-container.top-center {
+    top: 0 !important;
+    bottom: auto !important;
+  }
+  .snackbar-item {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  /* Clear all button better positioning on mobile */
+  .snackbar-clear-all {
+    width: auto;
+    align-self: center;
+  }
+  .snackbar-container.card-stack {
+    min-width: 0 !important;
+  }
+  .snackbar-container.card-stack::before {
+    display: none;
+  }
+  .snackbar-container.card-stack {
+    /* Disable buffer to prevent accidental dead zones */
+  }
+}
+@keyframes sb-particle-burst {
+  0% {
+    transform: translate(-50%, -50%) translate(0, 0) scale(0) rotate(0deg);
+    opacity: 0;
+  }
+  15% {
+    opacity: 1;
+    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.25px), calc(var(--ty) * 0.25px)) scale(var(--s)) rotate(calc(var(--r) * 0.2deg));
+  }
+  80% {
+    opacity: 0.7;
+  }
+  100% {
+    transform: translate(-50%, -50%) translate(calc(var(--tx) * 1px), calc(var(--ty) * 1px)) scale(0) rotate(calc(var(--r) * 1deg));
+    opacity: 0;
+  }
+}
+@keyframes sb-particle-float {
+  0% {
+    transform: translate(-50%, -50%) translate(0, 0) scale(0.5) rotate(0deg);
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.5px), calc(var(--ty) * 1px)) scale(0) rotate(calc(var(--r) * 0.5deg));
+    opacity: 0;
+  }
+}
+@keyframes sb-particle-glint {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  30% {
+    transform: translate(-50%, -50%) scale(1.6);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(0.3);
+    opacity: 0;
+  }
+}
+.sb-particle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  pointer-events: none;
+  will-change: transform, opacity;
+  z-index: 1000;
+  animation-fill-mode: forwards;
+  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  animation-duration: var(--d, 1.2s);
+  animation-delay: var(--delay, 0s);
+}
+.sb-particle.sb-particle--burst {
+  width: var(--size, 8px);
+  height: var(--size, 8px);
+  border-radius: 50%;
+  background: radial-gradient(circle, #fbbf24 0%, #f97316 60%, transparent 100%);
+  box-shadow: 0 0 6px 1px rgba(251, 191, 36, 0.5019607843);
+  animation-name: sb-particle-burst;
+}
+.sb-particle.sb-particle--float {
+  font-size: var(--size, 14px);
+  line-height: 1;
+  animation-name: sb-particle-float;
+}
+.sb-particle.sb-particle--glint {
+  width: var(--size, 6px);
+  height: var(--size, 6px);
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.5019607843);
+  animation-name: sb-particle-glint;
+}
+
+/* ────────────────────────────────────────────────────────────
+   LIGHTWEIGHT CSS PARTICLES (Sovereign Type)
+   ──────────────────────────────────────────────────────────── */
+.snackbar-particle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  pointer-events: none;
+  z-index: 1000;
+  opacity: 0;
+  will-change: transform, opacity;
+}
+.snackbar-particle.type-glow {
+  width: 8px;
+  height: 8px;
+  background: radial-gradient(circle, #fbbf24 0%, transparent 70%);
+  border-radius: 50%;
+  box-shadow: 0 0 10px #fbbf24;
+  animation: snackbarParticleExplode 1.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
+}
+.snackbar-particle.type-emoji {
+  animation: snackbarParticleExplodeRotate 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
+  white-space: nowrap;
+}
+
+@keyframes snackbarParticleExplode {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  20% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);
+    opacity: 0;
+  }
+}
+@keyframes snackbarParticleExplodeRotate {
+  0% {
+    transform: translate(-50%, -50%) scale(0) rotate(0deg);
+    opacity: 0;
+  }
+  20% {
+    transform: translate(-50%, -50%) scale(1.5) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0) rotate(var(--rot));
+    opacity: 0;
+  }
+}