/* 有谱 · 视觉照效果图 v3：浅冷灰底、白卡片、淡蓝调阴影。主色来自配置（--primary，由页面头部注入）。
   字体用系统字体栈（不依赖外网字体：她在内地时 Google Fonts 可能打不开）。 */
:root {
  --primary: #0D2558;
  --bg: #F6F7F9;
  --card: #FFFFFF;
  --text: #141A26;
  --text-2: #5B6372;
  --text-3: #8A92A0;
  --line: #F0F2F5;
  --line-2: #E3E6EB;
  --blue: #2F5BD3; --blue-bg: #EDF2FD;
  --amber: #C98A12; --amber-bg: #FBF1DC; --amber-text: #9A6A0C;
  --green: #2E8A6B; --green-bg: #E4F2EC;
  --purple: #6E5BD0; --purple-bg: #F1EEFC;
  --avatar-bg: #E8EDF7;
  --shadow: 0 1px 2px rgba(13,37,88,.04), 0 8px 24px rgba(13,37,88,.06);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --num: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; }
.app { max-width: 430px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.app--bare { padding-bottom: 32px; }

/* 顶栏 */
.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 0 22px; min-height: 48px; }
.top--sub { padding-left: 8px; }
.top__brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 28px; height: 28px; border-radius: 8px; background: var(--primary); display: flex; align-items: center; justify-content: center; }
.top__name { font-size: 17px; font-weight: 600; letter-spacing: 1px; color: var(--primary); }
.top__title { font-size: 16px; font-weight: 600; }
.top__big { font-size: 22px; font-weight: 600; padding-left: 14px; }
.iconbtn { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--text-2); border-radius: 22px; }

/* 首页问候 */
.hello { padding: 22px 22px 0; }
.hello__h { font-size: 27px; font-weight: 600; line-height: 1.3; letter-spacing: .3px; margin: 0; }
.hello__s { font-size: 14px; color: var(--text-2); margin-top: 6px; }

.stack { padding: 20px 16px 0; display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 6px 0; }
.card--tight { border-radius: 18px; padding: 4px 0; }
.card__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 6px; }
.card__title { font-size: 13px; font-weight: 600; color: var(--primary); letter-spacing: .5px; }
.card__count { font-family: var(--num); font-size: 12px; color: var(--text-3); }
.sec { font-size: 13px; font-weight: 600; color: var(--primary); letter-spacing: .5px; padding: 0 6px 8px; }

