/* Contact / chat widget styles, loaded site-wide.
   These rules used to live in the product detail stylesheet; the floating
   widget is now global, so they were moved into their own file. */

.pd-inq {text-align:left;background:#fff}
/* 头部 */
.pd-inq-hd {display:flex;align-items:center;gap:12px;padding:22px 24px 16px}
.pd-inq-ico {flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:#e8f5fc;color:#009adc;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.pd-inq-ico svg {width:22px;height:22px}
.pd-inq-t {font-size:17px;font-weight:600;color:#19191a;line-height:1.3}
.pd-inq-s {font-size:12.5px;color:#8a919f;margin-top:3px;line-height:1.4}
/* 商品条 */
.pd-inq-goods {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;margin:0 24px;padding:10px 12px;background:#f6f6f8;border-radius:8px}
.pd-inq-goods img {flex:0 0 40px;width:40px;height:40px;border-radius:6px;object-fit:cover;background:#fff}
.pd-inq-gt {font-size:13px;color:#333;line-height:1.5;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 表单 */
.pd-inq-form {padding:0 24px}
.pd-inq-fl {font-size:13px;color:#333;margin:16px 0 7px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px}
.pd-inq-fl i {color:#009adc;font-style:normal}
.pd-inq-fl em {font-style:normal;font-size:12px;color:#b0b4bc}
.pd-inq-in,.pd-inq-ta {display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #dee0e3;border-radius:8px;padding:0 13px;height:44px;font-size:14px;color:#19191a;outline:none;font-family:inherit;background:#fff;transition:border-color .2s,box-shadow .2s}
.pd-inq-ta {height:80px;padding:11px 13px;line-height:1.6;resize:vertical}
.pd-inq-in:focus,.pd-inq-ta:focus {border-color:#009adc;box-shadow:0 0 0 3px rgba(192,0,0,.08)}
.pd-inq-in::-webkit-input-placeholder,.pd-inq-ta::-webkit-input-placeholder {color:#b0b4bc}
/* 附件 */
.pd-inq-up {border:1px dashed #d3d6db;border-radius:8px;padding:16px 12px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.pd-inq-up:hover {border-color:#009adc;background:#f7fcfe}
.pd-inq-up-main {display:block;font-size:13.5px;color:#009adc;font-weight:600}
.pd-inq-up-tip {display:block;font-size:12px;color:#b0b4bc;margin-top:5px}
.pd-inq-file {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;border:1px solid #dee0e3;border-radius:8px;padding:0 13px;height:44px}
.pd-inq-file-nm {flex:1;min-width:0;font-size:13px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-inq-file-del {flex:0 0 auto;font-size:13px;color:#009adc;text-decoration:none}
.pd-inq-file-del:hover {text-decoration:underline}
/* 提交 */
.pd-inq-btn {display:block;width:calc(100% - 48px);height:46px;margin:22px 24px 0;background:#009adc;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer}
.pd-inq-btn:hover {background:#0089c4}
.pd-inq-btn:disabled {opacity:.6;cursor:default}
/* 底部：公司联系方式 */
.pd-inq-foot {margin-top:20px;padding:14px 24px 18px;background:#fafbfc;border-top:1px solid #f0f1f3}
.pd-inq-foot-t {font-size:12px;color:#b0b4bc;text-align:center}
.pd-inq-foot-c {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.pd-inq-foot-c a {font-size:13.5px;color:#19191a;text-decoration:none;font-weight:500}
.pd-inq-foot-c a:hover {color:#009adc}
.pd-inq-sep {width:1px;height:12px;background:#dcdfe6}

/* ---- 联系我们：选择框（在线聊天 / 在线留言 / 电话联系） ---- */
.pd-ct {text-align:left;background:#fff;padding:22px 20px 18px}
.pd-ct-hd {font-size:16px;font-weight:600;color:#19191a;text-align:center;padding-bottom:16px}
.pd-ct-item {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px;padding:14px;border:1px solid #eef1f5;border-radius:10px;text-decoration:none;margin-bottom:10px;transition:border-color .2s,background .2s}
.pd-ct-item:hover {border-color:#009adc;background:#f7fcfe;text-decoration:none}
.pd-ct-ico {flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#e8f5fc;color:#009adc;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.pd-ct-ico svg {width:20px;height:20px}
.pd-ct-txt b {display:block;font-size:14.5px;color:#19191a;font-weight:600}
.pd-ct-txt i {display:block;font-style:normal;font-size:12.5px;color:#8a919f;margin-top:3px}
.pd-ct-foot {text-align:center;font-size:12px;color:#b0b4bc;padding-top:6px;line-height:2}
.pd-ct-foot a {color:#19191a;text-decoration:none;font-weight:500}
.pd-ct-foot a:hover {color:#009adc}
.pd-ct-sep {display:inline-block;width:1px;height:11px;background:#dcdfe6;vertical-align:-1px;margin:0 10px}

/* ---- 电话联系弹窗（电脑上点电话浮钮 / 选择框里的电话那一行） ---- */
.pd-tel {text-align:center;background:#fff;padding:26px 24px 24px}
.pd-tel-t {font-size:15px;font-weight:600;color:#19191a}
.pd-tel-n {font-size:24px;font-weight:700;color:#009adc;letter-spacing:.5px;margin:14px 0 20px}
.pd-tel-btn {display:block;height:46px;line-height:46px;background:#009adc;color:#fff;border-radius:8px;font-size:15px;font-weight:600;text-decoration:none}
.pd-tel-btn:hover {background:#0089c4;color:#fff;text-decoration:none}

/* ---- 在线客服聊天窗 ---- */
.pd-chat {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#f6f7f9;text-align:left}
.pd-chat-hd {flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;padding:14px 20px;background:#fff;border-bottom:1px solid #eef1f5}
.pd-chat-dot {flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#c8ccd4}
.pd-chat-dot.on {background:#13b359}
.pd-chat-t {font-size:15px;font-weight:600;color:#19191a;line-height:1.3}
.pd-chat-s {font-size:12px;color:#8a919f;margin-top:2px}
.pd-chat-tip {flex:0 0 auto;background:#fffbe6;border-bottom:1px solid #ffedb3;padding:10px 20px}
.pd-chat-tip-t {display:block;font-size:12px;color:#a8760a}
.pd-chat-tip-f {display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;margin-top:7px}
.pd-chat-tip-f input {flex:1 1 auto;min-width:0;height:34px;border:1px solid #e6d9a8;border-radius:6px;padding:0 10px;font-size:13px;outline:none;font-family:inherit;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;color:#19191a}
.pd-chat-tip-f input:focus {border-color:#009adc}
.pd-chat-tip-f button {flex:0 0 auto;height:34px;padding:0 14px;background:#009adc;color:#fff;border:none;border-radius:6px;font-size:13px;cursor:pointer}
.pd-chat-body {flex:1 1 auto;overflow-y:auto;padding:16px 20px;-webkit-overflow-scrolling:touch}
.pd-msg {margin-bottom:14px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.pd-msg:last-child {margin-bottom:0}
.pd-msg-sys {font-size:12px;color:#8a919f;text-align:center;background:#eceef1;border-radius:6px;padding:7px 12px;max-width:88%;margin:0 auto 14px;line-height:1.5}
.pd-msg-l {-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
.pd-msg-r {-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
.pd-bub {max-width:78%;padding:9px 13px;border-radius:10px;font-size:14px;line-height:1.55;word-break:break-word;white-space:pre-wrap}
.pd-msg-l .pd-bub {background:#fff;color:#19191a;border-top-left-radius:2px}
.pd-msg-r .pd-bub {background:#009adc;color:#fff;border-top-right-radius:2px}
.pd-time {font-size:11px;color:#b0b4bc;margin-top:4px}
/* 消息里的网址（微信的链接色）。自己那边的红气泡底色深，链接得用浅色才看得清 */
.pd-msg-sys .pd-link,.pd-msg-l .pd-bub .pd-link {color:#576b95;text-decoration:none;word-break:break-all}
.pd-msg-sys .pd-link:hover,.pd-msg-l .pd-bub .pd-link:hover {text-decoration:underline}
.pd-msg-r .pd-bub .pd-link {color:#cfeaf8;text-decoration:underline;word-break:break-all}
/* 装框的消息（咨询商品卡片 / 客服不在线提示）*/
.pd-msg-box {margin-bottom:14px}
.pd-card {width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1px solid #e8eaee;border-radius:10px;padding:12px 14px;box-shadow:0 1px 4px rgba(15,42,80,.04)}
.pd-card-lb {font-size:11px;color:#009adc;font-weight:600;letter-spacing:.5px}
.pd-card-nm {font-size:14px;color:#19191a;font-weight:600;line-height:1.5;margin-top:5px;word-break:break-word}
.pd-card-sp {font-size:12px;color:#8a919f;line-height:1.5;margin-top:4px;word-break:break-word}
.pd-card-tx {font-size:13px;color:#19191a;line-height:1.6;word-break:break-word;white-space:pre-wrap}
.pd-card-btn {display:block;margin-top:10px;height:36px;line-height:34px;text-align:center;border:1px solid #009adc;border-radius:6px;color:#009adc;font-size:13px;font-weight:600;text-decoration:none;transition:background .2s}
.pd-card-btn:hover {background:#f0f9fe;text-decoration:none;color:#009adc}
/* 离线提示用琥珀色，跟商品卡片区分开 */
.pd-card-off {border-color:#ffe0b2;background:#fffbf5}
.pd-card-off .pd-card-btn {border-color:#e6a23c;color:#b8791a}
.pd-card-off .pd-card-btn:hover {background:#fff7e6;color:#b8791a}
.pd-chat-in {flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;padding:12px 20px;background:#fff;border-top:1px solid #eef1f5}
/* 高度要对得上：44 - 边框2 - 上下内边距20 = 内容区 22px，行高 20px 才放得下。
   之前 padding 11 + line-height 1.5(21px) 会让内容区只有 20px，多出 1px，
   浏览器就以为要滚动，右边会冒出一条滚动条。 */
.pd-chat-in textarea {flex:1 1 auto;min-width:0;height:44px;border:1px solid #dee0e3;border-radius:8px;padding:10px 12px;font-size:14px;line-height:20px;font-family:inherit;color:#19191a;outline:none;resize:none;-webkit-box-sizing:border-box;box-sizing:border-box}
.pd-chat-in textarea:focus {border-color:#009adc}
.pd-chat-in button {flex:0 0 auto;height:44px;padding:0 20px;background:#009adc;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}
.pd-chat-in button:disabled {opacity:.6;cursor:default}

/* ---- 右下角常驻浮钮（在线联系 / 在线留言）---- */
.cw-float {position:fixed;right:24px;bottom:30px;z-index:9990;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px}
.cw-btn {position:relative;display:block;width:52px;height:52px;border-radius:50%;background:#009adc;color:#fff;box-shadow:0 6px 18px rgba(192,0,0,.32);text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
.cw-btn:hover {background:#0089c4;color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 24px rgba(192,0,0,.42)}
.cw-btn svg {position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px}
/* 鼠标移上去右边冒出的文字标签 */
.cw-btn .cw-lb {position:absolute;right:64px;top:50%;white-space:nowrap;background:#333;color:#fff;font-size:12px;line-height:1;padding:8px 10px;border-radius:6px;opacity:0;pointer-events:none;transform:translateY(-50%) translateX(6px);transition:opacity .18s,transform .18s}
.cw-btn:hover .cw-lb {opacity:1;transform:translateY(-50%) translateX(0)}

/* 返回顶部（footer 里的 .back-top）：原来固定 bottom:150px/right:0，
   正好压在浮钮上。这里挪到浮钮正上方，样式不变。
   位置按浮钮的量算：bottom 30 + 3×(52+12) = 210，再让 12px 间距 → 222；
   纵向圆心对齐：右边缘 24 + (52-50)/2 = 25。 */
.back-top { right: 25px; bottom: 222px; }

/* 手机：小一点。商品页手机端不显示浮钮（底部固定栏里已经有「联系我们」），
   这是 contact_widget.js 的 floatAdjust() 在管，不是 CSS。 */
@media (max-width:960px){
    .cw-float {right:14px;bottom:18px;gap:10px}
    .cw-btn {width:46px;height:46px}
    .cw-btn svg {width:21px;height:21px;margin:-10.5px 0 0 -10.5px}
    /* 浮钮缩到 46px、间距 10px：18 + 3×(46+10) = 186；右边缘 14 + (46-50)/2 = 12 */
    .back-top {right: 12px; bottom: 186px;}
}