/* ============================================================
   TOAST NOTIFICATIONS
   Styled to match SpeciFire design system
   ============================================================ */

.toast-container {
  position: fixed;
  top: var(--space-6);
  right: var(--space-4);
  left: auto;
  bottom: auto;
  /* Override popover default centering - must use !important for popover API */
  inset: var(--space-6) var(--space-4) auto auto !important;
  margin: 0 !important;
  /* Fallback for browsers without Popover API support; has no effect in the top layer */
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  /* Prevent horizontal scrollbar during slide animations */
  overflow: hidden;
  padding-right: 24px;
  margin-right: -24px;
  /* Reset popover defaults */
  border: none;
  padding: 0;
  background: transparent;
}

.toast {
  position: relative;
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  animation: toastSlideIn var(--duration-moderate) var(--ease-spring);
  transition:
    transform var(--duration-moderate) var(--ease-out),
    box-shadow var(--duration-moderate) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

/* Close indicator */
.toast::after {
  content: '';
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.3;
  transition: opacity var(--duration-fast) var(--ease-out);
}

/* Hover state */
.toast:hover {
  transform: translateX(-4px);
}

.toast:hover::after {
  opacity: 0.6;
}

/* Active state */
.toast:active {
  transform: translateX(-2px) scale(0.98);
}

.toast:active::after {
  opacity: 0.8;
}

/* Focus state */
.toast:focus-visible {
  outline: none;
  box-shadow: var(--shadow-lg), var(--shadow-focus);
}

/* ============================================================
   TOAST VARIANTS
   ============================================================ */

/* Success */
.toast-success {
  background: var(--color-primary-50);
  color: var(--color-primary-500);
}

.toast-success:hover {
  background: var(--color-primary-100);
}

/* Error */
.toast-error {
  background: var(--color-error-50);
  color: var(--color-error-500);
}

.toast-error:hover {
  background: var(--color-error-100);
}

/* Info */
.toast-info {
  background: var(--color-info-50);
  color: var(--color-info-600);
}

.toast-info:hover {
  background: var(--color-info-100);
}

/* Warning */
.toast-warning {
  background: var(--color-warning-50);
  color: var(--color-warning-600);
}

.toast-warning:hover {
  background: var(--color-warning-100);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

.toast.hiding {
  animation: toastSlideOut var(--duration-normal) var(--ease-out) forwards;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(24px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(24px) scale(0.95);
  }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
    opacity: 1;
  }

  .toast:hover {
    transform: none;
  }

  .toast.hiding {
    animation: toastFadeOut var(--duration-fast) var(--ease-out) forwards;
  }

  @keyframes toastFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
}