/* ============================================================
   小航客服 V2 视觉版覆写层  2026-10-15 / 表单排版增强 2026-10-16
   只做视觉/排版增强，不改 React 原 bundle；与 msx-kefu.css 解耦可整体回滚。
   目标：五大版块疏朗重排 + 记忆感欢迎区 + AI 页快捷问题/能力卡
         + 留言/商务/反馈三个表单子页专业留白分组排版。
   版本标记：MSX-XHUI-V2-FORMS3
   ============================================================ */

/* ---------- 0. 变量（沿用站点橙主色，新增记忆绿） ---------- */
#msx-kefu-root{
  --xh-orange:#E57026;
  --xh-orange-deep:#C35B18;
  --xh-ink:#1F2937;
  --xh-slate:#64748B;
  --xh-line:#EEF1F5;
  --xh-mem:#0E8E76;
  --xh-mem-bg:#E9F7F3;
  --xh-mem-line:#BEE7DD;
}

/* ---------- 1. 卡片与视图：留白、安全区 ---------- */
#msx-kefu-root .msx-card{
  border-radius:24px;
  box-shadow:0 28px 80px rgba(15,23,42,.28);
}
#msx-kefu-root .msx-view{
  padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));
}
@media (max-width:480px){
  #msx-kefu-root .msx-card{ border-radius:22px 22px 0 0; }
  #msx-kefu-root .msx-view{ padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px)); }
}

/* ---------- 2. 主菜单欢迎区：收紧、加记忆感 ---------- */
#msx-kefu-root .msx-hero{
  text-align:left;
  padding:6px 2px 12px;
}
#msx-kefu-root .msx-hero-name{
  font-size:18px;
  line-height:1.35;
  font-weight:700;
  color:var(--xh-ink);
  margin-top:0;
}
#msx-kefu-root .msx-hero-name .xh-hi{ color:var(--xh-ink); }
#msx-kefu-root .msx-hero-name .xh-nick{
  color:var(--xh-orange-deep);
}
#msx-kefu-root .msx-hero-name .xh-role{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--xh-slate);
  margin-top:3px;
  letter-spacing:.2px;
}
#msx-kefu-root .msx-hero-desc{
  font-size:12.5px;
  color:var(--xh-slate);
  margin-top:6px;
}
/* 记忆条：登录后展示“记得你是谁/尾号/角色” */
#msx-kefu-root .xh-memory{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:10px 2px 2px;
  padding:9px 12px;
  background:var(--xh-mem-bg);
  border:1px solid var(--xh-mem-line);
  border-radius:12px;
  font-size:12px;
  line-height:1.5;
  color:#0B6E5C;
}
#msx-kefu-root .xh-memory .xh-mem-ico{
  flex-shrink:0;
  width:16px;height:16px;
  margin-top:1px;
}
#msx-kefu-root .xh-memory b{ font-weight:700; }

/* 值班条：瘦身 */
#msx-kefu-root .msx-dutyline{ margin-bottom:14px; }

/* ---------- 3. 主菜单：三张大卡 → 更疏朗、更轻 ---------- */
#msx-kefu-root .msx-menu{ gap:10px; }
#msx-kefu-root .msx-menu-item{
  padding:14px;
  border-radius:16px;
  border-color:var(--xh-line);
}
#msx-kefu-root .msx-menu-icon{
  width:44px;height:44px;
  border-radius:13px;
}
#msx-kefu-root .msx-menu-title{ font-size:15px; }
#msx-kefu-root .msx-menu-desc{ font-size:12px; margin-top:3px; }

/* ---------- 4. 在线咨询：售前售后 + 其他方式 间距 ---------- */
#msx-kefu-root .msx-section{ margin-bottom:18px; }
#msx-kefu-root .msx-section:last-child{ margin-bottom:4px; }
#msx-kefu-root .msx-team-card{ padding:15px 14px; border-radius:16px; }
#msx-kefu-root .msx-alt-list{ gap:10px; }
#msx-kefu-root .msx-alt-item{ padding:14px; border-radius:16px; }

/* ---------- 5. AI 对话页 ---------- */
#msx-kefu-root .msx-chat{ min-height:260px; }
#msx-kefu-root .msx-chat-scroll{ padding:16px 14px; }

