/* ==========================================================================
   M3E Canvas · 手机适配层 / mobile adaptation layer
   --------------------------------------------------------------------------
   目标：把桌面版编辑器完整搬到手机上 —— 功能一个不少、设计语言不变，
   只重新安排「谁在哪儿」。做法：

     · 左侧 52px 图标栏（rail）固定贴左，永远可见；
     · 左右两个面板改成「抽屉」(drawer)，浮在画布之上，点遮罩收起；
     · 画布占满剩余空间，顶部工具栏横向可滑，底部控件避开图标栏；
     · 遮罩 + 抽屉层级低于 App 自己的弹窗(60)，不会盖住设置/分享弹窗。

   只在「小手屏」生效，桌面浏览器与平板(≥1000px)完全不受影响。
   ========================================================================== */

/* --- 0. 视口卫生 ---------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;      /* 干掉双击缩放带来的 300ms 延迟 */
}
body {
  overflow: hidden;
  overscroll-behavior: none;
}
:root {
  /* App 会给内置浏览器留 64px 底栏，这里由我们自己控制 */
  --bottom-ui: 0px !important;
}

/* --- 1. 启动骨架屏：保持桌面版的样子（因为 JS 已强制桌面布局）----------- */
@media (max-width: 840px), (pointer: coarse) and (max-width: 1024px) {
  .m3e-skel-left,
  .m3e-skel-right { display: flex !important; }
  .m3e-skel-desk { display: contents !important; }
  .m3e-skel-tools.m3e-skel-desk { display: flex !important; }
  .m3e-skel-mobile { display: none !important; }
  .m3e-skel-main { padding: 6px !important; }
  .m3e-skel-canvas { inset: 6px 6px 6px 60px !important; }
}

/* --- 2. 手机 / 小屏：抽屉式布局 ------------------------------------------ */
@media (max-width: 840px), (pointer: coarse) and (max-width: 1024px) {

  /* ---------- 2.1 左右面板 → 浮层抽屉 ---------- */
  .app-root > aside {
    position: fixed !important;
    top: 0;
    bottom: 0;
    z-index: 48 !important;
    max-width: calc(100vw - 34px);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .26);
  }
  .app-root > aside:nth-of-type(1) { left: 0; }
  .app-root > aside:nth-of-type(2) { right: 0; }

  /* 桌面用的 6px 拖宽热区在手指上没法用 → 收掉 */
  .app-root > aside > div[style*="col-resize"] { display: none !important; }

  /* ---------- 2.2 画布：让出左侧 52px 图标栏 ---------- */
  .app-root > main > div[style*="touch-action: none"] {
    left: 60px !important;
  }

  /* ---------- 2.3 顶部工具栏：折成两行，全部按钮一眼可见 ----------
     桌面版 8 个按钮原生要 461px，手机只有 352px；横向滑动的话
     「全部清除 / 项目(保存·打开)」会被藏在屏幕外，而这两个恰恰是要找的。
     折行后：第一行 [选择|抓手][添加屏幕|预览]，第二行 [撤销|重做|全部清除|项目]。
     容器保持 pointer-events:none，只有药丸本身吃事件，空白处的触摸照旧落给画布。 */
  .app-root > main > div[style*="padding: 0px 72px"] {
    left: 60px !important;
    top: 8px !important;
    padding: 0 62px 0 2px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  /* ---------- 2.4 底部：缩放控件右下、AI 按钮左下，都避开图标栏 ---------- */
  .app-root > main > div[style*="position: fixed"] {
    right: 12px !important;
    bottom: 12px !important;
    gap: 4px !important;
  }
  .app-root > main > div[style*="left: 22px"] {
    left: 62px !important;
    bottom: 12px !important;
  }
  /* AI 按钮与缩放控件都很宽，屏幕很窄时让 AI 按钮上移一格 */
  @media (max-width: 430px) {
    .app-root > main > div[style*="left: 22px"] {
      bottom: 76px !important;
      left: 58px !important;
    }
  }

  /* ---------- 2.5 抽屉遮罩（由 mobile.js 注入） ---------- */
  .m3m-scrim {
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(0, 0, 0, .32);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s cubic-bezier(.2, 0, 0, 1);
    -webkit-tap-highlight-color: transparent;
  }
  .m3m-scrim[data-on] {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---------- 2.6 抽屉里的滚动更跟手 ---------- */
  .app-root > aside .no-scrollbar,
  .app-root > aside [style*="overflow"] {
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- 2.7 触屏上没有 hover，去掉靠悬停才出现的废操作 ---------- */
  .m3-tile:hover { transform: none; }
}

/* --- 2.8 轻提示（M3 snackbar 样式），用于解释「删不掉」这类静默失败 ----- */
.m3m-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 70;
  width: max-content;
  max-width: min(92vw, 420px);
  padding: 14px 18px;
  border-radius: 16px;
  background: #322F35;
  color: #F5EFF7;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-line;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .34);
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.2, 0, 0, 1), transform .22s cubic-bezier(.2, 0, 0, 1);
  font-family: inherit;
}
.m3m-toast[data-on] {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- 3. 横屏 / 矮屏：图标栏比屏幕还高时，允许它自己滚 ---------------- */
@media (max-height: 640px) {
  .app-root > aside > div:first-child {
    overflow-y: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .app-root > aside > div:first-child::-webkit-scrollbar { display: none; }
  .app-root > aside { max-width: calc(100vw - 24px); }
}