/**
 * DK AI Reminder — Canvas 一次性 AI 就绪提醒（V1）
 *
 * 定位：画布右侧、颜色胶囊正上方的小图标（✨ AI）。不是常驻按钮，不是
 *   Canvas AI 工具入口，不绑定任何画布对象 —— 只是「你这张照片的 AI 风格
 *   已经做好了」这一次性信号，点进去即消失。
 *
 * 几何（八、禁止进入颜色 flex 布局）：
 *   - 挂 #dkShell 直接子元素，absolute overlay，与 #dkColorWrap 平级。
 *     出现 / 消失不参与任何 flex 流，不会推动 Color / FAB / Drawer。
 *   - right: 12px —— 与 Share FAB / stage 胶囊 / 色板同一条右基线。
 *   - top 默认值是纯 CSS 回退落点（画布垂直中线上方 110px）；色板可测量时
 *     由 dk-ai-reminder.js 一次性写 inline top 贴到胶囊上沿（色数不同胶囊
 *     高度不同，CSS 无法静态算出，故测量落在 JS 侧）。
 *
 * 显隐（准则 4：状态驱动 class，opacity + pointer-events，禁 display:none）：
 *   - .dk-air-show   = 本层判定「该提醒」（四条显示条件全中）。
 *   - .dk-air-pulse  = 首 5 秒呼吸高亮；之后自动摘除，留 settled 小图标。
 *   - 非纯画布态跟随 dk-share-ux 的 #dkShell.dk-sux-on / .dk-sux-canvas，
 *     与 dk-canvas-fabs.css 共用同一状态公式（该层未启用时规则零生效）。
 */

@media (max-width: 768px) {

  #dkAiReminder {
    position: absolute;
    right: 12px;
    /* 纯 CSS 回退落点：色板不可测量（无色产品 / 尚未构建）时的保底位置。
       公式与 .dk-float-right 的垂直居中同源，再上移 110px。 */
    top: calc(50% - var(--dk-nav-h, 64px) / 2 + var(--dk-nav-top-h, 44px) / 2 - 110px);

    box-sizing: border-box;
    min-width: 46px;          /* 与收起态色板胶囊同宽，右边线齐平 */
    height: 32px;
    padding: 0 9px;
    display: flex; align-items: center; justify-content: center;
    gap: 3px;

    /* 与 Share FAB / stage 胶囊同一毛玻璃视觉系统 */
    border: 1px solid var(--dk-glass-border, rgba(255,255,255,0.6));
    border-radius: 16px;
    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);

    color: #3f4652;           /* Lumise 官方工具栏深灰，不自造强调色 */
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;

    z-index: 90;              /* 与 Share FAB / stage 胶囊同层：低于抽屉(100+)与遮罩(102/128) */

    /* 默认不可见：只有拿到 .dk-air-show 才出现（准则 4） */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  #dkAiReminder .dk-air-spark {
    font-size: 12px;
    line-height: 1;
  }

  #dkAiReminder.dk-air-show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  #dkAiReminder:active {
    transform: scale(0.92);
  }

  /* ── 首 5 秒：呼吸高亮（JS 到点摘 class → 自动落为 settled 小图标） ── */
  #dkAiReminder.dk-air-pulse {
    animation: dk-air-pulse 1.5s ease-in-out infinite;
  }

  @keyframes dk-air-pulse {
    0%, 100% {
      box-shadow: 0 4px 14px rgba(28, 28, 60, 0.12),
                  0 0 0 0 rgba(124, 92, 255, 0.34);
    }
    50% {
      box-shadow: 0 4px 14px rgba(28, 28, 60, 0.12),
                  0 0 0 7px rgba(124, 92, 255, 0);
    }
  }

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

  /* ── 降低动态效果偏好：去掉呼吸与位移，仍保留出现/消失 ── */
  @media (prefers-reduced-motion: reduce) {
    #dkAiReminder {
      transition: opacity 0.22s ease;
      transform: none;
    }
    #dkAiReminder.dk-air-show { transform: none; }
    #dkAiReminder.dk-air-pulse { animation: none; }
  }

}