/* DATZON TOAST v1.0 — reusable stacked notification UI */
.datzon-toast-root {
  --dt-bg: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
  --dt-text: var(--text, #11151f);
  --dt-soft: var(--text-soft, #667085);
  --dt-line: var(--line, rgba(22, 29, 45, .12));
  --dt-accent: var(--accent, #4f63ff);
  position: fixed;
  z-index: 9999;
  top: max(12px, calc(env(safe-area-inset-top) + 8px));
  left: 50%;
  width: min(430px, calc(100vw - 24px));
  transform: translateX(-50%);
  pointer-events: none;
  font-family: var(--font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.datzon-toast-list {
  position: relative;
  min-height: 92px;
  perspective: 900px;
  transition: min-height .3s ease;
}

.datzon-toast-item {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 13px 13px 13px 14px;
  overflow: hidden;
  color: var(--dt-text);
  background: var(--dt-bg);
  border: 1px solid var(--dt-line);
  border-radius: 18px;
  box-shadow: 0 18px 54px rgba(10, 15, 28, .19), inset 0 1px 0 rgba(255,255,255,.42);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  pointer-events: auto;
  cursor: pointer;
  transform-origin: 50% 0;
  transition:
    transform .34s cubic-bezier(.2,.82,.2,1),
    opacity .25s ease,
    filter .3s ease,
    visibility .3s ease,
    box-shadow .3s ease;
  will-change: transform, opacity;
}

.datzon-toast-item::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--dt-accent);
}

.datzon-toast-item[data-type="success"]::before { background: var(--success, #19b77c); }
.datzon-toast-item[data-type="warning"]::before { background: var(--warning, #dfa41e); }
.datzon-toast-item[data-type="error"]::before { background: var(--danger, #e4525b); }
.datzon-toast-item[data-type="loading"]::before { background: var(--dt-accent); }

.datzon-toast-item.is-front {
  z-index: 5;
  opacity: 1;
  filter: none;
  transform: translateY(0) scale(1) rotateX(0);
}

.datzon-toast-item.is-back {
  z-index: 4;
  opacity: .78;
  filter: brightness(.66) saturate(.78) blur(.15px);
  transform: translateY(13px) scale(.955) rotateX(-1.5deg);
}

.datzon-toast-item.is-hidden-depth {
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  filter: brightness(.55);
  pointer-events: none;
  transform: translateY(20px) scale(.92) rotateX(-3deg);
}

.datzon-toast-item.is-entering {
  opacity: 0;
  transform: translateY(-18px) scale(.97);
}

.datzon-toast-item.is-bumped { animation: datzon-toast-bump .32s ease both; }
.datzon-toast-item.is-leaving {
  opacity: 0 !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
  transform: translateY(-13px) scale(.96) !important;
}

.datzon-toast-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--dt-accent);
  background: color-mix(in srgb, var(--dt-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--dt-accent) 20%, transparent);
  border-radius: 12px;
}
.datzon-toast-item[data-type="success"] .datzon-toast-icon { color: var(--success, #19b77c); background: color-mix(in srgb, var(--success, #19b77c) 13%, transparent); }
.datzon-toast-item[data-type="warning"] .datzon-toast-icon { color: var(--warning, #dfa41e); background: color-mix(in srgb, var(--warning, #dfa41e) 13%, transparent); }
.datzon-toast-item[data-type="error"] .datzon-toast-icon { color: var(--danger, #e4525b); background: color-mix(in srgb, var(--danger, #e4525b) 13%, transparent); }
.datzon-toast-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.datzon-toast-copy { display: grid; gap: 3px; min-width: 0; }
.datzon-toast-copy strong { color: var(--dt-soft); font-size: 9px; line-height: 1.2; letter-spacing: .14em; }
.datzon-toast-message { color: var(--dt-text); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }

.datzon-toast-count {
  align-self: start;
  margin: 1px 24px 0 0;
  padding: 4px 7px;
  color: var(--dt-soft);
  background: color-mix(in srgb, var(--dt-text) 7%, transparent);
  border-radius: 99px;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
}

.datzon-toast-close {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  color: var(--dt-soft);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  opacity: .72;
}
.datzon-toast-close:hover { background: color-mix(in srgb, var(--dt-text) 8%, transparent); opacity: 1; }
.datzon-toast-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.datzon-toast-progress {
  --datzon-toast-duration: 5000ms;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: color-mix(in srgb, var(--dt-accent) 78%, transparent);
  transform-origin: left;
  animation: datzon-toast-progress var(--datzon-toast-duration) linear forwards;
}
.datzon-toast-item[data-type="success"] .datzon-toast-progress { background: var(--success, #19b77c); }
.datzon-toast-item[data-type="warning"] .datzon-toast-progress { background: var(--warning, #dfa41e); }
.datzon-toast-item[data-type="error"] .datzon-toast-progress { background: var(--danger, #e4525b); }

.datzon-toast-spinner {
  width: 19px;
  height: 19px;
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: datzon-toast-spin .75s linear infinite;
}

.datzon-toast-root.is-expanded { pointer-events: auto; }
.datzon-toast-root.is-expanded .datzon-toast-list {
  display: grid;
  gap: 9px;
  max-height: min(72vh, 620px);
  min-height: 0;
  padding: 1px 2px 10px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.datzon-toast-root.is-expanded .datzon-toast-item {
  position: relative;
  inset: auto;
  z-index: auto;
  visibility: visible;
  opacity: 1;
  filter: none;
  pointer-events: auto;
  transform: none;
}
.datzon-toast-root.is-expanded .datzon-toast-item:hover { transform: translateY(-1px); box-shadow: 0 22px 60px rgba(10, 15, 28, .24); }

@keyframes datzon-toast-spin { to { transform: rotate(360deg); } }
@keyframes datzon-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes datzon-toast-bump { 0% { transform: translateY(-7px) scale(.985); } 100% { transform: translateY(0) scale(1); } }

@media (max-width: 560px) {
  .datzon-toast-root { top: max(9px, calc(env(safe-area-inset-top) + 6px)); width: calc(100vw - 18px); }
  .datzon-toast-item { min-height: 72px; padding: 11px 11px 11px 12px; border-radius: 16px; }
  .datzon-toast-message { font-size: 10.5px; }
  .datzon-toast-count { margin-right: 22px; font-size: 7.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .datzon-toast-item, .datzon-toast-progress, .datzon-toast-spinner { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}