/* SEOGrow — Notifications (first-design.md §18) */

.toasts {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 50;
  pointer-events: none;
  max-width: 400px;
}
@media (max-width: 640px) {
  .toasts {
    top: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 360px;
  min-height: 64px;
  padding: var(--space-4);
  background: var(--surface-glass-strong);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  animation: toast-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (max-width: 640px) {
  .toast { width: 100%; }
}

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

.toast__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.toast__icon svg { width: 20px; height: 20px; }

.toast--success .toast__icon { background: rgba(16,185,129,0.15); color: var(--status-success); }
.toast--info    .toast__icon { background: rgba(59,130,246,0.15); color: var(--status-info); }
.toast--warning .toast__icon { background: rgba(245,158,11,0.15); color: var(--status-warning); }
.toast--danger  .toast__icon { background: rgba(244,63,94,0.15);  color: var(--status-danger); }

.toast__body { flex: 1; min-width: 0; }
.toast__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.toast__desc {
  font-size: 12px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toast__close {
  width: 32px; height: 32px;
  border-radius: var(--radius-lg);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.toast__close:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text-primary);
}

.toast__progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  background: linear-gradient(to right,
    var(--color-brand-primary),
    rgba(var(--color-brand-primary-rgb), 0.5));
  animation: toast-shrink linear forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: scale(0.95); }
}
@keyframes toast-shrink { from { width: 100%; } to { width: 0%; } }