/* Мобильная адаптация — слой установленного приложения (редакция 7).
   РЕДАКЦИЯ 7 (messenger polish): высота нижней панели вынесена в
   --tabbar-h (nav.js v15) — композер и всё прилипающее снизу встаёт
   вплотную над панелью, «мёртвая зона» между вводом и табами убрана;
   планшеты ≤900px получают ту же раскладку.

   РЕДАКЦИЯ 6 (messenger): /learn/ превращается в экраны-мессенджер («Чат»,
   «Школа», «Настройки»), нижняя панель nav.js ведёт между ними.

   РЕДАКЦИЯ 5 (PWA): с переходом на online-only PWA адаптация больше НЕ
   трогает обычный мобильный браузер — там сайт выглядит как десктоп.
   Все «мобильные» правила живущие под html.kat-app (навешивается инлайн-
   сниппетом в <head>, когда страница открыта установленным приложением:
   display-mode: standalone / navigator.standalone).

   v2: компактная шапка nav.js (900/480), полноширинные CTA героя, чипы соцсетей
   в футере, увеличенный запас прокрутки под sticky-навбар.
   v3: нижний таб-бар nav.js — прилипающий композер и тосты поднимаются над
   панелью, запасы прокрутки учитывают её высоту.
   v4: «как в Telegram Android» — компактный масштаб на телефонах: плотные
   карточки без 3D-теней, ленты в один скролл, dvh вместо vh, тосты на всю
   ширину, sticky-шапки 52px.
   v5: тот же набор, но только в kat-app + добавлен планшетный блок 641–900px
   (плоские карточки, one-col сетки, чат на всю высоту экрана). */

