/* ============================================================
   移动端适配层 (yhdet.top / 易聊社区)
   仅对 <=768px / <=480px 生效，不影响桌面端。
   引入位置：base.html head（在 extra_css 之后，优先级最高）。
   ============================================================ */

/* ---------- 通用：手机基础 ---------- */
@media (max-width: 768px) {
    .main-content { padding: 12px 14px 32px; }

    /* 表单/输入字号 >=16px，避免 iOS 聚焦时整页缩放 */
    .form-input, .form-textarea, .form-select,
    .search-input, input, textarea, select { font-size: 16px; }

    /* 卡片内边距收紧 */
    .card-header { padding: 12px 14px; }
    .card-body { padding: 12px 14px; }

    /* 首页搜索栏：输入框独占一行，下拉+按钮第二行 */
    .search-glass { flex-wrap: wrap; padding: 8px; gap: 8px; }
    .search-input-wrap { flex: 1 1 100%; order: 1; min-width: 0; }
    .search-select { flex: 1 1 auto; order: 2; min-width: 0; }
    .search-btn { flex: 1 1 auto; order: 3; }

    /* 面包屑 / 帖子操作栏允许换行 */
    .breadcrumb { flex-wrap: wrap; font-size: 0.8rem; row-gap: 4px; }
    .post-actions { flex-wrap: wrap; gap: 8px; }
    .post-actions .btn { flex: 1 1 auto; }

    /* 帖子列表更紧凑，预览显示两行 */
    .post-meta { gap: 6px 10px; }
    .post-preview { -webkit-line-clamp: 2; }
    .post-card { padding: 12px 14px; }

    /* 私信列表更紧凑 */
    .message-item { padding: 12px 14px; }
    .message-avatar { width: 40px; height: 40px; }
    .messages-header { gap: 8px; }
    .messages-tabs { width: 100%; }

    /* AI 聊天：高度自适应视口，输入区留间距 */
    .ai-body { height: calc(100vh - 170px) !important; height: calc(100dvh - 170px) !important; min-height: 340px; }
    .chat-messages { padding: 14px; gap: 12px; }
    .ai-input-area { padding: 10px 12px; gap: 8px; }
    .ai-input-area .ai-input { font-size: 16px; }
    .ai-message { gap: 8px; }
    .ai-avatar { width: 34px; height: 34px; }

    /* 弹窗移动端：留边距、占满宽度（覆盖模板内联 width:100% max-xxx） */
    .compose-content,
    .crop-content,
    .crop-modal .crop-content { width: calc(100% - 24px) !important; max-width: none !important; margin: 12px auto !important; }

    /* 通用弹窗按钮行换行 */
    .compose-actions,
    .form-actions,
    .btn-row { flex-wrap: wrap; }
    .compose-actions .btn,
    .btn-row .btn { flex: 1 1 auto; }
}

/* ---------- 超小屏：<=480px ---------- */
@media (max-width: 480px) {
    .main-content { padding: 10px 10px 28px; }
    .post-title { font-size: 0.9rem; }
    .footer { padding: 18px 12px; font-size: 0.78rem; }
    .auth-card { padding: 24px 18px !important; }
    .nav-right { gap: 6px; }
    .nav-right .nav-btn { padding: 6px 10px; font-size: 0.8rem; }
    .navbar-brand span { font-size: 0.92rem; }
    .section-tab { padding: 6px 10px; font-size: 0.8rem; }
    .post-stats { width: 100%; margin-left: 0; margin-top: 6px; justify-content: flex-start; }
    .user-grid { grid-template-columns: repeat(2, 1fr); }
}