/* 合规认证弹窗（components/public/me/VerifyModal.tsx）
 *
 * 只写外壳：里面三步的内容组件（KybCompanyStep / KybIdentityStep / TermsReaderView）是
 * 从整页流程直接复用的，它们自带样式，这里不重写、也不覆盖它们的内部规则 —— 一旦开始
 * 覆盖，整页和弹窗就会各自长歪。
 *
 * 值一律照 .claude/skills/bonjour-ui/SKILL.md 抄（§12：别去别的 css 文件 grep 现有值）。
 */

.me-verifymodal {
  position: relative; /* 底栏要绝对定位压在滚动区之上，见 .me-verifymodal-foot */
  /* ⚠️ 曾经是 min(94vw, 720px)：在 ≥766px 的视口上恒等于 720，名义上响应式、桌面上
     其实写死。改成真正的流体宽度，桌面端约占视口一半（1280→640、1440→720、1512→756、
     1920→960 封顶）。下限 600 保证三步表单里的分段控件、上传框和两列字段不被压变形；
     上限 960 免得超宽屏上一个表单横跨整个视野。外层 min(94vw, …) 兜住窄屏，不会因为
     600 的下限溢出；<720px 另有整屏规则接管。 */
  width: min(94vw, clamp(600px, 50vw, 960px));
  /* 固定高度：主体是分步表单 + 异步内容，一打开就定到目标高度，绝不按内容自适应 ——
     否则「协议 → 企业 → 实名」每切一步弹窗都在长高缩短，比没有动效更廉价。
     内容多了由 .me-verifymodal-body 内部滚动接管。同 .me-modal-dialog--fixed 的硬规则。 */
  height: min(780px, calc(100dvh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.055);
  border-radius: 24px;
  -webkit-corner-shape: squircle;
  corner-shape: squircle;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 30px 80px -20px rgba(0, 0, 0, 0.35);
  outline: none;
  /* 复用全站弹窗那条升起动效（keyframes 定义在 me-modal.css，全局可见），不另造一套。
     .26s：这个面板最大 640×780，比一般弹窗大（§5.2「元素越大越慢」）。 */
  animation: me-modal-rise .26s cubic-bezier(.2, 0, 0, 1);
}

/* 头部 = 当前步标题 + 关闭按钮。标题靠左、按钮靠右，顶端对齐（标题可能两行）。
   常驻的「用人单位认证」已去掉：它不提供本步信息，只把真正的标题往下挤。 */
.me-verifymodal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 4px;
}
/* 返回键与标题同排 —— 与整页认证流程（KybSteps 的 .me-page-top）保持同一套页头结构，
   只是搬进了弹窗顶栏。 */
.me-verifymodal-headline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.me-verifymodal-head .me-page-titlecol {
  min-width: 0;
}
/* 弹窗里的步骤标题比整页流程小两档（20 → 16）：弹窗本身已经是个受限画布，
   20px 在这个宽度里显得压迫。只在弹窗内收窄，整页认证流程不受影响。 */
.me-verifymodal-head .me-jobform-title {
  font-size: 16px;
}

/* 弹窗比整页窄，这两个定宽控件靠左会在右侧留一大片空 —— 居中让它们和弹窗的视觉中轴对齐。
   ⚠️ 只居中控件本身，字段标签（营业执照 / 用人单位主体）仍然靠左：标签是阅读起点，
   一起居中会让每个字段的起读位置随控件宽度左右浮动，纵向扫读反而更累。
   只在弹窗内生效 —— 整页认证流程版心宽，靠左是对的。 */
.me-verifymodal-body .kyb-drop--license,
.me-verifymodal-body .kyb-seg {
  margin-inline: auto;
}
/* ⚠️ 段控本体是 inline-grid（行内级盒子），**对 margin:auto 不响应** —— 只写 margin-inline
   看着像没生效。这里把它降成块级 grid，width:max-content 仍由它自己保留，auto 边距才真的
   把它推到中间。执照上传框本身是 flex（块级），不需要这一步。 */
