*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:#eef2f7;color:#1d2733;-webkit-font-smoothing:antialiased;
  font-size:15px;line-height:1.55;
}
.hidden{display:none!important}
button{font-family:inherit}

/* ---------- 授权码页 ---------- */
.gate{min-height:100%;display:flex;align-items:center;justify-content:center;padding:26px 18px;
  background:radial-gradient(120% 90% at 50% 0%,#dfeaff 0%,#eef2f7 55%,#eef2f7 100%)}
.gate-card{width:100%;max-width:400px;background:#fff;border-radius:22px;padding:32px 24px 24px;
  box-shadow:0 18px 60px rgba(37,63,105,.13);text-align:center}
.gate-logo{width:56px;height:56px;border-radius:18px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,#4c8dff,#2f6fed);box-shadow:0 10px 22px rgba(47,111,237,.32)}
.gate-title{font-size:21px;margin:0 0 6px;font-weight:700;letter-spacing:.3px}
.gate-sub{color:#7d8b9c;font-size:13px;margin:0 0 22px}
.field{margin-bottom:12px}
.field input{width:100%;height:48px;border:1px solid #dde5ef;background:#f7fafd;border-radius:12px;padding:0 14px;
  font-size:15px;outline:none;transition:.18s}
.field input:focus{border-color:#4c8dff;background:#fff;box-shadow:0 0 0 4px rgba(76,141,255,.12)}
.btn-primary{width:100%;height:48px;border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:600;
  background:linear-gradient(135deg,#4c8dff,#2f6fed);box-shadow:0 10px 22px rgba(47,111,237,.28);cursor:pointer}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.6}
.gate-err{min-height:20px;color:#e0493b;font-size:12.5px;margin-top:10px}
.gate-foot{display:flex;align-items:center;justify-content:center;gap:7px;color:#8b98a8;font-size:12.5px;margin-top:14px}
.dot{width:7px;height:7px;border-radius:50%;background:#2fbf6a;box-shadow:0 0 0 3px rgba(47,191,106,.16);display:inline-block}
.dot.off{background:#b9c4d2;box-shadow:0 0 0 3px rgba(185,196,210,.2)}

/* ---------- 聊天 ---------- */
.chat{display:flex;flex-direction:column;height:100vh;height:100dvh;background:#eef2f7}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  background:#fff;border-bottom:1px solid #e7edf5;position:relative;z-index:20}
.head-left{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;background:linear-gradient(135deg,#4c8dff,#2f6fed)}
.avatar img{width:100%;height:100%;object-fit:cover}
.head-info{min-width:0}
.head-name{font-weight:650;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw}
.head-status{display:flex;align-items:center;gap:6px;color:#7d8b9c;font-size:11.5px;margin-top:1px}
.head-right{position:relative}
.icon-btn{border:none;background:transparent;width:38px;height:38px;border-radius:10px;display:inline-flex;
  align-items:center;justify-content:center;color:#5d6b7c;cursor:pointer}
.icon-btn:active{background:#eef3fa}
.menu{position:absolute;right:0;top:42px;background:#fff;border-radius:12px;min-width:158px;padding:6px;
  box-shadow:0 12px 34px rgba(31,52,84,.16);border:1px solid #eaeff6;z-index:40}
.menu button{display:block;width:100%;text-align:left;border:none;background:transparent;padding:10px 12px;
  border-radius:8px;font-size:14px;color:#26333f;cursor:pointer}
.menu button:hover{background:#f2f6fc}

.offline-bar{background:#fff7e6;color:#a26a00;font-size:12.5px;padding:8px 14px;border-bottom:1px solid #ffe6b3;text-align:center}

/* 定位询问 */
.geo-ask{display:flex;align-items:center;gap:8px;margin:10px 12px 0;padding:10px 12px;background:#fff;
  border:1px solid #e4ecf7;border-radius:12px;box-shadow:0 6px 18px rgba(37,63,105,.06)}
.geo-txt{flex:1;font-size:12.5px;color:#5d6b7c;line-height:1.4}
.geo-ok,.geo-no{border:none;border-radius:8px;font-size:12.5px;padding:7px 11px;cursor:pointer;flex:0 0 auto}
.geo-ok{background:#2f6fed;color:#fff}
.geo-no{background:#eef2f7;color:#6b7a8c}

/* 消息区 */
.msgs{flex:1;overflow-y:auto;padding:14px 12px 8px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.sys{align-self:center;max-width:88%;background:#dfe7f1;color:#5d6b7c;font-size:12px;padding:6px 12px;border-radius:12px;text-align:center}
.row{display:flex;align-items:flex-end;gap:8px;max-width:100%}
.row.me{flex-direction:row-reverse}
.ava{width:32px;height:32px;border-radius:50%;flex:0 0 auto;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:#cfdcee;color:#3c5470;font-size:13px;font-weight:600}
.ava img{width:100%;height:100%;object-fit:cover}
.bubble{max-width:76%;background:#fff;padding:9px 12px;border-radius:14px 14px 14px 4px;
  box-shadow:0 2px 8px rgba(37,63,105,.06);word-break:break-word;white-space:pre-wrap;font-size:14.5px;position:relative}
.row.me .bubble{background:linear-gradient(135deg,#4c8dff,#2f6fed);color:#fff;border-radius:14px 14px 4px 14px;
  box-shadow:0 4px 14px rgba(47,111,237,.24)}
.bubble.media{padding:5px;background:#fff}
/* 自己发出的图片 / 视频也走蓝色气泡 */
.row.me .bubble.media{background:linear-gradient(135deg,#4c8dff,#2f6fed)}
/* 语音条保持原样式，不跟着变蓝 */
.row.me .bubble.voice{background:#e8f0ff}
.row.me .bubble.voice .trans{background:#fff;border-left-color:#9dc0ff;color:#4a5a6d}
.row.me .bubble.voice .dur{color:#7d8b9c}
.row.me .bubble.voice .time{color:#8b98a8}
.row.me .bubble.voice .read{color:#7d8b9c}
.row.me .bubble.voice .read.on{color:#2f6fed;background:#dbe8ff}
.bubble.media img{max-width:100%;max-height:320px;border-radius:10px;display:block;cursor:zoom-in}
.bubble.video{width:min(300px,72vw)}
.bubble.video video{width:100%;border-radius:10px;display:block;background:#000}
.bubble.voice{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bubble.voice audio{max-width:200px;height:34px}
.dur{font-size:12px;color:#8b98a8}
.trans{margin-top:6px;font-size:12.5px;color:#4a5a6d;background:#f4f8fd;border-left:3px solid #9dc0ff;
  padding:5px 8px;border-radius:6px;width:100%;white-space:pre-wrap}
.row.me .trans{background:rgba(255,255,255,.18);border-left-color:rgba(255,255,255,.55);color:#fff}
.bubble.file{padding:6px;background:#fff;max-width:82%}
.row.me .bubble.file{background:linear-gradient(135deg,#4c8dff,#2f6fed)}
.file-card{display:flex;align-items:center;gap:10px;text-decoration:none;color:#1d2733;padding:6px 8px;border-radius:10px;background:#f6f9fe}
.row.me .file-card{background:rgba(255,255,255,.18);color:#fff}
.row.me .file-meta i{color:rgba(255,255,255,.78)}
.file-ico{font-size:22px}
.file-meta{display:flex;flex-direction:column;min-width:0}
.file-meta b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.file-meta i{font-style:normal;font-size:11.5px;color:#8b98a8;margin-top:2px}
.bubble-foot{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:4px}
.time{font-size:10.5px;color:#a6b3c2}
.row.me .time{color:rgba(255,255,255,.72)}
.read{font-size:10.5px;color:rgba(255,255,255,.62);border-radius:6px;padding:0 4px}
.read.on{color:#fff;background:rgba(255,255,255,.2)}

/* 定位消息 */
.bubble.loc{padding:5px;background:#fff;max-width:82%}
.loc-card{display:flex;gap:10px;align-items:center;text-decoration:none;color:#1d2733;padding:7px 9px;border-radius:10px;background:#f6f9fe}
.loc-ico{font-size:22px;line-height:1}
.loc-meta{display:flex;flex-direction:column;min-width:0}
.loc-meta b{font-size:13.5px;font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-meta i{font-style:normal;font-size:11.5px;color:#8b98a8;margin-top:2px}
.row.me .bubble.loc{background:linear-gradient(135deg,#4c8dff,#2f6fed)}
.row.me .loc-card{background:rgba(255,255,255,.18);color:#fff}
.row.me .loc-meta i{color:rgba(255,255,255,.78)}
.screen-tag{display:inline-block;font-size:11px;color:#fff;background:rgba(0,0,0,.5);border-radius:6px;padding:2px 7px;margin:2px 0 5px}

/* 表情 */
.emoji-panel{max-height:190px;overflow-y:auto;background:#fff;border-top:1px solid #eef2f7;
  padding:8px 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:2px}
.emoji-panel button{border:none;background:transparent;font-size:22px;padding:6px 0;border-radius:8px;cursor:pointer}
.emoji-panel button:hover{background:#f2f6fc}

/* 输入区 */
.composer{background:#fff;border-top:1px solid #e7edf5;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.quick-bar{display:flex;align-items:center;gap:8px;padding:0 2px 8px;overflow-x:auto;scrollbar-width:none}
.quick-bar::-webkit-scrollbar{display:none}
.qbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid #dde5ef;background:#f7fafd;color:#3c4b5d;
  border-radius:20px;padding:6px 12px;font-size:12.5px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.qbtn:active{background:#e8f0ff;border-color:#bcd4ff}
.qbtn.busy{opacity:.6}
.qnet{margin-left:auto;font-size:11px;color:#98a5b5;white-space:nowrap;flex:0 0 auto;padding-right:2px}
.composer-row{display:flex;align-items:flex-end;gap:2px}
#textInput{flex:1;min-height:38px;max-height:120px;border:1px solid #e3eaf4;background:#f7fafd;border-radius:12px;
  padding:9px 12px;font-size:14.5px;line-height:1.4;resize:none;outline:none;font-family:inherit}
#textInput:focus{border-color:#9dbdf7;background:#fff}
.btn-send{height:38px;padding:0 16px;border:none;border-radius:10px;background:#2f6fed;color:#fff;font-size:14px;
  font-weight:600;cursor:pointer;flex:0 0 auto}
.mic-on{color:#e0493b!important;background:#ffecea!important}
.recording{display:flex;align-items:center;gap:8px;margin-top:8px;background:#fff5f4;border:1px solid #ffd9d4;
  border-radius:10px;padding:8px 10px;font-size:12.5px;color:#c53b2c;user-select:none;-webkit-user-select:none}
.rec-dot{width:9px;height:9px;border-radius:50%;background:#e0493b;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.rec-hint{flex:1;color:#a8564b}
.rec-btn{border:none;border-radius:8px;background:#e0493b;color:#fff;font-size:12.5px;padding:6px 12px;cursor:pointer}
.rec-btn.cancel{background:#f0e3e1;color:#8a5b53}

/* 大画面查看器：图片 / 视频 / 实时画面，点开才出现，自适应放大 */
.mview{position:fixed;inset:0;z-index:280;background:rgba(6,12,20,.96);display:flex;flex-direction:column;
  padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom))}
.mv-bar{display:flex;align-items:center;justify-content:space-between;color:#e6eefb;font-size:13px;
  padding:4px 6px 8px;flex:0 0 auto}
.mv-bar button{border:none;background:rgba(255,255,255,.12);color:#fff;width:32px;height:32px;border-radius:50%;
  font-size:18px;line-height:1;cursor:pointer}
.mv-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.mv-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;display:block}
.mv-stage video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;background:#000;display:block}
.mv-empty{position:absolute;color:#93a9c2;font-size:13px;text-align:center;padding:0 14px}
.mv-foot{flex:0 0 auto;text-align:center;color:#8fa3ba;font-size:11.5px;padding:10px 4px 2px}

/* 聊天里的视频卡片：点了才打开大画面 */
.vthumb{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.16);color:#fff;border-radius:12px;padding:10px 14px;min-width:132px}
.vthumb .vt-play{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.9);color:#1c5fd6;
  display:flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 auto}
.vthumb .vt-txt{font-size:13px;font-weight:600}
.vthumb .vt-dur{margin-left:auto;font-size:11.5px;opacity:.85;font-variant-numeric:tabular-nums}

/* 404 */
.gone{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,#dfeaff 0%,#eef2f7 60%,#eef2f7 100%)}
.gone-card{background:#fff;border-radius:22px;padding:36px 26px;max-width:400px;width:100%;text-align:center;
  box-shadow:0 18px 60px rgba(37,63,105,.13)}
.gone-code{font-size:56px;font-weight:800;letter-spacing:2px;color:#dbe4f0;line-height:1;margin-bottom:10px}
.gone-card h2{font-size:18px;margin:0 0 10px}
.gone-card p{color:#7d8b9c;font-size:13.5px;margin:0 0 22px;line-height:1.6}
.gone-card .btn-primary{max-width:220px;margin:0 auto}

/* 录像弹窗 */
.vrec{position:fixed;inset:0;background:rgba(10,18,28,.86);z-index:220;display:flex;align-items:center;justify-content:center;padding:16px}
.vrec-card{background:#fff;border-radius:18px;width:100%;max-width:420px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.vrec-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eef2f7;font-weight:600}
.vrec-x{border:none;background:transparent;font-size:22px;line-height:1;color:#8b98a8;cursor:pointer}
.vrec-stage{position:relative;background:#0b1420;aspect-ratio:4/3}
.vrec-stage video{width:100%;height:100%;object-fit:cover;display:block}
.vrec-timer{position:absolute;left:10px;top:10px;background:rgba(224,73,59,.92);color:#fff;font-size:12px;
  padding:3px 9px;border-radius:20px;display:flex;align-items:center;gap:6px}
.vrec-tip{font-size:12.5px;color:#7d8b9c;padding:10px 14px 0}
.vrec-actions{display:flex;gap:8px;padding:12px 14px 16px;flex-wrap:wrap}
.vrec-modes{display:flex;gap:8px;padding:10px 14px 0;flex-wrap:wrap}
.mode-btn{flex:1 1 auto;min-width:96px;border:1px solid #dde5ef;background:#f7fafd;color:#3c4b5d;
  border-radius:11px;padding:8px 10px;font-size:12.5px;font-family:inherit;cursor:pointer;white-space:nowrap}
.mode-btn.active{background:#e8f0ff;border-color:#7aa7ff;color:#1c5fd6;font-weight:600}
.vrec-stage .live-badge{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(18,150,86,.94);color:#fff;font-size:11.5px;padding:4px 9px;border-radius:20px}
.vrec-stage .live-badge i{width:6px;height:6px;border-radius:50%;background:#fff;animation:livePulse 1.1s infinite}
@keyframes livePulse{0%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}100%{opacity:.35;transform:scale(.8)}}
.btn-line{border:1px solid #dde5ef;background:#fff;border-radius:10px;padding:10px 14px;font-size:13.5px;
  color:#3c4b5d;cursor:pointer}
.btn-function{border:none;border-radius:10px;background:#2f6fed;color:#fff;padding:10px 16px;font-size:13.5px;
  font-weight:600;cursor:pointer}

/* 提示 */
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(10px);background:rgba(23,33,45,.92);
  color:#fff;font-size:13px;padding:9px 16px;border-radius:20px;opacity:0;pointer-events:none;transition:.22s;z-index:300;max-width:80vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:380px){
  .bubble{max-width:80%}
  .icon-btn{width:34px}
}

/* 客服摄像头入口条（在聊天里，不悬浮） */
.cam-entry{display:flex;align-items:center;gap:8px;margin:0 12px 6px;padding:8px 10px 8px 12px;
  background:#eaf1ff;border:1px solid #cfe0ff;border-radius:12px;font-size:12.5px;color:#1c5fd6}
.cam-entry.hidden{display:none}
.cam-entry .ce-dot{width:8px;height:8px;border-radius:50%;background:#2f9e63;animation:livePulse 1.1s infinite;flex:0 0 auto}
.cam-entry .ce-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-entry button{border:none;border-radius:16px;padding:5px 12px;font-size:12px;font-family:inherit;
  background:#2f6fed;color:#fff;cursor:pointer;flex:0 0 auto}

/* 摄像头内嵌面板（不悬浮、不挡聊天） */
.cam-panel{margin:0 12px 8px;border:1px solid #dce6f2;background:#f7fafd;border-radius:14px;overflow:hidden}
.cam-panel.hidden{display:none}
.cam-panel .cpn-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#eef4fb;font-size:12.5px;color:#41505f}
.cam-panel .cpn-title{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-panel .cpn-x{border:none;background:transparent;font-size:20px;line-height:1;color:#8b98a8;cursor:pointer;padding:0 2px}
.cam-panel .cpn-stage{position:relative;background:#0b1420;aspect-ratio:4/3;max-height:30vh;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.cam-panel .cpn-stage video{width:100%;height:100%;max-height:30vh;object-fit:contain;display:block;background:#0b1420}
.cam-panel .cpn-actions{display:flex;align-items:center;gap:8px;padding:8px 10px;flex-wrap:wrap}
.cam-panel .vrec-tip{padding:0 10px 9px}
.cam-panel .live-badge{position:static;background:#128a4e;color:#fff;font-size:11px;padding:2px 8px;
  border-radius:20px;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
.cam-panel .live-badge i{width:6px;height:6px;border-radius:50%;background:#fff;animation:livePulse 1.1s infinite}
.btn-line.sm,.btn-function.sm{padding:6px 10px;font-size:12.5px;border-radius:9px}

/* 快捷栏按钮按下态 */
.qbtn:active{background:#e6eefb}
.qbtn.live{background:#e8f1ff;color:#2f6fed;border-color:#bfd6ff}