/* ============================================================
   前台「AI 欢迎向导」· 小光
   三帧拟真 3D 形象 + 眨眼/注视/点头/漂浮/挥手/说话口型
   完全独立，不影响站内任何既有样式；后台可逐项开关
   ============================================================ */
#hnGreeter{
  --hg-accent:#C8A96A; --hg-accent-2:#8E2D22;
  --hg-paper:#FFFDF8; --hg-ink:#2B2622; --hg-sub:#8A7C6A;
  --hg-line:rgba(200,169,106,.34); --hg-shadow:0 18px 46px rgba(52,35,20,.19);
  --hg-w:125px; --hg-h:210px;
  position:fixed; bottom:22px; right:26px; z-index:90;
  display:flex; align-items:flex-end; gap:12px;
  pointer-events:none; opacity:1;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
#hnGreeter[hidden]{ display:none !important }
#hnGreeter[data-pos="left"]{ right:auto; left:26px; flex-direction:row-reverse }
#hnGreeter *{ box-sizing:border-box }
#hnGreeter button{ font-family:inherit }

/* ---------- 入场 / 隐藏 ---------- */
#hnGreeter .hg-wrap{ position:relative; display:flex; align-items:flex-end; gap:12px;
  opacity:0; transform:translateY(52px) scale(.86); transform-origin:bottom center;
  transition:opacity .55s ease, transform .72s cubic-bezier(.2,1.5,.4,1); pointer-events:none }
#hnGreeter.is-in .hg-wrap{ opacity:1; transform:none; pointer-events:auto }
#hnGreeter.is-out .hg-wrap{ opacity:0; transform:translateY(26px) scale(.9); pointer-events:none }

/* ---------- 角色本体 ---------- */
.hg-stage{ position:relative; width:var(--hg-w); height:var(--hg-h); flex:none;
  filter:drop-shadow(0 12px 14px rgba(60,42,20,.24)) }
.hg-floor{ position:absolute; left:12%; right:12%; bottom:-2px; height:13px; border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(60,42,20,.26),rgba(60,42,20,0) 72%);
  filter:blur(2px); z-index:0 }
.hg-tilt{ position:absolute; inset:0; z-index:1; transform-origin:50% 78%; transition:transform .3s ease-out;
  will-change:transform }
.hg-char{ position:absolute; inset:0; transform-origin:50% 88%; will-change:transform }
.hg-frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .16s ease; -webkit-user-drag:none; user-select:none; pointer-events:none }
.hg-frame.is-on{ opacity:1 }
/* 形象色调 */
#hnGreeter[data-tone="warm"] .hg-frame{ filter:sepia(.14) saturate(1.12) }
#hnGreeter[data-tone="cool"] .hg-frame{ filter:hue-rotate(158deg) saturate(.78) }
#hnGreeter[data-tone="rose"] .hg-frame{ filter:hue-rotate(-22deg) saturate(1.14) }
#hnGreeter[data-tone="mono"] .hg-frame{ filter:grayscale(1) contrast(1.03) }

/* 呼吸 / 漂浮 / 点头：作用在角色层，帧图叠加不受影响 */
#hnGreeter[data-anim="breathe"] .hg-char{ animation:hgBreathe 4.2s ease-in-out infinite }
#hnGreeter[data-anim="float"] .hg-char{ animation:hgFloat 4.6s ease-in-out infinite }
#hnGreeter[data-anim="breathe"][data-anim2="float"] .hg-char{ animation:hgBreathe 4.2s ease-in-out infinite,hgFloat 6.8s ease-in-out infinite }
@keyframes hgBreathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.018) } }
@keyframes hgFloat{ 0%,100%{ transform:translateY(0) rotate(0deg) } 33%{ transform:translateY(-5px) rotate(-.9deg) } 66%{ transform:translateY(-2px) rotate(.9deg) } }
.hg-char.is-nod{ animation:hgNod .75s cubic-bezier(.36,.07,.19,.97) !important }
@keyframes hgNod{ 0%,100%{ transform:rotate(0) } 25%{ transform:rotate(3.5deg) translateY(2px) } 60%{ transform:rotate(-2.5deg) } }
.hg-char.is-jump{ animation:hgJump .62s cubic-bezier(.2,1.4,.4,1) !important }
@keyframes hgJump{ 0%,100%{ transform:translateY(0) scale(1) } 35%{ transform:translateY(-16px) scale(1.045) } 70%{ transform:translateY(-3px) scale(.99) } }
.hg-char.is-talk{ animation:hgTalk .38s ease-in-out infinite alternate !important }
@keyframes hgTalk{ from{ transform:translateY(0) scaleY(1) } to{ transform:translateY(-1px) scaleY(1.006) } }

