/* GEO 引擎优化系统 · 手机端补丁 v4（20260927 第 11 轮）
   ⚠ v3 犯的致命错误：把 v2 的「抽屉样式段」整段覆盖掉了，导致线上抽屉 CSS 全部丢失：
       实测 #geoBurger position:static/z:auto/0×0（裸按钮，老板看不见汉堡）
            aside.fixed transform:none（左栏 240px 常驻，进站就糊在正文上）
            #geoMobMask position:static/z:auto/高0（遮罩形同虚设，点它等于穿透）
        点「遮罩」实际命中的是 Vben 自带的 .bg-overlay → 触发 Vben 自己的 menu-collapse
        → 老板看到的「左栏全变图标、菜单列表不见了」。
   v4 修法：把 v2 抽屉段**原样恢复（追加，不再覆盖）**，并补两处防呆：
       ① 窄屏隐藏 Vben 自带 overlay，交给我们自己的遮罩统一接管点击
       ② 抽屉展开时压住 Vben 自身的 mini 折叠按钮，杜绝点工作区误触折叠成图标
   红线：只放约束/切状态，不挤压任何卡片本体，不删任何一个字。 */

/* ===== [GEOFIX-20260927-0] 恢复 v2 抽屉样式（汉堡 999992 > 抽屉 999991 > 遮罩 999990） ===== */
.geo-burger,.geo-mob-mask{display:none}
@media (max-width:760px){
  /* ① Vben 自带全屏 overlay：会拦截右栏点击，且菜单折叠成图标的元凶。
        窄屏彻底让位给 .geo-mob-mask，避免两套遮罩打架。 */
  .bg-overlay{ display:none !important; pointer-events:none !important; }

  /* ② 抽屉默认收起（translateX 移出屏外），进来看到的是内页首页 */
  body.geo-mob aside.fixed{
    z-index:999991 !important;top:0 !important;bottom:0 !important;height:auto !important;
    transform:translateX(-105%) !important;transition:transform .25s ease !important;
    box-shadow:none !important;will-change:transform;overflow-y:auto !important;
  }
  /* 抽屉展开态 */
  body.geo-mob.geo-mob-open aside.fixed{
    transform:translateX(0) !important;box-shadow:6px 0 24px rgba(15,23,42,.24) !important;
  }
  /* ③ 汉堡按钮必须常驻可见 —— R13 老板第 1 条：移到「顶栏下面第二栏（工作台 tab 条）」最左侧，
        并压缩到 30×30 适配该栏高度（取证第二栏 top:50 h:38，汉堡居中 top≈54）。 */
  .geo-burger{
    display:inline-flex !important;align-items:center !important;justify-content:center !important;
    position:fixed !important;top:54px;left:8px;width:30px;height:30px;padding:0;cursor:pointer;
    background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#334155;
    box-shadow:0 2px 10px rgba(15,23,42,.12);z-index:999992 !important;
    -webkit-tap-highlight-color:transparent;
  }
  .geo-burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .geo-burger:active{background:#f1f5f9}
  /* ④ 遮罩：真正盖满屏、吃掉点击、不拦页面滚动 */
  .geo-mob-mask{
    display:none !important;position:fixed !important;inset:0 !important;
    background:rgba(15,23,42,.45) !important;z-index:999990 !important;
    -webkit-tap-highlight-color:transparent;
  }
  .geo-mob-mask.show{display:block !important}
  /* ⑤ 顶栏内容给汉堡让位（R13：汉堡已移到第二栏，顶栏不再需要左留白，品牌回到最左上角） */
  body.geo-mob header,body.geo-mob .vben-layout-header{padding-left:8px !important;}
  /* ⑥ 抽屉打开时，压住 Vben 自身的 mini 折叠按钮，防止点工作区误触折叠成图标 */
  body.geo-mob.geo-mob-open .vben-layout-header button,
  body.geo-mob.geo-mob-open .vben-layout-header [class*="collapse"],
  body.geo-mob.geo-mob-open .vben-layout-header [class*="fold"]{
    pointer-events:none !important;
  }
  /* ⑦ 不锁页面滚动 */
  html,body{overflow-y:auto !important;height:auto !important;}
}

/* ===== [GEOFIX-20260927-2] 创建优化任务分页竖条 =====
   取证（375）：.company-keyword .mt-4.flex(305×320) 里 el-pagination 把
   「显示第 1 到第 1 条」(.text-sm.text-gray-500) 挤成 17×320 竖条（逐字换行）。
   修法：文本 span 禁换行 + 不参与收缩；分页行允许换行分两行摆。 */
@media (max-width:768px){
  .company-keyword .mt-4.flex,
  .mt-4.flex .el-pagination{
    flex-wrap:wrap !important; row-gap:8px !important;
  }
  .company-keyword .mt-4.flex > .text-sm,
  .mt-4.flex .el-pagination__total{
    white-space:nowrap !important; flex:0 0 auto !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    overflow:visible !important; text-overflow:clip !important;
  }
}

/* ===== [GEOFIX-20260927-5] 老板第 1 条：顶栏 LOGO+主副标题移到汉堡右侧 / 右侧全图标化 =====
   取证（375）：顶栏 <div style="min-width:40px"> 内只有 32×32 的 LOGO <img>，
     主副标题处在 Vue 的 <!----> 位置（BasicLogo 在窄屏下不渲染标题）→ 主副标题被挡住看不见。
     品牌文案取自 index.html：<title>DaNiu-AI GEO引擎优化系统</title>
     → 由 mobile-patch.js 注入 .geo-brand(主)/.geo-brand-sub(副) 两个 span，样式定在这里。
   ⚠ 桌面端完全不生效：默认是 display:none，只在 max-width:768px 里显示。 */
header .geo-brand{ display:none; }
@media (max-width:768px){
  body.geo-mob header .geo-brand{
    display:flex !important;flex-direction:column;justify-content:center;
    line-height:1.16;min-width:0;margin-left:4px;gap:1px;pointer-events:none;
    flex:0 0 auto !important;overflow:visible !important;
  }
  body.geo-mob header .geo-brand > span{flex:0 0 auto !important;}
  /* 外层 Vben 的 <div style="min-width:40px"> 会把 <a> 压在 40px 宽，
     品牌文字实测宽度 0 → 这里放开外层与 <a> 的宽度（取证 box [114,11,0,15]）。 */
  body.geo-mob header .geo-brand-wrap,
  body.geo-mob header .geo-brand-wrap > div{
    min-width:auto !important;width:auto !important;
    flex:0 0 auto !important;overflow:visible !important;
  }
  body.geo-mob header a.geo-brand-host{
    display:flex !important;align-items:center;gap:4px !important;
    flex:0 0 auto !important;min-width:0 !important;
    width:auto !important;max-width:none !important;overflow:visible !important;
    padding-left:0 !important;margin-left:0 !important;
  }
  /* 去掉 Vben logo 内包裹层自带的左偏移（取证 logo 比 host 左缘多 12px），让品牌紧贴 LOGO */
  body.geo-mob header a.geo-brand-host > div:first-child{
    margin-left:0 !important;padding-left:0 !important;
  }
  body.geo-mob header .geo-brand-main{
    font-size:12px;font-weight:800;letter-spacing:.2px;white-space:nowrap;color:currentColor;
  }
  body.geo-mob header .geo-brand-sub{
    font-size:10px;font-weight:500;opacity:.62;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;transform:scale(.92);transform-origin:left center;
  }
  /* 「到期时间：2099-12-31」在原厂是个 .el-button--primary 文字按钮，375 下 195px 占半屏。
     JS 把它换成纯图标按钮 .geo-expire，完整日期保留在 aria-label，点击弹 toast。 */
  body.geo-mob header .geo-expire{
    width:32px !important;min-width:32px !important;height:32px !important;
    padding:0 !important;gap:0 !important;font-size:0 !important;
  }
  body.geo-mob header .geo-expire svg{width:18px;height:18px;display:block;margin:0 auto;}
  .geo-toast{
    position:fixed !important;left:50% !important;bottom:72px !important;
    transform:translateX(-50%);background:rgba(15,23,42,.92);color:#fff !important;
    font-size:12px !important;padding:8px 14px !important;border-radius:8px !important;
    z-index:999997 !important;white-space:nowrap !important;
    opacity:0 !important;transition:opacity .18s !important;pointer-events:none !important;
  }
  .geo-toast.show{opacity:1 !important;}

  /* 合规横幅：原厂 .global-warning-text 宽 1714px（撑爆 flex），把右侧按钮全挤走
     → 窄屏隐藏长文本、只留「温馨提示（必读）」，并让它带头收缩给右侧图标让位。
     ⚠ 合规提示内容不删，只是折叠（违反广告法风险内容为原文，仅视觉折叠）：
       长正文隐藏，用 ::after 留一句「⚠ 合规提示」，完整内容在宽屏/登录页仍可读。 */
  /* 只把容器收窄，长正文不隐藏 —— 在 120px 内自然截断显示「温馨提示（必读）…」。
     （上一版用 ::after 造了一句提示，结果 banner 变成 [182,-12,34,73] 溢出了顶栏，已作废） */
  body.geo-mob header .global-warning-banner{
    flex:1 1 auto !important;min-width:0 !important;max-width:120px !important;
    flex-shrink:1 !important;overflow:hidden !important;
    height:20px !important;line-height:20px !important;
  }
  body.geo-mob header .global-warning-text{
    max-width:120px !important;overflow:hidden !important;
    white-space:nowrap !important;font-size:11px !important;
  }
  /* 右侧按钮一律不参与收缩，保证图标不被压成竖条 */
  body.geo-mob header .geo-expire,
  body.geo-mob header .theme-toggle-btn,
  body.geo-mob header button.h-8,
  body.geo-mob header button[data-v-f299fe1f]{flex:0 0 auto !important;}

  /* R13 老板第 2 条：顶栏「合规提示」胶囊（原厂宽 1714px 的 global-warning 被窄屏收窄成的静态小胶囊）
     取消显示（老板原文：左右滚动的字体说明跑马灯那个胶囊 取消掉）。合规原文仍在宽屏/登录页可读，不删字。 */
  body.geo-mob header .global-warning-banner{display:none !important;}

  /* R13 老板第 1 条：汉堡移到了第二栏（工作台 tab 条）最左侧，给 tab 内容让出 38px 以免被盖住 */
  body.geo-mob .vben-tabs-content,
  body.geo-mob .tabs-chrome,
  body.geo-mob [class*="tabs-content"]{padding-left:38px !important;}

  /* ===== [GEOFIX-20260927-3] 老板第 2 条：热门问题（词云）还原原厂设计 =====
     上轮把 .cloud 改成「标签墙」（position:static + flex wrap），老板明令
     「保持之前的动态显示，不要改动这个卡片的原样设计」，这里还原。
     原厂实现（template_v2 chunk 反查）：
       · .cloud-tag 用 Vue 内联 style left/top（环形撒点百分比）定位
       · transform:translate(-50%,-50%) 居中 + animation:cloudRadiate 无限浮动（--float-x/y）
       · .cloud 内有 .cloud-core 中心光点 + radial-gradient 渐变底
     ⚠ 还原要点：① 绝不覆盖 left/top（覆盖后所有词会叠到一处）；
        ② 绝不去掉 translate(-50%,-50%)；③ 只能放宽 max-width 让长词少被裁。 */
  .card-cloud .cloud{
    display:block !important;flex-wrap:nowrap !important;
    height:auto !important;min-height:300px !important;
    max-height:none !important;overflow:hidden !important;padding:14px !important;
  }
  .card-cloud .cloud-tag{
    position:absolute !important;width:auto !important;
    max-width:46% !important;                 /* 原厂 38%，放宽让长词能显示 */
    /* ⚠ R13 修复：上一版写了 transform:translate(-50%,-50%) !important，
       把 cloudRadiate 动画的 transform 关键帧整个压死了 → 词云变成「静态」。
       !important 优先级高于动画，必须去掉，让原厂 .cloud-tag 的 animation 接管浮动。 */
    animation-play-state:running !important;
  }
  .card-cloud .cloud-tag em,
  .card-cloud .cloud-tag EM{
    white-space:nowrap !important;overflow:hidden !important;
    text-overflow:ellipsis !important;max-width:none !important;width:auto !important;
  }

  /* ===== [GEOFIX-20260927-6] R13 老板第 4 条：library 类页面（成片库/素材库/数字人发布/短视频发布…）
     左侧 .library-sidebar 宽 240px 在手机端没收起，把 .library-main 挤成 49px → 内部卡片右侧溢出屏幕。
     修法：手机端收起左侧分类栏（display:none），内容区占满整行；卡片行若仍超宽则横向滑动。 */
  body.geo-mob .library-layout{ display:block !important; }
  body.geo-mob .library-sidebar{ display:none !important; }
  body.geo-mob .library-main{ width:auto !important; max-width:100% !important; margin-left:0 !important; }
  body.geo-mob .material-grid,
  body.geo-mob .finished-grid{ overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }

  /* el-table 类页面（数字人成片）：表头/表体内容宽于视口时允许横向滚动查看 */
  body.geo-mob .el-table__body-wrapper,
  body.geo-mob .el-table__header-wrapper{ overflow-x:auto !important; }

  /* AI关键词拓展：搜索栏按钮超出右边界 → 输入框占满整行，按钮换到下一行左对齐 */
  body.geo-mob .search-bar{ flex-wrap:wrap !important; row-gap:8px !important; }
  body.geo-mob .search-bar > *{ margin-left:0 !important; }
  body.geo-mob .search-bar .el-input,
  body.geo-mob .search-bar input{ flex:1 1 100% !important; min-width:0 !important; }

  /* 通用兜底：内容主区允许横向滑动，覆盖个人中心等未逐一排查的页面 */
  body.geo-mob .app-main,
  body.geo-mob .el-main{ overflow-x:auto !important; }

  /* ===== [GEOFIX-20260927-7] R14 第 2 条：AI关键词拓展 搜索条选项挤成一行 → 改为可换行、输入框给宽度（两行显示） =====
     取证（390）：.search-bar 内真实行 .flex.items-center.gap-3.justify-center 把两个 el-input 压成 4px（flex 收缩）、
     两个按钮「一键拓展/一键保存」贴在一起。修法：让该行 flex-wrap，输入框占 ~40% 宽度，按钮不收缩 → 自然排成两行。 */
  body.geo-mob .search-bar .flex.items-center{
    flex-wrap:wrap !important; gap:8px !important; justify-content:flex-start !important;
  }
  body.geo-mob .search-bar .el-input,
  body.geo-mob .search-bar .el-input-number{
    flex:1 1 40% !important; min-width:120px !important; width:auto !important;
  }
  body.geo-mob .search-bar .el-button{ flex:0 0 auto !important; }

  /* ===== [GEOFIX-20260927-8] R14 第 3 条：数字人成片 form | preview 横排 → 手机端竖向堆叠；preview 宽 619 溢出被裁 → 容器内横向滑动 =====
     取证（390）：.digital-human-layout 是 form-col(320) | preview-col(619) 横排，preview(视频装修) 619px 被
     el-card overflow:hidden 裁掉右侧内容。修法：竖向堆叠（form 在上、preview 在下），preview-col 自身 overflow-x:auto，
     内部 619px 视频装修面板可在该列内左右滑动查看。 */
  body.geo-mob .digital-human-layout{ flex-direction:column !important; align-items:stretch !important; }
  body.geo-mob .digital-human-form-col,
  body.geo-mob .digital-human-preview-col{
    width:100% !important; max-width:100% !important; flex:1 1 auto !important;
  }
  body.geo-mob .digital-human-preview-col{
    overflow-x:auto !important; -webkit-overflow-scrolling:touch !important;
  }
  body.geo-mob .digital-human-preview-col .video-decorate-preview{
    width:619px !important; max-width:none !important;
  }

  /* ===== [GEOFIX-20260927-9] R14 第 4 条：个人中心 左 nav(60px) | 右内容(298px) 横排挤压变形 → 竖向堆叠，nav 变顶部横条 =====
     取证（390）：.flex.h-full.w-full 把 [左 nav 60px][右内容 298px] 横排，左 nav 60px 把「基本设置/版权水印/实名认证/修改密码」
     4 个设置按钮挤成竖条。修法（JS 已给该行打 geo-profile-row）：容器改 column，nav/content 都 100% 宽；
     nav 内设置按钮由竖排改为横排可滑动；表单行 label 在上、内容在下。 */
  body.geo-mob .geo-profile-row{ flex-direction:column !important; align-items:stretch !important; height:auto !important; }
  /* R15 第 1 条：两张卡片左对齐（去掉第二张 16px 左偏移）、加 16px 间距、高度自适应（不再裁掉"修改密码"） */
  body.geo-mob .geo-profile-row > .rounded-xl{
    width:100% !important; max-width:100% !important;
    height:auto !important; min-height:0 !important;
    margin:0 0 16px 0 !important; box-sizing:border-box !important;
  }
  /* 左 nav 内部：设置按钮区由竖排改为横排可滑动 */
  body.geo-mob .geo-profile-row > .rounded-xl:first-child .m-4{ width:auto !important; }
  body.geo-mob .geo-profile-row > .rounded-xl:first-child .h-9{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
    align-items:center !important; width:100% !important; gap:8px !important;
    height:auto !important; min-height:36px !important;
  }
  body.geo-mob .geo-profile-row > .rounded-xl:first-child .h-9 > *{ width:auto !important; height:auto !important; }
  /* 右内容：主设置块与表单行竖向铺满 */
  body.geo-mob .geo-profile-row .profile-base-setting{ width:100% !important; }
  body.geo-mob .geo-profile-row .profile-form-row{ flex-direction:column !important; align-items:flex-start !important; }
  body.geo-mob .geo-profile-row .profile-form-label{ width:auto !important; }
  body.geo-mob .geo-profile-row .profile-form-content{ width:100% !important; max-width:100% !important; }
}