/* Мобільний шар кабінету.
   Усе всередині @media — на десктопі жодне правило не діє, тому наявні екрани
   можна не чіпати. Підключається одним <link> на кожній сторінці кабінету.

   Задум: не «десктоп із бургером», а два екрани, що змінюють один одного, як
   у месенджері: список розмов → розмова. Навігація внизу, під великим пальцем;
   верх екрана віддано змісту. */

/* Планшет і вужче: сторінки кабінету самі ховають бічне меню на 1100px, але
   нічого не давали замість нього — на такій ширині навігації просто не було.
   Тому нижня панель з'являється рівно там, де зникає меню. */
/* Панель, шторка й кнопка «назад» існують у DOM на всіх ширинах — ховаємо їх
   за межами мобільних розмірів, щоб на десктопі нічого не з'являлось.
   Кнопку «назад» сюди довелось додати після того, як без мобільних правил
   її SVG розтягнувся на пів екрана розмови. */
.mnav, .msheet, .mback { display: none; }

@media (max-width: 1100px) {
  /* ── нижня навігація ───────────────────────────────────────────────────── */
  .mnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform .26s cubic-bezier(.22,.61,.36,1);
  }
  .mnav a {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 0 7px; text-decoration: none; color: var(--muted);
    font-size: 11px; font-weight: 600; letter-spacing: -.01em;
  }
  .mnav a svg { width: 21px; height: 21px; }
  .mnav a.on { color: var(--accent-d); }
  /* Активний пункт помічений і рискою, і кольором — колір сам по собі
     втрачається на сонці. */
  .mnav a.on::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent);
  }
  /* Під панеллю на айфоні лишалась сіра смуга — це зона жестів, до якої фон
     панелі не доходив. Дотягуємо його вниз запасом: видно тільки те, що під
     панеллю, зайве обріже край екрана. */
  .mnav::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%;
    height: 120px; background: var(--surface);
    pointer-events: none;   /* суто фон: інакше з'їдає дотики внизу екрана, і сторінка не гортається */
  }
  .mnav .bdg {
    position: absolute; top: 4px; left: 50%; margin-left: 4px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--rose); color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }

  /* Діалоги — єдина сторінка кабінету без власних мобільних правил, тому
     бічне меню їй ховаємо тут: інакше на планшеті було б дві навігації одразу. */
  .rail { display: none !important; }
  .app { grid-template-columns: 1fr !important; }
  .cl-items, .cp-thread { padding-bottom: 76px; }
}

