/* ═══ Мобильная оболочка: нижняя полоса переходов и безопасные зоны (F1319 W2) ═══
   Подключают операторская панель и кабинет клиента. Узлы полосы и ящика дописывает
   `js/mobile-shell.js` — в разметке этих страниц их не было, и на телефоне человек
   терял переходы целиком.

   ⛔ Полоса живёт только на странице, открытой САМОЙ ПО СЕБЕ (метка `has-tabbar` ставится
   кодом). Внутри рамки Битрикса прибитое к экрану считается от высоты рамки, а портал
   выдаёт её выше видимой области — полоса уехала бы за кадр (тот же корень, что у
   `css/app-shell.css`). В рамке остаётся ящик с меню.

   ⛔ Отступы снизу и сверху берутся у САМОГО устройства: у телефонов с вырезом и полосой
   жеста своя занятая кромка, и постоянное число её не описывает — на одних моделях полоса
   встала бы под палец, на других висела бы с зазором. */

/* ── Безопасные кромки устройства ─────────────────────────────────────────── */
:root {
  --tp-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --tp-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --tp-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --tp-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}

body.app-mode .app-header {
  padding-top: calc(6px + var(--tp-safe-top));
  padding-left: calc(10px + var(--tp-safe-left));
  padding-right: calc(10px + var(--tp-safe-right));
}

/* Внутри приложения страница не тянется за кромку: подтягивание вниз показывало бы
   пустой фон обозревателя и читалось как «приложение сломалось». */
body.app-mode { overscroll-behavior-y: none; }

/* ── Нижняя полоса переходов ──────────────────────────────────────────────── */
.mob-tabbar { display: none; }

@media (max-width: 760px) {
  body.has-tabbar .mob-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    align-items: stretch;
    background: var(--surface);
    border-top: 1px solid var(--border-light);
    padding-right: var(--tp-safe-right);
    padding-bottom: var(--tp-safe-bottom);
    padding-left: var(--tp-safe-left);
    overflow: hidden;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
  }

  /* Содержимому оставляем место под полосой — иначе последняя строка списка
     навсегда прячется под ней, и до неё нельзя доскроллить. */
  body.has-tabbar .app-content {
    padding-bottom: calc(60px + var(--tp-safe-bottom));
  }

  .mob-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 6px 2px 8px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
    min-width: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease-out;
  }
  .mob-tab:active { background: var(--surface-hover); }
  .mob-tab.active { color: var(--accent); }

  .mob-tab-ic { position: relative; display: flex; }

  /* Непрочитанное на полосе — точка, а не число: цифра рядом со значком в 20 пикселей
     нечитаема, а роль у неё здесь одна — позвать в раздел. Число человек видит внутри. */
  .mob-tab-dot {
    position: absolute; top: -2px; right: -3px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger, #e5484d);
    border: 2px solid var(--surface);
  }

  .mob-tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Кнопка-гамбургер нужна только там, где полосы нет: иначе два входа в одно меню. */
  body.has-tabbar .mob-burger { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mob-tab { transition: none; }
}

/* Экран заявки занимает высоту целиком, поэтому место под полосу отводит он сам,
   а не общий отступ содержимого — у него своя прокрутка. */
@media (max-width: 760px) {
  body.has-tabbar .ticket-detail-layout {
    height: calc(var(--b24-visible-h, 100dvh) - var(--td-top-offset, 110px)
                 - 60px - var(--tp-safe-bottom));
  }
}