/* Mobile-specific layout for Intercom clone */
/* All rules are wrapped in media queries where appropriate to avoid affecting desktop */

/* Back button hidden by default on all viewports */
.mobile-back-btn {
    display: none;
    border: none;
    background: transparent;
    color: var(--text-main);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 6px;
    padding: 0;
}

.mobile-back-btn svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    /* Root layout: stack vertically instead of three columns */
    body {
        flex-direction: column;
        height: 100vh;
        /* запас под нижнюю док‑панель серверов, чтобы она не перекрывала контент */
        padding-bottom: 56px;
    }

    /* Top bar with servers становится нижней док‑панелью на реальных телефонах */
    .server-list {
        flex-direction: row;
        width: 100%;
        height: 56px;
        padding: 8px;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.9);
        overflow-x: auto;
        overflow-y: hidden;
        /* фиксируем панель внизу экрана, чтобы она не "уезжала" за пределы view на реальных устройствах */
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2100;
    }

    .server-separator {
        height: 32px;
        width: 2px;
        margin: 0 8px;
    }

    .channel-list,
    .main-content {
        width: 100%;
        height: calc(100vh - 56px);
    }

    /* Default mobile state: show list (friends / DM) and hide chat */
    body.mobile-list-open .channel-list {
        display: flex;
    }

    body.mobile-list-open .main-content {
        display: none;
    }

    /* Chat state: show only chat (friendsView/chatView) */
    body.mobile-chat-open .channel-list {
        display: none;
    }

    body.mobile-chat-open .main-content {
        display: flex;
    }

    /* Ensure main containers stretch full height */
    .friends-main-view,
    .chat-view {
        height: 100%;
    }

    .friends-content-wrapper,
    .messages {
        height: calc(100% - 52px);
    }

    /* Chat header: show back button when chat is visible */
    .chat-header {
        padding: 0 10px;
        gap: 8px;
    }

    body.mobile-chat-open .mobile-back-btn {
        display: inline-flex;
    }

    .channel-info span {
        font-size: 15px;
    }

    /* Make input area stick to bottom and full-width */
    .message-input-container {
        padding: 10px;
    }

    .message-input-wrapper {
        border-radius: 18px;
    }

    /* Slightly reduce paddings for friend items on small screens */
    .friend-item {
        padding: 10px;
    }

    .friend-actions {
        gap: 4px;
    }

    /* === Глобальный порядок блоков на мобильной версии ===
       1) user-panel (внутри channel-list) — самый верх
       2) main-content (друзья/чат) — середина, растягивается
       3) server-list — самый низ (док-панель серверов)
    */
    body > .channel-list {
        order: 0;
    }

    body > .main-content {
        order: 1;
        flex: 1;
    }

    body > .server-list {
        order: 2;
    }

    /* Внутри левой колонки: user-panel сверху, ниже шапка сервера, потом списки */
    .channel-list {
        display: flex;
        flex-direction: column;
    }

    .user-panel {
        order: 0;
        border-top: none;
        border-bottom: 1px solid rgba(30, 41, 59, 1);
    }

    .server-header {
        order: 1;
    }

    .dm-list-view,
    .channels-view {
        order: 2;
        flex: 1;
    }

    /* Облегчённый загрузочный экран на мобильных:
       - упрощаем фон
       - снижаем тени
       - убираем лишний стеклянный слой body::before */
    .app-loading-screen {
        animation: appLoadingMobileAutoHide 0.3s ease-out 2.5s forwards;
        background: #020617;
    }

    .app-loading-inner {
        max-width: 340px;
        padding: 20px 18px 18px;
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.85);
        backdrop-filter: none;
    }

    body::before {
        display: none;
    }

    @keyframes appLoadingMobileAutoHide {
        to {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
    }

    /* Дополнительный мобильный фолбек:
       даже если класс app-loading останется на body, не скрываем основной интерфейс.
       На десктопе поведение остаётся прежним, это правило действует только в @media(max-width). */
    body.app-loading .server-list,
    body.app-loading .channel-list,
    body.app-loading .main-content {
        filter: none;
        opacity: 1;
        pointer-events: auto;
    }
}