/* Мобильная адаптация для мессенджера */

/* Мобильные устройства ИЛИ принудительный мобильный режим (поддомен m.) */
@media (max-width: 768px), (min-width: 0px) {
    .force-mobile .app-container,
    body.force-mobile .app-container {
        display: flex !important;
        grid-template-columns: none !important;
        position: relative;
        overflow: hidden;
    }

    .force-mobile .sidebar-left,
    .force-mobile .chat-main,
    .force-mobile .sidebar-right {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100vh !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

    .force-mobile .sidebar-left {
        transform: translateX(0);
        z-index: 3;
        border-right: none;
    }

    .force-mobile .sidebar-left.mobile-hidden {
        transform: translateX(-100%);
        z-index: 1;
    }

    .force-mobile .chat-main {
        transform: translateX(100%);
        z-index: 2;
        display: flex !important;
        flex-direction: column !important;
    }

    .force-mobile .chat-main.mobile-open {
        transform: translateX(0);
        z-index: 4;
    }

    .force-mobile .sidebar-right {
        transform: translateX(100%);
        z-index: 2;
        border-left: none;
    }

    .force-mobile .sidebar-right.mobile-open {
        transform: translateX(0);
        z-index: 5;
    }

    .force-mobile .mobile-back-button {
        display: flex !important;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        color: #e0e0e0;
        border-radius: 8px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        flex-shrink: 0;
        transition: all 0.2s;
    }

    .force-mobile .mobile-back-button:active {
        background: #2a2a3e;
        transform: scale(0.95);
    }

    .force-mobile .mobile-back-button svg {
        width: 24px;
        height: 24px;
    }

    .force-mobile .mobile-close-info {
        display: flex !important;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        color: #e0e0e0;
        border-radius: 8px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        transition: all 0.2s;
    }

    .force-mobile .mobile-close-info:active {
        background: #2a2a3e;
        transform: scale(0.95);
    }

    .force-mobile .mobile-close-info svg {
        width: 24px;
        height: 24px;
    }
}

/* Оригинальные правила для реальных мобильных устройств */
@media (max-width: 768px) {
    /* Убираем grid, делаем flex контейнер */
    .app-container {
        display: flex !important;
        grid-template-columns: none !important;
        position: relative;
        overflow: hidden;
    }

    /* Все три панели на полную ширину, одна поверх другой */
    .sidebar-left,
    .chat-main,
    .sidebar-right {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100vh !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

    /* Левая панель (список чатов) - показана по умолчанию */
    .sidebar-left {
        transform: translateX(0);
        z-index: 3;
        border-right: none;
    }

    .sidebar-left.mobile-hidden {
        transform: translateX(-100%);
        z-index: 1;
    }

    /* Центральная панель (чат) - скрыта справа */
    .chat-main {
        transform: translateX(100%);
        z-index: 2;
        display: flex !important; /* Всегда flex для правильной структуры */
        flex-direction: column !important;
    }

    .chat-main.mobile-open {
        transform: translateX(0);
        z-index: 4;
    }

    /* Правая панель (инфо) - скрыта справа */
    .sidebar-right {
        transform: translateX(100%);
        z-index: 2;
        border-left: none;
    }

    .sidebar-right.mobile-open {
        transform: translateX(0);
        z-index: 5;
    }

    /* Кнопка "Назад" в шапке чата */
    .mobile-back-button {
        display: flex !important;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        color: #e0e0e0;
        border-radius: 8px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        flex-shrink: 0;
        transition: all 0.2s;
    }

    .mobile-back-button:active {
        background: #2a2a3e;
        transform: scale(0.95);
    }

    .mobile-back-button svg {
        width: 24px;
        height: 24px;
    }

    /* Кнопка закрытия инфо панели */
    .mobile-close-info {
        display: flex !important;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        color: #e0e0e0;
        border-radius: 8px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        transition: all 0.2s;
    }

    .mobile-close-info:active {
        background: #2a2a3e;
        transform: scale(0.95);
    }

    .mobile-close-info svg {
        width: 24px;
        height: 24px;
    }

    /* Заголовки и отступы */
    .sidebar-header {
        padding: 12px 16px !important;
        min-height: 60px;
    }

    .chat-header {
        padding: 12px 16px !important;
        min-height: 60px;
    }

    /* Выравнивание заголовка чата влево на мобильных */
    .chat-header-info {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .chat-title,
    .chat-subtitle {
        text-align: left !important;
    }

    .messages-container {
        padding: 12px !important;
    }

    .message-input-container {
        padding: 12px !important;
        gap: 8px !important;
    }

    /* Аватары */
    .avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    .message-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    .avatar-xl {
        width: 72px !important;
        height: 72px !important;
        font-size: 28px !important;
    }

    /* Чат айтемы */
    .chat-item {
        padding: 12px !important;
    }

    .chat-item-name {
        font-size: 15px !important;
    }

    .chat-item-message {
        font-size: 14px !important;
    }

    /* Сообщения */
    .message-content {
        max-width: 75% !important;
    }

    .message-bubble {
        padding: 10px 14px !important;
        font-size: 15px !important;
    }

    /* Инпут сообщений */
    .input-wrapper {
        padding: 10px 14px !important;
    }

    .message-input {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    /* Кнопки */
    .send-button,
    .voice-button {
        width: 42px !important;
        height: 42px !important;
    }

    .attachment-button {
        width: 42px !important;
        height: 42px !important;
    }

    .icon-button {
        width: 40px !important;
        height: 40px !important;
    }

    /* FAB */
    .fab {
        bottom: 20px !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
        z-index: 10 !important;
    }

    /* Поиск */
    .search-container {
        padding: 12px 16px !important;
    }

    .search-input {
        font-size: 15px !important;
        padding: 10px 16px 10px 38px !important;
    }

    /* Табы */
    .nav-tabs {
        padding: 0 12px !important;
        margin-bottom: 12px !important;
    }

    .nav-tab {
        padding: 10px !important;
        font-size: 15px !important;
    }

    /* Модальные окна на весь экран */
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 16px !important;
    }

    .modal-header {
        margin-bottom: 16px !important;
    }

    .modal-title {
        font-size: 20px !important;
    }

    /* Формы */
    .form-group {
        margin-bottom: 14px !important;
    }

    .form-input {
        padding: 12px 14px !important;
        font-size: 15px !important;
    }

    .form-button {
        padding: 14px !important;
        font-size: 16px !important;
    }

    /* Правая панель инфо */
    .sidebar-right {
        padding: 16px !important;
    }

    .profile-header {
        margin-bottom: 20px !important;
    }

    .profile-name {
        font-size: 20px !important;
    }

    .profile-status {
        font-size: 15px !important;
    }

    .profile-action,
    .setting-item {
        padding: 14px !important;
        font-size: 15px !important;
    }

    /* Звонки */
    #call-ui {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    #incoming-call-modal .modal-content {
        padding: 24px !important;
    }

    /* Медиа превью */
    .media-preview,
    .document-preview {
        max-width: 100% !important;
    }

    .media-preview img,
    .media-preview video {
        max-width: 100% !important;
        max-height: 50vh !important;
    }

    /* Контекстное меню */
    .context-menu {
        width: 90% !important;
        max-width: 320px !important;
    }

    /* Список участников */
    .member-item {
        padding: 12px !important;
    }

    /* Прикрепленные сообщения */
    .pinned-message {
        padding: 10px !important;
        font-size: 14px !important;
    }

    /* Эмодзи пикер */
    .emoji-picker {
        width: 100% !important;
        max-width: 100% !important;
        bottom: 60px !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Тач-френдли области нажатия */
    .chat-item,
    .profile-action,
    .setting-item,
    .member-item {
        min-height: 48px;
    }

    button,
    .icon-button,
    .nav-tab {
        min-height: 44px;
        min-width: 44px;
    }

    /* Убираем hover эффекты на тач устройствах */
    .chat-item:hover,
    .icon-button:hover,
    .profile-action:hover,
    .setting-item:hover {
        background: inherit;
    }

    /* Вместо hover используем active */
    .chat-item:active {
        background: #2a2a3e !important;
    }

    .icon-button:active {
        background: #2a2a3e !important;
        transform: scale(0.95);
    }

    /* Скрываем скроллбары но оставляем прокрутку */
    .chat-list,
    .messages-container,
    .sidebar-right {
        -webkit-overflow-scrolling: touch;
    }

    .chat-list::-webkit-scrollbar,
    .messages-container::-webkit-scrollbar,
    .sidebar-right::-webkit-scrollbar {
        display: none;
    }

    /* Фикс для safe area на iPhone */
    @supports (padding: max(0px)) {
        .sidebar-header,
        .chat-header {
            padding-top: max(12px, env(safe-area-inset-top)) !important;
        }

        .message-input-container {
            padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        }

        .fab {
            bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px)) !important;
        }
    }

    /* Ориентация landscape */
    @media (orientation: landscape) and (max-height: 500px) {
        .messages-container {
            padding: 8px !important;
        }

        .message {
            margin-bottom: 8px !important;
        }

        .message-bubble {
            padding: 8px 12px !important;
        }
    }
}

/* Планшеты */
@media (min-width: 769px) and (max-width: 1024px) {
    .app-container {
        grid-template-columns: 280px 1fr !important;
    }

    .sidebar-right {
        display: none !important;
    }

    .sidebar-right.mobile-open {
        display: flex !important;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 320px;
        z-index: 1000;
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
    }
}

/* Скрываем мобильные кнопки на десктопе */
@media (min-width: 1025px) {
    .mobile-back-button,
    .mobile-info-button,
    .mobile-close-info {
        display: none !important;
    }
}