:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --primary: #4f6ef7;
  --primary-d: #3a55d9;
  --text: #1f2430;
  --muted: #8a93a6;
  --border: #e6e9f0;
  --ok: #2bb673;
  --err: #e25555;
  --radius: 14px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
button {
  font-family: inherit;
  cursor: pointer;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: 14px;
}
.hidden {
  display: none !important;
}
.muted {
  color: var(--muted);
  font-size: 13px;
}
.tip {
  color: var(--muted);
  font-size: 12px;
  margin: 6px 0 0;
}

/* 顶部提示 */
.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: #323847;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  z-index: 999;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.ok {
  background: var(--ok);
}
.toast.err {
  background: var(--err);
}

/* 按钮 */
.primary {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  transition: 0.2s;
}
.primary:hover {
  background: var(--primary-d);
}
.primary.sm {
  padding: 8px 16px;
  font-size: 14px;
}
.primary.block {
  width: 100%;
  margin-top: 24px;
}
.primary.round {
  border-radius: 30px;
  padding: 14px 28px;
  font-size: 16px;
}
.ghost {
  background: #eef1fb;
  color: var(--primary);
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
}
.ghost.danger {
  background: #fff0f0;
  color: #d9534f;
  border: 1px solid #f3c2c2;
}
.ghost.danger:hover {
  background: #ffe3e3;
}
.icon-btn {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
}
.icon-btn:hover {
  background: #eef1fb;
}

/* ===== 登录页 ===== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #f5f7fb 100%);
}
.login-card {
  width: 360px;
  background: var(--card);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 12px 40px rgba(60, 80, 160, 0.12);
}
.login-brand {
  text-align: center;
  margin-bottom: 18px;
}
.avatar-ring {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #8a6ef7);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-brand h1 {
  font-size: 20px;
  margin: 0;
}
.login-brand .sub {
  color: var(--muted);
  font-size: 13px;
  margin: 6px 0 0;
}
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.tab {
  flex: 1;
  background: #eef1fb;
  border: none;
  border-radius: 10px;
  padding: 10px;
  color: var(--muted);
  font-weight: 600;
}
.tab.active {
  background: var(--primary);
  color: #fff;
}
#form label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 6px;
}
#form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}
#form input:focus {
  border-color: var(--primary);
}
#form .primary {
  width: 100%;
  margin-top: 22px;
}
.hint {
  text-align: center;
  color: var(--err);
  font-size: 13px;
  min-height: 18px;
  margin: 12px 0 0;
}

/* ===== 顶栏（设置/对话共用） ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-info {
  display: flex;
  gap: 16px;
  color: var(--muted);
  font-size: 13px;
}
.top-text-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.15s;
}
.top-text-btn:hover {
  color: #d9534f;
  border-color: #f0b8b4;
  background: #fff5f5;
}

/* ===== 设置页 ===== */
.settings-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}
.settings-wrap h2 {
  font-size: 16px;
  margin: 28px 0 10px;
  padding-left: 10px;
  border-left: 4px solid var(--primary);
}
/* 设置页两栏：左=对话大脑(提示词) 右=参数 */
.settings-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.col-left,
.col-right {
  min-width: 0;
}
.col-left {
  background: rgba(79, 110, 247, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 20px 16px;
}
@media (max-width: 860px) {
  .settings-cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
/* 字号实时预览 */
.font-preview {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: rgba(79, 110, 247, 0.04);
  color: var(--text);
  line-height: 1.6;
  transition: font-size 0.15s ease;
}
.field {
  margin-bottom: 18px;
}
.field > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.field textarea,
.field input[type='text'] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  resize: vertical;
}
.field textarea:focus,
.field input:focus,
.row select:focus {
  border-color: var(--primary);
}
.prompt-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.tp-label {
  font-size: 12px;
  color: var(--muted);
}
.tp-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tp-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.tp-chip.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.row select {
  flex: 1;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
input[type='range'] {
  width: 100%;
}
.avatar-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #8a6ef7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  background-size: cover;
  background-position: center;
}
.seg {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.seg button {
  background: #eef1fb;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}
.seg button small {
  color: var(--muted);
  font-size: 11px;
}
.seg button.active {
  border-color: var(--primary);
  background: #eaf0ff;
  color: var(--primary-d);
}
.preset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 540px) {
  .preset-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}
.preset {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2px solid transparent;
  border-radius: 16px;
  background-color: var(--card);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.preset::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.08) 45%, transparent 70%);
  pointer-events: none;
}
.preset:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-color: rgba(79, 110, 247, 0.35);
}
.preset.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.22), 0 8px 20px rgba(79, 110, 247, 0.18);
}
.preset .preset-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 8px 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.preset .preset-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 1;
}
.preset .preset-check::after {
  content: '✓';
}
.preset.active .preset-check {
  display: flex;
}
.preset .emoji {
  display: none;
}

