/* ============================================================
   艾诺 / AINLL · 后台响应式补丁（responsive.css）
   ------------------------------------------------------------
   目标：15 个后台页面在平板 / 手机上都能完整操作，
        重点是「登录后直接在手机上生成小说」这条主链路
        （编辑器 + AI 助手 + 工作流建书）。

   约定：
     1) 本文件必须在各页面专属样式之后引入 —— 用于覆盖它们
        在窄屏下 display:none 之类的硬规则（同优先级、靠后生效）。
     2) 只写窄屏规则，桌面端行为完全不变。
     3) 断点：≤980px 编辑器三栏转抽屉；≤900px 侧栏转抽屉；≤600px 手机细化。
     4) 抽屉统一由 body 上的类控制：
        nav-open / pane-left-open / pane-right-open，遮罩 .nav-mask 共用。
   ============================================================ */

/* ---------- 移动端专用控件：桌面隐藏 ---------- */
.nav-toggle{display:none}
.ed-mob-btn{display:none}
.nav-mask{
  position:fixed;inset:0;z-index:65;
  background:rgba(0,0,0,.52);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
  -webkit-tap-highlight-color:transparent;
}
/* 任一抽屉打开时显示遮罩 */
body.nav-open .nav-mask,
body.pane-left-open .nav-mask,
body.pane-right-open .nav-mask{opacity:1;visibility:visible;pointer-events:auto}

/* 抽屉打开时锁定背景纵向滚动，避免 iOS 上背景跟着滑 */
body.nav-open,
body.pane-left-open,
body.pane-right-open{overflow:hidden}

/* ============================================================
   ≤980px：编辑器三栏 → 主写区 + 左右两个抽屉
   （editor.css 在 980/760 直接隐藏右栏/左栏，手机上等于没有 AI，
     与「手机也能生成小说」冲突，这里改为抽屉）
   ============================================================ */
@media (max-width:980px){
  .ed-body{position:relative}

  .left-pane,
  .right-pane{
    position:fixed;top:0;bottom:0;z-index:75;
    width:min(86vw,340px);min-width:0;max-width:340px;
    display:flex;flex-direction:column;
    height:var(--app-h,100dvh);
    background:var(--sidebar);
    will-change:transform;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 40px rgba(0,0,0,.4);
  }
  .left-pane{left:0;right:auto;transform:translateX(-102%);border-right:1px solid var(--border)}
  .right-pane{left:auto;right:0;transform:translateX(102%);border-left:1px solid var(--border)}
  body.pane-left-open .left-pane{transform:translateX(0)}
  body.pane-right-open .right-pane{transform:translateX(0)}

  /* 抽屉里的滚动区自己滚，不被外层 hidden 卡住 */
  .left-pane .left-body,
  .right-pane .right-body{overflow-y:auto;-webkit-overflow-scrolling:touch}

  /* 顶栏两个抽屉开关（窄屏才出现） */
  .ed-mob-btn{display:inline-flex}
}

/* 编辑器顶栏在手机上换行会把写作区挤扁：藏掉次要信息，只留标题 + 保存 */
@media (max-width:760px){
  .editor-topbar{flex-wrap:nowrap;gap:8px;padding:6px 10px;overflow-x:auto;scrollbar-width:none}
  .editor-topbar::-webkit-scrollbar{display:none}
  .editor-topbar .ch-path,
  .editor-topbar .auto-save,
  .editor-topbar .word-count,
  .editor-topbar .icon-btn:not(.ed-mob-btn){display:none}
  .ch-title-input{min-width:0;flex:1 1 auto;font-size:14px}
  .editor-topbar .btn{padding:0 12px;font-size:12px;height:34px}
  .ai-bar{padding:6px 10px;gap:6px;row-gap:6px}
  .ai-bar .ai-context{display:none}
  .ai-bar .ab-target{font-size:11px}
  .ai-bar .ab-target input{width:52px}
  .ai-pill{height:30px;padding:0 11px;font-size:12px}
  .ai-pill kbd{display:none}
  .paper{padding:22px 16px 96px}
  .paper-title{font-size:21px}
  .statusbar{height:26px;min-height:26px;gap:10px;padding:0 12px;font-size:10px}
  .statusbar .sb-item:nth-child(3),
  .statusbar .sb-item:nth-child(4),
  .statusbar .sb-item:last-child{display:none}
}

/* ============================================================
   ≤900px：整站外框 —— 侧栏变抽屉、顶栏改单行弹性布局
   ============================================================ */
