/* ================= v400：「开发预览」= 无限画布上的两个浮层窗口 ================= 用户口径（原话）： · 「"开发预览" 不是独立页面，而是在无限画布上同时打开两个浮层窗口：游戏预览窗口 + AI 聊天窗口。 点击 "开发预览" 按钮 = 同时打开这两个窗口，并在两个窗口增加一个和画布底色相同颜色的颜色层 （渐变出现，用于视觉上达到无限画布上节点隐藏的效果，只要这两个任意窗口关闭，颜色层渐变消失）。」 · AI 聊天窗口（右下角）：高度与开发预览页面的聊天框一致；窗口顶部有最小化按钮（收回右下角小按钮）； 展开时右下角的聊天小按钮隐藏；**只能按住窗口左边缘**左右拖动调整宽度。 · 游戏预览窗口（左下角）：高度同上；有最小化按钮（收回左下角那颗键的位置）； 展开时左下角的功能按钮区域（.zoom-pill）整块隐藏；**只能按住窗口右边缘**左右拖动调整宽度。 ⚠️ v402 起「同角那组键整块隐藏」这条**作废**：两窗下沿抬到 84px 之后底部按钮区照常可见可用 （用户令「不遮挡底部按钮区」）；另加「游戏预览窗右上角那颗小窗口键」→ 见 styles/18-ai-pip402.css。 层叠：颜色层是浮窗容器里的**第一个**子元素，两窗在它之后 ⇒ 同层内按 DOM 顺序，两窗恒在颜色层之上。 浮窗状态机在 js/src/72-ai-float397.js（本文件只补外壳），挂载与同步在 js/src/74-ai-float400.js。 */ /* ---------- ① 两窗尺寸 ---------- v400 原本照抄整页那两栏（top:62 / bottom:10 = 视口高 - 72px）； **v402 起下沿抬到 84px**（用户令「底部高度往上移动，不遮挡底部按钮区」）⇒ 比整页矮 74px。 */ /* v402：下沿 10px → **84px**（用户令「底部高度往上移动，不遮挡底部按钮区」）。 让开的是三块同角的东西：左下角缩放胶囊（14~46）/ 右下角对话圆钮（14~60）/ 缩放拖动条（52~76）。 */ .ai285-float397>.ai-left285{ top:62px;bottom:84px;height:auto;left:14px;width:460px; } /* v402：默认宽度 372px → **16vw**（≈ 页面宽度的 16%；1440 屏下约 230px）。 `min-width` 必须跟着放到 176（styles/14 那条 `min-width:280px` 会顶住 width ⇒ 16vw 落不下来）。 */ .ai285-float397>.ai-right285{ top:62px;bottom:84px;height:auto;right:14px;width:16vw;min-width:352px;max-width:calc(100vw - 28px); flex-direction:column; /* 整页那会儿是左右排（只装聊天区）；浮窗多了顶栏 ⇒ 改成上下排 */ } /* v400：v397 的 `resize:both` 退役 —— 改由「指定那一条边」的手柄调宽（见 ④） */ .ai285-float397>.ai-left285, .ai285-float397>.ai-right285{resize:none} /* ---------- ② 颜色层：和画布底色同色，盖住无限画布上的节点 ---------- 口径：**两窗都开**才亮（关掉任意一个 ⇒ 渐变灭）。所以开单窗（V 键 / 右下角圆钮）时画布照常可见。 `.aiveil400` 的底色取 `--canvas`（= 全站「画布底」，与 --bg 同一个值），不发明一次性颜色。 顶栏留出来（top:62px 起）—— 否则两窗全开后顶栏被盖住就出不来了。 */ .aiveil400{ /* v402：下沿抬到 84px —— 颜色层亮着时是 `pointer-events:auto`，压到底部按钮区会把它们一起吞掉。 */ position:fixed;left:0;right:0;top:62px;bottom:84px;z-index:0; /* ⚠️ 必须写 `background-color:` 这个**完整属性名** —— 与画布本体（styles/04-canvas.css 的 .canvas-wrap）同一写法；别图省事缩写成 `background:` 简写。 */ background-color:var(--canvas); opacity:0;pointer-events:none;transition:opacity .28s ease; } .aiveil400.on400{opacity:1;pointer-events:auto} /* 亮起来顺带把画布交互也吞掉：看不见的节点不该还能点到 */ /* 「渐变出现」必须走 **animation**，不能只靠 transition：开两窗时 `.ai-page285` 刚从 `hidden`（display:none）里翻出来，同一帧里浏览器**不会**给「上一帧不在渲染树上的元素」 补间 ⇒ transition 会直接以 opacity:1 出现、渐变看不见。animation 不吃这条限制 —— 元素一进渲染树就从 from 帧播。渐变**消失**那边（关掉任一窗、页面还留着）照旧吃上面那条 transition（元素本来就在渲染树里，1 → 0 正常补间）。 */ @keyframes aiveilIn400{from{opacity:0}to{opacity:1}} .aiveil400.on400{animation:aiveilIn400 .28s ease both} /* ---------- ③ 窗口顶栏（只在浮窗模式出现）：标题 + 最小化键 ---------- */ .aibar400{ display:none;flex:0 0 30px;align-items:center;gap:8px;padding:0 6px 0 12px; border-bottom:1px solid var(--line);background:var(--card); font-size:12px;font-weight:600;color:var(--text);user-select:none; } .ai285-float397>.ai-left285>.aibar400, .ai285-float397>.ai-right285>.aibar400{display:flex} .aibar-t400{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .aibar-min400{ flex:0 0 auto;width:22px;height:22px;padding:0;border:1px solid transparent;border-radius:6px; background:transparent;color:var(--text-2);display:grid;place-items:center;cursor:pointer; transition:background .15s,color .15s,border-color .15s; } .aibar-min400:hover{background:var(--sunken);border-color:var(--line);color:var(--accent)} .aibar-min400 svg{width:13px;height:13px;display:block} /* ---------- ④ 单边拖宽手柄：左窗只认**右缘**、右窗只认**左缘** ---------- 6px 细条贴在窗口内侧那条边上；两窗各自的「自由边」正好朝画面中间，拖起来手感一致。 */ .aigrip400{ display:none;position:absolute;top:0;bottom:0;width:6px;z-index:3; cursor:col-resize;touch-action:none;background:transparent; transition:background .15s; } .ai285-float397>.ai-left285>.aigrip400{display:block;right:0} .ai285-float397>.ai-right285>.aigrip400{display:block;left:0} .aigrip400:hover,.aigrip400.on400{background:var(--accent-soft)} body.aif-resize400{cursor:col-resize} body.aif-resize400 .ai-left285,body.aif-resize400 .ai-right285{user-select:none} /* ---------- ⑤ 展开时收掉同角那组键（免得和窗口叠在一起） ---------- */ /* ---------- ⑤ v402：底部按钮区**不再收掉** ---------- 用户令「底部高度往上移动，不遮挡底部按钮区」⇒ 两窗下沿抬到 84px 之后，左下角功能键区 （V / M / L / S / C + 缩放）与右下角那颗对话圆钮整块露出来，照常可见可用。 旧口径「窗口盖住它们 ⇒ 一并收掉」是权宜之计，作废。 */ /* 只剩小地图仍要收：它 190×132（left:14 bottom:58），下沿比窗口还低 26px ⇒ 展开时必然与游戏窗叠在一起。 */ body.aif-l400 .mini-map{display:none!important} /* ---------- ⑥ 两窗都开着时，顶栏那颗「开发预览」键给个「正在用」的视觉 ---------- 它不再是分段（点了不再进整页），所以不去抢 flow 那侧的高亮，只描一圈强调色。 ⚠️ `.seg button` 是 `border:none` ⇒ 只写 `border-color` 什么都看不见，必须用 `box-shadow` 描边（与右下角圆钮的 `aria-pressed` 态同款写法），也不会顶动布局。 */ body.aif-l400.aif-r400 #workSeg [data-seg="home"]{color:var(--accent);box-shadow:0 0 0 1px var(--accent)} /* ================= v405：两窗再往下点 / 圆钮缩小换 icon / 滚动条默认隐藏 ================= 用户口径（原话）：「让两个高度统一的同时，把那个游戏预览的高度再往下移一点；右边那个 是不是会变得很紧？那就把右下角那个对话的按钮要缩小，把那个聊天的图标缩小；然后现在 这个图标不好看，改一下。然后 AI 对话里面那个上下滑动的条，正常情况下是隐藏的，只有 鼠标移动到那个位置、或者说正在滑动的时候才显示。」 */ /* ---------- ⑦ 两窗下沿 84px -> **68px**（整体往下 16px；两窗 top / bottom 仍相同 => 高度继续统一） ---------- 68px 的量化依据（与 v402 那三块同源）： 缩放胶囊 14~48 完整让开；缩放拖动条 52~76 只压掉底缘 8px（轨道中心 ~64，11px 滑块完整可见）； 对话圆钮缩到 38px 后 = 14~52 => 窗下沿距圆钮顶还留 16px。 ⚠️ 颜色层 `.aiveil400` **必须同拍跟随**：它亮着时是 `pointer-events:auto`，压到底部按钮区会把它们一起吞掉。 ⚠️ 上面 v402 那条 `bottom:84px` 原文一字未动（闸门钉着）—— 这里走**同选择器后置规则覆盖**。 */ .ai285-float397>.ai-left285, .ai285-float397>.ai-right285{top:62px;bottom:68px} .aiveil400{top:62px;bottom:68px} /* ---------- ⑧ 右下角那颗圆钮缩小：46px -> **38px**（icon 22px -> 19px） ---------- 口径与 v402 同源：窗子往下压会把右下角挤紧 => 把圆钮收一圈，窗下沿与圆钮之间重新留出 16px。 `bottom:14px` 锚点不动（它与左下角缩放胶囊、左边那组功能键同在 14 这一条线上）。 */ .aifab397{width:38px;height:38px} .aifab397 svg{width:19px;height:19px} /* ---------- ⑨ AI 对话（两个浮窗里所有滚动区）滚动条**默认隐藏**，鼠标进入 / 正在滑动时才显形 ---------- `:hover` 一条就同时覆盖两种情形 —— 滚轮滚 / 拖滑块时指针必然落在滚动区里。 颜色取主题变量 `--line-strong`（与地图素材列表 `.map-asset-list` 同款），不发明一次性颜色。 下面两组：标准属性（新版 Chrome / Firefox 认，认了就会忽略 webkit 那组）+ webkit 兜底（旧内核）。 */ .ai-msgs285,.ai-think-b285,.ai-pre285,.ai-ta285,.ai-tree329,.ai-pre329{ scrollbar-width:thin;scrollbar-color:transparent transparent; } .ai-msgs285:hover,.ai-think-b285:hover,.ai-pre285:hover,.ai-ta285:hover,.ai-tree329:hover,.ai-pre329:hover{ scrollbar-color:var(--line-strong) transparent; } .ai-msgs285::-webkit-scrollbar,.ai-think-b285::-webkit-scrollbar,.ai-pre285::-webkit-scrollbar, .ai-ta285::-webkit-scrollbar,.ai-tree329::-webkit-scrollbar,.ai-pre329::-webkit-scrollbar{width:8px;height:8px} .ai-msgs285::-webkit-scrollbar-track,.ai-think-b285::-webkit-scrollbar-track,.ai-pre285::-webkit-scrollbar-track, .ai-ta285::-webkit-scrollbar-track,.ai-tree329::-webkit-scrollbar-track,.ai-pre329::-webkit-scrollbar-track{background:transparent} .ai-msgs285::-webkit-scrollbar-thumb,.ai-think-b285::-webkit-scrollbar-thumb,.ai-pre285::-webkit-scrollbar-thumb, .ai-ta285::-webkit-scrollbar-thumb,.ai-tree329::-webkit-scrollbar-thumb,.ai-pre329::-webkit-scrollbar-thumb{background:transparent;border-radius:4px} .ai-msgs285:hover::-webkit-scrollbar-thumb,.ai-think-b285:hover::-webkit-scrollbar-thumb,.ai-pre285:hover::-webkit-scrollbar-thumb, .ai-ta285:hover::-webkit-scrollbar-thumb,.ai-tree329:hover::-webkit-scrollbar-thumb,.ai-pre329:hover::-webkit-scrollbar-thumb{background:var(--line-strong)} /* ---------- ⑪ v407：颜色层盖满整个视口 + 合并态顶栏提到 49 ---------- 用户口径（原话）：「之前用于达到视觉上节点隐藏效果的颜色层，没有完全覆盖画布，现在只隐藏了 中景区域，上下没有隐藏，更改为遮住整个画面。」 v405 那条 `top:62px;bottom:68px` 原文一字未动（闸门钉着）—— 这里同选择器后置覆盖成 top/bottom 双 0。 ⚠️ 顶栏 z30 低于浮窗容器 z48：盖满后顶栏会被颜色层压住（关闭 / 切换键点不到）⇒ 两窗都开（body.aif-l400.aif-r400）时把顶栏提到 49。颜色层的新触发条件见 js/src/74 的 aifTouch407。 */ .aiveil400{top:0;bottom:0} body.aif-l400.aif-r400 .topbar{z-index:49} /* ================= v409：默认贴在一起 / 顶栏「开发预览」键同款高亮 / 底部两区抬到颜色层之上 ================= 用户口径（原话）： · 「把上面的开发预览的那个按钮模式和无限画布地图绘制显示弄成一样的」 · 「点它的时候，这个游戏预览的窗口和那个 AI 对话的那个窗口默认是贴在一起的」 · 「现在它那个颜色层把左下角和右下角的图标也遮住了，我的目的只是想让它遮住画布…不要遮住那个 左下角和右下角的图标 ⇒ 将那两个图标区域的图层，比这个颜色层的图层更高就行了」 */ /* ---------- ① 顶栏「开发预览」键的「正在用」态 = 与「无限画布 / 地图绘制」那份 .on **一模一样** ---------- JS 侧（74-ai-float400.js 的 aifSegHome409）在两窗都开时给这颗键挂上 `.on`（互斥：另两颗摘掉）， 所以这里只要**抵消 v400 那条描边口径**（`color:var(--accent);box-shadow:0 0 0 1px`）—— 那句原文一字未动， 用同选择器后置覆盖成 `.seg button.on` 的同一组值（实底强调色 + `#0b0d12` 字 + 同一条投影）。 */ body.aif-l400.aif-r400 #workSeg [data-seg="home"]{ background:var(--accent);color:#0b0d12;box-shadow:0 3px 9px rgba(20,214,255,.28); } /* ---------- ② 默认布局：两窗**贴在一起**（各占一半，中缝 = AIF_GAP407 的 12px） ---------- 40px = 左 14 + 右 14 + 中缝 12 ⇒ 两窗等宽 ⇒ 右窗左缘正好落在「左窗右缘 + 12」上。 上面 v400/v402 那两条默认宽度（`width:460px` / `width:16vw;min-width:352px`）原文一字未动（闸门钉着）， 这里同选择器后置覆盖 width（右窗的 min-width 不动 —— 窄视口仍由 352px 兜底）。 */ .ai285-float397>.ai-left285{width:calc((100vw - 40px) / 2)} .ai285-float397>.ai-right285{width:calc((100vw - 40px) / 2)} /* ---------- ③ 左下角功能胶囊（含缩放拖动条）+ 右下角圆钮：**抬到颜色层之上** ---------- 颜色层是浮窗容器（z48）里的第一个子元素 ⇒ 容器里的东西都压在 z47 这两块之上（用户报「把图标也遮住了」）。 口径：只把这两个「功能入口」抬到 49（与 v407 的合并态顶栏同一条线），**画布照旧被颜色层盖住**。 `.zoom-pop` 一起抬 —— 它是胶囊里那颗百分比弹出来的拖动条，不抬就点不开（看不见）。 */ body.aif-l400.aif-r400 .zoom-pill{z-index:49} body.aif-l400.aif-r400 .zoom-pop{z-index:49} body.aif-l400.aif-r400 .aifab397{z-index:49}