/* ============================================================
   messages.css — Toast notifications
   Uses --ds-* design tokens
   ============================================================ */

.toast-container {
  z-index: 9999 !important;
}

.toast {
  min-width: 300px;
  box-shadow: var(--ds-shadow-hover);
  margin-bottom: 10px;
}

.toast.hiding {
  opacity: 0;
}

.toast-header {
  border-bottom: none;
  padding: 0.75rem 1rem;
  background: var(--ds-surface);
  color: var(--ds-text);
}

.toast-body {
  padding: 1rem;
  font-size: 0.95rem;
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  border: 1px solid var(--ds-border);
  border-radius: 0 0 var(--ds-radius-xs) var(--ds-radius-xs);
}

/* Status header colors */
.toast .bg-success {
  background-color: var(--ds-green) !important;
}
.toast .bg-error,
.toast .bg-danger {
  background-color: var(--ds-red) !important;
}
.toast .bg-warning {
  background-color: var(--ds-yellow) !important;
}
.toast .bg-info {
  background-color: var(--ds-accent) !important;
}

/* Animation */
.toast.show {
  animation: ds-slideIn 0.3s ease-out;
}

@keyframes ds-slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast.hiding {
  animation: ds-slideOut 0.3s ease-in;
}

@keyframes ds-slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .toast.show, .toast.hiding { animation: none; }
}