@media (max-width:900px){
  /* iOS 用 dvh，跟随地址栏与键盘变化，避免底部被裁 */
  html,body{height:var(--app-h,100dvh)}
  body{display:block;overflow:hidden;-webkit-text-size-adjust:100%}

  .main{width:100%;height:var(--app-h,100dvh)}

  /* ---------- 侧栏抽屉 ---------- */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:70;
    width:min(84vw,300px);min-width:0;
    height:var(--app-h,100dvh);
    display:flex;flex-direction:column;
    transform:translateX(-102%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 40px rgba(0,0,0,.45);
    -webkit-overflow-scrolling:touch;
    padding-bottom:env(safe-area-inset-bottom);
  }
  body.nav-open .sidebar{transform:translateX(0)}

  /* 触控友好：加大点击区 */
  .nav-item{padding:12px 14px;font-size:14px;margin:2px 8px}
  .nav-item .ico{font-size:16px;width:22px}
  .nav-group-title{padding:16px 16px 6px}
  .logo{height:60px;padding:0 14px}

  /* ---------- 汉堡按钮 ---------- */
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
    width:38px;height:38px;flex-shrink:0;
    padding:0 9px;border-radius:10px;
    border:1px solid var(--border);background:var(--card);cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle span{
    display:block;height:2px;border-radius:2px;
    background:var(--text-dim);transition:background .2s ease,transform .2s ease;
  }
  .nav-toggle:active span{background:var(--accent2)}

  /* ---------- 顶栏：grid → flex 单行 ---------- */
  .topbar{
    display:flex;align-items:center;
    gap:8px;padding:0 12px;
    grid-template-columns:none;
  }
  .topbar-lead{flex:0 0 auto;min-width:0}
  .topbar-title{font-size:15px}
  /* 搜索框吃掉剩余空间（flex-basis 0），操作区固定宽度不压缩——
     否则窄屏下按钮会被挤出屏幕右侧不可见 */
  .search-box{
    flex:1 1 0%;min-width:0;width:auto;
    justify-self:auto;height:38px;
  }
  .search-box input{min-width:0}
  .search-box .s-shortcut{display:none}
  .topbar-actions{flex:0 0 auto;min-width:0;gap:7px}
  .topbar-btn{height:34px;padding:0 12px;font-size:12px;white-space:nowrap;flex-shrink:0}
  .topbar-btn-ico{width:34px;height:34px;font-size:15px;flex-shrink:0}

  /* ---------- 内容区 ---------- */
  .content{padding:16px 14px 40px;-webkit-overflow-scrolling:touch}

  /* 页面标题行在窄屏改为纵向堆叠，避免按钮被挤出屏幕 */
  .section-head,
  .filter-bar{gap:10px}

  /* ---------- 通用兜底：任何两列以上的自定义网格在窄屏一律单列 ---------- */
  .wb .novel-grid,
  .wb .quick-grid,
  .wb .ov-metrics,
  .wb .data-cards,
  .data-cards{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* 世界观画布：原来是 min-width:520px 撑死 375px 屏幕，改为按容器自适应 */
  .wd-stage{min-width:0;min-height:0}

  /* 图表/画布类容器不要再按视口高度算，留出顶栏 */
  .wd-stagewrap{min-height:320px}

  /* 弹窗统一贴边留白，避免超出屏幕 */
  .tm-modal,.fm-modal{width:calc(100vw - 24px);max-width:calc(100vw - 24px)}
  .tm-modal.lg{max-width:calc(100vw - 24px)}

  /* 工作流抽屉占满宽 */
  .wf-drawer{width:min(100vw,400px);max-width:100vw}

  /* 悬浮按钮避开手机底部手势条 */
  .rc-fab{bottom:calc(16px + env(safe-area-inset-bottom));right:14px}
}

/* ============================================================
   ≤600px：手机细化
   ============================================================ */
@media (max-width:600px){
  /* 手机上页面标题由侧栏高亮表达，顶栏省下这 70px 给搜索和按钮 */
  .topbar-title{display:none}

  /* 顶栏只保留主操作（＋新建 / 开始写书 之类），次要按钮在页面里都有入口，
     否则 390px 下按钮会被挤出屏幕 */
  .topbar-actions .topbar-btn:not(.btn-primary),
  .topbar-actions .icon-btn:not(.theme-toggle){display:none}
  .topbar-btn{max-width:46vw;overflow:hidden;text-overflow:ellipsis}

  /* 顶栏放不下搜索框时收成一个图标式输入，仍可用 */
  .search-box{height:36px;border-radius:10px}
  .search-box .s-ico{font-size:12px}

  .content{padding:14px 12px calc(40px + env(safe-area-inset-bottom))}

  /* 卡片与栅格：作品卡/快捷入口单列，纯数字统计卡仍走两列更省屏 */
  .wb .novel-grid,
  .wb .quick-grid,
  .novel-grid{grid-template-columns:1fr}
  .data-cards,
  .wb .ov-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* 欢迎横幅与统计 */
  .welcome{padding:16px}
  .welcome-stats{flex-wrap:wrap;gap:14px}
  .ov-hello h1{font-size:19px}
  .ov-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* 章节/条目行：把多余的列并到第二行 */
  .sec-row{grid-template-columns:1fr auto!important;gap:8px}
  .sec-row > *:nth-child(1){display:none}

  /* 表单双列改单列 */
  .fld-row2,
  .fm-grid,
  .rs-grid,
  .wf-form,
  .wf-form-2,
  .wf-form-3,
  .wf-form-4{grid-template-columns:1fr!important}

  /* 数据表格横向滚动，不再撑破页面 */
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}

  /* 按钮组在窄屏纵向铺满，方便拇指点 */
  .btn-row,
  .modal-foot,
  .mf-actions{flex-direction:column;align-items:stretch}

  /* 顶部操作按钮只保留图标，文字藏起来省宽度 */
  .topbar-actions .topbar-btn .tb-label{display:none}

  /* 弹窗全屏化，手机上更好用 */
  .tm-modal,
  .fm-modal,
  .mk-drawer,
  .wf-drawer{width:100vw;max-width:100vw;max-height:92dvh;border-radius:14px 14px 0 0;bottom:0}

  /* iOS 在输入框字号 < 16px 时会自动放大整页，后台表单统一提到 16px。
     只作用于内容区，顶栏与工具栏的紧凑控件不受影响 */
  .content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  .content select,
  .content textarea{font-size:16px}

  /* 编辑器写作区：字号放大到易读档，行高放松 */
  .paper{padding:18px 14px 100px}
  .paper-body,.paper p{font-size:16px;line-height:1.95}
  .paper-title{font-size:19px}

  /* 工作流步骤条：手机上只留序号圆点，4 步一屏看全；
     草稿/历史那组按钮自动折到第二行，不挤压步骤 */
  .wf-steps{overflow:visible;flex-wrap:wrap;gap:8px;justify-content:space-between;padding:11px 14px}
  .wf-step{gap:0;flex:0 0 auto}
  .wf-step-info{display:none}
  .wf-step-num{width:32px;height:32px;font-size:13.5px}
  .wf-steps-spacer{display:none}
  .wf-step-line{display:none}
  .wf-draft-tip{display:none}
  .wf-wrap{padding:14px 12px 80px}

  /* AI 写作条：目标字数输入框放得下 5 位数，键盘快捷键提示对手机无意义 */
  .ai-bar .ab-target input{width:62px}
  .paper-empty .pe-tips{display:none}

  /* 素材库工具按钮两列 */
  .lb-tools{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* 模型页卡片单列 */
  .mk-grid{grid-template-columns:1fr}

  /* 模板市场：排序标签横向滚动，视图切换按钮不被挤出屏幕 */
  .tp-sort{flex-wrap:nowrap;gap:8px;width:100%;min-width:0}
  .tp-sort-tabs{min-width:0;overflow-x:auto;scrollbar-width:none}
  .tp-sort-tabs::-webkit-scrollbar{display:none}
  .tp-view{flex-shrink:0}

  /* 角色图谱底部章节时间轴：原本按 calc(100% - 190px) 定宽，手机上会顶出边界 */
  .rc-timeline{
    left:10px;right:10px;bottom:10px;
    width:auto;transform:none;
    gap:8px;padding:6px 10px;border-radius:14px;
  }
  .rc-timeline .rt-total{display:none}
}

/* 横屏矮屏（如手机横放）：把顶栏与页头压扁，给内容留高度 */
@media (max-width:900px) and (max-height:480px){
  .topbar{height:52px;min-height:52px}
  .logo{height:52px}
}

/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion:reduce){
  .sidebar,.left-pane,.right-pane,.nav-mask{transition:none}
}