/* ===== 头像显示页 ===== */
/* 设计与理由见 PROMPT/32_头像显示页.md
 * 页壳借 .ct-page 的变量、底色与滑入，顶栏借 setting-api.css 的 .api-header /
 * .api-back，分组小标题借 .api-section-label，滑块借 .api-slider / .api-range，
 * 开关借 .img-switch，本文件只写自己的部分。
 * 本文件禁止出现 backdrop-filter 和 will-change，滑入只动 transform。
 * 颜色一律取 base.css 已有变量，本页不写十六进制。 */
.csa-page {
  /* .api-slider 的左右内边距取这一条，而它只定义在 .api-page 上 ——
   * 不补一份的话整条声明作废，滑块会贴着卡片两边 */
  --card-pad: 16px;

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

.csa-page .ct-body { padding-bottom: calc(28px + var(--sab)); }

/* ===== 预览 ===== */
/* 里面是会话页那份真行元素（.cv-row / .cv-face / .cv-bubble），不是照着画的仿品，
 * 所以那几条变量必须在这里补齐 —— 它们本来定义在 .cv-page 上，预览不在那棵树里。
 * 值与 chat-room.css 顶上那一组逐条对齐，改那边时这边要跟着改 */
.csa-pv {
  --cv-avatar: 32px;
  --cv-radius: 20px;
  --cv-radius-in: 6px;
  --cv-text-size: 14px;
  --cv-fill: var(--c-surface);
  --cv-me-bg: var(--c-surface-2);
  --cv-me-fg: var(--c-text);
  --cv-ta-bg: var(--c-surface);
  --cv-ta-fg: var(--c-text);

  margin-top: 16px;
  padding: 14px 16px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--card-radius);
  /* 底色必须是页面底那一档：对方气泡就是 --c-surface，
   * 预览框跟着它一起白的话，那一侧的气泡会整个消失 */
  background: var(--c-bg);
  overflow: hidden;              /* 头像拉到 56px 时贴边那侧不许顶出圆角 */
}

/* 夜间：与 chat-room.css 末尾那一组同值，暗底上再压一层浅灰会糊成一片 */
:root[data-theme="dark"] .csa-pv {
  --cv-me-bg: var(--c-text);
  --cv-me-fg: var(--c-surface);
  --cv-ta-bg: var(--c-surface-3);
  --cv-ta-fg: var(--c-text);
}

/* ===== 列表 ===== */
/* 与会话设置页那份列表同一套：行间留 1px 透出页面底色，首尾收 24px 大角 */
.csa-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

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

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

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

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

.csa-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;
}

.csa-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;
}

/* 勾平时也占着位置，选中与否行里的字不左右跳 */
.csa-opt-check {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--c-accent-dark);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.csa-opt.is-on .csa-opt-check { opacity: 1; }
.csa-opt.is-on .csa-row-name { color: var(--c-title); }

.csa-row .img-switch { flex: none; }

/* ===== 两根滑块 ===== */
/* .api-slider 自带一块卡片底，两根摞在一起中间要留 1px 透出页面底色，与列表同一套 */
.csa-sliders {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 12px;
}

/* 角色那一组跟在 CHARACTER 那颗开关下面，与开关之间要有一档间距 */
.csa-ta .csa-sliders { margin-top: 12px; }

.csa-slider {
  border-radius: var(--card-radius-in);
  background: var(--ct-fill);
}
.csa-sliders .csa-slider:first-child {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.csa-sliders .csa-slider:last-child {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

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