/* ===== H5 访客端 · 亮白主色 / 四套主题 ===== */
:root,
[data-theme="light"] {
  --bg: #eef3fa;
  --bg-2: #e8eefa;
  --panel: #ffffff;
  --panel-2: #f6f9fd;
  --line: rgba(20, 32, 56, 0.08);
  --line-2: rgba(20, 32, 56, 0.15);
  --text: #16203a;
  --text-2: #2b3a57;
  --muted: #66748c;
  --muted-2: #9aa6ba;
  --accent: #4f6ef7;
  --accent-2: #0ea5a4;
  --accent-soft: rgba(79, 110, 247, 0.09);
  --grad: linear-gradient(135deg, #4f6ef7, #6f8bff 55%, #0ea5a4);
  --bubble-in: #f3f7fd;
  --bubble-out: linear-gradient(135deg, #4f6ef7, #6480f8);
  --bubble-out-text: #fff;
  --ok: #12a150;
  --danger: #e5484d;
  --shadow: 0 22px 60px rgba(23, 42, 84, 0.14);
  --head-bg: rgba(255, 255, 255, 0.92);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
[data-theme="dark"] {
  --bg: #0b1120;
  --bg-2: #0e1526;
  --panel: #111a2b;
  --panel-2: #17223a;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #e9eefb;
  --text-2: #cdd8ee;
  --muted: #94a3bd;
  --muted-2: #64748b;
  --accent: #7c93ff;
  --accent-2: #2dd4bf;
  --accent-soft: rgba(124, 147, 255, 0.14);
  --grad: linear-gradient(135deg, #6d8dff, #2fd6c4);
  --bubble-in: #1b2540;
  --bubble-out: linear-gradient(135deg, #4f6ef7, #3f5ee0);
  --bubble-out-text: #f6f9ff;
  --ok: #34d399;
  --danger: #f87171;
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  --head-bg: rgba(17, 26, 43, 0.92);
}
[data-theme="blue"] {
  --bg: #e9f1ff;
  --bg-2: #dfeaff;
  --panel: #ffffff;
  --panel-2: #f0f5ff;
  --line: rgba(28, 58, 120, 0.1);
  --line-2: rgba(28, 58, 120, 0.18);
  --text: #10214a;
  --text-2: #23386b;
  --muted: #5570a0;
  --muted-2: #8298bd;
  --accent: #2f6bff;
  --accent-2: #0e8ce0;
  --accent-soft: rgba(47, 107, 255, 0.1);
  --grad: linear-gradient(135deg, #2f6bff, #4c8dff 55%, #0e8ce0);
  --bubble-in: #eaf1ff;
  --bubble-out: linear-gradient(135deg, #2f6bff, #4c8dff);
  --bubble-out-text: #fff;
  --ok: #0f9d58;
  --shadow: 0 22px 60px rgba(24, 58, 130, 0.16);
  --head-bg: rgba(255, 255, 255, 0.92);
}
[data-theme="warm"] {
  --bg: #fbf3e9;
  --bg-2: #f7ecdc;
  --panel: #ffffff;
  --panel-2: #fdf8f1;
  --line: rgba(84, 56, 24, 0.09);
  --line-2: rgba(84, 56, 24, 0.16);
  --text: #352417;
  --text-2: #4d3625;
  --muted: #7d6450;
  --muted-2: #a8917c;
  --accent: #e2683c;
  --accent-2: #c99a2e;
  --accent-soft: rgba(226, 104, 60, 0.1);
  --grad: linear-gradient(135deg, #e2683c, #ec8a4e 55%, #c99a2e);
  --bubble-in: #f9efe2;
  --bubble-out: linear-gradient(135deg, #e2683c, #ec8a4e);
  --bubble-out-text: #fff;
  --ok: #4f9d2f;
  --shadow: 0 22px 60px rgba(96, 62, 28, 0.16);
  --head-bg: rgba(255, 255, 255, 0.92);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  background: radial-gradient(760px 420px at 10% -6%, var(--accent-soft), transparent 62%), var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
  overflow: hidden;
}

/* ---------- 引导页 ---------- */
.gate { height: 100%; display: grid; place-items: center; padding: 24px; }
.gate-card {
  position: relative;
  width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 28px 24px; box-shadow: var(--shadow); text-align: center;
}
/* 引导页右上角的语言切换：跟聊天页的小按钮同一套视觉 */
.gate-lang {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  border-radius: 9px; border: none; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  display: grid; place-items: center; transition: 0.16s;
}
.gate-lang:hover { background: var(--accent-soft); color: var(--accent); }
.gate-logo {
  width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 16px;
  background: var(--grad); color: #fff; display: grid; place-items: center;
  font-size: 22px; font-weight: 800;
}
.gate-card h2 { font-size: 17px; margin: 0 0 8px; }
.gate-card p { font-size: 12.5px; color: var(--muted); line-height: 1.8; margin: 0 0 18px; }
.gate-card code { background: var(--panel-2); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
.gate-card input {
  width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--panel-2); color: var(--text); padding: 0 14px; font-size: 14px; margin-bottom: 12px;
  outline: none; font-family: inherit;
}
.gate-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-primary {
  background: var(--grad); color: #fff; border: none; height: 44px; border-radius: 12px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; width: 100%;
  box-shadow: 0 10px 24px rgba(79, 110, 247, 0.28);
}
.btn-block { display: block; }

/* ---------- 主容器 ---------- */
/* 桌面：撑满 body，中间放一张窄卡片。
   手机（≤860px）：外壳改成**钉在可视视口上**（见下面的 @media），高度吃
   viewport.js 写入的 --vvh，位置吃 --vv-top。只改高度不改位置是不够的 ——
   键盘弹出时浏览器还会把可视视口整体上推（offsetTop > 0），此时整块界面
   会窜到屏幕上方，用户看到的就是「回复消息时输入框卡到最顶上」。 */
.shell {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: auto;
}
.chat-card {
  position: relative;
  width: clamp(320px, 92vw, 420px);
  max-width: 100%;
  height: calc(100vh - 36px);
  height: calc(100dvh - 36px);
  max-height: 860px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.24s ease, height 0.24s ease, border-radius 0.2s;
}
.chat-card.wide { width: min(760px, calc(100vw - 36px)); }
.chat-card.full { width: calc(100vw - 36px); height: calc(100dvh - 36px); max-height: none; }

/* ---------- 手机：外壳钉在「可视视口」上（v1.41.0） ----------
   100dvh / 100vh 描述的都是**布局视口**，软键盘弹出时它们一动不动：
   iOS Safari 与 Android Chrome 默认都只缩「可视视口」，还会把它整体上推
   （visualViewport.offsetTop > 0）。此前的写法是「用 JS 把高度写进 --app-h」，
   高度是对的，位置却是错的 —— 页面被上推多少，界面就往上窜多少，
   表现就是「在手机上回复消息时，输入框卡到屏幕最顶上，下面一片空白」。

   现在改成 position:fixed + height:var(--vvh) + translateY(var(--vv-top))：
   fixed 元素贴在布局视口上，浏览器上推可视视口时它不动，所以要用
   --vv-top 把它按同样的距离推回来，视觉上就稳稳落在可视区顶部。

   同时把 html/body 也锁死：页面本身没有可滚动的余地，浏览器就不会为了
   「把输入框滚出来」去滚整页。滚动只留 .h5-body 这一层。 */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1024px) {
  html, body {
    overflow: hidden;
    overscroll-behavior: none;
    width: 100%;
    max-width: 100%;
    touch-action: manipulation;
  }
  body { position: fixed; inset: 0; }
  .shell {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--vvh, 100dvh);
    transform: translateY(var(--vv-shift, var(--vv-top, 0px)));
    overflow: hidden;
    transition: none;
  }
  .chat-card, .chat-card.wide, .chat-card.full {
    height: calc(var(--vvh, 100dvh) - 36px);
    transition: none;
  }
  /* 打字态：顶部提醒 / 群公告 / 站点公告 / 排队 / 公告条 / 打字提示 / 底部小字
     全部让位。小屏 + 键盘时这几条能吃掉 160px，消息区会被压到只剩十几像素，
     看起来就像「消息框被顶到最上面」。
     kb-open 只在「可视视口比布局视口小」时出现（iOS / Android 默认），
     kb-typing 是输入框聚焦（Android resizes-content 下 kb-open 不会出现）。 */
  html.kb-open .h5-tip,
  html.kb-open .site-notice,
  html.kb-open .queue-bar,
  html.kb-open .ann-bar,
  html.kb-open .typing,
  html.kb-open .h5-foot-note,
  html.kb-typing .h5-tip,
  html.kb-typing .site-notice,
  html.kb-typing .queue-bar,
  html.kb-typing .ann-bar,
  html.kb-typing .typing,
  html.kb-typing .h5-foot-note { display: none !important; }
  /* 键盘盖住的那块不需要安全区留白（否则白吃 20~34px） */
  html.kb-open .h5-foot,
  html.kb-typing .h5-foot { padding-bottom: 8px; }

  /* 浮层都在 .shell 之外，拿不到外壳的 translateY 补偿，得各自钉一次。
     不加这层的话，iOS 弹键盘时验证弹窗 / 图片预览会整体偏到屏幕上方。 */
  .verify-mask, #lightbox {
    height: var(--vvh, 100dvh);
    transform: translateY(var(--vv-shift, var(--vv-top, 0px)));
  }
  .gate { height: var(--vvh, 100dvh); }
  /* 公告气泡吊在输入框上方，键盘顶起来时跟着上移，别被键盘切掉下半截 */
  .announce-pop { bottom: calc(var(--kb-h, 0px) + 12px); }
}

.h5-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px; border-bottom: 1px solid var(--line);
  background: var(--head-bg); backdrop-filter: blur(14px); position: relative; z-index: 3;
  padding-top: max(9px, env(safe-area-inset-top));
}
.shop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shop-logo {
  width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto;
  background: var(--grad); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; box-shadow: 0 6px 14px rgba(79, 110, 247, 0.26);
}
.shop-txt { min-width: 0; }
.shop-txt b { display: block; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.shop-txt span { font-size: 10.5px; color: var(--muted-2); display: inline-flex; align-items: center; gap: 5px; margin-top: 1px; }
.shop-txt span i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }
.shop-txt span.on i { background: var(--ok); box-shadow: 0 0 0 3px rgba(18, 161, 80, 0.16); }
.shop-txt span.on { color: var(--ok); }
.head-acts { display: flex; align-items: center; gap: 2px; }
.icon-btn {
  position: relative; width: 30px; height: 30px; border-radius: 9px; border: none;
  background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center;
  transition: 0.16s;
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.sm { width: 30px; height: 30px; }
/* 语言按钮：不做图标做文字，省 16px 图标位还能一眼看出当前语言 */
.icon-btn.lang-btn {
  font-family: inherit; font-size: 11.5px; font-weight: 700; line-height: 1;
  letter-spacing: 0.02em;
}
.icon-btn .red {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--panel);
}

/* ---------- 公告条 ---------- */
.ann-bar {
  display: flex; align-items: center; gap: 7px; padding: 5px 12px;
  background: var(--accent-soft); border-bottom: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-2); flex: 0 0 auto;
}
.ann-ic { font-size: 13px; flex: 0 0 auto; }
.ann-scroll { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-more { border: none; background: none; color: var(--accent); font-size: 11.5px; cursor: pointer; font-family: inherit; flex: 0 0 auto; }

/* ---------- 消息区 ---------- */
.h5-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 6px;
  display: flex; flex-direction: column; gap: 9px;
  /* 键盘动画时顶部条会隐藏、输入区会改高；浏览器自己的滚动锚定和 smooth
     动画会与 JS 的消息锚点恢复互相打架，必须由应用单独管理。 */
  scroll-behavior: auto;
  overflow-anchor: none;
  /* 滚到底不把外层一起带着弹（手机上「消息到底了整页还动一下」的来源） */
  overscroll-behavior: contain;
}
.h5-body::-webkit-scrollbar { width: 6px; }
.h5-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }

.welcome { text-align: center; padding: 16px 12px 8px; }
.welcome .wlogo {
  width: 44px; height: 44px; border-radius: 14px; margin: 0 auto 9px;
  background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 800;
  box-shadow: 0 10px 24px rgba(79, 110, 247, 0.3);
}
.welcome h3 { margin: 0 0 4px; font-size: 14.5px; }
.welcome p { margin: 0 auto; font-size: 12px; color: var(--muted); line-height: 1.7; max-width: 300px; }
.welcome .quick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.welcome .quick button {
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-2);
  font-size: 11.5px; padding: 5px 10px; border-radius: 20px; cursor: pointer; font-family: inherit;
}
.welcome .quick button:hover { border-color: var(--accent); color: var(--accent); }

.msg { display: flex; gap: 7px; max-width: 86%; animation: rise 0.24s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } }
.bubble {
  padding: 7px 11px; border-radius: 4px 13px 13px 13px;
  background: var(--bubble-in); border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.55; word-break: break-word; white-space: pre-wrap;
}
.meta { font-size: 9.5px; color: var(--muted-2); margin-top: 3px; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.me .bubble { background: var(--bubble-out); color: var(--bubble-out-text); border: none; border-radius: 13px 4px 13px 13px; box-shadow: 0 5px 14px rgba(79, 110, 247, 0.18); }
.msg.me .meta { text-align: right; }
.msg.sys { align-self: center; max-width: 92%; }
.msg.sys .bubble {
  background: var(--panel-2); border: 1px dashed var(--line-2); color: var(--muted);
  font-size: 11.5px; border-radius: 16px; padding: 5px 12px; text-align: center;
}
.msg.sys .ava, .msg.sys .meta { display: none; }
.msg.ai .bubble { border-color: rgba(14, 165, 164, 0.28); background: var(--accent-soft); }
.ava {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
}
.msg.ai .ava { color: var(--accent-2); background: rgba(14, 165, 164, 0.12); }
.day-sep { align-self: center; font-size: 10px; color: var(--muted-2); background: var(--panel-2); padding: 2px 9px; border-radius: 20px; }
.bubble .pic { display: block; max-width: 180px; max-height: 230px; border-radius: 10px; cursor: zoom-in; }

.typing { height: 13px; padding: 0 14px; font-size: 10.5px; color: var(--muted-2); flex: 0 0 auto; }

/* ---------- 输入区 ---------- */
.h5-foot {
  flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--panel);
  padding: 7px 12px max(7px, env(safe-area-inset-bottom));
}
.composer { display: flex; align-items: flex-end; gap: 6px; }
.composer textarea {
  flex: 1; min-height: 38px; max-height: 120px; resize: none; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  padding: 9px 12px; font-size: 13.5px; line-height: 1.45; font-family: inherit; outline: none;
}
.composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.send {
  width: 38px; height: 38px; border-radius: 11px; border: none; cursor: pointer;
  background: var(--grad); color: #fff; display: grid; place-items: center; flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(79, 110, 247, 0.3); transition: 0.16s;
}
.send svg { width: 16px; height: 16px; }
.send:disabled { opacity: 0.5; cursor: not-allowed; }
.h5-foot-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 10px; color: var(--muted-2); margin-top: 5px; min-height: 12px;
}
.h5-foot-note a { color: var(--accent); }

