/* ============================================================================
   ПАНЕЛЬ СИСТЕМНЫХ УВЕДОМЛЕНИЙ
   ТЗ «Панель системных уведомлений» (2026-09-23), T1.1 / T1.2 / T1.3 / T1.4.
   Оформление — по Docs/PERPLEXITY_STYLE_GUIDE.md и
   .github/instructions/ui_style.instructions.md.

   ЧТО ЗДЕСЬ. Выдвижная панель `#sn-center` со своей кнопкой в тулбаре и лента
   системных событий внутри неё. Все классы с префиксом `sn-`.

   ЧЕГО ЗДЕСЬ НЕТ И БЫТЬ НЕ ДОЛЖНО. Ни одного класса `.rnotif*` / `.rnc-*` —
   это оформление панели ОБЪЯВЛЕНИЙ АДМИНИСТРАТОРА, оно живёт строкой внутри
   `notifications-popup.js` и по решению владельца Р6 не трогается ни строкой.
   Пересечения имён быть не должно: стенд `render_test.js` это стережёт.

   Образцы (регламент §4 «новые элементы по образцу соседних»):
     панель        — `.mc-modal`      (радиус 12px, тень 0 8px 32px rgba(0,0,0,.10))
     лента и строка — `.agent-timeline` / `.at-*` из turn-timeline.css
     строка списка — `.canvas-item`   (радиус 8px, переход 150ms ease)
     чипсы фильтра — `.chip` из регламента §5

   ГЛАВНОЕ РЕШЕНИЕ. ШИРИНА СТАТИЧНА — 380 px, как у карточки хода. Вилку
   `min-width`/`max-width` в пикселях СОДЕРЖИМОГО не заводить: владелец уже
   ловил «дышащее» окно на карточке хода, и причина была ровно в вилке.
   `max-width` — только в процентах от экрана, как защита от узкого окна.

   Высота ленты — `max-height`, а не фиксированная: панель открывается по
   требованию, и пустая панель на 72vh выглядела бы поломкой.
   ============================================================================ */

/* ── Слой ──────────────────────────────────────────────────────────────────
   P17, И20: панель — единственный держатель слоя СИСТЕМНЫХ уведомлений. В
   продукте пять слоёв (9800 DWS → 10000 чат → 100000 Аналитик → 2147483646
   объявления → 2147483647 сессия), и тост Аналитика перекрывал модалки чата,
   а тост DWS уходил под них.

   Панель встаёт ВЫШЕ ВСЕХ МОДАЛОК ПРОДУКТА, но НИЖЕ двух чужих слоёв:
     - модалки истёкшей сессии (2147483647) — она требует решения, а не
       извещает, и перекрывать её нельзя;
     - панели объявлений администратора (2147483645/46) — её слой остаётся
       своим, мы туда не лезем (Р6).
   ------------------------------------------------------------------------- */

#sn-center-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483643;
    background: transparent;
}

#sn-center {
    position: fixed;
    z-index: 2147483644;

    /* Ширина СТАТИЧНА. От содержимого не зависит ничего. */
    width: 380px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    max-height: 78vh;

    background: #FFFFFF;
    color: #13343B;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
    font-family: "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
    animation: snPanelIn 0.18s cubic-bezier(.2, .8, .2, 1);
}

@keyframes snPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Шапка ─────────────────────────────────────────────────────────────── */

#sn-center .sn-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(19, 52, 59, 0.08);
}

#sn-center .sn-title {
    flex: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #13343B;
}

#sn-center .sn-head-btn {
    border: none;
    background: transparent;
    color: rgba(19, 52, 59, 0.62);
    border-radius: 9999px;
    height: 26px;
    padding: 0 10px;
    font: 500 12px/1 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
#sn-center .sn-head-btn:hover  { background: rgba(19, 52, 59, 0.06); color: #20808D; }
#sn-center .sn-head-btn:active { background: rgba(31, 184, 205, 0.12); color: #1FB8CD; transform: scale(0.97); }
#sn-center .sn-head-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }

/* «Прочитать все» при нуле непрочитанных ПРИГЛУШАЕТСЯ, а не исчезает:
   исчезающая кнопка дёргает шапку и заставляет искать, куда она делась
   (то же правило у панели объявлений). */