/* 眼睑：盖在两眼上，快速 scaleY 实现自然眨眼 */
.hg-lid{ position:absolute; z-index:3; border-radius:50% 50% 46% 46%/58% 58% 42% 42%;
  background:linear-gradient(180deg,#FBF7EC 0%,#F2EBDC 58%,#E7DCC7 100%);
  box-shadow:inset 0 -2px 3px rgba(160,138,100,.22);
  transform:scaleY(0); transform-origin:top center; pointer-events:none; opacity:.97 }
.hg-lid.l{ left:27.2%; top:32.1%; width:13.75%; height:9.9% }
.hg-lid.r{ left:57.3%; top:32.1%; width:13.75%; height:9.9% }
.hg-stage.is-blink .hg-lid{ transform:scaleY(1); transition:transform .075s ease-in }
.hg-stage:not(.is-blink) .hg-lid{ transition:transform .11s ease-out }
/* 瞳孔高光：跟随鼠标轻微移动，形成"看着你"的感觉 */
.hg-gaze{ position:absolute; z-index:4; width:5.4%; height:3.1%; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95),rgba(255,255,255,.15) 62%,transparent 72%);
  pointer-events:none; transition:transform .16s ease-out }
.hg-gaze.l{ left:31.4%; top:34.4% }
.hg-gaze.r{ left:61.5%; top:34.4% }

/* ---- 科技形象：面屏是深色玻璃，眼睑用熄灯色覆盖，眨眼像发光眼环瞬间熄灭 ---- */
#hnGreeter[data-skin="tech"] .hg-lid{
  background:linear-gradient(180deg,#0C1B26 0%,#101F2B 62%,#162A37 100%);
  box-shadow:inset 0 -1px 2px rgba(70,200,240,.22); opacity:1 }
#hnGreeter[data-skin="tech"] .hg-lid.l{ left:37.7%; top:16.2%; width:7.6%; height:4.9%; border-radius:46% }
#hnGreeter[data-skin="tech"] .hg-lid.r{ left:55.8%; top:16.2%; width:7.6%; height:4.9%; border-radius:46% }
#hnGreeter[data-skin="tech"] .hg-gaze{ width:2.6%; height:1.5%;
  background:radial-gradient(circle,rgba(190,245,255,.95),rgba(60,200,240,.25) 60%,transparent 72%) }
#hnGreeter[data-skin="tech"] .hg-gaze.l{ left:39.7%; top:17.4% }
#hnGreeter[data-skin="tech"] .hg-gaze.r{ left:57.8%; top:17.4% }
#hnGreeter[data-skin="tech"] .hg-floor{
  background:radial-gradient(ellipse at center,rgba(40,180,230,.34),rgba(40,180,230,0) 72%) }
#hnGreeter[data-skin="tech"] .hg-stage{ filter:drop-shadow(0 10px 16px rgba(20,90,130,.3)) }
/* 胸口能量核心的呼吸光晕 */
.hg-core{ position:absolute; z-index:2; left:50%; top:38%; width:22%; height:13%;
  transform:translateX(-50%); border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse,rgba(70,210,255,.55),rgba(70,210,255,0) 70%);
  mix-blend-mode:screen; filter:blur(5px) }
#hnGreeter[data-skin="tech"][data-anim="breathe"] .hg-core{ animation:hgCore 3.4s ease-in-out infinite }
@keyframes hgCore{ 0%,100%{ opacity:.22 } 50%{ opacity:.75 } }

