/* 有朋 · 手机端（来华人员端 /f、有朋青年端 /h）。所有样式都挂在 .yp 下，舞台双屏可以原样嵌进手机框。 */
html, body { height: 100%; overflow: hidden; }
body.phone { position: fixed; inset: 0; }
#app { height: 100%; }

.yp { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--xuan); overflow: hidden; font-size: 16px; line-height: 1.45; }
.yp.zh { letter-spacing: .01em; }
.yp .body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 18px 22px; overscroll-behavior: contain; }
.yp .body.flush { padding: 0; }
.yp .foot { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--xuan) 70%, rgba(246,241,231,0)); }

/* ---------- 顶栏 ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 8px; min-height: 58px; }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand .mk { height: 30px; width: auto; flex: none; }
.brand .wm { display: flex; flex-direction: column; line-height: 1.05; }
.brand .wm b { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .04em; }
.brand .wm i { font-style: normal; font-size: 9.5px; letter-spacing: .28em; color: var(--mo-3); text-transform: uppercase; margin-top: 3px; }
.top .sub { font-size: 13px; color: var(--mo-3); }
.ibtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 7px 12px; font-size: 13.5px; color: var(--mo-2); }
.ibtn svg { width: 17px; height: 17px; }
.ibtn.round { padding: 8px; }
.netdot { width: 8px; height: 8px; border-radius: 50%; background: var(--r-green); display: inline-block; }
.netdot.off { background: var(--r-orange); }

/* ---------- 通用 ---------- */
.hero { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.08; letter-spacing: -.025em; margin: 14px 0 12px; }
.zh .hero { font-family: var(--display); font-weight: 700; letter-spacing: .01em; font-size: 30px; }
.lead { color: var(--mo-2); font-size: 15.5px; margin: 0 0 22px; }
.h2 { font-size: 21px; font-weight: 700; margin: 14px 0 6px; letter-spacing: -.005em; }
.zh .h2 { letter-spacing: .02em; }
.muted { color: var(--mo-3); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }
.label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mo-3); margin: 18px 0 8px; }
.zh .label { letter-spacing: .12em; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card + .card { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.hr { height: 1px; background: var(--line); margin: 14px 0; border: 0; }
.ico { width: 20px; height: 20px; flex: none; }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 18px; border-radius: 16px; border: 0; background: var(--mo); color: var(--paper); font-weight: 600; font-size: 16px; transition: transform .08s ease, opacity .2s; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn.block { width: 100%; }
.btn.dan { background: var(--dan); }
.btn.qing { background: var(--qing); }
.btn.ghost { background: var(--paper); color: var(--mo); border: 1.5px solid var(--line-2); }
.btn.soft { background: var(--xuan-2); color: var(--mo); }
.btn.sm { min-height: 38px; padding: 8px 13px; font-size: 14px; border-radius: 12px; }
.btn.danger { background: var(--r-red); }
.btn svg { width: 20px; height: 20px; }
.btns { display: flex; gap: 10px; }
.btns > * { flex: 1; }
.link { background: none; border: 0; color: var(--mo-3); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 8px; }

/* 首页大按钮 */
.bigbtn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; border-radius: 22px; padding: 20px 20px 18px; border: 0; margin-bottom: 12px; transition: transform .08s; }
.bigbtn:active { transform: scale(.985); }
.bigbtn .t { font-size: 21px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.bigbtn .s { font-size: 14px; opacity: .78; }
.bigbtn .go { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; opacity: .7; }
.bigbtn.ink { background: var(--mo); color: var(--paper); box-shadow: 0 10px 28px rgba(31,42,55,.22); padding-top: 24px; padding-bottom: 22px; }
.bigbtn.ghost { background: var(--paper); color: var(--mo); border: 1.5px solid var(--line-2); }
.pulse { width: 11px; height: 11px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(98,232,196,.6); animation: pulse 1.8s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(98,232,196,.75); } 70% { box-shadow: 0 0 0 12px rgba(98,232,196,0); } 100% { box-shadow: 0 0 0 0 rgba(98,232,196,0); } }
.promise { display: flex; gap: 9px; align-items: flex-start; color: var(--mo-3); font-size: 13.5px; margin-top: 14px; padding: 0 4px; }
.promise svg { width: 17px; height: 17px; margin-top: 1px; flex: none; }

/* ---------- 输入 ---------- */
.field { width: 100%; border: 1.5px solid var(--line-2); background: var(--paper); border-radius: 16px; padding: 14px 15px; font-size: 16.5px; outline: none; transition: border-color .15s; }
.field:focus { border-color: var(--mo); }
textarea.field { min-height: 128px; resize: none; line-height: 1.5; }
.field.sm { padding: 10px 12px; font-size: 15px; border-radius: 12px; min-height: 0; }
.hint { font-size: 12.5px; color: var(--mo-3); margin-top: 7px; display: flex; gap: 6px; align-items: center; }
.hint svg { width: 14px; height: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--paper); border-radius: 999px; padding: 8px 13px; font-size: 14px; color: var(--mo-2); }
.chip svg { width: 16px; height: 16px; }
.chip.on { background: var(--mo); color: var(--paper); border-color: var(--mo); }
.chip.on.dan { background: var(--dan); border-color: var(--dan); }
.photo { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.photo img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mo); flex: none; }

