/* ===== 气泡显示页 ===== */
/* 设计与理由见 PROMPT/34_气泡显示页.md
 * 页壳借 .ct-page 的变量、底色与滑入，顶栏借 setting-api.css 的 .api-header /
 * .api-back，分组小标题借 .api-section-label，滑块借 .api-slider / .api-range，
 * 色块借 beautify.css 的 .bt-sw，本文件只写自己的部分。
 * .bt-sw 那份排在本文件之后，凡是要盖它的都得写成两个类名，不然盖不动。
 * 本文件禁止出现 backdrop-filter 和 will-change，滑入只动 transform。
 * 颜色一律取 base.css 已有变量，本页不写十六进制 —— 用户挑的那几色由 JS 走内联变量。 */
.csb-page {
  /* .api-slider 的左右内边距取这一条，而它只定义在 .api-page 上 ——
   * 不补一份的话整条声明作废，滑块会贴着卡片两边 */
  --card-pad: 16px;

  z-index: 13;                   /* 从会话设置页（12）点进来，与另外两个二级页同一层 */
}

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

/* ===== 预览 ===== */
/* 里面是会话页那份真行元素（.cv-row / .cv-bubble），不是照着画的仿品，
 * 所以那几条变量必须在这里补齐 —— 它们本来定义在 .cv-page 上，预览不在那棵树里。
 * 值与 chat-room.css 顶上那一组逐条对齐，改那边时这边要跟着改。
 * 用户设过的那几条由 JS 写在 .cv-list 的内联样式上，压在这一组之上 */
.csb-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;
}

/* 夜间：与 chat-room.css 末尾那一组同值，暗底上再压一层浅灰会糊成一片 */
:root[data-theme="dark"] .csb-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 透出页面底色 */
.csb-colors {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.csb-color {
  padding: 12px 16px 14px;
  border-radius: var(--card-radius-in);
  background: var(--ct-fill);
}
.csb-colors .csb-color:first-child {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.csb-colors .csb-color:last-child {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.csb-color-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.csb-color-label {
  font-size: var(--row-name-size);
  font-weight: var(--row-name-weight);
  color: var(--c-text);
}

/* 当前色号，未设时是「默认」。等宽数字，换一个色时右端不左右跳 */
.csb-color-value {
  font-size: var(--row-value-size);
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

/* 八颗一排：留 4px 是给选中态那圈外环的，贴着边会被卡片裁掉一小块 */
.csb-sws {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 4px;
}

/* 选中环的第二层要与卡片底同色，取 --c-bg 的话会在灰卡上抠出一圈白 */
.csb-sws .csb-sw.is-on {
  box-shadow: inset 0 0 0 1px var(--c-border-m),
              0 0 0 1.6px var(--ct-fill),
              0 0 0 3px var(--c-accent-dark);
}

/* 取色器那一颗连壳带 input 都在 beautify.css 的 .bt-sw-pick / .bt-cpick 里，
 * 本文件一条都不重写：没自定义时 --sw 是摘掉的，底色落回 .bt-sw 的兜底那一档 */

/* ===== 滑块 ===== */
/* .api-slider 自带一块卡片底，同一组里摞起来中间留 1px，与颜色那几张同一套 */
.csb-sliders {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

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

.csb-head-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 圆角那一项的回退键：拖过之后才亮，本来就是默认时按不动 */
.csb-reset {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--c-surface-2);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--c-sub);
  transition: opacity var(--dur) var(--ease), transform 0.15s var(--ease);
}
.csb-reset:active { transform: scale(0.92); }
.csb-reset:disabled {
  opacity: 0.4;
  transform: none;
}

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