/* ============================================================
   HiNext 在线咨询挂件 · 覆盖样式（生产可部署） v2
   插件：uhang-geo-connector（managed-site / public-advisor）
   ------------------------------------------------------------
   设计来源：
     · hinext-chat-widget-redesign.html  （面板 / 气泡 / 输入区皮肤）
     · hinext-monogram-h.html            （发光字母「H」Monogram 体系）
   本次变更：
     ① 收起态由「胶囊+对话气泡图标」改为「发光字母 H 圆形 FAB」
        （渐变圆 + 脉冲光环 + 在线绿点，沿用 monogram 方案⑥）
     ② 头部与气泡头像统一复用 H Monogram（白字 H + inset 高光）
     ③ 多语言 / RTL 就绪：:lang() 字体栈 + [dir=rtl] 内部镜像
   部署方式：作为子主题 / 高优先级样式引入，确保加载顺序晚于
   插件内联 <style>；冲突规则已加 !important。仅改皮肤，未动 JS。
   ------------------------------------------------------------
   多语言接入（交给插件 JS）：
     文本标签由插件按 <html lang> 注入（见 uhang-geo-advisor-i18n.json）。
     本 CSS 只负责「方向 + 字体 + 图标」，所有文本均为语言无关的
     符号（H / ➤ / 🔗 / 在线点），不写死任何语种文案。
     若插件在 FAB 内追加 <span class="hx-dot">，将自动渲染在线绿点。
   ============================================================ */

:root{
  /* 品牌色 */
  --hx-ink:#0f172a;
  --hx-muted:#64748b;
  --hx-line:#e9e5ff;
  --hx-brand1:#6366f1;
  --hx-brand2:#8b5cf6;
  --hx-grad:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  --hx-panel:#ffffff;
  --hx-body:#faf9ff;
  --hx-asst:#f5f3ff;
  --hx-asst-border:#ece8ff;
  --hx-online:#22c55e;

  /* H Monogram 尺寸档（与 monogram 方案保持一致） */
  --hx-fab-size:56px;      /* 收起态 FAB 直径（≈ mono.md） */
  --hx-fab-radius:18px;    /* 圆角：非正圆更精致（方案⑥ 用 15~20px） */
  --hx-fab-font:24px;      /* H 字号 */
  --hx-avatar-size:38px;   /* 面板头 / 气泡头像 */
  --hx-avatar-radius:12px;

  /* 字体栈（按语言切换） */
  --hx-font-latin:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --hx-font-cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --hx-font-jp:"Hiragino Sans","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;
  --hx-font-ko:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --hx-font-ar:"Segoe UI",Tahoma,"Geeza Pro","Noto Naskh Arabic",sans-serif;
}

/* 默认字体（拉丁优先，回退 CJK） */
.uhang-geo-advisor-open,
.uhang-geo-advisor,
.uhang-geo-advisor *{
  font-family:var(--hx-font-latin),var(--hx-font-cjk);
}
/* 按宿主页 <html lang> 切换字体栈 */
:lang(zh) .uhang-geo-advisor-open,
:lang(zh) .uhang-geo-advisor,
:lang(zh) .uhang-geo-advisor *{font-family:var(--hx-font-cjk),var(--hx-font-latin)}
:lang(ja) .uhang-geo-advisor-open,
:lang(ja) .uhang-geo-advisor,
:lang(ja) .uhang-geo-advisor *{font-family:var(--hx-font-jp),var(--hx-font-latin)}
:lang(ko) .uhang-geo-advisor-open,
:lang(ko) .uhang-geo-advisor,
:lang(ko) .uhang-geo-advisor *{font-family:var(--hx-font-ko),var(--hx-font-latin)}
:lang(ar) .uhang-geo-advisor-open,
:lang(ar) .uhang-geo-advisor,
:lang(ar) .uhang-geo-advisor *{font-family:var(--hx-font-ar),var(--hx-font-latin)}

/* ============================================================
   收起态：发光字母 H · 圆形 FAB + 脉冲光环
   ============================================================ */
