/* ==========================================
   Всплывающие уведомления (notice/toast)
   Разметку создаёт js/notice.js, ассеты
   подключает Module/Notice/NoticeAssets.
   ========================================== */

/* Стек у верхней кромки окна, по центру. Клики по пустому месту стека
   проходят сквозь него — перехватывают их только сами уведомления. */
.ds-notices {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  width: min(420px, calc(100vw - 24px));
  padding: var(--ds-space-3) 0;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Плоский стиль сайта: тени на токенах выключены, поэтому уведомление
   отделяется от фона светлотой и светлой рамкой. Стартовое положение —
   выше кромки окна, к нулю его приводит класс --in (выезд сверху вниз). */
.ds-notice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  width: 100%;
  padding: var(--ds-space-3) var(--ds-space-4);
  color: var(--ds-text-white);
  font-size: var(--ds-font-size-base);
  line-height: 1.45;
  background: var(--ds-bg-dark);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--ds-radius-md);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(calc(-100% - var(--ds-space-4)));
  transition: transform .22s ease, opacity .22s ease;
  will-change: transform, opacity;
}

.ds-notice--in {
  opacity: 1;
  transform: translateY(0);
}

.ds-notice--out {
  opacity: 0;
  transform: translateY(calc(-100% - var(--ds-space-4)));
}

.ds-notice--success { background: var(--ds-bg-success); }
.ds-notice--error   { background: var(--ds-bg-accent-hover); }
.ds-notice--warning { background: var(--ds-bg-warning); }
/* info — служебный тип: не кричит цветом, но и не сливается с фоном
   страницы (#262626), поэтому берёт ступень служебных блоков. */
.ds-notice--info    { background: var(--ds-bg-overlay); }

.ds-notice__icon {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: var(--ds-font-size-lg);
  line-height: 1;
  opacity: .95;
}

.ds-notice__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ds-notice__title {
  margin-bottom: var(--ds-space-1);
  font-weight: 700;
}

.ds-notice__text {
  /* Длинные слова и URL не растягивают уведомление за пределы окна. */
  overflow-wrap: anywhere;
}

.ds-notice__close {
  flex: 0 0 auto;
  margin: -2px -6px 0 0;
  padding: 2px 6px;
  color: inherit;
  font: inherit;
  line-height: 1;
  background: none;
  border: 0;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  opacity: .7;
  transition: opacity var(--ds-transition);
}

.ds-notice__close:hover,
.ds-notice__close:focus-visible {
  opacity: 1;
}

.ds-notice__close:focus-visible {
  outline: 2px solid var(--ds-text-white);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .ds-notice {
    transition: none;
  }
}