/* ---------- 拖拽缩放 ---------- */
.resizer {
  position: absolute; right: 0; top: 72px; bottom: 72px; width: 8px;
  cursor: ew-resize; z-index: 4;
}
.resizer::after {
  content: ""; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 42px; border-radius: 3px; background: var(--line-2); opacity: 0;
  transition: 0.2s;
}
.chat-card:hover .resizer::after { opacity: 1; }

/* ---------- Lightbox ---------- */
#lightbox { position: fixed; inset: 0; background: rgba(10, 16, 30, 0.88); display: none; align-items: center; justify-content: center; z-index: 99; padding: 20px; }
#lightbox.on { display: flex; }
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }

/* ---------- 公告弹层 ---------- */
.sheet-mask {
  position: fixed; inset: 0; background: rgba(16, 26, 46, 0.42); backdrop-filter: blur(4px);
  display: none; align-items: flex-end; justify-content: center; z-index: 80;
}
.sheet-mask.on { display: flex; }
body.sheet-open { overflow: hidden; }
.sheet {
  display: flex; flex-direction: column;
  width: 100%; max-width: 520px; max-height: min(82vh, 720px);
  background: var(--panel); border-radius: 20px 20px 0 0; overflow: hidden;
  animation: up 0.24s ease;
}
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
/* 标题吸顶：公告再长，关闭按钮也一直在 */
.sheet h3 {
  flex: 0 0 auto; margin: 0; padding: 15px 18px 13px; position: relative; z-index: 1;
  font-size: 15px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.sheet h3 .sheet-count { font-size: 11px; font-weight: 500; color: var(--muted-2); }
.sheet h3 button {
  margin-left: auto; margin-right: -6px; width: 30px; height: 30px; border-radius: 9px;
  border: none; background: none; font-size: 20px; color: var(--muted-2); cursor: pointer; line-height: 1;
}
.sheet h3 button:hover { background: var(--panel-2); color: var(--text); }
.sheet-body {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 14px 18px max(18px, env(safe-area-inset-bottom)); scrollbar-width: thin;
}
.ann-item { border: 1px solid var(--line); border-radius: 13px; padding: 14px; margin-bottom: 10px; background: var(--panel-2); }
.ann-item:last-child { margin-bottom: 0; }
.ann-item h4 { margin: 0 0 6px; font-size: 13.5px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.ann-item p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.8; white-space: pre-wrap; }
.ann-item .t { font-size: 10.5px; color: var(--muted-2); margin-top: 8px; }
/* 「更新」标签：之前只有 console.css 里有 badge，H5 没引，标签一直是裸文本 */
.ann-item .badge, .announce-pop .badge {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; line-height: 1.7; vertical-align: middle;
  border: 1px solid var(--line-2); color: var(--muted); background: var(--panel);
}
.ann-item .badge-info, .announce-pop .badge-info {
  color: var(--accent); border-color: rgba(79, 110, 247, 0.26); background: var(--accent-soft);
}

/* 电脑端：公告改成居中对话框，不再是贴着窗口底边的手机抽屉 */
@media (min-width: 641px) {
  .sheet-mask { align-items: center; padding: 28px; }
  .sheet {
    max-height: min(78vh, 660px);
    border-radius: 20px; box-shadow: var(--shadow);
    animation: sheetIn 0.22s ease;
  }
  @keyframes sheetIn { from { transform: translateY(10px) scale(0.985); opacity: 0; } }
  .sheet h3 { padding: 16px 20px 14px; }
  .sheet-body { padding: 16px 20px 20px; }
}

/* ---------- 站内公告气泡（新公告自动弹一条） ----------
   这份样式原先只写在 console.css，而 H5 没引它，导致弹出来是个没样式的裸 div，
   还会被 body 的 overflow:hidden 裁到视口外、白字透明底彻底看不见。 */
.announce-pop {
  position: fixed; z-index: 78; left: 10px; right: 10px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: var(--shadow); padding: 15px 44px 14px 16px;
  animation: apIn 0.26s ease;
}
@keyframes apIn { from { transform: translateY(14px); opacity: 0; } }
.announce-pop h4 { margin: 0 0 7px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.announce-pop p {
  margin: 0; font-size: 12px; color: var(--muted); line-height: 1.75;
  white-space: pre-wrap; max-height: 104px; overflow: auto; overscroll-behavior: contain;
}
.announce-pop .close {
  position: absolute; top: 7px; right: 7px; width: 28px; height: 28px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted-2);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.announce-pop .close:hover { background: var(--panel-2); color: var(--text); }
.announce-pop .acts { margin-top: 12px; display: flex; gap: 8px; justify-content: flex-end; }
.announce-pop .acts button {
  height: 32px; padding: 0 14px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; border: 1px solid var(--line-2);
  background: var(--panel-2); color: var(--text-2); transition: 0.15s;
}
.announce-pop .acts button:hover { border-color: var(--accent); color: var(--accent); }
/* H5 里的 .btn-primary 是整宽 44px 的提交按钮，气泡里要收成小号 */
.announce-pop .acts .btn-primary,
.announce-pop .acts [data-ok] {
  width: auto; height: 32px; padding: 0 16px; border: 0; border-radius: 9px;
  background: var(--grad); color: #fff; box-shadow: 0 6px 16px rgba(79, 110, 247, 0.26);
}
.announce-pop .acts .btn-primary:hover,
.announce-pop .acts [data-ok]:hover { color: #fff; filter: brightness(1.04); }

@media (min-width: 641px) {
  .announce-pop {
    left: 50%; right: auto; width: min(380px, calc(100vw - 56px));
    bottom: calc(96px + env(safe-area-inset-bottom));
    transform: translateX(-50%); animation: apInMd 0.26s ease;
  }
  @keyframes apInMd { from { transform: translate(-50%, 14px); opacity: 0; } }
}


/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .shell { padding: 0; align-items: stretch; }
  .chat-card, .chat-card.wide, .chat-card.full {
    width: 100% !important; max-width: 100%; height: 100% !important; max-height: none;
    border-radius: 0; border: none; box-shadow: none;
  }
  .resizer { display: none; }
  .shop-txt b { max-width: min(150px, 42vw); }
  /* 窄屏也要跟主样式一样的密度：移动端屏幕更小，间距只能更紧，不能比桌面还松 */
  .h5-body { padding: 12px 11px 6px; gap: 9px; }
  .bubble { font-size: 14px; }
  .h5-foot { padding: 7px 11px max(7px, env(safe-area-inset-bottom)); }
  /* iOS 上输入框字号 < 16px 聚焦会自动放大页面，聊天窗尤其明显 */
  input, textarea, select { font-size: 16px !important; }
  .composer textarea, .gate-card input { font-size: 16px !important; }
}

/* 横屏手机 / 矮窗口（分屏、横过来看）：直接铺满，头部与欢迎区压缩，纵向留给消息 */
@media (max-height: 560px) and (max-width: 980px) {
  .shell { padding: 0; align-items: stretch; }
  .chat-card, .chat-card.wide, .chat-card.full {
    width: 100% !important; max-width: 100%; height: 100% !important; max-height: none;
    border-radius: 0; border: none; box-shadow: none;
  }
  .resizer { display: none; }
  .h5-head { padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
  .shop-logo { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }
  .welcome { padding: 12px 10px 4px; }
  .welcome .wlogo { width: 40px; height: 40px; font-size: 17px; margin-bottom: 8px; }
  .h5-body { padding: 10px 12px 4px; gap: 9px; }
  .h5-foot-note { display: none; }
  .typing { height: 12px; }
}

/* 大屏浏览器：聊天窗保持窄一些更好读，字号略放大 */
@media (min-width: 1200px) {
  .chat-card { width: 440px; }
  .bubble { font-size: 14.2px; }
  .composer textarea { font-size: 14.2px; }
}

/* ---------- 嵌入模式（iframe: /h5/?code=xxx&embed=1） ---------- */
body.embed { background: transparent; }
body.embed .shell { padding: 0; align-items: stretch; }
body.embed .chat-card,
body.embed .chat-card.wide,
body.embed .chat-card.full {
  width: 100% !important; max-width: 100%; height: 100% !important; max-height: none;
  border-radius: 0; border: none; box-shadow: none; margin: 0;
}
body.embed .resizer { display: none; }
body.embed .h5-foot-note #poweredBy { display: none; }

/* ---- v1.5.0 头像 ---- */
.shop-logo img,
.welcome .wlogo img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}
.shop-logo.has-img,
.welcome .wlogo.has-img { padding: 0; overflow: hidden; background: var(--panel-3, #eef2f9); }
/* 没有 Logo、也没有店铺名首字时把方块整体收起（v1.47.2 起新装默认是空），
   不给客户页面留一个空的渐变块，更不预设任何字母 */
.shop-logo.no-logo,
.welcome .wlogo.no-logo,
.gate-logo:empty { display: none; }

/* 粒子画布在小屏不影响手势 */
#lcFxCanvas { touch-action: manipulation; }

/* 撤回占位：虚线气泡，避免让人以为是自己没加载出来 */
.msg.revoked .bubble {
  background: transparent; border: 1px dashed var(--line-2); color: var(--muted-2);
  font-style: italic; box-shadow: none;
}
.msg.revoked .ava { opacity: .5; }

/* ---------- 商城入口条 + 文件卡片 ---------- */
.shop-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 8px 14px 0; padding: 9px 13px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(79, 110, 247, .1), rgba(14, 165, 164, .1));
  border: 1px solid rgba(79, 110, 247, .2); color: var(--text);
  font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.shop-bar:hover { border-color: var(--accent); }
.shop-bar svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .7; }

.file-card {
  display: inline-flex; align-items: center; gap: 9px; min-width: 156px; max-width: 220px;
  padding: 9px 10px; border-radius: 11px; background: rgba(20, 32, 56, .05);
  border: 1px solid rgba(20, 32, 56, .1); text-decoration: none; color: inherit;
}
.msg.me .file-card { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); color: #fff; }
.file-card.broken { color: var(--muted-2); font-size: 12px; }
.file-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(79, 110, 247, .14); color: #4f6ef7; font-size: 9px; font-weight: 700;
}
.msg.me .file-ic { background: rgba(255, 255, 255, .24); color: #fff; }
.file-meta { min-width: 0; display: flex; flex-direction: column; }
.file-meta b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta em { font-style: normal; font-size: 10.5px; opacity: .7; }

/* ---------- 前台公告条（超管开关控制，v1.14.0） ---------- */
.site-notice {
  display: flex; align-items: center; gap: 7px; padding: 5px 12px; flex: 0 0 auto;
  background: linear-gradient(90deg, rgba(79,110,247,.14), rgba(124,92,255,.10));
  border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--text-2);
}
.site-notice .sn-ic { font-size: 12px; flex: 0 0 auto; }
.site-notice .sn-text { flex: 1; min-width: 0; line-height: 1.6; word-break: break-word; }

/* ---------- 排队提示（v1.21.0） ---------- */
/* 刻意做得比公告条轻：这是一条「等一下就好」的状态，不是需要阅读的内容。
   有人排队时用暖色提醒，没人排队时退回中性色，避免整屏都在抢注意力。 */
.queue-bar {
  display: flex; align-items: center; gap: 7px; padding: 5px 12px; flex: 0 0 auto;
  background: var(--panel-2); border-bottom: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-2);
}
.queue-bar .q-ic { font-size: 12px; flex: 0 0 auto; }
.queue-bar .q-txt { flex: 1; min-width: 0; line-height: 1.6; word-break: break-word; }
.queue-bar.busy {
  background: linear-gradient(90deg, rgba(245,158,11,.16), rgba(245,158,11,.06));
  color: var(--text);
}
.queue-bar.busy .q-ic { animation: qSpin 2.4s linear infinite; }
@keyframes qSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* ---------- 初次访问人机验证 ---------- */
.verify-mask {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(8, 12, 24, .55); backdrop-filter: blur(3px); padding: 20px;
}
.verify-card {
  width: 100%; max-width: 320px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px 20px 18px; box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,.25));
}
.verify-card h3 { font-size: 16px; margin: 0 0 6px; }
.verify-sub { font-size: 12px; color: var(--muted); margin: 0 0 16px; line-height: 1.7; }
.verify-q { display: flex; align-items: center; gap: 8px; }
.verify-q #verifyExpr {
  flex: 1 1 auto; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: .04em;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 8px; font-variant-numeric: tabular-nums;
}
.verify-eq { color: var(--muted); font-size: 15px; }
.verify-q input {
  flex: 0 0 84px; height: 42px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-family: inherit; font-size: 15px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.verify-q input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.verify-err { min-height: 18px; font-size: 11.5px; color: var(--danger, #e5484d); margin-top: 8px; }
.verify-acts { display: flex; gap: 9px; margin-top: 12px; }
.verify-acts .btn { flex: 1; }

/* ---------- 演示站横幅 ---------- */
.demo-bar {
  display: flex; align-items: center; gap: 7px; padding: 5px 12px; flex: 0 0 auto;
  background: var(--accent); color: #fff; font-size: 11.5px; line-height: 1.5;
}
.demo-bar b { font-weight: 700; }
.demo-bar .demo-x { margin-left: auto; border: none; background: rgba(255,255,255,.22); color: #fff;
  border-radius: 7px; padding: 2px 8px; font-size: 11px; font-family: inherit; cursor: pointer; flex: 0 0 auto; }

/* ==========================================================================
   v1.17.0 · 前台会话页视觉升级
   目标：从「能用的聊天框」变成「像样子的客服窗口」——头部有品牌感、
   气泡层次分明、输入区像一张卡片，各种尺寸下都不挤不空。
   全部用变量覆盖，四套主题（light/dark/blue/warm）自动跟着走。
   ========================================================================== */

/* ---------- 头部 ---------- */
.h5-head {
  padding: 12px 14px;
  padding-top: max(12px, env(safe-area-inset-top));
  gap: 10px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 140%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.shop { gap: 10px; }
.shop-logo {
  width: 38px; height: 38px; border-radius: 13px; font-size: 15px;
  box-shadow: 0 6px 16px rgba(79, 110, 247, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}
.shop-txt b { font-size: 14.5px; font-weight: 650; letter-spacing: 0.01em; max-width: 210px; }
.shop-txt span {
  font-size: 11px; margin-top: 3px; gap: 6px; color: var(--muted);
  padding: 1px 8px 1px 0; border-radius: 999px;
}
.shop-txt span i { width: 7px; height: 7px; }
.shop-txt span.on i { animation: lcPulse 2.4s ease-in-out infinite; }
@keyframes lcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(18, 161, 80, 0.35); }
  60% { box-shadow: 0 0 0 5px rgba(18, 161, 80, 0); }
}
.icon-btn { width: 32px; height: 32px; border-radius: 10px; color: var(--muted); }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; }

/* 公告条：一条细窄的强调色带，不抢消息的注意力 */
.site-notice { padding: 6px 14px; font-size: 11.5px; gap: 8px; }
.ann-bar { padding: 6px 14px; font-size: 11.5px; }

/* ---------- 消息区 ---------- */
.h5-body {
  padding: 16px 14px 10px;
  gap: 12px;
  background:
    radial-gradient(520px 240px at 100% 0%, var(--accent-soft), transparent 70%),
    var(--panel);
  overscroll-behavior: contain;
}
.msg { max-width: 84%; gap: 9px; }
.msg-main { min-width: 0; display: flex; flex-direction: column; }
.ava {
  width: 30px; height: 30px; border-radius: 10px; font-size: 11.5px;
  background: var(--panel-2); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20, 32, 56, 0.06);
}
.ava.has-img { padding: 0; overflow: hidden; background: var(--panel-2); }
.ava.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg.me .ava { border-color: transparent; background: var(--accent-soft); }

.bubble {
  padding: 9px 13px;
  border-radius: 16px 16px 16px 5px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 14px; line-height: 1.62;
  box-shadow: 0 1px 2px rgba(20, 32, 56, 0.04);
}
.msg.me .bubble {
  border-radius: 16px 16px 5px 16px;
  background: var(--bubble-out);
  color: var(--bubble-out-text);
  border: none;
  box-shadow: 0 6px 18px rgba(79, 110, 247, 0.22);
}
.msg.ai .bubble { border-color: rgba(14, 165, 164, 0.3); background: var(--accent-soft); }

.meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 5px; padding: 0 3px; font-size: 10px; color: var(--muted-2);
  opacity: 0.9;
}
.msg.me .meta { justify-content: flex-end; }
.meta-name { font-weight: 600; color: var(--muted); }
.meta-dot { opacity: 0.5; }

