/*
 * 托管补丁 —— 原型包本身不动，为「挂在 aumcreate.com 上」改的东西全写这里。
 * 跟第一个原型（ai-product-advisor）同一套分工，照它改的。
 *
 * ① 字体：不引 Google Fonts。主站为同一个理由用 next/font 把字体烘进构建 ——
 *    大陆访客拿不到 fonts.googleapis.com，等于开局先卡一次超时。
 * ② 演示角标：只在原型被单独打开时出现（嵌进 /lab/<slug> 时外层已有说明条）。
 * ③ 功能视图（`?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`
 *
 * 🔴 **这是这个原型挂到案例页上的默认形态，不是可选装饰。**
 * 理由跟第一个原型一样：原型本来照「录一段整站演示」做的，门户是右下角
 * 一个收起来的浮窗。那个形态对录屏是对的，**案例页上是错的** ——
 * 我们卖的就是那块功能，缩在角落等于让访客自己找我们做了什么。
 *
 * 但这个原型跟第一个有一处关键的不同，值得单独说：
 *
 * ⚠️ **这一层改的东西，一大半不在面板里，在左边那张产品页上。**
 * 价格、库存、四张资料卡 —— 全在「原本就有的那张页面」的位置上被改写。
 * 只把面板标成 built 的话，访客会以为我们做的只是一个登录框。
 * 所以这里多做一件第一个原型不需要的事：**左边被这层改写的两个区域，
 * 挂一圈橙色虚线**，颜色跟 built 标签是同一个橙。切换身份时那圈线脉冲一下，
 * 明说「这一层伸手改的是这两块」。这是 README 那条「一眼看出哪块是我们做的」
 * 在这个原型上的具体落法。
 * ══════════════════════════════════════════════════════════════════ */

/*
 * 🔴 **页面本身不滚，滚的是产品页那一栏。**
 * 站点头和两个区域标签必须钉住 —— 它们被滚走的话，框里只剩半张产品页，
 * 主次瞬间乱回去。
 */
body.feature-view { height: 100dvh; overflow: hidden; }

/*
 * 版面三条带，边界写死（标签是 `position: fixed` 的）：
 *   0–56    站点头（压矮，但保留 —— 它是「这东西装在真站里」的证据）
 *   56–90   标签带。**必须是空的**，让内容从底下滚过去的话标签读起来像坏了
 *   90–底   左边产品页（自己滚）· 右边门户面板
 *
 * ⚠️ **这些数字按「嵌在页面里的 620–860px 高的框」算，不是整屏。**
 * 头部 + 标签带先吃掉 90px，留给产品页的可能只有 510px ——
 * 而价格块必须落在这 510px 里面，因为自动演示改的就是它。
 * 下面那几条压缩（图 130px、h1 26px、参数两栏）都是为了这一件事，改之前先量。
 */
body.feature-view .site-header { height: 56px; }
body.feature-view .product-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: 4px 34px 60px;
  padding-right: calc(46% + 30px);
}
body.feature-view .product-shell::-webkit-scrollbar { width: 6px; }
body.feature-view .product-shell::-webkit-scrollbar-thumb { border-radius: 10px; background: #d2ccc5; }

/* 产品页压窄后两栏各剩 250px，两边都读不了 —— 改单栏，并把上半截整体压扁，
   好让价格块落进第一屏。 */
body.feature-view .product-hero { grid-template-columns: 1fr; gap: 0; padding: 18px 0 26px; }
body.feature-view .visual-frame { height: 104px; border-radius: 10px; }
body.feature-view .pump { width: auto; height: 88px; max-height: 88px; }
body.feature-view .thumb-row { display: none; }
body.feature-view .product-info h1 { margin-top: 14px; font-size: 26px; }
body.feature-view .subtitle { margin-top: 5px; font-size: 12px; }
/* 参数保持一行四栏（不是两行两栏）—— 两行要多吃 48px，
   而那 48px 决定了价格块下面那行库存数字露不露得出来。
   54% 栏宽减掉 padding 还有约 470px，四栏每栏 117px，最长的
   「WETTED PARTS / SS316L」放得下。 */
body.feature-view .spec-grid { margin-top: 14px; padding: 11px 0; }
body.feature-view .spec-grid dd { font-size: 14px; }
body.feature-view .price-block { margin-top: 16px; padding: 15px 16px; }
body.feature-view .price-amount b { font-size: 27px; }
body.feature-view .actions { margin-top: 16px; }
body.feature-view .btn-primary, body.feature-view .btn-ghost { padding: 11px 16px; font-size: 11px; }
body.feature-view .resources { padding-top: 26px; }
body.feature-view .res-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
body.feature-view .res-card { padding: 14px; }
body.feature-view .res-card h3 { font-size: 13px; }
body.feature-view .res-card p { font-size: 11px; }
body.feature-view .crumb-row > p { display: none; }

/* 「打开门户」的入口和关闭按钮在这个视图里没有意义 —— 它本来就是开的 */
body.feature-view .portal-trigger,
body.feature-view .portal-panel header > button { display: none; }

body.feature-view .portal-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;
  max-height: none;
  transform: none;
  visibility: visible;
  opacity: 1;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .16);
}

