/* 手机端改版（10-20，方案见项目根目录《移动端改版方案.md》）
   只在 ≤640px 生效，放在所有样式最后加载；电脑排版不受影响。
   卡片组由 mobile.js 按内容自动判断：字少的一行两张（m-two），字多的折叠（m-fold）；表格变卡片（m-tbl）。10-20 起不再横向滑动。 */
@media (max-width:640px){
  /* 10-23：body 设 hidden 会让顶部导航和标签栏吸顶失效；html 保留 hidden 防横向滚动，body 改 clip（同样裁掉超出部分，不影响吸顶） */
  html{overflow-x:hidden}body{overflow-x:clip}

  /* ---- 区块间距：80–120px → 52px ---- */
  .sec{padding-top:52px}
  .sec-g{padding:44px 0;margin-top:52px}
  .fd-sec,.ab-sec{padding-top:52px!important;padding-bottom:52px!important}
  .up-sec{padding-top:52px!important;padding-bottom:52px!important;margin-top:0!important}
  .fd-hero,.ab-hero{padding-top:56px!important;padding-bottom:36px!important}
  .mt{margin-top:24px}
  .sh .sub,.lead{font-size:15px;line-height:1.6}

  /* ---- 首页首屏：对话框收成一个输入条，点了从底部弹出完整的小盒 ---- */
  .hero{padding-bottom:8px}
  .hero-top h1{margin-top:6px}
  .hero-sub{font-size:15px;line-height:1.6;margin-top:12px}
  #hero-chat{margin-top:20px;border-radius:16px;padding:0;min-height:0;height:auto}
  #hero-chat .chat-hd,#hero-chat .chat-log,#hero-chat .chat-tl,#hero-chat .chat-disc{display:none!important}
  #hero-chat .chat-cmp{margin:0;padding:0;background:none;box-shadow:none;border:0}
  #hero-chat textarea{height:52px!important;min-height:0;padding:15px 48px 15px 16px;font-size:15px;line-height:22px;resize:none;background-color:transparent;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='16' fill='%23111'/%3E%3Cpath d='M16 22V10M10.5 15.5 16 10l5.5 5.5' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;background-size:32px}
  #hero-chat textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 提问建议：换行排，最多露两行（10-20 王朋友：不要左右滑） */
  .hero .sugg{flex-wrap:wrap!important;justify-content:flex-start!important;gap:6px!important;margin-top:12px;max-height:76px;overflow:hidden}
  .hero .sugg button{flex:none;white-space:nowrap;font-size:13px;padding:6px 12px}
  .hero .alt{margin-top:14px;flex-wrap:wrap;row-gap:6px}

  /* ---- 首页演示：手机上不用原来的（会隐藏右半边），换成按电脑宽度缩小的 iframe ---- */
  .hero .hd{display:none}
  .hd-m:not([hidden]){display:block;margin-top:28px;position:relative;overflow:hidden;transition:height .35s ease;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--ln)}
  .hd-m iframe{position:absolute;left:0;top:0;width:960px;border:0;transform-origin:0 0;pointer-events:auto}
  .hd-m-n{display:block!important;font-size:11.5px;color:var(--k4);text-align:right;margin-top:8px}

  /* ---- 「介绍 / 演示 / 知识」三个竖排大按钮 → 一行三个小标签 ---- */
  .ntabs{display:flex!important;gap:8px;flex-direction:row!important}
  .ntabs a{flex:1;padding:10px 8px!important;text-align:center;min-width:0}
  .ntabs a span{display:none}

  /* ---- 文章列表（10-20 王朋友：左图右字太松、不好看）：第一篇大图，其余紧凑列表——标题在左、小封面在右（16:9 不裁字） ---- */
  .agrid{display:block!important;margin-top:20px}
  .agrid .acard{display:grid!important;grid-template-columns:1fr 112px;grid-template-areas:"s cv" "b cv" "e cv";column-gap:14px;align-content:start;align-items:start;
    min-height:0!important;padding:14px 0!important;margin:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;border-top:1px solid var(--ln);transform:none!important}
  .agrid .acard:not(.has-cv){grid-template-columns:1fr;grid-template-areas:"s" "b" "e"}
  .agrid .acard .acv{grid-area:cv;width:112px;height:63px;aspect-ratio:auto;margin:2px 0 0!important;border-radius:8px;overflow:hidden}
  .agrid .acard .acv img{width:100%;height:100%;object-fit:cover}
  .agrid .acard small{grid-area:s;font-size:12px;line-height:1.4;margin:0}
  .agrid .acard b{grid-area:b;font-size:15.5px;font-weight:600;line-height:1.45;margin:3px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .agrid .acard>span{display:none}
  .agrid-same .acard:not(:first-child){grid-template-areas:"b cv" "e cv"}
  .agrid-same .acard:not(:first-child) small{display:none}       /* 栏目页里每条都是同一个栏目，不重复写 */
  .agrid .acard em{grid-area:e;font-size:12px;line-height:1.4;margin:5px 0 0;color:var(--k4)}
  /* 第一篇：整张封面 + 标题 + 两行摘要 */
  .agrid .acard:first-child{display:block!important;border-top:0;padding-top:0!important}
  .agrid .acard:first-child .acv{width:100%;height:auto;aspect-ratio:16/9;margin:0 0 12px!important;border-radius:14px}
  .agrid .acard:first-child b{font-size:19px;line-height:1.4;margin-top:6px}
  .agrid .acard:first-child>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.6;color:var(--k3);margin-top:6px}
  .agrid .acard:first-child em{display:block;margin-top:8px}

  /* ---- 卡片组：一行两张 ---- */
  .m-two{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;grid-auto-flow:row}
  .m-two>*{padding:14px!important;margin:0!important;min-width:0}
  .m-two>* h3,.m-two>* h4{font-size:15px;line-height:1.35}
  .m-two>* p,.m-two>* span{font-size:13px;line-height:1.5}
  .m-two>*:last-child:nth-child(odd){grid-column:1/-1}

  /* 首页四个产品区块右边的示意小窗口：手机上不放，文字和按钮保留 */
  .sec.need .ui{display:none!important}

  /* ---- 字多的卡片组：收起来点开看（10-20 王朋友：不要左右滑动） ---- */
  .m-fold,.m-stack{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:8px!important;grid-template-columns:none!important}
  .m-fold>*,.m-stack>*{width:auto!important;max-width:none!important;margin:0!important;padding:14px 16px!important}
  .m-fold>*:not(.m-open)>*:not(.m-fh){display:none!important}
  .m-fold .m-fh{cursor:pointer;display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin:0!important}
  .m-fold .m-fh::after{content:"";flex:none;width:8px;height:8px;border-right:1.6px solid var(--k3);border-bottom:1.6px solid var(--k3);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s}
  .m-fold .m-open>.m-fh::after{transform:rotate(-135deg);margin-top:4px}
  .m-fold .m-open>.m-fh{margin-bottom:8px!important}
  .m-fold::before,.m-fold::after,.m-fold>.bar,.m-fold>*::before{display:none!important}

  /* ---- 表格：每一行一张小卡片，格子前面标表头（mobile.js 加 data-h） ---- */
  table.m-tbl,table.m-tbl tbody{display:block!important;width:100%!important;min-width:0!important;overflow:visible!important;border:0}
  table.m-tbl thead{display:none}
  table.m-tbl tr{display:block;background:var(--s1,#f5f5f7);border-radius:12px;padding:10px 14px;margin:0 0 8px}
  table.m-tbl tr:has(>th:only-child),table.m-tbl tr:not(:has(td)){display:none}
  table.m-tbl td,table.m-tbl th{display:block;border:0!important;padding:3px 0!important;text-align:left!important;font-size:14px;line-height:1.55}
  table.m-tbl td[data-h]::before{content:attr(data-h);display:block;font-size:12px;color:var(--k4);margin-bottom:1px}
  table.m-tbl td,table.m-tbl th{width:auto!important;min-width:0!important}
  table.m-tbl td:first-child{font-weight:600;font-size:15.5px;color:var(--k)!important;padding-bottom:6px!important}
  table.m-tbl td:first-child::before{display:none}
  .fd-vs,.ab-vs,.tbl-wrap,.vs-t,.up-vs,.rs-tw{box-shadow:none!important;background:none!important;border-radius:0!important}
  .tbl-wrap,.rs-tw,.vs-t,.up-vs{overflow:visible!important;border:0!important}
  .prose table.m-tbl{overflow:visible}

  /* ---- 演示窗口里的标签栏、步骤条：换行，不横滚 ---- */
  .gd-steps,.xl-strip,.xf-idx-in,.xa-tabs,.xw-list ul{flex-wrap:wrap!important;overflow:visible!important}

  /* ---- 术语表：每个术语只留名称 + 两行解释，点名称进详情 ---- */
  .gl div{padding:12px 0!important;gap:4px!important}
  .gl dd{font-size:14px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .gl dd br,.gl dd a{display:none}
  .gl-intro{font-size:14px}

  /* ---- 常见问题：每条收紧一点 ---- */
  .faq details summary{padding-top:14px;padding-bottom:14px}


  /* 小盒对话框顶部：收藏、分享、调出记录、清屏收成一组靠右，彼此挨近（10-20 王朋友：隔太开排版奇怪） */
  .chat-hd>.chat-ib+.chat-ib,.chat-hd>.chat-ib+.chat-rst,.chat-hd>.chat-rst+.chat-clr{margin-left:-6px!important}

  /* 首屏引导框（10-21）：手机上首屏还是一个输入条，左上角加小盒和一句短引导语 */
  .hero-box{width:100%;margin-top:64px;text-align:left}
  /* 10-21 王朋友：一行的胶囊框太窄，改成约三行高的圆角输入框，提示语左上角起、会换行，发送箭头在右下角 */
  .hero-box #hero-chat{margin-top:0;background:#fff!important;border-radius:24px!important;box-shadow:0 0 0 1px #d2d2d7,0 12px 32px -14px rgba(0,0,0,.22)!important}
  .hero-box + .sugg{margin-top:18px!important}
  .hero-box #hero-chat textarea{color:var(--k)!important;height:116px!important;padding:22px 58px 16px 20px!important;font-size:16px;line-height:24px!important;
    white-space:normal!important;overflow:hidden;text-overflow:clip;background-position:right 12px bottom 12px!important;background-size:36px!important}
  .hero-box #hero-chat textarea::placeholder{white-space:normal!important}
  .hero-box #hero-chat textarea::placeholder{color:#86868b}
  .hero-pet{left:10px;right:10px;bottom:calc(100% - 4px)}
  .hero-say{font-size:12.5px;padding:6px 11px;margin-bottom:24px;max-width:calc(100vw - 120px);white-space:normal;line-height:1.45}   /* 手机上一句话放不下就换两行，不截断 */
  .xh-slot.xh-hero{width:64px;height:64px;margin:-22px -18px -16px -18px}

  /* 小盒桌宠头像（手机尺寸） */
  .xh-slot{width:56px;height:56px;margin:-24px -13px 1px -13px}
  .xh-slot.xh-tab{width:52px;height:52px;margin:-20px -11px 1px -11px}
  .dock .chat-hd .xh-slot{margin-top:-14px;margin-bottom:-9px}   /* 手机面板标题栏矮：天线原来正好顶在面板上沿，改成整个收在面板里、天线离上沿留空，和名字对齐（电脑面板保持探出去） */

  /* 卡片里单独占一行的「→」去掉（整张卡片可点） */
  .m-arrow{display:none!important}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.m-fold .m-fh::after{transition:none}}