/* 引用按钮：桌面悬停出现，触屏常驻半透明，别把气泡挤变形 */
.q-btn {
  margin-left: 2px; border: none; background: transparent; color: var(--accent);
  font-size: 10.5px; font-family: inherit; cursor: pointer; padding: 1px 4px;
  border-radius: 6px; opacity: 0; transition: 0.15s;
}
.msg:hover .q-btn { opacity: 1; }
.q-btn:hover { background: var(--accent-soft); }
@media (hover: none) { .q-btn { opacity: 0.75; } }

/* 引用块：像微信/飞书那样带一条左侧竖线，一眼区分「这是引用的旧话」 */
.quote-ref {
  display: block; margin-bottom: 6px; padding: 5px 9px;
  border-left: 3px solid var(--accent);
  border-radius: 6px; background: rgba(127, 143, 178, 0.12);
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
  cursor: pointer; max-width: 100%;
}
.quote-ref b { display: block; font-weight: 600; font-size: 11px; color: var(--accent); margin-bottom: 1px; }
.quote-ref span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg.me .quote-ref { background: rgba(255, 255, 255, 0.18); border-left-color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.86); }
.msg.me .quote-ref b { color: #fff; }

/* 定位高亮：点引用块跳回原消息时闪一下，长会话里不至于找不到 */
.msg.hl .bubble { animation: lcHl 1.6s ease; }
@keyframes lcHl {
  0%, 60% { box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(79, 110, 247, 0); }
}

/* 日期分隔：两侧细线，居中标签 */
.day-sep {
  align-self: stretch; display: flex; align-items: center; justify-content: center;
  gap: 10px; background: none; padding: 0; margin: 4px 0;
  font-size: 10.5px; color: var(--muted-2);
}
.day-sep::before, .day-sep::after {
  content: ""; height: 1px; flex: 1; background: var(--line);
}

/* 欢迎区：卡片式，别让首屏显得空 */
.welcome { padding: 22px 12px 10px; }
.welcome .wlogo { width: 52px; height: 52px; border-radius: 16px; font-size: 20px; margin-bottom: 12px; }
.welcome h3 { font-size: 15.5px; margin-bottom: 6px; }
.welcome p { font-size: 12.5px; line-height: 1.75; max-width: 320px; }
.welcome .quick { gap: 8px; margin-top: 14px; }
.welcome .quick button {
  padding: 7px 13px; border-radius: 999px; font-size: 12px;
  background: var(--panel); box-shadow: 0 1px 2px rgba(20, 32, 56, 0.05);
}
.welcome .quick button:hover { background: var(--accent-soft); }

/* ---------- 输入区 ---------- */
.h5-foot {
  padding: 9px 12px max(9px, env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.composer {
  align-items: flex-end; gap: 4px;
  padding: 4px 5px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-2);
  transition: border-color 0.16s, box-shadow 0.16s;
}
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer textarea {
  min-height: 36px; border: none; background: transparent; padding: 8px 4px;
  font-size: 14px; box-shadow: none;
}
.composer textarea:focus { border: none; box-shadow: none; }
/* iOS Safari / 微信内置浏览器：可编辑控件小于 16px 会在聚焦时自动缩放页面。
   这条必须放在最后一套 composer 样式之后，不能再被上面的 14px 覆盖。 */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1024px) {
  input, textarea, select { font-size: 16px !important; }
  .composer textarea, .gate-card input { font-size: 16px !important; }
}
.composer .icon-btn.sm { margin-bottom: 1px; }
.send {
  width: 36px; height: 36px; border-radius: 50%;
  box-shadow: 0 6px 16px rgba(79, 110, 247, 0.32);
}
.h5-foot-note { margin-top: 6px; opacity: 0.85; }

/* 引用条 */
.quote-bar {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 7px; padding: 6px 8px 6px 10px;
  border-radius: 12px; background: var(--accent-soft);
  border: 1px solid var(--line);
}
.qb-line { width: 3px; align-self: stretch; border-radius: 3px; background: var(--accent); flex: 0 0 auto; }
.qb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qb-main b { font-size: 11px; color: var(--accent); font-weight: 600; }
.qb-main span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-x {
  width: 26px; height: 26px; border-radius: 8px; border: none; flex: 0 0 auto;
  background: transparent; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
}
.qb-x:hover { background: var(--panel); color: var(--text); }

/* 会话已结束提示条（v1.38.0）
   不用警告色：结束是正常流程，不是出错。浅底 + 勾选图标 + 一句说明即可，
   重点是把「记录还在、还能继续发」讲清楚。 */
.conv-closed {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 7px; padding: 8px 11px;
  border-radius: 12px; background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.6; color: var(--muted);
}
.conv-closed .cc-ic {
  flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--ok-soft, rgba(18, 161, 80, .12));
  color: var(--ok, #12a150); font-size: 10px; font-weight: 700;
}

/* ---------- 不同尺寸下的布局 ---------- */
/* 小屏手机（<=380px）：左右留白再收一点，头像缩小，最大化正文宽度 */
@media (max-width: 380px) {
  .h5-head { padding: 10px 11px; padding-top: max(10px, env(safe-area-inset-top)); }
  .shop-logo { width: 34px; height: 34px; border-radius: 11px; }
  .shop-txt b { font-size: 13.5px; max-width: 44vw; }
  .head-acts { gap: 0; }
  .icon-btn { width: 29px; height: 29px; }
  .h5-body { padding: 12px 10px 8px; gap: 10px; }
  .msg { max-width: 88%; gap: 7px; }
  .ava { width: 26px; height: 26px; border-radius: 9px; font-size: 10.5px; }
  .bubble { padding: 8px 11px; font-size: 13.5px; }
  .h5-foot { padding: 7px 9px max(7px, env(safe-area-inset-bottom)); }
  .h5-foot-note { display: none; }
}

/* 平板 / 小笔记本：卡片给宽一点，正文行宽别太长 */
@media (min-width: 641px) and (max-width: 1024px) {
  .chat-card { width: min(560px, calc(100vw - 48px)); }
  .bubble { font-size: 14px; }
}

/* 大屏：固定一个舒适的阅读宽度 */
@media (min-width: 1025px) {
  .chat-card { width: 460px; }
}

/* 矮窗口（横屏手机、分屏）：压缩头部与欢迎区，把高度留给消息 */
@media (max-height: 520px) {
  .h5-head { padding: 8px 12px; }
  .shop-logo { width: 32px; height: 32px; }
  .welcome { padding: 10px 10px 4px; }
  .welcome .wlogo { width: 38px; height: 38px; margin-bottom: 6px; }
  .welcome .quick { display: none; }
  .h5-body { padding: 8px 12px 4px; gap: 9px; }
  .h5-foot-note { display: none; }
}

/* 嵌入模式：iframe 已经圆角裁剪，这里只要把背景铺满 */
body.embed .h5-head { box-shadow: none; }

/* ---------- 引用与移动端长内容（v1.19.0） ----------
   与工作台同一套修法：flex 子项 min-width:0 + overflow-wrap:anywhere。
   移动端另有两点：容器禁止横向滚动，气泡宽度回调到 90%，
   否则一条长链接就能把整个聊天窗推出屏幕，手指只能左右拖。 */
.msg { min-width: 0; }
.msg > div { min-width: 0; max-width: 100%; }
.bubble { max-width: 100%; overflow-wrap: anywhere; }
.h5-body { overflow-x: hidden; }
.quote-ref { max-width: 100%; overflow: hidden; }
.quote-ref b {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quote-ref span { overflow-wrap: anywhere; word-break: break-word; }
.bubble .file-card { max-width: 100%; }
.bubble pre { max-width: 100%; overflow-x: auto; }
@media (max-width: 640px) {
  .msg { max-width: 90%; }
  .msg.sys { max-width: 96%; }
  .bubble { overflow-wrap: anywhere; word-break: break-word; }
}

/* ---------- 客户群聊（v1.31.0） ---------- */
/* 首屏的进群入口：做成一行低强调文字链接，不跟三个快捷问题抢注意力，
   但要让只拿到群聊码的客户找得到。 */
.welcome-group { margin-top: 14px; }
.welcome-group button {
  border: none; background: transparent; color: var(--accent);
  font-size: 12px; font-family: inherit; cursor: pointer; padding: 6px 8px; border-radius: 8px;
}
.welcome-group button:hover { background: var(--accent-soft); }

/* 群成员行：群聊面板与商户端的成员列表共用同一套观感 */
.cg-member {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px;
}
.cg-member b { font-size: 13px; font-weight: 600; color: var(--text); }
.cg-member small { color: var(--muted); font-size: 11.5px; }
.cg-member .btn { height: 28px; padding: 0 9px; font-size: 11.5px; }

/* ================= v1.36.0 访客端整理 =================
 * 三件事：平台托管文案的金色提醒条、表情面板、群聊弹层双页签。
 * 全部按「不加高度」设计——访客页的任何一条常驻横条都会压缩聊天区，
 * 所以提醒条只在平台真的配了内容时才渲染。
 */

/* ---- 顶部重要提醒：金色炫动 ---- */
.h5-tip {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 14px;
  margin: 0;
  font-size: 12.5px; line-height: 1.6;
  border-bottom: 1px solid rgba(196, 148, 22, .22);
  /* 底色极浅，避免抢走聊天内容的注意力；重点靠文字本身的流光承担 */
  background: linear-gradient(90deg, #fffbf0, #fff6e2 55%, #fffbf0);
  position: relative;
  overflow: hidden;
}
.h5-tip-ic {
  flex: 0 0 auto; font-size: 12px; color: #b8860b;
  line-height: 1.7;
}
.h5-tip-txt {
  flex: 1; min-width: 0; word-break: break-word;
  font-weight: 600;
  /* 金色流光：底色是深金，扫过的高光用白金色。
     用 background-clip:text 而不是 text-shadow —— 后者在
     小字号中文字上会糊成一团，边缘全是毛刺。 */
  background: linear-gradient(100deg,
      #9a6b00 0%, #d4a017 30%, #fff3c4 46%, #ffd75e 52%, #d4a017 68%, #9a6b00 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #b8860b; /* 不支持 background-clip 时的兜底 */
  animation: h5TipShine 3.6s linear infinite;
}
/* 兜底：不支持文本裁剪的浏览器（老 WebView）显示纯金色，不要出现空白 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .h5-tip-txt { -webkit-text-fill-color: #a8760a; color: #a8760a; background: none; }
}
@keyframes h5TipShine {
  0% { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
/* 系统开了「减少动态效果」就不要闪：这类提醒是安全信息，
   让人读不下去比不够醒目更糟 */
@media (prefers-reduced-motion: reduce) {
  .h5-tip-txt { animation: none; background: none; -webkit-text-fill-color: #a8760a; color: #a8760a; }
}

/* ---- 表情面板 ---- */
.emoji-panel {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 8px 10px 10px;
  animation: emojiUp .16s ease-out;
  max-height: 40vh;
  display: flex; flex-direction: column;
}
@keyframes emojiUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.emoji-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--muted);
  padding: 0 2px 6px;
}
.emoji-close {
  /* 原来只有 19×18（font-size 18 + padding 0 4px），手机上根本点不准；
     而且它正好落在公告气泡 .announce-pop(z-index:78) 的位置上，
     点「×」会点到气泡。这里把触区做到 32×32、手机 36×36。 */
  width: 32px; height: 32px; margin: -4px 0 -4px 0;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.emoji-close:hover { color: var(--text); background: var(--panel-2, rgba(0, 0, 0, .04)); }
@media (max-width: 640px) {
  .emoji-close { width: 36px; height: 36px; }
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  overflow-y: auto; overscroll-behavior: contain;
}
.emoji-cell {
  border: 0; background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1;
  padding: 6px 0; border-radius: 8px;
  transition: background .12s;
  /* 显式指定 emoji 字体（v1.38.0）：不写这一条时浏览器会按正文字体
     （PingFang / 微软雅黑 / 思源）逐字回退，这些字体里没有彩色字形，
     在部分机器上会退化成空心方框，看起来就是「格子是空的」。 */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    "Twemoji Mozilla", "EmojiOne Color", sans-serif;
  font-variant-emoji: emoji;
}
.emoji-cell:hover { background: var(--accent-soft); }
.emoji-cell:active { transform: scale(.9); }
/* 窄屏少放两列：8 列在 320px 上每个格子只有 34px，反而更难点 */
@media (max-width: 380px) {
  .emoji-grid { grid-template-columns: repeat(6, 1fr); }
  .emoji-cell { font-size: 21px; }
}

/* ---- 群聊弹层：双页签 ---- */
.group-card { max-height: min(78vh, 620px); display: flex; flex-direction: column; }
.group-tabs {
  display: flex; gap: 4px; margin: 10px 0 12px;
  background: var(--panel-2); border-radius: 10px; padding: 3px;
}
.group-tab {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  padding: 7px 0; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  font-family: inherit;
  transition: background .14s, color .14s;
}
.group-tab.active {
  background: var(--panel); color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.group-pane { display: flex; flex-direction: column; min-height: 0; }
.group-mine {
  overflow-y: auto; overscroll-behavior: contain;
  max-height: 42vh;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 4px;
}
.group-empty {
  text-align: center; font-size: 12.5px; color: var(--muted);
  padding: 22px 8px; line-height: 1.9;
}
.group-empty small { font-size: 11.5px; color: var(--muted); opacity: .8; }
/* 一行三样：群名（可截断）→ 人数（固定宽）→ 按钮（不换行）。
   老版本用 flex:1 的文字块 + 两个按钮，群名一长就把人数挤到第二行、
   按钮再被压成两行——这就是「人数和按钮错位」的根因。 */
.cg-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel);
}
.cg-item.cur { border-color: var(--accent); background: var(--accent-soft); }
.cg-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cg-item-main b {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cg-item-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cg-item-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.cg-item-acts .btn { height: 28px; padding: 0 10px; font-size: 11.5px; white-space: nowrap; }
@media (max-width: 380px) {
  /* 超窄屏：按钮区单独占一行，宁可高一点也不要文字被压成竖排 */
  .cg-item { flex-wrap: wrap; }
  .cg-item-acts { width: 100%; justify-content: flex-end; }
}

/* ---- 桌面端（≥768px）：访客页不再是一张挤在中间的小卡片 ---- */
@media (min-width: 768px) {
  .emoji-grid { grid-template-columns: repeat(12, 1fr); }
  .emoji-cell { font-size: 24px; }
}

/* ---- 顶部按钮具象化（v1.36.0） ----
 * 老版本每个功能都是一个纯图标，访客认不出「哪个是群聊、哪个是公告」。
 * 现在图标加一圈浅底 + hover 高亮，并把 title 里的动作词带进 aria-label。 */
.head-acts .icon-btn {
  position: relative;
  min-width: 34px; min-height: 34px;
  border-radius: 10px;
  transition: background .14s, transform .12s;
}
.head-acts .icon-btn:hover { background: var(--accent-soft); }
.head-acts .icon-btn:active { transform: scale(.94); }
.head-acts .icon-btn svg { width: 18px; height: 18px; }