/*
* 托管补丁 —— 原型包本身不动，需要为「挂在 aumcreate.com 上」改的东西全写这里。
* 这样下次这个原型重新生成一版，直接覆盖其余文件，这一份照旧生效。
*
* ① 字体：原包从 Google Fonts 取 Manrope / DM Mono。**那两个 已经删掉**——
* 主站为了同一个理由用 next/font 把字体烘进构建（见 [locale]/layout.tsx 的注释），
* 大陆访客拿不到 fonts.googleapis.com，等于开局先卡一次超时。
* 原包的 font 简写本来就带回退（`Manrope,Arial,sans-serif`），
* 这里只是把回退链换成一条在中英文下都体面的。
* ② 演示标记：**只在原型被单独打开时出现**。它嵌在 /lab/ 里的时候，
* 外层页顶上已经有一条常驻说明条了，再来一个角标就是重复，而且会被录进屏。
* ③ 功能视图（`?view=feature`）：见下面那一大段。
*/
body {
font-family: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', Roboto, Helvetica, Arial, sans-serif;
}
.demo-badge {
position: fixed;
z-index: 9;
left: 16px;
bottom: 16px;
display: none; /* 由 script-host.js 在「没有被 iframe 套住」时打开 */
align-items: center;
gap: 8px;
padding: 8px 14px 8px 11px;
border-radius: 30px;
background: #1a1a1a;
color: #fff;
font-size: 11px;
line-height: 1;
text-decoration: none;
box-shadow: 0 7px 24px #00000026;
}
.demo-badge b { color: #fb8c42; font-weight: 700; }
.demo-badge span { color: #b8b4b0; }
@media (max-width: 700px) { .demo-badge { display: none !important; } }
/* ══════════════════════════════════════════════════════════════════
* 功能视图 `?view=feature`
*
* 🔴 **这是这个原型挂到案例页上的默认形态，不是可选装饰。**
*
* 原型本来是照「录一段整站演示」做的：顾问是右下角一个 460px 的浮动小窗，
* 平时还收起来。那个形态对录屏是对的 —— 观众要先看见整个站。
* 但**案例页上不对**：我们卖的是那个顾问，把它缩在角落里，
* 等于让访客自己在一张产品目录页里找我们做了什么。找不到就走了。
*
* 所以功能视图把两块的主次**倒过来**：
* · 顾问 → 占右侧 46%、常开、字号调到能读的大小
* · 目录 → 左边压窄，降为「它在对什么东西做推荐」的证据
* · 两块各挂一个标签，明说哪块是原本就有的、哪块是我们做的
* 想看它在完整页面里长什么样，走「在完整站点里打开」那个链接（不带这个参数）。
*
* ⚠️ 字号必须整体上调。面板原来是 460px 宽的小挂件，正文 11px；
* 放大到 500 多像素、当页面主体读的时候，11px 看起来就是坏了。
* ══════════════════════════════════════════════════════════════════ */
/*
* 🔴 **页面本身不滚，滚的是目录那一栏。**
*
* 顾问给出推荐时会 `scrollIntoView` 到对应的那台机器 —— 那个联动正是要给人看的，
* 「它推荐的是目录里真实存在的一台」。但如果滚的是整个页面，站点头和两个区域标签
* 就被滚走了，框里只剩半张目录页，主次瞬间又乱回去。
* 把 `.catalog-shell` 变成自己的滚动容器，`scrollIntoView` 就只滚它 ——
* 站点头和标签钉在原地，目录在面板后面动。
*/
body.feature-view { height: 100dvh; overflow: hidden; }
/*
* 版面分成三条，**每条的边界都写死**，因为标签是 `position: fixed` 的：
* 0–56 站点头（保留 —— 它是「这东西装在真站里」的证据，但压矮了）
* 56–90 标签带。**必须是一条空的带子**，不能让目录从下面滚过去 ——
* 标签会被内容穿过，读起来像坏了
* 90–底 左边目录（自己滚）· 右边顾问面板
*
* ⚠️ **这些数字是按「嵌在页面里的一个 620–860px 高的框」算的，不是按整屏。**
* 原型单开时有一整个浏览器窗口，怎么排都够；嵌进案例页只有 600 多像素，
* 头部、标签带、面板自己的表单一层层吃下去，留给对话的可能只剩 180px ——
* 那时候被挤掉的正是「为什么是这一台」那句话。改这里之前先量一遍。
*/
body.feature-view .site-header { height: 56px; }
body.feature-view .catalog-shell {
margin-top: 34px;
height: calc(100dvh - 90px);
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #d2ccc5 transparent;
padding-top: 4px;
padding-right: calc(46% + 30px);
}
body.feature-view .catalog-shell::-webkit-scrollbar { width: 6px; }
body.feature-view .catalog-shell::-webkit-scrollbar-thumb { border-radius: 10px; background: #d2ccc5; }
/* 「打开顾问」的入口和关闭按钮都没有意义了 —— 这个视图里它本来就是开的 */
body.feature-view .consult-trigger,
body.feature-view .consult-panel header > button { display: none; }
body.feature-view .consult-panel {
top: 90px;
right: 18px;
bottom: auto;
left: auto;
width: 46%;
min-width: 340px;
/*
* ⚠️ **必须写死高度，不能 `height: auto` 加 `top` + `bottom`。**
* 定位元素同时给了 top 和 bottom 而高度是 auto 时，`bottom` 被直接忽略，
* 高度按内容算 —— 面板会缩成半截，对话一超过三行就开始滚，
* 而被滚掉的正是那句「为什么是这一台」。
*/
height: calc(100dvh - 106px);
min-height: 0;
transform: none;
visibility: visible;
opacity: 1;
box-shadow: 0 24px 64px rgba(0, 0, 0, .16);
}
/* 字号：整体按「这是页面主体」重设一遍 */
body.feature-view .consult-panel header { padding: 15px 26px 13px; }
body.feature-view .consult-panel header span { font-size: 10px; }
body.feature-view .consult-panel h2 { font-size: 21px; }
body.feature-view .consult-intro { font-size: 14px; line-height: 1.7; }
body.feature-view .consult-message > div { font-size: 14px; line-height: 1.72; padding: 13px 15px; margin-bottom: 10px; }
body.feature-view .consult-message .status { font-size: 11px; }
body.feature-view .suggestions button { padding: 14px 0; font-size: 13px; }
body.feature-view .consult-panel textarea { height: 54px; font-size: 13px; }
body.feature-view .consult-panel form button { font-size: 12px; padding: 10px 14px; }
body.feature-view .fine-print { font-size: 10px; margin-top: 8px; margin-bottom: 12px; }
body.feature-view .trace-toggle { font-size: 11px; padding-top: 8px; margin-bottom: 8px; }
/* 推荐卡压紧一点：框里省下的每一行都直接换成对话区能显示的内容 */
body.feature-view .result-product { grid-template-columns: 96px 1fr; gap: 10px; margin: 10px 0 12px; padding: 8px; }
body.feature-view .result-product img { width: 96px; height: 88px; }
body.feature-view .result-product span { font-size: 10px; }
body.feature-view .result-product strong { font-size: 17px; }
body.feature-view .result-product p { font-size: 11px; }
body.feature-view .result-product button { font-size: 11px; }
body.feature-view .trace-row strong { font-size: 12px; }
body.feature-view .trace-row p { font-size: 11px; }
body.feature-view .trace-row em,
body.feature-view .trace-header span,
body.feature-view .trace-header b { font-size: 10px; }
/* 两个区域标签。**这是这个视图里信息量最大的两行字** ——
访客一眼就知道哪块是任何商城都有的、哪块是花钱定制来的。
文案由外层页按语言传进来（见 script-host.js），默认英文。 */
.fv-tag {
position: fixed;
z-index: 4;
top: 60px;
display: none;
align-items: center;
gap: 7px;
padding: 6px 12px;
border-radius: 20px;
font: 500 11px/1 DM Mono, monospace;
letter-spacing: .3px;
white-space: nowrap;
}
body.feature-view .fv-tag { display: inline-flex; }
.fv-tag:before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.fv-tag-base { left: 34px; background: #efece8; color: #6f6a66; }
.fv-tag-base:before { background: #b9b3ac; }
.fv-tag-built { left: calc(54% - 18px); background: #ed6500; color: #fff; }
.fv-tag-built:before { background: #ffd0aa; }
/* 窄屏放不下两栏。目录退到面板后面当背景，标签收起来 ——
挤成两个 150px 的栏，两边都读不了 */
@media (max-width: 900px) {
body.feature-view { height: auto; overflow: visible; }
body.feature-view .catalog-shell { margin-top: 0; height: auto; overflow: visible; padding-top: 30px; padding-right: 34px; }
body.feature-view .fv-tag { display: none; }
body.feature-view .consult-panel {
top: 72px;
left: 14px;
right: 14px;
width: auto;
min-width: 0;
height: calc(100dvh - 86px);
}
}