/* ============================================================
   RY-TOUCH · 全站触屏按钮分场景按压体系（R61, v=ry1）
   适用：购物车 / 会员中心 / 登录等非首页页面（手机端）
   架构：事件级 tPress/tBack 通道（ry-touch.js）+ 本 CSS 分场景深度
   ------------------------------------------------------------
   场景分层（深度结合使用场景）：
   A 转化按钮（立即部署/购买/结算——「下决心」时刻）→ 深按 0.94 + 弹性回弹
   B 工具按钮（搜索/筛选/取消——辅助操作）→ 轻按 0.96
   C 弹窗按钮（公告/等级/MessageBox——modal 空间小）→ 轻快 0.95/0.96 + 短回弹
   D 文字链（el-button--text——文字缩放会模糊）→ opacity 反馈，不缩放
   E 图标钮（弹窗关闭/圆形——小目标）→ 深按 0.9
   ------------------------------------------------------------
   纪律（首页 R33-R60 教训平移）：
   · 零 box-shadow 参与按压（R50 阴影恒定）
   · :active transform 归零在前（R48 改造内核滞留防御）
   · hover 大跳变（位移/亮度/扫光）触屏中和（R33/R50 sticky hover）
   · 层生命周期 = 动画生命周期：animationend 销毁 + 300ms 兜底（R47）
   · keyframe 0% = tPress 值，类切换零跳变（R55）
   · loading/disabled 豁免（JS 判定 + CSS 双保险）
   ============================================================ */

/* ① :active transform 归零（必须写在 tPress 之前） */
@media (hover: none) {
  *:active { transform: none !important; }
}

/* ② 按压基线（快压 0.05s）与回弹基线
   R62: 基线补 0.96 兜底深度——非 Element 自定义按钮（如 kefu 的
   btn-main、未来页面新增类）不匹配任何场景类时也有基础按压；
   场景类以更高特异性/同权后序覆盖更深值 */
.tPress {
  transform: scale(0.96) !important;
  transition: transform 0.05s ease-out, opacity 0.05s ease-out !important;
}
.tBack  { animation: ryBackB 0.24s cubic-bezier(0.3, 0.7, 0.4, 1) backwards !important; }

/* 场景 A+ · 独立页主行动按钮（kefu 唤起QQ——页面唯一转化入口） */
.btn-main.tPress { transform: scale(0.94) !important; }
.btn-main.tBack  { animation: ryBackA 0.24s cubic-bezier(0.3, 0.7, 0.4, 1) backwards !important; }

/* 场景 A · 转化按钮（主操作） */
@media (hover: none) {
  .el-button--primary.tPress,
  .buy-btn.tPress {
    transform: scale(0.94) !important;
  }
  .el-button--primary.tBack,
  .buy-btn.tBack {
    animation: ryBackA 0.24s cubic-bezier(0.3, 0.7, 0.4, 1) backwards !important;
  }
}

/* 场景 B · 工具按钮（次要操作）——基线 0.96 / ryBackB */
@media (hover: none) {
  .el-button--default.tPress,
  .el-button--warning.tPress,
  .el-button--info.tPress {
    transform: scale(0.96) !important;
  }
}

/* 场景 F · 危险操作（R63：删除/退款/注销类 danger 按钮）——
   轻按 + 无过冲直回：危险操作的反馈应克制，不给弹性「奖励」 */
@media (hover: none) {
  .el-button--danger.tPress {
    transform: scale(0.96) !important;
  }
  .el-button--danger.tBack {
    animation: ryBackF 0.18s cubic-bezier(0.4, 0, 0.2, 1) backwards !important;
  }
}
@keyframes ryBackF { from { transform: scale(0.96); } to { transform: scale(1); } }

/* 场景 E 补 · 分页器（R63：商品列表/订单列表翻页）——小目标深按 */
@media (hover: none) {
  .el-pagination .btn-prev.tPress,
  .el-pagination .btn-next.tPress,
  .el-pager li.tPress {
    transform: scale(0.9) !important;
  }
  .el-pagination .btn-prev.tBack,
  .el-pagination .btn-next.tBack,
  .el-pager li.tBack {
    animation: ryBackE 0.22s cubic-bezier(0.3, 0.7, 0.4, 1) backwards !important;
  }
}

/* 场景 C · 弹窗按钮（modal 内，轻快短回弹） */
@media (hover: none) {
  .el-dialog .el-button--primary.tPress,
  .el-message-box .el-button--primary.tPress {
    transform: scale(0.95) !important;
  }
  .el-dialog .el-button--primary.tBack,
  .el-message-box .el-button--primary.tBack {
    animation: ryBackC 0.2s cubic-bezier(0.3, 0.7, 0.4, 1) backwards !important;
  }
  /* 弹窗内次要钮走 B 基线，回弹同用短程 */
  .el-dialog .el-button--default.tBack,
  .el-message-box .el-button--default.tBack {
    animation: ryBackC 0.2s cubic-bezier(0.3, 0.7, 0.4, 1) backwards !important;
  }
}

/* 场景 D · 文字链（不缩放，透明度反馈） */
@media (hover: none) {
  .el-button--text.tPress,
  a.tPress {
    transform: none !important;
    opacity: 0.55 !important;
    transition: opacity 0.05s ease-out !important;
  }
  .el-button--text.tBack,
  a.tBack {
    animation: ryBackD 0.18s ease-out backwards !important;
  }
}