.uhang-geo-advisor-open{
  position:fixed!important;right:22px!important;bottom:172px!important;z-index:99990;
  display:flex!important;align-items:center;justify-content:center;
  width:var(--hx-fab-size)!important;height:var(--hx-fab-size)!important;
  padding:0!important;border:0!important;border-radius:var(--hx-fab-radius)!important;
  background:var(--hx-grad)!important;
  /* 隐藏插件原始文字标签（如「在线咨询」），改用 ::before 的 H */
  color:transparent!important;font-size:0!important;
  cursor:pointer;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 8px 22px rgba(99,102,241,.45)!important;
  transition:transform .18s ease, box-shadow .18s ease;
}
/* H Monogram（语言无关，跨市场复用同一符号） */
.uhang-geo-advisor-open::before{
  content:"H";position:relative;z-index:1;
  color:#fff!important;line-height:1;
  font-family:var(--hx-font-latin),sans-serif;
  font-size:var(--hx-fab-font)!important;font-weight:800!important;letter-spacing:-1px!important;
}
/* 脉冲光环（提示「活的 AI」） */
.uhang-geo-advisor-open::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(139,92,246,.45);
  animation:hx-fab-pulse 2.6s infinite;
}
/* 若插件追加在线绿点子元素，自动定位到右下角 */
.uhang-geo-advisor-open .hx-dot{
  position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;
  background:var(--hx-online);border:2.5px solid #fff;z-index:2;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:hx-dot-pulse 2s infinite;
}
.uhang-geo-advisor-open:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 12px 28px rgba(99,102,241,.55)!important;
}
@keyframes hx-fab-pulse{0%{box-shadow:0 0 0 0 rgba(139,92,246,.45)}70%{box-shadow:0 0 0 16px rgba(139,92,246,0)}100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}}
@keyframes hx-dot-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ============================================================
   展开面板
   ============================================================ */
