/*
 * «Уведомления выключены» (js/n1-push.js): карточка вверху вкладки
 * «Сообщения» и строка в Профиле. Только в приложении из магазина и только
 * когда телефон не разрешил пуши.
 *
 * Карточка — та же .s-card, что у списка чатов под ней: 3D колокола Тима
 * слева, текст, салатовая кнопка «Включить» под текстом (на 320 px в одну
 * строку с текстом она не помещается). Крестика нет: плашка видна, пока
 * уведомления выключены.
 * Без эффектов нажатия. Появляется и уходит раскрытием по высоте
 * (grid-template-rows 1fr ↔ 0fr): список чатов под ней едет, а не прыгает.
 */
body.n1 .n1-pu {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 16px;
  transition: grid-template-rows 260ms var(--neo-ease, ease-out), margin-top 260ms var(--neo-ease, ease-out), opacity 200ms ease-out;
}
body.n1 .n1-pu.is-off { grid-template-rows: 0fr; margin-top: 0; opacity: 0; }
body.n1 .n1-pu-in { min-height: 0; overflow: hidden; }

body.n1 .n1-pu-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 16px 18px; }
body.n1 .n1-pu-art { flex: none; width: 56px; height: 56px; object-fit: contain; }
body.n1 .n1-pu-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
body.n1 .n1-pu-text .s-g { text-wrap: pretty; }

body.n1 .n1-pu-btn {
  align-self: flex-start;
  margin-top: 12px;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 18px;
  background: var(--n1-lime);
  color: var(--n1-on-lime);
  font: 600 15px/20px var(--n1-font);
  letter-spacing: -.2px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.n1 .n1-pu-btn:focus-visible { outline: 2px solid var(--n1-lime); outline-offset: 2px; }

/* узкий экран (SE первого поколения): картинка поменьше, тексту место */
@media (max-width: 359px) {
  body.n1 .n1-pu-card { gap: 12px; padding: 14px 14px 16px; }
  body.n1 .n1-pu-art { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  body.n1 .n1-pu { transition: none; }
}

/* ── Мягкий запрос уведомлений (n1-push.js, 07.10) ───────────────────────
   Своё окно до системного: картинка колокола, заголовок, строка, салатовая
   «Включить уведомления» и тихая «Не сейчас». Полка окон (20000), как у
   других окон очереди; вид как у окна переезда склада (n1-moved-modal). */
body.n1 .n1-pz-bd {
  position: fixed; inset: 0; z-index: 20000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box;
  background: rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease-out, visibility 0s .2s;
}
body.n1 .n1-pz-bd.active { opacity: 1; visibility: visible; transition: opacity .2s ease-out, visibility 0s 0s; }
body.n1 .n1-pz {
  width: 100%; max-width: 342px; box-sizing: border-box;
  padding: 24px 24px 12px; border-radius: var(--n1-r-card);
  background: var(--n1-card); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  text-align: center; transform: scale(.96); transition: transform .2s ease-out;
}
body.n1 .n1-pz-bd.active .n1-pz { transform: none; }
body.n1 .n1-pz-art { display: block; width: 112px; height: 112px; margin: 0 auto 16px; object-fit: contain; }
body.n1 .n1-pz h3 { margin: 0; font: 700 20px/26px var(--n1-font); letter-spacing: -.4px; color: #fff; text-wrap: balance; }
body.n1 .n1-pz p { margin: 8px 0 20px; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); text-wrap: pretty; }
body.n1 .n1-pz .s-cta { height: 52px; border-radius: 26px; }
body.n1 .n1-pz-net { display: block; width: 100%; height: 44px; margin-top: 4px; font: 400 15px/20px var(--n1-font); color: var(--n1-grey); }

/* Строка на Главной под пунктом выдачи: уведомления запрещены в телефоне */
body.n1 .n1-pz-home {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; height: 40px; padding: 0 14px 0 12px;
  border-radius: 20px; background: var(--n1-card);
  font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: #fff;
}
body.n1 .n1-pz-home svg { flex: none; width: 20px; height: 20px; }
body.n1 .n1-pz-home-t { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.n1 .n1-pz-home-a { flex: none; color: var(--n1-lime); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  body.n1 .n1-pz-bd, body.n1 .n1-pz { transition: none; }
}