/* ============================================================================
   nav.css — разделы Чаты / Звонки / Истории / Профиль (nav.js), экран
   «Истории», окно «Папки чатов», поиск в сайдбаре в потоке, долгое нажатие.
   Только переменные темы из style.css — светлая и тёмная работают сами.
   ========================================================================== */

/* ---------- полоска разделов (компьютер) ---------- */
.nav-bar{display:flex;gap:2px;flex:none;margin:0 10px 6px;padding:3px;
  border-radius:12px;background:var(--panel-2);border:1px solid var(--border)}
.nav-item{flex:1 1 0;min-width:0;height:32px;display:flex;align-items:center;justify-content:center;
  gap:5px;padding:0 4px;border-radius:9px;color:var(--text-2);font-size:12px;font-weight:600;
  position:relative;transition:background .15s,color .15s;white-space:nowrap}
/* hover — только там, где он есть: на телефоне «липкий» hover красил бы
   последнюю нажатую вкладку */
@media (hover:hover){ .nav-item:not(.is-active):hover{color:var(--text);background:var(--hover)} }
.nav-item.is-active{background:var(--accent-soft);color:var(--accent)}
.nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nav-label{overflow:hidden;text-overflow:ellipsis;min-width:0}
.nav-ico{position:relative;display:grid;place-items:center;width:16px;height:16px;flex:none}
.nav-ico svg{width:16px;height:16px;display:block}
.nav-ico-off,.nav-ico-on{display:grid;place-items:center}
.nav-ico-on{display:none}
.nav-item.is-active .nav-ico-on{display:grid}
.nav-item.is-active .nav-ico-off{display:none}
/* значок непрочитанного: в углу вкладки, не поверх подписи */
.nav-badge{position:absolute;top:2px;right:3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:800;
  line-height:1;display:grid;place-items:center;font-family:var(--font-mono);pointer-events:none}
.nav-badge.is-dot{min-width:0;width:7px;height:7px;padding:0;top:5px;right:5px}
/* узкий сайдбар (34vw < 380px) — только подписи */
@media (min-width:821px) and (max-width:1117px){
  .nav-ico{display:none}
}

/* ---------- панели разделов ---------- */
.nav-pane{display:none;flex:1;min-height:0;flex-direction:column}
.sidebar[data-tab="calls"] > .nav-pane[data-pane="calls"],
.sidebar[data-tab="stories"] > .nav-pane[data-pane="stories"]{display:flex}
.sidebar[data-tab]:not([data-tab="chats"]) > .stories-bar,
.sidebar[data-tab]:not([data-tab="chats"]) > .folder-tabs,
.sidebar[data-tab]:not([data-tab="chats"]) > .chat-list,
.sidebar[data-tab]:not([data-tab="chats"]) > .search-results{display:none!important}
.nav-pane-head{display:flex;align-items:center;gap:4px;min-height:46px;padding:2px 8px 2px 16px;flex:none}
.nav-pane-title{margin:0;flex:1;min-width:0;font-family:var(--font-display);font-size:16px;font-weight:600;
  letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-pane-actions{display:flex;align-items:center;gap:2px}
.nav-act{width:38px;height:38px}
.nav-act svg{display:block}
.nav-act:disabled{opacity:.6;cursor:default}
.nav-refresh.is-spinning svg{animation:spin .8s linear infinite}
.nav-pane-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}

/* пустое состояние / ошибка / загрузка */
.nav-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:44px 24px}
.nav-state .spinner{margin:10px auto 4px}
.nav-state-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);margin-bottom:6px}
.nav-state-ico svg{display:block}
.nav-state-title{font-weight:700;font-size:16px;color:var(--text)}
.nav-state-text{color:var(--text-2);font-size:14px;line-height:1.5;max-width:300px}
.nav-state-btn{margin-top:10px;display:inline-flex;align-items:center;gap:6px}
.nav-state-btn > span{display:grid}
.nav-state-btn svg{display:block}

/* ---------- лента историй ---------- */
.stories-bar.st-rings{background:transparent;border-bottom:1px solid var(--border)}
.st-label{padding:12px 16px 8px}
.st-feed{display:flex;flex-direction:column;gap:12px;padding:0 12px 18px}
.st-card{position:relative;flex:none;height:240px;border-radius:16px;overflow:hidden;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--border);isolation:isolate;
  transition:transform .15s ease,box-shadow .15s ease;-webkit-touch-callout:none}