/* 一行“事” */
.row { display: flex; gap: 12px; padding: 12px 18px; align-items: flex-start; }
.sep { height: 1px; background: var(--line); margin: 0 18px 0 38px; }
details.item > summary { list-style: none; cursor: pointer; }
details.item > summary::-webkit-details-marker { display: none; }
.dot { width: 8px; height: 8px; border-radius: 4px; margin-top: 8px; flex-shrink: 0; }
.dot--promise { background: var(--blue); } .dot--dated { background: var(--amber); } .dot--stale { background: var(--green); } .dot--opportunity { background: var(--purple); } .dot--general { background: var(--text-3); }
.row__main { flex: 1; min-width: 0; }
.row__title { font-size: 16px; font-weight: 500; line-height: 1.5; word-break: break-word; }
.row__reason { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-top: 2px; word-break: break-word; }
.when { font-size: 12px; color: var(--text-2); flex-shrink: 0; margin-top: 4px; }
.when--chip { color: var(--blue); background: var(--blue-bg); border-radius: 10px; padding: 3px 9px; margin-top: 2px; }
.when--late { color: #B3402A; background: #FBEAE6; border-radius: 10px; padding: 3px 9px; margin-top: 2px; }
.acts { display: flex; gap: 8px; padding: 0 18px 14px 38px; flex-wrap: wrap; }
.pill { white-space: nowrap; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pill--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.pill--quiet { color: var(--text-2); }
.pill--on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
form.inline { display: inline; margin: 0; }
.empty { text-align: center; color: var(--text-2); padding: 48px 28px; }
.empty b { display: block; font-size: 16px; color: var(--text); margin-bottom: 6px; font-weight: 600; }

/* 记录 */
.daylabel { font-size: 12px; color: var(--text-3); padding: 18px 22px 0; font-family: var(--num); }
.bubbles { padding: 8px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.bubble { align-self: flex-end; max-width: 300px; background: var(--primary); color: #fff; border-radius: 22px 22px 6px 22px; padding: 12px 16px; font-size: 15px; line-height: 1.65; word-break: break-word; }
.bubble__meta { align-self: flex-end; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin: -4px 4px 4px; }
.chip { font-size: 12px; color: var(--primary); background: var(--avatar-bg); border-radius: 10px; padding: 2px 9px; }
.chip--src { color: var(--text-2); background: #ECEEF2; }
.round { width: 40px; height: 40px; border-radius: 20px; border: 0; background: #F0F2F5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; cursor: pointer; }
.round--primary { width: 46px; height: 46px; border-radius: 23px; background: var(--primary); }

/* 联系人 */
.seg { display: flex; gap: 4px; background: #ECEEF2; border-radius: 14px; padding: 4px; margin: 14px 16px 0; }
.seg a { flex: 1; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; color: var(--text-2); }
.seg a.on { background: #fff; box-shadow: 0 1px 3px rgba(13,37,88,.10); font-weight: 600; color: var(--primary); }
.seg i { font-style: normal; font-family: var(--num); font-weight: 500; color: var(--text-3); }
.person { display: flex; gap: 12px; padding: 14px 16px; align-items: center; color: var(--text); }
.sep--person { margin-left: 68px; }
.avatar { width: 40px; height: 40px; border-radius: 20px; background: var(--avatar-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; flex-shrink: 0; }
.avatar--key { background: var(--amber-bg); color: var(--amber-text); }
.avatar--other { background: var(--green-bg); color: var(--green); }
.avatar--big { width: 72px; height: 72px; border-radius: 36px; font-size: 28px; }
.person__main { flex: 1; min-width: 0; }
.person__name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.person__name b { font-size: 16px; font-weight: 600; }
.person__name span { font-size: 12px; color: var(--text-3); }
.person__sub { font-size: 13px; color: var(--text-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; font-size: 12px; color: var(--text-3); }
.flag { width: 7px; height: 7px; border-radius: 4px; background: var(--blue); }

/* 一位客户 */
.hero { display: flex; flex-direction: column; align-items: center; padding: 4px 22px 0; text-align: center; }
.hero__name { font-size: 24px; font-weight: 600; margin-top: 12px; }
.hero__sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.hero__alias { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.hero__acts { display: flex; gap: 22px; margin-top: 16px; }
.circle { width: 48px; height: 48px; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(13,37,88,.05), 0 4px 12px rgba(13,37,88,.08); display: flex; align-items: center; justify-content: center; }
.catrow { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.focus { display: flex; gap: 12px; padding: 12px 16px; align-items: flex-start; }
.focus__t { flex: 1; font-size: 15px; line-height: 1.55; word-break: break-word; }
.focus .when { margin-top: 3px; }
.timeline { padding: 20px 22px 0; }
.tl { display: flex; gap: 14px; }
.tl__date { font-family: var(--num); font-size: 12px; color: var(--text-3); width: 46px; flex-shrink: 0; padding-top: 2px; white-space: nowrap; }
.tl__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.tl__dot { width: 7px; height: 7px; border-radius: 4px; background: #C5CBD4; margin: 6px 1px 0; }
.tl__dot--new { width: 9px; height: 9px; border-radius: 5px; border: 2px solid var(--primary); background: transparent; margin: 5px 0 0; }
.tl__line { width: 1px; flex: 1; background: #DDE1E7; margin-top: 3px; }
.tl__text { font-size: 14px; line-height: 1.6; padding-bottom: 14px; color: #3A4150; word-break: break-word; }
.say { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom)); height: 56px; padding: 0 22px 0 18px; border-radius: 28px; border: 0; background: var(--primary); display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 20px rgba(13,37,88,.28); font-size: 15px; color: #fff; z-index: 15; cursor: pointer; }
.app--person { padding-bottom: 120px; }

/* 我的 */
.list { padding: 0; }
.li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.li + .li { border-top: 1px solid var(--line); }
.li small { display: block; color: var(--text-2); font-size: 13px; margin-top: 2px; }
.li b { font-weight: 600; font-size: 15px; }

/* 登录 */
.login { padding: 64px 24px 0; }
.login__logo { width: 52px; height: 52px; border-radius: 15px; background: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.login h1 { font-size: 24px; text-align: center; margin: 0 0 8px; }
.login p { color: var(--text-2); text-align: center; margin: 0 0 24px; }
.field { width: 100%; height: 52px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; padding: 0 16px; font: inherit; font-size: 16px; color: var(--text); outline: 0; }
.field:focus { border-color: var(--primary); }
.btn { width: 100%; height: 52px; border-radius: 26px; border: 0; background: var(--primary); color: #fff; font-size: 16px; font-weight: 600; margin-top: 14px; cursor: pointer; }
.btn--ghost { background: transparent; color: var(--primary); font-weight: 500; }
.err { color: #B3402A; background: #FBEAE6; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.pkbox { margin-top: 18px; text-align: center; }
.pkbox[hidden] { display: none; }
[data-pk-error]:not(:empty) { margin-top: 10px; color: #B3402A; font-size: 14px; }

/* 提示条 */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(110px + env(safe-area-inset-bottom)); max-width: 398px; width: calc(100% - 32px); background: rgba(20,26,38,.94); color: #fff; border-radius: 16px; padding: 12px 14px 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; z-index: 40; box-shadow: 0 8px 24px rgba(13,37,88,.25); }
.toast { z-index: 80; }   /* 高于录音覆盖层（60），话筒提示不会被盖住 */
.toast form { margin: 0; }
.toast button { background: transparent; border: 0; color: #9DB8FF; font-size: 14px; font-weight: 600; padding: 6px 4px; cursor: pointer; }
.toast--js { transition: opacity .25s; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 对话主界面（1b-2）：打开即对话；顶栏 + 滚动的消息区 + 底部输入栏。照第四版概念图。 */
.app--chat { max-width: 640px; height: 100vh; height: 100dvh; min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; overflow: hidden; }
.chat__top { flex-shrink: 0; padding-top: 12px; }
.beta { font-size: 11px; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 8px; padding: 1px 7px; }
.chat { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.chat__day { text-align: center; font-size: 12px; color: var(--text-3); padding: 6px 0 2px; }
.msg { display: flex; flex-direction: column; gap: 10px; }
.msg--user { align-items: flex-end; }
.msg .bubble { max-width: 86%; }
.reply { align-self: flex-start; max-width: 90%; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); border-radius: 6px 20px 20px 20px; font-size: 15px; line-height: 1.65; padding: 12px 16px; color: var(--text); word-break: break-word; white-space: pre-wrap; }
.reply--soft { color: var(--text-3); }
.note { align-self: flex-start; font-size: 13px; line-height: 1.55; color: var(--text-2); background: #ECEEF2; border-radius: 14px; padding: 8px 12px; word-break: break-word; }
.note--tip { background: transparent; padding: 0 4px; color: var(--text-3); font-size: 12px; }
.saidline { display: flex; align-items: center; gap: 6px; padding-left: 4px; font-size: 13px; color: var(--text-2); }
.saidline--undone { color: var(--text-3); }
.rec { padding: 6px 0 0; overflow: hidden; }
.rec__head { padding: 10px 16px 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec__av { width: 30px; height: 30px; border-radius: 15px; background: var(--avatar-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; box-sizing: border-box; }
.rec__av--other { background: var(--green-bg); color: var(--green); }
.rec__av--new { background: transparent; border: 1.5px dashed #B8C0CC; color: var(--text-2); }
.rec__av--me { background: #ECEEF2; color: var(--text-2); }
.rec__av--me svg { width: 16px; height: 16px; }
.rec__name { font-size: 15px; font-weight: 600; }
.rec__label { font-size: 12px; color: var(--text-3); }
.rec__row { display: flex; gap: 10px; padding: 6px 16px 6px 56px; align-items: flex-start; }
.rec__t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.55; word-break: break-word; }
.rec__t--soft { color: #3A4150; }
.rec__when { font-family: var(--num); font-size: 12px; color: var(--text-2); flex-shrink: 0; margin-top: 2px; white-space: nowrap; }
.rec__when i { font-style: normal; font-family: var(--font); margin-right: 2px; color: var(--text-3); }
.rec__sep { height: 1px; background: var(--line); margin: 4px 16px; }
.rec__btns { display: flex; gap: 8px; }
.rec__btns--row { padding: 4px 16px 10px 56px; }
.rec__foot { display: flex; gap: 8px; padding: 8px 16px 12px; border-top: 1px solid var(--line); margin-top: 4px; }
.rec__warn { margin: 6px 16px 4px; font-size: 13px; line-height: 1.5; color: var(--text-2); background: #F0F2F5; border-radius: 10px; padding: 7px 10px; }
.rec__rej { margin: 6px 16px 4px; font-size: 13px; line-height: 1.5; color: var(--text-2); background: #F0F2F5; border-radius: 10px; padding: 7px 10px; }
.rec__rej .rec__rejh { font-weight: 600; }
.rec__rej div { padding-top: 2px; }
.rec--no { padding: 12px 0 8px; }
.rec__no { padding: 0 16px 4px; font-size: 14px; font-weight: 600; }
.rec__why { padding: 2px 16px; font-size: 13px; color: var(--text-2); }
.tag { font-size: 12px; border-radius: 8px; padding: 1px 7px; flex-shrink: 0; margin-top: 2px; white-space: nowrap; }
.tag--blue { color: var(--blue); background: var(--blue-bg); } .tag--amber { color: var(--amber-text); background: var(--amber-bg); } .tag--purple { color: var(--purple); background: var(--purple-bg); } .tag--gray { color: var(--text-2); background: #ECEEF2; }
.chip-btn { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }
.chip-btn--quiet { color: var(--text-2); }
.chip-btn--on { border-color: var(--primary); color: var(--primary); }
.chip-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.rec__btns--row .chip-btn { height: 30px; padding: 0 12px; font-size: 12px; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 4px; }
.alist { padding: 4px 0; }
.alist__row { display: flex; gap: 12px; padding: 11px 16px; align-items: flex-start; }
.alist__row .dot { margin-top: 8px; }
.alist__t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.55; word-break: break-word; }
.alist__when { font-size: 12px; color: var(--text-2); flex-shrink: 0; margin-top: 3px; white-space: nowrap; }
.alist__row--act { flex-wrap: wrap; }
.alist__btns { flex-basis: 100%; display: flex; gap: 8px; align-items: center; padding-left: 20px; margin-top: 2px; }
.alist__done { font-size: 13px; color: var(--text-2); }
.alist__sep { height: 1px; background: var(--line); margin: 0 16px 0 36px; }
.draft { background: var(--card); border: 1px dashed var(--line-2); border-radius: 16px; padding: 12px 0 0; }
.draft__h { font-size: 12px; color: var(--text-3); padding: 0 16px 4px; }
.draft__t { font-size: 15px; line-height: 1.6; padding: 0 16px; white-space: pre-wrap; word-break: break-word; }
.draft__n { font-size: 12px; color: var(--text-3); padding: 6px 16px 0; }
.composer { flex-shrink: 0; padding: 8px 16px 0; background: linear-gradient(to top, var(--bg) 80%, rgba(246,247,249,0)); }
.composer__in { display: flex; align-items: center; gap: 8px; min-height: 58px; border-radius: 29px; background: #fff; box-shadow: 0 1px 2px rgba(13,37,88,.04), 0 6px 18px rgba(13,37,88,.07); padding: 6px 6px 6px 8px; margin: 0; }
.composer__in input, .composer__in textarea { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); min-width: 0; padding: 0 4px; }
.composer__in textarea { resize: none; line-height: 1.45; padding: 9px 4px; max-height: 120px; display: block; }
.composer__note { text-align: center; font-size: 11px; color: #A3AAB6; padding: 8px 0 calc(14px + env(safe-area-inset-bottom)); }
#chatBtn .ico { display: flex; }
#chatBtn .ico--send { display: none; }
#chatBtn[data-mode="send"] .ico--send { display: flex; } #chatBtn[data-mode="send"] .ico--mic { display: none; }
.rec__row--flat { padding-left: 16px; }
.chat.is-busy { opacity: 1; }
.composer__in--locked { opacity: .7; }
.composer__in textarea:disabled::placeholder { color: var(--text-2); }
.rec__t--gone { text-decoration: line-through; color: var(--text-3); }

/* 按住说话（照第四版概念图「按住说话」） */
#chatBtn { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.hold { position: fixed; left: 0; right: 0; bottom: 0; height: 430px; z-index: 60; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: calc(46px + env(safe-area-inset-bottom)); box-sizing: border-box; background: linear-gradient(to bottom, rgba(246,247,249,0), #F6F7F9 38%); }
.hold__up { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 34px; color: #8A92A0; font-size: 12px; transition: transform .15s; }
.hold--cancel .hold__up { color: #B3402A; transform: translateY(-10px); }
.hold__wave { display: flex; align-items: center; gap: 4px; height: 44px; margin-bottom: 14px; }
.hold__wave i { display: block; width: 4px; height: 8px; border-radius: 2px; background: var(--primary); opacity: .4; transition: height .1s; }
.hold--cancel .hold__wave i { background: #B3402A; }
.hold__time { font-size: 14px; color: #5B6372; margin-bottom: 26px; }
.hold__t { font-family: var(--num); font-weight: 600; }
.hold__mic { width: 96px; height: 96px; border-radius: 48px; background: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 12px rgba(13,37,88,.08), 0 0 0 26px rgba(13,37,88,.04), 0 12px 28px rgba(13,37,88,.3); }
.hold--cancel .hold__mic { background: #B3402A; box-shadow: 0 0 0 12px rgba(179,64,42,.10), 0 0 0 26px rgba(179,64,42,.05), 0 12px 28px rgba(179,64,42,.3); }
.hold__hint { font-size: 13px; color: #5B6372; margin-top: 26px; }
.hold--cancel .hold__hint { color: #B3402A; }

/* 按住说话：流式的看得见的状态（按下变色 + 动画 / 识别中 / 定稿） */
/* 按下态用亮蓝（平时是深藏青 --primary；红色留给“上滑取消”），一眼看得出差别 */
#chatBtn.is-recording { background: #2F7BFF; transition: background .12s; }
.hold:not(.hold--cancel) .hold__mic { background: #2F7BFF; box-shadow: 0 0 0 12px rgba(47,123,255,.16), 0 0 0 26px rgba(47,123,255,.08), 0 12px 28px rgba(47,123,255,.35); }
.hold__mic { animation: holdPulse 1.3s ease-in-out infinite; }
@keyframes holdPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.hold--cancel .hold__mic { animation: none; }
/* 按住时输入栏被 .hold 盖住：中间结果同样显示在浮层里，末尾一个闪动的光标 = 还在识别 */
.hold__live { max-width: min(320px, calc(100vw - 48px)); max-height: 96px; overflow: hidden; margin-bottom: 20px; padding: 10px 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); font-size: 15px; line-height: 1.5; color: #3A4150; font-style: italic; word-break: break-word; }
.hold__live::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--primary); animation: vblink 1s steps(1) infinite; }
.hold--cancel .hold__live { opacity: .45; }
@keyframes vblink { 50% { opacity: 0; } }
#chatInput.is-live { color: #5B6372; font-style: italic; caret-color: var(--primary); }
.vpill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(128px + env(safe-area-inset-bottom)); z-index: 61; white-space: nowrap; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 8px 16px; border-radius: 999px; font-size: 13px; line-height: 1.3; background: #fff; color: #3A4150; box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.vpill--busy::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #D5DAE2; border-top-color: var(--primary); animation: vspin .8s linear infinite; flex-shrink: 0; }
.vpill--done { color: var(--primary); font-weight: 600; }
.vpill--done::before { content: ''; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); flex-shrink: 0; }
@keyframes vspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hold__mic, .vpill--busy::before, .hold__live::after { animation: none; } }

/* 截图 */
.bubble--shot { padding: 10px 14px; }
.shot__h { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.shot__note { margin-top: 6px; font-size: 14px; }
.shot__read { margin-top: 6px; font-size: 12px; opacity: .9; }
.shot__read summary { cursor: pointer; opacity: .85; }
.shot__txt { white-space: pre-wrap; margin-top: 4px; max-height: 160px; overflow: auto; }
.saidline--src { padding-top: 0; font-size: 12px; color: var(--text-3); margin-top: -4px; }
.shotsheet { margin: 0 16px 8px; background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 12px; }
.shotsheet__row { display: flex; gap: 12px; align-items: center; }
.shotsheet__img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: #ECEEF2; flex-shrink: 0; }
.shotsheet__col { flex: 1; min-width: 0; }
.shotsheet__t { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.shotsheet__note { width: 100%; box-sizing: border-box; height: 36px; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 10px; font: inherit; font-size: 15px; }
.shotsheet__btns { display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; }


/* 引用回复 */
.qbar { display: flex; align-items: center; gap: 8px; margin: 0 8px 6px; padding: 7px 8px 7px 12px; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(13,37,88,.04), 0 4px 12px rgba(13,37,88,.06); border-left: 3px solid var(--primary); font-size: 13px; color: var(--text-2); }
.qbar[hidden] { display: none; }
.qbar__l { color: var(--primary); font-weight: 600; flex-shrink: 0; }
.qbar__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbar__x { width: 28px; height: 28px; border: 0; border-radius: 14px; background: #F0F2F5; color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.bubble__quote { font-size: 12px; opacity: .8; border-left: 2px solid rgba(255,255,255,.5); padding-left: 8px; margin-bottom: 6px; word-break: break-word; }
.is-quoted { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 12px; }
.chat .rec, .chat .reply { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.chat .rec__row[data-q-kind]:hover, .chat .rec__head[data-q-kind]:hover { background: #F6F7F9; }

.rec--undone { opacity: .8; padding: 12px 16px; }
.rec__scope { font-size: 12px; color: var(--text-2); padding: 8px 16px; }
.vpill button { margin-left: 12px; background: transparent; border: 0; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; }
.rec__history { padding: 8px 16px; font-size: 12px; color: var(--text-2); }

.shot__open { display: block; margin-top: 8px; color: inherit; font-size: 12px; }
.shot__thumb { display: block; max-width: 100%; max-height: 240px; object-fit: contain; border-radius: 10px; margin: 6px 0; }