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

  z-index: 13;                   /* 从会话设置页（12）点进来，与「头像显示」页同一层 */
}

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

/* ===== 预览 ===== */
/* 里面是会话页那份真元素（.cv-wall / .cv-row / .cv-bubble），不是照着画的仿品，
 * 所以那几条变量必须在这里补齐 —— 它们本来定义在 .cv-page 上，预览不在那棵树里。
 * 值与 chat-room.css 顶上那一组逐条对齐，改那边时这边要跟着改 */
.csw-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);

  position: relative;            /* 背景层以它为框，与会话页的 .cv-main 同一个位置 */
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--card-radius);
  /* 底色必须是页面底那一档：对方气泡就是 --c-surface，
   * 预览框跟着它一起白的话，那一侧的气泡会整个消失 */
  background: var(--c-bg);
  overflow: hidden;              /* 背景铺到框沿就收住，不许压出圆角 */
}

/* 夜间：与 chat-room.css 末尾那一组同值，暗底上再压一层浅灰会糊成一片 */
:root[data-theme="dark"] .csw-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);
}

/* 气泡压在背景之上：不定位的话流内块先画，会被绝对定位的背景层整个盖住 */
.csw-pv-list { position: relative; }

/* ===== 选图 ===== */
.csw-pick {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  background: var(--ct-fill);
}

/* 取景框固定 4:3：背景最终是铺满裁切的，这里给一块与它同样比例的框，
 * 看到的裁法就与会话页一致 */
.csw-shot {
  flex: none;
  align-self: flex-start;        /* 不写的话会被右边那列拉高，4:3 就不是 4:3 了 */
  width: 116px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--c-surface-2);
}

.csw-shot-tip {
  font-size: var(--row-value-size);
  line-height: 1.35;
  text-align: center;
  color: var(--c-hint);
}
.csw-shot.is-set .csw-shot-tip { display: none; }

/* cover 与会话页那层一致：取景框里看到的裁法就是背景真实的裁法 */
.csw-shot.is-set { padding: 0; }
.csw-shot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csw-pick-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* .api-btn 自带 flex: 1，竖着摆会被拉成一样高的两条 */
.csw-pick-side .api-btn { flex: none; }

/* 没图时「移除背景」按不动，按压反馈也跟着去掉 —— 留着会像点了没反应 */
.csw-pick-side .api-btn[disabled] {
  color: var(--c-hint);
  transition: none;
}
.csw-pick-side .api-btn[disabled]:active {
  transform: none;
  background: var(--c-surface-2);
}

.csw-pick-hint {
  margin-top: 2px;
  font-size: var(--row-value-size);
  line-height: 1.4;
  color: var(--c-hint);
}

/* ===== 三根滑块 ===== */
/* .api-slider 自带一块卡片底，摞在一起中间要留 1px 透出页面底色，与「头像显示」页同一套 */
.csw-sliders {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

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

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