/* ==========================================================================
   A股棱镜 · 移动端适配（响应式统一层）
   --------------------------------------------------------------------------
   加载位置：base.html 中位于 {% block extra_css %} **之后**。
   因此这里的规则可以覆盖各模板内联定义的样式（同优先级时后加载者胜），
   不必逐个去改 27 个模板里的样式，收敛到一处维护。

   断点规范（与 Bootstrap 对齐，全站统一）：
     ≥1200px   桌面
     ≤992px    平板竖屏 / 小笔记本 → 后台侧栏转横向标签条、容器内边距收紧
     ≤768px    大手机 / 小平板     → 多列网格降为单列、大留白收敛
     ≤576px    手机               → 字号与内边距最小化、宽表格允许横向滑动

   设计原则：
   1. 只做「降级与收敛」，不改变桌面端既有视觉（全部包在 max-width 里）；
   2. 宽度一律用百分比 / max-width，不引入新的固定像素宽度；
   3. ⚠️ 宽内容（表格、代码块）**必须**有自己的 overflow-x:auto 容器：
      base.html 的 body{overflow-x:hidden} 会把溢出内容直接**裁掉**而不是出滚动条，
      所以绝不能指望页面级横向滚动来救场。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 工具类
   -------------------------------------------------------------------------- */
/* 横向滚动容器：给宽表格 / 宽代码块套一层，配合 body{overflow-x:hidden} 使用 */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.table-scroll > table {
    min-width: 480px;      /* 保证窄屏下表格不被压成一团，而是可横向滑动查看 */
    margin: 0;
}
/* marked 渲染后的研报表：由 JS 自动套 .table-scroll，这里兜底再保一层 */
.markdown-body .table-scroll,
.report-card .table-scroll { margin: 1em 0; }

/* 桌面优先隐藏 / 移动端才显示的辅助类 */
.only-mobile { display: none !important; }
@media (max-width: 768px) {
    .only-mobile { display: initial !important; }
    .hide-mobile { display: none !important; }
}

/* --------------------------------------------------------------------------
   0b. 宽内容横向滚动（研报表格 / 代码块）
   --------------------------------------------------------------------------
   ⚠️ base.html 的 body{overflow-x:hidden} 会把溢出内容直接**裁掉**而不是出滚动条，
      所以宽表格在手机上会「右边看不见且划不动」。必须让宽内容自带滚动容器。

   为什么用纯 CSS 而不是 JS 包一层 div：
   分析页是流式渲染（每收到一个 chunk 就 innerHTML = marked.parse(全量)），
   用 JS 包裹会导致表格每帧被销毁重建，滚动位置不断归零，阅读中断。
   CSS 方案让 <table> 自己成为滚动容器，流式与静态页面都适用。

   原理：table 设为 display:block 后，内部的 thead/tbody 会由匿名表格盒
   保持原有表格布局，外层元素则可以用 max-width+overflow-x 产生横向滚动。
   ⚠️ 只在 ≤768px 生效——桌面端表格仍保持 width:100% 的既有观感。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .markdown-body table,
    .report-card table,
    .markdown-body pre {
        display: block;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 表头在横滑时保持可读：避免单元格被压到换行成一团 */
    .markdown-body th,
    .markdown-body td,
    .report-card th,
    .report-card td { white-space: nowrap; }
    /* 第一列（通常是指标名）滑到左侧时更具可读性，但保持 nowrap 已足够 */
}