/* ---------- 风险标签 ---------- */
.tier { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 5px 10px 5px 9px; border-radius: 999px; background: var(--xuan-2); color: var(--mo-2); }
.tier::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tier.red { background: #FBE4E2; color: var(--r-red); }
.tier.orange { background: #FCEBDA; color: #B85E06; }
.tier.green { background: #E2F1E8; color: var(--r-green); }
.tier.gray { background: #ECEDEF; color: var(--r-gray); }

/* ---------- 回答 ---------- */
.steps { list-style: none; padding: 0; margin: 10px 0 0; counter-reset: s; }
.steps li { position: relative; padding: 0 0 12px 38px; counter-increment: s; font-size: 15.5px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; background: var(--qing-tint); color: var(--qing-ink); font-weight: 700; font-size: 13.5px; display: grid; place-items: center; }
.showcard { position: relative; background: var(--paper); border: 1.5px dashed var(--line-2); border-radius: 16px; padding: 14px 14px 12px; margin-top: 12px; }
.showcard .zhtxt { font-family: var(--display); font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--mo); }
.showcard .en { font-size: 13.5px; color: var(--mo-3); margin-top: 6px; }
.showcard .acts { display: flex; gap: 8px; margin-top: 12px; }
.src { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 13px; color: var(--mo-3); }
.src .sealimg { width: 34px; height: 34px; transform: rotate(-6deg); flex: none; }
.src b { color: var(--mo-2); font-weight: 600; }
.caution { margin-top: 10px; font-size: 13.5px; color: #8A5A12; background: #FCF2DF; border-radius: 12px; padding: 9px 12px; }

/* ---------- 接通中 ---------- */
.ringwrap { display: grid; place-items: center; margin: 18px 0 8px; position: relative; }
.ring { width: 172px; height: 172px; }
.ring .bg { stroke: var(--xuan-2); }
.ring .fg { stroke: var(--dan); transition: stroke-dashoffset .9s linear; }
.ringwrap .num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ringwrap .num b { display: block; font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ringwrap .num span { font-size: 12.5px; color: var(--mo-3); }
.plist { list-style: none; margin: 14px 0 0; padding: 0; }
.plist li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.plist li:last-child { border-bottom: 0; }
.plist .st { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--xuan-2); color: var(--mo-4); margin-top: -1px; }
.plist .st svg { width: 15px; height: 15px; }
.plist li.done .st { background: var(--r-green); color: #fff; }
.plist li.now .st { background: var(--paper); border: 2px solid var(--dan); }
.plist li.now .st::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dan); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.plist .zhnote { font-family: var(--serif); font-size: 13.5px; color: var(--mo-2); background: var(--xuan); border-radius: 10px; padding: 8px 10px; margin-top: 6px; line-height: 1.5; }
.phase { margin-top: 12px; font-size: 13.5px; color: #8A5A12; background: #FCF2DF; border-radius: 12px; padding: 10px 12px; }

/* ---------- 人物条 ---------- */
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 900; font-size: 20px; color: #fff; background: var(--dan); flex: none; position: relative; }
.avatar.qing { background: var(--qing); }
.avatar.sm { width: 36px; height: 36px; font-size: 16px; }
.avatar .ok { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--r-green); border: 2px solid var(--paper); display: grid; place-items: center; }
.avatar .ok svg { width: 10px; height: 10px; color: #fff; }
.who { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 12px 12px 12px 12px; box-shadow: var(--shadow); }
.who .nm { font-weight: 700; font-size: 16.5px; }
.who .meta { font-size: 13px; color: var(--mo-3); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--r-green); background: #E2F1E8; padding: 2px 8px; border-radius: 999px; }
.callbtn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--r-green); color: #fff; display: grid; place-items: center; flex: none; }
.callbtn svg { width: 22px; height: 22px; }
.callbtn.end { background: var(--r-red); }
.callbtn.muted { background: var(--mo-4); }
.callbar { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: #E2F1E8; border-radius: 14px; padding: 8px 10px 8px 14px; font-size: 14px; color: #1F6B43; }
.callbar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--r-green); animation: blink 1.2s infinite; }
.callbar .t { font-variant-numeric: tabular-nums; font-weight: 600; }
.callbar .sp { flex: 1; }
.callbar button { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--paper); color: var(--mo); }
.callbar button.end { background: var(--r-red); color: #fff; }
.callbar button svg { width: 18px; height: 18px; }
.callbar.ringing { background: var(--qing-soft); color: var(--qing-ink); }

/* ---------- 横幅 ---------- */
.banner { display: flex; gap: 11px; align-items: center; border-radius: 16px; padding: 12px 14px; margin-top: 10px; font-size: 14.5px; background: var(--qing-soft); color: var(--qing-ink); border: 1px solid var(--qing-tint); }
.banner svg { width: 22px; height: 22px; flex: none; }
.banner.dan { background: var(--dan-soft); color: var(--dan-ink); border-color: var(--dan-tint); }
.banner.green { background: #E9F5EE; color: #1F6B43; border-color: #CFE7D9; }
.banner b { font-weight: 700; }
.banner .go { margin-left: auto; }
.dots::after { content: "…"; animation: dots 1.4s steps(3, end) infinite; display: inline-block; width: 1em; text-align: left; overflow: hidden; vertical-align: bottom; }
@keyframes dots { 0% { width: 0; } 100% { width: 1em; } }

/* ---------- 聊天 ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 6px; }
.msg { display: flex; flex-direction: column; max-width: 84%; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.them { align-self: flex-start; }
.msg.sys { align-self: center; max-width: 92%; font-size: 12.5px; color: var(--mo-3); text-align: center; }
.bubble { padding: 10px 13px; border-radius: 18px; font-size: 15.5px; line-height: 1.45; word-wrap: break-word; white-space: pre-wrap; }
.bubble.qing { background: var(--qing); color: #fff; border-bottom-right-radius: 6px; }
.bubble.dan { background: var(--paper); border: 1px solid var(--dan-tint); border-bottom-left-radius: 6px; }
.msg.them .bubble.qing { border-bottom-right-radius: 18px; border-bottom-left-radius: 6px; }
.msg.me .bubble.dan { border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; background: var(--dan-soft); }
.bubble .tr { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,.08); font-size: 13.5px; opacity: .85; }
.bubble.qing .tr { border-top-color: rgba(255,255,255,.28); }
.msg .from { font-size: 11.5px; color: var(--mo-3); margin: 0 6px 3px; }
.msg.coord .bubble { background: #FCF2DF; border: 1px solid #F2DDB4; }

.cardmsg { width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }
.cardmsg .k { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dan); display: flex; align-items: center; gap: 6px; }
.cardmsg .zhtxt { font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.5; margin-top: 8px; }
.cardmsg .en { font-size: 13.5px; color: var(--mo-3); margin-top: 6px; }
.cardmsg .acts { display: flex; gap: 8px; margin-top: 12px; }
.msg.wide { max-width: 100%; width: 100%; }

/* 到达卡 */
.arrival { position: relative; background: var(--paper); border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.arrival .ahead { background: var(--qing); color: #fff; padding: 14px 70px 12px 16px; position: relative; }
.arrival .ahead .k { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.arrival .ahead .pl { font-size: 20px; font-weight: 700; margin-top: 3px; }
.arrival .ahead .plzh { font-family: var(--serif); font-size: 14.5px; opacity: .85; margin-top: 2px; }
.arrival .ahead .sealimg { position: absolute; right: 14px; top: 12px; width: 44px; height: 44px; transform: rotate(-8deg); }
.arrival dl { margin: 0; padding: 6px 16px 4px; }
.arrival dt { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mo-3); margin-top: 10px; display: flex; gap: 6px; align-items: center; }
.arrival dt svg { width: 14px; height: 14px; }
.arrival dd { margin: 3px 0 0; font-size: 15.5px; line-height: 1.4; }
.arrival .afoot { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.arrival .conf { font-size: 12px; color: var(--mo-3); display: flex; gap: 6px; align-items: center; }
.arrival .conf svg { width: 14px; height: 14px; color: var(--r-green); }

/* 输入条 */
.composer { display: flex; gap: 8px; align-items: flex-end; }
.composer .field { min-height: 46px; padding: 11px 14px; border-radius: 22px; font-size: 16px; }
.composer .send { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--mo); color: #fff; display: grid; place-items: center; flex: none; }
.composer .send svg { width: 20px; height: 20px; }
.actrow { display: flex; gap: 8px; margin-bottom: 9px; }
.actrow .btn { flex: 1; min-height: 44px; font-size: 14.5px; border-radius: 14px; padding: 9px 10px; }
.quick { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.quick .chip { white-space: nowrap; font-size: 13.5px; padding: 7px 12px; }

/* ---------- 青年端 ---------- */
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; color: var(--mo-2); position: relative; }
.tool svg { width: 24px; height: 24px; color: var(--mo); }
.tool.hot { border-color: var(--dan-tint); background: var(--dan-soft); }
.tool.hot svg { color: var(--dan); }
.tool .n { position: absolute; top: 6px; right: 8px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--qing); color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 5px; }
.brief { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }
.brief .bt { font-family: var(--serif); font-size: 16.5px; line-height: 1.6; margin-top: 10px; }
.brief .todo { margin-top: 10px; font-size: 14px; color: var(--dan-ink); background: var(--dan-soft); border-radius: 12px; padding: 8px 11px; display: flex; gap: 7px; }
.brief .todo svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.brief .orig { margin-top: 10px; font-size: 13.5px; color: var(--mo-3); border-left: 3px solid var(--qing-tint); padding-left: 10px; }
.brief .orig img { margin-top: 8px; max-width: 100%; border-radius: 10px; }
.meta-line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--mo-3); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; text-align: left; border: 0; border-radius: 22px; padding: 18px 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.toggle .t { font-size: 19px; font-weight: 700; }
.toggle .s { font-size: 13.5px; color: var(--mo-3); margin-top: 2px; }
.toggle .sw { width: 58px; height: 34px; border-radius: 17px; background: var(--line-2); position: relative; flex: none; transition: background .2s; }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s; }
.toggle.on { background: var(--mo); color: var(--paper); border-color: var(--mo); }
.toggle.on .s { color: rgba(255,253,249,.7); }
.toggle.on .sw { background: var(--dan); }
.toggle.on .sw::after { left: 27px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 12px 10px; }
.stat b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat span { font-size: 12px; color: var(--mo-3); }
.waiting { display: grid; place-items: center; text-align: center; padding: 36px 10px 18px; color: var(--mo-3); font-size: 14.5px; }
.waiting .two { position: relative; width: 120px; height: 54px; margin-bottom: 14px; }
.waiting .two i { position: absolute; top: 15px; width: 24px; height: 24px; border-radius: 50%; }
.waiting .two i:nth-child(1) { left: 14px; background: var(--qing); animation: drift 3s ease-in-out infinite; }
.waiting .two i:nth-child(2) { right: 14px; background: var(--dan); animation: drift 3s ease-in-out infinite reverse; }
.waiting .two::before { content: ""; position: absolute; left: 30px; right: 30px; top: 26px; border-top: 2px dashed var(--line-2); }
@keyframes drift { 50% { transform: translateY(-6px); } }
.tabbar { display: flex; border-top: 1px solid var(--line); background: var(--paper); padding-bottom: env(safe-area-inset-bottom); }
.tabbar button { flex: 1; border: 0; background: none; padding: 10px 0 9px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--mo-4); }
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button.on { color: var(--mo); font-weight: 600; }
.rules { font-size: 14px; line-height: 1.6; }
.rules h4 { margin: 12px 0 4px; font-size: 13px; letter-spacing: .1em; color: var(--mo-3); }
.rules h4:first-child { margin-top: 0; }
.rules ul { margin: 0; padding-left: 18px; }
.rules .motto { margin-top: 12px; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--mint-ink); letter-spacing: .06em; text-align: center; }
.quiz .q { font-size: 14.5px; font-weight: 600; margin: 14px 0 8px; }
.quiz .opt { display: block; width: 100%; text-align: left; border: 1px solid var(--line-2); background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-bottom: 6px; }
.quiz .opt.on { border-color: var(--mo); background: var(--mo); color: var(--paper); }
.quiz .opt.on.wrong { background: #FBE4E2; color: var(--r-red); border-color: #F1C2BD; }
.err { color: var(--r-red); font-size: 13.5px; margin-top: 8px; }
.rlink { border: 0; background: none; padding: 2px 0; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--mo-3); }
.rlink .ico { width: 13px; height: 13px; }
.reasons .opt { display: block; width: 100%; text-align: left; border: 1px solid var(--line-2); background: var(--paper); color: var(--mo); border-radius: 12px; padding: 11px 12px; font-size: 14.5px; margin-bottom: 6px; }
.reasons .opt.on { border-color: var(--r-red); background: #FFF1F0; color: var(--r-red); font-weight: 600; }
.kbcard { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--paper); }
.kbcard + .kbcard { margin-top: 8px; }
.kbcard .t { font-weight: 700; font-size: 15px; }
.kbcard ol { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--mo-2); }
.kbcard .by { font-size: 12px; color: var(--mo-3); margin-top: 6px; }
.form-grid { display: grid; gap: 10px; }
.form-grid label { font-size: 13px; color: var(--mo-3); font-weight: 600; display: block; margin-bottom: 5px; }
.opening { font-family: var(--serif); font-size: 16px; line-height: 1.6; background: var(--qing-soft); border: 1px solid var(--qing-tint); border-radius: 14px; padding: 12px 14px; }
.qlist { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--mo-2); }
.qlist li { margin: 3px 0; }

