/* ============================================================
   触摸友好层（前后台共用）
   1) 所有可点元素最小 44×44（Apple HIG / Material 建议）
   2) 图标类按钮用 ::after 扩大热区，不影响视觉尺寸
   3) 弹层（AI 面板 / 风格面板 / 侧栏）统一支持点击遮罩关闭
   ============================================================ */

/* ---- 基础：小目标热区扩大 ---- */
.icon-btn,
.pf-burger,
.nav-toggle,
.pf-ai-close,
.pf-login,
.style-switch > .icon-btn,
.pf-lang a,
.pill,
.tag{
  position:relative;
}
/* 用伪元素把可点热区撑到 44×44，不改变视觉大小 */
.icon-btn::after,
.pf-burger::after,
.nav-toggle::after,
.pf-ai-close::after,
.style-switch > .icon-btn::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px);
  /* 伪元素默认会挡住兄弟，置 -1 让它只接收点击 */
  z-index:-1;
  border-radius:inherit;
}
/* z-index:-1 需要父级建立层叠上下文才有效 */
.icon-btn,.pf-burger,.nav-toggle,.pf-ai-close,.style-switch>.icon-btn{
  isolation:isolate;z-index:0;
}

/* ---- 触屏：直接放大尺寸（比伪元素更可靠） ---- */
@media(hover:none) and (pointer:coarse){
  .icon-btn,
  .pf-burger,
  .nav-toggle,
  .pf-ai-close,
  .style-switch > .icon-btn{
    min-width:44px;min-height:44px;
  }
  .pf-lang a{width:38px;height:38px;font-size:15px}
  .pf-login{min-height:44px;padding:10px 16px}
  .pill,.tag{min-height:34px;display:inline-flex;align-items:center;justify-content:center}
  .side-nav a{min-height:42px;display:flex;align-items:center}
  .filters .btn,.btn{min-height:42px}
  .pf-ai-quick span{min-height:36px;display:inline-flex;align-items:center}
  .pf-ai-send,.pf-ai-input button{min-width:44px;min-height:44px}
  .pf-sec-more{min-height:36px;display:inline-flex;align-items:center}
  .pf-region-focus span,.pf-pr-tags span{min-height:28px;display:inline-flex;align-items:center}
  /* 表格行可点 */
  table tr[onclick],table tr[data-href]{min-height:44px}
}

/* ---- 弹层遮罩（点击外部关闭） ---- */
.pf-ai-scrim,
.style-scrim{
  position:fixed;inset:0;z-index:940;
  background:rgba(12,24,48,.34);
  backdrop-filter:blur(1.5px);
  animation:tfFade .18s ease-out;
}
@keyframes tfFade{from{opacity:0}to{opacity:1}}
/* AI 面板与风格面板需在遮罩之上 */
.pf-ai-panel{z-index:960}
.style-panel{z-index:1200}
.pf-ai-fab{z-index:950}
.style-switch{z-index:1210}

/* 遮罩出现时禁止背景滚动（移动端） */
body.tf-locked{overflow:hidden}

