/* ── 桌面端也要把说明条收掉 ─────────────────────────
 *
 * 那条「适用：产品海报、图层、素材…」在 1600px 宽下仍占 120px 高，
 * 把编辑器压到 y=203，画布只剩 551px —— 用户的说法是
 * 「编辑界面靠下导致下方部分内容被遮住，与上方的间距太宽」。
 *
 * 编辑器是全屏应用，不是文章页；说明文字对天天用的人是纯损耗。
 * 收掉之后编辑器从 71px 起，画布多出 120px。
 */
/*
 * 更新：这条说明横幅已在 tool-enhance 里整体改成右下角浮动坞，
 * 不再占版面高度，所以这里不用再单独隐藏 —— 隐藏反而会让
 * 海报设计器少掉「工具中心 / 收藏 / 复制链接 / 反馈」几个入口。
 * 只保留清零内边距。
 */
body:has(.pe-editor-root) { padding-top: 0 !important; }

/*
 * 产品海报设计器 · 窄屏编辑
 *
 * ── 现状问题 ──────────────────────────────────────────
 *
 * 窄屏下已有一个底部面板（#peMobileBar，页签：图层/属性/素材/模块/
 * 风格/模板/产品），但它是**常驻展开**的：
 *
 *   工具栏（换行堆到五六行）
 *   画布      ← 只剩 176px 高，海报缩成邮票，根本没法编辑
 *   底部面板   ← 固定占 120px，其中内容区只有 79px，属性面板塞不下
 *
 * 加起来还比屏幕高出 96px，整页要上下滚 —— 而画布本身也要滚，
 * 两层滚动叠在一起，手指一划不知道滚的是谁。
 *
 * ── 改成什么 ──────────────────────────────────────────
 *
 * 面板改成**可收起**：默认只留一条页签栏（44px），画布拿到全部剩余高度；
 * 点页签升起到 52vh 覆盖在画布上方，再点同一个页签收回去。
 *
 *   收起：  工具栏(单行横滑) + 画布(全高) + 页签栏
 *   展开：  工具栏(单行横滑) + 画布 + 面板(52vh，浮在画布上)
 *
 * 52vh 是权衡：再高会盖住画布中心，改的时候看不见自己在改什么；
 * 再矮属性面板就要在一个小窗口里滚，比不展开还难用。
 */

