@charset "utf-8";
/* ============================================================================
   聊天界面样式（PC + 手机）—— 2026-09-25 重做
   ----------------------------------------------------------------------------
   为什么是独立文件：
     · main.css / mobile.css 打包成 main-min.css / main-mobile-min.css，
       改它们必须重跑 GET /Index_csscode 才会生效；聊天样式单独一份更安全。
     · 本文件在 main-min.css / mobile.css **之后**加载，用 !important 覆盖旧的
       .dialog / .dia_* 老样式（老样式仍是表格布局 + 蓝边框）。
   设计口径（参照主流客服/IM）：
     · 品牌橙 #f60（站点主色）为唯一强调色；灰阶 #f4f5f7 / #eceff3 / #98a2b3
     · 气泡式对话：自己靠右（橙底白字），客服靠左（白底描边）
     · 顶部一条身份/状态栏；底部输入区固定；「有新消息」浮标
     · 手机端：贴底输入、加大点击区、safe-area 适配、不依赖 hover
     · 不用 CSS 变量 / CSS Grid（兼容老 Android WebView 与 IE11）
   ============================================================================ */

/* ---------------------------------------------------------------- PC 外框 */
.dg-body{background:#f4f5f7;}
/* 自适应宽度（站点整站是 980 定宽，但聊天页在窄窗口/缩放下不能横向溢出）*/
.dg-page{box-sizing:border-box;max-width:1200px;margin:0 auto;padding:18px 16px 28px;
	font:14px/1.6 "Microsoft YaHei","PingFang SC",Arial,sans-serif;color:#333;}
.dg-card{background:#fff;border:1px solid #e8ebef;border-radius:14px;overflow:hidden;
	box-shadow:0 8px 28px rgba(24,39,75,.08);display:flex;flex-direction:column;height:640px;}
/* 窄屏：隐藏右侧资料栏，对话区占满 */
@media (max-width:920px){.dg-side{display:none;}}
/* 矮屏（笔记本/縮放）：卡片高度跟着视口縮 */
@media (max-height:780px){.dg-card{height:calc(100vh - 60px);}}
/* 真正的手机尺寸：走 mobile 模板，这里只给到 720 以下的兼容样式 */
@media (max-width:720px){
	.dg-page{padding:10px 8px;}
	.dg-card{height:calc(100vh - 20px);border-radius:10px;}
	#his li.em2,#his li.em4{max-width:86%;}
}

/* 顶部：头像 + 名称 + 状态 */
.dg-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
	height:60px;padding:0 16px;background:linear-gradient(135deg,#ff9a4d 0%,#f60 100%);color:#fff;}
.dg-head-l{display:flex;align-items:center;}
.dg-ava{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.22);
	border:1px solid rgba(255,255,255,.5);color:#fff;text-align:center;line-height:36px;font-size:16px;margin-right:10px;}
.dg-head-txt{line-height:1.35;}
.dg-name{display:block;font-size:15px;font-weight:700;}
.dg-state{display:block;font-size:12px;color:#fff3e8;}
.dg-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8ef2a5;margin-right:5px;vertical-align:1px;
	box-shadow:0 0 0 3px rgba(142,242,165,.28);}
.dg-aid{display:inline-block;margin-left:6px;color:#fff;font-weight:700;}
.dg-link{color:#fff;text-decoration:none;font-size:12px;border:1px solid rgba(255,255,255,.6);
	border-radius:14px;padding:4px 12px;}
.dg-link:hover{background:rgba(255,255,255,.18);}

/* 主体：左边对话 + 右边资料 */
.dg-main{flex:1 1 auto;display:flex;min-height:0;background:#f4f5f7;}
.dg-chat{position:relative;flex:1 1 auto;min-width:0;}

/* 消息区（#his 自己就是滚动容器：dialog.js 的 scrollBottom() 直接改它的 scrollTop） */
.dg-msgs,.dg-his-scroll{margin:0;}
#his{box-sizing:border-box;height:100%;margin:0;padding:14px 16px 18px;list-style:none;
	overflow-y:auto;overflow-x:hidden;text-align:left;-webkit-overflow-scrolling:touch;}
#his li{display:block;clear:both;font-size:14px;line-height:1.62;word-wrap:break-word;word-break:break-word;}
/* 时间/署名行 */
#his li.em1{text-align:right;color:#a7b0bd;font-size:12px;margin:8px 4px 3px;}
#his li.em3{text-align:left;color:#8b95a5;font-size:12px;margin:8px 4px 3px;}
/* 气泡：display:table 让宽度收缩到内容，再用 margin 左右对齐（纯 CSS，不需要改 JS 拼串） */
#his li.em2{display:table;max-width:78%;margin:0 0 6px auto;padding:9px 13px;
	background:linear-gradient(135deg,#ffa864 0%,#f60 100%);color:#fff;
	border-radius:12px 12px 3px 12px;box-shadow:0 1px 3px rgba(255,102,0,.25);white-space:pre-wrap;}
#his li.em4{display:table;max-width:78%;margin:0 auto 6px 0;padding:9px 13px;
	background:#fff;color:#2f3947;border:1px solid #e9edf2;
	border-radius:12px 12px 12px 3px;box-shadow:0 1px 2px rgba(24,39,75,.05);white-space:pre-wrap;}
/* 发送失败提示 */
#his li.em1 em,#his li.em2 em{font-style:normal;}
/* 空状态（#his:empty 只在真的没有任何内容时命中） */
#his:empty::before{content:"👋 您好，有什麼可以幫您？\A請直接在下方輸入問題，客服會盡快回覆。";
	display:block;white-space:pre-line;text-align:center;color:#98a2b3;font-size:13px;padding:56px 20px;}
/* 客服端/会员端都会用到的表情 class（bq.css 负责图片，这里只兜底尺寸，避免撑破气泡） */
#his li em,#his li span{background-repeat:no-repeat;}

/* 「有新消息」浮标 */
.dg-jump{display:none;position:absolute;right:16px;bottom:12px;z-index:5;
	background:#fff;border:1px solid #f60;color:#f60;font-size:12px;line-height:1;
	padding:7px 12px;border-radius:16px;cursor:pointer;box-shadow:0 3px 10px rgba(255,102,0,.22);}
.dg-jump:hover{background:#fff6f0;}

/* 右侧资料栏 */
.dg-side{flex:0 0 auto;width:246px;background:#fff;border-left:1px solid #eef1f5;padding:14px 16px;}
.dg-side-t{font-size:13px;font-weight:700;color:#2f3947;padding-bottom:8px;border-bottom:1px dashed #ebeff4;margin-bottom:10px;}
.dg-info{list-style:none;margin:0;padding:0;}
.dg-info li{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px dashed #f2f4f7;}
.dg-info li span{color:#98a2b3;flex:0 0 68px;}
.dg-info li b{color:#2f3947;font-weight:400;text-align:right;word-break:break-all;}
.dg-side-tip{margin-top:14px;font-size:12px;color:#98a2b3;line-height:1.7;background:#f8f9fb;
	border:1px dashed #e9edf2;border-radius:8px;padding:10px;}

/* 底部输入区 */
.dg-foot{flex:0 0 auto;background:#fff;border-top:1px solid #eef1f5;padding:10px 14px 12px;}
.dg-tools{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.dg-ico{cursor:pointer;opacity:.85;}
.dg-ico:hover{opacity:1;}
.dg-tools-tip{font-size:12px;color:#b3bcc9;}
.dg-inputrow{display:flex;align-items:flex-end;}
#say{flex:1 1 auto;box-sizing:border-box;min-height:46px;max-height:132px;padding:11px 13px;
	font:14px/1.5 inherit;color:#2f3947;background:#fff;border:1px solid #e3e8ee;border-radius:10px;
	resize:none;outline:none;transition:border-color .15s,box-shadow .15s;}
#say:focus{border-color:#f60;box-shadow:0 0 0 3px rgba(255,102,0,.12);}
#submit1{flex:0 0 auto;width:92px;height:46px;margin-left:10px;font-size:15px;font-weight:700;
	color:#fff;background:linear-gradient(135deg,#ff9a4d 0%,#f60 100%);border:0;border-radius:10px;cursor:pointer;}
#submit1:hover{filter:brightness(1.04);}
#submit1:active{transform:translateY(1px);}
/* 常见问题快捷短语 */
.dg-quick{margin-top:9px;}
.dg-quick span{display:inline-block;font-size:12px;color:#7b8698;background:#f5f7fa;border:1px solid #eaeef4;
	border-radius:14px;padding:4px 11px;margin:0 6px 6px 0;cursor:pointer;}
.dg-quick span:hover{color:#f60;border-color:#ffd0ad;background:#fff7f2;}

/* 表情选择浮层（bq.css 里是老式 absolute + 负 margin，这里改成输入框上方的浮层） */
#bqSelDiv{position:absolute;left:14px;bottom:100%;margin:0 0 6px;width:455px;height:230px;
	background:#fff;border:1px solid #e9edf2;border-radius:12px;box-shadow:0 10px 30px rgba(24,39,75,.14);
	overflow-y:auto;overflow-x:hidden;z-index:2000;cursor:pointer;}
/* 表情浮层在手机上要贴边 */
@media (max-width:760px){
	#bqSelDiv{left:0;right:0;width:auto;height:200px;border-radius:10px;}
}

/* ============================================================================
   2026-09-25（阶段5）：头像 / 图片截图 / 正在輸入 / 提示条 / 图片放大
   2026-09-26：名字移到气泡**外面**（微信那样），气泡加小三角指向头像
   结构：li.dg-r > .dg-ava + .dg-main > (.dg-meta + .dg-bub)
   ============================================================================ */
#his li.dg-r{display:flex;clear:both;align-items:flex-start;gap:8px;margin:0 0 12px;max-width:100%;
	list-style:none;float:none;width:auto;}
#his li.dg-r.dg-me{flex-direction:row-reverse;}
#his li.dg-r .dg-main{display:flex;flex-direction:column;align-items:flex-start;max-width:76%;min-width:0;}
#his li.dg-r.dg-me .dg-main{align-items:flex-end;}
/* 2026-09-26（2）：气泡宽度**跟着内容走**。
   ⚠ 之前气泡会被「名字 · 时间」那一行撑开（column flex 默认 align-items:stretch 把子元素拉满
   容器宽，而容器宽 = 最宽子元素的宽）→ 一句「我在」也会占满 3/4 屏。 */
#his li.dg-r .dg-bub{align-self:flex-start;max-width:100%;position:relative;padding:9px 13px;
	box-shadow:0 1px 2px rgba(24,39,75,.05);word-wrap:break-word;word-break:break-word;}
#his li.dg-r.dg-me .dg-bub{align-self:flex-end;}
#his li.dg-r.dg-me .dg-bub{background:linear-gradient(135deg,#ffa864 0%,#f60 100%);color:#fff;
	border-radius:12px 12px 3px 12px;box-shadow:0 1px 3px rgba(255,102,0,.25);}
#his li.dg-r.dg-pt .dg-bub{background:#fff;color:#2f3947;border:1px solid #e9edf2;
	border-radius:12px 12px 12px 3px;}
/* 名字在气泡外：自己發的用暖棕色，和白色正文明确区分 */
#his li.dg-r .dg-meta{font-size:11px;line-height:1.5;color:#98a2b3;margin:0 2px 3px;align-self:flex-start;}
#his li.dg-r .dg-meta b{font-weight:600;color:#6b7787;}
#his li.dg-r.dg-me .dg-meta{color:#b5763a;text-align:right;align-self:flex-end;}
#his li.dg-r.dg-me .dg-meta b{color:#a35200;}
#his li.dg-r .dg-txt{white-space:pre-wrap;word-break:break-word;}
/* 小三角（指向头像/人名那一侧，微信的做法） */
#his li.dg-r .dg-bub:before{content:'';position:absolute;top:10px;width:9px;height:9px;
	transform:rotate(45deg);-webkit-transform:rotate(45deg);}
#his li.dg-r.dg-pt .dg-bub:before{left:-5px;background:#fff;
	border-left:1px solid #e9edf2;border-bottom:1px solid #e9edf2;border-radius:0 0 0 2px;}
#his li.dg-r.dg-me .dg-bub:before{right:-5px;background:#f60;border-radius:0 2px 0 0;}
/* 头像：图片加载失败时自动露底下的首字母 */
.dg-ava,.dg-avabtn{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;
	overflow:hidden;background:#e9edf2;display:inline-block;vertical-align:middle;}
.dg-ava i,.dg-avabtn i{position:absolute;left:0;top:0;width:100%;height:100%;line-height:34px;
	text-align:center;font-style:normal;font-size:14px;color:#7b8698;}
.dg-ava img,.dg-avabtn img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
/* 卡通头像（dialog2.js 画进 <i>；有自定义头像时 <img> 盖在上面） */
.dg-ava i svg,.dg-avabtn i svg{display:block;width:100%;height:100%;}
/* 图片消息 */
img.dg-img{display:block;max-width:230px;max-height:230px;margin-top:3px;border-radius:8px;
	cursor:zoom-in;background:#f2f4f7;}
#dgZoomBox{display:none;position:fixed;left:0;top:0;right:0;bottom:0;z-index:99999;
	background:rgba(0,0,0,.75);text-align:center;cursor:zoom-out;}
#dgZoomBox img{max-width:92%;max-height:92%;margin-top:3%;border-radius:6px;}
/* 工具栏按钮 */
.dg-pick,.dg-snd{display:inline-block;font-size:12px;color:#7b8698;background:#f5f7fa;
	border:1px solid #eaeef4;border-radius:14px;padding:3px 10px;margin-left:6px;cursor:pointer;}
.dg-pick:hover,.dg-snd:hover{color:#f60;border-color:#ffd0ad;background:#fff7f2;}
.dg-avabtn{margin-left:6px;width:28px;height:28px;cursor:pointer;border:1px solid #eaeef4;}
.dg-avabtn i{line-height:26px;font-size:13px;}
/* 待发送图片预览 */
.dg-imgbox .dg-thumb{position:relative;display:inline-block;margin:0 0 6px;}
.dg-thumb img{max-width:120px;max-height:120px;border-radius:8px;border:1px solid #e9edf2;display:block;}
.dg-thumb b{position:absolute;right:-7px;top:-7px;width:20px;height:20px;line-height:18px;text-align:center;
	border-radius:50%;background:#e23b3b;color:#fff;font-size:13px;cursor:pointer;font-weight:400;}
/* 正在輸入（三点动画） */
.dg-typing{font-size:12px;color:#8b95a5;padding:4px 2px 0;}
.dg-typing i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#c3cbd6;
	margin-right:3px;vertical-align:middle;animation:dgDot 1.2s infinite ease-in-out;}
.dg-typing i:nth-child(2){animation-delay:.2s;}
.dg-typing i:nth-child(3){animation-delay:.4s;margin-right:6px;}
@keyframes dgDot{0%,80%,100%{opacity:.3;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}
/* 提示条 */
.dg-tipbar{font-size:12px;color:#b26a00;background:#fff7e6;border:1px solid #ffe0b2;
	border-radius:8px;padding:6px 10px;margin-bottom:6px;}
/* 已讀 / 未讀：2026-09-26（2）不進氣泡框（參考 LINE 的小字，放氣泡下面），两种状态分色 */
.dg-read{display:block;align-self:flex-end;font-size:11px;line-height:1.4;margin:2px 2px 0;
	color:#9aa4b2;background:none;border:0;padding:0;}
.dg-read.ok{color:#9aa4b2;}      /* 已讀：LINE 那种淡灰 */
.dg-read.no{color:#d98324;}      /* 未讀：暖琥珀，一眼能分出 */
@media (max-width:760px){.dg-read{font-size:10px;}}
/* 手机端：头像与图片小一号 */
@media (max-width:760px){
	#his li.dg-r .dg-main{max-width:74%;}
	.dg-ava,.dg-avabtn{width:30px;height:30px;}
	.dg-ava i,.dg-avabtn i{line-height:30px;font-size:13px;}
	img.dg-img{max-width:60vw;max-height:60vw;}
}
/* 手机全屏聊天层里的定位（.dia_act 是 flex） */
.dia_act .dg-pick,.dia_act .dg-avabtn{margin-left:0;margin-right:8px;}
.dia_content > .dg-typing,.dia_content > .dg-tipbar{padding:0 12px;}

/* 断线状态条（dialog.js 用 inline style 创建，这里用 !important 修饰外观） */
#diaConnBar{border-radius:0 !important;font-size:12px !important;text-align:center !important;
	line-height:1.6 !important;padding:5px 8px !important;}

/* ============================================================================
   手机端：全屏聊天层（主流移动端客服的做法：整层覆盖，不再挤在页脚里）
   模板结构：foot.html 的 #dialog_win > Dialog:indexMobile
   #dialog_win 原本是 inline 的 float+width:100%，这里整层接管为 fixed 全屏。
   ============================================================================ */
#dialog_win{position:fixed !important;left:0;top:0;right:0;bottom:0;z-index:99999;
	float:none !important;box-sizing:border-box;width:auto !important;padding:0 !important;
	background:#f4f5f7;overflow:hidden;}
.dialog{display:flex !important;flex-direction:column;height:100% !important;
	float:none !important;width:100% !important;margin:0 !important;border:0 !important;
	border-radius:0 !important;box-shadow:none !important;background:#f4f5f7 !important;}
.dia_title{flex:0 0 auto;position:relative;height:52px;line-height:52px;padding:0 12px;
	border-bottom:0 !important;background:linear-gradient(135deg,#ff9a4d 0%,#f60 100%);color:#fff;overflow:hidden;}
.dia_ver{float:left !important;margin:0 !important;color:#fff !important;font-size:15px;font-weight:700;}
.dia_title ul{float:right !important;margin:0 46px 0 0 !important;list-style:none;}
.dia_title li{float:left !important;margin:10px 0 0 8px !important;padding:0 12px !important;
	height:32px;line-height:32px;border:1px solid rgba(255,255,255,.65) !important;border-radius:16px;
	color:#fff;font-size:12px;cursor:pointer;background:rgba(255,255,255,.12);}
.dia_title li:hover{background:rgba(255,255,255,.24) !important;}
.dia_title .my_close_x{position:absolute;top:0;right:4px;height:52px;line-height:50px;
	color:#fff !important;font-size:28px !important;opacity:.92;text-decoration:none;}
.dia_content{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:0 !important;}
.dia_his{flex:1 1 auto;float:none !important;box-sizing:border-box;width:auto !important;min-height:0;
	height:auto !important;margin:0 !important;padding:12px !important;border:0 !important;
	background:#f4f5f7 !important;overflow-y:auto !important;overflow-x:hidden;
	-webkit-overflow-scrolling:touch;text-align:left;}
.dia_his li{float:none !important;display:block;clear:both;width:auto !important;padding:0 !important;
	font-size:15px;line-height:1.6;word-wrap:break-word;word-break:break-word;}
.dia_his li.em1{text-align:right;color:#9aa4b2;font-size:12px;margin:9px 4px 3px;}
.dia_his li.em3{text-align:left;color:#8b95a5;font-size:12px;margin:9px 4px 3px;}
.dia_his li.em2{display:table;max-width:80%;margin:0 0 7px auto;padding:10px 13px;
	background:linear-gradient(135deg,#ffa864 0%,#f60 100%);color:#fff;
	border-radius:13px 13px 3px 13px;box-shadow:0 1px 3px rgba(255,102,0,.25);white-space:pre-wrap;}
.dia_his li.em4{display:table;max-width:80%;margin:0 auto 7px 0;padding:10px 13px;
	background:#fff;color:#2f3947;border:1px solid #e9edf2;
	border-radius:13px 13px 13px 3px;box-shadow:0 1px 2px rgba(24,39,75,.05);white-space:pre-wrap;}
.dia_his:empty::before{content:"👋 您好，有什麼可以幫您？\A請直接在下方輸入問題。";
	display:block;white-space:pre-line;text-align:center;color:#98a2b3;font-size:13px;padding:48px 16px;}
.dia_say{flex:0 0 auto;float:none !important;box-sizing:border-box;width:auto !important;
	padding:8px 10px 0 !important;background:#fff;border-top:1px solid #eef1f5;}
.dia_say input[name=say]{box-sizing:border-box;width:100%;height:44px;padding:11px 13px;
	font-size:16px;/* 16px 以上 iOS 才不会在聚焦时自动放大页面 */
	color:#2f3947;background:#fff;border:1px solid #e3e8ee;border-radius:10px;outline:none;}
.dia_say input[name=say]:focus{border-color:#f60;box-shadow:0 0 0 3px rgba(255,102,0,.12);}
.dia_act{flex:0 0 auto;float:none !important;box-sizing:border-box;display:flex;
	align-items:center;justify-content:space-between;width:auto !important;margin:0 !important;
	padding:8px 10px calc(10px + env(safe-area-inset-bottom)) !important;background:#fff;}
.dia_act #submit1{flex:0 1 auto;min-width:120px;height:46px !important;padding:0 20px;font-size:16px;font-weight:700;
	color:#fff;background:linear-gradient(135deg,#ff9a4d 0%,#f60 100%);border:0;border-radius:10px;}
.dia_act #submit1:active{transform:translateY(1px);}
.dia_act .a00{margin-left:0 !important;opacity:.9;}
/* 兜底：万一 jQuery Mobile 还是把按钮增强成了 .ui-btn（width:100% + 大圆角），这里压回去 */
.dia_act .ui-btn{display:inline-block !important;width:auto !important;margin:0 !important;
	box-shadow:none !important;border-radius:10px !important;}
.dia_act .ui-btn .ui-btn-inner{padding:0 !important;border:0 !important;}
.dia_act .ui-btn-text{font-size:16px !important;}
/* 手机端气泡里的表情（bq.css 的 span）不要撑破气泡 */
.dia_his li em,.dia_his li span{background-repeat:no-repeat;}
/* 表情浮层：手机端占满宽度、贴在输入区上方 */
.dia_act #bqSelDiv{position:absolute;left:0;right:0;bottom:100%;width:auto !important;
	margin:0 0 4px !important;height:200px;border-radius:10px 10px 0 0;border:0;
	border-top:1px solid #e9edf2;box-shadow:0 -8px 24px rgba(24,39,75,.12);}

/* ================= 2026-09-27：聊天機器人（智能客服） =================
   機器人的 uid 是負數（-BOT_AID），會被當成「客服」渲染；但機器人不是人，
   必須一眼分得出來 —— 否則客人會以為真的客服在回（甚至以為拖延）。
   做法：.dg-bot（淡藍氣泡 + 藍色名字 + 「機器人」小標籤），
   頭像由 dialog2.js 的 botSvg() 依 .dg-ava[data-bot="1"] 畫成機器人造型。
   注意：標籤文字寫在 HTML（.dg-bot-tag），**不要**用 CSS content 塞中文
   —— CSS 檔沒有 charset 宣告時，中文 content 在部分瀏覽器會變亂碼。
   這一段放在檔尾（同權重靠後覆蓋 .dg-pt 的白色氣泡）。 */
#his li.dg-r.dg-bot .dg-bub{background:#f2f7ff;border:1px solid #d6e4f7;color:#2b3d55;}
#his li.dg-r.dg-bot .dg-bub:before{left:-5px;background:#f2f7ff;border-left:1px solid #d6e4f7;border-bottom:1px solid #d6e4f7;}
#his li.dg-r.dg-bot .dg-meta b{color:#3f7fd0;}
.dg-bot-tag{font-style:normal;font-weight:400;font-size:10px;line-height:14px;color:#3f7fd0;
	background:#e8f1fb;border:1px solid #cfe0f5;border-radius:3px;padding:0 4px;margin-left:5px;vertical-align:1px;}
@media (max-width:760px){.dg-bot-tag{font-size:9px;line-height:13px;padding:0 3px;}}