#sn-center .sn-head-btn[disabled] {
    color: rgba(19, 52, 59, 0.30);
    cursor: default;
    background: transparent;
}

#sn-center .sn-close {
    border: none;
    background: transparent;
    color: rgba(19, 52, 59, 0.45);
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 9999px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
#sn-center .sn-close:hover { background: rgba(19, 52, 59, 0.06); color: #13343B; }

/* ── Строка состояния «сейчас» (T5.6) ──────────────────────────────────────
   Состояние — это «как сейчас», а не «что случилось». Оно живёт здесь и
   НИКОГДА не сыплется повторами в ленту. */

#sn-center .sn-states {
    flex: none;
    padding: 8px 14px;
    background: rgba(229, 62, 62, 0.06);
    border-bottom: 1px solid rgba(19, 52, 59, 0.08);
    font-size: 12px;
    line-height: 1.4;
    color: #c53030;
}
#sn-center .sn-states:empty { display: none; }
#sn-center .sn-state-row { display: block; }

/* ── Фильтр по службам (T1.4) ──────────────────────────────────────────── */

#sn-center .sn-filters {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(19, 52, 59, 0.08);
}
#sn-center .sn-filters:empty { display: none; }

#sn-center .sn-chip {
    background: rgba(19, 52, 59, 0.04);
    color: rgba(19, 52, 59, 0.62);
    border: none;
    border-radius: 9999px;
    height: 24px;
    padding: 0 10px;
    font: 500 11px/24px "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
#sn-center .sn-chip:hover { background: rgba(19, 52, 59, 0.08); color: #13343B; }
#sn-center .sn-chip.sn-on { background: rgba(31, 184, 205, 0.10); color: #20808D; }
#sn-center .sn-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }

/* ── Лента ─────────────────────────────────────────────────────────────────
   Устройство — как список шагов карточки хода: колонка маркера 12 px,
   соединительная линия, текст 12 px, подстрочник и время 11 px. */

#sn-center .sn-list {
    flex: 1 1 auto;
    max-height: 72vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 6px 6px 4px;
}

#sn-center .sn-list::-webkit-scrollbar { width: 8px; height: 8px; }
#sn-center .sn-list::-webkit-scrollbar-track { background: transparent; }
#sn-center .sn-list::-webkit-scrollbar-thumb { background: rgba(19, 52, 59, 0.18); border-radius: 4px; }
#sn-center .sn-list::-webkit-scrollbar-thumb:hover { background: rgba(19, 52, 59, 0.30); }

#sn-center .sn-empty {
    padding: 28px 14px;
    text-align: center;
    color: rgba(19, 52, 59, 0.45);
    font-size: 12px;
    line-height: 1.5;
}

/* Разделители по времени (И16): лента читается как переписка. */
#sn-center .sn-group {
    padding: 8px 8px 4px;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(19, 52, 59, 0.45);
}

/* ── Запись ────────────────────────────────────────────────────────────── */

#sn-center .sn-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px 7px 11px;
    margin: 1px 2px;
    border-radius: 8px;
    transition: background 150ms ease;
}

/* Полоса слева — СЛУЖБА (решение владельца Р2). Значок — исход. Цвет полосы
   приходит из каталога служб инлайном: девять служб, девять токенов. */
#sn-center .sn-item::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 2px;
    background: var(--sn-tone, rgba(19, 52, 59, 0.20));
}

#sn-center .sn-item.sn-unread { background: rgba(31, 184, 205, 0.06); }
#sn-center .sn-item.sn-clickable { cursor: pointer; }
#sn-center .sn-item.sn-clickable:hover { background: rgba(19, 52, 59, 0.05); }

/* Погашенная запись (причина ушла) приглушается, но из ленты не исчезает. */
#sn-center .sn-item.sn-resolved .sn-text { color: rgba(19, 52, 59, 0.45); }

/* ── Значок исхода: та же геометрия, что у маркеров карточки хода ──────── */

#sn-center .sn-marker {
    flex: none;
    width: 12px;
    display: flex;
    justify-content: center;
    padding-top: 2px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
}