@media (max-width: 860px) {
  /* Десктопна верстка тримається на zoom:.85 — на телефоні він ламає розміри
     тексту й полів вводу. */
  html, body { zoom: 1 !important; }
  body { font-size: 15px; }
  /* iOS «гумовий» відскок: сторінка відтягується за межі, і закріплені шапка
     з панеллю на мить від'їжджають — саме це читається як «усе плаває». */
  html, body { overscroll-behavior: none; }

  /* Напівпрозорий фон із розмиттям на закріплених смугах iOS перемальовує з
     запізненням: під час інерційної прокрутки крізь них просвічує вміст і вони
     мерехтять. На телефоні робимо їх суцільними. */
  .topbar {
    position: sticky; top: 0; z-index: 20;
    background: var(--canvas) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }

  /* Висоту в екран і заборону прокрутки сторінки задаємо ТІЛЬКИ діалогам:
     там список і розмова прокручуються всередині. Огляд, Ліди й решта —
     звичайні довгі сторінки, для них overflow:hidden означав би, що вони
     взагалі не прокручуються. */
  body:has(.dlg) { height: 100dvh !important; overflow: hidden; }
  body:has(.dlg) .app { height: 100dvh !important; }

  /* КЛЮЧОВЕ. `1fr` у гріді — це `minmax(auto, 1fr)`, тобто колонка не може
     стати вужчою за найширший вміст усередині. Якась картка чи таблиця не
     вміщалась у 390px — і колонка розтягла всю сторінку до 469px, через що
     екран їздив убік. `minmax(0, 1fr)` дозволяє колонці стискатись, а вміст
     переносить рядки або прокручується всередині себе.
     Те саме для гріда й флексу всередині: без min-width:0 діти не стискаються. */
  .app { grid-template-columns: minmax(0, 1fr) !important; }
  .app > *, main, main > * { min-width: 0 !important; }
  .rail { display: none !important; }              /* замінює нижня панель */
  /* Сторінки задають min-height:calc(100vh/.85) під свій zoom. Ми zoom скасували,
     тому без цього внизу лишалось би 17% порожнечі. */
  .app { min-height: 100dvh !important; }

  /* Сітки сторінок розраховані на ширший екран. На телефоні — один стовпець,
     і скрізь minmax(0,…), щоб жоден блок не міг розсунути сторінку.
     .analytics у вихідних стилях не мала мобільного правила взагалі. */
  .kpis, .analytics, .a-cards, .row2, .row2b, .stats, .cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Широкий вміст, який не переноситься (таблиці, графіки), прокручується
     всередині своєї картки, а не тягне сторінку. */
  .tbl-wrap, .chartwrap, table { max-width: 100%; overflow-x: auto; }

  /* Смужка фільтрів (Усі / Гарячі / Теплі / Холодні) ширша за екран — гортається
     вбік усередині себе, інакше «Холодні» просто недосяжні. */
  .ltabs, .tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ltabs::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .ltabs > *, .tabs > * { flex: none; }

  /* ── картка ліда ──
     Її стилі додає скрипт сторінки вже після наших, тому тут потрібен
     !important. На телефоні шторка займає весь екран, а не 92% ширини. */
  #ld {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh !important;
  }
  #ld .ldh {
    padding-top: calc(16px + env(safe-area-inset-top)) !important;
    align-items: flex-start !important;
  }
  /* Довге посилання з реклами (utm-мітки) не переносилось і розсувало картку —
     текст зсувався вліво й обрізався. */
  #ld .lmsg { max-width: 100% !important; overflow-wrap: anywhere; word-break: break-word; }
  #ld .ldconv { overflow-x: hidden !important; max-height: 46vh !important; }
  #ld .ldrow .v { overflow-wrap: anywhere; text-align: left !important; }
  /* Три кнопки в ряд не влазили — «Видалити» зрізалась по краю. */
  #ld .ldfoot {
    flex-wrap: wrap !important; gap: 8px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  #ld .ldfoot button { flex: 1 1 46% !important; padding: 12px 8px !important; }
  #ld .ldfoot .del { flex: 1 1 100% !important; }

  /* Останній запобіжник: навіть якщо щось нове колись вилізе — вбік не поїде.
     ‼️ Саме `clip`, а не `hidden`. `overflow-x: hidden` робить елемент
     контейнером прокрутки, і коли він стоїть і на html, і на body, Android
     Chrome лишає сторінку без прокрутки взагалі — на iOS те саме працює.
     `clip` обрізає по горизонталі, але контейнера прокрутки не створює,
     тож вертикальна прокрутка лишається сторінковою. */
  html, body { overflow-x: clip; max-width: 100vw; }

  /* Назва розділу вже стоїть у шапці застосунку — другий раз не потрібна. */
  main h1 { display: none !important; }

  /* ── шапка ─────────────────────────────────────────────────────────────── */
  .topbar {
    padding: 10px 14px !important;
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
    gap: 10px !important;
  }
  .topbar .search { display: none !important; }     /* ⌘K на телефоні марний */
  .topbar::before {
    content: attr(data-title);
    font-family: var(--disp); font-weight: 700; font-size: 18px;
    letter-spacing: -.02em; color: var(--ink); flex: 1;
  }

  main { min-height: 0; display: flex; flex-direction: column; }

  /* ── список розмов ─────────────────────────────────────────────────────── */
  .dlg { grid-template-columns: 1fr !important; gap: 0 !important; padding: 0 !important; }
  .dlg > .pane:first-child { border-radius: 0; border-left: none; border-right: none; }
  .cl-head { padding: 12px 14px 8px !important; }
  .cl-head h2 { font-size: 17px !important; }
  .tabs, .dlg select { font-size: 13px; }
  /* Рядок 56px замість 44: на дотик менше — промах, а не клік. */
  .cl-items .ci { min-height: 56px; }

  /* ── розмова: повноекранна панель, що виїжджає збоку ───────────────────── */
  .dlg > .pane:last-child {
    position: fixed; inset: 0; z-index: 60; border-radius: 0;
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.22,.61,.36,1);
    padding-top: env(safe-area-inset-top);
    will-change: transform;
  }
  body.chat-open .dlg > .pane:last-child { transform: translateX(0); }
  body.chat-open .mnav { transform: translateY(100%); }   /* у розмові нижня панель зайва */

  /* Кнопка «назад» — окремим елементом над шапкою розмови: сама шапка
     перемальовується скриптом сторінки, вставляти щось усередину неї марно. */
  .mback {
    display: flex; align-items: center; gap: 6px;
    position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 8px; z-index: 5;
    height: 36px; padding: 0 12px 0 8px; border: none; border-radius: 10px;
    background: var(--canvas); color: var(--accent-d);
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .mback svg { width: 18px; height: 18px; }
  /* Шапка розмови: ім'я під кнопкою «назад», дії — другим рядком. На 390px
     усе в один ряд не влазить, і «Перехопити» зрізалось по краю. */
  /* Відступ ліворуч = ширина кнопки «назад» + проміжок. Було 96px, а кнопка
     закінчується на 107 — аватар заходив під неї. */
  .cp-head {
    flex-wrap: wrap !important; row-gap: 8px !important;
    padding: 10px 12px 10px 116px !important; min-height: 56px;
  }
  .cp-head .av { width: 34px !important; height: 34px !important; border-radius: 10px !important; font-size: 13px !important; }
  .cp-head .nm { font-size: 15px !important; }
  /* Дії — окремий ряд на всю ширину, вирівняний ліворуч. Що не влізло —
     переходить на наступний рядок і стає поруч, а не обрізається по краю
     й не вишиковується стовпчиком (так було, коли ряд лишався вузьким).
     Кількість кнопок різна: у власника є ще й «видалити діалог». */
  .cp-head .actions {
    margin-left: 0 !important; width: 100%; order: 3;
    justify-content: flex-start !important; flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .cp-head .actions > * { flex: 0 0 auto; }
  /* Мітку «Ви ведете / Бот веде» на телефоні прибираємо: те саме написано
     смужкою над полем вводу, а тут вона займала місце й виштовхувала кнопки
     на третій ряд. */
  .cp-head .actions .mode-pill { display: none !important; }
  .cp-head .actions .btn, .cp-head .actions button { font-size: 13px; }
  /* Ім'я не тулиться до кнопки «назад» і не обрізає телефон. */
  .cp-head > div:not(.actions) { min-width: 0; }
  .cp-empty { display: none !important; }

  /* Назва розділу вже стоїть у шапці застосунку — другий раз не потрібна. */
  .cl-head h2 { display: none !important; }
  .cl-head { padding-top: 8px !important; }

  /* Поле вводу над клавіатурою, з урахуванням смуги жестів. */
  .cp-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
  .cp-thread { padding: 12px 12px 4px !important; }
  .cp-thread .b, .cp-thread .msg { max-width: 88% !important; }

  /* Таблиця лідів: на 390px навіть два стовпці вилазять за екран. */
  .trow { grid-template-columns: 1fr !important; gap: 4px !important; }

  /* ── картки-лічильники: по дві в ряд ───────────────────────────────────────
     Стовпчиком вони з'їдали 580px — на телефоні це цілий екран прокрутки до
     першого ліда. Чотири числа по два в ряд читаються так само, а місця треба
     вдвічі менше. Правило нижче за загальне «один стовпець», тому перемагає. */
  .kpis, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .stats .stat, .kpis .kpi { padding: 12px 13px !important; }
  .stats .stat .v, .kpis .kpi .val { font-size: 24px !important; }
  .stats .stat .l, .kpis .kpi .lab { font-size: 11.5px !important; }
  .stats .sic, .kpis .kpi .ic { width: 30px !important; height: 30px !important; }

  /* ── смуга фільтрів ────────────────────────────────────────────────────────
     Чотири ряди: чипи, два випадні списки, третій, пошук. Списки роблимо
     рівними частинами одного ряду, пошук — окремим рядком на всю ширину.
     Виходить три ряди замість чотирьох, і жоден елемент не обрізається. */
  .filterbar { padding: 12px 14px !important; gap: 8px !important; }
  .filterbar > .ltabs { flex: 1 1 100%; }
  .filterbar > select { flex: 1 1 0 !important; min-width: 0 !important; font-size: 13px !important; padding: 8px 10px !important; }
  .filterbar > .lsearch { flex: 1 1 100% !important; margin-left: 0 !important; min-width: 0 !important; }

  /* Місце під панель, щоб останній рядок списку не ховався під нею. */
  .cl-items, .lead-list, .tbl-wrap, main > .pad, .cards { padding-bottom: 76px !important; }

  /* ── «Ще»: решта розділів шторкою ──────────────────────────────────────── */
  .msheet {
    position: fixed; inset: 0; z-index: 70; display: none;
    background: rgba(27,36,48,.42);
  }
  .msheet.on { display: block; }
  .msheet .in {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface); border-radius: 18px 18px 0 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    animation: msheet-up .24s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes msheet-up { from { transform: translateY(100%); } to { transform: none; } }
  .msheet .grip {
    width: 36px; height: 4px; border-radius: 2px; background: var(--line);
    margin: 4px auto 10px;
  }
  .msheet a, .msheet button {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 13px 14px; border: none; border-radius: 12px; background: none;
    font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
    text-decoration: none; text-align: left; cursor: pointer;
  }
  .msheet a svg, .msheet button svg { width: 19px; height: 19px; color: var(--muted); }
  .msheet .out { color: var(--rose); }

  /* Десктопні дрібниці, які на телефоні лише заважають. */
  .kbd, .tb-right .iconbtn[aria-label="Сповіщення"] + * { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dlg > .pane:last-child, .mnav, .msheet .in { transition: none; animation: none; }
}