/* ================= v651：帧图墙拖拽排序的视觉反馈 —— 插入位指示线 / 原位占位 / 幽灵 =================
   工单 W651-01（用户 2026-10-15 深夜）：
     「调整顺序的功能不好用，优化一下，拖拽时，能清晰看到要放在哪个位置」

   ★ 三层视觉各自的职责（缺一不可）：
     ① **插入位指示线**（`.seqdrag-line651`）= 「会放哪」—— 一条跨格高的主题色竖线
        + 上下小三角。★ 这是 DnD 里最关键的一块反馈。
     ② **原位占位**（`.seqdrag-hole651`）= 「它原来在这」—— 虚线空框，
        拖走之后**行宽不塌陷**，始终看得到原位。
     ③ **幽灵**（`.seqdrag-ghost651`）= 「我手里拿着这一格」—— 半透明跟着光标，
        手指不会"失去"那一格。

   ⚠️ 本表是唯一新增文件：31 / 33 / 45 / 46 / 53 / 55 / 56 **一字未动**。 */

/* 拖拽进行中：墙内光标变「抓」 */
.seqedit-grid573.seqdrag-on651,
.seqedit-grid573.seqdrag-on651 .frame-cell{cursor:grabbing!important}

/* ============================================================================
   ① 插入位指示线
   ============================================================================ */
.seqdrag-line651{
  position:absolute;z-index:120;display:none;
  width:2px;margin-left:-1px;                /* 以线心对齐算出来的 x */
  background:var(--accent);
  border-radius:2px;
  pointer-events:none;                        /* ★ 绝不吃事件，否则拖到线上就断了 */
  box-shadow:0 0 0 1px var(--accent-soft),0 0 8px var(--accent-soft);
  animation:seqdragPulse651 .9s ease-in-out infinite;
}
@keyframes seqdragPulse651{0%,100%{opacity:1}50%{opacity:.62}}

/* 上下小三角（线头）—— 用伪元素画，不额外占元素 */
.seqdrag-line651::before,.seqdrag-line651::after{
  content:'';position:absolute;left:50%;margin-left:-4px;
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
}
.seqdrag-line651::before{top:-3px;border-top:5px solid var(--accent)}
.seqdrag-line651::after{bottom:-3px;border-bottom:5px solid var(--accent)}

/* ============================================================================
   ② 原位占位（孔）
   ============================================================================ */
.seqdrag-hole651{
  position:absolute;z-index:118;display:none;
  border:1px dashed var(--line-strong);border-radius:8px;
  background:var(--sunken);                   /* 极浅的一层底，和「空位」读得出来 */
  pointer-events:none;
  box-sizing:border-box;
}

/* ============================================================================
   ③ 幽灵（跟着光标的那一格）
   ============================================================================ */
.seqdrag-ghost651{
  position:fixed;z-index:121;display:none;    /* ★ fixed：不受 grid 的定位上下文影响 */
  pointer-events:none;opacity:.72;
  border:1px solid var(--accent);border-radius:8px;
  background:var(--card);
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  overflow:hidden;
  box-sizing:border-box;
  transform:rotate(-1.5deg);                 /* ★ 轻微倾斜 = 「拿起来了」的通用暗示 */
}
/* 幽灵里那格本身不要它自己的描边（外面已经有一圈） */
.seqdrag-ghost651 .frame-cell{
  border-color:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}
.seqdrag-ghost651 canvas{width:100%!important;height:100%!important;object-fit:contain!important;display:block}

/* ============================================================================
   定位上下文
   —— 线与孔是 `position:absolute`，挂在 `document.body` 下（JS 直接 append 到 body）
      ⇒ 必须给 body 一个 relative，否则会相对整页定位、滚一下就错位。
      ★ 幽灵是 `position:fixed`（跟光标走，不需要这个）。
   ============================================================================ */
body{position:relative}