.me-verifymodal-body .kyb-seg {
  display: grid;
  /* 上下各多留 12（叠上 body 的 12px gap = 实际 24）：这一档是「先决定走哪条路」，
     选完下面才出现对应的件。跟后面那串常规字段拉开距离，读起来才像一个岔路口而不是
     表单第一行。⚠️ 12 走的是间距阶梯，别随手改成 10 / 14。 */
  margin-block: 12px;
}

/* 协议阅读区撑满 body 的剩余高度。弹窗是固定高度的，阅读区用固定 height 会在下面留一截
   白 —— 那块面积本可以用来读协议，白着只会让用户多滚几屏。min-height:0 是 flex 子项能
   真正收缩、内部自己滚动的前提，缺了它 flex:1 会被内容撑破。 */
.me-verifymodal-body .tx-terms-reader {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

/* 主体滚动区。gap 12 是「同一组内」的紧凑节奏（§3 间距阶梯）。 */
.me-verifymodal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 底部 84 = 底栏实际高度（12 + 按钮 ~50 + 22）。内容滚到最后一屏时最后一个字段刚好
     停在底栏上沿，不会被永久压住；中间过程则从底栏的毛玻璃后面透出来。 */
  /* 顶部 22 = 原 4 + 18：header 的标题与正文第一个字段之间要有明确的一档呼吸。
     ⚠️ 三步（协议 / 企业 / 实名）共用这一个 body，所以这里改一次三步一起生效 ——
     别再往各步组件里补各自的上边距，那样迟早三步不一样。 */
  padding: 22px 28px 84px;
}

/* 完成态 / 无权限态：内容少，居中撑满，别贴在顶上显得没做完。 */
.me-verifymodal-done {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}
.me-verifymodal-done h3 {
  margin: 0;
  color: #1d1d1f;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
}
/* §3 层级靠颜色不靠字重；65ch 是正文行宽上限，太长会串行。 */
.me-verifymodal-done p {
  margin: 0;
  max-width: 46ch;
  color: #86868b;
  font-size: 15px;
  line-height: 1.6;
}
.me-verifymodal-done .me-btn {
  min-width: 160px;
  justify-content: center;
}

/* 底栏：左边说明 / 报错，右边主动作。用留白与主体分开，不画分割线（§1）。 */
/* 半透明 + 毛玻璃：底栏**压在**滚动内容之上，下面的东西从它后面透出来，用户就知道
   「还没到底、还能往下滚」。纯白不透明的底栏会把内容切得像已经结束了。
   ⚠️ 必须 absolute 而不是 sticky：底栏是 .me-verifymodal-body 的**兄弟节点**、不在那个
   滚动容器里，sticky 对它没有任何作用，透出来的只会是弹窗白底。让位靠 body 的
   padding-bottom（见上），所以内容仍然滚得到底。
   backdrop-filter 不支持时退化成半透明白 —— 少了模糊，但「透」这个信息还在。 */
.me-verifymodal-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 28px 22px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
/* 阅读门提示是进度说明不是报错 —— 中性灰，不用红（红会让人以为自己做错了）。 */
.me-verifymodal-hint {
  color: #86868b;
  font-size: 13px;
  line-height: 1.5;
}

/* 骨架：与真实内容同构（标题 + 说明 + 表单块 + 两行输入），高度由同一套 padding/gap 撑出来。
   不用「居中转圈 + 写死高度」—— 那个高度是魔法数字，跟真实内容对不上，揭示那下就会跳（§4）。 */
.me-verifymodal-skel {
  display: block;
  border-radius: 10px;
  background: #f5f5f5; /* design-ok: 骨架占位块，与站内其它骨架同色 */
  /* design-ok: 持续循环的加载指示，非交互动效，不适用 §5.2 的 300ms 上限 */
  animation: me-verifymodal-skel-pulse 1.4s ease-in-out infinite;
}
@keyframes me-verifymodal-skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .me-verifymodal { animation: none; }
  .me-verifymodal-skel { animation: none; }
}

@media (max-width: 720px) {
  .me-verifymodal {
    width: 100%;
    height: calc(100dvh - 24px);
    border-radius: 20px;
  }
  .me-verifymodal-head { padding: 20px 18px 10px; }
  .me-verifymodal-body { padding: 4px 18px 16px; }
  .me-verifymodal-foot { padding: 12px 18px 18px; }
}