/* ---------- 评估 ---------- */
.qblock { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin-top: 12px; }
.qblock .qt { font-weight: 700; font-size: 17px; }
.qblock .qs { font-size: 13px; color: var(--mo-3); margin-top: 2px; }
.qblock.done { opacity: .75; }
.opts { display: flex; gap: 8px; margin-top: 12px; }
.opts .btn { flex: 1; min-height: 46px; }
.scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; margin-top: 12px; }
.scale button { aspect-ratio: 1 / 1.25; border-radius: 9px; border: 1px solid var(--line-2); background: var(--paper); font-size: 14px; font-weight: 600; padding: 0; }
.scale button.on { background: var(--mo); color: #fff; border-color: var(--mo); }
.scale-l { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--mo-3); margin-top: 6px; }
.rec { display: grid; place-items: center; margin: 14px 0 6px; }
.recbtn { width: 92px; height: 92px; border-radius: 50%; border: 0; background: var(--dan); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(18,180,143,.35); position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.recbtn svg { width: 34px; height: 34px; }
.recbtn.on { animation: recpulse 1s infinite; }
@keyframes recpulse { 50% { box-shadow: 0 0 0 14px rgba(18,180,143,.2); } }
.rec .cap { font-size: 13px; color: var(--mo-3); margin-top: 10px; text-align: center; }
.wave { display: flex; align-items: center; gap: 3px; height: 28px; justify-content: center; }
.wave i { width: 4px; border-radius: 2px; background: var(--dan); animation: wv 1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .1s; } .wave i:nth-child(3) { animation-delay: .2s; } .wave i:nth-child(4) { animation-delay: .3s; } .wave i:nth-child(5) { animation-delay: .4s; }
@keyframes wv { 0%, 100% { height: 6px; } 50% { height: 26px; } }
.select { width: 100%; border: 1.5px solid var(--line-2); background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: 15px; appearance: none; }
.thanks { text-align: center; padding-top: 30px; }
.thanks .big { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 16px 0 8px; }

/* ---------- 遮罩层 ---------- */
.ov { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--xuan); animation: ovin .18s ease; }
@keyframes ovin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ov.full { background: var(--paper); padding: calc(18px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom)); }
.ov.full .zhbig { flex: 1; display: flex; flex-direction: column; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.45; color: var(--mo); letter-spacing: .01em; }
.ov.full .zhbig.l { font-size: 27px; }
.ov.full .zhbig.xl { font-size: 22px; }
.ov.full .zhbig { overflow-y: auto; }
.ov.full .zhbig small { display: block; font-family: var(--sans); font-weight: 400; font-size: 14px; color: var(--mo-3); margin-top: 18px; letter-spacing: 0; line-height: 1.45; }
.ov.full .tag { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--mo-3); }
.ov.full .tag img { width: 30px; height: 30px; }
.ov.hand { background: var(--mo); color: var(--paper); padding: calc(18px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom)); }
.ov.hand .tag { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,253,249,.72); }
.ov.hand .tag img { width: 30px; height: 30px; }
.ov.hand .main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ov.hand .main .hi { font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 1.4; letter-spacing: .01em; }
.ov.hand .main .say { font-family: var(--serif); font-size: 22px; line-height: 1.6; margin-top: 12px; color: rgba(255,253,249,.92); }
.ov.hand .main .mic { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 16px; color: #A8D8BC; }
.ov.hand .main .mic svg { width: 22px; height: 22px; }
.ov.hand .card2 { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 14px; margin-top: 20px; font-family: var(--serif); font-size: 19px; line-height: 1.55; }
.ov.hand .en { font-size: 13.5px; color: rgba(255,253,249,.6); margin-bottom: 12px; }
.ov.hand .btn { background: var(--paper); color: var(--mo); }

/* 来单 */
.ov.incoming { background: rgba(31,42,55,.55); justify-content: flex-end; padding: 0; }
.incard { background: var(--paper); border-radius: 26px 26px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg); animation: up .25s ease; }
@keyframes up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.incard .bell { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.incard .bell svg { width: 24px; height: 24px; color: var(--dan); animation: shake 1s infinite; }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.incard .bt { font-family: var(--serif); font-size: 17px; line-height: 1.6; margin-top: 12px; }
.slide { position: relative; height: 62px; border-radius: 31px; background: var(--mo); margin-top: 16px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.slide .lbl { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,253,249,.85); font-weight: 600; font-size: 16px; letter-spacing: .06em; }
.slide .knob { position: absolute; left: 5px; top: 5px; width: 52px; height: 52px; border-radius: 50%; background: var(--dan); display: grid; place-items: center; color: #fff; }
.slide .knob svg { width: 24px; height: 24px; }

/* 底部弹层 */
.sheetwrap { position: absolute; inset: 0; z-index: 25; background: rgba(31,42,55,.45); display: flex; flex-direction: column; justify-content: flex-end; animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } }
.sheet { background: var(--xuan); border-radius: 24px 24px 0 0; max-height: 88%; display: flex; flex-direction: column; animation: up .22s ease; }
.sheet .sh { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.sheet .sh b { font-size: 18px; }
.sheet .sb { overflow-y: auto; padding: 4px 16px 16px; }
.sheet .sf { padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 8px; }
.sheet .sf > * { flex: 1; }
.x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--xuan-2); display: grid; place-items: center; }
.x svg { width: 17px; height: 17px; }