/* 字号：面板原来是 460px 的小挂件，放大到页面主体的位置后要整体上调 */
body.feature-view .portal-panel header { padding: 15px 24px 13px; }
body.feature-view .portal-panel header span { font-size: 10px; }
body.feature-view .portal-panel header h2 { font-size: 20px; }
body.feature-view .portal-content { padding: 18px 24px 22px; }
body.feature-view .portal-intro { font-size: 13px; line-height: 1.72; }
body.feature-view .account-option { padding: 15px 16px; }
body.feature-view .account-option b { font-size: 14px; }
body.feature-view .account-option em { font-size: 12px; }
body.feature-view .tier-card b { font-size: 15px; }
body.feature-view .stat-row dd b { font-size: 16px; }
body.feature-view .unlock-list li { font-size: 13px; }
body.feature-view .role-option { padding: 11px 8px; font-size: 12px; }

/* ── 左边被这一层改写的区域 ────────────────────────────
   平时一圈很淡的橙虚线（说明「这块归那层管」），身份一变脉冲一次。
   **只在功能视图里出现** —— 完整站视图是给录屏的，那里不该有标注。 */
body.feature-view [data-zone] {
  position: relative;
  outline: 1px dashed #f0b985;
  outline-offset: 6px;
  border-radius: 4px;
  transition: outline-color .5s;
}
body.feature-view [data-zone].zone-touched {
  outline-color: var(--orange);
  animation: zone-pulse .9s ease;
}
@keyframes zone-pulse {
  0% { box-shadow: 0 0 0 0 #ed650033; }
  40% { box-shadow: 0 0 0 10px #ed650000; }
  100% { box-shadow: 0 0 0 0 #ed650000; }
}

/* 两个区域标签。**这是这个视图里信息量最大的两行字。**
   文案由外层页按语言传进来（见 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; }

/* ══ 窄屏：上下分屏，不是「面板盖住一切」 ══════════════════════
 *
 * 🔴 **这里跟第一个原型的处理必须不一样，照抄会毁掉这个演示。**
 *
 * 第一个原型窄屏时让面板铺满、目录退到后面当背景 —— 那样是对的，
 * 因为它要证明的东西（对话）**就在面板里**。
 *
 * 这个原型不是：价格、库存、资料卡的变化全发生在**面板外面**那张产品页上。
 * 面板一铺满，手机访客看到的就只是一个会员中心，
 * 「同一个页面按身份改写」这件事一点都看不见 —— 演示等于没了。
 *
 * 所以窄屏改成上下两截：上半屏留给产品页（只留型号 + 参数 + 价格块，
 * 图和面包屑让位），下半屏是门户。切身份时两截同时动，那才是要看的。
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.feature-view { height: 100dvh; overflow: hidden; }

  /* ⚠️ **减掉站点头那 56px。** 两截各半的话总高是 100dvh + 头部 ——
     面板会往上盖 56px，正好压掉价格块的下半截（第一版就是这么坏的）。 */
  body.feature-view .product-shell {
    margin-top: 0;
    height: calc(54dvh - 56px);
    overflow-y: auto;
    padding: 12px 16px 18px;
  }
  /* 上半屏只有 350px 左右，价格块必须整个落在里面 ——
     图、面包屑、副标题先让位。手机上「这是一张真实产品页」
     靠型号和那张参数表也说得清。 */
  body.feature-view .product-visual,
  body.feature-view .crumb-row,
  body.feature-view .subtitle,
  body.feature-view .resources-head p { display: none; }
  body.feature-view .product-hero { padding: 0 0 18px; }
  body.feature-view .product-info h1 { margin-top: 0; font-size: 21px; }
  /* 价格块整体压紧：省下的每一行都直接换成「库存」那两行露不露得出来，
     而给代理留的那 24 台正是 VIP 那一档的看点之一。 */
  body.feature-view .price-block { margin-top: 12px; padding: 12px 14px; }
  body.feature-view .price-amount b { font-size: 24px; }
  body.feature-view .price-partner { margin-top: 10px; padding-top: 10px; }
  body.feature-view .actions { margin-top: 12px; }
  body.feature-view .spec-grid { grid-template-columns: repeat(2, 1fr); gap: 10px 0; margin-top: 12px; padding: 10px 0; }
  body.feature-view .res-grid { grid-template-columns: 1fr; }

  body.feature-view .portal-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    height: 46dvh;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, .14);
  }

  /* 只留 built 那一个标签，骑在两截的分界线上。
     base 不用标 —— 上半屏就是那张页面本身，看得出来；
     需要点破的是「下面这块是花钱定制的」。 */
  body.feature-view .fv-tag { display: none; }
  body.feature-view .fv-tag-built {
    display: inline-flex;
    top: auto;
    bottom: calc(46dvh - 13px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
  }
  /* 虚线描边在 375px 宽里挤得没有余量，反而把内容框歪 */
  body.feature-view [data-zone] { outline: none; }
}