/* ===========================================================================
   Телефон и планшет: общие правила для всех страниц.

   Подключается из fragments/chrome :: appmeta, то есть везде, где есть
   голова страницы, — и до остальных таблиц. Здесь только то, что
   одинаково для лендинга, демо, кабинета и песочницы: поведение
   касаний, поля ввода, безопасные зоны экрана. Вёрстка каждой страницы
   остаётся в её собственной таблице.
   =========================================================================== */

/* Вырезы и скруглённые углы экрана: отступы, которые телефон просит
   оставить под свои элементы. Ноль там, где их нет */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

/* Телефон в альбомной ориентации увеличивает текст сам — и ломает
   вёрстку, которая на это не рассчитывала */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Нажатие без задержки на двойное касание и без серой вспышки: так
   ведут себя кнопки приложений, а не ссылки девяностых */
a, button, input, select, textarea, label, [role="button"], summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* На устройствах с пальцем вместо мыши */
@media (pointer: coarse) {
    /*
     * Поле ввода не мельче 16 пикселей.
     *
     * iPhone приближает страницу к полю, в котором шрифт меньше, и после
     * набора страница остаётся увеличенной и сдвинутой. Не косметика:
     * это первое, обо что спотыкается любой ввод с телефона. !important
     * намеренно — правило обязано победить размер, заданный классом
     * поля в любой из таблиц
     */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: max(16px, 1em) !important;
    }

    /* Флажки и переключатели — под палец, а не под курсор */
    input[type="checkbox"], input[type="radio"] {
        width: 20px;
        height: 20px;
        flex: none;
    }

    /* Наведения на телефоне нет: липкое состояние после касания — дефект */
    a:hover, button:hover { transition-duration: 0s; }
}

/* Прокрутка внутри панели не тянет за собой страницу под ней */
[role="dialog"], .chat-log, .agent-log, .side, .side-nav { overscroll-behavior: contain; }