.toast-container {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(420px, calc(100vw - 48px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--card-radius);
  background: var(--color-white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-left: 4px solid var(--color-blue);
  animation: toast-in 0.28s ease-out;
}

.toast--success { border-left-color: var(--color-green); }
.toast--error { border-left-color: var(--color-red); }
.toast--warning { border-left-color: var(--color-orange); }
.toast--info { border-left-color: var(--color-blue); }

.toast__icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
}

.toast--success .toast__icon { background: var(--color-green); }
.toast--error .toast__icon { background: var(--color-red); }
.toast--warning .toast__icon { background: var(--color-orange); }
.toast--info .toast__icon { background: var(--color-blue); }

.toast__message {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-dark);
}

.toast__close {
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.toast__close:hover {
  color: var(--color-text-dark);
}

.toast.is-leaving {
  animation: toast-out 0.2s ease-in forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}