/* N1: support. Правила только внутри body.n1 (см. n1.css). */

/*
 * Поддержка и чаты в новом виде (N1).
 *  - экраны техподдержки (js/support.js): список заявок, новая заявка, шторка
 *    «Мои посылки», экран заявки, просмотр фото;
 *  - чат уведомлений категории #notif-detail-screen (разметка app.js,
 *    дорисовка js/messages.js).
 * support.js и messages.js вставляют свой <style> в конец <head>, то есть
 * ПОСЛЕ этого файла, поэтому каждое правило здесь начинается с body.n1 (вес
 * выше). Движение экранов и шторок (transform, transition, z-index) не трогаем:
 * им управляют support.js и neo-gestures.js.
 */

/* ── Экраны поддержки: общий вид ──────────────────────────────────────── */
body.n1 .sp-screen {
  --n1-red: #ff6b6b;
  background: var(--n1-bg);
  border-left: 0;
  color: #fff;
  font-family: var(--n1-font);
  -webkit-tap-highlight-color: transparent;
}
body.n1 .sp-header {
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  gap: 12px;
  border-bottom: 0;
  background: var(--n1-bg);
}
body.n1 .sp-back {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--n1-card2);
  color: #fff;
}
body.n1 .sp-back svg { width: 22px; height: 22px; }
body.n1 .sp-title { font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .sp-subtitle { margin-top: 0; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-grey2); }
body.n1 .sp-header-right { min-width: 44px; }
body.n1 .sp-body { padding: 8px 16px 24px; }
body.n1 .sp-footer {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 0;
  background: var(--n1-bg);
  box-shadow: inset 0 .5px 0 var(--n1-hair);
}

/* Док внизу экрана: большая кнопка и серая сноска под ней */
body.n1 .sp-footer .s-cta { gap: 10px; transition: background-color .2s ease, color .2s ease; }
body.n1 .s-cta.n1s-cta--dark { background: var(--n1-card2); color: #fff; }
/* выключенная и занятая — серые; только в поддержке, чужие кнопки не трогаем */
body.n1 .sp-screen .s-cta[disabled],
body.n1 .sp-screen .s-cta.is-busy,
body.n1 .n1s-sheet .s-cta[disabled] { background: var(--n1-card2); color: var(--n1-grey2); cursor: default; transform: none; }
body.n1 .n1s-note { margin-top: 10px; text-align: center; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-grey); text-wrap: balance; }
body.n1 .n1s-note--top { margin: 0 0 12px; font-size: 15px; line-height: 20px; letter-spacing: -.23px; }

/* Кольцо загрузки в кнопке и на плитке файла */
body.n1 .n1s-spin {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .16);
  border-top-color: var(--n1-grey);
  animation: n1sSpin .8s linear infinite;
}
@keyframes n1sSpin { to { transform: rotate(360deg); } }

/* Подзаголовок группы и группа-карточка */
body.n1 .sp-screen .n1s-sub { margin: 16px 0 8px; }
/* Первым в теле стоит держатель знака обновления (нулевой высоты):
   <neo-ptr class="n1ptr"> из js/n1-ptr.js. С ним и без него отступ один и
   тот же, иначе список прыгал на 8 px от касания. */
body.n1 .sp-screen .n1s-sub:first-child,
body.n1 .sp-screen neo-ptr:first-child + .n1s-sub { margin-top: 8px; }
body.n1 .sp-screen .n1s-sub .r { font: 400 15px/20px var(--n1-font); color: var(--n1-grey2); }

/* Пусто, ошибка: 3D по центру, заголовок, одна серая строка */
body.n1 .n1s-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 100%;
  padding: 24px 24px 48px;
  text-align: center;
}
body.n1 .n1s-empty img { width: 112px; height: 112px; object-fit: contain; margin-bottom: 16px; }
body.n1 .n1s-empty .s-g { max-width: 300px; }
body.n1 .n1s-empty .s-btn { margin-top: 16px; }

/* Скелетон: полоски на карточке (перелив .n1-sk из n1.css) */
body.n1 .n1s-skl { display: block; height: 14px; border-radius: 7px; min-width: 0; }

/* ── Список заявок #sp-list-screen ────────────────────────────────────── */
/* Строки как строки чатов на вкладке «Сообщения» (те же размеры, что у
   #messages-dialogs-list в n1.css): аватар 52, тема, время, последнее
   сообщение, счётчик; волосок от текста. Касание строку не меняет
   (n1-motion.css). */
body.n1 .n1s-group { overflow: hidden; }
body.n1 .n1s-c {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 12px 16px;
  text-align: left;
  color: #fff;
}
body.n1 .n1s-c + .n1s-c::before { content: ""; position: absolute; left: 80px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 .n1s-c-av { flex: none; width: 52px; height: 52px; border-radius: 26px; background: var(--n1-av); display: grid; place-items: center; overflow: hidden; }
body.n1 .n1s-c-av img { width: 42px; height: 42px; object-fit: contain; }
body.n1 .n1s-c-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.n1 .n1s-c-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
body.n1 .n1s-c-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .n1s-c-time { flex: none; font: 400 13px/18px var(--n1-font); color: var(--n1-grey2); font-variant-numeric: tabular-nums; }
body.n1 .n1s-c-prev { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 .n1s-c.has-unread .n1s-c-prev { color: #fff; }
body.n1 .n1s-c-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--n1-lime); color: var(--n1-on-lime); font: 700 12px/20px var(--n1-font); text-align: center; }
/* скелетон строки: круг и две полоски */
body.n1 .n1s-c--sk .n1s-c-main { gap: 10px; }
body.n1 .n1s-skl--2 { height: 12px; }
body.n1 #sp-list-screen .n1s-empty { padding-bottom: 72px; }

/* ── Новая заявка #sp-new-screen ──────────────────────────────────────── */
/* Одна карточка-форма: строка «Тема» и многострочное «Что случилось» */
body.n1 .n1s-form { overflow: hidden; }
body.n1 .n1s-subj { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; cursor: text; }
body.n1 .n1s-subj::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; transform: scaleY(.5); transform-origin: bottom; background: var(--n1-hair); }
body.n1 .n1s-subj-k { flex: none; color: var(--n1-grey); }
body.n1 .n1s-in {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: 400 17px/22px var(--n1-font);
  letter-spacing: -.43px;
  outline: 0;
  caret-color: var(--n1-lime);
  -webkit-appearance: none;
  appearance: none;
}
body.n1 .n1s-in::placeholder { color: var(--n1-grey2); opacity: 1; }
body.n1 .n1s-subj .n1s-in { flex: 1; height: 52px; }
body.n1 .n1s-ta { display: block; min-height: 136px; padding: 14px 16px 16px; resize: none; }
/* ошибка: подпись поля и подсказка красным, пока не начали вводить; что не так —
   строкой 13 красным под формой (без тостов поверх шапки) */