/* --------------------------------------------------------------------------
   1. 平板及以下（≤992px）：容器留白、导航栏、后台骨架
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    /* 容器留白：桌面默认 12~24px，手机上太挤 */
    .container { padding-left: 16px; padding-right: 16px; }

    /* 首页大标题区：桌面 120px 上留白在手机上过高。
       ⚠️ 首页用的是 .hero（home.html），其他页用 .hero-section（base.html），
       两个类名必须一起写，否则首页的留白永远收不掉（08-31 修复）。 */
    .hero-section, .hero { padding: 96px 0 56px; }
    .feature-card { padding: 28px 22px; }

    /* ---- 导航栏折叠菜单 ---- */
    /* 8 个导航项 + 登录区纵向铺开会超过一屏，必须限高并可滚动 */
    .navbar-collapse {
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .navbar-nav .nav-link { padding: 10px 4px; margin: 0; }
    .navbar-brand { margin-right: 0; }
    #authArea { padding: 10px 0 14px; }

    /* ---- 后台：240px 固定侧栏 → 顶部横向标签条（本次改造最大项） ---- */
    /* 桌面：左侧 240px sticky 侧栏（flex-shrink:0 硬锁宽）
       移动：改为可横向滑动的顶部标签条，内容区拿回全部宽度 */
    .admin-shell {
        display: block;
        min-height: 0;
        margin-top: 64px;
    }
    .admin-sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex-shrink: 1;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 8px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .admin-sidebar .brand { display: none; }   /* 顶部导航已有 logo，省出横向空间 */
    .admin-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
    }
    .admin-nav a {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 0.85rem;
    }
    .admin-nav hr { display: none; }           /* 横向标签条里分隔线没有意义 */
    .admin-main {
        padding: 18px 14px 40px;
        overflow-x: visible;
    }
    .admin-card { padding: 16px; margin-bottom: 16px; }
    .admin-stat { padding: 14px 16px; }
    .admin-stat .value { font-size: 1.5rem; }

    /* 反馈页：桌面 sticky 侧栏在手机上会吃掉大半视口 */
    .submit-card { position: static !important; }
    .page-title { font-size: 2.1rem; }

    /* 法务页返回顶部按钮：远离屏幕边缘误触区 */
    .back-top { right: 14px; bottom: 14px; }
}

/* --------------------------------------------------------------------------
   2. 大手机 / 小平板（≤768px）：多列降单列、报告正文、分析页
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-section, .hero { padding: 84px 0 44px; }
    .hero-title { font-size: 1.95rem; }
    .hero-desc { font-size: 1rem; margin-bottom: 32px; }
    .feature-card { padding: 22px 18px; }

    /* ---- 分析报告正文 ---- */
    .report-card {
        padding: 20px 16px;
        border-radius: 14px;
        font-size: 0.98rem;
        line-height: 1.75;
    }
    .report-card h1 { font-size: 1.3rem; }
    .report-card h2 { font-size: 1.15rem; }
    .report-card h3 { font-size: 1.05rem; }
    .report-card th,
    .report-card td { padding: 7px 9px; font-size: 0.9rem; }
    /* 存档页：顶部让出 fixed-top 导航栏（桌面 96px，手机上够用但可再收） */
    .archive-wrap { padding: 88px 14px 40px; }
    .archive-title { font-size: 1.25rem; }
    /* 右上角三个按钮：窄屏下换行平铺，避免挤出容器 */
    .archive-head { gap: 10px; }
    .archive-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
    .archive-actions .btn { flex: 1 1 auto; margin-right: 0 !important; }

    /* ---- 分析页 ---- */
    /* 三列统计：1.4rem Orbitron 数字在 360px 下必挤爆，降为单列 */
    .stat-row { grid-template-columns: 1fr !important; gap: 10px; }
    /* 终端窗口桌面 min-height:70vh，手机上过高 */
    .terminal-window { min-height: 320px !important; }
    .processing-container { padding: 24px 16px !important; }
    /* 模型选择面板：宽度兜底由内联 max-width 控制，此处再收紧内边距 */
    .mpanel { padding: 10px !important; }
    .mpanel-list { max-height: 46vh !important; }
    /* 搜索行：允许换行，避免输入框被按钮挤没 */
    .search-hero { flex-wrap: wrap; }

    /* 个人中心：统计组在窄屏下改为两列 */
    .stats-group { gap: 20px; }

    /* 页脚：桌面 80px 上留白过大 */
    footer { padding: 48px 0 32px; }
}

