/* 雇主收件箱（/team-manage/inbox）—— 组件 components/public/me/OwnerInboxFeed.tsx
 *
 * 结构：日期段（.me-feed-section）→ 职位卡（.me-feed-card）→ 事件行（.me-feed-item）。
 * 值一律照 .claude/skills/bonjour-ui/SKILL.md 抄，不要去别的 css 文件 grep 现有值
 * （SKILL.md §12：那样会复制到统一之前的旧值）。
 */

/* §1 分组靠留白：日期段之间用大间距拉开，不加分割线也不加底色。 */
.me-feed-sections {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.me-feed-section {
  display: flex;
  flex-direction: column;
  /* 日期标题与当天那张卡之间的呼吸。12 → 15：标题贴卡太紧，读起来像卡的一部分
     而不是它的抬头（§1 分组靠留白）。窄屏不另设覆写，跟着一起放宽。 */
  gap: 15px;
}

.me-feed-section-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px;
}
/* §3 层级靠颜色不靠字重：日期与条数同字号，只差墨色。 */
.me-feed-date {
  margin: 0;
  color: #1d1d1f;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.me-feed-count {
  color: #86868b;
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* §2 职位卡 = 容器，全站唯一那套描边 + 轻阴影（不用大扩散阴影，多卡同屏会叠灰）。 */
/* 一天一张卡（原来是「一个职位一张卡」，同一天有几个岗就横着摞几张，同一天的事
   被切成好几块）。职位名仍是卡内的组标题，只是不再各自带一层卡壳。 */
.me-feed-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 24px -12px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  -webkit-corner-shape: squircle;
  corner-shape: squircle;
  padding: 8px;
}
/* 组之间用留白分开（§1），不画线 —— 组标题本身已经是分界。
   ⚠️ 4px 太小：上一组末行的 padding-bottom(12) + 这 4 + 下一组标题的 padding-top(10)
   合起来才 26px，和组**内**行距几乎一样，两个职位卡读起来是连着的一坨。
   加到 28 让墨到墨约 50px，组间明显大于组内（§1 留白分组）。 */
.me-feed-group + .me-feed-group {
  margin-top: 28px;
}

/* 组标题 = 职位名。<summary> 默认带一个三角形 marker，去掉换成自己的 chevron。 */
.me-feed-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  border-radius: 14px;
  -webkit-corner-shape: squircle;
  corner-shape: squircle;
  transition: background-color 0.15s ease;
}
.me-feed-card-head::-webkit-details-marker {
  display: none;
}
.me-feed-card-head:hover {
  /* design-ok: 行的 hover 临时态，§1 明列的 #f5f5f5 两个合法用途之一 */
  background: #f5f5f5;
}
.me-feed-job {
  flex: 1;
  min-width: 0;
  color: #1d1d1f;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 折叠指示：未展开朝右、展开后朝下（仓库既有约定：base 朝右 + 展开 rotate 90）。 */
.me-feed-chev {
  flex: none;
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #a1a1a6;
  transition: transform 0.15s ease;
}
.me-feed-chev svg {
  width: 16px;
  height: 16px;
}
.me-feed-group[open] > .me-feed-card-head .me-feed-chev {
  transform: rotate(90deg);
}

/* 未读蓝点。跟推荐工作台同一个含义、同一份读态（localStorage），所以也用同一支品牌蓝。
   ⚠️ 槽位宽度必须等于行尾箭头（.sw-arrow 的 22px）：组标题的点和它下面每一行的箭头
   是同一条竖轴上的一列。之前点本身只有 8px，中心比箭头中心右移 7px（14+4 vs 14+11），
   看起来像飘在列外面。只给宽不给高 —— 高度留给内容，免得把组标题撑高 1px（§4）。 */
.me-feed-dot {
  flex: none;
  width: 22px;
  display: inline-flex;
  justify-content: center;
}
.me-feed-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2e84fa;
}

