/* ============================================================
   萌善道 AI 助手「驼小萌」· 样式
   依赖 style.css 中的设计变量（配色 / 字体 / 圆角）
   ============================================================ */

/* ---------- 顶部信息条 ---------- */
.ai-legend{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
.ai-legend>div{background:var(--white);padding:26px 28px}
.ai-legend .al-k{
  display:block;font-size:12px;color:var(--ink-mist);letter-spacing:.22em;margin-bottom:12px;
}
.ai-legend b{
  display:block;font-family:var(--serif);font-size:23px;font-weight:600;
  color:var(--camel-deep);letter-spacing:.02em;margin-bottom:10px;
}
.ai-legend .al-d{display:block;font-size:13.2px;color:var(--ink-soft);line-height:1.85}
@media(max-width:860px){.ai-legend{grid-template-columns:1fr}}

/* ---------- 标签页 ---------- */
.ai-tabs{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;
  padding-bottom:22px;border-bottom:1px solid var(--line);
}
.ai-tab{
  padding:11px 22px;border:1px solid var(--line-strong);border-radius:100px;
  background:var(--white);color:var(--ink-soft);font-size:14.5px;letter-spacing:.04em;
  font-family:var(--sans);cursor:pointer;transition:.22s;
}
.ai-tab:hover{border-color:var(--camel);color:var(--camel-deep)}
.ai-tab.on{background:var(--ink);border-color:var(--ink);color:var(--camel-pale)}

.ai-pane{display:none}
.ai-pane.on{display:block;animation:paneIn .4s ease}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ai-head{margin-bottom:26px}
.ai-head h3{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.04em;margin-bottom:10px}
.ai-head p{font-size:14.5px;color:var(--ink-soft);line-height:1.9;max-width:720px}

/* ---------- 输入区 ---------- */
.ai-form{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ai-form input{
  flex:1 1 320px;padding:15px 20px;border:1px solid var(--line-strong);border-radius:10px;
  font-size:15px;font-family:var(--sans);color:var(--ink);background:var(--white);
}
.ai-form input:focus{outline:none;border-color:var(--camel)}
.ai-form button{flex:0 0 auto}

.ai-chips{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:32px}
.ai-chips-label{font-size:13px;color:var(--ink-mist);letter-spacing:.08em}
.qa-chip{
  padding:7px 15px;border:1px dashed var(--line-strong);border-radius:100px;background:transparent;
  color:var(--ink-soft);font-size:13.2px;font-family:var(--sans);cursor:pointer;transition:.2s;
}
.qa-chip:hover{border-color:var(--camel);color:var(--camel-deep);border-style:solid}
.qa-chip.sm{font-size:12.6px;padding:6px 13px}

/* 礼赠 / 文案 表单 */
.gift-form{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end}
.gf-field{display:flex;flex-direction:column;gap:8px}
.gf-field label{font-size:12.5px;color:var(--ink-mist);letter-spacing:.12em}
.gf-field select,.gf-field input{
  padding:13px 15px;border:1px solid var(--line-strong);border-radius:9px;
  font-size:14.5px;font-family:var(--sans);color:var(--ink);background:var(--white);
  width:100%;
}
.gf-field select:focus,.gf-field input:focus{outline:none;border-color:var(--camel)}
.gf-submit{grid-column:1/-1;justify-self:start;margin-top:4px}
@media(max-width:900px){.gift-form{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gift-form{grid-template-columns:1fr}}

/* ---------- 结果卡片 ---------- */
.ai-results{margin-top:6px}
.ai-answer{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--line-strong);
  border-radius:var(--radius);padding:24px 28px;margin-bottom:16px;
}
.ai-answer.primary{border-left-color:var(--camel);box-shadow:var(--shadow)}
.ai-answer-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-bottom:12px;flex-wrap:wrap;
}
.ai-cat{
  display:inline-block;padding:4px 12px;border-radius:100px;background:var(--sand);
  color:var(--camel-deep);font-size:12px;letter-spacing:.12em;
}
.ai-conf{font-size:12.2px;color:var(--ink-mist);letter-spacing:.08em}
.ai-answer h4{font-size:17.5px;font-weight:600;margin-bottom:11px;letter-spacing:.03em}
.ai-answer p{font-size:14.6px;color:var(--ink-soft);line-height:2}
.ai-answer mark{
  background:var(--camel-pale);color:var(--ink);padding:1px 3px;border-radius:3px;
}
.ai-src{
  margin-top:16px;padding-top:13px;border-top:1px dashed var(--line);
  font-size:12.6px;color:var(--ink-mist);letter-spacing:.02em;
}
.ai-tip{
  font-size:12.6px;color:var(--ink-mist);line-height:1.95;margin-top:22px;
  background:var(--sand);border-radius:9px;padding:13px 17px;
}
.ai-miss{border-left-color:var(--red)}
.ai-miss .ai-answer-head{color:var(--red);font-size:14.5px;letter-spacing:.06em;justify-content:flex-start}
.ai-suggest{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}

/* 礼赠顾问 */
.g-meta{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin-bottom:13px}
.g-price{font-family:var(--serif);font-size:17px;color:var(--camel-deep);letter-spacing:.02em}
.g-price-ask{color:var(--ink-mist);font-size:15px}
.g-spec{font-size:13px;color:var(--ink-mist)}
.g-points{margin:15px 0 0;padding-left:0;list-style:none}
.g-points li{
  font-size:13.6px;color:var(--ink-soft);line-height:1.95;padding-left:16px;position:relative;
}
.g-points li::before{
  content:'';position:absolute;left:0;top:.85em;width:6px;height:1px;background:var(--camel);
}

/* 文案工坊 */
.cp-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;margin-bottom:18px;overflow:hidden;
}
.cp-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 22px;background:var(--sand);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--ink-mist);letter-spacing:.14em;
}
.cp-copy{
  background:transparent;border:1px solid var(--line-strong);border-radius:100px;
  padding:5px 15px;font-size:12.5px;color:var(--ink-soft);font-family:var(--sans);
  cursor:pointer;transition:.2s;letter-spacing:.06em;
}
.cp-copy:hover{border-color:var(--camel);color:var(--camel-deep)}
.cp-text{padding:22px 26px}
.cp-text p{font-size:14.8px;color:var(--ink);line-height:2;margin:0}

