/* 小头盔 common.css 域拆分（2026-10-21 整理批二）：原 2684 行单文件按域拆 8 文件，
   _header.blade 按原物理顺序全量引入——层叠语义 100% 等价（行区间连续切分），
   改某域样式不再碰其他域文件。本文件域：客服域：浮动钮/回顶部/移动抽屉/挂件面板/聊天页）*/

/* ===== 全站右下客服浮动钮（原 default 布局每页内联，样式原样搬入） =====
   2026-09-19 回到顶部加入竖排（用户反馈：客服在上、回顶部在下）：客服抬高到 88，
   回顶部占原底位 26（滚动 >400px 淡入，见 .hc-backtop-fab） */
.hc-support-fab { position:fixed; right:22px; bottom:88px; z-index:1080; display:flex; align-items:center; justify-content:center;
    width:52px; height:52px; border-radius:50%; color:var(--hc-on-brand); text-decoration:none; border:none; cursor:pointer;
    background:linear-gradient(135deg,var(--hc-primary-400) 0%,var(--hc-primary) 55%,var(--hc-primary-dark) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px rgba(124,58,237,.38);
    transition:transform .22s var(--hc-ease-out), box-shadow .16s ease, opacity .22s ease; }
.hc-support-fab:hover { transform:translateY(-2px) scale(1.04); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px rgba(124,58,237,.46); color:var(--hc-on-brand); }
.hc-support-fab:active { transform:translateY(0) scale(.98); }
@media (max-width:576px) { .hc-support-fab { right:14px; width:46px; height:46px; } }

/* ===== 浮钮滚动让位已撤（2026-10-21 用户拍板「客服中心很重要，web 端要一直
   存在」）：10-19 三改为「浮钮压 buy 页立即购买」做的滚动退场，10-21 定性为
   方向偏了——客服入口常驻，移动端遮挡改用下方药丸坞缩体型解 ===== */

/* ===== 回到顶部浮动钮（2026-09-19 从页脚底条迁来，与客服竖排客服上回顶部下） =====
   白底描边同齿轮语言（客服渐变紫是主操作，回顶部/齿轮是次级）；滚动 >400px 才
   淡入——页面顶部点回顶无意义，默认隐不占视线 */
.hc-backtop-fab {
    position:fixed; right:22px; bottom:26px; z-index:1079;
    display:flex; align-items:center; justify-content:center;
    width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
    color:var(--hc-primary-700);
    background:var(--hc-surface);
    border:1px solid var(--hc-primary-100);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px rgba(30,27,46,.16);
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:transform .16s ease, box-shadow .16s ease, opacity .2s ease, visibility .2s;
}
.hc-backtop-fab.show { opacity:1; visibility:visible; transform:none; }
.hc-backtop-fab.show:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(30,27,46,.22); }
.hc-backtop-fab.show:active { transform:translateY(0) scale(.98); }
@media (max-width:767.98px) { .hc-backtop-fab { right:14px; bottom:18px; width:46px; height:46px; } }

/* ===== 移动端设置抽屉（2026-09-18 用户要求：顶部只留 Logo+搜索，其余收抽屉；
   入口 FAB 与客服挂件平级同排）——仅 <768px 显示，桌面零影响 ===== */