body.n1 .n1s-subj.is-err .n1s-subj-k,
body.n1 .n1s-ta.is-err::placeholder { color: var(--n1-red); }
body.n1 .n1s-form:has(.is-err) { box-shadow: inset 0 0 0 1.5px var(--n1-red); }
body.n1 .n1s-err { margin: 8px 4px 0; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-red); }
body.n1 .n1s-err[hidden] { display: none; }

/* Посылки строками: миниатюра 48, название, «…8901 · статус», крестик */
body.n1 .n1s-prow { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 0 6px 0 16px; color: #fff; text-align: left; }
body.n1 .n1s-prow + .n1s-prow::before { content: ""; position: absolute; left: 78px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 .n1s-thumb.n1s-thumb--grey { color: var(--n1-grey); }
body.n1 .n1s-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--n1-grey2); }
body.n1 .n1s-add { min-height: 64px; padding-right: 16px; color: var(--n1-lime); }
body.n1 .n1s-add-ic { flex: none; width: 48px; display: grid; place-items: center; }

/* Плитки фото и файлов 76 px */
body.n1 .n1s-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
body.n1 .n1s-tile { position: relative; flex: none; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--n1-card); }
body.n1 .n1s-tile > img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.n1 .n1s-tile-doc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--n1-grey); }
body.n1 .n1s-tile.has-img .n1s-tile-doc { display: none; }
body.n1 .n1s-tile.no-img > img { display: none; }
body.n1 .n1s-tile.has-img.no-img .n1s-tile-doc { display: flex; }
body.n1 .n1s-tile.is-up::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
body.n1 .n1s-tile-spin { position: absolute; left: 50%; top: 50%; z-index: 1; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .25); border-top-color: var(--n1-lime); animation: n1sSpin .8s linear infinite; }
body.n1 .n1s-tile-x { position: absolute; top: 4px; right: 4px; z-index: 2; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 14px; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; cursor: pointer; }
body.n1 .n1s-tile-add { padding: 0; border: 0; display: grid; place-items: center; color: var(--n1-lime); cursor: pointer; }

/* ── Заявка #sp-ticket-screen ─────────────────────────────────────────── */
body.n1 #sp-ticket-screen .sp-title-wrap { padding: 0 4px; }
/* посылка под шапкой, волосок снизу; несколько посылок — разворачиваются нажатием */
body.n1 .n1s-pin { flex: none; position: relative; padding: 0 0 8px; background: var(--n1-bg); }
body.n1 .n1s-pin[hidden] { display: none; }
/* маленький экран с открытой клавиатурой: посылка свёрнута, под шапкой
   остаётся только волосок (support.js foldPinN1) */
body.n1 .n1s-pin.is-folded { height: 1px; padding: 0; overflow: hidden; }
body.n1 .n1s-pin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; transform: scaleY(.5); transform-origin: bottom; background: var(--n1-hair); }
body.n1 .n1s-pin.is-multi,
body.n1 .n1s-pin-row.is-own { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* своя посылка открывается касанием; пока грузится — приглушена */
body.n1 .n1s-pin-row.is-busy { opacity: .5; pointer-events: none; }
body.n1 .n1s-pin-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 16px; }
body.n1 .n1s-pin .s-thumb { width: 40px; height: 40px; border-radius: 12px; }
body.n1 .n1s-pin .s-thumb img { width: 28px; height: 28px; }
body.n1 .n1s-pin-more { flex: none; }
body.n1 .n1s-pin-chev { display: grid; margin-left: -4px; }
/* раскрытый список посылок: до 4.5 строк (половинка пятой подсказывает, что
   список листается), дальше прокрутка внутри; строка со стрелкой «свернуть»
   остаётся сверху */
