:root {
  --spike-toast-success: #00ff88;
  --spike-toast-error: #ff6b75;
  --spike-toast-neutral: #f7c84b;
}

@keyframes spikeToastUnifiedIn {
  from { transform: translateX(60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes spikeToastUnifiedOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(60px); opacity: 0; }
}

.toast-container,
.spike-toast-container {
  position: fixed !important;
  inset: auto 20px 80px auto !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
  pointer-events: none !important;
}

.toast-container .toast,
.spike-toast-container .spike-toast,
.toast-container ._spk-save-toast,
._spk-save-toast {
  position: static !important;
  inset: auto !important;
  width: fit-content !important;
  max-width: min(420px, calc(100vw - 40px)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: 1px solid rgba(0, 255, 136, .28) !important;
  border-radius: 10px !important;
  background: #111 !important;
  color: var(--spike-toast-success) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5) !important;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  pointer-events: none !important;
  transition: none !important;
  animation: spikeToastUnifiedIn .35s ease, spikeToastUnifiedOut .3s ease 2.2s forwards !important;
}

.toast,
.missions-toast,
.spike-toast,
._spk-save-toast {
  position: fixed !important;
  inset: auto 20px 80px auto !important;
  z-index: 99999 !important;
  width: fit-content !important;
  max-width: min(420px, calc(100vw - 40px)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: 1px solid rgba(0, 255, 136, .28) !important;
  border-radius: 10px !important;
  background: #111 !important;
  color: var(--spike-toast-success) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5) !important;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  pointer-events: none !important;
  transition: none !important;
  animation: spikeToastUnifiedIn .35s ease, spikeToastUnifiedOut .3s ease 2.2s forwards !important;
}

.toast-container .toast.error,
.toast-container .toast.bad,
.toast.error,
.toast.bad,
.missions-toast.error,
.spike-toast.error {
  border-color: rgba(255, 107, 117, .42) !important;
  color: var(--spike-toast-error) !important;
}

.toast-container .toast.neutral,
.toast-container .toast.warning,
.toast-container .toast.info,
.toast.neutral,
.toast.warning,
.toast.info,
.missions-toast.neutral,
.spike-toast.neutral {
  border-color: rgba(247, 200, 75, .42) !important;
  color: var(--spike-toast-neutral) !important;
}

.toast-container .toast.success,
.toast-container .toast.good,
.toast.success,
.toast.good,
.missions-toast.success,
.spike-toast.success {
  border-color: rgba(0, 255, 136, .28) !important;
  color: var(--spike-toast-success) !important;
}

.exclusive-react .toast:empty {
  display: none !important;
}

.toast:empty,
.missions-toast:empty,
.spike-toast:empty {
  display: none !important;
}

.toast > svg,
.toast .toast-icon,
.missions-toast .toast-icon,
._spk-save-toast .toast-icon {
  display: none !important;
}

.toast-container.has-pending-changes,
.main.has-pending-changes .toast-container,
.app-shell.has-pending-changes .toast-container,
.autocargo-react-page.has-pending-changes .toast-container,
.automod-has-pending-changes .toast-container,
.spike-app.has-pending-changes .toast-container {
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
}

#spike-discard-toast-container .toast.discard-toast {
  border-color: rgba(247, 200, 75, .42) !important;
  color: var(--spike-toast-neutral) !important;
}

@media (max-width: 600px) {
  .toast-container,
  .spike-toast-container {
    right: 12px !important;
    bottom: 80px !important;
  }

  .toast-container .toast,
  .spike-toast-container .spike-toast,
  .toast,
  .missions-toast,
  .spike-toast {
    max-width: calc(100vw - 24px) !important;
  }
}