/* 快捷问题 chips（增强 JS 注入，未接大模型前作为“高频问题”引导） */
#msx-kefu-root .xh-chips-wrap{
  padding:10px 14px 2px;
  background:#f8fafc;
}
#msx-kefu-root .xh-chips-title{
  font-size:11.5px;
  color:var(--xh-slate);
  margin:0 0 8px 2px;
  letter-spacing:.3px;
}
#msx-kefu-root .xh-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
#msx-kefu-root .xh-chip{
  appearance:none;
  border:1px solid #F0C9A8;
  background:#fff;
  color:var(--xh-orange-deep);
  font-size:12.5px;
  line-height:1.2;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:all .15s ease;
}
#msx-kefu-root .xh-chip:hover{
  background:#fff4ea;
  border-color:var(--xh-orange);
  transform:translateY(-1px);
}
/* AI 能力卡：说明小航能做什么（视觉版先给确定感） */
#msx-kefu-root .xh-ability{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:10px 2px 0;
}
#msx-kefu-root .xh-ability span{
  font-size:11px;
  color:#0B6E5C;
  background:var(--xh-mem-bg);
  border:1px solid var(--xh-mem-line);
  border-radius:999px;
  padding:4px 9px;
}

/* 系统提示：AI 升级说明气泡（视觉版诚实告知，不假装能答） */
#msx-kefu-root .msx-bubble.xh-note{
  background:#fff8f1;
  border:1px dashed #F0C9A8;
  color:#8a5a33;
  font-size:12.5px;
}

@media (max-width:480px){
  #msx-kefu-root .xh-chips-wrap{ padding:10px 16px 2px; }
}

/* ============================================================
   6. 表单子页（留言咨询 / 商务合作 / 意见反馈）专业排版
   作用域：仅“卡片体内含 .msx-label”的表单视图，绝不碰主菜单/AI页
   ============================================================ */

/* 6.1 表单整体：卡片高度“随内容自适应”，只保留最大高上限——
       短表单(留言咨询/意见反馈)紧凑、不再被强行撑满；
       长表单(商务合作/多行输入)长到上限时，才在表单区内部滚动。
       组件层把 .msx-card 设为 fixed 且 top/bottom 同时取值会把它纵向拉伸，
       这里解除 bottom 约束，让高度真正由内容决定。 */
/* >480：沿用底版 .msx-card 的 right:24/bottom:24 右下角锚点（不写 top/bottom，
   避免覆盖），只把高度交还给内容——height:auto，卡片从右下角往上长；
   max-height 仅作上限，短表单(留言/反馈)紧凑不撑满，长表单(商务)到顶后内部滚动。
   底版上限 min(70vh,560px) 对商务合作偏矮，放宽到 88dvh 留足空间。 */
#msx-kefu-root .msx-card:has(.msx-label){
  display:flex;
  flex-direction:column;
  height:auto;
  max-height:88vh;
  overflow:hidden;
}
@media (max-width:480px){
  /* 窄屏：底版本就 bottom:0 全宽上滑卡片；高度仍随内容、最多 92vh */
  #msx-kefu-root .msx-card:has(.msx-label){
    top:auto;
    bottom:0;
    left:0;
    right:0;
    max-height:92vh;
  }
}
#msx-kefu-root .msx-card:has(.msx-label) .msx-card-head{
  flex:0 0 auto;
  padding:16px 18px 14px;
  border-bottom:1px solid #F1F4F9;
  background:#fff;
}
/* body=弹性列容器：内容短时只占自然高度(0 1 auto 不抢剩余空间)，
   内容长到卡片 max-height 时收缩为 0、由内部 .msx-form 滚动 */
#msx-kefu-root .msx-card-body:has(.msx-label){
  flex:0 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#F6F8FB;
  padding:0;
  overflow:hidden;
}
/* 字段容器：短表单自然高度不出现内滚动；长表单触顶后才 overflow-y:auto */
#msx-kefu-root .msx-card-body:has(.msx-label) .msx-form{
  flex:0 1 auto;
  min-height:0;
  max-height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:20px 18px 26px;
  background:#F6F8FB;
  scrollbar-width:thin;
}
@media (min-width:481px){
  #msx-kefu-root .msx-card-body:has(.msx-label) .msx-form{ padding:24px 24px 28px; }
}

