/* ==================== MOBILE UNIVERSAL FIX - PRODUCTION READY V2 ==================== */
/* Исправлено: Safari панель внизу + scroll работает везде */

/* ========== SAFE AREA VARIABLES ========== */

:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

/* ========== BASE MOBILE LAYOUT ========== */

@media (max-width: 768px) {
    
    /* ИСПРАВЛЕНО: Убираем position: fixed с body */
    html {
        height: 100%;
        overflow: hidden;
    }
    
    body {
        height: 100%;
        overflow: hidden;
        /* УБРАЛИ: position: fixed */
    }
    
    /* Main app - Dynamic Viewport Height */
    .main-app {
        height: 100dvh;
        height: calc(var(--vh, 1vh) * 100); /* Fallback */
        display: flex;
        overflow: hidden;
        position: relative;
    }
    
    /* Sidebar */
    .sidebar {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
    }
    
    /* Sidebar content scroll */
    .sidebar-content {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }
    
    /* Chat Area - занимает всё пространство */
    #chatArea,
    .chat-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        height: 100%;
    }
    
    /* Chat Container - flexbox column */
    #chatContainer,
    .chat-container {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        height: 100%;
    }
}

/* ========== CHAT HEADER ========== */

@media (max-width: 768px) {
    .chat-header {
        /* Не растягивается */
        flex-shrink: 0;
        flex-grow: 0;
        
        /* Safe Area для Dynamic Island */
        padding-top: max(12px, var(--sat));
        padding-bottom: 12px;
        padding-left: max(12px, var(--sal));
        padding-right: max(12px, var(--sar));
        
        /* Стили */
        background: var(--bg-panel);
        border-bottom: 1px solid var(--divider);
        
        /* Z-index выше messages */
        z-index: 100;
        position: relative;
    }
}

/* ========== MESSAGES CONTAINER ========== */

@media (max-width: 768px) {
    .messages-container {
        /* КРИТИЧНО: Занимает всё доступное место */
        flex: 1 1 auto;
        min-height: 0; /* Для flexbox scroll */
        
        /* ИСПРАВЛЕНО: Явно указываем scroll */
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        
        /* КРИТИЧНО для iOS Safari */
        position: relative;
        
        /* Padding для контента */
        padding-left: max(12px, var(--sal));
        padding-right: max(12px, var(--sar));
        padding-top: 12px;
        padding-bottom: 100px; /* УВЕЛИЧЕНО место для message-input */
        
        /* Скрываем scrollbar но оставляем scroll */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .messages-container::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Messages List */
    .messages-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: min-content;
        
        /* КРИТИЧНО: Разрешаем расти */
        flex: 0 0 auto;
    }
}

/* ========== MESSAGE INPUT - STICKY ========== */