@media (max-width: 900px) {

  /* ── 顶部那条说明横幅在手机上要收掉 ─────────────────
   *
   * .ys-tool-bar 是页面级的说明条（「适用：产品海报、图标、素材…」）。
   * 桌面上一行 80px 还好，375px 宽的手机上文字全部折行，
   * **实测 338px 高** —— 而整个屏幕才 812px，编辑器被推到 y=428，
   * 只剩 384px 干活。说明文字挤掉了工具本身。
   *
   * 编辑器是全屏应用不是文章页，窄屏下直接不显示。
   */
  /* ── 编辑器高度：由 --pe-top 决定，不要写死 ─────────
   * poster-designer.css 里那条 height:100dvh !important 会让页面
   * 比视口高出顶部导航那一截（实测 96px），这里覆盖掉。 */
  .pe-editor-root {
    height: calc(100dvh - var(--pe-top, 0px)) !important;
    min-height: calc(100dvh - var(--pe-top, 0px)) !important;
  }

  /* ── 工具栏：单行横滑，不再换行堆高 ─────────────────
   * 22 个控件换行能堆五六行，把画布压没。一行横滑，
   * 分组竖线正好当滑动路标。 */
  .pe-editor-root .pe-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 10px;
    gap: 6px;
  }
  .pe-editor-root .pe-toolbar::-webkit-scrollbar { display: none; }
  .pe-editor-root .pe-tb-group { flex: 0 0 auto; flex-wrap: nowrap; padding-right: 8px; }
  .pe-editor-root .pe-brand { display: none; }
  .pe-editor-root .pe-status { display: none; }
  /* 触控目标 ≥40px —— 手指点 28px 的按钮会连带点到旁边那个 */
  .pe-editor-root .pe-toolbar .pe-btn,
  .pe-editor-root .pe-toolbar .pe-input {
    min-height: 40px; white-space: nowrap; font-size: 13px; padding: 8px 11px;
  }

  /* ── 画布：拿到全部剩余高度 ─────────────────────── */
  .pe-editor-root .pe-canvas-wrap {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px;
    /* 面板始终脱流浮在底部，这里预留出页签栏的位置。
       不留的话，展开/收起时画布高度会跳 46px，海报跟着抖一下。 */
    padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px) + 10px);
  }

  .pe-editor-root .pe-mobile-zoom {
    position: absolute; z-index: 18; top: 14px; right: 14px; display: flex;
    overflow: hidden; border: 1px solid rgba(37, 86, 56, .18); border-radius: 10px;
    background: rgba(255,255,255,.94); box-shadow: 0 5px 16px rgba(20, 55, 31, .14);
    backdrop-filter: blur(8px);
  }
  .pe-editor-root .pe-mobile-zoom button {
    min-width: 42px; min-height: 38px; padding: 0 9px; border: 0;
    border-right: 1px solid rgba(37, 86, 56, .12); background: transparent; color: #24563a;
    font: 700 14px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
  }
  .pe-editor-root .pe-mobile-zoom button:last-child { border-right: 0; }
  .pe-editor-root .pe-mobile-zoom .pe-zoom-fit { font-size: 12px; }

  /* ── 底部面板：始终浮在底部，可收起 ─────────────────
   * 一直脱流（不只是展开时），画布高度就永远不变，
   * 开合只是面板自己长高变矮。 */
  .pe-bottom-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    flex: 0 0 auto;
    max-height: none;
    min-height: 0;
    border-top: 1px solid #cfe0d4;
    box-shadow: 0 -8px 24px rgba(15, 40, 25, 0.10);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 30;
  }
  /* 收起态：只剩页签栏 */
  .pe-bottom-sheet .pe-sheet-body {
    flex: 0 0 auto;   /* 原本是 flex:1，会无视 height 被撑开 */
    height: 0;
    min-height: 0;
    padding: 0 10px;
    overflow: hidden;
    transition: height .2s ease, padding .2s ease;
  }
  /*
   * 展开态：**浮**在画布上方，不参与 flex 分配。
   *
   * 第一版只把内容区拉高，结果面板在 flex 列里把画布压到 20px ——
   * 展开属性面板等于把画布关掉了。所以展开时整块脱离文档流，
   * 绝对定位贴住编辑器底边，画布高度一点不变。
   */
  .pe-bottom-sheet.pe-sheet-open {
    z-index: 30;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 34px rgba(15, 40, 25, 0.20);
  }
  .pe-bottom-sheet.pe-sheet-open .pe-sheet-body {
    flex: 0 0 auto;
    height: 46vh;
    height: 46dvh;
    padding: 10px 12px 14px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 脱流后原位要留出页签栏的位置，否则画布底边会跳一下 */
  .pe-editor-root { position: relative; }
  .pe-bottom-sheet.pe-sheet-open::after {
    content: '';
    position: absolute; left: 0; right: 0; top: 100%;
    height: env(safe-area-inset-bottom, 0px);
    background: inherit;
  }

  .pe-sheet-tabs {
    position: relative;
    padding-right: 46px;   /* 给右侧收起按钮让位 */
  }
  .pe-sheet-tab { min-height: 44px; font-size: 12.5px; }

  /* 收起 / 展开按钮，固定在页签栏右端 */
  .pe-sheet-toggle {
    position: absolute; top: 0; right: 0;
    width: 46px; height: 100%;
    border: none; background: transparent;
    color: #4a6354; font-size: 15px; line-height: 1;
    cursor: pointer;
  }
  .pe-sheet-toggle::before { content: '▲'; display: block; }
  .pe-bottom-sheet.pe-sheet-open .pe-sheet-toggle::before { content: '▼'; }

  /* 面板内控件放大到能点 */
  .pe-editor-root .pe-prop-group input,
  .pe-editor-root .pe-prop-group select,
  .pe-editor-root .pe-prop-group textarea { min-height: 42px; font-size: 15px; }
  .pe-editor-root .pe-prop-group input[type="color"] { min-height: 46px; }
  .pe-editor-root .pe-asset-btn { min-height: 46px; }
  .pe-editor-root .pe-layer-item { padding: 11px 12px; }

  /* 弹窗贴底铺满，别缩在屏幕正中 */
  .pe-modal { max-width: 100%; max-height: 86vh; border-radius: 14px 14px 0 0; padding: 14px; }
  .pe-modal-bg { padding: 0; align-items: flex-end; }

  /* 「窄屏可用下方面板」的提示现在是多余的 —— 页签栏就摆在那 */
  .pe-mobile-hint { display: none !important; }
}