:root {
  --ink: #363C48;          /* 品牌深灰蓝 */
  --ink-2: #454C5A;
  --gold: #C9A45C;         /* 品牌金 */
  --gold-text: #F1D9A6;    /* 深色底上的金色字 */
  --gold-dark: #9C7A3C;    /* 浅色底上的金色字 / 连结 */
  --gold-bg: #F7F0E0;
  --gold-line: #E6D3A8;
  --bg: #F4F4F6;
  --card: #FFFFFF;
  --line: #E6E6EA;
  --text: #1C1C1E;
  --sub: #8A8A90;
  --green: #1F9D55;
  --red: #D93025;
  --blue-tick: #3B82C4;
  --radius: 14px;
  --font: "Nunito", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Noto Sans SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--text); background: var(--bg); font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--gold-dark); }
.hidden { display: none !important; }

/* ---------- 顶部 ---------- */
.topbar { height: 56px; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand b { color: var(--gold-text); font-size: 19px; font-weight: 700; letter-spacing: .3px; }
.topbar .spacer { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--ink-2); font-size: 13px; color: #E8E9EC; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; }
.icon-btn { background: none; border: 0; color: #C9CDD5; font-size: 20px; padding: 6px; border-radius: 10px; cursor: pointer; display: inline-flex; }
.icon-btn:hover { background: var(--ink-2); color: #fff; }
.sim-flag { font-size: 12px; background: #5B4A22; color: var(--gold-text); padding: 4px 10px; border-radius: 999px; text-decoration: none; }

/* ---------- 三栏 ---------- */
.app { display: grid; grid-template-columns: 330px minmax(0, 1fr) 290px; height: calc(100% - 56px); }
.pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; } /* min-width: 0：长的讯息预览不会把手机版撑宽 */
.list-pane { background: var(--card); border-right: 1px solid var(--line); }
.chat-pane { background: var(--bg); }
.info-pane { background: var(--card); border-left: 1px solid var(--line); overflow-y: auto; }

/* 对话列表 */
.tabs { display: flex; gap: 4px; padding: 12px 12px 8px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1 0 auto; border: 0; background: var(--bg); padding: 8px 7px; border-radius: 10px; font-size: 13.5px; color: var(--sub); cursor: pointer; white-space: nowrap; }
.tab.on { background: var(--ink); color: var(--gold-text); }
.tab .n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--gold); color: var(--ink); font-size: 11.5px; font-weight: 700; line-height: 18px; }
.search { margin: 0 12px 8px; position: relative; }
.search input { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px 0 34px; background: var(--bg); outline: none; }
.search input:focus { border-color: var(--gold); background: #fff; }
.search i { position: absolute; left: 11px; top: 10px; color: var(--sub); }
.conv-list { flex: 1; overflow-y: auto; }
.conv { display: flex; gap: 11px; padding: 11px 14px; border-bottom: 1px solid #F0F0F2; cursor: pointer; }
.conv:hover { background: #FAFAFB; }
.conv.on { background: var(--gold-bg); }
.avatar { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: #E9E3D3; color: var(--gold-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.conv .mid { flex: 1; min-width: 0; }
.conv .row1 { display: flex; justify-content: space-between; gap: 8px; }
.conv .name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .time { font-size: 12px; color: var(--sub); flex-shrink: 0; }
.conv .row2 { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
.conv .preview { font-size: 13.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.unread .preview { color: var(--text); }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tags { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.tag { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--bg); color: #5C606A; }
.tag.ad { background: #EAF2FB; color: #2F6497; }
.tag.wait { background: #FDECEA; color: #B3261E; }
.tag.who { background: var(--gold-bg); color: var(--gold-dark); }
.empty { padding: 40px 20px; text-align: center; color: var(--sub); font-size: 14px; line-height: 1.7; }

/* 聊天 */
.chat-head { height: 62px; background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.chat-head .who { flex: 1; min-width: 0; }
.chat-head .who b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .who span { font-size: 12.5px; color: var(--sub); }
.chat-head .icon-btn, .composer .icon-btn { color: var(--ink); }
.chat-head .icon-btn:hover, .composer .icon-btn:hover { background: var(--bg); color: var(--ink); }
.back-btn { display: none !important; }
.messages { flex: 1; overflow-y: auto; padding: 16px 18px 8px; }
.day { text-align: center; margin: 14px 0 10px; }
.day span { font-size: 12px; color: var(--sub); background: #E9E9EC; padding: 3px 12px; border-radius: 999px; }
.sys { text-align: center; font-size: 12.5px; color: var(--sub); margin: 8px 0; }
.msg { display: flex; margin: 4px 0; }
.msg.out { justify-content: flex-end; }
.bubble { max-width: min(560px, 78%); padding: 8px 12px 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; }
.msg.in .bubble { border-top-left-radius: 6px; }
.msg.out .bubble { background: var(--gold-bg); border-color: var(--gold-line); border-top-right-radius: 6px; }
.msg.out.failed .bubble { border-color: #F2B8B5; background: #FDF1F0; }
.bubble .text { white-space: pre-wrap; }
.bubble img.media { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; margin: 2px 0 4px; cursor: zoom-in; }
.bubble img.sticker { max-width: 140px; border: 0; }
.bubble audio { width: 260px; max-width: 100%; display: block; margin: 2px 0; }
.bubble video { max-width: 100%; max-height: 320px; border-radius: 10px; display: block; }
.doc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(0,0,0,.04); border-radius: 10px; text-decoration: none; color: var(--text); margin: 2px 0 4px; }
.doc i { font-size: 22px; color: var(--gold-dark); }
.meta { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.meta .auto { color: var(--gold-dark); background: #F1E4C4; border-radius: 6px; padding: 0 6px; }
.tick { font-size: 15px; }
.tick.read { color: var(--blue-tick); }
.err { color: var(--red); font-size: 12px; margin-top: 3px; }

.notice { margin: 0 12px 8px; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.notice.warn { background: #FFF6E0; color: #7A5A12; }
.notice.stop { background: #FDECEA; color: #8C1D18; }
.sim-reply { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #FFF6D9; border-top: 1px dashed var(--gold); }
.sim-tag { font-size: 12px; font-weight: 700; color: #7A5B12; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.sim-reply input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--gold-line); border-radius: 17px; background: #fff; font: inherit; font-size: 14px; }
.sim-reply input:focus { outline: none; border-color: var(--gold); }
.composer { background: var(--card); border-top: 1px solid var(--line); padding: 10px 12px; display: flex; align-items: flex-end; gap: 8px; }
.composer textarea { flex: 1; resize: none; overflow-y: hidden; border: 1px solid var(--line); border-radius: 20px; padding: 9px 14px; max-height: 140px; min-height: 40px; line-height: 1.45; outline: none; background: var(--bg); }
.composer textarea:focus { border-color: var(--gold); background: #fff; }
.send-btn { height: 40px; min-width: 40px; border-radius: 20px; border: 0; background: var(--ink); color: var(--gold-text); padding: 0 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.send-btn:disabled { opacity: .45; cursor: default; }
.attach-preview { margin: 0 12px 8px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 10px; align-items: center; }
.attach-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.attach-preview .fname { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--sub); }
.placeholder img { width: 72px; height: 72px; border-radius: 18px; opacity: .9; }

/* 顾客资料 */
.info { padding: 18px 16px; position: relative; }
.info-close { position: absolute; right: 8px; top: 8px; color: var(--sub) !important; display: none !important; }
@media (min-width: 1101px) { #infoBtn { display: none; } }
@media (max-width: 1100px) { .info-close { display: inline-flex !important; } }
.info .avatar { width: 64px; height: 64px; font-size: 22px; margin: 0 auto 10px; }
.info h3 { text-align: center; margin: 0; font-size: 17px; }
.info .phone { text-align: center; color: var(--sub); font-size: 13.5px; margin-top: 2px; }
.quick { display: flex; gap: 8px; justify-content: center; margin: 12px 0 6px; }
.quick a { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: var(--bg); color: var(--ink); }
.field { padding: 12px 0; border-top: 1px solid #F0F0F2; }
.field .lbl { font-size: 12px; color: var(--sub); margin-bottom: 4px; }
.field .val { font-size: 14px; }
.field select { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: #fff; }
.btn { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.btn:hover { border-color: var(--gold); }
.btn.primary { background: var(--ink); color: var(--gold-text); border-color: var(--ink); }
.btn.full { width: 100%; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 14px; z-index: 50; max-width: 90%; }
.toast.bad { background: var(--red); }

/* 登入页 */
.login-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--ink); }
.login-card { width: 100%; max-width: 360px; background: #fff; border-radius: 22px; padding: 32px 26px 26px; text-align: center; }
.login-card img { width: 76px; height: 76px; border-radius: 18px; }
.login-card h1 { margin: 12px 0 2px; font-size: 26px; color: var(--ink); }
.login-card p { margin: 0 0 22px; color: var(--sub); font-size: 14px; }
.login-card input { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; margin-bottom: 12px; background: var(--bg); outline: none; }
.login-card input:focus { border-color: var(--gold); background: #fff; }
.login-card button { width: 100%; height: 46px; border: 0; border-radius: 12px; background: var(--ink); color: var(--gold-text); font-size: 16px; font-weight: 700; cursor: pointer; }
.login-err { color: var(--red); font-size: 13.5px; margin: -4px 0 12px; }

.chip .dot.off { background: #9CA3AF; }

/* ---------- 设定页 / 改密码 ---------- */
body.page { height: auto; min-height: 100%; }
.settings { max-width: 820px; margin: 0 auto; padding: 18px 16px 60px; }
.settings h1 { font-size: 24px; margin: 8px 0 16px; color: var(--ink); }
.back-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--sub); font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin-bottom: 16px; }
.card h2 { font-size: 18px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.card h2 i { color: var(--gold); }
.hint { color: var(--sub); font-size: 13.5px; line-height: 1.6; margin: 4px 0 12px; }
.card .label { font-weight: 700; font-size: 14px; margin: 18px 0 8px; }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.option { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.option input { display: none; }
.option b { font-size: 14.5px; }
.option span { font-size: 12.5px; color: var(--sub); }
.option.on { border-color: var(--gold); background: var(--gold-bg); }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.inline input, .card input[type=time] { height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: #fff; }
.num { width: 80px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 16px 0 0; line-height: 1.5; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--ink); }
.days, .members { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.day-chip input { display: none; }
.day-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line); cursor: pointer; font-size: 14px; color: var(--sub); }
.day-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--gold-text); }
.card .btn.primary { margin-top: 16px; }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: var(--red); }

.flashes { position: sticky; top: 10px; z-index: 30; }
.flash { background: #E8F5EC; color: #1F6B3A; padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-size: 14px; line-height: 1.6; display: flex; gap: 10px; align-items: flex-start; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.flash span { flex: 1; }
.flash-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; opacity: .6; padding: 2px 4px; }
.flash-x:hover { opacity: 1; }
.flash.bad { background: #FDECEA; color: #8C1D18; }
.flash .pw { font-family: ui-monospace, Consolas, monospace; font-size: 16px; background: #fff; padding: 1px 8px; border-radius: 6px; letter-spacing: 1px; }

.team { border-top: 1px solid #F0F0F2; }
.member { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F0F0F2; }
.member.inactive { opacity: .55; }
.member .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.member .sub, .number .sub { font-size: 12.5px; color: var(--sub); }
.duty { display: flex; align-items: center; gap: 8px; }
.duty-text { font-size: 13px; color: var(--sub); width: 28px; }
.switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: #D1D5DB; border-radius: 13px; cursor: pointer; transition: .2s; }
.slider::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; }
.switch input:checked + .slider { background: var(--gold); }
.switch input:checked + .slider::after { transform: translateX(18px); }
.more { position: relative; }
.more summary { list-style: none; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--sub); font-size: 18px; display: flex; }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { background: var(--bg); }
.more .menu { position: absolute; right: 0; top: 36px; z-index: 10; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; width: 260px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.10); }
.menu .edit { display: flex; gap: 6px; flex-wrap: wrap; }
.menu .edit input { flex: 1; min-width: 100px; height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; }
.menu .edit select { height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 0 6px; background: #fff; }
.add-user { margin-top: 14px; }
.add-user summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.add-user summary::-webkit-details-marker { display: none; }
.add-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.add-form input, .add-form select { height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: #fff; flex: 1; min-width: 140px; }
.add-form .btn.primary { margin-top: 0; }
.number { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 12px; }
.number-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.label-input { font-weight: 700; font-size: 15px; height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; width: 200px; }
.day-chip.wide span { min-width: 64px; }
.number-foot { display: flex; justify-content: space-between; align-items: center; }
.reply-box { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0 4px; background: var(--bg); line-height: 1.6; resize: vertical; outline: none; }
.reply-box:focus, .kw:focus { border-color: var(--gold); background: #fff; }
.card code { background: var(--gold-bg); color: var(--gold-dark); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.rules { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.rule { border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.rule.new { border-style: dashed; }
.rule-head { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; font-size: 13.5px; }
.check.tight { margin: 0; }
.check.del { color: var(--red); margin-left: auto; }
.kw { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--bg); outline: none; }
.own-replies { margin: 4px 0 10px; }
.own-replies summary { cursor: pointer; font-size: 13px; color: var(--gold-dark); margin-bottom: 4px; }
.account-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.account-form input { height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--bg); }

/* ---------- 手机 ---------- */
@media (max-width: 1100px) {
  .app { grid-template-columns: 330px minmax(0, 1fr); /* 状态小按钮一行要 320px */ }
  .info-pane { display: none; }
  .app.show-info .info-pane { display: block; position: fixed; right: 0; top: 56px; bottom: 0; width: min(320px, 90%); z-index: 20; box-shadow: -8px 0 24px rgba(0,0,0,.12); }
}
@media (max-width: 760px) {
  .topbar { padding: 0 10px; }
  .chip.user-chip span.label { display: none; }
  .app { grid-template-columns: 1fr; }
  .app .chat-pane { display: none; }
  .app.in-chat .list-pane { display: none; }
  .app.in-chat .chat-pane { display: flex; }
  .back-btn { display: inline-flex !important; }
  .messages { padding: 12px 10px 6px; }
  .bubble { max-width: 86%; }
  .app.show-info .info-pane { width: 100%; }
}
.tpl-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--sub); margin: 6px 0 2px; }
.btn.small { padding: 4px 12px; font-size: 13px; border-radius: 8px; }
.price-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.price-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
.price-table th { text-align: left; font-weight: 700; color: var(--sub); padding: 8px 6px; background: var(--bg); position: sticky; top: 0; }
.price-table td { padding: 3px 4px; border-top: 1px solid #F0F0F2; }
.price-table input, .price-table select { width: 100%; height: 32px; border: 1px solid transparent; border-radius: 8px; padding: 0 6px; background: transparent; font-size: 13px; }
.price-table input:hover, .price-table select:hover { border-color: var(--line); }
.price-table input:focus { border-color: var(--gold); background: #fff; outline: none; }
.price-table .w-size { width: 80px; }
.price-table .w-num { width: 84px; text-align: right; }
.price-table .warn-input { color: #8A5A00; background: #FFF6E0; }
.price-table .cat-row td { background: var(--gold-bg); color: var(--gold-dark); font-weight: 700; padding: 6px 10px; }
.settings { max-width: 980px; }
.price-table select { width: 128px; }
.price-table td:nth-child(3) input { min-width: 210px; }
.price-table td:nth-child(6) input { min-width: 220px; }
.price-table td:last-child { width: 36px; text-align: center; }
.price-table td:last-child input { width: 16px; height: 16px; }

/* 快速回复 */
#chatBox { position: relative; }
.qr-pop { position: absolute; left: 12px; right: 12px; bottom: 66px; max-height: 340px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.14); z-index: 15; overflow: hidden; }
.qr-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-bottom: 1px solid #F0F0F2; }
.qr-head .sub { flex: 1; font-size: 12px; color: var(--sub); }
.qr-head .icon-btn { color: var(--sub) !important; }
#qrList { overflow-y: auto; }
.qr-item { padding: 8px 14px; cursor: pointer; border-bottom: 1px solid #F6F6F8; }
.qr-item.on, .qr-item:hover { background: var(--gold-bg); }
.qr-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.qr-name i { color: var(--gold-dark); }
.qr-body { font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-miss { font-size: 11px; font-weight: 400; background: #FFF6E0; color: #8A5A00; border-radius: 6px; padding: 0 6px; }
.attach-note { font-size: 12px; color: #8A5A00; white-space: normal; }

/* 管理快速回复 */
.settings h1 .count { font-size: 15px; color: var(--sub); font-weight: 400; }
.qr-edit { padding: 14px 16px; margin-bottom: 10px; }
.qr-edit.new { border-style: dashed; }
.qr-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 190px 90px; gap: 10px; align-items: start; }
.qr-edit.new .qr-row { grid-template-columns: 200px minmax(0, 1fr) 190px 90px; }
.qr-name-wrap { display: flex; align-items: center; gap: 2px; font-weight: 700; color: var(--gold-dark); }
.qr-name-input { font-weight: 700; }
.qr-row .reply-box { margin: 0; }
.qr-media { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.qr-media img { width: 100%; max-height: 110px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.qr-file { font-size: 12.5px; color: var(--sub); display: flex; flex-direction: column; gap: 4px; }
.qr-file input { font-size: 12px; max-width: 100%; }
.qr-actions { display: flex; flex-direction: column; gap: 6px; }
.doc-chip { display: inline-flex; gap: 4px; align-items: center; background: var(--bg); border-radius: 8px; padding: 4px 8px; }
@media (max-width: 760px) { .qr-row, .qr-edit.new .qr-row { grid-template-columns: 1fr; } }

/* 选单流程 */
.flow-menu { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: start; }
.flow-img { display: flex; flex-direction: column; gap: 6px; }
.flow-img img { width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.flow-noimg { border: 1.5px dashed var(--line); border-radius: 12px; padding: 22px 10px; text-align: center; color: var(--sub); font-size: 13px; }
.flow-noimg span { font-size: 11.5px; }
.flow-menu .reply-box { margin: 0; }
@media (max-width: 760px) { .flow-menu { grid-template-columns: 1fr; } }

/* 广告卡片 */
.ad-card { max-width: 420px; margin: 6px auto 14px; background: #fff; border: 1px solid #D6E4F5; border-radius: 14px; overflow: hidden; }
.ad-tag { font-size: 12px; color: #2F6497; background: #EAF2FB; padding: 6px 12px; display: flex; align-items: center; gap: 6px; }
.ad-body { display: flex; gap: 12px; padding: 10px 12px; align-items: flex-start; }
.ad-body img { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.ad-text { font-size: 13.5px; line-height: 1.5; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ad-text div { color: var(--sub); font-size: 12.5px; }
.ad-text a { font-size: 12.5px; text-decoration: none; }
.ad-thumb { display: block; width: 100%; max-height: 140px; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }

/* 按人看 */
.search.with-who { display: flex; gap: 8px; }
.search.with-who input { flex: 1; min-width: 0; }
.search select { height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; background: var(--bg); color: var(--text, #222); font: inherit; font-size: 13.5px; max-width: 42%; outline: none; cursor: pointer; }
.search select:focus { border-color: var(--gold); background: #fff; }

/* 快速回复分组 */
.qr-grps { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid #F0F0F2; flex-shrink: 0; }
.qr-grps:empty { display: none; }
.qr-grp { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; white-space: nowrap; cursor: pointer; color: var(--ink); }
.qr-grp.on { background: var(--slate, #363C48); border-color: var(--slate, #363C48); color: #fff; }
.qr-tag { font-size: 11px; font-weight: 400; background: #EEF0F3; color: #555; border-radius: 6px; padding: 0 6px; }
.qr-name-col { display: flex; flex-direction: column; gap: 6px; }
.qr-grp-input { font-size: 12.5px; height: 32px; }

/* 一次放好几个档案 */
.file-tray { margin: 0 12px 8px; padding: 8px 10px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.tray-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.tray-head span { flex: 1; min-width: 0; color: var(--sub); font-size: 12px; }
.tray-items { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.tray-item { position: relative; width: 84px; height: 84px; flex-shrink: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #F4F4F6; }
.tray-item img, .tray-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tray-item.busy { outline: 2.5px solid var(--gold); outline-offset: -2px; opacity: .75; }
.tray-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 26px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.tray-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 6px; gap: 4px; font-size: 10.5px; text-align: center; color: var(--ink); }
.tray-doc i { font-size: 26px; color: var(--gold-dark); }
.tray-doc span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.tray-size { position: absolute; left: 4px; bottom: 4px; font-size: 10px; background: rgba(0,0,0,.55); color: #fff; border-radius: 5px; padding: 0 4px; }
.tray-x { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; cursor: pointer; line-height: 22px; padding: 0; }
.tray-add { width: 84px; height: 84px; flex-shrink: 0; border: 1.5px dashed var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--sub); font-size: 24px; cursor: pointer; }
.tray-add:hover { border-color: var(--gold); color: var(--gold-dark); }
.drop-hint { position: absolute; inset: 8px; z-index: 30; border: 2.5px dashed var(--gold); border-radius: 16px; background: rgba(255, 250, 238, .93); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--gold-dark); pointer-events: none; text-align: center; padding: 20px; }
.drop-hint i { font-size: 28px; }
.qr-edit.drop-on { outline: 2.5px dashed var(--gold); }
.drop-note { font-size: 12px; color: var(--gold-dark); }

/* 可疑讯息 / 垃圾 */
.tag.spam { background: #FDECEC; color: #B42318; }
.notice.spam { background: #FDECEC; color: #7A1B12; border-color: #F6C9C5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.notice-btns { display: inline-flex; gap: 6px; margin-left: auto; }
.btn.spam-btn { background: #B42318; border-color: #B42318; color: #fff; }
.danger-text { color: #B42318 !important; }
.blocked-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #F0F0F2; flex-wrap: wrap; }
.blocked-row .hint { flex: 1; margin: 0; }

/* 筛选：谁的、状态 */
.filters { display: flex; gap: 8px; padding: 12px 12px 8px; }
.filters select { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; outline: none; cursor: pointer; }
.filters select:focus { border-color: var(--gold); background: #fff; }
.tag.st { background: #EEF0F3; color: #444; }
.tag.st-appt { background: #E3F4E8; color: #1E7A3C; }
.tag.st-in_crm { background: #E6F0FB; color: #2F6497; }
.tag.st-no_reply { background: #F3F3F5; color: #888; }

/* 三个语言切换 */
.lang-tabs { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; }
.lang-tabs span { font-size: 13px; color: var(--sub); }
.lang-tabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 14px; font-size: 13px; cursor: pointer; }
.lang-tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--gold-text, #fff); }
.card .lang-box.lang-zh, .card .lang-box.lang-ms { display: none; }
.card[data-show-lang="zh"] .lang-box { display: none; }
.card[data-show-lang="zh"] .lang-box.lang-zh { display: block; }
.card[data-show-lang="ms"] .lang-box { display: none; }
.card[data-show-lang="ms"] .lang-box.lang-ms { display: block; }

/* 顾客状态下拉（对话标题旁边） */
.lead-sel { height: 34px; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; font: inherit; font-size: 13px; background: #fff; color: var(--ink); max-width: 190px; cursor: pointer; }
.lead-sel.st-appt { background: #E3F4E8; border-color: #B9E2C6; color: #1E7A3C; font-weight: 700; }
.lead-sel.st-in_crm { background: #E6F0FB; border-color: #C5DBF3; color: #2F6497; }
.lead-sel.st-no_reply { color: #888; }
.sub-hint { font-size: 12px; color: var(--sub); margin: 2px 0 6px; }
.info-input { width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13.5px; background: #fff; }
.appt-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
/* 约到了表格 */
.modal-bg { position: fixed; inset: 0; background: rgba(20, 22, 28, .45); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal h3 { margin: 0 0 10px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.appt-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--sub); margin-bottom: 12px; align-items: center; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sub); margin-bottom: 10px; }
.fld input, .fld select, .fld textarea { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; }
.seg { display: flex; gap: 16px; margin: 4px 0 10px; font-size: 14px; }
.appt-table { font-size: 13px; margin: 6px 0 12px; }
.appt-table summary { cursor: pointer; color: var(--gold-dark); }
.appt-table table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.appt-table th, .appt-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #F0F0F2; }
.appt-table tr.sug td { background: var(--gold-bg); font-weight: 700; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* 设定页：sales 名单、状态名字 */
.sales-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 13.5px; }
.sales-table th { text-align: left; font-size: 12px; color: var(--sub); font-weight: 400; padding: 4px 6px; }
.sales-table td { padding: 3px 6px; border-top: 1px solid #F3F3F5; }
.sales-table td .kw { height: 32px; margin: 0; }
.sales-table tr.off td { opacity: .45; }
.sales-table .num-cell { white-space: nowrap; color: var(--sub); }
.sales-table .new-row td { background: #FAFAFB; }
.status-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 14px; margin: 8px 0 12px; }
.status-names label { display: flex; flex-direction: column; gap: 3px; }
.status-names .sub { font-size: 11.5px; color: var(--sub); }
.appt-row b + .sub-hint { margin-left: 6px; }

/* 报表 */
.report { max-width: 1180px; }
.report-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.report-filter .kw { width: auto; min-width: 150px; margin: 0; height: 38px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.tile.hl { border-color: #B9E2C6; background: #F2FAF4; }
.tile.warn { border-color: #F3D9A4; background: #FFF9EC; }
.t-lbl { font-size: 12.5px; color: var(--sub); }
.t-val { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.t-sub { font-size: 12px; color: var(--sub); }
.table-wrap { overflow-x: auto; }
table.rep { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rep th { text-align: left; font-weight: 600; font-size: 12px; color: var(--sub); padding: 6px 8px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
table.rep td { padding: 5px 8px; border-bottom: 1px solid #F1F1F4; }
table.rep tfoot td { font-weight: 700; border-top: 1.5px solid var(--line); }
table.rep tr.today td { background: var(--gold-bg); }
table.rep td.warn { color: #9A6A00; font-weight: 700; }
table.rep .p { color: var(--sub); font-size: 11.5px; }
table.rep .wd { color: var(--sub); font-size: 11.5px; }
table.rep .nowrap { white-space: nowrap; }
table.rep tr.team-first td { border-top: 1.5px solid var(--line); }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.report-grid .card { margin: 0 0 14px; }
@media (max-width: 860px) { .report-grid { grid-template-columns: 1fr; } }

/* 晚上开场图片、follow up 视频 */
.flow-img-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.flow-thumb { width: 140px; max-height: 140px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.num.time { width: 70px; }
.backup-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; font-size: 13.5px; }
.backup-list a { text-decoration: none; }

/* 立体按钮（来源、语言）：按下去的那个凹下去、变金色 */
.b3-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.b3 { font: inherit; font-size: 13.5px; padding: 6px 13px; border-radius: 10px; background: #fff; color: var(--ink); border: 1px solid #D5D6DA; box-shadow: 0 3px 0 #C3C5CB; cursor: pointer; transform: translateY(0); transition: transform .08s, box-shadow .08s, background .08s; }
.b3:hover { background: #FAFAFB; }
.b3:active { transform: translateY(2px); box-shadow: 0 1px 0 #C3C5CB; }
.b3.on { background: #FAEEDA; color: #633806; border-color: #C9A24B; box-shadow: 0 1px 0 #B08A35; transform: translateY(2px); font-weight: 700; }

/* 试用清单 */
.trial-flag { background: #E6F0FB !important; color: #2F6497 !important; margin-left: 6px; }
.trial-list { margin: 8px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.trial-list li label { font-size: 14.5px; cursor: pointer; }
.trial-list li.checked label b { text-decoration: line-through; color: var(--sub); }
.trial-how { font-size: 13.5px; margin: 3px 0 2px; }
.trial-expect { font-size: 12.5px; color: var(--sub); }
.report-row { border-top: 1px solid #F0F0F2; padding: 10px 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.report-row.done .report-body { color: var(--sub); text-decoration: line-through; }
.report-body { font-size: 14px; }

/* 2026-10-21：名字、电话旁边的复制按钮；以前月份的 lead（约到算 Return） */
.copy-btn { border: 0; background: transparent; color: var(--sub); cursor: pointer; padding: 2px 4px; margin-left: 4px; border-radius: 6px; font-size: 15px; vertical-align: middle; line-height: 1; }
.copy-btn:hover { background: var(--gold-bg); color: var(--gold-dark); }
.ret-tag { display: inline-block; margin: 4px 0 2px; padding: 1px 8px; border-radius: 999px; background: #EEF2FB; color: #3B5BA5; font-size: 12px; }
/* 来源四个按钮排一行（小一点） */
.b3-row.src { flex-wrap: nowrap; gap: 6px; }
.b3-row.src .b3 { font-size: 12.5px; padding: 5px 9px; flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; }
/* 上班表 / 请假日历（我的帐号、设定页） */
.cal { display: inline-block; vertical-align: top; margin: 6px 14px 6px 0; }
.cal-title { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 40px); gap: 3px; }
.cal-wd { text-align: center; font-size: 11.5px; color: var(--sub); }
.cal-d { height: 40px; border-radius: 8px; background: #F6F6F8; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12.5px; line-height: 1.1; }
.cal-d span { font-size: 10px; }
.cal-d.can { cursor: pointer; background: #fff; border: 1px solid var(--line); }
.cal-d.can:hover { border-color: var(--gold); }
.cal-d.past { opacity: .45; }
.cal-d.today { outline: 2px solid var(--gold); outline-offset: -2px; }
.cal-d.rest { background: #E4E5E9; color: #5F6270; }
.cal-d.leave { background: #FBE3E1; color: #A3322A; border-color: #F0B8B3; }
.cal-d.pending, .cal-d.cancel { background: #FFF3CD; color: #7A5B12; border-color: #EBCB6E; }
.sched-person { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.sched-rest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sched-req { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; margin: 6px 0; border-radius: 10px; background: #FFF8E1; }
.sched-btns { display: inline-flex; gap: 6px; }
.warn-text { color: #9A6B00; }
.pend-wrap { position: relative; }
.pend-badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #D9534F; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; }
@media (max-width: 520px) { .cal-grid { grid-template-columns: repeat(7, 36px); } .cal-d { height: 36px; } }
/* 约到了：可以打字搜寻的选人清单 */
.picker { margin-top: 4px; }
.pick-q { width: 100%; }
.pick-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; background: #fff; }
.pick-grp { position: sticky; top: 0; background: #F4F5F7; color: var(--sub); font-size: 11.5px; font-weight: 700; padding: 4px 10px; }
.pick-it { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 7px 10px; cursor: pointer; border-top: 1px solid #F1F1F3; font-size: 13.5px; }
.pick-it:hover { background: #FAFAFB; }
.pick-it.on { background: var(--gold-bg); box-shadow: inset 3px 0 0 var(--gold); }
.pick-sub { color: var(--sub); font-size: 12px; }
.pick-n { margin-left: auto; color: var(--ink); font-size: 12px; }
.pick-hint { color: var(--gold-dark); font-size: 12px; font-weight: 700; }
.pick-empty { padding: 10px; color: var(--sub); font-size: 13px; }
/* 设定页：外州地区 */
.region-box { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin: 8px 0; }
.region-box.off { opacity: .55; }
.region-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.region-head .kw { width: auto; min-width: 0; flex: 1 1 120px; }
.region-ppl { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; align-items: center; }
.region-p { display: inline-flex; align-items: center; gap: 4px; }
.region-p .kw { width: 120px; }
.region-p.off .kw { color: var(--sub); text-decoration: line-through; }
.region-new { width: 140px; }
/* 报表：自选日期、排序箭头 */
.range-pick { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.range-pick input[type=date] { width: auto; }
.sort-btn { border: 0; background: transparent; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; padding: 0; white-space: nowrap; }
.sort-btn .arr { color: var(--sub); font-size: 12px; }
.sort-btn.on .arr { color: var(--gold-dark); font-weight: 700; }
.cal-d.swap { background: #E3F4E8; color: #1F6B3A; border-color: #B5DEC2; }
.cal-d.rest.can { background: #E4E5E9; }
/* 状态下拉选「有结果」才跳出的小按钮 */
.st-chips { display: flex; gap: 3px; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; } /* 一行就好（Dickson），太窄就左右滑 */
.st-chips::-webkit-scrollbar { display: none; }
.st-chip { flex: none; white-space: nowrap; font: inherit; font-size: 11px; padding: 3px 5px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.chip-n { display: inline-block; min-width: 16px; margin-left: 2px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.st-chip:hover { border-color: var(--gold); }
.st-chip.on { background: var(--ink); border-color: var(--ink); color: var(--gold-text); }
/* 报表：一个日历按两下选日期 */
.range-pick { position: relative; }
.range-pick .btn.on { border-color: var(--gold); background: var(--gold-bg); }
.range-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: max-content; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 10px 12px; }
.rhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rhint { font-size: 12.5px; color: var(--sub); }
.rmons { display: flex; gap: 18px; }
.rmon-t { font-weight: 700; font-size: 13px; text-align: center; margin-bottom: 4px; }
.rgrid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }
.rwd { text-align: center; font-size: 11px; color: var(--sub); }
.rday { height: 32px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.rday:hover { background: #F2F2F4; }
.rday.today { box-shadow: inset 0 0 0 1.5px var(--gold); }
.rday.in { background: var(--gold-bg); border-radius: 0; }
.rday.end { background: var(--ink); color: var(--gold-text); font-weight: 700; }
@media (max-width: 560px) { .range-pop { left: 0; } .rmons { flex-direction: column; } .rgrid { grid-template-columns: repeat(7, 30px); } }
.range-pop .icon-btn { color: var(--ink); }
/* 报表在手机上：表格自己左右滑，不要把整页撑宽 */
.card { min-width: 0; }
/* 测试模式的两个标签：手机太窄就不显示（电脑照常有） */
@media (max-width: 480px) { .sim-flag { display: none; } .topbar { gap: 4px; padding: 0 8px; } }
/* 扫 QR 连线：设定页的卡、收件箱断线提醒 */
.qr-status { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-weight: 700; margin-bottom: 12px; }
.qr-status.ok { background: #E7F6EC; color: #1E7B3C; }
.qr-status.bad { background: #FDECEA; color: #B3261E; }
.qr-box { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.qr-box img { width: 240px; height: 240px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.qr-steps { margin: 0; padding-left: 20px; line-height: 1.9; max-width: 360px; }
.wa-down { margin: 10px 12px 0; padding: 8px 10px; border-radius: 10px; background: #FDECEA; color: #B3261E; font-size: 13px; font-weight: 700; }
.wa-down a { color: inherit; text-decoration: underline; }
/* 设定分类：左边一排类，右边只显示那一类（手机上变成最上面一排小按钮） */
.set-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 20px; align-items: start; }
.set-nav { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 4px; }
.set-nav button { display: flex; align-items: center; gap: 9px; text-align: left; font: inherit; font-size: 14px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
.set-nav button:hover { background: #ECECEF; }
.set-nav button.on { background: var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.08); font-weight: 700; }
.set-nav i { font-size: 18px; color: var(--sub); }
.set-nav button.on i { color: var(--gold); }
.set-main { min-width: 0; }
@media (max-width: 760px) {
  .set-body { grid-template-columns: 1fr; gap: 10px; }
  .set-nav { top: 56px; z-index: 5; flex-direction: row; overflow-x: auto; scrollbar-width: none; background: var(--bg); padding: 6px 0; }
  .set-nav button { flex: none; white-space: nowrap; padding: 7px 11px; font-size: 13px; }
}

/* ---------- AI 建议回复（输入框上面） ---------- */
.ai-box { margin: 0 12px 8px; padding: 8px 12px 10px; background: var(--gold-bg); border: 1px solid var(--gold-line); border-radius: 12px; font-size: 14px; }
.ai-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--gold-dark); margin-bottom: 4px; }
.ai-sub { font-weight: 400; color: var(--sub); margin-left: 4px; }
.ai-body { white-space: pre-wrap; line-height: 1.5; max-height: 132px; overflow-y: auto; overflow-wrap: anywhere; }
.ai-wait { color: var(--sub); }
.ai-err { color: var(--red); }
.ai-note { background: #FFF6E0; color: #7A5A12; border-radius: 8px; padding: 5px 9px; margin-bottom: 6px; font-size: 13px; }
.ai-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-fb textarea { width: 100%; margin-top: 8px; border: 1px solid var(--gold-line); border-radius: 8px; padding: 6px 9px; resize: vertical; background: #fff; }
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .ai-body { max-height: 96px; } .ai-btns .btn.small { padding: 4px 9px; } }
/* 设定页的 AI 卡片 */
.ai-form .wide, .ai-add .wide { width: 100%; max-width: 520px; }
.ai-add { margin-top: 8px; }
.ai-stats { margin: 4px 0 10px; line-height: 1.7; font-size: 14px; }
.ai-rule { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.ai-rule .reply-box { margin: 6px 0; }
.ai-rule-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ai-rule-row span { flex: 1; }
.ai-quote { background: var(--bg); border-radius: 8px; padding: 6px 9px; margin: 4px 0; font-size: 13px; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.ai-recent { margin-top: 12px; }
.ai-recent summary { cursor: pointer; color: var(--gold-dark); }
.ai-pair { padding: 8px 0; border-bottom: 1px solid var(--line); }

/* ---------- tele 回复时间（activity.php） ---------- */
.report h1 .act-link { margin-left: 10px; vertical-align: middle; }
table.rep.act { width: auto; }
table.rep.act th.hh, table.rep.act td.hc { width: 22px; min-width: 22px; padding: 4px 0; text-align: center; font-size: 11px; }
table.rep.act th.hh.work { background: var(--gold-bg); color: var(--gold-dark); }
table.rep.act td.hc { border-left: 1px solid #F4F4F6; color: #5A4520; }
table.rep.act td.hc.work.l0 { background: #FBF8F1; }
table.rep.act .l1 { background: #F3E7CC; }
table.rep.act .l2 { background: #E6CC92; }
table.rep.act .l3 { background: #C9A45C; color: #fff; }
table.rep.act .l4 { background: #8C6A2E; color: #fff; }
table.rep.act td.warn a { color: #B3261E; }
table.rep.act td.act-day, table.rep.act th.act-day { position: sticky; left: 0; background: var(--card); z-index: 1; }
table.rep.act tr.today td.act-day { background: var(--gold-bg); }
table.rep.act tr.weekend td.act-day { color: var(--gold-dark); font-weight: 700; }
table.rep.act a { text-decoration: none; }
.act-legend .lg { display: inline-block; padding: 0 7px; margin: 0 2px; border-radius: 4px; font-size: 11px; color: #5A4520; }
.act-legend .lg.l1 { background: #F3E7CC; } .act-legend .lg.l2 { background: #E6CC92; }
.act-legend .lg.l3 { background: #C9A45C; color: #fff; } .act-legend .lg.l4 { background: #8C6A2E; color: #fff; }

/* ---------- 快速回复：语言按钮、一次发好几句 ---------- */
.qr-langs { display: inline-flex; flex-shrink: 0; gap: 2px; margin-right: 8px; padding-right: 8px; border-right: 1px solid var(--line); }
.qr-lang { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 2px 8px; font-size: 12px; cursor: pointer; color: var(--sub); white-space: nowrap; }
.qr-lang.on { background: var(--ink); color: var(--gold-text); border-color: var(--ink); }
.split-hint { margin: 0 12px 6px; font-size: 12px; color: var(--gold-dark); }
/* 快速回复管理页：语言、接着发、用量 */
.qr-lang-input, .qr-next-input { margin-top: 6px; width: 100%; }
.qr-use { margin-top: 6px; font-size: 12px; color: var(--sub); }
.qr-edit.qr-unused .qr-use { color: #B0B0B6; }

/* 看照片（点了在 DChat 里放大） */
.viewer { position: fixed; inset: 0; z-index: 300; background: rgba(12, 12, 16, .92); }
.viewer-stage { position: absolute; inset: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: calc(56px + env(safe-area-inset-top, 0px)) 16px 24px; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; cursor: zoom-in; }
.viewer.zoomed .viewer-stage { display: block; padding: calc(56px + env(safe-area-inset-top, 0px)) 0 0; }
.viewer.zoomed .viewer-stage img { display: block; max-width: none; max-height: none; margin: 0 auto; cursor: zoom-out; }
.viewer-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; color: #fff; }
.viewer-bar #viewerCount { margin-right: auto; font-size: 13px; opacity: .8; }
.viewer .icon-btn { color: #fff; background: rgba(255, 255, 255, .14); }
.viewer .icon-btn:hover { background: rgba(255, 255, 255, .26); }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.viewer-nav:hover { background: rgba(255, 255, 255, .26); }
.viewer-nav.prev { left: 12px; }
.viewer-nav.next { right: 12px; }
@media (max-width: 700px) { .viewer-nav { display: none; } }
/* 收回 / 编辑已发的讯息 */
.msg-more { border: 0; background: none; color: var(--sub); padding: 0 2px; margin-left: 2px; cursor: pointer; font-size: 15px; line-height: 1; opacity: .55; border-radius: 6px; }
.msg-more:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.msg-menu { position: fixed; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); padding: 6px; display: flex; flex-direction: column; min-width: 200px; }
.msg-menu button { border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.msg-menu button:hover { background: var(--bg); }
.msg-menu button.danger { color: var(--red); }
.msg.deleted .bubble { opacity: .75; }
.msg.deleted .bubble > .text, .msg.deleted .bubble > img, .msg.deleted .bubble > video, .msg.deleted .bubble > audio, .msg.deleted .bubble > .doc { opacity: .5; }
.msg.deleted .bubble > .text { text-decoration: line-through; }
.del-note { font-size: 12px; color: var(--red); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.meta .edited { font-style: italic; cursor: help; }
.edit-modal textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; margin-bottom: 8px; }
/* 录语音 */
#micBtn.on { color: var(--red); }
.rec-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 12px 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.rec-bar audio { height: 36px; max-width: 100%; flex: 1 1 200px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: rec-blink 1s infinite; }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.rec-hint { color: var(--sub); font-size: 13px; margin-right: auto; }
@keyframes rec-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }
/* 问题回报 */
.fb-page .reply-box { width: 100%; box-sizing: border-box; }
.fb-drop { margin: 10px 0; border: 2px dashed var(--line); border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #FCFCFD; }
.fb-drop.over { border-color: var(--gold); background: #FFFAEE; }
.fb-drop-hint { color: var(--sub); font-size: 13.5px; margin-right: auto; }
.fb-drop.has .fb-drop-hint { display: none; }
.fb-prevs { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-prev { position: relative; }
.fb-prev img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.fb-prev button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.fb-err { color: var(--red); font-size: 13px; min-height: 0; margin-bottom: 6px; }
.fb-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.fb-tab { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--ink); text-decoration: none; }
.fb-tab span { color: var(--sub); margin-left: 2px; }
.fb-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fb-tab.on span { color: #C9CDD5; }
.fb-item { border-top: 1px solid #F0F0F2; padding: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.fb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.fb-st { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #FDECEA; color: #B3261E; }
.fb-item.st-doing .fb-st { background: #FFF4D6; color: #8A6100; }
.fb-item.st-fixed .fb-st { background: #E6F4EA; color: #1E7B34; }
.fb-item.st-fixed .fb-body { color: var(--sub); }
.fb-conv { font-size: 13px; color: var(--gold-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.fb-body { font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.fb-shots { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-shots img { width: 140px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; }
.fb-reply { font-size: 13.5px; background: #F2F8F3; border-radius: 10px; padding: 8px 10px; color: #1E5A2C; }
.fb-admin { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fb-admin input[name=reply] { flex: 1 1 260px; min-width: 0; }