@media (max-width: 768px) {
    .message-input {
        /* КРИТИЧНО: position: sticky работает на iOS Safari! */
        position: sticky;
        bottom: 0;
        
        /* Не растягивается */
        flex-shrink: 0;
        flex-grow: 0;
        
        /* Стили */
        background: var(--bg-panel);
        border-top: 1px solid var(--divider);
        
        /* ИСПРАВЛЕНО: Увеличен padding-bottom для Safari панели */
        padding-top: 8px;
        padding-left: max(8px, var(--sal));
        padding-right: max(8px, var(--sar));
        padding-bottom: max(20px, calc(var(--sab) + 12px));
        
        /* Z-index */
        z-index: 90;
        
        /* Flexbox для элементов внутри */
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 8px;
        
        /* Hardware acceleration */
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* Input wrapper - растягивается */
    .message-input .input-wrapper {
        flex: 1 1 auto;
        min-width: 0; /* КРИТИЧНО для flexbox */
        display: flex;
    }
    
    /* Textarea */
    .message-input textarea,
    .message-input #messageTextarea {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        
        /* Размеры */
        min-height: 40px;
        max-height: 120px;
        
        /* КРИТИЧНО: 16px предотвращает zoom на iOS */
        font-size: 16px !important;
        line-height: 1.4;
        
        /* Стили */
        border-radius: 20px;
        padding: 10px 16px;
        border: 1px solid var(--border-light);
        background: var(--bg-primary);
        
        /* Scroll */
        resize: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Кнопки - фиксированный размер */
    .message-input button,
    .message-input .icon-btn {
        flex-shrink: 0;
        flex-grow: 0;
        min-width: 40px;
        min-height: 40px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding: 8px;
    }
    
    .message-input .btn-send {
        background: var(--primary);
        color: white;
    }
}

/* ========== TYPING INDICATOR ========== */

@media (max-width: 768px) {
    .typing-indicator {
        position: absolute;
        bottom: calc(60px + var(--sab) + 20px);
        left: 12px;
        z-index: 85;
        
        background: var(--bg-secondary);
        padding: 8px 16px;
        border-radius: 16px;
        
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

/* ========== FILE PREVIEW ========== */

@media (max-width: 768px) {
    .file-preview {
        position: absolute;
        bottom: calc(60px + var(--sab) + 20px);
        left: 0;
        right: 0;
        z-index: 85;
        
        background: var(--bg-panel);
        border-top: 1px solid var(--divider);
        max-height: 200px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ========== ATTACH MENU ========== */

@media (max-width: 768px) {
    .attach-menu {
        position: absolute;
        bottom: calc(60px + var(--sab) + 20px);
        left: 12px;
        z-index: 85;
        
        background: var(--bg-panel);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        padding: 8px;
    }
}

/* ========== SIDEBAR SCROLL FIX ========== */

@media (max-width: 768px) {
    /* Sidebar content должен скроллиться */
    .sidebar-content,
    #chatsTab,
    #contactsTab,
    #tasksTab {
        flex: 1 1 auto;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0;
    }
    
    /* Chats list */
    .chats-list,
    .contacts-list {
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Tasks view */
    #tasksViewContainer {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ========== LANDSCAPE MODE ========== */

@media (max-width: 768px) and (orientation: landscape) {
    .messages-container {
        padding-bottom: 80px;
    }
    
    .message-input {
        padding-top: 6px;
        padding-bottom: max(16px, calc(var(--sab) + 8px));
    }
    
    .message-input textarea {
        min-height: 36px;
    }
}

/* ========== IOS SAFARI SPECIFIC ========== */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* iOS Safari - sticky работает нативно */
        .message-input {
            position: -webkit-sticky;
            position: sticky;
            bottom: 0;
        }
        
        /* Предотвращаем bounce scroll */
        .messages-container {
            overscroll-behavior-y: contain;
        }
        
        /* Безопасная зона для iPhone с вырезом */
        .chat-header {
            padding-top: max(20px, env(safe-area-inset-top, 20px));
        }
        
        .message-input {
            padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
        }
    }
}

/* ========== ANDROID SPECIFIC ========== */

@supports not (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* Android Chrome - sticky также работает */
        .message-input {
            position: sticky;
            bottom: 0;
        }
    }
}

/* ========== WELCOME SCREEN ========== */

@media (max-width: 768px) {
    #welcomeScreen,
    .welcome-screen {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ========== ГАРАНТИИ (last resort) ========== */

@media (max-width: 768px) {
    /* Если что-то пошло не так - минимальные отступы */
    .chat-header {
        min-height: 60px;
    }
    
    .message-input {
        min-height: 60px;
    }
    
    /* КРИТИЧНО: Input всегда виден */
    .message-input {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* КРИТИЧНО: Messages всегда scrollable */
    .messages-container {
        overflow-y: scroll !important;
    }
}

/* ========== DEBUG MODE (раскомментируйте для отладки) ========== */

/*
@media (max-width: 768px) {
    .chat-header {
        outline: 2px solid red;
        background: rgba(255, 0, 0, 0.1) !important;
    }
    
    .messages-container {
        outline: 2px solid blue;
        background: rgba(0, 0, 255, 0.05) !important;
    }
    
    .message-input {
        outline: 2px solid green;
        background: rgba(0, 255, 0, 0.1) !important;
    }
    
    .message-input textarea {
        outline: 2px dashed orange;
    }
}
*/