/* 场景 E · 图标钮 / 弹窗关闭（小目标强确认） */
@media (hover: none) {
  .el-dialog__headerbtn.tPress,
  .el-button.is-circle.tPress,
  .el-message-box__headerbtn.tPress {
    transform: scale(0.9) !important;
  }
  .el-dialog__headerbtn.tBack,
  .el-button.is-circle.tBack,
  .el-message-box__headerbtn.tBack {
    animation: ryBackE 0.22s cubic-bezier(0.3, 0.7, 0.4, 1) backwards !important;
  }
}

/* 回弹 keyframes（0% = 对应 tPress 值，零跳变） */
@keyframes ryBackA { from { transform: scale(0.94); } 55% { transform: scale(1.016); } to { transform: scale(1); } }
@keyframes ryBackB { from { transform: scale(0.96); } 55% { transform: scale(1.012); } to { transform: scale(1); } }
@keyframes ryBackC { from { transform: scale(0.95); } 60% { transform: scale(1.008); } to { transform: scale(1); } }
@keyframes ryBackD { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes ryBackE { from { transform: scale(0.9); } 55% { transform: scale(1.02); } to { transform: scale(1); } }

/* ③ hover 大跳变中和（sticky hover 防御——触屏端） */
@media (hover: none) {
  /* buy-btn.ry-deploy：位移+亮度+阴影增强+扫光全部中和（基态值固定） */
  .buy-btn.ry-deploy:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: 0 8px 22px -8px rgba(11, 122, 84, 0.40) !important;
  }
  .buy-btn.ry-deploy:hover::after {
    transform: translateX(-130%) !important;
  }
  /* Element 主钮 hover 色挂住幅度小可接受，但位移类全部归零 */
  .el-button:hover { transform: none !important; }
}

/* ④ loading / disabled 不参与（CSS 双保险） */
.is-loading.tPress,
.is-disabled.tPress {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
.is-loading.tBack,
.is-disabled.tBack {
  animation: none !important;
}

/* ⑤ 人体工学 */
html { touch-action: manipulation; }
* { -webkit-tap-highlight-color: transparent !important; }

/* ⑥ 焦点环清零（触屏） */
@media (hover: none) {
  *:focus { outline: none !important; }
  *:focus-visible { outline: none !important; }
}

/* ============================================================
   R65 · RY-SHEET 移动端弹窗底座（≤760px，v=ry4）
   三视角设计：Apple HIG（bottom sheet 拇指可达 + grabber 手势
   暗示）/ MD3（emphasized 入场、body 独立滚动、footer 固定、
   safe-area）/ 信任设计（scrim 上下文保留、单 CTA、防误触距离）。
   全站 el-dialog / el-message-box 自动变形——彻底替换 Element
   的 PC 居中 modal（无遮罩贴边/按钮小/拇指不可达的根源）。
   特异性用 wrapper 前缀 (0,2,0) 压过组件 css 动态后插的
   !important (0,1,0)（如 client-level-dialog 的 margin-top）。
   ============================================================ */
@media (max-width: 760px) {
  /* 主体：固定底部全宽 sheet，圆角卡片顶 */
  .el-dialog__wrapper .el-dialog,
  .el-message-box__wrapper .el-message-box {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 86vh !important;
    border-radius: 20px 20px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 -12px 48px rgba(16, 26, 21, 0.18) !important;
    animation: rySheetIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  /* grabber 拖拽条（HIG：暗示下滑关闭） */
  .el-dialog__wrapper .el-dialog::before,
  .el-message-box__wrapper .el-message-box::before {
    content: "" !important;
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    width: 36px !important;
    height: 4px !important;
    margin-left: -18px !important;
    border-radius: 2px !important;
    background: rgba(16, 26, 21, 0.14) !important;
    z-index: 3 !important;
  }
  /* 头部：为 grabber 让位 */
  .el-dialog__wrapper .el-dialog__header,
  .el-message-box__wrapper .el-message-box__header {
    padding: 24px 20px 12px !important;
  }
  .el-dialog__wrapper .el-dialog__title {
    font-size: 17px !important;
    font-weight: 700 !important;
  }
  /* 内容：独立滚动区 */
  .el-dialog__wrapper .el-dialog__body,
  .el-message-box__wrapper .el-message-box__message {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4px 20px 16px !important;
  }
  /* 按钮：全宽堆叠 + safe-area（防误触距离 + 拇指命中区） */
  .el-dialog__wrapper .el-dialog__footer,
  .el-message-box__wrapper .el-message-box__btns {
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column-reverse !important; /* 主确认在下更近拇指 */
    gap: 10px !important;
  }
  .el-dialog__wrapper .el-dialog__footer .el-button,
  .el-message-box__wrapper .el-message-box__btns .el-button {
    width: 100% !important;
    margin: 0 !important;
    height: 48px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }
  /* 关闭 X：命中区加大 */
  .el-dialog__wrapper .el-dialog__headerbtn {
    top: 18px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
  }
  /* MessageBox 内容边距 */
  .el-message-box__wrapper .el-message-box__content {
    padding: 6px 20px 14px !important;
  }
}
@keyframes rySheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}