/* ===== 对话页 ===== */
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
/* 顶栏：完全透明，浮在视频背景之上，使人物/视频能贯穿到页面最顶部 */
.chat-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  z-index: 100;
}
/* 底部本地暗角渐变，仅在视频加载未完成（白底）时撑一下文字可读性；视频上来后几乎看不出 */
.chat-top::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
  pointer-events: none;
}
.chat-top .topbar-info {
  color: rgba(255, 255, 255, 0.92);
}
.chat-top .icon-btn {
  color: #fff;
}
.chat-top .icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.chat-top .top-text-btn {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.25);
  background: transparent;
}
.chat-top .top-text-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.1);
}
/* 对话界面：视频铺满全屏作背景，所有控件作为浮层直接落在数字人画面上
   （参照竞品：右侧 30% 独立深色面板 → 全屏浮层） */
.chat-screen {
  flex: 1;
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}
/* 无视频背景时的柔和兜底：浅色径向渐变（避免纯黑突兀，配合亮色调数字人插画） */
.chat-screen.no-bg,
.call-screen.no-bg {
  background:
    radial-gradient(70% 60% at 25% 18%, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0) 60%),
    radial-gradient(60% 50% at 80% 75%, rgba(124, 92, 255, 0.10) 0%, rgba(124, 92, 255, 0) 60%),
    radial-gradient(50% 40% at 50% 50%, rgba(255, 200, 220, 0.06) 0%, rgba(255, 200, 220, 0) 70%),
    linear-gradient(160deg, #f3f3f8 0%, #e2e2ec 100%);
}
/* 对话浮层容器：全屏透明，子元素各自落位 */
.chat-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 2;
  background: transparent;
  pointer-events: none;
}
.chat-panel > * { pointer-events: auto; }
/* 收起状态（保留兼容）：直接隐藏对话浮层 */
.chat-panel.collapsed {
  display: none;
}
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #000;
}
/* 在聊天页里，把内部两段视频提到 fixed 全屏 —— 让视频背景覆盖到顶栏/页面最顶部。
   联调迭代：
   - v1 `object-fit: cover`：全屏被切头/切脚
   - v2 `object-fit: contain`：左右大片黑边
   - v3 cover + object-position:center bottom：人物被切头（视频底边贴底、放大后顶部超出视口上边界）
   - **v4（当前）**: cover + object-position: center top
       * cover 让视频放大填满左右，背景填满全屏无黑边
       * center top 把视频"顶边"贴齐视口顶部：顶部不被裁
       * 多数竖屏/16:9 的数字人全身画都在中上部，脚下少量地板被裁也无妨
       * 仍严格"人物完整 + 背景填满" */
body.chat-page #callScreen > .bg-video,
body.chat-page #chatScreen > .bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  object-fit: cover;
  object-position: center top;
  background: #000;
}
.bg-video.hidden {
  display: none;
}
/* 默认数字人面孔 SVG 已删除（改用预设视频自动回退）；
   头像胶囊也删除。这里只保留动画关键帧给来电界面 .dh-mini-face.talking 用 */

/* 右侧面板内的消息与控件：透出背景，不做实色遮挡 */
.chat-panel .messages {
  flex: 1;
  margin-top: 0;
  max-height: none;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  z-index: auto;
}
.chat-panel .mode-bar,
.chat-panel .input-area {
  background: transparent;
  backdrop-filter: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  z-index: auto;
}

/* 窄屏：对话框占下半，视频仍作全屏背景 */
@media (max-width: 768px) {
  .chat-panel {
    width: 100%;
    min-width: 0;
    height: 55%;
    margin-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .chat-screen .dh-overlay {
    right: 0;
    padding-left: 16px;
  }
}
.dh-stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dh-overlay {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  pointer-events: none;
}
.dh-mini-face {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), #8a6ef7);
  background-size: cover;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 28px;
}
.dh-mini-face .face-avatar,
.dh-mini-face .face-avatar.emoji {
  width: 100%;
  height: 100%;
  font-size: 28px;
}
.face-avatar {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary), #8a6ef7);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.face-avatar.emoji {
  color: #fff;
  font-size: 60px;
  font-weight: 700;
  animation: breathe 3s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
/* dh-name 已删除（对话页不再显示角色名字，参照竞品） */

