@media (max-width: 640px) {
    .app {
        --hdr-h: 64px;
        --footer-row-h: 56px;
        grid-template-rows: var(--hdr-h) 1fr var(--footer-row-h);
    }

    .header {
        padding: 0 16px;
    }

    .footer-meta {
        padding: 0 16px;
        box-sizing: border-box;
    }

    .brand-tag {
        display: none;
    }

    /* Размер и позиции участников (включая мобилу) считает движок
       layoutParticipants (public/js/participants.js) из замеренной области +
       fit-scale — прежняя flex-денсификация по data-peers больше не нужна.
       Область/отступы движка заданы в rem → сами ужимаются под мелкий экран. */

    .panel-area {
        --panel-offset-y: 110px;
        margin-top: 24px;
    }
}

/* ===================================================
   MOBILE — touch fixes
=================================================== */

/* dvh: correct viewport height accounting for browser chrome */
.app {
    height: 100vh;
    height: 100dvh;
}

body {
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}

/* На тач-устройствах фоновые блобы вообще убираем:
   - на iOS canvas под `position:fixed` рендерится с артефактами при сдвиге
     visualViewport (фокус инпута → системный зум → светлые куски за пределами
     canvas);
   - даже если бы рисовался корректно — постоянная rAF-анимация съедает
     батарею телефона.
   В JS на этих же media-условиях rAF-цикл вообще не стартует. */
@media (hover: none) and (pointer: coarse) {
    /* !important — на блобовых темах видимостью gl-холста управляет JS
       (inline display:block), и без него правило бы не сработало. */
    #background-gl {
        display: none !important;
    }

    #background,
    #background-stars,
    #background-grain {
        display: none;
    }

    /* Виньетку возвращаем: на блобовых темах её обычно рисует шейдер, но здесь
       холст скрыт целиком — без этого правила на телефоне не осталось бы ни
       фона, ни затемнения по краям. */
    html[data-bg-gl] body::after {
        display: block;
    }

    /* iOS зумит инпут при focus, если у него font-size < 16px, и обратно НЕ
       откатывает, оставляя верстку «уехавшей» вбок. Поднимаем шрифт на инпутах
       до 16px только на тач-устройствах — UX-стилистика на десктопе сохранена. */
    .chat-input,
    .entry-code,
    .intro-input,
    #chatInput {
        font-size: 16px;
    }
}

/* Submit-стрелка intro: видна ВСЕГДА (с v0.9.16). До этого пряталась на
   десктопе media-query'ем `(hover:none)`, но мы упирались в две беды:
   (1) Samsung S21 в Samsung Internet с принудительным «desktop site»
   терял match и не показывал кнопку — юзер не мог войти; (2) на десктопе
   её явный «войти»-affordance тоже не лишний. SVG-стрелка под инпутом,
   без обводки. */
.intro-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.86rem;
    height: 2.86rem;
    margin: 0 auto;
    background: transparent;
    border: none;
    color: var(--fg-2);
    cursor: pointer;
    transition: color var(--t-fast), transform var(--t-fast);
}

.intro-submit-btn svg {
    width: 1.57rem;
    height: 1.57rem;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.intro-submit-btn:hover {
    color: var(--fg);
}

.intro-submit-btn:active {
    color: var(--fg);
    transform: translateX(2px);
}

@media (hover: none) and (pointer: coarse) {
    /* iOS auto-zooms inputs with font-size < 16px on focus */
    .intro-input,
    .entry-code {
        font-size: 16px;
    }

    .entry-code::placeholder {
        font-size: 13px;
    }

    /* Hide screencast button — not applicable on mobile */
    #screencastBtn {
        display: none;
    }

    /* Controls: 2-column grid without screencast */
    .panel-controls {
        grid-template-columns: 44px 44px;
    }

    /* panel-tail: allow wrapping to prevent horizontal overflow */
    .panel-tail {
        white-space: normal;
        text-align: center;
    }

    /* Touch targets: comfortable size */
    .control-btn,
    .leave-btn,
    .btn {
        min-height: 44px;
    }

    /* Убираем дорогой blur — на мобиле он тормозит и съедает батарею.
       Достаточно полупрозрачного фона, который задан в каждом из этих элементов. */
    .settings-scrim,
    .chat-drop-overlay,
    .chat-lightbox,
    .chat-lightbox.is-visible,
    .chat-panel-inner,
    .mic-blocked-modal,
    .sc-modal-backdrop {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ===================================================
   2K / 4K SCREENS — снесены в v0.10.0
   ===================================================
   Раньше тут были блоки @media (min-width: 2560px) и (min-width: 3840px)
   с точечными бампами шрифтов, аватаров, панели и т.п. С переездом
   корневого font-size на clamp() в base.css и переводом всех размеров на
   rem — эти блоки стали избыточны: элементы растут пропорционально
   корневому шрифту, и больше нет «whack-a-mole»-ситуации, когда одна
   ширина починена, а на другой что-то отвалилось. См. CONTEXT.md и
   tasks/todo.md (v0.10.0). */