/* ============================================================
   DAYMOON 07 新品工作台 · 移动端响应式适配（≤768px）
   全部分支在 @media (max-width: 768px) 内，桌面网页版零影响。
   关键：用 :not([hidden]) 避开 JS 切走的模块，避免覆盖 [hidden]。
   ============================================================ */

@media (max-width: 768px) {
  :root { --touch: 44px; }

  /* 兜底：HTML hidden 属性优先级最高，确保被 JS 切走的模块真的隐藏 */
  [hidden] { display: none !important; }

  /* ---------- 顶栏：去掉深色 brand 黑条，只留浅色 tab 横滑 ---------- */
  .topbar {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  /* 黑条来源：production.css 给 .brand-lockup 设了 background:var(--ink)，
     手机上整块隐藏，顶栏只留导航 tabs */
  .brand-lockup { display: none !important; }
  .runtime-badge { display: none !important; }

  /* 导航 tabs 横向可滚动 */
  .module-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px 10px;
    background: #ffffff;
    scrollbar-width: none;
  }
  .module-tabs::-webkit-scrollbar { display: none; }
  .module-tab {
    flex: 0 0 auto;
    min-width: auto;
    height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .module-tab small { display: none; }
  .module-tab b { display: none; }
  .module-tab strong { font-size: 14px; }
  .module-tab.active {
    background: var(--ink);
    color: #ffffff;
    border-color: var(--ink);
  }

  /* ---------- 主工作区：两列 → 单列（仅对非 hidden 模块生效）---------- */
  .design-workspace:not([hidden]),
  .product-workspace:not([hidden]),
  .product-unified-workspace:not([hidden]),
  .lifestyle-workspace:not([hidden]) {
    display: flex !important;
    flex-direction: column;
    min-height: auto !important;
  }

  /* 设计图模块：iframe 占满宽度 */
  .design-workspace:not([hidden]) iframe {
    width: 100%;
    min-height: 70vh;
    border: 0;
  }

  /* 控制面板和预览区单列 */
  .control-panel,
  .lifestyle-controls {
    width: 100% !important;
    max-width: none;
    border-right: none !important;
    border-bottom: 1px solid var(--ink, #dcdcd5);
    padding: 20px 16px 24px !important;
    order: 1;
  }
  /* 关键：预览区是 .preview-panel（与 .control-panel 平级兄弟），
     设 order:2 让控制面板(创作来源/选择产品/生成设置)排上方，
     生图结果区排下方 —— 先设内容再生成，而不是先看图再回头设 */
  .preview-panel {
    order: 2;
    width: 100%;
  }
  .preview-frame {
    width: 100%;
    min-height: 52vh;
    margin: 0;
  }
  .preview-frame img {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
  }
  .gallery, .preview-strip { width: 100%; }

  /* ---------- 场景图状态区（修手机版错位/不可读）---------- */
  .lifestyle-workspace:not([hidden]) #lifeStatus,
  .lifestyle-workspace:not([hidden]) .status,
  .lifestyle-workspace:not([hidden]) .global-task-status {
    position: static;
    width: 100%;
    margin: 12px 0 0;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 10px;
    word-break: break-word;
    white-space: pre-wrap;
  }
  /* 场景图字段：单列 */
  .lifestyle-workspace:not([hidden]) .field,
  .lifestyle-workspace:not([hidden]) .intake-field,
  .lifestyle-workspace:not([hidden]) .scene-idea,
  .lifestyle-workspace:not([hidden]) .reference-card,
  .lifestyle-workspace:not([hidden]) .scene-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  .lifestyle-workspace:not([hidden]) .grid,
  .lifestyle-workspace:not([hidden]) .reference-grid,
  .lifestyle-workspace:not([hidden]) .scene-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---------- 排版 & 触控目标放大 ---------- */
  h1 { font-size: 26px; }
  .intro { font-size: 13px; }
  .field input, .field select, .field textarea,
  .intake-field input, .intake-field textarea,
  .intake-field select {
    min-height: var(--touch);
    font-size: 16px !important;
  }
  .field, .intake-field { margin-bottom: 14px; }
  button, .module-tab, .save-full, .primary, .secondary {
    min-height: var(--touch);
    font-size: 15px;
  }
  /* 场景图卡片上的心形(精选)与叉(删除)是 29/27px 圆形小按钮，
     不能被上面的 min-height:44px 拉高成椭圆 —— 恢复桌面原始尺寸 */
  .life-archive-favorite, .life-archive-delete {
    min-height: 0;
    height: 29px;
    width: 29px;
    padding: 0;
    font-size: 19px;
    line-height: 27px;
  }
  .life-archive-delete {
    height: 27px;
    width: 27px;
    font-size: 18px;
    line-height: 25px;
  }
  .model-visibility-row {
    grid-template-columns: 30px minmax(0,1fr) auto;
    padding: 10px 11px;
  }
  .model-eye { width: 30px; height: 30px; font-size: 16px; }

  /* 上传框 */
  .upload-box { padding: 22px 14px; min-height: 120px; }

  /* 底部全局任务状态 toast */
  .global-task-status {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    font-size: 12px;
  }

  /* 产品看板 */
  .product-board-module { padding: 12px; }
  .product-board-module .board-grid { grid-template-columns: 1fr; }

  /* 弹层/抽屉全宽 */
  dialog, .board-drawer, .reference-modal {
    width: calc(100vw - 20px) !important;
    max-width: 100vw !important;
    margin: 10px;
  }

  /* 隐藏桌面专属的精细间距 */
  .step-label { font-size: 10px; }
  .spacing { margin-top: 8px; }
}