.hc-drawer-fab {
    position:fixed; right:14px; bottom:18px; z-index:1080;
    display:none; /* 仅移动端显示（下方媒体查询打开） */
    align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
    color:var(--hc-primary-700);
    background:var(--hc-surface);
    border:1px solid var(--hc-primary-100);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px rgba(30,27,46,.16);
    transition:transform .22s var(--hc-ease-out), box-shadow .16s ease, opacity .22s ease;
}
.hc-drawer-fab:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(30,27,46,.22); }
.hc-drawer-fab:active { transform:translateY(0) scale(.98); }
@media (max-width:767.98px) {
    /* 右下药丸坞（2026-10-19 二改，用户报障「三钮竖排遮商品」）：客服+设置
       并排拼一枚胶囊压右下角；触屏回顶部退役（快滑即达，恢复=删那行）。
       2026-10-21 缩体型（用户拍板「移动端盖住主体内容，缩小一些」）：46→38
       （占地再降 ~32%），图标 22→17、角标 19→15 同步缩。safe-area 让开 iOS 小白条 */
    .hc-support-fab {
        right:calc(14px + 38px);
        bottom:calc(18px + env(safe-area-inset-bottom, 0px));
        width:38px; height:38px;
        border-radius:38px 0 0 38px;
    }
    .hc-support-fab svg, .hc-drawer-fab svg { width:17px; height:17px; }
    .hc-support-fab .hc-support-badge { min-width:15px; height:15px; padding:0 4px; font-size:10px; top:-2px; right:-2px; }
    .hc-support-fab:hover { transform:none; } /* 触屏无 hover：浮起位移会撕裂胶囊形 */
    .hc-drawer-fab {
        display:flex;
        right:14px;
        bottom:calc(18px + env(safe-area-inset-bottom, 0px));
        width:38px; height:38px;
        border-radius:0 38px 38px 0;
    }
    .hc-drawer-fab:hover { transform:none; }
    .hc-backtop-fab { display:none; }
}

/* 遮罩 */
.hc-drawer-mask {
    position:fixed; inset:0; z-index:1085;
    background:rgba(13, 6, 26, .5);
    opacity:0; transition:opacity .22s ease;
}
.hc-drawer-mask.show { opacity:1; }

/* 抽屉面板（底部滑入小抽屉）——2026-09-18 二版精修：
   与登录页/页脚同设计语言（渐变字/发丝线/玻璃卡/强调条/渐变胶囊） */
.hc-drawer {
    position:fixed; left:0; right:0; bottom:0; z-index:1090;
    max-height:78vh; display:flex; flex-direction:column;
    background:var(--hc-surface);
    border-radius:18px 18px 0 0;
    border:1px solid var(--hc-primary-100); border-bottom:none;
    box-shadow:0 -12px 40px rgba(30,27,46,.22);
    transform:translateY(102%);
    transition:transform .26s var(--hc-ease-out);
    visibility:hidden;
    overflow:hidden;
}
.hc-drawer.open { transform:translateY(0); visibility:visible; }
@media (min-width:768px) { .hc-drawer, .hc-drawer-mask { display:none; } }
/* 顶部紫晕（舞台光，溢出裁切在面板内） */
.hc-drawer::before {
    content:""; position:absolute; top:-90px; left:50%; transform:translateX(-50%);
    width:440px; height:180px; pointer-events:none;
    background:radial-gradient(closest-side, rgba(124,58,237,.13), transparent);
}

/* 抓手条（bottom sheet 惯例） */
.hc-drawer-grab {
    width:36px; height:4px; border-radius:2px;
    background:var(--hc-line-12);
    margin:10px auto 0; flex-shrink:0;
}

