/* The toast lives in a fixed slot at the bottom-center of the viewport.
   The slot is always present; it's empty until a completion streams a
   toast into it. */

.undo-toast-slot {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 50;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.undo-toast-slot--leaving { animation: undo-toast-out 200ms ease-out forwards; }

/* button_to wraps the toast in a <form>; reset that. */
.undo-toast-slot form {
  margin: 0;
  pointer-events: auto;
  animation: undo-toast-in 220ms ease-out;
}

.undo-toast {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--color-fg);
  color: var(--color-card);
  box-shadow: var(--shadow-lg);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.undo-toast:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -8px rgba(45, 42, 38, 0.22);
}

.undo-toast:active { transform: translateY(0); }

.undo-toast__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.undo-toast__label { letter-spacing: 0.01em; }

@keyframes undo-toast-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes undo-toast-out {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(8px); }
}