/* ---- 关闭按钮更醒目 ---- */
.pf-ai-close{
  font-size:22px;line-height:1;
  display:grid;place-items:center;
  color:var(--pf-t2);
  transition:background .16s,color .16s,transform .16s;
}
.pf-ai-close:hover{background:rgba(220,38,38,.10);color:#DC2626;transform:rotate(90deg)}
.pf-ai-close:active{transform:rotate(90deg) scale(.92)}
/* 扩大热区 */
.pf-ai-close::before{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:12px;
}

/* 侧栏遮罩层级（后台） */
.nav-scrim{z-index:55}
.sidebar{z-index:70}

/* ---- 移动端：AI 面板改为可下滑关闭 ---- */
@media(max-width:767px){
  .pf-ai-panel{
    right:8px;left:8px;bottom:76px;
    width:auto;max-height:74vh;
    border-radius:16px;
  }
  .pf-ai-head{
    padding:12px 14px;
    /* 顶部加大拖拽提示区 */
    min-height:52px;
    position:relative;
    touch-action:none;
  }
  .pf-ai-head::after{
    content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
    width:36px;height:4px;border-radius:2px;background:var(--pf-t3);opacity:.35;
  }
  .pf-ai-close{
    width:40px;height:40px;flex-shrink:0;
    font-size:24px;
  }
}

/* ---- 移动端弹层：面板在遮罩之上，关闭按钮可点 ---- */
@media(max-width:767px){
  .style-scrim{position:fixed;inset:0;z-index:1150}
  .style-panel{
    position:fixed;left:10px;right:10px;top:auto;bottom:74px;
    width:auto;max-height:72vh;overflow-y:auto;
    z-index:1200;
    -webkit-overflow-scrolling:touch;
  }
  /* 风格面板在窄屏时不再依赖 absolute 定位 */
  .style-switch>.icon-btn{position:relative;z-index:1210}
  /* 面板内主题/背景按钮加大 */
  .sp-theme{min-height:46px}
  .sp-bg .sp-thumb{height:48px}
  .sp-name{padding:7px 4px;font-size:11px}
  .sp-admin{min-height:44px;display:flex;align-items:center;justify-content:center}
}

/* ============================================================
   修正：移动端风格面板跑出视口
   原因：.style-switch 只有 z-index 没有 position，
   z-index 依赖定位才生效；同时面板用 fixed 时若祖先有
   transform/filter/backdrop-filter 会改变包含块。
   做法：移动端把面板挂到 body 下（JS 移动节点）+ 显式定位
   ============================================================ */
@media(max-width:767px){
  .style-switch{position:relative;z-index:1210}
  /* 面板直接 fixed 于视口，靠 JS 移到 body 末尾以脱离顶栏的包含块 */
  body > .style-panel{
    position:fixed !important;
    left:10px !important;right:10px !important;
    top:auto !important;bottom:74px !important;
    width:auto !important;max-height:72vh;overflow-y:auto;
    z-index:1200;
    -webkit-overflow-scrolling:touch;
    animation:spIn .2s ease-out;
  }
  /* 顶栏本身有 backdrop-filter，需在移动端解除以免生成包含块 */
  .topbar{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  .topbar{background:var(--bg-2) !important}
}
/* 桌面端顶栏保留毛玻璃 */
@media(min-width:768px){
  .topbar{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}

/* 补齐：汉堡按钮触屏尺寸（上面 44px 规则被 34px 的断点规则覆盖了） */
@media(hover:none) and (pointer:coarse){
  .pf-burger{width:44px !important;height:44px !important;flex-shrink:0}
  .pf-head-in{gap:10px}
  .pf-logo-mark{width:36px;height:36px}
}

/* ============================================================
   触摸目标尺寸：改用「视口宽度」判定
   原因：headless/桌面浏览器无法模拟 (pointer:coarse)，
   用 max-width 兜底才能在真机与自动化测试里都生效。
   ============================================================ */
@media(max-width:1023px){
  .pf-burger{width:44px;height:44px;flex-shrink:0}
  .icon-btn,.nav-toggle,.style-switch>.icon-btn{min-width:44px;min-height:44px}
  .pf-ai-close{width:44px;height:44px}
  .pf-lang a{width:38px;height:38px}
  .pf-login{min-height:44px;padding:10px 16px}
  .side-nav a{min-height:42px;display:flex;align-items:center}
  .pf-head-in{gap:10px}
  .pf-logo-mark{width:36px;height:36px}
  .user-chip{min-height:44px}
  .region-switch a{min-height:38px;display:inline-flex;align-items:center}
}

/* 文字型链接：宽度已足够，仅补足高度到可点区域（不改变视觉行高） */
@media(max-width:1023px){
  .pf-sec-more{min-height:36px;display:inline-flex;align-items:center}
  .pf-foot-grid>div>a{min-height:34px;display:flex;align-items:center}
  .pf-region-focus span,.pf-pr-tags span{min-height:30px;display:inline-flex;align-items:center}
  .pf-art-cap a{min-height:32px;display:flex;align-items:center}
  /* 整行可点的长链接（政策条目/页脚链接）加大点击行高 */
  .pf-pol-row a,.pf-pr-main{min-height:44px}
}
/* 桌面端不干预，保持原视觉 */

/* ============================================================
   智能助手默认关闭（强制兜底）
   即便 HTML 的 hidden 属性因缓存/时序未生效，
   面板与遮罩也绝不在首屏出现
   ============================================================ */
.pf-ai-panel[hidden],
.pf-ai-scrim[hidden]{
  display:none !important;
}
.pf-ai-panel:not([hidden]){
  display:flex !important;
}