/* Центр уведомлений ленты.
 *
 * Отдельный файл, а не строки в app.css: экран один, и правится он в одном
 * месте. Подключается веб-страницей (web.html) и самим модулем notices.js —
 * так окно программы получает те же стили, не трогая свою разметку.
 *
 * Всё берётся из токенов (tokens.css, alpha2.css): своих цветов здесь нет,
 * иначе светлая тема чинилась бы в двадцати файлах, а девятнадцатый забыли бы.
 */

.nc { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }

/* ── Сводка и действия ────────────────────────────────────────────────────── */

.nc-top { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.nc-summary { flex: 1; min-width: 0; }
.nc-summary b {
  display: block;
  font-size: var(--fs-md); font-weight: 650; letter-spacing: -.01em;
}
.nc-summary small { display: block; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.nc-actions { display: flex; gap: 4px; flex: none; }
.nc-actions .icon-btn[disabled] { opacity: .4; cursor: default; }

/* ── Отбор ────────────────────────────────────────────────────────────────── */

/* Полка, а не сетка: категорий одиннадцать, и в три строки они занимали бы
 * пол-экрана телефона. Прокрутка вбок без видимой полосы; фишка не сжимается. */
.nc-filters {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: 2px 2px; margin: 0 -2px;
}
.nc-filters::-webkit-scrollbar { display: none; }
.nc-filters > * { flex: 0 0 auto; }
.nc-filters .chip.active {
  background: var(--accent); color: var(--accentText); border-color: var(--accent);
}
.nc-filters .chip .ic.sm { width: 16px; height: 16px; }

/* ── Мягкая карточка: просьба или объяснение ──────────────────────────────── */

.nc-push-slot:empty { display: none; }
.nc-push {
  display: flex; gap: 12px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.nc-push-ic {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--surface); color: var(--accent-soft-ink);
}
.nc-push b { display: block; font-weight: 650; line-height: 1.3; }
.nc-push p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.nc-push-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ── Список ───────────────────────────────────────────────────────────────── */

.nc-list {
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.nc-day {
  padding: 12px 16px 8px;
  color: var(--muted);
  font-size: var(--fs-xs); font-weight: 650;
  text-transform: uppercase; letter-spacing: .06em;
}
.nc-row {
  display: flex; align-items: stretch;
  border-top: 1px solid var(--line);
}
.nc-day + .nc-row { border-top: 0; }
.nc-row.fresh { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Вся строка нажимается, а не имя в ней: на телефоне цель — палец. */
.nc-main {
  flex: 1; min-width: 0; min-height: 64px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px 12px 16px;
  border: 0; background: transparent; color: var(--text);
  text-align: left; cursor: pointer;
}
.nc-main:hover { background: color-mix(in srgb, var(--surface2) 60%, transparent); }
.nc-main .avatar { flex: none; }
.nc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nc-text { line-height: 1.35; overflow-wrap: anywhere; }
.nc-text b { font-weight: 650; }
.nc-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  color: var(--muted); font-size: var(--fs-xs);
}
.nc-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.nc-meta .ic.sm { width: 14px; height: 14px; }
.nc-target { color: var(--accent-soft-ink); }
.nc-cat { padding: 1px 8px; border-radius: 999px; background: var(--surface2); }
.nc-quiet { opacity: .85; }

/* Точка непрочитанного — акцентом с мягким ореолом: видна на обеих темах и
 * не спорит с красным значком в шапке, который считает всё. */
.nc-dot {
  flex: none; width: 9px; height: 9px; margin: 0 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.nc-more { flex: none; align-self: center; margin-right: 4px; }

/* Весть без человека — системная: вместо лица знак категории. */
.avatar.nc-kind { color: var(--muted); background: var(--surface2); }
.avatar.nc-kind .ic { width: 20px; height: 20px; }

.nc-hidden {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--surface2); color: var(--muted);
  font-size: var(--fs-sm); line-height: 1.4;
}
.nc-empty { padding-top: 6vh; }

/* Появление новой строки — короткое, и только если человек не просил без
 * движения. */
@media (prefers-reduced-motion: no-preference) {
  .nc-row.fresh { animation: nc-in var(--mid) var(--ease); }
}
@keyframes nc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Настройки ────────────────────────────────────────────────────────────── */

.nc-settings { display: flex; flex-direction: column; }
.nc-settings > .card-title { padding: 16px 0 8px; color: var(--muted); font-size: var(--fs-sm); }
.nc-settings .card-row .switch { margin-left: auto; }
.nc-settings .btn.sm { min-height: 34px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.nc-settings .btn.sm.danger { color: var(--bad); }
.nc-devices { flex: none; display: flex; align-items: center; min-height: 24px; }
.nc-test { justify-content: space-between; gap: 12px; }

/* ── Телефон ──────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .nc { gap: 12px; }
  .nc-main { padding-left: 12px; }
  .nc-day { padding-left: 12px; }
  .nc-push { padding: 12px; }
}

/* Строка затихшей записи: имя автора и начало текста в одну колонку.
 *
 * Кнопка возврата стоит справа и не сжимается: у строки без текста (запись
 * стёрли или закрыли) слева всё равно две строки, и без `min-width: 0` длинный
 * текст выдавил бы кнопку за край. */
.hush-open {
  display: block; width: 100%; min-width: 0; text-align: left;
}
.hush-open b, .hush-open small { display: block; }