:root {
  --screen-width: 350px;
  --screen-height: 650px;
  --secondary-bg: #ffffff;
  --border-color: #e0e0e0;
  --text-primary: #1f1f1f;
  --text-secondary: #8a8a8a;
  --accent-color: #007bff;
  --status-bar-text-color: var(--accent-color);
}
/* ▼▼▼ 用这块终极代码，替换掉你现有的 html 和 body 样式 ▼▼▼ */
html {
  -webkit-text-size-adjust: 100%;
  height: 100%; /* 确保html元素也能撑满 */
}

body {
  margin: 0;
  font-family: 'bulangni', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: normal;
  background-color: #f0f2f5;
  height: 100%; /* 让body也撑满父元素(html) */
  overflow: hidden; /* 防止body本身出现滚动条 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* 2. 让 #phone-screen 成为新的“根”容器，撑满整个浏览器窗口 */
/* ▼▼▼ 请用这块【最终修正版】的代码，替换掉你现有的 #phone-screen 样式 ▼▼▼ */
#phone-screen {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #ffffff; /* ★ 修改这里为白色 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* 3. 【核心】隐藏掉模拟器的状态栏 */
#status-bar {
  display: none;
}

/* 4. 【核心】让所有页面的头部自动适应iPhone的“刘海”安全区 */
.header,
.qzone-header {
  /* 使用 env(safe-area-inset-top) 自动获取顶部安全距离 */
  padding-top: calc(15px + env(safe-area-inset-top));
}

/* 5. 【核心】让聊天输入框和底部导航栏自动适应iPhone底部的“小黑条”安全区 */
#chat-input-area {
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

#chat-list-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ▲▲▲ 替换结束 ▲▲▲ */

/* 修改后的代码块 */
/* ▼▼▼ 用这整块【可爱圆润版】代码，替换掉所有旧的 status-bar 和 battery 样式 ▼▼▼ */

#status-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 12px 20px;
  display: none;
  justify-content: space-between;
  align-items: center;
  color: var(--accent-color); /* ★ 修改：状态栏文字/图标颜色，现在会跟随主题色！ */
  z-index: 10;
  font-size: 14px;
  box-sizing: border-box;
  pointer-events: none;
  /* ★ 新增：使用你的自定义字体，并加上柔和的光晕，让它更可爱 */
  font-family: 'bulangni', sans-serif;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

#status-bar-time {
  font-weight: 600;
}

.battery-container {
  display: flex;
  align-items: center;
  gap: 5px;
}

.battery-icon {
  width: 25px;
  height: 12px;
  border: 1.5px solid currentColor; /* ★ 边框加粗一点点 */
  border-radius: 5px; /* ★ 修改：增加圆角，让它更圆润可爱 */
  position: relative;
  padding: 1px;
}

.battery-icon::after {
  content: '';
  position: absolute;
  right: -4px; /* 微调位置 */
  top: 2.5px;
  width: 2px;
  height: 5px;
  background-color: currentColor;
  border-radius: 0 2px 2px 0; /* ★ 头部小块也变圆润 */
}

.battery-level {
  height: 100%;
  background-color: currentColor; /* ★ 默认填充色也跟随主题色 */
  border-radius: 3px; /* ★ 内部填充条也变圆润 */
  transition: width 0.5s ease;
}

/* ★ 核心修改：让充电时也显示主题色！ */
.battery-container.charging .battery-level {
  animation: charge-breath 2s infinite;
}
@keyframes charge-breath {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
/* ▲▲▲ 替换结束 ▲▲▲ */
/* ▼▼▼ 【终极修正版】请用这块代码完整替换掉所有旧的 .screen 样式 ▼▼▼ */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0; /* ★ 新增 */
  bottom: 0; /* ★ 新增 */
  width: 100%; /* 保留 */
  /* height: 100%; */ /* ★ 注释或删除掉这一行 */

  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
/* ▲▲▲ 替换结束 ▲▲▲ */
/* ▲▲▲ 替换结束 ▲▲▲ */
/* ▲▲▲ 替换结束 ▲▲▲ */

.screen.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.header {
  position: relative;
  z-index: 15;
  flex-shrink: 0;
  padding: 15px 15px;
  padding-top: 45px;
  background-color: rgba(247, 247, 247, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;

  /* ▼▼▼ 新增下面这两行 ▼▼▼ */
  height: 110px; /* ★ 新增：强制设置一个统一的高度 */
  box-sizing: border-box; /* ★ 新增：确保高度计算包含内边距 */
  /* ▲▲▲ 新增结束 ▲▲▲ */
}

.header .header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
/* ▼▼▼ 【触摸区域优化版】替换旧的 .header .back-btn, .header .action-btn 样式 ▼▼▼ */
.header .back-btn,
.header .action-btn {
  font-size: 24px; /* 保持图标大小不变 */
  cursor: pointer;
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;

  /* --- 核心修改从这里开始 --- */
  width: 40px; /* 1. 将按钮宽度从30px增加到40px */
  height: 40px; /* 2. 将按钮高度从30px增加到40px */
  border-radius: 50%; /* 3. (可选但推荐) 让按钮变成圆形，更美观 */
  transition: background-color 0.2s; /* 4. 为悬停效果添加平滑动画 */
}

/* 【新增】为按钮添加悬停/点击时的背景色，给用户明确的反馈 */
.header .back-btn:hover,
.header .action-btn:hover {
  background-color: rgba(0, 0, 0, 0.05); /* 鼠标放上去时给一个淡淡的背景 */
}
#phone-screen.dark-mode .header .back-btn:hover,
#phone-screen.dark-mode .header .action-btn:hover {
  background-color: rgba(255, 255, 255, 0.1); /* 夜间模式下的悬停颜色 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

.header .action-btn {
  font-size: 16px; /* 专门为“上传”、“+”等文字按钮缩小字号 */
  font-weight: 600; /* 可以加粗一点让它更清晰 */
}

.header .action-btn img {
  height: 26px;
}
.header .save-btn {
  font-size: 16px;
  color: var(--accent-color);
  font-weight: 600;
  cursor: pointer;
}
/* ▼▼▼ 【终极合并修正版】请用这块代码完整替换掉旧的 #home-screen, #clock-container, .app-grid 样式 ▼▼▼ */

/* 1. (核心) 为锁屏和主屏幕应用相同的全屏布局 (此部分保持不变) */
#lock-screen,
#home-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;

  /* 用padding把内容挤进来，同时让背景铺满安全区 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: 20px;
  padding-right: 20px;

  box-sizing: border-box;
}

/* 2. (核心) 单独处理锁屏的文字，让它自动贴底 (这是本次的唯一修改) */
#lock-screen-content {
  margin-top: auto; /* 关键：自动将此元素推到容器底部 */
  margin-bottom: 40px; /* ★ 核心修正：使用 margin-bottom 向上推开，而不是padding */
  text-align: center;
  color: white;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  font-size: 16px;
  font-weight: 500;
}

/* 3. 保持主屏幕的时钟和App图标布局不变 */
#clock-container {
  text-align: center;
  color: white;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  margin-bottom: 20px;
  flex-shrink: 0;
  margin-top: 60px;
}
.app-grid {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 20px;
  margin-bottom: 30px;
}

/* ▲▲▲ 替换结束 ▲▲▲ */

.app-row {
  display: flex;
  justify-content: center;
  gap: 25px;
  width: 100%;
}
.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.app-icon .icon-bg {
  width: 65px;
  height: 65px;
  border-radius: 18px;
  background-color: var(--secondary-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  margin-bottom: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
  overflow: hidden;
}
.app-icon:active .icon-bg {
  transform: scale(0.9);
}
.app-icon .icon-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.app-icon .label {
  color: white;
}
.form-container,
.list-container {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-secondary);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
}
.form-group textarea {
  min-height: 80px;
  resize: vertical;
}
#world-book-content-input {
  height: calc(100% - 120px);
}
.form-button {
  width: 100%;
  padding: 15px;
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}
.form-button-secondary {
  background-color: #f0f0f0;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
#wallpaper-screen .form-container {
  align-items: center;
}
#wallpaper-preview {
  width: 180px;
  height: 320px;
  border: 2px dashed var(--border-color);
  background-color: var(--secondary-bg);
  margin-bottom: 20px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-secondary);
}
#wallpaper-upload-input {
  display: none;
}
/* 修改后的 #world-book-list 样式 */
/* 【终极修复版】世界书主界面列表样式 */
#world-book-list {
  flex-grow: 1; /* 让列表占据所有剩余的垂直空间 */
  overflow-y: auto; /* 内容超出时，自动显示垂直滚动条 */
  min-height: 0; /* 解决Flex布局下的滚动兼容性问题 */
  background-color: var(--secondary-bg); /* 保留你喜欢的背景色 */
  /* 我们不再需要 padding-top 和 margin-top 这两个技巧了 */
}

/* 修改后的 #chat-list 样式，适配了iOS底部安全区 */
#chat-list {
  flex-grow: 1;
  background-color: var(--secondary-bg);
  padding-top: 110px;
  /* 核心修复：将底部内边距从 8px 增加到 60px，为导航栏留出足够空间 */
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.list-item {
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}
.list-item:hover {
  background-color: #f5f5f5;
}
.list-item .item-title {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 5px;
}
.list-item .item-content {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-list-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}
.chat-list-item:hover {
  background-color: #f5f5f5;
}
.chat-list-item .avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
  background-color: #ccc;
}
.chat-list-item .info {
  flex-grow: 1;
  overflow: hidden;
}
.chat-list-item .name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.chat-list-item .name {
  font-weight: 500;
  color: var(--text-primary);
}
.chat-list-item .group-tag {
  font-size: 10px;
  color: var(--accent-color);
  background-color: #e7f3ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  flex-shrink: 0;
}
.chat-list-item .last-msg {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
/* 修改后的代码 */
/* ▼▼▼ 用这块【终极修复版】代码，替换你旧的 #chat-interface-screen 和 #chat-messages 样式 ▼▼▼ */

/* 1. 聊天屏幕总容器：让它成为一个撑满屏幕的Flex列布局 */
#chat-interface-screen {
  background-size: cover;
  background-position: center;
  display: flex; /* <-- 核心：必须是flex布局 */
  flex-direction: column; /* <-- 核心：子元素垂直排列 */
  height: 100%; /* <-- 核心：撑满父容器 */
  overflow: hidden; /* <-- 核心：防止任何意外溢出 */
}

/* 2. 聊天消息区域：让它自动填充剩余空间，而不是固定高度 */
#chat-messages {
  flex-grow: 1; /* ★★★ 最最关键的一行！让它自动伸缩，填满剩余空间 ★★★ */
  min-height: 0; /* 一个神奇的保险丝，解决Flex布局下的滚动兼容问题 */
  overflow-y: auto; /* 内容超出时，允许自身垂直滚动 */
  overflow-x: hidden;
  padding: 10px 15px; /* 保留舒适的左右内边距 */
  box-sizing: border-box;

  /* 
     * 保留你的头部适配方案：
     * 为顶部半透明的header留出空间，同时让背景图能透上去。
     * 110px是header的高度, -80px是向上拉的距离，你可以根据你的header样式微调。
    */
  padding-top: 110px;
  margin-top: -80px;

  /* 保持内部消息气泡的flex布局 */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ▲▲▲ 替换结束 ▲▲▲ */
#load-more-btn {
  text-align: center;
  padding: 10px;
  color: var(--accent-color);
  font-size: 14px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  width: 100%;
}
#load-more-btn:hover {
  text-decoration: underline;
}

/* ▼▼▼ 用这整块【最终修复版】代码，完整替换所有旧的 .sender-name 样式 ▼▼▼ */

/* 1. 这是发送者信息行 (名字+标签) 的总容器 */
/* ▼▼▼ 【独家定制】昵称/头衔上移修复 ▼▼▼ */
/* 
  用这整块代码，完整替换掉你旧的 .group-sender-line 样式。
  它将把名字和标签整体向上移动一点，避免遮挡气泡。
*/

.group-sender-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #666;
  position: absolute;

  /* ★★★ 修改这里：从 -16px 改为 -18px，让它向上移动2像素 ★★★ */
  /* 你可以根据自己的喜好，继续减小这个值（比如-20px）让它更高 */
  top: -18px;

  left: 50px;
  white-space: nowrap;

  /* 【新增】为了保证层级，确保它在气泡之上 */
  z-index: 1;
}

/* ▲▲▲ 替换结束 ▲▲▲ */

/* 2. 我们不再需要针对 .sender-name 的特殊定位了，因为现在都由 .group-sender-line 控制 */
/* 所以，可以把旧的 .message-wrapper.ai .sender-name 规则删掉，或者用这个空的规则覆盖掉它 */
.message-wrapper.ai .sender-name {
  /* 这个规则现在是空的，因为它已经被新的 .group-sender-line 替代了 */
}

/* 3. 【全新】这是聊天界面内，跟在名字后面的身份和头衔标签的专属样式 */
.group-sender-tags {
  display: inline-flex; /* 确保它自己也是一个 flex 容器，让内部的标签能水平排列 */
  align-items: center;
  gap: 5px; /* 标签之间的间距 */
}

.group-role-tag,
.group-title-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px; /* 圆润的胶囊形状 */
  font-weight: 500;
  line-height: 1.4;
}

/* 群主和管理员的颜色 */
.group-role-tag.owner {
  background-color: #fff2c2;
  color: #d98c00;
  border: 1px solid #ffe89d;
}
.group-role-tag.admin {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

/* ▼▼▼ 【独家终极修复版】请用这整块代码，完整替换掉所有旧的 .group-title-tag 样式 ▼▼▼ */

/* ▼▼▼ 【最终修复版】请将这整块代码粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* 1. 先为【所有】头衔设置你想要的紫色作为默认值 */
.group-title-tag {
  background-color: #e9e7fd !important; /* 淡紫色背景 */
  color: #5e548e !important; /* 深紫色文字 */
  border: 1px solid #d9d5f8 !important; /* 稍深的紫色边框 */
}

/* 2. 然后，单独为【管理员】的头衔设置绿色 */
.group-role-tag.admin ~ .group-title-tag {
  background-color: #d4edda !important; /* 复制管理员标签的绿色 */
  color: #155724 !important;
  border: 1px solid #c3e6cb !important;
}

/* 3. 同理，为【群主】的头衔设置黄色 */
.group-role-tag.owner ~ .group-title-tag {
  background-color: #fff2c2 !important; /* 复制群主标签的黄色 */
  color: #d98c00 !important;
  border: 1px solid #ffe89d !important;
}

/* === 夜间模式适配 (原理相同) === */

/* 夜间模式下的默认紫色 */
#phone-screen.dark-mode .group-title-tag {
  background-color: #3b3355 !important;
  color: #c3b9e7 !important;
  border-color: #514777 !important;
}

/* 夜间模式下的管理员绿色 */
#phone-screen.dark-mode .group-role-tag.admin ~ .group-title-tag {
  background-color: #104a3c !important;
  color: #76ddc4 !important;
  border-color: #176854 !important;
}

/* 夜间模式下的群主黄色 */
#phone-screen.dark-mode .group-role-tag.owner ~ .group-title-tag {
  background-color: #594200 !important;
  color: #ffd466 !important;
  border-color: #795b00 !important;
}

/* ▲▲▲ 修复结束 ▲▲▲ */

/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▲▲▲ 替换结束 ▲▲▲ */

/* === 【全新】消息布局与时间戳样式 === */

/* 1. 消息单元的总容器 (重构) */
.message-wrapper {
  display: flex; /* 使用Flex布局 */
  gap: 8px; /* 气泡和时间戳之间的间距 */
  align-items: flex-end; /* 核心：让气泡和时间戳底部对齐 */
  position: relative;
  max-width: 90%; /* 可以稍微放宽一点，因为时间戳现在在外面了 */
}

/* 2. AI消息单元靠左 */
.message-wrapper.ai {
  align-self: flex-start;
  flex-direction: row; /* 头像、气泡、时间戳，从左到右排列 */
}

/* 3. 用户消息单元靠右 */
.message-wrapper.user {
  align-self: flex-end;
  flex-direction: row-reverse; /* 时间戳、气泡、头像，从右到左排列 */
}

/* 4. 气泡和头像的直接容器 (保持不变) */
.message-bubble {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 100%;
}

.timestamp {
  /* 移除旧的 position: absolute */
  font-size: 11px;
  color: #999;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
  white-space: nowrap; /* 防止时间换行 */
  margin-bottom: 5px; /* 让它和气泡底部有轻微的对齐偏移，更美观 */
  flex-shrink: 0; /* 防止被压缩 */
}

.message-bubble.selected::after {
  content: '✔';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--accent-color);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.message-bubble.user.selected::after {
  left: auto;
  right: -10px;
}

.message-bubble.user {
  flex-direction: row-reverse;
}
#typing-indicator {
  align-self: flex-start;
  display: none;
  margin: 0 10px 10px;
  color: var(--text-secondary);
}
/* 修改聊天输入框区域的 padding */
#chat-input-area {
  flex-shrink: 0;
  /* ▼▼▼ 核心修改1：增加了上、左、右的内边距，让整个区域更“宽敞” ▼▼▼ */
  padding: 10px 12px;
  background-color: rgba(247, 247, 247, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 修改iPhone底部安全区的适配 */
#chat-input-area {
  /* ▼▼▼ 核心修改2：将这里的 8px 也同步为 10px，保持一致 ▼▼▼ */
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

#chat-input-main-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
#chat-input {
  flex-grow: 1;
  border: none;
  padding: 10px 15px;
  border-radius: 20px;
  background-color: var(--secondary-bg);
  font-size: 16px;
  max-height: 100px;
  resize: none;
}
.action-button {
  border: none;
  color: white;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
#send-btn {
  background-color: var(--accent-color);
  height: 40px;
  padding: 0 15px;
}
.modal {
  /* ▼▼▼ 核心修改：将定位方式从 absolute 改为 fixed ▼▼▼ */
  position: fixed;
  /* ▲▲▲ 修改结束 ▲▲▲ */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.modal.visible {
  display: flex;
}
.modal-content {
  width: 90%;
  max-height: 90%;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
}
.modal-header {
  padding: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-body {
  padding: 15px;
  overflow-y: auto;
}
.modal-footer {
  padding: 15px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-around;
}
.modal-footer button {
  width: 45%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--accent-color);
  cursor: pointer;
  font-size: 16px;
}
.modal-footer .save {
  background-color: var(--accent-color);
  color: white;
}
.modal-footer .cancel {
  background-color: white;
  color: var(--accent-color);
}
.avatar-upload {
  display: flex;
  align-items: center;
  gap: 15px;
}
.avatar-upload img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #eee;
}
.avatar-upload button {
  padding: 8px 12px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
}
#open-persona-library-btn {
  font-size: 14px;
  padding: 6px 10px;
  margin-left: 0;
}
.avatar-upload input[type='file'] {
  display: none;
}
.theme-selector label {
  display: inline-flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 5px;
  cursor: pointer;
}
#reset-theme-btn {
  background: none;
  border: 1px solid #ccc;
  color: #555;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}
#group-members-settings {
  display: flex;
  overflow-x: auto;
  padding-bottom: 10px;
  gap: 15px;
}
.member-editor {
  text-align: center;
  cursor: pointer;
}
.member-editor img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #eee;
  margin-bottom: 5px;
}
.member-editor .member-name {
  font-size: 12px;
}
#notification-bar {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 90%;
  z-index: 500;
  background-color: rgba(250, 250, 250, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transform: translateX(-50%) translateY(-150%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  visibility: hidden;
}
#notification-bar.visible {
  /* 关键：在Y轴回到原位的同时，保持X轴的居中变换 */
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}
#notification-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
#notification-content .name {
  font-weight: 600;
  font-size: 15px;
  color: #000;
}
#notification-content .message {
  font-size: 14px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.sticker-image {
  /* 核心修改：将最大宽高从 100px 增加到 140px，让聊天中的表情包变大 */
  max-width: 140px;
  max-height: 140px;
  display: block;
  object-fit: contain;
}
/* ▼▼▼ 请用这整块代码替换 ▼▼▼ */

.message-bubble.is-sticker,
.message-bubble.is-voice-message,
.message-bubble.is-ai-image,
.message-bubble.has-image:has(img:only-child) {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#chat-input-actions-top {
  display: flex;
  gap: 8px;
  padding: 0 5px;
}
.chat-action-icon-btn {
  font-size: 24px;
  padding: 0;
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  color: var(--text-primary);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
#sticker-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: rgba(242, 242, 247, 0.85);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-top: 1px solid var(--border-color);
  border-radius: 20px 20px 0 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}
#sticker-panel.visible {
  transform: translateY(0);
  visibility: visible;
}
#sticker-panel-header {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
}
#sticker-panel-header .title {
  font-weight: 600;
}
#sticker-panel-header .panel-btn {
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--accent-color);
}
#sticker-grid,
#exclusive-sticker-grid,
#common-sticker-grid {
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px;
  display: grid;
  /* 核心修改：将 80px 增大到 100px，让每个表情格子变大 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 15px;
}
.sticker-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.sticker-item .delete-btn {
  display: none;
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  background-color: #ff3b30;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  cursor: pointer;
  border: 2px solid white;
}
#input-actions-wrapper {
  position: static;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
#wait-reply-btn {
  position: static;
  bottom: auto;
  right: auto;
  width: auto;
  height: 40px;
  padding: 0 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s, transform 0.1s;
  cursor: pointer;
}
#wait-reply-btn:hover {
  opacity: 0.8;
}
#wait-reply-btn:active {
  transform: scale(0.9);
}
#wait-reply-btn img {
  height: 22px;
  display: block;
  margin: auto;
}
.chat-image {
  max-width: 100%;
  border-radius: 10px;
  display: block;
}
.message-bubble.has-image .content {
  padding: 5px;
}
#custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
#custom-modal-overlay.visible {
  display: flex;
  opacity: 1;
}
#custom-modal {
  background-color: #fff;
  width: 280px;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transform: scale(0.95);
  transition: transform 0.2s ease-in-out;
}
#custom-modal-overlay.visible #custom-modal {
  transform: scale(1);
}
.custom-modal-header {
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}
.custom-modal-body {
  padding: 0 16px 16px;
  text-align: center;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}
.custom-modal-body p {
  margin: 0;
  margin-bottom: 12px;
}
.custom-modal-body input {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  box-sizing: border-box;
}
.custom-modal-footer {
  border-top: 1px solid #dbdbdb;
  display: flex;
}
.custom-modal-footer button {
  flex: 1;
  background: none;
  border: none;
  padding: 12px;
  font-size: 17px;
  cursor: pointer;
  color: var(--accent-color);
}
.custom-modal-footer button:first-child {
  border-right: 1px solid #dbdbdb;
}
.custom-modal-footer .confirm-btn {
  font-weight: 600;
}
.custom-modal-footer .confirm-btn.btn-danger {
  color: #ff3b30;
}
#preset-actions-modal .custom-modal-footer {
  flex-direction: column;
}
#preset-actions-modal .custom-modal-footer button {
  width: 100%;
  border: none;
  border-bottom: 1px solid #dbdbdb;
  padding: 14px;
  font-size: 18px;
}
#preset-actions-modal .custom-modal-footer button:last-child {
  border-bottom: none;
}
.custom-multiselect {
  position: relative;
  user-select: none;
}
.select-box {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #fff;
  cursor: pointer;
}
.select-box .selected-options-text {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}
.select-box .arrow-down {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-secondary);
  transition: transform 0.2s;
}
.select-box.expanded .arrow-down {
  transform: rotate(180deg);
}

.checkboxes-container {
  display: none;
  position: absolute;
  top: 100%;
  margin-top: 5px;
  left: 0;
  right: 0;
  max-height: 400px; /* ★★★ 修改点在这里 ★★★ 我把高度从 150px 增加到了 350px */
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  z-index: 101;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.checkboxes-container.visible {
  display: block;
}
.checkboxes-container label {
  display: block;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: normal;
  color: var(--text-primary);
}

.checkboxes-container label {
  display: block;
  padding: 12px 15px; /* <-- 修改：增加了上下和左右的内边距，让每一行更高更宽 */
  cursor: pointer;
  font-weight: normal;
  color: var(--text-primary);
  font-size: 15px; /* <-- 新增：将字体大小从默认值放大到15px */
}

.checkboxes-container input {
  margin-right: 10px;
  vertical-align: middle;
}
.bg-upload-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.bg-preview-img {
  max-width: 120px;
  max-height: 80px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  object-fit: cover;
  display: none;
}
#remove-bg-btn {
  padding: 8px 12px;
  border: 1px solid #ff3b30;
  color: #ff3b30;
  background-color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  display: none;
}
.message-bubble.is-ai-image .content {
  padding: 5px;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ai-generated-image {
  max-width: 180px;
  border-radius: 12px;
  display: block;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ai-generated-image:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.voice-message-body {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 12px;
  min-width: 80px;
  max-width: 200px;
}
.message-bubble.user .voice-message-body {
  color: #1a3d00;
  flex-direction: row-reverse;
}
.message-bubble.ai .voice-message-body {
  color: var(--text-primary);
}
.voice-waveform {
  display: flex;
  align-items: center;
  height: 20px;
  gap: 2px;
  flex-grow: 1;
  margin: 0 10px;
}
.voice-waveform div {
  width: 3px;
  background-color: currentColor;
  border-radius: 2px;
  animation: wave-quiet 1.5s ease-in-out infinite;
}
@keyframes wave-quiet {
  0%,
  100% {
    height: 2px;
  }
  50% {
    height: 10px;
  }
}
.voice-waveform div:nth-child(2) {
  animation-delay: 0.2s;
}
.voice-waveform div:nth-child(3) {
  animation-delay: 0.4s;
}
.voice-waveform div:nth-child(4) {
  animation-delay: 0.6s;
}
.voice-waveform div:nth-child(5) {
  animation-delay: 0.8s;
}
.voice-duration {
  /* --- 核心修正 --- */
  font-size: var(--chat-font-size, 13px);
  /* --- 修正结束 --- */
  font-weight: 500;
  color: var(--text-secondary);
}
.message-bubble.user .voice-duration {
  color: #3e6224;
}

/* ▼▼▼ 用这块代码替换掉你原来的 .message-bubble .content 样式 ▼▼▼ */
/* 通用内容区样式，为时间戳和字体大小做准备 */
.message-bubble .content {
  position: relative;
  font-size: var(--chat-font-size, 16px);
  padding: 8px 12px;
  line-height: 1.5;
  word-break: break-word; /* 核心修正: 强制长单词或URL换行，防止撑破气泡 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* === 气泡主题样式 === */
.message-bubble.user .content {
  background-color: rgba(255, 255, 255, 0.75);
  color: #585858;
  border-radius: 8px 2px 8px 8px;
}
.message-bubble.ai .content {
  background-color: rgba(255, 255, 255, 0.7);
  color: #585858;
  border-radius: 2px 8px 8px 8px;
}

.message-bubble::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 1;
}

#chat-messages[data-theme='pink_blue'] .message-bubble.user .content {
  background-color: #fff0f6;
  color: #432531;
}
#chat-messages[data-theme='pink_blue'] .message-bubble.ai .content {
  background-color: #eff7ff;
  color: #263a4e;
}
#chat-messages[data-theme='blue_white'] .message-bubble.user .content {
  background-color: #eff7ff;
  color: #263a4e;
}
#chat-messages[data-theme='blue_white'] .message-bubble.ai .content {
  background-color: #f8f9fa;
  color: #383d41;
}
#chat-messages[data-theme='purple_yellow'] .message-bubble.user .content {
  background-color: #faf7ff;
  color: #827693;
}
#chat-messages[data-theme='purple_yellow'] .message-bubble.ai .content {
  background-color: #fffde4;
  color: #5c4033;
}
#chat-messages[data-theme='black_white'] .message-bubble.user .content {
  background-color: #343a40;
  color: #f8f9fa;
}
#chat-messages[data-theme='black_white'] .message-bubble.ai .content {
  background-color: #f8f9fa;
  color: #343a40;
}
#chat-messages[data-theme='yellow_white'] .message-bubble.user .content {
  background-color: #ffeb3b;
  color: #5d4037;
}
#chat-messages[data-theme='yellow_white'] .message-bubble.ai .content {
  background-color: #f8f9fa;
  color: #383d41;
}
#chat-messages[data-theme='red_black'] .message-bubble.user .content {
  background-color: #c62828;
  color: #ffffff;
}
#chat-messages[data-theme='red_black'] .message-bubble.ai .content {
  background-color: #212121;
  color: #ffffff;
}
#chat-messages[data-theme='blue_yellow'] .message-bubble.user .content {
  background-color: #a0d2eb;
  color: #153243;
}
#chat-messages[data-theme='blue_yellow'] .message-bubble.ai .content {
  background-color: #fef9e7;
  color: #5d4037;
}
#chat-messages[data-theme='pink_yellow'] .message-bubble.user .content {
  background-color: #fff0f6;
  color: #432531;
}
#chat-messages[data-theme='pink_yellow'] .message-bubble.ai .content {
  background-color: #fef9e7;
  color: #5d4037;
}
#chat-messages[data-theme='pink_purple'] .message-bubble.user .content {
  background-color: #fff0f6;
  color: #a78396;
}
#chat-messages[data-theme='pink_purple'] .message-bubble.ai .content {
  background-color: #faf7ff;
  color: #827693;
}
#chat-messages[data-theme='gray_white'] .message-bubble.user .content {
  background-color: #e9ecef;
  color: #495057;
}
#chat-messages[data-theme='gray_white'] .message-bubble.ai .content {
  background-color: #f8f9fa;
  color: #383d41;
}
#chat-messages[data-theme='blue_green'] .message-bubble.user .content {
  background-color: #d1ecf1;
  color: #0c5460;
}
#chat-messages[data-theme='blue_green'] .message-bubble.ai .content {
  background-color: #d4edda;
  color: #155724;
}
#chat-messages[data-theme='pink_white'] .message-bubble.user .content {
  background-color: #fff0f6;
  color: #a78396;
}
#chat-messages[data-theme='pink_white'] .message-bubble.ai .content {
  background-color: #f8f9fa;
  color: #383d41;
}
#chat-messages[data-theme='pink_black'] .message-bubble.user .content {
  background-color: #f8bbd0;
  color: #5b2c6f;
}
#chat-messages[data-theme='pink_black'] .message-bubble.ai .content {
  background-color: #343a40;
  color: #f8f9fa;
}
#chat-messages[data-theme='pink_green'] .message-bubble.user .content {
  background-color: #f8bbd0;
  color: #5b2c6f;
}
#chat-messages[data-theme='pink_green'] .message-bubble.ai .content {
  background-color: #c8e6c9;
  color: #1b5e20;
}
#chat-messages[data-theme='green_black'] .message-bubble.user .content {
  background-color: #d4edda;
  color: #155724;
}
#chat-messages[data-theme='green_black'] .message-bubble.ai .content {
  background-color: #343a40;
  color: #f8f9fa;
}

#transfer-btn {
  font-weight: bold;
}
#transfer-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
#transfer-modal.visible {
  display: flex;
}
.transfer-content {
  background-color: #fff0f5;
  border-radius: 20px;
  width: 290px;
  padding: 20px;
  box-shadow: 0 5px 25px rgba(255, 105, 180, 0.3);
  text-align: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" opacity="0.05"><path d="M50,4 C35,4 28,15 28,24 C28,33 35,32 35,40 C35,48 28,49 28,57 C28,65 35,66 35,74 C35,82 28,83 28,91 C28,99 35,100 50,100 C65,100 72,99 72,91 C72,83 65,82 65,74 C65,66 72,65 72,57 C72,49 65,48 65,40 C65,32 72,33 72,24 C72,15 65,4 50,4 Z" fill="%23FF69B4"/></svg>');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 80px;
}
.transfer-header {
  font-size: 20px;
  font-weight: bold;
  color: #a35c7b;
  margin-bottom: 20px;
}
.transfer-input-group {
  margin-bottom: 15px;
  text-align: left;
}
.transfer-input-group label {
  display: block;
  font-size: 14px;
  color: #ff85b3;
  margin-bottom: 5px;
  font-weight: 500;
}
.transfer-input-group input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid #ffcce0;
  background-color: #fff;
  font-size: 16px;
  box-sizing: border-box;
}
.transfer-input-group input:focus {
  border-color: #ff85b3;
  outline: none;
}
.transfer-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.transfer-actions button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
}
.transfer-actions button:active {
  transform: scale(0.95);
}
#transfer-cancel-btn {
  background-color: #ffdde9;
  color: #a35c7b;
}
#transfer-confirm-btn {
  background-color: #ff85b3;
  color: white;
}
.message-bubble.is-transfer .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
}
.transfer-card {
  width: 200px;
  border-radius: 12px;
  padding: 12px;
  color: white;
  position: relative;
  overflow: hidden;
}
.transfer-card::before {
  content: '🐾';
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 30px;
  opacity: 0.2;
  transform: rotate(15deg);
}
.message-bubble.user .transfer-card {
  background: radial-gradient(circle at top left, #ffc5d5, #ff85b3);
}
.message-bubble.ai .transfer-card {
  background: radial-gradient(circle at top left, #a1c4fd, #c2e9fb);
}
.transfer-title {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.transfer-amount {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 4px;
}
.transfer-note {
  font-size: 13px;
  opacity: 0.9;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 8px;
  margin-top: 8px;
  word-break: break-all;
}

/* RealImag真实图片样式 */
.realimag-image {
  max-width: 250px;
  max-height: 250px;
  width: auto;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
  background-color: #f8f8f8;
  min-width: 100px;
  min-height: 100px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.realimag-image:hover {
  transform: scale(1.02);
}

.message-bubble.is-realimag .content {
  padding: 5px;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#listen-together-btn img.rotating {
  animation: spin 2s linear infinite;
}
#listen-together-btn img.paused {
  animation-play-state: paused;
}
#music-player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
}
#music-player-overlay.visible {
  display: flex;
}
.music-player-window {
  width: 90%;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #1f1f1f;
  position: relative;
}
#music-playlist-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}
#music-time-counter {
  font-size: 12px;
  color: #555;
  margin-bottom: 20px;
}
#music-player-song-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
  text-align: center;
}
#music-player-artist {
  font-size: 14px;
  color: #666;
  margin-bottom: 25px;
}
.music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-bottom: 30px;
}
.music-controls button {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s;
}
.music-controls button:active {
  transform: scale(0.9);
}
.music-controls .play-pause-btn {
  font-size: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
}
.music-bottom-actions {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.music-bottom-actions button {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
#music-exit-btn {
  background-color: rgba(255, 100, 100, 0.7);
  color: white;
  margin-right: 5px;
}
#music-return-btn {
  background-color: rgba(0, 123, 255, 0.7);
  color: white;
  margin-left: 5px;
}

#music-playlist-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background-color: rgba(242, 242, 247, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-top: 1px solid var(--border-color);
  border-radius: 20px 20px 0 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}
#music-playlist-panel.visible {
  transform: translateY(0);
  visibility: visible;
}
.playlist-header {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
}
.playlist-header .panel-btn {
  font-size: 16px;
  cursor: pointer;
  color: var(--accent-color);
}
.playlist-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px 0;
}
.playlist-item {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.playlist-item.playing {
  background-color: rgba(0, 123, 255, 0.1);
}
.playlist-item-info .title {
  font-weight: 500;
  font-size: 15px;
}
.playlist-item-info .artist {
  font-size: 12px;
  color: #666;
}
.playlist-item .delete-track-btn {
  color: #ff3b30;
  font-size: 20px;
  padding: 5px;
}

/* Persona Library Styles */
#persona-library-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 10px;
}
.persona-preset-item {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.persona-preset-item:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.modal-header .action-button {
  font-size: 16px;
  color: var(--accent-color);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 5px;
}

/* Battery Alert Modal Styles */
#battery-alert-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#battery-alert-modal.visible {
  display: flex;
  opacity: 1;
}
.battery-alert-content {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 280px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  padding: 20px;
  cursor: pointer;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#battery-alert-modal.visible .battery-alert-content {
  transform: scale(1);
}
#battery-alert-image {
  max-width: 100px;
  max-height: 100px;
  margin-bottom: 15px;
}
#battery-alert-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

/* 这是你要添加的新样式 */
#font-preview {
  transition: font-family 0.3s ease;
}

/* === 聊天列表界面新增样式 (这是新添加的) === */
#chat-list-screen {
}

.chat-list-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 1;
}
.chat-list-view.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

#messages-view {
  overflow-y: auto;
}

/* 底部导航栏样式 */
#chat-list-bottom-nav {
  position: absolute; /* 让它固定在底部 */
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 15; /* 确保它在视图之上 */
  display: flex;
  border-top: 1px solid var(--border-color);
  background-color: rgba(247, 247, 247, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-item {
  flex: 1;
  text-align: center;
  padding: 13px 0;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s;
}

.nav-item.active {
  color: var(--accent-color);
  font-weight: 600;
}

/* === 动态界面 (QZone) 样式 (这是新添加的) === */
#qzone-screen {
  background-color: #f0f2f5;
}

.qzone-header {
  /* position: absolute;  <-- 把这个改成 relative */
  position: relative;
  z-index: 10; /* z-index 保持，或者可以更高 */
  flex-shrink: 0; /* 防止被压缩 */
  padding: 15px 20px;
  padding-top: 45px;
  background-color: rgba(247, 247, 247, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.qzone-header .back-btn {
  font-size: 24px;
  cursor: pointer;
  color: var(--accent-color);
}

.qzone-header span:nth-child(2) {
  /* "好友动态"文字 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.qzone-content {
  flex-grow: 1;
  overflow-y: auto;
  /* padding-top: 80px;  <-- 删除这个，因为header不再是absolute了 */
}

.qzone-profile-header {
  position: relative;
  margin-bottom: 20px;
}

.qzone-banner-container {
  width: 100%;
  height: 180px; /* 背景板高度 */
  position: relative;
}

#qzone-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qzone-user-info {
  position: absolute;
  bottom: -30px; /* 让头像和昵称区域向下偏移，一半在背景板内，一半在外 */
  left: 20px;
  display: flex;
  align-items: flex-end; /* 让昵称和头像底部对齐 */
  gap: 10px;
}

.qzone-avatar-container {
  position: relative;
}

#qzone-avatar-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  object-fit: cover;
}

#qzone-nickname {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  padding-bottom: 5px; /* 微调位置 */
}

/* 编辑按钮的通用样式 */
.qzone-edit-btn {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#change-qzone-banner-btn {
  bottom: 10px;
  right: 10px;
}

#change-qzone-avatar-btn {
  bottom: 5px;
  right: 5px;
}

#change-qzone-nickname-btn {
  font-size: 14px;
  padding: 2px 6px;
  margin-left: 5px; /* 与昵称的间距 */
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  position: relative; /* 脱离flex布局的对齐 */
  bottom: 5px; /* 微调垂直位置 */
}

/* === 让编辑功能更“隐形” === */
#qzone-banner-container,
#qzone-avatar-container,
#qzone-nickname {
  cursor: pointer; /* 鼠标悬停时显示为可点击手势 */
  transition: opacity 0.2s;
}
#qzone-banner-container:hover,
#qzone-avatar-container:hover,
#qzone-nickname:hover {
  opacity: 0.85; /* 悬停时稍微变暗，给用户反馈 */
}
/* 隐藏掉旧的、独立的编辑按钮 */
.qzone-edit-btn {
  display: none;
}

/* === 控制 Header 和 Bottom Nav 的显隐 === */
/* 默认隐藏动态界面的 Header */
#qzone-screen .qzone-header {
  display: none;
}
/* 当动态视图激活时，显示它的Header */
#qzone-screen.active .qzone-header {
  display: flex;
}

/* 当进入动态视图时，隐藏主Header和底部导航栏 */
#chat-list-screen.in-qzone-view > .header,
#chat-list-screen.in-qzone-view > #chat-list-bottom-nav {
  display: none;
}

.chat-group-container:first-child {
  margin-top: 10px;
}

/* ▲▲▲ 新样式替换结束 ▲▲▲ */

/* ▼▼▼ 把所有这些新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* === 动态功能栏样式 === */
.qzone-actions-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  margin: 40px 15px 15px 15px; /* 上边距更大，为浮动的头像留出空间 */
  background-color: var(--secondary-bg);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.action-item {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  padding: 8px 0;
  position: relative;
}

/* 用伪元素创建分隔线 */
.action-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background-color: var(--border-color);
}

/* === 动态帖子列表样式 === */
#qzone-posts-list {
  padding: 0 15px 20px 15px; /* 左右和底部留出边距 */
  display: flex;
  flex-direction: column;
  gap: 20px; /* 帖子之间的间距 */
}

.qzone-post-item {
  background-color: var(--secondary-bg);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.post-header .post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.post-info {
  display: flex;
  flex-direction: column;
}

.post-info .post-nickname {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.post-info .post-timestamp {
  font-size: 12px;
  color: var(--text-secondary);
}

.post-content {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap; /* 让换行符生效 */
  word-break: break-word; /* 防止长单词溢出 */
}

/* ▲▲▲ 新样式结束 ▲▲▲ */

/* ▼▼▼ 新样式粘贴到末尾 ▼▼▼ */

/* === 发布动态模态框样式 === */
#post-public-text {
  min-height: 80px; /* 确保文本域有足够的高度 */
  resize: vertical;
}

.post-image-preview-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* 保持16:9的预览比例 */
  background-color: #f0f2f5;
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  margin-bottom: 15px;
  display: none; /* 默认隐藏 */
  justify-content: center;
  align-items: center;
}
.post-image-preview-container.visible {
  display: flex; /* 上传后显示 */
}

#post-image-preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

#post-remove-image-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ff3b30;
  color: white;
  border: 2px solid white;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.post-image-upload-options {
  display: flex;
  gap: 10px;
}

.post-image-upload-options button {
  flex: 1;
  margin-top: 0;
}

/* ▲▲▲ 新样式结束 ▲▲▲ */

/* ▼▼▼ 新样式 ▼▼▼ */

/* === 发布动态模态框 - 模式切换样式 === */
.post-mode-switcher {
  display: flex;
  margin-bottom: 20px;
  background-color: #e9ecef;
  border-radius: 8px;
  padding: 4px;
}

.mode-btn {
  flex: 1;
  padding: 8px;
  border: none;
  background-color: transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.mode-btn.active {
  background-color: var(--secondary-bg);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.post-mode-content {
  display: none; /* 默认都隐藏 */
}

.post-mode-content.active {
  display: block; /* 激活的才显示 */
}

/* ▲▲▲ 新样式结束 ▲▲▲ */

/* === 相册页面背景色 === */
#album-screen {
  background-color: #f0f2f5; /* 使用一个柔和的浅灰色，比纯白更护眼 */
}

/* === 相册页面网格布局 === */
#album-grid-page {
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 每行显示2个相册 */
  gap: 15px;
}

/* === 相册项目样式 (美化) === */
.album-item {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 8px; /* 给整个项目也加个圆角 */
}

.album-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.album-cover {
  aspect-ratio: 1 / 1; /* 保持封面为正方形 */
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  margin-bottom: 8px;
  background-color: #f0f2f5; /* 封面加载前的占位颜色 */
}

.album-info {
  text-align: center;
}

.album-name {
  font-weight: 500;
  margin: 0 0 4px 0;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 防止长名字换行 */
}

.album-count {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

/* ▲▲▲ 新的 CSS 粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这些新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* === 相册照片详情页 === */
#album-photos-screen {
  background-color: #f0f2f5;
}

#photos-grid-page {
  padding: 15px;
  display: grid;
  /* 每行显示3张照片，并保持间距 */
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.photo-item {
  position: relative; /* 为了定位删除按钮 */
  aspect-ratio: 1 / 1; /* 保持照片为正方形 */
  border-radius: 6px;
  overflow: hidden; /* 防止图片溢出圆角 */
  background-color: #e9ecef; /* 图片加载前的占位符颜色 */
}

.photo-item .photo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片填满容器且不变形 */
  cursor: pointer;
}

/* 删除按钮的样式 */
.photo-item .photo-delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.2s ease;
}

/* 鼠标悬停在照片上时显示删除按钮 */
.photo-item:hover .photo-delete-btn {
  opacity: 1;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* === 图片查看器模态框样式 === */
#photo-viewer-modal {
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1002;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.photo-viewer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#photo-viewer-image {
  max-width: 90vw; /* 图片最大宽度为视口的90% */
  max-height: 85vh; /* 图片最大高度为视口的85% */
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  /* 为图片的切换添加一点平滑的淡入淡出效果 */
  transition: opacity 0.2s ease-in-out;
}

/* 关闭按钮 */
#photo-viewer-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: white;
  font-size: 40px;
  font-weight: 200;
  cursor: pointer;
  line-height: 1;
  text-shadow: 0 0 5px black;
}

/* 左右导航箭头 */
#photo-viewer-modal .nav-arrow {
  position: absolute; /* 现在我们用绝对定位来控制箭头 */
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 50px; /* 在手机屏幕上，可以稍微小一点 */
  font-weight: 100;
  cursor: pointer;
  padding: 10px; /* 调整内边距 */
  user-select: none;
  transition: color 0.2s;
  z-index: 1003; /* 确保箭头在最上层 */
}

#photo-viewer-prev-btn {
  left: 5px; /* 定位左箭头 */
}

#photo-viewer-next-btn {
  right: 5px; /* 定位右箭头 */
}

#photo-viewer-modal .nav-arrow:hover {
  color: white;
}

/* 当箭头被禁用时（比如第一张或最后一张） */
#photo-viewer-modal .nav-arrow:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这些新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* ▼▼▼ 请用这块新CSS替换掉上一版的交互区CSS ▼▼▼ */

/* === 帖子内容区 - 相对定位容器 === */
/* === 帖子内容区 === */
.post-main-content {
  /* 它现在只是一个普通的内容容器，不再需要特殊样式了 */
}

/* === 帖子互动图标区 (新样式) === */
.post-feedback-icons {
  display: flex;
  justify-content: flex-end; /* 让图标靠右对齐 */
  align-items: center;
  gap: 12px;
  padding: 8px 0; /* 核心修改：给图标区域上下各8px的留白 */
}

.action-icon {
  cursor: pointer;
  color: var(--text-secondary); /* 默认灰色 */
  transition: all 0.2s ease-in-out;
}

.action-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 图标激活(点赞/收藏后)的样式 */
.action-icon.active {
  color: #ff5252; /* 激活后变红色 */
  transform: scale(1.1); /* 轻微放大 */
}

.action-icon.active.favorite {
  color: #ffc107; /* 收藏用黄色 */
}

.action-icon.active svg {
  fill: currentColor; /* 激活后填充颜色 */
}

/* 点击时的动画效果 */
.animate-like {
  animation: like-bounce 0.4s ease-in-out;
}

@keyframes like-bounce {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1.1);
  }
}

/* === 帖子底部评论区样式 (现在是独立部分) === */
.post-footer {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0; /* 用一条浅色线分隔 */
  display: flex;
  align-items: center;
  gap: 8px; /* 调整整体间距 */
}

/* 评论区容器 */
.comment-section {
  flex-grow: 1; /* 占据大部分空间 */
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-section .comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-section .comment-input {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background-color: #f0f2f5;
  border-radius: 14px;
  font-size: 13px;
  outline: none;
}

/* 新增的发送按钮样式 */
.comment-send-btn {
  flex-shrink: 0; /* 防止被压缩 */
  padding: 8px 15px;
  border: none;
  background-color: var(--accent-color);
  color: white;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* === 未读消息小红点通用样式 === */
.unread-indicator {
  position: absolute;
  top: -8px;
  right: -15px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: #ff3b30;
  color: white;
  font-size: 11px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1;
}

/* 聊天界面返回按钮上的小红点 (只显示点，不显示数字) */
.back-btn-indicator {
  top: 0;
  right: -8px; /* 放到返回箭头右上角 */
  width: 10px;
  height: 10px;
  min-width: 10px;
  padding: 0;
  border-radius: 50%;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* === 评论列表容器 === */
.post-comments-container {
  padding: 10px 0; /* 上下留白 */
  display: flex;
  flex-direction: column;
  gap: 8px; /* 评论之间的间距 */
  font-size: 13px; /* 统一评论区字体大小 */
}

/* 每一条评论 */
.comment-item {
  line-height: 1.5;
}

/* 评论者的名字，加粗并使用主题色 */
.comment-item .commenter-name {
  font-weight: 600;
  color: var(--accent-color);
  cursor: pointer;
  margin-right: 5px; /* 和评论内容之间留点空隙 */
}

/* 评论内容 */
.comment-item .comment-text {
  color: var(--text-primary);
  word-break: break-word;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* === 帖子点赞区域样式 === */
.post-likes-section {
  display: flex;
  align-items: center;
  gap: 6px; /* 图标和文字的间距 */
  padding: 8px 10px; /* 内边距 */
  font-size: 13px;
  color: var(--accent-color); /* 使用主题蓝色 */
  background-color: #f0f5fa; /* 给一个淡淡的背景色 */
  border-top: 1px solid #e9eef3;
  border-bottom: 1px solid #e9eef3;
  margin-top: 5px; /* 和上方的图标保持一点距离 */
}

.post-likes-section .like-icon {
  width: 16px;
  height: 16px;
  fill: currentColor; /* 让SVG图标继承父元素的颜色 */
  flex-shrink: 0; /* 防止图标被压缩 */
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* === @提及 弹出菜单样式 === */
.at-mention-popup {
  position: absolute; /* 相对于父元素定位 */
  bottom: 100%; /* 显示在输入框的上方 */
  left: 40px; /* 和输入框左侧对齐 (考虑了头像宽度) */
  width: calc(100% - 40px); /* 宽度和输入框差不多 */
  max-height: 120px;
  overflow-y: auto;
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none; /* 默认隐藏 */
}

.at-mention-item {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-primary);
  border-bottom: 1px solid #f0f0f0;
}

.at-mention-item:last-child {
  border-bottom: none;
}

.at-mention-item:hover {
  background-color: #f5f5f5;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* ▼▼▼ 请用下面这段【新样式】替换掉你现有的 #favorites-list 样式 ▼▼▼ */

/* 让收藏视图成为一个flex容器, 从上到下排列 */
#favorites-view {
  display: flex;
  flex-direction: column;
}

/* 确保收藏页的header高度固定，不被压缩 */
#favorites-view > .header {
  flex-shrink: 0;
}

/* === 收藏列表样式 (修正后) === */
#favorites-list {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden; /* <-- 新增这行，禁止水平滚动 */
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ▲▲▲ 替换结束 ▲▲▲ */

.favorite-item-card {
  background-color: var(--secondary-bg);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  position: relative; /* 为了定位删除按钮 */
}

/* 卡片头部，包含头像、名字和来源 */
.fav-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.fav-card-header .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.fav-card-header .info {
  flex-grow: 1;
}

.fav-card-header .name {
  font-weight: 600;
  font-size: 15px;
}

.fav-card-header .source {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 卡片内容 */
.fav-card-content {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
}

.fav-card-content .chat-image {
  margin-top: 8px; /* 图片和文字的间距 */
}

/* 删除按钮 */
.fav-delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: #f0f2f5;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 28px;
  text-align: center;
}

.fav-delete-btn:hover {
  background-color: #e9ecef;
  color: #ff3b30;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* === 搜索栏样式 === */
.search-bar-container {
  padding: 10px 15px;
  background-color: #f9f9f9; /* 和列表背景色保持一致 */
  position: relative; /* 为了定位清除按钮 */
  flex-shrink: 0;
}

#favorites-search-input {
  width: 100%;
  padding: 10px 30px 10px 15px; /* 右侧留出清除按钮的位置 */
  font-size: 14px;
  border: 1px solid var(--border-color);
  border-radius: 18px; /* 圆角矩形，更现代化 */
  background-color: var(--secondary-bg);
  box-sizing: border-box;
  outline: none;
}
#favorites-search-input:focus {
  border-color: var(--accent-color);
}

.search-clear-btn {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  background: #ccc;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* === 聊天界面多选操作栏优化 === */
#chat-interface-screen .header .selection-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#chat-interface-screen .selection-controls .action-btn {
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 5px;
}

/* === 收藏页面多选模式样式 === */
#favorites-view.selection-mode .favorite-item-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 选择框的样式 */
.favorite-item-card::before {
  content: '';
  position: absolute;
  left: -25px; /* 把它放在卡片左边外面 */
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: white;
  transition: all 0.2s ease;
  opacity: 0; /* 默认隐藏 */
}

/* 进入选择模式时，卡片向右移动，露出选择框 */
#favorites-view.selection-mode .favorite-item-card {
  transform: translateX(35px);
}
#favorites-view.selection-mode .favorite-item-card::before {
  opacity: 1;
}

/* 选中后的样式 */
#favorites-view.selection-mode .favorite-item-card.selected::before {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  content: '✔';
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}

/* 底部操作栏 (终极修正版) */
#favorites-action-bar {
  position: absolute; /* ★ 改为 absolute，相对于 #phone-screen 定位 */
  bottom: 0;
  left: 0;
  right: 0; /* ★ 新增 right: 0，和 left: 0 一起撑满宽度 */
  width: auto; /* ★ 改为 auto，让 left/right 决定宽度 */
  padding: 10px 15px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* 适配iPhone底部安全区 */
  background-color: rgba(247, 247, 247, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-color);
  box-sizing: border-box;
  z-index: 5;
  display: none;
  /* max-width 已经不需要了，因为父元素已经限制了宽度 */
}

#favorites-action-bar .action-bar-btn {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background-color: #ff3b30;
  color: white;
}

/* === 【修正】聊天界面头部控件切换逻辑 === */

/* 默认状态：隐藏多选控件 */
#chat-interface-screen .header .selection-controls {
  display: none;
}

/* 默认状态：显示默认控件，并让它撑满整个头部 */
#chat-interface-screen .header .default-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* 当进入多选模式时：隐藏默认控件 */
#chat-interface-screen.selection-mode .header .default-controls {
  display: none;
}

/* 当进入多选模式时：显示多选控件，并让它撑满整个头部 */
#chat-interface-screen.selection-mode .header .selection-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* ▼▼▼ 请将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* === 修正：放大所有主要的“+”号按钮 === */
#add-chat-btn,
#add-world-book-btn,
#create-album-btn-page {
  font-size: 28px; /* 显著增大字体大小，使其视觉上与旁边的图标匹配 */
  font-weight: 300; /* 使用更细的字重，让加号看起来更清爽，不显粗笨 */
  position: relative; /* 允许进行位置微调 */
  top: -1px; /* 字体放大后，通常需要稍微向上移动一点，使其视觉上更居中 */
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这些新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* 预览区容器样式 */
#settings-preview-area {
  width: 100%;
  height: 180px; /* 给一个固定的高度 */
  background-color: #f0f2f5;
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
  overflow: hidden; /* 防止内容溢出 */
  display: flex;
  flex-direction: column;
  gap: 10px; /* 预览气泡之间的间距 */
  border: 1px solid var(--border-color);
  position: relative; /* 为了定位背景 */
}

/* 预览区的背景，可以和真实聊天界面同步 */
#settings-preview-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
  opacity: 0.8;
}

/* 让预览气泡在背景之上 */
#settings-preview-area .message-wrapper {
  position: relative;
  z-index: 2;
}

/* 预览区内使用的头像要小一点 */
#settings-preview-area .message-bubble .avatar {
  width: 30px;
  height: 30px;
}

#settings-preview-area .message-bubble .timestamp {
  display: none; /* 预览区不需要显示时间戳 */
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新CSS粘贴到 <style> 的末尾 ▼▼▼ */
.existing-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.existing-group-item .group-name {
  font-weight: 500;
}

.existing-group-item .delete-group-btn {
  color: #ff3b30;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新CSS粘贴到 <style> 的末尾 ▼▼▼ */
.chat-group-container {
  border-bottom: 1px solid var(--border-color);
}
.chat-group-container:first-child {
  border-top: 1px solid var(--border-color);
}

.chat-group-header {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  background-color: var(--secondary-bg); /* <-- 修改这里，使用变量 */
}

.chat-group-header .arrow {
  font-size: 14px;
  margin-right: 8px;
  transition: transform 0.2s ease;
}

.chat-group-header.collapsed .arrow {
  transform: rotate(-90deg);
}

.chat-group-header .group-name {
  font-weight: 600;
  font-size: 15px;
}

.chat-group-content {
  max-height: 1000px; /* 一个足够大的值 */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.chat-group-content.collapsed {
  max-height: 0;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新CSS粘贴到 <style> 的末尾 ▼▼▼ */

/* 格式助手按钮的容器 */
.format-helpers {
  display: flex;
  gap: 10px;
  margin-bottom: 15px; /* 与下方的文本框拉开距离 */
  flex-wrap: wrap; /* 如果按钮太多可以换行 */
}

/* 单个格式助手按钮的样式 */
.format-btn {
  background-color: #e9ecef;
  color: var(--text-primary);
  border: none;
  padding: 6px 12px;
  border-radius: 16px; /* 胶囊形状，更友好 */
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.format-btn:hover {
  background-color: #dcdfe3;
}

/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新CSS粘贴到 <style> 的末尾 ▼▼▼ */

/* “…”按钮的样式 */
.post-actions-btn {
  margin-left: auto; /* 关键：让它自动靠到最右边 */
  padding: 5px 10px;
  font-size: 20px;
  font-weight: bold;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
}
.post-actions-btn:hover {
  background-color: #f0f0f0;
}

/* 动态编辑模态框的样式 (它将复用现有的操作菜单样式) */
#post-actions-modal .custom-modal-footer button {
  width: 100%;
  border: none;
  border-bottom: 1px solid #dbdbdb;
  padding: 14px;
  font-size: 18px;
}
#post-actions-modal .custom-modal-footer button:last-child {
  border-bottom: none;
}
#post-actions-modal #cancel-post-action-btn {
  margin-top: 8px;
  border-radius: 8px;
  background-color: #f0f0f0;
}

/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* 统一重置转账卡片内所有文字的特效和颜色 */
#chat-messages .transfer-card .transfer-title,
#chat-messages .transfer-card .transfer-amount,
#chat-messages .transfer-card .transfer-note {
  text-shadow: none !important; /* 强制移除任何发光或阴影效果 */
  color: white !important; /* 强制锁定文字颜色为白色 */
}

/* 分别锁定各自的字体大小和字重，防止被篡改 */
#chat-messages .transfer-card .transfer-title {
  font-size: 16px !important;
  font-weight: 600 !important;
}

#chat-messages .transfer-card .transfer-amount {
  font-size: 28px !important;
  font-weight: bold !important;
}

#chat-messages .transfer-card .transfer-note {
  font-size: 13px !important;
  opacity: 0.9 !important;
}

/* ▼▼▼ 这是新增的样式，用于修正所有头部标题的居中问题 ▼▼▼ */
/* ▼▼▼ 这是新增的样式，用于修正所有头部标题的居中问题 ▼▼▼ */
.header > span:nth-child(2) {
  position: absolute;
  left: 50%;
  transform: translateX(calc(-50% - 2px)); /* 在-50%的基础上，再向左推2像素 */

  /* (可选但推荐) 防止长标题与两边按钮重叠 */
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ▲▲▲ 粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】可视化消息编辑器样式 ▼▼▼ */
#message-editor-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message-editor-block {
  background-color: #f9f9f9;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
}

.message-editor-block textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.message-editor-block .format-helpers {
  margin-top: 8px;
  margin-bottom: 0; /* 覆盖默认的 margin-bottom */
}

.message-editor-block .delete-block-btn {
  float: right;
  margin-top: -5px;
  background: none;
  border: none;
  color: #ff3b30;
  font-size: 20px;
  cursor: pointer;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】联系人选择器样式 ▼▼▼ */
.contact-picker-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}
.contact-picker-item .checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 15px;
  transition: all 0.2s ease;
}
.contact-picker-item.selected .checkbox {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  content: '✔';
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}
.contact-picker-item .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}
.contact-picker-item .name {
  font-weight: 500;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】群成员管理界面样式 ▼▼▼ */
#member-management-list {
  padding: 0; /* 移除默认padding，让列表项撑满 */
}

.member-management-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color);
}

.member-management-item .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.member-management-item .name {
  flex-grow: 1;
  font-weight: 500;
}

.member-management-item .remove-member-btn {
  background-color: #ff3b30;
  color: white;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
}

#member-management-actions {
  flex-shrink: 0;
  padding: 15px;
  border-top: 1px solid var(--border-color);
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#member-management-actions button {
  width: 100%;
  padding: 15px;
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
#member-management-actions #create-new-member-btn {
  background-color: #4cd964; /* 新建用绿色，以示区分 */
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】外卖代付卡片样式 ▼▼▼ */
.message-bubble.is-waimai-request .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.waimai-card {
  width: 240px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.waimai-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.waimai-header .icon {
  width: 20px;
  height: 20px;
}

.waimai-header .title-group {
  display: flex;
  align-items: baseline;
  font-size: 14px;
  color: #8a8a8a;
}
.waimai-header .title-group .brand {
  font-weight: 600;
  color: #555;
  margin-right: 5px;
}
.waimai-header .title-group .separator {
  margin: 0 5px;
}

.waimai-catchphrase {
  font-size: 13px;
  color: #1f1f1f;
  padding: 12px;
}

.waimai-main {
  background-color: #ffd66b; /* 橙黄色背景 */
  padding: 12px;
  text-align: center;
}

.waimai-main .request-title {
  font-size: 12px;
  color: #856404;
  margin-bottom: 8px;
}

.waimai-main .payment-box {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px 10px;
}

.waimai-main .payment-label {
  font-size: 13px;
  color: #8a8a8a;
}

.waimai-main .amount {
  font-size: 32px;
  font-weight: 700;
  color: #1f1f1f;
  margin: 4px 0 12px 0;
}

.waimai-main .countdown-label {
  font-size: 13px;
  color: #8a8a8a;
}
.waimai-main .countdown-timer {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 5px;
}
.waimai-main .countdown-timer span {
  background-color: #333;
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  font-weight: bold;
  font-size: 12px;
}

.waimai-details-btn {
  width: 100%;
  padding: 10px 0;
  margin-top: 15px;
  border: none;
  border-radius: 6px;
  background-color: #ffc33a;
  color: #49380a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】外卖响应状态样式 ▼▼▼ */

/* === 同意支付后的样式 === */
.message-bubble.status-paid .waimai-card {
  border: 2px solid #28a745; /* 绿色边框 */
}
.message-bubble.status-paid .waimai-main .request-title::before {
  content: '✅  ';
}
.message-bubble.status-paid .waimai-main .request-title {
  color: #155724;
  font-weight: 600;
  /* 重写 request-title 的内容 */
  content: '我已为您买单，请尽情享用吧～' !important;
  display: block;
  margin-bottom: 15px;
}

.message-bubble.status-paid .payment-box {
  display: none; /* 隐藏支付详情 */
}
.message-bubble.status-paid .waimai-details-btn {
  background-color: #28a745;
  color: white;
}

/* === 拒绝支付后的样式 === */
.message-bubble.status-rejected .waimai-card {
  border: 2px solid #dc3545; /* 红色边框 */
  opacity: 0.8;
}
.message-bubble.status-rejected .waimai-main {
  background-color: #e9ecef;
}
.message-bubble.status-rejected .waimai-main .request-title::before {
  content: '❌ ';
}
.message-bubble.status-rejected .waimai-main .request-title {
  color: #721c24;
  font-weight: 600;
  /* 重写 request-title 的内容 */
  content: '我拒绝了您的代付请求' !important;
  display: block;
  margin-bottom: 15px;
}
.message-bubble.status-rejected .payment-box {
  display: none; /* 隐藏支付详情 */
}
.message-bubble.status-rejected .waimai-details-btn {
  background-color: #6c757d;
  color: white;
}

/* 强制重写 request-title 内容的技巧 */
.message-bubble[class*='status-'] .request-title {
  font-size: 0; /* 隐藏原始文本 */
}
.message-bubble[class*='status-'] .request-title::after {
  font-size: 14px; /* 让伪元素显示新文本 */
}
.message-bubble.status-paid .request-title::after {
  content: '我已为您买单，请尽情享用吧～';
}
.message-bubble.status-rejected .request-title::after {
  content: '我拒绝了您的代付请求';
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】外卖请求的用户操作按钮样式 ▼▼▼ */
.waimai-user-actions {
  display: flex;
  gap: 10px;
  padding: 0 12px 12px 12px; /* 在卡片底部留出空间 */
  background-color: #fff;
}

.waimai-user-actions button {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1.5px solid;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.waimai-pay-btn {
  background-color: #28a745;
  border-color: #1f7a33;
  color: white;
}
.waimai-pay-btn:hover {
  background-color: #218838;
}

.waimai-decline-btn {
  background-color: #f8f9fa;
  border-color: #ced4da;
  color: #495057;
}
.waimai-decline-btn:hover {
  background-color: #e2e6ea;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* 确保这些页面的内容区能正确滚动，同时背景透明以显示父级颜色 */
#api-settings-screen .form-container,
#font-settings-screen .form-container,
#wallpaper-screen .form-container {
  padding-top: 100px;
  margin-top: -80px;
  /* 不再需要背景色，让父元素决定 */
}
#font-settings-screen,
#wallpaper-screen {
  /* 将背景色设置为变量，这样夜间模式才能覆盖它 */
  background-color: var(--secondary-bg);
}
/* 壁纸设置页面的预览区比较特殊，需要额外调整 */
#wallpaper-screen .form-container {
  align-items: center; /* 保持内容居中 */
}

/* ▼▼▼ 【全新】来电请求与视频通话界面样式 ▼▼▼ */

/* --- 来电请求模态框 --- */
#incoming-call-modal .incoming-call-content {
  background-color: rgba(40, 40, 40, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  width: 280px;
  padding: 30px 20px;
  text-align: center;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.caller-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  border: 3px solid rgba(255, 255, 255, 0.5);
}

.caller-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
}

.caller-text {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 30px;
}

.incoming-call-actions {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.action-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #e0e0e0;
}

.call-action-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.call-action-btn:active {
  transform: scale(0.9);
}

.call-action-btn.decline {
  background-color: #ff3b30;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.5 16.5L3 6m18 6l-5.6-5.6a1.2 1.2 0 0 0-1.7 0L3 18.2a1.2 1.2 0 0 0-.3 1.2l1.2 3.6a1.2 1.2 0 0 0 1.2.9h15.6a1.2 1.2 0 0 0 1.2-1.2V7.7a1.2 1.2 0 0 0-.3-1.1z"/></svg>');
}

.call-action-btn.accept {
  background-color: #4cd964;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>');
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(76, 217, 100, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 217, 100, 0);
  }
}

/* ▼▼▼ 【终极兼容性修复版】请用这整块代码，完整替换所有旧的 video-call 相关CSS ▼▼▼ */

/* 1. 通话屏幕总容器：确保它是一个撑满屏幕的Flex列布局 */
#video-call-screen {
  background-color: #1c1c1e;
  color: white;
  display: flex; /* 保持Flex布局 */
  flex-direction: column; /* 垂直排列 */
  overflow: hidden; /* 防止任何意外溢出 */
}

/* 2. 【核心】为两种通话模式的容器设置统一的Flex布局 */
#text-call-interface,
#visual-call-interface {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative; /* 作为内部绝对定位元素的参考 */
}

/* 3. 顶部状态栏：保持绝对定位，作为顶部的半透明覆盖层 */
.video-call-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  box-sizing: border-box;
  padding: 15px 20px 30px;
  padding-top: calc(15px + env(safe-area-inset-top)); /* 适配刘海屏 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
  text-align: center;
  pointer-events: none; /* 让它不影响下方内容的点击 */
}
#call-timer,
#visual-call-timer {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

/* 4. 【核心重构】内容区域 (包括头像、气泡、视频背景等) */
/* 这个规则将同时作用于文字模式的 #text-call-interface 和 可视化模式的 #visual-call-interface */
#text-call-interface,
#visual-call-interface {
  flex-grow: 1; /* ★ 关键：让内容区占据所有剩余空间 */
  min-height: 0; /* ★ 关键：防止Flex布局下的溢出问题 */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 内容区自己也需要隐藏溢出 */
  padding-top: 80px; /* 为顶部的状态栏留出空间 */
  box-sizing: border-box;
}

/* 4a. 文字模式的头像和气泡区域 */
.video-call-avatar-area {
  flex-shrink: 0; /* 高度固定，不被压缩 */
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#video-call-main {
  flex-grow: 1; /* ★ 关键：占据文字模式内容区的剩余空间 */
  min-height: 0;
  margin: 0 15px 15px 15px; /* ★ 核心修改：大幅减小底部外边距 */
  overflow-y: auto;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 4b. 可视化模式的视频背景和气泡区域 (结构不变) */
#visual-call-interface .video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#visual-call-interface #video-call-messages-visual {
  position: relative;
  z-index: 5;
  flex-grow: 1;
  min-height: 0;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#video-call-messages-visual::-webkit-scrollbar {
  display: none;
}

/* ▼▼▼ 这是你要替换的代码块 ▼▼▼ */

/* 【核心重构】底部控制栏：现在它是一个带z-index的Flex布局项 */
.video-call-controls {
  position: relative; /* ★★★ 核心修复：就是加上这一行！ ★★★ */
  z-index: 10; /* 现在这个 z-index 就会生效了 */
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
  pointer-events: all;
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* 6. 其他元素样式保持不变 */
#participant-avatars-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.participant-avatar-wrapper {
  text-align: center;
}
.participant-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}
.participant-name {
  margin-top: 8px;
  font-size: 13px;
  color: #ccc;
}
.participant-avatar.speaking {
  border-color: #4cd964;
  box-shadow: 0 0 20px rgba(76, 217, 100, 0.6);
  transform: scale(1.05);
}

.control-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s, background-color 0.2s;
}
.control-btn:active {
  transform: scale(0.9);
}
.control-btn.speak-btn {
  background-color: rgba(255, 255, 255, 0.2);
  background-size: 55%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>');
}
.control-btn.hangup-btn {
  background-color: #ff3b30;
  background-size: 50%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.5 16.5L3 6m18 6l-5.6-5.6a1.2 1.2 0 0 0-1.7 0L3 18.2a1.2 1.2 0 0 0-.3 1.2l1.2 3.6a1.2 1.2 0 0 0 1.2.9h15.6a1.2 1.2 0 0 0 1.2-1.2V7.7a1.2 1.2 0 0 0-.3-1.1z"/></svg>');
}
.control-btn.join-btn {
  background-color: #007bff;
  background-size: 50%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="17" y1="11" x2="23" y2="11"></line></svg>');
}

/* 新增的按钮图标 */
.control-btn.reroll-btn {
  background-color: rgba(255, 255, 255, 0.2);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>');
  background-size: 50%;
}
.control-btn.switch-camera-btn {
  background-color: rgba(255, 255, 255, 0.2);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>');
  background-size: 50%;
}

/* 可视化界面的高清气泡 */
.visual-call-bubble {
  padding: 8px 12px;
  border-radius: 18px;
  max-width: 80%;
  line-height: 1.5;
  word-break: break-word;
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.visual-call-bubble.user {
  align-self: flex-end;
  background-color: rgba(40, 160, 70, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}
.visual-call-bubble.ai {
  align-self: flex-start;
}

/* 文字模式的气泡 */
.call-message-bubble {
  padding: 10px 15px;
  border-radius: 12px;
  max-width: 85%;
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
}
.call-message-bubble.ai-speech {
  background-color: rgba(255, 255, 255, 0.15);
  align-self: flex-start;
}
.call-message-bubble.user-speech {
  background-color: #4cd964;
  align-self: flex-end;
  text-align: left;
}

/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▼▼▼ 【全新添加】正在呼叫界面样式 ▼▼▼ */
#outgoing-call-screen {
  background-color: #1c1c1e;
  color: white;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

.outgoing-call-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.outgoing-call-actions {
  margin-top: 50px; /* 和上方文字拉开距离 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #e0e0e0;
}
/* ▲▲▲ 添加结束 ▲▲▲ */

/* 1. 动态帖子的外层容器，我们需要它来定位和裁剪 */
.qzone-post-container {
  position: relative; /* 让内部的删除按钮可以相对于它定位 */
  overflow: hidden; /* 隐藏掉超出部分的删除按钮 */
  border-radius: 12px; /* 和内部卡片保持一致的圆角 */
}

/* 2. 可滑动的内容卡片，增加一个平滑的过渡效果 */
.qzone-post-item {
  transition: transform 0.3s ease;
  background-color: var(--secondary-bg); /* 确保它有背景色，能盖住下面的删除按钮 */
  position: relative; /* 确保它在最上层 */
  z-index: 2;
}

/* 3. 【核心】这就是那个“删除”按钮的样式！*/
.qzone-post-delete-action {
  position: absolute; /* 绝对定位，脱离文档流 */
  top: 0;
  right: 0;
  bottom: 0;
  width: 90px; /* 删除按钮的宽度 */
  background-color: #ff3b30; /* 您想要的红色背景 */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  cursor: pointer;
  z-index: 1; /* 确保它在卡片下面 */
}

/* 4. 当卡片左滑时，把它向左移动，露出删除按钮 */
.qzone-post-item.swiped {
  transform: translateX(-90px); /* 移动的距离和删除按钮的宽度一致 */
}

/* ▲▲▲ 粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这【一整块】全新的“拍一拍”样式，粘贴到 <style> 的末尾 ▼▼▼ */

/* 1. “拍一拍”的屏幕震动动画 */
@keyframes pat-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-3px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(3px);
  }
}

.pat-animation {
  animation: pat-shake 0.4s ease-in-out;
}

/* 2. “拍一拍”系统提示消息的样式 */
.system-message {
  align-self: center; /* 居中显示 */
  padding: 4px 12px;
  margin: 5px 0;
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
  font-size: 12px;
  border-radius: 10px;
  text-align: center;
  max-width: 80%;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* 让“拍一拍”类型的 wrapper 居中 */
.message-wrapper.system-pat {
  justify-content: center;
  align-self: center;
  margin: 5px 0;
  max-width: 80%;
}
/* “拍一-拍”消息气泡的样式 */
.message-bubble.system-bubble {
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 10px;
}

/* ▼▼▼ 请将这段新CSS粘贴到 <style> 的末尾 ▼▼▼ */

/* === 修正：让顶部操作栏可以横向滚动 === */
#chat-input-actions-top {
  display: flex;
  gap: 8px;
  padding: 0 5px;

  /* --- 核心代码开始 --- */
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

#chat-input-actions-top::-webkit-scrollbar {
  display: none;
}

/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* === 【全新】聊天界面头部状态栏样式 === */

/* === 【全新】聊天界面头部状态栏样式 === */

/* ▼▼▼ 用这块【居中修复版】的代码，替换旧的 #chat-header-title-wrapper 样式 ▼▼▼ */
#chat-header-title-wrapper {
  /* --- 核心修改：让标题区域绝对居中 --- */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* ------------------------------------ */

  /* 保持其内部元素（标题和状态）的布局不变 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  /* (可选但推荐) 防止长标题与两边按钮重叠 */
  max-width: 60%;

  /* 注意：我们不再需要 flex-grow: 1; 了，因为绝对定位已经使其脱离了flex布局流 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▼▼▼ 请用这块代码替换你旧的 #chat-header-main-line 样式 ▼▼▼ */
#chat-header-main-line {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* 让公告按钮可以相对于它定位 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▼▼▼ 请用这块【终极修复版】代码，替换掉你旧的 #chat-header-title 样式 ▼▼▼ */
#chat-header-title {
  font-size: 16px;
  font-weight: 600;

  /* (这两行是上次修复定位问题的，必须保留！) */
  position: static !important;
  transform: none !important;

  /* ★★★ 核心修复：我们已经把导致省略号的四行代码全部删掉了！ ★★★ */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* 3. 状态栏容器 */
#chat-header-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

/* 4. 状态小圆点 */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #4cd964; /* 默认绿色，代表在线 */
  transition: background-color 0.3s ease;
}

/* 当AI状态为“忙碌”或“离开”时，让圆点变灰色 */
#chat-header-status.busy .status-dot {
  background-color: #cccccc;
}

/* 5. 状态文本 */
.status-text {
  font-weight: 500;
}

/* === 【全新美化版】回忆卡片样式 === */

/* 1. 卡片总容器：这里负责定义整体的背景色和边框 */
.memory-card {
  background-color: #fffaf0; /* 统一的、温暖的米黄色背景 */
  border-radius: 12px;
  padding: 15px; /* 在卡片四周留出内边距 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
  border-left: 5px solid #ffb74d;
  display: flex; /* 让它成为flex容器，方便内部元素排列 */
  flex-direction: column; /* 让头部和内容垂直堆叠 */
  gap: 8px; /* 在头部和内容之间创造一个自然的间距 */
}

/* 2. 头部容器：现在只负责布局和分割线 */
.memory-card .header {
  border-bottom: 1px solid rgba(217, 129, 0, 0.15); /* 分割线颜色可以稍微加深一点 */
  padding-bottom: 8px;
}

/* 3. 日期样式 (保持不变) */
.memory-card .header .date {
  font-size: 11px;
  color: #a1887f;
  margin-bottom: 4px;
}

/* 4. 作者样式 (保持不变) */
.memory-card .header .author {
  font-weight: 600;
  color: #d98100;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 5. 内容区样式 (保持不变) */
.memory-card .content {
  font-size: 14px;
  line-height: 1.7;
  color: #5d4037;
  white-space: pre-wrap;
}

/* === 【全新】约定/倒计时卡片样式 === */
.countdown-card {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);
  text-align: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.countdown-card::before {
  content: '✨';
  position: absolute;
  top: -10px;
  left: -10px;
  font-size: 50px;
  opacity: 0.1;
  transform: rotate(-15deg);
}
.countdown-card .title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}
.countdown-card .timer {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 2px;
  margin-bottom: 15px;
}
.countdown-card .target-date {
  font-size: 12px;
  opacity: 0.8;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 10px;
}

/* === 【全新】聊天锁定遮罩层样式 === */
#chat-lock-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(247, 247, 247, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 150; /* 比输入框高，比贴纸面板低 */
  display: none; /* 默认隐藏 */
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  border-top: 1px solid var(--border-color);
  text-align: center;
}
#chat-lock-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#chat-lock-content .lock-text {
  color: var(--text-secondary);
  font-size: 14px;
}
#chat-lock-content .lock-action-btn {
  padding: 10px 20px;
  border-radius: 20px;
  border: 1px solid var(--accent-color);
  background-color: var(--accent-color);
  color: white;
  cursor: pointer;
}
#chat-lock-content .lock-action-btn.secondary {
  background-color: transparent;
  color: var(--accent-color);
}

/* ▼▼▼ 【全新】红包卡片样式 ▼▼▼ */
.message-bubble.is-red-packet .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.red-packet-card {
  width: 220px;
  border-radius: 8px;
  background: linear-gradient(160deg, #f96259, #e44d44);
  color: #ffd700; /* 金色文字 */
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.red-packet-card.opened {
  background: linear-gradient(160deg, #d3c4a0, #c4b693);
  cursor: default;
}

.red-packet-card::before {
  content: '🧧';
  position: absolute;
  top: -5px;
  left: -5px;
  font-size: 30px;
  opacity: 0.2;
  transform: rotate(-10deg);
}

.rp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rp-icon {
  width: 20px;
  height: 20px;
}

.rp-greeting {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-type {
  font-size: 11px;
  color: white;
  opacity: 0.8;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 8px;
  margin-top: 8px;
}

.rp-claimed-info {
  font-size: 13px;
  color: white;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】红包详情列表样式 ▼▼▼ */
.rp-details-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.rp-details-item:last-child {
  border-bottom: none;
}
.rp-details-item .name {
  flex-grow: 1;
  font-weight: 500;
  color: #333;
}
.rp-details-item .amount {
  font-weight: 500;
  color: #555;
}
.rp-details-item .lucky-king-tag {
  font-size: 10px;
  background-color: #ffd700;
  color: #a67c00;
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 8px;
  font-weight: bold;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】投票功能样式 ▼▼▼ */

/* 投票卡片在消息气泡中的样式 */
.message-bubble.is-poll .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 投票卡片主体 */
.poll-card {
  width: 250px;
  background-color: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.poll-card.closed {
  background-color: #e9ecef; /* 结束后变灰 */
}

/* 投票问题 */
.poll-question {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 12px;
  line-height: 1.4;
  word-break: break-word;
}

/* 投票选项列表 */
.poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 单个投票选项 */
.poll-option-item {
  background-color: white;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s;
}

.poll-card:not(.closed) .poll-option-item:hover {
  background-color: #f0f8ff;
}

/* 用户已投票的选项样式 */
.poll-option-item.voted {
  border-color: var(--accent-color);
  background-color: #e7f3ff;
  font-weight: 500;
}

/* 投票进度条 */
.poll-option-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba(0, 123, 255, 0.1);
  z-index: 1;
  transition: width 0.3s ease-in-out;
}

/* 选项内容（文字和票数），确保在进度条之上 */
.poll-option-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.poll-option-text {
  font-size: 14px;
}

.poll-option-votes {
  font-size: 13px;
  color: #8a8a8a;
  font-weight: 500;
}

/* 投票卡片底部 */
.poll-footer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #e9e9e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.poll-total-votes {
  font-weight: 500;
}

.poll-action-btn {
  background: none;
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  padding: 4px 10px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 12px;
}
.poll-card.closed .poll-action-btn {
  background-color: #6c757d;
  color: white;
  border-color: #6c757d;
}

/* 创建投票模态框的选项输入 */
.poll-option-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.poll-option-input-wrapper input {
  flex-grow: 1;
}
.poll-option-input-wrapper .remove-option-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #ff3b30;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  flex-shrink: 0;
}

/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* === 【全新】聊天头部“正在输入”状态样式 === */
#chat-header-title.typing-status {
  color: var(--text-secondary);
  animation: typing-pulse 1.5s infinite;
  font-style: italic;
}

@keyframes typing-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

#chat-header-title {
  transition: opacity 0.2s ease-in-out;
}

@keyframes message-pop-in {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-wrapper.animate-in {
  animation: message-pop-in 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* ▼▼▼ 【全新】App图标设置样式 ▼▼▼ */
#icon-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 20px;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

.icon-setting-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.icon-preview {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.change-icon-btn {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】外观设置页面布局修正 ▼▼▼ */

/* 1. 修正滚动问题 */
#wallpaper-screen .form-container {
  /* 核心修正1: 解决flex布局下的滚动冲突，让滚动条能正常出现 */
  min-height: 0;
}

/* 2. 修正壁纸预览被压扁的问题 */
#wallpaper-preview {
  /* 核心修正2: 防止预览框被过多的内容挤压变形，让它保持自己的高度 */
  flex-shrink: 0;
}
/* ▲▲▲ 修正结束 ▲▲▲ */

/* ▼▼▼ 【全新】分享链接功能样式 (无图版) ▼▼▼ */

/* 1. 浏览器界面背景色和内容区样式 (保持不变) */
#browser-screen {
  background-color: #f8f9fa;
}
#browser-content {
  padding: 20px;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  overflow-y: auto;
  background-color: #f8f9fa;
}
#browser-content .article-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}
#browser-content .article-meta {
  font-size: 13px;
  color: #8a8a8a;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}
#browser-content .article-body {
  white-space: pre-wrap;
  word-break: break-word;
}
#browser-content .article-body p {
  margin-bottom: 1em;
}

/* 2. 聊天气泡中的链接卡片样式 (无图版) */
.message-bubble.is-link-share .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.link-share-card {
  width: 210px;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.link-share-card:hover {
  background-color: #f9f9f9;
}

.link-share-card .title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: #1f1f1f;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-share-card .description {
  font-size: 13px;
  color: #8a8a8a;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-share-card .footer {
  display: flex; /* 让图标和文字水平对齐 */
  align-items: center;
  gap: 6px; /* 图标和文字的间距 */
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px; /* 和上面的描述拉开一点距离 */
}
.link-share-card .footer-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0; /* 防止图标被压缩 */
}

/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* 单条评论的容器，现在需要相对定位 */
.comment-item {
  position: relative;
  padding-right: 25px; /* 在右侧留出删除按钮的空间 */
}

/* 评论删除按钮的样式 */
.comment-delete-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0; /* 默认隐藏 */
}

/* 鼠标悬停在评论上时，显示删除按钮 */
.comment-item:hover .comment-delete-btn {
  opacity: 1;
}

.comment-delete-btn:hover {
  background-color: #f0f0f0;
  color: #ff3b30;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 【请求7】主屏幕预设保存按钮主题色适配 (请将这块代码也粘贴到 <style> 的末尾) ▼▼▼ */
#save-home-preset-btn {
  background-color: var(--accent-color);
  color: white;
}
/* ▲▲▲ 粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】引用回复功能样式 ▼▼▼ */

/* 1. 输入框上方的“回复预览栏” */
#reply-preview-bar {
  display: none; /* 默认隐藏 */
  padding: 8px 12px;
  margin: 0 8px 8px 8px; /* 和输入框周围的边距保持一致 */
  background-color: rgba(0, 0, 0, 0.05);
  border-left: 3px solid var(--accent-color);
  border-radius: 6px;
  position: relative;
  font-size: 13px;
  color: var(--text-secondary);
}

#phone-screen.dark-mode #reply-preview-bar {
  background-color: rgba(255, 255, 255, 0.1);
}

.reply-preview-content .sender {
  font-weight: 600;
  color: var(--text-primary);
}

.reply-preview-content .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block; /* 确保省略号生效 */
  max-width: 95%;
}

#cancel-reply-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 14px;
}

/* 2. 消息气泡内部的“引用消息块” */
.quoted-message {
  padding: 6px 10px;
  margin-bottom: 6px;
  background-color: rgba(0, 0, 0, 0.04);
  border-left: 2px solid var(--accent-color);
  border-radius: 4px;
  font-size: 0.9em; /* 字体比正文小一点 */
  opacity: 0.8;
  /* (已移除 overflow: hidden;) */
}

#phone-screen.dark-mode .quoted-message {
  background-color: rgba(255, 255, 255, 0.08);
  border-left-color: #a0cff1;
}

.quoted-message .quoted-sender {
  font-weight: 600;
  color: var(--accent-color);
}
#phone-screen.dark-mode .quoted-message .quoted-sender {
  color: #a0cff1;
}

.quoted-message .quoted-content {
  color: var(--text-secondary);
  white-space: normal; /* 核心修正1: 允许文本正常换行 */
  word-break: break-word; /* 核心修正2: 强制长单词或连续字符断开，防止溢出 */
  display: block;
  /* (已移除 overflow 和 text-overflow，因为我们需要多行显示而不是单行省略号) */
}

/* === 字体预览框样式 (修正后) === */

/* 将它修改为 ▼▼▼ */
#font-preview {
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: #f0f2f5; /* 统一为更浅的灰色，然后让夜间模式CSS去覆盖 */
  transition: background-color 0.3s, border-color 0.3s;
}

/* 预览框里的文字颜色，默认是黑色 */
#font-preview p {
  color: var(--text-primary);
}

/* 夜间模式下的修正样式 */
#phone-screen.dark-mode #font-preview {
  background-color: #1c1c1e; /* 深灰色背景 */
  border-color: #38383a; /* 暗色边框 */
}

/* 夜间模式下，预览框里的文字变为白色 */
#phone-screen.dark-mode #font-preview p {
  color: #ffffff;
}

/* ▼▼▼ 【全新】精致版转账操作弹窗样式 ▼▼▼ */
.transfer-actions-content {
  background-color: #fff0f5; /* 粉嫩的背景色 */
  border-radius: 20px;
  width: 290px;
  padding: 20px;
  box-shadow: 0 5px 25px rgba(255, 105, 180, 0.3); /* 粉色阴影 */
  text-align: center;
  position: relative;
  border: 1px solid #ffcce0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.transfer-actions-header {
  font-size: 20px;
  font-weight: bold;
  color: #a35c7b; /* 深粉色标题 */
  margin-bottom: 15px;
}

.transfer-actions-body p {
  font-size: 15px;
  color: #555;
  margin: 0 0 25px 0;
  line-height: 1.5;
}

.transfer-actions-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.transfer-actions-footer .action-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  color: white;
}

.transfer-actions-footer .action-btn:active {
  transform: scale(0.95);
}

.transfer-actions-footer .action-btn.accept {
  background: linear-gradient(135deg, #ff85b3, #ff69b4);
  box-shadow: 0 4px 10px rgba(255, 105, 180, 0.4);
}

.transfer-actions-footer .action-btn.decline {
  background: linear-gradient(135deg, #c2c2c2, #a0a0a0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.transfer-actions-content .cancel-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background-color: rgba(0, 0, 0, 0.1);
  color: #a35c7b;
  font-size: 20px;
  line-height: 28px;
  cursor: pointer;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* === 未读消息红点样式 === */
.unread-count-wrapper {
  flex-shrink: 0;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px; /* 让红点和名字差不多高 */
}

.unread-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background-color: #ff3b30; /* iOS 风格的红色 */
  color: white;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  border-radius: 10px; /* 圆角矩形 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  display: none; /* 默认隐藏 */
  justify-content: center;
  align-items: center;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】通话记录页面与卡片样式 ▼▼▼ */

/* 确保页面背景色统一 */
#call-history-screen {
  background-color: #f0f2f5;
}

/* 通话记录卡片样式 */
.call-record-card {
  background-color: var(--secondary-bg);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-left: 5px solid var(--accent-color);
}
.call-record-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* 卡片头部：包含日期和时长 */
.call-record-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
.call-record-card .card-header .duration {
  font-weight: 500;
  color: var(--text-primary);
}

/* 卡片主体：参与者头像 */
.call-record-card .card-body {
  display: flex;
  align-items: center;
}
.call-record-card .participants-avatars {
  display: flex;
  align-items: center;
}
.call-record-card .participant-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* 让头像有一个漂亮的堆叠效果 */
.call-record-card .participant-avatar:not(:first-child) {
  margin-left: -12px;
}
.call-record-card .participants-names {
  margin-left: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
}

/* --- 通话详情弹窗样式 --- */
#transcript-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
}
.transcript-entry {
  padding: 8px 12px;
  border-radius: 10px;
  max-width: 85%;
  line-height: 1.5;
  word-break: break-word;
}
.transcript-entry.user {
  background-color: #dcf8c6; /* 类似微信的绿色 */
  align-self: flex-end;
}
.transcript-entry.assistant {
  background-color: #ffffff;
  align-self: flex-start;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

#chat-list-title {
  cursor: pointer;
}

/* ▼▼▼ 【全新】通话记录卡片美化样式 ▼▼▼ */

.call-record-card .card-body {
  /* 将 body 改为 flex 布局，让标题和参与者信息垂直排列 */
  display: flex;
  flex-direction: column;
  gap: 8px; /* 标题和参与者信息之间的间距 */
}

.call-record-card .custom-title {
  font-size: 16px;
  font-weight: 600; /* 加粗，让它像个标题 */
  color: var(--text-primary);
  padding-bottom: 8px; /* 标题下的留白 */
  border-bottom: 1px solid var(--border-color); /* 在标题下加一条分割线 */
  margin-bottom: 4px; /* 和下面的参与者信息拉开一点距离 */
}

.call-record-card .participants-info {
  /* 这个新容器让头像和“与xx”能水平对齐 */
  display: flex;
  align-items: center;
}

/* 参与者名字的样式微调，让它不那么突出 */
.call-record-card .participants-names {
  margin-left: 12px;
  font-weight: 500; /* 不再加粗 */
  font-size: 14px; /* 稍微小一点 */
  color: var(--text-secondary); /* 使用次要文字颜色 */
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】语音转文字功能样式 ▼▼▼ */

/* 1. 语音文字内容的样式 */
.voice-transcript {
  font-size: 14px; /* 文字大小 */
  line-height: 1.6; /* 行高，让多行文本更易读 */
  color: var(--text-secondary); /* 使用次要文字颜色，与语音条区分 */
  padding: 8px 12px; /* 内边距 */
  margin-top: 6px; /* 和上方的语音条拉开一点距离 */
  background-color: rgba(0, 0, 0, 0.04); /* 给一个淡淡的背景，更有层次感 */
  border-radius: 6px; /* 圆角 */
  word-break: break-word; /* 确保长文本能正常换行 */
  display: none; /* 默认隐藏 */
}

#phone-screen.dark-mode .voice-transcript {
  background-color: rgba(255, 255, 255, 0.1); /* 夜间模式下的背景色 */
}

/* 2. 旋转加载动画的样式 */
.loading-spinner {
  display: none; /* 默认隐藏 */
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--accent-color); /* 旋转部分的颜色 */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 8px; /* 和波形图、时长保持一点间距 */
}

/* 3. 定义旋转动画 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】分享记录查看器样式修正 ▼▼▼ */
#shared-history-viewer-content {
  display: flex;
  flex-direction: column; /* 让气泡垂直排列 */
  gap: 20px; /* 在每个气泡之间增加20像素的间距 */
  padding: 15px; /* 在容器四周也增加一些内边距，避免气泡贴边 */
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】播放器和歌词样式 ▼▼▼ */
#music-player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 60px;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50px);
  transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#music-player-overlay.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.music-player-window {
  width: 70%;
  min-height: 420px;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 25px;
  box-shadow: 0 8px 32px 0 rgba(25, 25, 25, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #1f1f1f;
  position: relative;
  justify-content: space-between;
  padding-bottom: 15px;
}

.music-player-top-actions {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  width: calc(100% - 30px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-left-cluster {
  display: flex;
  align-items: center;
  gap: 15px;
}
#music-return-btn,
#music-exit-btn {
  background: none;
  border: none;
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  color: #555;
  padding: 5px;
  line-height: 1;
}
#music-exit-btn {
  font-size: 24px;
  font-weight: 400;
}

.music-progress-bar-container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  margin-bottom: 10px;
}
.time-display {
  font-size: 11px;
  color: #888;
  width: 35px;
  text-align: center;
  flex-shrink: 0;
  font-family: 'SF Mono', 'Menlo', monospace;
}
.progress-bar {
  flex-grow: 1;
  height: 5px;
  background-color: #e5e5e5;
  border-radius: 2.5px;
  cursor: pointer;
}
.progress-bar-fill {
  width: 0%;
  height: 100%;
  background-color: #333;
  border-radius: 2.5px;
}

#music-lyrics-container {
  width: 100%;
  height: 192px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
}

#music-lyrics-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.lyric-line {
  padding: 4px 0;
  font-size: 14px;
  color: #666;
  text-align: center;
  line-height: 1.5;
  transition: all 0.5s ease;
  opacity: 0.7;
  transform: scale(0.95);
}

.lyric-line.active {
  font-size: 16px;
  color: #000;
  opacity: 1;
  transform: scale(1);
}

.music-player-controls-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.music-controls {
  margin-top: 0;
}

#music-return-btn,
#music-exit-btn,
#music-playlist-btn {
  position: relative;
}

#music-return-btn {
  top: -2px;
}
#music-playlist-btn {
  top: -3px;
}

.playlist-item-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}
.playlist-action-btn {
  font-size: 18px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s;
}
.playlist-action-btn:hover {
  color: #000;
}
.delete-track-btn {
  font-size: 24px;
  color: #ff3b30;
}
.delete-track-btn:hover {
  color: #c00;
}
.lyrics-btn {
  font-weight: 500;
}

/* ▼▼▼ 【最终头像放大版】请用这块代码替换所有相关的头像尺寸规则 ▼▼▼ */

/* 1. 普通头像样式（无框） */
.message-bubble .avatar {
  width: 38px; /* ★ 修改点：将尺寸从 34px 放大到 42px */
  height: 38px; /* ★ 修改点：高度也同步放大 */
  border-radius: 20%;
  object-fit: cover;
  flex-shrink: 0;
}

/* 2. 带框头像的容器样式 */
.avatar-with-frame {
  position: relative;
  width: 41px; /* ★ 修改点：尺寸与普通头像保持一致 */
  height: 41px; /* ★ 修改点：高度也同步放大 */
  flex-shrink: 0;
}

/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▼▼▼ 【全新】撤回消息样式 ▼▼▼ */

/* 1. 撤回消息的占位符样式 */
.recalled-message-placeholder {
  align-self: center; /* 居中显示 */
  padding: 4px 12px;
  margin: 5px 0;
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
  font-size: 12px;
  border-radius: 10px;
  text-align: center;
  max-width: 80%;
  cursor: pointer; /* 让它看起来可以点击 */
}

/* 2. 夜间模式下的适配 */
#phone-screen.dark-mode .recalled-message-placeholder {
  background-color: rgba(255, 255, 255, 0.15);
}

/* 3. AI撤回消息时的动画效果 */
@keyframes recall-animation {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

.message-wrapper.recalled-animation {
  animation: recall-animation 0.3s ease-out forwards;
}

/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】撤回消息样式修正 ▼▼▼ */

/* 强制撤回消息的占位符不换行，并保持内容居中 */
.recalled-message-placeholder {
  white-space: nowrap; /* 核心：禁止文本换行 */
  display: inline-block; /* 让背景根据内容自适应宽度 */
  padding: 4px 12px;
}

/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】世界书分类列表样式 ▼▼▼ */
.world-book-group-container {
  border-bottom: 1px solid var(--border-color);
}
.world-book-group-container:first-child {
  border-top: 1px solid var(--border-color);
}
.world-book-group-header {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  background-color: #f7f7f7;
}
.world-book-group-header .arrow {
  font-size: 14px;
  margin-right: 8px;
  transition: transform 0.2s ease;
}
.world-book-group-header.collapsed .arrow {
  transform: rotate(-90deg);
}
.world-book-group-header .group-name {
  font-weight: 600;
  font-size: 15px;
}
.world-book-group-content {
  max-height: 100000px; /* <--- 就是修改这里，把值改大即可 */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.world-book-group-content.collapsed {
  max-height: 0;
}
#phone-screen.dark-mode .world-book-group-header {
  background-color: #1c1c1e;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】红包/转账模态框页签样式 ▼▼▼ */
.frame-tabs {
  display: flex;
  background-color: #f0f0f0;
  padding: 4px;
  margin: 15px;
  border-radius: 8px;
}
.frame-tab {
  flex: 1;
  text-align: center;
  padding: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}
.frame-tab.active {
  background-color: #ffffff;
  color: #000000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段全新的CSS粘贴到 <style> 的末尾 ▼▼▼ */

/* 1. 分类文件夹的样式 */
.wb-category-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  background-color: #f0f2f5; /* 给文件夹一个淡淡的背景色以区分 */
  font-weight: 600; /* 加粗字体 */
}
#phone-screen.dark-mode .wb-category-header {
  background-color: #2c2c2e; /* 夜间模式下的背景色 */
}

/* 2. 展开/收起的小箭头 */
.wb-category-header .arrow {
  font-size: 12px;
  margin-right: 8px;
  transition: transform 0.2s ease;
}

/* 3. 当文件夹收起时，箭头旋转 */
.wb-category-header.collapsed .arrow {
  transform: rotate(-90deg);
}

/* 4. 存放书籍条目的容器 */
.wb-book-container {
  padding-left: 20px; /* 核心：让书籍条目向内缩进，看起来像在文件夹里 */
  max-height: 100000px; /* 一个足够大的值，用于动画 */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* 5. 当文件夹收起时，书籍容器的高度变为0，实现动画效果 */
.wb-book-container.collapsed {
  max-height: 0;
}

/* 6. 单个书籍条目（覆盖默认的label样式，微调间距） */
.wb-book-container label {
  padding: 8px 12px;
}

/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】世界书关联选择器 - 视觉优化 ▼▼▼ */

/* 1. 让分类标题更突出 */
.wb-category-header > span:last-of-type {
  font-size: 14px;
  font-weight: 700; /* 加粗 */
  color: var(--text-primary);
}

/* 2. 为箭头设置一个漂亮的颜色循环 */
#world-book-checkboxes-container .wb-category-header:nth-of-type(6n + 1) .arrow {
  color: #007bff;
} /* 蓝色 */
#world-book-checkboxes-container .wb-category-header:nth-of-type(6n + 2) .arrow {
  color: #28a745;
} /* 绿色 */
#world-book-checkboxes-container .wb-category-header:nth-of-type(6n + 3) .arrow {
  color: #fd7e14;
} /* 橙色 */
#world-book-checkboxes-container .wb-category-header:nth-of-type(6n + 4) .arrow {
  color: #6f42c1;
} /* 紫色 */
#world-book-checkboxes-container .wb-category-header:nth-of-type(6n + 5) .arrow {
  color: #dc3545;
} /* 红色 */
#world-book-checkboxes-container .wb-category-header:nth-of-type(6n + 6) .arrow {
  color: #ffc107;
} /* 黄色 */

/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* === 头像框选择模态框样式 (这是新添加的) === */
.change-frame-btn {
  padding: 6px 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  margin-left: 10px;
}

#avatar-frame-modal .modal-content {
  height: 70%; /* 让窗口高一点 */
}

#avatar-frame-modal .modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.frame-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.frame-tab {
  flex: 1;
  padding: 12px;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
}

.frame-tab.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.frame-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px;
}

.frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* 每行自动填充，最小70px宽 */
  gap: 15px;
}

.frame-item {
  aspect-ratio: 1 / 1; /* 保持正方形 */
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  background-color: #f0f0f0;
  background-size: cover;
  background-position: center;
  padding: 5px;
  transition: all 0.2s ease;
  position: relative; /* 为预览图做准备 */
}

.frame-item.selected {
  border-color: var(--accent-color);
  transform: scale(1.05);
}

.frame-item .preview-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.frame-item .preview-frame {
  position: absolute;
  top: -7px;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ▼▼▼ 把这些CSS加回去 ▼▼▼ */

.avatar-with-frame .avatar-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 带框的头像通常是圆的 */
  object-fit: cover;
  z-index: 1;
}
/* ▼▼▼ 【最终修复版】请用这整块代码，替换掉旧的聊天和心声头像框规则 ▼▼▼ */

.avatar-with-frame .avatar-frame,
#inner-voice-avatar-frame {
  position: absolute;
  /* 核心修改1：将宽高统一设置为125%，确保能完全包裹34px的头像，并留出漂亮的边距 */
  width: 125%;
  height: 125%;

  /* 核心修改2：使用标准的-50%来精确定位，确保头像框完美居中 */
  transform: translate(-50%, -50%);

  /* 核心修改3：将定位基点也改为标准的50%，与transform配合使用 */
  top: 50%;
  left: 50%;

  z-index: 2;
  pointer-events: none;
}

/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▲▲▲ 添加结束 ▲▲▲ */

/* ▼▼▼ 【最终美化版】聊天列表左滑置顶功能样式 (已修复Bug) ▼▼▼ */

/* 1. 外层包裹容器 (已移除 display:flex) */
.chat-list-item-swipe-container {
  position: relative;
  overflow: hidden;
}

/* 2. 可滑动的内容区 (保持不变) */
.chat-list-item-content {
  position: relative;
  z-index: 2;
  background-color: var(--secondary-bg);
  transition: transform 0.3s ease, background-color 0.3s ease;
  width: 100%;
  flex-shrink: 0;
}

/* 3. 【核心修改1】置顶聊天时，使用对比度更强的背景色 */
.chat-list-item-content.pinned {
  background-color: #f0f2f5; /* 日间模式下的置顶颜色 (已加深) */
}
#phone-screen.dark-mode .chat-list-item-content.pinned {
  background-color: #3a3a3c; /* 夜间模式下的置顶颜色 (已加深) */
}

/* 4. 隐藏的操作按钮区域 (保持不变) */
.swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
}

/* 5. 单个操作按钮的样式 (保持不变) */
.swipe-action-btn {
  height: 100%;
  padding: 0 20px;
  border: none;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
}

.swipe-action-btn.pin {
  background-color: #f0ad4e;
}
.swipe-action-btn.unpin {
  background-color: #777;
}
.swipe-action-btn.delete {
  background-color: #ff3b30;
}

/* 6. 当内容区被滑开时 (保持不变) */
.chat-list-item-content.swiped {
  transform: translateX(-160px);
}

/* 7. 分割线的正确逻辑 (保持不变) */
.chat-list-item {
  border-bottom: none;
}
.chat-list-item-swipe-container:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}
.chat-group-container {
  border-bottom: 1px solid var(--border-color);
}
.chat-group-container:first-of-type {
  border-top: 1px solid var(--border-color);
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 用下面这段【新样式】，替换掉你旧的 .date-stamp 样式 ▼▼▼ */

/* 日期戳的外层包裹，让它像系统消息一样居中 */
.date-stamp-wrapper {
  justify-content: center;
  align-self: center;
  margin: 10px 0;
  max-width: 80%;
}

/* 日期戳的气泡本身 */
.date-stamp-bubble {
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 10px;
}

/* 适配夜间模式 */
#phone-screen.dark-mode .date-stamp-bubble {
  background-color: rgba(255, 255, 255, 0.15);
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▼▼▼ 请将这段新CSS粘贴到 <style> 的末尾 ▼▼▼ */
.chat-list-time {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
  margin-left: 8px; /* 和中间的信息区拉开一点距离 */
  flex-shrink: 0; /* 防止在空间不足时被压缩 */
  align-self: flex-start; /* 让它和顶部的名字对齐 */
  padding-top: 2px; /* 微调垂直位置 */
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 请将这段新CSS粘贴到 <style> 的末尾 ▼▼▼ */
.chat-list-right-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 让内容靠右对齐 */
  gap: 4px; /* 在时间和红点之间加一点点间距 */
  flex-shrink: 0;
  margin-left: 8px;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】锁屏与密码界面样式 ▼▼▼ */

/* 1. 锁屏界面的总容器 */
#lock-screen {
  /* 核心：用一个非常高的 z-index 确保它能覆盖所有其他屏幕 */
  z-index: 999;
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让时钟和提示语上下分布 */
  align-items: center;
  padding: 80px 20px 50px 20px;
  box-sizing: border-box;
  transition: transform 0.3s ease-out;
}

/* 2. 锁屏时钟 (复用主屏幕时钟的样式) */
#lock-clock-container {
  text-align: center;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
#lock-main-time {
  font-size: 80px;
  font-weight: 200;
}
#lock-main-date {
  font-size: 18px;
  font-weight: 500;
}

/* 3. “向上轻扫”的提示文字和动画 */
#unlock-hint {
  font-size: 16px;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  /* 添加一个呼吸动画，吸引用户注意 */
  animation: hint-pulse 2s infinite ease-in-out;
}
@keyframes hint-pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

/* 4. 密码输入弹窗的遮罩层 */
#password-modal-overlay {
  /* 使用一个半透明的毛玻璃效果背景 */
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000; /* 比锁屏更高，确保在最上层 */
}

/* 5. 密码输入弹窗的内容区 */
.password-modal-content {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 280px;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: #333;
}
.password-modal-content p {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

/* 6. 密码输入框 */
#password-input-field {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.7);
}
#password-input-field:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* 7. 密码弹窗的按钮区域 */
.password-actions {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}
.password-actions button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
#password-cancel-btn {
  background-color: #e9ecef;
  color: #495057;
}
#password-confirm-btn {
  background-color: var(--accent-color);
  color: white;
}

/* 8. 密码错误时的晃动动画 */
@keyframes shake-error {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}
.password-modal-content.error {
  animation: shake-error 0.4s ease-in-out;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 用这块【最终修复版】代码，完整替换掉你旧的 .bubble-preset-manager 样式 ▼▼▼ */

/* 这是你要修改前的代码 */
/* ▼▼▼ 【全新】气泡/API样式预设功能CSS ▼▼▼ */
.bubble-preset-manager {
  display: flex;
  align-items: baseline; /* 核心修改：从 center 改为 baseline */
  gap: 10px; /* 元素之间的间距 */
}

/* ▲▲▲ 替换结束 ▲▲▲ */

/* 下拉框的样式，让它占据大部分空间 */
.bubble-preset-manager select {
  flex-grow: 1; /* 占据所有剩余空间 */
}

/* 管理按钮的样式，让它小巧精致 */
.bubble-preset-manager .action-btn {
  flex-shrink: 0; /* 防止按钮被压缩 */
  padding: 8px 10px;
  font-size: 13px;
  background-color: #e9ecef;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 的末尾 ▼▼▼ */

/* 1. 让锁屏和主屏幕可以堆叠 */
/* 核心：把锁屏和主屏幕都设为绝对定位，这样它们才能重叠 */
#lock-screen,
#home-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 2. 定义毛玻璃背景层的样式 */
#lock-screen-background-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 【核心修改1】它的层级现在和主屏幕一样低 */

  background-size: cover;
  background-position: center;

  /* 【核心修改2】魔法在这里！我们直接模糊这个元素本身 */
  filter: blur(20px);
  -webkit-filter: blur(20px);

  /* (可选但推荐) 轻微放大可以避免模糊后边缘变暗，效果更好 */
  transform: scale(1.1);

  /* 【核心修改3】默认隐藏，且带有淡入淡出效果 */
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 从这里开始复制 ▼▼▼ */

/* === 【最终修复版】世界书选择器列表样式 === */

/* 1. 分类文件夹行样式：用flex和gap创建固定间距，非常稳定 */
.wb-category-header {
  display: flex;
  align-items: center;
  gap: 8px; /* 箭头、复选框、文字之间的固定间距 */
  padding: 10px 12px;
  cursor: pointer;
  background-color: #f0f2f5;
  font-weight: 600;
  overflow: hidden; /* 防止任何意外溢出 */
}

/* 2. 分类文件夹里的文字样式：只负责截断，不负责布局 */
.wb-category-header > span:last-of-type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1; /* 允许文字部分在空间不足时被压缩 */
}

/* 3. 【核心修复】为分类和书目里的复选框“解绑”全局样式！ */
.wb-category-header input[type='checkbox'],
.wb-book-container input[type='checkbox'] {
  width: auto !important; /* 让它恢复自己的天然大小，!important确保最高优先级 */
  flex-shrink: 0; /* 防止它被压缩，保持完整 */
}

/* 4. 具体书目行的样式：强制从左边开始排列，解决不同设备的显示差异 */
.wb-book-container label {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 强制所有内容从左边开始对齐 */
  padding: 8px 12px;
  gap: 10px; /* 复选框和文字的间距 */
  overflow: hidden;
}

/* 5. 具体书目的文字样式 */
.wb-book-container label .wb-book-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  flex-shrink: 1; /* 同样允许它被压缩 */
}

/* 6. 夜间模式适配 (保持不变) */
#phone-screen.dark-mode .wb-category-header {
  background-color: #2c2c2e;
}

/* 7. 小箭头的样式 (保持不变) */
.wb-category-header .arrow {
  font-size: 12px;
  transition: transform 0.2s ease;
  flex-shrink: 0; /* 防止箭头被压缩 */
}
.wb-category-header.collapsed .arrow {
  transform: rotate(-90deg);
}

/* 8. 书籍容器的样式 (保持不变) */
.wb-book-container {
  padding-left: 20px;
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.wb-book-container.collapsed {
  max-height: 0;
}

/* ▼▼▼ 【全新】鼠标拖动工具栏时的手势样式 ▼▼▼ */
#chat-input-actions-top.grabbing {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  user-select: none; /* 防止拖动时选中文本 */
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【SVG终极版】发送定位功能样式 ▼▼▼ */

/* 1. 基础卡片和气泡样式 (保持不变) */
.message-bubble.is-location .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.location-card {
  width: 230px;
  background-color: #f7f7f7;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

/* 2. 【核心升级】地图区域现在直接用于容纳SVG */
.location-map-area {
  height: 90px;
  background-color: #f0f2f5;
  background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  padding: 5px; /* 给SVG一点呼吸空间 */
  box-sizing: border-box;
}
.location-map-area svg {
  width: 100%;
  height: 100%;
}

/* 3. 【全新】SVG内部元素的样式 */
/* 轨迹曲线 */
.svg-trajectory-path {
  stroke-width: 2px;
  stroke: rgba(180, 180, 180, 0.8);
  stroke-dasharray: 3 3; /* 虚线效果 */
  fill: none;
}
/* 定位点 (起点/终点) */
.svg-pin {
  stroke-width: 2px;
  stroke: white;
}
.svg-pin.user-pin {
  fill: #4caf50;
} /* 绿色用户点 */
.svg-pin.ai-pin {
  fill: #ff5252;
} /* 红色AI点 */

/* 脚印图标 */
.svg-footprint {
  font-size: 14px;
  fill: rgba(0, 0, 0, 0.4);
}
/* 途经点地名标签 */
.svg-location-label {
  font-size: 10px;
  font-weight: 500;
  fill: #555;
  /* 给文字一点白色的描边，让它在复杂背景下更清晰 */
  stroke: white;
  stroke-width: 2px;
  paint-order: stroke;
}

/* 4. 卡片底部信息区域 (已升级) */
.location-info {
  padding: 12px;
}
.location-address {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: #333;
}
.location-address .name-tag {
  font-weight: 600;
  color: var(--text-primary);
}
.location-address p.hidden {
  display: none;
}
.location-distance {
  font-size: 12px;
  color: var(--text-secondary);
  border-top: 1px solid #e9e9e9;
  padding-top: 8px;
  text-align: center;
}
/* ▲▲▲ 升级版CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新 | 修复版】“一键重roll”按钮样式 ▼▼▼ */
#reroll-btn {
  /* --- 直接复用其他按钮的样式，确保外观统一 --- */
  font-size: 24px;
  padding: 0;
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  color: var(--text-primary);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* 核心修复：边框颜色和其他按钮统一 */
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  /* 移除导致差异的阴影 */
  box-shadow: none;

  /* 保留原有的交互动效 */
  transition: opacity 0.2s, transform 0.1s;
}

#reroll-btn:hover {
  opacity: 0.8;
}

#reroll-btn:active {
  transform: scale(0.9);
}

#reroll-btn svg {
  width: 20px;
  height: 20px;
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▼▼▼ 【最终美化版】悬浮歌词栏样式 ▼▼▼ */
#floating-lyrics-bar {
  position: absolute;
  /* 【问题1修复】默认位置改为顶部 */
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;

  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px; /* 在歌词和按钮间增加间距 */

  width: 90%;
  max-width: 320px; /* 同时设一个最大像素宽度，避免在宽屏上过长 */
  padding: 8px 12px; /* 稍微增加一点内边距以适应新宽度 */
  background-color: rgba(0, 0, 0, 0);

  /* 【问题3需要】为字体颜色和背景透明度添加过渡动画 */
  transition: background-color 0.3s, opacity 0.3s;

  color: white;
  font-size: 14px;
  font-weight: 500; /* 字体稍微加粗 */
  text-align: center;
  border-radius: 12px;

  /* 文字阴影，让它在任何背景下都清晰 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

  cursor: pointer;
  user-select: none;

  /* 【问题4需要】为关闭按钮准备 */
  overflow: visible; /* 允许按钮超出范围 */
}

/* 【问题4需要】关闭按钮的样式 */
#floating-lyrics-bar .close-btn,
#floating-lyrics-bar #lyrics-settings-btn {
  position: absolute;
  top: -8px;
  width: 20px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  border: 1px solid white;
  cursor: pointer;
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.2s;
  display: flex; /* 确保SVG能居中 */
  align-items: center;
  justify-content: center;
}

/* 把关闭按钮和设置按钮分开放置 */
#floating-lyrics-bar .close-btn {
  right: -8px;
  line-height: 18px;
  font-size: 14px;
}
#floating-lyrics-bar #lyrics-settings-btn {
  right: 22px;
} /* 放在关闭按钮旁边 */

/* 鼠标悬停在整个歌词栏上时，一起显示它们 */
#floating-lyrics-bar:hover .close-btn,
#floating-lyrics-bar:hover #lyrics-settings-btn {
  opacity: 1;
}

#floating-lyrics-bar.dragging {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】“查角色手机”功能相关样式 ▼▼▼ */

/* 角色选择列表项 */
.character-select-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}
.character-select-item:hover {
  background-color: #f5f5f5;
}
.character-select-item img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 12px;
}
.character-select-item .name {
  font-weight: 500;
}

/* 角色手机的聊天气泡 (简化版) */
.character-chat-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 80%;
  word-break: break-word;
  line-height: 1.5;
}
.character-chat-bubble.sent {
  background-color: #dcf8c6;
  align-self: flex-end; /* 自己发的靠右 */
}
.character-chat-bubble.received {
  background-color: #ffffff;
  align-self: flex-start; /* 收到的靠左 */
}

/* ▼▼▼ 【美化版】角色手机数据列表项样式 ▼▼▼ */
.character-data-item {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0; /* 边框颜色变浅 */
  margin: 8px 10px; /* 增加外边距，形成卡片感 */
  border-radius: 8px; /* 增加圆角 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 增加非常淡的阴影 */
  transition: transform 0.2s, box-shadow 0.2s; /* 增加悬浮动画 */
  background-color: var(--secondary-bg);
}

.character-data-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.character-data-item .title {
  font-weight: 600;
  margin-bottom: 5px;
  color: #333; /* 标题颜色加深 */
}
.character-data-item .content {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  white-space: pre-wrap;
}
.character-data-item .meta {
  font-size: 12px;
  color: #888;
  margin-top: 10px;
  padding-top: 8px; /* 在meta上方增加一点距离和分割线 */
  border-top: 1px solid #f5f5f5;
  display: flex;
  justify-content: space-between;
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▼▼▼ 【V3修正版】角色手机“画中画”样式修正 ▼▼▼ */

/* 1. 【核心修正1】让手机外壳容器占据整个屏幕，并用内边距把手机框“推”下来 */
#character-phone-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff; /* ★★★ 把这里改为纯白色 ★★★ */
  padding-top: 50px;
  box-sizing: border-box; /* 确保内边距计算正确 */
}

/* 2. 手机边框样式 (修改后) */
.character-phone-frame {
  width: 95%;
  height: 98%;
  background-color: #111;
  border-radius: 30px;
  padding: 10px;
  box-shadow: none; /* ★★★ 就是修改这里 ★★★ */
  box-sizing: border-box;
  position: relative;
  display: flex;
}

/* ▼▼▼ 用下面这块【已修复】的代码替换旧的 #character-app-grid .app-icon .icon-bg 规则 ▼▼▼ */
#character-app-grid .app-icon .icon-bg {
  width: 65px; /* 恢复原来的尺寸 */
  height: 65px; /* 恢复原来的尺寸 */
  border-radius: 18px; /* 恢复原来的圆角 */
  background-color: #fff5f7; /* 设置为你想要的淡粉色背景 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* 3. 【核心修正2】缩小APP图标内的SVG */
#character-app-grid .app-icon .icon-bg svg {
  width: 60%; /* ★★★ 将SVG的宽度缩小到其容器的60% ★★★ */
  height: 60%; /* ★★★ 高度也同步缩小 ★★★ */
}

/* 4. 其余样式保持不变 */
.character-phone-inner-screen {
  flex-grow: 1;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background-color: var(--secondary-bg) !important; /* 使用变量 */
}
.character-phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 20px;
  border-radius: 0 0 10px 10px;
  z-index: 10;
}
.character-phone-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.character-phone-page.active {
  opacity: 1;
  visibility: visible;
  z-index: 5;
}
/* ▼▼▼ 用这块【透明毛玻璃版】代码，完整替换掉旧的 .character-phone-header 样式 ▼▼▼ */

/* ▼▼▼ 用这块【透明毛玻璃版】代码，完整替换掉旧的 .character-phone-header 样式 ▼▼▼ */

.character-phone-header {
  flex-shrink: 0;
  margin: 10px 12px 10px; /* ★ 修改点1: 将上边距 35px 改为 0，让它贴顶 */
  height: 50px; /* ★ 修改点2: 将高度从 48px 增加到 56px，让它更高一点 */

  /* ★ 核心修改1：变成一个更圆润的胶囊形状 */
  border-radius: 24px; /* 将圆角从16px增加到24px，看起来更圆润 */

  /* ★ 核心修改2：设置一个几乎透明的、带有毛玻璃效果的背景 */
  background-color: rgba(180, 180, 180, 0.2); /* 降低不透明度，营造透明感 */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  /* ★ 核心修改3：让边框和阴影更精致，以适应透明感 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框也调得更透明 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影稍微调整，更柔和 */

  /* ★ 核心修改4：强制文字和图标颜色变为白色，并加上阴影以保证清晰 */
  color: #ffffff; /* 标题文字变为白色 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 给文字加一点阴影，防止背景太亮看不清 */

  /* 布局部分保持不变 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  box-sizing: border-box;
  font-size: 16px;
}

/* ★★★【重要】为了确保所有图标都变成白色，请把下面这段新代码也加到<style>里 ★★★ */
.character-phone-header .action-btn svg,
.character-phone-header .back-btn svg {
  color: #ffffff !important;
}

/* ▲▲▲ 替换结束 ▲▲▲ */

/* ★★★【重要】为了确保所有图标都变成白色，请把下面这段新代码也加到<style>里 ★★★ */
.character-phone-header .action-btn svg,
.character-phone-header .back-btn svg {
  color: #ffffff !important;
}

/* ▲▲▲ 替换结束 ▲▲▲ */

.character-phone-header .action-btn svg,
.character-phone-header .back-btn svg {
  color: var(--accent-color);
}
#character-chat-history-messages {
  background-color: var(--secondary-bg) !important; /* 使用变量 */ /* ★★★ 移除背景图片 ★★★ */
}
/* ▲▲▲ 样式修正结束 ▲▲▲ */

/* ▼▼▼ 【V5最终修复版】角色手机APP图标布局修正 ▼▼▼ */
/* ▼▼▼ 找到 #character-app-grid.app-grid-standard，修改其中的 padding-top 属性 ▼▼▼ */

#character-app-grid.app-grid-standard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 15px;
  padding: 20px;
  padding-top: 95px; /* ★★★ 把 50px 改成 95px，为新顶栏留出空间 ★★★ */
  box-sizing: border-box;
  width: 100%;
  flex-direction: initial;
  align-items: initial;
}

/* ▲▲▲ 修改结束 ▲▲▲ */

/* ▲▲▲ 样式修正结束 ▲▲▲ */

/* ▼▼▼ 【全新】角色手机微信风格聊天气泡样式 ▼▼▼ */

/* 1. 聊天记录界面的背景色 */
#character-chat-history-messages {
  /* 移除之前版本可能存在的背景图片 */
  background-image: none;
}

/* 2. 消息气泡的通用容器样式 */
.character-chat-bubble-container {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  max-width: 80%; /* 限制气泡最大宽度 */
}

/* 3. 气泡的内容区域 */
.character-chat-bubble {
  position: relative;
  padding: 8px 12px;
  line-height: 1.5;
  word-break: break-word;
  border-radius: 6px;
  font-size: 15px;
}

/* 4. 头像样式 */
.character-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 6px; /* 微信风格的圆角矩形头像 */
  flex-shrink: 0;
}

/* --- 我方（角色自己）的气泡 --- */
.character-chat-bubble-container.sent {
  align-self: flex-end; /* 整体靠右 */
  flex-direction: row-reverse; /* 布局反转：内容 -> 头像 */
}
.character-chat-bubble-container.sent .character-chat-bubble {
  background-color: #95ec69; /* 微信绿 */
  color: #000;
}
/* 我方气泡的小尾巴 */
.character-chat-bubble-container.sent .character-chat-bubble::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 10px;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: #95ec69;
  border-right: 0;
}

/* --- 对方（NPC或用户）的气泡 --- */
.character-chat-bubble-container.received {
  align-self: flex-start; /* 整体靠左 */
}
/* 对方气泡的小尾巴 */
.character-chat-bubble-container.received .character-chat-bubble::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 10px;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-right-color: #ffffff;
  border-left: 0;
}
/* ▼▼▼ 在这里添加下面这块新代码 ▼▼▼ */
.character-chat-bubble-container.received .character-chat-bubble {
  background-color: #ffffff; /* 微信白 */
  color: #000;
}
/* ▲▲▲ 添加结束 ▲▲▲ */

/* --- 功能性重置：针对图片/表情包，让气泡“消失” --- */
.character-chat-bubble-container .character-chat-bubble:has(img.sticker-image) {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0;
}
.character-chat-bubble-container .character-chat-bubble:has(img.sticker-image)::before,
.character-chat-bubble-container .character-chat-bubble:has(img.sticker-image)::after {
  content: none !important;
}
/* ▲▲▲ 样式添加结束 ▲▲▲ */
/* ▼▼▼ 【全新】角色手机新增APP页面样式 ▼▼▼ */

/* 1. 相册页面的网格布局 */
#character-album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行3张图 */
  gap: 4px;
  padding: 4px;
}
.character-album-item {
  aspect-ratio: 1 / 1; /* 保持正方形 */
  background-color: #e0e0e0;
  cursor: pointer;
}
.character-album-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2. 银行页面的余额显示 */
.character-bank-balance-card {
  margin: 15px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.character-bank-balance-card .label {
  font-size: 14px;
  opacity: 0.8;
}
.character-bank-balance-card .amount {
  font-size: 32px;
  font-weight: 600;
  margin-top: 5px;
}

/* 3. 银行交易记录的颜色 */
.character-data-item .transaction-amount {
  font-weight: 600;
}
.character-data-item .transaction-amount.income {
  color: #4caf50; /* 收入为绿色 */
}
.character-data-item .transaction-amount.expense {
  color: #f44336; /* 支出为红色 */
}

/* ▲▲▲ 样式添加结束 ▲▲▲ */

/* ▼▼▼ 【V5修正版】角色手机相册网格布局 ▼▼▼ */
#character-album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行3张图 */
  gap: 4px;
  padding: 4px;
}
.character-album-item {
  aspect-ratio: 1 / 1; /* 保持正方形 */
  background-color: #e0e0e0;
  cursor: pointer;
}
.character-album-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ▲▲▲ 样式修正结束 ▲▲▲ */

/* ▼▼▼ 【全新】Markdown渲染增强样式 ▼▼▼ */

/* 1. 为角色手机里的所有Markdown内容设置基础样式 */
.character-data-item .content h1,
.character-data-item .content h2,
.character-data-item .content h3,
.character-data-item .content p {
  margin: 0 0 10px 0; /* 统一标题和段落的下边距 */
}
.character-data-item .content h1 {
  font-size: 1.5em;
  font-weight: 600;
}
.character-data-item .content h2 {
  font-size: 1.3em;
  font-weight: 600;
}
.character-data-item .content h3 {
  font-size: 1.1em;
  font-weight: 600;
}

/* 2. 删除线样式 */
.character-data-item .content del {
  color: #8a8a8a;
}

/* 3. 遮挡/剧透效果 */
.character-data-item .content .spoiler {
  background-color: #333;
  color: #333; /* 文字和背景一个色，实现隐藏 */
  padding: 0 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
/* 点击或鼠标悬停时显示内容 */
.character-data-item .content .spoiler:hover,
.character-data-item .content .spoiler:active {
  background-color: #f0f0f0;
  color: #000;
}

/* ▲▲▲ 样式添加结束 ▲▲▲ */

/* ▼▼▼ 【全新】角色手机日记美化与删除功能样式 ▼▼▼ */

/* 1. 让日记列表有更好的边距 */
#character-diary-list {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 增加日记之间的间距 */
}

/* 2. 美化单篇日记卡片 */
#character-diary-list .character-data-item {
  background-color: #fffaf0; /* 温暖的米黄色背景 */
  border-left: 4px solid #ffc107; /* 左侧加一条装饰线 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  position: relative; /* 为了定位删除按钮 */
  padding-bottom: 35px; /* 为底部的日期留出空间 */
}

/* 3. 美化日期显示，把它放到右下角 */
#character-diary-list .character-data-item .meta {
  position: absolute;
  bottom: 8px;
  right: 12px;
  border-top: none; /* 移除原来的上边框 */
  padding-top: 0;
  font-size: 11px;
  color: #bfa87a;
}

/* 4. 删除按钮的样式 */
.diary-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
  color: #bfa87a;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.2s ease-in-out;
}
/* 鼠标悬停在日记上时显示按钮 */
#character-diary-list .character-data-item:hover .diary-delete-btn {
  opacity: 1;
}
.diary-delete-btn:hover {
  background-color: #ff3b30;
  color: white;
}
/* ▲▲▲ 样式添加结束 ▲▲▲ */

/* ▼▼▼ 【V6最终修复版】角色手机相册布局防溢出 ▼▼▼ */

/* 1. 【核心】为相册网格的容器强制禁止水平滚动 */
#character-album-grid.list-container {
  overflow-x: hidden;
}

/* 2. 重新定义网格布局 */
#character-album-grid {
  display: grid;
  /* 【核心】每行3个，但这次我们用calc()精确计算宽度 */
  grid-template-columns: repeat(3, calc(33.333% - 4px));
  gap: 6px; /* 稍微增大间隙，让calc有计算空间 */
  padding: 6px; /* 内边距和间隙保持一致 */
  box-sizing: border-box; /* 确保内边距和边框被包含在总宽度内 */
  align-content: start; /* <--- 就是加上这一行！ */
}

/* 3. 稍微缩小图片，确保它们不会撑破容器 */
.character-album-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* 移除图片下方的微小空隙 */
}

/* ▲▲▲ 样式修正结束 ▲▲▲ */

/* ▼▼▼ 【V6独家定制】角色手机信纸风格日记样式 ▼▼▼ */

/* 1. 【核心】重塑日记卡片，让它像一张信纸 */
#character-diary-list .character-data-item {
  background-color: #fdfaf2; /* 温暖、柔和的米白/浅黄色，模拟信纸 */
  border: 1px solid #eaddc7; /* 淡淡的纸张边缘色 */
  border-left: 3px solid #d4bda5; /* 左侧加一条稍深的线，像装订线 */
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.06); /* 更柔和的阴影 */
  position: relative;
  padding: 20px 15px 15px 20px; /* 调整内边距，给“小东西”留出空间 */
  font-family: Georgia, 'Times New Roman', 'Kaiti TC', 'STKaiti', serif; /* 使用更典雅的衬线字体 */
}

/* 2. 【小东西】用伪元素在左上角添加一个精致的纸夹 */
#character-diary-list .character-data-item::before {
  content: '📎'; /* 这是一个Emoji纸夹，简单又有效 */
  position: absolute;
  top: -12px;
  left: 15px;
  font-size: 24px;
  transform: rotate(-25deg); /* 让纸夹有一个随意的角度 */
  opacity: 0.8;
}

/* 3. 【核心】重置Markdown内容的字体，确保它们继承信纸的字体 */
#character-diary-list .character-data-item .content,
#character-diary-list .character-data-item .content h1,
#character-diary-list .character-data-item .content h2,
#character-diary-list .character-data-item .content h3 {
  font-family: inherit; /* 强制继承父元素的字体 */
  color: #4a443b; /* 使用深棕色文字，更有质感 */
}

#character-diary-list .character-data-item .content p {
  margin: 0 0 12px 0;
}

/* 4. 将日期移动到右上角，像信纸的落款日期 */
#character-diary-list .character-data-item .meta {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 11px;
  color: #ae9c82; /* 匹配信纸风格的日期颜色 */
  font-style: italic; /* 斜体更有手写感 */
  border-top: none;
  padding-top: 0;
}

/* 5. 美化删除按钮，让它更融入信纸风格 */
#character-diary-list .character-data-item .diary-delete-btn {
  background-color: transparent;
  color: #c9bbae;
  font-size: 22px;
  transition: all 0.2s ease;
}

#character-diary-list .character-data-item .diary-delete-btn:hover {
  background-color: #e44d44;
  color: white;
  transform: scale(1.1);
}

/* ▲▲▲ 样式添加结束 ▲▲▲ */

/* ▼▼▼ 【全新】角色手机全APP美化样式 ▼▼▼ */

/* --- 1. 购物车样式 --- */
.character-cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
}
.character-cart-item:last-child {
  border-bottom: none;
}
.cart-item-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: #f0f2f5;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-secondary);
}
.cart-item-info {
  flex-grow: 1;
}
.cart-item-info .title {
  font-weight: 500;
}
.cart-item-info .store {
  font-size: 12px;
  color: var(--text-secondary);
}
.cart-item-price {
  font-weight: 600;
  font-size: 15px;
}

/* --- 2. 浏览器历史样式 --- */
.character-browser-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}
.character-browser-item:hover {
  background-color: #f9f9f9;
}
.browser-item-icon {
  font-size: 20px;
  color: var(--text-secondary);
}

/* --- 3. 银行交易明细样式 --- */
.character-bank-transaction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 15px;
  border-bottom: 1px solid #f0f0f0;
}
.transaction-details {
  display: flex;
  align-items: center;
  gap: 12px;
}
.transaction-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: white;
}

/* --- 4. 行动轨迹 (时间线) 样式 --- */
.character-trajectory-list {
  padding: 20px 15px 20px 30px; /* 左侧留出时间线的空间 */
}
.character-trajectory-item {
  position: relative;
  padding-bottom: 25px;
}
/* 时间轴的竖线 */
.character-trajectory-item::before {
  content: '';
  position: absolute;
  top: 5px;
  left: -18px;
  width: 2px;
  height: 100%;
  background-color: #e0e0e0;
}
.character-trajectory-item:last-child::before {
  display: none; /* 最后一个条目没有线 */
}
/* 时间轴的圆点 */
.character-trajectory-item::after {
  content: '';
  position: absolute;
  top: 5px;
  left: -23px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--accent-color);
  border: 2px solid white;
  box-shadow: 0 0 0 2px var(--accent-color);
}
.trajectory-item-content .meta {
  margin-top: 4px; /* 让时间和地点离标题近一点 */
}

/* --- 5. APP使用记录 (进度条) 样式 --- */
.character-app-usage-item {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}
.app-usage-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}
.app-usage-header .name {
  font-weight: 500;
}
.app-usage-header .duration {
  color: var(--text-secondary);
}
.app-usage-bar-container {
  width: 100%;
  height: 6px;
  background-color: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}
.app-usage-bar {
  height: 100%;
  background-color: var(--accent-color);
  border-radius: 3px;
  transition: width 0.5s ease-in-out;
}
/* ▼▼▼ 【全新】后台活动设置界面样式 ▼▼▼ */
.char-list-item {
  display: flex;
  align-items: center;
  padding: 8px 5px;
  border-bottom: 1px solid #eee;
}
.char-list-item:last-child {
  border-bottom: none;
}
.char-list-item input[type='checkbox'] {
  margin-right: 10px;
  width: 18px;
  height: 18px;
}
.char-list-item .char-name {
  flex-grow: 1;
}
.char-list-item .char-freq-badge {
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 10px;
  color: white;
}
.char-freq-badge.low {
  background-color: #28a745;
}
.char-freq-badge.medium {
  background-color: #fd7e14;
}
.char-freq-badge.high {
  background-color: #dc3545;
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 的末尾 ▼▼▼ */

/* === 【全新】视频通话可视化界面样式 === */

/* 1. 可视化界面的总容器，确保它能覆盖整个屏幕 */
#visual-call-interface {
  width: 100%;
  height: 100%;
  position: relative; /* 让内部元素可以相对于它定位 */
  overflow: hidden; /* 防止内容溢出 */
  background-color: #1c1c1e; /* 深色背景 */
  display: flex; /* 使用flex布局，方便内容排列 */
  flex-direction: column;
}

/* 2. 视频背景层，用于放置大小图 */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 确保它在最底层 */
}

/* 3. 大小图的通用容器样式 */
.video-container {
  position: absolute;
  background-color: #000;
  overflow: hidden;
  transition: all 0.3s ease-in-out; /* 为切换镜头添加动画 */
}
.video-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片填满容器且不变形 */
}

/* 4. 大图样式 (默认占满全屏) */
#video-main-view {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 5. 小图样式 (画中画) */
#video-pip-view {
  top: 60px; /* 距离顶部一段距离 */
  right: 15px;
  width: 100px; /* 小窗宽度 */
  height: 178px; /* 小窗高度 (保持竖屏比例) */
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer; /* 提示用户可以点击 */
}

/* 6. 聊天气泡区域 (覆盖在视频之上) */
#video-call-messages-visual {
  position: relative;
  z-index: 5; /* 层级比视频高 */
  flex-grow: 1; /* 占据除了顶部和底部栏之外的所有空间 */
  padding: 15px;
  overflow-y: auto; /* 内容多了可以滚动 */
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* 关键：为了不让滚动条影响美观，把它隐藏掉 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
#video-call-messages-visual::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

/* ▼▼▼ 用这【一小块】代码，替换掉旧的气泡样式，实现【无模糊】效果 ▼▼▼ */

/* 7. 【无模糊】高清透明聊天气泡 */
.visual-call-bubble {
  padding: 8px 12px;
  border-radius: 18px;
  max-width: 80%;
  line-height: 1.5;
  word-break: break-word;
  color: white;

  /* ★ 核心修改：彻底移除 backdrop-filter (模糊) 效果 */

  /* ★ 核心修改：提供一个简单的半透明黑色背景，以衬托文字 */
  background-color: rgba(0, 0, 0, 0.3); /* 这是一个关键值，可以在 0.2 (更透) 到 0.4 (更深) 之间微调 */

  /* ★ 核心修改：使用更清晰的边框来定义气泡轮廓 */
  border: 1px solid rgba(255, 255, 255, 0.25);

  /* ★ 核心修改：强化文字阴影，确保在任何清晰背景下都绝对可读 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.visual-call-bubble.user {
  align-self: flex-end;
  /* ★ 核心修改：用户气泡也使用无模糊的半透明背景 */
  background-color: rgba(40, 160, 70, 0.3); /* 使用一个更深的绿色来保证对比度 */
  border-color: rgba(255, 255, 255, 0.3);
}

/* ▲▲▲ 替换结束 ▲▲▲ */

.visual-call-bubble.ai {
  align-self: flex-start; /* AI的发言靠左 */
}

/* 8. 顶部和底部栏的层级要最高 */
#visual-call-interface .video-call-top-bar,
#visual-call-interface .video-call-controls {
  z-index: 10;
}

/* 9. 新增的控制按钮图标 (使用SVG) */
.control-btn.reroll-btn {
  background-color: rgba(255, 255, 255, 0.2);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>');
  background-size: 50%;
}
.control-btn.switch-camera-btn {
  background-color: rgba(255, 255, 255, 0.2);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>');
  background-size: 50%;
}

/* 10. 挂断按钮需要一个新ID来区分 */
#hang-up-btn-visual {
  /* 样式继承自 .hangup-btn，无需额外添加 */
}

/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */
/* ▼▼▼ 【最终修复版】世界书选择器列表样式 ▼▼▼ */

/* 1. 分类文件夹行样式：用gap创建固定间距，超稳定 */
.wb-category-header {
  display: flex;
  align-items: center;
  gap: 8px; /* 箭头、复选框、文字之间的固定间距 */
  padding: 10px 12px;
  cursor: pointer;
  background-color: #f0f2f5;
  font-weight: 600;
  overflow: hidden; /* 防止任何意外 */
}

/* 2. 分类文件夹里的文字样式：只负责截断，不负责布局 */
.wb-category-header > span:last-of-type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3. 【核心修复】为分类文件夹和书目里的复选框“解绑”全局样式！ */
.wb-category-header input[type='checkbox'],
.wb-book-container input[type='checkbox'] {
  width: auto !important; /* 让它恢复自己的天然大小，!important确保最高优先级 */
  flex-shrink: 0; /* 防止它被压缩 */
}

/* 4. 具体书目行的样式：强制从左边开始排列，解决iOS问题 */
.wb-book-container label {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 强制所有内容从左边开始！*/
  padding: 8px 12px;
  gap: 10px; /* 复选框和文字的间距 */
  overflow: hidden;
}

/* 5. 具体书目的文字样式 */
.wb-book-container label .wb-book-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* 6. 夜间模式适配 */
#phone-screen.dark-mode .wb-category-header {
  background-color: #2c2c2e;
}

/* 7. 小箭头的样式（保持不变） */
.wb-category-header .arrow {
  font-size: 12px;
  transition: transform 0.2s ease;
}
.wb-category-header.collapsed .arrow {
  transform: rotate(-90deg);
}

/* 8. 书籍容器的样式（保持不变） */
.wb-book-container {
  padding-left: 20px;
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.wb-book-container.collapsed {
  max-height: 0;
}

/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】字体预设功能样式 ▼▼▼ */

#font-preset-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px; /* 卡槽之间的间距 */
}

.font-preset-slot {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#phone-screen.dark-mode .font-preset-slot {
  border-color: #38383a;
}

.font-preset-slot.empty {
  justify-content: center;
  align-items: center;
  min-height: 80px;
  border-style: dashed;
}

.font-preview-text {
  font-size: 22px;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  min-height: 30px;
  transition: font-family 0.3s ease;
}

#phone-screen.dark-mode .font-preview-text {
  background-color: #2c2c2e;
  color: #fff;
}

.font-preset-info {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.font-preset-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.preset-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background-color: var(--accent-color);
  color: white;
}

.preset-btn.secondary {
  background-color: #e9ecef;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
#phone-screen.dark-mode .preset-btn.secondary {
  background-color: #3e3e42;
  border-color: #545458;
}

.preset-btn.delete {
  background-color: #ffdde5;
  color: #ff3b30;
  border: 1px solid #ffc2d1;
  max-width: 80px; /* 让删除按钮窄一点 */
  flex: 0 0 auto;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* 【美化 V2】让后台活动设置的按钮更圆润、更立体 */
#background-activity-details .form-button-secondary {
  border-radius: 20px; /* 大幅增加圆角，形成胶囊形状 */
  padding-top: 10px; /* 增加顶部内边距，让按钮更高 */
  padding-bottom: 10px; /* 增加底部内边距，让按钮更高 */
  font-weight: 500; /* 字体稍微加粗一点 */
  transition: all 0.2s ease; /* 添加平滑的过渡效果 */
}

/* 为按钮添加一个微妙的点击效果 */
#background-activity-details .form-button-secondary:active {
  transform: scale(0.96); /* 点击时轻微缩小 */
  opacity: 0.8; /* 点击时稍微变淡 */
}
/* ▼▼▼ 【全新】BGM搜索结果弹窗样式 ▼▼▼ */

/* ▼▼▼ 在这里添加下面这段新样式 ▼▼▼ */
#music-search-results-modal .modal-content {
  z-index: 220; /* 这个值比播放列表的 210 要高 */
}
/* ▲▲▲ 添加结束 ▲▲▲ */

.search-result-item {
  display: flex;
  flex-direction: column;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.2s;
}

/* ▼▼▼ 【全新】BGM搜索结果弹窗样式 ▼▼▼ */

.search-result-item {
  display: flex;
  flex-direction: column;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-result-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#phone-screen.dark-mode .search-result-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.search-result-item .title {
  font-weight: 500;
  font-size: 15px;
  color: var(--text-primary);
}

.search-result-item .artist {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.search-result-item .source {
  font-size: 10px;
  color: var(--accent-color);
  background-color: rgba(0, 123, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  margin-left: 8px;
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】BGM搜索源选择弹窗样式 ▼▼▼ */
#music-source-selector-modal .modal-body label {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#music-source-selector-modal .modal-body input[type='radio'] {
  width: 18px;
  height: 18px;
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 用这整块【布局微调版】样式，替换掉上一次的旧样式 ▼▼▼ */

/* 1. 闪烁动画 (保持不变) */
@keyframes flash-char {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 3px rgba(255, 192, 203, 0);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.08);
    box-shadow: 0 0 12px rgba(255, 192, 203, 0.9);
  }
}
@keyframes flash-user {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 3px rgba(173, 216, 230, 0);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.08);
    box-shadow: 0 0 12px rgba(173, 216, 230, 0.9);
  }
}

/* 2. 【核心修改】调整头像容器的下边距 */
#music-avatars-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px; /* <<<< 从 25px 减小到 8px，让它和下面的文字更近 */
  position: relative;
  z-index: 5;
}

/* 3. 单个头像样式 (保持不变) */
#music-avatars-container img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 4. 分开闪烁动画 (保持不变) */
#music-avatars-container.flashing #music-char-avatar {
  animation: flash-char 2.2s infinite ease-in-out;
}
#music-avatars-container.flashing #music-user-avatar {
  animation: flash-user 2.2s infinite ease-in-out 0.3s;
}

/* 5. 心电图样式 (保持不变) */
#heartbeat-line {
  width: 80px;
  height: 30px;
  overflow: visible;
  margin: 0 -15px;
  opacity: 0;
  transition: opacity 0.5s;
}
#music-avatars-container.flashing #heartbeat-line {
  opacity: 1;
}
.heartbeat-path {
  stroke: #ffc0cb;
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw-line 2.2s infinite linear;
  filter: drop-shadow(0 0 3px #ffc0cb);
}
.heartbeat-heart {
  display: none;
}
@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

/* 6. 【核心修改】调整“一起听了”文字的样式和边距 */
#music-time-counter {
  margin-bottom: 20px; /* <<<< 现在由它来负责和下面的封面拉开距离 */
  font-size: 11px;
  color: #666; /* 颜色稍微加深一点 */
  text-align: center;
}

/* 7. 唱片旋转动画 (保持不变) */
@keyframes spin-record {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 8. 封面和歌词的切换容器 (保持不变) */
#music-display-area {
  width: 192px;
  height: 192px;
  margin-bottom: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s ease;
}
#music-display-area:active {
  transform: scale(0.98);
}

/* 9. 歌曲封面 (保持不变) */
#music-album-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: block;
}
#music-album-cover.rotating {
  animation: spin-record 10s linear infinite;
}
#music-album-cover.paused {
  animation-play-state: paused;
}

/* 10. 其他样式 (保持不变) */
#music-lyrics-container {
  display: none;
}
#music-display-area.show-lyrics #music-album-cover {
  display: none;
}
#music-display-area.show-lyrics #music-lyrics-container {
  display: block;
}
#music-player-song-title {
  margin-bottom: 2px;
}
#music-player-artist {
  margin-bottom: 10px;
}
.music-player-window {
  min-height: 480px;
}

/* ▲▲▲ 布局微调版样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【最终修复版】提升搜索相关弹窗的层级 ▼▼▼ */
#music-source-selector-modal,
#custom-modal-overlay {
  z-index: 250 !important; /* 这个值必须高于播放列表(210)，!important确保它拥有最高优先级 */
}
/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* ▼▼▼ 步骤 1：把这一整块全新的CSS，粘贴到 <style> 的末尾 ▼▼▼ */

/* --- 1. 隐藏旧的主屏幕元素 --- */
/* 我们不再需要旧的锁屏时钟和图标网格了，新的布局会完全取代它们 */
#home-screen #clock-container,
#home-screen .app-grid {
  display: none !important;
}

/* --- 2. 【核心】重新定义主屏幕布局 --- */
/* 
   这将把你的主屏幕从一个简单的垂直列表，变成一个撑满全屏、
   使用Flexbox布局的强大容器，为新的“桌面式”布局打下基础。
*/
/* --- 2. 【核心】重新定义主屏幕布局 --- */
#home-screen {
  /* 使用一个漂亮的线性渐变作为默认背景，当然你可以在“外观设置”里随时换掉它 */
  background: linear-gradient(135deg, #6dd5fa, #2980b9);
  background-size: cover;
  background-position: center;

  /* 适配iPhone刘海和底部安全区 */
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));

  /* ▼▼▼ 在这里添加下面这两行 ▼▼▼ */
  padding-left: 0;
  padding-right: 0;
  /* ▲▲▲ 添加结束 ▲▲▲ */

  /* 使用Flexbox让内容区和Dock栏上下分离 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%; /* 确保它撑满屏幕 */
}

/* --- 3. 中间主要内容区 (个人资料卡 + 小组件 + App图标) --- */
#main-content-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px; /* 卡片和下方图标的间距 */
  align-items: center;
  margin-top: 20px; /* 距离屏幕顶部一点距离 */
}

/* --- 4. 个人资料卡片 (这是视觉核心) --- */

/* 4a. 卡片外层容器：这是所有内部元素定位的“锚点” */
#profile-widget {
  position: relative; /* 关键：让内部的头像和伪元素可以相对于它进行绝对定位 */
  width: 100%;
  max-width: 380px;
  flex-shrink: 0;
}

/* 4b. 背景头图：只给顶部设置圆角 */
#profile-banner-img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 24px 24px 0 0; /* 只给顶部设置圆角 */
  position: relative;
  z-index: 1; /* 层级1：在最下方 */
}

/* 4c. 头像容器：精确定位，使其中心线与头图底部对齐 */
#profile-widget .profile-avatar-container {
  position: absolute;
  top: 80px; /* 从顶部向下偏移，让它一半在头图上，一半在下面 */
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: white; /* 白色背景板，让头像更突出 */
  padding: 4px; /* 白色边框的效果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 3; /* 层级3：最高层，压住一切 */
}

#profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* 4d. 白色信息卡片：使用负外边距实现无缝拼接 */
#profile-widget .profile-info {
  /* 【修改后】白色到透明的渐变背景，并加上一层柔和的阴影 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 20%, rgba(255, 255, 255, 0));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 24px;

  /* 核心魔法：使用负外边距，将卡片向上移动，与头图和头像重叠 */
  margin-top: -24px;

  /* 同时，为上移的头像留出精确的空间，避免文字压住头像 */
  padding-top: 54px; /* 头像半径(40px) + 额外间距(14px) */

  min-height: 120px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  text-align: center;
  color: #1c1c1e;
  position: relative;
  z-index: 2; /* 层级2：在头图之上，但在头像之下 */
}

/* 4e. 个人资料内部的文字样式 */
#profile-username {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 2px 0;
}
#profile-sub-username {
  font-size: 13px;
  color: #8a8a8a;
  margin: 0 0 10px 0;
}
#profile-bio {
  font-size: 14px;
  margin: 0 0 12px 0;
  color: #333;
}
#profile-location {
  font-size: 12px;
  color: #8a8a8a;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 3px 9px;
  border-radius: 10px;
}

/* --- 5. 桌面式布局 (小组件 + App图标) --- */
#desktop-layout {
  display: grid; /* 使用Grid布局，轻松实现两列 */
  grid-template-columns: 1fr 1.1fr; /* 左窄右宽的两列 */
  gap: 20px;
  width: 100%;
  align-items: start;
}
#desktop-widget-column {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* 【核心修改】将 space-around 改为 space-between */
  align-items: start;
  width: 100%;
}

/* 右侧App图标容器 */
#desktop-app-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列图标 */
  gap: 25px;
  align-content: start;
}
.desktop-app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
}
.icon-bg-desktop {
  width: 55px;
  height: 55px;
  border-radius: 14px;
  background-color: #f0f2f5;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  overflow: hidden;
}
.icon-bg-desktop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.desktop-app-icon .label {
  color: #333;
  font-size: 13px;
  font-weight: 500;
}
.desktop-app-icon:active .icon-bg-desktop {
  transform: scale(0.9);
}

/* --- 6. 底部 Dock 栏 --- */
#desktop-dock {
  background-color: rgba(255, 255, 255, 0.15); /* 玻璃拟态背景 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 15px 25px;
  display: flex;
  justify-content: center;
  gap: 30px;
  width: fit-content; /* 宽度自适应内容 */
  flex-shrink: 0;
}

/* --- 7. 【核心功能】为可编辑元素添加视觉反馈 --- */
.editable-text,
.editable-image {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* 鼠标悬停时，显示一个半透明的虚线外框，并轻微变暗，提示用户这里可以点 */
.editable-text:hover,
.editable-image:hover {
  outline: 2px dashed rgba(0, 0, 0, 0.4);
  opacity: 0.85;
  border-radius: 4px; /* 让外框也有一点圆角 */
}

/* --- 8. 【锁屏兼容】让锁屏和主屏幕可以堆叠 --- */
#lock-screen,
#home-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#lock-screen {
  z-index: 999; /* 确保锁屏在最上层 */
}
/* ▼▼▼ 这是新增的桌面小组件样式 ▼▼▼ */

/* 单个小组件的总容器 */
.custom-widget-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* 各个元素之间的垂直间距 */
}

.widget-bubble {
  position: relative;
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  padding: 8px 12px;
  border-radius: 20px; /* 【核心修改】增加圆角，实现胶囊感 */
  font-size: 13px;
  font-weight: 500;
  /* 【核心修改】移除 min-width，让宽度自适应内容 */
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 用伪元素给气泡加一个小尾巴，指向下面的圆形图片 */
.widget-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px; /* 尾巴在气泡下方 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent;
}

.widget-circle-uploader {
  width: 65px; /* 从 80px 缩小 */
  height: 65px; /* 从 80px 缩小 */
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  padding: 3px;
  background-color: transparent; /* 【核心修改】将背景色改为透明 */
  box-sizing: border-box;
}

/* 这是替换后的第二块 */
.widget-circle-uploader img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%; /* 【核心】让图片也变成圆形，完美适应内边距 */
}

/* 下方的透明文字区域 */
.widget-subtext {
  background: transparent;
  border: none;
  color: #333;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* 加一点文字阴影更清晰 */
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

/* ▲▲▲ 新增样式结束 ▲▲▲ */
/* ▼▼▼ 【V3最终美化版】主屏幕美化预设功能样式 ▼▼▼ */
.preset-manager-container {
  width: 100%;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}
#phone-screen.dark-mode .preset-manager-container {
  border-top-color: #3a3a3c;
}
.preset-manager-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preset-manager-controls {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 【核心】2x2 网格布局 */
  gap: 12px; /* 按钮间距 */
  width: 100%;
}
.preset-btn-capsule {
  padding: 12px 15px; /* 增加垂直内边距，让按钮更高更可爱 */
  border: none;
  border-radius: 25px; /* 更大的圆角，胶囊感更强 */
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); /* 增加一点立体阴影 */
}
.preset-btn-capsule:active {
  transform: scale(0.96);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.preset-btn-capsule:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  background-color: #e9ecef !important; /* 禁用时统一用灰色 */
  color: #adb5bd !important;
  border-color: #dee2e6 !important;
}
#phone-screen.dark-mode .preset-btn-capsule:disabled {
  background-color: #3a3a3c !important;
  color: #545458 !important;
}
.preset-btn-apply {
  background-color: var(--accent-color); /* 应用按钮使用主题色 */
  color: white;
  grid-column: 1 / -1; /* 【核心】让应用按钮独占一行，更突出 */
}
.preset-btn-save {
  background-color: #4cd964; /* 保存用绿色，代表创建 */
  color: white;
}
.preset-btn-secondary {
  background-color: #f8f9fa;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
#phone-screen.dark-mode .preset-btn-secondary {
  background-color: #3a3a3c;
  border-color: #545458;
}
.preset-btn-delete {
  background-color: #ffdde5;
  color: #ff3b30;
}
#phone-screen.dark-mode .preset-btn-delete {
  background-color: #5c2b2b;
  color: #ff8a80;
}
/* ▲▲▲ 样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 【V6最终修复版】夜间模式终极适配 (已修复所有页面适配问题) ▼▼▼ */

/* 核心：当 #phone-screen 拥有 .dark-mode 类时，激活以下所有样式 */

/* 1. 全局重新定义颜色变量 */
#phone-screen.dark-mode {
  --secondary-bg: #1c1c1e;
  --border-color: #38383a;
  --text-primary: #ffffff;
  --text-secondary: #8e8e93;
  --status-bar-text-color: #ffffff;
}

/* 2. 【基础】为所有屏幕和主要容器设置基础深色背景 */
#phone-screen.dark-mode,
#phone-screen.dark-mode .screen,
#phone-screen.dark-mode #chat-list,
#phone-screen.dark-mode #world-book-list,
#phone-screen.dark-mode .list-container,
#phone-screen.dark-mode .form-container,
#phone-screen.dark-mode #chat-messages {
  background-color: #000000 !important;
}

/* 3. 【主屏幕】专属样式 (从被删除的代码中恢复并整合) */
#phone-screen.dark-mode #home-screen {
  background: #111827; /* 深蓝色背景 */
}
#phone-screen.dark-mode #desktop-dock {
  background-color: rgba(55, 65, 81, 0.5); /* Dock栏深灰色玻璃效果 */
}
#phone-screen.dark-mode .desktop-app-icon .label,
#phone-screen.dark-mode .widget-subtext {
  color: #e5e7eb; /* 桌面文字变为浅灰色 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); /* 加强阴影 */
}
#phone-screen.dark-mode #profile-widget .profile-info {
  background: linear-gradient(to bottom, rgba(28, 28, 30, 0.85) 20%, rgba(28, 28, 30, 0)); /* 信息卡片深灰色渐变 */
  color: #f9fafb;
}
#phone-screen.dark-mode #profile-username,
#phone-screen.dark-mode #profile-bio,
#phone-screen.dark-mode #profile-location span {
  color: #f9fafb; /* 信息卡片主文字白色 */
}
#phone-screen.dark-mode #profile-sub-username,
#phone-screen.dark-mode #profile-location {
  color: #9ca3af; /* 信息卡片次要文字灰色 */
}
#phone-screen.dark-mode #profile-location {
  background-color: rgba(255, 255, 255, 0.1); /* 地点背景变亮 */
}
#phone-screen.dark-mode .widget-bubble {
  background-color: rgba(55, 65, 81, 0.9); /* 小组件气泡深灰色 */
  color: #e5e7eb; /* 小组件文字浅灰色 */
}
#phone-screen.dark-mode .widget-bubble::after {
  border-top-color: rgba(55, 65, 81, 0.9); /* 小尾巴颜色同步 */
}

/* 4. 【修复】适配所有页面的头部Header */
#phone-screen.dark-mode .header,
#phone-screen.dark-mode .qzone-header {
  background-color: rgba(28, 28, 30, 0.85) !important;
  border-bottom-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* 5. 【修复】适配所有通用组件 (弹窗、输入框等) */
#phone-screen.dark-mode #chat-input-area,
#phone-screen.dark-mode #chat-list-bottom-nav {
  background-color: rgba(28, 28, 30, 0.85);
  border-top-color: var(--border-color);
}
#phone-screen.dark-mode #chat-input {
  background-color: var(--secondary-bg);
  color: var(--text-primary);
}
#phone-screen.dark-mode .modal-content,
#phone-screen.dark-mode #custom-modal {
  background-color: #2c2c2e;
}
#phone-screen.dark-mode .modal-header,
#phone-screen.dark-mode .modal-footer,
#phone-screen.dark-mode .custom-modal-footer {
  border-color: var(--border-color);
}
#phone-screen.dark-mode .form-group input,
#phone-screen.dark-mode .form-group select,
#phone-screen.dark-mode .form-group textarea {
  background-color: var(--secondary-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}
#phone-screen.dark-mode .list-item,
#phone-screen.dark-mode .chat-list-item-swipe-container:not(:last-child) {
  border-bottom-color: var(--border-color);
}
#phone-screen.dark-mode .list-item:hover,
#phone-screen.dark-mode .chat-list-item:hover {
  background-color: #2c2c2e;
}

/* 6. 【解决】字体预设 & 外观设置页面深度适配 */
#phone-screen.dark-mode #font-settings-screen,
#phone-screen.dark-mode #wallpaper-screen {
  background-color: #000000;
}
#phone-screen.dark-mode .font-preset-slot,
#phone-screen.dark-mode #font-preview,
#phone-screen.dark-mode #wallpaper-preview {
  background-color: var(--secondary-bg);
  border-color: var(--border-color);
}
#phone-screen.dark-mode .preset-btn.secondary {
  background-color: #3e3e42;
  border-color: #545458;
}

/* 7. 【解决】“查手机”功能所有内部页面深度适配 */
#phone-screen.dark-mode #character-phone-container {
  background-color: #000000;
}
#phone-screen.dark-mode .character-phone-frame {
  background-color: #111;
}
#phone-screen.dark-mode .character-phone-inner-screen,
#phone-screen.dark-mode .character-phone-page {
  background-color: #000000;
}
#phone-screen.dark-mode .character-phone-header {
  background-color: rgba(28, 28, 30, 0.85) !important;
  border-bottom: 1px solid #38383a !important;
}
#phone-screen.dark-mode #character-app-grid .label {
  color: #e5e7eb;
}
#phone-screen.dark-mode .character-chat-list .chat-list-item:hover {
  background-color: #1c1c1e;
}
#phone-screen.dark-mode #character-chat-history-messages {
  background-color: #0e0e0e !important;
}
#phone-screen.dark-mode .character-chat-bubble.received {
  background-color: #2c2c2e;
}
#phone-screen.dark-mode .character-data-item,
#phone-screen.dark-mode .character-bank-transaction,
#phone-screen.dark-mode .character-cart-item,
#phone-screen.dark-mode .character-browser-item {
  background-color: #1c1c1e;
  border-color: #38383a;
}
#phone-screen.dark-mode .character-data-item .title,
#phone-screen.dark-mode .character-data-item .content,
#phone-screen.dark-mode .cart-item-price {
  color: var(--text-primary);
}
#phone-screen.dark-mode .character-bank-balance-card {
  background: linear-gradient(135deg, #3a3a3c, #1c1c1e);
}
#phone-screen.dark-mode #character-diary-list .character-data-item {
  background-color: #1a1510;
  border-color: #4a443b;
  border-left-color: #8c7d6b;
}
#phone-screen.dark-mode #character-select-item .name {
  color: #80cbc4 !important; /* 柔和的青色 */
}

/* 8. 【新增】修复聊天列表分组标题的背景色 */
#phone-screen.dark-mode .chat-group-header {
  background-color: #1c1c1e;
}
#phone-screen.dark-mode .chat-list-item-content.pinned {
  background-color: #3a3a3c;
}

/* ▲▲▲ CSS 代码粘贴结束 ▲▲▲ */
/* ▼▼▼ 步骤 1.1：将这整块【终极修复版】CSS粘贴到 <style> 的末尾 ▼▼▼ */

/* 核心修复：使用 !important 强制提升优先级，覆盖掉所有捣乱的内联样式 */

/* 1. 为所有需要适配的屏幕强制设置纯黑背景 */
#phone-screen.dark-mode #wallpaper-screen,
#phone-screen.dark-mode #font-settings-screen,
#phone-screen.dark-mode #api-settings-screen,
#phone-screen.dark-mode #character-selection-screen,
#phone-screen.dark-mode #world-book-screen,
#phone-screen.dark-mode #world-book-editor-screen,
#phone-screen.dark-mode .form-container, /* 确保所有表单容器也适配 */
#phone-screen.dark-mode .list-container {
  /* 确保所有列表容器也适配 */
  background-color: #000000 !important;
}

/* 2. 为“查手机”内部的所有页面强制设置纯黑背景 */
#phone-screen.dark-mode .character-phone-inner-screen,
#phone-screen.dark-mode .character-phone-page {
  background-color: #000000 !important;
}
#phone-screen.dark-mode #character-chat-history-messages {
  background-color: #0e0e0e !important; /* 聊天记录用深灰色 */
}

/* 3. 修复页面内部组件的背景色 */
#phone-screen.dark-mode #font-preview,
#phone-screen.dark-mode #wallpaper-preview {
  background-color: #1c1c1e !important;
  border-color: #38383a !important;
}

/* 4. 修复“查手机”里对方的聊天气泡颜色 */
#phone-screen.dark-mode .character-chat-bubble.received {
  background-color: #2c2c2e !important;
}
/* ▼▼▼ 【最终修复版】提升所有弹窗的层级 ▼▼▼ */
#music-source-selector-modal,
#music-search-results-modal {
  z-index: 250 !important; /* 这个值高于播放列表(210)，!important确保它拥有最高优先级 */
}
/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 的末尾 ▼▼▼ */

/* 【全新美化版】通用操作菜单按钮 */
#preset-actions-modal .custom-modal-footer button {
  width: 100%;
  border: none; /* 移除边框 */
  border-radius: 20px; /* ★★★ 修改这里！把 12px 改成了 20px ★★★ */
  padding: 14px;
  font-size: 16px; /* 字体稍微缩小一点，更精致 */
  font-weight: 500;
  margin-bottom: 8px; /* 按钮之间的垂直间距 */
  background-color: #f0f0f0; /* 统一的浅灰色背景 */
  color: var(--text-primary);
  transition: background-color 0.2s, transform 0.1s; /* 添加动画 */
}

/* 鼠标悬停和点击效果 */
#preset-actions-modal .custom-modal-footer button:hover {
  background-color: #e0e0e0;
}
#preset-actions-modal .custom-modal-footer button:active {
  transform: scale(0.98); /* 点击时轻微缩小 */
}

/* 单独美化“删除”按钮 */
#preset-actions-modal .custom-modal-footer button.btn-danger {
  background-color: #ffe5e5;
  color: #ff3b30;
}
#preset-actions-modal .custom-modal-footer button.btn-danger:hover {
  background-color: #ffcccc;
}

/* 美化“取消”按钮 */
#preset-actions-modal .custom-modal-footer button:last-child {
  background-color: #e9ecef;
  margin-top: 4px; /* 和上面的按钮稍微拉开一点距离 */
}
#preset-actions-modal .custom-modal-footer button:last-child:hover {
  background-color: #dcdfe3;
}

/* 移除按钮之间的分割线 */
#preset-actions-modal .custom-modal-footer button {
  border-bottom: none !important;
}

/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 的末尾 ▼▼▼ */

/* 【核心修正】提升通用操作菜单的层级，确保它能覆盖播放列表 */
#preset-actions-modal {
  z-index: 220; /* 这个值比播放列表(210)更高，就不会被挡住了 */
}

/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* --- “查手机”悬停删除按钮样式 开始 --- */

/* 1. 让“查手机”功能里的所有列表项都成为可以定位删除按钮的容器 */
.character-data-item,
.character-cart-item,
.character-browser-item,
.character-bank-transaction,
.character-trajectory-item,
.character-app-usage-item,
.character-chat-bubble-container,
.character-album-item {
  position: relative; /* 这是让按钮可以基于它来定位的关键 */
}

/* 2. 美化删除按钮，并将它定位到右上角，默认隐藏 */
.item-delete-btn,
.message-delete-btn {
  position: absolute;
  top: 8px; /* 距离顶部8像素 */
  right: 8px; /* 距离右侧8像素 */
  width: 24px;
  height: 24px;
  border-radius: 50%; /* 圆形按钮 */
  background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景，更美观 */
  color: white;
  border: none;
  display: flex; /* 使用flex布局让叉号"×"完美居中 */
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer; /* 鼠标放上去时显示小手图标 */
  z-index: 10; /* 确保按钮在最上层 */

  /* 核心：默认状态下隐藏按钮 */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8); /* 配合动画，让出现效果更自然 */
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* 3. 当鼠标悬停在任何一个列表项上时，显示它内部的删除按钮 */
.character-data-item:hover .item-delete-btn,
.character-cart-item:hover .item-delete-btn,
.character-browser-item:hover .item-delete-btn,
.character-bank-transaction:hover .item-delete-btn,
.character-trajectory-item:hover .item-delete-btn,
.character-app-usage-item:hover .item-delete-btn,
.character-chat-bubble-container:hover .message-delete-btn,
.character-album-item:hover .item-delete-btn {
  opacity: 1; /* 变得完全可见 */
  visibility: visible;
  transform: scale(1); /* 恢复正常大小 */
}

/* --- “查手机”悬停删除按钮样式 结束 --- */

/* ▼▼▼ 【全新】角色手机微信消息删除按钮样式 ▼▼▼ */
.character-chat-bubble-container {
  position: relative; /* 让删除按钮可以相对于它定位 */
}

.message-delete-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-color: rgba(0, 0, 0, 0.1);
  color: #555;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  opacity: 0; /* 默认隐藏 */
  transition: all 0.2s ease;
}

.character-chat-bubble-container:hover .message-delete-btn {
  opacity: 1; /* 鼠标悬停时显示 */
}

.message-delete-btn:hover {
  background-color: #ff3b30;
  color: white;
}

/* 根据消息是左是右，调整删除按钮的位置 */
.character-chat-bubble-container.sent .message-delete-btn {
  left: -28px;
}
.character-chat-bubble-container.received .message-delete-btn {
  right: -28px;
}
/* ▲▲▲ 新增样式结束 ▲▲▲ */

/* ▲▲▲ CSS 粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新添加】强制修正所有设置页面的底部安全区 ▼▼▼ */
#font-settings-screen .form-container,
#wallpaper-screen .form-container,
#api-settings-screen .form-container,
#css-editor-screen .form-container {
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
/* ▲▲▲ 添加结束 ▲▲▲ */

/* ▼▼▼ 【全新】iOS风格的滑动开关样式 ▼▼▼ */

.toggle-switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 让文字和开关两端对齐 */
  cursor: pointer;
  user-select: none;
  width: 100%;
  padding: 10px 0; /* 增加一点上下间距 */
}

.toggle-switch-text {
  font-weight: 500;
  color: var(--text-primary);
}

/* 隐藏原始的 checkbox */
.toggle-switch-label input[type='checkbox'] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* 开关的轨道 */
.toggle-switch-slider {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
  background-color: #e9e9eb;
  border-radius: 34px;
  transition: background-color 0.2s;
  flex-shrink: 0; /* 防止被压缩 */
}

/* 开关的滑块 (那个白色圆点) */
.toggle-switch-slider::before {
  content: '';
  position: absolute;
  height: 27px;
  width: 27px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* 当 checkbox 被选中时，改变轨道的颜色 */
.toggle-switch-label input:checked + .toggle-switch-slider {
  background-color: #34c759; /* iOS 风格的绿色 */
}

/* 当 checkbox 被选中时，移动滑块 */
.toggle-switch-label input:checked + .toggle-switch-slider::before {
  transform: translateX(20px);
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 这是为你新增的颜色样式 ▼▼▼ */

/* 1. 把时间的颜色强制设置为黑色 */
#status-bar-time {
  color: #000000 !important; /* !important 确保它优先级最高 */
}

/* 2. 把电池容器内的所有东西（图标边框、电量条、百分比文字）都设置为绿色 */
#status-bar-battery {
  color: #4caf50 !important; /* 这是一个很好看的绿色 */
}

/* ▲▲▲ 新增样式结束 ▲▲▲ */
/* ▼▼▼ 这是步骤1需要粘贴的新样式 ▼▼▼ */

/* 让每一条评论都变成可点击的 */
.comment-item {
  cursor: pointer; /* 鼠标悬停时显示为小手形状 */
  transition: background-color 0.2s; /* 添加一个平滑的背景色过渡动画 */
  border-radius: 4px; /* 给一点点圆角，更好看 */
  padding: 2px 5px; /* 增加一点内边距，让点击区域更大 */
  margin: 0 -5px; /* 把上面的内边距抵消掉，保持对齐 */
}
.comment-item:hover {
  background-color: #f0f2f5; /* 鼠标放上去时，给一个淡淡的背景色 */
}
#phone-screen.dark-mode .comment-item:hover {
  background-color: #2c2c2e; /* 夜间模式下的悬停颜色 */
}

/* “回复”这两个字的样式 */
.comment-item .reply-text {
  color: var(--text-secondary);
  margin: 0 4px; /* 和两边的名字拉开一点距离 */
}

/* 被回复者的名字样式 */
.comment-item .reply-target-name {
  font-weight: 600;
  color: var(--accent-color);
  cursor: pointer;
  margin-right: 5px;
}
/* ▼▼▼ 【全新】聊天记录搜索功能样式 ▼▼▼ */

/* 搜索结果列表 */
#chat-search-results-list {
  flex-grow: 1; /* 占据剩余所有空间 */
  overflow-y: auto; /* 内容多了可以滚动 */
}

/* 单条搜索结果的样式 */
.search-result-item {
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  gap: 12px; /* 头像和内容的间距 */
  align-items: flex-start;
}
.search-result-item:hover {
  background-color: #f5f5f5;
}
#phone-screen.dark-mode .search-result-item:hover {
  background-color: #2c2c2e;
}

/* 结果中的头像 */
.search-result-item .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 结果右侧信息（名字、时间、内容） */
.search-result-info {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 信息内部的垂直间距 */
  overflow: hidden; /* 防止内容过长溢出 */
}

/* 名字和时间的容器 */
.search-result-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.search-result-meta .name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

/* 消息内容 */
.search-result-content {
  font-size: 14px;
  line-height: 1.5;
  word-break: break-all; /* 确保长文本能换行 */
}

/* 【核心】关键词高亮样式 */
.highlight {
  background-color: #ffde5c; /* 亮黄色背景 */
  color: #5d4037; /* 深棕色文字，对比更清晰 */
  font-weight: bold;
  padding: 1px 3px;
  border-radius: 3px;
}

/* 跳转后消息的闪烁动画 */
@keyframes flash-highlight {
  0% {
    background-color: transparent;
  }
  25% {
    background-color: rgba(255, 222, 92, 0.7);
  }
  100% {
    background-color: transparent;
  }
}
.message-bubble.flash {
  animation: flash-highlight 1.5s ease-out;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【最终修复】解决搜索结果看不见的问题 ▼▼▼ */
#chat-search-screen .form-container {
  padding-bottom: 20px; /* 给底部一点空间 */
}

#search-results-list {
  flex-grow: 1; /* 核心：让结果列表占据所有剩余的垂直空间 */
  overflow-y: auto; /* 核心：如果结果太多，让它自己出现滚动条 */
  min-height: 0; /* 一个神奇的CSS属性，用于解决flex布局下的溢出问题 */
  border-top: 1px solid var(--border-color); /* 在结果和按钮之间加一条分割线，更美观 */
  margin-top: 15px; /* 和上面的按钮拉开距离 */
  padding-top: 10px; /* 列表顶部的内边距 */
}
/* ▲▲▲ 修复结束 ▲▲▲ */
/* ▼▼▼ 把这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* 统一样式，让图标和文字按钮对齐 */
#music-playlist-panel .playlist-header .panel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ▼▼▼ 用这块新代码替换旧的垃圾桶样式 ▼▼▼ */

/* 设置垃圾桶图标的默认样式 */
#delete-expired-songs-btn svg {
  color: inherit; /* 核心修改1: 平时颜色继承父元素，和"本地"等文字颜色一样，保持低调 */
  transition: color 0.2s, transform 0.2s; /* 添加transform过渡效果 */
  transform: translateY(3px); /* 核心修改2: 让图标整体下移3像素，视觉上更对齐 */
}

/* 设置鼠标悬停/点击时的样式 */
#delete-expired-songs-btn:hover svg,
#delete-expired-songs-btn:active svg {
  color: #ff3b30; /* 核心修改3: 鼠标放上去或点击时，才变为醒目的红色 */
}

/* ▲▲▲ 替换结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 的末尾 ▼▼▼ */

/* 【核心】专门为角色手机里的日记删除按钮，重新定义位置 */
#character-diary-list .character-data-item .item-delete-btn {
  top: auto; /* 解除顶部的定位 */
  right: auto; /* 解除右侧的定位 */
  bottom: 8px; /* 定位到距离底部8像素 */
  left: 8px; /* 定位到距离左侧8像素 */
  opacity: 0; /* 保持默认隐藏 */
  transition: opacity 0.2s ease; /* 保持淡入淡出动画 */
}

/* 【美化】鼠标悬停在整张日记卡片上时，才显示这个按钮 */
#character-diary-list .character-data-item:hover .item-delete-btn {
  opacity: 1;
}

/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】心声功能样式 ▼▼▼ */

/* 1. 跳动的心动画 */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
#char-heart-btn svg {
  animation: heartbeat 1.5s infinite ease-in-out;
}

/* 2. 心声面板主内容样式 (已修复) */
#inner-voice-avatar-wrapper::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 1.5px solid transparent; /* 默认是透明边框，看不见 */
  border-radius: 50%;
  pointer-events: none;
  transition: border-color 0.2s ease-in-out; /* 添加平滑过渡 */
}
/* 【核心】仅当没有头像框时(.has-border)，才显示红线 */
#inner-voice-avatar-wrapper.has-border::after {
  border-color: #ff8a80; /* 你想要的红色轮廓线 */
}

#inner-voice-content-area p {
  white-space: pre-wrap; /* 让换行符和空格生效 */
  word-break: break-word; /* 防止长单词溢出 */
}

/* 3. 历史记录面板样式 */
.inner-voice-history-item {
  background-color: #fff;
  margin: 10px;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.history-item-timestamp {
  font-size: 11px;
  color: #999;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.history-item-content p {
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #444;
}
.history-item-content strong {
  font-size: 12px;
}
/* ▲▲▲ 心声功能样式结束 ▲▲▲ */
/* 【全新】心声历史记录单条删除按钮样式 */
.inner-voice-history-item {
  position: relative; /* 让删除按钮可以相对于它定位 */
}

.history-item-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #888;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  transition: all 0.2s ease;
}

.history-item-delete-btn:hover {
  background-color: #ff3b30;
  color: white;
}
/* ▼▼▼ 在这里开始复制：【主题色版】可爱圆润按钮样式 ▼▼▼ */

/* --- 1. 再次设置通用的“可爱基础” --- */
#save-theme-btn,
#save-as-new-theme-btn,
#export-theme-btn,
#import-theme-btn,
#rename-theme-btn,
#delete-theme-btn {
  border: none;
  border-radius: 25px; /* 可爱的胶囊形状 */
  padding: 12px 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease-in-out;
  margin-top: 5px !important;
}

/* --- 2. 可爱的“按下”效果 --- */
#save-theme-btn:active,
#save-as-new-theme-btn:active,
#export-theme-btn:active,
#import-theme-btn:active,
#rename-theme-btn:active,
#delete-theme-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- 3. 【核心修改】为不同功能的按钮设置配套颜色 --- */

/* “保存” 和 “另存为”：使用全局主题色！ */
#save-theme-btn,
#save-as-new-theme-btn {
  background-color: var(--accent-color); /* 这就是你的主题色！ */
  color: white;
}

/* “导出”、“导入”、“重命名”：使用柔和的次要样式 */
#export-theme-btn,
#import-theme-btn,
#rename-theme-btn {
  background-color: #f0f2f5; /* 淡淡的灰色背景 */
  color: var(--accent-color); /* 文字使用主题色 */
  border: 1px solid var(--accent-color); /* 再加一个主题色的边框，更精致 */
}

/* “删除”按钮：还是用可爱的粉红色来提醒，防止误触 */
#delete-theme-btn {
  background-color: #ffdde5; /* 淡淡的樱花粉背景 */
  color: #ff3b30; /* 文字用醒目的红色 */
  border: 1px solid #ffc2d1;
}

/* --- 4. 鼠标放到不同按钮上时的颜色变化 --- */
#save-theme-btn:hover,
#save-as-new-theme-btn:hover {
  opacity: 0.85; /* 主题色按钮变淡一点点 */
}

#export-theme-btn:hover,
#import-theme-btn:hover,
#rename-theme-btn:hover {
  background-color: #e9ecef; /* 次要按钮背景加深一点点 */
}

#delete-theme-btn:hover {
  background-color: #ffc2d1; /* 删除按钮背景加深一点点 */
}

/* ▲▲▲ 复制到这里结束 ▲▲▲ */
/* ▼▼▼ 请将这段新CSS粘贴到 <style> 的末尾 ▼▼▼ */
.action-icon.summon-npc svg {
  stroke-width: 1.5; /* 让图标线条稍微粗一点，更清晰 */
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */
/* ▼▼▼ 请用下面这【一整块带有详细注释】的代码，完整替换掉你旧的微博主页布局CSS ▼▼▼ */

/* 1. 个人主页的滚动容器 (保持不变) */
#weibo-profile-page {
  flex-grow: 1;
  overflow-y: auto;
  background-color: #f0f2f5;
}

/* 2. 头部容器：负责背景图，并为下方内容留出空间 */
.weibo-profile-header {
  position: relative;
  height: 240px;
  /* 
      ★★★ 手动调整区：微博内容与上方区域的【上下间距】 ★★★
      这个值决定了你的第一条微博，和上方个人信息区域的距离。
      - 数值越大，间距越大，微博内容离得越远。
      - 数值越小，间距越小，微博内容离得越近。
      我已将它从 90px 减小到了 20px，你可以根据喜好再微调。
    */
  margin-bottom: -5px; /* ★ 修改这里 ★ */
}

/* 3. 背景图样式 (保持不变) */
.weibo-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4. 头像容器：实现悬浮效果的核心 */
.weibo-avatar-container {
  position: absolute;
  z-index: 3;
  width: 80px;
  height: 80px;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transform: none;

  /* ★★★ 手动调整区1: 头像位置 (左右 + 上下) ★★★ */

  /* --- 左右位置 --- */
  /* 数值越大，越往右。数值越小，越往左。*/
  left: 15px; /* ★ 修改这里 */

  /* --- 上下位置 --- */
  /* 数值越小 (比如 -50px), 越往下。数值越大 (比如 -30px), 越往上。*/
  bottom: 50px; /* ★ 修改这里 */
}

.weibo-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* 5. 昵称和职业信息 */
/* ★★★ 手动调整区2: 昵称位置 (左右 + 上下) ★★★ */
.weibo-nickname {
  position: absolute;
  z-index: 2;
  color: #1f1f1f;
  text-shadow: none;
  font-size: 18px;
  font-weight: 600;

  /* --- 左右位置 --- */
  /* 数值越大，越往右。数值越小，越往左。*/
  left: 35px; /* ★ 修改这里 */

  /* --- 上下位置 --- */
  /* 数值越小 (比如 -60px), 越往下。数值越大 (比如 -50px), 越往上。*/
  bottom: 30px; /* ★ 修改这里 */
}

/* ▼▼▼ 用这块新CSS替换掉旧的 ▼▼▼ */
#weibo-user-profession-display {
  position: absolute;
  left: 35px; /* 修改：从 left 改为 right，让它靠右对齐 */
  bottom: -5px; /* 修改：调整垂直位置，在头像下方 */
  z-index: 2;
  font-size: 13px;
  color: #8a8a8a;
  text-shadow: none;
  text-align: right; /* 新增：让文字本身也靠右对齐，更美观 */
  cursor: pointer; /* 新增：鼠标放上去时显示为小手形状 */
}

/* 6. 关注/粉丝/微博数据 */
/* ★★★ 手动调整区3: 关注/粉丝/微博 位置 (左右 + 上下) ★★★ */
.weibo-stats {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 20px;

  /* --- 左右位置 --- */
  /* 数值越大，越往右。数值越小，越往左。*/
  left: 35px; /* ★ 修改这里 */

  /* --- 上下位置 --- */
  /* 数值越小 (比如 -90px), 这行数据越往下。数值越大 (比如 -70px), 越往上。*/
  bottom: 15px; /* ★ 修改这里 */
}

/* 7. 单个数据项样式 (保持不变) */
.weibo-stat-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
}
.weibo-stat-number {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-shadow: none;
}
.weibo-stat-label {
  font-size: 13px;
  color: #888;
  text-shadow: none;
}

/* 8. 微博Feed列表 (保持不变) */
#my-weibo-feed-list {
  padding-top: 15px;
}

/* ▲▲▲ 微博样式替换结束 ▲▲▲ */

/* ▼▼▼ 【全新】微博页面框架和底部导航样式 ▼▼▼ */
#weibo-screen {
  display: flex;
  flex-direction: column;
}
.weibo-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* 默认隐藏所有页面 */
  flex-direction: column;
  background-color: #f0f2f5;
}
.weibo-view.active {
  display: flex; /* 只显示激活的页面 */
}
/* ▼▼▼ 【布局统一修复版】用这块代码完整替换掉你旧的 #weibo-bottom-nav 样式 ▼▼▼ */
#weibo-bottom-nav {
  /* --- 核心修改 --- */
  position: absolute; /* 1. 改为绝对定位，让它浮动起来 */
  bottom: 0; /* 2. 固定在底部 */
  left: 0; /* 3. 左侧对齐 */
  width: 100%; /* 4. 宽度撑满 */

  /* --- 其他样式保持不变 --- */
  z-index: 15;
  display: flex;
  border-top: 1px solid var(--border-color);
  background-color: rgba(247, 247, 247, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom);
}
/* ▲▲▲ 替换结束 ▲▲▲ */

.weibo-nav-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}
.weibo-nav-item.active {
  color: var(--accent-color);
  font-weight: 600;
}
/* ▲▲▲ 微博框架样式结束 ▲▲▲ */

/* ▼▼▼ 【全新】微博关注列表弹窗样式 ▼▼▼ */
#weibo-following-list-container {
  height: 100%;
  overflow-y: auto; /* 【核心】内容超出时显示垂直滚动条 */
}
.weibo-following-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #f0f0f0;
}
.weibo-following-item:last-child {
  border-bottom: none;
}
.weibo-following-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}
.weibo-following-name {
  font-weight: 500;
  color: var(--text-primary);
}
/* ▲▲▲ 关注列表样式结束 ▲▲▲ */

/* ▼▼▼ 【全新】让个人主页可编辑的元素有点击手势 ▼▼▼ */
#weibo-avatar-img,
#weibo-nickname,
#weibo-posts-item, /* 我们让整个“微博”区域可点击 */
#weibo-fans-item,  /* 整个“粉丝”区域可点击 */
#weibo-background-img /* 背景图也可点击 */ {
  cursor: pointer;
  transition: opacity 0.2s;
}
#weibo-avatar-img:hover,
#weibo-nickname:hover,
#weibo-posts-item:hover,
#weibo-fans-item:hover,
#weibo-background-img:hover {
  opacity: 0.8; /* 鼠标放上去时变淡一点，给用户反馈 */
}
/* ▲▲▲ 点击手势样式结束 ▲▲▲ */
/* ▼▼▼ 请用这块新代码替换旧的 #weibo-page-container 样式 ▼▼▼ */
#weibo-page-container {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  /* 核心修改：为绝对定位的导航栏预留出空间，防止内容被遮挡 */
  /* 50px 是导航栏的大致高度，env() 用于适配iPhone底部的小黑条 */
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
  box-sizing: border-box; /* 确保内边距被正确计算在内 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▲▲▲ 替换结束 ▲▲▲ */

/* 确保个人主页的内容可以滚动 */
#weibo-profile-page {
  overflow-y: auto;
  height: 100%;
}
/* ▲▲▲ 修复CSS结束 ▲▲▲ */

/* ▲▲▲ 修复CSS结束 ▲▲▲ */
/* ▼▼▼ 【最终修复】提升微博关注列表弹窗的层级 ▼▼▼ */
#weibo-following-modal {
  z-index: 1001; /* 确保它能覆盖在其他页面之上 */
}
/* ▲▲▲ 修复结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的微博帖子样式，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* ▼▼▼ 把这一整块全新的微博帖子样式，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* === 微博帖子专属样式 (已和动态分离) === */
/* === 微博帖子专属样式 (圆角卡片版) === */
.weibo-post-item {
  background-color: var(--secondary-bg);
  border-radius: 12px; /* ★ 修改这里，增加圆角，让它变得圆润可爱 */
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* ★ 新增柔和的阴影，营造卡片悬浮感 */
  /* ★ 旧的 border-bottom 分割线已经被移除了，现在由父容器的 gap 属性负责间距 */
}
.weibo-post-item:last-child {
  /* 这个规则现在也不需要了，但保留着也没关系 */
  border-bottom: none;
}

.weibo-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.weibo-post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.weibo-post-info {
  display: flex;
  flex-direction: column;
}

.weibo-post-nickname {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.weibo-post-timestamp {
  font-size: 12px;
  color: var(--text-secondary);
}

.weibo-post-content {
  font-size: 15px; /* 微博正文字体稍大 */
  line-height: 1.7;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 10px;
}

.weibo-post-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.weibo-post-footer {
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
  margin-top: 10px;
}

.weibo-post-actions {
  display: flex;
  justify-content: space-around; /* 三个按钮均分空间 */
  margin-bottom: 10px;
}

.weibo-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
}
.weibo-action-btn.liked {
  color: #ff5252; /* 点赞后变红 */
}
.weibo-action-btn svg {
  width: 20px;
  height: 20px;
}

.weibo-comments-container {
  padding: 10px;
  background-color: #f7f7f7;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.weibo-comment-item .weibo-commenter-name {
  font-weight: 600;
  color: var(--accent-color);
}
.weibo-comment-item .weibo-comment-reply-tag {
  color: var(--text-secondary);
  margin: 0 4px;
}

.weibo-comment-input-area {
  display: flex;
  gap: 8px;
}

.weibo-comment-input {
  flex-grow: 1;
  border: none;
  background-color: #f0f2f5;
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 13px;
}

.weibo-comment-send-btn {
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: 14px;
  padding: 0 15px;
  font-size: 13px;
  cursor: pointer;
}
/* ▲▲▲ 微博专属样式结束 ▲▲▲ */
/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* ▼▼▼ 把这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* 单条评论的容器，现在需要相对定位，并为删除按钮留出空间 */
.weibo-comment-item {
  position: relative;
  padding-right: 25px;
}

/* 评论删除按钮的样式 */
.comment-delete-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  color: var(--text-secondary);
  background-color: transparent; /* 背景透明 */
  border: none; /* 无边框 */
  font-size: 20px; /* 放大"×"号 */
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0; /* 默认隐藏 */
}

/* 鼠标悬停在整条评论上时，才显示删除按钮 */
.weibo-comment-item:hover .comment-delete-btn {
  opacity: 1;
}

/* 鼠标悬停在删除按钮上时，给一点反馈效果 */
.comment-delete-btn:hover {
  background-color: #f0f0f0;
  color: #ff3b30; /* 变红色 */
}

#phone-screen.dark-mode .comment-delete-btn:hover {
  background-color: #3a3a3c; /* 夜间模式下的悬停背景色 */
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的微博热搜样式，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* === 微博热搜列表样式 === */
#weibo-hot-search-list {
  background-color: var(--secondary-bg);
}

.hot-search-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.2s;
}

.hot-search-item:hover {
  background-color: #f5f5f5;
}
#phone-screen.dark-mode .hot-search-item:hover {
  background-color: #2c2c2e;
}

.hot-search-rank {
  width: 30px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-secondary);
  text-align: center;
  flex-shrink: 0;
}
/* 前三名用不同的颜色突出显示 */
.hot-search-item[data-rank='1'] .hot-search-rank {
  color: #f44336;
}
.hot-search-item[data-rank='2'] .hot-search-rank {
  color: #ff9800;
}
.hot-search-item[data-rank='3'] .hot-search-rank {
  color: #ffc107;
}

.hot-search-content {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.hot-search-topic {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hot-search-tag {
  font-size: 10px;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.hot-search-tag.hot {
  background-color: #f44336;
}
.hot-search-tag.new {
  background-color: #ff9800;
}
.hot-search-tag.rec {
  background-color: #2196f3;
}

/* ▲▲▲ 微博热搜样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* 1. 让帖子头部成为删除按钮的定位参考点 */
.weibo-post-header {
  position: relative; /* 关键！ */
}

/* 2. 删除按钮的样式 */
.weibo-post-delete-btn {
  position: absolute; /* 绝对定位，让它浮动起来 */
  top: 10px; /* 距离顶部10像素 */
  right: 15px; /* 距离右侧15像素 */
  width: 26px;
  height: 26px;
  background-color: rgba(0, 0, 0, 0.08); /* 半透明的背景 */
  color: var(--text-secondary); /* 使用全局的次要文字颜色 */
  border: none;
  border-radius: 50%; /* 圆形 */
  font-size: 20px; /* "×"号的大小 */
  line-height: 26px; /* 让"×"号垂直居中 */
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease; /* 添加平滑的动画效果 */
}

/* 鼠标放上去时，变成醒目的红色 */
.weibo-post-delete-btn:hover {
  background-color: #ff3b30;
  color: white;
  transform: scale(1.1); /* 轻微放大 */
}

/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* ▼▼▼ 【微博布局终极修复】真正解决所有页面滚动不到底的问题 ▼▼▼ */

/* 1. 外层容器不再需要“垫子”，它的任务只是撑开空间 */
#weibo-page-container {
  flex-grow: 1;
  position: relative;
  overflow: hidden; /* 保持不变 */
}

/* 2. 【核心】把“垫子”加到真正滚动的列表自己身上！ */
#weibo-profile-page,
#weibo-following-feed-list,
#weibo-hot-search-list,
#weibo-plaza-feed-list,
#weibo-hottopic-feed-list {
  flex-grow: 1;
  overflow-y: auto;

  /* 
       魔法就在这里！我们为每个列表的底部，
       都加上一个和导航栏一样高的内边距（“垫子”）。
       这样列表滚动到底时，最后一条评论就会被这个内边距向上推，
       正好显示在底部导航栏的上方，不会再被挡住了！
    */
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
  box-sizing: border-box; /* 确保内边距被正确计算 */
}

/* ▲▲▲ 修复结束 ▲▲▲ */

/* ▼▼▼ 把这段新样式粘贴到 <style> 的末尾 ▼▼▼ */
#post-visibility-groups label {
  display: block;
  padding: 5px 0;
}
#post-visibility-groups input {
  margin-right: 8px;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【微博布局终极修复】解决所有页面滚动不到底的问题 ▼▼▼ */

/* 1. 移除外层容器上错误的多余“垫子” */
#weibo-page-container {
  padding-bottom: 0 !important;
}

/* 2. 【核心】把“垫子”（padding-bottom）加到真正滚动的列表自己身上！*/
#weibo-profile-page,
#weibo-following-feed-list,
#weibo-hot-search-list,
#weibo-plaza-feed-list,
#weibo-hottopic-feed-list {
  /* 
       魔法就在这里！我们为每个列表的底部，
       都加上一个和导航栏一样高的内边距（“垫子”）。
       calc(50px + env(safe-area-inset-bottom)) 会自动计算导航栏高度和iPhone底部安全区高度。
    */
  padding-bottom: calc(50px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box; /* 确保内边距被正确计算 */
}
/* ▼▼▼ 【问题1修复】微博编辑资料按钮强制显示 ▼▼▼ */
/* 请将这段代码粘贴到 <style> 标签的最末尾 */
#edit-weibo-profile-btn {
  display: flex !important; /* 强制显示为flex容器 */
  align-items: center;
  justify-content: center;
  color: var(--accent-color) !important; /* 强制使用主题色 */
}
#edit-weibo-profile-btn svg {
  stroke: currentColor !important; /* 确保SVG图标继承上面的颜色 */
}
/* ▲▲▲ 修复结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 的末尾 ▼▼▼ */

/* 1. 让关注列表的每一行都能容纳新按钮 */
.weibo-following-item {
  align-items: center; /* 确保头像、名字和按钮垂直居中对齐 */
}

/* 2. 这是你新增的“操作”按钮的样式 */
.weibo-action-trigger-btn {
  margin-left: auto; /* 核心：让按钮自动靠到最右边 */
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 50%; /* 圆形按钮，更美观 */
  transition: background-color 0.2s;
}
.weibo-action-trigger-btn:hover {
  background-color: #e0e0e0;
}
#phone-screen.dark-mode .weibo-action-trigger-btn:hover {
  background-color: #3a3a3c;
}
.weibo-action-trigger-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-secondary); /* 图标颜色跟随主题 */
  display: block; /* 解决一些对齐问题 */
}

/* 3. 为操作弹窗里的单选按钮美化一下 */
#weibo-action-type-select label {
  display: block;
  padding: 8px;
  border-radius: 6px;
  transition: background-color 0.2s;
}
#weibo-action-type-select label:hover {
  background-color: #f0f2f5;
}
#phone-screen.dark-mode #weibo-action-type-select label:hover {
  background-color: #2c2c2e;
}

/* ▲▲▲ 新增CSS粘贴结束 ▲▲▲ */
/* ▼▼▼ 【弹窗层级修复】粘贴这段代码到样式末尾 ▼▼▼ */
#weibo-action-modal {
  z-index: 1002; /* 这个值比关注列表(1001)更高，就不会被盖住了 */
}
/* ▼▼▼ 【全新】论坛/小组功能样式 ▼▼▼ */

/* 1. 小组列表卡片样式 */
.forum-group-item {
  background-color: var(--secondary-bg);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.forum-group-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}
.forum-group-icon {
  font-size: 28px;
  margin-bottom: 10px;
}
.forum-group-name {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 5px;
}
.forum-group-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 2. 帖子列表项样式 */
.forum-post-item {
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}
.forum-post-item:hover {
  background-color: #f5f5f5;
}
#phone-screen.dark-mode .forum-post-item:hover {
  background-color: #2c2c2e;
}
.post-item-title {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 8px;
}
.post-item-meta {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
}

/* ▼▼▼ 请用这块新代码替换旧的 #post-detail-content 样式 ▼▼▼ */
#post-detail-content {
  flex-grow: 1; /* 核心：让它占据所有可用的垂直空间 */
  overflow-y: auto; /* 核心：如果内容超出，则允许自身滚动 */
  display: flex;
  flex-direction: column;
  padding: 20px; /* 保留舒适的内边距 */
  /* 不再需要为绝对定位的输入框留出额外的padding-bottom */
}
/* ▲▲▲ 替换结束 ▲▲▲ */
.post-detail-header h1 {
  font-size: 22px;
  margin: 0 0 10px 0;
}
.post-detail-meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.post-detail-body {
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}
.post-comments-section {
  padding-top: 20px;
}
.post-comments-section h3 {
  font-size: 16px;
  margin: 0 0 15px 0;
  border-left: 3px solid var(--accent-color);
  padding-left: 10px;
}
.post-comment-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
#phone-screen.dark-mode .post-comment-item {
  border-bottom-color: #2c2c2e;
}
.comment-author {
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 5px;
}
.comment-content {
  font-size: 14px;
  line-height: 1.6;
}

/* 4. 帖子页底部输入框 */
/* ▼▼▼ 请用这块新代码替换旧的 #post-comment-input-area 样式 ▼▼▼ */
#post-comment-input-area {
  /* 
      我们移除了 position: absolute; 和相关的 bottom, left 属性，
      让它从一个“浮动层”变回一个正常的块级元素，自然地排在内容下方。
      其他的样式会从 .chat-input-area 类继承，无需担心。
    */
  width: 100%;
  box-sizing: border-box;
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▲▲▲ 论坛样式结束 ▲▲▲ */
/* ▼▼▼ 请将这段【全新】的论坛美化CSS，粘贴到<style>标签的末尾 ▼▼▼ */

/* 1. 美化帖子详情页底部的评论输入区域 */
#post-comment-input-area {
  padding: 10px 15px; /* 增加内边距，让它不贴边 */
  background-color: rgba(247, 247, 247, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-color);
  /* 适配iPhone底部安全区 */
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* 2. 【核心】美化评论输入框本身 */
#post-comment-input-area #post-comment-input {
  background-color: #f0f2f5; /* 浅灰色背景，更有层次感 */
  border: none;
  border-radius: 18px; /* 圆角，更柔和 */
  padding: 10px 15px;
  font-size: 14px;
  resize: none; /* 禁止用户拖拽大小 */
}

/* 夜间模式适配 */
#phone-screen.dark-mode #post-comment-input-area #post-comment-input {
  background-color: #2c2c2e;
}

/* 3. 美化发送按钮 */
#post-comment-input-area #send-post-comment-btn {
  height: 36px;
  border-radius: 18px; /* 和输入框保持一致的圆角 */
  padding: 0 20px;
}

/* 4. 【新增】AI生成评论按钮的样式 */
.generate-comments-container {
  padding: 10px 20px 0 20px;
  border-bottom: 8px solid #f0f2f5;
}

#phone-screen.dark-mode .generate-comments-container {
  border-bottom-color: #000;
}

#generate-forum-comments-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background-color: #e9f5ff;
  color: var(--accent-color);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

#generate-forum-comments-btn:hover {
  background-color: #d4eaff;
}
/* ▲▲▲ 论坛美化CSS粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】论坛帖子/评论头像与楼层样式 ▼▼▼ */

/* 1. 帖子作者区域：使用flex布局让头像和名字并排 */
#post-detail-content .post-detail-header {
  display: flex;
  align-items: center;
  gap: 12px; /* 头像和右侧信息的间距 */
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}

/* 2. 帖子作者的头像样式 */
.post-author-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0; /* 防止被压缩 */
}

/* 3. 包裹作者名字和时间的容器 */
.post-author-info {
  display: flex;
  flex-direction: column;
}

/* 4. 移除旧的标题和meta外边距，因为flex布局会处理间距 */
#post-detail-content .post-detail-header h1,
#post-detail-content .post-detail-meta {
  margin: 0;
}
#post-detail-content .post-detail-header h1 {
  font-size: 18px; /* 标题可以稍微小一点，更协调 */
  margin-bottom: 4px;
}

/* 5. 评论区每一条评论的布局 */
.post-comment-item {
  display: flex;
  gap: 10px; /* 头像和右侧内容的间距 */
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
#phone-screen.dark-mode .post-comment-item {
  border-bottom-color: #2c2c2e;
}

/* 6. 评论者的小头像 */
.comment-avatar-small {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* 7. 包裹评论所有文字内容的容器 */
.comment-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* 8. 评论的头部：包含名字和楼层 */
.comment-header-line {
  display: flex;
  justify-content: space-between; /* 让名字靠左，楼层靠右 */
  align-items: center;
  margin-bottom: 5px;
}

/* 9. 评论楼层号的样式 */
.comment-floor {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 10. 移除旧的评论作者外边距 */
.post-comment-item .comment-author {
  margin-bottom: 0;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 这是修复论坛评论区宽度问题的新增代码 ▼▼▼ */
#post-comment-input-area #post-comment-input {
  flex-grow: 1; /* ★★★ 核心代码就是这行！让输入框自动伸展，占满所有可用宽度 ★★★ */

  /* 下面这些是美化样式，让它和其他输入框风格统一，这次没有修改高度哦 */
  border: none;
  background-color: #f0f2f5;
  border-radius: 18px;
  padding: 10px 15px;
  font-size: 14px;
  resize: none;
  box-sizing: border-box;
}

/* 夜间模式适配 */
#phone-screen.dark-mode #post-comment-input-area #post-comment-input {
  background-color: #2c2c2e;
}
/* ▲▲▲ 新增代码结束 ▲▲▲ */
/* ▼▼▼ 用这一整块全新的CSS，替换掉你旧的所有塔罗牌相关CSS ▼▼▼ */

/* 1. 占卜结果弹窗内的样式（纯文字版） */
#tarot-result-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.tarot-result-question {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: #f0f2f5;
  padding: 8px 12px;
  border-radius: 8px;
  width: 95%;
  text-align: center;
}
#phone-screen.dark-mode .tarot-result-question {
  background-color: #2c2c2e;
}
.tarot-spread-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.tarot-card-wrapper {
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
#phone-screen.dark-mode .tarot-card-wrapper {
  background-color: #1c1c1e;
}
.tarot-card-position {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 4px;
}
.tarot-card-name {
  font-size: 14px;
}

/* 3. 历史记录样式 (保持不变) */
#tarot-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tarot-history-item {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  position: relative;
  border: 1px solid var(--border-color);
}
#phone-screen.dark-mode .tarot-history-item {
  background-color: #2c2c2e;
}
.tarot-history-item .question {
  font-weight: 600;
  margin-bottom: 8px;
}
.tarot-history-item .details {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: pre-wrap;
}
.tarot-history-delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background-color: #e0e0e0;
  color: #888;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
}
#phone-screen.dark-mode .tarot-history-delete-btn {
  background-color: #3e3e42;
}
/* ▼▼▼ 第1步：从这里开始复制替换 ▼▼▼ */

#lovers-space-screen {
  background-color: #f0f2f5; /* 保留一个备用背景色 */
  background-size: cover; /* 背景图覆盖整个区域 */
  background-position: center; /* 背景图居中显示 */
  background-repeat: no-repeat; /* 背景图不重复 */
}

/* 头部 */
#ls-header {
  height: 220px;
  position: relative;
  /* 【核心修改】移除了 background-size 和 background-position */
  color: white;
  flex-shrink: 0;
  background-color: transparent; /* 【核心修改】让头部背景变透明，以显示下方的全屏背景 */
}

/* ▲▲▲ 第1步：复制替换到这里结束 ▲▲▲ */

/* --- 【最终修复版】修复情侣空间顶部按钮无法点击的问题 --- */
/* --- 【最终修复版】修复遮罩层拦截点击的问题 --- */

.ls-header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent, rgba(0, 0, 0, 0.2));

  /* ▼▼▼ 核心修复：让这个遮罩层对鼠标事件“透明”！ ▼▼▼ */
  pointer-events: none;
  /* ▲▲▲ 修复结束 ▲▲▲ */
}

/* --- 【已修复】情侣空间顶部栏层级问题 --- */

.ls-header-top-bar {
  position: relative;
  z-index: 3; /* ★★★ 核心修改：将层级从 2 提升到 3 ★★★ */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  padding-top: calc(15px + env(safe-area-inset-top));
}

#ls-char-name {
  font-size: 18px;
  font-weight: 600;
}
#ls-switch-char-btn {
  font-size: 16px;
}

.ls-header-avatars {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 2;
}
.ls-header-avatars img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.ls-header-avatars .heart-icon {
  font-size: 28px;
  color: #ff4d6d;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* ▼▼▼ 请用这【一整块】全新的代码，完整替换旧的 #ls-tab-bar 和 .ls-tab-item 样式 ▼▼▼ */

/* 页签栏 (V2 - 悬浮撑满版) */
/* ▼▼▼ 请用这块【悬浮胶囊最终版】代码，完整替换掉你旧的 #ls-tab-bar 样式 ▼▼▼ */
#ls-tab-bar {
  display: flex;
  flex-shrink: 0;
  position: relative;
  z-index: 5;

  /* --- 核心修改在这里 --- */
  /* 1. 使用 margin 实现上下左右的边距，营造悬浮感 */
  margin: -20px 5px 10px 5px; /* 把左右的 15px 改成了 5px */

  /* 2. 为所有四个角都设置圆角，形成可爱的胶囊形状 */
  border-radius: 25px;

  background-color: var(--secondary-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影可以让悬浮感更强 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* 单个页签项目 (V2) */
.ls-tab-item {
  flex: 1;
  text-align: center;
  /* 核心修改：padding 从 12px 增加到 15px，让导航栏【拉长一点】(更高) */
  padding: 15px 0;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  /* 新增：为图标的缩放和颜色变化添加平滑过渡 */
  transition: color 0.2s ease;
}

/* 激活状态的页签 (V2) */
.ls-tab-item.active {
  color: var(--accent-color);
}

/* 激活状态的下划线指示器 (保持不变) */
.ls-tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 8px; /* 微调位置以适应更高的导航栏 */
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background-color: var(--accent-color);
  border-radius: 1.5px;
}

/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▼▼▼ 【全新】这是为SVG图标新增的样式，请把它也粘贴到<style>里 ▼▼▼ */
.ls-tab-item svg {
  width: 24px;
  height: 24px;
  /* 为图标的大小和粗细变化添加平滑过渡 */
  transition: all 0.2s ease-in-out;
}

/* 激活状态的图标，会变得更粗、更大一点，非常醒目 */
.ls-tab-item.active svg {
  stroke-width: 2.5;
  transform: scale(1.1);
}
/* ▲▲▲ 新增样式结束 ▲▲▲ */

/* 内容区域 */
#ls-content-area {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
.ls-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: none;
  padding: 15px;
  box-sizing: border-box;
}
.ls-view.active {
  display: block;
}

/* 浮动添加按钮 */
/* ▼▼▼ 请用这块【终极居中修复版】代码，替换旧的 .ls-fab-btn 样式 ▼▼▼ */
/* ▼▼▼ 这是SVG适配版的最终代码 ▼▼▼ */
.ls-fab-btn {
  position: fixed;
  bottom: calc(30px + env(safe-area-inset-bottom));
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--accent-color);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 10;

  /* 依然使用Flexbox来居中SVG图标 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 移除所有与字体相关的属性 */
  /* font-size: 28px; (已移除) */
  /* line-height: normal; (已移除) */
}

/* (可选) 如果你觉得SVG有点小或大，可以微调它的大小 */
.ls-fab-btn svg {
  width: 24px;
  height: 24px;
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* 说说卡片 */
#ls-moments-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* 说说卡片 */
/* ... */
.ls-moment-card {
  position: relative; /* ★★★ 核心修复：就是加上这一行！ ★★★ */
  background-color: var(--secondary-bg);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 12px;
}
/* ... */

.ls-moment-card .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ls-moment-card .moment-main {
  display: flex;
  flex-direction: column;
}
.ls-moment-card .author {
  font-weight: 600;
  color: var(--text-primary);
}
.ls-moment-card .content {
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.ls-moment-card .timestamp {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* 相册列表 */
/* ▼▼▼ 用这块新样式替换旧的 #ls-album-list ▼▼▼ */
#ls-album-list {
  display: grid;
  /* 核心修改：从2列变为3列，间距从15px缩小为5px */
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
/* ▲▲▲ 替换结束 ▲▲▲ */
.ls-album-item {
  cursor: pointer;
}
.ls-album-item .cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #e9ecef;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  margin-bottom: 8px;
}
.ls-album-item .name {
  font-weight: 500;
  text-align: center;
}

/* 照片上传预览 */
#ls-photo-preview-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}
.ls-photo-preview-item {
  position: relative;
  aspect-ratio: 1 / 1;
}
.ls-photo-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.ls-photo-preview-item .remove-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  background-color: #ff3b30;
  color: white;
  border-radius: 50%;
  border: none;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

/* 情书和分享列表 */
.ls-list-item {
  background-color: var(--secondary-bg);
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.ls-list-item .title {
  font-weight: 500;
  margin-bottom: 5px;
}
.ls-list-item .meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.ls-share-item .share-type {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 4px;
  margin-right: 8px;
  color: white;
}
.share-type.song {
  background-color: #28a745;
}
.share-type.movie {
  background-color: #fd7e14;
}
.share-type.book {
  background-color: #6f42c1;
}
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* 【核心修复】让标题绝对居中，不再受两边按钮数量影响 */
#ls-header #ls-char-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%; /* 限制最大宽度，防止与按钮重叠 */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 【新增】头像和计数器的总容器，负责整体定位 */
.ls-avatar-and-counter-wrapper {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column; /* 让头像和计数器垂直排列 */
  align-items: center; /* 水平居中 */
  gap: 10px; /* 头像和计数器之间的垂直间距 */
}

/* 【修改】移除旧的头像绝对定位，因为它现在被新容器管理了 */
.ls-header-avatars {
  position: static; /* 改为静态定位 */
  transform: none;
  bottom: auto;
  left: auto;
  /* 其他样式（如头像大小、边框等）保持不变 */
}

/* 【修改】移除旧的计数器定位样式，让它在新容器里自然排列 */
#ls-days-counter {
  position: static;
  margin-top: 0;
  /* 其他样式（如字体颜色、阴影等）保持不变 */
}

/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* ▼▼▼ 请将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* 1. 让相册项目成为删除按钮的定位参考点 */
.ls-album-item .cover {
  position: relative; /* 关键！ */
  overflow: hidden; /* 防止删除按钮溢出圆角 */
}

/* 2. 删除按钮的样式 */
.ls-photo-delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  line-height: 24px; /* 确保 "×" 垂直居中 */
  text-align: center;
  cursor: pointer;
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.2s ease;
  z-index: 5; /* 确保在最上层 */
}

/* 3. 鼠标悬停在封面上时，显示删除按钮 */
.ls-album-item .cover:hover .ls-photo-delete-btn {
  opacity: 1;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 这是为情侣空间“说说”新增的样式 ▼▼▼ */

/* 说说卡片底部的互动区（评论输入、删除按钮等） */
.ls-moment-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0; /* 和内容区分隔开 */
}

/* 评论列表的容器 */
.ls-moment-comments-container {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 每条评论之间的间距 */
  font-size: 14px;
  margin-bottom: 10px;
}

/* 每一条评论的样式 */
.ls-comment-item {
  position: relative; /* 为了定位删除按钮 */
  padding-right: 25px; /* 给删除按钮留出空间 */
  line-height: 1.5;
}

.ls-comment-item .commenter-name {
  font-weight: 600;
  color: var(--accent-color); /* 使用主题色 */
  margin-right: 5px;
}

/* 评论的删除按钮 */
.ls-comment-delete-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  opacity: 0; /* 默认隐藏 */
  transition: all 0.2s ease;
}

/* 鼠标放上去才显示删除按钮 */
.ls-comment-item:hover .ls-comment-delete-btn {
  opacity: 1;
}
.ls-comment-delete-btn:hover {
  background-color: #f0f0f0;
  color: #ff3b30;
}

/* 评论输入区域的样式 */
.ls-comment-input-area {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ls-comment-input-area input {
  flex-grow: 1;
  border: none;
  background-color: #f0f2f5;
  border-radius: 15px;
  padding: 8px 12px;
  font-size: 14px;
}

.ls-comment-input-area button {
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 8px 15px;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0; /* 防止按钮被压缩 */
}

/* 说说卡片本身的删除按钮 */
.ls-moment-delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--text-secondary);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  opacity: 0; /* 默认隐藏 */
  transition: all 0.2s ease;
}
.ls-moment-card:hover .ls-moment-delete-btn {
  opacity: 1; /* 鼠标放上去才显示 */
}
.ls-moment-delete-btn:hover {
  background-color: #ff3b30;
  color: white;
}

/* ▲▲▲ 新增样式结束 ▲▲▲ */

/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* ▼▼▼ 用这块【信纸美化版】代码，完整替换掉上一版的所有情书CSS ▼▼▼ */

/* --- 【全新美化版】情侣空间情书功能样式 --- */

/* 1. 情书列表为空时的提示 (不变) */
#ls-letters-list .ls-empty-placeholder {
  text-align: center;
  color: var(--text-secondary);
  padding: 50px 0;
}

/* 2. 单个情书卡片的样式 (已修改) */
.ls-love-letter-item {
  background-color: var(--secondary-bg);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  gap: 12px;
  align-items: center;
}
.ls-love-letter-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* 3. 情书图标的样式 (不变) */
.ls-love-letter-item .letter-icon {
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  color: #ff8fab;
}

/* 4. 情书主要信息区 (已修改，加入头像) */
.ls-love-letter-item .letter-info {
  flex-grow: 1;
  overflow: hidden;
}
/* 【核心修改】收件人区域现在包含头像和名字 */
.ls-love-letter-item .letter-recipient {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 5px;
}
.ls-love-letter-item .letter-recipient .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.ls-love-letter-item .letter-preview {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 5. 发信人信息 (不变) */
.ls-love-letter-item .letter-sender {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}
.ls-love-letter-item .letter-sender .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

/* 6. 【全新】情书详情查看器 (信纸样式) */
#ls-letter-viewer-modal {
  z-index: 1001; /* 确保在最上层 */
}
.ls-letter-viewer-content {
  background-color: #fdfaef; /* 温馨的米黄色信纸背景 */
  width: 90%;
  max-width: 340px;
  height: 75%;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  font-family: 'Kaiti', 'STKaiti', serif; /* 使用更典雅的楷体 */
}
.letter-viewer-header {
  padding: 15px;
  border-bottom: 1px dashed #e0d9c7;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5d4037;
}
.letter-viewer-header .meta-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.letter-viewer-header .recipient-info .label {
  font-size: 13px;
  color: #a1887f;
}
.letter-viewer-header .recipient-info .name {
  font-size: 16px;
  font-weight: 600;
}
.letter-viewer-body {
  flex-grow: 1;
  padding: 20px;
  font-size: 16px;
  line-height: 2; /* 更大的行高，模拟手写信的舒适感 */
  color: #4a443b;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.letter-viewer-footer {
  padding: 15px;
  border-top: 1px dashed #e0d9c7;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.letter-viewer-footer .sender-info {
  font-size: 14px;
  color: #5d4037;
  font-weight: 600;
}
.letter-viewer-footer .sender-info .timestamp {
  font-size: 11px;
  color: #a1887f;
  font-weight: normal;
}
.letter-viewer-footer .letter-actions {
  display: flex;
  gap: 10px;
}
.letter-viewer-footer .letter-actions button {
  padding: 8px 15px;
  border-radius: 15px;
  border: 1px solid #d4bda5;
  background-color: transparent;
  color: #8c7b6c;
  cursor: pointer;
  font-size: 14px;
}
.letter-viewer-footer .letter-actions button.primary {
  background-color: #ff8fab;
  color: white;
  border-color: #ff8fab;
}

/* ▲▲▲ 样式替换结束 ▲▲▲ */
/* ▼▼▼ 这是为情书新增的样式 ▼▼▼ */

/* 1. 让情书卡片可以作为删除按钮的定位参考点 */
.ls-love-letter-item {
  position: relative; /* 关键！ */
}

/* 2. 删除按钮的样式 */
.ls-letter-delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.1);
  color: #888;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  opacity: 0; /* 默认隐藏 */
  transition: all 0.2s ease;
  z-index: 5; /* 确保在最上层 */
}

/* 3. 鼠标悬停在整张卡片上时，才显示删除按钮 */
.ls-love-letter-item:hover .ls-letter-delete-btn {
  opacity: 1;
}

/* 4. 鼠标悬停在删除按钮上时，给一点反馈效果 */
.ls-letter-delete-btn:hover {
  background-color: #ff3b30;
  color: white;
}
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* --- 【全新】情侣空间-情侣提问样式 --- */

#ls-questions-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ls-question-card {
  background-color: var(--secondary-bg);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden; /* 防止内部元素溢出圆角 */
}

.ls-question-section,
.ls-answer-section {
  padding: 15px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ls-question-section {
  border-bottom: 1px dashed var(--border-color);
}

.ls-question-card .qa-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ls-question-card .qa-main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ls-question-card .qa-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ls-question-card .qa-author {
  font-weight: 600;
}

.ls-question-card .qa-timestamp {
  font-size: 11px;
  color: var(--text-secondary);
}

.ls-question-card .qa-content {
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.ls-answer-placeholder {
  padding: 20px;
  text-align: center;
}

.ls-answer-btn {
  padding: 8px 20px;
  border: 1px solid var(--accent-color);
  background-color: transparent;
  color: var(--accent-color);
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是为“情侣提问”新增的删除按钮样式 ▼▼▼ */

/* 1. 让提问卡片可以作为删除按钮的定位参考点 */
.ls-question-card {
  position: relative; /* 关键！ */
}

/* 2. 删除按钮的样式 */
.ls-question-delete-btn {
  position: absolute; /* 绝对定位，让它浮动起来 */
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.08); /* 半透明的背景 */
  color: var(--text-secondary); /* 使用全局的次要文字颜色 */
  border: none;
  border-radius: 50%; /* 圆形 */
  font-size: 18px; /* "×"号的大小 */
  line-height: 24px; /* 让"×"号垂直居中 */
  text-align: center;
  cursor: pointer;
  opacity: 0; /* 默认隐藏 */
  transition: all 0.2s ease; /* 添加平滑的动画效果 */
  z-index: 5; /* 确保在最上层 */
}

/* 3. 鼠标悬停在整张卡片上时，才显示删除按钮 */
.ls-question-card:hover .ls-question-delete-btn {
  opacity: 1;
}

/* 4. 鼠标悬停在删除按钮上时，给一点反馈效果 */
.ls-question-delete-btn:hover {
  background-color: #ff3b30;
  color: white;
}
/* ▲▲▲ 新增样式结束 ▲▲▲ */
/* ▼▼▼ 这是为“分享”功能新增的样式 ▼▼▼ */

.ls-share-item .title {
  font-weight: 600; /* 标题加粗 */
}

/* ▼▼▼ 用这块【已修复换行问题】的代码，替换掉旧的 .ls-share-item .summary 样式 ▼▼▼ */
.ls-share-item .summary {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
  line-height: 1.6;
  /* --- 核心修改：允许文字自动换行 --- */
  white-space: normal; /* <--- 允许换行 */
  overflow: visible; /* <--- 允许内容溢出容器（即显示多行） */
  text-overflow: clip; /* <--- 禁用省略号 */
  word-break: break-word; /* <--- 防止超长单词或链接撑破布局 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

#phone-screen.dark-mode .ls-share-item .summary {
  color: #a0a0a0;
}

/* ▲▲▲ 新增样式结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是情侣空间专属音乐播放器的CSS样式 ▼▼▼ */

/* 播放器主窗口的遮罩层 */
#ls-music-player-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* 播放列表面板的样式 (直接复用现有的) */
#ls-music-playlist-panel {
  /* 我们直接使用 .music-playlist-panel 的现有样式，省去重复代码 */
}

/* ▲▲▲ CSS样式粘贴结束 ▲▲▲ */
/* 【新增】隐藏情侣空间播放器中不需要的按钮 */
#ls-music-player-overlay #ls-playlist-btn,
#ls-music-player-overlay #ls-prev-btn,
#ls-music-player-overlay #ls-next-btn {
  display: none;
}

/* 【新增】居中播放/暂停按钮 */
#ls-music-player-overlay .music-controls {
  justify-content: center; /* 让剩下的按钮居中 */
}

/* ▲▲▲ CSS代码替换结束 ▲▲▲ */
/* 【新增】情侣空间播放器封面/歌词切换样式 */
#ls-display-area.show-lyrics #ls-album-cover {
  display: none; /* 当有 show-lyrics 类时，隐藏封面 */
}
#ls-display-area.show-lyrics #ls-lyrics-container {
  display: block !important; /* 当有 show-lyrics 类时，显示歌词 */
}

/* 【新增】歌词行样式 */
#ls-lyrics-container .lyric-line {
  padding: 4px 0;
  font-size: 14px;
  color: #666;
  opacity: 0.7;
  transition: all 0.5s ease;
}
#ls-lyrics-container .lyric-line.active {
  font-size: 16px;
  color: #000;
  opacity: 1;
  font-weight: 600;
}
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* --- 【全新】情侣空间-情侣番茄钟样式 --- */

/* 主页布局 */
#ls-pomodoro-home {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#ls-pomodoro-start-btn-container {
  padding: 20px;
  background-color: var(--secondary-bg);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
#ls-pomodoro-start-btn-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}
#ls-pomodoro-start-icon {
  font-size: 32px;
  color: var(--accent-color);
  line-height: 1;
}
#ls-pomodoro-start-btn-container p {
  margin: 8px 0 0 0;
  font-weight: 500;
  color: var(--text-primary);
}

/* 历史记录列表 */
#ls-pomodoro-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pomodoro-history-item {
  background-color: var(--secondary-bg);
  border-radius: 8px;
  padding: 12px 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.pomodoro-history-item:hover {
  background-color: #f9f9f9;
}
.pomodoro-history-item .task {
  font-weight: 500;
  margin-bottom: 5px;
}
.pomodoro-history-item .meta {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ▼▼▼ 把下面这整块【锁机全屏版】代码，替换掉你旧的 #ls-pomodoro-timer-active 样式 ▼▼▼ */
#ls-pomodoro-timer-active {
  /* 核心修改1：将定位方式从 absolute 改为 fixed */
  /* 这会让计时器界面脱离原来的“情侣空间”页面，浮动在整个手机屏幕的最顶层！*/
  position: fixed;

  /* 核心修改2：用这四个属性让它撑满整个屏幕 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* 核心修改3：设置一个超高的层级，确保它能盖住所有东西，实现“锁机”效果 */
  z-index: 2000;

  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 50px 20px;
  box-sizing: border-box;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);

  /* (可选优化) 为iPhone的刘海和底部小黑条留出安全距离，让界面更美观 */
  padding-top: calc(50px + env(safe-area-inset-top));
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▼▼▼ 用这段新代码替换 ▼▼▼ */
.pomodoro-char-avatar-container {
  position: relative;
  text-align: center;
  width: 100%; /* <-- 就是新增了这一行！ */
}
/* ▲▲▲ 替换结束 ▲▲▲ */
#pomodoro-char-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: transform 0.2s;
}
#pomodoro-char-avatar:active {
  transform: scale(0.9);
}
/* ▼▼▼ 用这段【最终修复版】代码完整替换旧的 #pomodoro-char-log 样式 ▼▼▼ */
#pomodoro-char-log {
  position: absolute;
  top: 100%;
  margin-top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.65);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  max-width: 80%; /* <-- 核心修改在这里！让气泡可以变得更宽 */
  width: max-content; /* <-- 新增！确保气泡宽度根据内容自适应，但不会超过80% */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, margin-top 0.3s; /* margin-top让动画更平滑 */
  pointer-events: none;
  white-space: pre-wrap;
  box-sizing: border-box; /* 新增！防止内边距导致布局问题 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

#pomodoro-char-log::after {
  content: '';
  position: absolute;
  bottom: 100%; /* <-- 修改这里 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.65); /* <-- 修改这里 */
}

#pomodoro-char-log.visible {
  opacity: 1;
  visibility: visible; /* 新增 */
  margin-bottom: 22px; /* 核心修复3: 显示时向上移动一点，有一个“冒出来”的动画效果 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* 时间和任务显示 */
.pomodoro-timer-display {
  text-align: center;
}
#pomodoro-current-task {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}
#pomodoro-time {
  font-size: 72px;
  font-weight: 200;
  letter-spacing: 2px;
}

/* 结束按钮 */
#pomodoro-end-btn {
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid white;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 25px;
  cursor: pointer;
}

/* 历史详情弹窗内的聊天气泡 */
#pomodoro-history-viewer-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.pomodoro-log-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 80%;
  background-color: #f0f0f0;
  align-self: flex-start;
  line-height: 1.5;
}
#phone-screen.dark-mode .pomodoro-log-bubble {
  background-color: #2c2c2e;
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */

/* --- 修复新增功能导致的滚动条问题 --- */

/* 1. 强制隐藏你不要的“情侣空间播放列表” */
#ls-music-playlist-panel {
  display: none !important;
}

/* 2. 确保主屏幕容器绝对不会出现滚动条，实现固定效果 */
#phone-screen {
  overflow: hidden !important;
}

/* === 【圈子评论区终极修复 - 覆盖继承版】 === */

/* 
   问题根源：圈子评论区(#post-comment-input-area)错误地继承了
   主聊天输入区(.chat-input-area)的样式，导致布局错乱。
   以下代码将针对圈子屏幕(#post-screen)下的评论区进行强制覆盖。
*/

/* 1. 强制重置评论区容器的布局，让它水平排列、垂直居中 */
#post-screen #post-comment-input-area {
  display: flex !important;
  flex-direction: row !important; /* 强制横向排列 */
  align-items: center !important; /* 强制垂直居中，实现平行 */
  gap: 10px !important; /* 设置输入框和按钮的间距 */
}

/* 2. 确保内层容器也正确伸展 */
#post-screen #post-comment-input-area .chat-input-main-row {
  flex-grow: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 3. 强制输入框的样式，并让它填满空间 */
#post-screen #post-comment-input {
  flex-grow: 1 !important; /* 解决右侧空白的关键！ */
  min-height: 40px;
  background-color: #f0f2f5 !important;
  border-radius: 20px !important;
  border: none !important;
  padding: 10px 15px !important;
  font-size: 14px !important;
  line-height: 1.5;
  resize: none;
  box-sizing: border-box;
}

/* 4. 强制发送按钮的样式 */
#post-screen #send-post-comment-btn {
  height: 40px !important;
  padding: 0 20px !important;
  border-radius: 20px !important;
  background-color: var(--accent-color) !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: none !important;
  flex-shrink: 0; /* 防止按钮被压缩 */
}

/* 夜间模式适配 */
#phone-screen.dark-mode #post-screen #post-comment-input {
  background-color: #2c2c2e !important;
}
/* ▼▼▼ 这是新增的主屏幕滑动样式 ▼▼▼ */

/* 主屏幕滑动容器 */
.home-screen-slider {
  width: 100%;
  height: 100%; /* 确保它能撑满父容器 */
  display: flex; /* 让两页并排站好 */
  overflow-x: auto; /* 允许水平滚动 */
  overflow-y: hidden; /* 禁止垂直滚动 */
  scroll-snap-type: x mandatory; /* 这就是滑动的魔法！让它自动吸附到每一页 */
  -webkit-overflow-scrolling: touch; /* 在iOS上实现更平滑的滚动 */
  scrollbar-width: none; /* 隐藏滚动条 (Firefox) */
  -ms-overflow-style: none; /* 隐藏滚动条 (IE) */
}
.home-screen-slider::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 (Chrome, Safari) */
}

.home-page {
  width: 100%; /* 每一页都占满整个屏幕宽度 */
  height: 100%;
  flex-shrink: 0; /* 防止页面被压缩变形 */
  scroll-snap-align: start; /* 确保每次都对齐页面的开始位置 */

  /* 让页面内部的内容可以滚动 */
  overflow-y: auto;
  padding: 0 20px; /* 保持和你原来一样的左右边距 */
  box-sizing: border-box;
  position: relative; /* ★★★ 在这里添加这一行！ ★★★ */
}

/* 分页小圆点的容器 */
.pagination-dots {
  position: absolute;
  bottom: calc(100px + env(safe-area-inset-bottom)); /* 放在Dock栏上方 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px; /* 圆点之间的间距 */
}

/* 单个小圆点 */
.pagination-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4); /* 未选中时的颜色 */
  transition: background-color 0.3s ease; /* 添加一个平滑的颜色过渡动画 */
}

/* 被选中的小圆点 */
.pagination-dots .dot.active {
  background-color: rgba(255, 255, 255, 0.9); /* 选中时变得更亮 */
}

/* ▲▲▲ 新增样式结束 ▲▲▲ */
/* ▼▼▼ 把这段新样式粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* 这是第二页布局的全新样式 (V2 美化版) */

/* 1. 把头像小组件定位到左半屏的中间 */
#second-page-left-widget {
  position: absolute;
  top: 50px;
  left: 25%;
  transform: translateX(-50%);
}

/* ★★★ 这是为头像小组件新增的放大和细边框样式 ★★★ */
#second-page-left-widget .widget-circle-uploader {
  width: 65px; /* 头像宽度从 65px 放大到 80px */
  height: 65px; /* 头像高度从 65px 放大到 80px */
  border-width: 1px; /* 轮廓线从 2px 减小到 1px，变得很细 */
  padding: 1px; /* ★★★ 在这里添加这一行，把缝隙减小到1像素 ★★★ */
}
/* 2. 把右上角的图标改为并排排列 */
#second-page-top-right-apps {
  position: absolute;
  top: 50px;
  right: 30px;
  display: flex;
  gap: 30px; /* ★★★ 图标间距从 25px 增加到 30px，拉开距离 ★★★ */
}

/* 3. 文字颜色样式保持不变 */
#second-page-top-right-apps .desktop-app-icon .label {
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* ▼▼▼ 把这段新样式粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* ▼▼▼ 请用这【一整块新代码】完整替换掉你上次添加的、关于第二页头像的所有CSS ▼▼▼ */

/* 1. 容器：移除元素间距，让头像和气泡靠拢 (保持不变) */
#second-page-left-widget {
  /* ★★★ 在这里新增一个宽度，作为“主宽度” ★★★ */
  width: 150px;
  gap: 0;
}

#second-page-bubble {
  margin-top: -10px;
  padding: 10px 15px;
  border-radius: 30px;
  /* ★★★ 修改点1：移除 min-width 和 display: inline-block ★★★ */
  /* min-width: 140px; */
  /* display: inline-block; */

  /* ★★★ 修改点2：添加下面这三行，让它占满父容器宽度并居中 ★★★ */
  width: 100%;
  box-sizing: border-box; /* 确保 padding 不会撑破布局 */
  text-align: center; /* 让文字在变宽的容器里居中 */

  background-color: rgba(255, 255, 255, 0.4);
  color: #1c1c1e;
  text-shadow: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

/* ★★★ 修改点2：在这里明确移除那个不想要的尖角 ★★★ */
#second-page-bubble::after {
  content: none; /* 强制移除继承自 .widget-bubble 的尖角伪元素 */
}

/* 3. 提升头像层级 (保持不变) */
#second-page-left-widget .widget-circle-uploader {
  position: relative;
  z-index: 2;
}

/* ▲▲▲ 替换结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* 1. 新增气泡的容器，负责整体布局和宽度 */
#new-bubbles-container {
  display: flex;
  align-items: center;
  gap: 8px;
  /* ★★★ 核心修改：将固定的 180px 改为 100%，让它自动跟随父容器 ★★★ */
  width: 100%;
  margin-top: 8px;
}

/* ▼▼▼ 用这块【全新的代码】替换旧的 #flat-capsule-bubble 样式 ▼▼▼ */
/* ▼▼▼ 用这块【修改后】的代码替换旧的 #flat-capsule-bubble 样式 ▼▼▼ */
#flat-capsule-bubble {
  flex-grow: 1;
  min-width: auto;
  /* ★★★ 修改点1：高度从 44px 减小到 38px ★★★ */
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  /* ★★★ 修改点2：新增背景色，将透明度从 0.4 提升到 0.6，让它更不透明 ★★★ */
  background-color: rgba(255, 255, 255, 0.4);
}
/* ▲▲▲ 替换结束 ▲▲▲ */

#flat-capsule-bubble::after {
  content: none; /* 移除继承来的小尾巴 */
}

/* ▼▼▼ 用这块【修改后】的代码替换旧的 #circular-bubble 样式 ▼▼▼ */
#circular-bubble {
  flex-shrink: 0;
  /* ★★★ 修改点1：宽度和高度都从 44px 减小到 38px ★★★ */
  width: 35px;
  height: 35px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: auto;
  /* ★★★ 修改点2：新增背景色，与胶囊气泡保持一致，更不透明 ★★★ */
  background-color: rgba(255, 255, 255, 0.4);
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* 4. 移除圆形气泡的小尾巴 */
#circular-bubble::after {
  content: none;
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 请将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* 1. 新头像组件的定位：中间偏上 */
#second-page-center-avatar {
  position: absolute;
  top: 235px; /* 控制上下位置，数值越小越靠上 */
  transform: translateX(-50%); /* 水平居中 */
  z-index: 5; /* 确保它在其他元素之上 */
}

/* 2. 新头像的尺寸和样式：比第一个大，且没有轮廓线 */
#second-page-center-avatar .widget-circle-uploader {
  width: 85px; /* 比第一个头像(65px)大一圈 */
  height: 85px; /* 保持正圆 */
  border: none; /* 移除轮廓线 */
  padding: 0; /* 移除内边距，让图片填满 */
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* 1. 这是包裹头像和所有新气泡的总容器 (V2 加大版) */
/* 1. 这是包裹头像和所有新气泡的总容器 (V2 加大版) */
#center-avatar-wrapper {
  position: absolute;
  /* ★ 核心修改：将固定值改为可调节的变量，并提供一个默认值 190px */
  top: var(--second-page-center-avatar-top-offset, 190px);
  transform: translateX(-55%);
  z-index: 5;

  /* ★ 修改点：把这个“看不见的盒子”的尺寸变大 */
  width: 300px; /* 从 250px 增加到了 300px */
  height: 180px; /* 从 150px 增加到了 180px */
}

/* 2. 把你原来的头像在总容器里居中，这样它的位置看起来和原来一模一样 */
#second-page-center-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 我们不再需要它自己来定位了，所以把旧的定位样式移除 */
}

#avatar-subtitle {
  position: absolute;
  bottom: 20px; /* ★ 修改点：把它从容器外面移到里面，位置更协调 */
  left: 50%;
  transform: translateX(-50%);

  background-color: transparent;
  border: none;
  outline: none;

  color: white;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  padding: 2px 8px;
}

/* 这是四个角落气泡的通用样式 */
.corner-bubble {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 8px 12px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 80px;
  cursor: pointer;
}

/* ▼▼▼ 在这里分别修改四个角落的位置 ▼▼▼ */

/* 5. 分别定位四个角落的气泡 */
#bubble-top-left {
  top: 40px; /* 控制上下位置，数值越大越【往下】移 */
  left: -15px; /* 控制左右位置，数值越大越【往右】移 */
}

#bubble-top-right {
  top: 40px; /* 控制上下位置，数值越大越【往下】移 */
  right: -15px; /* 控制左右位置，数值越大越【往左】移 */
}

#bubble-bottom-left {
  bottom: 40px; /* 控制上下位置，数值越大越【往上】移 */
  left: -15px; /* 控制左右位置，数值越大越【往右】移 */
}

#bubble-bottom-right {
  bottom: 40px; /* 控制上下位置，数值越大越【往上】移 */
  right: -15px; /* 控制左右位置，数值越大越【往左】移 */
}
/* ▼▼▼ 【这是修改后的版本】请用这整块代码替换旧的 ▼▼▼ */

/* 1. 总容器：移除了顶部的内边距 */
#new-custom-widget {
  position: absolute;
  bottom: 30px;
  right: 20px;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  /* padding-top: 50px;  <-- 这行已经被删掉了 */
}

/* 2. 【全新】头部容器：负责让月份和头像水平排列 */
/* 这是头部容器：负责让月份和头像水平排列 */
#new-widget-header {
  width: 100%;
  display: flex;
  justify-content: flex-end; /* 修改：让所有内容都靠右对齐 */
  align-items: center;
  gap: 70px; /* 新增：在月份和头像之间加一点间距 */
  margin-bottom: 5px;
}

/* 3. 月份：移除了绝对定位，现在是普通的flex项目 */
#widget-month-display {
  font-size: 25px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  line-height: 1;
}

/* 4. 头像：移除了不必要的样式，因为布局由父容器控制了 */
#new-custom-widget #new-widget-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  outline: none;
}

/* 5. 可编辑文字和分割线 (保持不变) */
#new-custom-widget .new-widget-text {
  background: transparent;
  border: none;
  outline: none;
  padding: 2px 4px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  font-size: 13px;
  text-align: right;
  width: 100%;
  box-sizing: border-box;
}

#new-custom-widget .new-widget-divider {
  width: 60%;
  height: 1px;
  border-top: 1px dashed rgba(255, 255, 255, 0.3);
}
/* ▲▲▲ 替换结束 ▲▲▲ */
/* ▼▼▼ 【精致版】请用这整块代码替换旧的论坛帖子删除按钮样式 ▼▼▼ */

/* 1. 帖子列表项样式 (保持不变，只是确保右侧有足够空间) */
.forum-post-item {
  position: relative;
  padding-right: 40px;
}

/* 2. 删除按钮的新样式 - 小巧精致版 */
.forum-post-delete-btn {
  position: absolute;
  top: 50%;
  right: 12px; /* 离边缘稍微近一点 */
  transform: translateY(-50%);

  /* --- 核心修改：尺寸变小 --- */
  width: 24px;
  height: 24px;

  /* --- 核心修改：外观更精致 --- */
  background-color: transparent; /* 默认背景透明，不突兀 */
  color: var(--text-secondary); /* 默认颜色使用次要文字的灰色，更柔和 */
  border: none;
  border-radius: 50%;
  font-size: 18px; /* 减小 "×" 的大小 */
  line-height: 24px; /* 确保 "×" 垂直居中 */
  text-align: center;
  cursor: pointer;

  /* --- 核心修改：交互动效 --- */
  transition: all 0.2s ease; /* 为所有变化添加平滑过渡 */
}

/* 3. 鼠标悬停时的反馈效果 */
.forum-post-delete-btn:hover {
  background-color: #ff3b30; /* 悬停时才显示醒目的红色背景 */
  color: white; /* "×" 变为白色 */
  transform: translateY(-50%) scale(1.1); /* 轻微放大，更有动感 */
}

/* ▲▲▲ 替换结束 ▲▲▲ */
/* 1. 定义一个通用的、控制所有主屏幕文字颜色的变量 (保持不变) */
#phone-screen {
  --home-icon-widget-text-color: #ffffff;
}

/* 2. 【核心】创建一个“超级选择器”，一次性选中所有需要变色的文字 */
/* 这次我们加入了顶部状态栏和底部Dock栏的图标文字 */
.desktop-app-icon .label,                        /* ▼▼▼ 核心修改：移除了前面的ID限定，让它能同时选中主屏幕和Dock栏的图标文字 ▼▼▼ */
#desktop-widget-column .widget-bubble,           
#desktop-widget-column .widget-subtext,        
#second-page-left-widget .widget-bubble,           
#second-page-left-widget .widget-subtext,        
#avatar-subtitle,                                
.corner-bubble,                                   
#new-custom-widget .new-widget-text,              
#widget-month-display,
#status-bar                                     /* ★★★ 新增：顶部状态栏 ★★★ */ {
  color: var(--home-icon-widget-text-color) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* ▼▼▼ 【全新】去除主屏幕字体阴影的样式 ▼▼▼ */
#phone-screen.no-home-font-shadow .app-icon .label,
#phone-screen.no-home-font-shadow .desktop-app-icon .label,
#phone-screen.no-home-font-shadow .widget-bubble,
#phone-screen.no-home-font-shadow .widget-subtext,
#phone-screen.no-home-font-shadow #avatar-subtitle,
#phone-screen.no-home-font-shadow .corner-bubble,
#phone-screen.no-home-font-shadow .new-widget-text,
#phone-screen.no-home-font-shadow #widget-month-display,
#phone-screen.no-home-font-shadow #profile-username,
#phone-screen.no-home-font-shadow #profile-sub-username,
#phone-screen.no-home-font-shadow #profile-bio,
#phone-screen.no-home-font-shadow #profile-location,
#phone-screen.no-home-font-shadow #clock-container {
  text-shadow: none !important;
}
/* ▲▲▲ 新增样式结束 ▲▲▲ */

/* ▼▼▼ 【全新】这是微博主页头像框的专属样式 ▼▼▼ */
.weibo-avatar-container .weibo-avatar-frame {
  position: absolute;
  width: 121%; /* 相对大小，你可以微调 */
  height: 121%;
  /* 使用transform进行精确定位，确保完美居中 */
  transform: translate(-50%, -57%);
  top: 50%;
  left: 50%;
  z-index: 4; /* 确保在头像之上 */
  pointer-events: none; /* 让鼠标事件可以穿透它 */
}

/* ▼▼▼ 【全新】这是微博帖子作者头像框的专属样式 ▼▼▼ */

/* 这是帖子头部，头像和框的总容器 */
.weibo-post-header .avatar-with-frame {
  position: relative;
  /* 核心：尺寸和原来的头像保持一致 */
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* 容器内的头像图片 */
.weibo-post-header .avatar-with-frame .avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* 确保在框的下面 */
}

/* 容器内的头像框图片 */
.weibo-post-header .avatar-with-frame .avatar-frame {
  position: absolute;
  width: 121%; /* 相对大小，你可以微调 */
  height: 121%;
  /* 使用transform进行精确定位，确保完美居中 */
  transform: translate(-50%, -57%);
  top: 50%;
  left: 50%;
  z-index: 4; /* 确保在头像之上 */
  pointer-events: none; /* 让鼠标事件可以穿透它 */
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 【全新】这是主屏幕头像框的专属样式 ▼▼▼ */
#profile-widget .profile-avatar-container .weibo-avatar-frame {
  position: absolute;
  width: 121%; /* 相对大小，你可以微调 */
  height: 121%;
  /* 使用transform进行精确定位，确保完美居中 */
  transform: translate(-50%, -57%);
  top: 50%;
  left: 50%;
  z-index: 4; /* 确保在头像之上 */
  pointer-events: none; /* 让鼠标事件可以穿透它 */
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 把这段全新的CSS，粘贴到你 <style> 标签的最末尾 ▼▼▼ */

.weibo-background {
  /* 核心代码：使用 mask-image 创建一个从上到下的渐变蒙版 */

  /* a. -webkit- 前缀是为了兼容旧版的 Chrome 和 Safari 浏览器 */
  -webkit-mask-image: linear-gradient(
    to bottom,

    /* 渐变方向：从上到下 */ /* ★★★ 这里是你可以自己调整的地方 ★★★ */ black 60%,
    /* 前60%的部分是完全不透明的 (黑色=不透明) */ transparent 100%
      /* 从60%的位置开始，到底部(100%)，逐渐过渡到完全透明 */
  );

  /* b. 这是标准语法，兼容现代浏览器 */
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】圈子分类标签样式 ▼▼▼ */
.category-tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.category-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-color);
  background-color: #e7f3ff;
  padding: 3px 8px;
  border-radius: 10px;
}
#phone-screen.dark-mode .category-tag {
  background-color: rgba(10, 132, 255, 0.2);
  color: #0a84ff;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】圈子/小组分类筛选功能样式 ▼▼▼ */

/* 筛选图标的样式 */
.header .filter-btn {
  font-size: 20px; /* 图标大小 */
  cursor: pointer;
  color: var(--accent-color); /* 跟随主题色 */
  position: relative; /* 为了定位小红点 */
}

/* 当筛选生效时，图标上显示一个小点提示 */
.header .filter-btn.active::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: #ff3b30;
  border-radius: 50%;
  border: 1.5px solid var(--secondary-bg);
}

/* 筛选弹窗内的分类列表 */
#forum-filter-category-list {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  gap: 10px; /* 标签之间的间距 */
  padding: 10px;
}

#forum-filter-category-list label {
  display: inline-flex;
  align-items: center;
  background-color: #f0f2f5;
  padding: 6px 12px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

#phone-screen.dark-mode #forum-filter-category-list label {
  background-color: #3a3a3c;
}

#forum-filter-category-list input[type='checkbox'] {
  display: none; /* 隐藏原始的复选框 */
}

/* 选中后的样式 */
#forum-filter-category-list input[type='checkbox']:checked + span {
  color: white;
  font-weight: 500;
}

/* 默认给标签一个好看的颜色循环 */
#forum-filter-category-list label:nth-of-type(6n + 1) input:checked + span {
  background-color: #007bff;
}
#forum-filter-category-list label:nth-of-type(6n + 2) input:checked + span {
  background-color: #28a745;
}
#forum-filter-category-list label:nth-of-type(6n + 3) input:checked + span {
  background-color: #fd7e14;
}
#forum-filter-category-list label:nth-of-type(6n + 4) input:checked + span {
  background-color: #6f42c1;
}
#forum-filter-category-list label:nth-of-type(6n + 5) input:checked + span {
  background-color: #dc3545;
}
#forum-filter-category-list label:nth-of-type(6n + 6) input:checked + span {
  background-color: #ffc107;
}

/* 标签内的文字部分，也需要设置样式，特别是选中后的背景色 */
#forum-filter-category-list label span {
  padding: 6px 12px;
  margin: -6px -12px; /* 抵消label的padding，让背景色填满 */
  border-radius: 15px;
  transition: all 0.2s ease;
}
/* ▲▲▲ 样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】游戏大厅样式 ▼▼▼ */
#game-hall-grid {
  display: grid;
  grid-template-columns: 1fr; /* 每行一个游戏 */
  gap: 15px; /* 游戏卡片之间的间距 */
}

.game-card {
  background-color: var(--secondary-bg);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.game-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.game-card .game-icon {
  font-size: 32px;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f2f5;
  border-radius: 10px;
}

#phone-screen.dark-mode .game-card .game-icon {
  background-color: #2c2c2e;
}

.game-card .game-info .game-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
}

.game-card .game-info .game-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】狼人杀游戏样式 ▼▼▼ */

/* 游戏设置页的玩家选择列表 */
.player-selection-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-color);
}
.player-selection-item:last-child {
  border-bottom: none;
}
.player-selection-item input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin-right: 15px;
}
.player-selection-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.player-selection-item .name {
  font-weight: 500;
}
.player-selection-item .type-tag {
  font-size: 11px;
  color: var(--text-secondary);
  background-color: #f0f0f0;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
}

/* 游戏主界面布局 */
#werewolf-game-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}

/* 玩家座位网格 */
#werewolf-players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 10px;
  padding: 10px;
  flex-shrink: 0;
}

.player-seat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.player-seat .player-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid transparent;
  object-fit: cover;
  transition: all 0.3s ease;
}
.player-seat .player-avatar.speaking {
  border-color: #4cd964; /* 绿色边框表示正在发言 */
  box-shadow: 0 0 10px #4cd964;
}
.player-seat .player-avatar.dead {
  filter: grayscale(100%);
  opacity: 0.5;
}
.player-seat .player-name {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-seat .player-role-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ff3b30; /* 红色代表狼人 */
  color: white;
  font-size: 12px;
  font-weight: bold;
  display: none; /* 默认隐藏 */
  justify-content: center;
  align-items: center;
  border: 1px solid white;
}

/* 游戏日志区域 */
#werewolf-log-container {
  flex-grow: 1;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 10px;
  overflow-y: auto;
  margin: 10px 0;
  min-height: 0; /* flex布局下滚动的关键 */
}
.log-entry {
  padding: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 14px;
  line-height: 1.5;
}
.log-entry.system {
  color: var(--accent-color);
  font-weight: bold;
  text-align: center;
  background-color: rgba(0, 123, 255, 0.05);
  border-radius: 5px;
}
.log-entry.speech .speaker {
  font-weight: 600;
}

/* 玩家操作区 */
#werewolf-action-area {
  flex-shrink: 0;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  min-height: 50px;
}
#werewolf-action-area button {
  padding: 10px 20px;
}
#werewolf-action-area .vote-target-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
#werewolf-action-area .vote-target-btn {
  padding: 8px 12px;
  font-size: 13px;
  background-color: #e9ecef;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
#werewolf-action-area .vote-target-btn.selected {
  background-color: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}
/* ▲▲▲ 狼人杀样式结束 ▲▲▲ */
/* ▼▼▼ 【全新】狼人杀发言日志美化样式 ▼▼▼ */

/* 包含头像和文字的总容器 */
.log-entry.speech {
  display: flex;
  align-items: flex-start; /* 顶部对齐 */
  gap: 10px; /* 头像和文字的间距 */
  padding: 8px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 每条发言之间的分割线 */
}

/* 发言者的圆形小头像 */
.speech-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%; /* 完美圆形 */
  flex-shrink: 0; /* 防止头像被压缩 */
  object-fit: cover;
}

/* 包裹名字和发言内容的新容器 */
.speech-content {
  display: flex;
  flex-direction: column; /* 名字和内容垂直排列 */
  gap: 2px;
}

/* 发言者名字的样式 */
.speech-content .speaker {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary); /* 使用次要文字颜色，不那么刺眼 */
}

/* 发言内容的样式 */
.speech-content .speech-text {
  word-break: break-word; /* 确保长篇发言能正确换行 */
  line-height: 1.6;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */

/* ▼▼▼ 【这是为你新增的X社交App图标样式】粘贴到 <style> 的末尾 ▼▼▼ */
#second-page-x-social-app {
  position: absolute;
  /* 控制上下位置。我把值调大了，让它更靠下，和“圈子”图标对齐 */
  top: 100px; /* ★ 修改这里 ★ */

  /* 控制左右位置。我把值调小了，让它更靠右，和“情侣空间”图标对齐 */
  right: 0px; /* ★ 修改这里 ★ */
}

/* 把新图标的文字也变成白色，和其他图标统一 */
#second-page-x-social-app .label {
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* ▲▲▲ 新增样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】海龟汤游戏样式 ▼▼▼ */

.sts-log-entry {
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  line-height: 1.6;
}

/* 系统消息 (谜面、提示等) */
.sts-log-entry.system {
  background-color: #e9ecef;
  color: var(--text-secondary);
  text-align: center;
  font-weight: 500;
}
#phone-screen.dark-mode .sts-log-entry.system {
  background-color: #2c2c2e;
}

/* 玩家提问 */
.sts-log-entry.question {
  background-color: #fff;
  border: 1px solid var(--border-color);
}
#phone-screen.dark-mode .sts-log-entry.question {
  background-color: #1c1c1e;
}
.sts-log-entry .speaker {
  font-weight: 600;
  color: var(--accent-color);
}

/* ▼▼▼ 【全新】海龟汤 - 出题人回答气泡美化 ▼▼▼ */
.sts-log-entry.answer {
  text-align: right;
}
.sts-log-entry.answer .answer-text {
  display: inline-block;
  padding: 8px 12px; /* 增加内边距，让气泡更饱满 */
  border-radius: 18px; /* 增加圆角 */
  font-weight: 500; /* 字体不用太粗 */
  background-color: #f0f2f5; /* 统一的、中性的浅灰色背景 */
  color: var(--text-primary); /* 文字颜色使用主题的主色，适配夜间模式 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* 稍微调整阴影 */
}

/* 移除旧的、按颜色区分的样式，确保所有回答都用上面的新样式 */
.sts-log-entry.answer .answer-text.yes,
.sts-log-entry.answer .answer-text.no,
.sts-log-entry.answer .answer-text.irrelevant {
  background-color: #f0f2f5; /* 确保所有都用这个颜色 */
}

/* 夜间模式适配 */
#phone-screen.dark-mode .sts-log-entry.answer .answer-text,
#phone-screen.dark-mode .sts-log-entry.answer .answer-text.yes,
#phone-screen.dark-mode .sts-log-entry.answer .answer-text.no,
#phone-screen.dark-mode .sts-log-entry.answer .answer-text.irrelevant {
  background-color: #3a3a3c; /* 夜间模式下的深灰色 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* AI猜测 */
.sts-log-entry.guess {
  font-style: italic;
  color: #fd7e14;
  border-left: 3px solid #fd7e14;
  padding-left: 12px;
}

/* 玩家座位上的身份指示器 */
.player-seat .player-role-indicator.riddle-master {
  background-color: #ffc107; /* 黄色代表出题人 */
  display: flex;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】海龟汤聊天日志美化样式 ▼▼▼ */
.sts-log-entry.question,
.sts-log-entry.answer,
.sts-log-entry.guess {
  display: flex;
  align-items: flex-start; /* 头像和气泡顶部对齐 */
  gap: 10px;
  max-width: 85%;
  margin-bottom: 12px;
}

/* 提问和猜测靠左 */
.sts-log-entry.question,
.sts-log-entry.guess {
  align-self: flex-start;
}

/* 回答靠右 */
.sts-log-entry.answer {
  align-self: flex-end;
  flex-direction: row-reverse; /* 关键：让头像在右边 */
}

/* 头像样式 */
.sts-log-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ▼▼▼ 【全新】海龟汤聊天日志美化样式 (气泡透明版) ▼▼▼ */
.sts-log-entry.question .sts-log-content,
.sts-log-entry.guess .sts-log-content {
  background-color: transparent; /* <-- 修改点1：背景改为透明 */
  border-radius: 8px;
  padding: 8px 12px;
  border: none; /* <-- 修改点2：移除边框，让它彻底“消失” */
}

#phone-screen.dark-mode .sts-log-entry.question .sts-log-content,
#phone-screen.dark-mode .sts-log-entry.guess .sts-log-content {
  background-color: #1c1c1e;
}

/* 修正回答气泡的样式，因为它不是一个完整的块 */
.sts-log-entry.answer .answer-text {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
.player-seat .player-avatar.active-turn {
  border-color: #007bff; /* 使用主题色作为边框颜色 */
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.7); /* 添加发光效果 */
  animation: sts-pulse-glow 1.5s infinite ease-in-out; /* 应用动画 */
}

@keyframes sts-pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.7);
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 123, 255, 1);
  }
}
/* ▼▼▼ 【海龟汤布局修复】请将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */
#sts-game-log {
  display: flex;
  flex-direction: column;
}
/* ▲▲▲ 修复结束 ▲▲▲ */
/* ▼▼▼ 【全新】海龟汤聊天日志美化样式 ▼▼▼ */
.sts-log-entry.question,
.sts-log-entry.answer,
.sts-log-entry.guess {
  display: flex;
  align-items: flex-start; /* 头像和气泡顶部对齐 */
  gap: 10px;
  max-width: 85%;
  margin-bottom: 12px;
  /* 移除旧的背景和边框，因为现在由子元素处理 */
  background-color: transparent;
  border: none;
}

/* 提问和猜测（猜题方）靠左 */
.sts-log-entry.question,
.sts-log-entry.guess {
  align-self: flex-start;
}

/* 回答（出题人）靠右 */
.sts-log-entry.answer {
  align-self: flex-end;
  flex-direction: row-reverse; /* 关键：让头像在右边 */
}

/* 头像样式 */
.sts-log-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* 包含发言人和内容的气泡 */
.sts-log-entry.question .sts-log-content,
.sts-log-entry.guess .sts-log-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
}

#phone-screen.dark-mode .sts-log-entry.question .sts-log-content,
#phone-screen.dark-mode .sts-log-entry.guess .sts-log-content {
  background-color: #1c1c1e;
}

/* 修正回答气泡的样式，因为它不是一个完整的块 */
.sts-log-entry.answer .answer-text {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 让日志容器支持flex布局的对齐 */
#sts-game-log {
  display: flex;
  flex-direction: column;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【海龟汤输入区终极修复版】 ▼▼▼ */

/* 1. 强制重置整个输入区域的布局为“横向排列”并“垂直居中” */
#sts-action-area {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important; /* 核心修正：从 flex-end 改为 center，实现垂直居中 */
  gap: 8px !important;
}

/* 2. 强制内部的 main-row 也垂直居中，并让它填满空间 */
#sts-action-area .chat-input-main-row {
  flex-grow: 1 !important;
  display: flex !important;
  align-items: center !important; /* 核心修正：内部也保持垂直居中 */
  gap: 8px !important;
}

/* 3. 美化输入框本身，并让它自动撑满宽度 */
#sts-action-area #sts-question-input {
  flex-grow: 1;
  border: none;
  padding: 10px 15px;
  border-radius: 20px;
  background-color: var(--secondary-bg);
  font-size: 16px;
  resize: none;
  max-height: 100px;
  line-height: 1.5;
}

/* 4. 统一所有按钮的高度和样式，让它们和输入框完美适配 */
#sts-action-area #guess-sts-answer-btn,
#sts-action-area #send-sts-question-btn {
  height: 40px;
  border-radius: 20px;
  padding: 0 15px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
}

/* 5. 夜间模式适配 */
#phone-screen.dark-mode #sts-action-area #sts-question-input {
  background-color: #2c2c2e;
  color: var(--text-primary);
}
/* ▲▲▲ 修复结束 ▲▲▲ */
/* ▼▼▼ 【全新】剧本杀游戏样式 ▼▼▼ */

/* 游戏主界面布局 */
#script-kill-game-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}

/* 玩家座位区 (复用狼人杀的样式) */
#script-kill-players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 10px;
  padding: 10px;
  flex-shrink: 0;
}

/* 游戏日志区 (复用狼人杀的样式) */
#script-kill-log-container {
  flex-grow: 1;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 10px;
  overflow-y: auto;
  margin: 10px 0;
  min-height: 0; /* flex布局下滚动的关键 */
}

/* 玩家操作区 (复用狼人杀的样式) */
#script-kill-action-area {
  flex-shrink: 0;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  min-height: 50px;
}
#script-kill-action-area button {
  padding: 10px 20px;
}

/* 投票选项样式 */
#sk-vote-options-list label {
  display: block;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
}
#sk-vote-options-list label:hover {
  background-color: #f0f2f5;
}
#phone-screen.dark-mode #sk-vote-options-list label:hover {
  background-color: #2c2c2e;
}

/* 线索卡片样式 */
.sk-evidence-card {
  background-color: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.sk-evidence-card .source {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.sk-evidence-card .description {
  font-size: 14px;
  line-height: 1.6;
}

/* ▲▲▲ 剧本杀样式结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* 【全新】剧本杀可视化编辑器样式 */

/* 角色/线索卡片的容器 */
.sk-item-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #f0f2f5;
  padding: 10px;
  border-radius: 8px;
  min-height: 50px;
  border: 1px solid var(--border-color);
}
#phone-screen.dark-mode .sk-item-container {
  background-color: #2c2c2e;
}

/* 单个角色/线索的卡片 */
.sk-editor-item {
  background-color: var(--secondary-bg);
  padding: 10px 15px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sk-editor-item .item-info .item-name {
  font-weight: 600;
}
.sk-editor-item .item-info .item-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 卡片上的编辑/删除按钮 */
.sk-editor-item .item-actions {
  display: flex;
  gap: 8px;
}
.sk-editor-item .item-actions button {
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 5px;
  cursor: pointer;
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】“你说我猜”游戏样式 ▼▼▼ */

/* 游戏日志区域 */
#guess-what-game-log {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 单条日志条目 */
.guess-log-entry {
  padding: 8px 12px;
  border-radius: 12px;
  line-height: 1.6;
  max-width: 90%;
  word-break: break-word;
}

/* 系统提示，例如游戏开始、谁的回合 */
.guess-log-entry.system {
  background-color: #e9ecef;
  color: var(--text-secondary);
  text-align: center;
  font-weight: 500;
  font-size: 13px;
  align-self: center;
}
#phone-screen.dark-mode .guess-log-entry.system {
  background-color: #2c2c2e;
}

/* 玩家发言的气泡（通用） */
.guess-log-entry.user-turn,
.guess-log-entry.ai-turn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* 玩家发言内容 */
.guess-log-entry .bubble {
  background-color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
#phone-screen.dark-mode .guess-log-entry .bubble {
  background-color: #2c2c2e;
}

/* AI发言气泡（靠左） */
.guess-log-entry.ai-turn {
  align-self: flex-start;
}

/* 用户发言气泡（靠右） */
.guess-log-entry.user-turn {
  align-self: flex-end;
  flex-direction: row-reverse; /* 头像在右边 */
}
.guess-log-entry.user-turn .bubble {
  background-color: #dcf8c6; /* 类似微信的绿色 */
}
#phone-screen.dark-mode .guess-log-entry.user-turn .bubble {
  background-color: #3b5b32; /* 夜间模式下的绿色 */
}

/* 气泡内的头像 */
.guess-log-entry .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 气泡内的名字和内容 */
.guess-log-entry .name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* 游戏输入区美化 */
#guess-what-action-area {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important; /* 保持垂直居中 */
  gap: 8px !important;
  width: 100%; /* 新增：让整个容器撑满宽度 */
  box-sizing: border-box; /* 新增：确保内边距和边框被正确计算在内 */
}

#guess-what-action-area #guess-what-user-input {
  flex-grow: 1;
  border: none;
  padding: 10px 15px;
  border-radius: 20px;
  background-color: var(--secondary-bg);
  font-size: 16px;
  resize: none;
  max-height: 100px;
  line-height: 1.5;
}
#guess-what-action-area #send-guess-what-input-btn {
  height: 40px;
  border-radius: 20px;
  padding: 0 15px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
}
#phone-screen.dark-mode #guess-what-action-area #guess-what-user-input {
  background-color: #2c2c2e;
  color: var(--text-primary);
}

/* ▲▲▲ “你说我猜”游戏样式结束 ▲▲▲ */
/* ▼▼▼ 【剧本杀AI生成器布局修复】请将这整块全新的CSS粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* 1. 【核心】让整个弹窗的内容区(modal-body)能够正确地撑满剩余空间并滚动 */
#sk-ai-generator-modal .modal-body {
  flex-grow: 1; /* 允许内容区占据 header 和 footer 之间的所有可用垂直空间 */
  min-height: 0; /* 解决flex布局中一个常见的滚动条失效问题，非常关键 */
  /* overflow-y: auto;  <-- 这个属性你的 .modal-body 已经有了，所以不用重复写 */
}

/* 2. 【核心】指定包含“预览框”的那个 form-group 也需要能够弹性增长 */
/* 我们用 :last-of-type 精准定位到最后一个 .form-group */
#sk-ai-generator-modal .modal-body .form-group:last-of-type {
  flex-grow: 1; /* 让它吃掉所有剩余的垂直空间 */
  min-height: 0; /* 同样是为了兼容性 */
  display: flex; /* 把它自己也变成flex容器 */
  flex-direction: column; /* 让它里面的 label 和 preview 垂直排列 */
}

/* 3. 【核心】最后，确保预览框本身能够撑满它的父容器，并且在内容过多时自己滚动 */
#sk-ai-result-preview {
  flex-grow: 1; /* 撑满父容器(.form-group)的空间 */
  overflow-y: auto; /* 当代码超出时，显示它自己的滚动条，而不是让整个弹窗滚动 */

  /* (可选美化) 给一个最小高度，防止在没内容时完全塌陷 */
  min-height: 100px;
}

/* ▲▲▲ 粘贴结束 ▲▲▲ */

/* ▼▼▼ 【游戏输入区终极修复版】 ▼▼▼ */

/* 1. 强制重置两个游戏输入区域的容器布局 */
#sts-action-area,
#guess-what-action-area {
  display: flex !important;
  flex-direction: row !important; /* 关键：从纵向改为横向 */
  align-items: center !important; /* 关键：让所有子元素垂直居中 */
  gap: 8px !important; /* 设置元素之间的间距 */
  width: 100%; /* 新增：让整个容器宽度撑满 */
  box-sizing: border-box; /* 新增：确保内边距和边框被正确计算 */
}

/* 2. 强制内部的 .chat-input-main-row 也能正确伸展和对齐 */
#sts-action-area .chat-input-main-row,
#guess-what-action-area .chat-input-main-row {
  flex-grow: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 3. 美化输入框本身，并让它自动撑满宽度 */
#sts-action-area #sts-question-input,
#guess-what-action-area #guess-what-user-input {
  flex-grow: 1; /* 核心：让输入框自动伸展，占满所有可用宽度 */
  min-height: 40px; /* 保证最小高度 */
  border: none;
  padding: 10px 15px;
  border-radius: 20px;
  background-color: var(--secondary-bg);
  font-size: 16px;
  resize: none;
  max-height: 100px;
  line-height: 1.5;
  box-sizing: border-box;
}

/* 4. 统一所有按钮的高度和样式，让它们和输入框完美适配 */
#sts-action-area button,
#guess-what-action-area button {
  height: 40px;
  border-radius: 20px;
  padding: 0 15px;
  flex-shrink: 0; /* 防止按钮被压缩 */
  font-size: 14px;
  font-weight: 600;
}

/* 5. 夜间模式适配 */
#phone-screen.dark-mode #sts-action-area #sts-question-input,
#phone-screen.dark-mode #guess-what-action-area #guess-what-user-input {
  background-color: #2c2c2e;
  color: var(--text-primary);
}
/* ▲▲▲ 修复结束 ▲▲▲ */
/* === 【独家定制】隐藏游戏大厅返回按钮的 "退出" 文字 === */
#exit-werewolf-game-btn,
#exit-sts-game-btn,
#exit-script-kill-game-btn,
#exit-guess-what-game-btn,
#exit-ludo-game-btn,
#exit-undercover-game-btn {
  /* <--- 修改在这里 */
  font-size: 0 !important;
  color: transparent !important;
}

#exit-werewolf-game-btn::before,
#exit-sts-game-btn::before,
#exit-script-kill-game-btn::before,
#exit-guess-what-game-btn::before,
#exit-ludo-game-btn::before,
#exit-undercover-game-btn::before {
  /* <--- 还有这里 */
  content: '‹';
  font-size: 24px !important;
  color: var(--accent-color) !important;
}

/* ▼▼▼ 【V3最终版】游戏发言输入区通用美化样式 (已居中) ▼▼▼ */

/* 1. 让所有游戏的发言区域容器都水平居中 */
#werewolf-action-area.speaking-mode,
#script-kill-action-area.speaking-mode,
#undercover-action-area.speaking-mode {
  /* ★ 新增了 #undercover-action-area */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px !important; /* 增加上下内边距，让区域不贴底 */
  box-sizing: border-box;
  justify-content: center; /* ★★★ 这就是实现居中的核心代码！ ★★★ */
}

/* 2. 美化所有游戏的发言输入框 */
#werewolf-action-area.speaking-mode #user-speech-input,
#script-kill-action-area.speaking-mode #user-sk-speech-input,
#undercover-action-area.speaking-mode #undercover-user-speech-input {
  /* ★★★ 核心修改：我们移除了 flex-grow: 1; 属性！★★★ */
  /* 这样输入框就不会无限伸展，而是保持一个自然的宽度 */

  border: 1px solid #ccc; /* 增加一个淡淡的边框，让它更清晰 */
  padding: 10px 15px;
  border-radius: 20px;
  background-color: var(--secondary-bg);
  font-size: 16px;
  resize: none;
  max-height: 100px;
  line-height: 1.5;
  width: auto; /* 确保宽度是自适应的 */
  height: auto;
  min-width: 200px; /* 给一个最小宽度，防止内容少时太窄 */
}

/* 3. 美化所有游戏的“发言/结束发言”按钮 */
#werewolf-action-area.speaking-mode #end-speech-btn,
#script-kill-action-area.speaking-mode #sk-end-speech-btn,
#undercover-action-area.speaking-mode #undercover-end-speech-btn {
  height: 40px;
  border-radius: 20px;
  padding: 0 20px; /* 增加左右内边距，让按钮更饱满 */
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  margin: 0 !important;
  width: auto !important;
  background-color: var(--accent-color);
  color: white;
  border: none;
}

/* 4. 夜间模式适配 */
#phone-screen.dark-mode #werewolf-action-area.speaking-mode #user-speech-input,
#phone-screen.dark-mode #script-kill-action-area.speaking-mode #user-sk-speech-input,
#phone-screen.dark-mode #undercover-action-area.speaking-mode #undercover-user-speech-input {
  background-color: #2c2c2e;
  color: var(--text-primary);
  border-color: #444; /* 夜间模式下的边框颜色 */
}

/* ▲▲▲ 最终版样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】宠物功能样式 ▼▼▼ */

#chat-pet {
  transition: transform 0.2s ease-out; /* 为拖动添加一点平滑过渡 */
}

#chat-pet:active {
  cursor: grabbing;
  transform: scale(1.1); /* 拖动时稍微放大，给用户反馈 */
  filter: brightness(0.9);
}

#chat-pet img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 自定义图片等比缩放 */
  -webkit-user-drag: none; /* 防止图片被意外拖动 */
  user-drag: none;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】宠物数值面板样式 ▼▼▼ */

#pet-stats-area {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 每个数值条之间的间距 */
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

#phone-screen.dark-mode #pet-stats-area {
  background-color: #2c2c2e;
}

.stat-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-bar-container .stat-label {
  width: 60px; /* 固定标签宽度，让进度条对齐 */
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
}

.stat-bar {
  flex-grow: 1;
  height: 18px;
  background-color: #e9ecef;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
}

#phone-screen.dark-mode .stat-bar {
  background-color: #3e3e42;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 9px;
  transition: width 0.5s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 10px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* 为不同的数值条设置不同的颜色 */
#pet-hunger-bar .stat-bar-fill {
  background: linear-gradient(135deg, #fd7e14, #ffc107);
}
#pet-happiness-bar .stat-bar-fill {
  background: linear-gradient(135deg, #28a745, #20c997);
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】宠物亲密度进度条颜色 ▼▼▼ */
#pet-intimacy-user-bar .stat-bar-fill {
  background: linear-gradient(135deg, #ff8fab, #ffc3a0); /* 对你：温暖的粉橙色 */
}
#pet-intimacy-char-bar .stat-bar-fill {
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb); /* 对Ta：柔和的天蓝色 */
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】宠物聊天界面样式 ▼▼▼ */
#pet-chat-messages .message-wrapper {
  max-width: 85%;
}

#pet-chat-messages .message-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#pet-chat-messages .message-bubble .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

#pet-chat-messages .message-bubble .content {
  padding: 8px 12px;
  border-radius: 10px;
  line-height: 1.5;
}

#pet-chat-messages .message-wrapper.user {
  align-self: flex-end;
}
#pet-chat-messages .message-wrapper.user .message-bubble {
  flex-direction: row-reverse;
}
#pet-chat-messages .message-wrapper.user .content {
  background-color: #dcf8c6;
}

#pet-chat-messages .message-wrapper.pet {
  align-self: flex-start;
}
#pet-chat-messages .message-wrapper.pet .content {
  background-color: #fff;
}

#phone-screen.dark-mode #pet-chat-messages {
  background-color: #000;
}
#phone-screen.dark-mode #pet-chat-messages .message-wrapper.user .content {
  background-color: #26491d;
}
#phone-screen.dark-mode #pet-chat-messages .message-wrapper.pet .content {
  background-color: #2c2c2e;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【布局终极修复】用这整块代码替换你上一次添加的宠物聊天输入框样式 ▼▼▼ */

/* 1. 让弹窗内容区适配新布局 (保持不变) */
#pet-chat-modal .modal-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 2. 消息区域 (保持不变) */
#pet-chat-modal #pet-chat-messages {
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 15px;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 3. 气泡样式 (保持不变) */
#pet-chat-modal .message-bubble .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}
#pet-chat-modal .message-wrapper.user .content {
  background-color: #007aff;
  color: white;
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  max-width: 100%;
}
#pet-chat-modal .message-wrapper.pet .content {
  background-color: #ffffff;
  color: #1c1c1e;
  padding: 10px 14px;
  border-radius: 18px 18px 18px 4px;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* --- ▼▼▼ 核心修复区域 ▼▼▼ --- */

/* 4. 重置输入区域的背景和边框 (保持不变) */
#pet-chat-modal #pet-chat-input-area {
  border-top: 1px solid #e0e0e0;
  background-color: #f7f7f7;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* 5. 【核心修复】让输入框和发送按钮的容器变成 Flex 布局 */
#pet-chat-modal #pet-chat-input-area .chat-input-main-row {
  display: flex; /* 关键：让内部元素横向排列 */
  align-items: center; /* 关键：让输入框和按钮垂直居中对齐，实现“平行” */
  gap: 8px; /* 输入框和按钮之间的间距 */
}

/* 6. 美化输入框，并【让它撑满宽度】 */
#pet-chat-modal #pet-chat-input {
  flex-grow: 1; /* 关键：让输入框占据所有剩余的宽度 */
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 18px;
  padding: 8px 15px;
  line-height: 1.5;
  min-height: 38px;
  max-height: 100px;
  resize: none; /* 禁止用户手动拖拽大小 */
  box-sizing: border-box; /* 确保padding不会撑破布局 */
}

/* 7. 美化发送按钮，并固定其大小 */
#pet-chat-modal #send-to-pet-btn {
  flex-shrink: 0; /* 防止按钮被压缩 */
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 18px;
  height: 38px;
  padding: 0 20px;
  font-weight: 600;
  cursor: pointer; /* 鼠标放上去时显示小手 */
}

/* 8. 夜间模式适配 (保持不变) */
#phone-screen.dark-mode #pet-chat-modal #pet-chat-messages {
  background-color: #000;
}
#phone-screen.dark-mode #pet-chat-modal .message-wrapper.pet .content {
  background-color: #2c2c2e;
}
#phone-screen.dark-mode #pet-chat-modal #pet-chat-input-area {
  background-color: #1c1c1e;
  border-top-color: #38383a;
}
#phone-screen.dark-mode #pet-chat-modal #pet-chat-input {
  background-color: #2c2c2e;
  border-color: #38383a;
  color: white;
}

/* ▲▲▲ 修复结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* --- 【全新】情侣空间-情绪日记样式 --- */

/* 日记视图主容器 */
#ls-diary-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 日历容器 */
.ls-calendar-wrapper {
  background-color: var(--secondary-bg);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ls-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.ls-calendar-header button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--accent-color);
}

.ls-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.ls-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.ls-calendar-day {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
  padding-top: 4px;
}
.ls-calendar-day:hover {
  background-color: #f0f2f5;
}
.ls-calendar-day.empty {
  cursor: default;
  pointer-events: none;
}
.ls-calendar-day.today .day-number {
  background-color: var(--accent-color);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
}

.ls-calendar-day .day-number {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}

.ls-calendar-day .mood-emojis {
  display: flex;
  gap: 4px;
  font-size: 16px;
  position: absolute;
  bottom: 5px;
}

/* 心情罐子 */
.ls-mood-jar-wrapper {
  background-color: var(--secondary-bg);
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.ls-mood-jar-wrapper h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
}

/* ▼▼▼ 用这块【修复后】的代码替换旧的 .ls-mood-jar 样式 ▼▼▼ */
.ls-mood-jar {
  width: 100%;
  max-width: 100%; /* ★ 核心修改1: 使用max-width防止溢出 */
  box-sizing: border-box; /* ★ 核心修改2: 确保padding不会导致宽度计算错误 */
  min-height: 80px;
  background-color: #f0f2f5;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  justify-content: center;
  overflow: auto; /* ★ 核心修改3 (保险): 如果内容实在太多，就用滚动条兜底 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

.ls-mood-jar .mood-emoji-item {
  font-size: 22px;
}

/* 日记编辑弹窗 */
#ls-emoji-selector .emoji-option {
  padding: 5px;
  border-radius: 8px;
  transition: background-color 0.2s;
}
#ls-emoji-selector .emoji-option.selected {
  background-color: #e0e0e0;
  transform: scale(1.2);
}

/* 日记查看弹窗 */
.ls-diary-entry-block {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  border-left: 4px solid var(--accent-color);
}
.ls-diary-entry-block .entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ls-diary-entry-block .entry-header .mood-emoji {
  font-size: 32px;
}
.ls-diary-entry-block .entry-header .author {
  font-weight: 600;
  font-size: 16px;
}
.ls-diary-entry-block .entry-content {
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* --- 【全新】情侣空间-日记通知卡片样式 --- */

/* 1. 让包裹卡片的气泡本身变透明 */
.message-bubble.is-ls-diary-notification .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 2. 卡片主体样式 */
.ls-diary-notification-card {
  width: 220px; /* 卡片宽度 */
  background: linear-gradient(135deg, #fff5f8, #ffebee); /* 温柔的粉色渐变背景 */
  border-radius: 12px;
  padding: 15px;
  cursor: pointer;
  border: 1px solid #ffdde1; /* 淡淡的粉色边框 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden; /* 隐藏溢出的装饰元素 */
  transition: transform 0.2s, box-shadow 0.2s; /* 添加点击动效 */
}
.ls-diary-notification-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 3. 卡片右上角的装饰性图标 */
.ls-diary-notification-card::before {
  content: '💌';
  position: absolute;
  top: -5px;
  right: 10px;
  font-size: 30px;
  opacity: 0.1;
  transform: rotate(15deg);
}

/* 4. 卡片头部（图标和标题） */
.ls-diary-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #c85c7c; /* 稍深的粉色，保证清晰度 */
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(200, 92, 124, 0.2);
}

/* 5. 卡片正文 */
.ls-diary-card-body p {
  font-size: 14px;
  color: #5c474b; /* 深棕色，易于阅读 */
  margin: 0 0 12px 0;
  line-height: 1.6;
}

/* 6. 卡片底部提示文字 */
.ls-diary-card-footer {
  font-size: 12px;
  color: #c85c7c;
  text-align: right;
  font-weight: 500;
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */

/* ▼▼▼ 【独家定制】宠物互动按钮 2x2 网格布局 (最终加强版) ▼▼▼ */

/* 1. 使用 !important 强制开启网格布局，对抗样式冲突 */
#pet-interaction-area {
  display: grid !important; /* 关键：强制使用 grid 布局 */
  grid-template-columns: 1fr 1fr; /* 两列网格 */
  gap: 10px; /* 按钮间距 */
  max-width: 220px; /* 适当放宽最大宽度，给按钮更多空间 */
  margin: 15px auto !important; /* 强制居中 */
}

/* 2. 调整按钮尺寸，并强制文字不换行 */
#pet-interaction-area button {
  /* 尺寸和文字 */
  padding: 8px 12px;
  font-size: 14px;
  white-space: nowrap; /* 关键：强制文字在同一行显示，防止换行 */

  /* 形状和美化 */
  border-radius: 18px;
  width: 100%;
  font-weight: 600;
  background-color: #f0f2f5;
  color: var(--accent-color);
  border: 1.5px solid var(--accent-color);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 3. 交互效果保持不变 */
#pet-interaction-area button:hover {
  background-color: var(--accent-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#pet-interaction-area button:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ▲▲▲ 美化样式结束 ▲▲▲ */

/* --- 【最终版】情侣空间右上角按钮美化与独立微调 --- */

/* 1. 收紧按钮容器的整体间距 */
#ls-header .header-actions {
  gap: 0px; /* ★ 修改这里：将按钮间的间距减小到0，让它们紧挨着 */
}

/* 2. 保持按钮的基础样式（这部分不变） */
#ls-header .action-btn {
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}
#ls-header .action-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 3. 【核心】为每个按钮添加独立的微调功能 */

/* “设置”按钮的独立位置 */
#ls-settings-btn {
  position: relative; /* 启用相对定位，这是微调的关键 */
  top: 0px; /* 【调上下】: 正数往下移，负数往上移 */
  left: 40px; /* 【调左右】: 正数往右移，负数往左移 */
}

/* “更换背景”按钮的独立位置 */
#ls-change-bg-btn {
  position: relative;
  top: 0px;
  left: 30px;
}

/* “切换”按钮的独立位置 */
#ls-switch-char-btn {
  position: relative;
  top: -5px;
  left: 15px;
}

/* ▼▼▼ 【独家定制】情侣空间心动音波图标 ▼▼▼ */

/* 1. 移除旧的爱心字符和发光效果 */
.ls-header-avatars .heart-icon {
  font-size: 0; /* 让'❤'字符消失 */
  text-shadow: none; /* 移除文字阴影 */

  /* 2. 为新图标设置一个容器大小，您可以根据喜好微调 */
  width: 80px;
  height: 28px;

  /* 3. 【核心】将你图片中的音波心动图设置为背景 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24' viewBox='0 0 80 24'%3E%3Cg fill='%23ff8fab'%3E%3Crect x='0' y='10' width='3' height='4' rx='1.5'/%3E%3Crect x='5' y='8' width='3' height='8' rx='1.5'/%3E%3Crect x='10' y='11' width='3' height='2' rx='1.5'/%3E%3Crect x='15' y='6' width='3' height='12' rx='1.5'/%3E%3Crect x='20' y='9' width='3' height='6' rx='1.5'/%3E%3Cpath transform='translate(25 0) scale(1.1)' d='M22 8.879c0-5.323-5.326-5.323-7.5-1.121C12.277 2.235 7 3.556 7 8.879 7 14.155 14.5 20 14.5 20S22 14.155 22 8.879z'/%3E%3Crect x='55' y='9' width='3' height='6' rx='1.5'/%3E%3Crect x='60' y='6' width='3' height='12' rx='1.5'/%3E%Crect x='65' y='11' width='3' height='2' rx='1.5'/%3E%3Crect x='70' y='8' width='3' height='8' rx='1.5'/%3E%3Crect x='75' y='10' width='3' height='4' rx='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain; /* 确保图标完整显示 */
  background-repeat: no-repeat;
  background-position: center;

  /* 4. （可选）微调垂直位置，让它和头像更对齐 */
  position: relative;
  top: -2px;
}

/* ▲▲▲ 定制样式结束 ▲▲▲ */

/* ▼▼▼ 这是为你新增的日历居中修复代码 ▼▼▼ */

/* 1. 强制让每一天的格子内容都不要溢出，避免互相影响 */
.ls-calendar-day {
  overflow: hidden;
  text-align: center; /* 再次强调文本居中，更稳定 */
}

/* 2. 【核心修复】将蓝圈本身也变成一个flex居中容器 */
/* 这能确保里面的数字，无论如何都会在圈圈的正中间 */
.ls-calendar-day.today .day-number {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ▲▲▲ 修复结束 ▲▲▲ */

/* ▼▼▼ 【独家定制】情侣空间返回按钮美化 ▼▼▼ */
#ls-header .back-btn {
  /* 1. 核心修改：将箭头颜色设为您想要的白色 */
  color: white;

  /* 2. 统一样式：让它和圈子返回按钮一样，拥有40x40px的圆形点击区域 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

/* 3. 为它添加与其他按钮统一的、漂亮的悬停效果 */
#ls-header .back-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
/* ▲▲▲ 新增样式结束 ▲▲▲ */
/* ▼▼▼ 【全新】记忆互通选择框美化样式 ▼▼▼ */

/* 1. 让每个选项的标签(label)成为一个flex容器 */
.memory-link-option {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 元素之间的间距 */
  padding: 8px 12px !important; /* 增加内边距，!important确保生效 */
  cursor: pointer;
}

/* 2. 单独为复选框设置样式，防止被全局样式影响 */
.memory-link-option input[type='checkbox'] {
  width: 18px !important; /* 固定宽度 */
  height: 18px !important; /* 固定高度 */
  margin: 0 !important; /* 移除外边距 */
  flex-shrink: 0; /* 防止被压缩 */
}

/* 3. 设置头像的样式 */
.memory-link-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%; /* 圆形头像 */
  object-fit: cover; /* 保证图片不变形 */
  flex-shrink: 0; /* 防止被压缩 */
}

/* 4. 设置名字的样式 */
.memory-link-name {
  /* 默认样式即可，它会自动填充剩余空间 */
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】记忆互通选择框美化样式 ▼▼▼ */
#memory-link-checkboxes-container label {
  display: flex; /* 1. 使用Flex布局，让头像和文字横向排列 */
  align-items: center; /* 2. 垂直居中对齐 */
  gap: 10px; /* 3. 在头像、复选框和文字之间创建间距 */
  padding: 10px 12px; /* 4. 增加内边距，让每一行更高、更易于点击 */
  cursor: pointer; /* 5. 鼠标放上去时显示小手图标 */
  transition: background-color 0.2s; /* 6. 添加悬停效果 */
}

#memory-link-checkboxes-container label:hover {
  background-color: #f0f2f5; /* 7. 鼠标悬停时给一个淡淡的背景色 */
}

#memory-link-checkboxes-container .avatar-preview {
  width: 30px; /* 8. 设置头像的尺寸 */
  height: 30px;
  border-radius: 50%; /* 9. 圆形头像 */
  object-fit: cover; /* 10. 确保图片不变形 */
  flex-shrink: 0; /* 11. 防止头像在空间不足时被压缩 */
}

#memory-link-checkboxes-container input[type='checkbox'] {
  /* 12. 调整复选框的大小和位置，使其更协调 */
  width: 18px;
  height: 18px;
  margin: 0;
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */

/* ▼▼▼ 【V6 最终修正版】心声面板（边框问题修复） ▼▼▼ */

/* 1. 基础布局 (保持不变) */
#inner-voice-modal .modal-body {
  position: relative;
  min-height: 450px;
}
#inner-voice-avatar-wrapper,
#inner-voice-char-name,
#inner-voice-adopter-info {
  position: absolute;
  transition: all 0.3s ease;
}

/* 2. 角色主头像的容器：在这里添加 padding 和 background-color */
#inner-voice-avatar-wrapper {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 65px;
  height: 65px;
  border-radius: 50%;

  /* --- ▼▼▼ 核心修改在这里 ▼▼▼ --- */
  padding: 4px; /* ★ 新增：向内挤压4像素，为红线留出空间。你可以自己调整这个数值，比如3px或5px */
  background-color: #fff; /* ★ 新增：让内边距的区域显示为白色，形成一个“白环” */
  box-sizing: border-box; /* ★ 新增：确保padding不会把容器撑大，这很重要 */
  /* --- ▲▲▲ 修改结束 ▲▲▲ --- */

  box-shadow: 0 0 0 1.5px transparent;
  transition: box-shadow 0.2s ease-in-out;
}

/* 当需要显示边框时，改变 box-shadow 的颜色 (已修改为粉色) */
#inner-voice-avatar-wrapper.has-border {
  box-shadow: 0 0 0 1.5px #ff8fab; /*  <-- 就是修改这里！*/
}

/* 4. 移除之前制造冲突的 ::after 伪元素 (保持不变) */
#inner-voice-avatar-wrapper::after {
  display: none;
}

/* 角色主头像的图片样式（保持不变） */
#inner-voice-avatar-wrapper #inner-voice-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: none;
}

/* 头像框的样式（保持不变） */
/* ▼▼▼ 【最终微调版】请用这整块代码，替换掉旧的聊天和心声头像框规则 ▼▼▼ */

.avatar-with-frame .avatar-frame,
#inner-voice-avatar-frame {
  position: absolute;
  width: 110%;
  height: 115%;
  transform: translate(-50%, -56%);
  top: 50%;
  left: 50%;
  z-index: 2;
  pointer-events: none;
}

/* ▲▲▲ 替换结束 ▲▲▲ */

/* 5. 角色名字和领养人信息的位置 (保持不变) */
#inner-voice-char-name {
  top: 95px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  font-size: 16px;
  color: #333;
  text-align: center;
}
#inner-voice-adopter-info {
  top: 125px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
}
#inner-voice-adopter-info img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

/* 6. 内容区距离 (保持不变) */
#inner-voice-content-area {
  margin-top: 165px;
}

/* ▼▼▼ 【全新 | CSS变量版】心声面板卡片和标签样式 ▼▼▼ */

/* 这是心声面板里，每个项目（例如“服装”的整个卡片）的样式 */
#inner-voice-content-area > div {
  /* 核心修改：我们把颜色和透明度变成了可以被JS修改的变量 */
  background-color: rgba(var(--iv-card-bg-rgb, 255, 255, 255), var(--iv-card-opacity, 0.7));

  border-radius: 16px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: background-color 0.3s; /* 添加平滑过渡 */
}

/* ▼▼▼ 【最终修复版】心声面板标签样式 ▼▼▼ */

/* 1. 先定义所有标签的通用样式，确保形状、字体颜色、阴影等都保持不变 */
#inner-voice-content-area strong {
  padding: 3px 10px;
  border-radius: 12px;
  color: white !important; /* 强制字体颜色为白色 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 保持文字阴影 */
}

/* 2. 然后，再为每个标签单独设置可变的背景颜色 */
#inner-voice-content-area div:nth-of-type(1) strong {
  background-color: var(--iv-color-clothing, #f0a1a8); /* 服装 */
}
#inner-voice-content-area div:nth-of-type(2) strong {
  background-color: var(--iv-color-behavior, #81c784); /* 行为 */
}
#inner-voice-content-area div:nth-of-type(3) strong {
  background-color: var(--iv-color-thoughts, #64b5f6); /* 心声 */
}
#inner-voice-content-area div:nth-of-type(4) strong {
  background-color: var(--iv-color-naughty, #ba68c8); /* 坏心思 */
}

/* ▲▲▲ 修复结束 ▲▲▲ */

/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▲▲▲ 定制样式结束 ▲▲▲ */

/*
  【独家定制】单独修改心声头像框的大小和位置
  使用说明：
  1. 将下面这整块代码粘贴到 <style> 标签的最末尾。
  2. 修改下面的 width, height, top, left 的数值来调整头像框。
*/
#inner-voice-avatar-frame {
  /*
     * 控制大小：数值越大，头像框越大。
     * 例如：120% (比原来小), 150% (比原来大)
     */
  width: 100%;
  height: 100%;

  /*
     * 控制位置：以头像中心为原点 (50%, 50%) 进行微调
     */

  /* 控制【上下】位置：小于50%则上移，大于50%则下移 */
  top: 43%; /* 示例：稍微向上移动了一点 */

  /* 控制【左右】位置：小于50%则左移，大于50%则右移 */
  left: 50%; /* 示例：保持水平居中 */

  /* 
      以下为保持居中和显示效果必须的属性，请勿修改 
    */
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
/* ▼▼▼ 【全新】这是微博私信功能的所有新样式，请粘贴到 <style> 的末尾 ▼▼▼ */

/* --- 私信列表页面 --- */
#weibo-dm-list .dm-list-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}
#weibo-dm-list .dm-list-item:hover {
  background-color: #f5f5f5;
}
#phone-screen.dark-mode #weibo-dm-list .dm-list-item:hover {
  background-color: #2c2c2e;
}
#weibo-dm-list .dm-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}
#weibo-dm-list .dm-info {
  flex-grow: 1;
  overflow: hidden;
}
#weibo-dm-list .dm-name {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 4px;
}
#weibo-dm-list .dm-last-msg {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 私信详情页面 --- */
#weibo-dm-messages {
  background-color: #f0f2f5 !important;
}
#phone-screen.dark-mode #weibo-dm-messages {
  background-color: #000000 !important;
}

/* 复用主聊天界面的气泡样式，但为粉丝和角色定义特定对齐方式 */
#weibo-dm-messages .message-wrapper.fan {
  align-self: flex-start;
}
#weibo-dm-messages .message-wrapper.fan .message-bubble {
  flex-direction: row;
}
#weibo-dm-messages .message-wrapper.fan .content {
  background-color: #ffffff;
  border-radius: 2px 18px 18px 18px;
}

#weibo-dm-messages .message-wrapper.char {
  align-self: flex-end;
}
#weibo-dm-messages .message-wrapper.char .message-bubble {
  flex-direction: row-reverse;
}
#weibo-dm-messages .message-wrapper.char .content {
  background-color: #ff8200; /* 微博橙色 */
  color: white;
  border-radius: 18px 2px 18px 18px;
}

#phone-screen.dark-mode #weibo-dm-messages .message-wrapper.fan .content {
  background-color: #2c2c2e;
}
#phone-screen.dark-mode #weibo-dm-messages .message-wrapper.char .content {
  background-color: #e67300;
}

/* ★★★ 这是你需要的【删除按钮】的样式 ★★★ */
.dm-message-delete-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-color: rgba(0, 0, 0, 0.1);
  color: #555;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  opacity: 0; /* 默认隐藏 */
  transition: all 0.2s ease;
}
/* 鼠标悬停在消息上时显示按钮 */
#weibo-dm-messages .message-wrapper:hover .dm-message-delete-btn {
  opacity: 1;
}
.dm-message-delete-btn:hover {
  background-color: #ff3b30;
  color: white;
}
/* 调整按钮位置，让它出现在气泡旁边 */
#weibo-dm-messages .message-wrapper.fan .dm-message-delete-btn {
  right: -28px; /* 修改：从 left 改为 right，把它放到右边 */
  left: auto; /* 新增：取消左侧定位，确保 right 生效 */
}
#weibo-dm-messages .message-wrapper.char .dm-message-delete-btn {
  right: -28px;
}
/* ▼▼▼ 【全新】聊天总结功能样式 ▼▼▼ */

/* 总结管理弹窗内的列表 */
#summary-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 单条总结卡片 */
.summary-item-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--border-color);
  position: relative;
}

#phone-screen.dark-mode .summary-item-card {
  background-color: #2c2c2e;
}

.summary-item-card .summary-content {
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-item-card .summary-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
}

.summary-item-card .summary-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
}

.summary-item-card .summary-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-secondary);
  padding: 5px;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 把这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* 聊天总结弹窗底部按钮的美化 */
#summary-viewer-modal .modal-footer button {
  width: auto; /* 让宽度自适应 */
  margin-top: 0; /* 移除顶部外边距 */
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* --- “桃宝”App 整体布局 --- */
#taobao-screen {
  background-color: #f0f2f5;
}

/* 顶部页签 */
.taobao-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--secondary-bg);
}
.taobao-tab {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  font-weight: 500;
  color: var(--text-secondary);
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
}
.taobao-tab.active {
  color: #ff5722; /* 淘宝橙 */
}
.taobao-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background-color: #ff5722;
  border-radius: 1.5px;
}

/* 内容区域 */
.taobao-content {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
.taobao-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: none;
  padding: 15px;
  box-sizing: border-box;
}
.taobao-view.active {
  display: block;
}

/* --- 首页/商品视图 --- */
#product-category-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  overflow-x: auto;
  padding-bottom: 5px; /* for scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#product-category-tabs::-webkit-scrollbar {
  display: none;
}

#product-category-tabs .category-tab-btn {
  padding: 6px 12px;
  border-radius: 15px;
  border: 1px solid var(--border-color);
  background-color: var(--secondary-bg);
  white-space: nowrap;
  cursor: pointer;
}
#product-category-tabs .category-tab-btn.active {
  background-color: #ffefe9;
  color: #ff5722;
  border-color: #ff5722;
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.product-card {
  background-color: var(--secondary-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.product-card .product-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: #f0f2f5;
}
.product-card .product-info {
  padding: 8px;
}
.product-card .product-name {
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em; /* 保证两行的高度 */
}
.product-card .product-price {
  font-size: 16px;
  font-weight: bold;
  color: #ff5722;
  margin-top: 5px;
}
.product-card .product-price::before {
  content: '¥';
  font-size: 12px;
  margin-right: 2px;
}

/* --- 我的/余额视图 --- */
#user-balance-container {
  background: linear-gradient(135deg, #ff9a8b 0%, #ff6a88 100%);
  color: white;
  padding: 30px 20px;
  border-radius: 12px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
#user-balance-container h2 {
  font-size: 40px;
  margin: 10px 0 20px 0;
}
#top-up-btn {
  background-color: rgba(255, 255, 255, 0.9);
  color: #ff5722;
}

/* --- 订单/物流视图 --- */
.order-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.order-item {
  background-color: var(--secondary-bg);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  gap: 12px;
}
.order-item .product-image {
  width: 70px;
  height: 70px;
  border-radius: 6px;
  flex-shrink: 0;
}
.order-item .order-info {
  flex-grow: 1;
}
.order-item .product-name {
  font-weight: 500;
}
.order-item .order-status {
  font-size: 13px;
  color: #28a745;
  margin-top: 8px;
  font-weight: 500;
}
.order-item .order-time {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* --- “桃宝”App 搜索栏样式 --- */
.taobao-search-bar {
  display: flex;
  gap: 10px;
  padding: 0 0 15px 0; /* 只在下方留出间距 */
}

#product-search-input {
  flex-grow: 1;
  border: 1px solid #ff5722;
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 14px;
  outline: none;
}

#product-search-btn {
  background-color: #ff5722;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0 20px;
  font-weight: 500;
  cursor: pointer;
}

/* --- AI生成结果弹窗内的样式 --- */
#ai-product-results-grid .product-card {
  position: relative; /* 为了定位“添加”按钮 */
  padding-bottom: 40px; /* 为按钮留出空间 */
  cursor: default; /* 在弹窗里，卡片本身不可点击 */
}

.add-to-my-page-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  width: calc(100% - 16px);
  padding: 8px 0;
  background-color: #4caf50; /* 绿色，代表添加 */
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.add-to-my-page-btn:hover {
  background-color: #45a049;
}

.add-to-my-page-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* --- 购物车页签上的小红点 --- */
.taobao-tab {
  position: relative;
}
#cart-item-count-badge {
  position: absolute;
  top: 5px;
  right: 15px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: #ff5722;
  color: white;
  font-size: 11px;
  border-radius: 9px;
  line-height: 18px;
}

/* --- 商品卡片上的“加入购物车”按钮 --- */
.product-card .add-cart-btn {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 28px;
  height: 28px;
  background-color: #ff5722;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}
.product-card .add-cart-btn:active {
  transform: scale(0.9);
}

/* --- 购物车列表 --- */
#cart-item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 70px; /* 为底部的结算栏留出空间 */
}
.cart-item {
  background-color: var(--secondary-bg);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cart-item .product-image {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  flex-shrink: 0;
  cursor: pointer; /* 让图片可点击 */
}
.cart-item .cart-item-info {
  flex-grow: 1;
  cursor: pointer; /* 让信息区也可点击 */
}
.cart-item .product-name {
  font-weight: 500;
}
.cart-item .product-price {
  color: #ff5722;
  font-weight: bold;
  margin-top: 8px;
}
.cart-item .quantity-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-item .quantity-controls button {
  width: 24px;
  height: 24px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  border-radius: 50%;
  cursor: pointer;
}
.cart-item .delete-cart-item-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  color: #999;
  font-size: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

/* --- 购物车结算栏 --- */
#cart-checkout-bar {
  position: fixed; /* ★★★ 核心修改：从 absolute 改为 fixed ★★★ */
  bottom: 0;
  left: 0;
  right: 0; /* (推荐) 配合 left:0 自动撑满宽度，更稳妥 */
  /* width: 100%; (可以保留或删除) */
  z-index: 10; /* (推荐) 确保它始终在最上层 */
  padding: 10px 15px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background-color: var(--secondary-bg);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

#cart-checkout-bar .total-price {
  font-weight: bold;
}
#cart-checkout-bar #cart-total-price {
  color: #ff5722;
  font-size: 18px;
}
#cart-checkout-bar #checkout-btn {
  background-color: #ff5722;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
}

/* --- 商品详情弹窗 --- */
#product-detail-body {
  text-align: center;
}
#product-detail-body .product-image {
  width: 80%;
  max-width: 250px;
  border-radius: 8px;
  margin-bottom: 15px;
}
#product-detail-body .product-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
#product-detail-body .product-price {
  font-size: 24px;
  font-weight: bold;
  color: #ff5722;
  margin-bottom: 20px;
}
#product-detail-body .product-price::before {
  content: '¥';
  font-size: 16px;
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* --- 商品详情弹窗 - 评价区 --- */
#product-reviews-section {
  padding: 0 15px 15px 15px; /* 和主体内容保持一致的内边距 */
  border-top: 1px solid var(--border-color);
  margin-top: 15px;
}
#product-reviews-section h3 {
  font-size: 16px;
  margin: 15px 0;
}
#product-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: 150px; /* 给一个最大高度，内容多了可以滚动 */
  overflow-y: auto;
  margin-bottom: 15px;
}
.product-review-item {
  font-size: 14px;
  line-height: 1.6;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
}
.product-review-item .review-author {
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
#generate-reviews-btn {
  width: 100%;
  margin-top: 10px;
  background-color: #fff7e6;
  color: #fa8c16;
  border-color: #ffd591;
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 标签的最末尾 ▼▼▼ */

/* --- 余额明细列表样式 --- */
.transaction-item {
  background-color: var(--secondary-bg);
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.transaction-info .description {
  font-weight: 500;
}
.transaction-info .timestamp {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.transaction-amount {
  font-weight: bold;
  font-size: 16px;
}
.transaction-amount.income {
  color: #4caf50; /* 收入为绿色 */
}
.transaction-amount.expense {
  color: #f44336; /* 支出为红色 */
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是为物流详情页新增的样式，请粘贴到 <style> 的末尾 ▼▼▼ */

#logistics-content-area {
  padding: 20px;
  background-color: #f5f5f5;
}

#phone-screen.dark-mode #logistics-content-area {
  background-color: #121212;
}

/* 顶部商品信息卡片 */
.logistics-product-summary {
  display: flex;
  gap: 15px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: var(--secondary-bg);
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.logistics-product-summary .product-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  flex-shrink: 0;
}

.logistics-product-summary .info .name {
  font-weight: 600;
  font-size: 15px;
}

.logistics-product-summary .info .status {
  font-size: 13px;
  color: #ff5722; /* 淘宝橙 */
  margin-top: 5px;
  font-weight: 500;
}

/* 时间轴容器 */
.logistics-timeline {
  position: relative;
  padding-left: 25px; /* 为时间轴的竖线和圆点留出空间 */
  background-color: var(--secondary-bg);
  padding: 20px 20px 20px 30px;
  border-radius: 12px;
}

/* 时间轴的竖线 */
.logistics-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background-color: #e0e0e0;
}

#phone-screen.dark-mode .logistics-timeline::before {
  background-color: #38383a;
}

/* 每一个物流步骤 */
.logistics-step {
  position: relative;
  margin-bottom: 25px;
}

.logistics-step:last-child {
  margin-bottom: 0;
}

/* 时间轴上的圆点 */
.logistics-step::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  border: 2px solid var(--secondary-bg);
  z-index: 1;
}

/* 最新的一条物流状态，让它的圆点更突出 */
.logistics-step:first-child::before {
  background-color: #ff5722;
  transform: scale(1.3);
}

.logistics-step-content .status-text {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 5px;
  line-height: 1.5;
}

.logistics-step-content .timestamp {
  font-size: 12px;
  color: var(--text-secondary);
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是为“分享给Ta代付”按钮新增的样式 ▼▼▼ */
#share-cart-to-char-btn {
  background-color: #ff9800; /* 使用一个温暖的橙色，区别于结算按钮 */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s; /* 添加悬停效果 */
}
#share-cart-to-char-btn:hover {
  background-color: #f57c00;
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是为“购物车代付请求”新增的卡片样式 ▼▼▼ */

/* 1. 让包裹卡片的气泡本身变透明 */
.message-bubble.is-cart-share-request .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 2. 卡片主体样式 */
.cart-share-card {
  width: 230px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  border: 2px solid transparent; /* 为不同状态准备的边框 */
  transition: all 0.3s ease;
}

/* 3. 卡片头部 */
.cart-share-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background-color: #fff8e1; /* 温暖的米黄色 */
  color: #ffa000;
}
.cart-share-header .icon {
  font-size: 24px;
  font-weight: bold;
}
.cart-share-header .title {
  font-size: 16px;
  font-weight: 600;
}

/* 4. 卡片内容区域 */
.cart-share-body {
  padding: 15px;
  text-align: center;
}
.cart-share-body .label {
  font-size: 13px;
  color: #888;
}
.cart-share-body .amount {
  font-size: 32px;
  font-weight: 700;
  color: #ff5722; /* 淘宝橙 */
  margin: 5px 0 15px 0;
}
.cart-share-body .status-text {
  font-weight: 500;
  color: var(--accent-color);
}

/* 5. 不同状态下的样式 */
.cart-share-card.paid {
  border-color: #4caf50; /* 绿色 */
}
.cart-share-card.paid .status-text {
  color: #4caf50;
}
.cart-share-card.rejected {
  border-color: #f44336; /* 红色 */
  opacity: 0.8;
}
.cart-share-card.rejected .status-text {
  color: #f44336;
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是为“为Ta购买”和礼物通知卡片新增的样式 ▼▼▼ */

/* 1. “为Ta购买”按钮的样式 */
#buy-for-char-btn {
  background-color: #4caf50; /* 使用一个代表“礼物”的绿色 */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
#buy-for-char-btn:hover {
  background-color: #45a049;
}

/* 2. 让包裹礼物卡片的气泡变透明 */
.message-bubble.is-gift-notification .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 3. 礼物通知卡片主体样式 */
.gift-card {
  width: 230px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.gift-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background-color: #e8f5e9; /*淡淡的绿色背景*/
  color: #2e7d32;
}
.gift-card-header .icon {
  font-size: 24px;
  font-weight: bold;
}
.gift-card-header .title {
  font-size: 16px;
  font-weight: 600;
}
.gift-card-body {
  padding: 15px;
}
.gift-card-body .greeting {
  font-size: 14px;
  margin-bottom: 10px;
}
.gift-card-items {
  font-size: 13px;
  color: #555;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}
.gift-card-footer {
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  text-align: right;
  font-weight: bold;
}
.gift-card-footer .total-price {
  color: #ff5722;
}
/* ▲▲▲ 新增样式结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 的末尾 ▼▼▼ */

/* 1. 让角色主页的内容区可以独立滚动 */
#weibo-char-profile-page {
  flex-grow: 1;
  overflow-y: auto;
  background-color: #f0f2f5;
}

/* 2. 修正夜间模式下主页和新页面的背景色 */
#phone-screen.dark-mode #weibo-profile-page,
#phone-screen.dark-mode #weibo-char-profile-page {
  background-color: #000;
}

/* 3. 为角色主页上的职业显示添加样式 (已修改) */
#weibo-char-profession-display {
  position: absolute;
  /* 定位：从右侧标签改为与“关注”数据左对齐 */
  left: 35px;
  /* 垂直位置：放在“关注”数据行的下方，-5px会让它更靠下一点 */
  bottom: -5px;
  right: auto; /* 清除掉旧的 right 定位，避免冲突 */
  z-index: 2;

  /* 外观：从半透明标签改为和你主页一致的灰色普通文字 */
  font-size: 13px;
  color: #8a8a8a;
  text-shadow: none;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* 4. 给关注列表的“查看主页”按钮添加样式 */
.weibo-following-item .view-profile-btn {
  margin-left: auto; /* 让按钮自动靠右 */
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-color);
  background-color: #e7f3ff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
#phone-screen.dark-mode .weibo-following-item .view-profile-btn {
  background-color: rgba(0, 123, 255, 0.2);
}

/* ▲▲▲ 新增CSS粘贴结束 ▲▲▲ */
/* ▼▼▼ 【层级修复】请将这段新CSS粘贴到 <style> 的末尾 ▼▼▼ */

/* 强制提升头像框选择弹窗的层级，确保它能覆盖在其他弹窗之上 */
#avatar-frame-modal {
  z-index: 1005;
}

/* ▲▲▲ 修复结束 ▲▲▲ */
/* ▼▼▼ 这是新增的样式 ▼▼▼ */

/* 这是我们新加的、包裹头像的可点击区域的样式 */
.weibo-post-avatar-clickable {
  cursor: pointer; /* 鼠标放上去时显示为小手形状 */
  transition: opacity 0.2s ease-in-out; /* 添加一个平滑的过渡动画 */
}

/* 鼠标悬停时，让头像稍微变暗一点，给用户一个明确的反馈 */
.weibo-post-avatar-clickable:hover {
  opacity: 0.85;
}

/* ▲▲▲ 新增样式结束 ▲▲▲ */
/* ▼▼▼ 【全新】语音播放动画样式 ▼▼▼ */
.message-bubble.is-voice-message.playing .voice-waveform div {
  animation: wave-play 1s ease-in-out infinite;
}

@keyframes wave-play {
  0%,
  100% {
    height: 2px;
  }
  25% {
    height: 12px;
  }
  50% {
    height: 6px;
  }
  75% {
    height: 18px;
  }
}
/* ▲▲▲ 样式粘贴结束 ▲▲▲ */

/* ============ “查手机”功能美化代码 v2.0 (支持自定义图片) 开始 ============ */

/* --- 步骤1: 缩小图标尺寸 (保持不变) --- */
#character-app-grid .app-icon .icon-bg {
  width: 50px !important;
  height: 50px !important;
  border-radius: 13px !important;
}
#character-app-grid .app-icon .label {
  font-size: 12px;
}

/* --- 步骤2: 将容器改为自由定位的“桌面”布局 (保持不变) --- */
#character-app-grid {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  position: relative !important;
  height: 100% !important;
}

/* --- 步骤3: 让所有App图标“浮”起来 (保持不变) --- */
#character-app-grid .app-icon {
  position: absolute !important;
}

/* --- 步骤4: 【核心修改】为我们新的图片位设置样式 --- */
.char-phone-widget {
  position: absolute;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 加个阴影更好看 */
  border: 2px solid rgba(255, 255, 255, 0.5); /* 加个白边更有质感 */
  overflow: hidden; /* 防止图片溢出圆角 */
  cursor: pointer; /* 鼠标放上去是小手形状，提示可以点击 */
  transition: transform 0.2s ease; /* 添加点击动效 */
  background-color: #e0e0e0; /* 图片加载前的占位颜色 */
}
.char-phone-widget:active {
  transform: scale(0.95); /* 点击时缩小一点点 */
}
.char-phone-widget img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片填满且不变形 */
}

/* ============================================== */
/* === ★★★ 手动精调区：在这里修改位置和大小 ★★★ === */
/* ============================================== */

/* --- 左上角的图片位 --- */
#char-phone-widget-1 {
  /* --- 在这里调整【上下位置】(数字越大越往下)--- */
  top: 60px;
  /* --- 在这里调整【左右位置】(数字越大越往右)--- */
  left: 20px;
  /* --- 在这里调整【大小】--- */
  width: 110px;
  height: 110px;
  border-radius: 22px; /* 圆角 (建议是宽度的1/5左右) */
}

/* --- 右下角的图片位 --- */
#char-phone-widget-2 {
  /* --- 在这里调整【上下位置】(数字越大越往上)--- */
  bottom: 60px;
  /* --- 在这里调整【左右位置】(数字越大越往左)--- */
  right: 20px;
  /* --- 在这里调整【大小】--- */
  width: 110px;
  height: 110px;
  border-radius: 22px; /* 圆角 */
}

/* --- APP 图标位置调整 (这部分保持不变) --- */
#character-app-grid .app-icon:nth-child(1) {
  top: 70px;
  left: 150px;
}
#character-app-grid .app-icon:nth-child(2) {
  top: 70px;
  left: 215px;
}
#character-app-grid .app-icon:nth-child(3) {
  top: 155px;
  left: 30px;
}
#character-app-grid .app-icon:nth-child(4) {
  top: 155px;
  left: 95px;
}
#character-app-grid .app-icon:nth-child(5) {
  top: 155px;
  left: 160px;
}
#character-app-grid .app-icon:nth-child(6) {
  top: 240px;
  left: 225px;
}
#character-app-grid .app-icon:nth-child(7) {
  top: 240px;
  left: 30px;
}
#character-app-grid .app-icon:nth-child(8) {
  top: 240px;
  left: 95px;
}
#character-app-grid .app-icon:nth-child(9) {
  top: 325px;
  left: 30px;
}
#character-app-grid .app-icon:nth-child(10) {
  top: 325px;
  left: 95px;
}

/* ============ “查手机”功能美化代码 结束 ============ */

/* ▼▼▼ 【最终修复版】只为“微博”和“粉丝”增加点击区域 ▼▼▼ */

/*
 * 核心原理不变，但这次我们使用了更精确的 ID 选择器，
 * 只选中 #weibo-posts-item (微博) 和 #weibo-fans-item (粉丝) 这两个元素。
 */
#weibo-posts-item,
#weibo-fans-item {
  padding: 8px 10px;
  margin: -8px -10px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

/* 为这两个按钮添加点击时的背景色反馈 */
#weibo-posts-item:active,
#weibo-fans-item:active {
  background-color: rgba(0, 0, 0, 0.08); /* 点击时给一个淡淡的灰色背景 */
}

/* 在夜间模式下的点击反馈颜色 */
#phone-screen.dark-mode #weibo-posts-item:active,
#phone-screen.dark-mode #weibo-fans-item:active {
  background-color: rgba(255, 255, 255, 0.1);
}
/* ▲▲▲ 最终修复版样式结束 ▲▲▲ */

/* ======================================================================= /
/ === ★★★ 角色手机桌面美化布局 v16.0 (垂直居中偏移版) ★★★ === /
/ ======================================================================= */

/* --- 1. 总控制台 & 布局变量 --- */
#character-phone-screen {
  position: relative !important;

  /* --- ★★★ 唯一的【垂直位置】总控制器 ★★★ --- */
  /* 调整这个值，就能让所有图标和小组件一起上下移动 */
  /* 增加数值 = 整体下移；减小数值 = 整体上移 */
  /* 我帮你设置了一个看起来比较居中的初始值 */
  --global-vertical-offset: 10px;

  /* (水平居中部分，保持不变) */
  --grid-width: 345px;
  --grid-left-edge: calc((100% - var(--grid-width)) / 2);
}

/* --- 2. 准备工作 (保持不变) --- */
#character-app-grid {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
#character-app-grid .app-icon,
#char-phone-widget-1,
#char-phone-widget-2 {
  position: absolute !important;
}

/* --- 3. App图标样式 (保持不变) --- */
#character-app-grid .app-icon .icon-bg {
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
#character-app-grid .app-icon .label {
  font-size: 12px;
  color: #fff;
  padding-top: 8px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- 4. 小组件位置和尺寸 (★核心修改: 应用全局偏移) --- */
#char-phone-widget-1 {
  top: calc(var(--global-vertical-offset) + 90px); /* 90px 是你固定的值 */
  left: calc(var(--grid-left-edge) + 30px);
  width: 135px;
  height: 135px;
  border-radius: 22px;
}
#char-phone-widget-2 {
  top: calc(var(--global-vertical-offset) + 480px); /* 480px 是你固定的值 */
  left: calc(var(--grid-left-edge) + 180px);
  width: 135px;
  height: 135px;
  border-radius: 22px;
}

/* --- 5. App图标位置 (★核心修改: 应用全局偏移) --- */
/* 第1行 */
#character-app-grid .app-icon:nth-child(1) {
  top: calc(var(--global-vertical-offset) + 155px);
  left: calc(var(--grid-left-edge) + 185px);
}
#character-app-grid .app-icon:nth-child(2) {
  top: calc(var(--global-vertical-offset) + 155px);
  left: calc(var(--grid-left-edge) + 250px);
}
/* 第2行 */
#character-app-grid .app-icon:nth-child(3) {
  top: calc(var(--global-vertical-offset) + 270px);
  left: calc(var(--grid-left-edge) + 30px);
}
#character-app-grid .app-icon:nth-child(4) {
  top: calc(var(--global-vertical-offset) + 270px);
  left: calc(var(--grid-left-edge) + 105px);
}
#character-app-grid .app-icon:nth-child(5) {
  top: calc(var(--global-vertical-offset) + 270px);
  left: calc(var(--grid-left-edge) + 180px);
}
/* 第3行 */
#character-app-grid .app-icon:nth-child(6) {
  top: calc(var(--global-vertical-offset) + 375px);
  left: calc(var(--grid-left-edge) + 105px);
}
#character-app-grid .app-icon:nth-child(7) {
  top: calc(var(--global-vertical-offset) + 375px);
  left: calc(var(--grid-left-edge) + 185px);
}
#character-app-grid .app-icon:nth-child(8) {
  top: calc(var(--global-vertical-offset) + 375px);
  left: calc(var(--grid-left-edge) + 250px);
}
/* 第4行 */
#character-app-grid .app-icon:nth-child(9) {
  top: calc(var(--global-vertical-offset) + 480px);
  left: calc(var(--grid-left-edge) + 30px);
}
#character-app-grid .app-icon:nth-child(10) {
  top: calc(var(--global-vertical-offset) + 480px);
  left: calc(var(--grid-left-edge) + 105px);
}

/* ▼▼▼ 【查手机功能 | 图标对齐终极修复 V4】 ▼▼▼ */
/*
 * 解决方案：
 * 1. (保留) 使用负外边距，将应用名(.label)向上拉，使其紧贴图标。
 * 2. (新增) 对包含默认SVG图标的整个.app-icon元素，也使用一个负的margin-top，
 *    使其整体向上移动，从而和其他自定义图标在垂直方向上完美对齐。
 */

/* 步骤1：让文字紧贴图标 (这是上次的成功修复，我们保留它) */
#character-app-grid .app-icon:has(.icon-bg > svg) .label {
  margin-top: -7px !important;
  padding-top: 0px !important;
}

/* 步骤2：让图标和文字作为一个整体，向上移动 */
#character-app-grid .app-icon:has(.icon-bg > svg) {
  margin-top: -8px; /* 这个负值会把整个图标+文字的组合向上拉 */
}
/* ▲▲▲ 修复代码结束 ▲▲▲ */
/* ▼▼▼ 这是步骤1需要粘贴的新样式 ▼▼▼ */

/* 让每一条评论都变成可点击的，并增加悬停效果 */
.weibo-comment-item {
  cursor: pointer; /* 鼠标悬停时显示为小手形状 */
  transition: background-color 0.2s; /* 添加一个平滑的背景色过渡动画 */
  border-radius: 4px; /* 给一点点圆角，更好看 */
  padding: 2px 5px; /* 增加一点内边距，让点击区域更大 */
  margin: 0 -5px; /* 把上面的内边距抵消掉，保持对齐 */
}
.weibo-comment-item:hover {
  background-color: #f0f2f5; /* 鼠标放上去时，给一个淡淡的背景色 */
}
#phone-screen.dark-mode .weibo-comment-item:hover {
  background-color: #2c2c2e; /* 夜间模式下的悬停颜色 */
}

/* “回复”这两个字的样式，让它更柔和 */
.weibo-comment-item .weibo-comment-reply-tag {
  color: var(--text-secondary);
  margin: 0 4px; /* 和两边的名字拉开一点距离 */
}

/* 被回复者的名字样式，让它和普通评论者名字一样可以点击 */
.weibo-comment-item .reply-target-name {
  font-weight: 600;
  color: var(--accent-color);
  cursor: pointer;
  margin-right: 5px;
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】角色手机App内壁纸样式 ▼▼▼ */

/* 当内部屏幕有壁纸时，设置背景图的显示方式 */
.character-phone-inner-screen.has-app-wallpaper {
  background-size: cover;
  background-position: center;
}

/* 关键：让所有App页面的内容列表背景变透明 */
.character-phone-inner-screen.has-app-wallpaper .list-container,
.character-phone-inner-screen.has-app-wallpaper #character-chat-history-messages {
  background-color: transparent !important;
}

/* 为了保证文字的可读性，我们给列表项和卡片加上半透明的背景 */
.character-phone-inner-screen.has-app-wallpaper .character-data-item,
.character-phone-inner-screen.has-app-wallpaper .character-cart-item,
.character-phone-inner-screen.has-app-wallpaper .character-browser-item,
.character-phone-inner-screen.has-app-wallpaper .character-bank-transaction,
.character-phone-inner-screen.has-app-wallpaper .chat-list-item {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 同样为聊天气泡增加半透明效果 */
.character-phone-inner-screen.has-app-wallpaper .character-chat-bubble-container.received .character-chat-bubble {
  background-color: rgba(255, 255, 255, 0.85);
}
.character-phone-inner-screen.has-app-wallpaper .character-chat-bubble-container.sent .character-chat-bubble {
  background-color: rgba(149, 236, 105, 0.85); /* 微信绿，但带一点透明 */
}

/* 适配夜间模式的半透明颜色 */
#phone-screen.dark-mode .character-phone-inner-screen.has-app-wallpaper .character-data-item,
#phone-screen.dark-mode .character-phone-inner-screen.has-app-wallpaper .chat-list-item {
  background-color: rgba(28, 28, 30, 0.7);
}
#phone-screen.dark-mode
  .character-phone-inner-screen.has-app-wallpaper
  .character-chat-bubble-container.received
  .character-chat-bubble {
  background-color: rgba(44, 44, 46, 0.85);
}
#phone-screen.dark-mode
  .character-phone-inner-screen.has-app-wallpaper
  .character-chat-bubble-container.sent
  .character-chat-bubble {
  background-color: rgba(48, 93, 32, 0.85); /* 夜间模式的绿色 */
}
/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是为“游戏分享”新增的颜色样式 ▼▼▼ */
.share-type.game {
  background-color: #9c27b0; /* 一个代表游戏的神秘紫色 */
}
/* ▲▲▲ 新增样式结束 ▲▲▲ */
/* ▼▼▼ 【全新】心动飞行棋样式 ▼▼▼ */

/* --- 游戏主界面布局 --- */
#ludo-game-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
  gap: 15px;
  background-color: #fff0f5; /* 温柔的淡粉色背景 */
}

#phone-screen.dark-mode #ludo-game-content {
  background-color: #2c1e22; /* 夜间模式下的深粉紫色 */
}

/* --- 棋盘容器与棋盘本身 --- */
#ludo-board-container {
  position: relative;
  width: 100%;
  height: 280px; /* 给棋盘一个固定的高度 */
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}

#ludo-board {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10x6的网格布局 */
  grid-template-rows: repeat(6, 1fr);
  width: 100%;
  height: 100%;
  gap: 3px;
}

/* --- 棋盘格子样式 --- */
.ludo-cell {
  border-radius: 4px;
  background-color: rgba(255, 192, 203, 0.3); /* 淡淡的粉色格子 */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #db7093;
}

/* 起点和终点格子 */
.ludo-cell.start {
  background-color: #90ee90;
  color: #2e8b57;
}
.ludo-cell.end {
  background-color: #ffd700;
  color: #b8860b;
}

/* 特殊事件格子 */
.ludo-cell.event-truth {
  background-color: #ffb6c1;
} /* 真心话 */
.ludo-cell.event-dare {
  background-color: #add8e6;
} /* 大冒险 */
.ludo-cell.event-kiss {
  background-color: #ff69b4;
} /* 亲亲 */
.ludo-cell.event-hug {
  background-color: #ffdab9;
} /* 抱抱 */

.ludo-cell .cell-number {
  font-size: 10px;
  position: absolute;
  top: 2px;
  left: 3px;
  color: rgba(0, 0, 0, 0.2);
}

/* --- 棋子样式 --- */
.ludo-piece {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}
.ludo-piece.user {
  border-color: #87cefa;
}
.ludo-piece.char {
  border-color: #ffc0cb;
}

/* --- 游戏日志 --- */
#ludo-log-container {
  flex-grow: 1;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 10px;
  overflow-y: auto;
  min-height: 0;
}
#ludo-game-log .log-entry {
  padding: 6px 8px;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  line-height: 1.5;
}
#ludo-game-log .log-entry.system {
  color: #db7093;
  font-style: italic;
  text-align: center;
}
#ludo-game-log .log-entry.user {
  color: #007bff;
}
#ludo-game-log .log-entry.char {
  color: #e83e8c;
}
#ludo-game-log .log-entry strong {
  font-weight: 900;
}

/* --- 操作区与骰子动画 --- */
#ludo-action-area {
  flex-shrink: 0;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
}
#ludo-dice-container {
  perspective: 1000px;
}
.dice {
  width: 50px;
  height: 50px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
  cursor: pointer;
}
.dice.rolling {
  animation: roll-dice 1.5s ease-out;
}
@keyframes roll-dice {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(1080deg) rotateY(720deg);
  }
}
.dice .face {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}
.face.front {
  transform: rotateY(0deg) translateZ(25px);
}
.face.back {
  transform: rotateY(180deg) translateZ(25px);
}
.face.right {
  transform: rotateY(90deg) translateZ(25px);
}
.face.left {
  transform: rotateY(-90deg) translateZ(25px);
}
.face.top {
  transform: rotateX(90deg) translateZ(25px);
}
.face.bottom {
  transform: rotateX(-90deg) translateZ(25px);
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】飞行棋问题类型标签样式 ▼▼▼ */
.question-type-tag {
  font-size: 10px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 10px;
  color: white;
  margin-left: 10px;
  flex-shrink: 0;
}
.question-type-tag.both-answer {
  background-color: #ff8fab; /* 粉色代表共同回答 */
}
.question-type-tag.single-answer {
  background-color: #87ceeb; /* 蓝色代表一人回答 */
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】飞行棋结算卡片样式 ▼▼▼ */
#ludo-summary-content h3 {
  text-align: center;
  color: var(--accent-color);
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: bold;
}
#ludo-summary-content .ludo-qa-log {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
  max-height: 300px; /* 给问答记录一个最大高度，内容多了可以滚动 */
  overflow-y: auto;
}
#ludo-summary-content h4 {
  margin-bottom: 10px;
  color: var(--text-primary);
}
#ludo-summary-content .qa-item {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #eee;
}
#ludo-summary-content .qa-item:last-child {
  border-bottom: none;
}
#ludo-summary-content .qa-question {
  font-weight: 600;
  color: #db7093; /* 一个可爱的粉紫色 */
  margin-bottom: 8px;
}
#ludo-summary-content .qa-answer {
  padding-left: 15px;
  font-size: 14px;
  color: var(--text-secondary);
}
#ludo-summary-content .qa-answer strong {
  color: var(--text-primary);
}
#phone-screen.dark-mode #ludo-summary-content .qa-answer {
  color: #bbb;
}

/* ▼▼▼ 【独家定制】角色手机消息列表 - 可爱磨砂透明圆角版 v3.0 ▼▼▼ */

/* 1. 给消息列表容器增加内边距和间距，为卡片留出呼吸空间 */
#character-chat-list.list-container {
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  gap: 15px; /* “我”的卡片和“其他人”卡片之间的间距 */
}

/* 2. 重置所有列表项的基础样式，移除旧的边框 */
#character-chat-list .chat-list-item {
  border-bottom: none !important;
}

/* 3. 【你的专属】单独设置“我的消息”(第一个)的可爱胶囊样式 */
#character-chat-list > .chat-list-item {
  background-color: rgba(255, 255, 255, 0.1); /* 超级透明的白色背景 */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 25px; /* 可爱的胶囊圆角 */
  border: 1px solid rgba(255, 255, 255, 0.15); /* 淡淡的亮边，增加质感 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 柔和的阴影，营造悬浮感 */
  padding: 15px; /* 增加内边距，让内容更舒服 */
  color: white; /* 文字颜色也变成白色 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 给文字加一点阴影保证清晰度 */
}
#character-chat-list > .chat-list-item .last-msg {
  color: rgba(255, 255, 255, 0.7); /* 预览消息的文字颜色淡一点 */
}

/* 4. 【你的专属】设置“其他人消息”容器的样式 */
.npc-chat-group {
  background-color: rgba(255, 255, 255, 0.1); /* 同样超级透明 */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 25px; /* 容器本身也是圆角 */
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 关键！让内部的列表项严格遵守容器的圆角 */
  padding: 5px 0; /* 容器内部的上下留白 */
}

/* 5. 设置容器内部单个消息的样式 */
.npc-chat-group .chat-list-item {
  background-color: transparent !important; /* 内部的项完全透明 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* 用淡淡的亮线分隔 */
  padding: 12px 15px;
  color: white; /* 文字颜色也是白色 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.npc-chat-group .chat-list-item .last-msg {
  color: rgba(255, 255, 255, 0.7);
}

/* 6. 移除容器内【最后一个】消息的下划线，让卡片底部更干净 */
.npc-chat-group .chat-list-item:last-child {
  border-bottom: none !important;
}
/* ▲▲▲ 定制结束 ▲▲▲ */

/* ======================================================================= */
/* ===         修复“查手机-外观设置”中预览图过大的问题 v1.0         === */
/* ======================================================================= */

/* 1. 修复手机壁纸和App内壁纸的预览 */
/* 
   问题原因：之前的样式是 background-size: cover，会强制图片填满预览框，导致裁剪。
   解决方案：改为 background-size: contain，让图片在框内完整显示。
*/
#char-phone-wallpaper-preview,
#char-phone-app-wallpaper-preview {
  background-size: contain !important;
  background-repeat: no-repeat !important; /* 防止图片在无法填满时重复平铺 */
}

/* 2. 修复两个桌面小组件的图片预览 */
/* 
   问题原因：和上面类似，但对于<img>标签，控制显示方式的属性是 object-fit。
   解决方案：同样将 cover 改为 contain。
*/
#char-phone-widget-preview-1,
#char-phone-widget-preview-2 {
  object-fit: contain !important;
  /* (可选美化) 为没有图片时的预览框加个底色，更好看 */
  background-color: #f0f2f5;
}
/* ======================================================================= */
/* ===         【V2 最终修复】修复查手机-小组件预览图过大问题         === */
/* ======================================================================= */

#char-phone-widget-preview-1,
#char-phone-widget-preview-2 {
  background-size: contain !important; /* 核心：让背景图完整显示 */
  background-repeat: no-repeat !important; /* 防止图片重复平铺 */
  background-position: center !important; /* 确保图片居中 */
}

/* ▼▼▼ 【独家定制】心动飞行棋输入框 - 粉色按钮版 v1.0 ▼▼▼ */

/* 1. 输入区域的容器样式 (保持不变) */
#ludo-action-area {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
}

/* 2. 文本输入框的样式 (保持不变) */
#ludo-action-area #ludo-user-speech-input {
  flex-grow: 1;
  border: none;
  padding: 10px 15px;
  border-radius: 20px;
  background-color: var(--secondary-bg);
  font-size: 16px;
  resize: none;
  max-height: 100px;
  line-height: 1.5;
  box-sizing: border-box;
}

/* 3. “确认回答”按钮的样式 (已修改为粉色) */
#ludo-action-area .form-button {
  width: auto !important;
  height: 40px;
  border-radius: 20px;
  padding: 0 20px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  margin: 0 !important;
  border: none;
  cursor: pointer;

  /* ★★★ 核心修改：使用可爱的粉色渐变和阴影 ★★★ */
  background: linear-gradient(135deg, #ff8fab, #fb6f92);
  color: white;
  box-shadow: 0 4px 10px rgba(251, 111, 146, 0.3);
  transition: all 0.2s ease-in-out;
}

/* ★★★ 新增：为按钮添加更生动的交互效果 ★★★ */
#ludo-action-area .form-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(251, 111, 146, 0.4);
}
#ludo-action-area .form-button:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 5px rgba(251, 111, 146, 0.3);
}

/* 4. 夜间模式适配 (保持不变) */
#phone-screen.dark-mode #ludo-action-area #ludo-user-speech-input {
  background-color: #2c2c2e;
  color: var(--text-primary);
}
/* ▲▲▲ 美化代码结束 ▲▲▲ */
/* ▼▼▼ 【全新】心声面板背景图样式 ▼▼▼ */
#inner-voice-main-panel.modal-content {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 我们给它加一个过渡效果，让背景切换更平滑 */
  transition: background-image 0.3s ease-in-out;
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】“谁是卧底”游戏样式 ▼▼▼ */

/* 玩家头像上显示角色身份的小图标 */
.player-seat .player-role-display {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 5px;
  font-weight: bold;
}

/* “你说我猜”发言输入区的美化 */
#undercover-action-area.speaking-mode {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
}
#undercover-action-area.speaking-mode #undercover-user-speech-input {
  flex-grow: 1;
  border: none;
  padding: 10px 15px;
  border-radius: 20px;
  background-color: var(--secondary-bg);
  font-size: 16px;
  resize: none;
  max-height: 100px;
  line-height: 1.5;
  width: auto !important;
  height: auto !important;
}
#undercover-action-area.speaking-mode #undercover-end-speech-btn {
  height: 40px;
  border-radius: 20px;
  padding: 0 15px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  margin: 0 !important;
  width: auto !important;
  background-color: var(--accent-color);
  color: white;
  border: none;
}
#phone-screen.dark-mode #undercover-action-area.speaking-mode #undercover-user-speech-input {
  background-color: #2c2c2e;
  color: var(--text-primary);
}

/* ▼▼▼ 第2步：将这段新样式粘贴到 <style> 的末尾 ▼▼▼ */

/* --- 【全新】用户发出的“解除关系”卡片样式 --- */

/* 1. 让卡片的容器气泡变透明，消除默认背景 */
.message-bubble.is-ls-disconnect .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 2. 卡片主体样式 */
.lovers-space-disconnect-card {
  width: 220px; /* 宽度可以自己调整 */
  background: linear-gradient(135deg, #f5f7fa, #e9ecef); /* 浅灰色渐变，更有质感 */
  border-radius: 12px;
  border: 1px solid #ced4da;
  display: flex;
  align-items: center;
  gap: 15px; /* 图标和文字的间距 */
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 3. 夜间模式下的卡片颜色 */
#phone-screen.dark-mode .lovers-space-disconnect-card {
  background: linear-gradient(135deg, #495057, #343a40);
  border-color: #6c757d;
}

/* 4. 心碎 Emoji 图标的样式 */
.lovers-space-disconnect-card .icon {
  font-size: 32px; /* Emoji 大小 */
  line-height: 1;
}

/* 5. 文字区域的样式 */
.lovers-space-disconnect-card .text-content .title {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是User自己的私信功能的所有新样式 ▼▼▼ */

/* --- 1. 私信列表页面 --- */
#user-dm-list-container .dm-list-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}
#user-dm-list-container .dm-list-item:hover {
  background-color: #f5f5f5;
}
#phone-screen.dark-mode #user-dm-list-container .dm-list-item:hover {
  background-color: #2c2c2e;
}
#user-dm-list-container .dm-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}
#user-dm-list-container .dm-info {
  flex-grow: 1;
  overflow: hidden;
}
#user-dm-list-container .dm-name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
#user-dm-list-container .dm-name {
  font-weight: 600;
  font-size: 16px;
}
#user-dm-list-container .dm-persona-tag {
  font-size: 10px;
  color: var(--text-secondary);
  background-color: #f0f0f0;
  padding: 2px 6px;
  border-radius: 4px;
}
#phone-screen.dark-mode #user-dm-list-container .dm-persona-tag {
  background-color: #3a3a3c;
}
#user-dm-list-container .dm-last-msg {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 2. 私信详情页面 (聊天界面) --- */
#user-dm-messages-container {
  background-color: #f0f2f5 !important;
}
#phone-screen.dark-mode #user-dm-messages-container {
  background-color: #000000 !important;
}

/* 复用主聊天界面的气泡样式，但为粉丝和User定义特定对齐方式 */
#user-dm-messages-container .message-wrapper.fan {
  align-self: flex-start;
}
#user-dm-messages-container .message-wrapper.fan .message-bubble {
  flex-direction: row;
}
#user-dm-messages-container .message-wrapper.fan .content {
  background-color: #ffffff; /* 粉丝用白色气泡 */
  color: var(--text-primary);
  border-radius: 2px 18px 18px 18px;
}

#user-dm-messages-container .message-wrapper.user-self {
  /* 使用新class，避免冲突 */
  align-self: flex-end;
}
#user-dm-messages-container .message-wrapper.user-self .message-bubble {
  flex-direction: row-reverse;
}
/* 你自己的消息，使用微博的橙色 */
#user-dm-messages-container .message-wrapper.user-self .content {
  background-color: #ff8200;
  color: white;
  border-radius: 18px 2px 18px 18px;
}

/* 夜间模式适配 */
#phone-screen.dark-mode #user-dm-messages-container .message-wrapper.fan .content {
  background-color: #2c2c2e;
}
#phone-screen.dark-mode #user-dm-messages-container .message-wrapper.user-self .content {
  background-color: #e67300;
}

/* ▼▼▼ 用这【一整块】代码，替换掉你旧的 user-dm-input-area 相关样式 ▼▼▼ */

/* --- 1. 私信输入区域的整体背景和边距 (这部分保持不变) --- */
#user-dm-input-area {
  border-top: 1px solid var(--border-color);
  background-color: #f7f7f7;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* --- 2. 核心布局：强制输入框和按钮在同一行 --- */
/* 我们用一个更精确的选择器，来确保样式能生效 */
#user-dm-detail-screen .chat-input-main-row {
  display: flex; /* 关键：设为flex布局 */
  flex-direction: row; /* 关键：强制横向排列 */
  align-items: flex-end; /* 让多行输入时，按钮和输入框底部对齐，更好看 */
  gap: 8px; /* 输入框和按钮组之间的间距 */
}

/* --- 3. 输入框：让它自动伸展，占满左侧所有空间 --- */
#user-dm-input-area #user-dm-input {
  flex-grow: 1; /* 关键！ */

  /* 下面是输入框的外观，保持不变 */
  border: 1px solid #ddd;
  border-radius: 18px;
  padding: 8px 15px;
  line-height: 1.5;
  min-height: 38px;
  max-height: 100px;
  resize: none;
  background-color: #fff;
}

/* --- 4. 按钮容器：让所有按钮在里面横向排列 --- */
#user-dm-input-area #input-actions-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0; /* 防止按钮们被挤压变形 */
}

/* --- 5. 【你的要求】修改“发送”按钮为圆角矩形 --- */
#user-dm-input-area #user-dm-send-btn {
  height: 38px;
  border-radius: 8px; /* ★★★ 修改点在这里！从 18px 改为 8px ★★★ */
  background-color: #ff8200;
  /* --- 以下为补充样式，让按钮更好看 --- */
  border: none;
  color: white;
  font-weight: 600;
  font-size: 14px;
  padding: 0 15px; /* 让文字不那么拥挤 */
}

/* --- 6. 其他两个图标按钮的样式 (保持不变) --- */
#user-dm-input-area .chat-action-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 0;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* --- 7. 夜间模式适配 (保持不变) --- */
#phone-screen.dark-mode #user-dm-input-area {
  background-color: #1c1c1e;
  border-top-color: #38383a;
}
#phone-screen.dark-mode #user-dm-input-area #user-dm-input {
  background-color: #2c2c2e;
  border-color: #38383a;
  color: white;
}
#phone-screen.dark-mode #user-dm-input-area .chat-action-icon-btn {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ▲▲▲ 替换结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是为User私信输入框新增的按钮样式 ▼▼▼ */

#user-dm-input-area #input-actions-wrapper {
  display: flex;
  align-items: flex-end; /* 确保按钮底部对齐 */
  gap: 8px; /* 按钮之间的间距 */
}

/* 复用主聊天界面的小图标按钮样式 */
#user-dm-input-area .chat-action-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 0;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

#phone-screen.dark-mode #user-dm-input-area .chat-action-icon-btn {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
}
/* ▲▲▲ 新增样式结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是User私信删除功能的所有新样式 ▼▼▼ */

/* --- 单条消息删除按钮 --- */
/* 1. 让每条消息的容器可以作为删除按钮的定位参考点 */
#user-dm-messages-container .message-wrapper {
  position: relative;
}

/* 2. 删除按钮本身的样式 */
.user-dm-message-delete-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-color: rgba(0, 0, 0, 0.1);
  color: #555;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  opacity: 0; /* 默认隐藏 */
  transition: all 0.2s ease;
  z-index: 10;
}

/* 3. 鼠标悬停在整条消息上时，才显示删除按钮 */
#user-dm-messages-container .message-wrapper:hover .user-dm-message-delete-btn {
  opacity: 1;
}
.user-dm-message-delete-btn:hover {
  background-color: #ff3b30;
  color: white;
}

/* 4. 根据消息是粉丝的还是你的，决定按钮的位置 */
#user-dm-messages-container .message-wrapper.fan .user-dm-message-delete-btn {
  right: -28px; /* 放在气泡右边 */
}
#user-dm-messages-container .message-wrapper.user-self .user-dm-message-delete-btn {
  left: -28px; /* 放在气泡左边 */
}

/* --- 左滑删除整个对话 --- */
/* 1. 滑动容器 */
.user-dm-list-item-swipe-container {
  position: relative;
  overflow: hidden;
  background-color: var(--secondary-bg);
}

/* 2. 可滑动的内容区 */
.user-dm-list-item-content {
  position: relative;
  z-index: 2;
  background-color: inherit;
  transition: transform 0.3s ease;
}
.user-dm-list-item-content.swiped {
  transform: translateX(-80px); /* 向左滑动80px，露出删除按钮 */
}

/* 3. 隐藏在后面的操作按钮区域 */
.user-dm-swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
}

/* 4. “删除”按钮的样式 */
.user-dm-swipe-actions .swipe-action-btn {
  height: 100%;
  padding: 0 20px;
  border: none;
  color: white;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  background-color: #ff3b30; /* 红色背景 */
}

/* 5. 修复分割线，让滑动效果更完美 */
#user-dm-list-container .dm-list-item {
  border-bottom: none; /* 移除原始的分割线 */
}
#user-dm-list-container .user-dm-list-item-swipe-container:not(:last-child) {
  border-bottom: 1px solid var(--border-color); /* 在滑动容器上添加新分割线 */
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】续火花图标样式 ▼▼▼ */
.streak-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px; /* 调整了字体大小，让它更精致 */
  color: #ff6f00; /* 温暖的橙色 */
  font-weight: bold;
  margin-left: 8px; /* 和角色名字拉开一点距离 */
  text-shadow: 0 0 5px rgba(255, 152, 0, 0.5); /* 加一点发光效果 */
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 的最末尾 ▼▼▼ */

/* --- 【全新】群成员管理列表样式 --- */
#member-management-list .list-container-title {
  padding: 10px 15px;
  font-size: 14px;
  color: var(--text-secondary);
  background-color: #f0f2f5;
}
#phone-screen.dark-mode #member-management-list .list-container-title {
  background-color: #1c1c1e;
}

#member-management-list .member-management-item {
  background-color: var(--secondary-bg);
}

/* 单个成员项 */
.member-management-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-color);
}

.member-management-item .avatar {
  width: 40px;
  height: 40px;
  border-radius: 6px; /* 方形圆角头像 */
  margin-right: 12px;
}

/* 成员信息（昵称、头衔、身份） */
.member-management-item .info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.member-management-item .info .name {
  font-weight: 500;
}
.member-management-item .info .tags {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 身份标签（群主/管理员） */
.member-management-item .role-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  color: white;
}
.role-tag.owner {
  background-color: #ffc107;
} /* 黄色 */
.role-tag.admin {
  background-color: #28a745;
} /* 绿色 */

/* 头衔标签 */
.member-management-item .title-tag {
  font-size: 11px;
  color: var(--text-secondary);
  background-color: #f0f2f5;
  padding: 2px 6px;
  border-radius: 4px;
}
#phone-screen.dark-mode .member-management-item .title-tag {
  background-color: #3a3a3c;
}

/* 操作按钮 */
.member-management-item .actions {
  display: flex;
  gap: 8px;
}
.member-management-item .actions button {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background-color: #f8f9fa;
}
#phone-screen.dark-mode .member-management-item .actions button {
  background-color: #3e3e42;
  border-color: #545458;
}
.member-management-item .actions button.danger {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

/* --- 【全新】聊天界面内的身份/头衔标签 --- */
.group-sender-tags {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  vertical-align: middle;
}
.group-role-tag,
.group-title-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 500;
  line-height: 1.4;
}
.group-role-tag.owner {
  background-color: #fff2c2;
  color: #d98c00;
  border: 1px solid #ffe89d;
}
.group-role-tag.admin {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.group-title-tag {
  background-color: #f0f2f5;
  color: var(--text-secondary);
}

#phone-screen.dark-mode .group-role-tag.owner {
  background-color: #594200;
  color: #ffd466;
  border-color: #795b00;
}
#phone-screen.dark-mode .group-role-tag.admin {
  background-color: #104a3c;
  color: #76ddc4;
  border-color: #176854;
}
#phone-screen.dark-mode .group-title-tag {
  background-color: #3a3a3c;
}

/* ▲▲▲ 新CSS粘贴结束 ▲▲▲ */
/* ▼▼▼ 【独家定制】请将这段【全新】的CSS代码，粘贴到<style>标签的末尾 ▼▼▼ */

/* 核心：专门为用户（user）在群聊中的消息行定义样式 */
.message-wrapper.user .group-sender-line {
  /* 1. 定位：从左侧定位改为右侧定位，与你的头像对齐 */
  left: auto;
  right: 50px; /* 原来是 left: 50px */

  /* 2. 布局翻转：这是实现“标签在左，昵称在右”的关键！*/
  flex-direction: row-reverse;
}

/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】群公告功能样式 ▼▼▼ */

/* 这是我们新加的群公告小黑板图标的样式 */
/* ▼▼▼ 请用这块代码替换你旧的 #group-announcement-btn 样式 ▼▼▼ */
#group-announcement-btn {
  display: none; /* JS控制显示，保持不变 */
  position: absolute; /* 核心修改：绝对定位 */
  left: 100%; /* 定位在标题的右边 */
  top: 50%; /* 垂直居中的第一步 */
  transform: translateY(-50%); /* 垂直居中的第二步 */
  margin-left: 5px; /* 与标题的间距 */

  /* 保持视觉样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: var(--accent-color);
  transition: background-color 0.2s;
  border-radius: 50%;
}
/* ▲▲▲ 替换结束 ▲▲▲ */
#group-announcement-btn:hover {
  background-color: rgba(0, 0, 0, 0.05); /* 鼠标悬停时给一点反馈 */
}
#phone-screen.dark-mode #group-announcement-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 公告弹窗的样式 */
#group-announcement-modal .modal-content {
  height: 70%; /* 让弹窗高一些，方便看公告 */
}

/* 公告内容的显示区域 */
#group-announcement-modal .modal-body {
  white-space: pre-wrap; /* 让换行符生效 */
  word-break: break-word; /* 防止长单词溢出 */
  line-height: 1.7; /* 增加行高，更易读 */
  font-size: 15px;
}

/* 编辑公告时，文本域的样式 */
#group-announcement-modal textarea {
  width: 100%;
  height: 100%; /* 占满整个内容区 */
  min-height: 300px;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px;
  font-size: 15px;
  line-height: 1.7;
  resize: vertical; /* 允许用户垂直拖动调整大小 */
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */

/* ▼▼▼ 【独家定制】群聊昵称与标签顺序修复 ▼▼▼ */

/* 1. 全局定义显示顺序：让标签永远在名字前面 */
.group-sender-line > .group-sender-tags {
  order: 1;
}
.group-sender-line > .sender-name {
  order: 2;
}

/* 2. 为【AI/他人消息】设置对齐方式 (靠左) */
.message-wrapper.ai .group-sender-line {
  justify-content: flex-start; /* 确保内容从左边开始 */
}

/* 3. 【核心修复】修正【你的消息】的对齐方式 (靠右) */
/* 这块代码会覆盖掉旧的、导致顺序错乱的规则 */
.message-wrapper.user .group-sender-line {
  left: auto;
  right: 50px; /* 保持原有的右侧定位 */
  flex-direction: row; /* 移除旧的“反转”效果 */
  justify-content: flex-end; /* 让内容块整体靠右，这样名字就能贴近你的头像了 */
}

/* ▲▲▲ 修复结束 ▲▲▲ */
/* ▼▼▼ 【全新】用户表情面板批量删除功能样式 ▼▼▼ */

/* 1. 当表情面板进入选择模式时，隐藏“添加/上传”按钮 */
#sticker-panel.selection-mode #add-sticker-btn,
#sticker-panel.selection-mode #upload-sticker-btn {
  display: none;
}

/* 2. 为表情格子添加选择框的视觉效果 */
.sticker-item.in-selection-mode::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease-in-out;
}

/* 3. 当表情被选中时，让选择框变成带对勾的√ */
.sticker-item.selected::before {
  background-color: var(--accent-color); /* 使用你的主题色 */
  border-color: var(--accent-color);
  content: '✔';
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}

/* 4. 底部批量删除操作栏的样式 */
#sticker-panel-footer {
  padding: 10px 15px;
  /* 适配iPhone底部安全区 */
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background-color: rgba(247, 247, 247, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

#sticker-panel-footer button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background-color: #ff3b30; /* 醒目的红色 */
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

#sticker-panel-footer button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】角色表情包批量删除功能样式 ▼▼▼ */

/* 1. 当进入选择模式时，隐藏顶部的“批量添加/本地上传”按钮 */
#char-sticker-manager-screen.selection-mode .panel-btn {
  display: none;
}

/* 2. 角色表情包的底部操作栏样式，和用户表情包的类似 */
#char-sticker-footer {
  padding: 10px 15px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background-color: rgba(247, 247, 247, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

#char-sticker-footer button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background-color: #ff3b30;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

#char-sticker-footer button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 3. 为页签内容区添加 active 类，用于JS控制显示/隐藏 */
.frame-content {
  display: none;
}
.frame-content.active {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是为心声面板编辑功能新增的CSS ▼▼▼ */

/* 当头部有这个class时，强制隐藏底部边框 */
#inner-voice-main-panel .modal-header.no-border {
  border-bottom: none !important;
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* 强制提升“心声样式编辑器”的层级，确保它能覆盖在心声面板之上 */
#inner-voice-editor-modal {
  z-index: 1001; /* 这个值比心声面板的默认层级(1000)要高 */
}

/* ▲▲▲ 修复结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是为心声面板图标新增的颜色控制样式 ▼▼▼ */

/* 1. 为心声面板定义一个CSS变量，并设置默认颜色 */
#inner-voice-main-panel {
  --iv-icon-color: #ff8a80; /* 你可以修改这个默认的粉红色 */
}

/* 2. 让所有目标图标的颜色都使用这个变量 */
#close-inner-voice-modal {
  color: var(--iv-icon-color);
}

#inner-voice-edit-btn svg,
#change-inner-voice-bg-btn svg,
#inner-voice-history-btn svg {
  /* 核心：将图标的线条颜色设置为我们定义的变量 */
  stroke: var(--iv-icon-color);
}
/* ▲▲▲ 新增样式结束 ▲▲▲ */
/* ▼▼▼ 【全新】AI生成群成员按钮样式 ▼▼▼ */
#member-management-actions #ai-generate-members-btn {
  background-color: #007bff; /* 一个醒目的蓝色 */
  color: white;
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】约会大作战App样式 (V5 - 终极修复版) ▼▼▼ */

#date-a-live-screen {
  background-color: #f0f2f5;
}
#phone-screen.dark-mode #date-a-live-screen {
  background-color: #000;
}

/* ★★★ 这是本次唯一的、但最关键的修改区域 ★★★ */
#dating-scene-content {
  flex: 1; /* ★★★ 核心1: 让内容区占据父容器（屏幕）的所有剩余空间 */
  min-height: 0; /* ★★★ 核心2: flex布局的一个重要技巧，防止内容溢出时产生意外的布局问题 */
  overflow-y: auto; /* ★★★ 核心3: 当内容超出容器高度时，自动显示垂直滚动条！*/

  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* ★★★ 修改结束 ★★★ */

.dating-scene-card {
  width: 100%;
  background-color: var(--secondary-bg);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, opacity 0.3s ease;

  /* 保持卡片内部为垂直flex布局，确保图片在上，文字在下 */
  display: flex;
  flex-direction: column;
  flex-shrink: 0; /* 防止卡片自身被意外压缩 */
}

.dating-scene-delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transition: background-color 0.2s;
}
.dating-scene-card:hover .dating-scene-delete-btn {
  opacity: 1;
}
.dating-scene-delete-btn:hover {
  background-color: #ff3b30;
}

.dating-scene-image-container {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #e9ecef;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-secondary);
  font-size: 14px;
  flex-shrink: 0;
}
#phone-screen.dark-mode .dating-scene-image-container {
  background-color: #2c2c2e;
}

.dating-scene-image-container .loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.dating-scene-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dating-scene-info {
  padding: 15px;
  text-align: center;
  flex-shrink: 0; /* 防止文字区域被压缩 */
}

.dating-scene-info .name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.dating-scene-info .cost {
  font-size: 16px;
  color: #ff5722;
  font-weight: bold;
  margin-top: 8px;
}
/* ▲▲▲ 样式结束 ▲▲▲ */
/* ▼▼▼ 【全新】借钱列表项美化样式 ▼▼▼ */
#borrow-money-char-list .character-select-item {
  gap: 12px; /* 在头像和名字之间增加一些间距 */
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】借条卡片样式 ▼▼▼ */
.message-bubble.is-borrow-request .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}

.borrow-card {
  width: 220px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e0c3fc, #8ec5fc); /* 温柔的紫蓝色渐变 */
  color: white;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(142, 197, 252, 0.4);
  position: relative;
  overflow: hidden;
}
.borrow-card::before {
  content: '💸'; /* 飞钱的Emoji作为装饰 */
  position: absolute;
  top: -5px;
  right: 10px;
  font-size: 32px;
  opacity: 0.15;
  transform: rotate(15deg);
}

.borrow-card .borrow-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.borrow-card .borrow-header span {
  color: #4a00e0; /* 深紫色突出借钱对象 */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.borrow-card .borrow-body .label {
  font-size: 13px;
  opacity: 0.8;
}

.borrow-card .borrow-body .amount {
  font-size: 32px;
  font-weight: 700;
  margin: 4px 0 10px 0;
}

.borrow-card .borrow-body .reason {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.9;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  word-break: break-all;
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* 1. 主容器 (保持不变) */
#dating-game-screen {
  background-color: #000;
  color: white;
}

/* 2. 背景图层 (最底层) */
#dating-game-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease-in-out, filter 0.5s ease-in-out;
  filter: blur(3px) brightness(0.8);
  transform: scale(1.05);
  z-index: 1; /* ★★★ 核心修改：明确指定层级为 1 ★★★ */
}

/* 4. UI层 (最顶层) */
.dating-game-ui-overlay {
  position: relative; /* 相对定位，因为它需要自然地排在最上层 */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 将内容推到底部 */
  padding-bottom: calc(env(safe-area-inset-bottom) + 15px);
  box-sizing: border-box;
  z-index: 3; /* ★★★ 核心修改：明确指定层级为 3，比立绘高，确保它永远在最上面！ ★★★ */
}
#dating-game-screen .header {
  position: absolute;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}
#dating-game-screen .header .back-btn {
  color: white;
}

/* --- ▼▼▼ 这里是本次修改的核心区域 ▼▼▼ --- */

.dating-game-textbox {
  display: flex; /* 1. 改为Flex布局 */
  flex-direction: column;
  justify-content: space-between; /* 2. 让内容和提示分开 */
  background-color: rgba(0, 0, 0, 0.75);
  padding: 15px 20px;
  margin: 0 15px 15px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 120px; /* 3. 设置一个固定的最小高度 */
  transition: opacity 0.5s, transform 0.5s;
  cursor: pointer;
  /* 4. 移除 overflow: auto，禁止其自身滚动 */
}

/* --- ▼▼▼ 在 .dating-game-textbox 规则之后，粘贴下面这段新代码 ▼▼▼ --- */

/* 文本内容的容器，我们给它一个淡入淡出的动画 */
.dating-game-textbox #dating-game-text-content {
  transition: opacity 0.2s ease-in-out;
}
/* 当句子切换时，先让旧句子淡出 */
.dating-game-textbox #dating-game-text-content.fade-out {
  opacity: 0;
}

/* “点击继续”的提示 */
.dating-game-textbox .continue-indicator {
  display: block;
  text-align: right;
  margin-top: 10px;
  font-size: 14px;
  color: #888;
  animation: pulse-indicator 1.5s infinite;
}
@keyframes pulse-indicator {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* --- ▲▲▲ 新增代码结束 ▲▲▲ --- */

.dating-game-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 15px;
  margin-bottom: 15px;
}

.dating-game-choice-btn {
  width: 100%;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 25px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: background-color 0.2s, transform 0.1s;
}

.dating-game-choice-btn.input-action {
  background-color: rgba(0, 123, 255, 0.4);
  border-color: rgba(0, 123, 255, 0.6);
}

.dating-game-choice-btn:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
.dating-game-choice-btn:active {
  transform: scale(0.98);
}
/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】约会大作战-文游界面UI增强样式 ▼▼▼ */

/* 1. 为文游界面顶部栏添加按钮容器 (这段代码已包含在步骤1中，如果已添加可忽略) */
#dating-game-screen .header {
  justify-content: space-between;
}

/* 3. 立绘层 (中间层) */
#dating-game-sprite-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: auto;
  max-height: 80%;
  pointer-events: none;
  transition: all 0.5s ease-in-out;
  z-index: 2; /* ★★★ 核心修改：明确指定层级为 2，比背景高 ★★★ */
}
#dating-game-sprite-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

/* 3. 设置弹窗样式 */
#dating-game-settings-modal .modal-content {
  height: 85%;
}
#dating-game-settings-modal .form-group {
  margin-bottom: 15px;
}
#dating-game-settings-modal hr {
  margin: 15px 0;
}
#dating-game-settings-modal .modal-body {
  padding-bottom: 15px;
}

/* 4. 立绘定位控制的样式 */
.position-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}
.position-controls label {
  flex-shrink: 0;
}
.position-controls input[type='range'] {
  flex-grow: 1;
}

/* ▲▲▲ 样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是为“立绘预设”功能新增的所有CSS样式 ▼▼▼ */

/* --- 立绘组编辑器 --- */
.sprite-edit-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--border-color);
  position: relative;
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
#phone-screen.dark-mode .sprite-edit-card {
  background-color: #2c2c2e;
}

.sprite-edit-card .preview-container {
  width: 80px;
  height: 120px;
  background-color: #e9ecef;
  border-radius: 6px;
  border: 1px dashed #ccc;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
#phone-screen.dark-mode .sprite-edit-card .preview-container {
  background-color: #3a3a3c;
  border-color: #555;
}

.sprite-edit-card .fields-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.sprite-edit-card textarea {
  min-height: 50px;
  resize: vertical;
}

.sprite-edit-card .delete-sprite-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background-color: #ff3b30;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}

/* --- 立绘组管理列表 --- */
.sprite-group-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color);
}
.sprite-group-list-item:hover {
  background-color: #f5f5f5;
}
#phone-screen.dark-mode .sprite-group-list-item:hover {
  background-color: #2c2c2e;
}
.sprite-group-list-item .group-name {
  font-weight: 500;
}
.sprite-group-list-item .group-actions button {
  margin-left: 8px;
  padding: 5px 10px;
  font-size: 13px;
}
/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】约会大作战-立绘定位控制样式 ▼▼▼ */

/* 这是包裹每个滑块（标签+滑块本身）的容器 */
.sprite-edit-card .position-controls {
  display: flex;
  align-items: center;
  gap: 10px; /* 标签和滑块的间距 */
  margin-top: 8px;
}

/* 这是“X 位置”、“Y 位置”、“大小”这些文字标签的样式 */
.sprite-edit-card .position-controls label {
  flex-shrink: 0; /* 防止标签文字被压缩换行 */
  width: 90px; /* 给一个固定的宽度，让所有滑块能左对齐 */
  font-size: 13px;
  color: var(--text-secondary);
}

/* 这是滑块旁边的实时数值显示的样式 */
.sprite-edit-card .position-controls .pos-value {
  font-weight: 500;
  color: var(--text-primary);
}

/* 这是滑块本身的样式 */
.sprite-edit-card .position-controls input[type='range'] {
  flex-grow: 1; /* 让滑块占据所有剩余空间 */
  width: 100%; /* 确保它能撑满 */
}

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】这是约会场景专属的“好感度”和“欲望值”心形UI样式 ▼▼▼ */

/* ▼▼▼ 【独家定制】这是为你修改后的“左上角”版本 ▼▼▼ */

/* 这是包裹两个数值条的总容器 */
#dating-values-container {
  position: absolute;

  /* ▼▼▼ 核心修改1：调整垂直位置，把它明确地放到Header下方 ▼▼▼ */
  /* 你的Header高度是110px，我们再加10px的间距，所以设置为120px */
  top: 120px;

  /* ▼▼▼ 核心修改2：调整水平位置，从右边移动到左边 ▼▼▼ */
  left: 15px; /* 原来是 right: 15px; */

  z-index: 5;
  display: none;
  flex-direction: column;
  gap: 8px;

  /* ▼▼▼ 核心修改3：让内部元素靠左对齐，更好看 ▼▼▼ */
  align-items: flex-start; /* 原来是 align-items: flex-end; */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* 这是每一行数值条（例如“浪漫值”那一行）的样式 */
.value-display {
  display: flex;
  align-items: center;
  gap: 4px; /* 心与心之间的间距 */
  background-color: rgba(0, 0, 0, 0.2); /* 给一个半透明的深色背景板，让心形更突出 */
  padding: 4px 8px;
  border-radius: 12px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* 这是单个心形图标的样式 */
.value-display svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5; /* 描边宽度 */
  transition: all 0.3s ease-in-out; /* 为填充和颜色变化添加动画 */
}

/* 这是“浪漫值”图标的颜色 */
#romance-value svg {
  color: #ff8fab; /* 可爱的粉红色 */
  stroke: #ffc2d1; /* 描边用更淡的粉色 */
}
/* 这是“性欲值”图标的颜色 */
#lust-value svg {
  color: #ffde59; /* 诱人的金黄色 */
  stroke: #ffeda6; /* 描边用更淡的黄色 */
}

/* “空心”状态：填充色为透明 */
.value-display svg .heart-fill {
  fill: transparent;
}
/* “实心”状态：填充色为图标的颜色 */
.value-display svg.filled .heart-fill {
  fill: currentColor;
}
/* ▲▲▲ 新增CSS样式结束 ▲▲▲ */
/* ▼▼▼ 【全新】约会完成度进度条样式 ▼▼▼ */

/* ▼▼▼ 这是为你修复后的进度条样式 ▼▼▼ */

/* 这是进度条的容器 (已移至底部) */
#dating-completion-bar-container {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom));

  /* 其他样式保持不变 */
  left: 15px;
  right: 15px;
  height: 18px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
  overflow: hidden;
  z-index: 4;
  display: none;
  transition: width 0.5s ease-in-out;
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* 进度条的填充部分 */
#dating-completion-bar-fill {
  width: 0%; /* 初始为0% */
  height: 100%;
  /* 使用一个漂亮的粉色渐变作为填充色 */
  background: linear-gradient(90deg, #ff8fab, #fb6f92);
  border-radius: 9px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑的宽度变化动画 */
}

/* 进度条上的百分比文字 */
#dating-completion-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: white;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* 文字阴影，确保清晰 */
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】约会结算卡片样式 ▼▼▼ */

#dating-summary-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dating-summary-card {
  background-color: transparent;
  width: 320px;
  height: 500px;
  perspective: 1000px; /* 为3D翻转效果设置透视 */
}

.dating-summary-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}

/* 当卡片被翻转时 */
.dating-summary-card.is-flipped .dating-summary-card-inner {
  transform: rotateY(180deg);
}

/* 卡片的正面和背面 */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

/* 正面样式 */
.card-front {
  color: white;
  background: linear-gradient(135deg, #a8b2c5, #8e9eab); /* 期待之夜的默认灰色渐变 */
  transition: background 0.3s;
}

/* 不同评级的背景颜色 */
.card-front.romantic {
  background: linear-gradient(135deg, #ff8fab, #fb6f92); /* 粉色渐变 */
}
.card-front.passionate {
  background: linear-gradient(135deg, #fff9c4, #fff176); /* 全新修改：这是一个非常漂亮的淡黄色渐变 */
}

/* ▼▼▼ 这是为你定制的“完美之夜”薰衣草色，请用它替换旧的 .card-front.perfect 样式 ▼▼▼ */
.card-front.perfect {
  /* 核心修改：这里使用了从淡紫到略深紫色的优雅渐变，营造出浪漫梦幻的感觉 */
  background: linear-gradient(135deg, #d1c4e9, #b39ddb);
}

.card-front #summary-card-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  object-fit: cover;
  margin-bottom: 20px;
}

.card-front #summary-card-rating {
  font-size: 28px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin: 0 0 10px 0;
}

.card-front .summary-card-tip {
  font-size: 14px;
  opacity: 0.8;
  margin-top: auto; /* 将提示推到底部 */
}

.summary-card-actions {
  display: flex;
  gap: 15px;
  width: 100%;
  margin-top: 20px;
}

.summary-card-actions button {
  flex: 1;
  padding: 12px;
  border-radius: 20px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

#summary-share-btn {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
}
#summary-close-btn {
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
}

/* 背面样式 */
.card-back {
  background-color: #f8f9fa;
  color: #333;
  transform: rotateY(180deg);
  justify-content: flex-start; /* 内容从顶部开始 */
}

.card-back-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.card-back-header span {
  font-weight: 600;
}
.card-back-header button {
  background: none;
  border: none;
  color: var(--accent-color);
  font-size: 16px;
  cursor: pointer;
}

.card-back-content {
  width: 100%;
  flex-grow: 1;
  overflow-y: auto;
  text-align: left;
  line-height: 1.6;
  font-size: 14px;
}
.card-back-content p {
  margin: 0 0 10px 0;
}

/* 聊天记录里分享卡片的样式 */
.message-bubble.is-dating-summary .content {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}

.dating-summary-chat-card {
  width: 220px;
  height: 120px;
  border-radius: 12px;
  padding: 15px;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.dating-summary-chat-card::before {
  content: '💖';
  position: absolute;
  top: -10px;
  left: -10px;
  font-size: 40px;
  opacity: 0.1;
  transform: rotate(-15deg);
}

.dating-summary-chat-card .rating {
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dating-summary-chat-card .tip {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 8px;
}
/* ▲▲▲ 新增CSS样式结束 ▲▲▲ */
/* ▼▼▼ 把这一整块全新的CSS，粘贴到 <style> 的末尾 ▼▼▼ */

/* --- 【全新】约会历史记录功能样式 --- */

/* --- 【全新 | 已修复布局】约会历史记录功能样式 --- */

/* 历史记录页面的主容器，现在负责滚动和布局 */
#dating-history-list {
  background-color: #f0f2f5; /* 保持原有的背景色 */

  /* ▼▼▼ 这是解决拥挤和重叠问题的核心代码 ▼▼▼ */
  display: flex; /* 1. 使用 Flex 布局，让卡片们听话地排列 */
  flex-direction: column; /* 2. 设置为垂直方向，从上到下堆叠 */
  gap: 15px; /* 3. 在每张卡片之间创建 15px 的垂直间距 */
  padding: 20px 15px; /* 4. 在列表的上下(20px)和左右(15px)都加上内边距，让整体不拥挤 */
  box-sizing: border-box; /* (推荐) 确保内边距不会影响布局计算 */

  /* 
       滚动条的功能由它的父容器 .list-container 提供，
       我们在这里正确地设置了布局，父容器就能正常滚动了！
    */
}

#phone-screen.dark-mode #dating-history-list {
  background-color: #1c1c1e; /* 夜间模式的背景色 */
}

/* 历史列表中的卡片，我们让它更适合列表显示 */
#dating-history-list .dating-summary-card {
  width: 100%; /* 卡片宽度撑满 (保持不变) */
  height: 180px; /* 给一个固定的高度，让列表更整齐 (保持不变) */
  position: relative;
  transform: none;
  left: auto;
  top: auto;
  margin: 0; /* (保持不变) */

  /* 【新增】防止卡片在 Flex 布局中被意外压缩变形 */
  flex-shrink: 0;
}

/* 历史列表中的卡片，正面样式微调 */
#dating-history-list .card-front {
  padding: 15px;
  justify-content: center;
  cursor: pointer; /* 鼠标放上去时显示小手，提示可以点击 */
}

#dating-history-list .card-front img {
  width: 70px !important;
  height: 70px !important;
  margin-bottom: 10px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

#dating-history-list .card-front h2 {
  font-size: 22px !important;
  margin: 0 0 5px 0 !important;
}

#dating-history-list .card-front p {
  margin-top: 5px !important;
}

/* 历史列表中的卡片，背面样式微调 */
#dating-history-list .card-back-header {
  flex-shrink: 0; /* 防止头部被压缩 */
}
#dating-history-list .card-back-content {
  font-family: sans-serif; /* 背面可以用更易读的非衬线字体 */
  font-size: 13px;
  line-height: 1.6;
}

/* ▲▲▲ 新增CSS样式结束 ▲▲▲ */

/* ▼▼▼ 【V4 - 终极修复版】请用这整块代码，替换所有旧的Sticker相关样式 ▼▼▼ */

/* 1. 这是每个表情的“格子”，现在它是一个flex容器，负责让图片和文字垂直居中排列 */
.sticker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px; /* 图片和文字之间的间距 */
  cursor: pointer;
}

/* ▼▼▼ 这是修改后的代码 ▼▼▼ */
/* 2. 【核心】这是专门用来显示“图片”的div */
.sticker-image {
  width: 100px; /* ★ 修改：从 80px 增大到 100px */
  height: 100px; /* ★ 修改：从 80px 增大到 100px */
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 3. 这是描述文字的样式 (支持最多2行) */
.sticker-name {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  width: 100%;
  line-height: 1.4;
  height: calc(12px * 1.4 * 2); /* 预留两行的高度，防止布局跳动 */

  /* 实现最多两行的省略号效果 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}

/* 4. 删除按钮的样式，现在它的父级是 .sticker-image */
.sticker-image .delete-btn {
  display: none;
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  background-color: #ff3b30;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  cursor: pointer;
  border: 2px solid white;
  z-index: 10;
}

/* 5. 【已修复】选择模式下的勾选标记样式 */
.sticker-image.in-selection-mode::before {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(120, 120, 128, 0.4);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
}

.sticker-image.selected::before {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  content: '✔';
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 18px;
}

/* ▲▲▲ V4 修复版CSS结束 ▲▲▲ */
/* ▼▼▼ 【全新】表情面板分类功能样式 ▼▼▼ */

/* 1. 分类页签栏容器 */
#sticker-category-tabs {
  flex-shrink: 0;
  padding: 10px 15px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 10px;
  overflow-x: auto;

  /* 隐藏滚动条，让界面更干净 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#sticker-category-tabs::-webkit-scrollbar {
  display: none;
}

/* 2. 单个分类胶囊按钮 */
.sticker-category-btn {
  padding: 6px 15px;
  border: 1px solid transparent;
  border-radius: 16px; /* 圆润的胶囊形状 */
  background-color: #e9ecef;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap; /* 防止文字换行 */
  transition: all 0.2s ease-in-out;
}

/* 夜间模式适配 */
#phone-screen.dark-mode .sticker-category-btn {
  background-color: #3a3a3c;
}

/* 3. 激活状态的胶囊按钮 */
.sticker-category-btn.active {
  background-color: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

/* 4. 分类管理弹窗内的列表项 */
#sticker-category-list label {
  display: block;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 6px;
}
#sticker-category-list label input {
  margin-right: 8px;
  vertical-align: middle;
}
#sticker-category-list label:hover {
  background-color: #f0f2f5;
}
#phone-screen.dark-mode #sticker-category-list label:hover {
  background-color: #2c2c2e;
}

/* 5. 编辑模式下底部操作栏的布局 */
#sticker-panel-footer {
  display: flex;
  gap: 10px;
}
#sticker-panel-footer button {
  flex: 1; /* 让两个按钮平分宽度 */
}
/* --- ▼▼▼ 在这里粘贴下面的新样式 ▼▼▼ --- */

/* ▼▼▼ 用这块【美化版】代码替换旧的 .sticker-category-delete-btn 样式 ▼▼▼ */
.sticker-category-delete-btn {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  /* ★ 核心修改1：背景色从红色改为半透明的深灰色，更有质感 */
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background-color 0.2s; /* 添加背景色过渡 */
  z-index: 1;
}

/* ★ 核心修改2：鼠标悬停时，背景色加深，而不是变红 */
.sticker-category-delete-btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* ▲▲▲ 新样式粘贴结束 ▲▲▲ */
/* ▼▼▼ 【全新】为角色表情面板单独设置更小的尺寸 ▼▼▼ */

/* 1. 缩小角色表情面板的网格单元尺寸 */
#char-sticker-manager-screen .sticker-grid {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

/* 2. 缩小角色表情面板里，每个表情图片容器的尺寸 */
#char-sticker-manager-screen .sticker-image {
  width: 80px;
  height: 80px;
}

/* ▲▲▲ 新增代码结束 ▲▲▲ */

/* ▼▼▼ RealImag多图布局样式 ▼▼▼ */
/* 多图容器 */
.post-images-grid {
  display: grid;
  gap: 8px; /* 图片之间的固定间距 */
  margin-top: 10px;
}

/* 单张图片 - 大图，等比例缩放 */
.post-images-grid.grid-1 {
  grid-template-columns: 1fr;
  justify-items: start;
}
.post-images-grid.grid-1 .realimag-image,
.post-images-grid.grid-1 .naiimag-image {
  max-width: 280px;
  max-height: 280px;
  width: auto;
  height: auto;
}

/* 2张图片 - 横向并排，等比例缩放 */
.post-images-grid.grid-2 {
  grid-template-columns: auto auto;
  gap: 5px;
  justify-content: start;
}
.post-images-grid.grid-2 .realimag-image,
.post-images-grid.grid-2 .naiimag-image {
  max-width: 135px;
  max-height: 135px;
  width: auto;
  height: auto;
}

/* 3张图片 - 横向排列，等比例缩放 */
.post-images-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.post-images-grid.grid-3 .realimag-image {
  max-width: 130px;
  max-height: 130px;
  width: auto;
  height: auto;
}

/* 4张图片 - 2x2方格，等比例缩放 */
.post-images-grid.grid-4 {
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.post-images-grid.grid-4 .realimag-image {
  max-width: 195px;
  max-height: 195px;
  width: auto;
  height: auto;
}

/* 5张图片 - 上2下3，等比例缩放 */
.post-images-grid.grid-5 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.post-images-grid.grid-5 .realimag-image:nth-child(1),
.post-images-grid.grid-5 .realimag-image:nth-child(2) {
  grid-column: span 3;
  max-width: 195px;
  max-height: 195px;
  width: auto;
  height: auto;
}
.post-images-grid.grid-5 .realimag-image:nth-child(n + 3) {
  grid-column: span 2;
  max-width: 130px;
  max-height: 130px;
  width: auto;
  height: auto;
}

/* 6张图片 - 3x2网格，等比例缩放 */
.post-images-grid.grid-6 {
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.post-images-grid.grid-6 .realimag-image {
  max-width: 130px;
  max-height: 130px;
  width: auto;
  height: auto;
}

/* 7-9张图片 - 3x3九宫格，等比例缩放 */
.post-images-grid.grid-7,
.post-images-grid.grid-8,
.post-images-grid.grid-9 {
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.post-images-grid.grid-7 .realimag-image,
.post-images-grid.grid-8 .realimag-image,
.post-images-grid.grid-9 .realimag-image {
  max-width: 130px;
  max-height: 130px;
  width: auto;
  height: auto;
}

/* 图片基础样式 - 完整显示，等比例缩放，不裁剪 */
.post-images-grid .realimag-image,
.post-images-grid .naiimag-image {
  object-fit: contain;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}
.post-images-grid .realimag-image:hover,
.post-images-grid .naiimag-image:hover {
  transform: scale(1.05);
}
/* ▲▲▲ RealImag多图布局样式结束 ▲▲▲ */
/* --- 桃宝“我的”页面交易明细样式优化 --- */
.transaction-item {
  /* 将主轴对齐方式改为居中，让左右两边能垂直对齐 */
  align-items: center;
}

.transaction-amount-wrapper {
  display: flex;
  align-items: center;
  gap: 10px; /* 在金额和删除按钮之间增加一点间距 */
  margin-left: auto; /* 关键！让这个容器自动推到最右边 */
}

.delete-transaction-btn {
  background-color: #ffdddd;
  color: #ff3b30;
  border: 1px solid #ffc2d1;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  line-height: 22px; /* 垂直居中叉号 */
  padding: 0;
  flex-shrink: 0; /* 防止按钮被挤压变形 */
}

.delete-transaction-btn:hover {
  background-color: #ffc2d1;
}
#send-location-btn {
  display: flex !important; /* 确保按钮本身是可见的 */
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}
/* ▼▼▼ 这是为“表情分类删除”功能新增的CSS ▼▼▼ */

/* 1. 让每个分类按钮成为删除按钮的定位参考点 */
.sticker-category-btn {
  position: relative; /* 关键！*/
  display: inline-flex; /* 让按钮内部的文字和删除图标能对齐 */
  align-items: center;
  padding-right: 10px; /* 为右侧的删除按钮留出一点空间 */
}

/* 2. 编辑模式下，为分类按钮添加一个视觉提示 */
#sticker-panel.selection-mode .sticker-category-btn:not(:first-child):hover {
  background-color: #ffe5e5;
  border-color: #ffc2d1;
}

/* ▼▼▼ 用这块【美化版】代码替换旧的 .sticker-category-delete-btn 样式 ▼▼▼ */
.sticker-category-delete-btn {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  /* ★ 核心修改1：背景色从红色改为半透明的深灰色，更有质感 */
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background-color 0.2s; /* 添加背景色过渡 */
  z-index: 1;
}

/* ★ 核心修改2：鼠标悬停时，背景色加深，而不是变红 */
.sticker-category-delete-btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* 4. 【核心】当表情面板处于编辑模式时，才显示删除按钮 */
#sticker-panel.selection-mode .sticker-category-btn:not(:first-child) .sticker-category-delete-btn {
  display: block; /* 在编辑模式下显示 */
}

/* ▲▲▲ 新增CSS结束 ▲▲▲ */
/* 1. 亲密记录按钮 ✨ */
.intimacy-panel-btn {
  font-size: 14px; /* 图标大小 */
  margin-left: 6px; /* 和火花图标的间距 */
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
  vertical-align: middle; /* 确保和火花图标垂直对齐 */
  display: inline-block; /* 允许 transform */
}
.intimacy-panel-btn:hover {
  opacity: 1;
  transform: scale(1.3) rotate(20deg); /* 悬浮时放大并旋转，增加趣味性 */
}

/* 2. 亲密记录面板整体 */
#intimacy-panel .modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 各个区块之间的间距 */
  padding: 15px 20px;
}

/* 3. 面板内的各个区块 */
.intimacy-summary {
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}
.intimacy-summary h3 {
  margin: 0 0 5px 0;
  color: var(--accent-color); /* 使用你的主题色 */
  font-size: 24px;
}
.intimacy-summary p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}
.intimacy-section h4 {
  margin-bottom: 15px;
  border-left: 4px solid var(--accent-color);
  padding-left: 10px;
  font-size: 16px;
}

/* 4. 每日互动记录列表 */
#intimacy-daily-log {
  background-color: var(--secondary-bg);
  border-radius: 8px;
}
#intimacy-daily-log .log-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
}
#intimacy-daily-log .log-item:last-child {
  border-bottom: none;
}
#intimacy-daily-log .date {
  color: var(--text-secondary);
}
#intimacy-daily-log .count {
  font-weight: 500;
}

/* 5. 成就徽章网格 */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
  gap: 20px;
  text-align: center;
}
.achievement-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.achievement-item .icon {
  font-size: 36px;
  line-height: 1;
}
.achievement-item .name {
  font-size: 12px;
  color: var(--text-secondary);
}
/* 给未获得的成就一个置灰效果 */
.achievement-item.locked {
  opacity: 0.3;
  filter: grayscale(1);
}
/* ▼▼▼ 【全新】亲密值系统相关CSS样式 ▼▼▼ */

/* 聊天列表里的亲密值按钮 */
.intimacy-btn {
  font-size: 14px; /* 图标大小 */
  margin-left: 8px; /* 和火花图标拉开一点距离 */
  cursor: pointer;
  transition: transform 0.2s ease;
  filter: grayscale(0.5); /* 默认是灰色，看起来不突兀 */
}
.intimacy-btn:hover {
  transform: scale(1.2);
  filter: grayscale(0); /* 悬浮时变彩色 */
}

/* 亲密值面板整体样式 */
#intimacy-panel .modal-content {
  background-color: #f7f3f8; /* 温柔的淡紫色背景 */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid #e1dbe6;
  max-width: 340px;
  width: 90%;
  height: auto;
  max-height: 85vh;
}
#intimacy-panel .modal-header span {
  font-weight: 600;
  color: #6a4c95;
}
#intimacy-panel .modal-body {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#intimacy-panel hr {
  width: 100%;
  border: none;
  border-top: 1px solid #e1dbe6;
  margin: 5px 0;
}
#intimacy-panel h3 {
  font-size: 16px;
  color: #6a4c95;
  margin: 0 0 10px 0;
  border-left: 3px solid #8e6ac5;
  padding-left: 8px;
}

/* 亲密值分数显示区域 */
#intimacy-display {
  text-align: center;
  padding: 10px 0;
}
#intimacy-display p {
  margin: 0;
  font-size: 14px;
  color: #8a8a8a;
}
#intimacy-score-display {
  font-size: 48px;
  font-weight: 700;
  color: #ff69b4; /* 浪漫的粉红色 */
  text-shadow: 0 2px 8px rgba(255, 105, 180, 0.4);
  margin: 5px 0;
}

/* 详细数据展示区域 */
#intimacy-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 8px 12px;
  border-radius: 8px;
}
.detail-item span:last-child {
  font-weight: 500;
  color: #4a4a4a;
}

/* 徽章列表区域 */
#symbol-list-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}
.symbol-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
}
.symbol-icon {
  font-size: 32px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #e9e4ed;
  color: #a9a9a9;
  transition: all 0.3s ease;
  margin-bottom: 5px;
}
.symbol-item.unlocked .symbol-icon {
  background-color: #ffeff7;
  color: #ff69b4;
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(255, 105, 180, 0.3);
}
.symbol-name {
  font-size: 12px;
  color: #888;
  text-align: center;
}
.symbol-item.unlocked .symbol-name {
  color: #333;
  font-weight: 500;
}
.symbol-level {
  font-size: 10px;
  color: #aaa;
}

/* 解锁记录区域 */
#unlocked-symbols-record {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 150px;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px;
  border-radius: 8px;
}
.record-item {
  font-size: 13px;
  color: #555;
}
.record-item .symbol {
  margin-right: 8px;
}
.record-item .date {
  float: right;
  color: #999;
  font-size: 12px;
}

/* ▲▲▲ 新增CSS样式结束 ▲▲▲ */
/* ▼▼▼ 【全新】亲密值徽章系统 v2.1 (尺寸调整版) CSS样式 ▼▼▼ */

/* 聊天列表里佩戴的徽章图片 - 基础样式 */
.intimacy-badge-display img {
  height: 1.1em; /* 默认大小，适用于“星光闪烁”和“热情如火” */
  vertical-align: middle;
  margin-left: 5px;
}

/* ★★★ 这就是我们本次新增的核心代码 ★★★ */
/* 为需要缩小的徽章设置一个更小的高度 */
.intimacy-badge-display img.first_heartbeat,
.intimacy-badge-display img.only_crown,
.intimacy-badge-display img.eternal_diamond {
  height: 0.9em; /* 你可以调整这个值，比如 0.95em 或 1em */
}
/* ★★★ 新增代码结束 ★★★ */

/* 亲密值面板 - 徽章列表容器 */
#symbol-list-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

/* 亲密值面板 - 单个徽章项目 */
.symbol-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.symbol-item:hover {
  transform: translateY(-3px);
}

/* 亲密值面板 - 徽章图标容器 */
.symbol-icon {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #e9e4ed;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  margin-bottom: 5px;
  overflow: hidden;
}
.symbol-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.symbol-icon.not-unlocked img {
  filter: grayscale(1);
  opacity: 0.6;
}

/* 解锁后的徽章样式 */
.symbol-item.unlocked .symbol-icon {
  background-color: #ffeff7;
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(255, 105, 180, 0.3);
}
.symbol-item.unlocked .symbol-icon img {
  filter: grayscale(0);
  opacity: 1;
}

/* 被佩戴的徽章的特殊样式 */
.symbol-item.selected .symbol-icon {
  border-color: #ff69b4;
  box-shadow: 0 0 15px rgba(255, 105, 180, 0.7);
}

/* 徽章名称 */
.symbol-name {
  font-size: 12px;
  color: #888;
  text-align: center;
}
.symbol-item.unlocked .symbol-name {
  color: #333;
  font-weight: 500;
}

/* 解锁等级 */
.symbol-level {
  font-size: 10px;
  color: #aaa;
}

/* "不佩戴" 按钮的特殊样式 */
.symbol-icon.no-badge {
  font-size: 32px;
  background: #ddd;
  color: #fff;
}
/* ▲▲▲ 新增CSS样式结束 ▲▲▲ */
/* 让“饿了么”的美食卡片在鼠标悬浮时有交互效果 */
.eleme-food-card {
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.eleme-food-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
/* ▼▼▼ 在 <style> 标签内粘贴 ▼▼▼ */

/* 这是外卖卡片专属的透明气泡样式 */
.message-bubble.is-waimai-gift-from-char {
  background-color: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: 250px; /* 让卡片宽度适中 */
}

/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* 这是为异步加载图片新增的容器样式 */
.product-card .product-image-container {
  width: 100%;
  /* 我们让高度等于宽度，实现1:1的正方形比例 */
  padding-bottom: 100%;
  position: relative;
  background-color: #f0f2f5; /* 加载时的占位背景色 */
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 加载动画样式 (你可以复用其他地方的) */
.product-card .loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--accent-color, #007bff);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 确保图片能正确填充容器 */
.product-card .product-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ▼▼▼ 【表情包白底/边框终极修复】请将这块代码粘贴到样式末尾 ▼▼▼ */

/* 
  核心原理：
  这个选择器非常精确地指向了“作为表情包的气泡”内部的“内容区域”，
  并用 !important 强制覆盖掉所有可能的主题样式，让它彻底“消失”。
*/
.message-bubble.is-sticker .content {
  padding: 0 !important; /* 强制移除内边距 */
  background: transparent !important; /* 强制移除背景 */
  border: none !important; /* 强制移除边框 */
  box-shadow: none !important; /* 强制移除阴影 */
}

/* ▲▲▲ 修复结束 ▲▲▲ */
/* 外卖卡片备注样式 */
.waimai-remark {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
  font-size: 13px;
  text-align: left;
}
.waimai-remark .remark-label {
  font-weight: 600;
  color: #007bff; /* 饿了么蓝 */
  margin-right: 5px;
}
.waimai-remark .remark-text {
  color: #333;
}
/* ▼▼▼ 这是为“首页”搜索栏新增的美化代码 ▼▼▼ */

/* 1. 把首页的搜索栏容器变成一个圆润的白色“胶囊” */
#products-view .taobao-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: white;
  padding: 6px 8px;
  border-radius: 25px; /* 大圆角，形成胶囊形状 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 加一点淡淡的阴影 */
  /* 移除旧的边框和内边距，以新样式为准 */
  border: none;
  margin-bottom: 15px; /* 和下方的分类保持一点距离 */
}

/* 2. 美化首页的输入框，让它“融入”白色胶囊背景 */
#products-view #product-search-input {
  flex-grow: 1; /* 占据所有可用空间 */
  border: none; /* 去掉它自己的边框 */
  background: transparent; /* 背景透明 */
  outline: none; /* 去掉点击时的轮廓线 */
  padding: 8px; /* 给文字一点呼吸的空间 */
  font-size: 15px;
  color: #333;
}

/* 3. 美化首页的“搜索”按钮 */
#products-view #product-search-btn {
  background-color: #ff5722; /* 淘宝橙色 */
  color: white;
  border: none;
  border-radius: 18px; /* 让按钮也变圆润 */
  padding: 8px 15px;
  font-weight: 500;
  cursor: pointer;
}

/* ▲▲▲ 粘贴到这里结束 ▲▲▲ */
/* ▼▼▼ 这是为“饿了么”搜索栏新增的布局和美化代码 ▼▼▼ */

/* 1. 将饿了么的搜索总容器改为垂直排列，让两组按钮上下堆叠 */
#eleme-view .taobao-search-bar {
  display: flex;
  flex-direction: column; /* 改为垂直排列 */
  gap: 12px; /* 设置两行之间的垂直间距 */
  background-color: transparent; /* 移除容器本身的背景和边框 */
  padding: 0;
  box-shadow: none;
  border: none;
}

/* 2. 为第一行（搜索框+搜索按钮）设置和首页一样的“胶囊”样式 */
.eleme-search-group {
  display: flex;
  background-color: white;
  padding: 5px;
  border-radius: 25px; /* 圆润的胶囊形状 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.eleme-search-group #eleme-search-input {
  flex-grow: 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 8px;
  font-size: 15px;
}

.eleme-search-group #eleme-search-btn {
  background-color: #ff5722; /* 淘宝橙 */
  color: white;
  border: none;
  border-radius: 18px; /* 按钮也变圆润 */
  padding: 8px 15px;
  font-weight: 500;
  cursor: pointer;
}

/* 3. 为第二行（三个功能按钮）设置布局，让它们居中并排 */
.eleme-actions-group {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 整体居中 */
  gap: 10px; /* 按钮之间的间距 */
}

/* 4. 美化第二行的三个功能按钮 */
.eleme-actions-group button {
  flex: 1; /* 让三个按钮平分宽度，排列更整齐 */
  padding: 10px; /* 增加按钮的高度 */
  border-radius: 12px; /* 可爱的圆角 */
  border: 1px solid #e0e0e0;
  background-color: white;
  font-size: 16px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 为按钮添加一个漂亮的点击效果 */
.eleme-actions-group button:active {
  transform: scale(0.95);
  background-color: #f0f0f0;
}

/* 适配夜间模式 */
#phone-screen.dark-mode .eleme-search-group {
  background-color: #2c2c2e;
}
#phone-screen.dark-mode .eleme-search-group #eleme-search-input {
  color: white;
}
#phone-screen.dark-mode .eleme-actions-group button {
  background-color: #2c2c2e;
  border-color: #38383a;
  color: white;
}

/* ▲▲▲ 新增代码结束 ▲▲▲ */
/* ▼▼▼ 这是为你设计的“饿了么”功能按钮美化样式 v3.0 (小巧版) ▼▼▼ */

/* 1. 为按钮的容器增加一个下边距 */
.eleme-actions-group {
  margin-bottom: 15px;
}

/* 2. 重新定义按钮的样式，让它变小 */
.eleme-actions-group button {
  /* --- 核心修改在这里 --- */
  width: 90px; /* 新增：给按钮一个固定的、小巧的宽度 */
  padding: 6px 0; /* 修改：减少了上下的内边距，让按钮变矮 */
  font-size: 15px; /* 修改：稍微缩小字体 */

  background-color: transparent;
  border: 1.5px solid #ff9a69;
  color: #ff5722;
  border-radius: 20px;
  font-weight: 600;
  transition: all 0.2s ease;

  /* 移除之前让按钮自动拉伸的属性 */
  flex: none; /* 或者直接删除 flex: 1 那一行 */
}

/* 3. 单独微调 "+" 按钮，让它看起来更舒服 */
#eleme-add-manual-btn {
  font-size: 22px; /* 把加号本身放大一点，视觉上更平衡 */
  line-height: 1; /* 辅助垂直居中 */
}

/* 4. 交互效果保持不变 */
.eleme-actions-group button:hover {
  background-color: #ff5722;
  color: white;
  border-color: #ff5722;
}

.eleme-actions-group button:active {
  transform: scale(0.96);
  opacity: 0.9;
}

/* 5. 适配夜间模式 */
#phone-screen.dark-mode .eleme-actions-group button {
  background-color: transparent;
  border-color: #ff9a69;
  color: #ff9a69;
}

#phone-screen.dark-mode .eleme-actions-group button:hover {
  background-color: #ff5722;
  color: white;
}

/* ▲▲▲ 新增代码结束 ▲▲▲ */
/* ▼▼▼ 用这整块代码，替换掉所有旧的 waimai-meituan-card 和 waimai-gift-card 样式 ▼▼▼ */

/* ======================================= */
/* === 【全新 | 统一风格】外卖卡片样式 === */
/* ======================================= */

/* 1. 将两个卡片的样式合并，确保宽度一致 */
.waimai-meituan-card,
.waimai-gift-card {
  width: 240px; /* 统一宽度为240px */
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 2. 统一设置头部的样式（美团黄！） */
.waimai-meituan-card .gift-card-header,
.waimai-gift-card .header {
  /* 兼容两种不同的头部class名 */
  background-color: #ffd100; /* 美团黄 */
  color: #333333;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.waimai-meituan-card .gift-card-header .icon,
.waimai-gift-card .header .icon {
  font-size: 24px;
  line-height: 1;
}

/* 3. 【核心修复】让标题可以自动换行 */
.waimai-meituan-card .gift-card-header .title,
.waimai-gift-card .header .title {
  font-weight: 600;
  font-size: 15px;
  flex-grow: 1; /* 允许标题占据剩余空间 */
  min-width: 0; /* flex布局下换行的关键 */
  white-space: normal; /* 允许换行 */
}

/* 4. 统一内容区域的样式 */
.waimai-meituan-card .gift-card-body,
.waimai-gift-card .body {
  padding: 15px;
}

.waimai-meituan-card .greeting,
.waimai-gift-card .body .food-name {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  margin: 0 0 4px 0;
}

.waimai-meituan-card .gift-card-body p:not(.greeting),
.waimai-gift-card .body .restaurant {
  font-size: 13px;
  color: #888;
  margin: 0;
}

.waimai-meituan-card .waimai-remark,
.waimai-gift-card .footer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed #e0e0e0;
  font-size: 13px;
  text-align: left;
  color: #555;
}
.waimai-meituan-card .waimai-remark .remark-label {
  font-weight: 600;
  color: #8a8a8a;
  margin-right: 5px;
}

/* ▲▲▲ 替换结束 ▲▲▲ */
/* ▼▼▼ 【全新】情侣空间 - 今日足迹样式 ▼▼▼ */

/* 生成按钮的容器 */
.ls-activity-generate-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--text-secondary);
}

.ls-activity-generate-container p {
  margin-bottom: 20px;
  font-size: 16px;
}

.ls-activity-generate-container .hint {
  font-size: 12px;
  color: #b0b0b0;
  margin-top: 10px;
}

#ls-generate-activity-btn {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
  transition: all 0.2s ease;
}

#ls-generate-activity-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);
}

/* 活动列表样式 */
#ls-activity-list {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ls-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.activity-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: 20px;
  background-color: #f0f2f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.activity-content {
  padding-top: 2px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
  flex-grow: 1;
}

.ls-activity-item:last-child .activity-content {
  border-bottom: none;
}

.activity-time {
  font-weight: 600;
  color: var(--text-primary);
}

.activity-description {
  margin: 4px 0 0 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ▲▲▲ 今日足迹样式结束 ▲▲▲ */
/* ▼▼▼ 【优化版】这是每日足迹的胶囊气泡样式 ▼▼▼ */

/* 列表总容器样式（保持不变） */
#ls-activity-list {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ▼▼▼ 这是【玻璃质感修复版】的胶囊气泡样式 ▼▼▼ */
.ls-activity-item {
  position: relative; /* 定位基准，保持不变 */

  /* --- 核心修改：实现玻璃质感 --- */
  background-color: rgba(255, 255, 255, 0.15); /* 1. 半透明的白色背景 */
  backdrop-filter: blur(10px) saturate(1.5); /* 2. 核心！毛玻璃模糊效果并增加一点饱和度 */
  -webkit-backdrop-filter: blur(10px) saturate(1.5); /* 兼容 Safari 浏览器 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 3. 一个非常微妙的亮色边框，模拟玻璃边缘 */
  /* --- 修改结束 --- */

  border-radius: 50px; /* 胶囊形状，保持不变 */
  padding: 12px 20px 12px 75px; /* 内边距，保持不变 */
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 可以保留一个更柔和的阴影 */
}
/* ▲▲▲ 替换结束 ▲▲▲ */

/* ★★★ 核心修改 1：调整时间戳的位置和外观 ★★★ */
.ls-activity-item .activity-time {
  position: absolute;
  left: 20px; /* 距离左边缘20px */
  top: 13px; /* 距离顶部13px，使其在视觉上更协调 */
  /* 移除了 transform 和垂直居中的代码 */

  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  /* 移除了背景色，让它更纯净 */
  padding: 0;
  background-color: transparent;
}

/* ★★★ 核心修改 2：确保 Emoji 图标本身没有背景 ★★★ */
.ls-activity-item .activity-icon {
  font-size: 20px;
  background: none; /* 明确设置背景为无，防止意外样式 */
}

/* 中间主要内容的容器（保持不变） */
.ls-activity-item .activity-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.4;
}

/* 描述文字的样式（保持不变） */
.ls-activity-item .activity-description {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
}

/* 时长文字的样式（保持不变） */
.ls-activity-item .activity-duration {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ▲▲▲ 样式替换结束 ▲▲▲ */
/* ▼▼▼ 【全新】情侣空间 - 今日足迹HTML小剧场样式 ▼▼▼ */

/* 小剧场卡片的通用容器样式 */
.ls-activity-snippet {
  width: 85%;
  max-width: 280px; /* 限制最大宽度，避免在宽屏上太丑 */
  margin: 10px auto 25px auto; /* 上下边距，左右自动居中 */
  padding: 15px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
  color: #333;
}

/* 电影票根的专属样式 */
.movie-ticket {
  padding: 0;
  border: 1px dashed #ccc;
  position: relative;
}
.movie-ticket::before,
.movie-ticket::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: var(--secondary-bg, #f0f2f5); /* 确保和背景色一致 */
  border-radius: 50%;
  border: 1px dashed #ccc;
}
.movie-ticket::before {
  top: 50%;
  left: -11px;
  transform: translateY(-50%);
}
.movie-ticket::after {
  top: 50%;
  right: -11px;
  transform: translateY(-50%);
}
.movie-ticket .ticket-header {
  background-color: #d82626;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 8px;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}
.movie-ticket .ticket-body {
  padding: 15px;
  text-align: center;
}
.movie-ticket .ticket-body h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}
.movie-ticket .ticket-body p {
  margin: 0;
  font-size: 13px;
  color: #555;
}

/* 购物小票/收据的专属样式 */
.receipt {
  padding: 10px;
  background-color: #fffaf0; /* 淡黄色背景 */
  border: 1px solid #eee;
  font-family: 'Courier New', Courier, monospace; /* 使用等宽字体，更像小票 */
}
.receipt .receipt-header {
  text-align: center;
  font-weight: bold;
  padding-bottom: 8px;
  border-bottom: 1px dashed #ccc;
  margin-bottom: 8px;
}
.receipt ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.receipt ul li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  line-height: 1.8;
}
.receipt .receipt-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #ccc;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

/* ▲▲▲ 样式添加结束 ▲▲▲ */
/* 【全新】每日足迹 - 顶部样式 */
.ls-activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  margin: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(5px);
}

.ls-activity-date-display {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
}

#ls-activity-calendar-icon {
  cursor: pointer;
  transition: transform 0.2s;
}
#ls-activity-calendar-icon:hover {
  transform: scale(1.1);
}

/* 【全新】每日足迹 - 日历弹窗专属样式 */
.ls-calendar-day.has-activity {
  background-color: #fff0f5; /* 有足迹的日期，给一个淡淡的粉色背景 */
  border-radius: 8px;
  position: relative;
}
.activity-dot {
  font-size: 12px; /* 可爱的小爪印 🐾 */
  position: absolute;
  bottom: 2px;
  right: 4px;
  line-height: 1;
}
#character-chat-list.list-container {
  flex-grow: 1;      /* 让它占据所有剩余的垂直空间 */
  overflow-y: auto;  /* 当内容超出时，自动显示垂直滚动条 */
  min-height: 0;     /* 解决Flex布局下的滚动兼容性问题，这是这次修复最关键的一行！ */
  padding: 0;        /* 保持你的内联样式，移除内边距 */
  background-color: var(--secondary-bg); /* 添加一个背景色，与页面统一 */
}

/* 夜间模式适配，确保滚动区域的背景色在夜间模式下也正确 */
#phone-screen.dark-mode #character-chat-list.list-container {
    background-color: #000000;
}