/* ═══════════════════════════════════════════════════════════════════════════
 * 全站悬浮顾问（2026-10-21）
 * 独立样式表：不依赖 css/style.css，四个自包含页（compare/buddy/cost/blog-pitfalls）
 * 直接 <link> 也不会被带歪。所有 var() 一律带兜底——那些页没有完整 :root。
 * 命名统一前缀 ph-adv-，避免和站内既有 class 撞车。
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 🔴 靠网站右侧，不是靠浏览器右侧（2026-10-21 老杨看截图定）。
 *    全站内容宽固定 960px 居中，视口再宽，按钮也整个落在内容区右线**外侧**的空白里，
 *    不飘到天边、也不压住内容。用 left 锚定按钮左边缘（宽度自适应）：
 *      内容右线 x = 50% + 480px，再往外 16px → left: calc(50% + 496px)
 *    宽度不够时（<1168px）改回贴视口右边，见文件末尾的断点。 */
.ph-adv-btn {
  position: fixed;
  left: calc(50% + 496px);
  bottom: 24px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 48px;
  padding: 0 18px 0 15px;
  border: 0;
  border-radius: 24px;
  background: var(--brand, #0e7490);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(14, 116, 144, .28), 0 1px 3px rgba(16, 24, 40, .12);
  transition: transform .16s ease, box-shadow .16s ease;
}
.ph-adv-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(14, 116, 144, .34), 0 1px 3px rgba(16, 24, 40, .12);
}
.ph-adv-btn:active { transform: translateY(0); }
.ph-adv-btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
/* 页面底部有固定工具条（/ph/ai/ 的 #ask-bar）时抬高，别叠在一起 */
body.has-askbar .ph-adv-btn,
body:has(#ask-bar[style*="flex"]) .ph-adv-btn { bottom: 92px; }

/* ── 遮罩 + 面板（屏幕正中弹出，2026-10-21 老杨定）─────────────────────
 * 老杨两次说明：这不是侧边挂件，是「点一下、在屏幕中间弹出来的答疑窗口」。
 * 所以面板用固定定位居中（left/top 50% + translate），配套一层遮罩：
 * 点遮罩、点 ×、按 Esc 都能关；打开期间锁 body 滚动。 */
.ph-adv-mask {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(16, 24, 40, .32);
  animation: phAdvFade .16s ease-out;
}
.ph-adv-mask[hidden] { display: none; }
@keyframes phAdvFade { from { opacity: 0; } to { opacity: 1; } }

.ph-adv-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 9992;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 80px));
  background: #fff;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(16, 24, 40, .26), 0 2px 6px rgba(16, 24, 40, .06);
  overflow: hidden;
  color: var(--ink, #1f2733);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  transform-origin: center;
  animation: phAdvIn .2s ease-out;
}
@keyframes phAdvIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.ph-adv-panel[hidden] { display: none; }