/* 星光 / 爱心粒子 */
.hg-sparks{ position:absolute; inset:-10% -20% 0 -20%; z-index:5; pointer-events:none }
.hg-spark{ position:absolute; bottom:38%; left:50%; font-size:15px; opacity:0;
  animation:hgSpark 1.15s ease-out forwards; text-shadow:0 2px 8px rgba(255,214,120,.8) }
@keyframes hgSpark{ 0%{ opacity:0; transform:translate(0,0) scale(.4) rotate(0) }
  22%{ opacity:1 } 100%{ opacity:0; transform:translate(var(--dx),-76px) scale(1.15) rotate(var(--dr)) } }

/* 角色点击热区与名牌 */
.hg-hit{ position:absolute; inset:0; z-index:6; border:0; background:transparent; padding:0;
  cursor:pointer; border-radius:40% 40% 26% 26%; -webkit-tap-highlight-color:transparent }
.hg-hit:focus-visible{ outline:2px solid var(--hg-accent); outline-offset:4px }
.hg-badge{ position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); z-index:7;
  padding:3px 11px; border-radius:99px; font-size:11px; letter-spacing:1px; white-space:nowrap;
  color:#fff; background:linear-gradient(135deg,var(--hg-accent-2),var(--hg-accent));
  box-shadow:0 4px 12px rgba(90,55,25,.24); pointer-events:none }

/* ---------- 气泡 ---------- */
.hg-bubble{ position:relative; width:min(300px,72vw); max-width:300px;
  background:var(--hg-paper); border:1px solid var(--hg-line); border-radius:16px;
  box-shadow:var(--hg-shadow); padding:13px 15px 12px; pointer-events:auto;
  transform-origin:bottom right; animation:hgBubIn .5s cubic-bezier(.2,1.4,.4,1) both }
#hnGreeter[data-pos="left"] .hg-bubble{ transform-origin:bottom left }
@keyframes hgBubIn{ from{ opacity:0; transform:translateY(12px) scale(.9) } to{ opacity:1; transform:none } }
.hg-bubble::after{ content:""; position:absolute; right:-7px; bottom:26px; width:13px; height:13px;
  background:var(--hg-paper); border-right:1px solid var(--hg-line); border-top:1px solid var(--hg-line);
  transform:rotate(45deg) }
