/* ============================================================
   角色设置 —— 对齐 API 页的黑白毛玻璃系统
   加载顺序必须在 character.css 之后，这是一层覆盖，删掉 link 即可完全还原。

   材质规则跟 api.css 一致：
   · 大面板 = 26% 白 + backdrop-filter，靠壁纸透过来产生层次
   · 小控件 = 62% 白，保证输入框里的文字踏实
   · 边缘 = 低对比度（顶部白高光 + 整体极淡的黑），不画硬描边
   · 控件 = 胶囊，大圆角，柔和阴影
   · 重要按钮 = 纯黑，是画面里唯一的高对比块
   · 导航不是实色白条：内容从底下穿过去，mask 渐隐
   ============================================================ */

.character-phone {
  --ink: #17171a;
  --ink-2: rgb(23 23 26 / 62%);
  --ink-3: rgb(23 23 26 / 42%);
  --ink-4: rgb(23 23 26 / 26%);
  --glass: rgb(255 255 255 / 26%);
  --glass-strong: rgb(255 255 255 / 62%);
  --glass-sunken: rgb(255 255 255 / 26%);
  --glass-blur: saturate(180%) brightness(1.32) blur(34px);
  --glass-ctrl-blur: saturate(150%) brightness(1.1) blur(14px);
  --edge: inset 0 0 0 1px rgb(255 255 255 / 42%), inset 0 1px 0 0 rgb(255 255 255 / 72%), inset 0 0 0 1.5px rgb(23 23 26 / 5%);
  --lift: 0 1px 2px rgb(23 23 26 / 4%), 0 8px 20px -8px rgb(23 23 26 / 12%);
  --lift-lg: 0 2px 4px rgb(23 23 26 / 4%), 0 18px 40px -14px rgb(23 23 26 / 16%);
  --r-card: 28px;
  --r-pill: 999px;

  color: var(--ink);
  background-color: #e9e9eb;
  background-image: var(--page-wallpaper, url("参考图/默认背景图背景图.jpg"));
  background-size: cover;
  background-position: center;
}

/* ---------- 顶部：不是实色白条 ---------- */
.character-phone .character-toolbar {
  border: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 60%), rgb(255 255 255 / 22%));
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
  box-shadow: none;
}
/* character.css 用 ::after 画了 78px 的渐变拖尾，和上面的 mask 叠起来会糊两层 */
.character-phone .character-toolbar::after { display: none; }
.character-phone .character-toolbar h1 { color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: .2px; }
.character-phone .character-toolbar a { color: var(--ink); }

/* 保存按钮：主题绿换成黑 */
.character-phone .character-toolbar button {
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--ink);
  box-shadow: 0 1px 2px rgb(23 23 26 / 18%), 0 6px 14px -6px rgb(23 23 26 / 45%);
}
.character-phone .character-toolbar button:active { transform: scale(.96); }

/* ---------- 分类：胶囊分段控件 ---------- */
.character-phone .character-tabs {
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--edge), var(--lift);
}
.character-phone .character-tabs button {
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
}
.character-phone .character-tabs button.active {
  color: #fff;
  background: var(--ink);
  box-shadow: 0 1px 2px rgb(23 23 26 / 18%), 0 6px 14px -6px rgb(23 23 26 / 45%);
  font-weight: 550;
}

/* ---------- 滚动区从导航底下穿过去 ---------- */
/* inset 顶部归零（不给导航让位），靠 padding-top 把首屏推下来，
   滚动时内容确实穿过毛玻璃。上下各一段 mask 渐隐。 */
.character-phone .character-content {
  inset: 0;
  padding: calc(146px + var(--safe-top)) 16px calc(40px + var(--safe-bottom));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(140px + var(--safe-top)), #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(140px + var(--safe-top)), #000 calc(100% - 28px), transparent 100%);
}