/* SVG 卡通脸已删除（改用预设视频回退）；faceBob 给来电界面 .dh-mini-face.talking 用 */
@keyframes faceBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.dh-mini-face.talking {
  animation: faceBob 1.1s ease-in-out infinite;
}

/* 消息区：浮在右下区域，背景透明让视频/数字人画面穿透 */
.messages {
  position: absolute;
  right: 24px;
  top: 76px;
  bottom: 220px;
  width: min(440px, 42vw);
  margin-top: 0;
  max-height: none;
  overflow-y: auto;
  padding: 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  z-index: 3;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
.messages::-webkit-scrollbar { width: 6px; }
.messages::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }
.msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.msg.user {
  flex-direction: row-reverse;
}
.bubble-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #dfe5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  flex-shrink: 0;
}
.bubble-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bubble {
  max-width: 72%;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  line-height: 1.6;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.user .bubble {
  background: var(--primary);
  color: #fff;
  border: none;
}
.replay {
  margin-left: 8px;
  border: none;
  background: #eef1fb;
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
}
.dot {
  animation: blink 1.2s infinite;
}
@keyframes blink {
  50% { opacity: 0.3; }
}
/* 气泡字号由滑条数值决定，通过 --fs 变量控制 */
.fs-custom .bubble {
  font-size: var(--fs, 15px);
  line-height: 1.5;
}

/* 模式条：浮在输入栏上方居中，白底磨砂圆角胶囊 */
.mode-bar {
  position: absolute;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 88vw);
  z-index: 3;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.mode {
  flex: 1;
  background: rgba(240, 242, 248, 0.7);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mode:hover { background: rgba(168, 85, 247, 0.10); color: #6b3fb8; }
.mode.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
/* 输入区：浮在底部居中，白底磨砂圆角条 */
.input-area {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 92vw);
  z-index: 3;
  display: flex;
  gap: 10px;
  padding: 10px 12px 12px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  align-items: center;
}
.input-area input[type='text'] {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: #222;
}
.input-area input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}
/* 作图模式：画布与输入上下排列（避免画布挤压输入框导致点不中） */
#drawInput {
  flex-direction: column;
  align-items: stretch;
}
#drawInput .row {
  width: 100%;
}
/* 多行输入框（聊天输入、长文本） */
.input-area textarea {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  max-height: 160px;
  overflow-y: auto;
}
.input-area textarea:focus {
  border-color: var(--primary);
}
/* 手机联动二维码 */
.phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.phone-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.phone-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  transition: 0.15s;
  flex: 0 0 auto;
}
.phone-close:hover {
  background: rgba(226, 85, 85, 0.12);
  border-color: #e25555;
  color: #e25555;
}
.chat-page .phone-close {
  background: rgba(255, 255, 255, 0.85);
}
.chat-page .phone-close:hover {
  background: rgba(226, 85, 85, 0.15);
  border-color: #d04a4a;
  color: #d04a4a;
}
.qr-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin: 8px 0;
  color: var(--muted);
  font-size: 13px;
}
.qr-url {
  text-align: center;
  margin: 2px 0 8px;
  word-break: break-all;
}
/* 切换式输入条：文字态（🎤｜输入框｜发送）与语音态（语音按钮｜⌨）二态切换 */

/* 切换按钮：圆形图标 */
.mic-btn,
.key-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.18s ease;
}
.mic-btn:hover,
.key-btn:hover {
  border-color: var(--primary);
  background: #f3f6ff;
}

/* 删除按钮：录音期间显示，位于语音按钮和键盘按钮之间 */
.del-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #ffd4d4;
  background: #fff2f2;
  color: #e0483d;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.18s ease;
}
.del-btn:hover {
  background: #ffe4e4;
}
/* 只有录音时才显示删除按钮 */
#voiceInput:not(.recording) .del-btn {
  display: none;
}

