/* 微沙盘 · 画面渲染共享样式
 * ------------------------------------------------------------------
 * 这份 CSS 同时被两个页面引用：
 *   ① editor/index.html  编辑器的右侧「手机预览」
 *   ② scan.html          手机扫码打开的真机预览页
 *
 * 为什么要共享：客户扫码看到的效果，必须和编辑里看到的一模一样。
 * 只要样式抄成两份，早晚会漂 —— 所以真机页是直接引这一份。
 *
 * 【数值来源】全部来自原案例 krpano 定义，不是拍脑袋定的：
 *   assets/zplus_pages/download2/vr/krpano/krpano2.xml
 *     wbkp_hotspotstyle_group      → .cat-pill
 *     wbkp_hotspotstyle_label_text → .hot-label
 *     wbkp_hotspotstyle_label_line → .hot-line
 *   主题色通过「胶囊底边那 1px 色边」体现（krpano 的 bgshadow "0 1 0 <色> 1"）
 * ------------------------------------------------------------------ */

/* 页面容器需要自己提供：--brand（电话按钮底色）、--gold（选中态描边） */

/* ================= 顶部品牌栏 ================= */
.ph-brand {
  height: 56px; flex-shrink: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.ph-brand .logo {
  width: 30px; height: 30px; border-radius: 5px; flex-shrink: 0;
  background: #f3f4f7; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ph-brand .logo img { width: 100%; height: 100%; object-fit: contain; }
.ph-brand .txt { flex: 1; min-width: 0; }
.ph-brand .nm {
  font-size: 15px; font-weight: 500; color: #1a1c21; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 副标题 = 销售电话。对齐原案例 .wbsa_userinfo_phone：12px × scale(.9) ≈ 10.8px、#555、正常字距
   （不再用给英文大写准备的 letter-spacing，否则数字会被拉开、还容易被截断） */
.ph-brand .sub { font-size: 10.8px; color: #555; }
.ph-brand .tel {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand, #1c93fa);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  text-decoration: none;   /* 它现在是个 <a href="tel:"> 一键拨号链接 */
}
.ph-brand .tel svg { width: 15px; height: 15px; fill: #fff; }

/* ================= 全景舞台 ================= */
.ph-stage { flex: 1; position: relative; overflow: hidden; background: #0b0c0f; }
/* 用 id 选择器（不是 class）：编辑器和真机页里的画布 id 都叫 panoCanvas，
   这样两边共用同一条规则，不改任何一方的 HTML。 */
#panoCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#panoCanvas:active { cursor: grabbing; }

/* ---------- 左上角分类 ----------
 * 黑底 50% + 白字 12px + 圆角 12 + 底边 1px 主题色（颜色就靠这条边体现）
 */
.ph-cats {
  position: absolute; left: 10px; top: 22px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 5;
}
.cat-pill, .hot-label {
  display: inline-flex; align-items: center;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  border-radius: 12px;
  font-size: 12px; line-height: 16px;
  white-space: nowrap;
  /* 主题色 = 胶囊底边的那 1px 色边（krpano 的 bgshadow "0 1 0 <color> 1"） */
  box-shadow: 0 1px 0 0 var(--c, #1c93fa);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  padding: 1px 8px;
}
.cat-pill { cursor: pointer; transition: opacity .12s; }
.cat-pill.dim { opacity: .38; }
.cat-pill:hover { opacity: 1; }
/* 真机页 / 只读模式：分类不可点，点它没意义 */
.pv-readonly .cat-pill { cursor: default; }
.pv-readonly .cat-pill:hover { opacity: .38; }
.pv-readonly .cat-pill:not(.dim):hover { opacity: 1; }

/* ---------- 标注层 ---------- */
.ph-hots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }

/* 一个标注 = 文字胶囊（上） + 引线（下），整体底边中点落在球面点上 */
.hot {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.hot-label { padding: 1px 5px; pointer-events: auto; cursor: grab; }
.hot.dragging .hot-label { cursor: grabbing; }
/* 引线：1px 白线，长度 = foot - 4，胶囊与线之间留 4px（对应 foot 的定义） */
.hot-line {
  width: 1px; flex: none;
  margin-top: 4px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 2px rgba(0, 0, 0, .55);
}
/* 球面点上的小圆点（案例没有，编辑器里要有，否则不知道锚在哪） */
.hot-anchor {
  position: absolute; left: 50%; bottom: 0;
  width: 5px; height: 5px; margin-left: -2.5px; margin-bottom: -2.5px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.hot.on .hot-label { outline: 2px solid var(--gold, #d8a33a); outline-offset: 1px; }
.hot.on .hot-anchor { background: var(--gold, #d8a33a); }
/* 真机页：标注只做展示，不可拖 */
.pv-readonly .hot-label { cursor: default; }
.pv-readonly .hot-anchor { display: none; }

/* ================= 底部菜单 ================= */
.ph-menu {
  height: 58px; flex-shrink: 0;
  display: flex; align-items: center;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, .06);
}
.mi {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; cursor: pointer;
}
.mi img { width: 26px; height: 26px; object-fit: contain; }
.mi span {
  font-size: 11px; color: #787878; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.mi.on span { color: #1c93fa; }