/* Force container to bottom-left and control stacking */
#toast-container {
  position: fixed !important;
  left: calc(16px + env(safe-area-inset-left, 0px)) !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  right: auto !important;
  top: auto !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column-reverse !important; /* newest closest to bottom */
  align-items: flex-start !important;
  gap: 10px !important;
  pointer-events: none !important; /* clicks pass through container */
}

/* Hard reset any rogue inline positioning a different script might add */
#toast-container .toast {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  z-index: auto !important;
  pointer-events: auto !important; /* clickable content */
}

/* Base toast visuals */
.toast {
  min-width: 220px;
  max-width: 350px;
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  color: #fff;
  padding: 18px 28px 18px 20px;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.18);
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(-20px);
  animation: toast-in 0.8s forwards, toast-out 0.8s 2.6s forwards;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Variants */
.toast.toast--error {
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}


/* Icon */
.toast .toast-icon {
  font-size: 1.4rem;
  margin-right: 6px;
  flex-shrink: 0;
}

/* Animations */
@keyframes toast-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-20px); }
}