/* AI智能客服 · 自助搭建 —— 米白 + 果绿（对齐 AI云创未来 平台配色） */
/* 字号基准：正文14px；已关闭微信字体自动放大；模块之间留白更大，块与块更清晰 */
:root {
  --cream: #fff9ed;
  --cream-2: #fbf6ea;
  --lime: #9fbd8e;
  --lime-2: #e2ead6;
  --lime-btn-line: #cfdcbd;
  --lime-soft: #eef4e6;
  --lime-line: #d8e4c8;
  --ink: #183329;
  --olive: #356044;
  --line: #e3e9d5;
  --muted: #70766b;
  --white: #fff;
  --danger: #b3402f;
  --danger-bg: #fdeeea;
  --warn: #8b6415;
  --warn-bg: #fff5df;
  --gold: #8b6415;
  --gold-2: #a8781f;
  --cyan: #356044;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  /* 关键：阻止微信/手机浏览器自动放大字体 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0; padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body {
  background-image:
    radial-gradient(760px 420px at 92% -4%, rgba(159, 189, 142, .30), transparent 62%),
    radial-gradient(620px 420px at 4% 104%, rgba(159, 189, 142, .18), transparent 60%);
  background-attachment: fixed;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 14px; }

/* ---------- 顶栏 ---------- */
.brand { display: flex; align-items: center; gap: 8px; padding: 12px 0 4px; }
.brand .logo {
  border: 1px solid var(--lime-line); background: rgba(255, 255, 255, .74);
  border-radius: 999px; padding: 4px 11px;
  font-size: 11px; font-weight: 700; color: var(--olive);
}
.brand .tag { font-size: 10.5px; color: var(--muted); }

/* ---------- Hero ---------- */
.hero { padding: 10px 0 2px; }
.hero h1 { font-size: 20px; line-height: 1.32; margin: 0 0 6px; font-weight: 800; letter-spacing: -.2px; }
.hero h1 em { font-style: normal; color: var(--olive); }
.hero p.sub { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; line-height: 1.45; }

/* ---------- 卡片：块间距加大，模块更清晰 ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px;
  margin: 15px 0;
  box-shadow: 0 1px 3px rgba(24, 51, 41, .045);
}
.card:first-of-type { margin-top: 13px; }
.card h2 { font-size: 14px; margin: 0 0 3px; }
.card .hint { font-size: 11.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.45; }

/* ---------- 行业选择：大类名 + 右侧方格（同一行） ---------- */
.catblock {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 0 0 7px; padding-bottom: 7px;
  border-bottom: 1px dashed var(--line);
}
.catblock:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.cathead {
  flex: 0 0 44px; width: 44px;
  font-size: 10.5px; font-weight: 800; color: var(--olive);
  line-height: 1.18; padding-top: 8px; letter-spacing: -.2px;
  word-break: break-all;
}
.subgrid {
  flex: 1; min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.subbtn {
  height: 32px; padding: 0 3px;
  border-radius: 5px;
  background: var(--lime-2);
  border: 1px solid var(--lime-btn-line);
  color: #3b4632;
  font-size: 10.5px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.05;
  white-space: pre-line;
  transition: .14s;
  overflow: hidden;
  letter-spacing: -.2px;
}
.subbtn:active { transform: scale(.96); }
.subbtn:hover { filter: brightness(1.02); }
.subbtn.on {
  background: var(--ink); color: #fff; border-color: var(--ink);
  box-shadow: 0 2px 6px rgba(24, 51, 41, .2);
}

/* 「其它」输入行 */
.otherrow { display: flex; gap: 6px; flex: 1; min-width: 0; }
.otherrow input {
  flex: 1; min-width: 0; background: var(--white);
  border: 1px solid var(--lime-btn-line); color: var(--ink);
  border-radius: 6px; padding: 8px 10px; font-size: 12px;
  font-family: inherit; outline: none;
}
.otherrow input:focus { border-color: var(--lime); }
.otherrow button { flex: 0 0 auto; }

/* 胶囊 */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--line); background: var(--white);
  color: var(--olive); border-radius: 999px;
  padding: 5px 11px; font-size: 12px; cursor: pointer;
  transition: .16s; font-family: inherit; font-weight: 700;
}
.chip.on { background: var(--lime); border-color: var(--lime); color: var(--ink); }

