.notifications {
  position: fixed;
  z-index: var(--z-notification);
  top: env(safe-area-inset-top);
  right: env(safe-area-inset-right);
  box-sizing: border-box;
  width: min(412px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: none;
}

.notifications .notification {
  position: relative;
  /* Раскладкой управляет общий контейнер, а не рассчитанные библиотекой отступы. */
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  font: 14px/1.45 system-ui, sans-serif;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: auto;
  --notification-tone: var(--color-info);
  --notification-icon: url("../icons/info.08bc712dac23.svg");
}

.notifications .notification.on { opacity: 1; }
.notifications .notification--success {
  --notification-tone: var(--color-success);
  --notification-icon: url("../icons/check.a8e6b31f47c2.svg");
}
.notifications .notification--error {
  --notification-tone: var(--color-danger);
  --notification-icon: url("../icons/triangle-alert.db1d9c39d094.svg");
}
.notifications .notification--warning {
  --notification-tone: var(--color-warning);
  --notification-icon: url("../icons/triangle-alert.db1d9c39d094.svg");
}
.notification-content {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 32px;
  align-items: start;
  column-gap: 10px;
}
.notification-icon {
  width: 20px;
  height: 20px;
  margin-top: 6px;
  background: var(--notification-tone);
  mask: var(--notification-icon) center / contain no-repeat;
}
.notification-message { padding-block: 6px; overflow-wrap: anywhere; white-space: pre-wrap; }
.notification-count { grid-column: 2; color: var(--color-text-muted); font-size: 12px; }
.notification-close { grid-column: 3; grid-row: 1; }
.notification-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.notifications-fallback { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.notifications-fallback li {
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.notifications-fallback [data-level="25"] { border-inline-start: 3px solid var(--color-success); }
.notifications-fallback [data-level="30"] { border-inline-start: 3px solid var(--color-warning); }
.notifications-fallback [data-level="40"] { border-inline-start: 3px solid var(--color-danger); }
@media (max-width: 480px) {
  .notifications { padding: 12px; }
}
@media (max-width: 480px), (pointer: coarse) {
  .notification-content { grid-template-columns: 20px minmax(0, 1fr) 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .notifications .notification { transition: none; }
}
@media print { .notifications { display: none; } }