/* 语音态：中间大号语音按钮（占满剩余空间，点击说话，无需长按） */
.voice-big {
  flex: 1;
  min-width: 0;
  padding: 14px;
  border: 1px dashed var(--primary);
  background: #f3f6ff;
  color: var(--primary);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voice-big:hover {
  background: #eaf0ff;
}

/* 录音中：语音按钮变红 + 脉冲 */
.input-area.recording .voice-big {
  background: #e0483d;
  border-color: #e0483d;
  color: #fff;
  animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(224, 72, 61, 0.45);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(224, 72, 61, 0);
  }
}
/* 识别中：语音按钮转圈等待 */
.input-area.busy .voice-big {
  opacity: 0.6;
  cursor: wait;
}
/* 输入区下方的语音提示 */
.voice-hint {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 16px 12px;
  min-height: 16px;
  font-size: 12px;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
}
.chat-panel .voice-hint {
  background: transparent;
  backdrop-filter: none;
}
/* 作图模式：风格下拉 */
#drawInput select {
  flex: 0 0 auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  color: var(--text);
  outline: none;
  max-width: 130px;
}
#drawInput input[type='text'] {
  min-width: 0;
}
/* 输入区里的按钮不参与伸缩，避免被输入框挤扁 */
#sendBtn,
#sendDraw {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* 生成图片消息里的辅助信息 */
.img-loading {
  padding: 18px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.gen-img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
}
.img-cap {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.img-prompt {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.85;
  word-break: break-all;
}
.img-regen {
  margin-top: 8px;
  padding: 5px 12px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
}
.img-regen:hover {
  border-color: var(--primary);
  color: var(--primary);
}
#pad {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  touch-action: none;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 160;
  cursor: crosshair;
}

