/*
 * resume/mobile.css — 简历编辑器的移动 App 化层（≤640px 生效）。
 * 原则：复用 app.js 全部逻辑与 styles.css 桌面样式，只在窄屏覆盖布局。
 * 核心动作：双栏工作台 → 「编辑/预览」切换的单栏；A4 缩到屏宽；顶栏精简；补底部 tab bar。
 * 移动专用组件（.m-viewseg / .m-tabbar）默认隐藏，仅窄屏出现。
 */

.m-viewseg { display: none; }
.m-tabbar { display: none; }

@media (max-width: 640px) {
  /* ── 顶栏精简 ── */
  nav { padding: 10px 12px; }
  nav .inner { gap: 10px; flex-wrap: nowrap; }
  .logo + span { display: none; }               /* "/你的数字分身" 副标题 */
  .save-state { display: none !important; }
  .nav-spacer { display: none; }
  .nav-actions { margin-left: auto; gap: 6px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-actions::-webkit-scrollbar { display: none; }
  .nav-btn, .nav-chip { font-size: 12px; padding: 6px 9px; white-space: nowrap; flex: 0 0 auto; }

  /* ── AI 调整带：留输入，隐藏依赖“选中段”的 chips（移动端先不做多选） ── */
  .ai-control-strip { margin-top: 8px; padding: 0 12px; }
  .acs-chip-rows { display: none; }

  /* ── 编辑/预览 切换段（移动专用，显示） ── */
  .m-viewseg {
    display: flex; position: sticky; top: 0; z-index: 40; gap: 8px;
    margin: 8px 0 0; padding: 8px 12px; background: var(--bg-paper);
    border-bottom: 1px solid var(--line-soft);
  }
  .m-viewseg button { flex: 1; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-card); color: var(--ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer; }
  .m-viewseg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* ── 工作台单栏 + 编辑/预览互斥显示 ── */
  .workbench { display: block; max-width: 100%; margin: 0; padding: 0; }
  .preview-col { display: none; }
  .right-col { width: 100%; border: 0; border-radius: 0; max-height: none; position: static; }
  body.m-preview .right-col { display: none; }
  body.m-preview .preview-col { display: flex; padding: 8px 10px 0; }

  /* A4 预览缩到屏宽（去掉 210mm 固定 + 缩放） */
  body.m-preview .paper-wrap { padding: 8px 0; margin: 0; max-height: none; overflow: visible; background: transparent; }
  body.m-preview .paper {
    width: 100% !important; min-width: 0; min-height: auto;
    box-shadow: var(--shadow-card); border-radius: 10px; padding: 18px 16px; margin: 0;
    transform: none !important;
  }
  body.m-preview .preview-toolbar { flex-wrap: wrap; gap: 6px; }

  /* ── 编辑表单单列 ── */
  .field-row { display: flex; flex-direction: column; gap: 0; }
  .ed-card { padding: 14px; }
  .template-grid { grid-template-columns: 1fr 1fr; }

  /* ── 弹窗适配窄屏 ── */
  .modal { max-width: 94vw; width: 94vw; }
  .import-grid { grid-template-columns: 1fr; gap: 10px; }
  .nav-popover { left: 8px; right: 8px; width: auto; max-width: none; }

  /* ── 底部 tab bar 留白 + 显示 ── */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .resume-next, .resume-footer { margin-bottom: 8px; }
  .m-tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  }
  .m-tabbar a { flex: 1; text-align: center; padding: 8px 0 7px; text-decoration: none; color: var(--ink-4); font-size: 10.5px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .m-tabbar a .i { font-size: 21px; line-height: 1; }
  .m-tabbar a.on { color: var(--accent); }
}