body.n1 .n1s-pin-list { max-height: min(252px, 38vh); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.n1 .n1s-pin-list > .n1s-pin-row:first-child { position: sticky; top: 0; z-index: 1; background: var(--n1-bg); }
body.n1 .n1s-sk-sq.n1s-sk-sq--40 { width: 40px; height: 40px; border-radius: 12px; }
body.n1 .n1s-text--sk { gap: 10px; }

/* лента прижата к низу экрана */
body.n1 #sp-ticket-screen-body { display: flex; flex-direction: column; padding: 0 16px 16px; }
body.n1 .n1s-thread { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
body.n1 .n1s-day { align-self: center; margin: 12px 0 4px; color: var(--n1-grey2); }
/* полная тема, если шапка её обрезала: первой строкой переписки */
body.n1 .n1s-topic { align-self: center; max-width: 88%; margin: 8px 0 0; text-align: center; overflow-wrap: anywhere; }
body.n1 .n1s-sys { align-self: center; max-width: 88%; margin: 2px 0; text-align: center; color: var(--n1-grey2); }

/* пузыри: свои справа тёмно-салатовым тоном (видно с первого взгляда, кто
   писал), поддержки слева #2f2f2f с именем, без рамок */
body.n1 .n1s-msg { position: relative; max-width: 82%; border-radius: 18px; overflow: hidden; word-break: break-word; }
body.n1 .n1s-msg--me { align-self: flex-end; background: #3a4622; border-bottom-right-radius: 6px; }
body.n1 .n1s-msg--me .n1s-msg-time { color: #a9b58f; }
body.n1 .n1s-msg--me .n1s-file-ic { background: rgba(0, 0, 0, .22); }
/* отправляется: часики у времени (.n1s-tick--wait, ниже) */
body.n1 .n1s-msg--staff { align-self: flex-start; background: var(--n1-card); border-bottom-left-radius: 6px; }
body.n1 .n1s-msg.has-media { width: min(82%, 300px); }
body.n1 .n1s-msg-in { position: relative; padding: 8px 12px 8px 14px; }
body.n1 .n1s-msg-name { margin-bottom: 2px; color: var(--n1-grey2); }
body.n1 .n1s-msg-name--top { margin: 0; padding: 8px 14px 6px; }
body.n1 .n1s-msg-in.is-doc { padding-bottom: 6px; }
body.n1 .n1s-msg-text { font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; white-space: pre-wrap; }
/* время в углу пузыря: место под него держит невидимый хвост у текста */
body.n1 .n1s-msg-sp { display: inline-block; width: 46px; height: 1px; }
body.n1 .n1s-msg-time { position: absolute; right: 12px; bottom: 7px; font: 400 13px/18px var(--n1-font); color: var(--n1-grey2); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.n1 .n1s-msg-time--line { position: static; display: block; margin-top: 2px; text-align: right; }
body.n1 .n1s-msg-time--over { right: 8px; bottom: 8px; padding: 0 7px; border-radius: 10px; background: rgba(0, 0, 0, .5); color: #fff; line-height: 20px; }
/* фото во всю ширину пузыря сверху; несколько — сеткой */
body.n1 .n1s-media { position: relative; display: grid; gap: 2px; }
body.n1 .n1s-media--grid { grid-template-columns: 1fr 1fr; }
body.n1 .n1s-img { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: #1f1f1f; cursor: zoom-in; overflow: hidden; }
body.n1 .n1s-media--grid .n1s-img { aspect-ratio: 1; }
body.n1 .n1s-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* PDF и другие файлы строкой: плитка со значком, имя, размер */
body.n1 .n1s-file { display: flex; align-items: center; gap: 12px; min-width: 200px; padding: 4px 0 6px; color: #fff; text-decoration: none; }
body.n1 .n1s-file + .n1s-file { margin-top: 2px; }
body.n1 .n1s-file-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--n1-card); color: var(--n1-grey); }
body.n1 .n1s-msg--staff .n1s-file-ic { background: var(--n1-card2); }
/* скелетон ленты */
body.n1 .n1s-msg--sk { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
body.n1 .n1s-msg--sk.n1s-msg--me { padding: 0; }
body.n1 .n1s-sk-media { display: block; width: 240px; height: 180px; border-radius: 0; }
body.n1 .n1s-sk-day { align-self: center; width: 84px; height: 12px; margin: 12px 0 4px; }

/* Чат заявки — тот же вид, что каналы «Сообщений»: у ответа поддержки слева
   аватар (гарнитура) у низа пузыря, в шапке справа он же. */
body.n1 .n1s-head-av { width: 36px; height: 36px; border-radius: 18px; background: var(--n1-av); display: grid; place-items: center; overflow: hidden; }
body.n1 .n1s-head-av img { width: 26px; height: 26px; object-fit: contain; }
body.n1 .n1s-row { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
body.n1 .n1s-row--staff { align-self: flex-start; max-width: calc(100% - 20px); }
body.n1 .n1s-row--staff > .n1s-msg { flex: 0 1 auto; min-width: 0; max-width: none; }
body.n1 .n1s-row--staff > .n1s-msg.has-media { width: 280px; }
body.n1 .n1s-av { flex: none; width: 32px; height: 32px; border-radius: 16px; background: var(--n1-av); display: grid; place-items: center; overflow: hidden; }
body.n1 .n1s-av img { width: 24px; height: 24px; object-fit: contain; }
/* своё: значок отправки у времени — часики, галочка, красный знак */
body.n1 .n1s-msg--me .n1s-msg-sp { width: 64px; }
body.n1 .n1s-tick { display: inline-flex; margin-left: 4px; vertical-align: -2px; color: #a9b58f; }
body.n1 .n1s-msg-time--over .n1s-tick { color: #fff; }
body.n1 .n1s-tick--err { color: var(--n1-red); vertical-align: -3px; }
/* исходящее (ещё в пути или не ушло): пузырь справа, под ним «Не отправлено» */
body.n1 .n1s-out { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; max-width: 82%; min-width: 0; }
body.n1 .n1s-out > .n1s-msg { max-width: 100%; }
body.n1 .n1s-out > .n1s-msg.has-media { width: 300px; }
body.n1 .n1s-fail { display: flex; align-items: center; gap: 2px; margin: 2px -6px 0 0; }
body.n1 .n1s-fail-t { margin-right: 4px; color: var(--n1-red); }
/* «Повторить» и «Удалить»: строка занимает 32 px, а касание 44 (поля
   кнопки заходят на 5 px вверх и 7 вниз, поверх соседей). Касание мимо
   кнопок, но по строке «Не отправлено» клавиатуру не закрывает (support.js). */
body.n1 .n1s-fail-b { position: relative; z-index: 1; height: 44px; margin: -5px 0 -7px; padding: 0 8px; font: 600 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-lime); }
body.n1 .n1s-fail-b--x { font-weight: 400; color: var(--n1-grey2); }
/* новое сообщение (ответ пришёл, пока заявка открыта) проявляется снизу */
@keyframes n1sMsgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.n1 .n1s-thread .n1s-in { animation: n1sMsgIn 260ms cubic-bezier(.2, .8, .2, 1) both; }
/* «к последним»: круглая кнопка над полем ввода, со счётчиком новых */
body.n1 .n1s-jump {
  position: absolute;
  right: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: var(--n1-card2);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s .18s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.n1 .n1s-jump.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s 0s; }
body.n1 .n1s-jump-n { position: absolute; top: -6px; left: 50%; display: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; transform: translateX(-50%); background: var(--n1-lime); color: var(--n1-on-lime); font: 700 12px/20px var(--n1-font); text-align: center; }
body.n1 .n1s-jump-n.is-on { display: block; }

/* низ заявки: подпись и кнопка, или поле ввода */
body.n1 .n1s-compose-head { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 6px; padding: 0 2px 0 4px; }
body.n1 .n1s-link { height: 32px; padding: 0 4px; }
body.n1 .n1s-strip { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
body.n1 .n1s-strip:empty { display: none; }
body.n1 .n1s-strip::-webkit-scrollbar { display: none; }
body.n1 .n1s-strip .n1s-tile { width: 64px; height: 64px; background: var(--n1-card2); }
/* крестик в углу плитки 64 меньше, чем в форме (76): касание в середину
   плитки открывает фото крупно и не попадает в «Убрать» (у 28 px крестик
   доходил ровно до центра плитки) */
body.n1 .n1s-strip .n1s-tile-x { top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 11px; }
body.n1 .n1s-strip .n1s-tile-x svg { width: 12px; height: 12px; }
body.n1 .n1s-compose { display: flex; align-items: flex-end; gap: 8px; }
body.n1 .n1s-clip { flex: none; width: 40px; height: 44px; display: grid; place-items: center; color: var(--n1-grey); margin-left: -6px; }
body.n1 .n1s-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; min-height: 44px; border-radius: 22px; background: var(--n1-card2); }
body.n1 .n1s-chat-in { display: block; min-height: 44px; max-height: 130px; padding: 11px 16px; resize: none; }
body.n1 .n1s-send {
  flex: none;
  display: none;
  width: 36px;
  height: 36px;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  place-items: center;
  background: var(--n1-lime);
  color: var(--n1-on-lime);
  cursor: pointer;
}
body.n1 .n1s-compose.has-input .n1s-send { display: grid; animation: n1sSendIn .16s ease-out both; }
body.n1 .n1s-send[disabled] { background: var(--n1-card2); color: var(--n1-grey2); cursor: default; }
@keyframes n1sSendIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* ── Просмотр фото заявки #sp-viewer ──────────────────────────────────── */
/* фон непрозрачный: сквозь 94% чёрного проступал заголовок экрана под
   просмотром, и счётчик «3 из 3» стоял прямо на нём. Экран под фото
   проступает только пока фото смахивают (support.js, viewerGesture). */
body.n1 .sp-viewer { background: #000; }
body.n1 .sp-viewer img { max-height: calc(100% - 128px); border-radius: 12px; }
body.n1 .sp-viewer-x {
  top: calc(6px + env(safe-area-inset-top, 0px));
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
body.n1 .sp-viewer-x svg { width: 22px; height: 22px; }
/* несколько фото: «2 из 5» сверху по центру, на уровне крестика */
body.n1 .sp-viewer-n { position: absolute; z-index: 1; left: 50%; top: calc(18px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
body.n1 .sp-viewer-n[hidden] { display: none; }

/* ── Чат уведомлений категории #notif-detail-screen ───────────────────────
   Разметку строит app.js (openNotifCategory), messages.js дорисовывает шапку,
   значки, действия и пусто (n1Chat). Сдвиг экрана и свой жест не трогаем. */
body.n1 #notif-detail-screen { background: var(--n1-bg); color: #fff; font-family: var(--n1-font); }
body.n1 #notif-detail-screen .msg-chat-header {
  position: relative;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  gap: 12px;
  border-bottom: 0;
  background: var(--n1-bg);
  box-shadow: inset 0 -.5px 0 var(--n1-hair);
}
body.n1 #notif-detail-screen .msg-chat-back { width: 44px; height: 44px; border-radius: 22px; background: var(--n1-card2); color: #fff; }
body.n1 #notif-detail-screen .msg-chat-info { justify-content: center; gap: 0; }
body.n1 #notif-detail-screen .msg-chat-title-wrap { align-items: center; }
body.n1 #notif-detail-screen .msg-chat-title { font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; color: #fff; text-align: center; }
/* 3D категории справа, на месте пустышки для выравнивания заголовка */
body.n1 #notif-detail-screen .msg-chat-avatar {
  position: absolute;
  right: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--n1-av) !important;
  overflow: hidden;
}
body.n1 #notif-detail-screen .msg-chat-avatar[hidden] { display: none; }
body.n1 #notif-detail-screen .msg-chat-avatar img { width: 26px !important; height: 26px !important; object-fit: contain; }
body.n1 #notif-detail-screen .msg-chat-header > div:last-child { flex: none; width: 44px !important; }

/* лента прижата к низу, дата серым текстом без пилюли */
body.n1 #notif-detail-screen .msg-chat-body { padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
body.n1 #notif-detail-list { justify-content: flex-end; gap: 6px; }
body.n1 #notif-detail-list .msg-date-divider { padding: 12px 0 4px; }
body.n1 #notif-detail-list .msg-date-chip { padding: 0; border-radius: 0; background: none; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-grey2); }

/* пузырь без рамки, слева у его низа аватар канала (как в мессенджере, у
   каждого сообщения; 3D ставит messages.js n1Chat); заголовок белым, текст
   серым, время в углу */
body.n1 #notif-detail-list .msg-bubble { max-width: 92%; gap: 8px; align-items: flex-end; animation: none; }
body.n1 #notif-detail-list .msg-bubble-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; align-self: flex-end; border-radius: 16px; background: var(--n1-av); box-shadow: none; overflow: hidden; }
body.n1 #notif-detail-list .msg-bubble-avatar img { width: 24px !important; height: 24px !important; object-fit: contain; }
body.n1 #notif-detail-list .msg-bubble-avatar:empty { visibility: hidden; }
/* непрочитанное — чертой «Новые сообщения» над первым (messages.js), не точкой у каждого */
body.n1 #notif-detail-list .msg-unread-dot { display: none; }
body.n1 #notif-detail-list .n1m-new { margin: 8px -16px 2px; padding: 5px 16px; background: var(--n1-card); text-align: center; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-grey); }
body.n1 #notif-detail-list .msg-bubble-content,
body.n1 #notif-detail-list .msg-bubble.unread .msg-bubble-content {
  flex: 1;
  min-width: 0;
  padding: 12px 16px 10px;
  border: 0;
  border-radius: 18px 18px 18px 6px;
  background: var(--n1-card);
  overflow: hidden;
}
body.n1 #notif-detail-list .msg-bubble-title { margin: 0 0 4px; gap: 8px; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; }
body.n1 #notif-detail-list .msg-unread-dot { width: 8px; height: 8px; background: var(--n1-lime); }
body.n1 #notif-detail-list .msg-bubble-text { font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 #notif-detail-list .msg-bubble-text svg { color: var(--n1-lime); }
body.n1 #notif-detail-list .n1m-ic { display: grid; place-items: center; flex: none; color: var(--n1-lime); }
/* строки со значком (app.js formatParcelMessageHtml): пункт, часы работы, пункты смены склада */
body.n1 #notif-detail-list .n1m-line { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
body.n1 #notif-detail-list .n1m-line--c { align-items: center; }
body.n1 #notif-detail-list .n1m-branch { margin-top: 8px; }
body.n1 #notif-detail-list .msg-bubble-time { margin-top: 4px; font: 400 13px/18px var(--n1-font); color: var(--n1-grey2); text-align: right; font-variant-numeric: tabular-nums; }
/* бонусы: операция белым, остаток серым, без линии-разделителя */
body.n1 #notif-detail-list .bonus-msg-operation { padding-bottom: 2px; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; }
body.n1 #notif-detail-list .bonus-msg-divider { display: none; }
body.n1 #notif-detail-list .bonus-msg-balance { padding-top: 0; font: 400 15px/20px var(--n1-font); color: var(--n1-grey); }
/* действие («Оплатить», «Открыть заявку») строкой внизу пузыря, салатовым текстом */
body.n1 #notif-detail-list .n1m-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% + 32px);
  min-height: 48px;
  margin: 10px -16px -10px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 .5px 0 var(--n1-hair);
  color: var(--n1-lime);
  font: 600 17px/22px var(--n1-font);
  letter-spacing: -.4px;
  cursor: pointer;
  transition: background-color .1s ease;
}
body.n1 #notif-detail-list .n1m-act:not(:last-child) { margin-bottom: 0; }
body.n1 #notif-detail-list .n1m-act + .n1m-act { margin-top: 0; }
/* «Оплатить» ждёт загрузку Выдачи: приглушена и не нажимается второй раз */
body.n1 #notif-detail-list .n1m-act.is-busy { opacity: .5; pointer-events: none; }
/* фото в пузыре (messages.js): вровень с краями пузыря */
body.n1 #notif-detail-list .msgs-photo { margin: -12px -16px 10px; border-radius: 0; }
/* карточка события с фактами (messages.js n1Data, макеты NotifWallet / NotifParcel /
   NotifBonus): заголовок и сумма в строку, строки посылок, «Баланс» и время внизу */
body.n1 #notif-detail-list .n1d-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 2px; }
body.n1 #notif-detail-list .n1d-head .msg-bubble-title { flex: 1; min-width: 0; margin: 0; }
/* пузырь без фактов: 3D события (этап, возврат, пункт) плиткой слева от заголовка */
body.n1 #notif-detail-list .n1d-head.n1d-head--art { align-items: center; margin: 0 0 8px; }
/* готова, но не оплачена: «Ждёт оплаты» янтарным, как на Выдаче */
body.n1 #notif-detail-list .msg-bubble-title.n1d-title--amber { color: var(--n1-amber); }
body.n1 #notif-detail-list .n1d-amt { flex: none; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.n1 #notif-detail-list .n1d-amt--in { color: var(--n1-lime); }
body.n1 #notif-detail-list .n1d-amt--b { color: var(--n1-bonus); }
body.n1 #notif-detail-list .n1d-rows { display: flex; flex-direction: column; padding: 4px 0 0; }
body.n1 #notif-detail-list .n1d-p {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.n1 #notif-detail-list .n1d-thumb { width: 44px; height: 44px; border-radius: 12px; background: var(--n1-card2); }
body.n1 #notif-detail-list .n1d-thumb img { width: 40px; height: 40px; object-fit: contain; }
/* 3D Тима в плитке 44 почти во всю плитку, как в строках посылок (44 в 48,
   n1-parcel.css); пункт выдачи (этап «готово», icon/glav-1) нарисован с полем
   вдвое шире — крупнее, иначе он мельче соседних (то же в круге строки) */
body.n1 #notif-detail-list .n1d-thumb img[src*="/glav-1.webp"],
body.n1 #messages-dialogs-list .msg-dialog-avatar img[src*="/glav-1.webp"] { transform: scale(1.4); }
/* Строка посылки грузит карточку (messages.js openParcelFromChat): кольцо
   вместо картинки, строка не нажимается. Размер строки не меняется. */
body.n1 #notif-detail-list .n1d-p.is-busy { pointer-events: none; }
body.n1 #notif-detail-list .n1d-p.is-busy .n1d-thumb { position: relative; }
body.n1 #notif-detail-list .n1d-p.is-busy .n1d-thumb img { opacity: 0; }
body.n1 #notif-detail-list .n1d-spin { position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -10px; }
body.n1 #notif-detail-list .n1d-p-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.n1 #notif-detail-list .n1d-p-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; }
body.n1 #notif-detail-list .n1d-p-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); font-variant-numeric: tabular-nums; }
body.n1 #notif-detail-list .n1d-pay { flex: none; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-lime); }
body.n1 #notif-detail-list .n1d-pay--no { color: var(--n1-amber); }
body.n1 #notif-detail-list .n1d-line { padding-top: 4px; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); }
body.n1 #notif-detail-list .n1d-rows + .n1d-line { padding-top: 2px; }
body.n1 #notif-detail-list .n1d-foot { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
body.n1 #notif-detail-list .n1d-foot-l { flex: 1; min-width: 0; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); font-variant-numeric: tabular-nums; }
body.n1 #notif-detail-list .n1d-foot .msg-bubble-time { flex: none; margin: 0 0 0 auto; }
body.n1 #notif-detail-list .n1d-p .n1d-time { flex: none; align-self: flex-end; margin: 0 0 4px; }
/* пусто: 3D категории по центру */
body.n1 #notif-detail-list.n1m-is-empty { justify-content: center; }
body.n1 #notif-detail-list .msg-empty-state { gap: 4px; padding: 24px 24px 72px; }
body.n1 #notif-detail-list .msg-empty-state img { width: 112px; height: 112px; object-fit: contain; margin-bottom: 16px; }
body.n1 #notif-detail-list .msg-empty-state .s-g { max-width: 300px; }
/* Узкий экран (320–360): аватар и поля меньше, пузырь до края — иначе в строке
   посылки с «Не оплачено» от названия оставалось две буквы. Блок стоит ПОСЛЕ
   всех правил ленты: вес у них тот же, и выше по файлу его перебивали (поля
   пузыря, плитки посылок, черта «Новые сообщения» шире экрана на 4 px). */
@media (max-width: 360px) {
  body.n1 #notif-detail-screen .msg-chat-body { padding-left: 12px; padding-right: 12px; }
  body.n1 #notif-detail-list .msg-bubble { max-width: 100%; gap: 6px; }
  body.n1 #notif-detail-list .msg-bubble-avatar { width: 28px; height: 28px; }
  body.n1 #notif-detail-list .msg-bubble-avatar img { width: 21px !important; height: 21px !important; }
  body.n1 #notif-detail-list .msg-bubble-content,
  body.n1 #notif-detail-list .msg-bubble.unread .msg-bubble-content { padding-left: 14px; padding-right: 14px; }
  body.n1 #notif-detail-list .n1m-act { width: calc(100% + 28px); margin-left: -14px; margin-right: -14px; }
  body.n1 #notif-detail-list .msgs-photo { margin-left: -14px; margin-right: -14px; }
  body.n1 #notif-detail-list .n1d-p { gap: 10px; }
  /* «Не оплачено / Оплачено» под строкой посылки, а не справа: рядом с меткой
     на 320 оставалось «Блендер …» и «…8798 · 1.9 …» без «кг» */
  body.n1 #notif-detail-list .n1d-p.n1d-p--pay { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 0; }
  body.n1 #notif-detail-list .n1d-p--pay > .n1d-thumb { grid-row: 1 / span 2; }
  body.n1 #notif-detail-list .n1d-p--pay > .n1d-pay { grid-column: 2; }
  body.n1 #notif-detail-list .n1d-thumb { width: 40px; height: 40px; }
  body.n1 #notif-detail-list .n1d-thumb img { width: 36px; height: 36px; }
  body.n1 #notif-detail-list .n1m-new { margin-left: -12px; margin-right: -12px; }
}
/* просмотр фото уведомления */
body.n1 .msgs-photo-close { top: calc(6px + env(safe-area-inset-top, 0px)); right: 16px; width: 44px; height: 44px; border-radius: 22px; background: rgba(255, 255, 255, .14); }

/* ── Вкладка «Сообщения» ──────────────────────────────────────────────────
   Сверху вниз: плашка пушей (её ставит модуль пушей сразу за заголовком,
   когда уведомления выключены), большая карточка «Техподдержка»
   (разметка app.html, начинка n1-messages.js), заголовок «Чаты» и карточка
   чатов сервиса #n1m-list (строки messages.js). Тим, второй заход 06.10:
   утром поддержка стала строкой общего списка, карточку попросил вернуть,
   а чаты сервиса держать отдельно под ней. */

/* Карточка «Техподдержка»: салатовое свечение справа сверху (s-glow--tr),
   гарнитура Тима в углу, заголовок и часы работы. Ниже до двух заявок
   строками (тема и время, «№9002 · статус» и счётчик), внизу «Создать
   заявку» и «Все заявки». Шапка, строки и низ — position: relative, чтобы
   лежать поверх свечения (::before карточки). */
body.n1 .n1-support { margin-top: 16px; }
body.n1 .n1-support-art { position: absolute; right: 14px; top: 10px; width: 72px; height: 72px; object-fit: contain; pointer-events: none; }
body.n1 .n1-support-head { position: relative; padding: 20px 96px 16px 20px; }
body.n1 .n1-support-title { margin: 0; font: 700 20px/25px var(--n1-font); letter-spacing: -.4px; color: #fff; }
body.n1 .n1-support-hours { margin-top: 2px; }
/* заявки: волосок над первой и между строками — от текста, как в списках N1 */
body.n1 .n1-support-rows { position: relative; }
body.n1 .n1-support-rows[hidden] { display: none; }
body.n1 .n1-t { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: 68px; padding: 12px 20px; text-align: left; color: #fff; -webkit-tap-highlight-color: transparent; }
body.n1 .n1-t::before { content: ""; position: absolute; left: 20px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 .n1-t-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
body.n1 .n1-t-subj { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 17px/22px var(--n1-font); letter-spacing: -.4px; }
body.n1 .n1-t-time { flex: none; font: 400 13px/18px var(--n1-font); letter-spacing: -.08px; color: var(--n1-grey2); font-variant-numeric: tabular-nums; }
body.n1 .n1-t-st { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: var(--n1-grey); font-variant-numeric: tabular-nums; }
/* низ: «Создать заявку» тёмной кнопкой слева, «Все заявки» тихой ссылкой справа */
body.n1 .n1-support-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 20px 16px; }
body.n1 .n1-support-rows:not([hidden]) + .n1-support-foot { padding-top: 4px; }
body.n1 .n1-support-new { flex: none; padding: 0 18px 0 14px; }
body.n1 .n1-support-all { flex: none; height: 44px; display: flex; align-items: center; gap: 2px; padding: 0 0 0 12px; margin-right: -6px; white-space: nowrap; }
/* 320–359: чтобы кнопка и ссылка стояли в одну строку с запасом, поля
   карточки 16 и ссылка без отступа слева; гарнитура чуть меньше */
@media (max-width: 359px) {
  body.n1 .n1-support-head { padding: 18px 84px 14px 16px; }
  body.n1 .n1-support-art { right: 10px; top: 10px; width: 64px; height: 64px; }
  body.n1 .n1-t { padding: 12px 16px; }
  body.n1 .n1-t::before { left: 16px; }
  body.n1 .n1-support-foot { padding: 8px 16px 16px; gap: 4px; }
  body.n1 .n1-support-new { padding: 0 14px 0 12px; gap: 6px; }
  body.n1 .n1-support-all { padding-left: 4px; }
}
/* строки и кнопки при касании не меняются: Тим против любых откликов на касание (n1-motion.css) */

/* Чаты сервиса одной карточкой под заголовком «Чаты». Внутренний список
   #messages-dialogs-list, скелетон и «не загрузилось» лежат в той же
   карточке и своей (фон, скругление) не рисуют. */
body.n1 .n1m-list { overflow: hidden; }
body.n1 .n1m-list #messages-dialogs-list,
body.n1 .n1m-list .n1m-sk,
body.n1 .n1m-list .n1m-err { background: none; border-radius: 0; box-shadow: none; }

/* ── Вкладка «Сообщения»: скелетон и пусто списка каналов (messages.js) ── */
/* 3D Тима в круге строки категории: у новых картинок свои поля, при 38 px они
   выходили мельче соседних плиток 48; круг 52 тот же */
body.n1 #messages-dialogs-list .msg-dialog-avatar img { width: 42px; height: 42px; }
body.n1 .n1m-sk { overflow: hidden; }
body.n1 .n1m-sk-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 16px; }
body.n1 .n1m-sk-row + .n1m-sk-row::before { content: ""; position: absolute; left: 80px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: var(--n1-hair); }
body.n1 .n1m-sk-av { display: block; flex: none; width: 52px; height: 52px; border-radius: 26px; }
body.n1 .n1m-sk-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
body.n1 .n1m-tab-empty { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; }
/* пусто и ошибка с 3D Тима справа (messages.js tabArt): 84 px, как гарнитура
   на карточке «Техподдержка»; текст слева, поле справа под картинку */
body.n1 .n1m-tab-empty.n1m-tab-empty--art { position: relative; justify-content: center; min-height: 112px; padding-right: 108px; }
body.n1 .n1m-tab-art { position: absolute; right: 14px; top: 50%; width: 84px; height: 84px; margin-top: -42px; object-fit: contain; pointer-events: none; }
/* сообщения не загрузились: «Повторить» под строкой внутри карточки */
body.n1 .n1m-err [data-n1m-retry] { margin: 0 20px 18px; }

/* ── Шторка «Мои посылки» #sp-picker ──────────────────────────────────── */
body.n1 .sp-backdrop { background: rgba(0, 0, 0, .6); }
body.n1 .sp-sheet.n1s-sheet {
  height: min(86vh, 86dvh);
  background: var(--n1-card);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .35);
  color: #fff;
  font-family: var(--n1-font);
}
body.n1 .n1s-grab { flex: none; width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: #5a5a5a; }
body.n1 .n1s-sheet-title { flex: none; padding: 14px 20px 12px; }
body.n1 .s-field.n1s-search { flex: none; margin: 0 20px; gap: 10px; padding: 0 16px 0 14px; }
body.n1 .n1s-search > svg { color: var(--n1-grey2); }
/* общий input:focus из style.css рисует свою рамку-тень — у полей N1 фокус свой */
body.n1 .sp-screen input:focus,
body.n1 .sp-screen textarea:focus,
body.n1 .n1s-sheet input:focus { box-shadow: none; outline: 0; }
body.n1 .s-field.n1s-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--n1-lime); }
body.n1 .n1s-search input { font-size: 17px; }
body.n1 .n1s-search input::-webkit-search-cancel-button,
body.n1 .n1s-search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
body.n1 .sp-chips.n1s-chips { gap: 8px; padding: 12px 20px; }
body.n1 .sp-chip.n1s-chip {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 18px;
  background: var(--n1-card2);
  color: var(--n1-grey);
  font: 400 15px/20px var(--n1-font);
  letter-spacing: -.23px;
  transition: background-color .15s ease, color .15s ease;
}
body.n1 .sp-chip.n1s-chip.active { background: var(--n1-lime); color: var(--n1-on-lime); font-weight: 600; }
body.n1 .sp-sheet-body.n1s-sheet-body { padding: 0 20px 12px; }
body.n1 .n1s-pgroup { background: var(--n1-card2); border-radius: 20px; overflow: hidden; }
body.n1 .n1s-psub { margin: 20px 4px 8px; }
body.n1 .n1s-chips[hidden] { display: none; }
body.n1 .s-field.n1s-search { margin-bottom: 12px; }
body.n1 .sp-prow.n1s-pick,
body.n1 .n1s-pick--sk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  text-align: left;
}
body.n1 .n1s-pick + .n1s-pick::before { content: ""; position: absolute; left: 112px; right: 0; top: 0; height: 1px; transform: scaleY(.5); transform-origin: top; background: #505050; }
/* галочка-выбор 24, r7: выбрано — салатовая заливка и тёмная галочка */
body.n1 .n1s-check { flex: none; width: 24px; height: 24px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px #6a6a6a; display: grid; place-items: center; color: var(--n1-on-lime); transition: background-color .15s ease, box-shadow .15s ease; }
body.n1 .n1s-check svg { opacity: 0; transition: opacity .15s ease; }
body.n1 .sp-prow.n1s-pick.is-on .n1s-check { background: var(--n1-lime); box-shadow: none; }
body.n1 .sp-prow.n1s-pick.is-on .n1s-check svg { opacity: 1; }
body.n1 .n1s-thumb img { width: 34px; height: 34px; object-fit: contain; }
body.n1 .n1s-pgroup .n1s-thumb { background: #454545; }
body.n1 .n1s-thumb--ic { color: var(--n1-lime); }
body.n1 .n1s-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.n1 .n1s-pempty { display: flex; flex-direction: column; gap: 4px; padding: 32px 12px; text-align: center; }
/* ошибка загрузки посылок: «Повторить» под строкой, по центру */
body.n1 .n1s-pempty .s-btn { align-self: center; margin-top: 12px; }
body.n1 .n1s-pgroup + .n1s-pempty { padding-top: 24px; }
body.n1 .n1s-sheet-foot { flex: none; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--n1-card); }
/* низкий экран с клавиатурой: «Готово» закрывало бы найденную посылку —
   прячем, пока клавиатура открыта (support.js, n1s-kb-tight) */
body.n1 #sp-picker .n1s-sheet-foot { transition: opacity 150ms linear; }
html.n1-kb body.n1 #sp-picker.n1s-kb-tight .n1s-sheet-foot { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  body.n1 #sp-picker .n1s-sheet-foot { transition: none; }
}
/* скелетон строки шторки: на карточке #383838 перелив светлее */
body.n1 .n1s-sk-sq { display: block; flex: none; width: 48px; height: 48px; border-radius: 14px; }
body.n1 .n1s-pgroup .n1-sk { background-image: linear-gradient(90deg, #444 0%, #505050 45%, #444 90%); }
body.n1 .n1s-pick--sk .n1s-text { gap: 10px; }

/* ── Смена цвета: выбранный чип, кнопка отправки. При касании кнопки
   стоят на месте (n1-motion.css). ── */
body.n1 .sp-chip.n1s-chip,
body.n1 .n1s-send,
body.n1 .sp-viewer-x { transition: background-color .15s ease, color .15s ease; }

@media (prefers-reduced-motion: reduce) {
  body.n1 .n1s-send,
  body.n1 .sp-viewer-x { transition: none; }
  body.n1 .sp-chip.n1s-chip,
  body.n1 .n1s-check,
  body.n1 .n1s-check svg { transition: none; }
  body.n1 .n1s-compose.has-input .n1s-send { animation: none; }
  body.n1 .n1s-thread .n1s-in { animation: none; }
  body.n1 .n1s-jump,
  body.n1 .n1s-jump.is-on { transform: none; transition: opacity .1s linear, visibility 0s; }
  body.n1 #messages-dialogs-list .msg-dialog-item { transition: none; }
  body.n1 #notif-detail-screen .msg-chat-back,
  body.n1 #notif-detail-list .n1m-act,
  body.n1 #notif-detail-list .n1d-p { transition: none; }
  body.n1 .n1s-tile-spin { animation-duration: 2.4s; }
  body.n1 .n1s-c { transition: none; }
  body.n1 .sp-back,
  body.n1 .sp-footer .s-cta { transition: none; }
  body.n1 .n1s-spin { animation-duration: 2.4s; }
}

/* ── Чат: карточка версии 2 (08.10.2026, messages.js v2Card) ───────────────
   Одна карточка на все сообщения: первая строка — что случилось, под ней что
   делать, посылки, пункт выдачи с часами и «Маршрутом», одна кнопка по делу. */
body.n1 #notif-detail-list .n1v-tag { margin: 0 0 2px; font: 400 13px/18px var(--n1-font); color: var(--n1-lime); }
body.n1 #notif-detail-list .msg-bubble.n1v .n1d-head { margin: 0 0 2px; }
body.n1 #notif-detail-list .n1v-amt--due { color: var(--n1-amber); }
body.n1 #notif-detail-list .n1d-pay.n1v-got { color: var(--n1-grey2); }
body.n1 #notif-detail-list .n1v-more { padding-left: 54px; }
body.n1 #notif-detail-list .n1v-wt { display: flex; align-items: center; gap: 8px; padding-top: 6px; font: 400 17px/22px var(--n1-font); letter-spacing: -.43px; color: #fff; font-variant-numeric: tabular-nums; }
body.n1 #notif-detail-list .n1v-wt s { color: var(--n1-grey2); text-decoration-thickness: 1px; }
body.n1 #notif-detail-list .n1v-wt-a { color: var(--n1-grey2); }
body.n1 #notif-detail-list .n1v-pt { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--n1-card2); }
body.n1 #notif-detail-list .n1v-pt-k { padding-left: 28px; font: 400 13px/18px var(--n1-font); color: var(--n1-grey2); }
body.n1 #notif-detail-list .n1v-pt-l { display: flex; align-items: flex-start; gap: 10px; font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; color: #fff; }
body.n1 #notif-detail-list .n1v-pt-l svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--n1-lime); }
body.n1 #notif-detail-list .n1v-pt-l--g { color: var(--n1-grey); }
body.n1 #notif-detail-list .n1v-pt-n { display: block; color: var(--n1-grey); }
body.n1 #notif-detail-list .n1v-route { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 36px; margin: 2px 0 -6px; padding: 0; border: 0; background: none; color: var(--n1-lime); font: 400 15px/20px var(--n1-font); letter-spacing: -.23px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.n1 #notif-detail-list .n1v-route svg { width: 18px; height: 18px; }
body.n1 #notif-detail-list .n1m-act.n1v-act--sec { color: #fff; font-weight: 400; }
/* строка посылки с отметкой оплаты: отметка под названием и треком всегда,
   чтобы трек не обрезался (раньше так было только на узком экране) */
body.n1 #notif-detail-list .msg-bubble.n1v .n1d-p.n1d-p--pay { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 0; }
body.n1 #notif-detail-list .msg-bubble.n1v .n1d-p--pay > .n1d-thumb { grid-row: 1 / span 2; }
body.n1 #notif-detail-list .msg-bubble.n1v .n1d-p--pay > .n1d-pay { grid-column: 2; }