/* ---------- 聊天 ---------- */
.chat {
  height: 275px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 11px;
  padding: 10px; background: var(--cream-2);
  margin: 10px 0 8px;
  display: flex; flex-direction: column; gap: 7px;
  scroll-behavior: smooth;
}
.msg { max-width: 88%; padding: 7px 10px; border-radius: 11px; font-size: 13px; line-height: 1.42; word-break: break-word; white-space: pre-wrap; }
.msg.ai { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: var(--lime); color: var(--ink); border-bottom-right-radius: 4px; font-weight: 500; }
.msg.typing { color: var(--muted); font-size: 12px; }
.msg.human {
  align-self: flex-start;
  background: linear-gradient(180deg, #fdf3d8, #fbefcf);
  border: 1px solid var(--line); border-bottom-left-radius: 4px;
}
.msg.human .tagline { display: block; font-size: 10px; font-weight: 800; color: var(--muted); margin-bottom: 2px; }

.inputbar { display: flex; gap: 6px; }
.inputbar input, .inputbar textarea {
  flex: 1; min-width: 0;
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; padding: 9px 11px;
  font-size: 13px; font-family: inherit; outline: none;
}
.inputbar input:focus, .inputbar textarea:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(159, 189, 142, .22); }
.inputbar button { flex: 0 0 auto; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block; border: 1px solid transparent; cursor: pointer;
  background: var(--lime); color: var(--ink);
  font-weight: 800; font-size: 13px;
  border-radius: 8px; padding: 8px 14px;
  font-family: inherit; transition: .15s; text-decoration: none;
}
.btn:hover { filter: brightness(.96); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.block { display: block; width: 100%; text-align: center; font-size: 14.5px; padding: 11px; }
.btn.ghost { background: var(--white); color: var(--olive); border: 1px solid var(--line); font-weight: 700; }
.btn.ghost:hover { background: var(--lime-soft); }
.btn.sm { padding: 6px 10px; font-size: 11.5px; }

/* ---------- 利益点 ---------- */
.benefits { display: grid; gap: 8px; }
/* 1/2/3/4 卖点清单 */
.nlist { display: grid; gap: 11px; }
.nitem { display: flex; gap: 9px; align-items: flex-start; }
.nitem .nnum {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--lime); color: #183329; font: 800 12px/20px system-ui;
  text-align: center; margin-top: 1px;
}
.nitem b { display: block; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.nitem span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.nfoot {
  margin-top: 12px; padding: 9px 11px; border-radius: 9px;
  background: var(--cream); border: 1px dashed #cfdcc0;
  font-size: 11.5px; color: var(--olive); line-height: 1.6;
}
.benefit { display: flex; gap: 8px; align-items: flex-start; }
.benefit .dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); margin-top: 7px; }
.benefit b { display: block; font-size: 13px; line-height: 1.35; }
.benefit span { font-size: 11.5px; color: var(--muted); line-height: 1.42; }
.group-label {
  font-size: 10px; letter-spacing: 1.4px; color: var(--olive);
  font-weight: 900; margin: 12px 0 5px;
}

/* ---------- 底部固定 CTA ---------- */
.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255, 249, 237, .74), rgba(255, 249, 237, .99) 42%);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.stickycta .inner { max-width: 720px; margin: 0 auto; display: flex; gap: 8px; align-items: center; }
.stickycta .note { flex: 1; font-size: 11px; color: var(--muted); line-height: 1.35; }
body.has-sticky { padding-bottom: 72px; }

/* ---------- 步骤条 ---------- */
.steps { display: flex; gap: 4px; margin: 5px 0 12px; }
.steps .s {
  flex: 1; text-align: center; font-size: 10.5px; color: var(--muted);
  padding: 7px 2px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--white); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.steps .s.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.steps .s.done { color: var(--olive); border-color: var(--lime); background: var(--lime-soft); }

