/* ================= v610：角色子画布容器 → 照 AI 对话框那套（工单 W608-03） =================
     用户口径（原话）：「把角色的子画布改成 AI 对话框那种 —— 高度用对话框那套、默认宽度半个视口、
     可以从左边框拖拽调宽」。

     样板（styles/16-ai-float400.css）与本文件的三点对应：
       ① 高度：`.ai285-float397>.ai-left285/.ai-right285{top:62px;bottom:68px}`（= 视口高 − 130px）
          ⇒ 这里 `.sub401{top:62px;bottom:68px}`（纯 CSS，无 JS 参与）。
       ② 默认宽：`.ai285-float397>.ai-left285/.ai-right285{width:calc((100vw - 40px) / 2)}`
          ⇒ 这里 `body.sub401-on{--sub401w:calc((100vw - 40px) / 2)}`。
       ③ 左框拖宽：手柄外观 + 拖拽交互（JS 在 js/src/136-subcanvas610.js，写**行内 style.width**）。

     ⚠️ 既有片段原文一字未动（four 套闸门钉着 17-sub-canvas401.css 里那几条字面量：
        `body.sub401-on{--sub401w:min(...)}` / `.sub401-frame{...aspect-ratio:16/9` /
        `.sub401-bar{...height:32px` / `body.sub401-on #canvasWrap{clip-path:inset(`）。
        本文件只用**同选择器后置规则覆盖**，不改它们；本文件的 `<link>` 必须挂在 17 之后。
     ⚠️ 没动子画布**逻辑**：窗口矩形( #sub401Frame )是 75-sub-canvas401.js 每帧实时量的
        （sub401FrameRect）⇒ 容器一改尺寸，fr421 面板夹取 / 取景 / 站窗自动跟着走。 */

  /* ---------- ① 默认宽 = 半个视口（同选择器后置覆盖 17 的 min(...) 口径） ---------- */
  body.sub401-on{--sub401w:calc((100vw - 40px) / 2)}

  /* ---------- ② 容器 = 右锚窗口 + 对话框那套高度（top:62 / bottom:68） ----------
     17 的 `.sub401{position:fixed;inset:0;...}` 原文未动，这里把四边收窄成右侧窗口：
     left:auto + right:14px ⇒ 右锚；top/bottom 钉成对话框那套（= 视口高 − 130px）。 */
  .sub401{
    top:62px;bottom:68px;right:14px;left:auto;
    width:var(--sub401w);height:auto;
  }

  /* ---------- ③ 标题栏在上、画布窗口撑满余下高度 ----------
     `.sub401` 是 column-reverse（17 原文），DOM 里 frame 在前 ⇒ 视觉上标题栏在上、frame 在下；
     frame 取剩余高度（= 视口高 − 130px − 标题栏 32px − 间隙 8px），不再是 16:9 定比。 */
  .sub401-bar{width:100%;flex:0 0 auto}
  .sub401-frame{width:100%;flex:1 1 auto;min-height:0;height:auto;aspect-ratio:auto}

  /* ---------- ④ 窗外整层裁剪（同 v404「窗外不露主画布、也不可点」的口径，矩形跟着新容器走） ----------
     inset(top right bottom left)：top = 62(容器顶) + 32(标题栏) + 8(间隙) = 102px；
     right = 14px；bottom = 68px；left = 14px + --sub401w（窗口宽由 CSS 变量驱动 ⇒ 拖宽时同拍跟随）。 */
  body.sub401-on #canvasWrap{
    clip-path:inset(102px 14px 68px calc(14px + var(--sub401w)) round 16px);
  }

  /* ---------- ⑤ 子画布里的参数面板：限高跟着新窗口高（17 那条按 16:9 算的已不适用） ----------
     窗口高 = 100vh − 130px；再让开标题栏 32 + 间隙 8 + 一点内边距 ⇒ 面板最多 100vh − 190px。 */
  body.sub401-on .sheet{max-height:calc(100vh - 190px)}

  /* ---------- ⑥ 左边框拖宽手柄（图样 = #aiGripR400；作用对象是子画布窗口 #sub401） ---------- */
  .subgrip610{
    position:absolute;left:0;top:0;bottom:0;width:6px;z-index:3;
    cursor:col-resize;touch-action:none;background:transparent;
    pointer-events:auto;transition:background .15s;
  }
  .subgrip610:hover,.subgrip610.on610{background:var(--accent-soft)}
  body.sub610-resize{cursor:col-resize}