/* ============ 页面 token：明暗三态 + 主题色轴 ============ */
:root {
--shell-bg: #efede6;
--frame: #1e1c17;
--bg: #f7f5ef;
--bg-2: #ede9de;
--bg-3: #e8e3d4;
--bg-4: #f3f0e7;
--bg-5: #fcfbf7;
--surface: #ffffff;
--surface-2: #fbf9f3;
--surface-3: #f4f1e8;
--warm: #e6e0d2;
--warm-strong: #dad3c2;
--warm-soft: #efeadd;
--ink: #26241f;
--ink-2: #8b8577;
--ink-3: #3a352c;
--ph: #b0ab9e;
--line: #e9e5da;
--line-2: #ddd8cb;
--line-3: #e0dbce;
/* 地图上那些圆盘的暖橙（阶段节点 `.journey-node-circle` 与子节点 `.journey-kid-disc`；
子节点那条注释本来就写着"和阶段节点同一套填色"）。2026-10-01 起**页内圆形图标钮的高亮**
也用它——用户要求"这 3 个按钮高亮背景色对齐地图页节点"。 */
--node: #cf8749;
--line-4: #f0ece2;
/* 门/窗在画布上的颜色（用户 2026-10-05 第八十三条：「门和窗使用区别于墙体的不同颜色，
这样容易看清楚」）。⚠ 别再退回 `#3F7C5C`：那是**房间底色与内墙**那一族的绿 ✗，
门窗混在里面根本分不出来（用户报的就是这个 ✓）。紫与绿/蓝/橙都分得开，
而且"选中"那颗橙（`--node`）压在它上面照样一眼看出来 ✓。 */
/* 门窗（门扇/门窗符号/窗那对双线/D1·W1 那行小字）的色号。⚠ **一个变量说了算** ✓。
用户 2026-10-06 第一百零三次：「加粗未选中的门窗线条，颜色换一下（紫色不太明显）」
⇒ 从 `#6b5b95`（紫 ✗ 压在米色底图上确实不显）换成蓝：先在靛蓝 `#2f6db5` 上停了一版，
用户要**浅一档** ⇒ `#5b9bd5`（天蓝 ✓ 在米色底图上够亮、与"选中"那支暖橙 `--node` ✓
一眼分得开，也不跟房名那支深绿 `#1F4D35` ✓ 撞 ✓）。 */
--cf-opening: #5b9bd5;
/* 面板/表里几种控件共用的一个高度（对齐「原图」开关）。⚠ 2026-10-05 从 `.cf-edit` 提到 `:root`：
门窗编辑表**不在** `#cf-edit` 里面（它是另一张 Sheet），可里面也用着它
（`.cf-dim-input` 那颗「洞口净宽」与新的多档开关）——变量挂在 `.cf-edit` 上时那几处**取不到值**，
`min-height: var(--cf-ctl-h)` 整条作废（盒子掉回文字那么高，一直没人报，因为只是矮一截）。 */
--cf-ctl-h: 32px;
/* **叶知秋那一族（头像 ＋ 气泡）的几何**：一个数只说一遍 —— `.guide`（头像的落点与大小 ✓）、
`.guide-bubble`（气泡离头像多远 ✓）与 `.cf-folder`（内容区下沿要**让开**它 ✓）三处共用。
用户 2026-10-16：「减小内容区高度，下沿应避让设计师气泡（内容按 2 行算）」✓。 */
--guide-face: 64px; /* 小态头像的边长（`.guide` 里那颗 `--face` 同值 ✓） */
--guide-bottom: 24px; /* 头像离屏幕底 */
--guide-gap: 14px; /* 气泡与头像之间那道缝 */
/* 气泡**按 2 行算**的高度（用户点名 ✓）：字 13px × 行距 1.55 × 2 ＝ 40.3 ＋ 上下内边距 10×2
＋ 上下描边 1.5×2 ≈ 63（实测 2 行时 62 ✓）。⚠ 不是"把气泡截成 2 行"✗ —— 说的是**预留**多少 ✓。 */
--guide-bubble-2l: 63px;
--accent: #3f7c5c;
--accent-soft: #e3ede6;
--accent-strong: #2e6b4d;
--amber: #c07b3a;
--blue: #2e6b8f;
--danger: #e0483a;
--bubble: rgba(255, 255, 255, 0.82);
--bubble-edge: rgba(255, 255, 255, 0.9);
--bubble-soft: rgba(255, 255, 255, 0.58);
--bubble-me: rgba(58, 53, 44, 0.58);
--bubble-me-ink: #f4efe6;
--stream-1: rgba(255, 255, 255, 0.5);
--stream-2: rgba(255, 255, 255, 0.22);
--stream-3: rgba(255, 255, 255, 0);
--mask: rgba(28, 26, 20, 0.45);
--intro-fallback: #c9e7f4;
}
/* ⚠ 主题色轴（`data-accent="ink"` / `"amber"` 两组覆盖）2026-10-10 **撤了**：
用户「去掉主题色」——品牌色就是松绿一种。`--accent` 与它那三档 `--warm*` 都回到
`:root` 的默认值 ✓（挑过墨色/暖橙的人，下一次打开就是这个默认色）。 */
/* 深色（跟随系统） */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--shell-bg: #171614;
--frame: #0e0d0b;
--bg: #1a1917;
--bg-2: #211f1c;
--bg-3: #262320;
--bg-4: #232019;
--bg-5: #2c2925;
--surface: #242220;
--surface-2: #2b2926;
--surface-3: #302d29;
--warm: #3e3a31;
--warm-strong: #4a463b;
--warm-soft: #37342b;
--ink: #edeae2;
--ink-2: #a29b8c;
--ink-3: #d9d3c4;
--ph: #6e6a5e;
--line: #3a362e;
--line-2: #454139;
--line-3: #3f3b32;
--line-4: #35322b;
--accent: #7cb491;
--accent-soft: #24362b;
--accent-strong: #9cc5ac;
--amber: #d9a05c;
--blue: #7fa7c4;
--danger: #e0483a;
/* ⚠ 暖橙在**深色下要提亮**（用户 2026-10-06：「深色下也覆写一下」）。它不只画在画布上
——页内的图标钮高亮、分段开关的滑块、地图那几个圆盘都用它 ✓，压在深底上原色偏闷 ✗。
借的就是深色那支 `--amber`（`#d9a05c` ✓ 同一族 ✓，不再新造一个色号 ✓）。
⚠ 代价明说：它在**画布上**（选中墙、拖放高亮、幽灵）压在米色的底图上，比原色淡一点 ✗ ——
但那几笔都是"粗线/大图标"（7px 线、34px 幽灵 ✓），看得清 ✓。 */
--node: #d9a05c;
--bubble: rgba(36, 34, 32, 0.85);
--bubble-edge: rgba(60, 56, 50, 0.9);
--bubble-soft: rgba(36, 34, 32, 0.55);
--bubble-me: rgba(226, 220, 206, 0.62);
--bubble-me-ink: #26241f;
--stream-1: rgba(26, 25, 23, 0.5);
--stream-2: rgba(26, 25, 23, 0.22);
--stream-3: rgba(26, 25, 23, 0);
--mask: rgba(0, 0, 0, 0.6);
--intro-fallback: #2a3a42;
}
}
/* 深色（手动） */
:root[data-theme="dark"] {
--shell-bg: #171614;
--frame: #0e0d0b;
--bg: #1a1917;
--bg-2: #211f1c;
--bg-3: #262320;
--bg-4: #232019;
--bg-5: #2c2925;
--surface: #242220;
--surface-2: #2b2926;
--surface-3: #302d29;
--warm: #3e3a31;
--warm-strong: #4a463b;
--warm-soft: #37342b;
--ink: #edeae2;
--ink-2: #a29b8c;
--ink-3: #d9d3c4;
--ph: #6e6a5e;
--line: #3a362e;
--line-2: #454139;
--line-3: #3f3b32;
--line-4: #35322b;
--accent: #7cb491;
--accent-soft: #24362b;
--accent-strong: #9cc5ac;
--amber: #d9a05c;
--blue: #7fa7c4;
--danger: #6e4a43;
/* 与"跟随系统"那一块同一个值、同一个理由（用户要求手动深色也一样 ✓）。 */
--node: #d9a05c;
--bubble: rgba(36, 34, 32, 0.85);
--bubble-edge: rgba(60, 56, 50, 0.9);
--bubble-soft: rgba(36, 34, 32, 0.55);
--bubble-me: rgba(226, 220, 206, 0.62);
--bubble-me-ink: #26241f;
--stream-1: rgba(26, 25, 23, 0.5);
--stream-2: rgba(26, 25, 23, 0.22);
--stream-3: rgba(26, 25, 23, 0);
--mask: rgba(0, 0, 0, 0.6);
--intro-fallback: #2a3a42;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* **全局不许选文本**（用户 2026-09-29）。这个应用里"拖动"**本来就是操作**——转视角、拖房间、
翻图纸——手指或鼠标一划就带出一片蓝色选中，是纯噪音。
⚠ `user-select` 是**继承**属性，所以写在 `body` 上就够；但也正因为是继承，**两处必须显式放行**：
① **输入框与可编辑区** —— 不放行的话，聊天输入框里的字选不中（实测里双击选不到词）；
② **调试面板** —— 那是开发者要看、要拷的东西。它只在 `?debug=1` 下存在，用户看不到，
所以不会把"误选"带回来。
要交给用户的文字（户型文件链接）走**剪贴板 API**，本来就不靠手工划选。
⚠ 判据是"真的选不中"，不是这条声明在不在——见 `tests/browser/ui-consistency.spec.js`：
那边真的双击一下再读 `window.getSelection()`。 */
body { user-select:none; -webkit-user-select:none; }
/* 能点的都是小手，按不动的都是"禁止"——**这一条只写一次**。
从前它散在几十条按钮规则里各写一遍，谁新写一颗忘了带就少一处：用户 2026-10-02 报的
「添加新家 Sheet 上鼠标指向确定按钮没有变成小手」就是 `.opening-actions button` 漏了。
⚠ 个别按钮有意用别的光标（拖拽把手 `grab`、占位行 `[data-disabled]` 的 `default`／
`not-allowed`）：它们都是**属性/伪类**选择器，specificity 比这两条高，照旧赢。 */
button:not(:disabled) { cursor:pointer; }
button:disabled { cursor:not-allowed; }
input, textarea, [contenteditable], #debug-panel { user-select:text; -webkit-user-select:text; }
/* 全屏页面（.page）排除在外：它们要能对 display 做过渡，而**带 !important 的声明
按规范不参与过渡**——包着 !important 就没法把隐藏推迟到滑出动画结束。见下面 .page 那段。 */
[hidden]:not(.page) {
display: none !important;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
background: var(--shell-bg);
color: var(--ink);
font-family:
-apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", sans-serif;
font-size: 15px;
line-height: 1.6;
min-height: 100vh;
}
.num {
font-variant-numeric: tabular-nums;
}
/* ============ 页面壳 ============ */
.shell {
max-width: 1120px;
margin: 0 auto;
padding: 40px 24px 56px;
}
.stage-wrap {
display: flex;
justify-content: center;
}
/* ============ 应用容器（桌面预览列 / 移动端全屏） ============ */
.app {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 430px;
height: min(860px, calc(100vh - 140px));
background: var(--bg);
border: 1px solid var(--line);
border-radius: 14px;
overflow: clip;
box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.35);
}
.app * {
-webkit-tap-highlight-color: transparent;
}
/* ============ 通用组件 ============ */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 14px;
}
.section-label {
font-size: 12px;
font-weight: 600;
color: var(--ink-2);
letter-spacing: 0.08em;
margin: 18px 0 8px;
}
.result-tip {
font-size: 11.5px;
color: var(--ink-2);
background: var(--surface-3);
border-radius: 10px;
padding: 8px 12px;
margin-top: 10px;
}
.std-row {
display: flex;
justify-content: space-between;
font-size: 12.5px;
padding: 7px 0;
color: var(--ink);
border-bottom: 1px dashed var(--line);
}
.std-row:last-child {
border-bottom: none;
}
.std-row b {
font-weight: 600;
}
/* ============ 按钮配色：一条规则，七类 ============
**判断只有一句**：点下去，事情是不是**就定了**？
· 定了（提交 / 确认 / 保存）→ 强调色实心（--accent + 白字）
· 只是再走一步（开一张表、开一个流程）→ 米色（--warm）或描边行
两类同色的话，用户在同一个弹层里只能靠读文字分辨；而"米色 = 再走一步、实心 = 落定"
这个差别是免费的。（曾经有一个 .primary-btn 是这套里的"实心"那颗，但没有任何调用方，
2026-09-23 删掉——真正在用的是 .opening-actions button。）
提交 / 确认 .opening-actions button（默认实心强调色）、.design-preview button.primary
—— 确定 / 保存 / 确认并保存需求 / 整理需求卡 / 保存尺寸 / 保存修改 / 应用修改
入口 .house-add（米色）、.entry-command 与 .assistant-commands button（描边行）
—— 添加新家 / 编辑 / 户型图页那两个去处 / 叶知秋面板那几行
次要（并存） .house-add-quiet、.opening-actions .secondary
—— 另开一套新房装它 / 先看户型 / 门窗表单里的删除
破坏性 .house-add-danger（红）——**只在不可逆时** / 删除一套房（它没有撤销）
还不能用 .add-upload、[data-disabled]（虚线）—— 上传户型图
提示里的出路 .budget-blocked button（白底 + 强调色描边与文字）—— 标注户型尺寸
浮动圆钮 .cf-fab 一族（右下角那组）——位置决定形态，不参与上面这套
两条容易踩的：danger / quiet / primary 三个变体**必须排在 .house-add 之后**（同权重下
靠后的赢，写在前面会被那层底色盖掉，实测）；**红只给不可逆的破坏**——户型图页删门窗是有
撤销的，所以它穿"次要"那颗，不标红。 */
/* ============ 设计入口（行动导向） ============ */
.suggest-row + .suggest-row {
border-top: 1px solid var(--line-4);
}
.suggest-empty {
padding: 12px 14px;
font-size: 12px;
color: var(--ink-2);
}
/* **搜索结果那一列**（2026-10-18：「在当前页面而不是新 tab 展示搜索结果」✓、「注明来源」✓）：
一条＝标题 ＋ 摘要（两行封顶）＋ 来源；整条可点，点开原页面 ✓。
⚠ 摘要是**别人的话** —— 只当线索 ✓，两行就够，别让一屏装不下第三条 ✓。 */
/* 加载态：转圈复用画布那一幕的 keyframes（`cf-recognize-spin` ✓，一个动画两处用 ✓）。 */
.suggest-loading {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
font-size: 12px;
color: var(--ink-2);
}
.suggest-ring {
width: 16px;
height: 16px;
box-sizing: border-box;
border: 2px solid var(--line-2);
border-top-color: var(--accent);
border-radius: 50%;
animation: cf-recognize-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.suggest-ring { animation: none; }
}
.estate-results {
margin: 0;
padding: 0;
list-style: none;
}
.estate-result {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 14px;
color: inherit;
text-decoration: none;
border-top: 1px solid var(--line-2);
}
.estate-result:first-child { border-top: 0; }
/* 「图标 ＋ 标题」一行（图标是搜索接口自带的站点图标 ✓ —— 不给裂图留位置 ✓）。 */
.estate-result-head {
display: flex;
align-items: center;
gap: 6px;
}
.estate-result-icon {
flex: 0 0 auto;
width: 16px;
height: 16px;
border-radius: 4px;
}
.estate-result-icon.is-off { display: none; }
.estate-result-title {
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.estate-result-snip {
font-size: 12px;
line-height: 1.5;
color: var(--ink-2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.estate-result-src {
font-size: 11px;
color: var(--ph);
}
.estate-result-note {
margin: 0;
padding: 10px 14px;
font-size: 11.5px;
line-height: 1.6;
color: var(--ink-2);
border-top: 1px solid var(--line-2);
}
.estate-result-more {
display: block;
padding: 10px 14px;
font-size: 12.5px;
color: var(--accent);
}
/* ⚠⚠ **两行用同一个网格**（用户 2026-10-19：「几个下拉菜单和输入框以及搜索按钮的布局不太美观」✓）：
原来两行各自是 flex ✗ ⇒ 第一行有搜索键、第二行没有 ⇒ **右边缘一长一短** ✗（实测 320 vs 366）。
现在列宽固定成"下拉一格 ＋ 其余一格" ⇒ 两行的输入框**同起同止** ✓。
⚠ 搜索键**收进输入框里**（绝对定位在那一行的右端 ✓）：既让两行齐平 ✓，也是搜索框该有的样子 ✓
—— 一颗方块键孤零零挂在输入框外面，就是原来那副"不美观" ✓。 */
.estate-search {
display: grid;
grid-template-columns: calc(4em + 48px) minmax(0, 1fr);
align-items: center;
gap: 8px;
position: relative;
}
/* 弹层里的**第二行**（几室几厅 ＋ 面积 ✓，用户 2026-10-19）：同一个网格 ✓，只多一条上间距 ✓。 */
.estate-search-extra { margin-top: 8px; }
.estate-search input {
width: 100%;
min-width: 0;
border: 1px solid var(--line-2);
border-radius: 10px;
padding: 8px 12px;
font: inherit;
font-size: 13px;
background: var(--surface);
color: var(--ink);
}
.estate-search input::placeholder {
color: var(--ph);
}
.estate-search input:focus-visible {
outline: 1px solid var(--warm-strong);
}
/* ============ 右下角那列浮动圆钮 ============
用户 2026-09-30：地图页的设置、户型图页的 ✅、效果图页的 ✅ 从**标题栏右上角**搬到**右下角**，
与 FAB、漫游、光照预览排成一列，统一成原来 FAB 那颗圆钮的样子。
位置公式**只有这里一份**：各颗只声明自己站第几层（--fab-step 是「一颗 + 一道缝」）。
⚠ 它们不能留在 .page-bar 里——那层有 backdrop-filter，会给绝对定位换个参照物。 */
.fab-float {
position: absolute;
right: var(--fab-right);
z-index: 8;
box-sizing: border-box;
width: 40px;
height: 40px;
padding: 0;
display: grid;
place-items: center;
border: 2px solid var(--accent);
border-radius: 50%;
background: var(--surface);
color: var(--accent);
cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.fab-float svg {
display: block;
width: 20px;
height: 20px;
}
.fab-float[aria-pressed="true"] {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.fab-float:disabled {
border-color: var(--line-2);
color: var(--ink-2);
cursor: not-allowed;
}
.fab-float.layer-1 { bottom: var(--fab-bottom); }
/* ⚠ 这里从前是贴齿轮的一张 210px 小卡（`position:absolute; bottom:80px`）。用户 2026-09-30：
齿轮搬进标题栏、改叫「设置」，点开的是**一张 Sheet**——壳归 `#sheet`（见 `.sheet` 那一族），
所以定位、宽度、边框、投影、底色全撤掉，这里只剩分组与行距。 */
.settings-group { margin-bottom:18px; }
.settings-group:last-child { margin-bottom:0; }
/* 账号那一行：**常见的长相**——圆形头像 + 一行名字（用户 2026-09-30：做成 Profile 那种样子、
放在第一行；**不要背景、不要 ›、也不要副标题**，所以它不是一张卡片，就是一行）。
⚠ 它仍是**占位**：按不动（`data-disabled`）。副标题一去，"还没上线"就只剩两处落点——
整行淡一档（下面那条 `--ink-2`）与点一下回的那句实话（见 settings.js）。 */
.settings-account { width:100%; box-sizing:border-box; display:flex; align-items:center; gap:12px; padding:6px 2px; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.settings-account[data-disabled] { cursor:not-allowed; color:var(--ink-2); }
.settings-account[data-disabled] .settings-avatar { color:var(--line-2); }
/* 设置里可以拨的那一行（光照预览）：一行文字 + 右边一枚开关。
状态只在 `aria-pressed` 上——画法与读屏读的是同一个属性。 */
/* 设置里那几行（外观 / 光照预览 / 设计师辅助 / 隐私声明）**等高、等距** ——
用户 2026-10-11：「除我的账号外，其他几个设置项应等高等距」。实测过：两行的那种
（标题＋小字）自然高 64px，一行的那种（外观那行只有标题＋分段开关）只有 52px，
摆在一起就是"一行高一行矮" ✗ ⇒ 给一个同样的下沿 64px（内容仍垂直居中）。
等距靠**同组**（组内相邻两行的上下内边距加起来就是它们之间的空档，天然一致 ✓）——
分成两组时，组间那 18px 与组内这 20px 对不齐，最后一行会显得更松 ✗。 */
.settings-row { width:100%; box-sizing:border-box; display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 2px; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.settings-row-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.settings-row-text strong { font-size:15px; font-weight:650; }
.settings-row-text small { font-size:11.5px; color:var(--ink-2); }
.settings-switch { flex:none; margin-left:auto; position:relative; width:42px; height:26px; border-radius:999px; background:var(--line-2); transition:background .2s; }
.settings-switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; }
/* 那枚「›」：与开关同族的位置（右边那一格），只是它说的是"点开还有一页" */
.settings-arrow { flex:none; margin-left:auto; color:var(--ink-2); font-size:18px; line-height:1; }
.settings-row[aria-pressed="true"] .settings-switch { background:var(--accent); }
.settings-row[aria-pressed="true"] .settings-switch::after { transform:translateX(16px); }
.settings-avatar { flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--surface-2); color:var(--ink-2); }
.settings-avatar svg { display:block; width:24px; height:24px; }
.settings-account-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.settings-account-text strong { font-size:15px; font-weight:650; }
.settings-account[data-disabled] .settings-account-text strong { color:var(--ink-2); }
.settings-account-text small { font-size:11.5px; color:var(--ink-2); }
/* ⚠ `.theme-title` / `.theme-opts`（外观与主题色那两排药丸按钮）随主题色一起去掉了
（2026-10-10）——外观改用**分段开关**（`.cf-seg`，与门型、墙体虚实同一套），
主题色那排整行撤掉。这里不再留空壳规则：一个类名没有消费者就该消失 ✓。 */
/* 设置在**这一行里坐着别的东西**（分段开关）时的两处差异：整行按不动（它不是一个按钮），
控件推到右边（与开关那颗 `.settings-switch` 同一个位次）。 */
.settings-row.is-static { cursor: default; }
.settings-row .cf-seg { margin-left: auto; }
/* ⚠ 外观那三档比门型/墙体那两处**字长**（「跟随系统」四个字，那两处都是两个字），
而 `.cf-seg button` 的 `flex: 1 1 0` 让轨道按各段的 `min-width: 3.6em`（≈47px）算宽度
⇒ 四个字塞不进 47px，滑块里的字**竖着折成两行**（实测截图看到的）。
这一处把最小宽度按最长那一档给足：4em 字宽（4 字 × 13px）＋左右各 12px 内边距。
⚠ 哪天有哪一档的名字超过四个字，这里要跟着改（`nowrap` 会让它溢出来而不是折行——
溢出来一眼看得见，折行看着像"设计成这样"，所以宁可溢）。 */
#theme-mode button { min-width: calc(4em + 24px); white-space: nowrap; }
/* 隐私声明那张 Sheet 的正文（2026-10-10 用户：「字号偏大」）。
⚠ 它是**成篇要读的字**，不是控件标签：整段从 `body` 那 15px 掉到 13px（与验收项
`.craft-check-text` 同一档），行距放宽到 1.7 —— 字号小一档、行距大一档，读起来才不挤。
小节标题只比正文大半档（13.5px）＋ 一条上间距：它们是**分段标记**，不该抢戏。 */
.privacy { font-size: 13px; line-height: 1.7; color: var(--ink); }
.privacy-title { font-size: 13.5px; font-weight: 650; margin: 20px 0 6px; }
.privacy-title:first-child { margin-top: 0; }
.privacy-list { margin: 0; padding-left: 18px; }
.privacy-list li + li { margin-top: 6px; }
.privacy .material-note { margin-top: 20px; }
.guide {
position: absolute;
left: 8px;
bottom: var(--guide-bottom);
width: min(50vw, 220px);
z-index: 9;
transform: translateZ(0); /* 独立合成层：与确认页动画隔离，避免 GIF 闪烁 */
touch-action: none;
cursor: grab;
user-select: none;
-webkit-user-select: none;
/* 小态那颗头像的边长 = 小态形象的宽度（**同一个数，两处引用一处定义**）。
放大那一下格子宽度在动，头像**不跟**着长（见 `.guide-mascot .avatar-head`）。
⚠ 值在 `:root` 的 `--guide-face`（内容区下沿要按它让位 ✓）。 */
--face: var(--guide-face);
transition:
width 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
left 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.guide.dragging {
transition: none;
}
/* 缩小：**只剩一个头像**（用户 2026-10-09）。从前是"整身缩到 64px"——人只有二十来像素高，
看不出是谁。用**聊天窗那颗的样式**：圆形 ＋ 静态图 `assets/avatar.png`
（与消息里的 `.msg-avatar` 同一张、同一套取景，见 `.guide-mascot .avatar-head`）。 */
.guide.small {
width: var(--face);
}
.guide.dragging {
cursor: grabbing;
}
.guide-mascot {
position: relative;
width: 100%;
aspect-ratio: 2 / 3;
/* 换态那一段的时长（两张图交叉淡入淡出、以及底下那层占位什么时候露面）。
一个数管三处，改就一起改。 */
--cross: 0.4s;
}
/* 小态：方盒（圆头像要在方形盒里才圆得正） */
.guide.small .guide-mascot {
aspect-ratio: 1 / 1;
}
.guide-mascot img {
/* ⚠ 两张图**叠着放**（绝对定位）：都在场、只是透明与否 ⇒ 留在文档流里的话，格子会被
它们上下摞成两倍高（实测小态 64 → 128 ✓）。格子的高度本来就由 aspect-ratio 定 ✓。 */
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-user-drag: none;
user-drag: none;
user-select: none;
-webkit-user-select: none;
/* ⚠ 换态那一下（下面那两条 `filter`）走的是 **`filter: opacity()`，不是 `opacity`** ——
整身那张的 `opacity` 归"模糊占位淡入"（`.avatar-img.loaded`）管；两件事共用一个旋钮，
换态就会把那套淡入抹掉。两张图**都在场**（叠着放），换态是"一个淡出、另一个淡入"，
不是换个 `display`。
三段**同时**走（用户 2026-10-09：「能不能同时执行这 3 段动画」✓ —— 先做过分阶段的版本，
他把节奏定成同时）：格子缩/放（.35s，`.guide` 那条）＋ 两张图交叉淡（`--cross` = .4s），
都在 t=0 起跑 ✓。 */
transition:
opacity 0.8s ease,
transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
filter var(--cross, 0.4s) ease;
}
/* 小态那个头像：**圆形**（用户 2026-10-09 点名要聊天窗那颗的样式），取景照抄 `.msg-avatar`
（方形盒里 cover、`50% 15%` 把脸取出来 —— 那张图 265×345、头在上三分之一，居中的话裁窗
会落到肩膀）。
⚠ 外面那层 `span` 是**给自己撑一个方盒**用的：`![]()
` 是替换元素，`aspect-ratio` 里那个
`auto` 认的是它自己的固有比例（265:345）⇒ 直接写在图上，放大那一下（格子先变成 2:3）
它也跟着变竖，`border-radius: 50%` 于是画出个**竖椭圆** ✗（实测：放大过程中脸是长的 ✓）。
方盒里它永远是正圆 ⇒ 换态时看到的是"圆头像淡出、再淡入全身" ✓。
⚠ 贴**底**不贴顶：格子从 2:3 切回方形时（放大那一下）高度会从 96 掉回 64，贴顶的话
这颗头会跟着往上跳 32px ✗；贴底则一动不动，就在小态那个位置上淡出 ✓。 */
.guide-mascot .avatar-head {
position: absolute;
bottom: 0;
left: 0;
/* ⚠ 边长**不跟格子走**：格子放大那一下宽度在动（64 → 195），跟着走的话这颗头会一路
胀大 ✗（用户 2026-10-09：「为什么头像也会跟着放大，很明显」）⇒ 卡在小态的边长上，
它就守在原处、原大小淡出 ✓（缩小那一下反之：它淡入时格子已经缩到同一个大小 ✓）。 */
width: min(100%, var(--face, 64px));
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
filter: opacity(0);
transition: filter var(--cross, 0.4s) ease;
}
.guide-mascot .avatar-head img {
object-position: 50% 15%;
}
.guide-mascot .avatar-img {
filter: opacity(1);
}
.guide.small .guide-mascot .avatar-img {
filter: opacity(0);
}
.guide.small .guide-mascot .avatar-head {
filter: opacity(1);
}
/* 停靠右侧：形象水平镜像，朝向屏幕内侧（翻转由方向感知动画驱动） */
.guide.mirror .guide-mascot img {
transform: scaleX(-1);
}
.guide.mirror .guide-mascot .avatar-ph {
transform: scaleX(-1) scale(1.05);
}
/* 小态底下**什么都不垫**（用户 2026-10-09：「去掉圆形背景」）。
头像那张图是**抠像**（四角透明），背后那层模糊占位会整圈糊出来（先去掉了模糊 ✓），
换成一枚纯色圆盘之后又成了"一颗有底色的圆"（再去掉 ✓）—— 现在就是**一个圆形的头像**
浮在页面上 ✓。跨线淡出时它淡到没有了，那正是这套提示的意思。
⚠ 用 `visibility` 不用 `display`：`display:none` 的元素"变成显示"时**不跑过渡** ✗
（下面那条延迟就落空了）。
⚠ 要压在 `.guide.mirror …` 那条后面：同分，靠文档顺序赢（也无所谓，反正不显示了）。 */
.guide.small .guide-mascot .avatar-ph {
opacity: 0;
visibility: hidden;
transition: none; /* 缩小：立刻藏（那条延迟只管"露面"，不管"收起来"） */
}
/* 大态那层模糊占位：**等这一段交叉淡完再露**（`--cross`）。
不这样，放大那 .4s 里那层糊会从半透明的全身底下透出来（实测：一块糊 ✗）——
而那本来只是"整身图还没加载完"时的垫底，图在了就不该再冒头。
⚠ 形象初始就是小态 ⇒ 这条延迟不会把"冷启动时那层占位"挡掉 ✓。 */
.guide-mascot .avatar-ph {
opacity: 1;
visibility: visible;
transition:
opacity 0s linear var(--cross, 0.4s),
visibility 0s linear var(--cross, 0.4s);
}
/* 拖动提示：跨线淡出、回来淡入；松手才真正换向。
⚠ 类挂在**这一格**上、不挂在图上：格子里有两张图（小态头像 / 大态整身），一条选择器
一次盖住两张 —— 挂单张的话，另一种状态拖起来毫无反馈。 */
.guide-mascot.fading img {
opacity: 0;
transition-duration: 0.18s;
}
.guide-bubble {
position: absolute;
/* 气泡是纯说明，不该吃点击：它可以很宽（2026-10-09 起长话会铺满整个屏幕宽），会压到
户型图页右下的 FAB 上，于是点「撤销」先被气泡接走。抬 z-index 没用——#confirm 自己是
z-7 的层叠上下文，整棵子树都在 #guide(9) 之下；让点击穿过去才是对的。
与地图那颗 .journey-bubble 同一套做法。 */
pointer-events: none;
/* 横向落位由 `placeGuideBubble()` 现算（居中于形象的头、再夹进屏幕内边距）——
这个 `left` 只是没跑 JS 时的样子。 */
left: 25%;
bottom: calc(100% + var(--guide-gap));
width: max-content;
/* 多宽：话长了就往两边长，长到屏幕的两条内边距为止（用户 2026-10-09：「拉大宽度撑满屏幕」）。
从前封在 220–258px 的窄栏里 ⇒ 一段两百字的话要摞十几行、高到盖住户型图；现在它铺开成
一条横带，同样的字只占几行。`--bubble-max` 由 `syncGuideBubble()` 按 .app 的宽度写。 */
max-width: var(--bubble-max, calc(100vw - 20px));
/* 封顶：话说长了不许一路往上顶到户型图上（用户 2026-10-03 报的「内容较多时会遮挡页面内容」）。
用户 2026-10-09 又收了一档（30vh/260px ⇒ 25vh/220px）——加宽之后，最坏情况（服务端上限
两百字）本来就落在这个高度里，封顶只兜那种真的更长的。超出的部分在正文里滚。
⚠ 只有**装不下**的时候才打开指针（.is-long，见下）——其余时候整块穿透，那条"气泡不吃点击"
的老规矩照旧。 */
max-height: min(25vh, 220px);
display: flex;
background: var(--bubble);
border: 1.5px solid var(--bubble-edge);
border-radius: 16px;
padding: 10px 13px;
font-size: 13px;
line-height: 1.55;
color: var(--ink);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
text-align: left;
z-index: 3;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* 正文：气泡封顶之后由它滚。`min-height:0` 是 flex 子项能滚的前提（默认 min-height:auto
会把它撑到内容高度，于是滚动条永远不出现）。 */
.guide-bubble-text {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
/* 装不下的时候才接收指针（能滚），其余时候整块穿透。@see styles.css 顶上那条注释 */
.guide-bubble.is-long {
pointer-events: auto;
}
/* ✕：**只有"说的话"才配它**（`.is-message`，由 typeGuideText 挂）——设计页那行
「当前讨论：主卧」是状态，收起来也马上会回来，配个 ✕ 是骗人。
与 `.journey-bubble button` 同一套：气泡整块穿透，但按钮自己要能点。 */
.guide-bubble-close {
display: none;
position: absolute;
top: 2px;
right: 2px;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink-soft, #83785e);
font-size: 12px;
line-height: 1;
cursor: pointer;
}
.guide-bubble.is-message .guide-bubble-close {
display: block;
}
/* 叉号由 CSS 画：按钮里**不放字**——`#guide-bubble` 的 textContent 得保持就是"说的话"
（好几条用例在断它为空/含某句）。可读的名字在按钮的 aria-label 上。 */
.guide-bubble-close::before {
content: "✕";
}
.guide-bubble.is-message .guide-bubble-text {
padding-right: 14px;
}
.guide-bubble button {
pointer-events: auto;
}
.guide-bubble::after {
content: "";
position: absolute;
/* 尾巴的**尖**指着头顶：`--guide-tail` 是那个尖的横坐标，由 `placeGuideBubble()` 现算
（减掉的 8px 是三角自己的半边宽）。从前是 `left: 14px` 一个定值——气泡只有 220px 宽、
又总贴在头正上方时够用；加宽成一条横带之后，头在哪就得算到哪。 */
left: calc(var(--guide-tail, 22px) - 8px);
bottom: -8px;
border: 8px solid transparent;
border-top-color: var(--bubble);
border-bottom: 0;
}
/* ⚠ 形象停靠右侧（`.flip`）从前另有一套 left/right 25% 的摆法，撤了：气泡的横向位置现在
全由 `placeGuideBubble()` 算（居中于头、夹进屏幕），尾巴跟着头走，不需要按侧翻。 */
/* ============ 引导页：叶知秋开场对话 ============ */
:root {
--intro-thumb: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAArCAIAAADt+9+sAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAKwAAAAAEtLf7AAAG1UlEQVRIDV1WW28jSRXu6qq227fEsXNbZsMyEwaxuyCNQFwkVuK2QuKNZ/4WP4I3EA8I8bS88MBKK5jdHdiZzMTJ2CZ2nHRst/veXcV3TrWzw5bS5dPn8p1L1Tkd8ft/lcIVjuMYfrALeqNljFOT/COYAV3NfEiJcEkHIiVhV+sx1pYmoDdpQuZ3x5H8C6k0ZMKOhZIuGVgVCsquLURtumVbBYrUhod9q89AWz0Sb2kijINELIcQOSm8k2O8WyyrL5wa6N6JywZWCiYWYdkQkNRX8t2mAlDFha7TJ0OW2Si+jIXgeX0l1S0PmkqhRvxOOx5Wtfp4s0HV5vjh6rL6l4drC6IoW17kFQ+jEm/LBxbzmIEybSXWKbRqINLbpnpvf08A494TGVCQNYfQ2YP1pJSsHb4RBMjt4riwsQntFtei3DNB4EKSmP7eTMHiMICVWixCsWrg2mMBwSVRIJA2xcyLCGhbWrN/a8lMq0YqeGVQypdJOrW8qi1J2RZCUN1tFtYzaYDJUuuUaMZCTq501GHHCXNRaZNVTsUh1NERKufMiNYHMSwMC4F11BGeSzzVbTi9htNSYpk588ggOgRSx4Ks+YzIMbcLmW8vJ1AGvjjumKhwktJROw0KuOJCNCQlDmObDuV/X1oeFxwHbWj1loI/M4ucUovSGDFeVigT2wvAIeHblOL6vzRtvdiBTc2txxAQXTJHr21y0oKYsagAiN1zKZo3Q6Ps8ECK0rq8C+FJkUejMg88/4GS0oU1/JeVhiVoTocR+aYAkv4IgkaplMJmALXl/KPw5pPpfO2ofeXmU+0Y1zSarUNgAdHCkXeqFf3hwZSQji7yNFlHeZ47Xs8T8/ju2fhqFWfmcN+ou+kfpvPQqK9/7/u/bjYGlRFlZXAbKDRCoBzp9lfp1WR6vVjmwttptTbxi27jv8vgbhUmXztojSeX6vz1/NU4kV4Shusf/fi3RSV2e+1ux0sKU2qUyQghdJlOp9MSwbpKKK/XCsvkwi3GTVn2e96nz5NCC/X8otykvtab/q54PhoHGznsNd5//NZ+v4OAKE3jJJqKiBBdoXe8ySo4a7qb2SyaB3m4wUeo+fCBVC3f73XEwV51HYxenxde90ncOIqS0lfxapPA/mi4IwVCE1IUunia6Xh2u4ky4Qs/TvJ2uyNdcTGtlDSRNt6LURKsSqXOT05PD4fDeHVxc9tbx0VZmvld9ujBQDqLeHO52/KE7u21h+8MTZW9KgLZa8gwTKQxanqVOkpL5bf89ODw5GjY7KlPX7x87Xrf3Dt40pRJVQZJ7ulsdHW1GDZ23morEV0H4yBMoqN9ebOO01QXjpYf/OJD5eIqF3lp8rJ457iKNjejSbxYzAf9w8HOenQ1zZPZzfXLyTyczZc//+Anu/3h0+eXn3x+PjgaNpp9p/JwN9VvPvxpS8l2x8d9/vNfPpq+nDjdblm6cZItl6+8xu5yne2q+eIui9Z5P41wrY6PD/r7x0Kc+c7xtx+djs7P8sooT77sd999eHISRomTRlHlDg8O2lna7UlXdue3pumq23Urzfa7ftDQOTWP4+R5UWq90zdpdb2IF+s4UX/7+PJwbyFEc9gfogeK9DreNPe6stkeGCdsqFaU5q4rHr2t0o1/+6rCbViHmyxP3/5GZ3L3xd//k0WZzEsXE3ITrJJ/fPbxD97/YbPhRessmi10/0Ejzlsd/Z1vnR4PhlfzZ5fTRRBEna5zuzobz8Z3+etf/eyXRnvfPVXUwWiAP/3xd9PZ3e2qfO/h47N/f5Eb9/S9J732ru+3cI8fnhwcDTD1qjjOL6efPX3210VAUwz9Pex3A3Sr2j0cFNeBFkUw+ufnF+hEjNnL8WQwHJ4+ftcY01ACN83Fon8QnFZT+m58twzW63AdxmWVh3EeJmWaZ6UucXNFuZ5UaHoaaQIjBVc5y4qC+hZDCxxRVQZTAXA9X4NTZGmyiTEA0NtoRB4VPCCqcEq/1OpYIIlAo/IrGo2a1tJIxy6tqxJ3virLoip49BRFqaDEGFabSWpUi0sITHLLEg996+CEPM/jYQdbcMk9PpAYodt/HiwOooBJ/QATg49iZFe8kSfkRJFj40iEImCo8hs2nmRWg1FZ105rMqnRLWlRiEbSSA3vjF5LOeQ6NIrFOmQhNGtlmxDXgDbwERHV01YCYkMHiB2XARcN/UBrWzJrA0yCqyr60pOYnGhlDwKW7JuSgAi3xxqDj6hY2yZt1alRiMkHQYb4ZLMmqfKnDHr2gKyUNLiIqK31BMZWmWSUClRhrlwpKRHyRDt4dCKYrPQRYy2qB/O0RqhIGzsdLPRd3GJOzZj/Af4C/AhOcNoEAAAAAElFTkSuQmCC");
}
:root {
--avatar-thumb: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAkCAYAAACTz/ouAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAJAAAAACG5CAqAAAE4UlEQVRIDa2WbUxbVRjHz73nvrS9LaUtpby/bHOAjWRKkBijjsUPSxxZ2ES3ZBoXo4mJ7IvRfTBGsiy6+AVjliwzhilkhpRE3aJZEBd0ukVhbGzYARuvk0GhQIH2tr1v53iuJgtlvbSMnS/3Ps895/8753mee86BII32RWMj78jLrnrm+Z1zfX19KI0h97vA+28GL01NTfTvV3u/jMakk8HpmcqaqsqJv4fv3DPo/oA7JcAGgCsqSc2ZNpu1prKsfGlZrM/LzTs3MjGx8IBaEgedxJfgMrndIUlRbwsmFjS+sQ/VeLe4lHj0lYRO6xgpAR0dHZqFYa5VbSsAYlikdj9XDQo9Wc51NBM+pQTovUdGRz/NtJm/cVotIMvtPkNT3NcJKusYaQFu9na7dtbtj2gIgfE7twdfO3JkdB3NhE9UgpXEWBwbqDSbTFcoGgqKuILk0BwdYYTh0GJ4/45du/1JhiS4mAQriSFLcrHNahNWwhHE8QKwlniRHdJlFDOz7/hHHx4oLizYGg5HBm703+w63dZ2da1ESgBSFUnVNKDIEmAYCGRFARDzGNPM0e3F2Yz38TI+IsUPjk9ORon4xgEA0nFVVbEkSUAHxeUVwHJmLC3eEyoqnsA0a0ZwKUg/WeDoXzt73U6ZZFlT1agoAlmWKQYpQKAk4IJRYEFxxLM8yHC6aTkmj7/ozRlOBkgZInE+NEY7nYsOC+dC4QU8LyJwfXYJBILzwCIE4m63C3b9ce3EiebmQDJAyhV4a18KTIyM7p2aXfCznlLqn9ACmBYxEGk7HZiZ/eCzU21P3Rgaak8mrvtSrkDv5HI6RnOKirIYzkQNDg9hR/4OwFs9QOQ4d2dn07qlmnIFOsCZk/u+I9PuWY7EUO7WakASC+LxGAAY1HefaTLpfYxaSoC/u9vKcVyd/kfOL8eIuBUgTANMGnFti7E5W4zEdX9KgLe2NjIyOXe8Z2AMT82FgVmwY95kJkMxpSBqZmRRntoUQB/cMxSAt+6uEEEG6CuBNA0Q2ZdUVbPH4zbLpgGC2VzPspCEHJPwIAAZFmiahhVFyaRpNX9TAN/530oZlnmB7EkYk1lrGgGQFZCGyZ8NEcIlmwJosdghjjdl6DOmKAqTJ6BInDiO1RMNKJYpf2iAz9dlRxgfVlUF6GeBhjRKUWRKrx+WhAkjDMihXvnQgLgivUxKtJRsdohMmoSICOoJJnmgyFNfDbnDeP1+P2cEMSxTn88HicBbDGT0jQ7TRFAPCYSQVJCGddB/SUeo7PLlgZINAxoaGsh88ceapi7/r0uUSSNR1yNPC4JAkzCFSdh+lSRZMQIY7kV6Qsmgznbfz8ckWWLNZvs7gIbFPFCQIi4HZyLaXwwHvzr63tvnjcQ35G9t/7Hi0tmWnsj1X/DKlR9a0x1smIO1Aq8f2DNY5qRDgl0AfIY97ftp2oDFrtN2TrB6yAF0iZSRY+0EjOy0AD6MoWTJ/5xhWHKAasdIFeX6fA0p77U6NC0A39LiCa5ED1KEoATnBkm9enYVvPqY0axX+9MCTIr9C5PTgTeXJLR9AsE9KqYKrWZ73Woho/e0lnnhQo9Wf+jwLRYiJa4iN/mri6xmvvrZp8u/PXvuon4ferTtz5/a997tvRjo7/r+3UervErtu5OfuDpbT2WvciV9/Rc68CKHQskBXAAAAABJRU5ErkJggg==");
}
.intro {
position: absolute;
inset: 0;
z-index: 30;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px 20px 56px;
background: var(--intro-fallback);
overflow: hidden;
transition: opacity 0.45s ease;
}
/* 渐进式背景（LQIP/blur-up）：先显示微小模糊占位，原图加载完成后淡入替换 */
.intro-bg,
.intro-bg-full {
position: absolute;
inset: 0;
background: center / cover no-repeat;
pointer-events: none;
}
.intro-bg {
background-image: var(--intro-thumb);
filter: blur(14px);
transform: scale(1.06);
}
.intro-bg-full {
background-image: url("assets/community.webp");
opacity: 0;
transition: opacity 0.5s ease;
}
.intro-bg-full.loaded {
opacity: 1;
}
/* 设计师形象 blur-up：模糊占位先显示，GIF 加载完成后淡入 */
.avatar-ph {
position: absolute;
inset: 0;
background: var(--avatar-thumb) center / cover no-repeat;
filter: blur(8px);
transform: scale(1.05);
pointer-events: none;
}
.avatar-img {
position: relative;
opacity: 0;
transition: opacity 0.5s ease;
}
.avatar-img.loaded {
opacity: 1;
}
.intro-avatar,
.guide-mascot {
position: relative;
}
.intro.fade-out {
opacity: 0;
pointer-events: none;
}
.intro-stream {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 52%;
z-index: 2;
overflow-y: auto;
box-sizing: border-box;
padding: calc(env(safe-area-inset-top, 0px) + 46px) 14px 12px;
background: linear-gradient(
180deg,
var(--stream-1) 0%,
var(--stream-2) 60%,
var(--stream-3) 100%
);
scrollbar-width: none;
}
.intro-stream::-webkit-scrollbar {
display: none;
}
.intro-msg {
display: flex;
gap: 8px;
margin-bottom: 12px;
animation: msgIn 0.3s ease;
}
.intro-msg.ye {
justify-content: flex-start;
}
.intro-msg.me {
justify-content: flex-end;
}
.intro-msg-bubble {
max-width: 74%;
padding: 9px 13px;
font-size: 14.5px;
line-height: 1.6;
border-radius: 14px;
transition: opacity 0.5s ease;
}
.intro-msg.ye .intro-msg-bubble {
background: var(--bubble-soft);
color: var(--ink);
border-top-left-radius: 4px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.intro-msg.me .intro-msg-bubble {
background: var(--bubble-me);
color: var(--bubble-me-ink);
border-top-right-radius: 4px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.intro-msg.old .intro-msg-bubble {
opacity: 0.42;
}
@keyframes msgIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
.intro-avatar {
position: absolute;
left: 8px;
bottom: 24px;
z-index: 3;
width: min(50vw, 220px);
aspect-ratio: 2 / 3;
}
.intro-avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 「跳过」常驻在右上角：这段对话是自动播的，不想看的人随时有出口。
以前这里是「轻触回应」的提示加脉冲动效——那套交互问的是「你愿不愿意听」，
而这是一段介绍：愿意听的人被点烦，不愿意听的人早就在找出口（见 onboarding.js）。 */
/* ============ 户型图识别 ============ */
#recognize {
position: absolute;
inset: 0;
z-index: 7;
background: var(--bg);
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 22px 20px;
}
.rec-plan {
position: relative;
width: 100%;
max-width: 316px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
padding: 10px;
overflow: hidden;
}
.rec-plan svg {
display: block;
width: 100%;
height: auto;
}
.rec-img {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
}
.rec-scan {
position: absolute;
left: 10px;
right: 10px;
top: 0;
height: 3px;
border-radius: 999px;
background: linear-gradient(
90deg,
transparent,
var(--accent) 15%,
var(--accent) 85%,
transparent
);
box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
animation: scanmove 1.7s ease-in-out infinite alternate;
}
@keyframes scanmove {
from {
top: 8px;
}
to {
top: calc(100% - 12px);
}
}
/* ============ 识别结果确认 ============ */
#confirm {
position: absolute;
inset: 0;
z-index: 7;
background: var(--bg);
display: flex;
flex-direction: column;
padding: 40px 20px 18px;
isolation: isolate;
/* 内容区右侧那一列签的两个数（2026-10-11 加）。
⚠ 挂在**页面上**、不是挂在 `.cf-folder` 上：操作面板（`.cf-edit`）是文件夹的**兄弟**，
它也要按这两个数算自己的宽度（"面板与纸同宽同边"那条）—— 挂在文件夹上它取不到值 ✗
（同一个坑 `--cf-ctl-h` 踩过一次，见 `:root` 里那条注释）。 */
--cf-tab-w: 33px; /* 那一列的总宽 */
--cf-tab-overlap: 4px; /* 整列往纸上压多少（`.cf-tabs` 的负外边距） */
}
.cf-toggles {
margin-top: 10px;
display: flex;
gap: 8px;
}
#cf-g-overlay {
opacity: 0.9;
}
.cf-wall {
stroke: #2e6b4d;
stroke-width: 3.5;
stroke-linecap: round;
/* ⚠⚠ **不填充**（用户 2026-10-08：「调节为曲墙后，扇形背景应与其他区域背景使用同一种颜色」✓）：
直墙是 ``（填不了 ✓），但**弧是 ``** ⇒ SVG 默认 `fill: black` ✗
⇒ 弦与弧之间那块被涂成**黑色扇形** ✓（实测：`polyline.cf-wall.cf-edge` 的 `fill` 是
`rgb(0,0,0)` ✓）。⇒ 墙一律 `fill: none` ✓（对线无害 ✓，对折线是必须 ✓）。 */
fill: none;
}
/* **墙的命中带**（用户 2026-10-08：「斜墙不太好选中」✓）：每一段墙（含覆盖边 ✓）底下垫一条
**透明但吃指针**的粗线 —— 墙线本身只有 3.5～4.5 单位宽（屏幕上 ≈1.4px ✗），手指压不住；
垫线 14 单位（≈5.4px ✓）与端点的胖靶子、门窗那条 `.cf-hit` 同一个量级 ✓。
⚠ 它**一直透明**：选中/悬停那两套 class（`.is-hover` / `.is-sel`）挂在 `.cf-wall` /
`.cf-outline` 上，垫线**不挂**它们 ✓ —— 挂上去就会跟着变粗变橙、把墙画胖一圈 ✗。
⚠ `pointer-events: stroke` ＝ 只有画出来的那一条粗线吃事件（线的**内部**不吃 ✓），
与 `.cf-hit` 同一手 ✓。 */
.cf-hitline {
stroke: transparent;
stroke-width: 14;
stroke-linecap: round;
fill: none;
pointer-events: stroke;
}
.cf-outline {
stroke: #2e6b8f;
stroke-width: 4.5;
stroke-linecap: round;
/* ⚠ 与 `.cf-wall` 同一条（见那里的注释 ✓）：**墙线一律不填充** —— 斜墙/曲墙画的是
``，SVG 默认 `fill: black` ⇒ 弦与弧之间那块会被涂黑 ✗。
⚠⚠ 这条**必须三支都写**（`.cf-wall` / `.cf-outline` / `.cf-edge` ✗）：边一旦按身份
改走 `.cf-outline`（2026-10-08 ✓），漏掉的那一支黑扇形就回来了 ✓（实测：用户当天报的
"曲墙区域又变成黑色了" 正是这个 ✓）。 */
fill: none;
}
.cf-edge {
fill: none;
}
/* 房名：**一间房一个、落在房间中心**（用户 2026-10-05 第七十八条）——居中对齐（位置由 JS
按面积重心算 ✓）。
⚠⚠ **2026-10-13 起它吃指针了**（用户：「去掉房间操作区的 chip，改成点击区域名直接编辑」✓）：
操作区那颗芯片（名字 ＋ ✎）整个撤了 ⇒ **选中一间房与改名都搬到这颗名字上** ——
点一下＝选中它、再点一下＝就地改名（用户当天的三条路里挑的 ✓，见 `calibration.js`
的 `tapRoomName` ✓）。从前这里写的是 `pointer-events: none`（那时改名走芯片上那颗 ✎，
落在名字上的 `cursor: pointer` 是个谎 ✗）✓。
⚠ 字号：12 → 15（第八十三条）→ **18**（第一百零三次：「区域 tab 内容区的区域名字号再调大些」✓）。
画布是 900 的 viewBox、屏幕上再乘 ~0.387 ⇒ 18 个用户单位 ≈ 7px。⚠ 别把字号写回标记的
`font-size` 属性上（属性最弱、改起来还得进 JS ✗）。 */
.cf-name {
text-anchor: middle;
font-size: 18px;
font-weight: 700;
fill: #1f4d35;
/* ⚠ 默认**不吃指针**（SVG 的 text 默认是 visiblePainted ⇒ 不写这一行它就是吃的 ✗ ——
只在「房间」那一组改成 auto，见下面那条 ✓）。 */
pointer-events: none;
/* ⚠ 命中面积**靠这圈白边撑大**（`paint-order: stroke` ⇒ 描边画在字的**底下** ✓）：
7px 高的字，光靠笔画本身手指压不住 ✗。这圈 6px 的白边同时干三件事 ——
① 当靶子（与墙上那条透明命中带同一个道理 ✓）、② 压在照片上也读得清 ✓、
③ 选中时它天然就是一枚"标签底" ✓。 */
paint-order: stroke;
stroke: rgba(255, 255, 255, 0.92);
stroke-width: 6px;
stroke-linejoin: round;
}
/* 选中的那一间：房名变橙（与画布上的焦点格、目标格同一个 `--node` ✓）。
⚠ 芯片撤了之后，**"现在往哪间划"全靠它说** ✓ —— 只靠 ＋/🗑 那两颗按钮变个底色，
在看图的时候太轻了 ✗。 */
.cf-name.is-sel {
fill: var(--node);
}
/* ⚠⚠ **只有「房间」那一组吃指针**（2026-10-13 实测撞出来的 ✗）：房名画在各层之上，
而它在别的组里只是**标签** —— 一旦吃指针，那几组里压在同一位置的靶子就全被它挡住了：
量房那一组点房间＝跳到那一间（`.cf-walk-hit` ✓）、墙体那一组点墙（`.cf-hitline` ✓）、
门窗那一组点门窗（`.cf-hit` ✓）—— 而房名**正好落在房间重心上**，实测就是
「点次卧跳到它的第一段」那条用例当场红 ✓（`pointer-events: none` 的老规矩本来在挡着这件事 ✓）。 */
#cf-plan[data-cal-group="zone"] .cf-name {
pointer-events: auto;
cursor: pointer;
}
/* 就地改名那颗输入框：**浮在画布上**（2026-10-13 从操作区搬来的 ✓）。
⚠ 定位＝`absolute`，位置由 JS 按**点下去那一下**在画布里的位置给（`startRename` ✓）——
不跟着 SVG 的缩放/平移走：改名是一瞬间的事，用户这时候不会去捏合 ✓。
⚠ 长相照那颗芯片（药丸、白底、深字）：它替换掉的就是画布上那颗房名 ✓。 */
.cf-name-input {
position: absolute;
z-index: 4;
box-sizing: border-box;
min-width: 4ch;
max-width: 60%;
padding: 4px 10px;
border: 1.5px solid var(--node);
border-radius: 999px;
background: var(--surface);
color: var(--ink);
font-size: 13px;
font-weight: 700;
text-align: center;
outline: none;
transform: translate(-50%, -50%);
}
/* 门窗的笔画颜色：**一个变量说了算**（`--cf-opening` ✓）。⚠ 只给颜色——线宽仍按每条路径
自己的描边（门扇 2.2 / 引线 1.2 ✓），"选中"那套装在 `.cf-item.is-sel path` 上照旧盖得过来 ✓。 */
.cf-open-mark {
fill: none;
stroke: var(--cf-opening);
}
/* ⚠ 命名表（`.name-grid` / `.name-chip`）2026-10-04 用户第四次裁撤时**整张表删了**
（「拆分和合并都不需要了」＋「点房名弹表那条路去掉」）——改名只剩芯片上那颗 ✎。
这两条规则于是没有用户了，一并撤掉。 */
#cf-svg.cal-on .cf-outline {
stroke-width: 6;
}
/* ⚠ **房间不再可拖**（四条拖动路径 2026-10-04 全撤了），所以 `cursor: move`（四向箭头，
看上去就是个十字）与那条 hover 加粗一并撤掉——用户第三十五次问的"墙体内容区为什么
还会展示十字鼠标"就是它：光标停在房间里（不是墙上）时，露出的正是这个十字。 */
/* ⚠ 墙**不再可拖**（2026-10-04 用户确认：区域的形状与大小改由「区域」tab 精确标）——
所以那套 `ns/ew-resize`（"这条墙能拖"）撤掉，改成"**点一下选中它**"。
⚠ 悬停**不许再用 CSS 的 `:hover`**（用户 2026-10-04 第三十五次问的："指向时加粗的是那一段，
点击后却选中好几段，连垂直的相邻段都算"）：`:hover` 只认光标底下那一段，而当时选中的单位是
**两间之间那条边界**。现在两边都由 JS 按**同一个段键**点亮（`.is-hover` / `.is-sel`，
见 `paintWallHover` / `paintWallSel`）——悬停就是"这一下会选中什么"的预览。
⚠ 第三十六次把单位收成"**段**"之后（共线的几段算一段、垂直的各算各的），这一条不变。 */
/* ⚠⚠ **四支笔的高亮**（2026-10-13，用户：「点砌墙则高亮所有开放墙体…点拆墙则高亮所有实墙」✓）：
**纯 CSS** —— 墙元素上本来就带着 `cf-open`（开放边界 ✓）与 `cf-edge`（画出来的那条 ✓），
JS 只把"拿的是哪支笔"写到 `#cf-plan[data-wall-brush]` 上 ✓（见 `renderWallBar` ✓）。
逐支对齐"**点得动的那些**"：砌墙＝开放着的 ✓、拆墙＝实墙（**含画出来的那条** ✓ 它也是
`.cf-wall` / `.cf-outline`，只是不带 `cf-open` ✓）、调节＝画出来的那条 ✓、
画一道墙＝不画（它自己分两步问落点，落点在整张图上 ✓）。
⚠⚠ 特异性要**压过**上面那套悬停/选中（都是 (1,2,0) ⇒ 这里 (2,2,0) ✓）：
笔拿在手里的时候，"哪些点得动"比"鼠标底下那一段"更要紧 ✓。
⚠ 橙色 `--node` 是这一页的"正在弄的东西"（选中那套也用 ✓）——它在这儿说的是
"**点得动**"，不是"选中了"：点一下就走，没有"选中的那段墙"这件状态了 ✓。 */
#cf-plan[data-wall-brush="build"] #cf-svg .cf-open {
stroke: var(--node);
stroke-width: 5;
/* 线粗了，虚线也得疏一档（与 `.cf-open.is-hover` 同一条理由 ✓）。 */
stroke-dasharray: 10 8;
}
#cf-plan[data-wall-brush="break"] #cf-svg .cf-wall:not(.cf-open),
#cf-plan[data-wall-brush="break"] #cf-svg .cf-outline:not(.cf-open),
#cf-plan[data-wall-brush="adjust"] #cf-svg .cf-edge {
stroke: var(--node);
stroke-width: 6;
}
/* ⚠ 墙上的小手**只在拿了笔的时候**（2026-10-13 改准）：没拿笔时点墙什么都不做 ✗
（用户：「未选中任何工具时…只能双指捏合缩放、单指按下拖动」✓）⇒ 小手是句谎 ✗。
⚠ 与下面门窗那条的分工不变：这一条只管「墙体」那一组 ✓（`data-cal-group` ✓）。 */
#cf-plan[data-cal-group="wall"][data-wall-brush] #cf-svg.cal-on .cf-wall,
#cf-plan[data-cal-group="wall"][data-wall-brush] #cf-svg.cal-on .cf-outline,
#cf-plan[data-cal-group="wall"][data-wall-brush] #cf-svg.cal-on .cf-hitline {
cursor: pointer;
}
/* 门窗自己**要**是小手（同一条的后半句：「悬停在门/窗上时应展示为小手」）——靶子是那三块：
沿墙的命中带（`.cf-hit`）、洞口中心那颗圆（`.cf-item > circle` ✓ 直接子元素，避开
`.cf-marks` 里那些画出来的图形与手柄 ✓）、以及整扇门那块扇形（`.cf-hit-area` ✓）。 */
/* ⚠ 与墙那条**对称**：门窗只在「门窗」那一组里可点（用户第一百零三次的补充：「墙体 tab
内容区禁止选中门窗、且悬停指标不要用小手」）⇒ 小手也只挂在那一边 ✓。
⚠⚠ **2026-10-13 起还要拿着「调节」或「拆门窗」那支笔**：放门/放窗那三支底下点门窗什么都不做（那一手是"定落点" ✓），
空着手更是只认看 ✓ ⇒ 那时候摆一双小手是句谎 ✗（与墙体那一组同一条规矩 ✓）。 */
#cf-plan[data-cal-group="opening"][data-opening-brush="adjust"] #cf-svg.cal-on .cf-hit,
#cf-plan[data-cal-group="opening"][data-opening-brush="adjust"] #cf-svg.cal-on .cf-item > circle,
#cf-plan[data-cal-group="opening"][data-opening-brush="adjust"] #cf-svg.cal-on .cf-hit-area,
#cf-plan[data-cal-group="opening"][data-opening-brush="del"] #cf-svg.cal-on .cf-hit,
#cf-plan[data-cal-group="opening"][data-opening-brush="del"] #cf-svg.cal-on .cf-item > circle,
#cf-plan[data-cal-group="opening"][data-opening-brush="del"] #cf-svg.cal-on .cf-hit-area {
cursor: pointer;
}
/* 拿着「放门 / 放窗」时，**墙上是小手**（那儿点得动 ✓ —— 这一支的落点就是墙 ✓）。
⚠ 与"调节"那条正好互补：一个指着墙、一个指着门窗 ✓。 */
#cf-plan[data-cal-group="opening"][data-opening-brush="door"] #cf-svg.cal-on .cf-wall,
#cf-plan[data-cal-group="opening"][data-opening-brush="door"] #cf-svg.cal-on .cf-outline,
#cf-plan[data-cal-group="opening"][data-opening-brush="window"] #cf-svg.cal-on .cf-wall,
#cf-plan[data-cal-group="opening"][data-opening-brush="window"] #cf-svg.cal-on .cf-outline {
cursor: pointer;
}
/* 开着的墙（`.cf-open`）**一律是细虚线**——⚠ 得压过上面那条给外墙加粗的
`#cf-svg.cal-on .cf-outline { stroke-width: 6 }`（(1,2,0) > `.cf-open` 的 (0,1,0)）。
而"开着的外墙"现在也**可以被选中**了：从前外墙一开就丢了 `.cf-outline` 类，
于是它再也点不着、恢复不了（顺手修掉的老 bug）。 */
#cf-svg.cal-on .cf-outline.cf-open {
stroke: #9a9486;
stroke-width: 2.5;
stroke-dasharray: 6 5;
}
/* 悬停与选中**都要压过上面那两条**（(1,3,0) > (1,2,0)）——不然外墙的"粗一档"看不见。 */
#cf-svg.cal-on .cf-wall.is-hover,
#cf-svg.cal-on .cf-outline.is-hover {
stroke-width: 6;
}
#cf-svg.cal-on .cf-wall.is-sel,
#cf-svg.cal-on .cf-outline.is-sel {
stroke: var(--node);
stroke-width: 7;
}
/* ⚠ **虚墙高亮时要换一套疏的虚线**（用户 2026-10-05：「虚墙高亮的虚线太密，增大间隙」）：
`6 5` 那套是配 2.5 线宽的（细线上一段 6 的空 5 看着正好），可高亮一加粗到 6~7，
同样的 6/5 几乎连成实线 ✗。疏密得**跟着线宽走**——SVG 的 `stroke-dasharray` 没有相对
单位，所以按档手写：线段与间隙都取线宽的 1.3~1.6 倍，才是"一段一段"的样子。 */
#cf-svg.cal-on .cf-open.is-hover {
stroke-dasharray: 9 8;
}
#cf-svg.cal-on .cf-open.is-sel {
stroke-dasharray: 11 11;
}
.cf-rb {
stroke: #3f7c5c;
stroke-width: 1.5;
stroke-dasharray: 4 3;
pointer-events: none;
}
.cf-open {
stroke: #9a9486;
stroke-width: 2.5;
stroke-dasharray: 6 5;
}
/* ⚠ **画出来的门/窗符号不吃指针**（2026-10-05，`plan-page` 那条 hover 用例当场抓到的）：
门符号现在是**按真实尺寸**画的（门扇长＝洞口净宽 ⇒ 一扇 900 的门在图上就有 70 多个单位长，
是原先那个固定 20 单位的示意图的三四倍）⇒ 它会盖住旁边那段墙，指针落在符号上就再也
悬停/点不到墙 ✗（实测：`#cf-svg.cal-on .cf-wall.is-hover` 一条都不亮 ✗）。
符号是**看的**，靶子有两个：沿墙那条 `.cf-hit`（洞口那一段）与洞口中心那颗圆 ✓。
⚠ 手柄要放行：飘窗进深那颗**就画在 marks 里面**（`windowMarkSVG`）✓ 校准页里要靠它拖进深 ✓。 */
.cf-item .cf-marks {
pointer-events: none;
}
/* ⚠ **只剩飘窗进深那一颗** ✓ —— 窗的"改宽度"手柄 2026-10-09 撤了 ✗（用户：「本来门窗也没有
这个功能，而且调也调不准，就在编辑 Sheet 里改就行」✓）：净宽只在编辑表里改 ✓。
⇒ `.cf-handle` 那三条规则一并删掉 ✓（不然就是留着一段谁也点不到的死样式 ✗）。 */
.cf-item .cf-marks .cf-depth-handle {
pointer-events: auto;
}
/* 转方向那颗按钮（用户 2026-10-06 第九十二次）：长在扇形那段弧的中点上，**只在门被选中时**
才画。⚠ 色彩与"能上手操作"那一族一致（`#c07b3a` ✓ —— 飘窗进深那颗也是它），只是它**只点
不拖** ⇒ 光标是 pointer ✓。 */
.cf-turn {
display: none; /* 只在选中的那扇门上露出来（见下一条）——选中态是**换 class**，不是重画 ✓ */
cursor: pointer;
}
.cf-item.is-sel .cf-turn {
display: block;
}
/* ⚠ 线宽跟着按钮的**屏幕尺寸**走（见 `doorTurnButton` 那段注释）：画布 348px ÷ 900 的 viewBox
⇒ 一个单位只有 0.387px，所以"1px 的线"＝2.6 个单位起 ✓（1.2 那种细线在这儿是发丝，
放大之后才看得出来 ✗）。 */
.cf-turn circle {
fill: #fff;
stroke: #c07b3a;
stroke-width: 2.4;
}
/* ⚠⚠ 这一条从前**从来没生效过**（用户第一百零二次第五条：「旋转按钮内部 icon 线条太粗了，
且看不清箭头」）：`.cf-item.is-sel path`（0,2,1）盖过了它（0,1,1）⇒ 弧一直是按"选中那套"
画的 —— **粗 3.5**、色是 `--node` ✗；箭头那两笔在 3.5 上糊成一团，当然读不出来 ✓。
修法是把那几条**收窄到 `.cf-marks` 里**（它们本来就只该管画出来的门弧/窗格 ✓），
这里于是拿回了自己的 1.2 ✓。 */
.cf-turn path {
fill: none;
stroke: #c07b3a;
stroke-width: 2.4;
stroke-linecap: round;
}
/* 箭头改成**实心三角**（同上第五条）：两根小短笔画的箭头在这个尺寸上读不出来 ✗。
⚠ 它得盖过上面那条 `fill: none`（0,2,0 ＞ 0,1,1 ✓）。 */
.cf-turn .cf-turn-head {
fill: #c07b3a;
stroke: none;
}
/* **整扇门都能点**（用户第一百零二次第四条）：扇形那**一块面**也接指针 ——
`fill: transparent` 是"有填充、但不画出来"，`pointer-events: all` 让这块面按几何判命中
（`fill: none` 是**点不到**里面的 ✗）。⚠ 它接的是**房间里**那一块，洞口那一段墙本来就被
`cutDoorGaps` 切掉了 ⇒ 依旧不抢墙的点击 ✓。 */
.cf-hit-area {
fill: transparent;
stroke: none;
pointer-events: all;
}
.cf-tag {
font-size: 10px;
font-weight: 700;
fill: var(--cf-opening); /* D1 / W1 那行小字跟着门窗走（与 `--cf-opening` 一处源 ✓） */
}
/* 量房包络线：它标的是"量哪两个方向"，不是户型的一部分，所以不接指针事件——
房间、墙、门窗都还要能点。描白边是为了压在户型图上也读得清。 */
.cf-dim,
/* 逐间实测的那几个数（他自己填的）。和包络线一样**不接指针**——图上那一下是去拖房间、
拖墙的，标注不该抢走它。 */
.cf-dim-room {
pointer-events: none;
}
/* 逐间的数比包络线小一号、浅一档：它是"你说的"，与"图上的"要分得开 */
.cf-room-dim {
font-size: 11px;
font-weight: 600;
fill: #8a6b3f;
}
.cf-dim line {
stroke: #c07b3a;
stroke-width: 2;
stroke-dasharray: 7 4;
}
.cf-dim-text {
font-size: 12px;
font-weight: 700;
fill: #a8621f;
text-anchor: middle;
paint-order: stroke;
stroke: #fff;
stroke-width: 3.5px;
stroke-linejoin: round;
}
.cf-item.cf-fix .cf-tag {
fill: #c07b3a;
}
/* 空的不立着：纸是撑满的那一块（`height:100%`），空的时候照样是一大块白板，
看着像一张没关掉的弹层。:empty 比逐个 toggle hidden 稳。 */
.cf-plan:empty {
display: none;
}
.cf-plan {
background: var(--surface);
border: 1px solid var(--line);
/* 四角同半径。⚠ 2026-10-11 一度只圆左边（右边贴着有底的签条、直角才接得上）——
签条那层底撤掉之后，右边留着直角就是"没画完的卡片" ✗ ⇒ 收回四角 ✓。 */
border-radius: 14px;
padding: 0;
overflow: hidden;
position: relative;
/* ⚠ 这里是 `height:100%` 而**不再是 `aspect-ratio:1/1`**（用户 2026-10-11）：
纸的高度由这一列的剩余空间给（`.cf-folder` 的 `flex:1` ✓ —— 底下还让开叶知秋那颗气泡，
见 `.cf-folder` 的 `margin-bottom` ✓）。
⚠ 纸比宽长 ⇒ 900×900 的方 viewBox 按**短边**缩放、两头留白（换算见 `cfPlanPoint` ✓）
—— 2026-10-16 起开这一页会给图对一次焦（`calibration.js` 的 `fitPlanWidth` ✓：
把图上那一团放大到**撑满纸的宽** ✓），所以肉眼看到的不再是"图小在当中" ✓。
⚠ 别把 `aspect-ratio` 加回来：那会让纸重新变方、底下又空出一大块桌面 ✗。 */
height: 100%;
box-sizing: border-box;
}
.cf-plan svg {
display: block;
width: 100%;
height: 100%;
touch-action: none;
/* ⚠ **长按要留给画布自己**（拖动框选/滑目标格时，别让系统弹出长按菜单把这一手打断 ✓ ——
2026-10-13 之前那条"长按 = 掏出涂抹的笔"已经删了，但这条**照旧要留** ✓）：
不然按住不放时会弹出"拷贝/存储图片"那种菜单或 iOS 的 callout，正涂到一半被打断。
（`contextmenu` 那一支在 calibration.js 里挡——CSS 挡不住桌面右键菜单。） */
-webkit-touch-callout: none;
user-select: none;
-webkit-user-select: none;
transform-origin: 0 0;
}
/* 门窗的**命中带**（用户 2026-10-05 第七十四条：「门在图上感觉比墙还难选中」）：
一条**只吃事件、不画东西**的粗线。⚠ `stroke: none` 时默认的 `pointer-events: visiblePainted`
是**点不着**的 ⇒ 必须显式写 `pointer-events: stroke`（只认这层笔画，不管画没画）✓。
44 个单位：900 的视图在 390px 宽的屏上 ≈ 19px，手指够得着 ✓（随缩放一起变大 ✓）。 */
.cf-hit {
stroke: none;
pointer-events: stroke;
stroke-width: 44;
/* ⚠ 别改成 `round`：圆头让两头各多伸半个线宽（22 个单位），压到旁边的墙上去了 ✗ */
stroke-linecap: butt;
}
/* 门窗**选中**时画布上要看得出来——这是"难选中"的另一半：墙有 `.is-hover`/`.is-sel`，
门窗从前**一点反馈都没有** ⇒ 点没点中全靠顶上那一行芯片，手上没底 ✗。
⚠ **悬停那一条 2026-10-05 撤了**（用户第八十一条：「门取消选中后，当鼠标指向门，门还是会
高亮（但没加粗）并跟着移动」）：它与"选中"只差一线条粗细 ⇒ 指针一扫过去满屏都在亮 ✗，
而那时候**什么都还没选中** ✗ —— 用户读到的就是"看起来选中了、其实没有" ✓。
墙那边留着悬停是有实在用途的（悬停预览"这一下会选中哪一段"，而且它与点击**同一个段键** ✓）；
门窗这边悬停不预览任何东西 ⇒ 只留**选中**这一种反馈 ✓（触屏本来也只有它 ✓）。
⚠ 颜色写在 CSS 里能盖过元素上的 `stroke="#3F7C5C"`：表现属性（presentation attribute）
的优先级低于任何 CSS 规则 ✓（不用去改那些内联的 stroke ✓）。 */
.cf-item.is-sel .cf-marks path,
/* ⚠ 弧上的窗画的是 **polyline**（不是 path ✓）⇒ 不带上它，选中就没有任何反馈 ✗
（用户 2026-10-09：「选中曲墙上的窗后，窗没有高亮」✓ —— 新图形没进老样式 ✓）。 */
.cf-item.is-sel .cf-marks polyline,
.cf-item.is-sel .cf-tag {
fill: var(--node);
}
/* ⚠⚠ **拿着「调节」那支笔时，所有门窗都"亮"起来**（2026-10-13 ✓）—— 与另两页的语言一致：
拿起来时图上亮起"这支笔点得动的那些" ✓。另两支笔（放门/放窗）**不画**：那时候能落的地方是
**所有墙**，答案"全都行"的时候满屏高亮只是噪音 ✗（与「画一道墙」不画高亮同一个理由 ✓）。
⚠⚠ 这里的"亮"**只加粗、不换色**（第一版照搬"选中"那套写成橙色 ✗，`plan-page`／`openings`
两条用例当场红 ✓）—— 门窗的笔画色 `--cf-opening`（蓝）是**符号自己的话**（"这是一扇门/窗" ✓），
与墙那种"身份色"（内墙绿、外墙蓝）不是一回事 ✗：墙被高亮换色只是认不出哪条是哪条 ✓，
门窗被换色是**把符号本身涂掉了** ✗。⇒ 高亮＝**粗一档**（2.4/3 → 4 ✓，一眼看得出 ✓），
颜色照旧归 `--cf-opening` ✓；"选中那一扇"仍走 `.is-sel`（橙色 ✓，那是"就是它"✓）。 */
#cf-plan[data-opening-brush="adjust"] #cf-svg .cf-item .cf-marks path,
#cf-plan[data-opening-brush="adjust"] #cf-svg .cf-item .cf-marks polyline {
stroke-width: 4;
}
/* **「拆门窗」那一支**（2026-10-13）：亮点的是**同一批**（所有门窗 ✓ —— 点得动的那些 ✓），
但长相与「调节」分开 ✗：这一支是**虚线** ✓ —— "会没掉"在这个工程里一直是虚线
（橡皮的 `.is-erase` ✓、框选预览 ✓、目标格 ✓ 同一套语言 ✓）⇒ 两支笔在图上分得开 ✓。 */
#cf-plan[data-opening-brush="del"] #cf-svg .cf-item .cf-marks path,
#cf-plan[data-opening-brush="del"] #cf-svg .cf-item .cf-marks polyline {
stroke-width: 4;
stroke-dasharray: 6 4;
}
.cf-item .cf-marks path,
.cf-item .cf-marks polyline {
transition: stroke-width 0.1s;
}
.cf-item.cf-guess .cf-marks path,
.cf-item.cf-guess .cf-marks polyline {
stroke-dasharray: 5 4;
}
.cf-item.cf-fix .cf-marks path,
.cf-item.cf-fix .cf-marks polyline {
stroke: #c07b3a;
}
.cf-item.cf-active .cf-marks path,
.cf-item.cf-active .cf-marks polyline {
stroke-width: 4;
}
/* 选中的那扇门窗（用户 2026-10-05）：与墙的选中**同一套语言**——换成 `--node` ＋ 粗一档。
⚠ 门窗的图形是 path（门弧/窗格），所以颜色改的是 `.cf-item path`，不是 `` 自己。 */
.cf-item.is-sel .cf-marks path,
/* ⚠ 弧上的窗画的是 **polyline**（不是 path ✓）⇒ 不带上它，选中就没有任何反馈 ✗
（用户 2026-10-09：「选中曲墙上的窗后，窗没有高亮」✓ —— 新图形没进老样式 ✓）。 */
.cf-item.is-sel .cf-marks polyline {
stroke: var(--node);
stroke-width: 3.5;
}
.cal-fab-wrap {
position: absolute;
right: 20px;
bottom: 140px;
z-index: 8;
}
.cal-fab {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--accent);
background: var(--surface);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
transition:
background 0.2s ease,
color 0.2s ease;
}
.cal-fab.active {
background: var(--accent);
color: #fff;
}
.cal-fab svg {
width: 19px;
height: 19px;
display: block;
}
.cal-fab-wrap .cal-item {
position: absolute;
top: 4px;
right: 4px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface);
border: 2px solid var(--accent);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font: inherit;
font-size: 11px;
opacity: 0;
transform: scale(0.4);
pointer-events: none;
transition:
opacity 0.2s ease,
transform 0.22s cubic-bezier(0.3, 0.9, 0.4, 1.2);
}
.cal-fab-wrap.open .cal-item {
opacity: 1;
pointer-events: auto;
}
/* 扇面加宽：从左上（约 70°）扇形展开到左下方（约 -17°），避免接近竖直 */
.cal-fab-wrap.open .cal-item[data-group="zone"] {
transform: translate(-30px, -84px);
}
.cal-fab-wrap.open .cal-item[data-group="wall"] {
transform: translate(-66px, -60px);
}
.cal-fab-wrap.open .cal-item[data-group="win"] {
transform: translate(-84px, -20px);
}
.cal-fab-wrap.open .cal-undo {
transform: translate(-78px, 24px);
}
.cal-panel {
position: absolute;
bottom: 52px;
right: 0;
z-index: 9;
width: 224px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.cal-panel-title {
font-size: 12px;
font-weight: 600;
color: var(--ink);
}
.cal-panel-tools {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* （2026-10-13 删掉两条 `.cal-tool` / `.cal-tool.active`：界面上一个 `.cal-tool` 都没有了
—— 那一族药丸按钮被 `.cf-edit-btn` / `.icon-btn` 替掉之后，这两条一次都没生效过 ✗。
连同 `calibration.js` 里按 `data-tg` 切它们的那个循环一起删 ✓（两处是同一天死的 ✓）。） */
.cf-fab {
position: absolute;
right: 20px;
bottom: 84px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--accent);
background: var(--surface);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.cf-fab svg {
width: 20px;
height: 20px;
display: block;
}
.cf-fab:focus-visible {
outline: 2px solid var(--accent-strong);
outline-offset: 2px;
}
/* ============ 3D 预览 ============ */
#design-chat {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 5;
background: var(--bg-2);
}
.d3-full {
position: relative;
width: 100%;
height: 100%;
}
#design-chat .d3-view {
position: absolute;
inset: 0;
height: auto;
border-radius: 0;
overflow: hidden;
background: linear-gradient(
180deg,
var(--bg-5) 0%,
var(--bg-4) 55%,
var(--bg-3) 100%
);
touch-action: none;
cursor: grab;
}
.d3-view canvas {
display: block;
}
.d3-view:active {
cursor: grabbing;
}
.design-preview {
position: absolute;
z-index: 27;
left: 14px;
right: 14px;
color: var(--ink);
background: color-mix(in srgb, var(--surface) 94%, transparent);
border: 1px solid var(--line-2);
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
backdrop-filter: blur(10px);
}
.design-preview button {
border: 1px solid var(--line-2);
color: var(--ink-2);
background: var(--surface);
border-radius: 999px;
padding: 6px 10px;
font: inherit;
cursor: pointer;
}
.design-preview {
top: 84px;
border-radius: 15px;
padding: 10px 12px;
}
.design-preview-head {
display: flex;
gap: 8px;
align-items: baseline;
font-size: 12px;
line-height: 1.45;
}
.design-preview-head span {
color: var(--ink-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.design-preview-actions {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.design-preview-actions::-webkit-scrollbar {
display: none;
}
.preview-toggle {
display: flex;
flex: 0 0 auto;
padding: 2px;
border-radius: 999px;
background: var(--bg-3);
}
.preview-toggle button {
border: 0;
background: transparent;
}
.preview-toggle button.active,
.design-preview button.primary {
color: #fff;
border-color: var(--accent);
background: var(--accent);
}
.design-preview-actions > button {
flex: 0 0 auto;
}
.d3-stylebar {
position: absolute;
top: 14px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
padding: 0 16px;
z-index: 6;
}
.style-chip {
cursor: pointer;
border: 1px solid var(--line-3);
background: var(--surface);
border-radius: 999px;
padding: 6px 14px;
font: inherit;
font-size: 12.5px;
color: var(--ink-2);
}
.style-chip.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
font-weight: 600;
}
.style-chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.mascot-dot {
position: absolute;
top: 2px;
right: -2px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--danger);
border: 2px solid #fff;
}
/* ============ 半屏聊天 ============ */
.sheet-mask {
position: absolute;
inset: 0;
background: var(--mask);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
z-index: 20;
}
.sheet-mask.show {
opacity: 1;
pointer-events: auto;
}
.chat-overlay {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
height: 56%;
z-index: 26;
background: var(--bg);
border-radius: 18px;
display: flex;
flex-direction: column;
transform: translateY(calc(100% + 16px));
transition:
transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
box-shadow 0.28s ease;
overflow: hidden;
}
.chat-overlay.show {
transform: translateY(0);
}
.co-head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 12px 16px 10px;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.co-close {
border: 2px solid var(--accent);
background: var(--surface);
color: var(--accent);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-family: inherit;
}
.co-close svg {
width: 18px;
height: 18px;
display: block;
}
.co-close:focus-visible {
outline: 2px solid var(--accent);
}
.co-body {
flex: 1 1 auto;
overflow: hidden;
display: flex;
flex-direction: column;
padding-top: 10px;
}
.chat-box {
flex: 1 1 auto;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 16px 10px;
scrollbar-width: none;
}
.chat-box::-webkit-scrollbar {
display: none;
}
.bubble {
max-width: 84%;
border-radius: 14px;
padding: 9px 12px;
font-size: 12.8px;
line-height: 1.55;
}
.msg-row {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 10px;
}
.msg-row.ai {
justify-content: flex-start;
}
.msg-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 15%;
flex: 0 0 auto;
background: var(--surface-2);
}
.msg-row .bubble {
max-width: calc(84% - 38px);
}
.bubble.ai {
align-self: flex-start;
background: var(--surface);
border: 1px solid var(--line);
color: var(--ink);
border-top-left-radius: 4px;
}
.bubble.user {
align-self: flex-end;
background: var(--accent);
color: #fff;
border-top-right-radius: 4px;
}
/* 对话里的面板入口（用户 2026-09-30）：与快捷回复**长得不一样**——那一行是"我刚说的这句
可以怎么回"，随每轮换；这两颗是"随时能把那两张表调出来"，常驻。 */
.chat-tools {
flex: 0 0 auto;
display: flex;
gap: 8px;
padding: 0 16px 8px;
}
.chat-tool {
display: inline-flex;
align-items: center;
gap: 6px;
box-sizing: border-box;
min-height: 30px;
padding: 0 12px;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--surface-2);
color: var(--ink-2);
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.chat-tool svg {
display: block;
width: 15px;
height: 15px;
}
.quick-replies {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 0 16px 6px;
}
.quick-reply {
border: 1px solid var(--accent-soft);
background: var(--accent-soft);
color: var(--accent);
font-size: 11.5px;
border-radius: 999px;
padding: 5px 11px;
cursor: pointer;
font-family: inherit;
}
.quick-reply:focus-visible {
outline: 2px solid var(--accent);
}
.chat-input-row {
display: flex;
gap: 8px;
padding: 10px 12px 16px;
background: var(--surface);
border-top: 1px solid var(--line);
}
.chat-input-row input {
flex: 1;
min-width: 0;
border: 1px solid var(--line-2);
border-radius: 12px;
padding: 9px 12px;
font: inherit;
font-size: 12.8px;
background: var(--surface);
color: var(--ink);
}
.chat-input-row input::placeholder {
color: var(--ph);
}
.chat-input-row input:focus-visible {
outline: 2px solid var(--accent);
}
.chat-send {
border: none;
background: var(--accent);
color: #fff;
border-radius: 12px;
padding: 0 16px;
font: inherit;
font-size: 13px;
cursor: pointer;
}
.chat-send:focus-visible {
outline: 3px solid #a9c9b5;
outline-offset: 2px;
}
.prod-card {
border: 1px solid var(--line);
border-radius: 10px;
padding: 8px 10px;
margin-top: 8px;
background: var(--surface-2);
}
.prod-head {
font-size: 11px;
color: var(--ink-2);
margin-bottom: 4px;
}
.prod-row {
display: flex;
justify-content: space-between;
font-size: 11.8px;
color: var(--ink);
padding: 3px 0;
}
.prod-row b {
font-weight: 600;
color: var(--amber);
}
.add-list-btn {
margin-top: 8px;
border: 1px solid var(--accent);
background: var(--surface);
color: var(--accent);
border-radius: 999px;
font-size: 11.5px;
padding: 4px 14px;
cursor: pointer;
font-family: inherit;
}
.add-list-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ============ 弹层与提示 ============ */
.sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 28;
background: var(--bg);
border-radius: 20px 20px 0 0;
transform: translateY(102%);
transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
max-height: 78%;
overflow-y: auto;
padding: 8px 16px 22px;
scrollbar-width: none;
}
.sheet::-webkit-scrollbar {
display: none;
}
.sheet.show {
transform: translateY(0);
}
.sheet-grip {
width: 40px;
height: 4px;
border-radius: 999px;
background: var(--line-2);
margin: 0 auto 10px;
}
.sheet-close {
position: absolute;
right: 16px;
top: 14px;
border: none;
background: var(--surface-3);
color: var(--ink-2);
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
font-size: 13px;
line-height: 26px;
}
.sheet-close:focus-visible {
outline: 2px solid var(--accent);
}
.sheet-title {
font-family: "Noto Serif SC", serif;
font-weight: 700;
font-size: 17px;
color: var(--ink);
padding-right: 34px;
}
.toast {
position: absolute;
bottom: 46px;
left: 50%;
transform: translateX(-50%) translateY(8px);
background: rgba(38, 36, 31, 0.92);
color: #fff;
font-size: 12.5px;
border-radius: 999px;
padding: 7px 16px;
opacity: 0;
pointer-events: none;
transition: all 0.25s;
z-index: 30;
/* ⚠⚠ 2026-10-12：原来是 `white-space: nowrap` ✗ —— 它是**单行药丸**的设计 ✓，
可一旦哪句通报长了（用户报的「Toast 内容过长未自动换行，导致显示不全」✗），
就整句溢出、看不见 ✗。改成**允许多行 ＋ 封顶宽度**：短句仍是原来那颗药丸 ✓，
长句自己折行、居中 ✓（`border-radius: 999px` 两行时是一颗圆头胶囊 ✓，不难看 ✓）。
⚠ 话本身也别太长 —— toast 是"喊一声"，不是"讲一段" ✓。 */
white-space: normal;
/* ⚠⚠ `width: max-content` **必须写**（实测踩到，和页脚那条是同一个坑 ✗）：
这颗是 `position:absolute; left:50%` ⇒ 它的**收缩到合适**宽度只从"中间到右边缘"
那么多（实测 195px ✗）⇒ 长句被折成五行的窄柱 ✗。按内容撑开、再由 `max-width` 封顶，
才是"短句一颗药丸、长句两行居中" ✓。 */
width: max-content;
max-width: min(88%, 420px);
box-sizing: border-box;
text-align: center;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ============ 移动端：全屏 app，无外框 ============ */
@media (max-width: 860px) {
.shell {
padding: 0;
}
.app {
max-width: none;
width: 100%;
height: 100vh;
height: 100dvh;
border: none;
border-radius: 0;
box-shadow: none;
}
.chat-input-row {
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}
}
/* Snackbar（M3）：近满宽、单行、4dp 圆角、可带一个动作。两种内容共用它——
常驻的（地面素材加载失败，带「重试」）与瞬时的（点了一个还进不去的节点，带「去定图」），
见 ui/snackbar.js。加载中不在这里——那是被动信息，由叶知秋自己说（renderDesignerBubble）。
底部 120px 避开右下角 FAB（68px）和左下角叶知秋（约 120px 高）；
46px 那条轨道留给 .toast——它更轻、不带动作，两条轨道各司其职。 */
.snackbar {
position: absolute;
bottom: 120px;
left: 50%;
transform: translateX(-50%);
z-index: 31; /* 高于 .toast 的 30 */
display: flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
width: calc(100% - 16px); /* 两侧各留 8px */
max-width: 640px; /* M3 大屏建议上限 */
min-height: 48px; /* M3 单行高度 */
padding: 8px 8px 8px 16px; /* 起始 16，末端留给动作按钮 8 */
border-radius: 4px; /* M3 snackbar 圆角 */
background: rgba(38, 36, 31, 0.94);
color: #fff;
font-size: 14px; /* M3 body-medium */
line-height: 20px;
box-shadow: 0 4px 12px #0002;
/* 元素靠 hidden 进出渲染树，所以显示时这条动画会从头播 */
animation: material-snack-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes material-snack-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(16px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* 动作按钮：M3 文本按钮——无边框、强调色、右对齐 */
.snackbar-action {
flex: none;
margin-left: auto;
min-height: 36px;
padding: 6px 12px;
font: inherit;
font-weight: 600;
border: 0;
border-radius: 4px;
background: none;
color: #e8a86a;
cursor: pointer;
}
.snackbar-action:focus-visible {
outline: 2px solid #e8a86a;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.snackbar {
animation: none;
}
}
.material-note {
font-size: 12px;
color: var(--ink-2);
line-height: 1.6;
}
.material-category + .material-category {
margin-top: 16px;
}
.material-category-title {
margin-bottom: 8px;
font-size: 14px;
color: var(--ink);
}
.material-category .material-grid {
grid-template-columns: minmax(0, 1fr);
}
.material-scope {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
}
.material-scope select {
font: inherit;
padding: 8px;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
}
.material-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.material-card {
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
padding: 8px;
font: inherit;
font-size: 13px;
color: var(--ink);
border: 2px solid transparent;
background: var(--surface);
border-radius: 12px;
cursor: pointer;
}
.material-card img {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: 8px;
}
.material-card small {
color: var(--ink-2);
font-size: 12px;
}
.material-card[aria-pressed="true"] {
border-color: var(--accent);
background: var(--accent-soft);
}
.material-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
#sheet-mask {
z-index: 27;
}
.opening-form {
display: grid;
gap: 12px;
}
/* ⚠ 说明在左、控件在右（用户 2026-10-05 第七十一条：「输入框/下拉菜单在属性名右侧、
不要另起一行」）——原来是 `grid`（说明一行、控件一行 ✗）。左列与上面那三条**等宽**
（`min-width: 5em`，由最长的「中心距区域起点」…不，那一条在折里也够宽 ✓ 取 5em 即可 ✓）。 */
.opening-form label {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
}
.opening-form label > .section-label {
flex: 0 0 auto;
min-width: 5em;
}
.opening-form label > input,
.opening-form label > select {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
/* ⚠ **洞口净宽那颗芯片要排除在外**（用户 2026-10-05 第六十四条要的就是"芯片"）：这一条的
特异性是 (0,2,1)（元素 ＋ 两个类/属性），**压得过** `.cf-dim-input` 的 (0,1,0) ⇒
它把那个盒子抻成了整行宽、字号也顶成 16px ✗（实测：用户看到的是一整条白框，
不是芯片 ✗）。排除它之后，那颗输入框才真正穿上 `.cf-dim-input` 那身盒子 ✓
（宽度 5 位数的药丸、与比例尺那一行的两个数同一套 ✓）。 */
.opening-form input:not([type="checkbox"]):not(.cf-dim-input),
.opening-form select {
width: 100%;
min-width: 0;
padding: 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: 16px;
}
/* ⚠ **一栏**（用户 2026-10-05 第七十条：「所属房间、所在墙段、中心距区域起点、洞口净高
等属性各成一行」）：原来是 `1fr 1fr` 两栏 ⇒ 两个字段挤在一行上 ✗。 */
.opening-dimensions {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.opening-bay {
display: grid;
gap: 12px;
}
.opening-form .opening-measured {
display: flex;
align-items: center;
}
.opening-actions {
display: flex;
gap: 10px;
}
.opening-actions button {
flex: 1;
padding: 12px;
border: 0;
border-radius: 12px;
background: var(--accent);
color: white;
font: inherit;
}
.opening-actions .secondary {
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
}
/* （2026-10-13 删掉了一整套 **量房表** 的样式：`.dim-field` / `.dim-note` / `.dim-echo` /
`.dim-help` / `.dim-rooms*` / `.dim-room*` / `.dim-side*` ＋ 那几条 `#plan-dimensions-form …`。
那张表整个删了（用户：「量房表主要用于总览，但感觉意义不大」✓）——它里面只剩三个全屋数
（搬进账本表尾那一行 ✓）与每间每段的**只读**明细（账本那张表 ＋ 向导早就在说 ✓）。
⚠ 删得干净是**逐类查过**的：这一族只有 `ui/plan-dimensions.js` 用（HTML 里一个都没有 ✓）——
⚠ 除了 `.cf-dim-label` / `.cf-dim-value` / `.cf-dim-input` 那三条**另有用处**
（账本表尾那一行与向导那枚尺寸芯片 ✓，它们不在这一族里 ✓）。） */
.opening-error {
color: #a5392a;
font-size: 13px;
margin: 0;
}
.opening-list {
display: grid;
gap: 8px;
margin: 12px 0;
}
.opening-list button {
padding: 12px;
text-align: left;
border: 1px solid var(--line);
border-radius: 12px;
color: var(--ink);
background: var(--surface);
font: inherit;
}
.opening-list small {
display: block;
color: var(--ink-2);
margin-top: 4px;
}
.color-filters {
display: flex;
gap: 8px;
margin: 12px 0;
}
.color-filters input,
.color-filters select {
min-width: 0;
padding: 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
color: var(--ink);
font: inherit;
}
.color-filters input {
flex: 1;
width: 55%;
}
.color-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.color-card {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
padding: 5px 3px 8px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.color-chip {
display: block;
width: 100%;
height: 54px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.color-card small {
font-size: 10px;
}
.color-rgb {
color: var(--ink-2);
}
.color-card[aria-pressed="true"] {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.color-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
#wood-pattern-preview,
#material-skirting,
#material-doors,
#skirting-preview {
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: 10px;
color: var(--ink);
background: var(--surface);
font: inherit;
cursor: pointer;
}
#skirting-preview {
width: 100%;
}
#skirting-height,
#skirting-thickness {
width: 100px;
padding: 8px;
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink);
background: var(--surface);
font: inherit;
}
#skirting-card {
min-width: 0;
max-width: 240px;
}
#skirting-color {
width: 42px;
flex: 0 0 42px;
}
#skirting-error {
color: #a23a2a;
}
/* 漫游那颗的形态（位置、圆钮长相）全在 .fab-float 里。
⚠ **它不换图标**（用户 2026-09-30）：进出漫游只有**一颗脚印**，状态由底色说——
`.fab-float[aria-pressed="true"]` 那条（accent 底 + 白图标）已经在做这件事。
这里从前还有三条 `.view-icon-plan` 的规则在两种状态间换图标，一并撤了。 */
.walk-controls {
position: absolute;
z-index: 26;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
width: 156px;
height: 156px;
border-radius: 50%;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface) 82%, transparent);
box-shadow:
inset 0 0 20px #0001,
0 4px 18px #0002;
touch-action: none;
user-select: none;
cursor: grab;
--stick-x: 0px;
--stick-y: 0px;
}
.walk-controls:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.walk-controls::before {
content: "";
position: absolute;
inset: 17px;
border: 1px solid var(--line);
border-radius: 50%;
opacity: 0.45;
pointer-events: none;
}
.walk-stick {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
transform: translate(
calc(-50% + var(--stick-x)),
calc(-50% + var(--stick-y))
);
background: var(--surface);
border: 1px solid var(--line-2);
box-shadow:
0 5px 14px #0003,
inset 0 1px 2px #fff8;
transition:
transform 0.12s ease-out,
background 0.12s;
pointer-events: none;
}
.walk-controls.dragging {
cursor: grabbing;
}
.walk-controls.dragging .walk-stick {
transition: none;
background: color-mix(in srgb, var(--accent) 15%, var(--surface));
border-color: var(--accent);
}
.journey-home {
position: absolute;
inset: 0;
/* 地图是**最底下那层**，子页盖在它上面。
原来是 z-index:20——比所有子页都高（#confirm/#recognize 是 7、#design-chat 是 5），
于是「子页滑上来盖住地图」根本盖不住：子页确实在滑，只是全程被地图挡着，要等地图
到点隐藏才猛地露出来。以前两层反向移动时看不出来，因为地图同时在往右走，两者错开；
换成「地图不动」之后立刻现形。
必须是 0，不能是正数：任何正数都会把子页压住；0 与 auto 同层，谁在上面由 DOM
顺序决定（子页在 #intro 之后）。 */
z-index: 0;
display: flex;
flex-direction: column;
background: var(--journey-map-bg);
color: #454d3b;
}
.journey-home button {
font: inherit;
cursor: pointer;
}
.journey-scroll {
flex: 1;
min-height: 0;
overflow: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.journey-map {
position: relative;
width: 100%;
}
.journey-map-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 941/1672;
}
.journey-map ol {
list-style: none;
margin: 0;
padding: 0;
}
.journey-map li {
position: absolute;
transform: translate(-50%, -50%);
}
.journey-node {
border: 0;
background: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: #4c5b40;
width: 112px;
}
.journey-node-circle {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 2px solid #667158;
border-radius: 50%;
background: #faf7eb;
font-size: 22px;
font-weight: 650;
box-shadow: 0 2px 6px #58452b18;
}
.journey-node.done .journey-node-circle {
background: #758464;
color: white;
border-color: #fff;
}
.journey-node.current .journey-node-circle {
background: var(--node);
color: white;
border-color: #fff;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--node) 16%, transparent);
}
.journey-node:focus-visible { outline: none; }
.journey-home .journey-node:focus-visible .journey-node-circle {
outline: 2px solid var(--node);
outline-offset: 6px;
}
.brief-dialogue {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 16px;
}
.brief-dialogue img {
width: 42px;
height: 42px;
border-radius: 50%;
}
.brief-dialogue p {
background: var(--bg);
border-radius: 12px;
padding: 12px;
font-size: 15px;
}
.opening-form textarea {
width: 100%;
box-sizing: border-box;
resize: vertical;
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px;
font: inherit;
color: var(--ink);
background: var(--surface);
}
/* 文字位于3D层面；DOM仅提供收起及无障碍操作。 */
/* ⚠ `top` 从 104 挪到 128（用户 2026-10-01）：标题栏下方右边那一格现在是**漫游钮**
（40px 圆钮，落在 70~110 之间），这条点选层面的浮条原本占着 104 起，会压住它。 */
#wall-layer-controls { position:fixed; z-index:35; top:128px; right:12px; display:flex; align-items:center; gap:8px; color:#4c5843; font-size:11px; }
#wall-layer-controls[hidden] { display:none; }
#wall-layer-controls > span { padding:5px 8px; border-radius:20px; background:#faf6eee6; }
#wall-layer-controls > button { border:1px solid #d6cdbd; background:#faf6ee; border-radius:24px; padding:12px 16px; color:inherit; }
.wall-layer-accessibility { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.wall-layer-accessibility:focus-within { width:220px; height:auto; clip-path:none; top:48px; right:0; background:#faf6ee; padding:8px; border-radius:10px; }
.wall-layer-accessibility button { padding:10px; }
.wall-layer-hint { position:absolute; top:66px; left:50%; transform:translateX(-50%); white-space:nowrap; color:#72786b; background:#faf8f0ce; padding:5px 11px; border-radius:20px; font-size:11px; pointer-events:none; }
/* ⚠ 这里从前还有一条 `#journey-back { width:42px; height:42px; padding:0; border-radius:50%;
font-size:23px }` —— 同一个按钮的尺寸与形状**写了两遍**（另一处是 `.nav-back` 与下面那条
`#journey-back` 的定位）。2026-09-29 用户要求"去掉圆形、只留箭头"时，改了一处、这一处
还在，于是**地图那颗返回仍然是圆的**（新加的用例当场抓到：其余三个 0px，它 50%）。
`font-size:23px` 是更早那版"文字箭头"的遗物，图标是 SVG，用不上。
规矩：**后退入口只有一个出处，就是 `.nav-back`**。 */
.journey-map { min-height:1080px; isolation:isolate; }
.journey-home[data-level="phases"] .journey-map { min-height:820px; }
.journey-map-image { position:absolute; inset:0; height:100%; object-fit:cover; opacity:.65; z-index:-2; }
.journey-route { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; overflow:visible; }
/* 路本身不再画出来，只留作几何：脚印从这条中心线上取点。注意是 `stroke:none` 而不是把
path 删掉——`getTotalLength` / `getPointAtLength` 要它在渲染树里。
用户 2026-09-30：「路径虚线能不能改成脚印？这样可以看出从设计到施工再到入住的顺序」——
虚线只说得清「这儿有条路」，脚印自带方向。 */
.journey-route path { fill:none; stroke:none; }
/* 脚印：一只一只踩在中心线上，左右交替、脚尖朝着走的方向。位置与旋转由
domain/journey-route.js 算好写在行内（各向异性的拉伸在那边先换算掉了），
这里只管一只多大、什么颜色。 */
.journey-trail { position:absolute; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.journey-print { position:absolute; display:block; width:11px; height:22px; color:#ad9670; opacity:.9; }
.journey-print svg { display:block; width:100%; height:100%; }
.journey-node { width:132px; }
.journey-node-circle { position:relative; }
.journey-node.current .journey-node-circle { box-shadow:0 2px 6px #58452b18; }
.journey-traveler { position:absolute; width:68px; height:100px; transform:translate(-50%,-100%); pointer-events:none; transition:left .6s ease-in-out,top .6s ease-in-out; z-index:2;}
.journey-traveler img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 3px #76684b33); }
.journey-traveler.moving img { animation:journey-hop .22s ease-in-out infinite alternate; }
@keyframes journey-hop { to { transform:translateY(-5px) rotate(2deg); } }
.journey-bubble { position:absolute; box-sizing:border-box; width:290px; max-width:calc(100% - 24px); padding:13px 15px; border:1px solid #ded3bf; border-radius:18px; background:#fffdf7f5; box-shadow:0 5px 20px #715d431a; z-index:3; transition:left .6s ease-in-out,bottom .6s ease-in-out;}
.journey-bubble::after { content:""; position:absolute; bottom:-8px; left:50%; width:14px; height:14px; background:#fffdf7; border-right:1px solid #ded3bf; border-bottom:1px solid #ded3bf; transform:rotate(45deg); }
.journey-bubble > small { font-size:11px; color:#83785e; }
/* ⚠ 字号 / 行距**对齐户型页那颗气泡**（`.guide-bubble`：13px / 1.55 ✓ —— 用户 2026-10-18
「字号对齐户型图页」✓）。它现在是气泡里**唯一**的东西（那个阶段名的 `