.me-feed {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 行间 hairline。⚠️ 这是对 SKILL.md §1「分组靠留白、不画分割线」的**偏离**，2026-08-14 由
   Vincent 按参考稿明确拍板。收口在这一条选择器上：只画行与行之间那一根，卡片本身和
   日期段之间仍然只用留白，不要再往别处加线。分割线用独立伪元素画，不能借用带圆角的
   .me-feed-row 边框，否则线的两端会跟着 top border-radius 向下弯。 */
.me-feed-item {
  position: relative;
}
.me-feed-item + .me-feed-item::before {
  /* design-ok: 行间分割线，照参考稿实现，Vincent 2026-08-14 明确拍板 */
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  border-top: 1px solid #ececef;
  pointer-events: none;
  transition: border-color 0.15s ease;
}
/* 悬浮时把这一行**上下**两根线一起隐掉，让高亮块读起来是完整一块，而不是被两根
   线切开的一段。第二条选的是「被悬浮那一行的下一行」，它的上边线正是悬浮行的下边界。 */
.me-feed-item:has(> .me-feed-row:hover)::before,
.me-feed-item:has(> .me-feed-row:hover) + .me-feed-item::before {
  border-top-color: transparent;
}

.me-feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 14px;
  -webkit-corner-shape: squircle;
  corner-shape: squircle;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.me-feed-row:hover {
  /* design-ok: 行的 hover 临时态，§1 明列的 #f5f5f5 两个合法用途之一 */
  background: #f5f5f5;
}

/* 行头像。三档共用这一个尺寸（Bonnie 图 / 候选人真实头像 / 姓名首字），所以将来接上
   真实头像时行高不变（§4）。⚠️ 必须显式 inline-flex：<span> 默认是 inline，
   width/height 压根不生效 —— 之前就是这么变成一个看不见的空位的。 */
.me-feed-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 18 = 与 14px 正文齐平的内联尺寸。它是句子里的「谁」，不是行首身份块。 */
  width: 18px;
  height: 18px;
  margin-right: 4px;
  border-radius: 999px;
  object-fit: cover;
  background: #f0f0ee; /* design-ok: 头像占位底，同收件箱详情页 .cvx-avatar */
  color: #86868b;
  font-size: 10px;
  line-height: 1;
  overflow: hidden;
}
.me-feed-avatar--initial {
  /* 首字兜底：跟 .cvx-avatar 同一套观感，不另造一种占位。 */
  user-select: none;
}

/* 「还有 N 位」收口行：它不参与已读 / 未读那套（没有单条读态可言），但**不能因此
   长成已读**。之前钉了 #86868b，于是它在整屏里恒定是最暗的一行 —— 而它背后正是一批
   一次都没被看过的候选人，读起来却像「这条已经处理完了」。
   取主文本色 + 400 字重：颜色上不被埋掉；真正有信息量的数量在下一条单独强调。 */
.me-feed-more .me-feed-title {
  color: #1d1d1f;
  font-weight: 400;
}
.me-feed-more-count {
  font-weight: 600;
}

/* 匹配度标签。低档位不挂标签（判定在 lib/shared/match-tier），所以这里只管有标签时的样子。 */
.me-feed-tier {
  flex: none;
  font-size: 13px;
  line-height: 1.4;
  color: #86868b;
}

.me-feed-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* 让下面的截断真的生效 */
  flex: 1;
}
.me-feed-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* 头像 + 标题的不换行单元。min-width:0 让下面的截断真的生效。 */
.me-feed-subject {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}
/* 谓语（「推荐了」）：句子的连接词，两侧各留一个字距。它跟着标题的已读/未读色走，
   所以这里不给颜色 —— 整句要一起沉下去，不能只沉一半。 */
.me-feed-verb {
  margin: 0 4px;
}
/* 一句话行：标题本身成了 flex 容器（主语 / 谓语 / 宾语），截断交给最后的宾语。 */
.me-feed-title:has(.me-feed-subject) {
  display: inline-flex;
  align-items: center;
}
.me-feed-title:has(.me-feed-subject) > .me-feed-subject:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 已读 / 未读不再靠一个 8px 蓝点区分，而是让整行沉下去：未读 500 + 主文本色，
   已读 400 + 次要色。扫读时「哪些还没看」一眼分得出，不用去找那个小点。 */