/* 头：渐变字标题 + 发丝线收口（与页脚同语言） */
.hc-drawer-head {
    position:relative;
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px; flex-shrink:0;
}
.hc-drawer-head::after {
    content:""; position:absolute; left:20px; right:20px; bottom:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(124,58,237,.38) 18%, rgba(217,191,255,.55) 50%, rgba(236,72,153,.35) 78%, transparent);
}
.hc-drawer-title {
    font-size:16px; font-weight:800; letter-spacing:.02em;
    background:linear-gradient(96deg, var(--hc-primary) 0%, var(--hc-primary-500) 55%, var(--hc-pink) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
}
.hc-drawer-x {
    width:32px; height:32px; border:none; border-radius:50%; cursor:pointer;
    background:var(--hc-primary-50); color:var(--hc-text-muted);
    font-size:18px; line-height:1;
    transition:background .15s ease, color .15s ease;
}
.hc-drawer-x:hover { background:var(--hc-primary-100); color:var(--hc-primary-700); }

.hc-drawer-body {
    position:relative;
    overflow-y:auto; padding:16px 20px calc(20px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:18px;
}
.hc-drawer-sec-div { border-top:1px dashed var(--hc-line-12); padding-top:16px; }

/* ---- 账户：玻璃用户卡 + 图标磁贴（原生设置风） ---- */
.hc-drawer-usercard {
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:14px;
    background:linear-gradient(135deg, var(--hc-primary-50), var(--hc-bg));
    border:1px solid var(--hc-primary-100);
    margin-bottom:10px;
}
.hc-drawer-avatar {
    width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0;
    box-shadow:0 0 0 2px var(--hc-primary-100);
}
.hc-drawer-avatar-ph {
    display:inline-flex; align-items:center; justify-content:center;
    font-size:18px; color:var(--hc-primary);
    background:linear-gradient(135deg, var(--hc-primary-50), var(--hc-primary-100));
}
.hc-drawer-usermain { min-width:0; display:flex; flex-direction:column; gap:3px; }
.hc-drawer-usermain b {
    font-size:14px; font-weight:700; color:var(--hc-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hc-drawer-usermain i {
    font-style:normal; font-size:11px; color:var(--hc-text-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hc-drawer-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.hc-drawer-tile {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:12px 6px 11px; border-radius:13px;
    background:var(--hc-bg); border:1px solid var(--hc-line-12);
    text-decoration:none;
    transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hc-drawer-tile:hover {
    border-color:var(--hc-primary-300); transform:translateY(-1px);
    box-shadow:0 5px 14px rgba(124,58,237,.12);
}
.hc-drawer-tile-ic {
    position:relative;
    width:38px; height:38px; border-radius:11px;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--hc-primary);
    background:var(--hc-primary-50); border:1px solid var(--hc-primary-100);
}
.hc-drawer-tile-ic .hc-msg-badge { position:absolute; top:-5px; right:-8px; }
.hc-drawer-tile-ic svg { display:block; }
.hc-drawer-tile-label {
    font-size:11.5px; font-weight:500; color:var(--hc-text-secondary);
    max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- 未登录：渐变 CTA 卡 ---- */
.hc-drawer-cta {
    padding:15px 16px 16px; border-radius:14px;
    background:linear-gradient(135deg, var(--hc-primary-50), var(--hc-bg));
    border:1px dashed var(--hc-primary-200, var(--hc-primary-100));
}
.hc-drawer-cta-text { font-size:12.5px; line-height:1.6; color:var(--hc-text-secondary); margin-bottom:13px; }
.hc-drawer-cta-btns { display:flex; gap:10px; }
.hc-drawer-cta-login {
    flex:1.2; display:flex; align-items:center; justify-content:center; height:42px;
    border-radius:11px; font-size:13.5px; font-weight:600; text-decoration:none;
    color:var(--hc-on-brand);
    background:linear-gradient(135deg, var(--hc-primary-400) 0%, var(--hc-primary) 55%, var(--hc-primary-dark) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px rgba(124,58,237,.32);
}
.hc-drawer-cta-reg {
    flex:1; display:flex; align-items:center; justify-content:center; height:42px;
    border-radius:11px; font-size:13.5px; font-weight:600; text-decoration:none;
    color:var(--hc-primary-700); background:var(--hc-surface);
    border:1px solid var(--hc-primary-200, var(--hc-primary-100));
}

/* ---- 分区头：强调条 + 标题 + 当前值徽标 ---- */
.hc-drawer-sec-head { display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.hc-drawer-sec-bar {
    width:3px; height:13px; border-radius:2px; flex-shrink:0;
    background:linear-gradient(180deg, var(--hc-primary), var(--hc-pink));
    box-shadow:0 0 6px rgba(124,58,237,.35);
}
.hc-drawer-sec-head span { font-size:12.5px; font-weight:700; color:var(--hc-text); }
.hc-drawer-sec-head em {
    margin-left:auto; font-style:normal;
    font-size:11px; font-weight:600; color:var(--hc-primary-700);
    background:var(--hc-primary-50); border:1px solid var(--hc-primary-100);
    padding:2px 10px; border-radius:999px;
    max-width:46%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- 语言/货币：网格胶囊（active 渐变+对勾，随全局切换 JS 同步） ---- */
.hc-drawer-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
    gap:8px;
}
.hc-drawer-pill {
    display:flex; align-items:center; justify-content:center; gap:4px;
    min-height:36px; padding:6px 6px; border-radius:10px;
    font-size:12px; font-weight:500; text-align:center;
    color:var(--hc-text-secondary); text-decoration:none;
    background:var(--hc-bg); border:1px solid var(--hc-line-12);
    transition:border-color .14s ease, color .14s ease;
}
.hc-drawer-pill svg { flex-shrink:0; }
.hc-drawer-pill:hover, .hc-drawer-pill:focus { border-color:var(--hc-primary-300); color:var(--hc-primary-700); }
/* 对勾挂 CSS（跟随 active 类自动迁移——active 由全局切换 JS 的 S4 同步维护） */
.hc-drawer-pill.active::before, .hc-drawer .dropdown-item.active::before {
    content:"✓"; font-size:10px; font-weight:700; margin-right:3px;
}
.hc-drawer-pill.active {
    color:var(--hc-on-brand); font-weight:600;
    background:linear-gradient(135deg, var(--hc-primary-400) 0%, var(--hc-primary) 55%, var(--hc-primary-dark) 100%);
    border-color:transparent;
    box-shadow:0 3px 10px rgba(124,58,237,.3);
}
/* 货币胶囊复用 dropdown-item 类只为吃全局委托 JS——形态由本段接管 */
.hc-drawer .dropdown-item {
    display:flex; align-items:center; justify-content:center; gap:4px;
    width:auto; clear:none;
    min-height:36px; padding:6px 6px; border-radius:10px;
    font-size:12px; font-weight:500; text-align:center;
    color:var(--hc-text-secondary); background:var(--hc-bg);
    border:1px solid var(--hc-line-12);
    transition:border-color .14s ease, color .14s ease;
}
.hc-drawer .dropdown-item:hover, .hc-drawer .dropdown-item:focus {
    color:var(--hc-primary-700); background:var(--hc-bg); border-color:var(--hc-primary-300);
}
.hc-drawer .dropdown-item.active {
    color:var(--hc-on-brand); font-weight:600;
    background:linear-gradient(135deg, var(--hc-primary-400) 0%, var(--hc-primary) 55%, var(--hc-primary-dark) 100%);
    border-color:transparent;
    box-shadow:0 3px 10px rgba(124,58,237,.3);
}

/* 未读徽标（客服回复实时计数；面板打开清零） */
.hc-support-badge { position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 5px;
    border-radius:999px; background:var(--hc-danger-400); color:var(--hc-on-brand); font-size:11px; font-weight:700; font-family:inherit;
    display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(239,68,68,.45); }

/* ===== 客服挂件弹出面板（iframe 聊天窗；2026-09-19 回顶部加入后 bottom 92→150 让位双钮栈） ===== */
.hc-support-panel { position:fixed; right:22px; bottom:150px; z-index:1080; width:min(460px, calc(100vw - 44px)); height:min(760px, calc(100vh - 170px));
    display:none; flex-direction:column; overflow:hidden; border-radius:16px; border:1px solid var(--hc-primary-100);
    background:var(--hc-surface); box-shadow:0 24px 60px rgba(30,27,46,.28), 0 4px 14px rgba(30,27,46,.12); }
.hc-support-panel.open { display:flex; animation:hcSpPop .18s ease; }
@keyframes hcSpPop { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.hc-support-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px; background:linear-gradient(135deg,var(--hc-primary) 0%,var(--hc-primary-dark) 100%); color:var(--hc-on-brand); }
.hc-support-panel-title { font-size:14px; font-weight:700; letter-spacing:.02em; }
.hc-support-panel-actions { display:flex; align-items:center; gap:6px; }
.hc-support-panel-btn { border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:var(--hc-on-brand);
    font-size:12px; font-family:inherit; padding:4px 12px; border-radius:999px; cursor:pointer; transition:background .15s; }
.hc-support-panel-btn:hover { background:rgba(255,255,255,.26); }
.hc-support-panel-x { font-size:16px; line-height:1; padding:2px 10px 4px; }
.hc-support-panel #hcSupportFrame { flex:1; width:100%; border:0; background:var(--hc-surface-2); }
@media (max-width:576px) {
    .hc-support-panel { left:10px; right:10px; width:auto; bottom:calc(66px + env(safe-area-inset-bottom, 0px)); height:min(700px, calc(100vh - 84px)); }
}
/* 弹出面板贴坞顶（2026-10-21 坞缩 38 后）：旧 186/204 是 2026-09-19 三钮栈时代值
   （栈 top 130+46），现坞顶=18+38，留 10px 呼吸=66。本块在上方 576 规则之后，
   ≤576 同特异性后者胜出；577-767 只有本块生效 */
@media (max-width:767.98px) {
    .hc-support-panel { bottom:calc(66px + env(safe-area-inset-bottom, 0px)); height:min(700px, calc(100vh - 84px)); }
}

/* 挂件 iframe 内页面的裸布局钩子（bare 布局 body） */
.hc-widget-body { padding:0; background:var(--hc-surface-2); min-height:100vh; margin:0; box-sizing:border-box; }
.hc-widget-body .hc-form-wrap { max-width:none; margin:0; padding:0; }
/* 挂件内对话页去卡片壳：面板本身就是窗，页内不再画边框圆角阴影的"卡中卡" */
.hc-widget-body .hc-form-card { border:none; border-radius:0; box-shadow:none; height:100vh; }
.hc-widget-body .hc-form-body { padding:14px 14px 16px; }

/* ===== 客服机器人聊天页（hc-chat-*，挂件 iframe first screen / 直访均用；与 .hc-tk-* 对话页体系分家） ===== */
/* 2026-09-20 主体宽度统一 1140（原 760）；挂件 iframe 内 .hc-widget-body 覆写不受影响；
   width:100% 同 .hc-form-wrap 的 body-flex shrink-to-fit 防线 */
.hc-chat-wrap { width:100%; max-width:1140px; margin:40px auto; padding:0 16px; }
.hc-chat-page { display:flex; flex-direction:column; height:min(640px, calc(100vh - 160px));
    background:var(--hc-surface); border:1px solid var(--hc-primary-100); border-radius:16px; overflow:hidden;
    box-shadow:0 8px 30px rgba(124,58,237,.08); }
.hc-chat-head { display:flex; align-items:center; gap:11px; padding:14px 16px;
    background:linear-gradient(135deg,var(--hc-primary) 0%,var(--hc-primary-dark) 100%); color:var(--hc-on-brand); }
/* 旧版 36px 头像块已删：除 border 外全部属性被下方 30px 版覆盖，border 值已并入该版 */
.hc-chat-head-txt { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.hc-chat-head-txt strong { font-size:14.5px; font-weight:700; letter-spacing:.02em; }
.hc-chat-head-txt em { font-style:normal; font-size:11.5px; opacity:.82; }
.hc-chat-human-btn { flex:none; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.16);
    color:var(--hc-on-brand); font-size:12px; font-family:inherit; font-weight:600; padding:6px 13px; border-radius:999px;
    cursor:pointer; transition:background .15s; }
.hc-chat-human-btn:hover { background:rgba(255,255,255,.3); }
.hc-chat-msgs { flex:1; overflow-y:auto; padding:16px 14px; background:var(--hc-surface-2);
    display:flex; flex-direction:column; gap:12px; }
.hc-chat-msg { display:flex; align-items:flex-start; gap:8px; }
/* 标准 IM 布局（用户拍板）："我"（客户）说的话居右、头像在气泡右侧；别人（客服）居左、头像在气泡左侧。
   row-reverse 主轴起点在视觉右侧——自己的行靠右用 flex-start */
.hc-chat-msg.user { justify-content:flex-start; flex-direction:row-reverse; }
.hc-chat-msg.bot { justify-content:flex-start; }
/* 头像：客服=紫渐变🎧，客户=OAuth 头像 img（登录）或 👤 默认（未登录） */
.hc-chat-avatar { flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:13px; margin-top:2px; overflow:hidden;
    border:1px solid rgba(255,255,255,.35);
    background:linear-gradient(135deg,var(--hc-primary-400),var(--hc-primary-dark)); color:var(--hc-on-brand); box-shadow:0 2px 8px rgba(124,58,237,.28); }
.hc-chat-avatar.me { background:linear-gradient(135deg,var(--hc-chat-av-1),var(--hc-chat-av-2)); box-shadow:0 2px 8px rgba(91,107,136,.25); }
.hc-chat-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.hc-chat-bub { max-width:86%; border-radius:14px; padding:10px 13px; font-size:13.5px; line-height:1.7;
    word-break:break-word; white-space:pre-wrap; }
.hc-chat-msg.bot .hc-chat-bub { background:var(--hc-bg-2); border:1px solid var(--hc-primary-100); border-top-left-radius:4px; }
.hc-chat-msg.user .hc-chat-bub { background:linear-gradient(135deg,var(--hc-primary),var(--hc-primary-dark)); color:var(--hc-on-brand); border-top-right-radius:4px; }
.hc-chat-chips { display:flex; flex-wrap:wrap; gap:8px; padding:10px 14px; border-top:1px solid var(--hc-line-4); background:var(--hc-surface); }
.hc-chat-chip { border:1px solid var(--hc-line-5); background:var(--hc-bg-2); color:var(--hc-text-secondary); font-size:12.5px; font-family:inherit;
    padding:7px 13px; border-radius:999px; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.hc-chat-chip:hover { background:var(--hc-primary-100); border-color:var(--hc-line-7); color:var(--hc-primary-dark); }
.hc-chat-chip--human { border-color:var(--hc-primary-200); background:var(--hc-primary-50); color:var(--hc-primary-dark); font-weight:600; }
.hc-chat-inputrow { display:flex; gap:8px; padding:10px 14px 14px; background:var(--hc-surface); align-items:center; }
.hc-chat-inputrow.is-disabled { opacity:.5; pointer-events:none; }
/* 表情按钮 + 输入列（面板悬浮输入框上方） */
.hc-chat-emoji-btn { flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px;
    border:none; background:none; font-size:19px; cursor:pointer; border-radius:50%;
    color:var(--hc-text-muted-3); transition:background .15s; line-height:1; }
.hc-chat-emoji-btn:hover { background:var(--hc-bg-4); color:var(--hc-primary-dark); }
.hc-chat-inputcol { flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
/* 表情面板：悬浮下拉（2026-09-23 十改修复：原 position:relative 在文档流占位，
   展开时把 inputcol 撑高、整行 align-items:center 连带表情钮/发送钮外框全被
   撑大漂移——改 absolute 浮于输入框上方，行高恒定不动；
   十一改：定位/外飘关闭钮收进 wrapper（overflow:visible 不再被面板滚动区
   裁剪隐形）；十二改（用户拍板）：面板宽度与聊天主体同宽（left/right:0
   撑满输入列），格子 auto-fill ≥48px 自适应密度——宽屏 16+ 列 4 行矮面板，
   窄屏自动降列，不再稀疏 8 大列） */
.hc-chat-emoji-wrap { position:absolute;
    /* 与聊天卡（客服中心的框）左右缘对齐：面板挂 inputcol，负偏移吃掉
       inputrow 的左右内边距(14)+两侧按钮(表情钮40/发送钮46)+行内gap(8)+卡边框(1)。
       注意不能写 calc(-(A+B))——负号直接包括号是非法 calc（整条声明会被
       浏览器丢弃回退 0），要展开成字面负值 */
    left:-63px;
    right:-69px;
    bottom:calc(100% + 10px); z-index:5;
    filter:drop-shadow(0 8px 24px rgba(30,27,46,.18)); }
.hc-chat-emoji { display:grid; grid-template-columns:repeat(auto-fill, minmax(48px, 1fr)); gap:2px;
    width:100%; /* auto-fill 在 absolute 容器内宽度解析退化成单列，显式撑满 wrapper */
    background:var(--hc-surface-2); border:1px solid var(--hc-line-4); border-radius:10px;
    padding:8px; max-height:198px; overflow-y:auto; }

/* 表情面板关闭小钮已全线退役（2026-09-23 工单对话页同步撤钮，改点外部关闭；
   .hc-emoji-close 类删除，两个表情面板均无关闭钮） */
/* text-align:center：格子 auto-fill 变宽后 emoji 居中（原定宽格默认观感即居中） */
.hc-chat-emoji button { border:none; background:none; font-size:19px; cursor:pointer; padding:5px 0;
    border-radius:7px; transition:background .12s; text-align:center; }
.hc-chat-emoji button:hover { background:var(--hc-primary-100); }
/* 单行输入框（Enter 发送/Shift+Enter 换行）：与发送钮同高一行，长文内滚 */
.hc-chat-input { flex:1; height:46px; min-height:46px; max-height:46px; border:1px solid var(--hc-border); border-radius:10px;
    padding:12px 14px; font-size:14px; font-family:inherit; line-height:1.45; color:var(--hc-text); background:var(--hc-bg);
    box-sizing:border-box; resize:none; overflow-y:auto;
    transition:border-color .15s, box-shadow .15s, background .15s; }
.hc-chat-input:focus { outline:none; border-color:var(--hc-primary); box-shadow:0 0 0 3px rgba(124,58,237,.12); background:var(--hc-surface); }
.hc-chat-send { flex:none; border:none; border-radius:50%; width:46px; height:46px; display:flex;
    align-items:center; justify-content:center; cursor:pointer; color:var(--hc-on-brand);
    background:linear-gradient(135deg,var(--hc-primary) 0%,var(--hc-primary-dark) 100%); box-shadow:0 3px 10px rgba(124,58,237,.3);
    transition:transform .15s, box-shadow .15s; }
.hc-chat-send:hover { transform:translateY(-1px) rotate(-8deg); box-shadow:0 6px 18px rgba(124,58,237,.4); }
/* 转人工卡（字段复用 hc-form-* 骨架） */
.hc-chat-human { margin:0 14px 12px; border:1px solid var(--hc-primary-100); border-radius:12px; padding:14px; background:var(--hc-surface); }
.hc-chat-human.is-hidden { display:none; }
.hc-chat-human-title { margin:0 0 4px; font-size:14px; font-weight:700; color:var(--hc-text); }
.hc-chat-human-desc { margin:0 0 12px; font-size:12px; color:var(--hc-text-muted); line-height:1.6; }
.hc-chat-err { margin:0 0 12px; font-size:12.5px; color:var(--hc-danger-600); background:var(--hc-danger-bg); border:1px solid var(--hc-danger-line);
    border-radius:8px; padding:8px 11px; line-height:1.5; }
/* 工单独立表单页校验错误条（2026-09-19 补，与 hc-chat-err 同口径） */
.hc-form-err { margin:0 0 14px; font-size:12.5px; color:var(--hc-danger-600); background:var(--hc-danger-bg); border:1px solid var(--hc-danger-line);
    border-radius:8px; padding:8px 11px; line-height:1.5; }
.hc-chat-human-acts { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:2px; }
.hc-chat-human-cancel { border:none; background:none; color:var(--hc-text-muted); font-size:12.5px; font-family:inherit;
    cursor:pointer; padding:6px 4px; }
.hc-chat-human-cancel:hover { color:var(--hc-text-secondary); text-decoration:underline; }
/* 机器人 typing 三点 */
.hc-chat-typing .hc-chat-bub { display:inline-flex; align-items:center; gap:4px; padding:12px 14px; }
.hc-chat-typing .hc-chat-bub i { width:6px; height:6px; border-radius:50%; background:var(--hc-typing-dot); display:inline-block;
    animation:hcChatDot 1.2s infinite ease-in-out; }
.hc-chat-typing .hc-chat-bub i:nth-child(2) { animation-delay:.15s; }
.hc-chat-typing .hc-chat-bub i:nth-child(3) { animation-delay:.3s; }
@keyframes hcChatDot { 0%, 60%, 100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-4px); opacity:1; } }
/* 挂件 iframe 适配（bare 布局 body 已零内边距 → 撑满 390px 面板） */
.hc-widget-body .hc-chat-wrap { max-width:none; margin:0; padding:0; }
.hc-widget-body .hc-chat-page { height:100vh; border:none; border-radius:0; box-shadow:none; }
@media (max-width:576px) {
    .hc-chat-wrap { margin:16px auto 24px; }
    .hc-chat-page { height:min(640px, calc(100vh - 120px)); }
}