/* notif-panel.css — notifications inline <style> scoped under #tab-notif for shell merge (L1).
   — Selectors prefixed; :root / * / body / html + chrome classes dropped (covered by app.css). */

/* Клиренс под нижним нав-баром (bottom_nav.php, fixed bottom:0).
   ⚠️ КЛИРЕНС СЧИТАЕТСЯ ОТ --bnav-h — высоты бара, которую замеряет и подставляет сам bottom_nav.php.
      Своё число здесь означает молчаливый разъезд при первой правке отступов бара; так уже разошлись
      76/72/88/60/56/100 в шести местах на один и тот же бар.
   ⚠️ env(safe-area-inset-bottom) СЮДА НЕ ДОБАВЛЯТЬ. Бар учитывает её СВОИМ padding, а --bnav-h —
      это его offsetHeight, то есть safe-area уже внутри. Прибавив её ещё раз, получим двойной зазор
      на iPhone — и он тем больше, чем крупнее «челюсть». */
#tab-notif .wrap { max-width: 720px; margin: 0 auto; padding: 14px 14px calc(var(--bnav-h, 56px) + 12px); }
#tab-notif .nheader { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; }
#tab-notif .nheader__title { font-size: 18px; font-weight: 500; margin: 0; } /* единый размер заголовка раздела — эталон .eh-title (Поручения) */
/* Карточки уведомлений — единый стиль с кабинетами (мягкая граница + зазор). */
#tab-notif .nlist { display: flex; flex-direction: column; gap: 8px; }
#tab-notif .ncard { display: flex; align-items: flex-start; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; width: 100%; text-align: left; font-family: inherit; position: relative; }
#tab-notif .ncard--link { cursor: pointer; }
#tab-notif .ncard--link:hover { background: #fafbff; }
#tab-notif .ncard--unread { background: #eef2ff; border-color: #c7d2fe; }        /* непрочитанное — синий фон */
#tab-notif .ncard--unread.ncard--link:hover { background: #e6ecff; }
#tab-notif .ncard--seen .ncard__text { color: #57606a; }                         /* прочитанное — приглушённый текст */
#tab-notif .ncard__icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eef0f4; color: var(--muted); }
#tab-notif .ncard__icon svg { width: 20px; height: 20px; }
#tab-notif .ncard__icon--task { background: #dbeafe; color: #1d4ed8; }
#tab-notif .ncard__icon--order { background: #e0e7ff; color: #4338ca; }
#tab-notif .ncard__icon--balance { background: #fef3c7; color: #92400e; }
#tab-notif .ncard__icon--system { background: #eef0f4; color: #6b7280; }
#tab-notif .ncard__body { flex: 1 1 auto; min-width: 0; }
#tab-notif .ncard__text { font-size: 14px; line-height: 1.4; color: var(--text); white-space: pre-wrap; word-break: break-word; }
#tab-notif .ncard__text.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* длинные — до 3 строк */
#tab-notif .ncard__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; } /* время слева + «Развернуть» справа */
#tab-notif .ncard__toggle { flex: 0 0 auto; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 400; text-decoration: underline; cursor: pointer; font-family: inherit; } /* как дата/время, только подчёркнуто (не синий) */
#tab-notif .ncard__toggle:hover { color: var(--text); }
#tab-notif .ncard__toggle[hidden] { display: none; }
#tab-notif .ncard__time { font-size: 12px; color: var(--muted); }
#tab-notif .ncard__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-top: 6px; }   /* синяя точка у непрочитанного */
#tab-notif .nempty { color: #57606a; font-size: 15px; padding: 28px 6px; text-align: center; }
#tab-notif .nerror { color: var(--danger); font-size: 14px; padding: 16px 6px; text-align: center; }
#tab-notif .more-btn { display: block; margin: 14px auto 0; padding: 9px 18px; border: 1px solid var(--border); background: #fff; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--primary); cursor: pointer; font-family: inherit; }
#tab-notif .more-btn:hover { background: #f5f3ff; }
#tab-notif .more-btn:disabled { opacity: .55; cursor: not-allowed; }