/* =====================================================================
   智规律平台 · 手机移动端全域适配插件  mobile-adapter.css
   =====================================================================
   版本：2026-09-12 手机端遮挡/点击失效修复版（v2）
   统一作用于：后台管理平台 / 两个官网 / 四个智能体前后台

   【本次修复】见文件末尾「手机端遮挡与点击失效修复」区块。
   1) 悬浮件（安装App条 / 会员按钮 / 帮助按钮 / 回到顶部 / 工具按钮）
      在手机上统一抬到「底部输入区上方」，不再盖住聊天输入框与发送按钮。
   2) 底部聊天输入区/登录表单的触控目标 ≥44px。
   3) 顶部「免费试用」横幅不再盖住页面头部按钮。
   ===================================================================== */
:root { --zg-touch: 44px; }

/* 安全区（刘海屏/底部横条） */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@supports (-webkit-touch-callout: none) { body { padding-bottom: env(safe-area-inset-bottom, 0px); } }

/* 基础：盒模型 + 图片自适应 + 禁止横向溢出 */
*, *::before, *::after { box-sizing: border-box; }
img, video, svg, canvas { max-width: 100%; height: auto; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
/* 现代浏览器用 clip 裁剪横向溢出（不创建滚动容器，保持 sticky 生效） */
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* ============================ 手机端 (<768px) ============================ */
@media (max-width: 768px) {
  html { font-size: 16px; }
  body { font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }

  /* 容器/卡片：单列、留边、疏排 */
  .container, .wrap, .content, main, .main, .el-container, .page { padding-left: 14px !important; padding-right: 14px !important; }
  .card, .panel, .box, .result-card, .item, .list-item, .el-card, .el-menu-item { border-radius: 12px !important; }

  /* 表单/输入/按钮：放大触控目标 + 全宽 */
  input, select, textarea, button, .btn, .el-button, [role="button"] { min-height: var(--zg-touch); }
  input[type="text"], input[type="tel"], input[type="password"], input[type="email"], textarea, select { width: 100%; font-size: 16px; padding: 10px 12px; }
  button, .btn, .el-button { padding: 10px 16px; font-size: 16px; border-radius: 10px; }

  /* 单列：grid/多列布局折叠为单列 */
  .grid, .el-row, .row, .cols, .flex > div { grid-template-columns: 1fr !important; }
  [class*="col-"], .el-col { width: 100% !important; margin: 0 0 10px !important; }

  /* 表格：横向滚动 + 紧凑 */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  th, td { padding: 8px 10px !important; font-size: 14px; }

  /* 头部/导航：折叠 + 移动顶栏 */
  header, .header, .topbar, .navbar, .chat-header { flex-wrap: wrap; padding: 10px 14px !important; }
  .menu, nav, .el-menu { flex-wrap: wrap; gap: 4px; }
  .menu a, nav a, .el-menu-item, .nav-link { font-size: 14px; padding: 8px 10px; }

  /* 隐藏桌面专用元素 */
  .desktop-only, .hide-mobile, .desktop-nav, .top-actions { display: none !important; }

  /* 移动底部导航（若有容器则固定，适配安全区） */
  .mobile-bottom-nav, .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ============================ 手机窄屏 (<480px) ============================ */
@media (max-width: 480px) {
  /* 聊天区全屏：主区域占满可视高度，消息区独立滚动 */
  .main-content, .chat-main, .chat-container, .chat-area { height: 100vh; height: 100dvh; }
  .chat-messages, .chat-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* 聊天输入区触屏友好 + 安全区 */
  .chat-input-area, .input-bar, .send-bar, .submit-bar, .question-box {
    padding-left: 12px !important; padding-right: 12px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 悬浮按钮不遮挡底部输入区/安全区 */
  .zg-backtop { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  .zg-help-fab, .fab, .float-btn, .float-button { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

  /* 会员/套餐卡片单列 + 大触控目标 */
  .pricing-tiers, .quick-tiers, .vip-plans, .tier-grid, .plan-grid { grid-template-columns: 1fr !important; }
  .tier-card, .vip-plan-card, .plan-card, .pricing-card { min-height: 44px; padding: 14px !important; }
  .install-btn, .btn-install, .use-help, .help-btn, .zg-install { min-height: 44px; padding: 10px 16px !important; font-size: 15px !important; }
}

/* ============================ 390px 手机 ============================ */
@media (max-width: 390px) {
  .chat-messages { padding-left: 10px !important; padding-right: 10px !important; }
  .chat-input-area { padding-left: 8px !important; padding-right: 8px !important; }
  .message, .msg, .chat-bubble { max-width: 90% !important; }
}

/* ============================ 375px 手机 (iPhone SE/小屏) ============================ */
@media (max-width: 375px) {
  .header-info h2 { font-size: 14px !important; }
  .header-info .header-sub { font-size: 10px !important; }
  .btn-new-chat { padding: 6px 8px !important; font-size: 11px !important; }
  .chat-messages { padding-left: 8px !important; padding-right: 8px !important; }
  .welcome-screen { padding: 12px 10px !important; }
  .category-grid { grid-template-columns: 1fr !important; }
  .tier-card, .vip-plan-card, .plan-card { padding: 12px 10px !important; }
}

/* ============================ 平板 (769-1024px) ============================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .content, .main, .container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ============================ PWA standalone ============================ */
@media (display-mode: standalone) {
  /* 安装到桌面后：占满安全区，避免底部滚动条/白边 */
  html, body { min-height: 100vh; min-height: 100dvh; }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .main-content, .chat-main, .chat-container, .chat-area { height: 100vh; height: 100dvh; }
  .chat-input-area, .input-bar, .send-bar, .submit-bar, .question-box {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================ 全局触控/可读性 ============================ */
a, button { touch-action: manipulation; }
button, .btn, .el-button { -webkit-tap-highlight-color: transparent; }
/* 聊天/咨询气泡在手机上更易读 */
.chat-bubble, .message, .msg, .reply, .chat-msg { max-width: 92%; line-height: 1.55; }
/* 滚动条美化 */
::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 4px; }

/* ============================ 触控/点按优化 ============================ */
/* 点击反馈(涟漪/高亮) */
button, .btn, .el-button, a, .item, .card, [role="button"], .list-item, .menu-item, .nav-link {
  -webkit-tap-highlight-color: rgba(28,88,160,.18);
  transition: background .15s, transform .08s;
}
button:active, .btn:active, .el-button:active, a:active, .item:active, .card:active, [role="button"]:active {
  transform: scale(.97); opacity: .92;
}
/* 触控目标最小 44px 且间距足够 */
a, button, .btn, .el-button, .list-item, .accordion-head, [role="button"], select {
  min-height: var(--zg-touch); }
.toolbar > *, .actions > *, .btn-group > * { margin-bottom: 6px; }
/* 防止双击缩放(交互元素) */
a, button, .btn, .el-button, input, select, textarea, label, [role="button"] { touch-action: manipulation; }
/* 输入框聚焦不自动放大字号(避免 iOS 聚焦缩放) */
input[type="text"], input[type="tel"], input[type="password"], input[type="number"], input[type="email"], textarea, select {
  font-size: 16px !important; max-height: none; }
/* 交互过程中禁止选中(防快速连点误操作) —— 表单控件必须允许选中/输入，见文末修复区 */
button, .btn, .el-button, a { -webkit-user-select: none; user-select: none; }
/* 粘性底部操作区(聊天输入/提交按钮) */
.zg-sticky, .chat-input, .input-bar, .question-box, .send-bar, .submit-bar {
  position: sticky; bottom: 0; z-index: 100;
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
/* 手风琴/折叠：可点展开头更大 */
.accordion > *, .el-collapse-item__header, .collapse-head { min-height: var(--zg-touch); }
/* 防止页面过度回弹/横滑 */
html, body { overscroll-behavior: contain; }


/* =====================================================================
   ★★★★★ 手机端遮挡与点击失效修复区（2026-09-12 新增，勿删）★★★★★
   ---------------------------------------------------------------------
   线上实测问题：手机端「点输入框没反应 / 键盘不出 / 点登录没反应 /
   发不出对话」，电脑浏览器正常。

   根因：多个 position:fixed 悬浮件的内联 z-index 高达 2147483500，
   而手机端聊天输入区被压到屏幕最底部（ai 端 .chat-input-area 在
   ≤768px 时为 position:fixed;bottom:0;z-index:50），于是
     #zgInstallBar（left:16px;bottom:16px，含图标+按钮，约 200×56px）
     #zgMemberFab（right:16px;bottom:150px）
     .zg-help-fab （right:16px;bottom:96px）
   正好压在输入框/发送按钮/登录按钮上，触摸事件被它们截走。
   电脑端输入区在正常文档流里、不在视口底部，所以不受影响。

   修复策略（保守、只改位置与层级，不动任何业务逻辑）：
   把所有悬浮件统一抬到「底部输入区之上」，并保证它们不超出屏幕宽度。
   JS 端（mobile-adapter.js）还会按真实测量结果二次校正，双保险。
   ===================================================================== */
@media (max-width: 900px) {
  /* 0) ★层级重排（本修复包最核心的一条）★
     原状：悬浮件 z-index 高达 2147483500~2147483600，而底部聊天输入区
           在手机上恰好落在它们的位置上 → 触摸被悬浮件截走 →
           “点输入框没反应 / 发不出对话 / 点登录没反应”。
     修法：手机端把悬浮件层级降到 9990 一档（仍高于页面内的侧栏 99/100、
           弹窗 1000、工具抽屉 1200），再把底部输入区提到 9999，
           于是任何悬浮件都抢不走输入区/发送按钮的点击。
           全屏遮罩（#zgTrialMask 2147483602 / #zgAuthMask 2147483602 /
           #zgTierMask / #zgGuideMask 2147483640 / .zg-help-mask 2147483601）
           层级全部高于 9999，仍然正常压住页面 —— 付费墙与弹窗不受影响。 */
  #zgInstallBar, #zgMemberFab, .zg-help-fab, #zg-tools-btn { z-index: 9990 !important; }
  .zg-backtop { z-index: 9991 !important; }
  #zgInstallToast { z-index: 9995 !important; }

  /* 底部输入区/提交区/登录输入容器：高于所有悬浮件 */
  .chat-input-area, .input-bar, .send-bar, .submit-bar, .question-box, .zg-sticky, .input-container {
    z-index: 9999 !important;
  }
  /* 说明：静态定位的元素 z-index 不生效，mobile-adapter.js 会自动给它补
     position:relative（不动原本就是 fixed/sticky 的设计）。 */

  /* 1) 安装 App 悬浮条：抬到输入区上方，限制宽度，避免盖住输入框/登录按钮 */
  #zgInstallBar {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 178px) !important;
    left: 10px !important;
    right: auto !important;
    top: auto !important;
    max-width: calc(100vw - 20px) !important;
    padding: 5px 10px !important;
    gap: 6px !important;
  }
  #zgInstallBar img { width: 22px !important; height: 22px !important; }
  #zgInstallBar button { min-height: 40px !important; padding: 8px 12px !important; font-size: 13px !important; }

  /* 2) 会员悬浮按钮：输入区上方，右下角 */
  #zgMemberFab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 232px) !important;
    right: 10px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    max-width: 62vw !important;
  }

  /* 3) 帮助悬浮按钮 / 回到顶部 / 工具按钮：全部抬到输入区之上并让开中心 */
  .zg-help-fab { bottom: calc(env(safe-area-inset-bottom, 0px) + 178px) !important; right: 10px !important; padding: 9px 14px !important; font-size: 13px !important; }
  .zg-backtop { bottom: calc(env(safe-area-inset-bottom, 0px) + 286px) !important; right: 10px !important; }
  #zg-tools-btn { bottom: calc(env(safe-area-inset-bottom, 0px) + 232px) !important; right: 10px !important; }

  /* 3b) 侧栏遮罩：未展开时绝不参与点击（ask 端 .sidebar-backdrop 用
        opacity/visibility 隐藏而不是 display:none，仍可能吃到点击） */
  .sidebar-backdrop:not(.show), .sidebar-overlay:not(.show), .drawer-overlay:not(.show) {
    pointer-events: none !important;
    display: none !important;
  }

  /* 4) 底部聊天输入区/登录区：保证触控目标 ≥44px，且浮层不再压上来 */
  .chat-input-area textarea,
  .chat-input-area .message-input,
  .input-bar textarea,
  .input-container textarea,
  .question-box textarea,
  .send-bar textarea { min-height: 44px !important; line-height: 1.45 !important; }

  /* 发送按钮加大到 44×44，防误触漏点 */
  #sendBtn, .btn-send {
    min-width: 44px !important; min-height: 44px !important;
    padding: 8px 12px !important; font-size: 18px !important;
  }

  /* 5) 表单控件必须允许选中与输入（防 -webkit-user-select:none 导致 iOS 无法输入） */
  input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
  }

  /* 6) 顶部「免费试用」固定横幅不再盖住头部按钮：改为随文档流（JS 也会兜底置顶） */
  #zgTrialBanner {
    position: static !important;
    width: 100% !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    padding: 7px 10px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    z-index: auto !important;
  }

  /* 7) 试用到期/会员面板：保证可以滚动、可以关闭，不把人困在遮罩里 */
  #zgTrialMask, #zgAuthMask, #zgGuideMask, .zg-help-mask, .modal-overlay {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #zgTrialPanel, #zgAuthPanel, #zgGuideCard, .zg-help-panel, .modal-container {
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 8) ★ law 端登录网关 #v13AuthGate（“需注册登录但无法登录”的真凶）★
     原实现：position:fixed;inset:0;z-index:9999;display:flex;
             align-items:center;justify-content:center  —— 没有 overflow。
     后果（仅手机端暴露）：
       · 面板高约 470px，手机竖屏本就吃紧；一点输入框弹出键盘后
         可视高度只剩 ~300px，面板上下同时溢出；
       · position:fixed 容器 + 无 overflow + flex 居中 → 页面既不能滚，
         面板也无法被滚动到，底部「登录 / 注册并登录」按钮直接被顶出屏幕，
         用户根本点不到 → “无法登录”。
       · 另外 z-index:9999 低于 #zgInstallBar(2147483500)，
         安装条还会压在登录按钮上。
     修法（业界标准）：手机上改为顶部对齐 + 容器可滚动 + 面板 margin:auto，
     放得下时依旧居中，放不下时可滚动；z-index 提到所有悬浮件之上。 */
  #v13AuthGate, [id$="AuthGate"], .auth-gate {
    align-items: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 14px 12px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483505 !important;   /* 必须高于 #zgInstallBar / #zgMemberFab / .zg-help-fab */
  }
  #v13AuthGate > div, [id$="AuthGate"] > div, .auth-gate > div {
    margin: auto 0 !important;        /* 放得下→垂直居中；放不下→从顶部开始并可滚动 */
    width: 100% !important;
    max-width: 420px !important;
    padding: 20px 16px !important;
  }
  #v13AuthGate input, #v13AuthGate button,
  #v13AuthGate .btn-primary, #v13AuthGate .btn-outline {
    min-height: 46px !important;
    font-size: 16px !important;      /* 16px 可避免 iOS 聚焦自动放大 */
  }
  #v13AuthGate #aMsg { font-size: 13px !important; line-height: 1.5 !important; }
}

/* 极窄屏（iPhone SE 320~375px）：悬浮件进一步缩小，给输入区让位 */
@media (max-width: 380px) {
  #zgInstallBar { bottom: calc(env(safe-area-inset-bottom, 0px) + 190px) !important; transform: scale(.94); transform-origin: left bottom; }
  #zgMemberFab { font-size: 12px !important; padding: 8px 12px !important; }
  .zg-help-fab { transform: scale(.94); transform-origin: right bottom; }
}

/* 手机横屏：底部空间小，全部再抬高，避免压住输入区 */
@media (max-width: 900px) and (orientation: landscape) {
  #zgInstallBar { bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important; transform: scale(.9); transform-origin: left bottom; }
  .zg-help-fab { bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important; transform: scale(.9); transform-origin: right bottom; }
  #zgMemberFab { display: none !important; }
}

/* 键盘弹出时（JS 会给 html 加 .zg-kb-open）：所有悬浮件隐藏，专心输入 */
html.zg-kb-open #zgInstallBar,
html.zg-kb-open #zgMemberFab,
html.zg-kb-open .zg-help-fab,
html.zg-kb-open .zg-backtop,
html.zg-kb-open #zg-tools-btn { display: none !important; }