/* NetWeb · app/css/core.css — каркас телефона поверх tokens.css: оболочка, экраны и переходы, слои,
   а также то, чего tokens.css не знает о живом приложении (кнопки-строки, зона касания строки, свайп, лист,
   тост, полоса «нет сети»). Цвета и размеры — только токены, своих значений нет. */

:root {
  /* Верхний отступ: вырез/статус-бар вне Telegram, «безопасная зона» Telegram в полноэкранном режиме */
  --nw-top-inset: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --nw-topnav-h: 44px;
  --nw-offline-h: 30px;
}
html { height: 100%; background: var(--nw-page); -webkit-text-size-adjust: 100%; }
body.nw-app { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
.nw-app [hidden] { display: none !important; }
.nw-noscript { padding: 40px 20px; text-align: center; font: 17px/1.4 var(--nw-font); color: var(--nw-text-2); }

/* ---------- оболочка и экраны ---------- */
.nw-shell { position: fixed; inset: 0; overflow: hidden; background: var(--nw-page); }
/* Внутри Telegram нижние кнопки нативные; если Telegram сообщает зону контента, держимся внутри неё */
[data-shell="telegram"] .nw-shell { bottom: var(--tg-content-safe-area-inset-bottom, 0px); }
.nw-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.nw-view { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  background: var(--nw-page); padding-top: var(--nw-top-inset); outline: none; }
.nw-view.is-under { visibility: hidden; pointer-events: none; }
.nw-view--pushed.is-moving { box-shadow: -10px 0 28px light-dark(rgba(0, 0, 0, .10), rgba(0, 0, 0, .5)); }
[data-shell="web"] .nw-view--pushed { padding-top: calc(var(--nw-top-inset) + var(--nw-topnav-h)); }
.nw-overlay { position: absolute; inset: 0; pointer-events: none; }
.nw-overlay > * { pointer-events: auto; }

/* Своя узкая шапка вне Telegram: «‹ Назад» и заголовок экрана (в Telegram — нативная BackButton) */
.nw-topnav { position: absolute; z-index: var(--nw-z-sticky); top: 0; left: 0; right: 0; height: calc(var(--nw-top-inset) + var(--nw-topnav-h)); padding-top: var(--nw-top-inset);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
  background: var(--nw-glass); -webkit-backdrop-filter: var(--nw-blur); backdrop-filter: var(--nw-blur); box-shadow: 0 .5px 0 var(--nw-sep); }
.nw-topnav__back { justify-self: start; height: var(--nw-hit); padding: 0 12px 0 6px; display: inline-flex; align-items: center; gap: 1px; color: var(--nw-link-ink); font-size: var(--nw-fs-body); }
.nw-topnav__back .nw-ic { stroke-width: 2.2; }
.nw-topnav__title { font-size: var(--nw-fs-body); font-weight: var(--nw-w-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; text-align: center; }

/* Нет сети — тонкая полоса, данные из кэша */
.nw-offline { position: absolute; z-index: var(--nw-z-sticky); top: var(--nw-top-inset); left: 0; right: 0; height: var(--nw-offline-h); padding: 6px 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center;
  font-size: var(--nw-fs-foot); line-height: var(--nw-lh-foot); color: var(--nw-text-2); background: color-mix(in srgb, var(--nw-hint) 16%, var(--nw-page)); }
.has-topnav .nw-offline { top: calc(var(--nw-top-inset) + var(--nw-topnav-h)); }
/* пока нет сети, контент сдвинут под полосу, а не спрятан под ней */
.nw-shell.is-offline .nw-view { padding-top: calc(var(--nw-top-inset) + var(--nw-offline-h)); }
[data-shell="web"] .nw-shell.is-offline .nw-view--pushed { padding-top: calc(var(--nw-top-inset) + var(--nw-topnav-h) + var(--nw-offline-h)); }

/* На широком экране телефонная версия — колонкой по центру (сайт для ноутбука — /web/) */
@media (min-width: 720px) {
  .nw-shell { left: 50%; right: auto; width: 440px; transform: translateX(-50%); box-shadow: 0 0 0 .5px var(--nw-sep), var(--nw-shadow-float); }
}

/* ---------- кнопки, которые выглядят как строки, плашки и баннеры ---------- */
.nw-app button.nw-row, .nw-app button.nw-banner, .nw-app button.nw-search { width: 100%; text-align: left; font: inherit; color: inherit; }
.nw-app button.nw-row { display: flex; }
.nw-banner--gap { margin-top: 12px; }
.nw-search--plate { cursor: text; }
.nw-app .nw-row { -webkit-touch-callout: none; }
.nw-row:has(.nw-channel:active, .nw-pill:active, .nw-check:active, .nw-switch:active) { background: var(--nw-card); }
.nw-row--option { min-height: 52px; }
.nw-row.is-destructive .nw-row__title { color: var(--nw-destructive); }
.nw-row__icon[data-tint] { background: var(--nw-link-tint); color: var(--nw-link); }
.nw-row__l3 { color: var(--nw-text); }
.nw-row--person { padding-top: 9px; padding-bottom: 9px; --nw-sep-inset: 74px; }
.nw-accent-ink { color: var(--nw-accent-ink); }

/* Вся строка человека — одна кнопка для клавиатуры и VoiceOver; содержимое лежит над ней */
.nw-row__hit { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border-radius: inherit; }
.nw-row > :not(.nw-row__hit) { position: relative; z-index: 1; }
.nw-app .nw-row__hit:focus-visible { outline: 2px solid var(--nw-accent); outline-offset: -3px; border-radius: 12px; }

/* Свайп: под строкой «Был контакт» (вправо) и «Отложить» (влево); видно только нужное */
.nw-swipe__actions { visibility: hidden; }
.nw-swipe.is-dragging .nw-swipe__actions { visibility: visible; }
.nw-swipe.is-dir-right .nw-swipe__btn--later, .nw-swipe.is-dir-left .nw-swipe__btn--done { visibility: hidden; }
.nw-swipe__btn--done, .nw-swipe__btn--later { width: max(96px, var(--sw, 96px)); }
.nw-swipe__btn .nw-ic { transition: transform var(--nw-dur-fast) var(--nw-ease); }
.nw-swipe.is-armed .nw-swipe__btn .nw-ic { transform: scale(1.15); }
.nw-swipe.is-dragging > .nw-row { background: var(--nw-card); }   /* во время жеста строка не «нажата» */

/* Поиск: токены в одной строке с полем, «×» у токена с зоной касания.
   Рамки фокуса у поля нет (DESIGN §4.7): правило tokens.css «.nw-app :focus-visible» стоит ниже и перебивало «.nw-search :focus-visible» */
.nw-app .nw-search :focus-visible { outline: none; }
.nw-search__tokens { display: contents; }
.nw-token__x { position: relative; display: grid; place-items: center; width: 16px; height: 16px; color: inherit; }
.nw-token__x::after { content: ""; position: absolute; inset: -14px -8px; }
/* «Очистить» — кружок 20 px, зона касания 44 × 44 (DESIGN §9); вид тот же */
.nw-search__clear { position: relative; }
.nw-search__clear::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.nw-token__t { white-space: nowrap; }

/* ---------- лист ---------- */
.nw-sheet { display: flex; flex-direction: column; outline: none; max-height: calc(100% - var(--nw-top-inset) - 8px); }
/* Лист и другие контейнеры, куда фокус ставит код (tabindex="-1": для VoiceOver и Esc), рамку не рисуют: после свайпа
   или долгого нажатия браузер считает такой фокус «видимым», и .nw-app :focus-visible (tokens.css) обводил весь лист.
   Кнопки с tabindex="-1" (таб-бар, стрелки) сюда не попадают — у них рамка с клавиатуры остаётся. */
.nw-app :is(section, div)[tabindex="-1"]:focus-visible { outline: none; }
.nw-sheet--medium { max-height: min(680px, calc(100% - var(--nw-top-inset) - 56px)); }
.nw-sheet--large { top: calc(var(--nw-top-inset) + 6px); max-height: none; }
.nw-sheet__grab, .nw-sheet__head { flex: none; touch-action: none; }
.nw-sheet__head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-sheet__cancel { justify-self: start; min-height: var(--nw-hit); text-align: left; }
.nw-sheet__right { justify-self: end; display: flex; align-items: center; }
.nw-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(16px + max(var(--nw-safe-bottom), 12px) + var(--nw-kb-h)); }
.nw-sheet.has-main .nw-sheet__body { padding-bottom: calc(var(--nw-mainbtn-h) + 32px + max(var(--nw-safe-bottom), 26px) + var(--nw-kb-h)); }
[data-shell="telegram"] .nw-sheet.has-main .nw-sheet__body { padding-bottom: calc(16px + var(--nw-kb-h)); }
.nw-sheet__lead { margin: 0 4px 10px; text-align: center; }
.nw-sheet--menu .nw-row__icon { background: none; color: var(--nw-link); }
.nw-date { font: inherit; font-size: var(--nw-fs-body); color: var(--nw-text); background: var(--nw-fill); border: 0; border-radius: 8px; padding: 6px 10px; min-height: 36px; }

/* Нижние кнопки вне Telegram: над листом и клавиатурой; без клавиатуры — над домашней полоской */
.nw-mainbar--kb { padding-bottom: calc(8px + max(var(--nw-safe-bottom), 26px)); }
[data-kb="1"] .nw-mainbar--kb { padding-bottom: 8px; }
.nw-mainbar.is-stacked { flex-direction: column; }
.nw-mainbtn.is-progress { pointer-events: none; }
.nw-spin { width: 20px; height: 20px; border-radius: 50%; border: 2.4px solid currentColor; border-right-color: transparent; animation: nw-spin .8s linear infinite; }
@keyframes nw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nw-spin { animation-duration: 2.4s; } }
.nw-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- снэкбар и тост ---------- */
.nw-shell:not(.has-tabbar) .nw-snack { bottom: calc(16px + max(var(--nw-safe-bottom), 12px)); }
/* над своими нижними кнопками (вне Telegram); правило сильнее «нет таб-бара» выше */
.nw-has-mainbar .nw-shell .nw-snack { bottom: calc(var(--nw-mainbtn-h) + 16px + max(var(--nw-safe-bottom), 26px) + 10px); }
.nw-toast { position: absolute; z-index: var(--nw-z-toast); left: 50%; top: calc(var(--nw-top-inset) + 10px); transform: translateX(-50%); max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--nw-r-full); background: var(--nw-snack-bg); color: var(--nw-snack-text);
  font-size: var(--nw-fs-sub); line-height: var(--nw-lh-sub); font-weight: var(--nw-w-medium); box-shadow: var(--nw-shadow-float); white-space: nowrap;
  -webkit-backdrop-filter: var(--nw-blur); backdrop-filter: var(--nw-blur); pointer-events: none; }
.nw-toast > span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- пустое состояние ---------- */
.nw-empty__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- заглушка экрана, пока его пишет другой агент ---------- */
.nw-stub { margin-top: 12px; }
.nw-stub__note { padding: 14px 16px; font-size: var(--nw-fs-sub); line-height: var(--nw-lh-sub); color: var(--nw-text-2); }
.nw-stub-input { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--nw-fs-callout); line-height: 1.4375rem; color: var(--nw-text); caret-color: var(--nw-link); padding: 4px 0; }
.nw-stub-input::placeholder { color: var(--nw-text-2); }
.nw-app .nw-stub-input:focus-visible { outline: none; }   /* как у поиска: только каретка */