/* ─── Layout ────────────────────────────────────────────────────────────────── */
.chat-page { height: var(--chat-viewport-height, 100dvh); overflow: hidden; }
.chat-layout {
  max-width: 860px; height: var(--chat-viewport-height, 100dvh);
  margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}

/* desktop two-pane layout */
.desktop-chat-page {
  background: #e5e5e5;
  background-image: radial-gradient(circle at 15% 20%, rgba(0,0,0,.035) 0 90px, transparent 91px), radial-gradient(circle at 86% 42%, rgba(0,0,0,.035) 0 120px, transparent 121px);
}
.chat-layout.has-sidebar {
  max-width: 1280px; height: calc(var(--chat-viewport-height, 100dvh) - 108px); margin: 36px auto;
  flex-direction: row; border: none; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}
.chat-sidebar { width: 370px; flex-shrink: 0; background:#fff; border-right:1px solid var(--border); display:flex; flex-direction:column; }
.sidebar-head { height:60px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; font-size:20px; }
.sidebar-link { font-size:13px; color:var(--primary); }
.sidebar-list { flex:1; overflow-y:auto; padding:4px 8px 12px; }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:10px 0 0 10px; text-decoration:none; color:inherit; position:relative; flex:1; min-width:0; }
.sidebar-item:hover,.sidebar-item.active { text-decoration:none; }
.sidebar-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.sidebar-info { min-width:0; flex:1; }
.sidebar-name { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-text { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.sidebar-badge { background:#ef4444; color:#fff; border-radius:99px; min-width:18px; height:18px; padding:0 5px; display:flex; align-items:center; justify-content:center; font-size:11px; }
.chat-main { flex:1; min-width:0; display:flex; flex-direction:column; background:#fff; }
.has-sidebar .chat-header { height:142px; align-items:flex-start; padding-top:24px; }
.has-sidebar .messages { padding:28px 26px; }
.has-sidebar .chat-input-area { padding:12px 18px 16px; }

/* ─── Header ────────────────────────────────────────────────────────────────── */
.chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px 0 18px; height: 60px; flex-shrink: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.back-btn { font-size: 20px; color: var(--text-muted); text-decoration: none; padding: 4px 8px 4px 0; line-height: 1; transition: color .15s; }
.back-btn:hover { color: var(--text); text-decoration: none; }
.header-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.avatar-presence { position:relative; display:inline-flex; flex-shrink:0; }
.presence-dot { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border:2px solid #fff; border-radius:50%; background:#98a2b3; box-shadow:0 0 0 1px rgba(15,23,42,.06); }
.presence-dot.online { background:#22c55e; }
.presence-dot.offline { background:#98a2b3; }
.sidebar-avatar-wrap .presence-dot { width:11px; height:11px; }

.chat-header-info { flex: 1; min-width: 0; }
.chat-title { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.chat-subtitle { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-setting-link { margin-top:-4px; }

.sound-btn { flex-shrink: 0; background: transparent; border: none; cursor: pointer; color: var(--text-muted); padding: 6px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; }
.sound-btn:hover { color: var(--primary); background: var(--primary-light); }
.sound-btn.muted { color: var(--text-light); }

/* Keep the admin header usable when the chat pane is narrow. */
.has-sidebar .chat-header-info { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.has-sidebar .chat-header-info .chat-title,
.has-sidebar .chat-header-info .chat-subtitle { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.has-sidebar .chat-header > .call-permission-btn,
.has-sidebar .chat-header > .sound-btn,
.has-sidebar .chat-header > .visitor-info-btn { flex: 0 0 auto; }
.call-permission-btn { overflow: hidden; text-overflow: ellipsis; }
@media (min-width:501px) and (max-width:900px) {
  .has-sidebar .chat-header > .call-permission-btn { max-width: 86px; padding-left: 7px; padding-right: 7px; }
}
@media (max-width:500px) {
  .has-sidebar .chat-header > .call-permission-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 0; }
  .has-sidebar .chat-header > .call-permission-btn::before { content: '\260E'; font-size: 18px; line-height: 1; }
}

/* ─── Messages area ─────────────────────────────────────────────────────────── */
.messages { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; -webkit-overflow-scrolling: touch; }
.messages:empty::before { content: '暂无消息，开始对话吧。'; font-size: 13px; color: var(--text-light); text-align: center; margin-top: 40px; }


/* ─── Message bubbles ───────────────────────────────────────────────────────── */
.message { display:flex; gap:8px; max-width:78%; -webkit-user-select:none; user-select:none; }
.message.self { align-self:flex-end; flex-direction:row-reverse; }
.message.other { align-self:flex-start; }
.msg-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; margin-top:18px; }
.message.self .msg-avatar { display:none; }
.msg-body { display:flex; flex-direction:column; min-width:0; position:relative; }
.bubble-line { display:flex; align-items:center; gap:7px; max-width:100%; }
.bubble-line .bubble { min-width:0; }
.bubble-actions { display:flex; flex:0 0 auto; border-radius:7px; background:var(--surface); box-shadow:0 4px 12px rgba(15,23,42,.10); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(2px); transition:opacity .15s,visibility .15s,transform .15s; }
.bubble-action-btn { position:relative; width:36px; height:34px; flex:0 0 36px; display:grid; place-items:center; padding:0; margin-left:-1px; border:1px solid var(--border); border-radius:0; background:var(--surface); color:var(--text-muted); cursor:pointer; }
.bubble-action-btn:first-child { margin-left:0; border-radius:7px 0 0 7px; }
.bubble-action-btn:last-child { border-radius:0 7px 7px 0; }
.bubble-action-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.bubble-action-btn::after { content:attr(data-tooltip); position:absolute; left:50%; top:calc(100% + 7px); z-index:20; padding:5px 8px; border:1px solid var(--border); border-radius:4px; background:var(--surface); box-shadow:0 4px 10px rgba(15,23,42,.12); color:var(--text); font-size:12px; line-height:1.2; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-2px); }
.bubble-action-btn:hover::after,.bubble-action-btn:focus-visible::after { opacity:1; visibility:visible; transform:translate(-50%,0); }
.bubble-action-btn:hover,.bubble-action-btn:focus-visible { z-index:2; color:var(--primary); background:var(--primary-light); outline:none; }
.bubble-action-retract:hover,.bubble-action-retract:focus-visible { color:var(--danger); background:#fef2f2; }
.bubble-action-btn.done { color:#15803d; background:#f0fdf4; }
.bubble-action-btn:disabled { opacity:.45; cursor:wait; }
@media (hover:hover) and (pointer:fine) { .message:hover .bubble-actions { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); } }
.message.touch-active .bubble-actions,.message:focus-within .bubble-actions { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.message.self .msg-body { align-items:flex-end; }
.message.other .msg-body { align-items:flex-start; }
.bubble { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.6; word-break: break-word; cursor: default; }
.message.self .bubble { background: var(--primary); color:#fff; border-bottom-right-radius:4px; }
.message.other .bubble { background:#f1f3f7; color:var(--text); border-bottom-left-radius:4px; }
.message.retracted .bubble { background: transparent !important; color: var(--text-light) !important; border: 1px dashed var(--border); font-style: italic; font-size: 13px; padding: 6px 12px; }
.message-quote { width:100%; min-width:0; margin:0 0 8px; padding-left:9px; border-left:3px solid #94a3b8; border-left-color:color-mix(in srgb,var(--primary) 65%,#94a3b8 35%); color:var(--text-muted); display:flex; flex-direction:column; align-items:flex-start; gap:1px; cursor:pointer; box-sizing:border-box; }
.message.self .message-quote { border-left-color:rgba(255,255,255,.72); color:rgba(255,255,255,.82); }
.message-quote-author { display:block; max-width:100%; color:var(--primary); font-size:12px; font-weight:600; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.message.self .message-quote-author { color:rgba(255,255,255,.92); }
.message-quote-text { display:block; width:100%; min-width:0; overflow:hidden; color:inherit; font-size:12px; line-height:1.4; white-space:nowrap; text-overflow:ellipsis; }
.message-content { min-width:0; white-space:pre-wrap; }
.message-content img{display:inline-block;max-width:min(280px,100%);max-height:320px;margin:2px 3px;vertical-align:middle;border-radius:8px;object-fit:contain}
.mixed-bubble{width:max-content;max-width:100%;box-sizing:border-box}.mixed-bubble .message-content{white-space:pre-wrap;margin-top:6px}.mixed-images{display:flex;flex-wrap:wrap;gap:6px;width:fit-content;max-width:100%;margin:0}.mixed-images img{display:block;max-width:min(280px,100%);max-height:320px;border-radius:8px;object-fit:contain;cursor:zoom-in}
.message-located .bubble { animation:message-located 1.3s ease; }
@keyframes message-located { 0%,100%{box-shadow:none} 35%{box-shadow:0 0 0 4px rgba(37,99,235,.22)} }

.bubble.media { background: transparent !important; color: inherit !important; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.bubble.media img { max-width: 280px; max-height: 320px; object-fit: cover; display: block; cursor: zoom-in; border-radius: 9px; }
.bubble.media video { max-width: 320px; max-height: 280px; display: block; border-radius: 9px; }
.bubble.media .video-wrap { padding: 4px; background: #000; border-radius: 9px; }

.bubble.audio-bubble { width:190px; min-height:42px; background:#f8fafc !important; border:1px solid #dbe5f2; border-radius:22px !important; padding:6px 12px !important; display:grid; grid-template-columns:30px 1fr 38px; align-items:center; column-gap:10px; color:#64748b !important; }
.bubble.audio-bubble .message-quote,.file-bubble .message-quote { grid-column:1 / -1; }
.message.self .bubble.audio-bubble { background:#eff6ff !important; border-color:#bfdbfe; color:var(--primary) !important; }
.audio-play-btn { width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.message.self .audio-play-btn { background:var(--primary); color:#fff; }
.message.other .audio-play-btn { background:var(--primary-light); color:var(--primary); }
.audio-native { display:none; }
.audio-play-btn.loading svg { display:none; }
.audio-play-btn.loading::after { content:''; width:12px; height:12px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
.audio-duration { font-size:12px; opacity:.95; text-align:right; font-variant-numeric:tabular-nums; }
.audio-wave { display:flex; align-items:center; gap:3px; min-width:0; justify-content:flex-start; }
.audio-wave span { display:inline-block; width:3px; background:currentColor; border-radius:2px; opacity:.65; animation:wave 1s ease-in-out infinite; }
.audio-wave span:nth-child(1){height:8px}.audio-wave span:nth-child(2){height:14px}.audio-wave span:nth-child(3){height:10px}.audio-wave span:nth-child(4){height:16px}.audio-wave span:nth-child(5){height:8px}
.audio-bubble:not(.playing) .audio-wave span { animation:none; height:8px; }
@keyframes wave { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.8)} }

.msg-meta { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-light); margin-top:4px; padding:0 2px; }
.message-system{align-self:center;max-width:80%;margin:8px auto;padding:6px 10px;border-radius:6px;background:#f1f5f9;color:#64748b;font-size:12px;line-height:1.5;text-align:center}
.msg-sender { display:inline-block;min-width:0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500; }
.msg-auto-reply { display:inline-flex;align-items:center;height:17px;padding:0 5px;border:1px solid var(--primary-light);border-radius:3px;background:var(--primary-soft);color:var(--primary);font-size:9px;font-weight:600;line-height:1;white-space:nowrap; }
.assigned-service-card{align-self:center;width:min(300px,calc(100% - 24px));padding:16px 18px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;box-shadow:0 5px 16px rgba(15,23,42,.06);text-align:center;box-sizing:border-box}.assigned-service-card>span:first-child{display:block;color:var(--text-muted);font-size:11px}.assigned-service-avatar{display:block;width:58px;height:58px;margin:10px auto 9px;border:2px solid var(--primary-light);border-radius:50%;object-fit:cover}.assigned-service-name{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--text);font-size:14px;font-weight:700}.assigned-service-group{display:block;margin-top:5px;color:var(--text-muted);font-size:12px}.msg-official-badge{display:inline-flex;align-items:center;height:16px;padding:0 4px;border-radius:3px;background:var(--primary-soft);color:var(--primary);font-size:9px;font-weight:700;line-height:1}.history-service-card{margin:8px auto}
.msg-read { font-size:11px; color:var(--text-light); }
.msg-read.read { color:var(--primary); }
.msg-status { display:inline-block; }
.msg-status.sending::after { content:''; display:inline-block; width:10px; height:10px; border:1.5px solid var(--text-light); border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; margin-left:4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* input — card composer */
.chat-input-area { border-top:none; background:transparent; flex-shrink:0; padding:12px 16px 16px; }
.chat-composer {
  display:flex; flex-direction:column; gap:8px;
  border:1px solid rgba(148,163,184,.28); border-radius:18px;
  background:transparent; padding:10px 14px 10px;
  box-shadow:0 6px 20px rgba(15,23,42,.07);
  transition:border-color .15s, box-shadow .15s;
}
.chat-composer:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.10), 0 6px 20px rgba(15,23,42,.08); }
.pasted-image-preview{display:flex;align-items:center;gap:7px;max-width:100%;padding:2px 0;overflow-x:auto;scrollbar-width:thin}
.pasted-image-item{position:relative;flex:0 0 auto;width:58px;height:58px;border:1px solid var(--border);border-radius:7px;background:#f8fafc;overflow:visible}
.pasted-image-item img{display:block;width:100%;height:100%;border-radius:6px;object-fit:cover}
.pasted-image-remove{position:absolute;top:-7px;right:-7px;width:18px;height:18px;padding:0;border:1px solid #fff;border-radius:50%;background:#475569;color:#fff;font:600 13px/16px Arial,sans-serif;cursor:pointer;box-shadow:0 1px 3px rgba(15,23,42,.2)}
.pasted-image-remove:hover{background:#dc2626}
.rich-editor{background:#fff;border:1px solid transparent;border-radius:8px;min-height:58px;outline:none;word-break:break-word;white-space:pre-wrap}
.chat-rich-editor{padding:4px 2px;max-height:140px;overflow-y:auto;line-height:1.5;font-size:16px}
.chat-rich-editor:empty:before{content:attr(data-placeholder);color:var(--text-light);pointer-events:none}
.chat-rich-editor[contenteditable="true"]{min-height:58px;max-height:140px;overflow-y:auto;padding:7px 3px;box-sizing:border-box;line-height:1.5;font-size:16px;white-space:pre-wrap;word-break:break-word}
.chat-rich-editor[contenteditable="true"] p{margin:0}
.chat-rich-editor[contenteditable="true"] img{display:inline-block;max-width:180px;max-height:120px;margin:2px 3px;vertical-align:middle;border-radius:5px;object-fit:contain}
.rich-editor-value{display:none!important}
.wangeditor-toolbar>button{width:30px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--text-muted);font:500 16px/1 Arial,sans-serif;cursor:pointer;display:inline-grid;place-items:center;vertical-align:middle}.wangeditor-toolbar>button strong{font-weight:700}.wangeditor-toolbar>button em{font-style:italic}.wangeditor-toolbar>button:hover,.wangeditor-toolbar>button:focus-visible{background:#f1f5f9;color:var(--primary);outline:none}.wangeditor-toolbar>button sub{font-size:9px;line-height:1;position:relative;top:2px}
.wangeditor-toolbar{min-width:0;overflow-x:auto;scrollbar-width:none}.wangeditor-toolbar::-webkit-scrollbar{display:none}.wangeditor-toolbar .w-e-toolbar{background:transparent!important;flex-wrap:nowrap!important;padding:0!important}.wangeditor-toolbar .w-e-bar-item{height:30px;padding:1px}.wangeditor-toolbar .w-e-bar-item button{width:29px;height:28px;padding:0;border-radius:6px}.wangeditor-toolbar .w-e-bar-item button:hover{background:var(--surface-low)}.wangeditor-toolbar .w-e-bar-item button svg{width:17px;height:17px}.chat-rich-editor{padding:0;overflow:hidden}.chat-rich-editor .w-e-text-container{height:140px!important;border:0;background:#fff}.chat-rich-editor .w-e-text-container .w-e-scroll{height:100%;overflow-y:auto}.chat-rich-editor .w-e-text-container [data-slate-editor]{min-height:58px;padding:4px 2px;font-size:16px;line-height:1.5}.chat-rich-editor .w-e-text-container [data-slate-editor] p{margin:0}.chat-rich-editor .w-e-text-placeholder{font-style:normal;left:2px;top:8px;font-size:16px}
.chat-composer{gap:6px;padding:8px 12px}.chat-rich-editor .w-e-text-container{height:76px!important}.chat-rich-editor .w-e-text-container [data-slate-editor]{min-height:76px;padding:7px 3px}.chat-rich-editor .w-e-text-placeholder{left:3px;top:11px}.composer-tools{overflow:visible}.wangeditor-toolbar{position:relative;overflow:visible;margin-left:5px;padding-left:8px;border-left:1px solid #e2e8f0}.wangeditor-toolbar .w-e-toolbar{overflow:visible}.wangeditor-toolbar .w-e-bar-item{height:32px;padding:2px}.wangeditor-toolbar .w-e-bar-item button{width:30px;height:28px;border-radius:7px;color:var(--text-muted)}.wangeditor-toolbar .w-e-bar-item button:hover,.wangeditor-toolbar .w-e-bar-item button.active{background:#f1f5f9;color:var(--primary)}.wangeditor-toolbar [data-menu-key="fontSize"] button{width:48px}.wangeditor-toolbar [data-menu-key="fontSize"] button .title{font-size:0;margin-left:0}.wangeditor-toolbar [data-menu-key="fontSize"] button .title::after{content:"字号";font-size:12px}.w-e-select-list,.w-e-drop-panel,.w-e-modal{z-index:3200!important}.media-btn{padding:6px;border-radius:8px}.send-btn{height:34px;min-width:60px;padding:0 14px;font-size:13px;line-height:34px}
.rich-toolbar{display:flex;align-items:center;gap:1px;min-width:0;overflow-x:auto;scrollbar-width:none}
.rich-toolbar::-webkit-scrollbar{display:none}
.rich-toolbar button{width:29px;height:30px;flex:0 0 29px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-muted);font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center}
.rich-toolbar button:hover,.rich-toolbar button:focus-visible{background:var(--surface-low);color:var(--primary);outline:none}
.rich-toolbar button sub{font-size:9px;line-height:1;position:relative;top:2px}
.format-color-mark{font-weight:700;text-decoration:underline;text-decoration-color:#ef4444;text-decoration-thickness:3px;text-underline-offset:3px}
.reply-composer { min-width:0; display:flex; align-items:center; gap:8px; padding:6px 8px; border-left:3px solid var(--primary); border-radius:3px; background:var(--primary-light); }
.reply-composer-content { min-width:0; flex:1; display:flex; align-items:center; gap:7px; }
.reply-composer-label { flex:0 0 auto; color:var(--primary); font-size:12px; font-weight:600; }
.reply-composer-text { min-width:0; overflow:hidden; color:var(--text-muted); font-size:12px; white-space:nowrap; text-overflow:ellipsis; }
.reply-composer-close { width:26px; height:26px; flex:0 0 26px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text-muted); font-size:20px; line-height:24px; cursor:pointer; }
.reply-composer-close:hover,.reply-composer-close:focus-visible { color:var(--text); background:rgba(255,255,255,.8); outline:none; }
.msg-input { width:100%; resize:none; border:none; background:transparent; padding:4px 2px; font-family:inherit; outline:none; color:var(--text); min-height:24px; max-height:140px; line-height:1.5; font-size:16px; min-width:0; overflow-y:auto; white-space:pre-wrap; word-break:break-word; }
.msg-input::placeholder { color:var(--text-light); }
.message-content p{margin:0}.message-content ol,.message-content ul{margin:4px 0 4px 20px;padding:0}.message-content li{margin:2px 0}.message-content li[data-list="bullet"]{list-style-type:disc}.message-content li[data-list="ordered"]{list-style-type:decimal}.message-content span{max-width:100%}
.msg-input.hide-in-voice { display:none; }
.rich-editor.hide-in-voice { display:none; }
.press-talk-btn { width:100%; height:40px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface); font-size:14px; font-weight:500; color:var(--text-muted); cursor:pointer; display:none; align-items:center; justify-content:center; gap:8px; -webkit-user-select:none; user-select:none; }
.press-talk-btn.active-voice-mode { display:flex; }
.press-talk-btn.pressing { background:var(--danger); border-color:var(--danger); color:#fff; animation:pulse-rec 1s ease-in-out infinite; }

/* ── 语音录制面板（对齐 im.weqq.cc VoiceRecorder）────────────────────────────── */
.recorder-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(0,0,0,.35);
  pointer-events: none;
}
.recorder-mask.on { display: flex; }

.recorder-box {
  width: 160px;
  min-height: 160px;
  border-radius: 14px;
  background: rgba(0,0,0,.78);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  box-sizing: border-box;
  transition: background .15s;
}
.recorder-box.cancel { background: rgba(190,40,40,.88); }

.recorder-normal,
.recorder-cancel {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.recorder-box:not(.cancel) .recorder-normal { display: flex; }
.recorder-box.cancel .recorder-cancel { display: flex; }

.rec-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 22px;
}
.rec-wave span {
  width: 3px;
  border-radius: 2px;
  background: #fff;
  transition: height .1s linear;
}

.rec-time {
  color: #fff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.rec-cancel-text {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  line-height: 1.35;
}

.rec-tip {
  color: rgba(255,255,255,.9);
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  line-height: 1.2;
}


@keyframes pulse-rec { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4)} 50%{box-shadow:0 0 0 6px rgba(220,38,38,0)} }
.composer-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.composer-tools { display:flex; align-items:center; gap:2px; min-width:0; flex:1 1 0; overflow-x:auto; overflow-y:hidden; white-space:nowrap; -webkit-overflow-scrolling:touch; touch-action:pan-x; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.composer-tools::-webkit-scrollbar { height:4px; }
.composer-tools::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }
.composer-tools::-webkit-scrollbar-track { background:transparent; }
.composer-tools .rich-toolbar { flex:0 0 auto; overflow-x:visible; }
.composer-tools .wangeditor-toolbar { flex:0 0 auto; }
.media-btn { background:transparent; border:none; cursor:pointer; color:var(--text-muted); padding:7px; border-radius:10px; flex-shrink:0; transition:color .15s, background .15s; display:flex; align-items:center; justify-content:center; }
.media-btn:hover,.media-btn.voice-mode { color:var(--primary); background:var(--primary-light); }
.send-btn { height:36px; min-width:64px; padding:0 16px; flex-shrink:0; background:var(--primary); border:none; border-radius:8px; color:#fff; font-size:14px; font-weight:600; line-height:36px; letter-spacing:.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, opacity .15s; }
.send-btn svg { display:block; width:18px; height:18px; }
.send-btn::after { content:''; }
.send-btn:hover:not(:disabled) { background:var(--primary-hover, var(--primary)); filter:brightness(1.08); }
.send-btn:disabled { opacity:.45; cursor:not-allowed; }

.upload-progress { height:3px; background:var(--border); border-radius:99px; overflow:hidden; margin-bottom:8px; }
.progress-fill { height:100%; width:0%; background:var(--primary); border-radius:99px; transition:width .2s; }
.ctx-menu { position:fixed; z-index:3000; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; min-width:120px; }
.ctx-item { display:block; width:100%; padding:10px 16px; background:none; border:none; text-align:left; font-size:14px; cursor:pointer; color:var(--text); }
.ctx-item:hover { background:var(--surface-2); }
.ctx-retract:hover { color:var(--danger); }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; z-index:2000; cursor:zoom-out; }
.lightbox img { max-width:94vw; max-height:94vh; object-fit:contain; border-radius:4px; }

/* Keep the compact three-column desktop layout down to 500px. Below that
   width the app switches to the single-chat mobile layout. */
@media (max-width: 500px) {
  .chat-layout.has-sidebar { margin:0; height:var(--chat-viewport-height, 100dvh); border-radius:0; }
  .chat-sidebar { display:none; }
  .has-sidebar .chat-header { height:60px; align-items:center; padding-top:0; }
  .chat-setting-link { display:none; }
}
@media (max-width: 600px) {
  .bubble.media img { max-width:220px; }
  .bubble.media video { max-width:260px; }
  /* 视频气泡按可用宽度收缩，气泡本身不再撑出容器右侧 */
  .message.media-message { max-width:calc(100% - 8px); }
  .message.media-message .msg-body,
  .message.media-message .bubble-line { min-width:0; max-width:100%; }
  .bubble.media { max-width:100%; box-sizing:border-box; }
  .bubble.media .video-wrap { max-width:100%; box-sizing:border-box; }
  .bubble.media video { width:100%; max-width:100%; height:auto; max-height:60vh; }
  .message { max-width:86%; }
  .msg-avatar { width:28px; height:28px; }
  .chat-input-area { padding:10px 12px 12px; }
  .chat-composer{padding:7px 10px}.chat-rich-editor .w-e-text-container{height:68px!important}.chat-rich-editor .w-e-text-container [data-slate-editor]{min-height:68px}.composer-tools{overflow-x:auto;overflow-y:hidden}.wangeditor-toolbar{overflow:visible}.wangeditor-toolbar [data-menu-key="fontSize"] button{width:44px}
}

.quick-replies { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.quick-replies button { border:1px solid var(--primary-light); background:#fff; color:var(--primary); border-radius:999px; padding:6px 10px; font-size:12px; cursor:pointer; }
.quick-replies button:hover { background:#eff6ff; }
.file-bubble { min-width:180px; max-width:280px; min-height:42px; display:grid !important; grid-template-columns:34px 1fr; align-items:center; gap:10px; text-decoration:none; border:1px solid #dbe5f2; background:#fff !important; color:var(--text) !important; }
.message.self .file-bubble { background:#eff6ff !important; border-color:#bfdbfe; color:var(--primary) !important; }
.file-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#eef4ff; color:var(--primary); }
.file-name { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:600; }
@media (max-width:360px) {
  .composer-tools { gap:0; }
  .media-btn { padding:5px; }
  .composer-bar { gap:6px; }
}
.preset-panel { position:absolute; left:16px; right:16px; bottom:calc(100% - 2px); z-index:9; display:none; max-height:340px; padding:12px; background:#fff; border:1px solid var(--border); border-radius:10px 10px 0 0; box-shadow:0 -12px 30px rgba(15,23,42,.12); }
.preset-panel.open { display:flex; flex-direction:column; gap:10px; }
.preset-panel-head { display:flex; align-items:center; justify-content:space-between; }
.preset-panel-head strong { font-size:15px; }
.preset-panel-head button { width:30px; height:30px; border:0; border-radius:6px; background:var(--surface-low); color:var(--text-muted); font-size:20px; line-height:1; }
.preset-search { width:100%; height:38px; border:1px solid var(--border); border-radius:7px; padding:0 11px; outline:none; color:var(--text); background:#fff; }
.preset-search:focus { border-color:var(--primary); }
.preset-list { display:flex; flex-direction:column; gap:5px; overflow-y:auto; min-height:54px; }
.preset-item { width:100%; border:0; border-radius:6px; padding:9px 10px; background:transparent; color:var(--text); text-align:left; line-height:1.5; word-break:break-word; }
.preset-item:hover,.preset-item:focus { background:var(--primary-light); color:var(--primary); outline:none; }
.preset-empty { padding:20px 8px; color:var(--text-muted); text-align:center; font-size:13px; }
@media (max-width:600px) { .preset-panel { left:8px; right:8px; max-height:52dvh; } }

.emoji-panel { position:absolute; left:0; right:0; bottom:100%; z-index:8; display:none; padding:10px 0 8px; background:#fff; border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7; box-shadow:0 -10px 26px rgba(15,23,42,.08); --emoji-columns:12; }
.emoji-panel.open { display:block; }
/* 表情面板统一显示在输入栏下方，PC 与手机一致 */
.user-chat-page .chat-input-area { display:flex; flex-direction:column; }
.user-chat-page .chat-input-area > .emoji-panel {
  order:11; position:static; left:auto; right:auto; top:auto; bottom:auto;
  width:100%; margin-top:6px; border:0; border-top:1px solid #ededed; border-radius:0;
  background:#f7f7f7; box-shadow:none;
}
.emoji-head { display:flex; align-items:center; justify-content:space-between; padding:0 16px 6px; }
.emoji-head strong { font-size:13px; font-weight:600; color:var(--text-muted,#64748b); }
.emoji-panel .emoji-close,
.emoji-panel .emoji-close:hover,
.emoji-panel .emoji-close:focus { appearance:none !important; -webkit-appearance:none !important; width:26px; height:26px; padding:0 !important; border:0 !important; outline:0 !important; box-shadow:none !important; border-radius:6px; background:#f1f5f9 !important; color:#64748b; font:400 20px/1 system-ui,-apple-system,sans-serif; cursor:pointer; display:grid; place-items:center; }
.emoji-panel .emoji-close:hover { background:#e2e8f0 !important; color:#334155; }
.emoji-panel .emoji-close:active { transform:scale(.92); }
.emoji-scroll { display:flex; width:100%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.emoji-scroll::-webkit-scrollbar { display:none; }
.emoji-page { flex:0 0 100%; scroll-snap-align:start; display:grid; grid-template-columns:repeat(var(--emoji-columns), minmax(0, 1fr)); grid-template-rows:repeat(2, 50px); grid-auto-flow:column; gap:0; padding:0 16px; box-sizing:border-box; }
.emoji-panel .emoji-item,
.emoji-panel .emoji-item:hover,
.emoji-panel .emoji-item:focus { appearance:none !important; -webkit-appearance:none !important; width:44px; height:44px; margin:auto; padding:0 !important; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; color:inherit; border-radius:12px; cursor:pointer; font:400 30px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; display:grid; place-items:center; text-align:center; }
.emoji-panel .emoji-item:hover { background:#f1f5f9 !important; }
.emoji-panel .emoji-item:active { transform:scale(.92); background:#eaf1ff !important; }
.emoji-dots { height:16px; display:flex; align-items:center; justify-content:center; gap:5px; margin-top:6px; }
.emoji-panel .emoji-dot { appearance:none !important; -webkit-appearance:none !important; width:6px; height:6px; padding:0 !important; border:0 !important; border-radius:999px; background:#cbd5e1; box-shadow:none !important; cursor:pointer; }
.emoji-panel .emoji-dot.active { width:14px; background:#2563eb; }
.chat-input-area { position:relative; }
@media (max-width: 600px) { .emoji-panel { --emoji-columns:8; } .emoji-page { grid-template-rows:repeat(2, 48px); padding:0 12px; } .emoji-panel .emoji-item { width:42px; height:42px; font-size:28px; } .emoji-head { padding:0 12px 6px; } }

.call-btn.active{color:#16a34a;background:#dcfce7}
/* 电话联系客服：输入框正上方的大按钮，带图标和文字，中老年客户一眼看懂 */
.chat-call-bar{
  display:flex; align-items:center; gap:10px; width:100%;
  margin:0 0 10px; padding:11px 14px;
  border:1px solid #bfdbfe; border-radius:12px;
  background:linear-gradient(180deg,#eff6ff 0%,#dbeafe 100%);
  color:#1d4ed8; cursor:pointer; text-align:left;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:background .15s, border-color .15s, transform .08s;
  -webkit-tap-highlight-color:transparent;
}
.chat-call-bar:hover{background:linear-gradient(180deg,#dbeafe 0%,#bfdbfe 100%);border-color:#93c5fd}.chat-call-bar.call-disabled:hover{background:linear-gradient(180deg,#ffe4e6 0%,#fecdd3 100%);border-color:#fda4af}
.chat-call-bar:active{transform:scale(.995)}
.chat-call-bar:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.chat-call-bar-icon{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:#2563eb; color:#fff;
  box-shadow:0 2px 6px rgba(37,99,235,.28);
}
.chat-call-bar-text{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.chat-call-bar-text strong{font-size:15px; font-weight:700; color:#1e40af; letter-spacing:.2px}
.chat-call-bar-text small{font-size:12px; color:#3b82f6; margin-top:2px}
.chat-call-bar.call-disabled{background:linear-gradient(180deg,#fff1f2 0%,#ffe4e6 100%);border-color:#fecaca;color:#dc2626}.chat-call-bar.call-disabled .chat-call-bar-icon{background:#dc2626;box-shadow:0 2px 6px rgba(220,38,38,.25)}.chat-call-bar.call-disabled .chat-call-bar-text strong{color:#b91c1c}.chat-call-bar.call-disabled .chat-call-bar-text small{color:#dc2626}.chat-call-bar.active{background:linear-gradient(180deg,#dcfce7 0%,#bbf7d0 100%);border-color:#86efac;color:#15803d}
.chat-call-bar.active .chat-call-bar-icon{background:#16a34a;box-shadow:0 2px 6px rgba(22,163,74,.28)}
.chat-call-bar.active .chat-call-bar-text strong{color:#15803d}
.chat-call-bar.active .chat-call-bar-text small{color:#16a34a}
@media (max-width:600px){
  .chat-call-bar{padding:10px 12px;margin-bottom:8px}
  .chat-call-bar-icon{width:34px;height:34px}
  .chat-call-bar-text strong{font-size:16px}
  .chat-call-bar-text small{font-size:12px}
}

.call-overlay{position:fixed;inset:0;z-index:10020;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.58);backdrop-filter:blur(6px)}
.call-overlay.open{display:flex}
.call-panel{width:min(360px,100%);padding:28px 24px 24px;border-radius:8px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.28);text-align:center}
.call-avatar{width:76px;height:76px;margin:0 auto 16px;border-radius:50%;object-fit:cover;border:3px solid #e2e8f0}
.call-title{margin:0;font-size:18px;font-weight:700;color:#0f172a;letter-spacing:0}
.call-status{min-height:22px;margin:8px 0 24px;font-size:14px;color:#64748b}
.call-timer{font-variant-numeric:tabular-nums;color:#334155}
.call-actions{display:flex;align-items:center;justify-content:center;gap:18px;min-height:52px}
.call-action{width:48px;height:48px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:#475569;transition:transform .15s,background .15s}
.call-action:hover{transform:translateY(-1px)}
.call-action.accept{background:#16a34a}
.call-action.end,.call-action.reject{background:#dc2626}
.call-action.muted{background:#f59e0b}
.call-action svg,.call-action img{width:21px;height:21px;display:block;object-fit:contain}
.call-action[hidden]{display:none}
@media(max-width:600px){.call-panel{padding:24px 18px 20px}.call-overlay{align-items:flex-end;padding:12px}.call-panel{width:100%}}

/* ── 通话记录气泡（像普通聊天消息，不居中）── */
.bubble.call-record {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  padding: 9px 14px;
}
.bubble.call-record .cr-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: .9;
}
.bubble.call-record .cr-text {
  white-space: nowrap;
}
/* 未接听/已取消等：other侧显示红色提示 */
.message.other .bubble.call-record.cr-missed {
  background: #fff1f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}
.message.other .bubble.call-record.cr-missed .cr-icon svg {
  stroke: #dc2626;
}

/* ── 侧边栏来电动效 ── */
.sidebar-calling-icon{display:inline-flex;align-items:center;margin-left:4px;color:#16a34a;animation:call-ring .7s ease-in-out infinite;flex-shrink:0}
.sidebar-ringing-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#dcfce7;color:#16a34a;flex-shrink:0;animation:call-ring .7s ease-in-out infinite}
@keyframes call-ring{0%,100%{transform:rotate(0deg)}20%{transform:rotate(-14deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(10deg)}}

/* ── 浏览器后台重连横幅 ── */
.bg-reconnect-banner{display:flex;align-items:center;gap:8px;padding:6px 16px;background:#fffbeb;border-bottom:1px solid #fde68a;font-size:12px;color:#92400e;flex-shrink:0;animation:fadeSlideIn .25s ease}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.bg-reconnect-banner .bg-rc-dots{display:inline-flex;gap:3px;align-items:center}
.bg-reconnect-banner .bg-rc-dots span{width:4px;height:4px;border-radius:50%;background:#d97706;animation:bgDotPulse 1.2s ease-in-out infinite}
.bg-reconnect-banner .bg-rc-dots span:nth-child(2){animation-delay:.2s}
.bg-reconnect-banner .bg-rc-dots span:nth-child(3){animation-delay:.4s}
@keyframes bgDotPulse{0%,80%,100%{transform:scale(0.6);opacity:.5}40%{transform:scale(1);opacity:1}}
.bg-reconnect-banner .bg-rc-timer{font-weight:700;font-variant-numeric:tabular-nums;margin-left:2px}
.bg-reconnect-banner.expired{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.bg-reconnect-banner.expired .bg-rc-dots span{background:#dc2626}

.service-pause-banner{padding:9px 16px;background:#fff7ed;border-bottom:1px solid #fed7aa;color:#9a3412;font-size:13px;text-align:center;line-height:1.5;flex:none}
.service-pause-banner[hidden]{display:none}
.chat-composer.composer-locked{opacity:.6;background:#f8fafc}
.profile-modal{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.52);backdrop-filter:blur(3px)}
.profile-modal[hidden]{display:none}
.profile-panel{width:min(430px,100%);max-height:calc(100dvh - 36px);overflow:auto;background:#fff;border-radius:8px;box-shadow:0 24px 70px rgba(15,23,42,.28);padding:22px}
.profile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.profile-head h2{margin:0;color:#0f172a;font-size:19px;letter-spacing:0}
.profile-head p{margin:5px 0 0;color:#64748b;font-size:13px}
.profile-head button{width:32px;height:32px;border:0;border-radius:50%;background:#f1f5f9;color:#64748b;font-size:22px;line-height:1;cursor:pointer}
.profile-fields{display:grid;gap:14px}
.profile-field{display:grid;gap:7px;color:#334155;font-size:13px;font-weight:600}
.profile-field input,.profile-field textarea,.profile-field select{width:100%;min-width:0;border:1px solid #dbe3ed;border-radius:6px;background:#fff;color:#0f172a;font:inherit;font-weight:400;outline:none;box-sizing:border-box}
.profile-field input,.profile-field select{height:42px;padding:0 12px}.profile-field textarea{min-height:84px;padding:10px 12px;resize:vertical;line-height:1.55}
.profile-field input:focus,.profile-field textarea:focus,.profile-field select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.profile-error{min-height:20px;margin-top:9px;color:#dc2626;font-size:12px}
.profile-submit{width:100%;height:42px;border:0;border-radius:6px;background:#2563eb;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.profile-submit:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:600px){.profile-modal{align-items:flex-end;padding:0}.profile-panel{width:100%;max-height:88dvh;border-radius:8px 8px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom))}.service-pause-banner{font-size:12px;padding:8px 12px}}

/* Chat format panels are promoted to body by rich-editor.js so the composer
   cannot clip them. Keep a compact, touch-friendly surface on both viewports. */
.chat-wangeditor-popup{pointer-events:auto;box-sizing:border-box;max-height:calc(100vh - 16px);overflow-y:auto;overscroll-behavior:contain}
.chat-wangeditor-popup.w-e-drop-panel{min-width:200px}
.chat-wangeditor-popup.w-e-select-list{min-width:100px}
.chat-wangeditor-popup.w-e-select-list ul li svg{width:14px!important;height:14px!important;left:0;margin-left:5px;margin-top:-7px}

/* ─── 常见问题横条（公告下方，与公告同一形态）──────────────────────────── */
.faq-strip {
  display: flex; align-items: center; flex: none; overflow: hidden;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface-low, #f8fafc); color: var(--text);
  font-size: 12px; line-height: 1.55;
}
.faq-strip[hidden] { display: none; }
.faq-strip-icon { display: flex; flex: none; margin-right: 8px; color: var(--primary); }
.faq-strip-label { flex: none; margin-right: 8px; color: var(--primary); white-space: nowrap; font-weight: 600; }
.faq-strip-track {
  min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.faq-strip-track::-webkit-scrollbar { display: none; }
.faq-strip-item {
  flex: none; max-width: 260px; padding: 3px 10px; border: 1px solid var(--border);
  border-radius: 999px; background: #fff; color: var(--text); font-size: 12px;
  line-height: 1.5; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .15s, background .15s, color .15s;
}
.faq-strip-item:hover { border-color: var(--primary); background: #eff6ff; color: var(--primary); }
.faq-strip-item:active { transform: scale(.98); }
.faq-strip-item.is-sending { opacity: .55; pointer-events: none; }
.faq-strip-toggle {
  flex: none; margin-left: 8px; padding: 2px 4px; border: 0; border-radius: 4px;
  background: transparent; color: var(--primary); font-size: 12px; line-height: 1.5;
  white-space: nowrap; cursor: pointer;
}
.faq-strip-toggle:hover { background: #eff6ff; }

/* 展开态：横向条变成可换行的面板，全部问题一次看全 */
.faq-strip.expanded { align-items: flex-start; flex-wrap: wrap; row-gap: 8px; }
.faq-strip.expanded .faq-strip-track {
  flex: 1 1 100%; flex-wrap: wrap; row-gap: 8px; overflow: visible; white-space: normal;
}
.faq-strip.expanded .faq-strip-item { max-width: 100%; white-space: normal; text-align: left; }
.faq-strip.expanded .faq-strip-toggle { margin-left: auto; color: var(--text-muted); }

@media (max-width: 600px) {
  .faq-strip { padding: 8px 10px; font-size: 12px; }
  .faq-strip-track { gap: 6px; }
  .faq-strip-item { max-width: 58vw; padding: 3px 9px; }
}

/* ─── 移动端触控性能 ─────────────────────────────────────────────────────────
   手机上每个操作都感觉「慢半拍」，主要是三类原因：
   1) :hover 规则在触屏上被粘住，手指抬起后样式还在，看起来像卡住
   2) 缺少 :active 即时反馈，按下到有反应之间是空的
   3) 阴影 / 过渡过多，滚动时每帧都在重绘
   下面统一收敛，只保留必要的即时反馈。 */
@media (hover: none), (pointer: coarse) {
  /* 触屏不保留 hover 态 */
  .media-btn:hover,
  .send-btn:hover:not(:disabled),
  .sound-btn:hover,
  .faq-strip-item:hover,
  .chat-call-bar:hover,
  .emoji-panel .emoji-item:hover,
  .composer-tools button:hover {
    color: inherit;
    background: transparent;
    border-color: inherit;
    filter: none;
  }

  /* 按下即时反馈：用 transform 和背景色，都是合成层属性 */
  .media-btn,
  .send-btn,
  .press-talk-btn,
  .faq-strip-item,
  .composer-tools button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .media-btn:active,
  .composer-tools button:active {
    transform: scale(.9);
    background: var(--primary-light);
    color: var(--primary);
  }
  .send-btn:active:not(:disabled) {
    transform: scale(.94);
    filter: none;
  }
  .faq-strip-item:active {
    transform: scale(.96);
  }

  /* 触控目标放大到至少 40px，避免误触导致重复点 */
  .media-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }

  /* 去掉移动端不必要的阴影与过渡，减少滚动重绘 */
  .message,
  .bubble,
  .chat-composer,
  .assigned-service-card,
  .faq-strip-item {
    box-shadow: none !important;
  }
  .chat-composer {
    transition: none;
  }
  /* 消息气泡不做整体透明度动画，只保留必要的出现过渡 */
  .message {
    animation: none !important;
  }
}

/* 录音面板：避免每帧触发大面积重绘 */
#recMask, .rec-mask, .rec-box {
  will-change: auto;
}

/* ── 留资卡片 ─────────────────────────────────────────────────────────────── */
.form-card-message { max-width: none; }
.form-card-message .msg-body { width: min(280px, 70vw); max-width: min(280px, 70vw); }
.form-card {
  width: 100%;
  height: auto;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--fc-theme, #2563eb);
  background: #fff;
  box-shadow: none;
  padding: 10px 12px 12px;
  overflow: hidden;
}
.form-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.form-card-badge {
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px;
  background: color-mix(in srgb, var(--fc-theme, #2563eb) 12%, #fff);
  color: var(--fc-theme, #2563eb); -webkit-text-fill-color: var(--fc-theme, #2563eb); font-size:11px; font-weight:700; letter-spacing:.2px;
}
.form-card-status {
  display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px;
  background:#ecfdf5; color:#15803d; font-size:11px; font-weight:700;
}
.form-card-status::before { content:'✓'; font-size:10px; }
.form-card-title { font-size:15px; font-weight:750; line-height:1.4; color: var(--fc-title, #0f172a); word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.form-card-desc { margin-top:4px; font-size:12px; line-height:1.5; color:#64748b; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.form-card-meta { margin-top:auto; padding-top:9px; font-size:11px; color:#94a3b8; }
.form-card-btn {
  display:block; width:100%; height:34px; margin-top:8px; border:0; border-radius:9px; flex:0 0 auto;
  background: var(--fc-button, var(--fc-theme, #2563eb)); color:#fff; -webkit-text-fill-color:#fff;
  font-size:14px; font-weight:700; cursor:pointer; transition: filter .15s, transform .12s;
}
.form-card-btn:hover:not(:disabled) { filter: brightness(1.06); }
.form-card-btn:active:not(:disabled) { transform: scale(.985); }
.form-card-btn:disabled { cursor:default; background:#e2e8f0; color:#94a3b8; }
.form-card.is-submitted { height:auto; min-height:0; }
.form-card.is-submitted .form-card-btn { background:#f1f5f9; color:#64748b; }
.form-card-values { margin-top:11px; padding-top:10px; border-top:1px dashed #e2e8f0; display:grid; gap:6px; }
.form-card-row { display:flex; gap:10px; font-size:12.5px; line-height:1.5; }
.form-card-row-label { flex:0 0 68px; color:#94a3b8; }
.form-card-row-value { flex:1 1 0; color:#334155; word-break:break-all; }

/* 客户填写面板 */
.form-card-mask {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15,23,42,.5); opacity: 0; transition: opacity .18s;
  -webkit-overflow-scrolling: touch;
}
.form-card-mask.open { opacity: 1; }
.form-card-panel {
  width: min(420px, 100%); max-height: min(86vh, 720px); display: flex; flex-direction: column;
  border-radius: 16px; background: #fff; overflow: hidden;
  box-shadow: 0 24px 70px rgba(15,23,42,.32);
  transform: translateY(10px) scale(.985); transition: transform .18s;
}
.form-card-mask.open .form-card-panel { transform: none; }
.form-card-panel-head {
  flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 16px 16px 12px; border-top: 4px solid var(--fc-theme, #2563eb); border-bottom: 1px solid #eef2f7;
}
.form-card-panel-title { font-size: 16px; font-weight: 750; color: var(--fc-title, #0f172a); line-height: 1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.form-card-panel-desc { margin-top: 5px; font-size: 12.5px; line-height: 1.6; color: #64748b; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.form-card-panel-close {
  flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent;
  color: #94a3b8; font-size: 24px; line-height: 1; cursor: pointer;
}
.form-card-panel-close:hover { background: #f1f5f9; color: #475569; }
.form-card-hint {
  flex-shrink: 0;
  margin: 0; padding: 10px 16px; background: color-mix(in srgb, var(--fc-theme, #2563eb) 7%, #fff);
  color: #475569; font-size: 12.5px; line-height: 1.6; border-bottom: 1px solid #eef2f7;
}
.form-card-panel-body { flex: 0 1 auto; height: auto; min-height: 0; max-height: calc(100dvh - 270px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 16px 8px; }
.form-card-empty-hint { padding: 26px 4px; text-align: center; color: #94a3b8; font-size: 13px; line-height: 1.7; }
.form-card-field { display: block; padding: 11px 0; border-bottom: 1px solid #f1f5f9; }
.form-card-field:last-child { border-bottom: 0; }
.form-card-label { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 13px; font-weight: 650; color: #334155; }
.form-card-req { color: #ef4444; font-style: normal; }
.form-card-opt { margin-left: auto; padding: 1px 6px; border-radius: 5px; background: #f1f5f9; color: #94a3b8; font-size: 11px; font-weight: 600; }
.form-card-input {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 9px 11px;
  border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc;
  font-size: 14px; color: #0f172a; outline: none; transition: border-color .15s, background .15s;
  font-family: inherit;
}
.form-card-input:focus { border-color: var(--fc-theme, #2563eb); background: #fff; }
.form-card-input textarea, textarea.form-card-input { resize: vertical; min-height: 72px; }
.form-card-error { display: block; min-height: 15px; margin-top: 4px; color: #ef4444; font-size: 11.5px; }
.form-card-panel-error { min-height: 18px; padding: 0 16px 6px; color: #ef4444; font-size: 12.5px; line-height: 1.5; }
.form-card-panel-foot { flex-shrink: 0; display: flex; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid #eef2f7; }
.form-card-cancel, .form-card-submit {
  flex: 1 1 0; height: 42px; border-radius: 9px; border: 1px solid transparent; font-size: 14px; font-weight: 700; cursor: pointer;
}
.form-card-cancel { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.form-card-submit { background: var(--fc-button, var(--fc-theme, #2563eb)); color: #fff; }
.form-card-submit:disabled { opacity: .6; cursor: default; }

/* 后台模板选择弹窗 */
.form-card-pick-list { display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; }
.form-card-pick {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; width: 100%;
  border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.form-card-pick:hover { border-color: #bfdbfe; background: #f8fbff; }
.form-card-pick:disabled { opacity: .55; cursor: default; }
.form-card-pick-swatch { flex: 0 0 6px; align-self: stretch; border-radius: 4px; }
.form-card-pick-main { flex: 1 1 0; min-width: 0; }
.form-card-pick-main strong { display: block; font-size: 14px; color: #0f172a; }
.form-card-pick-main small { display: block; margin-top: 3px; color: #94a3b8; font-size: 12px; }
.form-card-pick-arrow { color: #cbd5e1; font-size: 20px; line-height: 1; }

@media (max-width: 600px) {
  .form-card-message .msg-body { width: min(250px, 70vw); max-width: min(250px, 70vw); }
  .form-card-panel { width: 100%; max-height: calc(100dvh - 12px); }
  .form-card-panel-body { flex-basis: auto; height: auto; max-height: calc(100dvh - 270px); }
  .form-card-mask { align-items: flex-end; padding: 0; }
  .form-card-mask.open .form-card-panel { border-radius: 16px 16px 0 0; }
}

@media (hover: none), (pointer: coarse) {
  .form-card-btn:hover:not(:disabled),
  .form-card-pick:hover { filter: none; }
  .form-card-btn:active:not(:disabled) { filter: brightness(.96); }
  .form-card-pick:active { background: #f1f5f9; }
}

/* 三种卡片选择与内容卡片 */
.card-picker-tabs{display:flex;gap:6px;background:#f1f5f9;padding:5px;border-radius:12px;margin-bottom:14px}.card-picker-tabs button{flex:1;min-height:42px;border:0;border-radius:9px;background:transparent;color:#64748b;font-size:14px;font-weight:700;cursor:pointer}.card-picker-tabs button[aria-selected="true"]{background:#fff;color:#2563eb;box-shadow:0 2px 6px #0f172a12}.card-picker-search{width:100%;margin-bottom:14px}.card-picker-empty{color:#64748b;padding:18px 0;font-size:14px;line-height:1.6}#cardPickerError{color:#dc2626;font-size:14px;margin-bottom:10px}.content-card-symbol{font-size:23px;color:var(--fc-theme)}.content-message-card{cursor:pointer}.content-card-link{display:flex;align-items:center;justify-content:center;text-decoration:none}.content-card-link:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}.form-card-pick-main small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Shared title treatment across lead, tutorial and app cards. */
.form-card .form-card-titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-10px -12px 10px;padding:10px 12px;background:rgba(37,99,235,.07);background:color-mix(in srgb,var(--fc-theme,#2563eb) 12%,#fff);border-bottom:2px solid var(--fc-theme,#2563eb);box-shadow:none}.form-card .form-card-title{flex:1;min-width:0;display:block;overflow:visible;font-size:17px;font-weight:750;line-height:1.5;word-break:break-word;color:#172033;-webkit-text-fill-color:#172033}.form-card-titlebar .form-card-status{flex:0 0 auto}
.form-card-head:empty{display:none}.content-message-card{cursor:pointer}
.content-fullscreen{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;background:#f3f5f9;width:100%;height:100%;height:100dvh}
.content-fullscreen-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:#fff;border-bottom:1px solid #e2e8f0;color:#182235;min-height:64px}
.content-fullscreen-bar strong{font-size:19px;line-height:1.5;overflow-wrap:anywhere;min-width:0}
.content-fullscreen-close{flex:0 0 48px;width:48px;height:48px;border:0;background:#eef2f7;color:#172033;font-size:34px;line-height:1;border-radius:12px;cursor:pointer}
.content-fullscreen-loading{position:absolute;inset:64px 0 0;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;padding:20px;background:#f3f5f9;color:#64748b;font-size:15px;line-height:1.5;transition:opacity .18s}.content-fullscreen-loading.is-hidden{opacity:0;pointer-events:none}.content-fullscreen-loading.is-error{color:#b45309}.content-fullscreen-spinner{width:24px;height:24px;flex:0 0 24px;border:3px solid #cbd5e1;border-top-color:#2563eb;border-radius:50%;animation:contentViewerSpin .8s linear infinite}.content-fullscreen-load-error{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#f59e0b;color:#fff;font-weight:800}.content-fullscreen iframe{position:relative;z-index:1;display:block;flex:1 1 0;width:100%;min-height:0;border:0;background:#f3f5f9}@keyframes contentViewerSpin{to{transform:rotate(360deg)}}

/* Customer composer actions and agent-configured group dialog. */
.user-chat-page .customer-quick-actions{display:flex;align-items:stretch;gap:7px;margin:0 0 6px}
.user-chat-page .customer-quick-actions .chat-call-bar,
.user-chat-page .customer-quick-actions .customer-group-button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1 1 0;min-width:0;width:auto;height:36px;margin:0;padding:6px;border:0;border-radius:8px;font-family:inherit;font-size:14px;font-weight:700;line-height:1.3;cursor:pointer;box-shadow:none;text-align:center}
.user-chat-page .customer-quick-actions .chat-call-bar{background:var(--primary);color:#fff}
.user-chat-page .customer-quick-actions .chat-call-bar .chat-call-bar-icon{width:18px;height:18px;background:transparent;color:inherit;border-radius:0;box-shadow:none}
.user-chat-page .customer-quick-actions .chat-call-bar .chat-call-bar-icon svg{width:18px;height:18px}
.user-chat-page .customer-quick-actions .chat-call-bar .chat-call-bar-text strong{color:inherit;font-size:14px;line-height:1.35}
.user-chat-page .customer-quick-actions .customer-group-button{background:var(--primary-soft);color:var(--primary);font-family:inherit;font-size:14px;font-weight:700}
.customer-group-dialog{position:fixed;inset:0;margin:auto;width:min(440px,calc(100% - 32px));max-width:calc(100vw - 32px);max-height:min(85vh,85dvh,calc(var(--chat-viewport-height,100vh) - 32px));overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:24px;border:0;border-radius:20px;background:#fff;color:#172033;box-shadow:0 20px 60px #0f172a33;transform:none}
.customer-group-dialog::backdrop{background:rgba(0,0,0,.45)}
.customer-group-dialog h2{margin:0 0 14px;font-size:22px;line-height:1.5}
.customer-group-intro{margin:0 0 14px;color:#727782;font-size:16px;line-height:1.7}
.customer-group-description-box{margin:0 0 14px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;color:#4b5563;font-size:15px;line-height:1.7;white-space:normal;overflow-wrap:anywhere}
.customer-group-entry{display:flex;align-items:center;gap:14px;padding:16px;background:#f5f6f9;border-radius:12px}
.customer-group-details{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;flex:1;min-width:0;overflow-wrap:anywhere}
.customer-group-details strong{font-size:18px}.customer-group-details span{font-size:15px;color:#727782;line-height:1.6}
.customer-group-join{flex:none;padding:8px 18px;border-radius:24px;background:var(--primary);color:#fff;font-size:16px;text-decoration:none}
.customer-group-unconfigured{flex:none;font-size:14px;color:#64748b}
.customer-group-close{display:block;width:100%;height:46px;margin-top:24px;border:0;border-radius:9px;background:var(--primary);color:#fff;font:700 17px/1.5 sans-serif;cursor:pointer}
@media(max-width:380px){.customer-group-dialog{padding:20px}.customer-group-entry{padding:12px;gap:8px}.customer-group-details{display:grid}.customer-group-join{padding:8px 14px}}

.chat-send-error{width:fit-content;max-width:92%;margin:6px auto;padding:5px 9px;border:1px solid color-mix(in srgb,var(--primary) 58%,#000);border-radius:4px;background:color-mix(in srgb,var(--primary) 78%,#000);color:#fff;text-align:center;font-size:13px;line-height:1.4;box-sizing:border-box}

.inspector-device-ua{font-size:11px;line-height:1.55;word-break:break-all;overflow-wrap:anywhere}

/* Optimistic outgoing messages: keep the delivery indicator beside the bubble. */
.message.pending, .message.send-failed { align-items:center; }
.message.pending .msg-body, .message.send-failed .msg-body { min-width:0; }
.pending-indicator { flex:0 0 18px; width:18px; text-align:center; }
.pending-indicator.sending::after { width:13px; height:13px; margin:0; }
.message.send-failed .pending-indicator { color:#ef4444; font-weight:700; font-size:18px; }

/* Customer emoji header: align title and dismiss control on one center line. */
.user-chat-page .emoji-panel .emoji-head { display:flex; align-items:center; justify-content:center; gap:10px; min-height:36px; padding-top:0; padding-bottom:8px; }
.user-chat-page .emoji-panel .emoji-head strong { display:flex; align-items:center; height:32px; margin:0; font-size:17px; line-height:24px; }
.user-chat-page .emoji-panel .emoji-close,
.user-chat-page .emoji-panel .emoji-close:hover,
.user-chat-page .emoji-panel .emoji-close:focus {
  display:flex; align-items:center; justify-content:center; flex:0 0 32px;
  width:32px; height:32px; margin:0; padding:0 !important;
  background:#ef4444 !important; color:#fff; border-radius:7px; line-height:1;
}
.user-chat-page .emoji-panel .emoji-close:active { background:#dc2626 !important; }

/* Customer reply preview occupies a full row above the call/group actions. */
.user-chat-page .chat-input-area > .reply-composer {
  order:-1; flex:0 0 auto; align-self:stretch; width:100%; box-sizing:border-box;
  margin:0 0 8px; padding:8px 10px;
}

/* Agent toolbar: one consistent row; scroll tools while send stays visible. */
.has-sidebar .composer-bar { flex-wrap:nowrap; min-width:0; }
.has-sidebar .composer-tools {
  display:flex; flex-wrap:nowrap; align-items:center; gap:2px;
  min-width:0; flex:1 1 0; overflow-x:auto; overflow-y:hidden;
  white-space:nowrap; -webkit-overflow-scrolling:touch;
  touch-action:pan-x; overscroll-behavior-x:contain;
}
.has-sidebar .composer-tools > .media-btn {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 34px; width:34px; height:34px; min-height:34px;
  margin:0; padding:6px; border:0; border-radius:8px;
  background:transparent; color:var(--text-muted);
}
.has-sidebar .composer-tools > .media-btn svg { width:20px; height:20px; flex-shrink:0; }
.has-sidebar .composer-tools > .media-btn:hover { color:var(--primary); background:var(--primary-light); }
.has-sidebar .composer-tools .wangeditor-toolbar { flex:0 0 auto; }
.has-sidebar .composer-bar > .send-btn { flex:0 0 auto; }
.composer-action-label { font-size:13px; white-space:nowrap; }
.user-chat-page .mobile-action-panel { grid-template-columns:repeat(3,minmax(0,1fr)); }

.has-sidebar .agent-action-panel { display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:20px 12px; border-top:1px solid #e5e7eb; background:#f7f7f7; }
.has-sidebar .agent-action-panel.open { display:grid; }
.has-sidebar .agent-action-panel .media-btn { width:100%; height:auto; min-height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#737373; background:transparent; border:0; border-radius:12px; }
.has-sidebar .agent-action-panel .media-btn svg { box-sizing:content-box; width:28px; height:28px; padding:18px; background:#fff; border-radius:18px; color:#191919; }
.has-sidebar .agent-action-panel .media-btn:hover { background:#edf2fa; }
.has-sidebar .composer-more-btn { width:40px; height:40px; color:#191919; }