/* =========================================================
   ATO V3 · 移动端适配（≤768px）
   ---------------------------------------------------------
   设计约束（用户要求）：
   - 桌面端布局 / 折叠逻辑（#left-panel.collapsed 等）一律不改；
   - 所有移动端规则包在 @media (max-width:768px) 内；
   - 桌面端强制隐藏移动端专属元素（tabbar / mask）。
   改造内容：
   1) 顶部工具栏 → 单行横向滚动（不换行，绝不裁切按钮）；
   2) 工作区取消三栏 grid，画布占满；素材库/文案/属性图层
      三面板改为「右侧滑入抽屉」；
   3) 底部固定 tabbar（素材/文案/图层/属性）切换抽屉；
   4) 时间轴默认折叠（仅留头部）；画布由 mobile-panel.js 自动适配屏幕。
   ========================================================= */

/* 桌面端：强制隐藏移动端专属元素，避免任何误显示 */
#mobile-tabbar,
#mobile-panel-mask,
#toolbar .tb-trail-gap { display: none; }

@media (max-width: 768px) {

  /* ---------- 应用骨架：4 行（工具栏 / 工作区 / 时间轴 / tabbar） ---------- */
  #app {
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr auto 52px;
  }

  /* ---------- 顶部工具栏：单行横向滚动 ---------- */
  #toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: var(--s-3);
    padding-right: var(--s-3);
  }
  #toolbar::-webkit-scrollbar { display: none; }
  /* 用户栏（账号/退出）常驻可见：flex order 推到最右 + sticky 钉在右边缘，
     不随工具栏横滚消失；底色同工具栏并加左侧分隔线，遮挡滚入内容 */
  #toolbar .tb-spacer {
    flex: 0 0 auto;
    order: 999;
    position: sticky;
    right: 0;
    z-index: 5;
    background: var(--bg-1);
    margin-left: 0;
    padding-left: var(--s-2);
    padding-right: var(--s-1);
    box-shadow: -4px 0 8px var(--bg-1);     /* 缩小阴影范围，不再遮挡导出按钮 */
    min-width: max-content;          /* 确保内容不被截断 */
  }
  /* 移动端账号区内部：取消名称宽度限制 + 紧凑间距 */
  #toolbar .tb-spacer .ato-acct { gap: 6px; }
  #toolbar .tb-spacer .ato-acct-name { max-width: none; }
  #toolbar .tb-spacer .tb-btn { padding: 3px 8px; font-size: 12px; }
  #toolbar .tb-spacer::before {
    content: "";
    position: absolute;
    left: 0; top: 22%; bottom: 22%;
    width: 1px;
    background: var(--border-1);
  }
  /* 尾部留白：账号芯片常驻右边缘下方永远为空区，不遮挡任何工具按钮 */
  #toolbar .tb-trail-gap {
    flex: 0 0 auto;
    order: 1000;
    width: 130px;
  }
  #toolbar .tb-sep { display: none; }       /* 省空间，按钮间用 gap 区分 */
  #toolbar .tb-brand .tb-ver { display: none; }
  #toolbar .ui-zoom { flex: none; }
  #toolbar .tb-group { flex-wrap: nowrap; }

  /* ---------- 修复：移动端导出按钮首屏直接可见 ----------
     问题：#toolbar 移动端 overflow-x:auto 横滚，.tb-export-group
     (导出PNG/导出视频) 位于 DOM 最右端，被推到视口外
     (实测 x≈995，iPhone 视口仅 393px)，用户需横滚才点到。
     修复：用 flex order 把导出组提到最前（紧跟 logo 右侧），
     首屏无需横滚即可见；flex-shrink:0 防压缩。 */
  #toolbar .tb-brand { order: -2; }
  #toolbar .tb-export-group {
    order: -1;                        /* 紧跟 logo，首屏可见，无需横滚 */
    flex-shrink: 0;
    margin-left: var(--s-2);          /* 与 logo 间隔 */
  }
  /* 撤销上轮误加的 order：让 缩放/预览 回到 DOM 自然顺序（spacer 之前） */
  #toolbar .ui-zoom { order: 0; flex-shrink: 0; }
  #toolbar #btn-play { order: 0; flex-shrink: 0; }

  /* ---------- 工作区：取消 grid，画布占满 ---------- */
  #workspace {
    display: block;
    overflow: hidden;
    height: 100%;
  }
  #stage-wrap { width: 100%; height: 100%; }

  /* ---------- 修复：移动端背景图/渐变/点阵正常显示 ----------
     问题：#workspace 的 overflow:hidden 多层嵌套可能导致 #stage-wrap
     的 radial-gradient 背景和 .stage-scroll 的 dot-pattern 在部分
     移动浏览器中被裁切或不渲染。显式重申背景 + 确保不被 clip。 */
  #stage-wrap {
    background-attachment: fixed;       /* 渐变锚定视口，不随画布滚动位移 */
    -webkit-background-attachment: fixed;
  }
  .stage-scroll {
    background-attachment: scroll;
    -webkit-background-size: 24px 24px !important;
    background-size: 24px 24px !important;   /* 强制点阵尺寸，防移动端 DPI 缩放模糊 */
  }
  .panel-resizer,
  .panel-expand-float { display: none !important; }

  /* ---------- 三面板 → 右侧滑入抽屉（fixed 脱离 grid 流，不占行） ---------- */
  #left-panel,
  #copy-panel,
  #right-panel {
    position: fixed;
    top: 0;
    bottom: 52px;
    right: 0;
    width: 84vw;
    max-width: 340px;
    z-index: 50;
    transform: translateX(106%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, .45);
    will-change: transform;
  }
  #left-panel.mobile-open,
  #copy-panel.mobile-open,
  #right-panel.mobile-open {
    transform: translateX(0);
  }

  /* ---------- 遮罩（点它收起抽屉） ---------- */
  #mobile-panel-mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 52px;
    background: rgba(8, 6, 12, .5);
    z-index: 45;
    opacity: 0;
    pointer-events: none;
    transition: opacity .26s;
  }
  #mobile-panel-mask.show { opacity: 1; pointer-events: auto; }

  /* ---------- 底部 tabbar（grid 第 4 行） ---------- */
  #mobile-tabbar {
    display: flex;
    position: static;
    height: 52px;
    background: var(--bg-1);
    border-top: 1px solid var(--border-1);
    z-index: 60;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mt-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-3);
    font-size: 11px;
    -webkit-tap-highlight-color: transparent;
  }
  .mt-tab .mt-ico { font-size: 18px; line-height: 1; }
  .mt-tab.active { color: var(--accent-strong); background: var(--accent-soft); }

  /* ---------- 时间轴：移动端默认折叠（仅留头部一行） ---------- */
  #timeline {
    padding-top: var(--s-1);
    padding-bottom: var(--s-1);
  }

  /* 画布区底部留白，避免操作条与 tabbar 视觉粘连 */
  .stage-scroll { padding-bottom: 6px; }
}