/* ===== 我的收藏 / 收藏详情 ===== */
/* 设计与理由见 PROMPT/23_我的收藏页.md
 * 页壳借 .ct-page 的变量、底色与滑入，只把层级抬到主页面之上；
 * 顶栏、搜索行、空状态、分组小标题、按钮都是复用件，本文件只写收藏自己的部分。
 * 本文件禁止出现 backdrop-filter 和 will-change，滑入只动 transform。 */
.cf-page,
.cf-view-page {
  --cf-card-r: 20px;             /* 收藏卡圆角，比列表行的 24 收一档：卡更方、行更圆 */
  --cf-gap: 10px;                /* 卡与卡之间 */
}

.cf-page { z-index: 11; }        /* 压在 .ct-page（10）之上，与编辑资料页 / 钱包页同级 */
.cf-view-page { z-index: 12; }   /* 详情页从收藏页点进来，还要再高一层 */

/* 两张页面都没有底栏兜着，底部安全区改由滚动区自己加 */
.cf-page .ct-body,
.cf-view-page .ct-body { padding-bottom: calc(24px + var(--sab)); }

/* ===== 三格筛选：同时也是三档计数 ===== */
/* 选中那格转深底，与名片上那颗 .ct-me-act.is-solid 是同一个做法 —— 取 --c-text 作底、
 * --c-bg 作字，夜间模式跟着两个变量自动反过来 */
.cf-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

.cf-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 14px 6px 12px;
  border-radius: var(--cf-card-r);
  background: var(--ct-fill);
  color: var(--c-text);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cf-tab:active { background: var(--ct-fill-press); }

.cf-tab.is-active {
  background: var(--c-text);
  color: var(--c-bg);
}
.cf-tab.is-active:active { background: var(--c-title); }

.cf-tab-num {
  font-size: 22px;
  font-weight: var(--metric-weight);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.cf-tab-key {
  font-size: var(--row-value-size);
  font-weight: var(--row-name-weight);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--c-sub);
}
/* 深底上的次级字用透明度压，不引新色 */
.cf-tab.is-active .cf-tab-key { color: inherit; opacity: 0.75; }

.cf-tab-en {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: 0.14em;
  line-height: 1.2;
  color: var(--c-hint);
}
.cf-tab.is-active .cf-tab-en { color: inherit; opacity: 0.5; }

/* ===== 卡片列表 ===== */
.cf-list { margin-top: 18px; }

/* 日期分隔与列表小节的组名同一档字，只是不带折叠。
 * 收藏列表按收藏时刻切，收藏详情里的那一列按消息发送时刻切，两处共用这一条 */
.cf-day {
  padding: 0 4px 8px;
  font-size: var(--row-value-size);
  font-weight: var(--row-name-weight);
  line-height: 1.3;
  color: var(--c-sub);
}
.cf-card + .cf-day,
.cf-msgs + .cf-day { padding-top: 20px; }

/* 一张收藏卡是一整块按钮：不做成一行一行的列表 ——
 * 卡里要摊得下两行正文或三行对话，行高兜不住 */
.cf-card {
  display: block;
  width: 100%;
  padding: 14px 16px 13px;
  text-align: left;
  border-radius: var(--cf-card-r);
  background: var(--ct-fill);
  transition: background var(--dur) var(--ease);
}
.cf-card + .cf-card { margin-top: var(--cf-gap); }
.cf-card:active { background: var(--ct-fill-press); }

/* 卡是 <button>，里面只能放行内元素，成块的部分必须自己转块级 */
.cf-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cf-card-avatar {
  flex: none;
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-surface-2);
}
.cf-card-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;            /* 容器已经切了圆，这里再兜一层，图不会露出方角 */
  object-fit: cover;
}

.cf-card-name {
  flex: 1;
  min-width: 0;
  font-size: var(--row-name-size);
  font-weight: var(--page-title-weight);
  line-height: 1.3;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf-card-time {
  flex: none;
  font-size: var(--label-size);
  color: var(--c-hint);
  font-variant-numeric: tabular-nums;
}

/* 卡上是一叠短行：每行都是「名字 + 内容」，一眼看出这是一串对话。
 * 卡片是索引不是阅读器，超出的行数与每行超出的字都截掉，全文在详情里 */
.cf-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
}

