/* Modern skin for visitor chat (PC + H5), 2026-10-27.
   Override only: this file loads AFTER pc.css / h5.css.
   Original stylesheets and all JS/HTML are untouched.
   Accent: #1677ff. Layout, sizes and behaviour are unchanged. */

/* ---------- shared font + chat canvas ---------- */
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}
.warp-chat{background:#f5f7fa;}
.warp-chat ul li{margin:14px 0;}

/* ---------- avatars: round ---------- */
.chat_item_left img,.chat_item_right img{width:40px;height:40px;border-radius:50%;object-fit:cover;}

/* ---------- name / time ---------- */
.chat_item h5{font-size:12px;color:#9ca3af;margin-bottom:6px;font-weight:400;}
.chat_item h5 b{color:#6b7280;font-weight:600;}
.chat_item h5 span{margin-left:8px;font-size:11px;}

/* ---------- bubbles: no triangle tails, soft rounded ---------- */
.chat_item .text{font-size:14px;line-height:1.65;padding:11px 16px;border-radius:18px;box-shadow:0 1px 2px rgba(16,24,40,.06);}
.chat_item_left .text{background:#fff;color:#1f2937;border:1px solid #eef0f3;border-radius:18px 18px 18px 4px;}
.chat_item_right .text{background:#95ec69;color:#000;border-radius:18px 18px 4px 18px;}
.chat_item_left .text:before,.chat_item_right .text:before{display:none;}
.chat_item_left .text a{color:#1677ff;}
.chat_item_right .text a{color:#576b95;text-decoration:underline;}

/* ---------- center notices ---------- */
.chat_item_center{background:#e9edf2;color:#8a8f98;font-size:12px;padding:7px 20px;border-radius:999px;box-shadow:none;}

/* ---------- quick replies: pill chips ---------- */
.chat-keys{background:#fff;border-bottom:1px solid #eef0f3;padding:8px 12px;gap:8px;}
.chat-keys a{display:inline-block;padding:6px 16px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:#374151;font-size:13px;white-space:nowrap;}
.chat-keys a:hover{border-color:#1677ff;color:#1677ff;background:#f0f6ff;}

/* ---------- PC sidebar ---------- */
.row-left{background:#fff;}
.layui-tab-title{background:#fff;border-bottom:1px solid #eef0f3;}
.layui-tab-title li{color:#6b7280;font-size:14px;}
.layui-tab-brief>.layui-tab-title li.layui-this{color:#1677ff !important;font-weight:600;}
.layui-tab-brief>.layui-tab-title li.layui-this:after{border-bottom:2px solid #1677ff !important;}
#dialog_list li:hover{background:#f5f7fa;}
#dialog_list li.cur{background:#eef4ff;}

/* ---------- PC editor (scoped to .warp-editor so H5 is untouched) ---------- */
.warp-editor{background:#fff;border-top:1px solid #eef0f3;}
.warp-editor-icon-left,.warp-editor-icon-left a{color:#9ca3af;}
.warp-editor-icon-left a:hover{color:#1677ff;}
.warp-editor #LAY_demo1{border:none;box-shadow:none;font-size:14px;line-height:1.65;padding:12px 16px;resize:none;background:transparent;}
.warp-editor #LAY_demo1:focus{border:none;box-shadow:none;}
.warp-editor #send{background:#1677ff;border-color:#1677ff;color:#fff;border-radius:999px 0 0 999px;padding:0 22px;height:32px;line-height:32px;}
.warp-editor #send:hover{background:#0958d9;border-color:#0958d9;}
.warp-editor #open_enter{background:#1677ff;border-color:#1677ff;color:#fff;border-radius:0 999px 999px 0;border-left:1px solid rgba(255,255,255,.35);}
.warp-editor #open_enter:hover{background:#0958d9;border-color:#0958d9;}
.warp-editor #colse{background:#fff;border:1px solid #e5e7eb;color:#374151;border-radius:999px;}
.warp-editor #colse:hover{border-color:#1677ff;color:#1677ff;}

/* ---------- PC chat scrollbar: thin + subtle ---------- */
.warp-chat::-webkit-scrollbar{width:6px;}
.warp-chat::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:999px;}
.warp-chat::-webkit-scrollbar-track{background:transparent;}

/* ---------- H5 header ---------- */
.header{background:#fff;border-bottom:1px solid #eef0f3;color:#111827;}
.header_center span{color:#111827;font-size:16px;font-weight:600;}
.header i{color:#374151;}

/* ---------- H5 canvas (same bubble language, smaller avatars) ---------- */
.chat-main{background:#f5f7fa;}
.chat-main .warp-chat{background:#f5f7fa;}
.chat-main .chat_item_left img,.chat-main .chat_item_right img{width:40px;height:40px;border-radius:6px;object-fit:cover;}

/* ---------- H5 input (scoped to .chat-send so PC is untouched) ---------- */
.chat-send{background:#f5f5f5;border-top:1px solid #e0e0e0;height:auto;min-height:48px;padding:6px 12px;align-items:center;gap:10px;}
.chat-send a{margin-right:0;display:flex;align-items:center;}
.chat-send #face,.chat-send #kuozhan{margin-right:0;margin-left:0;}
.chat-send .voice-open i,.chat-send .voice-close i,.chat-send #face i,.chat-send #kuozhan i{font-size:28px;color:#000;line-height:1;}
.chat-send #im_txt{background:#fff;border:none;border-radius:8px;height:36px;line-height:36px;padding:0 12px;margin-right:0;font-size:15px;flex:1;}
.chat-send #im_txt:focus{background:#fff;box-shadow:none;outline:none;}
.chat-send button.voice-start{height:36px;border-radius:8px;margin-right:0;background:#fff;color:#000;}
.chat-send #send{background:#07c160;color:#fff;border:none;border-radius:6px;height:36px;line-height:36px;padding:0 18px;}
.chat-send #send:hover{background:#06a852;}
.chat-tool a{color:#9ca3af;}
.chat-tool a:hover{color:#1677ff;}

/* ---------- H5 WeChat alignment (2026-10-27): no per-message name/time,
   avatar flush with bubble top, wider bubbles/images, centered time pills ---------- */
.chat-main .chat_item h5{display:none;}
.chat-main .chat_item .text{max-width:75%;}
.chat-main .chat_item .text img{max-width:100%;}
.chat-main .chat_item .text .chat_goods img{width:80px;height:80px;max-width:80px;}
.chat-main .chat_time_pill{display:table;width:auto;margin:8px auto;padding:4px 12px;background:#e9edf2;color:#8a8f98;font-size:12px;border-radius:999px;clear:both;}