.uhang-geo-advisor{
  display:none;position:fixed;right:22px;bottom:236px!important;z-index:99990;
  width:min(392px,calc(100vw - 32px));
  background:var(--hx-panel);border:1px solid var(--hx-line)!important;
  border-radius:22px!important;box-shadow:0 24px 60px rgba(79,70,229,.22)!important;overflow:hidden;
}
.uhang-geo-advisor.open{display:flex;flex-direction:column;animation:hx-rise .22s ease}
@keyframes hx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* 头部：渐变 + H 头像 + 状态点 */
.uhang-geo-advisor header{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px;
  padding:16px!important;background:var(--hx-grad)!important;color:#fff!important;position:relative;
}
.uhang-geo-advisor header>div:first-child{display:flex!important;align-items:center!important;gap:11px}
/* 注入 H Monogram 头像（插件头部原本无头像元素） */
.uhang-geo-advisor header>div:first-child::before{
  content:"H";flex:0 0 auto;
  width:var(--hx-avatar-size);height:var(--hx-avatar-size);border-radius:var(--hx-avatar-radius);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.45);
  color:#fff;font-weight:800;font-size:17px;letter-spacing:-1px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 2px 6px rgba(79,70,229,.25);
  backdrop-filter:blur(4px);
}
.uhang-geo-advisor header strong{display:block!important;font-size:15px!important;font-weight:700!important}
.uhang-geo-advisor-status{margin-top:3px!important;opacity:.92;font-size:12px;display:flex;align-items:center;gap:6px}
.uhang-geo-advisor-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.3)}
.uhang-geo-advisor-actions{display:flex!important;align-items:center!important;gap:6px}
.uhang-geo-advisor header button{border:1px solid rgba(255,255,255,.4)!important;border-radius:8px!important;background:rgba(255,255,255,.12)!important;color:#fff!important;padding:6px 10px!important;font-size:12px!important;cursor:pointer;transition:background .15s}
.uhang-geo-advisor header button:hover{background:rgba(255,255,255,.24)!important}
.uhang-geo-advisor-close{font-size:20px!important;line-height:1;padding:4px 10px!important}

/* 消息区 */
.uhang-geo-advisor-body{padding:16px!important;height:372px!important;overflow:auto!important;background:var(--hx-body)!important}
.uhang-chat-message{max-width:84%!important;margin:0 0 12px!important;padding:11px 13px!important;border-radius:14px!important;white-space:pre-wrap;line-height:1.6;font-size:14px;position:relative}
.uhang-chat-message.assistant,.uhang-chat-message.human{
  background:var(--hx-asst)!important;border:1px solid var(--hx-asst-border)!important;color:#312e81!important;
  border-bottom-left-radius:5px!important;padding-left:42px!important;
}
/* 气泡内 H 头像（mono.xs 风格） */
.uhang-chat-message.assistant::before{
  content:"H";position:absolute;left:8px;top:10px;
  width:24px;height:24px;border-radius:8px;
  background:var(--hx-grad);color:#fff;font-size:12px;font-weight:800;letter-spacing:-1px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4);
}
.uhang-chat-message.visitor{margin-left:auto!important;background:var(--hx-grad)!important;color:#fff!important;border-bottom-right-radius:5px!important;border:0!important}
.uhang-chat-message.system{max-width:100%!important;padding:4px!important;text-align:center;color:#94a3b8!important;background:transparent!important;font-size:12px!important}

.uhang-chat-citations{margin-top:8px!important;padding-top:8px!important;border-top:1px dashed var(--hx-asst-border)!important}
.uhang-chat-citations a{display:inline-flex!important;align-items:center;gap:4px;margin:4px 6px 0 0!important;padding:5px 9px!important;background:#fff!important;border:1px solid var(--hx-asst-border)!important;border-radius:999px!important;color:#6d28d9!important;font-size:12px!important;text-decoration:none}
.uhang-chat-citations a::before{content:"🔗";font-size:11px}

/* 输入区 */
.uhang-geo-advisor form{display:flex!important;gap:8px;padding:12px!important;border-top:1px solid var(--hx-line)!important;background:#fff!important;align-items:flex-end}
.uhang-geo-advisor input[name=question]{flex:1;min-width:0;padding:12px 14px!important;border:1px solid #e2e8f0!important;border-radius:12px!important;font-size:14px;outline:none}
.uhang-geo-advisor input[name=question]:focus{border-color:var(--hx-brand1)!important;box-shadow:0 0 0 3px rgba(99,102,241,.15)!important}
.uhang-geo-advisor form button{
  border:0!important;border-radius:12px!important;background:var(--hx-grad)!important;color:#fff!important;padding:12px 16px!important;font-weight:700!important;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:transform .15s,opacity .15s;
}
.uhang-geo-advisor form button:hover{transform:translateY(-1px);opacity:.94}
.uhang-geo-advisor form button::after{content:" ➤";font-size:13px}

.uhang-geo-contact-toggle{margin:8px 14px 0!important;border:0!important;background:transparent!important;color:#6d28d9!important;font-size:13px!important;text-align:left;cursor:pointer;font-weight:600!important}

.uhang-geo-contact-form{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
.uhang-geo-contact-form[hidden]{display:none!important}
.uhang-geo-contact-form input{min-width:0;padding:10px 12px!important;border:1px solid #e2e8f0!important;border-radius:10px!important;font-size:13px;outline:none}
.uhang-geo-contact-form input:focus{border-color:var(--hx-brand1)!important;box-shadow:0 0 0 3px rgba(99,102,241,.15)!important}
.uhang-geo-contact-form label{grid-column:1/-1;font-size:11px;color:#64748b;display:flex;align-items:center;gap:6px}
.uhang-geo-contact-form label input{margin:0;width:auto}
.uhang-geo-contact-form button{grid-column:1/-1;background:var(--hx-grad)!important;color:#fff!important;border:0!important;border-radius:10px!important;padding:11px!important;font-weight:700!important;cursor:pointer}

/* ============================================================
   多语言 / RTL：阿拉伯语等从右向左书写时镜像内部布局
   （面板仍贴右下；仅翻转气泡对齐、头部按钮、输入与引用方向）
   ============================================================ */
[dir="rtl"] .uhang-geo-advisor{text-align:right}
[dir="rtl"] .uhang-geo-advisor header>div:first-child::before{order:2}
[dir="rtl"] .uhang-geo-advisor-actions{flex-direction:row-reverse}
/* AI 气泡靠右、访客气泡靠左 */
[dir="rtl"] .uhang-chat-message.assistant,
[dir="rtl"] .uhang-chat-message.human{
  margin-left:auto;margin-right:0;
  border-bottom-left-radius:14px;border-bottom-right-radius:5px;
  padding-left:13px;padding-right:42px;
}
[dir="rtl"] .uhang-chat-message.assistant::before{left:auto;right:8px}
[dir="rtl"] .uhang-chat-message.visitor{margin-right:auto;margin-left:0;border-bottom-right-radius:14px;border-bottom-left-radius:5px}
[dir="rtl"] .uhang-chat-citations{text-align:right}
[dir="rtl"] .uhang-geo-advisor form{direction:rtl}
[dir="rtl"] .uhang-geo-advisor form button::after{content:"➤ "}
[dir="rtl"] .uhang-geo-contact-toggle{text-align:right}

/* 移动端 */
@media(max-width:600px){
  .uhang-geo-advisor{right:14px!important;bottom:230px!important}
  .uhang-geo-advisor-body{height:54vh!important}
  .uhang-geo-advisor-open{right:14px!important;bottom:164px!important}
  [dir="rtl"] .uhang-geo-advisor{right:auto!important;left:14px!important}
  [dir="rtl"] .uhang-geo-advisor-open{right:auto!important;left:14px!important;bottom:164px!important}
}