/* ---------- 卡片 ---------- */
.character-phone .settings-group,
.character-phone .memory-section,
.character-phone .reference-card {
  border: 0;
  border-radius: var(--r-card);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--edge), var(--lift-lg);
}
.character-phone .group-heading h2 { color: var(--ink); font-size: 19px; font-weight: 620; letter-spacing: -.2px; }
.character-phone .group-heading p,
.character-phone .reference-description,
.character-phone .reference-hint { color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.character-phone .group-kicker { color: var(--ink-3); }

/* ---------- 胶囊控件 ---------- */
.character-phone .setting-field input,
.character-phone .setting-field select,
.character-phone .choice-group label {
  min-height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  padding: 0 18px;
  color: var(--ink);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-ctrl-blur);
  backdrop-filter: var(--glass-ctrl-blur);
  box-shadow: var(--edge), 0 1px 2px rgb(23 23 26 / 4%);
  font-size: 14.5px;
}
/* 多行输入不能用胶囊，圆角收到 22px */
.character-phone .setting-field textarea {
  border: 0;
  border-radius: 22px;
  padding: 15px 17px;
  color: var(--ink);
  background: var(--glass-strong);
  box-shadow: var(--edge), 0 1px 2px rgb(23 23 26 / 4%);
  font-size: 14.5px;
}
.character-phone .setting-field strong,
.character-phone .choice-group legend,
.character-phone .switch-row strong,
.character-phone .linked-setting strong { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.character-phone .switch-row small,
.character-phone .linked-setting small { color: var(--ink-2); }
.character-phone input::placeholder,
.character-phone textarea::placeholder { color: var(--ink-4); }
.character-phone input:focus,
.character-phone select:focus,
.character-phone textarea:focus {
  outline: 0;
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink-4), 0 0 0 4px rgb(23 23 26 / 6%);
}

/* ---------- 开关行 / 跳转行 ---------- */
.character-phone .switch-row {
  border: 0;
  border-radius: 22px;
  background: var(--glass-sunken);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 34%), inset 0 1px 0 0 rgb(255 255 255 / 55%);
}
.character-phone .switch-row input { background: rgb(23 23 26 / 12%); }
.character-phone .switch-row input:checked { background: var(--ink); }

.character-phone .linked-setting {
  margin-top: 10px;
  padding: 0 16px;
  border: 0;
  border-radius: 22px;
  background: var(--glass-sunken);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 34%), inset 0 1px 0 0 rgb(255 255 255 / 55%);
}
.character-phone .linked-setting b { color: var(--ink-3); }
.character-phone .settings-divider { color: var(--ink-2); border: 0; background: none; }

/* ---------- 危险操作 ---------- */
/* 删除角色保持红色 —— 这是全页唯一允许出现的彩色，
   黑白系统里它必须一眼能和「保存」区分开。 */
.character-phone .delete-character {
  border: 0;
  border-radius: var(--r-pill);
  color: #c93645;
  background: var(--glass-strong);
  box-shadow: var(--edge), 0 1px 2px rgb(23 23 26 / 4%);
}

/* character.css 用 --neutral-* 调出来的米色（参考图切换、参考图占位框、
   各种小按钮）在黑白系统里是唯一的暖色，统一压成玻璃。 */
.character-phone .reference-mode {
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glass-sunken);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 34%);
}
.character-phone .reference-mode button {
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  background: transparent;
}
.character-phone .reference-mode button.active {
  color: #fff;
  background: var(--ink);
  box-shadow: 0 1px 2px rgb(23 23 26 / 18%);
}
.character-phone .reference-image-box {
  border: 1px dashed var(--ink-4);
  border-radius: 22px;
  color: var(--ink-3);
  background: var(--glass-sunken);
}
.character-phone .reference-heading button,
.character-phone .memory-heading button,
.character-phone .avatar-editor button,
.character-phone .reference-actions button {
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--glass-strong);
  box-shadow: var(--edge), 0 1px 2px rgb(23 23 26 / 4%);
}
.character-phone .avatar-preview-wrap {
  border: 0;
  border-radius: 18px;
  background: var(--glass-strong);
  box-shadow: var(--edge);
}
.character-phone .memory-heading strong { color: var(--ink); }
.character-phone .memory-heading small,
.character-phone .memory-empty { color: var(--ink-3); }

.character-phone .save-toast {
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--ink);
  box-shadow: 0 8px 20px -8px rgb(23 23 26 / 50%);
}

/* 不支持 backdrop-filter 时玻璃会退化成几乎透明的白，文字直接压在壁纸上 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .character-phone {
    --glass: rgb(255 255 255 / 86%);
    --glass-strong: rgb(255 255 255 / 94%);
    --glass-sunken: rgb(255 255 255 / 70%);
  }
  .character-phone .character-toolbar,
  .character-phone .character-tabs { background: rgb(255 255 255 / 90%); }
}