#hnGreeter[data-pos="left"] .hg-bubble::after{ right:auto; left:-7px; transform:rotate(225deg) }
.hg-bub-top{ display:flex; align-items:center; gap:8px; margin-bottom:7px }
.hg-avatar{ width:22px; height:22px; border-radius:50%; flex:none; object-fit:cover; object-position:50% 12%;
  border:1px solid var(--hg-line); background:#F6F0E2 }
.hg-name{ font-size:12px; font-weight:700; letter-spacing:1.2px; color:var(--hg-accent-2) }
.hg-online{ font-size:10px; color:var(--hg-sub); margin-left:auto; display:flex; align-items:center; gap:4px }
.hg-online::before{ content:""; width:6px; height:6px; border-radius:50%; background:#4CAF7D;
  box-shadow:0 0 0 3px rgba(76,175,125,.16) }
.hg-close{ width:20px; height:20px; border:0; border-radius:50%; background:rgba(120,100,70,.09);
  color:var(--hg-sub); font-size:15px; line-height:18px; cursor:pointer; flex:none; padding:0 }
.hg-close:hover{ background:var(--hg-accent-2); color:#fff }
.hg-text{ font-size:13.5px; line-height:1.78; color:var(--hg-ink); min-height:2.8em;
  word-break:break-word; letter-spacing:.2px }
.hg-caret{ display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-2px;
  background:var(--hg-accent-2); animation:hgCaret .8s steps(1) infinite }
@keyframes hgCaret{ 50%{ opacity:0 } }
.hg-quick{ display:flex; gap:6px; flex-wrap:wrap; margin-top:11px; padding-top:10px;
  border-top:1px dashed var(--hg-line) }
.hg-quick a{ display:inline-flex; align-items:center; gap:3px; padding:5px 9px; border-radius:99px;
  font-size:11.5px; text-decoration:none; color:var(--hg-accent-2);
  background:rgba(200,169,106,.13); border:1px solid rgba(200,169,106,.28);
  transition:transform .16s,background .16s }
.hg-quick a:hover{ transform:translateY(-2px); background:rgba(200,169,106,.28) }
.hg-bubble.is-fold .hg-text,.hg-bubble.is-fold .hg-quick{ display:none }

/* ---------- 收起后的停靠球 ---------- */
.hg-dock{ position:absolute; right:0; bottom:0; width:52px; height:52px; border-radius:50%;
  border:2px solid var(--hg-accent); background:#FBF4E4; overflow:hidden; cursor:pointer;
  box-shadow:0 8px 22px rgba(60,40,20,.24); z-index:8; padding:0;
  display:none; transition:transform .2s }
#hnGreeter[data-pos="left"] .hg-dock{ right:auto; left:0 }
.hg-dock img{ width:100%; height:100%; object-fit:cover; object-position:50% 14% }
.hg-dock:hover{ transform:scale(1.08) }
.hg-dock::after{ content:""; position:absolute; right:2px; bottom:2px; width:9px; height:9px;
  border-radius:50%; background:#4CAF7D; border:2px solid #fff }
#hnGreeter.is-docked .hg-wrap{ display:none }
#hnGreeter.is-docked .hg-dock{ display:block; animation:hgDockIn .42s cubic-bezier(.2,1.5,.4,1) both }
@keyframes hgDockIn{ from{ opacity:0; transform:scale(.4) } to{ opacity:1; transform:none } }

/* ---------- 主题配色 ---------- */
#hnGreeter[data-theme="tech"]{
  --hg-accent:#3FC4EE; --hg-accent-2:#1674A6;
  --hg-paper:linear-gradient(160deg,#FFFFFF,#F3FAFF);
  --hg-ink:#1B2A38; --hg-sub:#7C90A2; --hg-line:rgba(48,158,205,.28);
  --hg-shadow:0 18px 46px rgba(18,70,105,.2) }
#hnGreeter[data-theme="tech"] .hg-bubble{ border-color:rgba(60,180,225,.38);
  box-shadow:0 18px 46px rgba(18,70,105,.2),0 0 0 1px rgba(90,205,245,.14) inset }
#hnGreeter[data-theme="tech"] .hg-bubble::after{ background:#F7FBFF }
#hnGreeter[data-theme="tech"] .hg-quick a{ background:rgba(35,160,215,.12);
  border-color:rgba(35,160,215,.28); color:#1674A6 }
#hnGreeter[data-theme="tech"] .hg-badge{
  background:linear-gradient(135deg,#0E4D73,#38BCEA); box-shadow:0 4px 14px rgba(20,110,165,.34) }
#hnGreeter[data-theme="red"]{ --hg-accent:#D9A18A; --hg-accent-2:#9A3324; --hg-paper:#FFF9F5; --hg-line:rgba(154,51,36,.26) }
#hnGreeter[data-theme="jade"]{ --hg-accent:#7FAE90; --hg-accent-2:#2F6350; --hg-paper:#F8FCF9; --hg-line:rgba(47,99,80,.25) }
#hnGreeter[data-theme="night"]{ --hg-accent:#B79A63; --hg-accent-2:#D9C49A; --hg-paper:#22262E; --hg-ink:#F1ECE2; --hg-sub:#A9A296; --hg-line:rgba(183,154,99,.34); --hg-shadow:0 18px 46px rgba(0,0,0,.4) }
#hnGreeter[data-theme="night"] .hg-quick a{ background:rgba(183,154,99,.16); color:#E4D2AE }
#hnGreeter[data-theme="night"] .hg-close{ background:rgba(255,255,255,.1); color:#D8CBB2 }

/* ---------- 后台实时预览（同一套组件，脱离 fixed 定位） ---------- */
.hg-admin-preview{ position:relative; min-height:230px; border-radius:12px; overflow:hidden;
  background:linear-gradient(135deg,#F7F3E9,#EFE6D3); border:1px solid var(--gold-light,#E3D3AE);
  display:flex; align-items:flex-end; justify-content:center; padding:16px }
.hg-admin-preview::after{ content:"前台效果预览"; position:absolute; top:10px; left:12px;
  font-size:11px; letter-spacing:1px; color:#9A8762 }
.hg-admin-preview #hnGreeter{ position:relative; bottom:auto; right:auto; left:auto; opacity:1 }
.hg-admin-preview #hnGreeter .hg-wrap{ opacity:1; transform:none; pointer-events:auto }
.hg-admin-preview .hg-bubble{ animation:none }
.hg-admin-preview .hg-hit,.hg-admin-preview .hg-close,.hg-admin-preview .hg-quick a{ pointer-events:none }

/* ---------- 响应式 ---------- */
@media (max-width:1199px){
  #hnGreeter{ --hg-w:calc(var(--hg-h) * .716) }
}
@media (max-width:767px){
  #hnGreeter{ --hg-h:116px; --hg-w:83px; right:12px; bottom:12px; gap:8px }
  #hnGreeter[data-pos="left"]{ left:12px; right:auto }
  #hnGreeter .hg-wrap{ flex-direction:column; align-items:flex-end; gap:6px }
  #hnGreeter[data-pos="left"] .hg-wrap{ align-items:flex-start }
  .hg-bubble{ width:min(72vw,268px); padding:11px 12px; border-radius:14px }
  .hg-bubble::after{ right:22px; bottom:-7px; transform:rotate(135deg) }
  #hnGreeter[data-pos="left"] .hg-bubble::after{ left:22px; right:auto; transform:rotate(135deg) }
  .hg-text{ font-size:12.8px; line-height:1.7 }
  .hg-quick a{ font-size:11px; padding:5px 8px }
  .hg-sparks{ display:none }
  .hg-dock{ width:46px; height:46px }
}
@media (prefers-reduced-motion:reduce){
  #hnGreeter[data-reduce="1"] .hg-char,#hnGreeter[data-reduce="1"] .hg-spark,
  #hnGreeter[data-reduce="1"] .hg-bubble{ animation:none !important }
  #hnGreeter[data-reduce="1"] .hg-wrap{ transition:opacity .2s ease }
}
@media print{ #hnGreeter{ display:none !important } }

/* ============================================================
   v3 扩展：拟真仿生形象 / 可爱情绪动作 / 智能问答
   ============================================================ */

/* 仿生形象是真人面孔，隐藏为机甲面屏设计的眼睑 / 瞳孔高光 / 能量核心，
   避免有不自然的色块盖在脸上；眨眼改用整体轻微的点头脉冲表现 */
#hnGreeter[data-human="1"] .hg-lid,
#hnGreeter[data-human="1"] .hg-gaze,
#hnGreeter[data-human="1"] .hg-core{ display:none !important }
#hnGreeter[data-human="1"] .hg-stage{ filter:drop-shadow(0 10px 14px rgba(70,52,32,.20)) }
#hnGreeter[data-human="1"] .hg-floor{
  background:radial-gradient(ellipse at center,rgba(70,52,32,.22),rgba(70,52,32,0) 72%) }
#hnGreeter[data-human="1"] .hg-stage.is-humblink .hg-frame.is-on{
  transform:translateY(1px) scaleY(.994); transition:transform .1s ease }

/* 欢迎语可换行（页面感知时第二行是本页介绍） */
.hg-text{ white-space:pre-line }
.hg-bubble.is-fold .hg-qa{ display:none }

/* ---------- 智能问答 ---------- */
.hg-qa{ margin-top:10px; padding-top:9px; border-top:1px dashed var(--hg-line) }
.hg-qa-chips{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:7px }
.hg-qa-chips:empty{ display:none }
.hg-qa-chip{ font-family:inherit; font-size:11px; line-height:1.5; padding:3px 9px; border-radius:99px;
  border:1px solid var(--hg-line); background:rgba(200,169,106,.12); color:var(--hg-accent-2);
  cursor:pointer; transition:transform .16s,background .16s }
.hg-qa-chip:hover{ transform:translateY(-1px); background:rgba(200,169,106,.3) }
.hg-qa-form{ display:flex; gap:6px; align-items:center }
.hg-qa-input{ flex:1; min-width:0; border:1px solid var(--hg-line); border-radius:99px;
  padding:6px 12px; font-family:inherit; font-size:12px; color:var(--hg-ink);
  background:rgba(255,255,255,.72); outline:none; transition:border-color .18s }
.hg-qa-input:focus{ border-color:var(--hg-accent-2) }
.hg-qa-send{ width:30px; height:30px; flex:none; border:0; border-radius:50%;
  background:var(--hg-accent-2); color:#fff; font-size:12px; line-height:1; cursor:pointer;
  transition:transform .16s }
.hg-qa-send:hover{ transform:scale(1.1) }
.hg-qa-link{ margin-top:7px }
.hg-qa-link:empty{ display:none }
.hg-qa-link a{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:99px;
  font-size:11.5px; text-decoration:none; color:#fff; background:var(--hg-accent-2);
  box-shadow:0 3px 9px rgba(60,40,20,.16) }
.hg-qa-link a:hover{ filter:brightness(1.1) }
#hnGreeter[data-theme="night"] .hg-qa-input{ background:rgba(255,255,255,.1); color:var(--hg-ink) }

/* ---------- 可爱情绪动作 ---------- */
.hg-char.is-tilt{ animation:hgTilt 1.15s ease-in-out !important }
@keyframes hgTilt{ 0%,100%{ transform:rotate(0) } 30%{ transform:rotate(-5deg) translateY(2px) } 70%{ transform:rotate(3deg) } }
.hg-char.is-shy{ animation:hgShy 1.2s ease-in-out !important }
@keyframes hgShy{ 0%,100%{ transform:none } 28%{ transform:rotate(-3deg) translateY(3px) scale(.985) } 65%{ transform:rotate(2deg) translateY(2px) scale(.99) } }
.hg-char.is-shy::after{ content:'💗'; position:absolute; z-index:6; left:66%; top:15%;
  font-size:17px; pointer-events:none; animation:hgHeartUp 1.15s ease-out forwards }
@keyframes hgHeartUp{ 0%{ opacity:0; transform:translateY(6px) scale(.6) } 25%{ opacity:1 }
  100%{ opacity:0; transform:translateY(-30px) scale(1.2) rotate(12deg) } }
/* 单眼眨：右眼眼睑保持抬起 */
.hg-stage.is-blink.is-wink .hg-lid.r{ transform:scaleY(0) !important }
/* 左右轻摇 */
#hnGreeter[data-anim3="sway"] .hg-tilt{ animation:hgSway 5.2s ease-in-out infinite }
@keyframes hgSway{ 0%,100%{ transform:rotate(0) } 50%{ transform:rotate(1.6deg) } }
/* 探头入场 */
#hnGreeter.is-peek .hg-wrap{ animation:hgPeek .9s cubic-bezier(.2,1.4,.4,1) both }
@keyframes hgPeek{ 0%{ opacity:0; transform:translateY(70px) scale(.9) }
  55%{ opacity:1; transform:translateY(-7px) scale(1.01) } 100%{ opacity:1; transform:none } }
#hnGreeter[data-reduce="1"] .hg-char.is-tilt,
#hnGreeter[data-reduce="1"] .hg-char.is-shy,
#hnGreeter[data-reduce="1"] .hg-tilt,
#hnGreeter[data-reduce="1"] .hg-wrap{ animation:none !important }

/* 手机端问答区更紧凑 */
@media (max-width:767px){
  .hg-qa{ margin-top:8px; padding-top:7px }
  /* 手机端隐藏常见问题胶囊，保留输入框，气泡更轻巧不挡正文 */
  .hg-qa-chips{ display:none !important }
  .hg-qa-chip{ font-size:10.5px; padding:3px 7px }
  .hg-qa-input{ font-size:11.5px; padding:5px 10px }
  .hg-qa-send{ width:27px; height:27px }
}