/* 6.2 字段名 label：加橙色引导条，成体系的小标题 */
#msx-kefu-root .msx-card-body .msx-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:22px 2px 10px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.3px;
  color:#334155;
}
#msx-kefu-root .msx-card-body .msx-label:first-child,
#msx-kefu-root .msx-card-body .msx-label:first-of-type{ margin-top:4px; }
#msx-kefu-root .msx-card-body .msx-label::before{
  content:"";
  width:4px; height:15px; border-radius:3px; flex:none;
  background:linear-gradient(180deg,#F4934D 0%,#E57026 100%);
}
/* 必填星号（JS 包 .xh-req，未跑到时退回普通色也不影响） */
#msx-kefu-root .msx-label .xh-req{ color:#E0492E; font-weight:800; margin-left:1px; }

/* 6.3 控件：白底、柔和描边、大圆角、聚焦浮起 */
#msx-kefu-root .msx-card-body:has(.msx-label) input,
#msx-kefu-root .msx-card-body:has(.msx-label) textarea,
#msx-kefu-root .msx-card-body:has(.msx-label) select{
  width:100%;
  background:#FFFFFF;
  border:1.5px solid #E3E8F0;
  border-radius:14px;
  padding:13px 15px;
  font-size:14.5px;
  line-height:1.5;
  color:#1F2937;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#msx-kefu-root .msx-card-body:has(.msx-label) textarea{
  min-height:120px;
  max-height:240px;     /* 自动增高到此封顶，再长在框内滚动（由 JS 动态调高度） */
  resize:none;
  line-height:1.65;
  overflow-y:auto;
}
#msx-kefu-root .msx-card-body:has(.msx-label) input::placeholder,
#msx-kefu-root .msx-card-body:has(.msx-label) textarea::placeholder{ color:#AEB8C6; }
#msx-kefu-root .msx-card-body:has(.msx-label) input:focus,
#msx-kefu-root .msx-card-body:has(.msx-label) textarea:focus,
#msx-kefu-root .msx-card-body:has(.msx-label) select:focus{
  outline:none;
  border-color:#F09A57;
  background:#FFFEFC;
  box-shadow:0 0 0 4px rgba(229,112,38,.12);
}
/* 下拉：去原生箭头换统一的橙色 chevron，零外部依赖 */
#msx-kefu-root .msx-card-body:has(.msx-label) select{
  appearance:none; -webkit-appearance:none;
  padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23E57026' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:17px;
}
#msx-kefu-root .msx-card-body:has(.msx-label) select option{ color:#1F2937; }

/* 6.4 提交主按钮：在表单流末尾正常排列（不悬浮、不遮挡最后一个输入框），
       随表单区一起滚，滚到底完整可见可点；上方留足分组间距 */
#msx-kefu-root .msx-card-body:has(.msx-label) button.msx-bg-orange{
  display:block;
  width:100%;
  margin:28px 0 0;
  height:52px;
  border:none;
  border-radius:15px;
  font-size:16px;
  font-weight:700;
  letter-spacing:3px;
  color:#fff;
  background:linear-gradient(135deg,#F4934D 0%,#E57026 55%,#D8641C 100%);
  box-shadow:0 10px 22px rgba(229,112,38,.26), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#msx-kefu-root .msx-card-body:has(.msx-label) button.msx-bg-orange:active{
  transform:scale(.985);
  filter:brightness(.97);
}
#msx-kefu-root .msx-card-body:has(.msx-label) button.msx-bg-orange:disabled{
  background:#CBD3DE; box-shadow:none; color:#F2F4F7;
}

/* ============================================================
   7. FORMS4 兼容修复 (2026-10-18)：去 :has() 依赖
   问题：第 6 节整套表单排版挂在 :has() 上，旧版手机浏览器/内嵌 WebView
        不支持 :has()，导致整段失效——回退主样式后 label 间距错乱(18px)、
        表单背景变白，且 .msx-view 的写死高度 calc(*dvh-65px) 头部估高不准，
        提交按钮被卡片 overflow:hidden 裁掉、无法滚动到。
   修法：表单组件(Kd留言/Yd商务/Xd反馈)根节点直接就是 <form class="msx-form">，
        外层仅 .msx-card-body，故用 .msx-form 直接命中，零 :has() 依赖；
        用 flex 高度链替代写死 dvh，长表单在表单内部滚动，提交钮始终可达。
        本段特异性高于第 6 节，现代/老旧浏览器一致生效；不碰主菜单与 AI 页。
   ============================================================ */