.cf-line {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-line b {
  margin-right: 6px;
  font-weight: var(--page-title-weight);
  color: var(--c-text);
}

.cf-card-foot {
  display: block;
  margin-top: 12px;
  font-size: var(--row-value-size);
  line-height: 1.3;
  color: var(--c-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 页脚那句说明：与钱包页的 .cw-note 同一档 */
.cf-note {
  margin-top: 24px;
  padding: 0 4px;
  font-size: var(--row-value-size);
  line-height: 1.6;
  text-align: center;
  color: var(--c-hint);
}

/* ===== 收藏详情：头卡 ===== */
.cf-view-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--cf-card-r);
  background: var(--ct-fill);
}

.cf-view-avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-surface-2);
}
.cf-view-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.cf-view-main {
  flex: 1;
  min-width: 0;
}

.cf-view-name {
  font-size: var(--row-name-size);
  font-weight: var(--page-title-weight);
  line-height: 1.3;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf-view-sub {
  margin-top: 4px;
  font-size: var(--row-value-size);
  line-height: 1.3;
  color: var(--c-sub);
}

/* 类型小标：分组小标题只放拉丁字母，中文的那句收在这枚药丸里 */
.cf-view-tag {
  flex: none;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--c-bg);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: 1.4;
  white-space: nowrap;
  color: var(--c-sub);
}

/* ===== 收藏详情：一条消息摊开的内容 ===== */
.cf-item + .cf-item { margin-top: 14px; }

.cf-label {
  font-size: var(--row-value-size);
  line-height: 1.3;
  color: var(--c-hint);
}
/* 小标题在上、内容在下；文字消息没有小标题，那一档不留空隙 */
.cf-label + .cf-value { margin-top: 5px; }

.cf-value {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text);
  white-space: pre-wrap;         /* 原文里的换行要留住，这里是唯一摊全文的地方 */
  word-break: break-word;
}

/* ===== 收藏详情：那一列消息 ===== */
/* 与「我的」页那套列表同一个做法：行间留 1px 透出页面底色，首尾收大角。
 * 跨天的那一串会切成几块，每块各自收首尾的角 */
.cf-msgs {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cf-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--card-radius-in);
  background: var(--ct-fill);
}
.cf-msgs .cf-msg:first-child {
  border-top-left-radius: var(--cf-card-r);
  border-top-right-radius: var(--cf-card-r);
}
.cf-msgs .cf-msg:last-child {
  border-bottom-left-radius: var(--cf-card-r);
  border-bottom-right-radius: var(--cf-card-r);
}

.cf-msg-avatar {
  flex: none;
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-surface-2);
}
.cf-msg-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.cf-msg-main {
  flex: 1;
  min-width: 0;
  display: block;
}

/* 名字与时刻同一行，时刻贴在名字后面而不是推到行尾 ——
 * 一列消息里两样东西挨着读才是一句「谁在几点说」 */
.cf-msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cf-msg-name {
  min-width: 0;
  font-size: var(--row-value-size);
  font-weight: var(--page-title-weight);
  line-height: 1.3;
  color: var(--c-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf-msg-time {
  flex: none;
  font-size: var(--label-size);
  color: var(--c-hint);
  font-variant-numeric: tabular-nums;
}

.cf-msg-body {
  display: block;
  margin-top: 5px;
}
/* 一条消息里的正文比单条详情收一档：这里是一串对话，字太大会把行数顶起来 */
.cf-msg .cf-value { font-size: 14px; line-height: 1.55; }
.cf-msg .cf-item + .cf-item { margin-top: 8px; }

/* ===== 取消收藏 ===== */
/* 与注销账号那颗同一款：不给红、不做二次确认，靠文案说清 */
.cf-drop {
  width: 100%;
  margin-top: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .cf-drop:active { transform: none; }
}