.notifications {
  position: fixed;
  top: calc(var(--toolbar-height) + var(--space-sm));
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  z-index: var(--z-notification);
  pointer-events: none;
  width: max-content;
  max-width: min(440px, calc(100vw - 2 * var(--space-md)));
  transform: translateX(-50%);
}

.notification {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
  pointer-events: auto;
  transform: translateY(-12px);
  opacity: 0;
  max-height: 200px;
  overflow: hidden;
  transition:
    transform var(--transition-base),
    opacity var(--transition-base),
    max-height var(--transition-base),
    margin var(--transition-base),
    padding var(--transition-base),
    border-width var(--transition-base);
}

.notification--visible {
  transform: translateY(0);
  opacity: 1;
}

.notification--leaving {
  transform: translateY(-8px);
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}

.notification--success {
  border-left-color: var(--color-success);
  background-color: var(--color-success-soft);
}

.notification--error {
  border-left-color: var(--color-error);
  background-color: var(--color-error-soft);
}

.notification--error .notification__close {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-error);
  width: 24px;
  height: 24px;
  margin-top: -2px;
  font-size: var(--font-size-md);
  line-height: 1;
}

.notification--error .notification__close:hover {
  background-color: var(--color-error);
  color: var(--color-surface);
  border-color: var(--color-error);
}

.notification--info {
  border-left-color: var(--color-info);
  background-color: var(--color-info-soft);
}

.notification--loading {
  border-left-color: var(--color-warning);
  background-color: var(--color-warning-soft);
}

.notification__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  margin-top: 1px;
}

.notification__icon--success {
  color: var(--color-success);
}

.notification__icon--error {
  color: var(--color-error);
}

.notification__icon--info {
  color: var(--color-info);
}

.notification__icon--loading {
  color: var(--color-warning);
  animation: notification-spin 1.2s linear infinite;
}

.notification__body {
  flex: 1;
  min-width: 0;
  line-height: var(--line-height-normal);
  color: var(--color-text);
  word-wrap: break-word;
}

.notification__close {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  font-size: var(--font-size-base);
}

.notification__close:hover {
  color: var(--color-text);
  background-color: var(--color-surface);
}

@keyframes notification-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notification {
    transition: opacity 80ms linear;
    transform: none !important;
  }
  .notification--visible {
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .notifications {
    max-width: calc(100vw - 2 * var(--space-md));
  }
}