/* 步骤指引 */
.stepguide { display: grid; gap: 7px; margin: 7px 0 0; }
.stepguide .g {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--lime-soft); border: 1px solid var(--lime-line);
  border-radius: 9px; padding: 9px 10px;
}
.stepguide .n {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.stepguide b { display: block; font-size: 12.5px; line-height: 1.35; }
.stepguide span { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* ---------- 表单 ---------- */
label.f { display: block; margin: 10px 0 0; font-size: 12.5px; font-weight: 700; }
label.f small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; margin-top: 2px; }
input.t, textarea.t, select.t {
  width: 100%; margin-top: 5px;
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; padding: 9px 11px;
  font-size: 13px; font-family: inherit; outline: none;
}
input.t:focus, textarea.t:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(159,189,142,.2); }
textarea.t { resize: vertical; min-height: 62px; }

.qrow { border: 1px solid var(--line); border-radius: 9px; padding: 9px; margin-top: 7px; background: var(--cream-2); }
.qrow .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.qrow .idx { font-size: 10.5px; color: var(--olive); font-weight: 800; }
.qrow .del { background: none; border: none; color: var(--danger); font-size: 11.5px; cursor: pointer; font-family: inherit; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }

/* ---------- 结果页 ---------- */
.result-qr { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; margin: 11px 0; }
.result-qr img { width: 165px; height: 165px; display: block; margin: 0 auto 7px; }
.result-qr p { color: var(--ink); margin: 0; font-weight: 700; font-size: 12.5px; }
.linkbox {
  display: flex; gap: 6px; align-items: center;
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; font-size: 11px;
  word-break: break-all; color: var(--olive);
}

