/* =====================================================================
   响应式修正层 responsive.css
   ---------------------------------------------------------------------
   背景：styles.css / guide.css 是多年“只追加、少清理”的样式，存在三类
   系统性问题，导致平板/手机（尤其是 768/834 竖屏平板与 812–900 横屏
   手机）出现重叠、挤压、裁切与操作丢失：
     1) 断点是孤点且有缝隙（1261/1260/1150/1100/900/760/700/680…），
        768/834 正好卡在 760 与 900 之间，吃不到“手机级”修正；
     2) 少量陈旧规则泄漏到新版 DOM（如 .asset-choice-grid.worlds 把
        .world-library-grid 在 ≤900 压成单列）；
     3) 固定/悬浮层缺少遮挡补偿与 touch-action 处理。

   本文件在 styles.css、guide.css 之后加载，仅做“增量修正”，不改动
   ≥1100 桌面观感。优先级规则：同特异性下后加载者生效；需要压过带
   #id 前缀的规则时显式提高特异性。
   ===================================================================== */

/* ---------- 0. 通用兜底：窄视口下页面不允许出现横向整页滚动 ---------- */
@media (max-width:1100px){
  html{
    overflow-x:clip}
}

/* =====================================================================
   1. 应用外壳 / 顶栏 / 通知 / 全局搜索
   ===================================================================== */
/* 通知浮层在 ≤760 盖住了 sticky 顶栏（z-index 150 > 顶栏 20）→ 下移 */
@media (max-width:760px){
  .notification{
    top:calc(64px + env(safe-area-inset-top,0px))}
  .sidebar{
    padding-top:max(8px, env(safe-area-inset-top,0px));
    padding-bottom:max(8px, env(safe-area-inset-bottom,0px))}
}

/* 模块搜索：#modules 活动时把 pagebar 改为两行并把搜索框恢复为全宽，
   避免 ≤760 时代码把 .search display:none 造成搜索功能“消失”。 */
@media (max-width:760px){
  body:has(#modules.active) .pagebar{
    flex-direction:column;
    align-items:stretch;
    gap:8px}
  body:has(#modules.active) .page-actions{
    flex-wrap:wrap}
  body:has(#modules.active) .page-actions .search{
    display:flex;
    width:100%}
}

/* =====================================================================
   2. “我的教材” modules 视图
   ===================================================================== */
/* 管理态工具栏：固定 48px + nowrap 会把提示语+三个按钮压成竖排溢出。
   允许换行并自动增高。 */
@media (max-width:620px){
  #modules .module-selection-toolbar{
    flex-wrap:wrap;
    height:auto;
    min-height:48px;
    row-gap:10px;
    column-gap:12px;
    padding:6px 0}
  #modules .module-management-selection,
  #modules .module-management-actions{
    flex-wrap:wrap;
    gap:10px}
  #modules .module-management-actions{
    width:100%;
    justify-content:space-between}
}

/* =====================================================================
   3. 模块详情 detail：预览标签四连在手机折行 → 允许横向滑动
   ===================================================================== */
