/**
 * DK Canvas FABs — 画布浮动控件样式（Phase B：Canvas Control UI）
 *
 * 布局（底部同高基线，与 Share FAB 同毛玻璃视觉系统）：
 *   Share(左 12px，dk-share-aff.js 提供，本文件零触碰)
 *   Stage Selector(#dkStageFab，右 12px，白色圆角胶囊，高度对齐 Share 44px)
 *
 * 视觉原则：灰阶（当前面深灰 #3f4652 = Lumise 官方工具栏灰，非当前浅灰），
 *   不用青绿/紫色强调 —— 视觉重点留给产品与 Share。阴影为中性轻投影。
 *
 * 显隐规则：
 *   - 纯画布态：跟随 dk-share-ux 的 #dkShell.dk-sux-on / .dk-sux-canvas
 *     状态 class（drawer / templates / gallery / checkout / modal 打开时隐藏；
 *     该 adapter 未启用时无 dk-sux-on 标记 → 隐藏规则零生效，控件常驻，
 *     与 Share FAB 回退行为一致，准则 6）。
 *   - 单面产品：dk-canvas-fabs.js 依 stage 数挂 .dk-fab-hidden（准则 4：
 *     状态驱动 class 映射 —— opacity + pointer-events，禁 display:none）。
 *
 * safe-area：bottom 锚定 var(--dk-nav-h)（底部导航自身高度已含
 * env(safe-area-inset-bottom)，与 Share FAB 同源，勿另加安全区偏移）。
 */

@media (max-width: 768px) {

  /* ── 公共基座：毛玻璃/阴影/层级/显隐（形状由具体控件定义） ── */
  .dk-canvas-fab {
    position: absolute;
    bottom: calc(var(--dk-nav-h, 64px) + 14px);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--dk-glass-border, rgba(255,255,255,0.6));
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(28, 28, 60, 0.12);  /* 中性轻投影，不抢 Share */
    z-index: 90;                /* 与 Share FAB 同层：低于抽屉(100+)与遮罩(102/128) */
    pointer-events: auto;
    transition: opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }

  /* ── 右下：stage selector 胶囊（高度对齐 Share FAB 44px） ── */
  .dk-stage-fab {
    right: 12px;
    height: 44px;
    padding: 0 5px;
    gap: 2px;
    border-radius: 22px;
  }

  /* 分段按钮：当前面深灰 + 极浅底，非当前浅灰 */
  .dk-stage-seg {
    width: 36px; height: 36px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: transparent;
    color: #C2C6CF;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .dk-stage-seg:active { transform: scale(0.92); }
  .dk-stage-seg svg { width: 21px; height: 21px; }
  .dk-stage-seg.dk-active {
    color: #3f4652;                       /* Lumise 官方工具栏深灰 */
    background: rgba(63, 70, 82, 0.08);   /* segmented 高亮底，克制不抢产品 */
  }

  /* ── 单面产品：胶囊隐藏（opacity + pointer-events，禁 display:none） ── */
  .dk-canvas-fab.dk-fab-hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* ── 非纯画布态（抽屉/顶部抽屉/Order/Templates/AI Lab 打开）：隐藏。
        规则与 dk-share-ux.css 的 Share FAB 段完全同构，共用同一状态公式。 ── */
  #dkShell.dk-sux-on:not(.dk-sux-canvas) .dk-canvas-fab {
    opacity: 0;
    pointer-events: none;
  }

}