/* 导购小机器人「小宇」—— 形象复用官网首页 #ytbBot2（配色 / 动画同源），气泡放缩放体之外保证可读。
   #clBot 只做定位（translate），.clbot-body 做缩放与倾斜；CSP style-src 'self'：JS 只走 CSSOM 改 transform。 */
#clBot { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 1001; pointer-events: none; will-change: transform; }
#clBot[hidden] { display: none; }
.clbot-body {
  position: absolute; left: -70px; top: -85px; width: 140px; height: 170px;
  transform: scale(.5); transform-origin: center; will-change: transform; pointer-events: none;
}
.clbot-body svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 12px rgba(34, 211, 238, .3)); animation: clbotGlow 3.2s ease-in-out infinite alternate; pointer-events: auto; cursor: pointer; }
@keyframes clbotGlow { from { filter: drop-shadow(0 0 8px rgba(34, 211, 238, .22)); } to { filter: drop-shadow(0 0 20px rgba(255, 77, 246, .4)); } }
.mk-glow-c { filter: drop-shadow(0 0 8px #22d3ee); }
.mk-glow-c2 { filter: drop-shadow(0 0 5px #22d3ee); }
.mk-glow-m { filter: drop-shadow(0 0 7px #ff4df6); }
.mk-glow-m2 { filter: drop-shadow(0 0 5px #ff4df6); }

/* 四肢摆动（与首页同一组关键帧） */
#clBot .ytb-armL { transform-box: fill-box; transform-origin: 50% 15%; animation: ytbArmL 1.8s ease-in-out infinite; }
#clBot .ytb-armR { transform-box: fill-box; transform-origin: 50% 15%; animation: ytbArmR 1.8s ease-in-out infinite .9s; }
#clBot .ytb-leg { transform-box: fill-box; transform-origin: 50% 0; animation: ytbLeg 1.3s ease-in-out infinite; }
#clBot .ytb-leg:nth-child(even) { animation-delay: .65s; }
#clBot.is-happy .ytb-armL, #clBot.is-happy .ytb-armR { animation-duration: .5s; }
#clBot.is-fly .ytb-leg { animation: ytbLegK .24s ease-in-out infinite; }
#clBot.is-fly .ytb-armL { animation: ytbArmLK .2s ease-in-out infinite; }
#clBot.is-fly .ytb-armR { animation: ytbArmRK .2s ease-in-out infinite .06s; }
@keyframes ytbArmL { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
@keyframes ytbArmR { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(14deg); } }
@keyframes ytbLeg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3.5px); } }
@keyframes ytbArmLK { 0%, 100% { transform: rotate(-32deg); } 50% { transform: rotate(16deg); } }
@keyframes ytbArmRK { 0%, 100% { transform: rotate(32deg); } 50% { transform: rotate(-16deg); } }
@keyframes ytbLegK { 0%, 100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(6px) rotate(9deg); } }
/* 表情：常态圆眼 / 开心 ∧∧（推荐时） */
#clBot .ytb-eyes-h { display: none; }
#clBot.is-happy .ytb-eyes-h { display: block; }
#clBot.is-happy .ytb-eyes-n { display: none; }
#clBot .ytb-rock { transform-box: fill-box; transform-origin: center; }
#clBot.is-perch .ytb-rock { animation: clbotRock 3.6s ease-in-out infinite; }
@keyframes clbotRock { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

/* 气泡：挂在机器人旁边（不随缩放），左右按屏幕位置自动换边 */
.clbot-bubble {
  position: absolute; bottom: 22px; width: max-content; max-width: 250px; min-width: 120px;
  background: rgba(2, 6, 23, .94); border: 1.5px solid rgba(34, 211, 238, .5); border-radius: 16px;
  padding: 11px 14px; font-size: 13px; line-height: 1.7; color: #dff8ff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  box-shadow: 0 8px 30px rgba(0, 3, 14, .7), 0 0 22px rgba(34, 211, 238, .2);
  opacity: 0; transform: scale(.6); transition: opacity .3s, transform .35s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none;
}
.clbot-bubble.show { opacity: 1; transform: scale(1); }
.clbot-bubble.right { left: 34px; transform-origin: left bottom; }
.clbot-bubble.left { right: 34px; transform-origin: right bottom; }
.clbot-bubble::after { content: ""; position: absolute; bottom: 10px; border: 8px solid transparent; }
.clbot-bubble.right::after { right: 100%; border-right-color: rgba(34, 211, 238, .5); }
.clbot-bubble.left::after { left: 100%; border-left-color: rgba(34, 211, 238, .5); }
.clbot-bubble.typing span::after { content: "▌"; color: #22d3ee; animation: clbotCaret .7s step-end infinite; margin-left: 2px; }
@keyframes clbotCaret { 50% { opacity: 0; } }
.clbot-bubble b { color: #22d3ee; font-weight: 700; }
/* 重点标记：红=价格 · 绿=折扣/省钱 · 黄=时长/额度 · 青=套餐名 · 灰删除线=原价 */
.clbot-bubble .hl-r { color: #ff6b6b; }
.clbot-bubble .hl-g { color: #4ade80; }
.clbot-bubble .hl-y { color: #fbbf24; }
.clbot-bubble .hl-c { color: #22d3ee; }
.clbot-bubble .hl-s { color: #8fa3bd; font-weight: 400; text-decoration: line-through; }
/* 带按钮的问句：气泡可点 */
.clbot-bubble.has-actions { pointer-events: auto; width: max-content; max-width: min(320px, calc(100vw - 32px)); min-width: 0; }
.clbot-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 10px; }
.clbot-actions[hidden] { display: none; }
.clbot-btn {
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 8px; padding: 7px 14px; line-height: 1.3;
  white-space: nowrap; text-align: center;
  border: 1px solid rgba(34, 211, 238, .45); background: transparent; color: #dff8ff; transition: background .15s, color .15s;
}
.clbot-btn:hover { background: rgba(34, 211, 238, .12); }
.clbot-btn.is-primary { background: linear-gradient(90deg, #38bdf8, #22d3ee); color: #0b1220; border-color: transparent; }
.clbot-btn.is-primary:hover { filter: brightness(1.08); }
/* 角落打瞌睡：闭眼 + Zzz，四肢停摆 */
#clBot .ytb-eyes-s { display: none; }
#clBot.is-sleep .ytb-eyes-s { display: block; }
#clBot.is-sleep .ytb-eyes-n, #clBot.is-sleep .ytb-eyes-h { display: none; }
#clBot.is-sleep .ytb-armL, #clBot.is-sleep .ytb-armR, #clBot.is-sleep .ytb-leg { animation-play-state: paused; }
.clbot-zzz { position: absolute; left: 14px; top: -46px; display: none; pointer-events: none; }
#clBot.is-sleep .clbot-zzz { display: block; }
.clbot-zzz i { position: absolute; left: 0; font-style: normal; font-weight: 900; color: #22d3ee; text-shadow: 0 0 12px rgba(34, 211, 238, .7); animation: clbotZ 2.4s ease-out infinite; opacity: 0; }
.clbot-zzz i:nth-child(1) { font-size: 13px; animation-delay: 0s; }
.clbot-zzz i:nth-child(2) { font-size: 17px; animation-delay: .8s; }
.clbot-zzz i:nth-child(3) { font-size: 21px; animation-delay: 1.6s; }
@keyframes clbotZ { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 20% { opacity: .95; } 100% { transform: translate(18px, -44px) rotate(20deg); opacity: 0; } }

/* 被介绍中的卡片：轻微高光，让人知道它在说哪张 */
.cl-plan.is-bot-focus { border-color: rgba(34, 211, 238, .75); box-shadow: 0 0 0 1px rgba(34, 211, 238, .35), 0 0 28px rgba(34, 211, 238, .18); }

@media (max-width: 560px) { #clBot { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .clbot-body svg, #clBot .ytb-armL, #clBot .ytb-armR, #clBot .ytb-leg, #clBot.is-perch .ytb-rock { animation: none; }
}

/* ===== 「售前疑问」弹窗：机器人肚子撑开，四周是机器人身体 ===== */
.clbot-faq { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.clbot-faq[hidden] { display: none; }
.clbot-faq-backdrop { position: absolute; inset: 0; background: rgba(8, 14, 28, .72); backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s; }
.clbot-faq.is-open .clbot-faq-backdrop { opacity: 1; }
.clbot-faq-robot {
  position: relative; width: min(600px, 94vw); display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 58%; opacity: 0; will-change: transform, opacity;
  transition: transform .55s cubic-bezier(.34, 1.4, .64, 1), opacity .25s;
}
.clbot-faq.is-open .clbot-faq-robot { opacity: 1; transform: translate(0, 0) scale(1); }
.clbot-faq-head { width: 132px; height: 106px; margin-bottom: -22px; position: relative; z-index: 2; filter: drop-shadow(0 0 14px rgba(34, 211, 238, .35)); }
.clbot-faq-head svg { display: block; width: 100%; height: 100%; }
.clbot-faq-eyes { transform-box: fill-box; transform-origin: center; animation: clbotFaqBlink 4.2s ease-in-out infinite; }
@keyframes clbotFaqBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.clbot-faq-torso {
  position: relative; width: 100%; padding: 18px; border-radius: 36px;
  background: linear-gradient(180deg, #9db1c9 0%, #6d819c 45%, #46566e 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .25), 0 0 34px rgba(34, 211, 238, .18);
}
.clbot-faq-screen {
  position: relative; background: #020617; border-radius: 22px; border: 1.5px solid rgba(34, 211, 238, .45);
  box-shadow: inset 0 0 40px rgba(34, 211, 238, .08); padding: 16px 16px 12px; color: #dff8ff;
  max-height: min(66vh, 620px); overflow: auto; text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.clbot-faq-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-right: 32px; }
.clbot-faq-top b { font-size: 17px; color: #22d3ee; }
.clbot-faq-top span { font-size: 12px; color: #8fa3bd; }
.clbot-faq-x { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: #8fa3bd; font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.clbot-faq-x:hover { color: #fff; }
.clbot-faq-group { font-size: 11px; letter-spacing: .12em; color: #8fa3bd; margin: 10px 2px 6px; text-transform: uppercase; }
.clbot-faq-group:first-child { margin-top: 0; }
.clbot-faq-q {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(125, 211, 252, .18); color: #e6edf6; font-size: 14px; line-height: 1.5;
  border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; transition: border-color .15s, background .15s;
}
.clbot-faq-q:hover, .clbot-faq-q:focus { border-color: #22d3ee; background: rgba(34, 211, 238, .08); outline: none; }
.clbot-faq-q-dot { width: 7px; height: 7px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 8px #22d3ee; flex: none; }
.clbot-faq-q-arrow { margin-left: auto; color: #8fa3bd; font-size: 18px; }
.clbot-faq-empty { color: #8fa3bd; font-size: 13px; padding: 20px 0; text-align: center; }
.clbot-faq-answer[hidden], .clbot-faq-list[hidden] { display: none; }
.clbot-faq-back { border: 0; background: transparent; color: #22d3ee; font-size: 13px; cursor: pointer; padding: 0 0 8px; font-family: inherit; }
.clbot-faq-back:hover { text-decoration: underline; }
.clbot-faq-answer-q { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: #fff; }
.clbot-faq-answer-a { font-size: 14px; line-height: 1.85; color: #dff8ff; background: rgba(255, 255, 255, .03); border: 1px solid rgba(125, 211, 252, .14); border-radius: 12px; padding: 12px 14px; animation: clbotFaqIn .35s ease-out; }
@keyframes clbotFaqIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.clbot-faq-answer-a .hl-r { color: #ff6b6b; font-weight: 700; }
.clbot-faq-answer-a .hl-g { color: #4ade80; font-weight: 700; }
.clbot-faq-answer-a .hl-y { color: #fbbf24; font-weight: 700; }
.clbot-faq-answer-a .hl-c { color: #22d3ee; font-weight: 700; }
.clbot-faq-answer-a .hl-s { color: #8fa3bd; text-decoration: line-through; }
.clbot-faq-foot { margin-top: 12px; font-size: 12px; color: #8fa3bd; text-align: center; }
.clbot-faq-foot a { color: #22d3ee; }
/* 肚子上的能量核心（机器人本体同款）*/
.clbot-faq-core { position: absolute; left: 50%; bottom: -13px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 14px #22d3ee, 0 0 0 5px #46566e, 0 0 0 7px rgba(34, 211, 238, .5); animation: clbotCore 2.2s ease-in-out infinite; }
@keyframes clbotCore { 0%, 100% { box-shadow: 0 0 10px #22d3ee, 0 0 0 5px #46566e, 0 0 0 7px rgba(34, 211, 238, .5); } 50% { box-shadow: 0 0 22px #22d3ee, 0 0 0 5px #46566e, 0 0 0 7px rgba(34, 211, 238, .9); } }
/* 两臂两腿 */
.clbot-faq-arm { position: absolute; top: 140px; width: 26px; height: 130px; border-radius: 13px; background: linear-gradient(180deg, #9db1c9, #46566e); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); z-index: 1; }
.clbot-faq-arm.is-l { left: -14px; transform: rotate(7deg); }
.clbot-faq-arm.is-r { right: -14px; transform: rotate(-7deg); }
.clbot-faq-legs { display: flex; gap: 46px; margin-top: -8px; position: relative; z-index: 0; }
.clbot-faq-legs i { display: block; width: 26px; height: 46px; border-radius: 13px; background: linear-gradient(180deg, #7d92ad, #46566e); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
@media (max-width: 720px) {
  .clbot-faq-arm { display: none; }
  .clbot-faq-head { width: 104px; height: 84px; margin-bottom: -16px; }
  .clbot-faq-torso { padding: 12px; border-radius: 28px; }
}