@media (max-width:600px){
  .preview-tabs{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  .preview-tabs button{
    flex:0 0 auto;
    white-space:nowrap;
    padding:11px 13px;
    font-size:14px}
}

/* =====================================================================
   4. 任务中心 task center
   ===================================================================== */
/* 筛选标签：6 项 nowrap 且滚动条被隐藏，窄屏看不到“失败/已完成”。
   改为换行显示。 */
@media (max-width:560px){
  .task-filter-tabs{
    flex-wrap:wrap;
    row-gap:2px;
    overflow-x:hidden}
  .task-filter-tabs button{
    min-height:40px}
}

/* 768–1100 平板单列长卡片：标题单行省略且无 tooltip 会吞掉模块名。
   改回最多两行并让卡片随内容增高，杜绝裁切。 */
@media (min-width:761px) and (max-width:1100px){
  .task-entry{
    height:auto;
    overflow:visible}
  .task-line h3{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden}
}

/* 触屏命中区域与 footer 兜底 */
@media (pointer:coarse){
  .task-actions .button{
    min-height:44px}
  .task-actions .button[data-retry-job],
  .task-actions .button[data-review-job]{
    min-width:64px;
    width:auto}
}
@media (max-width:760px){
  /* 运行中/排队任务的 primary 为空：给 footer 一个稳定高度，
     避免绝对定位的“删除/取消”压在正文上。 */
  .task-actions{
    min-height:44px;
    justify-content:center}
}

/* =====================================================================
   5. 新建向导 step 02/03：悬浮操作条
   ===================================================================== */
/* step-02/03 均带 .step-two-actions，后写的通用块把 step-03 的白色
   “chip”背景/圆角/阴影清零，且 step-03 缺少底部留白 → 遮挡概览末行。 */
@media (min-width:761px) and (max-width:1220px){
  .scene-pane.active{
    padding-bottom:104px}
  .scene-pane .step-two-actions{
    right:max(68px,calc((100vw - 1824px)/2 + 68px));
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:0}
  .final-review-actions.step-two-actions{
    right:28px;
    background:#fff;
    border:1px solid #d9dcdf;
    border-radius:14px;
    box-shadow:0 12px 38px #1113;
    padding:10px}
  .final-review-pane.active{
    padding-bottom:104px}
  .final-review-actions.step-two-actions .button{
    white-space:nowrap}
}
/* 悬浮条贴近 iOS/安卓底部时预留安全区（桌面 env=0 时回到原 22px） */
@media (min-width:761px) and (max-width:1220px){
  .final-review-actions.step-two-actions,
  .scene-pane .step-two-actions{
    bottom:calc(max(22px, env(safe-area-inset-bottom,0px)))}
}

/* step-03 概览人物：≤760 强制三列会让“两人对话”也占满 3 格且缩图过小 */
@media (max-width:760px){
  .final-overview .summary-characters{
    grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
}

/* =====================================================================
   6. 新建向导 step 01（教材目录）——平板横向锁高与 3 列裁切
   ===================================================================== */
/* 3 列最小宽度（150+280+320+间隙）在 901–1020 放不下 → 右缘被裁。
   本段在 901–1020 收缩固定列宽并允许其余列收缩到 0 以上（防溢出），
   1001px 以上保留原桌面观感。 */
@media (min-width:901px) and (max-width:1020px){
  .catalog-workspace{
    grid-template-columns:132px minmax(0,1fr) minmax(0,1.4fr)}
}

/* 内容高于锁高区时，列表应内部滚动而非被裁：把 workspace 行高固定为
   容器高，目录列、主题列表、预览分别内部滚动。仅在锁高生效的短视口
   （横屏平板 / 矮窗口）启用，不触碰常规桌面。 */
@media (min-width:901px) and (max-height:1000px){
  .catalog-workspace{
    grid-template-rows:minmax(0,1fr)}
  .catalog-unit-pane{
    overflow:auto}
  .catalog-list-pane{
    overflow:hidden}
  .catalog-theme-list{
    flex:1 1 auto;
    overflow-y:auto}
  .catalog-preview{
    overflow:hidden}
  .catalog-preview-body{
    flex:1 1 auto;
    overflow:auto}
}

/* 竖屏平板（681–840）预览列与列表列 ~300px 双列挤压：列表主题条目
   文字在小列内换行零碎。把折叠为“单列上下堆叠”的阈值从 680 提高到
   840，让 768/834 平板改为整宽列表 + 整宽预览（≤680 手机维持原设计）。 */
@media (min-width:681px) and (max-width:840px){
  .catalog-workspace{
    display:block}
  .catalog-list-pane,.catalog-preview{
    height:auto;
    min-height:46vh;
    border-right:0}
  .catalog-list-pane{
    border-bottom:1px solid #e2e3e4}
  .catalog-theme-list{
    max-height:52vh;
    overflow-y:auto}
}

/* =====================================================================
   7. 素材库 library
   ===================================================================== */
/* 陈旧规则 @media(max-width:900px){.asset-choice-grid.worlds,
   .world-library-grid{grid-template-columns:1fr}} 让“内置世界观”在
   768–900 变单列而其余网格仍是两列。此处仅修正 .world-library-grid。 */
@media (min-width:761px) and (max-width:900px){
  .world-library-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 弹窗与上传预览在手机上过窄 */
@media (max-width:760px){
  .asset-detail-dialog{
    width:calc(100vw - 24px)}
}
@media (max-width:480px){
  .material-creator-dialog .personal-upload-preview{
    grid-template-columns:repeat(2,1fr)}
  .personal-source-switch{
    grid-template-columns:1fr}
}

/* 字符详情占位图：无图人物缺少高度 → 详情弹窗塌陷成一小条 */
.asset-character-detail .personal-world-placeholder{
  width:100%;
  height:min(52vh,420px)}
.asset-character-detail>div>header{
  padding-right:52px}

/* 触屏命中区域（复用现有 pointer:coarse 策略，覆盖其余主要控件） */
@media (pointer:coarse){
  .asset-detail-close{
    width:44px;
    height:44px;
    font-size:20px}
  .asset-delete-btn{
    width:38px;
    height:38px}
  .catalog-empty .button{
    min-height:44px}
  .final-scene-select select{
    min-height:44px}
  #modules .module-card-actions .button,
  #modules .module-management-actions .button{
    min-height:44px}
}

/* =====================================================================
   8. 教材审核 review
   ===================================================================== */
/* 页面图片铺满卡片，touch-action:none 会把竖向翻页手势吞掉 → 卡顿。
   仅保留拖动锚点时禁止滚动；容器本身放行纵向手势。 */
@media (pointer:coarse){
  .manual-bubble-editor{
    touch-action:pan-y}
}

/* 竖屏平板/手机（≤900）：工具区两列 ~300px、重生成页面 chip 三列
   ~90px 挤压溢出 → 工具区改单列、chip 自动填充换行。 */
@media (max-width:900px){
  #review .review-tools-scroll{
    grid-template-columns:1fr}
  #review .review-tools-scroll .bubble-settings{
    grid-column:auto}
  #review .review-regenerate-pages{
    grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  #review .review-submit-actions .red-button{
    width:100%}
}

