/* GSMVanta stacked toast runtime.
   Geometry and interaction deliberately mirror Sonner's canonical toast stack:
   356px desktop width, 24px desktop edge offset, 16px mobile offset, 14px
   expanded gap, layered collapsed cards and hover/focus expansion. */
.app-toast-stack {
  --toast-width:356px;
  --toast-gap:14px;
  --toast-offset:24px;
  --toast-mobile-offset:16px;
  --toast-radius:8px;
  --toast-bg:#fff;
  --toast-border:hsl(0 0% 93%);
  --toast-text:hsl(0 0% 9%);
  --toast-description:#3f3f3f;
  --toast-hover-bg:hsl(0 0% 97.3%);
  --toast-hover-border:hsl(0 0% 90.9%);
  --toast-front-height:0px;
  position:fixed;
  z-index:2147482800;
  inset-block-start:var(--toast-offset);
  inset-inline-end:var(--toast-offset);
  width:var(--toast-width);
  height:0;
  margin:0;
  padding:0;
  list-style:none;
  outline:none;
  box-sizing:border-box;
  pointer-events:none;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  transition:height 400ms ease;
}
.app-toast-stack[data-has-toasts="true"] { pointer-events:auto; }

/* Visual hover fallback: expansion is also driven by CSS so a desktop stack
   cannot stay collapsed if a browser misses/defers a JS mouseenter event.
   JS still owns timers, touch behavior and accessibility state. */
@media (hover:hover) and (pointer:fine) {
  .app-toast-stack[data-has-toasts="true"]:hover {
    height:var(--toast-expanded-height,var(--toast-front-height));
  }
  .app-toast-stack[data-has-toasts="true"]:hover .app-toast[data-mounted="true"][data-visible="true"]:not([data-removing="true"]) {
    --toast-y:translateY(var(--toast-offset-y,0px));
    height:var(--toast-initial-height);
  }
  .app-toast-stack[data-has-toasts="true"]:hover .app-toast[data-visible="true"] > * { opacity:1; }
}

html[data-theme="dark"] .app-toast-stack,
body.theme-dark .app-toast-stack,
body.dark .app-toast-stack {
  --toast-bg:#000;
  --toast-border:hsl(0 0% 20%);
  --toast-text:hsl(0 0% 99%);
  --toast-description:hsl(0 0% 91%);
  --toast-hover-bg:hsl(0 0% 12%);
  --toast-hover-border:hsl(0 0% 25%);
}

.app-toast {
  --toast-y:translateY(-100%);
  --toast-scale:1;
  --toast-swipe-x:0px;
  --toast-swipe-y:0px;
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  z-index:var(--toast-z,1);
  width:100%;
  min-width:0;
  height:auto;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap: 8px;
  padding:16px;
  border:1px solid var(--toast-border);
  border-radius:var(--toast-radius);
  background:var(--toast-bg);
  color:var(--toast-text);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  opacity:0;
  transform:var(--toast-y) translate(var(--toast-swipe-x),var(--toast-swipe-y));
  transform-origin:top center;
  touch-action:none;
  overflow-wrap:anywhere;
  outline:none;
  pointer-events:auto;
  transition:transform 400ms,opacity 400ms,height 400ms,box-shadow 200ms;
}

.app-toast:focus-visible {
  box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2);
}

.app-toast[data-mounted="true"] { --toast-y:translateY(0); opacity:1; }
.app-toast[data-expanded="false"][data-front="false"] {
  --toast-y:translateY(var(--toast-collapsed-y,8px)) scale(var(--toast-scale,.95));
  height:var(--toast-front-height);
}
.app-toast[data-expanded="true"][data-mounted="true"] {
  --toast-y:translateY(var(--toast-offset-y,0px));
  height:var(--toast-initial-height);
}
.app-toast[data-visible="false"] { opacity:0; pointer-events:none; }
.app-toast[data-expanded="false"][data-front="false"] > * { opacity:0; }
.app-toast > * { transition:opacity 400ms; }

/* Fill the expanded 14px air gap so moving the pointer between cards never
   collapses the stack mid-flight. */
.app-toast[data-expanded="true"]::after {
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-start:100%;
  height:calc(var(--toast-gap) + 1px);
}

.app-toast[data-removing="true"][data-front="true"] {
  --toast-y:translateY(-100%);
  opacity:0;
}
.app-toast[data-removing="true"][data-front="false"][data-expanded="true"] {
  --toast-y:translateY(calc(var(--toast-offset-y,0px) - 100%));
  opacity:0;
}
.app-toast[data-removing="true"][data-front="false"][data-expanded="false"] {
  --toast-y:translateY(40%);
  opacity:0;
  transition:transform 500ms,opacity 200ms;
}
.app-toast[data-swiping="true"] {
  transition:none;
  user-select:none;
}
.app-toast[data-swipe-out="true"] { opacity:0; transition:transform 200ms ease-out,opacity 200ms ease-out; }

.app-toast-mark {
  display:flex;
  width:16px;
  height:16px;
  position:relative;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 16px;
  margin-inline-start:-3px;
  margin-inline-end:4px;
  color:currentColor;
}
[dir="rtl"] .app-toast-mark,
html[dir="rtl"] .app-toast-mark {
  margin-inline-start:4px;
  margin-inline-end:-3px;
}
.app-toast-mark svg { width:20px; height:20px; flex-shrink:0; }

.app-toast-content {
  display:flex;
  flex:1 1 auto;
  min-width:0;
  flex-direction:column;
  gap: 4px;
}
.app-toast-title {
  color:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
}
.app-toast-description {
  color:var(--toast-description);
  font-size:13px;
  font-weight:400;
  line-height:1.4;
}

.app-toast-close {
  position:absolute;
  inset-block-start:0;
  inset-inline-start:0;
  z-index:2;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--toast-border);
  border-radius:50%;
  background:var(--toast-bg);
  color:var(--toast-text);
  cursor:pointer;
  transform:translate(-35%,-35%);
  transition:opacity 100ms,background 200ms,border-color 200ms;
}
html[dir="rtl"] .app-toast-close,
[dir="rtl"] .app-toast-close { transform:translate(35%,-35%); }
.app-toast-close svg { width:12px; height:12px; }
.app-toast:hover .app-toast-close:hover,
.app-toast-close:focus-visible {
  background:var(--toast-hover-bg);
  border-color:var(--toast-hover-border);
}
.app-toast-close:focus-visible {
  outline:none;
  box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2);
}

@media (max-width:600px) {
  .app-toast-stack {
    inset-block-start:var(--toast-mobile-offset);
    inset-inline:var(--toast-mobile-offset);
    width:auto;
  }
}

@media (prefers-reduced-motion:reduce) {
  /* Reduced motion must not disable the POSITION of expanded cards. The old
     transform:none rule kept every toast physically on top of the first one,
     so hover looked broken on Windows/browser profiles with reduced motion. */
  .app-toast-stack { transition:height 80ms linear; }
  .app-toast { transition:transform 80ms linear,opacity 80ms linear,height 80ms linear,box-shadow 80ms linear; }
  .app-toast > * { transition:opacity 80ms linear; }
}