/* =====================================================================
   MAXLINE — мобильный CSS (≤ 768px)
   ===================================================================== */

@media (max-width: 768px) {

    /* Header — компактнее */
    .site-header {
        padding: 0 12px;
        gap: 8px;
    }
    .site-header .logo { font-size: 16px; letter-spacing: 0; }
    .header-search { max-width: none; }
    .header-search input { font-size: 13px; padding: 6px 10px; }
    .header-search button { padding: 0 10px; }
    .header-actions { gap: 6px; }
    .header-icon { font-size: 16px; padding: 4px; }
    .user-name { display: none; }
    .btn-small { padding: 5px 10px; font-size: 12px; }

    /* Layout — одна колонка */
    .layout-3col {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 14px;
    }
    .col-left, .col-right { display: none; }

    /* Сетка профиля — вертикально */
    .profile-head { flex-direction: column; align-items: center; text-align: center; padding: 16px; }
    .profile-info { text-align: center; }
    .profile-actions { justify-content: center; }

    /* Сообщения — диалоги сверху, переписка снизу */
    .messages-layout {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .dialogs-list { max-height: 240px; }
    .dialog-content { min-height: 400px; max-height: none; }

    /* Пост */
    .post-full { padding: 16px; }
    .post-full-title { font-size: 20px; }
    .post-full-head { flex-direction: column; align-items: flex-start; gap: 6px; }

    /* Комментарии — уменьшаем отступ вложенности */
    .comment-children { margin-left: 12px; padding-left: 8px; }

    /* Модалки — почти на весь экран */
    .modal { max-width: none; margin: 0 12px; padding: 16px; }

    /* Toast — на мобиле оставляем inline, но уменьшаем */
    .toast { font-size: 12px; }

    /* Уведомления — на всю ширину */
    .notif-dropdown {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        width: auto;
        max-height: 60vh;
        border-radius: 0;
    }

    /* Меню пользователя — на всю ширину */
    .user-menu-dropdown {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        border-radius: 0;
    }

    /* Формы */
    .auth-block, .auth-form { padding: 18px; }
    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; }

    /* Табы ЛК — скролл */
    .account-tabs { margin-left: -12px; margin-right: -12px; padding-left: 12px; }

    /* Профиль аватара */
    .avatar-big { width: 72px; height: 72px; font-size: 28px; }

    /* Реакции — компактнее */
    .reaction-btn { padding: 3px 6px; font-size: 12px; }
    .reaction-btn svg { width: 14px; height: 14px; }

    /* Редактор */
    .editor-textarea { min-height: 260px; }

    /* Пагинация — компактнее */
    .page-link, .page-current { padding: 5px 10px; font-size: 13px; }
}

/* Очень узкие экраны (≤ 380px) */
@media (max-width: 380px) {
    .site-header .logo { font-size: 14px; }
    .header-search input { padding: 5px 8px; font-size: 12px; }
    .btn-small { padding: 4px 8px; font-size: 11px; }
    .post-full-title { font-size: 18px; }
}