/* ===== 聊天设置页 ===== */
/* 设计与理由见 PROMPT/31_聊天设置页.md
 * 页壳借 .ct-page 的变量、底色与滑入，分段卡槽与面板借 setting-api.css 的
 * .api-tabs / .api-panel，分组小标题借 .api-section-label，开关借 .img-switch，
 * 本文件只写自己的部分。
 * 本文件禁止出现 backdrop-filter 和 will-change，滑入只动 transform。
 * 颜色一律取 base.css 已有变量，本页不写十六进制。 */
.cs-page {
  --cs-cover-h: 176px;           /* 不含顶部安全区，安全区在下面用加法补 */
  --cs-bar-h: 56px;              /* 同样不含安全区；返回键 36 + 上下各 10 */
  --cs-avatar: 84px;
  --cs-ring: 4px;                /* 头像那圈底色边，压在封面下沿才切得干净 */

  z-index: 12;                   /* 从会话页（11）点进来，还要再高一层 */
}

/* 本页没有顶栏也没有底栏：顶部安全区归封面，底部安全区归滚动区 */
.cs-page .ct-body {
  padding: 0 20px calc(28px + var(--sab));
}

/* ===== 封面 ===== */
/* 一块纯色：满幅出血，左右各吃掉 .ct-body 的 20px 内边距，顶上连状态栏一起盖住。
 * 比页面底 --c-bg 深一档，头像那圈底色边压上去才切得出形 */
.cs-cover {
  margin: 0 -20px;
  height: calc(var(--cs-cover-h) + var(--sat));
  background: var(--c-surface);
}

/* ===== 顶栏与返回键 ===== */
/* 两件都悬浮在封面上，不进滚动区 —— 跟着封面一起滚走就没有出口了。
 * 封面滚过去之后 .is-stuck 上身：底栏浮出来接住返回键，
 * 否则一颗深色圆钮会直接压在 PROFILE 那行小标题上 */
.cs-bar {
  position: absolute;
  /* 滚动区里的 .api-tab 自己就是 position: relative + z-index: 1，且排在本元素之后，
   * 序号不比它大的话，四格卡槽会从顶栏底下透出来 */
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--cs-bar-h) + var(--sat));
  padding-top: var(--sat);
  display: flex;
  flex-direction: column;          /* 标题一行、英文副标题一行 */
  align-items: center;
  justify-content: center;
  padding-left: 60px;              /* 左右各让出返回键的宽度，标题才是相对整页居中 */
  padding-right: 60px;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  opacity: 0;
  /* 顶栏里没有能按的东西，返回键是它的兄弟。不放行的话，
   * 封面顶上那 56px 的滑动会被这块透明板挡住，页面从那里拖不动 */
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.cs-page.is-stuck .cs-bar { opacity: 1; }

.cs-bar-title {
  max-width: 100%;
  font-size: var(--row-name-size);
  font-weight: var(--page-title-weight);
  line-height: 1.2;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 与二级页的 .api-subtitle 同一套字，只是塞进 56px 的顶栏，间距收紧 */
.cs-bar-sub {
  margin-top: 3px;
  margin-left: 0.18em;             /* 抵消末字后面那一份字距，两行才算对齐居中 */
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: 1.2;
  letter-spacing: 0.18em;
  color: var(--c-hint);
  white-space: nowrap;
}

/* 封面与顶栏底下都要认得出：取比两者都深一档的灰，不跟着 is-stuck 换色 */
.cs-back {
  position: absolute;
  z-index: 4;                      /* 顶栏浮出来之后要压在它上面 */
  left: 14px;
  top: calc(10px + var(--sat));
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-text);            /* reicon 内部用 currentColor */
  transition: transform 0.15s var(--ease), background var(--dur) var(--ease);
}
.cs-back:active {
  transform: scale(0.88);
  background: var(--c-surface-3);
}

/* ===== 名片：头像骑在封面下沿 ===== */
.cs-id {
  position: relative;
  margin-top: calc(var(--cs-avatar) / -2);
  text-align: center;
}

.cs-avatar {
  display: inline-block;
  width: var(--cs-avatar);
  height: var(--cs-avatar);
  border: var(--cs-ring) solid var(--c-bg);
  border-radius: 50%;
  overflow: hidden;
  background: var(--ct-fill);
}
.cs-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* 与名片、档案页同一档：昵称能很长，一级页大标题那一档会把这一行撑爆 */
.cs-name {
  margin-top: 10px;
  font-size: var(--page-title-size);
  font-weight: var(--title-weight);
  line-height: 1.2;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 四类分段卡槽 ===== */
/* 卡槽底色跟着本页的浅灰走：setting-api.css 给的 --c-surface-2 是灰底页上的灰，
 * 搬到白底页上会显得脏 */
.cs-tabs {
  margin-top: 20px;
  background: var(--ct-fill);
}

/* 还没建面板的两类：压暗一档，与「能点但没选中」区分开 */
.cs-tabs .api-tab.is-lock { opacity: 0.5; }

/* ===== 设置行 ===== */
/* 与「我的」页那份列表同一套做法：行间留 1px 透出页面底色，首尾收大角 */
.cs-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cs-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 11px 18px;
  text-align: left;
  border-radius: var(--card-radius-in);
  background: var(--ct-fill);
  transition: background var(--dur) var(--ease);
}
.cs-row:active { background: var(--ct-fill-press); }

/* 开关行整行点不动，按压态跟着一起去掉 —— 能按的只有右端那颗开关 */
.cs-row.is-static { transition: none; }
.cs-row.is-static:active { background: var(--ct-fill); }

.cs-list .cs-row:first-child {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.cs-list .cs-row:last-child {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.cs-row-ico {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--c-text);
}

.cs-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cs-row-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;
}

/* 说明文字只留一行：这几行写的是「点进去有什么」，折行会把每一行的高度拉得不一样 */
.cs-row-desc {
  margin-top: 3px;
  font-size: var(--row-value-size);
  line-height: 1.35;
  color: var(--c-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-row-go {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--c-hint);
}

/* 开关本体与靶区都在 .img-switch 上，这里只把它从行文里拎出来 */
.cs-row .img-switch { flex: none; }

/* ===== 页脚 ===== */
.cs-note {
  margin-top: 24px;
  padding: 0 8px;
  text-align: center;
  font-size: var(--row-value-size);
  line-height: 1.5;
  color: var(--c-hint);
}

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