/* UPAY 在线客服 —— 按 750 设计稿缩放（1rem = 屏宽/100，最大 420px 容器） */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:#12b6ef;
  color:#1a1a1a;
  overflow:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(120% 60% at 50% 0%, #38c6f4 0%, #16b2ec 45%, #0aa6e2 100%),
    #12b6ef;
}

.app{
  position:relative;z-index:1;
  width:100%;max-width:420px;height:100%;
  margin:0 auto;background:#fff;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* ---------------- 顶部栏（1:1 复刻） ---------------- */
.hd{
  position:relative;z-index:5;
  flex:0 0 auto;height:50px;background:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 13px 0 18px;
}
.hd-back{
  border:0;background:transparent;padding:4px 6px 4px 0;cursor:pointer;
  display:flex;align-items:center;height:100%;
}
.hd-title{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:20px;font-weight:700;letter-spacing:1px;color:#111;
}
.hd-actions{
  display:flex;align-items:center;justify-content:center;
  height:30px;width:80px;border-radius:42px;background:#fff;
  box-shadow:0 0 11px 0 rgba(238,238,238,.92);
}
.hd-act{
  flex:1;height:21px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;padding:0;cursor:pointer;
}
.hd-act:first-child{border-right:1px solid #e7e7e7}

/* ---------------- 启动页（真实 launch 图 + 进度条） ---------------- */
.stage{
  position:relative;flex:1 1 auto;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;
}
.stage[hidden]{display:none}
.hero{display:block;width:100%;height:auto;flex:0 0 auto}
.stage .bar{
  position:absolute;left:50%;bottom:22vh;transform:translateX(-50%);
  width:293px;max-width:78%;height:5px;border-radius:2px;
  background:#FFD906;overflow:hidden;
  animation:barPulse 1.3s ease-in-out infinite;
}
.stage .bar i{display:none}
@keyframes barPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ---------------- 会话区 ---------------- */
.chat{
  flex:1 1 auto;display:flex;flex-direction:column;min-height:0;
  background:#f5f7fb;
}
.chat[hidden]{display:none}
.msgs{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 12px 8px;display:flex;flex-direction:column;gap:10px;
}

.msg{display:flex;gap:8px;align-items:flex-start;max-width:100%}
.msg .avatar{
  flex:0 0 34px;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#2f6bff,#69a9ff);
  color:#fff;font-weight:800;font-size:13px;letter-spacing:.5px;
  display:flex;align-items:center;justify-content:center;
}
.msg .bubble{
  max-width:calc(100% - 88px);
  padding:10px 12px;border-radius:12px;
  background:#fff;color:#222;font-size:14px;line-height:1.55;
  box-shadow:0 1px 2px rgba(16,38,84,.06);
  word-break:break-word;white-space:pre-wrap;
}
.msg.visitor{justify-content:flex-end}
.msg.visitor .bubble{
  background:linear-gradient(135deg,#2f6bff,#5b9dff);color:#fff;
  box-shadow:0 6px 14px rgba(47,107,255,.22);
}
.msg.visitor .avatar{display:none}
.msg .time{
  align-self:flex-end;font-size:10.5px;color:#a9b3c2;margin:0 2px 2px;
}
.msg.visitor .time{align-self:flex-end}
.msg.system{justify-content:center}
.msg.system .bubble{background:rgba(15,23,42,.05);color:#7a8699;font-size:12px;box-shadow:none}

/* 欢迎信息卡（【UP钱包】下载地址 / 备用客服链接） */
.card{
  background:#fff;border-radius:14px;padding:14px 14px 12px;
  box-shadow:0 6px 20px rgba(24,49,102,.08);font-size:13.5px;color:#333;
}
.card h4{
  margin:0 0 10px;font-size:15px;font-weight:800;color:#1a1a1a;
  display:flex;align-items:center;gap:8px;
}
.card h4 .up-logo{
  width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#2f6bff,#66a8ff);
  color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.card .cap{color:#8894a8;font-size:12px;margin:0 0 8px}
.card .domain{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#f3f7ff;border:1px solid #e2ecff;border-radius:10px;
  padding:9px 11px;margin-bottom:8px;
}
.card .domain b{font-size:14.5px;color:#2f6bff;letter-spacing:.3px}
.card .domain button{
  border:1px solid #cfe0ff;background:#fff;color:#2f6bff;border-radius:999px;
  padding:4px 10px;font-size:12px;cursor:pointer;
}
.card .tip{color:#9aa6b8;font-size:12px;line-height:1.5;margin:6px 0 0}
.card .backup{
  margin-top:10px;padding-top:10px;border-top:1px dashed #e6ecf6;
}
.card .backup .lbl{font-size:12.5px;font-weight:700;color:#333;margin-bottom:4px}
.card .backup a{font-size:12px;color:#2f6bff;word-break:break-all;line-height:1.5}

/* 快捷问题 */
.quick{
  flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding:8px 12px;
  background:#f5f7fb;scrollbar-width:none;
}
.quick::-webkit-scrollbar{display:none}
.quick button{
  flex:0 0 auto;border:1px solid rgba(47,107,255,.24);background:#fff;color:#2f6bff;
  border-radius:999px;padding:7px 13px;font-size:12.5px;cursor:pointer;white-space:nowrap;
}
.quick:empty{display:none}

/* 输入区 */
.inputbar{
  flex:0 0 auto;display:flex;gap:9px;align-items:center;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid #eef1f6;
}
.inputbar input{
  flex:1 1 auto;min-width:0;height:40px;border:1px solid #e6ebf3;border-radius:20px;
  background:#f6f8fc;padding:0 14px;font-size:15px;color:#1a1a1a;outline:none;
}
.inputbar input:focus{border-color:rgba(47,107,255,.55);background:#fff}
.inputbar .send{
  flex:0 0 auto;height:40px;padding:0 20px;border:0;border-radius:20px;
  background:linear-gradient(135deg,#2f6bff,#5b9dff);color:#fff;font-size:14px;font-weight:700;
  box-shadow:0 6px 14px rgba(47,107,255,.26);cursor:pointer;
}
.inputbar .send:disabled{opacity:.5;box-shadow:none}

/* 提示 */
.toast{
  position:fixed;left:50%;bottom:88px;transform:translateX(-50%);
  background:rgba(17,24,39,.86);color:#fff;font-size:13px;
  padding:9px 16px;border-radius:999px;z-index:30;white-space:nowrap;
}

/* ================= 聊天区（对齐真实 UPAY 客服：MIXDESK 版式） ================= */
.chat{background:#f9f9f9}
.msgs{padding:11px 11px 6px;gap:9px}

.msg .avatar{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#2f6bff,#6aa8ff);
  font-size:12px;
}
.msg .bubble{
  max-width:calc(100% - 58px);
  padding:9px 12px;border-radius:16px;
  background:#fff;color:#333;font-size:14px;line-height:1.55;
  box-shadow:0 1px 2px rgba(17,24,39,.05);
}
.msg.visitor .bubble{
  background:#2f6bff;color:#fff;box-shadow:none;border-top-right-radius:6px;
}
.msg.agent .bubble{border-top-left-radius:6px}
.msg .time{font-size:10px;color:#b3b9c4}

/* 快捷问题 */
.quick{
  display:flex;gap:8px;overflow-x:auto;padding:2px 11px 8px;background:#f9f9f9;
  scrollbar-width:none;
}
.quick::-webkit-scrollbar{display:none}
.quick button{
  flex:0 0 auto;border:1px solid #e6e8eb;background:#fff;color:#4a4f57;
  border-radius:14px;padding:6px 11px;font-size:12.5px;cursor:pointer;
  white-space:nowrap;
}
.quick button:active{background:#f2f4f7}

/* 输入栏（白底 + 圆角输入框 + 表情/更多） */
.cbar{
  display:flex;align-items:center;gap:12px;background:#fff;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  border-top:1px solid #f2f2f2;
}
.cbox{flex:1 1 auto;min-width:0}
.cbox input{
  width:100%;height:34px;border:1px solid #eceef1;border-radius:17px;
  background:#f7f8fa;padding:0 13px;font-size:14px;color:#333;outline:none;
  -webkit-appearance:none;
}
.cbox input::placeholder{color:#b6bcc6}
.cbox input:focus{border-color:#d6e3ff;background:#fff}
.cicon{
  flex:0 0 27px;width:27px;height:27px;border:0;background:transparent;
  color:#333;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}

/* 表情 / 更多 面板 */
.cpop{
  position:absolute;left:0;right:0;bottom:calc(52px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid #f0f0f0;box-shadow:0 -6px 20px rgba(17,24,39,.08);
  padding:10px 10px 12px;z-index:6;
}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.emoji-grid button{
  height:34px;border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;border-radius:8px;
}
.emoji-grid button:active{background:#f2f4f7}
.more-list{display:flex;flex-direction:column;gap:2px}
.more-list button{
  text-align:left;border:0;background:transparent;padding:11px 6px;font-size:14px;color:#333;
  border-radius:8px;cursor:pointer;
}
.more-list button:active{background:#f5f6f8}
.chat{position:relative}
/* ---------- 对齐真实面板：防骗条 / 气泡 / 输入条（截图取样版） ---------- */
.chat{background:#fff}
.notice{background:#f5f5f5;padding:7px 12px 6px;text-align:center}
.notice p{
  margin:0;color:#e1251b;font-size:12.5px;line-height:1.45;font-weight:700;
  text-align:left;
}
.notice button{
  border:0;background:transparent;color:#8c9bb0;font-size:12px;padding:6px 0 0;cursor:pointer;
  text-decoration:underline;
}

.msgs{padding:10px 12px 8px;gap:0;background:#fff}

.msg{align-items:flex-start;gap:10px;margin-bottom:12px}
.msg .avatar{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  background:#8c8c8c;
  font-size:13px;font-weight:700;color:#fff;
}
.msg .bubble{
  max-width:calc(100% - 62px);
  padding:9px 12px;border-radius:6px;
  background:#f5f6f8;color:#333;font-size:14px;line-height:1.6;
  box-shadow:none;
}
.msg.visitor .bubble{
  background:#2f6bff;color:#fff;border-radius:6px;box-shadow:none;
}
.msg.agent .bubble,.msg.visitor .bubble{border-top-left-radius:6px;border-top-right-radius:6px}
.msg .time{
  align-self:flex-start;font-size:11px;color:#b8bec7;margin:6px 0 0;
}
.msg.visitor .time{align-self:flex-end}

/* 输入条：附件 + 白底圆角输入（内含表情）+ 圆形发送 */
.cbar{
  display:flex;align-items:center;gap:10px;background:#fff;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top:0;
}
.cicon{color:#333}
.cicon.clip{flex:0 0 26px;width:26px;height:26px}
.cbox{
  flex:1 1 auto;min-width:0;position:relative;display:flex;align-items:center;
  background:#fff;border:1px solid #e8eaee;border-radius:18px;
  height:38px;padding:0 38px 0 12px;
}
.cbox input{
  flex:1 1 auto;width:100%;height:100%;border:0;background:transparent;
  padding:0;font-size:14px;color:#333;outline:none;
}
.cbox input::placeholder{color:#a8aeb8}
.cicon.in{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;color:#333;
}
.csend{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:0;
  background:#d3d8dc;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:background .15s;
}
.csend.is-on{background:#2f6bff}

/* 快捷问题贴近真实：灰底小胶囊，输入条上方 */
.quick{padding:0 10px 8px;background:#fff}
.quick button{border-radius:14px;background:#f5f6f8;border-color:#f0f1f3;color:#4a4f57}
/* 与真实面板保持一致：不显示快捷问题行（保留 DOM 便于后台开关） */
.quick{display:none}
/* ---------- 消息类型：标题 / 防骗须知 ---------- */
.bubble.is-title{
  color:#1a7edc;font-weight:700;font-size:15px;background:#f5f6f8;
}
.bubble.is-notice{padding:10px 12px}
.bubble.is-notice .notice-title{
  color:#1a7edc;font-weight:700;font-size:14.5px;line-height:1.5;
}
.bubble.is-notice .notice-sub{
  color:#e1251b;font-weight:700;font-size:14px;margin-top:2px;
}
.bubble.is-notice .notice-list{
  margin:2px 0 0;padding-left:18px;color:#e1251b;font-size:13.5px;line-height:1.7;
}
.bubble.is-notice .notice-list li{color:#e1251b}

/* 去掉欢迎大卡（真实面板没有），保留其余气泡 */
.msgs{background:#fff}
/* 气泡 + 时间竖排（时间在气泡下方，与真实面板一致） */
.msg{align-items:flex-start}
.mbody{display:flex;flex-direction:column;min-width:0;max-width:calc(100% - 52px)}
.mbody .bubble{max-width:100%}
.msg .time{margin:6px 0 0 2px;font-size:11px;color:#b8bec7}
.msg.visitor{align-items:flex-end}
.msg.visitor .mbody{align-items:flex-end}
.msg.visitor .time{margin:6px 2px 0 0}
.msg{display:flex;gap:10px}
/* 与真实面板对齐：气泡 10px 圆角 / 15px 字号 */
.msg .bubble{border-radius:10px;font-size:15px;line-height:1.55;padding:10px 12px}
.msg.agent .bubble,.msg.visitor .bubble{border-top-left-radius:10px;border-top-right-radius:10px}
.msg.visitor .bubble{background:#3b7bf6}
.bubble.is-title{font-size:15.5px}
/* 真实客服头像（uPayLogo） */
.msg .avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 40px;background:#fff;box-shadow:0 1px 3px rgba(20,40,80,.10)}
/* 真实图标 */
.cicon img{display:block;width:24px;height:24px;object-fit:contain}
.cbar .cicon.clip svg{width:24px;height:24px}
/* 顶栏：蓝色 + 真实图标 + 白色标题（与真实面板一致） */
.hd{background:#1f7bf6;border-bottom:1px solid #1a6de0}
.hd-title{color:#fff !important;font-size:16.5px !important;font-weight:600 !important;letter-spacing:0}
.hd-logo{width:24px;height:24px;border-radius:50%;margin-right:8px;flex:0 0 24px;background:#fff}
.hd-back,.hd-act{color:#fff}
.hd-actions{gap:0}
.hd-act{opacity:.92}
/* 顶栏布局修正：左 logo + 标题，右侧透明图标 */
.hd{justify-content:flex-start;gap:6px;padding:0 10px 0 12px}
.hd-title{position:static !important;left:auto !important;top:auto !important;transform:none !important;flex:1 1 auto;text-align:left;padding-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-logo{margin:0 !important}
.hd-actions{width:auto !important;height:auto !important;background:transparent !important;box-shadow:none !important;border-radius:0 !important;gap:2px}
.hd-act{width:32px !important;height:32px;flex:0 0 32px !important}
.hd-act:first-child{border-right:0 !important}
.hd-back path{stroke:#fff}
/* 访客气泡右侧的小头像（真实面板有） */
.msg.visitor .vbadge{order:2;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:#2f6bff;display:flex;align-items:center;justify-content:center;margin-left:8px;box-shadow:0 1px 3px rgba(47,107,255,.28)}
.msg.visitor{align-items:flex-start}
.msg.visitor .mbody{align-items:flex-end}
/* 顶部防骗条：滚动跑马灯（无「点击复制官方客服」） */
.notice{position:relative;overflow:hidden;background:#f7f8fa;border-bottom:1px solid #eef0f4;height:42px;display:flex;align-items:center}
.notice-track{display:flex;white-space:nowrap;will-change:transform}
.notice-item{color:#e1251b;font-size:13px;font-weight:600;padding-right:64px;letter-spacing:.2px}


/* 访客头像：橙色圆形（真实面板同款 #FD7440） */
.msg.visitor .vbadge{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:#FD7440;display:flex;align-items:center;justify-content:center;margin-left:8px;box-shadow:0 1px 3px rgba(253,116,64,.30)}
.msg.visitor .vbadge svg{width:18px;height:18px}
/* 被拉黑提示 */
.blocked-tip{margin:60px auto 0;max-width:300px;padding:18px 20px;border-radius:14px;background:#fff;color:#e1251b;font-size:14px;text-align:center;line-height:1.7;box-shadow:0 8px 24px rgba(24,49,102,.08)}
/* 附件菜单（图片 / 视频） */
/* 附件菜单：贴在输入条下方（与真实面板一致） */
.attach-menu{
  flex:0 0 auto;display:flex;gap:34px;padding:14px 26px 18px;
  background:#fff;border-top:1px solid #f2f4f7;
}
.attach-menu[hidden]{display:none}
.attach-menu button{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  width:52px;padding:0;border:0;background:transparent;
  color:#2b3a55;font-size:11.5px;line-height:1;cursor:pointer;
}
.attach-menu button:hover{opacity:.72}
.attach-menu svg{color:#2b3a55;display:block}

/* 媒体消息 */
.bubble.is-media{padding:4px;background:#fff}
.mimg{display:block;max-width:220px;max-height:260px;border-radius:8px;cursor:zoom-in}
.mvid{display:block;width:220px;max-height:260px;border-radius:8px;background:#000}
.msg.agent .bubble.is-media{background:#fff !important}
/* 头像与真实面板对齐：34px 圆形、无白边 */
.msg .avatar{width:34px !important;height:34px !important;flex:0 0 34px;border-radius:50%;object-fit:cover;border:0;background:transparent;box-shadow:0 1px 2px rgba(24,49,102,.10)}
.mbody{max-width:calc(100% - 46px)}
/* ================= 兼容性 & 桌面端适配 ================= */

/* 1) 高度：dvh 优先，老浏览器回落 vh */
.app{height:100vh}
@supports (height:100dvh){.app{height:100dvh}}

/* 2) 移动端细节 */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior:none}
.msgs{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
input,textarea,select{font-size:16px;font-family:inherit}
button{font-family:inherit}
img,video{max-width:100%}

/* 3) 电脑浏览器：做成居中的独立卡片，而不是贴着屏幕左边一条 */
@media (min-width: 721px){
  body{
    display:flex;align-items:center;justify-content:center;
    padding:32px;background:#eaf1fb;
  }
  body::before{
    background:
      radial-gradient(90% 70% at 15% 0%, #3f8cff 0%, rgba(63,140,255,0) 60%),
      radial-gradient(80% 70% at 100% 100%, #1f7bf6 0%, rgba(31,123,246,0) 55%),
      linear-gradient(160deg,#eef4ff 0%,#dfeaff 100%);
  }
  .app{
    width:560px;max-width:560px;
    height:min(820px, calc(100vh - 48px));
    border-radius:22px;
    box-shadow:0 28px 80px rgba(18,52,110,.20), 0 2px 8px rgba(18,52,110,.08);
  }
  .hd{border-radius:22px 22px 0 0}
  .msgs{padding:20px 22px 8px}
  .bubble{font-size:14.5px;line-height:1.6}
  .cbar{padding:12px 16px 16px}
  .notice{height:40px}
}

/* 4) 超宽屏：两侧留白更多，卡片不变形 */
@media (min-width: 1440px){
  .app{height:min(900px, calc(100vh - 80px))}
}

/* 5) 横屏手机（高度很矮）：压缩顶栏与输入条，保证消息区可见 */
@media (max-height: 520px) and (orientation: landscape){
  .hd{height:44px}
  .hd-title{font-size:15px}
  .notice{height:34px}
  .notice-item{font-size:12px}
  .cbar{padding:8px 12px}
  .msgs{padding:10px 12px}
}

/* 6) 不支持 gap 的老内核：用外边距兜底 */
@supports not (gap: 4px){
  .cbar > * + *{margin-left:8px}
  .msg + .msg{margin-top:12px}
}
/* 大屏加宽 + 细滚动条 */
@media (min-width: 1280px){
  .app{width:640px;max-width:640px}
  .msgs{padding:22px 26px 8px}
}
.msgs::-webkit-scrollbar{width:6px}
.msgs::-webkit-scrollbar-thumb{background:rgba(140,160,190,.45);border-radius:3px}
.msgs::-webkit-scrollbar-track{background:transparent}
.quick::-webkit-scrollbar{height:0}
/* 表情/更多面板：锚定输入条 */
.cbar{position:relative}
.cpop{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cicon svg{display:block}