.toast { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--mo); color: var(--paper); padding: 10px 16px; border-radius: 999px; font-size: 14px; z-index: 50; white-space: nowrap; box-shadow: var(--shadow-lg); animation: toastin .2s ease; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--xuan-2); border-top-color: var(--dan); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.working { display: grid; place-items: center; gap: 16px; padding: 90px 20px; text-align: center; color: var(--mo-2); }
.empty { text-align: center; color: var(--mo-3); padding: 30px 10px; font-size: 14px; }
.mycards .item { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; width: 100%; text-align: left; }
.mycards .item + .item { margin-top: 8px; }
.mycards .item .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--qing-soft); color: var(--qing); display: grid; place-items: center; flex: none; }
.mycards .item .ic svg { width: 22px; height: 22px; }
.mycards .item .t { font-weight: 600; font-size: 15px; }
.mycards .item .z { font-family: var(--serif); font-size: 13.5px; color: var(--mo-3); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.offline { position: absolute; top: 0; left: 0; right: 0; z-index: 60; background: #8A5A12; color: #fff; text-align: center; font-size: 12.5px; padding: calc(4px + env(safe-area-inset-top)) 8px 4px; }
.aimode { font-size: 11px; color: var(--mo-4); text-align: center; margin-top: 18px; }
.echo-play { display: flex; align-items: center; gap: 12px; background: var(--dan-soft); border: 1px solid var(--dan-tint); border-radius: 16px; padding: 12px 14px; margin-top: 12px; }
.echo-play button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--dan); color: #fff; display: grid; place-items: center; flex: none; }
.echo-play button svg { width: 18px; height: 18px; }

/* 重要状态横幅在滚动时吸顶 */
.yp .body > .banner, .yp .body > .callbar { position: sticky; top: 0; z-index: 4; box-shadow: 0 6px 16px rgba(246,241,231,.9); }

/* ---------- 吉祥物融入 ---------- */
.hero-ym { margin: 10px 0 2px; }
.hero-ym .ym { height: 92px; width: auto; }
.meet { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: end; gap: 0; margin: 18px 4px 6px; }
.meet .side { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.meet .side b { color: var(--ink); font-size: 14px; }
.meet .side .ym { height: 116px; width: auto; }
.meet .mid { height: 116px; display: flex; align-items: center; justify-content: center; }
.meet .mid i { width: 48px; height: 0; border-top: 3px dotted var(--ink-4); animation: meetline 1.2s linear infinite; }
.meet .mid i.on { border-top: 3px solid var(--mint); animation: none; }
@keyframes meetline { 50% { opacity: .35; } }
.timer { text-align: center; margin-top: 10px; }
.timer b { display: block; font-family: var(--display); font-size: 44px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.timer span { font-size: 13px; color: var(--ink-3); }
.pbar { height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; margin: 12px 30px 4px; }
.pbar i { display: block; height: 100%; border-radius: 3px; background: var(--grad); transition: width .5s linear; }
.avatar-ym { position: relative; width: 52px; height: 52px; border-radius: 16px; background: var(--mint-soft); display: grid; place-items: center; flex: none; }
.avatar-ym.p { background: var(--purple-soft); }
.avatar-ym .ym { height: 40px; width: auto; }
.avatar-ym .ok { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--r-green); border: 2px solid var(--card); display: grid; place-items: center; }
.avatar-ym .ok svg { width: 10px; height: 10px; color: #fff; }
.waiting .ym { height: 96px; width: auto; margin-bottom: 14px; }
.waiting .pairw { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 14px; }
.waiting .pairw .ym { margin: 0; }
.thanks .ym { height: 132px; width: auto; margin: 0 auto; }
.incard .bell .ym { height: 30px; width: auto; }
.login-ym .ym { height: 80px; width: auto; }

/* ======================================================================
   v3 对话式求助。按钮类型：主操作实心在底部；场景选择两张同等大卡；追问是选项胶囊；
   结束（Solved/结案）在右上角轻按钮；放弃（Cancel）粉底红字；通话控制是圆形开关。
   ====================================================================== */
.ibtn.end { color: var(--ink); font-weight: 600; }
.ibtn.end svg { color: var(--mint-deep); }
.ibtn.warn { background: #FFE9E7; color: #E5302A; border-color: #FFD2CD; font-weight: 600; }
.ibtn.warn svg { color: #E5302A; }

/* 对话首页 */
.chatv .hello { padding-top: 4px; }
.examples { display: flex; flex-direction: column; gap: 8px; }
.examples .ex { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 11px 13px; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.examples .ex:active { background: var(--bg-2); }
.chatv .chat { padding-top: 6px; }

/* 输入条：参照截图，麦克风和相机在输入框里，发送在右侧 */
.composer.v3 { display: flex; gap: 8px; align-items: flex-end; }
.composer.v3 .cbox { flex: 1; display: flex; align-items: flex-end; gap: 2px; background: var(--card); border: 1.5px solid var(--line-2); border-radius: 26px; padding: 3px 5px 3px 16px; min-height: 50px; }
.composer.v3 .cbox:focus-within { border-color: var(--ink-2); }
.composer.v3 .field { border: 0; background: transparent; padding: 12px 0; border-radius: 0; resize: none; min-height: 44px; max-height: 120px; font-size: 16px; line-height: 1.35; flex: 1; min-width: 0; outline: none; overflow: hidden; }
.composer.v3 .cic { width: 40px; height: 42px; border: 0; background: none; color: var(--ink-2); display: grid; place-items: center; flex: none; cursor: pointer; border-radius: 50%; }
.composer.v3 .cic svg { width: 22px; height: 22px; }
.composer.v3 .send { width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.composer.v3 .send.mic { background: var(--card); color: var(--ink); border: 1.5px solid var(--line-2); }
.composer.v3 .send.mic svg { width: 23px; height: 23px; }
.composer.v3 .send svg { width: 21px; height: 21px; }
.recbar { display: flex; align-items: center; gap: 10px; background: #FFF1F0; border: 1.5px solid #FFD2CD; border-radius: 26px; padding: 4px 4px 4px 16px; min-height: 52px; color: var(--ink-2); font-size: 14px; }
.recbar .dot { width: 10px; height: 10px; border-radius: 50%; background: #E5302A; animation: blink 1s infinite; flex: none; }
.recbar b { font-variant-numeric: tabular-nums; color: #E5302A; }
.recbar .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recbar .send.stop { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #E5302A; color: #fff; display: grid; place-items: center; flex: none; }
.recbar .send.stop svg { width: 18px; height: 18px; }
.att { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 7px 8px 7px 7px; margin-bottom: 8px; font-size: 14px; }
.att img, .att .vt, .att .vo { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; background: var(--bg-2); display: grid; place-items: center; position: relative; overflow: hidden; }
.att .vt img { width: 100%; height: 100%; object-fit: cover; }
.att .vt i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.att .vt i svg, .att .vo svg { width: 20px; height: 20px; }
.att small { display: block; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.att .x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--bg-2); display: grid; place-items: center; }
.att .x svg { width: 15px; height: 15px; }

/* 自己的消息：深色气泡（参照截图） */
.bubble.inb { background: #1D1F1E; color: #fff; border-radius: 22px; border-bottom-right-radius: 6px; padding: 12px 15px; font-size: 16px; }
.bubble.inb .inimg, .bubble .inimg { display: block; max-width: 100%; max-height: 260px; border-radius: 14px; margin: 2px 0 8px; }
.bubble.inb > div + div { margin-top: 2px; }
.bubble.inb.ans { background: #3A3A3C; font-size: 14.5px; padding: 9px 13px; border-radius: 16px; border-bottom-right-radius: 6px; }
.invid { position: relative; border-radius: 14px; overflow: hidden; background: #000; min-width: 180px; min-height: 110px; margin: 2px 0 8px; }
.invid img { display: block; width: 100%; max-height: 240px; object-fit: cover; opacity: .9; }
.invid i { position: absolute; inset: 0; display: grid; place-items: center; }
.invid i svg { width: 34px; height: 34px; color: #fff; background: rgba(0,0,0,.35); border-radius: 50%; padding: 7px; }
.invid span { position: absolute; left: 10px; bottom: 8px; font-size: 12.5px; color: #fff; }
.invoice { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.8); margin-bottom: 4px; }
.invoice .ico { width: 18px; height: 18px; }
.thinking { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px dashed var(--line-2); border-radius: 16px; padding: 10px 14px; font-size: 14px; color: var(--ink-3); }
.thinking .ico { width: 17px; height: 17px; color: var(--mint-deep); }

/* AI 卡片：虚线框，信息层级参照截图 */
.aicard { align-self: stretch; background: var(--card); border: 1.5px dashed #C9C9CE; border-radius: 22px; padding: 16px 16px 15px; }
.aicard .lbl { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); }
.aicard .lbl .ico { width: 17px; height: 17px; }
.aicard h3 { font-family: var(--display); font-size: 21px; line-height: 1.25; letter-spacing: -.01em; margin: 9px 0 12px; font-weight: 700; }
.aicard dl.kv { display: grid; grid-template-columns: 92px 1fr; gap: 9px 12px; margin: 0; font-size: 15px; }
.aicard dl.kv dt { color: var(--ink-3); }
.aicard dl.kv dd { margin: 0; color: var(--ink); font-weight: 500; }
.aicard .bil { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; font-size: 14px; color: var(--ink-2); }
.aicard .bil .ico { width: 17px; height: 17px; }
.aicard .steps { margin-top: 4px; }
.aicard .conf { margin-top: 12px; background: var(--bg); border-radius: 14px; padding: 12px; }
.aicard.red { border-color: #FF8A80; background: #FFF6F5; }
.aicard.red h3 { color: #C4251C; }
.aicard.gray { border-color: var(--line-2); }
.aicard .can { margin-top: 10px; font-size: 14.5px; }
.chat .aicard + .msg, .chat .msg + .aicard { margin-top: 2px; }
.chat > .aicard:not(:last-child):not(.cur) { opacity: .62; }
.chat > .aicard:not(:last-child):not(.cur) .kv, .chat > .aicard:not(:last-child):not(.cur) .bil { display: none; }
.chat > .aicard:not(:last-child):not(.cur) h3 { margin-bottom: 0; font-size: 17px; }
.biq { background: var(--bg); border-radius: 14px; padding: 12px 13px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.biq .p { font-family: var(--display); font-size: 17.5px; font-weight: 600; line-height: 1.5; }
.biq .s { font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.btn.ghost.mint { border-color: var(--mint-tint); color: var(--mint-ink); }

/* 快速问答 */
.ask { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 13px; }
.ask .aq { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--ink); line-height: 1.4; }
.ask .aq .ico { width: 18px; height: 18px; color: var(--mint-deep); flex: none; margin-top: 1px; }
.aopts { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.aopt { text-align: left; border: 1.5px solid var(--mint-tint); background: var(--mint-soft); color: var(--mint-ink); border-radius: 14px; padding: 11px 14px; font-size: 15px; font-weight: 600; }
.aopt:active { background: var(--mint-tint); }
.aopt.skip { align-self: flex-start; background: none; border: 1.5px dashed var(--line-2); color: var(--ink-3); font-weight: 500; padding: 8px 14px; }

/* 场景选择：两张同等大卡 */
.chooser { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 13px; }
.chooser .ct { font-size: 15px; font-weight: 700; }
.scene { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--card); border: 1.5px solid var(--line-2); border-radius: 18px; padding: 13px 12px 13px 13px; margin-top: 10px; }
.scene:active { transform: scale(.99); background: var(--bg); }
.scene .si { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.scene .si svg { width: 23px; height: 23px; }
.scene.live .si { background: var(--mint-soft); color: var(--mint-deep); }
.scene.relay .si { background: var(--purple-soft); color: var(--purple-deep); }
.scene .st { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); }
.scene .sug { display: inline-block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .02em; background: var(--mint-deep); color: #fff; border-radius: 999px; padding: 2px 8px; margin-bottom: 4px; }
.scene .ss { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.scene .go { width: 18px; height: 18px; color: var(--ink-4); flex: none; }
.chooser .cn { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }

/* 等待页 */
.scenechip { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; border-radius: 999px; padding: 6px 12px; margin: 4px 0 2px; }
.scenechip svg { width: 16px; height: 16px; }
.scenechip.live { background: var(--mint-soft); color: var(--mint-ink); }
.scenechip.relay { background: var(--purple-soft); color: var(--purple-ink); }
.howto { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin-top: 14px; }
.howto .hw { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; }
.howto .hw .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; background: #FFD84D; color: #5A4500; }
.howto .hw:nth-child(3) .n { background: var(--mint-deep); color: #fff; }
.howto .hw b { display: block; font-size: 15px; }
.howto .hw span:not(.n) { display: block; font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }

/* 双语气泡：主行是对方的语言，自己的语言小字灰色 */
.bubble.bi { padding: 10px 13px; border-radius: 20px; font-size: 16px; line-height: 1.45; cursor: pointer; -webkit-user-select: none; user-select: none; white-space: normal; }
.bubble.bi .p { white-space: pre-wrap; }
.bubble.bi .s { font-size: 13px; line-height: 1.4; color: var(--ink-3); margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,.07); white-space: pre-wrap; }
.bubble.bi.me { background: #1D1F1E; color: #fff; border-bottom-right-radius: 6px; }
.bubble.bi.me .s { color: rgba(255,255,255,.6); border-top-color: rgba(255,255,255,.16); }
.bubble.bi.them { background: var(--card); border: 1px solid var(--mint-tint); border-bottom-left-radius: 6px; }
.bubble.bi.staff { border: 1.5px solid var(--mint-deep); background: var(--mint-soft); }
.bubble.bi .p .inimg { margin: 0; }
.msg .from .forstaff { color: var(--mint-ink); font-weight: 600; }
.msg .from .forstaff .ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; }
.msg.sysc { align-self: center; max-width: 94%; }
.statuscard { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 8px 13px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); }
.statuscard .ico { width: 16px; height: 16px; flex: none; }
.statuscard.live { background: #FFF3D6; color: #7A4B00; }
.statuscard.done { background: #E6F4EC; color: #1F6B43; }
.joined { font-size: 12.5px; color: var(--ink-3); text-align: center; }
.dblhint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); margin: 2px auto 0; }
.dblhint .ico { width: 15px; height: 15px; }

/* 场景二：顶部任务条 */
.hchip { display: inline-flex; align-items: center; gap: 9px; border: 0; background: none; padding: 0; text-align: left; }
.hchip b { display: block; font-size: 15.5px; }
.hchip small { display: block; font-size: 11.5px; color: var(--mint-ink); }
.taskbar { margin: 0 14px 2px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px 9px; box-shadow: var(--shadow); }
.taskbar .tb { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; }
.taskbar .tb + .tb { margin-top: 5px; }
.taskbar .k { width: 34px; flex: none; color: var(--ink-3); font-weight: 600; }
.taskbar .v { color: var(--ink); }
.taskbar .tbs { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.pill { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 10px; }
.pill.wait { background: var(--bg-2); color: var(--ink-3); }
.pill.on { background: var(--mint-soft); color: var(--mint-ink); }
.pill.live { background: #FFF3D6; color: #7A4B00; }
.pill.done { background: #E6F4EC; color: #1F6B43; }
.backcall { margin: 0 14px 4px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; background: var(--mint-soft); color: var(--mint-ink); font-weight: 600; padding: 10px; font-size: 14.5px; }
.backcall svg { width: 18px; height: 18px; }

/* 场景一：通话页 */
.livetag { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.livetag i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-4); }
.livetag.on i { background: var(--r-green); animation: blink 1.4s infinite; }
.livetag b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-3); }
.callv { display: flex; flex-direction: column; }
.cwho { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 18px; }
.cwho h2 { font-family: var(--display); font-size: 26px; margin: 12px 0 2px; letter-spacing: -.01em; }
.cwho .meta { font-size: 14px; color: var(--ink-3); }
.cwho .row.center { justify-content: center; gap: 12px; }
.cav { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); position: relative; }
.cav.ring::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--mint); animation: ring 1.6s ease-out infinite; }
@keyframes ring { from { transform: scale(.92); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
.cav.sm { width: 60px; height: 60px; background: var(--purple-soft); }
.cstate { margin-top: 12px; font-size: 15px; color: var(--ink-2); min-height: 21px; }
.privacy { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13.5px; border-radius: 999px; padding: 7px 13px; background: var(--bg-2); color: var(--ink-2); }
.privacy .ico { width: 16px; height: 16px; }
.privacy.spk { background: #FFF3D6; color: #7A4B00; }
.vidslot { width: 100%; max-width: 330px; aspect-ratio: 3 / 4; max-height: 42vh; border-radius: 18px; background: #111; display: grid; place-items: center; color: rgba(255,255,255,.55); font-size: 13px; }
.vidslot.mini { position: absolute; right: 6px; top: 8px; width: 88px; aspect-ratio: 3 / 4; max-height: none; border: 2px solid #fff; z-index: 2; }
.vidfloat { position: fixed; z-index: 25; object-fit: cover; border-radius: 18px; background: #000; pointer-events: none; display: none; }
.pushed { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.callfoot { padding-top: 6px; }
.ctrls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ctrls.sm { grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
.ctrl { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; }
.ctrl span { width: 64px; height: 64px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); box-shadow: var(--shadow); }
.ctrls.sm .ctrl span { width: 52px; height: 52px; }
.ctrl span svg { width: 26px; height: 26px; }
.ctrls.sm .ctrl span svg { width: 22px; height: 22px; }
.ctrl em { font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.ctrl.on span { background: var(--ink); color: #fff; border-color: var(--ink); }
.ctrl.end span { background: var(--r-red); color: #fff; border-color: var(--r-red); }
.ctrl.go span { background: var(--r-green); color: #fff; border-color: var(--r-green); }
.endrow { display: flex; justify-content: center; margin-top: 12px; }
.endrow.two { gap: 56px; }
.btnstack { display: flex; flex-direction: column; gap: 8px; }
.callfoot .link.center { display: block; margin: 8px auto 0; }

/* 全屏出示 */
.ov.full .btns { margin-top: 12px; }

/* 青年端：场景标签、对话里的提前打通卡、通话卡 */
.scn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 10px 4px 8px; }
.scn svg { width: 15px; height: 15px; }
.scn.live { background: var(--ink); color: #fff; }
.scn.relay { background: var(--card); color: var(--ink); border: 1.5px solid var(--ink-2); }
.incard .todo { margin-top: 10px; font-size: 14px; color: var(--dan-ink); background: var(--dan-soft); border-radius: 12px; padding: 8px 11px; display: flex; gap: 7px; }
.incard .todo svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.answered { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.answered span { background: var(--bg); border-radius: 8px; padding: 4px 8px; font-size: 12.5px; color: var(--ink-2); }
.brief dl.kv.zh { display: grid; grid-template-columns: 64px 1fr; gap: 6px 10px; margin: 10px 0 0; font-size: 14px; }
.brief dl.kv.zh dt { color: var(--ink-3); }
.brief dl.kv.zh dd { margin: 0; }
.brief .orig video { display: block; margin-top: 8px; width: 100%; max-height: 220px; border-radius: 10px; background: #000; }
.brief .orig .link { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.cacard { width: 100%; background: var(--mint-soft); border: 1px solid var(--mint-tint); border-radius: 18px; padding: 13px 14px; }
.cacard.on { background: #FFF8E6; border-color: #F4D58A; }
.cacard .k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--mint-ink); }
.cacard.on .k { color: #7A4B00; }
.cacard .k .ico { width: 15px; height: 15px; }
.cacard .k b { font-variant-numeric: tabular-nums; margin-left: 4px; }
.cacard .t { font-size: 17px; font-weight: 700; margin-top: 6px; }
.cacard .op { font-size: 13.5px; color: var(--ink-2); background: var(--card); border-radius: 10px; padding: 8px 10px; margin-top: 8px; line-height: 1.5; }
.qlist.sm li { font-size: 13.5px; }
.callcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 13px 14px 14px; margin-top: 10px; box-shadow: var(--shadow); position: relative; }
.callcard .vidslot { max-width: none; margin-top: 10px; aspect-ratio: 4 / 3; }
.callcard .spk { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13.5px; background: var(--bg); border-radius: 12px; padding: 9px 11px; color: var(--ink-2); line-height: 1.45; }
.callcard .spk .ico { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.callcard .spk.on { background: #FFF3D6; color: #6B4200; border: 1px solid #F4D58A; }
.pv { margin-top: 8px; }
.pv .from { font-size: 11.5px; color: var(--ink-3); margin: 0 4px 3px; }
.bubble.bi.hm { background: var(--mint-soft); color: var(--ink); border: 1px solid var(--mint-tint); border-bottom-right-radius: 6px; }
.bubble.bi.hm .s { color: var(--ink-3); border-top-color: rgba(0,0,0,.07); }
.bubble.bi.hf { background: var(--purple-deep); color: #fff; border: 0; border-bottom-left-radius: 6px; }
.bubble.bi.hf .s { color: rgba(255,255,255,.72); border-top-color: rgba(255,255,255,.22); }

.confrow { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; text-align: left; font-size: 13.5px; color: var(--ink-2); }
.confrow .ico { width: 17px; height: 17px; color: var(--r-green); flex: none; }
.confrow b { color: var(--mint-ink); white-space: nowrap; font-size: 13px; }

/* 全屏出示：顶部留出状态栏和灵动岛的高度（截图里的手机框没有安全区） */
.ov.full { padding-top: max(54px, calc(18px + env(safe-area-inset-top))); }

/* 全屏出示：主操作 Done 占满，次要的保存按钮按内容宽度 */
.ov.full .btns > .ghost { flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }

/* ===== v4 来华人员端（菜单、历史对话、个人页、能做与不能做） ===== */
/* 顶栏：左侧菜单或返回，右侧按页面而定 */
.top .tl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top .ttl { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibtn.menu { position: relative; }
.ibtn.menu svg { width: 19px; height: 19px; }
.ndot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--r-red); border: 2px solid var(--paper); }
.avbtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); display: grid; place-items: center; font-size: 19px; font-weight: 700; color: var(--ink-2); padding: 0; }
.avbtn svg { width: 19px; height: 19px; }
/* 另一个对话还在进行 */
.ongo { display: flex; align-items: center; gap: 9px; margin: 0 14px 4px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--mint-tint); background: var(--mint-soft); color: var(--mint-ink); font-size: 13.5px; text-align: left; }
.ongo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-deep); flex: none; animation: blink 1.6s infinite; }
.ongo .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ongo .ico { width: 16px; height: 16px; flex: none; }
.ongo.fresh { background: #FFF3D6; border-color: #FFE2A1; color: #7A4B00; }
.ongo.fresh .dot { background: #FF9500; }

/* AI 卡片：越界提醒、能做与不能做 */
.aicard .heads { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; background: #FFF6DB; border-radius: 12px; padding: 9px 11px; font-size: 13.5px; color: #7A4B00; line-height: 1.4; }
.aicard .heads .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.scope { margin-top: 12px; background: var(--bg); border-radius: 14px; padding: 11px 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.scope .sl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.scope .sr { display: flex; gap: 8px; align-items: flex-start; }
.scope .sr + .sr { margin-top: 5px; }
.scope .sr .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.scope .sr.can .ico { color: var(--mint-deep); }
.scope .sr.wont .ico { color: #E5302A; }
.scope .sr b { color: var(--ink); }
.scope .sb { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--ink-2); }
.scope .sv, .aicard .sv { margin-top: 7px; font-size: 12.5px; color: var(--ink-3); }
.aicard .did { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 14.5px; color: var(--ink-2); }
.aicard .did .btn { flex: none; }

/* 回访引用、结束记录 */
.pref { align-self: stretch; display: flex; align-items: center; gap: 11px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.pref .ico { width: 20px; height: 20px; color: var(--purple-deep); flex: none; }
.pref small { display: block; font-size: 12px; color: var(--ink-3); }
.pref b { display: block; font-size: 14.5px; line-height: 1.35; margin: 1px 0; }
.endline { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #1F6B43; background: #E6F4EC; border-radius: 999px; padding: 7px 13px; }
.endline .ico { width: 15px; height: 15px; }
.chat.past > .aicard { opacity: 1; }
.chat.past > .aicard .kv { display: grid; }

/* 个人页 */
.mepage .mehead { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
.mepage .mehead label { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.av { width: 40px; height: 40px; border-radius: 50%; background: var(--purple-soft); color: var(--purple-ink); display: grid; place-items: center; font-size: 21px; font-weight: 700; flex: none; }
.av svg { width: 20px; height: 20px; }
.av.lg { width: 60px; height: 60px; font-size: 32px; }
.mrow { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; font-size: 15px; color: var(--ink); }
.mrow + .mrow { margin-top: 8px; }
.mrow .ico { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.mrow b { color: var(--ink-3); font-weight: 600; }
.scopefull .sr { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.scopefull .sr .ico { width: 18px; height: 18px; }
.scopefull .sr.can .ico { color: var(--mint-deep); }
.scopefull .sr.wont { margin-top: 10px; }
.scopefull .sr.wont .ico { color: #E5302A; }
.scopefull ul { margin: 6px 0 0; padding-left: 26px; font-size: 14.5px; color: var(--ink-2); }
.scopefull ul li + li { margin-top: 3px; }
.scopefull p { margin: 10px 0 0; }
.warnlink { display: block; color: #E5302A; padding: 10px 0 0; text-decoration: none; font-weight: 600; }

/* 菜单（左侧抽屉） */
.drawerwrap { position: absolute; inset: 0; z-index: 40; background: rgba(29,29,31,.38); animation: fade .15s ease; }
.drawer { position: absolute; left: 0; top: 0; bottom: 0; width: 86%; max-width: 360px; background: var(--xuan); display: flex; flex-direction: column; padding: max(54px, calc(14px + env(safe-area-inset-top))) 14px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 0 40px rgba(0,0,0,.18); animation: drawin .22s ease; }
@keyframes drawin { from { transform: translateX(-100%); } to { transform: none; } }
.dprof { display: flex; align-items: center; gap: 12px; border: 0; background: none; text-align: left; padding: 4px 2px 12px; }
.dprof b { display: block; font-size: 16px; }
.dprof small { display: block; font-size: 12.5px; color: var(--ink-3); }
.dprof .ico { width: 17px; height: 17px; color: var(--ink-4); }
.drawer .newchat { min-height: 46px; }
.dlist { flex: 1; overflow-y: auto; margin: 4px -4px 8px; padding: 0 4px; }
.dlist .label { margin: 16px 2px 6px; }
.drow { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; border: 0; background: none; border-radius: 14px; padding: 8px 8px; position: relative; }
.drow.cur { background: var(--bg-2); }
.drow b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow small { display: block; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow .grow { min-width: 0; }
.drow .di { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--bg-2); color: var(--ink-3); }
.drow .di svg { width: 17px; height: 17px; }
.drow .di.live, .drow .di.on, .drow .di.wait { background: var(--mint-soft); color: var(--mint-deep); }
.drow .di.done { background: #E6F4EC; color: #1F6B43; }
.drow .di.ai { background: var(--purple-soft); color: var(--purple-deep); }
.drow .ndot { position: static; flex: none; border: 0; }
.dfoot { border-top: 1px solid var(--line); padding-top: 10px; }
.dfoot .mrow { padding: 10px 12px; font-size: 14px; }
.dfoot .mrow + .mrow { margin-top: 6px; }
.foot .link.center { display: block; margin: 6px auto 0; }
/* 画了灵动岛的手机框（单屏截图、宣发页、易拉宝、宣传片）：顶栏让出状态栏，和真机一样不被遮住 */
.scr > .yp > .top, .y-scr > .yp > .top { padding-top: 46px; }
/* ===== v4 来华人员端 end ===== */

/* ===== v4 有朋青年端（来单列表、多会话） ===== */
/* 值班页：分区标题和提示 */
.hsec { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 2px 4px; }
.hsec b { font-size: 15px; font-weight: 700; color: var(--ink); }
.hnote { font-size: 13px; color: var(--ink-3); margin: 0 2px 2px; }
.hnote.mt12 { margin-top: 14px; }
.hempty { background: var(--card); border: 1px dashed var(--line-2); border-radius: 16px; padding: 14px; margin-top: 10px; font-size: 13.5px; color: var(--ink-3); text-align: center; }
/* 来单卡：标签一行、简报、要做什么、边界、底部“不接 / 接单” */
.ocard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 13px 14px 12px; margin-top: 10px; box-shadow: var(--shadow); transition: opacity .3s; }
.ocard.red { border-color: #FFB4AE; box-shadow: inset 0 0 0 1px #FFB4AE, var(--shadow); }
.ocard.gone { opacity: .55; filter: grayscale(1); box-shadow: none; }
.otags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.otag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); background: var(--bg); border-radius: 999px; padding: 4px 9px; }
.otag svg { width: 14px; height: 14px; flex: none; }
.otag.wait { color: var(--ink-3); }
.otag.wait b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.oback { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--mint-ink); background: var(--mint-soft); border: 1px solid var(--mint-tint); border-radius: 999px; padding: 3px 10px 3px 8px; }
.oback svg { width: 14px; height: 14px; }
.ocard .bt { font-size: 15.5px; line-height: 1.55; margin-top: 10px; color: var(--ink); }
.ocard .todo { margin-top: 10px; font-size: 14px; color: var(--dan-ink); background: var(--dan-soft); border-radius: 12px; padding: 8px 11px; display: flex; gap: 7px; }
.ocard .todo svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.bound { display: flex; gap: 7px; align-items: flex-start; margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.bound svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.bound b { font-weight: 600; color: var(--ink-2); margin-right: 6px; }
.bound.edge { background: #FFF6DB; border: 1px solid #F4D58A; color: #7A4B00; border-radius: 12px; padding: 8px 10px; }
.bound.edge svg { color: #B86E00; }
.ofoot { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 9px; }
.onote { font-size: 12px; color: var(--ink-3); }
.obtns { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.oskip { border: 0; background: none; color: var(--ink-3); font-size: 15px; padding: 12px 16px; border-radius: 14px; flex: none; }
.oskip:active { background: var(--bg); }
.obtns .btn { flex: 1; min-height: 46px; }
.ogone { margin-top: 12px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--bg); border-radius: 12px; padding: 10px; }
/* 进行中：每行场景、对方、状态；需求一句；最后一条消息和未读数 */
.srow { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 11px 13px 10px; margin-top: 8px; color: var(--ink); font: inherit; }
.srow:active { background: var(--bg); }
.srow .l1 { display: flex; align-items: center; gap: 8px; }
.srow .nm { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .need { font-size: 14.5px; margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .l3 { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.srow .lm { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .l3 > svg { width: 16px; height: 16px; color: var(--ink-4); flex: none; }
.ub { min-width: 20px; height: 20px; border-radius: 10px; background: var(--r-red); color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; padding: 0 6px; flex: none; }
.sst { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 9px; flex: none; }
.sst.reply { background: var(--mint-soft); color: var(--mint-ink); }
.sst.wait { background: var(--bg); color: var(--ink-3); }
.sst.ca { background: #FFF3D6; color: #7A4B00; }
.sst.call, .sst.done { background: #E6F4EC; color: #1F6B43; }
.sst.call i { width: 7px; height: 7px; border-radius: 50%; background: var(--r-green); animation: blink 1.2s infinite; }
/* 标签栏“值班”上的来单数 */
.tabbar .tbi { position: relative; display: inline-flex; }
.tbn { position: absolute; top: -5px; right: -12px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--r-red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
/* 处理台：顶栏“‹ 值班”、会话标签、通话条、新来单横幅 */
.hback { padding-left: 8px; }
.hback .nb { min-width: 18px; height: 18px; border-radius: 9px; background: var(--r-red); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; padding: 0 5px; margin-left: 2px; }
.stabs { display: flex; gap: 6px; padding: 3px 14px 8px; margin-top: -3px; overflow-x: auto; scrollbar-width: none; flex: none; }
.stabs::-webkit-scrollbar { display: none; }
.stab { position: relative; display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 6px 11px 6px 9px; font-size: 13.5px; }
.stab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stab svg { width: 15px; height: 15px; flex: none; }
.stab.on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.stab .ud, .stab .lv { position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bg); }
.stab .ud { background: var(--r-red); }
.stab .lv { background: var(--r-green); animation: blink 1.2s infinite; }
.hcall { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 14px 8px; border: 0; border-radius: 12px; background: var(--r-green); color: #fff; font-size: 14px; font-weight: 600; padding: 8px 12px; flex: none; }
.hcall i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
.hcall b { font-variant-numeric: tabular-nums; font-weight: 600; }
.hbanner { position: absolute; left: 10px; right: 10px; top: calc(8px + env(safe-area-inset-top)); z-index: 40; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 16px; background: var(--ink); color: #fff; padding: 13px 14px; font-size: 15px; text-align: left; box-shadow: var(--shadow-lg); }
.hbanner > svg { width: 20px; height: 20px; flex: none; }
.hbanner > svg:first-child { color: var(--mint); }
.hbanner span { flex: 1; min-width: 0; }
/* 处理台简报：对方称呼、回访、边界；“婉拒越界”在越界单上标黄 */
.brief .vis { font-weight: 600; color: var(--ink); }
.bback { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--mint-ink); background: var(--mint-soft); border-radius: 10px; padding: 7px 10px; }
.bback .ico { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.quick .chip.warn { border-color: #F4D58A; background: #FFF6DB; color: #7A4B00; }
/* 结案：先选结果、确认结案，再起草解法卡 */
.closefor { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.closefor > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.closefor .scn, .srow .scn, .otags .scn { flex: none; white-space: nowrap; }
/* 上岗卡 */
.rules .rnote { margin: 6px 0 0; font-size: 13px; color: var(--mint-ink); }
/* ===== v4 有朋青年端 end ===== */