/* =========================================================================
   ПРОТОТИП №9 — лента уведомлений.
   Панель-объяснение (общая для прототипов №2–№9) + стили ленты и настроек.

   Собственные классы — с префиксом `nt-`, чтобы не пересечься с клоном
   (в №7 такое пересечение однажды сломало вёрстку чужих шитов).
   ========================================================================= */

/* ------------------------ Панель-объяснение ------------------------------ */
.stage{gap:32px}
.proto-panel{
  width:360px;max-height:852px;overflow-y:auto;scrollbar-width:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:24px;color:#E7EAEE;flex:0 0 auto;
}
.proto-panel::-webkit-scrollbar{display:none}
.proto-panel__eyebrow{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:#8CABCD;margin-bottom:6px}
.proto-panel__title{font-size:22px;font-weight:600;line-height:1.25;color:#fff}
.proto-panel__lead{font-size:13px;font-weight:400;line-height:1.5;color:#B8BFC8;margin:8px 0 0}
.proto-panel__now{
  margin-top:16px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:500;
  background:rgba(74,134,199,.16);border:1px solid rgba(74,134,199,.45);color:#BBD6F2;
}
.proto-panel__now b{color:#fff;font-weight:600}
.proto-panel__section{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#7E8894;margin:20px 0 10px}
.proto-flow{
  display:flex;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5;border:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.proto-flow b{color:#fff;font-weight:600}
.proto-flow__num{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;margin-top:1px;
  background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#fff;
}
.proto-flow--active{background:rgba(74,134,199,.14);border-color:rgba(74,134,199,.5)}
.proto-flow--active .proto-flow__num{background:#4A86C7}
.proto-panel__list{margin:0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:8px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5}
.proto-panel__list b{color:#fff;font-weight:600}
.proto-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#4A86C7;
  box-shadow:0 0 6px rgba(74,134,199,.8);margin-right:4px;vertical-align:baseline}
@media (max-width:1150px){.proto-panel{display:none}}

/* ---- Состояния и варианты (методология прототипов, см. CLAUDE.md) ------- */
.proto-var{margin-bottom:12px}
.proto-var__t{font-size:12px;font-weight:600;color:#E7EAEE;margin-bottom:6px}
.proto-var__chips{display:flex;flex-wrap:wrap;gap:6px}
.proto-var__chip{
  padding:5px 10px;border-radius:8px;cursor:pointer;font-family:inherit;
  font-size:11.5px;font-weight:500;line-height:1.3;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#C7CDD5;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.proto-var__chip:hover{background:rgba(255,255,255,.12);color:#fff}
.proto-var__chip.is-on{background:rgba(74,134,199,.28);border-color:#4A86C7;color:#fff}
.proto-var__hint{margin-top:6px;font-size:11.5px;line-height:1.45;color:#8FA0B4}

/* =========================================================================
   ТОЧКИ ВХОДА: колокол в аппбаре и пункт глобального меню
   ========================================================================= */
.nt-bell{position:relative}
.nt-bell__badge{
  position:absolute;top:-3px;right:-7px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--red);color:#fff;
  font-size:9.5px;font-weight:700;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--white);
}
.nt-menu__badge{
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);
  color:#fff;font-size:11px;font-weight:600;line-height:20px;text-align:center;
}

/* =========================================================================
   ЛЕНТА
   ========================================================================= */
.nt-list{padding:12px 12px 110px;display:flex;flex-direction:column;gap:8px}

/* Заголовок дня липнет к верху: в ретеншенной ленте дат не больше 21,
   и по ним ориентируются при прокрутке */
.nt-day{position:sticky;top:0;z-index:3;margin:4px -12px -4px;padding:6px 16px 8px;
  background:linear-gradient(var(--surface) 70%,rgba(228,229,236,0))}

/* --------------------------- Строка --------------------------------------
   Три слоя: подложки свайпов (слева «Прочитано», справа «Скрыть») и тело,
   которое ездит по X. Внутри тела — только сообщение: заголовок, текст,
   время и точка непрочитанного. */
.nt-row{position:relative;border-radius:12px;overflow:hidden;background:var(--white);
  touch-action:pan-y}
.nt-row__bg{
  position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 18px;
  color:#fff;opacity:0;transition:opacity .12s ease;
}
.nt-row__bg .p3m{color:#fff}
.nt-row__bg--read{background:var(--green);justify-content:flex-start}
.nt-row__bg--hide{background:var(--text700);justify-content:flex-end}
.nt-row.is-read .nt-row__bg--read{opacity:1}
.nt-row.is-hide .nt-row__bg--hide{opacity:1}

/* Тело строки — полоса важности + колонка сообщения. Справа зарезервировано
   место под точку, чтобы подпись уровня и время не подъезжали под неё. */
.nt-row__body{position:relative;display:flex;background:var(--white);border-radius:12px;
  cursor:pointer;user-select:none}
.nt-row__body:active{background:#F7F8F9}
.nt-row__body--flat{cursor:default}
.nt-row__body--flat:active{background:var(--white)}
.nt-row--read .nt-row__body{background:var(--default5)}
.nt-row--read .nt-row__body:active{background:#EFF0F1}
.nt-row--read .nt-row__body--flat:active{background:var(--default5)}

/* Важность: полоса во всю высоту + подпись словом. Цвет один и тот же,
   но смысл несёт подпись — цветом одним обходиться нельзя. */
.nt-row__imp{width:4px;flex:0 0 4px;align-self:stretch;border-radius:12px 0 0 12px}
.nt-row--read .nt-row__imp{opacity:.45}
.nt-row__col{flex:1;min-width:0;padding:10px 12px 12px 10px}
.nt-row__top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.nt-row__lvl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-row__time{margin-left:auto;white-space:nowrap;flex:0 0 auto}
.nt-row__dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--primary400)}

.nt-row__title{margin-bottom:4px}
.nt-row__text{color:var(--text700)}
/* Прочитанное приглушено целиком: фон, заголовок и текст */
.nt-row--read .nt-row__title{color:var(--text700)}
.nt-row--read .nt-row__text{color:var(--text600)}

/* --------------------- Шапка списка: фильтры и предупреждения ------------ */
.nt-note{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;
  padding:10px 12px;border-radius:10px;cursor:pointer}
.nt-note--warn{background:var(--yellow10);border:1px solid rgba(234,182,49,.5)}
.nt-note--info{background:var(--primary50);border:1px solid var(--primary100);cursor:default}
.nt-note .p3{flex:1;min-width:0;color:var(--text800)}

/* --------------------- Загрузка, дозагрузка, сеть ------------------------ */
/* Кость — та же анимация, что у скелетонов сводок (.sum-bone) */
.nt-bone{display:block;border-radius:4px;
  background:linear-gradient(90deg,var(--bgGray30) 25%,var(--icons200) 50%,var(--bgGray30) 75%);
  background-size:200% 100%;animation:ntBone 1.2s ease-in-out infinite}
@keyframes ntBone{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Индикатор pull-to-refresh: круг над списком, лента остаётся на месте */
.nt-refresh{display:flex;justify-content:center;padding:4px 0 8px}
.nt-refresh .spinner{width:28px;height:28px;border-width:2.5px}

/* Подвал списка: дозагрузка следующей страницы и её ошибка */
.nt-more{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0 4px}
.spinner--sm{width:24px;height:24px;border-width:2.5px;margin:0}
.btn-secondary--sm{height:36px;padding:0 16px;width:auto}

/* Плашка «нет сети» — нейтральная: это состояние связи, а не тревога */
.nt-note--mute{background:var(--default5);border:1px solid var(--bgGray30);cursor:default}

/* Сноска о сроке хранения — конец ленты (§5 ТЗ) */
.nt-tail{display:flex;align-items:flex-start;gap:8px;padding:14px 6px 0;line-height:1.5}

/* Пустые состояния: плейсхолдер клона + одно понятное действие */
.nt-empty{flex:1;min-height:430px;display:flex;flex-direction:column;justify-content:center;
  padding-bottom:90px}
.nt-empty .placeholder{flex:0 0 auto}
.nt-empty__btn{display:flex;justify-content:center;padding:16px 24px 0}
.nt-empty__btn .btn-secondary{max-width:280px}

/* ------------------------------ Снекбар ---------------------------------
   Undo живёт ~5 секунд (§4 ТЗ) — полоска внизу показывает остаток. */
.nt-snack-host{position:absolute;left:12px;right:12px;bottom:100px;z-index:66;
  display:flex;justify-content:center;pointer-events:none}
.nt-snack{position:relative;display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 14px;border-radius:12px;background:rgba(29,33,38,.96);overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:auto}
.nt-snack__btn{color:#8CABCD;flex:0 0 auto}
.nt-snack__bar{position:absolute;left:0;bottom:0;height:2px;background:var(--primary400);
  width:100%;animation:ntSnackBar 5s linear forwards}
@keyframes ntSnackBar{from{width:100%}to{width:0}}

/* =========================================================================
   НАСТРОЙКИ УВЕДОМЛЕНИЙ
   ========================================================================= */
.nt-list--set{gap:12px}
.nt-set__legend{display:flex;flex-direction:column;gap:10px}
.nt-set__legend .icon-row{align-items:flex-start}
.nt-set__legend .p3{flex:1;min-width:0;line-height:1.45}

.nt-set__head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.nt-set__mass{color:var(--primary400);flex:0 0 auto}

/* Заголовок типа — на всю ширину: 87 символов обязаны переноситься, а не
   обрезаться многоточием (§6.1 ТЗ). Переключатели — рядом ПОД ним. */
.nt-set{display:block}
.nt-set__ch{display:flex;gap:8px;margin-top:10px}
.nt-set__sw{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px;
  padding:8px 10px;border:1px solid var(--bgGray30);border-radius:8px;background:var(--white)}
.nt-set__sw:active{background:var(--default5)}
.nt-set__sw.is-off{opacity:.5}
.nt-set__sw .p3m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-set__hint{margin-top:6px}
.nt-set__warn{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:8px 10px;
  border-radius:8px;background:var(--yellow10);color:var(--statusWarning);line-height:1.45}
.nt-set__warn span{flex:1;min-width:0}

.nt-sw-row{padding:4px 0}
.nt-act__v{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:right}
.nt-hint{margin-top:12px;line-height:1.45}

/* Шаги привязки бота */
.nt-step{display:flex;align-items:flex-start;gap:10px;padding:6px 0}
.nt-step__n{width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--primary50);
  color:var(--primary600);font-size:11px;font-weight:700;line-height:20px;text-align:center}
.nt-step .p3{flex:1;min-width:0;line-height:1.45}