/* 901–1150 横屏平板/小窗口：工具三列每张 ~240px 同样过挤 → 两列 */
@media (min-width:901px) and (max-width:1150px){
  #review .review-tools-scroll{
    grid-template-columns:1fr 1fr}
  #review .review-tools-scroll .bubble-settings{
    grid-column:1/-1}
  #review .review-regenerate-pages{
    grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
}

/* 每页版本条过宽会被裁 → 允许页头换行、版本条横向滚动 */
@media (max-width:600px){
  #review .review-page-head{
    flex-wrap:wrap;
    row-gap:6px}
  #review .review-page-version{
    min-width:0;
    flex:1 1 auto}
  #review .version-strip{
    overflow-x:auto;
    max-width:100%}
}

/* “当前页”无可见高亮（页签已隐藏）→ 用外描边标识活动页 */
#review .review-page.active{
  border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(23,74,156,.35)}

/* =====================================================================
   9. guide 新手介绍（仅中宽平板修正，≤800 沿用原设计）
   ===================================================================== */
/* hero 实拍细节卡绝对定位覆盖主图下缘漫画条 → 改为静态第二图（≤760，
   覆盖手机与中宽平板；桌面维持右下角叠放原设计） */
@media (max-width:760px){
  .guide-hero .guide-real-art{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px}
  .guide-real-page{
    max-width:420px;
    width:100%}
  .guide-real-detail{
    position:static;
    width:min(56%,260px);
    transform:rotate(-2deg);
    margin:0 auto}
}

/* 801–1000 中宽平板：2 列文案 + 图片的 hero 过于拥挤 → 单列堆叠并
   收紧纵向留白；功能卡 3 列每张 ~220px 截图不可读 → 两列；
   步骤 6 列 ~226px → 两列；系统架构正文让出右侧 210px 固定轨 → 单列。 */
@media (min-width:801px) and (max-width:1000px){
  .guide-hero{
    grid-template-columns:1fr;
    min-height:0;
    padding:48px 0 64px;
    gap:26px}
  .guide-feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-feature:last-child{
    grid-column:1/-1}
  .guide-steps{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-steps li,
  .guide-steps li:nth-child(n+4){
    grid-column:auto}
  .guide-steps li:nth-child(5){
    grid-column:1/-1}
  .guide-system-body{
    grid-template-columns:1fr}
}

/* guide 顶部 sticky 目录偏移量跟随顶栏 + 刘海安全区 */
@media (max-width:760px){
  .guide-nav{
    top:calc(60px + env(safe-area-inset-top,0px))}
}

/* =====================================================================
   10. 设置 settings
   ===================================================================== */
/* 内边距只在 ≤700 收紧，而 82px 侧栏在 >760 才出现：768 反而比 700 挤。
   把紧凑内边距上限抬到 800。 */
@media (max-width:800px){
  .model-settings-shell{
    padding:20px}
  .provider-list-head{
    flex-direction:column;
    align-items:stretch}
  .provider-list-head .button{
    width:100%}
}
/* 手机：页签加大命中区、标签变小；绑定行服务名过长时按钮换行。 */
@media (max-width:600px){
  .model-settings-tabs button{
    padding:12px 2px;
    font-size:14px}
  .model-settings-header h2{
    font-size:26px}
}
@media (max-width:420px){
  .model-status-grid article{
    grid-template-columns:auto minmax(0,1fr)}
  .model-status-grid article .button{
    grid-column:2;
    justify-self:start;
    margin-top:2px}
  .provider-guide{
    grid-template-columns:1fr}
  .provider-guide a{
    grid-column:1;
    grid-row:auto;
    justify-self:start}
}