/* ===== 访客端聊天界面 v2 ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(160deg,#eef2ff,#e8edf9);height:100vh;overflow:hidden}
.hidden{display:none !important}

/* QQ 绑定面板 */
.bind-panel{position:absolute;inset:0;z-index:50;background:linear-gradient(160deg,#4f7cff,#6a5ae0);display:flex;align-items:center;justify-content:center;padding:24px}
.bind-box{width:100%;max-width:320px;text-align:center;background:#fff;border-radius:20px;padding:34px 24px;box-shadow:0 20px 60px rgba(20,30,90,.35)}
.bind-logo{font-size:40px;width:72px;height:72px;line-height:72px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(135deg,#4f7cff,#6a5ae0);color:#fff;box-shadow:0 8px 20px rgba(79,124,255,.35)}
.bind-box h2{font-size:20px;color:#2b2f45;margin-bottom:6px;font-weight:700}
.bind-tip{font-size:13px;color:#8a90a6;margin-bottom:22px}
.bind-box input{width:100%;padding:13px 14px;border:2px solid #e4e8f5;border-radius:12px;font-size:16px;text-align:center;outline:none;margin-bottom:14px;letter-spacing:2px;transition:border-color .2s,box-shadow .2s}
.bind-box input:focus{border-color:#4f7cff;box-shadow:0 0 0 3px rgba(79,124,255,.12)}
.bind-note{font-size:12px;color:#b0b6c8;margin-top:14px}

.chat-app{max-width:520px;margin:0 auto;height:100vh;display:flex;flex-direction:column;background:#f4f6fc;box-shadow:0 0 40px rgba(30,40,90,.12);position:relative}
.bind-panel .site-icp{margin-top:10px;text-align:center;font-size:12px;line-height:1.7;color:#7a8499}
.bind-panel .site-icp a{color:#9aa3b5;text-decoration:none}
.bind-panel .site-icp a{color:rgba(255,255,255,.95);text-decoration:none}

/* 顶部 */
.chat-header{background:linear-gradient(135deg,#4f7cff,#6a5ae0);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:0 2px 12px rgba(79,124,255,.25)}
.header-left{display:flex;align-items:center;gap:10px}
.logo{font-size:24px}
.site-name{font-size:15px;font-weight:700}
.status-line{font-size:12px;opacity:.9;margin-top:2px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ffd166;margin-right:5px}
.dot.on{background:#3ddc84;box-shadow:0 0 6px rgba(61,220,132,.8)}
.dot.off{background:#ff6b6b}
.header-right{display:flex;gap:8px}
.icon-btn{background:rgba(255,255,255,.18);border:none;color:#fff;width:34px;height:34px;border-radius:10px;font-size:16px;cursor:pointer;transition:background .15s}
.icon-btn:active{background:rgba(255,255,255,.35)}

/* 消息区 */
.chat-body{flex:1;overflow-y:auto;padding:16px;background:#f4f6fc}
.msg{max-width:78%;padding:10px 14px;border-radius:16px;margin-bottom:10px;font-size:14px;line-height:1.55;word-break:break-word;white-space:pre-wrap;box-shadow:0 1px 2px rgba(20,30,80,.06)}
.msg img,.msg video{max-width:220px;border-radius:10px;display:block}
.msg audio{width:200px}
.msg a.file-link{display:inline-block;padding:8px 12px;background:#fff;border:1px solid #e0e0e8;border-radius:8px;text-decoration:none;color:#4f7cff;font-size:13px}
/* 收款卡片 */
.pay-card{background:#fff;border:1px solid #ffe3b3;border-radius:12px;padding:12px 14px;max-width:280px;margin:4px 0;box-shadow:0 2px 8px rgba(230,126,34,.08)}
.pay-card .pay-amt{font-size:24px;font-weight:700;color:#e67e22}
.pay-card .pay-note{font-size:13px;color:#666;margin-top:4px;word-break:break-all}
.pay-card .pay-st{display:inline-block;font-size:11px;padding:2px 10px;border-radius:10px;margin-top:8px}
.pay-card .pay-st.wait{background:#fef3e0;color:#e67e22}
.pay-card .pay-st.done{background:#e4f9ef;color:#1e9e63}
.pay-card .pay-btn{display:inline-block;margin-top:8px;background:linear-gradient(135deg,#e67e22,#f39c12);color:#fff;border-radius:8px;padding:7px 18px;font-size:14px;text-decoration:none;font-weight:600}
.pay-card .pay-btn:active{transform:scale(.97)}
.msg .meta{font-size:11px;color:#a8adbd;margin-top:4px}
.msg-recalled{font-size:12px;color:#999;font-style:italic;background:transparent!important;text-align:center;max-width:100%;padding:4px 8px;border:none!important}
.recall-btn{display:none;border:none;background:none;color:#8a94ad;font-size:11px;cursor:pointer;padding:0 4px;vertical-align:middle}
.dl-btn{display:none;border:none;background:none;color:#8a94ad;font-size:11px;padding:0 4px;vertical-align:middle;text-decoration:none;cursor:pointer}
.msg-visitor{background:linear-gradient(135deg,#4f7cff,#5d6ef0);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.msg-agent{background:#fff;border:1px solid #e9ecf5;border-bottom-left-radius:4px}
.msg-system{background:#e8ebf5;color:#6b7189;text-align:center;max-width:100%;font-size:12px;border-radius:10px;padding:6px 12px}
.typing{font-size:12px;color:#999;padding:4px 2px}

/* 引导问答 */
.faq-panel,.leave-panel{flex-shrink:0;border-top:1px solid #eee;background:#fff;padding:16px;max-height:50%;overflow-y:auto}
.faq-title{font-size:14px;font-weight:700;color:#333;margin-bottom:12px}
.faq-item{background:#f4f6fc;border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer;border:1px solid #e8ebf5;transition:border-color .2s,transform .1s}
.faq-item:hover{border-color:#4f7cff}
.faq-item:active{transform:scale(.99)}
.faq-item .q{font-size:14px;color:#333;font-weight:600}
.faq-item .a{font-size:13px;color:#666;margin-top:6px;display:none;line-height:1.6}
.faq-item.open .a{display:block}
.faq-footer{margin-top:10px;text-align:center}
.btn-primary{width:100%;padding:13px;background:linear-gradient(135deg,#4f7cff,#6a5ae0);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 6px 16px rgba(79,124,255,.3);transition:transform .1s,opacity .2s}
.btn-primary:active{transform:scale(.98);opacity:.9}
.btn-ghost{width:100%;padding:10px;background:#f1f2f7;color:#666;border:none;border-radius:10px;font-size:14px;cursor:pointer;margin-top:8px}
.leave-panel input,.leave-panel textarea{width:100%;padding:11px 12px;border:1px solid #e0e2ec;border-radius:10px;margin-bottom:10px;font-size:14px;outline:none;font-family:inherit;resize:none;transition:border-color .2s}
.leave-panel input:focus,.leave-panel textarea:focus{border-color:#4f7cff}
.leave-tip{font-size:12px;color:#999;background:#f7f9ff;border:1px dashed #d6def5;border-radius:8px;padding:8px 12px;margin-bottom:12px;line-height:1.5}

/* 历史会话 */
.history-list .h-item{background:#f4f6fc;border-radius:12px;padding:10px 14px;margin-bottom:8px;cursor:pointer;border:1px solid #e8ebf5;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s}
.h-item:active{border-color:#4f7cff}
.h-item .h-txt{font-size:13px;color:#555;flex:1}
.h-item .h-time{font-size:11px;color:#aaa;margin-left:10px;white-space:nowrap}
.h-item .h-status{font-size:11px;padding:2px 8px;border-radius:10px;background:#e8ebf5;color:#888}
.h-item .h-status.active{background:#dff0ff;color:#2f7fe0}

/* 二维码弹层 */
.modal{position:fixed;inset:0;background:rgba(20,30,80,.5);display:flex;align-items:center;justify-content:center;z-index:99}
.modal-box{background:#fff;border-radius:20px;padding:24px;width:300px;text-align:center;box-shadow:0 20px 50px rgba(20,30,80,.3)}
.qrcode-box{display:flex;justify-content:center;margin:14px 0}
.qr-tip{font-size:12px;color:#999;margin-bottom:12px}

/* 输入区 */
.chat-footer{flex-shrink:0;border-top:1px solid #eef0f6;background:#fff;padding:8px 12px 10px;box-shadow:0 -2px 10px rgba(20,30,80,.04)}
.toolbar{display:flex;gap:4px;margin-bottom:6px}
.tool-btn{font-size:20px;cursor:pointer;padding:5px 9px;border-radius:8px;color:#5b6178;background:none;border:none;line-height:1;transition:background .15s}
.tool-btn:active{background:#eef1fa}
.tool-btn:hover{background:#f0f2f8}
.input-row{display:flex;gap:8px;align-items:flex-end}
.input-row textarea{flex:1;border:1px solid #e0e2ec;border-radius:12px;padding:10px 12px;font-size:14px;outline:none;resize:none;max-height:100px;font-family:inherit;line-height:1.5;transition:border-color .2s,box-shadow .2s}
.input-row textarea:focus{border-color:#4f7cff;box-shadow:0 0 0 3px rgba(79,124,255,.1)}
.btn-send{background:linear-gradient(135deg,#4f7cff,#6a5ae0);color:#fff;border:none;border-radius:12px;padding:11px 20px;font-size:14px;font-weight:600;cursor:pointer;flex-shrink:0;box-shadow:0 4px 12px rgba(79,124,255,.3);transition:transform .1s}
.btn-send:active{transform:scale(.97)}
.btn-send:disabled{background:#b8c4e8;cursor:not-allowed;box-shadow:none}

/* 滚动条 */
.chat-body::-webkit-scrollbar,.faq-panel::-webkit-scrollbar,.leave-panel::-webkit-scrollbar{width:5px}
.chat-body::-webkit-scrollbar-thumb{background:#d5daea;border-radius:3px}

/* 提示音引导气泡 */
.sound-tip{position:fixed;top:64px;left:50%;transform:translateX(-50%);background:rgba(20,30,60,.92);color:#fff;font-size:12px;padding:9px 18px;border-radius:22px;z-index:200;box-shadow:0 6px 20px rgba(0,0,0,.2);white-space:nowrap;animation:soundFade .3s ease}
@keyframes soundFade{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* 二维码分享弹层 */
.share-mask{position:fixed;inset:0;background:rgba(15,20,50,.45);display:flex;align-items:center;justify-content:center;z-index:150}
.share-box{background:#fff;border-radius:16px;padding:22px 26px;width:320px;max-width:92vw;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.share-box h3{font-size:16px;margin-bottom:4px}
.share-box .sub{font-size:12px;color:#999;margin-bottom:14px}
.share-qr{margin:0 auto 14px;width:190px;height:190px;padding:8px;background:#fff;border:1px solid #eceef6;border-radius:12px}
.share-url{font-size:12px;color:#4f7cff;word-break:break-all;background:#f5f7fd;border-radius:8px;padding:8px 10px;margin-bottom:12px;border:1px dashed #ccd7f5}
.share-btns{display:flex;gap:10px;justify-content:center}