.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.625rem;
  align-items: start;
  padding: 0.875rem 0.875rem 0.875rem 1rem;
  border-radius: calc(var(--radius));
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 10px 30px color-mix(in oklch, var(--foreground) 12%, transparent);
  opacity: 0;
  transform: translateX(1rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.toast.is-leaving {
  opacity: 0;
  transform: translateX(1rem);
}

.toast-icon {
  display: flex;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
}

.toast-icon svg {
  width: 100%;
  height: 100%;
}

.toast-message {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  padding-top: 0.05rem;
}

.toast-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.25rem -0.25rem 0 0;
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}

.toast-close:hover {
  background: var(--muted);
  color: var(--foreground);
}

.toast-close svg {
  width: 1rem;
  height: 1rem;
}

.toast--success {
  border-color: color-mix(in oklch, var(--success) 35%, var(--border));
}

.toast--success .toast-icon {
  color: var(--success);
}

.toast--error {
  border-color: color-mix(in oklch, var(--destructive) 35%, var(--border));
}

.toast--error .toast-icon {
  color: var(--destructive);
}

.toast--warning {
  border-color: color-mix(in oklch, var(--warning, #d97706) 35%, var(--border));
}

.toast--warning .toast-icon {
  color: var(--warning, #d97706);
}

.toast--info {
  border-color: color-mix(in oklch, var(--primary) 35%, var(--border));
}

.toast--info .toast-icon {
  color: var(--primary);
}

@media (max-width: 640px) {
  .toast-container {
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    right: 0.75rem;
    width: min(22rem, calc(100vw - 1.5rem));
  }
}