/* Уведомления: лента, баннеры поверх CRM, настройки (screens/notifications.js). */

/* ---------- значок события ---------- */
.nt-ic { --s: 40px; --tone: var(--text-3); width: var(--s); height: var(--s); flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }
.nt-ic.t-blue { --tone: var(--primary); }
.nt-ic.t-green { --tone: var(--success); }
.nt-ic.t-red { --tone: var(--danger-text); }
.nt-ic.t-orange { --tone: #e8890c; }
.nt-ic.t-violet { --tone: #8b5cf6; }
.nt-ic.t-gray { --tone: var(--text-3); }
.nt-ic-ch { background: none; }
.nt-ic-ch .ch-ic { position: static; border: 0; }
.nt-ic-ch .ch-ic svg.ic { width: 20px; height: 20px; }

/* ---------- лента ---------- */
.nt-top { padding-bottom: 2px; }
.nt-top .icon-btn[disabled] { opacity: 0.35; pointer-events: none; }
.nt-chips { margin: 0 -16px; padding: 2px 16px 10px; }
.nt-chip-n { margin-left: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.nt-page { padding: 4px 12px calc(var(--tabbar-h) + var(--safe-bottom) + 32px); }
.nt-loading { display: grid; place-items: center; padding: 48px 0; }
.nt-day { margin: 0 0 16px; }
.nt-day-t { margin: 0; padding: 4px 4px 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.nt-list { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.nt-row { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; color: var(--text); transition: background-color 160ms var(--ease-out); }
.nt-row::after { content: ''; position: absolute; left: 66px; right: 0; bottom: 0; height: 0.5px; background: var(--line-2); }
.nt-row:last-child::after { display: none; }
.nt-row:active { background: color-mix(in srgb, var(--text) 5%, transparent); transition: none; }
.nt-row-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-row-t { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.nt-row.unread .nt-row-t { font-weight: 600; }
.nt-row-s { font-size: 15px; line-height: 1.35; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.nt-row:not(.unread) .nt-row-s { color: var(--text-3); }
.nt-row-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.nt-brand { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: var(--text-2); }
.nt-brand::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.nt-row-t .nt-brand { margin-right: 6px; font-size: 13px; }
.nt-dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--primary); flex: none; }
.nt-more { margin-top: 4px; }
@media (hover: hover) and (pointer: fine) {
  .nt-row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
}

/* Подсказка включить push */
.nt-prompt { display: flex; gap: 12px; margin: 0 0 16px; padding: 14px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent); }
.nt-prompt-b { flex: 1; min-width: 0; }
.nt-prompt-t { font-size: 16px; font-weight: 600; line-height: 1.3; }
.nt-prompt-s { margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.nt-prompt-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- баннеры, пока CRM открыта ---------- */
.nt-banners { position: fixed; z-index: 120; top: calc(var(--safe-top) + 8px); left: 8px; right: 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.nt-banner { pointer-events: auto; display: flex; align-items: center; gap: 4px; width: 100%; max-width: 440px; padding: 6px 4px 6px 12px; border-radius: 18px; background: var(--pop-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--shadow-pop); outline: 0.5px solid color-mix(in srgb, var(--text) 10%, transparent); touch-action: none; animation: nt-in 280ms var(--ease-out); transition: transform 200ms var(--ease-out); }
.nt-banner.leaving { animation: nt-out 180ms ease-in forwards; }
.nt-banner-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 0; text-align: left; color: var(--text); }
.nt-banner .nt-row-t { font-weight: 600; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.nt-banner .nt-row-s { font-size: 14px; color: var(--text-2); }
.nt-banner-x { color: var(--text-3); }
.nt-call { padding: 10px 6px 10px 12px; gap: 12px; box-shadow: var(--shadow-pop), inset 0 0 0 1.5px color-mix(in srgb, var(--success) 55%, transparent); }
.nt-call .nt-row-t { color: var(--success-strong); }
.nt-call-ring { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--success-fill); }
.nt-call-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); animation: nt-ring 1.4s ease-out infinite; }
.nt-call-open { position: relative; flex: none; background: var(--success-fill); color: #fff; }
/* Кнопки баннера визуально компактные, а цель касания — 44 px. */
.nt-call-open::before { content: ''; position: absolute; inset: -3px -2px; }
.nt-banner-x::before { content: ''; position: absolute; inset: -4px; }
@keyframes nt-in { from { transform: translateY(calc(-100% - 16px)); opacity: 0; } }
@keyframes nt-out { to { transform: translateY(-12px); opacity: 0; } }
@keyframes nt-ring { to { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .nt-banner { animation: nt-fade 160ms ease-out; }
  .nt-banner.leaving { animation: nt-fade-out 120ms ease-in forwards; }
  .nt-call-ring::after { animation: none; }
  @keyframes nt-fade { from { opacity: 0; } }
  @keyframes nt-fade-out { to { opacity: 0; } }
}

/* ---------- настройки ---------- */
.nt-settings .mn-group-t .grow { min-width: 0; }
/* Подписи строк здесь объясняют, что делает настройка, — переносим, а не обрезаем; значения короткие и не сжимаются. */
.nt-settings .mn-row-s { white-space: normal; }
.nt-settings .mn-row-v { flex-shrink: 0; }
.nt-legend { display: flex; flex-direction: column; gap: 6px; margin: 4px 4px 14px; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.nt-legend b { margin-right: 6px; vertical-align: 1px; }
.nt-kind { align-items: center; }
.nt-kind .mn-row-l, .nt-kind .mn-row-s { white-space: normal; }
.nt-kind .mn-row-l { font-size: 16px; }
.nt-pills { display: flex; gap: 6px; flex: none; }
.nt-pill { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out), border-color 140ms var(--ease-out), transform 100ms var(--ease-out); }
.nt-pill::before { content: ''; position: absolute; inset: -6px -3px; }
.nt-pill:active { transform: scale(0.95); }
/* Выключено — серый контур, включено — заливка и синий текст (контраст ≥ 5:1 в обеих темах). */
.nt-pill.on { border-color: transparent; background: var(--primary-soft); color: var(--link); }
.nt-pill.static { height: 22px; padding: 0 7px; border-radius: 11px; font-size: 12px; pointer-events: none; }
.nt-pill.static svg.ic { width: 12px; height: 12px; }
.nt-scope { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--surface-3); text-transform: none; letter-spacing: 0; }
.nt-scope button { position: relative; height: 28px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.nt-scope button::before { content: ''; position: absolute; inset: -8px -1px; }
.nt-scope button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.nt-dev { display: flex; gap: 12px; padding: 14px 16px; }
.nt-dev-b { flex: 1; min-width: 0; }
.nt-dev-t { font-size: 16px; font-weight: 600; line-height: 1.3; }
.nt-dev-s { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.nt-dev-btn { margin-top: 12px; }
.nt-dev + .mn-row::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 0.5px; background: var(--line-2); }
.nt-steps { margin: 8px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.45; color: var(--text); }
.nt-steps li { margin: 4px 0; }
.nt-steps svg.ic { vertical-align: -3px; color: var(--primary); }
.nt-sheet-p { margin: 0 0 12px; font-size: 15px; line-height: 1.4; }
.nt-quiet { margin-bottom: 4px; background: var(--surface-2); }
.nt-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 16px 12px; }
.nt-times.dis { opacity: 0.45; }
.nt-time { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border-radius: 10px; background: var(--surface); font-size: 15px; color: var(--text-3); }
.nt-time input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; }
.pick-row.opt.danger { color: var(--danger-text); }

/* Пять вкладок на телефоне шириной 375: подписи 10 px, как в iOS, — «Мессенджер» и «Уведомления» не слипаются. */
@media (max-width: 400px) {
  .tabbar a { font-size: 10px; }
}

@media (min-width: 1024px) {
  .nt-page, .nt-desk { max-width: 760px; margin: 0 auto; padding-bottom: 40px; }
  .nt-top .topbar-row, .nt-top .nt-chips, .nt-settings .mn-top .topbar-row { max-width: 736px; margin: 0 auto; }
  .nt-top .nt-chips { flex-wrap: wrap; overflow: visible; padding: 2px 0 10px; }
  .nt-banners { left: auto; right: 16px; top: 16px; width: 380px; align-items: stretch; }
}