.ph-adv-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 12px 16px;
  border-bottom: 1px solid var(--line, #e3e8ef);
  background: linear-gradient(180deg, #f0fbfe 0%, #fff 100%);
  flex: 0 0 auto;
}
.ph-adv-head-t { flex: 1 1 auto; min-width: 0; }
.ph-adv-head-t b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: .2px;
}
.ph-adv-head-t span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted, #6b7785);
}
.ph-adv-x {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #6b7785);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ph-adv-x:hover { background: #eef2f6; color: #1f2733; }

/* 「新对话」：记录留 7 天，得有出口（2026-10-22） */
.ph-adv-new {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: -1px;
  padding: 3px 9px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 999px;
  background: #fff;
  color: var(--muted, #6b7785);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
}
.ph-adv-new:hover { border-color: var(--brand, #0e7490); color: var(--brand, #0e7490); }
.ph-adv-new[hidden] { display: none; }

/* ── 消息区 ───────────────────────────────────────────────────────────── */
.ph-adv-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 14px 4px;
  background: #fbfcfd;
}
.ph-adv-msg {
  display: flex;
  margin-bottom: 10px;
}
.ph-adv-msg.is-user { justify-content: flex-end; }
.ph-adv-bub {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.62;
  word-break: break-word;
  white-space: pre-wrap;
}
.ph-adv-msg.is-bot .ph-adv-bub {
  background: #fff;
  border: 1px solid var(--line, #e3e8ef);
  border-bottom-left-radius: 4px;
  color: #1f2733;
}
.ph-adv-msg.is-user .ph-adv-bub {
  background: var(--brand, #0e7490);
  border-bottom-right-radius: 4px;
  color: #fff;
}
/* 回答里的站内路径是可点的（2026-10-22）：不改成按钮，保持正文链接的朴素样子 */
.ph-adv-link {
  color: var(--brand, #0e7490);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-all;
}
.ph-adv-link:hover { color: #0b5d75; }
.ph-adv-link:focus-visible { outline: 2px solid var(--brand, #0e7490); outline-offset: 2px; border-radius: 2px; }
/* 打字光标 */
.ph-adv-bub.is-typing::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  background: #94a3b8;
  animation: phAdvBlink .9s steps(2, start) infinite;
}
@keyframes phAdvBlink { to { visibility: hidden; } }
.ph-adv-note {
  margin: 2px 0 10px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #94a3b8;
}

/* ── 快捷问句（挂在消息列表末尾，跟着消息一起滚）───────────────────── */
.ph-adv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 12px;
}
.ph-adv-chip {
  padding: 6px 11px;
  border: 1px solid #cfe6ee;
  border-radius: 999px;
  background: #f4fbfd;
  color: #0e7490;
  font-size: 12.5px;
  line-height: 1.3;
  cursor: pointer;
}
.ph-adv-chip:hover { background: #e6f6fa; border-color: #a9d6e3; }
.ph-adv-chip[hidden] { display: none; }

/* ── 输入区 ───────────────────────────────────────────────────────────── */
.ph-adv-foot {
  flex: 0 0 auto;
  padding: 10px 12px 8px;
  border-top: 1px solid var(--line, #e3e8ef);
  background: #fff;
}
.ph-adv-inrow {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.ph-adv-in {
  flex: 1 1 auto;
  min-height: 38px;
  max-height: 104px;
  padding: 9px 11px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 10px;
  background: #fff;
  color: #1f2733;
  font-size: 13.5px;
  line-height: 1.5;
  font-family: inherit;
  resize: none;
  outline: none;
}
.ph-adv-in:focus { border-color: #7cb9c9; box-shadow: 0 0 0 3px rgba(14, 116, 144, .09); }
.ph-adv-send {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: var(--brand, #0e7490);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.ph-adv-send:disabled { background: #b9cdd4; cursor: not-allowed; }
.ph-adv-tip {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #9aa6b2;
  text-align: center;
}

/* 留档说明：比免责声明更淡一档，两行小字并排时不抢注意力 */
.ph-adv-note {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #b0bac5;
  text-align: center;
}
.ph-adv-note + .ph-adv-tip { margin-top: 2px; }

/* ── 窄屏兜底：右侧空白带放不下按钮时，改回贴视口右边 ─────────────────
 * 1168 = 960（内容宽）+ 2 ×（16 间距 + 88 按钮宽）。到这个宽度以下，
 * 内容区外侧已经没地方站了，硬撑会顶出屏幕。 */
@media (max-width: 1168px) {
  .ph-adv-btn { left: auto; right: 16px; }
}

/* ── 手机：铺满一屏 ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ph-adv-btn {
    right: 14px;
    /* 🔴 iPhone Safari 底部工具栏是浮层（约 44–50px），只按 16/20px 贴底会被整块盖住，
     *    用户视角就是「手机上根本没有入口」（2026-10-22 老杨反馈）。
     *    抬到 64px 起步，再叠 env(safe-area-inset-bottom) 兜全面屏 home bar。 */
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    height: 46px;
    padding: 0 17px 0 14px;
    font-size: 14px;
    /* 白圈 + 更重投影：手机页面底部经常压着文字/卡片，靠这个把按钮从背景里拎出来 */
    box-shadow: 0 8px 22px rgba(14, 116, 144, .34), 0 0 0 3px rgba(255, 255, 255, .72), 0 1px 4px rgba(16, 24, 40, .16);
  }
  body.has-askbar .ph-adv-btn,
  body:has(#ask-bar[style*="flex"]) .ph-adv-btn { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  .ph-adv-panel {
    left: 0;
    /* 高度/位移由 js 的 visualViewport 同步给出（键盘弹起时只占看得见的那块）；
     * 变量没设时退回整屏。 */
    top: var(--ph-vvt, 0px);
    right: 0;
    bottom: auto;
    transform: none;
    width: auto;
    max-height: none;
    height: var(--ph-vvh, 100%);
    border: 0;
    border-radius: 0;
    animation: phAdvSlide .2s ease-out;
  }
  @keyframes phAdvSlide {
    from { opacity: .6; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .ph-adv-head { padding-top: 16px; }
  .ph-adv-body { padding: 14px 14px 6px; }
  .ph-adv-bub { font-size: 14px; max-width: 90%; }
  .ph-adv-foot { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ph-adv-panel, .ph-adv-btn { animation: none; transition: none; }
}