/* 7.1 高度链（核心修复，去写死 dvh、去 :has()）：
   .msx-card(限高 flex列) > .msx-card-head(固定) + .msx-card-body(填满剩余可收缩)
                                          └ > form.msx-form(填满body、内容超高时自身滚动)
   卡片高度上限沿用底版/FORMS3：桌面 min(70vh,560px)，移动 88dvh，无需在此改。
   关键：body 必须 flex:1 1 auto + min-height:0（FORMS3 用 0 1 auto 会被长表单顶松），
        form 必须 min-height:0，否则 flex 子项默认 min-height:auto 不收缩，
        长表单连同提交钮被卡片 overflow:hidden 裁掉且无法滚动。 */
#msx-kefu-root .msx-card > .msx-card-body{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* 7.2 表单：填满 body 的唯一滚动子项；短表单自然高度，长表单到顶后内部滚动。
   不设任何 max-height（高度由 flex 链 + 卡片上限决定），桌面移动通用。 */
#msx-kefu-root .msx-card-body > form.msx-form{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  box-sizing:border-box;
  padding:20px 18px calc(28px + env(safe-area-inset-bottom,0px));
  background:#F6F8FB;
}
@media (min-width:481px){
  #msx-kefu-root .msx-card-body > form.msx-form{ padding:24px 24px 30px; }
}
@media (max-width:480px){
  #msx-kefu-root .msx-card-body > form.msx-form{
    padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px));
  }
}

/* 7.4 字段名：稳定、克制的成组间距（去掉主样式 18px 大跳距），首个不悬空 */
#msx-kefu-root .msx-card-body .msx-label{
  margin:18px 2px 9px;
}
#msx-kefu-root .msx-card-body .msx-label:first-child,
#msx-kefu-root .msx-card-body .msx-label:first-of-type{ margin-top:4px; }

/* 7.5 控件与提交按钮：去 :has() 重述（规则体同第 6 节，确保老浏览器也生效） */
#msx-kefu-root .msx-form input,
#msx-kefu-root .msx-form textarea,
#msx-kefu-root .msx-form select{
  width:100%;
  background:#FFFFFF;
  border:1.5px solid #E3E8F0;
  border-radius:14px;
  padding:13px 15px;
  font-size:14.5px;
  line-height:1.5;
  color:#1F2937;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  box-sizing:border-box;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#msx-kefu-root .msx-form textarea{
  min-height:120px;
  max-height:220px;
  resize:none;
  line-height:1.65;
  overflow-y:auto;
}
#msx-kefu-root .msx-form input::placeholder,
#msx-kefu-root .msx-form textarea::placeholder{ color:#AEB8C6; }
#msx-kefu-root .msx-form input:focus,
#msx-kefu-root .msx-form textarea:focus,
#msx-kefu-root .msx-form select:focus{
  outline:none;
  border-color:#F09A57;
  background:#FFFEFC;
  box-shadow:0 0 0 4px rgba(229,112,38,.12);
}
#msx-kefu-root .msx-form select{
  appearance:none; -webkit-appearance:none;
  padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23E57026' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:17px;
}
#msx-kefu-root .msx-form select option{ color:#1F2937; }
#msx-kefu-root .msx-form button.msx-bg-orange{
  display:block;
  width:100%;
  margin:26px 0 0;
  height:52px;
  border:none;
  border-radius:15px;
  font-size:16px;
  font-weight:700;
  letter-spacing:3px;
  color:#fff;
  background:linear-gradient(135deg,#F4934D 0%,#E57026 55%,#D8641C 100%);
  box-shadow:0 10px 22px rgba(229,112,38,.26), inset 0 1px 0 rgba(255,255,255,.18);
  box-sizing:border-box;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#msx-kefu-root .msx-form button.msx-bg-orange:active{ transform:scale(.985); filter:brightness(.97); }
#msx-kefu-root .msx-form button.msx-bg-orange:disabled{
  background:#CBD3DE; box-shadow:none; color:#F2F4F7;
}