.chat-body{min-height:100vh;padding:32px;background:radial-gradient(ellipse at 12% 5%,#e4f2ff 0,transparent 32%),linear-gradient(135deg,#edf5fb,#f5f8fb 55%,#e9f2fa);display:grid;place-items:center;color:#234764}
.chat-window{position:relative;width:min(1120px,100%);height:min(860px,calc(100vh - 64px));min-height:560px;display:flex;flex-direction:column;overflow:hidden;border:1px solid #d9e8f4;border-radius:24px;background:rgba(255,255,255,.95);box-shadow:0 28px 90px rgba(38,79,112,.15)}
.chat-header{height:88px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:linear-gradient(110deg,#f4f9fd,#eaf4fc);border-bottom:1px solid #e3edf5}
.chat-brand{gap:15px}.chat-window .chat-logo.small{width:48px;height:48px;flex:none;border:0;border-radius:14px;background-color:#dcecf9;background-size:cover;background-position:center;color:#2876af;font-size:18px;font-weight:700;box-shadow:inset 0 0 0 1px #cfe1ef}
.chat-brand>div{gap:6px}.chat-window .chat-brand strong{font-size:16px;font-weight:700;color:#214966}.chat-window .chat-brand small{display:flex;align-items:center;gap:7px;color:#7894aa;font-size:11px}.chat-window .chat-brand small i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#39bb82;box-shadow:0 0 0 4px #39bb821c}
.chat-header-meta{display:flex;flex-direction:column;gap:5px;text-align:right}.chat-header-meta span:first-child{color:#345e7b;font-size:12px;font-weight:700}.chat-header-meta span:last-child{color:#8da5b7;font-size:10px}
.chat-window .messages{width:100%;max-width:980px;align-self:center;flex:1;min-height:0;overflow:auto;padding:34px 64px;background:linear-gradient(180deg,#fcfdfe,#f7fafc)}
.chat-window .message-row{position:relative;display:flex;flex-direction:column;gap:6px;margin:16px 0}.chat-window .message-row.visitor,.chat-body .chat-window .message-row.visitor{align-items:flex-end;justify-content:flex-start}.chat-window .message-row.agent,.chat-window .message-row.system,.chat-body .chat-window .message-row.agent,.chat-body .chat-window .message-row.system{align-items:flex-start;justify-content:flex-start}.chat-window .message-author{padding:0 4px;color:#859caf;font-size:10px}.chat-window .bubble{max-width:min(72%,650px);padding:14px 18px;border:1px solid #e8eef3;border-radius:16px 16px 16px 5px;background:#fff;color:#36566f;font-size:14px;line-height:1.75;box-shadow:0 5px 16px rgba(49,86,115,.055);overflow-wrap:anywhere}.chat-window .message-row.visitor .bubble,.chat-body .chat-window .message-row.visitor .bubble{border-color:#d9eafb;border-radius:16px 16px 5px 16px;background:#eaf4ff;color:#295677}.chat-window .message-row.system .bubble{padding:9px 15px;border:0;border-radius:18px;background:#edf2f6;color:#8497a6;font-size:11px;box-shadow:none}.chat-window .bubble small{display:block;margin-top:5px;color:inherit;font-size:9px;opacity:.55;text-align:right}
.chat-window .chat-compose{position:relative;flex:none;padding:15px 28px 19px;border-top:1px solid #e7eef4;background:#fff}.compose-toolbar{width:100%;max-width:980px;min-height:56px;margin:auto;display:flex;align-items:flex-end;gap:10px;padding:7px 9px;border:1px solid #dce8f1;border-radius:16px;background:#f8fbfd;box-shadow:0 4px 14px rgba(54,92,120,.04)}.compose-tool,.compose-send{width:40px;height:40px;flex:none;display:grid;place-items:center;border:0;border-radius:12px;cursor:pointer;transition:background .16s,color .16s,transform .16s}.compose-tool svg,.compose-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.compose-tool{background:transparent;color:#7893a8}.compose-tool:hover{background:#eaf2f8;color:#376b90}.compose-tool.recording{background:#fff0ef;color:#d65e57;animation:record-pulse 1.3s ease-in-out infinite}.chat-window .compose-toolbar textarea{flex:1;width:0;min-width:0;height:40px;min-height:40px;max-height:144px;resize:none;overflow-y:hidden;margin:0;padding:10px 7px;border:0!important;border-radius:8px!important;outline:0;background:transparent!important;box-shadow:none!important;color:#2e526d;font-family:inherit;font-size:13px;line-height:20px}.chat-window .compose-toolbar textarea::placeholder{color:#9aabba}.compose-send{background:#387fac;color:#fff}.compose-send:hover{background:#2d6f9a;transform:translateY(-1px)}.compose-send svg{width:19px;height:19px}.compose-preview{width:100%;max-width:980px;margin:0 auto 9px;padding:9px 12px;border:1px solid #dce8f1;border-radius:11px;background:#f7fafc;color:#54748d;font-size:11px}.compose-preview[hidden]{display:none}.compose-preview span{display:inline-block;max-width:calc(100% - 66px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.compose-preview button{float:right;border:0;background:none;color:#b05b58;font-size:11px;cursor:pointer}.chat-attachment-image{display:block;max-width:min(420px,100%);margin-bottom:7px}.chat-attachment-image img{display:block;max-width:100%;max-height:360px;border-radius:11px;object-fit:contain}.chat-attachment-audio{display:block;width:min(330px,100%);height:38px;margin:3px 0 7px}.chat-attachment-file{display:inline-flex;margin:3px 0 7px;padding:9px 13px;border:1px solid #dce8f1;border-radius:9px;background:#f7fafc;color:#376d91;text-decoration:none}.chat-android10-continue{display:block;width:100%;margin:24px auto 0;padding:13px 18px;border:0;border-radius:12px;background:#1687ed;color:#fff;font:inherit;font-weight:700;cursor:pointer}.chat-android10-continue:hover{background:#0875d2}.chat-android10-continue:disabled{opacity:.65;cursor:wait}.chat-unavailable{width:min(520px,100%)}
@keyframes record-pulse{50%{box-shadow:0 0 0 5px #d65e5720}}
@media(max-width:760px){.chat-body{padding:0;background:#eef4fb}.chat-window{width:100%;height:100vh;height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none}.chat-header{height:78px;padding:0 18px}.chat-window .chat-logo.small{width:42px;height:42px;border-radius:13px}.chat-brand{gap:11px}.chat-window .chat-brand strong{font-size:14px}.chat-window .chat-brand small{font-size:10px}.chat-header-meta{display:none}.chat-window .messages{padding:20px 15px}.chat-window .message-row{margin:12px 0}.chat-window .bubble{max-width:88%;padding:11px 14px;font-size:14px}.chat-window .chat-compose{padding:9px 10px calc(10px + env(safe-area-inset-bottom))}.compose-toolbar{min-height:50px;gap:4px;padding:5px;border-radius:15px}.compose-tool,.compose-send{width:37px;height:38px;border-radius:11px}.compose-tool svg,.compose-send svg{width:19px;height:19px}.chat-window .compose-toolbar textarea{height:38px;min-height:38px;max-height:38px;padding:9px 5px;font-size:14px;line-height:20px}.compose-preview{margin-bottom:7px}.chat-unavailable{padding:16px}}
@media(min-width:761px) and (max-height:680px){.chat-body{padding:16px}.chat-window{height:calc(100vh - 32px);min-height:0}.chat-header{height:72px}.chat-window .messages{padding-top:20px;padding-bottom:20px}}
.chat-window .chat-compose{height:auto;min-height:0}
.chat-header-actions{display:flex;align-items:center;gap:22px}
.chat-refresh-button{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;padding:0 13px;border:1px solid #d5e5ef;border-radius:11px;background:#fff;color:#376f92;font:inherit;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 3px 10px rgba(48,91,120,.07);transition:background .16s,border-color .16s,transform .16s}
.chat-refresh-button:hover{background:#f1f8fc;border-color:#b9d4e3;transform:translateY(-1px)}
.chat-refresh-button:disabled{cursor:wait;opacity:.75}
.chat-refresh-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-refresh-button.is-refreshing svg{animation:chat-refresh-spin .8s linear infinite}
@keyframes chat-refresh-spin{to{transform:rotate(360deg)}}
.chat-window .compose-toolbar textarea{max-height:40px}
@media(max-width:760px){.chat-window .chat-header{padding:0 14px}.chat-header-actions{gap:0}.chat-header-meta{display:none}.chat-refresh-button{height:36px;padding:0 11px}.chat-window .chat-compose{height:auto;min-height:0}.chat-window .compose-toolbar textarea{max-height:38px}}
.chat-window .message-row.agent>.message-avatar{order:0}.chat-window .message-row.agent>.message-stack{order:1}.chat-window .message-row.visitor>.message-stack{order:0}.chat-window .message-row.visitor>.message-avatar{order:1}
.chat-window .message-row.system{display:none!important}
.chat-window .chat-compose .compose-tool{width:42px;height:42px;flex:none;display:grid;place-items:center;border:1px solid #d7e5ee;border-radius:12px;background:#fff;color:#62829a;font-size:0;box-shadow:0 2px 7px rgba(47,87,113,.06)}
.chat-window .chat-compose .compose-tool:hover{background:#eef6fa;color:#2e6d91;border-color:#bdd5e3}
.chat-window .chat-compose .compose-video:disabled{background:#f5f8fa;color:#9aabb7;border-color:#e3ebf0;cursor:default;opacity:.78;box-shadow:none}
.chat-window .chat-compose .compose-video:disabled:hover{background:#f5f8fa;color:#9aabb7;border-color:#e3ebf0;transform:none}
.chat-window .chat-compose .compose-tool.recording{background:#fff1f0;color:#c85d58;border-color:#f1c9c5}
.chat-window .chat-compose .compose-send{width:44px;height:42px;flex:none;display:grid;place-items:center;border:0;border-radius:13px;background:#347da2;color:#fff;box-shadow:0 5px 12px rgba(52,125,162,.2)}
.chat-window .chat-compose .compose-send:hover{background:#286b8d;transform:translateY(-1px)}
.chat-window .chat-compose .compose-send[aria-busy="true"]{cursor:wait;opacity:.78}
@media(max-width:760px){.chat-window .chat-compose .compose-tool{width:38px;height:38px;border-radius:11px}.chat-window .chat-compose .compose-send{width:40px;height:38px;border-radius:12px}}
.chat-window .message-row,.desk-messages .message-row{position:relative}
.chat-window .message-row::before,.chat-window .message-row::after,.desk-messages .message-row::before,.desk-messages .message-row::after{content:var(--message-avatar-label,'客');display:grid;place-items:center;width:30px;height:30px;border:2px solid #fff;border-radius:10px;background:#dcecf8 center/cover no-repeat;color:#39708f;font-size:11px;font-weight:700;box-shadow:0 3px 10px rgba(42,84,112,.12)}
.chat-window .message-row::before,.desk-messages .message-row::before{position:absolute;left:-39px;bottom:1px}
.chat-window .message-row::after,.desk-messages .message-row::after{position:absolute;right:-39px;bottom:1px}
.chat-window .message-row.agent::before,.desk-messages .message-row.agent::before{background-image:var(--message-avatar-image)}
.chat-window .message-row.visitor::after,.desk-messages .message-row.visitor::after{content:var(--message-avatar-label,'我');background:#eaf4ff;color:#3979a0}
.chat-window .message-row.visitor::before,.chat-window .message-row.agent::after,.desk-messages .message-row.visitor::before,.desk-messages .message-row.agent::after{display:none}
.chat-window .message-row>.message-avatar,.desk-messages .message-row>.message-avatar{display:none}
.chat-window .message-row::before,.chat-window .message-row::after{z-index:3!important;display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:none}
@media(max-width:760px){.chat-window .message-row::before,.chat-window .message-row::after{width:26px;height:26px;left:auto;right:auto}.chat-window .message-row::before{left:-14px}.chat-window .message-row::after{right:-14px}}
.chat-window .chat-brand{position:relative}.chat-window .chat-brand small{font-size:0}.chat-window .chat-brand small i{position:absolute;left:49px;top:7px;width:8px;height:8px;border:2px solid #fff;border-radius:50%;box-sizing:content-box}.chat-window .chat-logo.small{position:relative}
.chat-window .message-row{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:8px!important}.chat-window .message-row.agent{justify-content:flex-start!important}.chat-window .message-row.visitor{justify-content:flex-end!important}.chat-window .message-row>.message-avatar{display:grid!important;position:static!important;width:30px;height:30px;flex:none;place-items:center;border:2px solid #fff;border-radius:10px;background:#dcecf8 center/cover no-repeat;color:#39708f;font-size:11px;font-weight:700;box-shadow:0 3px 10px rgba(42,84,112,.12)}.chat-window .message-row>.message-avatar.visitor-avatar{background-color:#eaf4ff;color:#3979a0}.chat-window .message-row>.message-avatar.agent-avatar{background-color:#dcecf8}.chat-window .message-stack{display:flex;min-width:0;max-width:76%;flex-direction:column;gap:4px}.chat-window .message-row::before,.chat-window .message-row::after{display:none!important}.chat-window .message-row.agent .message-author{text-align:left}.chat-window .message-row.visitor .message-author{text-align:right}
.chat-window .bubble>small{display:none!important}.chat-window .message-meta{/* display:flex; */align-items:center;justify-content:flex-start;gap:7px;margin:2px 3px 0;color:#91a6b6;font-size:9px;line-height:1.2;white-space:nowrap;text-align:left}.chat-window .message-time,.chat-window .message-read{color:#91a6b6;font-size:inherit;font-weight:400}.chat-window .message-row.visitor .message-meta{justify-content:flex-end;text-align:right}
.chat-window .message-stack{position:relative;align-items:flex-start;width:fit-content;max-width:76%;padding:14px 0;box-sizing:border-box}
.chat-window .message-author{position:absolute;top:0;left:0;right:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-window .message-author{width:max-content;max-width:calc(100vw - 120px);right:auto}
.chat-window .message-row.visitor .message-author{text-align:right}
.chat-window .message-row.visitor .message-author{right:0;left:auto}
.chat-window .message-row.visitor .message-author{color:#4f7f9b;font-weight:600}
.chat-window .message-avatar[style*="background-image"]{font-size:0!important;color:transparent!important;text-shadow:none}
.chat-window .message-meta{position:absolute;right:auto;bottom:0;left:0;width:max-content;max-width:calc(100vw - 100px);margin:0;box-sizing:border-box}
.chat-window .message-row.visitor .message-meta{right:0;left:auto}
.chat-window .bubble{width:fit-content;max-width:100%;box-sizing:border-box}
/* 大屏聊天区使用卡片的完整宽度，避免内容被限制在中间窄列。 */
.chat-window .messages{max-width:none;padding-left:clamp(24px,5vw,96px);padding-right:clamp(24px,5vw,96px)}
.chat-window .messages{padding-left:28px;padding-right:28px}
.chat-window .compose-toolbar,.chat-window .compose-preview{max-width:none}
/* 气泡尖角朝向头像一侧的上方。 */
.chat-window .message-row.agent .bubble{border-radius:5px 16px 16px 16px}
.chat-window .message-row.visitor .bubble{border-radius:16px 5px 16px 16px}
/* 在线状态放在昵称下方显示，保留绿色状态点。 */
.chat-window .chat-brand small{font-size:0!important;display:flex!important;align-items:center;gap:4px!important;line-height:1.2}
.chat-window .chat-brand small::after{content:'在线';font-size:11px;color:#7894aa}
.chat-window .chat-brand small i{position:static!important;width:8px!important;height:8px!important;flex:none;margin:0!important;border:0!important;display:block!important}
.chat-header{height:66px}
@media(max-width:760px){.chat-header{height:62px}.chat-window .messages{padding-left:15px;padding-right:15px}.chat-window .message-row.agent .bubble{border-radius:5px 16px 16px 16px}.chat-window .message-row.visitor .bubble{border-radius:16px 5px 16px 16px}}
.chat-attachment-image img{cursor:zoom-in}.chat-attachment-video{display:block;width:min(420px,100%);max-height:340px;margin:3px 0 7px;border-radius:11px;background:#17232c;cursor:zoom-in}.chat-attachment-file{max-width:100%;overflow-wrap:anywhere}
.media-preview-modal,.attachment-confirm-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(17,32,45,.58);backdrop-filter:blur(7px)}.media-preview-modal.open,.attachment-confirm-modal.open{display:flex}.media-preview-card,.attachment-confirm-card{position:relative;width:min(760px,100%);max-height:min(90vh,900px);overflow:auto;padding:24px;border:1px solid #dce8f1;border-radius:19px;background:#fff;box-shadow:0 24px 90px #132b3d45}.media-preview-close,.attachment-confirm-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:10px;background:#eef4f8;color:#52718a;font-size:24px;cursor:pointer}.media-preview-content{display:grid;place-items:center;min-height:120px}.media-preview-content img,.media-preview-content video{display:block;max-width:100%;max-height:75vh;border-radius:12px;object-fit:contain;background:#111}.media-preview-name{margin:12px 0 0;color:#6f8799;font-size:12px;text-align:center}.attachment-confirm-card{width:min(460px,100%);padding:25px}.attachment-confirm-card h3{margin:0 38px 18px 0;color:#2e536e;font-size:17px}.attachment-confirm-preview{display:grid;place-items:center;min-height:130px;max-height:300px;overflow:hidden;border:1px solid #e4edf3;border-radius:13px;background:#f6f9fb}.attachment-confirm-preview img,.attachment-confirm-preview video{display:block;max-width:100%;max-height:280px;object-fit:contain}.attachment-file-icon{color:#5f88a4;font-size:48px}.attachment-confirm-name{overflow:hidden;margin-top:13px;color:#345a75;font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.attachment-confirm-size{margin-top:5px;color:#8ca0af;font-size:10px}.attachment-confirm-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:21px}.attachment-confirm-actions button{min-height:38px;padding:0 16px;border:1px solid #d8e5ed;border-radius:10px;background:#fff;color:#5f7d94;font:inherit;cursor:pointer}.attachment-confirm-actions .attachment-send{border-color:#347da2;background:#347da2;color:#fff}.attachment-drop-active{outline:2px dashed #5e9ab8;outline-offset:-8px}.chat-window.attachment-drop-active::after,.desk-workspace.attachment-drop-active::after{content:'松开鼠标，确认后发送';position:absolute;inset:14px;z-index:9000;display:grid;place-items:center;border:2px dashed #6fa5c1;border-radius:18px;background:#edf7f2e8;color:#426c83;font-size:18px;font-weight:700;pointer-events:none}.desk-compose .compose-add{width:36px;height:36px;flex:none;padding:0;border:1px solid #dce8f1;border-radius:10px;background:#f7fafc;color:#527992;font-size:22px;line-height:1}.desk-compose .compose-preview{position:absolute;bottom:calc(100% + 6px);left:12px;z-index:5;width:min(300px,70%);box-sizing:border-box}.desk-compose{position:relative}
@media(max-width:760px){.media-preview-modal,.attachment-confirm-modal{padding:12px}.media-preview-card,.attachment-confirm-card{padding:19px;border-radius:15px}.chat-attachment-video{max-height:260px}.chat-window.attachment-drop-active::after{inset:7px;font-size:14px}}
.chat-window{position:relative}
@media(max-width:760px){
html{width:100%;overflow-x:hidden}
body.chat-body{display:block;width:100%;max-width:100%;min-width:0;margin:0;padding:0;overflow-x:hidden;}
body.chat-body>.chat-window{display:flex;width:100%;max-width:100%;height:100vh;height:100dvh;min-height:0;margin:0;border:0;border-radius:0;overflow:hidden;}
.chat-window .chat-header{width:100%;min-width:0;height:auto;min-height:62px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;gap:8px;}
.chat-window .chat-brand{min-width:0;gap:9px;}
.chat-window .chat-brand>div{min-width:0;}
.chat-window .chat-brand strong{display:block;max-width:calc(100vw - 100px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-window .messages{display:block;width:100%;min-width:0;max-width:100%;padding:14px 12px;overflow-x:hidden;overscroll-behavior:contain;}
.chat-window .message-row{width:100%;min-width:0;max-width:100%;gap:7px;margin:11px 0;}
.chat-window .message-row>.message-avatar{width:28px;height:28px;}
.chat-window .message-stack{flex:0 1 auto;width:auto;min-width:0;max-width:calc(100% - 35px);}
.chat-window .message-author{max-width:100%;}
.chat-window .message-meta{max-width:100%;font-size:8px;}
.chat-window .bubble{width:fit-content;max-width:100%;padding:10px 12px;overflow-wrap:anywhere;word-break:break-word;}
.chat-window .bubble img,.chat-window .bubble video,.chat-window .bubble audio{max-width:100%;}
.chat-window .chat-compose{width:100%;min-width:0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));}
.chat-window .compose-toolbar{width:100%;min-width:0;gap:2px;padding:4px;}
.chat-window .chat-compose .compose-tool{width:34px;height:36px;}
.chat-window .chat-compose .compose-send{width:38px;height:36px;}
.chat-window .compose-toolbar textarea{flex:1;min-width:0;width:0;}
.chat-attachment-image,.chat-attachment-video,.chat-attachment-audio{max-width:100%;}.chat-voice-message{display:flex;align-items:center;gap:10px;width:min(260px,100%);min-width:190px;padding:8px 11px;border-radius:18px;background:#edf4ff;color:#2f78b7;box-sizing:border-box;--voice-progress:0%}.message-row.agent .chat-voice-message{background:#1687ed;color:#fff}.chat-voice-play{width:32px;height:32px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:#1687ed;cursor:pointer;flex:none}.message-row.agent .chat-voice-play{color:#1687ed}.chat-voice-glyph{font-size:13px;margin-left:2px}.chat-voice-message.is-playing .chat-voice-glyph{font-size:0}.chat-voice-message.is-playing .chat-voice-glyph:after{content:"\275A\275A";font-size:13px;margin-left:-2px}.chat-voice-wave{height:18px;flex:1;min-width:55px;border-radius:9px;background:linear-gradient(to right,currentColor var(--voice-progress),rgba(120,160,195,.28) var(--voice-progress));mask:repeating-linear-gradient(to right,#000 0 2px,transparent 2px 5px);opacity:.8}.chat-voice-time{min-width:32px;text-align:right;font-size:11px;opacity:.85}.chat-voice-message audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
}
.chat-window .compose-toolbar{align-items:flex-end}
.chat-window .compose-toolbar textarea{height:88px;min-height:88px;max-height:144px;padding:11px 8px;line-height:21px;overflow-y:hidden}
@media(max-width:760px){.chat-window .compose-toolbar textarea{height:88px;min-height:88px;max-height:144px;padding:10px 6px;line-height:21px}}

/* 访客端消息与工作台保持同一套头像、气泡和元信息布局。 */
.chat-window .message-row{align-items:flex-start!important;gap:8px!important;margin:12px 0!important;min-width:0}
.chat-window .message-row.agent{justify-content:flex-start!important}
.chat-window .message-row.visitor{justify-content:flex-end!important}
.chat-window .message-row>.message-avatar{width:30px;height:30px;flex:none;margin-top:1px;border:2px solid #fff;border-radius:10px;background:#dcecf8 center/cover no-repeat;color:#39708f;font-size:11px;box-shadow:0 3px 10px rgba(42,84,112,.12);display:grid!important;place-items:center;order:0}
.chat-window .message-row.agent>.message-avatar{order:0}
.chat-window .message-row.agent>.message-stack{order:1}
.chat-window .message-row.visitor>.message-stack{order:0}
.chat-window .message-row.visitor>.message-avatar{order:1}
.chat-window .message-stack{display:flex;min-width:0;max-width:76%;flex:0 1 auto;flex-direction:column;gap:4px;align-items:flex-start;width:fit-content;padding:14px 0;box-sizing:border-box;position:relative}
.chat-window .message-author{position:absolute;top:0;left:0;right:auto;width:max-content;max-width:calc(100vw - 120px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;color:#829daf;font-size:9px;line-height:1.2}
.chat-window .message-row.visitor .message-author{left:auto;right:0;text-align:right;color:#4f7f9b;font-weight:600}
.chat-window .bubble{width:fit-content;max-width:100%;box-sizing:border-box;padding:10px 12px;border-radius:5px 12px 12px 12px;line-height:1.65;overflow-wrap:anywhere;word-break:break-word}
.chat-window .message-row.visitor .bubble{border-radius:12px 5px 12px 12px}
.chat-window .bubble>small{display:none!important}
.chat-window .message-meta{position:absolute;right:auto;bottom:0;left:0;width:max-content;max-width:calc(100vw - 100px);/* display:flex;align-items:center;justify-content:flex-start;gap:7px;margin:0;color:#91a6b6;font-size:9px;line-height:1.2;white-space:nowrap;text-align:left;box-sizing:border-box */}
.chat-window .message-row.visitor .message-meta{right:0;left:auto;justify-content:flex-end;text-align:right}
.chat-window .message-time,.chat-window .message-read{color:#91a6b6;font-size:inherit;font-weight:400}

/* 昵称按自身内容排版，不再受消息气泡宽度约束 */
.chat-window .message-stack{width:max-content!important;max-width:calc(100% - 38px)!important;padding:0 0 14px!important;}
.chat-window .message-author{position:static!important;display:block;width:max-content;max-width:calc(100vw - 100px)!important;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 3px 2px;padding:0!important;line-height:1.3}
.chat-window .message-row.visitor .message-stack{align-items:flex-end!important}
.chat-window .message-row.agent .message-stack{align-items:flex-start!important}

/* 输入区仅保留输入框本身，两个操作按钮与输入框等高 */
.chat-window .compose-toolbar{min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;gap:8px!important;align-items:center!important}
.chat-window .chat-compose .compose-tool,.chat-window .chat-compose .compose-send{width:44px!important;height:44px!important;min-height:44px!important;box-sizing:border-box;border-radius:12px!important}
.chat-window .chat-compose .compose-add{background:#edf4f8!important;color:#52788f!important;border:1px solid #dce8ef!important;box-shadow:none!important}
.chat-window .chat-compose .compose-send{background:#347da2!important;box-shadow:none!important}
.chat-window .compose-toolbar input[type="text"]{height:44px!important;min-height:44px!important;max-height:44px!important;box-sizing:border-box;border:1px solid #dbe6ed!important;border-radius:12px!important;background:#f8fbfd!important;padding:0 13px!important;box-shadow:none!important;line-height:normal!important}
@media(max-width:760px){.chat-window .chat-compose .compose-tool,.chat-window .chat-compose .compose-send{width:42px!important;height:42px!important;min-height:42px!important;border-radius:11px!important}.chat-window .compose-toolbar input[type="text"]{height:42px!important;min-height:42px!important;max-height:42px!important}.chat-window .compose-toolbar{gap:6px!important}}
@media(max-width:760px){.chat-window .message-stack{max-width:calc(100% - 38px)}.chat-window .message-author{max-width:calc(100vw - 100px)}.chat-window .message-meta{max-width:calc(100vw - 72px)}}

/* 气泡尖角朝向头像所在一侧，并固定在气泡上沿。 */
.chat-window .message-row.agent .bubble,
.chat-window .message-row.visitor .bubble{position:relative;overflow:visible}
.chat-window .message-row.agent .bubble{border-radius:5px 16px 16px 16px!important}
.chat-window .message-row.visitor .bubble{border-radius:16px 5px 16px 16px!important}
.chat-window .message-row.agent .bubble::before,
.chat-window .message-row.visitor .bubble::before{position:absolute;top:9px;width:10px;height:10px;content:"";z-index:0;transform:rotate(45deg)}
.chat-window .message-row.agent .bubble::before{left:-5px;border-left:1px solid #e8eef3;border-bottom:1px solid #e8eef3;border-radius:0 0 0 2px;background:#fff}
.chat-window .message-row.visitor .bubble::before{right:-5px;border-right:1px solid #d9eafb;border-top:1px solid #d9eafb;border-radius:0 2px 0 0;background:#eaf4ff}
.chat-window .message-row.system .bubble::before{display:none}

/* 移动端原生 audio 控件不能使用气泡的收缩宽度，否则部分 WebView 会把控件压成竖向空白区域。 */
.chat-window .chat-attachment-audio{width:min(330px,calc(100vw - 95px));min-width:220px;max-width:100%;height:38px;flex:none}
@media(max-width:420px){.chat-window .chat-attachment-audio{width:calc(100vw - 88px);min-width:0}}

/* 媒体保持自身尺寸，只有超出气泡或屏幕可用宽度时才缩小。 */
.chat-window .chat-attachment-image img,.chat-window .chat-attachment-video{width:auto;height:auto;max-width:100%;}
.chat-window .chat-attachment-image img{max-height:360px;}
.chat-window .chat-attachment-video{max-height:340px;}
@media(max-width:760px){.chat-window .chat-attachment-image img,.chat-window .chat-attachment-video{max-width:calc(100vw - 76px);max-height:260px;}}

.chat-window .closed-note{display:flex;align-items:center;justify-content:center;gap:14px;min-height:62px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #e8eff5;background:#fff;color:#94a5b2;font-size:13px}
.chat-restart-link{padding:5px 0;border:0;background:transparent;color:#347da2;font:inherit;font-weight:650;white-space:nowrap;cursor:pointer}
.chat-restart-link:hover{color:#246485;text-decoration:underline;text-underline-offset:3px}
.chat-restart-link:disabled{color:#8ca9ba;cursor:wait;text-decoration:none}
@media(max-width:420px){.chat-window .closed-note{gap:9px;padding-right:12px;padding-left:12px;font-size:12px}}

/* 访客聊天使用系统字号，保证消息在嵌入页面中清晰可读。 */
.chat-window,
.chat-window button,
.chat-window input,
.chat-window textarea {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
}
.chat-window .bubble {
  font-size: 16px !important;
  line-height: 1.65;
}
.chat-window .message-author {
  font-size: 12px !important;
}
.chat-window .message-meta,
.chat-window .message-time,
.chat-window .message-read {
  font-size: 12px !important;
}
.chat-window .message-row::before,
.chat-window .message-row::after,
.chat-window .message-row > .message-avatar {
  width: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
}
.chat-window .message-stack {
  max-width: calc(100% - 42px) !important;
}
.chat-window .compose-toolbar textarea {
  font-size: 16px !important;
  line-height: 22px;
}
.chat-window .chat-logo.small {
  width: 52px;
  height: 52px;
  font-size: 19px;
}
@media(max-width:760px) {
  .chat-window .message-row::before,
  .chat-window .message-row::after,
  .chat-window .message-row > .message-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  .chat-window .message-stack {
    max-width: calc(100% - 40px) !important;
  }
  .chat-window .chat-logo.small {
    width: 46px;
    height: 46px;
  }
}

/* Keep each avatar in the message row's layout so its space is reserved. */
.chat-window .message-row.agent:not(.system),
.chat-window .message-row.visitor:not(.system) {
  display: flex !important;
  align-items: flex-start !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 52px !important;
  overflow: visible !important;
}
.chat-window .message-row.agent:not(.system) {
  justify-content: flex-start !important;
}
.chat-window .message-row.visitor:not(.system) {
  justify-content: flex-end !important;
}
.chat-window .message-row:not(.system) > .message-avatar {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
}
.chat-window .message-row.agent:not(.system) > .message-avatar {
  order: 0 !important;
}
.chat-window .message-row.agent:not(.system) > .message-stack {
  order: 1 !important;
}
.chat-window .message-row.visitor:not(.system) > .message-stack {
  order: 0 !important;
}
.chat-window .message-row.visitor:not(.system) > .message-avatar {
  order: 1 !important;
}
.chat-window .message-row:not(.system) > .message-stack {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 40px) !important;
}
@media(max-width:760px) {
  .chat-window .message-row:not(.system) > .message-avatar {
    flex-basis: 32px !important;
    width: 32px !important;
    height: 32px !important;
  }
  .chat-window .message-row:not(.system) > .message-stack {
    max-width: calc(100% - 40px) !important;
  }
}

/* 非系统消息必须留出两侧头像的安全区；气泡和媒体只能占用中间内容区域。 */
.chat-window .message-row:not(.system) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-left: 42px !important;
  padding-right: 42px !important;
  overflow: visible;
}
.chat-window .message-row:not(.system) .message-stack {
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 42px) !important;
  flex: 0 1 auto !important;
}
.chat-window .message-row:not(.system) .bubble,
.chat-window .message-row:not(.system) .chat-attachment-image,
.chat-window .message-row:not(.system) .chat-attachment-video,
.chat-window .message-row:not(.system) .chat-attachment-audio,
.chat-window .message-row:not(.system) .chat-voice-message {
  min-width: 0;
  max-width: 100% !important;
  box-sizing: border-box;
}
.chat-window .message-row:not(.system) .chat-attachment-image {
  display: block;
  overflow: hidden;
}
.chat-window .message-row:not(.system) .chat-attachment-image img,
.chat-window .message-row:not(.system) .chat-attachment-video {
  display: block;
  width: auto;
  max-width: 100% !important;
  height: auto;
  object-fit: contain;
}
.chat-window .message-row:not(.system) .message-author,
.chat-window .message-row:not(.system) .message-meta {
  max-width: 100% !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media(max-width:760px) {
  .chat-window .message-row:not(.system) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .chat-window .message-row:not(.system) .message-stack {
    max-width: calc(100% - 42px) !important;
  }
}

/* Keep the avatar at the row edge and keep message content on the inside. */
.chat-window .message-row.agent:not(.system) {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.chat-window .message-row.visitor:not(.system) {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.chat-window .message-row:not(.system) .message-stack {
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 42px) !important;
  padding: 0 !important;
  flex: 0 1 auto !important;
}
.chat-window .message-row:not(.system) .message-meta {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 3px 7px;
  margin: 3px 3px 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.35;
  box-sizing: border-box;
}
.chat-window .message-row.visitor:not(.system) .message-meta {
  justify-content: flex-end;
  text-align: right;
}
.chat-window .message-row:not(.system) .message-author {
  position: static !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 3px 2px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-window .message-row:not(.system) .message-time,
.chat-window .message-row:not(.system) .message-read {
  max-width: 100%;
  white-space: nowrap;
}
.chat-window .message-row.visitor:not(.system) .message-stack {
  align-items: flex-end !important;
}
.chat-window .message-row.agent:not(.system) .message-stack {
  align-items: flex-start !important;
}
.chat-window .message-row:not(.system) {
  position: relative !important;
  padding-left: 52px !important;
  padding-right: 52px !important;
}
.chat-window .message-row:not(.system) > .message-avatar {
  position: absolute !important;
  top: 0 !important;
  left: 5px !important;
  right: auto !important;
  margin: 0 !important;
}
.chat-window .message-row.visitor:not(.system) > .message-avatar {
  right: 5px !important;
  left: auto !important;
}
.chat-window .message-row:not(.system) .message-stack {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
/* Reduce the combined feed and row gutters so avatars sit closer to the edges. */
.chat-window .messages {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
@media(max-width:760px) {
  .chat-window .messages {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .chat-window .message-row.agent:not(.system),
  .chat-window .message-row.visitor:not(.system) {
    padding-left: 46px !important;
    padding-right: 46px !important;
  }
  .chat-window .message-row:not(.system) > .message-avatar {
    left: 3px !important;
  }
  .chat-window .message-row.visitor:not(.system) > .message-avatar {
    right: 3px !important;
    left: auto !important;
  }
}

/* Reserve an in-flow slot for both avatars so bubbles cannot overlap them. */
.chat-window .message-row.agent:not(.system),
.chat-window .message-row.visitor:not(.system) {
  display: flex !important;
  align-items: flex-start !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 52px !important;
  overflow: visible !important;
}
.chat-window .message-row.agent:not(.system) { justify-content: flex-start !important; }
.chat-window .message-row.visitor:not(.system) { justify-content: flex-end !important; }
.chat-window .message-row:not(.system) > .message-avatar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  flex: none !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
}
.chat-window .message-row.agent:not(.system) > .message-avatar { order: 0 !important; }
.chat-window .message-row.agent:not(.system) > .message-stack { order: 1 !important; }
.chat-window .message-row.visitor:not(.system) > .message-stack { order: 0 !important; }
.chat-window .message-row.visitor:not(.system) > .message-avatar {
  right: 0 !important;
  left: auto !important;
}
.chat-window .message-row:not(.system) > .message-stack {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Use a squarer avatar tile without the white frame. */
.chat-window .message-row:not(.system) > .message-avatar,
.chat-window .message-row:not(.system)::before,
.chat-window .message-row:not(.system)::after {
  border: 0 !important;
  border-radius: 6px !important;
}
.chat-window .message-row:not(.system) > .message-avatar {
  width: 40px !important;
  height: 40px !important;
}

/* Standalone media has no enclosing message bubble. */
.chat-window .message-row.media-only .bubble {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.chat-window .message-row.media-only .bubble::before {
  display: none !important;
}

/* Temporarily hide visitor message timestamps and read receipts. Keep the display styles above commented for easy restoration. */
.chat-window .message-meta {
  display: none !important;
}
.chat-window .message-meta[hidden] {
  display: none !important;
}

/* Also detect standalone attachments directly in the initial HTML after refresh. */
.chat-window .message-row .bubble:has(.chat-attachment-image):not(:has(.chat-message-text)),
.chat-window .message-row .bubble:has(.chat-attachment-video):not(:has(.chat-message-text)),
.chat-window .message-row .bubble:has(.chat-voice-message):not(:has(.chat-message-text)) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.chat-window .message-row .bubble:has(.chat-attachment-image):not(:has(.chat-message-text))::before,
.chat-window .message-row .bubble:has(.chat-attachment-video):not(:has(.chat-message-text))::before,
.chat-window .message-row .bubble:has(.chat-voice-message):not(:has(.chat-message-text))::before {
  display: none !important;
}

/* WeChat-style green for the visitor's own messages. */
.chat-window .message-row.visitor:not(.media-only) .bubble:not(:has(.chat-attachment-image):not(:has(.chat-message-text))):not(:has(.chat-attachment-video):not(:has(.chat-message-text))):not(:has(.chat-voice-message):not(:has(.chat-message-text))) {
  color: #173b2b !important;
  border-color: #95ec69 !important;
  background: #95ec69 !important;
}
.chat-window .message-row.visitor:not(.media-only) .bubble:not(:has(.chat-attachment-image):not(:has(.chat-message-text))):not(:has(.chat-attachment-video):not(:has(.chat-message-text))):not(:has(.chat-voice-message):not(:has(.chat-message-text)))::before {
  border-right-color: #95ec69 !important;
  border-top-color: #95ec69 !important;
  background: #95ec69 !important;
}

/* Make both sides' chat bubbles less rounded while keeping a small tail corner. */
.chat-window .message-row.agent:not(.system) .bubble {
  border-radius: 3px 8px 8px 8px !important;
}
.chat-window .message-row.visitor:not(.system) .bubble {
  border-radius: 8px 3px 8px 8px !important;
}

/* Visitor-side time separators between messages, independent of hidden system rows. */
.chat-window .messages .visitor-time-divider {
  display: block !important;
  width: 100%;
  margin: 14px 0 !important;
  color: #9aa5ae;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

/* Reserve a visible target while a visitor image is loading or has failed. */
.chat-window .chat-image-frame {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 7px;
  border-radius: 11px;
  overflow: hidden;
}
.chat-window .chat-image-frame > .chat-attachment-image { margin-bottom: 0; }
.chat-window .chat-image-frame[data-image-state="loading"],
.chat-window .chat-image-frame[data-image-state="failed"] {
  width: 240px;
  height: 160px;
  background: #edf2f6;
  border: 1px solid #dce5ed;
  box-sizing: border-box;
}
.chat-window .chat-image-frame:not([data-image-state="ready"]) > .chat-attachment-image {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.chat-window .chat-image-frame:not([data-image-state="ready"]) img { opacity: 0; }
.chat-window .chat-image-loading,
.chat-window .chat-image-retry {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 24px);
  color: #65768a;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.chat-window .chat-image-retry {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #d3dfe9;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(25, 53, 80, .08);
  font-family: inherit;
  cursor: pointer;
}
.chat-window .chat-image-retry:hover { background: #f8fafc; }
.chat-window .chat-image-retry:focus-visible { outline: 2px solid #65768a; outline-offset: 2px; }
.chat-window .chat-image-loading[hidden],
.chat-window .chat-image-retry[hidden] { display: none !important; }