.tiplist { margin: 7px 0 0; padding-left: 17px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.tiplist li { margin: 3px 0; }

.foot { text-align: center; color: #a8b0a0; font-size: 10.5px; padding: 18px 0 5px; }
.hidden { display: none !important; }
.ok { color: var(--olive); font-size: 11.5px; }
.warn { color: var(--warn); font-size: 11.5px; }
.hint { color: var(--muted); font-size: 11.5px; line-height: 1.45; }

/* ---------- 客户对话页 ---------- */
.chatpage { height: calc(100vh - 76px); display: flex; flex-direction: column; }
.chead { display: flex; align-items: center; gap: 9px; padding: 11px 0 9px; border-bottom: 1px solid var(--line); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  background: linear-gradient(140deg, var(--lime), #7fa06d);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #16233f; font-size: 14px;
}
.chead b { display: block; font-size: 14px; line-height: 1.25; }
.chead small { color: var(--olive); font-size: 10.5px; display: flex; align-items: center; gap: 4px; }
.chead small i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); display: inline-block; }
.chatwrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#chat { flex: 1; height: auto; margin: 9px 0 7px; }
.handoffbox {
  background: var(--warn-bg); border: 1px solid #f0dfb4;
  color: var(--warn); border-radius: 9px; padding: 8px 10px; font-size: 11.5px; margin: 6px 0 0; line-height: 1.45;
}

/* ---------- 人工客服弹层 ---------- */
.mask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(24, 51, 41, .5);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--cream);
  border-radius: 18px 18px 0 0;
  width: 100%; max-width: 720px;
  padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  text-align: center;
  animation: sheetup .22s ease-out;
}
@keyframes sheetup { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet header { display: flex; align-items: center; margin-bottom: 14px; }
.sheet header b { flex: 1; text-align: left; font-size: 15px; }
.sheet header button {
  background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px; font-family: inherit;
}
.sheet img { width: 200px; height: 200px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.sheet h3 { font-size: 14.5px; margin: 14px 0 4px; }
.sheet p { color: var(--muted); font-size: 12.5px; margin: 4px 0 0; line-height: 1.5; }
.sheet .ways { display: grid; gap: 8px; margin-top: 14px; text-align: left; }
.sheet .ways .w {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
}
.sheet .ways .w b { font-size: 13px; }
.sheet .ways .w span { color: var(--olive); font-size: 13.5px; font-weight: 700; margin-left: auto; }

/* 客户留资面板 */
.leadbox {
  background: #fff; border: 1px solid var(--line); border-radius: 13px;
  padding: 14px; margin: 10px 0 0; text-align: left;
}
.leadbox h3 { font-size: 13.5px; margin: 0 0 3px; }
.leadbox .sub { font-size: 11.5px; color: var(--muted); margin: 0 0 11px; line-height: 1.45; }
.leadbox label { display: block; font-size: 12px; font-weight: 700; margin: 9px 0 0; }
.leadbox input {
  width: 100%; margin-top: 5px; background: var(--cream); border: 1px solid var(--line);
  color: var(--ink); border-radius: 9px; padding: 9px 11px; font-size: 13px;
  font-family: inherit; outline: none;
}
.leadbox input:focus { border-color: var(--lime); }
.leadbox .qrbox { text-align: center; margin-top: 12px; }
.leadbox .qrbox img { width: 150px; height: 150px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.leadbox .qrbox p { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }

/* ---------- 搭建顾问：卡片 ---------- */
.carditem {
  align-self: stretch;
  background: #fff;
  border: 1px solid var(--lime-line);
  border-radius: 13px;
  padding: 13px;
  margin: 4px 0;
  font-size: 13px;
}
.carditem .c-head { font-size: 13.5px; font-weight: 800; margin-bottom: 4px; line-height: 1.4; }
.carditem .c-head.c-ok { color: var(--olive); }
.carditem .c-steptip {
  font-size: 12px; color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; margin: 4px 0 9px; line-height: 1.5;
}
.carditem .c-lab { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin: 11px 0 5px; }
.carditem .c-ccrow { display: flex; gap: 8px; margin-top: 8px; align-items: flex-start; }
.carditem .c-ccrow input { flex: 1; min-width: 0; }
.carditem .c-upbtn {
  flex: 0 0 auto; border: 1px dashed #b9c9a8; background: var(--cream); color: var(--olive);
  border-radius: 9px; padding: 10px 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.carditem .c-myqrprev {
  display: block; width: 110px; height: 110px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-top: 8px;
}
.carditem .c-myqrprev.hidden { display: none; }
/* 收款码预览：以前没限制尺寸，大图直接撑满聊天框 */
.carditem .c-payprev {
  display: block; width: 110px; height: 110px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; margin: 8px 0 0;
}
.carditem .c-payprev.hidden { display: none; }
.carditem .c-upbtn { margin-top: 6px; display: inline-block; }
.carditem .c-moretoggle {
  width: 100%; margin: 10px 0 2px; padding: 9px 10px; text-align: center;
  border: 1px dashed #cfdcc0; background: var(--cream); color: var(--olive);
  border-radius: 9px; font-size: 12.5px; font-weight: 700;
}
.carditem .c-more.hidden { display: none; }
.carditem input, .carditem textarea {
  width: 100%; background: var(--cream);
  border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 8px 10px; font-size: 13px;
  font-family: inherit; outline: none;
}
.carditem input:focus, .carditem textarea:focus { border-color: var(--lime); }
.carditem textarea { resize: vertical; min-height: 46px; margin-top: 5px; }
.carditem .fq, .carditem .fp {
  border: 1px solid var(--line); border-radius: 9px;
  padding: 9px; margin-top: 7px; background: var(--cream-2); position: relative;
}
.carditem .fq-del, .carditem .fp-del {
  position: absolute; right: 7px; top: 7px;
  background: none; border: none; color: var(--danger);
  font-size: 11px; cursor: pointer; font-family: inherit; padding: 2px 4px;
}
.carditem .fq-q { padding-right: 46px; }
.carditem .fp input { margin-top: 5px; }
.carditem .fp input:first-child { margin-top: 0; padding-right: 46px; }
.carditem .c-addfq, .carditem .c-addfp {
  width: 100%; margin-top: 8px; padding: 8px;
  background: var(--lime-soft); border: 1px dashed var(--lime-line);
  color: var(--olive); border-radius: 8px; font-size: 12px;
  cursor: pointer; font-family: inherit; font-weight: 700;
}