/* ============================================================
   МОБИЛЬНЫЙ UX (mobile-ui.js): перетаскиваемый/растягиваемый чат
   и вспомогательные стили авто-вписывания меню/лобби.
   ============================================================ */

/* Ручки чата по умолчанию скрыты (видны только в мобильном оверлее) */
.chat-drag-handle,
.chat-resize-handle,
.chat-mobile-close { display: none; }

/* Кнопка закрытия чата — поверх ручки перетаскивания, в правом верхнем углу */
#chat-panel.mobile-shown .chat-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.65;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    z-index: 6;
    touch-action: manipulation;
}
#chat-panel.mobile-shown .chat-mobile-close:active { opacity: 1; }

#chat-panel.mobile-shown .chat-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    flex-shrink: 0;
    cursor: move;
    touch-action: none;
    color: inherit;
    opacity: 0.5;
    font-size: 13px;
    letter-spacing: 3px;
    user-select: none;
    -webkit-user-select: none;
}
#chat-panel.mobile-shown .chat-drag-handle:active { opacity: 0.8; }

#chat-panel.mobile-shown .chat-resize-handle {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    padding: 2px 4px;
    cursor: nwse-resize;
    touch-action: none;
    color: inherit;
    opacity: 0.55;
    font-size: 18px;
    line-height: 1;
    z-index: 5;
    user-select: none;
    -webkit-user-select: none;
}
#chat-panel.mobile-shown .chat-resize-handle:active { opacity: 0.9; }

/* Чтобы абсолютная ручка ресайза позиционировалась относительно панели */
#chat-panel { position: fixed; }

/* ============================================================
   ИГРОВЫЕ ОВЕРЛЕИ НА ТЕЛЕФОНЕ: плашки «последние слова» и «история
   голосований», кнопка «жесты» и её меню на десктопных размерах не
   влезают в маленький экран — ужимаем масштабом (zoom уже используется
   в mobile-ui.js для меню/лобби и корректно масштабирует и хит-тест).
   ============================================================ */
@media (pointer: coarse) and (max-width: 920px) {
    #last-words-container { zoom: 0.7; }
    #voting-history { zoom: 0.75; }
    /* bottom не трогаем: zoom масштабирует и координаты, родные 86px
       при 0.75 визуально дают ~65px — аккурат над уменьшенной кнопкой */
    #gesture-panel {
        zoom: 0.75;
        max-height: min(480px, 70dvh);
    }
    #gesture-btn {
        width: 44px;
        height: 44px;
        font-size: 22px;
        bottom: 14px;
        right: 14px;
    }

    /* ------------------------------------------------------------
       Профильные окна и всё, что открывается из них: на телефоне
       не влезают в экран целиком — ужимаем масштабом (zoom, а не
       transform: scale() — zoom корректно масштабирует и хит-тест).
       ------------------------------------------------------------ */
    #profile-modal .modal-content,
    #model-profile-modal .modal-content,
    #profile-editor-modal .modal-content,
    #inventory-modal .modal-content,
    #avatar-editor-modal .modal-content,
    #model-appearance-editor-modal .modal-content,
    #bot-memory-modal .modal-content,
    #balance-modal .modal-content {
        zoom: 0.75;
        max-height: 94dvh;
        overflow-y: auto;
    }

    /* Индикаторы поверх игры: счётчик онлайна, таймер фазы,
       плашка «кто сейчас говорит» — ужимаем, чтобы не съедали экран */
    #online-counter { zoom: 0.75; }
    #phase-timer { zoom: 0.8; }
    #speaker-status { zoom: 0.8; }
}