/**
 * assets/css/notifications.css — Всплывающие уведомления внизу экрана.
 *
 * Выделено из общего styles.css при разборе стилей по модулям
 * (исходные строки 2920–2920, 2921–3244).
 */

/* ====== УВЕДОМЛЕНИЯ ВНИЗУ ЭКРАНА ====== */

/* ====== УВЕДОМЛЕНИЯ ВНИЗУ ЭКРАНА С ГРАДИЕНТНЫМ ФОНОМ ====== */
.bottom-notification {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 100px; /* Выше навигации */
  /*
   * Ступень тоста, а не раздела.
   *
   * Уведомление стояло на 1000 — НИЖЕ навигации (2000) и любого окна. По
   * месту оно и так у нижнего края: на экране с вырезом полоса меню
   * поднимается на 68px + безопасный низ и накрывает уведомлению нижнюю
   * кромку, а при открытом окне его не видно вовсе. Сообщение, которого
   * не видно, не сообщение — уведомления живут на самой верхней ступени.
   */
  z-index: var(--tam-z-toast);
  transform: translateY(120%);
  transition: transform var(--tam-t-modal) cubic-bezier(0.2, 0.95, 0.25, 1);
  will-change: transform;
  opacity: 0;
}

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

/*
 * Уведомление — та же доска, что окна игры.
 *
 * Здесь стоял тёмно-синий «космос» со звёздным крошевом
 * (#2b3046 → #090b14 плюс семь белых точек в ::before): целиком чужая
 * тема. Уведомление появляется поверх ЛЮБОГО экрана, поэтому его
 * материал видно чаще, чем материал любого раздела.
 *
 * Материал доски — §24 `ui-frame.css`, здесь только геометрия.
 */
.notification-content {
  border-radius: var(--ui-radius-lg);
  padding: 0;
  overflow: hidden;
  position: relative;
}

.notification-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  position: relative;
  z-index: 1;
}

.notification-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--ui-radius-sm);
}

.notification-icon svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(var(--ui-art-shadow-pin));
}

.notification-text {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-weight: 800;
  font-size: var(--ui-size-value);
  color: var(--ui-ivory-light);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  line-height: 1.2;
}

.notification-message {
  font-size: var(--ui-size-body);
  color: var(--ui-text-main);
  opacity: .86;
  line-height: 1.4;
}

.notification-close {
  width: 32px;
  height: 32px;
  border-radius: var(--ui-radius-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--ui-ease), transform var(--ui-ease);
  flex-shrink: 0;
}

.notification-close:active {
  transform: scale(0.95);
}

/* Шкала таймера уведомления: сколько ему осталось висеть. Материал —
   общий (§14 рамы), здесь высота и то, что заливка уезжает влево. */
.notification-progress {
  height: 3px;
  z-index: 1;
}

.notification-progress .progress-bar {
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
}

.progress-bar.animating {
  animation: notificationProgress 4s linear forwards;
}

@keyframes notificationProgress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

/* Анимация появления уведомлений */
@keyframes notificationSlideIn {
  from {
    opacity: 0;
    transform: translateY(120%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bottom-notification.active {
  animation: notificationSlideIn var(--tam-t-sheet) cubic-bezier(0.2, 0.95, 0.25, 1);
}

/*
 * Цветная грань слева — смысл уведомления крупнее, чем значок в 20px.
 * Геометрия здесь, цвет — §24 `ui-frame.css`.
 */
.notification-content::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--ui-radius-lg) 0 0 var(--ui-radius-lg);
}

/* Адаптивность */
@media (max-width: 380px) {
  .bottom-notification {
    left: 12px;
    right: 12px;
    bottom: 90px;
  }
  
  .notification-top {
    padding: 16px;
    gap: 12px;
  }
  
  .notification-icon {
    width: 32px;
    height: 32px;
  }
  
  .notification-icon svg {
    width: 18px;
    height: 18px;
  }
  
  .notification-title {
    font-size: 15px;
  }
  
  .notification-message {
    font-size: 13px;
  }
  
  .notification-close {
    width: 30px;
    height: 30px;
  }
}

/*
 * На 320px строка не ломается в столбец.
 *
 * Здесь стояло `flex-direction: column`: значок уходил на свою строку,
 * крестик — в угол, и доска вырастала вдвое, показывая пустое место
 * справа от значка. Места хватает и в строку — доска в 296px, из них
 * значок 32, зазор 12 и крестик 30: тексту остаётся 222px (§82).
 */

/* Для планшетов и больших экранов */
@media (min-width: 768px) {
  .bottom-notification {
    max-width: 400px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
  }
  
  .bottom-notification.active {
    transform: translateX(-50%) translateY(0);
  }
  
  @keyframes notificationSlideIn {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(120%);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }
}

/*
 * Класс `important` здесь описывал золотую грань, золотое гнездо значка и
 * своё свечение. Ставить его было некому: живую разметку собирает
 * `mvp/views/notify.view.js`, и такого вида у уведомления нет — правила
 * пришли из `_private/legacy/app.js` вместе с разбором styles.css.
 * Убраны по §87 ТЗ после проверки достижимости.
 */