/* Scoped chat UI: leave existing forum layout and business styles untouched. */
#sc-widget, #sc-widget *, .sc-page, .sc-page *, .sc-workbench, .sc-workbench * { box-sizing:border-box; }
#sc-widget, .sc-page, .sc-workbench { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; font-size:14px; line-height:1.5; color:#24352e; text-align:left; }
#sc-widget button, #sc-widget textarea, .sc-page button, .sc-page textarea, .sc-workbench button, .sc-workbench textarea { font:inherit; text-shadow:none; letter-spacing:normal; }
.sc-icon { display:block; width:32px; height:32px; flex:none; }
#sc-widget [hidden], .sc-page [hidden], .sc-workbench [hidden] { display:none!important; }
.sc-launch { position:fixed; right:16px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:100100; display:flex; flex-direction:column; align-items:center; gap:3px; width:70px; padding:10px 3px 7px; background:#15984c; color:#fff; border:1px solid #fff; border-radius:18px; box-shadow:0 4px 16px #153b3340; cursor:pointer; }
.sc-launch span { font-size:12px; line-height:18px; font-weight:600; }
.sc-launch:hover { background:#107a3d; }
.sc-badge { position:absolute; top:-5px; right:-3px; min-width:22px; height:22px; padding:1px 5px; border:2px solid #fff; border-radius:12px; background:#d92f37; color:#fff; font:12px/16px sans-serif; }
.sc-panel { position:fixed; z-index:100120; right:16px; bottom:calc(70px + env(safe-area-inset-bottom)); width:390px; height:min(580px,calc(100dvh - 90px)); max-height:calc(100vh - 90px); display:flex; flex-direction:column; overflow:hidden; background:#f3f6f4; border:1px solid #d7e4db; border-radius:18px; box-shadow:0 12px 50px #153b333b; }
.sc-header { display:flex; align-items:center; gap:10px; flex:none; padding:11px 13px; background:#138747; color:#fff; }
.sc-header .sc-title { margin:0; color:#fff; font-size:17px; line-height:25px; font-weight:700; }
.sc-subtitle { font-size:12px; line-height:19px; opacity:.94; }
.sc-header-info { flex:1; min-width:0; }
.sc-close, .sc-mobile-back { width:34px; height:34px; border:0; border-radius:9px; background:#ffffff20; color:#fff; font:26px/1 sans-serif!important; cursor:pointer; }
.sc-list { flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain; overflow-anchor:none; -webkit-overflow-scrolling:touch; padding:11px 10px; }
.sc-note { max-width:95%; margin:0 auto 10px; padding:8px 10px; border:1px solid #e0e8e2; border-radius:9px; color:#58685e; background:#fff; font-size:11px; line-height:1.55; }
.sc-message { display:flex; align-items:flex-start; gap:6px; margin:0 0 9px; }
.sc-message.sc-own { flex-direction:row-reverse; }
.sc-avatar { display:flex; align-items:center; justify-content:center; width:25px; height:25px; flex:none; border-radius:8px; background:#e1eee5; color:#176237; font-size:11px; font-weight:700; }
.sc-own .sc-avatar { color:#5b6570; background:#e4e9ef; }
.sc-message-content { max-width:82%; min-width:0; }
.sc-bubble { margin:0; padding:6px 10px; background:#fff; color:#24352e; border:1px solid #e0e7e2; border-radius:3px 11px 11px; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; font-size:13px; line-height:1.5; }
.sc-own .sc-bubble { background:#dcf5e5; border-color:#bce6cc; border-radius:13px 3px 13px 13px; }
.sc-time { display:block; margin-top:2px; color:#8a948d; font-size:10px; text-align:left; }
.sc-own .sc-time { text-align:right; }
.sc-composer { padding:11px 12px max(10px,env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #e0e7e2; flex:none; }
.sc-form { display:flex; align-items:flex-end; gap:8px; margin:0; }
.sc-input { display:block; flex:1; min-width:0; width:100%; height:64px; max-height:120px; resize:none; padding:10px; border:1px solid #cddbd2; border-radius:9px; background:#f8faf8; color:#24352e; font-size:16px!important; line-height:1.5; outline:none; }
.sc-input:focus { border-color:#16944e; box-shadow:0 0 0 2px #16944e1a; }
.sc-send { padding:10px 15px; min-height:43px; border:0; border-radius:9px; background:#138747; color:#fff; cursor:pointer; font-weight:600!important; }
.sc-send:disabled { opacity:.5; cursor:wait; }
.sc-hint { margin-top:7px; color:#748077; font-size:11px; }
.sc-error { color:#b62b32; font-size:12px; margin:0 0 8px; }
.sc-history { display:block; padding:6px 12px; margin:0 auto 14px; border:1px solid #d2dfd5; border-radius:16px; background:#fff; color:#496956; cursor:pointer; font-size:12px!important; }
.sc-footer-icon { width:22px; height:22px; margin:auto; }
#sc-widget button:focus-visible, .sc-page button:focus-visible, .sc-workbench button:focus-visible { outline:3px solid #8bc9a2; outline-offset:3px; }
.sc-page { margin:0; background:#eaf0ec; height:100vh; height:100dvh; }
.sc-page #sc-widget { height:100%; }
.sc-page .sc-panel { position:relative; inset:auto; width:100%; max-width:680px; height:100%; max-height:none; margin:0 auto; border-radius:0; box-shadow:0 0 30px #153b3314; }
.sc-page .sc-close { font-size:20px!important; text-decoration:none; display:flex; align-items:center; justify-content:center; }
.sc-workbench { margin:0; background:#eef3ef; height:100vh; height:100dvh; }
.sc-workbench-shell { display:grid; grid-template-columns:290px minmax(0,1fr); width:100%; height:100%; }
.sc-sidebar { display:flex; flex-direction:column; min-height:0; border-right:1px solid #dae3dc; background:#fff; }
.sc-sidebar-head { padding:20px; border-bottom:1px solid #e1e8e3; }
.sc-sidebar-head h1 { font-size:20px; margin:0 0 6px; }
.sc-sidebar-head p { font-size:12px; margin:0; color:#647368; }
.sc-conversations { flex:1; min-height:0; overflow:auto; padding:8px; }
.sc-conversation { display:block; width:100%; padding:13px; margin-bottom:5px; border:1px solid transparent; border-radius:10px; background:#fff; color:#27392e; text-align:left; cursor:pointer; }
.sc-conversation.active { background:#e8f5ed; border-color:#c5e5d1; }
.sc-conversation strong { font-size:14px; }
.sc-conversation small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#78867b; font-size:12px; margin-top:5px; }
.sc-count { float:right; background:#d92f37; color:#fff; border-radius:10px; min-width:20px; padding:0 6px; text-align:center; font-size:12px; }
.sc-admin-chat { display:flex; flex-direction:column; min-width:0; min-height:0; }
.sc-empty { margin:auto; padding:30px; color:#65766a; text-align:center; }
.sc-empty strong { display:block; margin:12px; font-size:20px; color:#314f3c; }
.sc-mobile-back { display:none; }
@media(max-width:600px) {
 .sc-panel { right:8px; left:8px; bottom:calc(66px + env(safe-area-inset-bottom)); width:auto; height:min(580px,calc(100dvh - 78px)); max-height:calc(100vh - 78px); border-radius:15px; }
 .sc-launch { right:12px; bottom:calc(76px + env(safe-area-inset-bottom)); width:64px; padding:8px 2px 5px; border-radius:16px; }
 .sc-header { padding:12px; }
 .sc-workbench-shell { grid-template-columns:1fr; }
 .sc-workbench-shell .sc-admin-chat { display:none; }
 .sc-workbench-shell.sc-has-chat .sc-sidebar { display:none; }
 .sc-workbench-shell.sc-has-chat .sc-admin-chat { display:flex; }
 .sc-mobile-back { display:block; }
 .sc-page .sc-panel { inset:auto; width:100%; border:0; }
}
@media(prefers-reduced-motion:reduce) { #sc-widget * { scroll-behavior:auto!important; } }

/* Full-screen customer chat and rich message controls */
#sc-widget.sc-expanded .sc-panel { inset:0; right:0; bottom:0; left:0; width:100%; max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; }
#sc-widget.sc-expanded ~ * { }
html.sc-no-scroll, html.sc-no-scroll body { overflow:hidden!important; }
#sc-widget.sc-expanded .sc-header { padding-top:max(15px,env(safe-area-inset-top)); }
#sc-widget.sc-expanded .sc-composer { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.sc-toolbar { display:flex; align-items:center; gap:6px; margin:0 0 7px; }
.sc-tool { display:inline-flex; align-items:center; justify-content:center; width:34px; height:32px; padding:0; border:1px solid #d2e0d6; border-radius:8px; background:#f7faf8; color:#267248; font-size:20px; line-height:1; cursor:pointer; }
.sc-tool:hover { background:#e5f4ea; }
.sc-tool.recording { background:#d92f37; color:#fff; border-color:#bd252d; animation:sc-record-pulse 1s ease-in-out infinite alternate; }
@keyframes sc-record-pulse { to { box-shadow:0 0 0 5px #d92f3730; } }
.sc-file-label { position:relative; overflow:hidden; font-size:27px; font-weight:400; }
.sc-file-label input { position:absolute; width:1px; height:1px; opacity:0; }
.sc-emoji { display:flex; flex-wrap:wrap; gap:2px; max-height:126px; overflow:auto; padding:8px; margin:0 0 8px; border:1px solid #d8e5dc; border-radius:10px; background:#f7faf8; }
.sc-emoji button { width:32px; height:30px; padding:0; border:0; border-radius:6px; background:transparent; font-size:21px; cursor:pointer; }
.sc-emoji button:hover { background:#e3f2e8; }
.sc-media-image { display:block; max-width:min(260px,70vw); max-height:260px; border-radius:12px; border:1px solid #d5e4d9; object-fit:cover; cursor:zoom-in; }
.sc-media-video { display:block; width:min(290px,70vw); max-height:260px; border-radius:10px; background:#17251d; }
.sc-media-audio { display:block; width:min(290px,70vw); max-width:100%; height:42px; }
.sc-call-message { padding:11px 14px; border:1px solid #cbe2d1; border-radius:12px; background:#effaf2; color:#266b3e; font-size:14px; }
@media(max-width:600px) {
 .sc-expanded .sc-panel { border-radius:0!important; }
 .sc-media-image { max-width:72vw; }
 .sc-media-video { width:72vw; }
 .sc-composer { padding-left:10px; padding-right:10px; }
}
/* Clear labels for chat actions */
.sc-toolbar { gap:8px; flex-wrap:wrap; }
.sc-tool { width:auto; min-width:76px; height:42px; padding:5px 10px; gap:6px; flex-direction:row; border:1px solid #b8d4c0; border-radius:10px; background:#fff; color:#145f35; font-size:13px; font-weight:700; line-height:1; box-shadow:0 1px 2px #153b3312; }
.sc-tool-icon { display:inline-flex; align-items:center; justify-content:center; font-size:21px; line-height:1; }
.sc-tool-label { display:inline-block; white-space:nowrap; }
.sc-tool:hover, .sc-tool:focus-visible { background:#e6f6eb; border-color:#55a875; color:#0e6332; }
.sc-file-label { overflow:hidden; font-size:13px; font-weight:700; cursor:pointer; }
.sc-file-label input { position:absolute; width:1px; height:1px; opacity:0; }
.sc-tool.recording { background:#c62c35; color:#fff; border-color:#a81f28; }
@media(max-width:520px) {
 .sc-tool { min-width:0; flex:1 1 0; padding:5px 6px; }
 .sc-tool-label { font-size:12px; }
}
/* High-clarity chat action buttons: icon + explicit Chinese action label */
.sc-toolbar { gap:8px; flex-wrap:wrap; align-items:stretch; }
.sc-tool { width:auto; min-width:82px; height:46px; padding:6px 11px; gap:7px; flex-direction:row; border:2px solid #8fc5a2; border-radius:11px; background:#fff; color:#145f35; font-size:14px; font-weight:700; line-height:1; box-shadow:0 2px 5px #153b3320; }
.sc-tool-icon { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; font-size:23px; line-height:1; }
.sc-tool-label { display:inline-block; white-space:nowrap; }
.sc-tool:hover, .sc-tool:focus-visible { background:#e2f5e8; border-color:#20934c; color:#0e6332; box-shadow:0 3px 8px #178b4633; }
.sc-tool:active { transform:translateY(1px); }
.sc-file-label { overflow:hidden; font-size:14px; font-weight:700; cursor:pointer; }
.sc-file-label input { position:absolute; width:1px; height:1px; opacity:0; }
.sc-tool.recording { background:#c62c35; color:#fff; border-color:#a81f28; animation:sc-record-pulse 1s ease-in-out infinite alternate; }
.sc-tool.recording .sc-tool-label::after { content:' · 再按结束'; font-size:11px; font-weight:500; }
@media(max-width:520px) {
 .sc-toolbar { gap:6px; }
 .sc-tool { min-width:0; flex:1 1 0; height:44px; padding:5px 6px; gap:4px; }
 .sc-tool-icon { font-size:21px; }
 .sc-tool-label { font-size:12px; }
}
/* 后台客服按钮标签强化：保证图标和功能名称同时显示 */
.sc-workbench .sc-toolbar .sc-tool-label { display:inline-block !important; visibility:visible !important; opacity:1 !important; color:inherit; }
.sc-workbench .sc-toolbar .sc-tool-icon { display:inline-flex !important; visibility:visible !important; }
.sc-workbench .sc-toolbar .sc-file-label { cursor:pointer; }

/* ===== 电脑端：客服窗口挪到悬浮按钮左边，互不遮挡 =====
 * 右侧那排悬浮按钮（.fb-1 ~ .fb-5）占位是 right:50px、宽 80px，
 * 也就是从右往左 50~130px 这一竖条，所以客服整体要放到 140px 以外。
 */
@media (min-width: 768px) {
  .sc-panel {
    right: 142px;
    bottom: calc(300px + env(safe-area-inset-bottom));
    width: 380px;
    height: min(560px, calc(100dvh - 340px));
    max-height: calc(100vh - 340px);
  }
  .sc-launch {
    right: 142px;
    bottom: calc(236px + env(safe-area-inset-bottom));   /* 跟右侧「客服/规则」那排对齐 */
    width: 96px;
    padding: 10px 4px 8px;
  }
}

/* ===== 电脑端：工具条四个按钮挤在一行，不换行、不撑大 ===== */
@media (min-width: 768px) {
  .sc-toolbar {
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
  }
  .sc-tool {
    flex: 1 1 0;
    min-width: 0;
    height: 36px;
    padding: 3px 6px;
    gap: 4px;
    border-width: 1px;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: none;
  }
  .sc-tool-icon {
    width: 18px;
    height: 18px;
    font-size: 17px;
  }
  .sc-tool-label {
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sc-input {
    height: 56px;
    font-size: 14px !important;
  }
}

/* ===== 2026-10-26 工具栏四个按钮压小 ===== */
.sc-toolbar { gap:5px !important; margin:0 0 6px !important; flex-wrap:nowrap !important; }
.sc-tool { height:28px !important; min-width:0 !important; flex:1 1 0 !important;
           padding:2px 6px !important; gap:3px !important;
           border-width:1px !important; border-radius:6px !important;
           font-size:11px !important; font-weight:500 !important; }
.sc-tool-icon { width:15px !important; height:15px !important; font-size:15px !important; line-height:1 !important; }
.sc-tool-label { font-size:11px !important; display:inline-block !important; }
.sc-input { height:52px !important; padding:8px !important; }
.sc-send { padding:7px 12px !important; min-height:34px !important; font-size:13px !important; }
.sc-hint { margin-top:5px !important; font-size:10px !important; }