/* --------------------------------------------------------------------------
   3. 手机（≤576px）：字号与留白最小化
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .container { padding-left: 12px; padding-right: 12px; }

    .hero-title { font-size: 1.7rem; }
    .hero-desc { font-size: 0.95rem; }
    .badge-tech { font-size: 0.75rem; padding: 6px 12px; }

    /* 卡片类通用内边距收敛（登录/注册/定价/反馈等共用观感） */
    .admin-card { padding: 14px; }
    .admin-main { padding: 14px 12px 32px; }
    .admin-table th,
    .admin-table td { padding: 9px 10px; font-size: 0.85rem; }

    /* 报告正文再收一档 */
    .report-card { padding: 16px 12px; font-size: 0.95rem; }
    .report-card th,
    .report-card td { padding: 6px 8px; font-size: 0.86rem; }

    /* 存档页标题区：三个按钮各占一行更好点按 */
    .archive-actions .btn { flex: 1 1 100%; }

    /* 法务页 */
    .legal-body { padding: 22px 16px; }

    /* 页面大标题 */
    .page-title { font-size: 1.8rem; }

    /* ---- 首页专属（.hero / .search-shell / .hot-strip / .cta-band） ---- */
    /* 首页 hero 比通用页更高（100px 上留白），手机上再收一档 */
    .hero { padding: 64px 0 36px; }

    /* 搜索行：并排时输入框只剩 100px 出头，占位文案被切得看不懂。
       改为「输入框一行 + 按钮整行」，都在拇指范围内。 */
    .search-shell { flex-wrap: wrap; padding: 10px; border-radius: 16px; }
    .search-shell .search-ico { display: none; }
    .search-shell input { flex: 1 1 100%; font-size: 1rem; padding: 10px 4px; }
    /* 「查看 / 分析」两个按钮整体占一行，内部各半 —— 保持桌面端「一个按钮切两半」的观感。 */
    .search-shell .hero-actions { flex: 1 1 100%; }
    .search-shell .hero-actions .btn-hero { padding: 12px 8px; font-size: 1rem; }
    /* 手机上图标吃掉太多横向空间，字号也压不住两字文案 */
    .search-shell .hero-actions .btn-hero i { margin-right: .35rem !important; }

    /* 热股条：6 个 chip 在手机上要占 3~4 行，把首屏推得过长。
       只留前 4 个 + 「完整热榜」（:not(:last-child) 保住入口按钮）。 */
    .hot-strip .hot-chip:nth-child(n+6):not(:last-child) { display: none; }

    /* 指标卡：1.9rem Orbitron 数字 + 两行标签在 360px 下会挤成两行 */
    .stat-card { padding: 18px 12px; }
    .stat-card .num { font-size: 1.5rem; }

    /* CTA 大按钮与色带内边距同样要收 */
    .cta-band { padding: 40px 20px; border-radius: 20px; }
    .btn-free { padding: 15px 30px; font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   4. 超小屏（≤360px）：兜底，防止极端机型溢出
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
    .container { padding-left: 10px; padding-right: 10px; }
    .hero-title { font-size: 1.5rem; }
    .navbar-brand { font-size: 1.2rem; }
    .brand-main { font-size: 1.05rem; }
    .brand-sub { font-size: 0.55rem; }
}

/* --------------------------------------------------------------------------
   5. 触摸体验优化（不限断点）
   -------------------------------------------------------------------------- */
/* 手机上点按区域至少 40px，避免误触 */
@media (pointer: coarse) {
    .nav-link,
    .admin-nav a,
    .sg-item,
    .suggest-item,
    .mpanel-item { min-height: 40px; }
    /* 去掉桌面 hover 效果在移动端的「粘滞」残留 */
    .feature-card:hover { transform: none; }
}

/* 尊重用户的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}