/* ---------- 合规预检 ---------- */
.cm-input{
  width:100%;min-height:150px;padding:18px 20px;border:1px solid var(--line-strong);
  border-radius:10px;font-size:14.8px;font-family:var(--sans);color:var(--ink);
  line-height:2;background:var(--white);resize:vertical;margin-bottom:14px;
}
.cm-input:focus{outline:none;border-color:var(--camel)}
.cm-btn{margin-bottom:8px}

.cm-score{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:22px 28px;border-radius:var(--radius);margin-bottom:22px;color:#fff;
}
.cm-score .n{font-family:var(--serif);font-size:40px;font-weight:600;line-height:1}
.cm-score .l{font-size:13.5px;letter-spacing:.16em;opacity:.9}
.cm-score .c{font-size:12.8px;opacity:.85;margin-left:auto}
.cm-sgood{background:#5c7a4a}
.cm-swarn{background:#b8862f}
.cm-sbad{background:var(--red)}

.cm-marked{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;font-size:14.8px;line-height:2.15;color:var(--ink);margin-bottom:22px;
  white-space:pre-wrap;word-break:break-word;
}
.cm-marked mark.cm{border-radius:3px;padding:2px 3px;font-weight:500}
.cm-marked mark.cm-high{background:#f6d6d6;color:#8a1c1c;border-bottom:2px solid var(--red)}
.cm-marked mark.cm-mid{background:#f7ead0;color:#7a5410;border-bottom:2px solid #b8862f}
.cm-marked mark.cm-low{background:#e7e0d2;color:var(--ink-soft)}

.cm-list{list-style:none;padding:0;margin:0}
.cm-item{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--line-strong);
  border-radius:var(--radius);padding:18px 24px;margin-bottom:12px;
}
.cm-item.cm-high{border-left-color:var(--red)}
.cm-item.cm-mid{border-left-color:#b8862f}
.cm-word{font-size:16px;font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.cm-tag{
  font-size:11.5px;font-weight:400;letter-spacing:.14em;padding:3px 10px;border-radius:100px;
  background:var(--sand);color:var(--ink-soft);
}
.cm-item.cm-high .cm-tag{background:#f6d6d6;color:#8a1c1c}
.cm-item.cm-mid .cm-tag{background:#f7ead0;color:#7a5410}
.cm-why{font-size:13.6px;color:var(--ink-soft);line-height:1.9;margin-top:9px}
.cm-fix{
  font-size:13.6px;color:var(--camel-deep);line-height:1.9;margin-top:7px;
  padding-left:12px;border-left:2px solid var(--camel-pale);
}
.cm-clean{font-size:15px;color:#5c7a4a;padding:18px 22px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius)}
.cm-notes{margin-top:20px}
.cm-notes p{font-size:12.7px;color:var(--ink-mist);line-height:1.95;margin-bottom:7px}

/* ---------- 知识库 ---------- */
.kb-bar{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.kb-bar input{
  flex:1;padding:14px 19px;border:1px solid var(--line-strong);border-radius:10px;
  font-size:14.8px;font-family:var(--sans);color:var(--ink);background:var(--white);
}
.kb-bar input:focus{outline:none;border-color:var(--camel)}
.kb-count{font-size:13px;color:var(--ink-mist);letter-spacing:.1em;white-space:nowrap}

.kb-cats{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.kb-chip{
  padding:7px 16px;border:1px solid var(--line-strong);border-radius:100px;background:var(--white);
  color:var(--ink-soft);font-size:13.2px;font-family:var(--sans);cursor:pointer;transition:.2s;
}
.kb-chip:hover{border-color:var(--camel);color:var(--camel-deep)}
.kb-chip.on{background:var(--ink);border-color:var(--ink);color:var(--camel-pale)}

.kb-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:0 24px;margin-bottom:11px;
}
.kb-item[open]{padding-bottom:22px;box-shadow:var(--shadow)}
.kb-item summary{
  padding:19px 0;cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;
}
.kb-item summary::-webkit-details-marker{display:none}
.kb-item summary::after{
  content:'+';margin-left:auto;color:var(--camel);font-size:19px;line-height:1;
}
.kb-item[open] summary::after{content:'−'}
.kb-item summary:focus{outline:none}
.kb-item summary:hover .kb-title{color:var(--camel-deep)}
.kb-cat{
  flex:0 0 auto;font-size:11.6px;letter-spacing:.12em;padding:4px 11px;border-radius:100px;
  background:var(--sand);color:var(--camel-deep);
}
.kb-title{font-size:15.5px;font-weight:600;letter-spacing:.03em}
.kb-item p{font-size:14.3px;color:var(--ink-soft);line-height:2;margin:0}

/* ---------- 设计说明卡 ---------- */
.ai-note{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px;
}
.ai-note h4{
  font-size:17px;font-weight:600;letter-spacing:.03em;margin-bottom:13px;color:var(--ink);
}
.ai-note p{font-size:14.2px;color:var(--ink-soft);line-height:2.05}

@media(max-width:640px){
  .cm-score .c{margin-left:0;width:100%}
  .ai-answer{padding:20px 19px}
  .cm-marked{padding:18px 18px}
  .kb-item{padding:0 18px}
}