/* mysite/chat/static/chat/css/adaptability/laptop.css */

/* =========================================
   LAPTOP
   1024px - 1439px
========================================= */

@media (min-width: 1024px) and (max-width: 1439px) {
    :root {
        --header-height: 52px;
        --input-height: 68px;

        --font-main: 16px;
        --font-small: 14px;

        --bubble-radius: 18px;
    }
    /* ===== 3. ГЛОБАЛЬНЫЙ КОНТЕЙНЕР ПРИЛОЖЕНИЯ ===== */
    /* Фон для внешней области (поля) */
    body {
        /* position: fixed;
        width: 100%; */
        font-size: 16px;
        margin: 0;
        background: var(--app-bg, #00000021);
    }

    .tg-app {
        max-width: 100%;
        margin: 0 auto;

        display: flex;
        flex-direction: column;

        height: 100dvh;
        min-height: 100dvh;

        background: var(--bg, #c9c9c9);

        overflow: hidden;

        position: relative;
    }


    /* HEADER / Верхний бар*/
    .chat-header {
        /* height: 46px; */
        height: var(--header-height);
        padding: 0 12px;
        
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    
    /* положение чата ниже header */
    .tg-chat {
        flex: 1;
        overflow-y: auto;

        min-height: 0;

        -webkit-overflow-scrolling: touch;

        padding-top: 0;
        padding-bottom: var(--input-height);
    }

    /* Слово Меню на нопке меню внизу-слева / none/inline */
    .menu-text {
        display: inline; /* none / inline */
    }

    /* Нижний блок объектов */  
    .chat-input-bar {
        min-height: 56px;
        
        padding-left: 14px;
        padding-right: 14px;
        
        position: sticky;
        bottom: 0;
    }

    .chat-input-panel {
        gap: 4px;
        padding: 4px;
    }

    /* Поле ввода текста */
    #message-input {
        min-height: 42px;
        font-size: var(--font-main);
        
        /* Отступы от текста */
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        
        /* Радиус поля ввода текста */
        border-radius: 10px;
    }

    /* Внешние отступы от поля ввода текста */
    .input-wrapper {
        margin-left: 8px;
        margin-right: 8px;
    }

    .chat-input-bar button {
        min-width: 40px;
        min-height: 40px;

        font-size: 18px;

        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }

    #messages {
        scroll-behavior: smooth;
    }

    .msg-bubble {
        max-width: 88%;
        padding: 8px 10px;
        /* font-size: 14px; */
        font-size: var(--font-main);
        /* border-radius: 14px; */
        border-radius: var(--bubble-radius);
    }

    .msg-btn {
        font-size: 13px;
        padding: 8px;
    }

    .msg-btn-grade {
        font-size: 14px;
    }

    .msg-reaction-button {
        width: 22px;
        height: 20px;
    }

    .msg-reaction-popup {
        height: 110px;
    }

    .msg-reaction-popup span {
        font-size: 16px;
    }

    .emoji-picker {
        left: 4px;
        right: 4px;
        margin: auto;
        width: auto;
        max-width: calc(100vw - 8px);
        bottom: 72px;
    }

    .scroll-down {
        right: 12px;
        bottom: 74px;
        padding: 6px 10px;
        font-size: 12px;
    }
 
}