/* Toast Animation Styles */

@keyframes toast-slide-up {
  from {
    opacity: 0;
    transform: translateY(100%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-slide-down-mobile {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-slide-down {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

@keyframes toast-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes toast-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Toast container positioning and safe areas */
#toast-container {
  /* Ensure container is in a safe area on mobile devices */
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
}

/* Toast item styles */
.toast-item {
  /* Ensure proper stacking and spacing */
  position: relative;
  transition: all 0.2s ease-out;
}

/* Animation classes */
.animate-fade-in-up {
  animation: toast-slide-up 0.3s ease-out;
}

.animate-fade-in-down {
  animation: toast-slide-down-mobile 0.3s ease-out;
}

/* Mobile-first: slide from top, desktop: slide from bottom */
@media (max-width: 639px) {
  .toast-item {
    animation: toast-slide-down-mobile 0.3s ease-out;
  }
}

@media (min-width: 640px) {
  .toast-item {
    animation: toast-slide-up 0.3s ease-out;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .toast-item {
    animation-duration: 0.2s !important;
  }

  @keyframes toast-slide-up {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes toast-slide-down {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
}

/* Focus styles for better accessibility */
.toast-item button:focus {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* High contrast support */
@media (prefers-contrast: high) {
  .toast-item {
    border: 2px solid currentColor;
  }
}