/* 来电接听界面 */
.call-screen {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  text-align: center;
  padding: 30px;
  overflow: hidden;
  z-index: 1002;
}
.call-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50px;
}
.call-screen .bg-video {
  object-fit: cover;
}
.call-screen .dh-mini-face {
  width: 120px;
  height: 120px;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12);
  animation: ring 1.6s ease-in-out infinite;
}
@keyframes ring {
  0%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12); }
  50% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0.04); }
}
.call-screen h2 {
  margin: 18px 0 4px;
  font-size: 22px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.call-tip {
  color: #eee;
  margin: 0 0 24px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.call-actions {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
}
.icon-round {
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: #fff;
  border-radius: 30px;
  padding: 12px 20px;
  backdrop-filter: blur(4px);
}

/* 接听按钮：圆形 + 绿色电话图标，参照 iOS 来电界面 */
.call-pickup {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #34d058 0%, #28a745 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(40, 167, 69, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: pickupGlow 1.6s ease-in-out infinite;
}
.call-pickup:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 28px rgba(40, 167, 69, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}
.call-pickup:active { transform: scale(0.96); }
@keyframes pickupGlow {
  0%, 100% { box-shadow: 0 8px 22px rgba(40, 167, 69, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.15); }
  50% { box-shadow: 0 8px 32px rgba(40, 167, 69, 0.7), 0 0 0 8px rgba(40, 167, 69, 0.15), inset 0 -3px 0 rgba(0, 0, 0, 0.15); }
}

/* 暂停按钮：红色正方形（停止图标） */
.square-stop {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: none;
  background: #e0483d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(224, 72, 61, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
/* 默认显示「暂停」双竖条图标 */
.square-stop::before,
.square-stop::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 22px;
  margin-top: -11px;
  background: #fff;
  border-radius: 1.5px;
}
.square-stop::before { left: 18px; }
.square-stop::after  { left: 32px; }
/* 暂停状态下显示「播放」三角 */
.square-stop.paused::before,
.square-stop.paused::after {
  width: 0;
  height: 0;
  background: transparent;
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
}
.square-stop.paused::before {
  left: 18px;
  border-width: 11px 18px 11px 0;
  border-right-color: #fff;
}
.square-stop.paused::after { display: none; }
.square-stop:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(224, 72, 61, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.square-stop:active { transform: scale(0.95); }

/* ===== 预设数字人库 —— 后台管理页 ===== */
.admin-cat-head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.admin-cat-head > label {
  margin: 0;
  flex: 0 0 auto;
}
.admin-cat-head input[type='text'] {
  flex: 0 1 170px;
  width: auto;
}
.admin-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.admin-row input[type='text'] {
  flex: 1 1 110px;
  width: auto;
}
.admin-row .k-emoji {
  flex: 0 0 62px;
  text-align: center;
}
.admin-row .k-video,
.admin-row .k-bg {
  flex: 2 1 200px;
}
.admin-row button,
.admin-cat-head button {
  flex: 0 0 auto;
}
/* 单个角色块：上行是名字/emoji/视频/预览图，下行是人设提示词 */
.admin-item {
  padding: 8px 0 10px;
  border-bottom: 1px dashed var(--border);
}
.admin-item .admin-row {
  margin-bottom: 6px;
}
.admin-persona {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding-left: 2px;
}
.admin-persona label {
  flex: 0 0 auto;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.admin-persona .k-prompt {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
.admin-persona .k-prompt:focus {
  border-color: var(--primary);
}
.admin-persona .k-prompt:disabled {
  opacity: 0.55;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 数据备份列表（admin.html） */
.backup-list h3 {
  font-size: 14px;
  margin: 16px 0 8px;
  color: var(--text);
}
.backup-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg);
  margin-bottom: 8px;
  font-size: 13px;
}
.backup-row .b-name {
  flex: 1 1 40%;
  font-family: monospace;
  word-break: break-all;
  color: var(--text);
}
.backup-row .b-meta {
  flex: 1 1 35%;
  color: var(--muted);
  white-space: nowrap;
}

/* ===== 操作日志（后台） ===== */
.audit-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.audit-head {
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  font-weight: 600;
}
.audit-row .a-time {
  flex: 0 0 84px;
  color: var(--muted);
  font-family: monospace;
  white-space: nowrap;
}
.audit-row .a-actor {
  flex: 0 0 110px;
  font-weight: 600;
  word-break: break-all;
}
.audit-row .a-action {
  flex: 0 0 118px;
}
.audit-row .a-target {
  flex: 0 0 130px;
  color: var(--text);
  word-break: break-all;
}
.audit-row .a-detail {
  flex: 1 1 auto;
  color: var(--muted);
  word-break: break-all;
}
.audit-head span {
  color: var(--muted);
}

/* ===== 用户管理（后台） ===== */
.user-head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.user-head .u-name {
  flex: 1 1 110px;
}
.user-head .u-quota {
  flex: 0 0 170px;
}
.user-head .u-date {
  flex: 0 0 150px;
}
.user-head .u-plan {
  flex: 0 0 90px;
}
.user-head .u-batch {
  flex: 0 0 120px;
}
.user-head .u-act {
  flex: 1 1 320px; /* 4 个操作按钮：保存 / 清空已用 / 重置密码 / 删除 */
}
.user-filter {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.user-filter .tp-label {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.user-filter select,
.user-filter input[type='text'] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  outline: none;
  font-size: 13px;
}
.user-filter select:focus,
.user-filter input[type='text']:focus {
  border-color: var(--primary);
}
.filter-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.user-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.user-row .u-name {
  flex: 1 1 110px;
  font-weight: 600;
}
.user-row .u-used {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
}
.user-row input[type='number'],
.user-row input[type='date'] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  outline: none;
}
.user-row input[type='number']:focus,
.user-row input[type='date']:focus {
  border-color: var(--primary);
}
.user-row input[type='number'] {
  flex: 0 0 82px;
}
.user-row input[type='date'] {
  flex: 0 0 150px;
}
.user-row .u-plan {
  flex: 0 0 90px;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-row .u-batch {
  flex: 0 0 120px;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-row button {
  flex: 0 0 auto;
}

/* ===== 注册码相关 ===== */
.reg-tip { font-size: 12px; color: var(--muted, #888); margin: 6px 0 0; }
.hint { font-size: 13px; min-height: 18px; margin-top: 8px; }

.code-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.code-row {
  display: grid;
  grid-template-columns: 130px 96px 64px 130px 96px 1fr 64px;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
}
.code-row.code-head { font-weight: 600; background: #f7f8fa; border: none; }
.code-row .c-code { font-family: monospace; font-weight: 600; letter-spacing: 1px; }
.code-row .c-note { color: var(--muted, #888); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-row .c-batch { color: var(--muted, #555); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-gen-result { margin-top: 10px; font-size: 13px; line-height: 1.9; }
.gen-summary { margin-bottom: 6px; }
.gen-actions { display: flex; gap: 8px; align-items: center; }
.gen-codes-box {
  width: 100%;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.7;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: #f7f8fa;
  resize: vertical;
  margin-bottom: 8px;
}
.code-gen-result code {
  background: #eef2ff;
  color: #3730a3;
  padding: 2px 7px;
  border-radius: 5px;
  margin-right: 5px;
  font-family: monospace;
  letter-spacing: 1px;
}

/* =====================================================================
   设置页 · 暗色玻璃主题（仅作用于 .settings-page，不污染对话页 light 主题）
   设计参考：竞品 coze.site 设置页 —— 炭灰背景 + 半透明卡片 + 紫色强调
   核心四要素：① 背景压暗（近黑）② 卡片半透明（玻璃质感）
            ③ 圆角柔和 ④ 紫色点睛
   ===================================================================== */
.settings-page {
  --bg: #0d0d13;
  --bg-2: #13131b;
  --card: rgba(30, 32, 44, 0.62);
  --card-solid: #20222c;
  --card-2: rgba(40, 42, 54, 0.65);
  --primary: #a855f7;
  --primary-d: #9333ea;
  --accent-soft: rgba(168, 85, 247, 0.14);
  --text: #f3f4f8;
  --muted: #9aa0b4;
  --border: rgba(255, 255, 255, 0.09);
  --border-2: rgba(255, 255, 255, 0.14);
}
.settings-page {
  /* 背景不画在 body 上，全部交给 ::before 的氛围渐变负责 */
  background: transparent;
  color: var(--text);
  position: relative;
  min-height: 100vh;
}
/* 背景压暗 + 紫色氛围光：让半透明卡片有东西可"透"，质感才出得来
   关键：渐变必须铺满整个 viewport，否则下方卡片透出去的就是黑的，
   黑色 + 半透明灰 = 浑浊灰白，看不清字。 */
.settings-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 40% at 15% 10%, rgba(168, 85, 247, 0.45) 0%, rgba(168, 85, 247, 0) 60%),
    radial-gradient(40% 35% at 90% 25%, rgba(124, 92, 255, 0.35) 0%, rgba(124, 92, 255, 0) 60%),
    radial-gradient(45% 35% at 50% 45%, rgba(192, 132, 252, 0.20) 0%, rgba(192, 132, 252, 0) 65%),
    radial-gradient(50% 40% at 20% 65%, rgba(88, 60, 200, 0.32) 0%, rgba(88, 60, 200, 0) 65%),
    radial-gradient(45% 40% at 85% 80%, rgba(168, 85, 247, 0.30) 0%, rgba(168, 85, 247, 0) 65%),
    radial-gradient(60% 45% at 50% 100%, rgba(124, 92, 255, 0.35) 0%, rgba(124, 92, 255, 0) 70%),
    linear-gradient(180deg, #0a0a10 0%, #14141c 100%);
}
/* 顶层堆叠：内容层在氛围光之上 */
.settings-page > * { position: relative; z-index: 1; }

/* 顶栏：半透明毛玻璃 */
.settings-page .topbar {
  background: rgba(15, 15, 21, 0.55);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
}
.settings-page .topbar-info { color: var(--muted); }
.settings-page .icon-btn { color: var(--text); }
.settings-page .icon-btn:hover { background: rgba(255, 255, 255, 0.08); }

/* 布局：左=设置（提示词区域 + 其他设置卡，占40%）；右=聊天调试窗（可发消息，占60%） */
.settings-page .settings-wrap {
  max-width: 1440px;
  padding: 28px 24px 64px;
}
.settings-page .settings-layout-3 {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: 24px;
  align-items: start;
}
.settings-page .left-col,
.settings-page .right-col { min-width: 0; }
/* 左栏（第一个区域）独立垂直滚动：内容超出时在本栏右侧出现滚动条，右栏聊天窗不被带动 */
.settings-page .left-col {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.settings-page .left-col::-webkit-scrollbar { width: 8px; }
.settings-page .left-col::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; }
.settings-page .left-col::-webkit-scrollbar-track { background: transparent; }

/* 玻璃卡片：半透明 + 毛玻璃模糊 + 柔和圆角 + 顶部高光 */
.settings-page .card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.settings-page .card:hover {
  border-color: var(--border-2);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.settings-page .card h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 16px;
  padding: 0;
  border: none;
  color: #fff;
  letter-spacing: 0.5px;
}

/* 字段 */
.settings-page .field > label { color: #cdd1e0; }
.settings-page .field textarea,
.settings-page .field input[type='text'] {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-2);
  color: var(--text);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.settings-page .field textarea::placeholder,
.settings-page .field input::placeholder { color: #6b7080; }
.settings-page .field textarea:focus,
.settings-page .field input:focus,
.settings-page .row select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

/* 下拉 */
.settings-page .row select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-2);
  color: var(--text);
}
.settings-page .row select option { background: #20222c; color: #fff; }

/* 滑块：紫色 */
.settings-page input[type='range'] {
  accent-color: var(--primary);
  height: 6px;
}

/* 模板 chip */
.settings-page .tp-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-2);
  color: #cdd1e0;
}
.settings-page .tp-chip:hover { border-color: var(--primary); color: #fff; background: rgba(168, 85, 247, 0.12); }
.settings-page .tp-chip.active { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3); }

/* 字号预览 */
.settings-page .font-preview {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--border-2);
  color: var(--text);
  border-radius: 12px;
}

/* 分段选择 */
.settings-page .seg button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-2);
  color: #cdd1e0;
  border-radius: 12px;
}
.settings-page .seg button small { color: var(--muted); }
.settings-page .seg button.active {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(124, 92, 255, 0.18));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 6px 18px rgba(168, 85, 247, 0.22);
}
.settings-page .seg button.active small { color: rgba(255, 255, 255, 0.85); }

/* 头像预览 */
.settings-page .avatar-preview {
  background: linear-gradient(135deg, var(--primary), #7c5cff);
  color: #fff;
}

/* 角色网格 */
.settings-page .preset {
  background-color: var(--card-2);
  border: 2px solid transparent;
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.settings-page .preset:hover {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
.settings-page .preset.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3), 0 10px 24px rgba(168, 85, 247, 0.3);
}
.settings-page .preset .preset-check { background: var(--primary); box-shadow: 0 0 12px rgba(168, 85, 247, 0.5); }

/* ghost 按钮暗色化 */
.settings-page .ghost { background: rgba(255, 255, 255, 0.06); color: #cdd1e0; }
.settings-page .ghost:hover { background: rgba(255, 255, 255, 0.12); }
.settings-page .ghost.danger {
  background: rgba(226, 85, 85, 0.12);
  color: #ff8a8a;
  border: 1px solid rgba(226, 85, 85, 0.3);
}
.settings-page .ghost.danger:hover { background: rgba(226, 85, 85, 0.2); }

/* 提示文字 */
.settings-page .tip { color: #7e859a; }
.settings-page .hint { color: #cdd1e0; }

/* 进入对话按钮 */
.settings-page .primary.block {
  margin-top: 4px;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(168, 85, 247, 0.32);
}
.settings-page .primary.block:hover {
  box-shadow: 0 12px 32px rgba(168, 85, 247, 0.44);
}

/* ===== 设置页右栏：完整复制首页数字人聊天（嵌入容器）===== */
/* 容器卡：固定高度、吸顶，内部聊天区填满剩余空间 */
.settings-page .debug-card {
  position: sticky;
  top: 76px;
  height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.settings-page .debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 0;
}
.settings-page .debug-card h2 { margin: 0; }
.settings-page .debug-card > .tip {
  padding: 6px 20px 12px;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}
.settings-page .debug-chat {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}
/* 视频背景：仅在容器内切，绝不溢出到整屏（靠 .debug-chat 非 body.chat-page 生效）*/
.settings-page .debug-chat .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #000;
}
/* 消息区 / 模式条 / 输入区：贴容器边缘，不按视口 42vw/92vw 计算宽度 */
.settings-page .debug-chat .messages {
  left: 16px;
  right: 16px;
  width: auto;
  top: 16px;
  bottom: 230px;
}
.settings-page .debug-chat .mode-bar {
  left: 16px;
  right: 16px;
  width: auto;
  bottom: 140px;
  transform: none;
}
.settings-page .debug-chat .input-area {
  left: 16px;
  right: 16px;
  width: auto;
  bottom: 16px;
  transform: none;
}
.settings-page .debug-chat .mode-bar,
.settings-page .debug-chat .input-area {
  background: rgba(255, 255, 255, 0.85);
}

/* 响应式：窄屏单列，聊天区改自适应高度 */
@media (max-width: 860px) {
  .settings-page .settings-layout-3 { grid-template-columns: 1fr; gap: 18px; }
  .settings-page .debug-card { position: static; height: auto; }
  .settings-page .debug-chat { min-height: 480px; }
}

/* ===== 登录页 · 暗色玻璃主题（与设置页统一） ===== */
.login-page {
  --bg: #14141a;
  --card: #20222c;
  --primary: #a855f7;
  --primary-d: #9333ea;
  --text: #f3f4f8;
  --muted: #9aa0b4;
  --border: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.12);
  background: var(--bg);
  color: var(--text);
}
.login-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(168, 85, 247, 0.22) 0%, rgba(168, 85, 247, 0) 55%),
    radial-gradient(80% 40% at 80% 100%, rgba(124, 92, 255, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.login-page .login-card {
  position: relative;
  z-index: 1;
  background: rgba(32, 34, 44, 0.92);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.login-page .login-brand .sub { color: var(--muted); }
.login-page .avatar-ring {
  background: linear-gradient(135deg, var(--primary), #7c5cff);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.35);
}
.login-page .tab {
  background: rgba(255, 255, 255, 0.05);
  color: #cdd1e0;
}
.login-page .tab:hover { background: rgba(255, 255, 255, 0.1); }
.login-page .tab.active { background: var(--primary); color: #fff; }
.login-page #form label { color: #cdd1e0; }
.login-page #form input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-2);
  color: var(--text);
}
.login-page #form input::placeholder { color: #6b7080; }
.login-page #form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}
.login-page .reg-tip { color: var(--muted); }

/* ===== 后台管理页深色补全 =====
   admin.html 和 users.html 也使用 body.settings-page，
   以下覆盖其内部硬编码/默认浅色表面，保证在暗色主题下可读。
   ===== */
.settings-page .code-row.code-head { background: rgba(255, 255, 255, 0.06); }
.settings-page .gen-codes-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text);
}
.settings-page .code-gen-result code {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
}
.settings-page .admin-cat-head input[type='text'],
.settings-page .admin-row input[type='text'],
.settings-page .admin-persona .k-prompt,
.settings-page .user-row input[type='number'],
.settings-page .user-row input[type='date'],
.settings-page .user-filter select,
.settings-page .user-filter input[type='text'] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-2);
  color: var(--text);
}
.settings-page .admin-cat-head input::placeholder,
.settings-page .admin-row input::placeholder,
.settings-page .user-filter input::placeholder { color: #6b7080; }
.settings-page .backup-row { background: var(--card); }

/* ===== 对话页 · 白底磨砂浮层 =====
   设计参照竞品：数字人视频铺满全屏作背景，所有 UI 控件（消息气泡、模式条、输入栏）
   以白底磨砂圆角浮层落在画面上，靠右下/底部居中分布，不遮挡数字人。
   紫色 (#a855f7) 作为品牌色保留（active 态、发送按钮、用户气泡）。
   ===== */
.chat-page {
  --primary: #a855f7;
  --primary-d: #9333ea;
}
/* 消息气泡：AI 用白底浅边，用户用紫色品牌色 */
.chat-page .bubble {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #1a1a25;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.chat-page .msg.user .bubble {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35);
}
.chat-page .bubble-av {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #4a4a5a;
}
.chat-page .msg.user .bubble-av {
  background: linear-gradient(135deg, var(--primary), #8a6ef7);
  border-color: transparent;
  color: #fff;
}

/* 模式条 + 输入栏：浅色已在前面基础样式定义，这里只补 hover 状态 */
.chat-page .mode-bar { /* 同基础样式 */ }
.chat-page .input-area { /* 同基础样式 */ }
.chat-page .input-area input[type='text'],
.chat-page .input-area textarea {
  background: #fff;
  color: #1a1a25;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.chat-page .input-area input[type='text']:focus,
.chat-page .input-area textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}
.chat-page .input-area input::placeholder,
.chat-page .input-area textarea::placeholder { color: #9aa0b4; }

/* 麦克风 / 键盘 / 语音大按钮 */
.chat-page .mic-btn,
.chat-page .key-btn {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #4a4a5a;
}
.chat-page .mic-btn:hover,
.chat-page .key-btn:hover {
  background: rgba(168, 85, 247, 0.10);
  border-color: var(--primary);
  color: var(--primary);
}
.chat-page .voice-big {
  background: rgba(255, 255, 255, 0.85);
  border: 1px dashed rgba(168, 85, 247, 0.5);
  color: var(--primary);
  font-weight: 600;
}
.chat-page .voice-big:hover {
  background: rgba(168, 85, 247, 0.12);
  border-style: solid;
  border-color: var(--primary);
}
.chat-page .voice-hint { color: #6b7080; }

/* 重听 + 删除按钮 */
.chat-page .replay {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #4a4a5a;
}
.chat-page .replay:hover {
  background: rgba(168, 85, 247, 0.10);
  border-color: var(--primary);
  color: var(--primary);
}
.chat-page .del-btn {
  background: rgba(226, 85, 85, 0.08);
  border: 1px solid rgba(226, 85, 85, 0.2);
  color: #d04a4a;
}
.chat-page .del-btn:hover {
  background: rgba(226, 85, 85, 0.18);
  border-color: #d04a4a;
}

/* 作图下拉 + 图片重试 */
.chat-page #drawInput select {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a25;
}
.chat-page .img-regen {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #4a4a5a;
}
.chat-page .img-regen:hover {
  border-color: var(--primary);
  color: var(--primary);
}
/* 作图结果：可点开放大 */
.chat-page .gen-img {
  cursor: zoom-in;
}
/* 图片放大预览（全屏遮罩） */
.img-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  box-sizing: border-box;
}
.img-lightbox[hidden] {
  display: none;
}
.img-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  background: #111;
  cursor: zoom-out;
}
.img-lightbox-close {
  position: fixed;
  top: 16px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: 0.15s;
}
.img-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
}

/* 窄屏（手机）：消息区占满宽度，控件全宽 */
@media (max-width: 768px) {
  .chat-page .messages {
    right: 12px;
    left: 12px;
    width: auto;
    top: 64px;
    bottom: 200px;
  }
  .chat-page .mode-bar {
    bottom: 116px;
    width: calc(100vw - 24px);
  }
  .chat-page .input-area {
    width: calc(100vw - 24px);
    bottom: 12px;
  }
}