@media (hover:hover){ .st-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)} }
.st-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.st-media{position:absolute;inset:0;background:#0d0d10}
.st-media img,.st-media video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.st-media.is-broken{display:grid;place-items:center;background:var(--panel-2)}
.st-broken{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:13px;padding:0 20px;text-align:center}
.st-broken svg{display:block}
.st-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;pointer-events:none;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.st-play svg{display:block}
.st-head{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:rgba(0,0,0,.38);color:#fff}
.story-ring.st-ring{width:44px;height:44px;padding:2px;flex:none}
.st-ring .story-ring-in{padding:1.5px}
.st-ring .story-ava{font-size:14px}
.st-who{flex:1;min-width:0}
.st-name{font-weight:600;font-size:14.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-status{font-size:12px;color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-status.is-new{color:#fff;font-weight:700}
.st-views{display:flex;align-items:center;gap:5px;flex:none;font-size:12.5px;font-weight:700;
  background:rgba(255,255,255,.16);padding:4px 10px;border-radius:14px;font-family:var(--font-mono)}
.st-eye{font-family:var(--font)}
.st-caption{position:absolute;left:0;right:0;bottom:0;padding:12px;background:rgba(0,0,0,.5);color:#fff;
  font-size:14px;line-height:1.35;overflow:hidden;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.st-warn{margin:8px 12px 0;padding:8px 12px;border-radius:10px;font-size:13px;line-height:1.4;
  background:rgba(224,160,58,.14);color:var(--warn)}
.st-warn-btn{color:var(--accent);font-weight:700;text-decoration:underline;padding:0}

/* пауза в просмотрщике историй (extras.js) */
.story-viewer.is-paused .sv-seg-fill{transition:none!important}
.sv-paused{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;
  display:none;place-items:center;pointer-events:none}
.story-viewer.is-paused.is-key-paused .sv-paused{display:grid}
.sv-zones{touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ---------- поиск в сайдбаре: в потоке, а не наложением ---------- */
/* Результаты занимают место списка чатов под шапкой и вкладками папок: поиск
   учитывает выбранную вкладку, поэтому она остаётся видимой и переключаемой. */
.sidebar > .search-results{position:static;inset:auto;flex:1;min-height:0}
.sidebar:has(> .search-results:not([hidden])) > .chat-list,
.sidebar:has(> .search-results:not([hidden])) > .stories-bar{display:none!important}
.sr-section-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:8px}
.sr-scope{font-family:var(--font);text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:700;
  color:var(--accent);padding:4px 8px;border-radius:8px}
.sr-scope:hover{background:var(--accent-soft)}
.sr-note{padding:12px 14px;color:var(--muted);font-size:13.5px;text-align:center}
.sr-fail{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;
  margin:4px 6px;border-radius:10px;background:rgba(229,72,77,.08);color:var(--text-2);font-size:13.5px}
.sr-fail .btn{padding:6px 12px;font-size:13px}
.sr-empty-all{display:none;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 24px}
.search-results.is-empty > *{display:none}
.search-results.is-empty > .sr-empty-all{display:flex}
.sr-empty-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);margin-bottom:6px}
.sr-empty-ico svg{display:block}
.sr-empty-title{font-weight:700;font-size:16px;color:var(--text)}
.sr-empty-text{color:var(--text-2);font-size:14px;line-height:1.5}
.sr-empty-btn{margin-top:8px}
.sr-title > span:first-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sr-item .ci-badge{margin-left:4px}
.sr-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* долгое нажатие: без выделения текста и системной выноски на iOS */
.chat-item,.folder-tab,.sr-item{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.folder-tab.folder-manage{padding:6px 9px;color:var(--muted);display:inline-grid;place-items:center}
.folder-tab.folder-manage svg{display:block}
.folder-tab.folder-manage:hover{color:var(--text)}

/* ---------- окно «Папки чатов» ---------- */
.fm-list{display:flex;flex-direction:column;gap:10px}
.fm-list > .nav-state{padding:24px 8px 12px}
.fm-card{border:1px solid var(--border);border-radius:14px;background:var(--panel-2);overflow:hidden}
.fm-main{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;transition:background .12s}
.fm-main:hover{background:var(--hover)}
.fm-main:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fm-ico{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;flex:none}
.fm-ico svg{display:block}
.fm-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fm-name{font-weight:700;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-sub{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-count{min-width:24px;height:22px;padding:0 7px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--chip);color:var(--text-2);font-size:12px;font-weight:700;font-family:var(--font-mono)}
.fm-count.is-on{background:var(--accent);color:var(--on-accent)}
.fm-actions{display:flex;align-items:center;gap:2px;padding:2px 4px;border-top:1px solid var(--border)}
.fm-spacer{flex:1}
.fm-act{width:38px;height:38px}
.fm-act svg{display:block}
.fm-act:disabled{opacity:.3;cursor:default;background:none}
.fm-act.is-danger{color:var(--danger)}
.fm-act.is-danger:hover{background:rgba(229,72,77,.12);color:var(--danger)}
.fm-foot{display:flex;gap:10px;justify-content:flex-end;align-items:center;width:100%}
.fm-create{display:inline-flex;align-items:center;gap:6px;margin-right:auto}
.fm-create > span{display:grid}

/* поиск в выборе чатов папки и в «Моих ботах» */
.fp-search{margin-bottom:8px}
.bots-search{margin:4px 0 2px}
.bots-empty{padding:18px 8px;text-align:center;color:var(--text-2);font-size:14px;line-height:1.5}
.bots-empty b{display:block;color:var(--text);font-size:15px;margin-bottom:2px}

/* ---------- приглашение в чат (#join=) ---------- */
.invite-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:4px 0 2px}
.invite-ico{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);margin-bottom:4px}
.invite-ico svg{display:block}
.invite-hero .ava{width:80px;height:80px;font-size:30px;margin-bottom:4px}
.invite-title{font-weight:700;font-size:17px;color:var(--text)}
.invite-sub{color:var(--text-2);font-size:14px;line-height:1.5;max-width:320px}
/* предпросмотр чата по ссылке (GET /chats/invite/<token>) */
.invite-name{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%;
  overflow-wrap:anywhere;font-size:19px}
.invite-meta{color:var(--text-2);font-size:14px;margin-top:-4px}
.invite-desc{max-width:340px;color:var(--text);font-size:14px;line-height:1.45;white-space:pre-line;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- телефон: нижняя панель как в приложении ---------- */
@media (max-width:820px){
  .sidebar > .nav-bar{order:10;margin:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));gap:0;
    border-radius:0;border:none;border-top:1px solid var(--border);background:var(--panel)}
  .nav-item{flex-direction:column;height:auto;gap:3px;padding:2px 0;background:none!important;font-size:12px;
    font-weight:600;border-radius:12px}
  .nav-item:hover{background:none!important}
  .nav-ico{width:56px;height:30px;border-radius:15px;transition:background .15s}
  .nav-ico svg{width:22px;height:22px}
  .nav-item.is-active .nav-ico{background:var(--accent-soft)}
  .nav-badge{top:0;right:auto;left:calc(50% + 7px);min-width:18px;height:18px;border-radius:9px;
    font-size:10.5px;border:2px solid var(--panel)}
  .nav-badge.is-dot{top:4px;left:calc(50% + 11px);width:8px;height:8px;border:none}
  .sidebar[data-tab]:not([data-tab="chats"]) > .side-head{display:none}
  .nav-pane-head{min-height:58px;padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px 18px}
  .nav-pane-title{font-size:19px}
  /* Свёрнутый звонок и «Вернуться к звонку» (calls.css) висят position:fixed
     у нижнего края окна. Пока на экране сайдбар с нижней панелью (переписка
     не открыта), поднимаем их над панелью — иначе они закрывают «Истории»/
     «Профиль» (и середину панели), а нажатие туда разворачивает звонок.
     --nav-bar-h — высота панели без безопасной зоны снизу. */
  :root{--nav-bar-h:66px}
  #app:not([hidden]):not(.show-conv) ~ #callRoot > :is(.call-pill,.call-rejoin){
    bottom:calc(var(--nav-bar-h) + 10px + env(safe-area-inset-bottom,0px))}
}

/* ---------- низкий экран (телефон лёжа, низкое окно) ---------- */
/* Шапка, ряд историй, вкладки папок, плашки и панель разделов — блоки
   постоянной высоты. В 360–400px по высоте они не помещались: список чатов
   (единственный гибкий блок) сжимался до пустой полоски, а нижняя панель
   уезжала за край. Здесь ряд кружков историй убран (он же есть в разделе
   «Истории», о новых говорит точка на вкладке), у плашки уведомлений нет
   пояснения, а список держит минимум высоты — если всё равно не помещается,
   сайдбар прокручивается целиком. */
@media (max-height:480px){
  .sidebar{overflow-y:auto}
  .sidebar > .chat-list,.sidebar > .search-results{min-height:140px}
  .sidebar > .stories-bar{display:none!important}
  .sidebar > .ntf-banner .ntf-banner-sub{display:none}
}
/* …а нижняя панель на телефоне — только значки и прилипает к низу. */
@media (max-width:820px) and (max-height:480px){
  :root{--nav-bar-h:40px}
  .sidebar > .nav-bar{position:sticky;bottom:0;z-index:2;padding:3px 4px calc(3px + env(safe-area-inset-bottom,0px))}
  .nav-item{padding:1px 0}
  /* подпись прячем только с экрана: она остаётся именем кнопки для чтеца */
  .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .nav-ico{height:28px}
}
.story-viewer:focus{outline:none}
.sv-caption{pointer-events:none}