#sn-center .sn-level-error   .sn-marker { color: #c53030; }
#sn-center .sn-level-error   .sn-marker::before { content: '\2715'; }
#sn-center .sn-level-warning .sn-marker { color: #c05621; }
#sn-center .sn-level-warning .sn-marker::before { content: '\0021'; }
#sn-center .sn-level-notice  .sn-marker { color: rgba(19, 52, 59, 0.45); }
#sn-center .sn-level-notice  .sn-marker::before { content: '\00B7'; font-size: 16px; line-height: 0.8; }
#sn-center .sn-level-debug   .sn-marker { color: rgba(19, 52, 59, 0.30); }
#sn-center .sn-level-debug   .sn-marker::before { content: '\2026'; }

#sn-center .sn-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#sn-center .sn-text {
    font-size: 12px;
    line-height: 1.35;
    color: #13343B;
    overflow-wrap: anywhere;
}

#sn-center .sn-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(19, 52, 59, 0.45);
}
#sn-center .sn-time { font-variant-numeric: tabular-nums; }

/* Серия повторов: «×3» вместо трёх одинаковых строк (И7). */
#sn-center .sn-count {
    background: rgba(19, 52, 59, 0.06);
    border-radius: 9999px;
    padding: 0 6px;
    color: rgba(19, 52, 59, 0.62);
}

/* Деньги — отдельным признаком (И3). Такая запись не гаснет сама. */
#sn-center .sn-money {
    background: rgba(237, 137, 54, 0.14);
    color: #c05621;
    border-radius: 9999px;
    padding: 0 6px;
}

#sn-center .sn-act {
    border: none;
    background: rgba(19, 52, 59, 0.04);
    color: #20808D;
    border-radius: 9999px;
    height: 22px;
    padding: 0 10px;
    font: 500 11px/22px "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
#sn-center .sn-act:hover { background: rgba(31, 184, 205, 0.12); color: #1FB8CD; }

#sn-center .sn-link {
    border: none;
    background: transparent;
    color: rgba(19, 52, 59, 0.45);
    padding: 0;
    font: 400 11px/1.3 "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    text-decoration: underline;
    transition: color 150ms ease;
}
#sn-center .sn-link:hover { color: #20808D; }

/* ── Подробности под спойлером (И2) ────────────────────────────────────────
   Человеку — фраза на понятном языке; техническое (код причины, сырая ошибка
   провайдера, перечень колонок) раскрывается щелчком и по умолчанию свёрнуто.
   До этого ТЗ 28 вызовов подставляли `error.message` прямо в текст, и человек
   читал «Ошибка сохранения: TypeError: Cannot read properties of undefined». */

#sn-center .sn-details { font-size: 11px; line-height: 1.35; }
#sn-center .sn-details > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(19, 52, 59, 0.45);
    user-select: none;
    transition: color 150ms ease;
}
#sn-center .sn-details > summary::-webkit-details-marker { display: none; }
#sn-center .sn-details > summary::before { content: '\25B8'; font-size: 0.7em; transition: transform 150ms ease; }
#sn-center .sn-details[open] > summary::before { transform: rotate(90deg); }
#sn-center .sn-details > summary:hover { color: #20808D; }
#sn-center .sn-detail-body {
    margin: 3px 0 0;
    padding-left: 10px;
    border-left: 2px solid rgba(19, 52, 59, 0.10);
    color: rgba(19, 52, 59, 0.55);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* ── Подвал ────────────────────────────────────────────────────────────── */

#sn-center .sn-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid rgba(19, 52, 59, 0.08);
}
#sn-center .sn-foot .sn-hint {
    flex: 1;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(19, 52, 59, 0.45);
}

/* ── Бейдж на своей кнопке тулбара ─────────────────────────────────────────
   У панели объявлений свой бейдж `#notifCenterBadge` на колокольчике, и он
   продолжает считать объявления. Две цифры в тулбаре — осознанная цена
   решения Р6 (долг Д11). */

.sn-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #c53030;
    color: #FFFFFF;
    border-radius: 9999px;
    padding: 1px 5px;
    font: 500 10px/14px "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
    min-width: 16px;
    text-align: center;
    pointer-events: none;
}

/* Кнопка на секунду показывает галочку вместо всплывающего «Скопировано»
   (решение владельца Р9, T4.7): результат копирования на экране не виден, и
   без отметки непонятно, случилось ли что-нибудь. */
.sn-confirmed { color: #20808D !important; }