/* ==========================================================================
   Модальное окно чата — общий стиль для страниц с перепиской
   (страница профиля и страница сообщений).
   Подключается в layouts/app.blade.php, работает только на телефоне.
   ========================================================================== */

@media (max-width: 1000px) {
    /* Окно на весь экран, без отступов и скруглений */
    body.nav-drawer-page #chat-modal {
        align-items: stretch;
        justify-content: stretch;
    }

    body.nav-drawer-page #chat-modal > div {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    /* Шапка чата: аватар, ник и кнопки помещаются в одну строку */
    body.nav-drawer-page #chat-modal-header {
        padding: 10px 12px !important;
    }

    body.nav-drawer-page #chat-modal-avatar {
        width: 36px !important;
        height: 36px !important;
    }

    body.nav-drawer-page #chat-modal-nick {
        font-size: 14px !important;
    }

    /* Настройки чата */
    body.nav-drawer-page #chat-settings-panel {
        padding: 12px !important;
    }

    /* Переписка */
    body.nav-drawer-page #chat-modal-body {
        padding: 12px !important;
        gap: 6px !important;
    }

    /* Пузырь сообщения не должен занимать всю ширину */
    body.nav-drawer-page #chat-modal-body .msg-bubble {
        max-width: 85% !important;
    }

    /* Поле ввода прижато к низу экрана */
    body.nav-drawer-page #chat-modal-input-area {
        padding: 10px 12px !important;
    }

    /* Крупный шрифт в поле ввода, иначе телефон увеличивает страницу */
    body.nav-drawer-page #chat-modal-input {
        font-size: 16px !important;
        padding: 10px 12px !important;
    }

    body.nav-drawer-page #chat-modal-send-btn {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }

    /* Превью прикреплённых картинок */
    body.nav-drawer-page #chat-modal-image-preview img {
        max-width: 28vw !important;
        max-height: 28vw !important;
    }
}