/* toasts.css */
.toast-container {
  position: fixed; bottom: var(--space-6); right: var(--space-6);
  z-index: 3000; display: flex; flex-direction: column-reverse; gap: var(--space-3);
}
.toast {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); min-width: 300px; max-width: 420px;
  border-left: 4px solid var(--color-border); animation: slideInRight 0.3s ease;
}
.toast--success { border-left-color: var(--color-success); }
.toast--error { border-left-color: var(--color-error); }
.toast--info { border-left-color: var(--color-primary); }
.toast--warning { border-left-color: var(--color-warning); }
.toast__message { flex: 1; font-size: var(--text-sm); color: var(--color-text-primary); }
.toast__close {
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
  padding: var(--space-1); font-size: var(--text-lg); line-height: 1;
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}
.toast--leaving { animation: slideOutRight 0.3s ease forwards; }

@media (max-width: 479px) {
  .toast-container { left: var(--space-3); right: var(--space-3); bottom: calc(56px + var(--space-3)); }
  .toast { min-width: auto; }
}