/* ==========================================================
   ios_layout_fix.css — подключается ПОСЛЕДНИМ.

   Принцип:
   - без клавиатуры: приложение растянуто через inset:0,
     никаких высот в пикселях;
   - с клавиатурой (только iOS): top/height из visualViewport
     (класс html.min-keyboard-open ставит viewport_fix.js);
   - repair-режим для бага iOS PWA (класс min-ios-bottom-repair
     ставит ios_bottom_repair.js).
   ========================================================== */

:root{
    --sat-on: env(safe-area-inset-top, 0px);
    --sab-on: env(safe-area-inset-bottom, 0px);   /* ← был 0px: поле ввода залезало под home-индикатор */

    --keyboard-top: 0px;
    --keyboard-height: 100%;
}

/* ==================== МОБИЛЬНАЯ ВЕРСИЯ ==================== */
@media (max-width: 768px){

    html, body{
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    body{
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }

    /* ОБЫЧНОЕ СОСТОЯНИЕ: height отсутствует, элемент растянут
       через top:0 + bottom:0 — смена 100dvh после клавиатуры
       не оставляет белую полосу. */
    #app-box, #auth-box{
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    /* ТОЛЬКО ПРИ ОТКРЫТОЙ КЛАВИАТУРЕ (iOS) */
    html.min-keyboard-open #app-box,
    html.min-keyboard-open #auth-box{
        top: var(--keyboard-top, 0px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--keyboard-height) !important;
        min-height: 0 !important;
        max-height: var(--keyboard-height) !important;
    }

    #app-box{ flex-direction: row !important; }

    #app-sidebar, #app-chat-area{
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    /* ---------- список чатов ---------- */
    #app-sidebar{ display: flex; flex-direction: column; }

    .sidebar-header, .search-box{ flex: 0 0 auto !important; }

    #users-list-ui{
        flex: 1 1 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding-bottom: 4px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-padding-bottom: 4px;
    }
    #users-list-ui .user-item:last-child{ margin-bottom: 4px !important; }

    /* ---------- чат ---------- */
    #app-chat-area{ display: none; flex-direction: column; }
    #app-box.chat-open #app-sidebar{ display: none; }
    #app-box.chat-open #app-chat-area{ display: flex; }

    .chat-header{ flex: 0 0 auto !important; }

    #messages-box{
        flex: 1 1 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ---------- строка ввода ---------- */
    #input-panel.input-area{
        flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; 
        padding-top: 8px !important; padding-right: 20px !important; padding-bottom: calc(6px + var(--sab-on)) !important; /* ← safe-area вернули */ padding-left: 20px 
        !important; border-bottom: 0 !important;
    }

    /* при открытой клавиатуре home-индикатор закрыт ею — отступ не нужен */
    html.min-keyboard-open #input-panel.input-area{
        margin-bottom: 0 !important;
        padding-bottom: 4px !important;
    }

    #input-panel > div:last-child{
        flex: 0 0 auto !important;
        min-height: 40px !important;
        margin: 0 !important;
    }
    #msg-input{ margin: 0 !important; }
    #attach-clip-btn, #send-msg-btn{ flex-shrink: 0 !important; }

    #scroll-down-fab{ bottom: calc(70px + var(--sab-on)) !important; }
}

/* ==================== ДЕСКТОП ==================== */
@media (min-width: 769px){
    #app-box.app-container{
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
    }
}

/* ==================== iOS PWA REPAIR ==================== */
:root{
    --ios-physical-height: 100%;
    --ios-bottom-deficit: 0px;
}

@media (max-width: 768px){

    /* Ремонт активен только без клавиатуры. Сам класс при открытии
       клавиатуры НЕ удаляется — важно для отсутствия моргания. */
    html.min-ios-bottom-repair:not(.min-keyboard-open),
    html.min-ios-bottom-repair:not(.min-keyboard-open) body{
        height: var(--ios-physical-height) !important;
        min-height: var(--ios-physical-height) !important;
        max-height: var(--ios-physical-height) !important;
    }

    html.min-ios-bottom-repair:not(.min-keyboard-open) body{
        position: relative !important;
        overflow: hidden !important;
    }

    html.min-ios-bottom-repair:not(.min-keyboard-open) #app-box,
    html.min-ios-bottom-repair:not(.min-keyboard-open) #auth-box{
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--ios-physical-height) !important;
        min-height: 0 !important;
        max-height: var(--ios-physical-height) !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}

@media (max-width: 768px) {
    #send-msg-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }
}

/* ==========================================================
   FLOATING INPUT (Telegram-style): панель ввода и скрепка
   плавают поверх ленты сообщений; лента прокручивается под ними.
   Только мобильная верстка. Десктоп не трогаем.
   ========================================================== */

@media (max-width: 768px){

    /* лента на всю высоту чата, под плавающей панелью */
    #messages-box{
        /* запас снизу, чтобы последнее сообщение не пряталось
           под плавающей панелью ввода отступ */
        padding-bottom: calc(58px + var(--sab-on)) !important;
        scroll-padding-bottom: calc(38px + var(--sab-on)) !important;
    }

    /* панель ввода — поверх ленты, прозрачная */
    #input-panel.input-area{
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(6px + var(--sab-on)) !important;
        z-index: 800 !important;

        background: transparent !important;
        border-top: none !important;

        padding: 0 12px !important;
        margin: 0 !important;
        gap: 6px;
    }

    /* при открытой клавиатуре — панель вплотную к ней */
    html.min-keyboard-open #input-panel.input-area{
        bottom: 6px !important;
        padding-bottom: 0 !important;
    }

    /* капсула поля ввода */
    #input-panel .input-wrapper{
        background: #ffffff !important;
        border-radius: 24px !important;
        border: none !important;
        box-shadow: 0 2px 10px rgba(0,0,0,.14) !important;
        padding: 4px 14px !important;
    }
    body.dark #input-panel .input-wrapper{
        background: #1f2733 !important;
        box-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
    }

    /* скрепка — круглая кнопка слева */
    #attach-clip-btn{
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        color: #707579 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,.14) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        padding: 0 !important;
    }
    body.dark #attach-clip-btn{
        background: #1f2733 !important;
        color: #9fb0c0 !important;
        box-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
    }

    /* кнопка AI (она уже градиентная — только размер и позиция) */
    #ai-fix-btn{
        width: 44px !important;
        height: 44px !important;
    }

    /* кнопка отправки — круг с мягкой тенью */
    #send-msg-btn{
        width: 44px !important;
        height: 44px !important;
        box-shadow: 0 2px 10px rgba(51,144,236,.4) !important;
    }

    /* прогресс загрузки / панель ответа / запись голоса —
       парят над лентой теми же «карточками» */
    #upload-progress-container,
    #reply-bar,
    #voice-rec-bar{
        box-shadow: 0 2px 10px rgba(0,0,0,.10);
    }
    body.dark #upload-progress-container,
    body.dark #reply-bar,
    body.dark #voice-rec-bar{
        box-shadow: 0 2px 12px rgba(0,0,0,.4);
    }

    /* кнопка «вниз» — выше плавающей панели */
    #scroll-down-fab{
        bottom: calc(100px + var(--sab-on)) !important;
    }
}