/* базовое поведение касаний и инерция скролла — полезно в любом браузере */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body { overscroll-behavior-y: none; }
button, a, [role="button"], summary, label { touch-action: manipulation; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ---------- приложение (kat-app): телефон ≤640px ---------- */
@media (max-width: 640px) {
  html.kat-app input, html.kat-app textarea, html.kat-app select {
    font-size: 16px; /* iOS Safari зумит страницу на фокусе, если <16px */
    max-width: 100%;
  }
  html.kat-app .wrap, html.kat-app .container, html.kat-app .topbar-in,
  html.kat-app .appbar-in, html.kat-app .cat-top { padding-left: 14px; padding-right: 14px; }

  /* сетки колонок → одна колонка; боковая панель уходит в конец */
  html.kat-app .grid, html.kat-app .hero-inner, html.kat-app .eco-grid { grid-template-columns: 1fr; }
  html.kat-app .grid aside { order: 2; }
  html.kat-app .split { grid-template-columns: 1fr; }

  /* таблицы и широкие блоки — горизонтальный скролл вместо обрезки */
  html.kat-app table, html.kat-app .scrolly, html.kat-app pre {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  html.kat-app img { max-width: 100%; height: auto; }
  html.kat-app h1 { font-size: clamp(23px, 6.4vw, 30px); margin-bottom: 8px; }
  html.kat-app h2 { font-size: clamp(19px, 5vw, 24px); }
  html.kat-app .btn { font-size: 14.5px; padding: 12px 16px; }
  html.kat-app .toasts { bottom: calc(16px + env(safe-area-inset-bottom)); }

  /* длинные слова/ссылки не растягивают страницу горизонтально */
  html.kat-app main, html.kat-app .card, html.kat-app article,
  html.kat-app .post, html.kat-app li, html.kat-app p { overflow-wrap: anywhere; }

  /* карточки страниц информации: плоские и цельные, как сообщения в TG.
     !important — страницы спорят инлайновыми жёсткими тенями в <style> в <body>;
     :not(.chat) — экран чата на /learn/ сам решает, как ему выглядеть */
  html.kat-app .card:not(.chat) {
    border-width: 1px !important; border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(33, 29, 24, .14) !important;
    padding: 13px 14px !important; margin-bottom: 10px;
  }
  /* статьи библиотеки: «жёсткие» тени 6px съедали край карточки на телефоне */
  html.kat-app .article, html.kat-app .related, html.kat-app .toc,
  html.kat-app .learn-side, html.kat-app .club-side, html.kat-app .t-side {
    border-width: 1px !important; border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(33, 29, 24, .12) !important;
  }
  html.kat-app .article { padding: 18px 14px !important; }
  html.kat-app .badge { transform: none; }
  html.kat-app .post {
    border-width: 1px !important; border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(33, 29, 24, .10) !important;
    padding: 12px 13px !important; margin-bottom: 10px;
  }
  html.kat-app .row {
    border-width: 1px !important; border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(33, 29, 24, .10) !important;
    padding: 14px 13px !important; margin-bottom: 10px;
  }
  html.kat-app .btn, html.kat-app .mini { box-shadow: none !important; }
  html.kat-app .btn:active, html.kat-app .mini:active { transform: scale(.97); }

  /* sticky-шапки страниц — компактные 52px */
  html.kat-app .topbar-in, html.kat-app .appbar-in {
    min-height: 52px; height: auto; padding-top: 6px; padding-bottom: 6px;
  }

  /* ленты-скроллы (табы, сегменты, чипы) — одна строка без переноса и без полос */
  html.kat-app .tabs, html.kat-app .seg-row, html.kat-app .chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  html.kat-app .tabs::-webkit-scrollbar, html.kat-app .seg-row::-webkit-scrollbar,
  html.kat-app .chips::-webkit-scrollbar { display: none; }
  html.kat-app .tabs .tab, html.kat-app .seg-row .seg-btn, html.kat-app .chips .chip { flex: none; }

  /* таблицы данных — горизонтальный листок */
  html.kat-app table { display: block; max-width: 100%; }
  html.kat-app table td, html.kat-app table th { padding: 8px 10px; font-size: 13px; }

  /* витрины в две колонки (магазин/бусты): инлайн grid-колонки страниц перебиваем
     на adaptive-минимум, чтобы карточки не лопались и не резались */
  html.kat-app .tiles, html.kat-app .badge-grid {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
  }

  /* герой лендинга: CTA-кнопки на всю ширину — bigger target, аккуратнее стек */
  html.kat-app .hero-cta { gap: 10px; }
  html.kat-app .hero-cta .btn { flex: 1 1 100%; justify-content: center; min-height: 48px; }
  html.kat-app .hero-badge { font-size: 11px; padding: 6px 11px; }

  /* футер: чипы соцсетей — крупные тап-цели */
  html.kat-app .kat-full-footer__socials { display: grid; grid-template-columns: 1fr; gap: 8px; }
  html.kat-app .kat-full-footer__socials > span { padding-left: 2px; }
  html.kat-app .soc-chip { justify-content: center; min-height: 44px; }
}

/* модальные окна в приложении — «лист» снизу, удобно дотянуться большим пальцем */
@media (max-width: 640px) {
  html.kat-app .overlay {
    padding: 0; align-items: flex-end; justify-content: center;
    background: rgba(33, 29, 24, 0.55);
  }
  html.kat-app .overlay > * {
    width: 100%; max-width: none; max-height: calc(100dvh - 24px);
    border-radius: 16px 16px 0 0; border-bottom: none;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    animation: sheet-up 0.22s ease;
  }
  @keyframes sheet-up { from { transform: translateY(28px); opacity: .6; } to { transform: none; opacity: 1; } }
  /* нижние листы (.overlay > .card) — TG-«шторка»: свои скругления,
     без рамки/тени/отступа; перебиваем !important-флэт выше за счёт порядка */
  html.kat-app .overlay .card {
    border: none !important; border-radius: 16px 16px 0 0 !important;
    box-shadow: none !important; margin: 0 !important;
    padding: 16px 14px calc(18px + env(safe-area-inset-bottom)) !important;
  }
}

/* sticky-CTA/баннеры: не залезать на home-indicator iOS */
.mobile-cta { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

/* в3/v5→v7: нижний таб-бар nav.js — всё прилипающее снизу живёт НАД панелью
   (var(--tabbar-h) + safe-area), а не под ней; тосты — на всю ширину */
@media (max-width: 640px) {
  html.kat-app.kn-tabs-on .composer { bottom: calc(var(--tabbar-h, 50px) + env(safe-area-inset-bottom)); }
  html.kat-app.kn-tabs-on .toasts { bottom: calc(var(--tabbar-h, 50px) + 14px + env(safe-area-inset-bottom)); }
  /* sticky-элементы страниц (панели фильтров, нижние CTA-полосы) */
  html.kat-app.kn-tabs-on .mobile-cta { bottom: calc(var(--tabbar-h, 50px) + env(safe-area-inset-bottom)); }
  /* cookie-баннер (cookie.js, fixed bottom:0) — над панелью, иначе перекроет табы.
     !important: cookie.js пишет bottom:0 инлайновым cssText, класс его не бьёт */
  html.kat-app.kn-tabs-on .kat-cookie-bar { bottom: calc(var(--tabbar-h, 50px) + env(safe-area-inset-bottom)) !important; }
  /* тосты на всю ширину; с таб-баром — над ним, с клавиатурой — у нижней кромки */
  html.kat-app .toast-wrap { left: 10px; right: 10px; max-width: none; bottom: calc(12px + env(safe-area-inset-bottom)); }
  html.kat-app.kn-tabs-on .toast-wrap { bottom: calc(var(--tabbar-h, 50px) + 8px + env(safe-area-inset-bottom)); }

  /* клавиатура открылась (nav.js вешает kn-kb, панель скрыта) — всё возвращается
     к нижней кромке viewport: композер должен стоять под пальцем, а не в воздухе */
  html.kat-app.kn-tabs-on.kn-kb .composer,
  html.kat-app.kn-tabs-on.kn-kb .mobile-cta,
  html.kat-app.kn-tabs-on.kn-kb .kat-cookie-bar { bottom: 0 !important; }
  html.kat-app.kn-tabs-on.kn-kb .toasts { bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
  html.kat-app.kn-tabs-on.kn-kb .toast-wrap { bottom: 8px; }
}

/* ---------- приложение (kat-app): планшет 641–900px ---------- */
@media (min-width: 641px) and (max-width: 900px) {
  html.kat-app .wrap, html.kat-app .container, html.kat-app .topbar-in,
  html.kat-app .appbar-in, html.kat-app .cat-top { padding-left: 18px; padding-right: 18px; }
  /* плоские карточки и ленты без переноса — compactness без потери качества */
  html.kat-app .card, html.kat-app .post {
    border-width: 1px !important; border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(33, 29, 24, .12) !important;
  }
  html.kat-app .article, html.kat-app .related, html.kat-app .toc,
  html.kat-app .club-side, html.kat-app .t-side {
    border-width: 1px !important; border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(33, 29, 24, .10) !important;
  }
  html.kat-app .tabs, html.kat-app .seg-row, html.kat-app .chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  html.kat-app .tabs::-webkit-scrollbar, html.kat-app .seg-row::-webkit-scrollbar,
  html.kat-app .chips::-webkit-scrollbar { display: none; }
  html.kat-app .btn, html.kat-app .mini { box-shadow: none !important; }
  /* композер/тосты/cookie — над таб-баром, как на телефоне */
  html.kat-app.kn-tabs-on .composer { bottom: calc(var(--tabbar-h, 50px) + env(safe-area-inset-bottom)); }
  html.kat-app.kn-tabs-on .toasts,
  html.kat-app.kn-tabs-on .toast-wrap { bottom: calc(var(--tabbar-h, 50px) + 14px + env(safe-area-inset-bottom)); }
  html.kat-app.kn-tabs-on .mobile-cta { bottom: calc(var(--tabbar-h, 50px) + env(safe-area-inset-bottom)); }
  html.kat-app.kn-tabs-on .kat-cookie-bar { bottom: calc(var(--tabbar-h, 50px) + env(safe-area-inset-bottom)) !important; }
}