.me-feed-title {
  /* ⚠️ 中性态（拿不到读态的行）用实色。之前这里是 #86868b、由 [data-unread] 去覆盖，
     等于把「已读」当默认 —— 投递行、回复行、「还有 N 位」收口行、Bonnie 加载行都没有
     读态可言，却因为拿不到 data-unread 全被画成已读。见 [[OwnerInboxFeed]] 的 FeedReadState。 */
  color: #1d1d1f;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.375;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 确知已读 → 整行退后。这是唯一该变灰的情形。 */
.me-feed-row[data-read] .me-feed-title {
  color: #86868b;
}
.me-feed-row[data-unread] .me-feed-title {
  font-weight: 500;
}
/* 整句行（Bonnie 推荐了 XXX）：主语和谓语每行都一样，是样板字，不该跟着加粗抢注意力；
   真正属于这一行的信息只有候选人名字。所以未读加粗只落在句尾那个宾语上。
   非整句行（标题在 .me-feed-subject 里面）不受影响，仍整体加粗。 */
.me-feed-row[data-unread] .me-feed-title:has(> .me-feed-subject) {
  font-weight: 400;
}
.me-feed-row[data-unread] .me-feed-title > .me-feed-subject:last-child {
  font-weight: 500;
}
/* 已读行的头像跟着退后 —— 图片没法用文字色变淡，只能压透明度。
   ⚠️ 挂在 [data-read] 上，不是「默认压暗、未读再提亮」：后者会把所有没有读态的行
   一起压暗（用户实测发现「Bonnie 推荐了 15 位 Builder」那行的头像是半透明的）。 */
.me-feed-row[data-read] .me-feed-avatar {
  opacity: 0.55;
}
.me-feed-when {
  flex: none;
  margin-left: 10px;
  color: #86868b;
  font-size: 12.5px;
  line-height: 1.375;
  /* 等宽数字：不加的话「3 分钟前 / 12 分钟前」会让时间左右抖动，纵向扫读全废。 */
  font-variant-numeric: tabular-nums;
}

/* 候选人回复的原文摘录：写入时已截到 200 字，这里再限两行，免得一条回复吃掉半屏。 */
.me-feed-detail {
  color: #86868b;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 行尾指示器已改用共享组件 [[SwapArrow]]（tone="brand"：行本身有 hover 底色，
   所以只换箭头颜色、不再叠一块蓝圆）。样式在 swap-arrow.css，这里只留容器定位。 */
.me-feed-action {
  flex: none;
  display: inline-flex;
  align-items: center;
}

/* ── 临时行（Bonnie 正在找）────────────────────────────────────────────────
   它讲的是「正在发生」，不属于任何一天的历史，所以单独一张卡置顶、不挂日期标题。 */
.me-feed-card--pending {
  margin-bottom: 12px;
}
/* 临时卡的组标题不可折叠（没有历史可收起），所以去掉 summary 的手型和 hover 底。 */
.me-feed-card-head--static {
  cursor: default;
  padding-left: 14px;
}
.me-feed-card-head--static:hover {
  background: transparent;
}
/* 「Bonnie 还在找」这一行要一眼看出**正在进行中**，而不是一条已经躺平的历史记录。
   淡蓝底 = 进行中，与工作台里「正在按你的要求寻找 builder」那条同色同源
   （inbox-detail.css 的 .tib-sec-placeholder），两处说的是同一件事就别用两种样子。
   底色一直挂着直到这条 run 出结果 —— 出结果时整行会被真实结果替换掉，不是变灰。 */
.me-feed-row--pending {
  cursor: default;
  background: rgba(46, 132, 250, 0.055);
}
.me-feed-row--pending:hover {
  /* 不可点，就别给可点的暗示 —— 但也不能因此掉回白底，那样就不像在进行中了。 */
  background: rgba(46, 132, 250, 0.055);
}

/* 三点循环。持续运动用 linear（§5.1）—— 缓动会周期性顿一下，看起来像卡住了，
   而这里恰恰是要传达「在动、没卡」。只动 opacity，且挂在 8px 的小点上，
   不碰任何全内容高度的容器（AGENTS.md 移动端渲染红线）。 */
.me-feed-loading {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.me-feed-loading i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #a1a1a6;
  /* §5.2 的 300ms 上限管的是「用户点了之后在等」那类一次性动画；循环 spinner 压到 300ms
     只会抖得像卡住。 */
  /* design-ok: 持续循环的加载指示，非交互动效，不适用 300ms 上限 */
  animation: me-feed-dots 1.2s linear infinite;
}
.me-feed-loading i:nth-child(2) { animation-delay: 0.2s; }
.me-feed-loading i:nth-child(3) { animation-delay: 0.4s; }
@keyframes me-feed-dots {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .me-feed-loading i { animation: none; opacity: 0.6; }
}

.me-feed-empty {
  margin: 0;
  padding: 32px 4px;
  color: #86868b;
  font-size: 14px;
  line-height: 1.55;
}

/* 骨架条。行高与真实行一致，所以数据到达时不跳（§4）。呼吸动画只动 opacity，1.4s，
   且挂在这些小色块上而不是整列容器上 —— AGENTS.md「移动端渲染红线」：全内容高度的
   大容器加 opacity 动画会在 iOS 上打穿内存。 */
.me-feed-skel {
  display: block;
  height: 21px;
  border-radius: 8px;
  background: #f5f5f5; /* design-ok: 骨架占位块，与 me-shell 既有骨架同色 */
  animation: me-feed-skel-pulse 1.4s ease-in-out infinite;
}
.me-feed-skel--date { width: 96px; }
.me-feed-skel--job { width: 40%; }
.me-feed-skel--title { width: 58%; }
.me-feed-skel--sub { width: 76%; height: 18px; margin-top: 4px; }
.me-feed-skel--action { flex: none; width: 72px; }
@keyframes me-feed-skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .me-feed-skel { animation: none; }
  /* 折叠 chevron 的旋转 */
  .me-feed-chev { transition: none; }
}

/* ── 窄屏事件行：整句 → 「主体 / 说明」两层 ─────────────────────────────────
 * 为什么分两套结构而不是用 CSS 把整句重排：整句版的头像是**句子的一部分**
 * （主语头像 + 主语 + 谓语 + 宾语头像 + 宾语），窄屏要的是**行首身份列**（头像成列、
 * 跨两行）。这两种盒模型没有共同的父子关系，纯 CSS 互转需要一串 display:contents，
 * 脆且难验证。所以窄屏另起一块结构，用 display:contents 让桌面那块保持原样：
 * >720px 时 .me-feed-wide 的子元素仍然直接是 .me-feed-row 的 flex 子项，桌面零改动。
 *
 * 为什么主体上行、来源下行：「Bonnie 推荐了」是一批推荐里每行都一样的样板字，
 * 占着最该被扫读的位置；候选人和档位才是这一行独有的信息。
 */
.me-feed-wide { display: contents; }
.me-feed-narrow { display: none; }

@media (max-width: 720px) {
  /* §1 分组靠留白。56 是 SKILL.md 给移动端的组间距；原来的 40 不在 §3 阶梯里。 */
  .me-feed-sections { gap: 56px; }
  .me-feed-section { gap: 16px; }

  /* 组标题：纵向 12 把 <summary> 的点击区做到 45px（触控下限 44）；
     左右 12 与行内距对齐，标题和正文列不再差一截。 */
  .me-feed-card-head { padding: 12px; }
  /* 那 22px 槽位当初是为了跟行尾箭头对齐；窄屏行尾已无箭头，改为与行右端同一条边线。 */
  .me-feed-dot { width: auto; }

  .me-feed-wide { display: none; }

  .me-feed-row {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* ⚠️ 必须写：基础规则里是 center，不覆盖的话整块会缩成内容宽并居中 */
    justify-content: center;
    min-height: 56px;
    padding: 12px;
  }

  .me-feed-narrow {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas:
      "av name end"
      "av sub  sub";
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
  }
  .me-feed-av {
    grid-area: av;
    display: inline-flex;
    align-self: start; /* 头像贴第一行，而不是浮在两行中间 */
  }
  .me-feed-name {
    grid-area: name;
    color: #1d1d1f;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    /* 窄屏不截断成一行：长标题在 375px 上一行放不下，截掉的往往正是区分度最高的
       那半句（方向 / 届别 / 地点）。给两行，超出才省略。 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .me-feed-end {
    grid-area: end;
    align-self: start;
    display: inline-flex;
    flex-direction: row-reverse; /* 未读点固定在状态列最右端，与组标题的点共用一条边线 */
    align-items: center;
    gap: 8px;
    height: 20px; /* 与第一行等高，时间和标题上边线对齐 */
  }
  .me-feed-sub {
    grid-area: sub;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  /* 头像升为行首身份块。18 是整句版里「内联在句子中」的尺寸，这里不适用。 */
  .me-feed-narrow .me-feed-avatar {
    width: 28px;
    height: 28px;
    margin-right: 0;
    font-size: 13px;
  }

  /* §3 层级靠颜色：第二行同为常规字重，只降墨色和字号。 */
  .me-feed-meta {
    color: #86868b;
    font-size: 13px;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .me-feed-narrow .me-feed-when {
    margin: 0;
    font-size: 12px;
    line-height: 20px;
  }
  .me-feed-narrow .me-feed-detail {
    font-size: 13px;
    line-height: 18px;
  }
  /* 未读点：与推荐工作台、组标题同一支品牌蓝、同一份读态。 */
  .me-feed-rowdot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #2e84fa;
  }

  /* 读态落在第一行整句上（整句版是只加在句尾宾语上，窄屏第一行本身就只有主体）。 */
  .me-feed-row[data-unread] .me-feed-name { font-weight: 500; }
  .me-feed-row[data-read] .me-feed-name { color: #86868b; }

  /* 行间 hairline 从正文列起画（12 内距 + 28 头像 + 12 间隙 = 52），不再横穿头像列。
     ⚠️ 这根线是 §1 的既有例外（Vincent 2026-08-14 拍板），本次只改缩进，不要新增别的线。 */
  .me-feed-item + .me-feed-item::before { left: 52px; right: 12px; }

  /* 骨架屏与真实行同高（12 + 20 + 4 + 18 + 12 = 66），数据到达不跳（§4）。 */
  .me-feed-narrow .me-feed-skel--title { width: 64%; height: 20px; }
  .me-feed-narrow .me-feed-skel--sub { width: 70%; height: 18px; margin-top: 0; }
}

/* 触屏：hover 不是「悬停」而是「点完残留」，必须关掉并换成按下反馈。 */
@media (max-width: 720px) and (hover: none) {
  .me-feed-row.sw-host { -webkit-tap-highlight-color: transparent; }
  .me-feed-row.sw-host:hover { background: transparent; }
  .me-feed-item:has(> .me-feed-row.sw-host:hover)::before,
  .me-feed-item:has(> .me-feed-row.sw-host:hover) + .me-feed-item::before {
    border-top-color: #ececef;
  }
  /* design-ok: 行的按下临时态，§1 明列的 #f5f5f5 两个合法用途之一 */
  .me-feed-row.sw-host:active { background: #f5f5f5; }
  .me-feed-item:has(> .me-feed-row.sw-host:active)::before,
  .me-feed-item:has(> .me-feed-row.sw-host:active) + .me-feed-item::before {
    border-top-color: transparent;
  }
}