@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap");

/* ============================================================ */
/* === Z-Index 层级规范 (Unified Z-Index System) ===           */
/* ============================================================ */
/* 
 * 层级分层设计：
 * - Base (1-10): 页面内元素的基础层级
 * - Screen (10-50): 页面级层级 (.screen)
 * - Modal (100-500): 弹窗/模态框层级
 * - Overlay (1000-5000): 全屏遮罩层级
 * - System (9000-9999): 系统级元素（加载遮罩、点击防护等）
 */
:root {
  /* Base: 页面内元素 */
  --z-base: 1;
  --z-base-elevated: 5;

  /* Screen: 页面层级 */
  --z-screen: 10;
  --z-screen-active: 20;
  --z-screen-secondary: 30; /* 二级页面（从一级页面浮出） */
  --z-screen-tertiary: 40; /* 三级页面 */

  /* Modal: 弹窗层级 */
  --z-modal-backdrop: 100;
  --z-modal: 150;
  --z-modal-nested: 200; /* 嵌套弹窗 */

  /* Overlay: 全屏遮罩 */
  --z-overlay: 1000;
  --z-overlay-content: 1001;

  /* System: 系统级（最高优先级） */
  --z-system-loader: 9000;
  --z-system-banner: 9500;
  --z-system-shield: 9999;
}

/* 在 CSS 开头部分，通配符选择器中添加 */
* {
  -webkit-tap-highlight-color: transparent;
  /* 新增：禁止双击缩放手势，提升点击响应速度 */
  touch-action: manipulation;
}
* { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* === 性能优化：硬件加速和磨砂效果优化 === */
/* 1. 为所有 modal-overlay 添加硬件加速，避免磨砂效果延迟 */
/* 1. 为所有 modal-overlay 添加硬件加速 - 移除过度优化以防止 iOS 崩溃 */
/* (Empty rule removed) */

/* 2. 预提示浏览器即将发生的变化，优化动画性能 */
.modal-overlay {
  will-change: opacity;
}
.modal-content {
  will-change: transform, opacity;
}

* {
  /* 使用系统原生 UI 字体栈，绕过用户主题商城的自定义字体 */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", 
               Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", 
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}

/* ============================================================ */
/* === 根元素(html)样式：解决iOS PWA安全区白块问题 ===           */
/* ============================================================ */
/* 
 * 关键发现：iOS PWA安全区域的背景色来自 html 元素，不是 body！
 * 必须让 html 元素填满整个视口并设置正确的背景。
 */
html {
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  /* iOS专用：-webkit-fill-available 会填满包括安全区在内的所有可用空间 */
  min-height: -webkit-fill-available;
  margin: 0;
  padding: 0;
  /* 默认背景色（会被JS动态更新为用户壁纸） */
  background-color: #dfdfdf;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* iOS PWA 模式下：html背景透明，让壁纸层透出，或者直接显示壁纸 */
html.is-ios-pwa-html {
  background-color: transparent;
}

/* === 全局滚动条隐藏 (App质感) === */
::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

body {
  background-color: #dfdfdf; /* 安卓默认灰色 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available; /* iOS专用 */
  margin: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  
  /* === 修复橡皮筋效应 === */
  overscroll-behavior-y: none;
  /* 仅在body层面禁止，内部容器如果需要则设为 auto */
}

/* iOS PWA 专用样式 */
body.is-ios-pwa {
  background-color: transparent;
  overscroll-behavior-y: none; /* 双重保险 */
  /* 移除强制锁定，恢复默认滚动以修复界面错乱 */
}

/* ============================================================ */
/* === iOS PWA 安全区修复：负margin方法 ===                      */
/* ============================================================ */

/* html元素向下延伸（默认值，JS会覆盖） */
html.is-ios-pwa-html {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* body也应用（默认值，JS会覆盖） */
body.is-ios-pwa {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ============================================================ */
/* === iOS PWA 适配：恢复默认 Phone Frame ===                    */
/* ============================================================ */

/* 确保在所有平台上 .phone-frame 都是正确显示的 */
body.is-ios-pwa .phone-frame {
  margin-top: 0;
}

/* iOS PWA 全屏模式 */
body.is-ios-pwa.fullscreen-mode .phone-frame {
  margin-top: 0;
}

/* 恢复之前的滚动行为 */
body.is-ios-pwa .chat-messages-container,
body.is-ios-pwa .settings-content,
body.is-ios-pwa .settings-content-ios,
body.is-ios-pwa .music-content,
body.is-ios-pwa .content,
body.is-ios-pwa .screen {
    -webkit-overflow-scrolling: touch;
}

/* 特殊处理：主屏幕 .content */
body.is-ios-pwa .content {
   /* 保持原有的 padding 设计 */
}

* {
  -webkit-tap-highlight-color: transparent;
}

.phone-frame {
  width: 340px;
  height: 640px;
  border: 0px solid transparent;
  border-radius: 40px;
  background: #f1f1f1;
  /* box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); */
  position: relative;
  overflow: visible !important;

  /* 5. 关键：告诉浏览器怎么裁剪背景 */
  /* content-box: 让上层背景只填充内容区域 */
  /* border-box: 让下层背景填充整个边框区域 */
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
  box-sizing: content-box;

  /* 字体平滑 */
  -webkit-font-smoothing: antialiased;
}

@keyframes app-pop-in-optimized {
  0% {
    transform: scale(0.9) translateY(10px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes app-pop-out-optimized {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  100% {
    transform: scale(0.9) translateY(10px);
    opacity: 0;
  }
}

/* 使用时：*/
.app-pop-in {
  /* 所有的回弹效果都由这个贝塞尔曲线自动生成 */
  animation: app-pop-in-optimized 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
    forwards;
}

.app-pop-out {
  /* 离开时稍微干脆一点，但也带点收缩感 */
  animation: app-pop-out-optimized 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 通用过渡配置：统一应用于所有主屏幕和App屏幕 */
/* 通用过渡配置：统一应用于所有主屏幕和App屏幕 */
#home-screen,
#settings-screen,
#music-screen,
#worldbook-screen,
#messages-screen,
#shop-screen,
#gacha-screen,
#slacking-off-screen,
#beautify-screen,
#chat-screen {
  /* 统一的缓动曲线，模仿 iOS 的 Spring 效果 */
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
    filter 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  /* 关键：必须显式设置高度为100%，否则内部 Flex 布局无法撑开 */
  height: 100%;
}

/* ============================================================ */
/* === iOS 滚动修复 (Universal iOS Scroll Fix) ===               */
/* ============================================================ */
/* 
 * iOS Safari/WebKit 需要以下属性才能正常滚动：
 * 1. -webkit-overflow-scrolling: touch  - 启用惯性滚动
 * 2. min-height: 0                       - Flex 子项必须设置，否则无法滚动
 * 3. overflow-y: auto                    - 显式设置溢出行为
 * 4. touch-action: pan-y                 - 允许垂直方向手势
 * 5. overscroll-behavior: contain        - 防止滚动链冒泡
 */

/* 基础滚动容器修复 */
.overflow-y-auto, 
.overflow-auto,
.overflow-scroll,
.settings-content,
.screen,
.scrollable-list-container,
.wow-content-area,
.ceramic-content-scroll,
[class*="overflow-y-auto"] {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important; 
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  position: relative;
}

/* ===== iOS 全面滚动修复 - 覆盖所有可能的滚动容器 ===== */
/* 模态框和弹窗内容 */
.modal-content,
.modal-body,
.modal-scroll,
.popup-content,
.dialog-content,
.sheet-content,
.drawer-content,
.panel-content,
/* 列表容器 */
.list-container,
.contact-list,
.message-list,
.chat-list,
.song-list,
.playlist-container,
.memory-list,
.worldbook-list,
/* 聊天相关 */
.chat-messages-container,
.chat-content,
.messages-container,
/* 设置页面 */
.settings-content,
.settings-content-ios,
.settings-scroll,
.settings-body,
/* 小窝/晤面等特殊页面 */
.wowo-content,
.meetu-content,
.meetu-page-content,
.littleworld-content,
.boomboom-content,
/* 通用滚动类 */
[data-scrollable],
[data-scroll],
.scrollable,
.scroll-container,
.scroll-area,
.scroll-content,
.scroll-wrapper,
/* Flex 布局中的滚动区域 */
.flex-1,
.flex-grow,
[class*="flex-1"],
/* 其他常见容器 */
.content-area,
.main-content,
.body-content,
.page-content,
.view-content,
.container-scroll {
  /* iOS 惯性滚动 - 关键属性 */
  -webkit-overflow-scrolling: touch !important;
  
  /* 防止 Flex 子项高度塌陷导致无法滚动 - 最关键的修复 */
  min-height: 0 !important;
  
  /* 防止滚动链冒泡到 body */
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  
  /* 允许垂直滚动手势 */
  touch-action: pan-y;
}

/* Flex 容器内的滚动区域特殊处理 */
.flex-1.overflow-y-auto,
.flex-1[class*="overflow-y-auto"],
.flex-grow.overflow-y-auto,
[style*="flex: 1"][style*="overflow"] {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 确保模态框/弹窗内的滚动区域能正常工作 */
.modal-overlay .scrollable,
.modal-overlay [class*="scroll"],
.modal-overlay [class*="overflow"],
.modal-content .scrollable,
.modal-content [class*="scroll"],
.modal-content [class*="overflow"] {
  -webkit-overflow-scrolling: touch !important;
  min-height: 0 !important;
  touch-action: pan-y !important;
}

/* iOS PWA 专用滚动修复 */
body.is-ios-pwa .chat-messages-container,
body.is-ios-pwa .settings-content,
body.is-ios-pwa .settings-content-ios,
body.is-ios-pwa .music-content,
body.is-ios-pwa .content,
body.is-ios-pwa .screen,
body.is-ios-pwa .modal-body,
body.is-ios-pwa .modal-content,
body.is-ios-pwa .list-container,
body.is-ios-pwa [class*="scroll"],
body.is-ios-pwa [class*="overflow"] {
  -webkit-overflow-scrolling: touch !important;
  min-height: 0 !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
}

/* 修复：确保有 overflow 属性的元素都能滚动 */
[style*="overflow-y: auto"],
[style*="overflow-y: scroll"],
[style*="overflow: auto"],
[style*="overflow: scroll"] {
  -webkit-overflow-scrolling: touch !important;
  min-height: 0 !important;
}

/* 修复 Settings Page 的布局定位 */
.settings-page {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50; /* 提高层级，防止被遮挡 */
    pointer-events: auto; /* 确保能接收点击和滑动事件 */
    display: flex; /* 确保是 flex 容器 */
    flex-direction: column;
    overflow: hidden; /* Fix: Isolate scrolling context like About page */
}

/* 确保 Flex 布局下的滚动容器能正确响应 - 防止高度塌陷 */
.flex-1.overflow-y-auto,
.flex-1[class*="overflow-y-auto"] {
    flex: 1 1 0% !important; /* 强制 flex-basis 为 0%，让 flex-grow 接管高度 */
    min-height: 0 !important; /* 关键：防止 flex 子项被内容撑开超出 flex 容器 */
    height: auto !important;
    padding-bottom: 24px !important; /* 增加底部内边距，确保底部内容可见 */
}

/* 默认状态：主屏幕 */
#home-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  background-image: white;
  /* 初始状态 */
  transform: scale(1);
  filter: brightness(1);
}

/* 默认状态：设置页 (隐藏) */
#settings-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background-color: #f2f2f7;
  transform: scale(0.92);
  /* 配合 font-smoothing 让变焦更清晰 */
  will-change: transform, opacity;
  /* 确保父容器也是 Flex，方便 absolute 子元素定位 */
  position: relative;
}

/* --- 统一的主屏幕退后效果 --- */
/* 当任何App显示时，主屏幕都执行相同的退后动画 */
.phone-frame.show-settings #home-screen,
.phone-frame.show-music #home-screen,
.phone-frame.show-worldbook #home-screen,
.phone-frame.show-messages #home-screen,
.phone-frame.show-shop #home-screen,
.phone-frame.show-gacha #home-screen,
.phone-frame.show-slacking-off #home-screen,
.phone-frame.show-beautify #home-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  /* 效果：微缩 + 变暗，制造景深感 (保持不变) */
  transform: scale(0.92);
  filter: brightness(0.8);
}

/* 当 phone-frame 拥有 .show-settings 类名时 */
.phone-frame.show-settings #settings-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  /* 激活时：放大归位 */
  transform: scale(1);
}

/* === 新增：音乐App的动画控制 === */
#music-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  /* 隐藏时：改为微缩 */
  transform: scale(0.92);
}

/* 注意：主屏幕的隐藏逻辑已在上方统一处理，这里不需要重复 */

.phone-frame.show-music #music-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  /* 激活状态：放大归位 */
  transform: scale(1);
}

/* === 新增：顶部内容样式 === */
.header-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 时钟容器 */
.clock {
  display: flex;
  /* 使用flex布局 */
  align-items: center;
  /* 垂直居中对齐 */
  justify-content: center;
  gap: 2px;
  /* 数字间的细微间距 */
  width: 240px;
  /* 给予足够宽度 */
}

/* 时钟数字的通用样式 */
.clock span {
  font-size: 100px;
  font-weight: 700;
  color: #000;
  /* 根据您的新图，颜色改为了黑色 */
  line-height: 1;
  /* 修正行高防止额外空间 */
}

/* 冒号的特定样式，使其稳定不跳动 */
.clock span:nth-child(2) {
  font-weight: 700;
  position: relative;
  top: -0.1em;
  /* 微调垂直位置 */
  animation: blink 1.5s infinite;
  /* 添加闪烁效果 */
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* 语录容器 */
.motto-container {
  margin-top: 10px;
  margin-bottom: 30px;
}

/* 语录文字样式 */
#motto {
  font-size: 16px;
  color: #8a8a8e;
  font-weight: 500;
  border: none;
  /* 移除边框 */
  padding: 5px 10px;
  /* 增加一点内边距 */
  border-radius: 5px;
  /* 轻微圆角 */
  cursor: text;
  /* 鼠标样式为文本输入 */
}

/* 当用户点击编辑时，提供一个清晰的轮廓 */
#motto:focus {
  outline: 2px solid #007aff;
  /* 编辑时的蓝色外框 */
  background-color: #f0f2f5;
}

/* === 修改：调整整体布局 === */
.content {
  padding: 60px 0 7cap 0;
  /* 调整上下内边距 */
  display: flex;
  flex-direction: column;
  /* 核心改动：让元素之间自动分布空间，顶部贴顶，底部贴底 */
  justify-content: space-between;
  align-items: center;
  height: 95%;
  box-sizing: border-box;
}

/* 调整小组件的上下间距为0，因为 space-between 会自动处理 */
.widget-placeholder {
  margin-bottom: 0;
}

/* ===小组件(Widget)区域样式 === */
.widget-placeholder {
  width: 285px;
  /* 宽度与App区域一致 */
  height: 145px;
  /* 大约两行App的高度 */
  margin-bottom: 40px;
  /* 与下方App的间距 */
  background-color: #f0f2f5;
  border: 2px dashed #d1d1d6;
  /* 虚线边框 */
  border-radius: 22px;
  /* 圆角 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* 鼠标悬浮时显示手形 */
  color: #8e8e93;
  font-size: 16px;
  transition: background-color 0.3s;

  /* 用于显示上传后的图片 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.widget-placeholder:hover {
  background-color: #e1e3e6;
}

/* App 图标网格布局 */
.app-grid {
  display: grid;
  /* 关键修改：从 repeat(4, 1fr) 改为 repeat(3, 1fr) */
  /* 意思就是：平分成3列 */
  grid-template-columns: repeat(3, 1fr);

  /* 增加行与列之间的空隙，因为变成3列了，空隙大一点更高级 */
  gap: 25px;

  /* 调整内边距，让整体左右留白更多，图标集中在视觉中心 */
  padding: 60px 35px;

  justify-items: center;

  /* 这是一个小技巧：确保网格本身在父容器里居中 */
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  /* 防止padding撑破宽度 */
}

/* 单个App的容器 (图标 + 名称) */
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* App图标样式 */
/* App图标样式 (修改后) */
.app-icon {
  width: 60px;
  height: 60px;
  margin-bottom: -20px;
  /* --- 修改开始 --- */
  background-color: transparent;
  /* 1. 确保容器背景是透明的 */
  box-shadow: none;
  /* 2. 移除容器自身的阴影 */
  border-radius: 0;
  /* 3. 移除容器的圆角，防止裁剪不规则图片 */
  /* --- 修改结束 --- */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: white;
}

/* App图标中图片的样式 (修改后) */
.app-icon img {
  width: 90%;
  height: 90%;
  /* --- 修改开始 --- */
  border-radius: 0;
  /* 1. 移除图片强制的圆角 */
  object-fit: contain;
  /* 2. 改为 contain 以确保不规则图标完整显示不被裁剪 */
  /* 3. (关键) 使用 drop-shadow 滤镜为不规则图片添加轮廓阴影 */
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  /* --- 修改结束 --- */
}

/* App名称样式 */
.app-name {
  font-size: 12px;
  color: #111;
  font-weight: 500;
  /* 核心：为文字添加轻微阴影 */
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(24px);
}

.app-back-button {
  background: none;
  border: none;
  font-weight: bold;
  color: #007aff;
  cursor: pointer;
  padding: 0 10px;
  margin-top: 5px;
}

.settings-header h1 {
  font-size: 18px;
  font-weight: 400;
  color: #111;
  margin: 0;
  /* 让标题在剩余空间里居中 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#save-settings-button {
  padding: 4px 10px;

  font-size: 12px;

  font-weight: 400;

  color: #007aff;

  background-color: rgba(0, 122, 255, 0.1);

  border: none;

  border-radius: 40px;

  cursor: pointer;
  margin-left: auto;

  transition: background-color 0.2s;
}

/* === 唯一的、修正后的 settings-content 样式 === */
.settings-content {
  /* ▼▼▼ 新增/修改 ▼▼▼ */
  padding-top: 60px;
  /* 为固定的顶栏留出足够的空间 */
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 20px;

  color: #333;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* 核心：强制所有子元素在水平方向上居中 */
  align-items: center;
}

/* Add this new rule anywhere in your styles */
.modal-body .form-group {
  width: 100%;
}

.form-group {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 标签和输入框之间的间距 */
}

.form-group label {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  padding-left: 5px;
}



.form-select:disabled {
  background-color: #f5f5f5;
  color: #c7c7cd;
}

.form-button {
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 400;
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.1);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.form-button:disabled {
  background-color: #8e8e93;
  cursor: not-allowed;
}

/* --- 滑块样式 --- */
.form-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  outline: none;
}

.form-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 2px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.form-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 2px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/* === 新增：壁纸设置控件的样式 === */
/* 用这段代码替换掉您已有的 .wallpaper-controls 样式 */
.wallpaper-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  /* 预览图和按钮组之间的间距 */
}

/* 新增：壁纸预览图样式 (尺寸调整) */
#wallpaper-preview {
  width: 50px;
  height: 88px;
  /* 保持一个合适的手机壁纸比例 */
  border-radius: 6px;
  border: 1px solid #d1d1d6;
  background-color: #e9e9eb;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* 新增：两个按钮的容器样式 */
.wallpaper-buttons {
  flex-grow: 1;
  /* 占满剩余空间 */
  display: flex;
  flex-direction: column;
  /* 让两个按钮垂直堆叠 */
  gap: 8px;
  /* 两个按钮之间的间距 */
}

/* 这是一个次要按钮的样式，区别于主要的蓝色按钮 */
.form-button-secondary {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.1);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* --- 关键修改：确保只有主屏幕有壁纸 --- */
#home-screen {
  background-size: cover;
  background-position: center;
  background-color: transparent;
  /* 让主屏幕背景透明，以便显示壁纸 */
  background-image: url("https://i.postimg.cc/rs927KZZ/Group-2-(2).png");
}

#settings-screen {
  background-color: #F5F5F7;
  /* 确保设置页始终是白色背景 */
}

/* === 新增：用于隐藏小组件的类 === */
.widget-hidden {
  display: none !important;
}

/* === iOS 16/17 风格开关 (Switch) === */
.switch {
  position: relative !important;
  display: inline-block !important;
  width: 51px !important; /* iOS标准宽度 */
  min-width: 51px !important;
  max-width: 51px !important;
  height: 31px !important; /* iOS标准高度 */
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 51px !important; /* 在Flex布局中禁止伸缩 */
  flex-shrink: 0 !important;
  vertical-align: middle;
}

/* 隐藏原生checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  margin: 0;
}

/* 滑槽 (背景长条) */
.slider {
  position: absolute !important;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); /* iOS缓动曲线 */
  border-radius: 31px !important; /* 完全圆角胶囊 */
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* 滑块 (白色圆球) */
.slider:before {
  position: absolute !important;
  content: "";
  height: 27px !important; /* 圆球高度 */
  width: 27px !important; /* 圆球宽度 */
  left: 2px !important; /* 左侧留2px间距 */
  bottom: 2px !important; /* 底部留2px间距 */
  background-color: white !important;
  transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  border-radius: 50% !important; /* 完美圆形 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; /* iOS阴影 */
  transform: translateX(0);
}

/* 选中状态：背景变成iOS绿色 */
input:checked + .slider {
  background-color: #e1f0ff; /* iOS Green */
}

/* 选中状态：滑块右移 */
input:checked + .slider:before {
  transform: translateX(20px) !important; /* 向右移动20px */
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .slider {
    background-color: #39393d !important;
  }
}

/* === 新增：响应式缩放，修复小屏幕下的显示问题 === */

/* 这是一个媒体查询，它表示：
   “如果浏览器窗口的宽度小于或等于 420px 时...” 
*/
@media (max-width: 420px) {
  .phone-frame {
    /* * “...就把 .phone-frame 这个元素（包括它里面的所有内容）
         * 等比例缩小到原来的 90%。”
         * 这样它就不会超出窄屏幕的边界了。
        */
    transform: scale(0.9);
  }
}

/* * 你还可以为更小的屏幕添加进一步的缩放规则，
 * 例如，当屏幕宽度小于 380px 时，再缩小一点。
*/
@media (max-width: 380px) {
  .phone-frame {
    transform: scale(0.85);
  }
}

/* === 音乐 App 专属样式 (新版) === */

/* 新建歌单按钮的新样式 */
.add-playlist-button {
  display: block;
  margin: 0 auto;
  width: 100%;
  /* 按钮宽度占满容器 */
  padding: 10px;
  margin-bottom: 20px;
  /* 与下方歌单网格的间距 */
  font-size: 16px;
  font-weight: 400;
  background-color: rgba(0, 122, 255, 0.1);
  border: none;
  border-radius: 8px;
  /* 圆角 */
  cursor: pointer;
  text-align: center;
  /* 文字居中 */
  transition: background-color 0.2s;
}

.add-playlist-button:hover {
  background-color: #e1e3e6;
  /* 鼠标悬浮时颜色加深 */
}

/* 音乐内容区域 */
.music-content {
  padding: 15px;
  flex-grow: 1;
  /* 关键：让这个区域占据所有剩余的垂直空间 */
  overflow-y: auto;
  /* 内容超出这个区域时，允许垂直滚动 */
}

/* 歌单网格布局（瀑布流） */
.playlist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

/* 单个歌单卡片的样式 */
.playlist-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.playlist-card:hover {
  transform: scale(1.03);
}

/* 歌单封面 */
.playlist-cover {
  width: 100%;
  padding-bottom: 100%;
  background-color: #e9e9eb;
  border-radius: 8px;
  margin-bottom: 8px;
  background-size: cover;
  /* 关键：让图片缩放以完全覆盖容器 */
  background-position: center;
  /* 辅助：让图片在容器里居中显示 */
}

/* 歌单名称 */
.playlist-name {
  font-size: 14px;
  font-weight: 500;
  color: #1c1c1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 歌单歌曲数量 */
.playlist-count {
  font-size: 12px;
  color: #8a8a8e;
}

/* === 新增：歌单详情页的动画控制 === */
#playlist-detail-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  /* 层级比音乐主页更高 */
  background-color: #fff;
  /* 确保有白色背景 */
  display: flex;
  /* 使用 flex 布局 */
  flex-direction: column;
  /* 垂直排列 */
}

.phone-frame.show-playlist-detail #playlist-detail-screen {
  opacity: 1;
  pointer-events: auto;
}

/* 详情页顶栏样式 */
.playlist-header {
  border-bottom: 1px solid #f0f0f0;
}

/* 详情页内容区 */
.playlist-content {
  padding: 20px;
  flex-grow: 1;
  /* 占据剩余所有空间 */
  overflow-y: auto;
  /* 内容多时可以滚动 */
}

/* 导入按钮样式 */
.import-button {
  display: block;
  /* 块级元素 */
  width: 120px;
  /* 固定宽度 */
  margin: 0 auto 25px auto;
  /* 水平居中，并和下方列表拉开距离 */
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 500;
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.1);
  border: 1px solid #ffffff;
  border-radius: 20px;
  /* 圆角 */
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 歌曲列表样式 */
.song-list {
  list-style: none;
  /* 移除默认的圆点 */
  padding: 0;
  margin: 0;
}

/* 列表中的每一项 */
.song-item {
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 5px;
}

/* === 新增：播放按钮和歌曲列表项新布局 === */
.song-item {
  display: flex;
  justify-content: space-between;
  /* 两端对齐 */
  align-items: center;
  /* 垂直居中 */
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 5px;
}

.song-info {
  /* 这个新容器用来包裹歌名和歌手 */
  display: flex;
  flex-direction: column;
}

.play-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  width: 32px;
  /* 固定宽度 */
  height: 32px;
  /* 固定高度 */
}

.play-button svg {
  width: 100%;
  height: 100%;
}

.header-button {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 400;
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.1);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 删除按钮的特殊样式 */
.header-button.delete {
  border-color: #ff3b30;
  color: #ff3b30;
}

/* === 新增：多选删除模式下的样式 === */
.song-item .song-checkbox {
  display: none;
  /* 默认隐藏复选框 */
  margin-right: 15px;
  /* 和歌曲信息拉开距离 */
}

/* 当 song-list 处于删除模式时，显示复选框 */
.song-list.delete-mode .song-checkbox {
  display: block;
}

/* === 新增：统一的头部文本按钮样式 === */
.header-text-button {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 400;
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.1);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background-color 0.2s;
  /* 用于在flex布局中对齐 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-text-button:hover {
  background-color: rgba(0, 122, 255, 0.2);
}

/* === 新增：世界书App的动画控制 === */
#worldbook-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  /* 隐藏时：改为微缩 */
  transform: scale(0.92);
}

.phone-frame.show-worldbook #worldbook-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  /* 激活状态：放大归位 */
  transform: scale(1);
}

/* === 新增：消息App的动画控制 === */
#messages-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  /* 只有模糊背景 */
  background-color: transparent !important;

  /* 隐藏时：改为微缩 */
  transform: scale(0.92);
}

/* 顺便优化一下内容区域的边距，让卡片不要贴着边缘 */
#messages-screen .messages-content {
  padding-top: 100px !important;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 20px;
  box-sizing: border-box;
  height: 100%;
  /* 强制高度填满父容器 */
  overflow-y: auto;
  /* 内容多时允许内部滚动 */
}

/* 隐藏 Chrome/Safari 的滚动条 */
#messages-screen .messages-content::-webkit-scrollbar {
  display: none;
}

.phone-frame.show-messages #messages-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  /* 激活状态：放大归位 */
  transform: scale(1);
}

/* === 新增：购物, 动态, 游戏, 美化 App 的动画控制 === */
/* 购物 */
#shop-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background-color: #fff;
  transform: scale(0.92);
}
.phone-frame.show-shop #shop-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transform: scale(1);
}

/* 动态 (Gacha) */
#gacha-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background-color: #fff;
  transform: scale(0.92);
}
.phone-frame.show-gacha #gacha-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transform: scale(1);
}

/* 游戏 (Slacking Off) */
#slacking-off-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background-color: #fff;
  transform: scale(0.92);
}
.phone-frame.show-slacking-off #slacking-off-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transform: scale(1);
}

/* 美化 */
#beautify-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background-color: #fff;
  transform: scale(0.92);
}
.phone-frame.show-beautify #beautify-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transform: scale(1);
}

/* === 新增：聊天界面 (二级页面) 动画控制 === */
#chat-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  opacity: 0;
  pointer-events: none;
  z-index: 10; /* 比一级页面高 */

  /* 默认隐藏在右侧 */
  transform: translateX(100%);
  background-color: #f2f2f7; /* iOS 默认背景色 */
}

/* 当聊天界面激活时 */
/* 注意：这里我们要让 chat-screen 在 messages-screen 之上滑入 */
#chat-screen.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.dynamic-island {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;

  /* === 核心修改在这里 === */
  width: 180px;
  height: 36px;
  padding: 0 18px;
  /* 在左右两边增加内边距，让内容和黑边有呼吸空间 */
  box-sizing: border-box;
  /* 确保 padding 不会影响最终的宽高计算 */

  background-color: #000;
  border-radius: 40px;
  color: white;
  transition: all 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}

.dynamic-island.active {
  opacity: 1;
  pointer-events: auto;
}

/* 展开状态的尺寸 */
.dynamic-island.expanded {
  width: 336px;
  /* 展开后的宽度 */
  height: 160px;
  /* 展开后的高度 */
}

/* --- 收起/展开内容的切换 --- */
.island-collapsed-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

.dynamic-island.expanded .island-collapsed-content {
  opacity: 0;
  pointer-events: none;
}

/* === 用下面这段新的代码替换上面的旧代码 === */
.island-expanded-content {
  /* --- 关键修复：添加绝对定位 --- */
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  padding: 18px;
  box-sizing: border-box;

  /* 使用 Flexbox 布局来排列内部元素 */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* 垂直方向上均匀分布 */

  opacity: 0;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
  /* 在隐藏时确保无法交互 */
}

.dynamic-island.expanded .island-expanded-content {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s 0.15s ease-in;
}

/* --- 内部元素样式 --- */
/* === 用下面这段新的代码替换上面的旧代码 === */

/* 使用 .dynamic-island 来提高优先级，确保样式只应用在灵动岛内部 */
.dynamic-island .song-details .song-title {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  /* 强制指定为白色 */
}

.dynamic-island .song-details .song-artist {
  font-size: 14px;
  color: #b2b2b2;
  /* 一个更亮的灰色，在黑背景上更清晰 */
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #aaa;
}

.progress-bar-wrapper {
  flex-grow: 1;
  height: 6px;
  background-color: #333;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  width: 0%;
  height: 100%;
  background-color: #fff;
  border-radius: 3px;
}

.controls-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.control-button {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.control-button svg {
  fill: #fff;
  width: 100%;
  height: 100%;
}

.control-button.play-pause {
  width: 50px;
  height: 50px;
}

.play-icon,
.pause-icon {
  display: none;
}

.control-button.play .play-icon,
.control-button.pause .pause-icon {
  display: block;
}

/* 强制提升控制按钮容器的层级 */
.dynamic-island .controls-container {
  position: relative;
  /* z-index 生效需要 position 属性 */
  z-index: 10;
}

/* === 新增：联系人弹出层 (Modal) 的所有样式 === */

/* 2. 对话框主体 */
.modal-content {
  background-color: #f2f2f7;
  /* iOS 标准浅灰背景 */
  width: 320px;
  max-width: 90%;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  /* 更柔和的投影 */
}

/* 当 .modal-overlay 显示时，让 .modal-content 动画出现 */
.modal-overlay.visible .modal-content {
  transform: scale(1);
}

/* 3. 顶部滑块和关闭按钮 */
.modal-header,
.modal-footer {
  /* background-color: #F2F2F7; */
  padding: 15px 20px;
  flex-shrink: 0;
}

.role-switcher {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 完美的水平居中 */

  /* 保持原有外观，稍微优化一下间距 */
  background-color: #e5e5ea;
  padding: 3px 5px;
  border-radius: 100px;
  z-index: 10;
  /* 确保不被遮挡 */
}

.switch-label {
  color: #888;
  transition: color 0.3s;
}

.switch-label.active {
  color: #007aff;
}

/* 4. AI 和用户表单的样式 */
.role-form {
  display: none;
  /* 默认隐藏 */
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.role-form.active {
  display: flex;
  /* .active 类使其显示 */
}

.avatar-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  /* 白色边框更厚一点 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  object-fit: cover;
  background-color: #e5e5ea;
  /* 图片加载前的底色 */
}

.avatar-input {
  display: none;
  /* 隐藏原始的文件选择框 */
}

.avatar-upload-label {
  font-size: 12px;
  color: #007aff;
  cursor: pointer;
}

.form-textarea {
  height: 100px;
  width: 100%;
  /* background-color: #e9e9eb; */
  border: 1px solid #d1d1d6;
  border-radius: 12px;
  font-size: 14px;
  padding: 10px;
  resize: vertical;
  /* 允许用户垂直调整大小 */
}

.form-group-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.form-group-inline input {
  width: 60px;
  text-align: center;
}

.save-button {
  /* width: 20%; */
  padding: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background-color: #007aff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
}

/* === 新增：消息列表的样式 - Moon White & Indigo Grey 重构版 === */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: transparent; /* 容器透明，背景色由父容器或body控制 */
}

.contact-item {
  /* 1. 布局与尺寸 */
  width: 100%;

  margin-bottom: 12px; /* 卡片间距 */
  box-sizing: border-box;

  /* 2. Moon White 核心风格 */
  background: #ffffff; /* 纯白卡片，突出干净 */

  border-radius: 18px; /* 统一的克制圆角 */

  /* 3. 阴影与质感 - 去除玻璃磨砂 */

  backdrop-filter: none; /* 彻底去除磨砂 */
  -webkit-backdrop-filter: none;

  /* 4. 交互动画 */

  overflow: hidden; /* 保证内部元素不溢出圆角 */
}

/* 鼠标悬停 */
.contact-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(69, 73, 77, 0.08);
  border-color: rgba(69, 73, 77, 0.15); /* 边框微加深 */
}

/* 鼠标按下 */
.contact-item:active {
  transform: scale(0.98);
  background-color: #f4f7f9; /* 按下时变为极淡的月白色 */
  box-shadow: none;
}

.contact-avatar {
  width: 45px; /* 稍微缩小一点，更精致 */
  height: 45px;
  border-radius: 12px; /* 呼应气泡的圆角风格，不完全使用圆形 */
  object-fit: cover;
  margin-right: 16px;
  flex-shrink: 0;
  /* 极细微的边框，提升头像质感 */
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-info {
  flex-grow: 1;
  min-width: 0;
}

.contact-name {
  font-size: 16px;
  font-weight: 600;
  color: #45494d; /* 青黛：视觉重心 */
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.contact-last-message {
  font-size: 13px;
  color: #5f6b73; /* 灰蓝：次要信息 */
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === 新增：消息列表多选删除模式的样式 === */

/* 1. 默认隐藏列表项中的复选框 */
.contact-item .contact-checkbox {
  display: none;
  margin-right: 15px;
  /* 和头像拉开距离 */
}

/* 2. 当列表进入删除模式时，显示复选框 */
.contact-list.delete-mode .contact-item .contact-checkbox {
  display: block;
  /* block 会让它显示出来 */
}

/* 3. 删除模式下，列表项内边距微调，给复选框留出空间 */
.contact-list.delete-mode .contact-item {
  padding-left: 10px;
}

/* 4. 删除按钮的特殊红色样式 (复用音乐App的样式) */
.header-button.delete {
  color: #ff3b30;
  /* 红色文字 */
}

/* === 置顶样式的优化 (圆形指示器) === */
.contact-item.pinned {
  background-color: rgba(
    69,
    73,
    77,
    0.03
  ); /* 置顶项目背景稍微变暗一点点，区分普通项 */
  border-color: rgba(69, 73, 77, 0.15); /* 边框稍微加深 */
}

/* 在卡片右上角添加一个优雅的小圆点 */
.contact-item.pinned::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  background-color: var(--london-accent, #45494d); /* 使用主题强调色 */
  border-radius: 50%;

  /* 增加一个白色外圈，让它在任何背景上都清晰 */
  box-shadow: 0 0 0 2px #fff;
  z-index: 2;
}

/* 兼容深色模式 */
@media (prefers-color-scheme: dark) {
  .contact-item.pinned {
    background-color: rgba(255, 255, 255, 0.05); /* 深色模式下的微亮背景 */
  }

  .contact-item.pinned::after {
    box-shadow: 0 0 0 2px #2c2c2e; /* 深色模式下的外圈为深色 */
    background-color: #d6e0e6; /* 使用月白色作为指示点 */
  }
}

/* === 新增：聊天界面的所有样式 === */

/* 1. 聊天界面整体和滑入动画 */
/* === (核心修复 + 变量找回) 聊天界面容器 === */
#chat-screen {
  /* 1. 基础布局 */
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f0f2f5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* ▼▼▼ 关键修复：找回丢失的变量，否则表情包会乱飞 ▼▼▼ */
  --emoji-panel-height: 280px;
  --features-panel-height: 280px; /* 更多功能面板高度（2行 + 指示器） */

  /* 2. 初始状态：隐藏 */
  opacity: 0;
  transform: scale(1.05);
  z-index: 20;

  /* 3. 交互控制：不可见时禁用交互 */
  visibility: hidden;
  /* 延迟 visibility 的变化，确保 opacity 动画播完才真正隐藏 */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

/* 激活状态：显示 */
.phone-frame.show-chat #chat-screen {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;

  /* 显示时立即取消 hidden */
  visibility: visible;
  transition-delay: 0s;
}

/* (可选) 让消息列表页向左滑出，效果更佳 */
.phone-frame.show-chat #messages-screen {
  /* 让消息列表页直接淡出，而不是缩小 */
  opacity: 0;
  pointer-events: none;
}

/* 2. 固定的高斯模糊顶栏 */
/* === (iOS 26 概念版) 液态悬浮顶栏 === */

/* 1. 顶栏容器：半透明磨砂背景 (Moon White) */
.chat-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  /* height: 54px; */
  padding-top: 50px;
  background-color: rgb(243 243 243 / 85%) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(69, 73, 77, 0.06) !important;
  pointer-events: auto;
}

/* === 深色模式适配 === */
.phone-frame.dark-mode .chat-header::before {
  /* 深色模式下，渐变变成深灰色 */
  background: linear-gradient(
    to bottom,
    rgba(28, 28, 30, 0.95) 0%,
    rgba(28, 28, 30, 0.6) 60%,
    rgba(28, 28, 30, 0) 100%
  );
}

/* 2. 左侧：方形圆角按钮 (返回) - 恢复实色悬浮卡片感 */
.floating-glass-btn.circle {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 32px; /* 统一的 12px 圆角 */

  /* 纯白实色背景，保留立体感 */
  background: #ffffff;
  border: 1px solid rgba(69, 73, 77, 0.08); /* 极细灰边 */

  /* 克制的悬浮阴影 */
  /* box-shadow: 0 2px 8px rgba(69, 73, 77, 0.06); */

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);

  /* 恢复图标颜色控制 */
  color: inherit;
}

.floating-glass-btn.circle:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(69, 73, 77, 0.1);
  background-color: #ffffff; /* 保持纯白 */
}

.floating-glass-btn.circle:active {
  transform: scale(0.96);
  background: #f4f7f9;
}

.floating-glass-btn.circle:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.8);
}

/* 3. 中间：标题 */
.chat-header h1 {
  pointer-events: auto;
  font-size: 17px;
  font-weight: 600;
  color: #1c1c1e; /* 回归稳重的深黑 */
  text-shadow: none;

  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

  /* 移除背景交互，让它更像标准标题 */
  background: transparent;
  padding: 0;
}

.chat-header h1:active {
  background-color: rgba(0, 0, 0, 0.05);
  /* 点击时的反馈 */
}

/* 4. 右侧：功能组 (搜索 + 设置) - 恢复实色悬浮卡片感 */
.floating-glass-group {
  pointer-events: auto;
  height: 40px;
  border-radius: 32px; /* 统一的 12px 圆角 */
  padding: 0 4px;

  /* 纯白实色背景 */
  background: #ffffff;
  /* border: 1px solid rgba(69, 73, 77, 0.08); */

  /* 克制的悬浮阴影 */
  /* box-shadow: 0 2px 8px rgba(69, 73, 77, 0.06); */

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  display: flex;
  align-items: center;
  gap: 2px;
}

/* 组内的图标按钮 */
.header-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.header-icon-btn:active {
  background-color: rgba(0, 0, 0, 0.1);
}

/* 中间的分割线 */
.glass-divider {
  display: none !important;
}

/* === 深色模式适配 === */
.phone-frame.dark-mode .floating-glass-btn.circle,
.phone-frame.dark-mode .floating-glass-group {
  background: rgba(40, 40, 40, 0.65);
  border-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.dark-mode .chat-header h1 {
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

/* 修正深色模式下图标颜色 */
.phone-frame.dark-mode .chat-header svg path {
  stroke: #fff;
}

/* 让右侧按钮自动靠右 */
.chat-header #chat-settings-button {
  margin-left: auto;
}

/* 3. 聊天消息容器 */
.chat-messages-container {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0 12px; /* 左右间距微调 */

  /* 顶部预留更多空间，给渐变顶栏让位 */
  padding-top: 110px;
  padding-bottom: 100px;
}

/* 2. 加号按钮的特定样式 */
#chat-add-attachment-button {
  background-color: #f5f5f5;
  /* 更柔和的浅灰色背景 */
  /* color: #555; */
  /* 更深一些的灰色图标，更有质感 */
  width: 30px;
  /* 适当增大按钮尺寸，方便点击 */
  height: 30px;
  border-radius: 50%;
  /* 保持圆形 */
  border: none;
  /* 去掉默认边框，用阴影营造层次 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* 轻微阴影，增加立体感 */
  transition: all 0.2s ease;
  /* 过渡动画，让交互更丝滑 */
  cursor: pointer;
  /* 鼠标悬浮显示手型，提示可点击 */
}

#chat-add-attachment-button:hover {
  background-color: #eaeaea;
  /*  hover 时背景稍深，反馈更明显 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  /*  hover 时阴影稍重 */
  transform: scale(1.05);
  /*  hover 时轻微放大，增强交互感 */
}

#chat-add-attachment-button:active {
  background-color: #dcdcdc;
  /* 点击时背景更深，强化点击反馈 */
  transform: scale(0.98);
  /* 点击时轻微缩小 */
}

/* === 新增：聊天设置、气泡、输入栏的最终正确样式 === */

/* --- 1. 聊天设置对话框 --- */
.modal-content.large {
  max-width: 360px;
  max-height: 85%;
  gap: 0;
  display: flex;
  flex-direction: column;
}

.modal-content.large .modal-header,
.modal-content.large .modal-footer {
  flex-shrink: 0;
}

.modal-content.large .modal-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}

.modal-content.large .modal-header h2 {
  font-size: 15px;
  margin: 0;
}

.modal-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
}

.settings-column {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.settings-column h4 {
  font-size: 16px;
  margin: 0 0 5px 0;
  color: #333;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.form-textarea.code {
  font-family: monospace;
  height: 120px;
  white-space: pre;
  font-size: 12px;
  width: 90%;
}

.form-button-secondary.small {
  padding: 6px 10px;
  font-size: 14px;
}

.danger-zone {
  border-top: 1px solid #e5e5e5;
  padding-top: 15px;
}

.danger-button {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #ff3b30;
  background-color: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.2);
  border-radius: 8px;
  cursor: pointer;
}

/* 关键修复：确保头像设置的行内元素能正确布局 */
.form-group .form-group-inline {
  display: flex;
  justify-content: space-between;
  /* 两端对齐 */
  align-items: center;
}

.form-group .form-group-inline .form-input {
  flex-grow: 0;
  /* 禁止它伸展 */
}

.message-row.user {
  flex-direction: row-reverse;
  transform-origin: bottom right;
  /* padding-left: 15%; */
}

.message-row.ai {
  transform-origin: bottom left;
}

/* 修改前 */
.hide-avatars .chat-avatar {
  display: none !important;
}

/* 修改后：同时隐藏图片和它的容器 */
.hide-avatars .chat-avatar,
.hide-avatars .avatar-anchor {
  display: none !important;
}

.chat-messages-container {
  display: flex;
  flex-direction: column;
}

/* --- 3. 聊天输入栏 --- */
.chat-input-area {
  position: absolute;
  bottom: 0px;
  /* width: 100%; */

  /* ▼▼▼ 之前漏掉的关键布局代码 ▼▼▼ */
  display: flex;
  /* 让子元素横向排列 */
  align-items: center;
  /* 让它们垂直居中对齐 */
  gap: 2px;
  /* 元素之间的间距 */
  box-sizing: border-box;
  /* 确保内边距不会撑破容器 */
  /* ▲▲▲ 修复结束 ▲▲▲ */

  /* 视觉风格 (保持不变) */
  background-color: rgba(255, 255, 255, 1);

  border-radius: 0px;
  padding: 10px 10px;
  /* 稍微减小内边距，让它更精致 */
  /* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); */

  left: 0px;
  right: 0px;
  padding-bottom: 30px;

  z-index: 100 !important;
  border-top: none;
}

.chat-action-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  background-color: transparent;
}

/* #chat-add-attachment-button {
            color: #333;
        } */

#chat-add-attachment-button svg {
  width: 20px;
  height: 20px;
}

.chat-input-area input {
  flex-grow: 1;
  height: 35px;
  border: none;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 0 15px;
  font-size: 15px;
  outline: none;
}

/* 放大后再缩小回原大小的动画 */
@keyframes scaleUpDown {
  0% {
    transform: scale(1);
    /* 初始大小 */
  }

  50% {
    transform: scale(1.2);
    /* 放大到 1.2 倍 */
  }

  100% {
    transform: scale(1);
    /* 缩小回原大小 */
  }
}

/* 点击时快速缩放的动画 */
@keyframes clickScale {
  0% {
    transform: scale(1);
    /* 原大小（或 hover 结束后的大小） */
  }

  50% {
    transform: scale(0.9);
    /* 快速缩小 */
  }

  100% {
    transform: scale(1);
    /* 恢复原大小 */
  }
}

@keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* 定义动画关键帧 */
@keyframes bubble-scale-in {
  0% {
    opacity: 0;
    /* 初始状态：稍微小一点，位置稍微靠下（产生上浮感），且不旋转 */
    transform: scale(0.92) translateY(10px);
  }

  60% {
    opacity: 1;
    /* 过渡状态：轻轻超过一点点正常大小，像呼吸一样 */
    transform: scale(1.02) translateY(-2px);
  }

  100% {
    opacity: 1;
    /* 结束状态：回归正常 */
    transform: scale(1) translateY(0);
  }
}

.chat-bubble {
  /* 解析：
       0.5s: 动画时长，比之前的0.6s稍快一点点，减少拖沓感
       cubic-bezier: 使用 ease-out 类型的曲线，前面快后面慢，像云朵飘停的感觉
    */
  animation: bubble-scale-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;

  /* 保持中心放大，或者你可以根据气泡位置改为 bottom left / bottom right */
  transform-origin: center bottom;

  backface-visibility: hidden;
  /* 优化渲染性能 */
  will-change: transform, opacity;
}

@keyframes ripple {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* === 新增：“正在输入”提示的CSS样式 === */

/* 动画容器的样式 */
.typing-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  min-width: 60px;
  /* 控制整体高度 */
}

/* 动画点的基础样式 */
.typing-dot {
  width: 6px;
  height: 6px;
  margin: 0 2px;
  background-color: #8e8e93;
  /* 点的颜色 */
  border-radius: 50%;

  /* 应用我们下面定义的动画 */
  animation: typing-bounce 1.2s infinite ease-in-out;
}

/* 为第二个和第三个点设置动画延迟，形成波浪效果 */
.typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

/* 定义一个名为 "typing-bounce" 的动画 */
@keyframes typing-bounce {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.2);
  }

  20% {
    opacity: 1;
    transform: translateY(-4px) scale(1.1);
  }

  40% {
    transform: translateY(2px) scale(0.95);
  }

  60% {
    transform: translateY(-2px) scale(1.05);
  }

  80% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* 可选：为每个点添加延迟，形成波浪效果 */
.dot-1 {
  animation-delay: 0s;
}

.dot-2 {
  animation-delay: 0.15s;
}

.dot-3 {
  animation-delay: 0.3s;
}

/* --- 新增：消息选择功能的CSS样式 --- */
/* --- 这是消息布局的【最终修复版】CSS --- */

/* 1. 外层行容器：永远100%宽度，用于对齐选择器 */
.message-row {
  position: relative;
  display: flex;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  animation: bubble-scale-in 0.3s ease-out;
}

/* 2. 新增！内容包装层：负责对齐和限制宽度 */
.message-content-wrapper {
  display: flex;
  align-items: flex-end;
  max-width: 85%;
  /* 约束内容最大宽度 */
  transition: transform 0.3s ease;
  position: relative;
  /* 动画效果 */

  /* 防止 flex 子项被过度挤压 */
  min-width: 0;
}

.message-content-wrapper.user {
  margin-left: auto;
  /* 关键：将用户的内容推到最右边 */
  flex-direction: row-reverse;
  /* 头像在右，气泡在左 */
}

/* 3. 气泡、头像和选择器样式 (基本不变，但选择器更准确) */
.chat-bubble {
  padding: 8px 12px;
  /* 增加内边距，让文字呼吸感更强 */
  border-radius: 18px;
  text-align: justify;

  /* 3. 针对中文和混合排版的优化 */
  text-justify: inter-ideograph;
  /* 让中英文混排时的间距更自然 */

  /* 核心需求：统一的 18px 大圆角 */
  line-height: 1.5;
  word-wrap: break-word;
  font-size: 14px;
  /* iOS 标准字号 */
  /* max-width: 60%; */
  min-width: 20px;
  /* 防止空内容太扁 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  /* 极淡的阴影，增加层次感 */
  position: relative;
  /* transition: all 0.2s ease; */
}

.chat-avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
  flex-shrink: 0;
  margin: 0 8px;
}

.avatar-anchor {
  flex-shrink: 0;
  display: flex;
  align-items: center; /* 保证头像垂直居中或底部对齐 */
}

/* HTML 渲染容器样式修复 */
.html-render-container {
  display: block;
  /* overflow: hidden;  <-- 移除这个，JS 里已经控制内层 overflow 了，外层如果 hidden 可能会导致阴影被切 */

  background: #fff;
  /* 强制重置边距 */
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 50px;
  max-width: 100%;
  height: auto; /* Shadow DOM 模式下由内容自然撑开 */
  transition: opacity 0.3s ease;
}

/* === 核心修复：HTML卡片模式下的“裸奔”样式 === */
/* 去除所有气泡装饰，让卡片完全独立展示，解决重叠和盒子感 */
.message-content-wrapper.is-html-content {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  /* 允许卡片稍微宽一点，但不要超过屏幕 */
  max-width: 95% !important;
  overflow: visible !important;
}
/* 同时把里面的气泡背景也去掉（如果有的话） */
.message-content-wrapper.is-html-content .chat-bubble {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.selection-indicator {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid #c7c7cc;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 4. 选择模式下的样式 (选择器更精确) */
.selection-mode-active .selection-indicator {
  opacity: 1;
}

.selection-mode-active .message-row {
  /* 注意是 message-row */
  background-color: rgba(0, 122, 255, 0);
  /* 移除之前的选中背景色 */
}

.message-row.selected {
  background-color: transparent;
}

.message-row.selected .selection-indicator {
  background-color: #007aff;
  border-color: #007aff;
}

.message-row.selected .selection-indicator::after {
  content: "✔";
  color: white;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ========================================================== */
/* === 选择模式平移动画 === */
/* ========================================================== */
#chat-screen.selection-mode-active .message-content-wrapper.ai,
#chat-screen.selection-mode-active .group-message-wrapper.ai,
#chat-screen.selection-mode-active .chat-avatar-wrapper.ai {
  /* 1. (不变) 仍然向右平移30像素 */
  transform: translateX(30px) !important;

  /* 2. (核心修复) 在平移的同时，宽度减去平移的距离 */
  /* 这确保了元素的新总宽度 = (100% - 30px)，正好能容纳在偏移后的空间里 */
  width: calc(100% - 30px);
}

/* === 新增：全屏模式的样式 === */
body.fullscreen-mode {
  /* 1. 取消强制居中，让内容从左上角开始 */
  display: block;
  /* 2. 背景设为干净的白色 */
  background-color: #fff;
  /* 3. 新增：在全屏模式下，禁止整个页面滚动 */
  overflow: hidden;
}

body.fullscreen-mode .phone-frame {
  /* 3. 覆盖固定的宽高，让它占满整个屏幕 */
  width: 100%;
  height: 100vh;
  /* vh 单位代表视口高度 */
  max-width: none;
  max-height: none;

  /* 4. 移除所有手机框的视觉样式 */
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #f1f1f1;
  /* 背景也设为白色 */

  /* 5. 强制覆盖掉针对小屏幕的 transform: scale 缩放效果 */
  transform: none !important;
}

/* === 更新：为悬浮顶栏下的内容区域添加上边距并使其可滚动 === */
#settings-screen .settings-content,
#playlist-detail-screen .playlist-content,
#icon-settings-screen .settings-content {
  padding-top: 90px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

#icon-list-container {
  width: 100%;
}

/* 将音乐和世界书界面单独设置，使用Flexbox布局 */
#music-screen .music-content,
#worldbook-screen .music-content,
#worldbook-groups-screen .music-content,
#worldbook-group-detail-screen .music-content {
  padding: 90px 15px 15px 15px !important;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* === 新增：使“新建”按钮固定 === */
.add-playlist-button {
  flex-shrink: 0;
  /* 防止按钮在空间不足时被压缩 */
  /* 其他样式保持不变 */
}

/* === 新增：让新的列表容器可滚动 === */
.scrollable-list-container {
  flex-grow: 1;
  /* 占据所有剩余的垂直空间 */
  overflow-y: auto;
  /* 让这个容器自己负责滚动 */
}

/* === 新增：世界书多选列表的样式 === */
.multiselect-container {
  max-height: 120px;
  /* 设置一个最大高度 */
  overflow-y: auto;
  /* 内容超出时出现滚动条 */
  background-color: #e9e9eb;
  border: 1px solid #d1d1d6;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 选项之间的间距 */
}

.multiselect-item {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 复选框和文字的间距 */
  font-size: 14px;
  cursor: pointer;
}

/* === 新增：歌单多选删除模式的样式 === */

/* 1. 让歌单卡片成为复选框的定位基准 */
.playlist-card {
  position: relative;
}

/* 2. 复选框的样式，默认隐藏 */
.playlist-checkbox {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  z-index: 5;
  /* 确保在封面之上，可以被点击 */
}

/* 3. 当歌单网格进入删除模式时，显示复选框 */
.playlist-grid.delete-mode .playlist-checkbox {
  display: block;
}

/* === 最终版 V2：使用专属类名 chatsearch-content === */

/* 1. 外部容器样式 (保持不变) */
.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-result-item:hover {
  background-color: #e9e9eb;
}

/* 2. 第一行容器样式 (保持不变) */
.search-result-item .result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 3. 发送者和时间样式 (保持不变) */
.search-result-item .sender-name {
  font-size: 14px;
  font-weight: 500;
  color: #1c1c1e;
}

.search-result-item .time {
  font-size: 12px;
  color: #8a8a8e;
}

/* 4. 【核心修改】第二行内容摘要样式，应用到新的类名上 */
.search-result-item .chatsearch-content {
  font-size: 13px;
  color: #333;
  white-space: nowrap;
  /* 禁止换行 */
  overflow: hidden;
  /* 隐藏溢出部分 */
  text-overflow: ellipsis;
  /* 显示省略号 */
}

/* 5. 高亮样式 (保持不变) */
.search-result-item .highlight {
  background-color: rgba(0, 122, 255, 0.15);
  color: rgb(0, 0, 0);
  border-radius: 3px;
  padding: 0 2px;
}

/* 其他相关样式 (保持不变) ... */
@keyframes temporary-highlight {
  0%,
  100% {
    background-color: transparent;
  }

  20%,
  80% {
    background-color: rgba(0, 122, 255, 0.15);
  }
}

.message-highlight {
  animation: temporary-highlight 1.5s ease-out;
}

/* 新增：隐藏搜索框内自带的清除按钮(x) */
#search-input::-webkit-search-cancel-button {
  display: none;
}

/* === 用于图标和滚动标题的新样式 === */

/* 1. 主容器，用于对齐图标和文本 */
.collapsed-music-info {
  display: flex;
  align-items: center;
  gap: 6px;
  /* 图标和文字之间的间距 */
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

/* 2. SVG 图标的样式 */
.music-icon-collapsed {
  flex-shrink: 0;
  /* 防止图标被压缩变形 */
}

/* 3. “窗口”容器，用于隐藏溢出的文本 */
.title-scroller-window {
  overflow: hidden;
  /* 关键！隐藏所有超出这个容器的内容 */
  flex-grow: 1;
  /* 让它占据所有剩余的空间 */
}

/* 4. 标题文本的基础样式 */
.collapsed-title {
  color: white;
  font-weight: 400;
  white-space: nowrap;
  /* 强制文本不换行 */
  display: inline-block;
  /* 这是让动画正确工作所必需的 */
}

/* 5. 这个类将由 JavaScript 添加，用于激活滚动动画 */
.collapsed-title.scrolling {
  /* 让文本的起点移动到“窗口”的右侧，为滚动入场做准备 */
  padding-left: 100%;
  /* 应用我们下面定义的 'marquee-scroll' 动画 */
  animation: marquee-scroll 8s linear infinite;
}

/* 6. 定义滚动动画的关键帧 */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    /* 将文本向左移动，直到它完全从视野中消失 */
    transform: translateX(-100%);
  }
}

/* === 新增：灵动岛展开后顶部的样式 === */
.expanded-header {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  /* 左右两端对齐 */
  align-items: flex-start;
  /* 顶部对齐 */
}

/* 复用 .song-details 的样式，但确保它不会被压缩 */
.song-details {
  text-align: center;
  flex-shrink: 0;
}

/* 新增的邀请按钮样式 */
.island-action-button {
  position: absolute;
  top: -5px;
  /* 微调垂直位置 */
  right: -5px;
  /* 微调水平位置 */
  background: none;
  border: none;
  padding: 5px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.island-action-button:hover {
  opacity: 1;
}

/* === 新增：邀请联系人对话框的CSS (这是缺失的样式部分) === */

/* 对话框的遮罩背景 */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  /* JS会控制它显示 */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 对话框主体 */
.modal-content {
  background-color: #f7f7f7;
  border-radius: 18px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  width: 300px;
  /* 对话框宽度 */
  max-width: 90%;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

/* 对话框头部 */
.modal-header {
  position: relative !important;
  /* 作为定位基准 */
  background-color: #f2f2f7;
  border-bottom: 1px solid rgba(60, 60, 67, 0.06);
  flex-shrink: 0;
  /* 移除 flex 布局的干扰，改用绝对定位布局子元素 */
  display: block;
}

.modal-header h2 {
  color: #1c1c1e;
  /* 深黑色标题 */
}

.modal-close-button {
  position: absolute !important;
  top: 50%;
  right: 15px;
  /* 距离右边 15px */
  transform: translateY(-50%) !important;
  /* 垂直居中 */

  /* 样式美化 */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #e5e5ea !important;
  /* 浅灰底色 */
  color: #8e8e93 !important;
  /* 深灰图标 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  z-index: 3;

  /* ▼▼▼ 核心修复：去掉所有边框和描边 ▼▼▼ */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 对话框内容区域 */
.modal-body {
  flex-grow: 1;
  /* 占据剩余空间 */
  overflow-y: auto;
  /* 只有这里可以滚动 */
  padding: 20px;
  /* 给内容留出呼吸空间 */

  /* 隐藏滚动条 (美观) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.modal-body::-webkit-scrollbar {
  display: none;
}

/* 列表项的样式 (这个之前给过，请确保它存在) */
.invite-contact-item {
  display: flex;
  align-items: center;
  padding: 8px 20px;
  transition: background-color 0.2s;
}

.invite-contact-item:hover {
  background-color: #f0f0f0;
}

.invite-contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

.invite-contact-name {
  font-size: 16px;
  color: #111;
  flex-grow: 1;
}

.invite-button {
  padding: 5px 15px;
  font-size: 13px;
  font-weight: 500;
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.1);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.invite-button.invited {
  background-color: #e5e5ea;
  color: #8e8e93;
  cursor: not-allowed;
}

/* === 新增：共享听歌重叠头像的样式 === */

/* 头像容器的样式 */
.shared-avatars {
  position: absolute;
  /* 绝对定位，浮动在左上角 */
  top: -5px;
  /* 垂直方向微调，使其与歌名对齐 */
  left: 0;
  display: flex;
  /* 使用flex布局来排列头像 */
  align-items: center;
  padding: 2px;
  display: none;
  /* 默认状态下隐藏 */
}

/* 当需要显示时，JS会添加这个 .active 类 */
.shared-avatars.active {
  display: flex;
}

/* 单个头像的样式 */
.shared-avatar-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* 圆形 */
  border: 2px solid rgba(255, 255, 255, 0.8);
  /* 半透明白色边框，增加质感 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  /* 轻微阴影 */
  object-fit: cover;
  /* 防止图片变形 */
}

/* 关键：让第二个头像向左移动，与第一个头像重叠 */
.shared-avatar-img:nth-child(2) {
  margin-left: -12px;
}

/* === 新增：“结束一起听”确认气泡的样式 === */
.confirmation-bubble {
  position: absolute;
  top: 10%;
  left: 250%;
  transform: translateX(-50%);
  margin-top: 8px;

  background-color: rgba(60, 60, 60, 0.85);
  /* 半透明深灰色背景 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: white;
  padding: 8px 12px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  /* 防止文字换行 */

  /* 默认隐藏，通过JS控制显示 */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-5px);
  /* 增加一个轻微的上移动画 */
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 10;
}

/* JS添加 .active 类时，气泡显示出来 */
.confirmation-bubble.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.confirmation-bubble span {
  font-size: 14px;
}

.confirmation-bubble button {
  background-color: #ff3b30;
  /* 红色背景 */
  color: white;
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* === 新增：用于在聊天界面显示系统提示的样式 === */
.system-notification {
  text-align: center;
  margin: 10px auto;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.1);
  border-radius: 20px;
  width: fit-content;
  pointer-events: none;
}

/* --- 输入框包装层的正确样式 --- */
.chat-input-wrapper {
  position: relative;
  /* 这是最关键的一步！为内部的按钮提供定位参考 */
  flex-grow: 1;
  display: flex;
  align-items: center;
}

/* --- 表情按钮的正确样式 --- */
#chat-emoji-button {
  position: static;
  transform: none;
  right: 5px;
  top: 50%;

  color: #333;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  /* 防止被挤压 */
}

#chat-emoji-button svg {
  width: 22px;
  height: 22px;
}

/* --- 输入框的正确样式 --- */
.chat-input-area input {
  width: 100%;
  padding-right: 15px;
  /* 在右侧留出空间给按钮 */
  box-sizing: border-box;
}

/* --- 新增：表情选择面板的样式 --- */

#emoji-panel {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 15;

  /* 高度和位置 */
  height: var(--emoji-panel-height);
  bottom: calc(var(--emoji-panel-height) * -1);

  /* 布局 */
  display: flex;
  flex-direction: column;

  /* 视觉风格 */
  background-color: rgba(255, 255, 255, 1);

  padding-bottom: 20px;

  /* ▼▼▼ 核心修复：默认状态下不可见 ▼▼▼ */
  visibility: hidden;

  /* 动画逻辑：
       bottom: 0.35s (运动时间)
       visibility: 0s (变化时间) linear 0.35s (延迟时间 - 等滑下去再隐藏) 
    */
  /* ▼▼▼ 核心优化：使用 iOS 原生减速曲线，实现无缝同步 ▼▼▼ */
  transition: bottom 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0.35s;
}

/* 3. 让其他元素的动画也使用统一的曲线 */
/* ▼▼▼ 核心优化：底栏和消息容器使用相同的动画曲线和时长，实现完美同步 ▼▼▼ */
.chat-input-area,
.chat-messages-container {
  transition: bottom 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    padding-bottom 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

/* --- 激活状态：所有距离都将根据变量自动计算 --- */

/* 表情面板上移 */
#chat-screen.emoji-panel-active #emoji-panel {
  bottom: 0;

  /* ▼▼▼ 核心修复：激活时立即显示 ▼▼▼ */
  visibility: visible;
  /* 移除延迟，立即变为可见，然后开始向上滑 */
  transition-delay: 0s;
}

/* 输入栏上移，移动的距离就是变量的值 */
#chat-screen.emoji-panel-active .chat-input-area {
  bottom: var(--emoji-panel-height);
}

/* 消息容器增加内边距，使用 calc() 自动计算总高度 */
#chat-screen.emoji-panel-active .chat-messages-container {
  /* 70px(原底栏高) + 20px(新增间距) + 面板高度 */
  padding-bottom: calc(100px + var(--emoji-panel-height));
}

/* === 新增：更多功能面板激活时的底栏联动 === */
/* 输入栏上移，无缝衔接 */
#chat-screen.features-panel-active .chat-input-area {
  bottom: var(--features-panel-height);
}

/* 消息容器增加内边距 */
#chat-screen.features-panel-active .chat-messages-container {
  padding-bottom: calc(100px + var(--features-panel-height));
}
/* --- 新增：表情面板内部的样式 --- */

/* 1. 面板头部的 flex 布局，让按钮分布在两端 */
.emoji-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 20px;
  flex-shrink: 0;
}

/* 2. 头部按钮的简单样式 */
.panel-header-button {
  /* 苹果蓝文字 */
  font-size: 13px;
  font-weight: 600;
  border: none;
  padding: 6px 8px;
  border-radius: 20px;
  /* 胶囊形状 */
  cursor: pointer;
  transition: all 0.2s ease;
}

.panel-header-button:hover {
  transform: scale(1.02);
}

.panel-header-button:active {
  transform: scale(0.95);
  background-color: rgba(0, 122, 255, 0.2);
}

/* 3. 表情显示的网格容器 */
/* 3. 表情显示的网格容器 (修正版) */
#emoji-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 12px;
  row-gap: 2px;
  padding: 5px 10px;
  box-sizing: border-box;
  
  /* 滚动相关关键设置 */
  flex-grow: 1;
  min-height: 0;                /* 解决 Flex 嵌套下的高度计算问题 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; 
  
  /* 确保在某些容器下可见 */
  height: 100%;                 
  background-color: transparent !important;
}

.memory-prompt-input {
  /* 滚动相关关键设置 */
  flex-grow: 1;
  min-height: 0;                /* 解决 Flex 嵌套下的高度计算问题 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; 
}

/* 4. 单个表情图片的样式 */
/* 2. 单个表情图片的样式 (核心修改) */
.emoji-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  /* 保持比例完整显示 */

  /* 图片美化 */
  background-color: rgba(255, 255, 255, 0.6);
  /* 给透明图片加个淡白底 */
  border-radius: 14px;
  /* 方圆角 */

  border: 1px solid rgba(0, 0, 0, 0.02);

  cursor: pointer;
  transition: transform 0.2s;
}

.emoji-item:hover {
  transform: scale(1.1);
  /* 鼠标悬浮时放大一点 */
}

/* 3. 表情项外层容器的样式 (保持不变) */
.emoji-item-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  transition: transform 0.2s;
}

.emoji-item-container:active {
  transform: scale(0.92);
}

/* 4. 可编辑备注的样式 (保持不变) */
.emoji-remark {
  font-size: 11px;
  color: #8e8e93;
  /* 次级灰色 */
  background-color: transparent;
  border: none;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emoji-remark:focus {
  background-color: #fff;
  border: 1px solid #007aff;
  outline: none;
  white-space: normal;
  overflow: visible;
}

.sticker-bubble {
  padding: 0;
  background-color: transparent;

  max-width: 80px;

  max-height: 80px;

  border-radius: 8px;

  object-fit: contain;

  box-shadow: none !important;
}

/* === 新增：表情包删除模式的样式 === */

/* 1. 让每个表情包的容器成为复选框的定位基准 */
.emoji-item-container {
  position: relative;
}

/* 2. 复选框的样式，默认隐藏 */
.emoji-checkbox {
  display: none;
  /* 默认不显示 */
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  z-index: 5;
  /* 确保在图片之上，可以被点击 */
}

/* 3. 当网格进入删除模式时，显示复选框 */
.emoji-grid-container.delete-mode .emoji-checkbox {
  display: block;
}

/* 4. (可选) 删除模式下，给选中的表情一个视觉反馈 */
/* 请只保留下面这一段关于选中样式的 CSS */

#emoji-grid-container.delete-mode .emoji-item-container.selected {
  aspect-ratio: 1 / 1;
  /* 为了确保这次一定能看到效果，我们使用了一个非常强烈的样式。
    如果这个样式生效了，您可以再把它改成您喜欢的样子。
    */
  border: 3px solid #007aff !important;
  /* 一个3px宽、不透明的蓝色实线边框 */
  background-color: rgba(0, 122, 255, 0.15) !important;
  /* 一个更明显的淡蓝色背景 */

  border-radius: 8px;
  /* 圆角 */
  transform: scale(0.95);
  /* 轻微缩小以示区别 */
  box-shadow: none !important;
  /* 确保没有其他阴影覆盖边框 */
}

/* 确保容器有过渡效果，让动画更平滑 */
.emoji-item-container {
  position: relative;
  transition: all 0.2s ease-in-out;
}

/* === 新增：美化App的动画控制 === */

/* 默认状态：美化页完全透明，并且无法交互 */
#beautify-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  /* 默认在下层 */
}

/* 当 phone-frame 拥有 .show-beautify 类名时 */
.phone-frame.show-beautify #home-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.phone-frame.show-beautify #beautify-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  /* 美化页浮上来 */
}

/* === 新增：全局美化页面的动画控制 === */

/* 默认状态：在下层，不可见 */
#global-beautify-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  /* 层级比美化主页高 */
  background-color: #f2f2f7;
  /* 默认浅灰背景 */
  transition: opacity 0.3s ease;
  /* 添加平滑过渡 */
}

/* 激活状态：当 phone-frame 拥有 .show-global-beautify 类名时 */
.phone-frame.show-global-beautify #beautify-screen {
  opacity: 0;
  /* 隐藏上一级页面 */
  pointer-events: none;
}

.phone-frame.show-global-beautify #global-beautify-screen {
  opacity: 1;
  /* 显示当前页面 */
  pointer-events: auto;
}

/* 深色模式适配 */
.phone-frame.dark-mode #global-beautify-screen {
  background-color: #1c1c1e;
}

.phone-frame.dark-mode #global-css-input {
  background-color: #2c2c2e;
  color: #f5f5f7;
  border: 1px solid #3a3a3c;
}

/* === 新增：主题预设界面动画控制 === */
#theme-presets-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.phone-frame.show-theme-presets #beautify-screen {
  opacity: 0;
  pointer-events: none;
}

.phone-frame.show-theme-presets #theme-presets-screen {
  opacity: 1;
  pointer-events: auto;
}

/* 主题预设卡片样式 - 极简高光扁平版 */
.theme-preset-item {
  display: flex;
  flex-direction: column;
  background-color: #ffffff; /* 纯白背景 */
  border-radius: 14px;
  padding: 16px;
  margin: 0 auto 16px auto;
  width: 92%;
  box-sizing: border-box;

  /* 核心：取消阴影，使用精致的硬边框 */
  border: 1.5px solid #1c1c1e;

  /* 模拟“高光”层：在卡片顶部加一条极细的亮色内边框 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  transition: transform 0.1s ease;
}

/* 增加悬停时的扁平反馈，而不是阴影 */
.theme-preset-item:active {
  transform: translateY(1px);
}

.theme-preset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.theme-preset-name {
  font-size: 15px;
  font-weight: 800; /* 加粗体现扁平力量感 */
  color: #1c1c1e;
  text-transform: uppercase; /* 增强设计感 */
}

.theme-preset-time {
  font-size: 11px;
  color: #8e8e93;
  font-weight: 500;
}

/* 预览区域：使用低饱和度的色块制造“凹陷”感 */
.theme-preset-preview {
  font-size: 12px;
  color: #48484a;
  background-color: #f2f2f7; /* 与背景白拉开差距 */
  padding: 12px;
  border-radius: 8px;
  font-family: "SF Mono", ui-monospace, monospace;
  border: 1px solid #e5e5ea;
  max-height: 60px;
  overflow: hidden;
  margin-bottom: 16px;
}

.theme-preset-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* 扁平化按钮：强对比、无渐变 */
.theme-preset-actions button {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid #1c1c1e; /* 统一的黑边框 */
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.15s ease;
}

/* 应用按钮：实色填充 */
.theme-preset-actions .apply-btn {
  background-color: #1c1c1e;
  color: #fff;
}

.theme-preset-actions .apply-btn:active {
  background-color: #48484a;
}

/* 导出按钮：线框风格 */
.theme-preset-actions .export-btn {
  background-color: #fff;
  color: #1c1c1e;
}

.theme-preset-actions .export-btn:active {
  background-color: #f2f2f7;
}

/* 删除按钮：警告红线框 */
.theme-preset-actions .delete-btn {
  border-color: #ff3b30;
  color: #ff3b30;
  background-color: #fff;
}

.theme-preset-actions .delete-btn:active {
  background-color: #fff5f5;
}

/* --- 深色模式适配 --- */
.phone-frame.dark-mode .theme-preset-item {
  background-color: #1c1c1e;
  border-color: #ffffff;
}

.phone-frame.dark-mode .theme-preset-name {
  color: #ffffff;
}

.phone-frame.dark-mode .theme-preset-preview {
  background-color: #2c2c2e;
  border-color: #3a3a3c;
  color: #d1d1d6;
}

.phone-frame.dark-mode .theme-preset-actions button {
  border-color: #ffffff;
  background-color: #1c1c1e;
  color: #ffffff;
}

.phone-frame.dark-mode .theme-preset-actions .apply-btn {
  background-color: #ffffff;
  color: #1c1c1e;
}
/* === 新增：气泡预设界面动画控制 === */
#bubble-presets-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.phone-frame.show-bubble-presets #beautify-screen {
  opacity: 0;
  pointer-events: none;
}

.phone-frame.show-bubble-presets #bubble-presets-screen {
  opacity: 1;
  pointer-events: auto;
}

/* --- 气泡预设卡片样式 (扁平高光版) --- */
.bubble-preset-item {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 14px;
  padding: 16px;
  margin: 0 auto 16px auto;
  width: 92%;
  box-sizing: border-box;

  /* 核心：用精密边框取代阴影 */
  border: 1.5px solid #1c1c1e;
  /* 微弱内高光，增加质感 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
}

.bubble-preset-item .preset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bubble-preset-item .preset-name {
  font-size: 15px;
  font-weight: 800;
  color: #1c1c1e;
  letter-spacing: -0.2px;
}

.bubble-preset-item .preset-time {
  font-size: 11px;
  color: #8e8e93;
  font-weight: 500;
}

/* 预览区：凹陷色块感 */
.bubble-preset-item .preset-preview {
  font-size: 12px;
  color: #48484a;
  background-color: #f2f2f7;
  padding: 12px;
  border-radius: 10px;
  font-family: "SF Mono", ui-monospace, monospace;
  border: 1px solid #e5e5ea;
  max-height: 64px;
  overflow: hidden;
  margin-bottom: 16px;
  white-space: pre-wrap;
  word-break: break-all;
}

.bubble-preset-item .preset-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* 按钮：硬核扁平风格 */
.bubble-preset-item .preset-actions button {
  padding: 7px 16px;
  border-radius: 8px;
  border: 1.5px solid #1c1c1e;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.15s ease;
}

/* 分享按钮：使用品牌色但保持扁平 */
.bubble-preset-item .share-btn {
  background-color: #34c759 !important;
  color: #fff !important;
  border-color: #1c1c1e !important; /* 保持黑色边框统一感 */
}

.bubble-preset-item .share-btn:active {
  background-color: #28a745 !important;
  transform: translateY(1px);
}

/* 删除按钮：红线框 */
.bubble-preset-item .delete-btn {
  color: #ff3b30 !important;
  border-color: #ff3b30 !important;
  background-color: #fff !important;
}

.bubble-preset-item .delete-btn:active {
  background-color: #fff5f5 !important;
  transform: translateY(1px);
}

/* --- 气泡选择弹窗内的列表项 --- */
.bubble-select-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  margin: 0 12px 10px 12px;
  background-color: #ffffff;
  /* 选择项使用稍细的边框，以示区分 */
  border: 1.2px solid #e5e5ea;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bubble-select-item:hover {
  border-color: #1c1c1e;
  background-color: #fcfcfc;
}

.bubble-select-item:active {
  background-color: #f2f2f7;
  transform: scale(0.98);
}

.bubble-select-item .item-name {
  font-size: 14px;
  font-weight: 600;
  color: #1c1c1e;
}

.bubble-select-item .item-preview {
  font-size: 11px;
  color: #8e8e93;
  max-width: 130px;
  background: #f2f2f7;
  padding: 2px 8px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 深色模式适配 --- */
.phone-frame.dark-mode .bubble-preset-item {
  background-color: #1c1c1e;
  border-color: #ffffff;
}

.phone-frame.dark-mode .bubble-preset-item .preset-name {
  color: #ffffff;
}

.phone-frame.dark-mode .bubble-preset-item .preset-preview {
  background-color: #2c2c2e;
  border-color: #3a3a3c;
  color: #d1d1d6;
}

.phone-frame.dark-mode .bubble-select-item {
  background-color: #2c2c2e;
  border-color: #3a3a3c;
}

.phone-frame.dark-mode .bubble-select-item .item-name {
  color: #f5f5f7;
}

.phone-frame.dark-mode .bubble-preset-item .preset-actions button {
  border-color: #ffffff;
  background-color: #1c1c1e;
  color: #ffffff;
}
/* === 修复：确保美化App的beautify-grid可滚动  === */
#beautify-screen .settings-content {
  height: 100%; /* 或者一个固定值如 500px */
  overflow-y: auto;
  display: block; /* 确保它是块级元素 */
  /* iOS PWA 滚动修复 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.beautify-grid {
  padding-bottom: 30px;
  /* iOS PWA 滚动修复 - 确保内容区域可滚动 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* 气泡预设选择弹窗样式 */
#bubble-preset-select-modal {
  z-index: 9999 !important;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

#bubble-preset-select-modal .modal-content {
  max-width: 350px;
  width: 90%;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

/* === 主题预设和气泡预设界面滚动修复 === */
#theme-presets-screen,
#bubble-presets-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#theme-presets-screen .settings-content,
#bubble-presets-screen .settings-content,
#theme-presets-container,
#bubble-presets-container {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100% - 50px);
}

#theme-presets-list,
#bubble-presets-list {
  padding: 10px 0;
}

/* === 新增:更换图标界面的动画控制 === */

/* 默认状态：更换图标页完全透明，并且无法交互 */
#icon-settings-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  /* 默认在下层 */
}

/* 当 phone-frame 拥有 .show-icon-settings 类名时 */
.phone-frame.show-icon-settings #beautify-screen {
  opacity: 0;
  /* 隐藏美化界面 */
  pointer-events: none;
  z-index: 2;
}

.phone-frame.show-icon-settings #icon-settings-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
  /* 更换图标页浮上来，层级要比美化页更高 */
}

/* === 新增：图标更换列表的样式 === */
.icon-setting-item {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0 auto 15px auto;
  /* 上下15px间距，左右自动居中 */
  padding: 10px;
  background-color: #f7f7f7;
  border-radius: 12px;
}

.icon-preview {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  margin-right: 15px;
  object-fit: cover;
  flex-shrink: 0;
  /* 防止图标被压缩 */
}

.icon-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  /* 占据所有剩余空间 */
  min-width: 0;
  /* 防止内容溢出时破坏布局 */
}

.app-name-setting {
  font-size: 16px;
  font-weight: 500;
  color: #111;
}

.icon-url-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  font-size: 12px;
  background-color: #fff;
  box-sizing: border-box;
  /* 确保padding不会撑大宽度 */
}

/* === 新增：更换时钟界面的动画控制 === */

/* 默认状态：时钟设置页完全透明，且无法交互 */
#clock-settings-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  /* 默认在下层 */
}

/* 当 .phone-frame 拥有 .show-clock-settings 类名时 */
.phone-frame.show-clock-settings #beautify-screen {
  opacity: 0;
  /* 隐藏美化界面 */
  pointer-events: none;
  z-index: 3;
}

.phone-frame.show-clock-settings #clock-settings-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 4;
  /* 层级比图标更换页更高 */
}

/* === 新增：时钟高斯模糊背景效果 === */
.clock.clock-blur-enabled {
  /* 1. 半透明背景色，这是模糊效果能看到东西的前提 */
  background-color: rgba(255, 255, 255, 0.15);

  /* 2. 核心：高斯模糊效果 */
  -webkit-backdrop-filter: blur(15px);
  /* 兼容 Safari */
  backdrop-filter: blur(15px);

  /* 3. 美化样式，让它看起来像个圆角卡片 */
  padding: 5px 20px;
  border-radius: 25px;

  /* 4. （可选）添加一点边框和阴影增加质感 */
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* === 新增：回到底部按钮的样式 === */
#scroll-to-bottom-btn {
  /* 定位和尺寸 */
  position: absolute;
  right: 20px;
  bottom: 100px;
  /* 定位在输入框上方 */
  width: 25px;
  height: 25px;
  z-index: 30;
  /* 确保在消息之上 */

  /* 视觉样式 */
  background-color: white;
  border-radius: 50%;
  /* 圆形 */
  border: none;
  cursor: pointer;

  /* 阴影和发光效果，增强立体感 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 20px rgba(0, 122, 255, 0.1);

  /* 内部SVG居中 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 隐藏/显示动画效果 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.25s ease-out;
}
.scroll-to-bottom-btn svg{
  width:15px;
  height:15px;
}

/* 当按钮需要显示时，JS会为其添加这个类 */
#scroll-to-bottom-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 修复：当更多功能面板弹出时，隐藏回到底部按钮以防止误触 (由 features-panel-active 类控制) */
.features-panel-active #scroll-to-bottom-btn,
.features-panel-active #scroll-to-bottom-btn.visible {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* === START: SHOPMALL SCREEN CSS === */

/* Default state: Shop page is transparent and cannot be interacted with */
#shop-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  /* Default on a lower layer */
}

/* When the phone-frame has the .show-shop class */
.phone-frame.show-shop #home-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.phone-frame.show-shop #shop-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  /* Bring the shop page to the top */
}

/* Style for the blue, bold title */
#shop-screen .settings-header h1 {
  color: #007aff;
  /* A standard blue color */
  font-weight: bold;
}

/* === START: 七袋购物身份头像 CSS === */
.shopper-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}

.shopper-avatar-btn img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* 圆形 */
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  object-fit: cover;
  /* 防止图片变形 */
  display: block;
}

/* === END: 七袋购物身份头像 CSS === */

/* === START: SHOPMALL 底栏和内容面板 CSS === */

/* 内容区域主容器，使用flex布局来管理面板和底栏 */
#shop-screen {
  display: flex;
  flex-direction: column;
}

/* ▼▼▼ START: 商城分类栏最终修复版 ▼▼▼ */

/* 1. 确保这是主滚动容器 */
#shop-main-content {
  /* 1. 移除默认的大额上内边距，由 .category-tabs 自己撑开 */
  padding-top: 0 !important;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  overflow-y: auto;
}

/* 2. 【核心修改】移除面板自身的滚动，让它只是一个普通容器 */
#shopping-content-panel.active {
  display: block;
  overflow-y: visible;
  /* 从 auto 改为 visible */
}

/* 【新增】隐藏 Webkit 浏览器 (Chrome, Safari) 的滚动条 */
.category-tabs::-webkit-scrollbar {
  display: none;
}

/* ▲▲▲ END: 商城分类栏最终修复版 ▲▲▲ */

/* 每个独立的内容面板 */
.shop-content-panel {
  display: none;
  /* 默认隐藏 */
  box-sizing: border-box;
}

/* 当面板被激活时，显示它 */
.shop-content-panel.active {
  display: block;
}

/* 底栏容器 */
.shop-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;
  flex-shrink: 0;
  /* 防止底栏在空间不足时被压缩 */
}

/* 单个标签按钮 */
.shop-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* 图标和文字的间距 */
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  color: #8a8a8e;
  /* 未选中时的颜色 */
  transition: color 0.2s;
}

/* 激活状态的标签按钮 */
.shop-tab-item.active {
  color: #007aff;
  /* 选中时的蓝色 */
}

/* 标签按钮内的SVG图标 */
.shop-tab-item svg {
  width: 24px;
  height: 24px;
}

/* === START: SHOPMALL 购物界面 CSS (V3 - 最终修复版) === */

/* --- 核心修改：让“购物”面板自己负责滚动 --- */

/* --- 1. 分类切换按钮 (保持粘性定位) --- */

.category-tab {
  flex-shrink: 0;
  /* 防止压缩 */
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  border-radius: 100px !important;
  /* 完全胶囊 */
  border: none !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* iOS 弹性动画 */

  /* 未选中状态：透明背景，深灰字 */
  background-color: transparent !important;
  color: #8e8e93 !important;
}

/* 选中状态：高光悬浮 */
.category-tab.active {
  background-color: #000000 !important;
  /* 纯黑背景 (iOS设计趋势) */
  color: #ffffff !important;
  transform: scale(1.05);
  /* 轻微放大 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* 投影 */
}

/* --- 2. 商品瀑布流网格 (不再需要自己滚动) --- */
.product-grid-shop {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 双列 */
  gap: 15px;
  padding: 20px 15px 120px 15px !important;
  /* 底部留足空间给悬浮栏 */
}

/* 4. 商品卡片：发行级美化 */
.product-card {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  /* 半透明白 */
  border-radius: 20px !important;
  /* 大圆角 */
  padding: 16px;

  /* 玻璃质感边框和阴影 */
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08),
    /* 弥散阴影 */ 0 4px 6px -4px rgba(0, 0, 0, 0.02),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  /* 内发光 */

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  overflow: hidden;
}

.product-card:active {
  transform: scale(0.96);
}

/* 悬停时增强阴影和微抬效果 */
.product-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  /* 微妙上浮 */
}

.product-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  margin-bottom: 6px;
  line-height: 1.3;
  padding-right: 10px;
  /* 防止撞到标签 */
}

.product-description {
  font-size: 11px !important;
  color: #86868b !important;
  line-height: 1.5;
  margin-bottom: 15px;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  /* 显示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.8;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: none !important;
  /* 去掉分割线 */
  padding-top: 5px;
}

/* 价格 */
.product-price {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #007aff !important;
  /* 苹果蓝 */
  font-feature-settings: "tnum";
  /* 等宽数字 */
}

/* 加购按钮 (圆形图标) */
.add-to-cart-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;

  background-color: #007aff !important;
  /* 纯黑背景 */
  color: #fff !important;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px !important;
  font-weight: 400;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.add-to-cart-btn:active {
  transform: scale(0.8) rotate(90deg);
  /* 点击旋转效果 */
  background-color: #333 !important;
}

.add-to-cart-btn:hover {
  background-color: rgba(0, 122, 255, 0.15);
  transform: scale(1.03);
  /* 轻微放大 */
}

.add-to-cart-btn:active {
  transform: scale(0.98);
  /* 点击反馈 */
}

/* === 装饰性背景 (给素卡片加点料) === */
.product-card::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 80px;
  height: 80px;
  background: linear-gradient(
    135deg,
    rgba(0, 122, 255, 0.1),
    rgba(0, 122, 255, 0)
  );
  border-radius: 50%;
  filter: blur(20px);
  z-index: 0;
}

/* === 深色模式适配 (Dark Mode) === */
.phone-frame.dark-mode .category-tabs {
  background: rgba(28, 28, 30, 0.75) !important;
}

.phone-frame.dark-mode .category-tab.active {
  background-color: #fff !important;
  color: #000 !important;
}

.phone-frame.dark-mode .product-card {
  background: rgba(44, 44, 46, 0.6);
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.phone-frame.dark-mode .product-name {
  color: #fff !important;
}

.phone-frame.dark-mode .product-description {
  color: #aeaeb2 !important;
}

.phone-frame.dark-mode .add-to-cart-btn {
  background-color: #fff !important;
  color: #000 !important;
}

.phone-frame.dark-mode .product-brand-tag {
  background: rgba(60, 60, 60, 0.9);
  color: #fff;
}

/* === END: SHOPMALL 购物界面 CSS (V3 - 最终修复版) === */

/* === START: SHOPMALL “我的”界面 CSS === */

/* 列表容器，整体像一个卡片 */
.my-account-list {
  margin: 20px 0;
  /* 上下留出一些间距 */
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  /* 确保内部元素的边框不会超出圆角 */
}

/* 列表中的每一项 */
.my-account-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  /* 轻微增加右侧内边距，让内容不拥挤 */
  font-size: 16px;
  color: #1c1c1e;
  cursor: pointer;
  transition: all 0.2s ease;
  /* 统一过渡效果 */
  background-color: #ffffff;
  /* 用双层边框替代单层，增加精致感 */
  border-bottom: 1px solid #f0f0f0;
  border-top: 1px solid transparent;
  /* 顶部隐形边框，hover时显形 */
  /* 轻微圆角，弱化直角的生硬感 */
  border-radius: 4px;
  margin: 0 4px;
  /* 与父容器保持间距，增强独立感 */
}

/* 悬停状态强化交互反馈 */
.my-account-item:hover {
  background-color: #fafafa;
  border-top-color: #eeeeee;
  /* 顶部边框显形，形成上下呼应 */
  transform: translateX(2px);
  /* 极轻微右移，增强交互感知 */
}

/* 最后一个项目不需要分隔线 */
.my-account-item:last-child {
  border-bottom: none;
}

/* 鼠标悬浮或点击时的效果 */
.my-account-item:active {
  background-color: #f0f2f5;
}

/* 右侧小箭头的样式 */
.chevron-icon {
  width: 20px;
  height: 20px;
}

/* === END: SHOPMALL “我的”界面 CSS === */
/* === START: SHOPMALL 购物车和订单 CSS (V2 - 悬浮按钮修复) === */

/* --- 1. 页面切换动画 (样式不变) --- */
#cart-screen,
#orders-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  background-color: #f0f2f5;
}

.phone-frame.show-cart #shop-screen,
.phone-frame.show-orders #shop-screen {
  opacity: 0;
  pointer-events: none;
}

.phone-frame.show-cart #cart-screen,
.phone-frame.show-orders #orders-screen {
  opacity: 1;
  pointer-events: auto;
}

/* --- 2. 购物车页面 --- */
.cart-page-content {
  padding-top: 90px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  /* 关键：为悬浮的footer提供定位基准 */
}

#cart-items-container {
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px;
  padding-bottom: 130px;
  /* 关键：为悬浮按钮留出足够的底部空间 */
}

.cart-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 添加悬停效果 */
.cart-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 为卡片添加装饰性元素 */
.cart-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: #007aff;
  border-radius: 2px 0 0 2px;
}

.cart-item-details {
  flex-grow: 1;
  padding: 0 15px;
  transition: all 0.3s ease;
}

.cart-item-name {
  font-size: 16px;
  font-weight: 600;
  color: #2d3436;
  margin: 0;
  transition: color 0.2s ease;
}

.cart-item-price {
  font-size: 15px;
  color: #2d3436;
  margin-top: 5px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.cart-item-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.cart-item-delete-btn svg {
  width: 20px;
  height: 20px;
  fill: #ff3b30;
}

/* 关键修改：购物车底部按钮样式 */
.cart-footer {
  position: absolute;
  /* 改为绝对定位 */
  bottom: 20px;
  /* 距离底部20px */
  left: 90px;
  /* 距离左边15px */
  right: 15px;
  /* 距离右边15px */
  z-index: 20;
  /* 确保在滚动内容之上 */
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 为悬浮按钮增加阴影，使其在复杂背景下更清晰 */
.cart-footer .form-button-secondary,
.cart-footer .save-button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- 3. 订单页面 (样式不变... except for these changes) --- */
.orders-page-content {
  padding: 105px 15px 15px 15px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}

.order-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  position: relative;
  border: 1px solid #f0f2f5;
  transition: all 0.2s ease;
}

.order-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
}

.order-header,
.order-details,
.order-recipient {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #f0f2f5;
}

.order-share-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  background: #f0f2f5;
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.order-share-btn:hover {
  background-color: #e4e6eb;
  transform: scale(1.05);
}

.order-card div:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.order-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.order-value {
  font-size: 17px;
  font-weight: 500;
  color: #1d1d1f;
  line-height: 1.5;
}

/* ▼▼▼ START: 在这里粘贴新的摸鱼App CSS代码 ▼▼▼ */

/* --- 摸鱼App的显示/隐藏动画控制 --- */
#slacking-off-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  display: flex;
  /* 使用flex布局来管理顶栏、内容和底栏 */
  flex-direction: column;
}

.phone-frame.show-slacking-off #home-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.phone-frame.show-slacking-off #slacking-off-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* --- 摸鱼App的内容区域和面板 --- */
#slacking-off-main-content {
  flex-grow: 1;
  position: relative;
  padding-top: 90px;
  /* 为顶栏留出空间 */
  background: white;
  overflow-y: auto;
}

.slacking-off-content-panel {
  display: none;
  box-sizing: border-box;
}

.slacking-off-content-panel.active {
  display: block;
}

/* --- 摸鱼App的底栏样式 (参考七袋App) --- */
.slacking-off-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;
  flex-shrink: 0;
}

.slacking-off-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  color: #8a8a8e;
  transition: color 0.2s;
}

.slacking-off-tab-item.active {
  color: #007aff;
}

.slacking-off-tab-item svg {
  width: 24px;
  height: 24px;
}

/* ▼▼▼ 在这里粘贴新的游戏界面CSS代码 ▼▼▼ */

/* --- 游戏瀑布流网格 --- */
#games-grid {
  padding: 15px;
  /* 核心：创建两列的瀑布流布局 */
  column-count: 2;
  column-gap: 15px;
}

/* --- 单个游戏卡片 --- */
.game-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 15px;
  overflow: hidden;
  /* 核心：防止卡片在切换分栏时被切断 */
  break-inside: avoid;
  display: flex;
  flex-direction: column;
}

.game-card img {
  width: 100%;
  height: auto;
  display: block;
}

.game-card-info {
  padding: 12px;
}

.game-card-info h3 {
  font-size: 16px;
  margin: 0 0 5px 0;
  color: #1c1c1e;
}

.game-card-info p {
  font-size: 12px;
  color: #8a8a8e;
  line-height: 1.4;
  margin: 0 0 10px 0;
}

.play-game-btn {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background-color: #007aff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.play-game-btn:hover {
  background-color: #0056b3;
}

/* ▼▼▼ 在这里粘贴新的储蓄卡片CSS代码 ▼▼▼ */

/* --- 储蓄卡片样式 --- */
.savings-card {
  background-color: #fff;
  border-radius: 8px;
  /* 圆角更大，看起来更柔和 */
  margin: 1px 10px;
  /* 卡片与屏幕边缘的间距 */
  padding: 25px 20px;
  /* 卡片内部的填充 */
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* 添加一个非常淡的边框增加质感 */
}

/* 卡片内的标题样式 */
.savings-card .card-title {
  color: #8a8a8e;
  /* 柔和的灰色 */
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 8px 0;
  /* 调整与下方数字的间距 */
}

/* 卡片内的余额数字样式 */
.savings-card .card-balance {
  color: #1c1c1e;
  font-size: 40px;
  /* 调整字体大小以更好地适应卡片 */
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  /* 确保行高正常 */
}

/* ▼▼▼ 在这里粘贴新的游戏弹窗CSS代码 ▼▼▼ */

/* --- 游戏弹窗内的选项容器 --- */
.game-choices {
  display: flex;
  justify-content: center;
  gap: 15px;
  /* 按钮之间的间距 */
  margin-top: 20px;
}

/* --- 游戏选项按钮的样式 --- */
.game-choice-btn {
  width: 80px;
  height: 60px;
  font-size: 24px;
  font-weight: 600;
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.1);
  border: 1px solid rgba(0, 122, 255, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.game-choice-btn:active {
  transform: scale(0.95);
  /* 点击时有轻微下沉效果 */
  background-color: rgba(0, 122, 255, 0.2);
}

/* ▼▼▼ 在这里粘贴新的“申请解除”按钮CSS代码 ▼▼▼ */

/* --- 让储蓄卡片成为按钮定位的基准 --- */
.savings-card {
  position: relative;
  /* 关键！*/
}

/* --- “申请解除”按钮的样式 --- */
.apply-unlock-button {
  position: absolute;
  /* 绝对定位，相对于父级.savings-card */
  top: 15px;
  right: 15px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #ff3b30;
  /* 醒目的红色 */
  background-color: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.2);
  border-radius: 20px;
  /* 圆角胶囊形状 */
  cursor: pointer;
  transition: background-color 0.2s;
}

.apply-unlock-button:hover {
  background-color: rgba(255, 59, 48, 0.2);
}

/* ▼▼▼ 在这里粘贴新的上班模拟按钮CSS代码 ▼▼▼ */

/* --- 上班模拟按钮的特殊样式 --- */
.play-game-btn[data-game-id="go_to_work"] {
  background-color: #34c759;
  /* 一个充满“生产力”的绿色 */
}

.play-game-btn[data-game-id="go_to_work"]:hover {
  background-color: #2a9e4a;
}

/* ▼▼▼ 在这里粘贴新的“收支明細”CSS代码 ▼▼▼ */

/* --- “收支明细”卡片样式 (类似“我的”页面的卡片) --- */
.details-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  font-size: 16px;
  color: #1c1c1e;
  cursor: pointer;
  transition: background-color 0.2s;
  background-color: #ffffff;
  border-radius: 8px;
  margin: 10px 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.details-card:active {
  background-color: #f0f2f5;
}

/* --- “收支明细”页面的显示/隐藏动画 --- */
#transactions-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  /* 层级要比摸鱼App主页高 */
  background-color: #f0f2f5;
}

.phone-frame.show-transactions #slacking-off-screen {
  opacity: 0;
  pointer-events: none;
}

.phone-frame.show-transactions #transactions-screen {
  opacity: 1;
  pointer-events: auto;
}

/* --- 明细页面的内容区域 --- */
.transactions-page-content {
  padding: 90px 15px 15px 15px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}

/* --- 单条收支记录的样式 --- */
.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 12px 15px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.transaction-info .description {
  font-size: 15px;
  color: #1c1c1e;
  margin-bottom: 4px;
}

.transaction-info .timestamp {
  font-size: 12px;
  color: #8a8a8e;
}

.transaction-amount {
  font-size: 16px;
  font-weight: 600;
}

.transaction-amount.income {
  color: #34c759;
  /* 收入用绿色 */
}

.transaction-amount.expense {
  color: #ff3b30;
  /* 支出用红色 */
}

/* --- GACHA App的显示/隐藏动画控制 --- */
#gacha-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  display: flex;
  /* 使用flex布局来管理顶栏、内容和底栏 */
  flex-direction: column;
  background-color: #f2f1f6;
  /* 给页面一个基础背景色 */
}

.phone-frame.show-gacha #home-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.phone-frame.show-gacha #gacha-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* --- GACHA App的内容区域和面板 --- */
#gacha-main-content {
  flex-grow: 1;
  position: relative;
  padding-top: 90px;
  /* 为顶栏留出空间 */
  overflow-y: auto;
}

.gacha-content-panel {
  display: none;
  /* 默认隐藏所有面板 */
  box-sizing: border-box;
}

.gacha-content-panel.active {
  display: block;
  /* 只显示激活的面板 */
}

/* --- GACHA App的底栏样式 --- */
.gacha-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;
  flex-shrink: 0;
  /* 防止底栏被压缩 */
}

.gacha-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  color: #8a8a8e;
  /* 未选中时的颜色 */
  transition: color 0.2s;
}

.gacha-tab-item.active {
  color: #007aff;
  /* 选中时的颜色 */
}

.gacha-tab-item svg {
  width: 24px;
  height: 24px;
}

/* === START: GACHA App 新增样式 === */

/* --- 悬浮发帖按钮 --- */
.floating-action-button {
  position: absolute;
  /* 相对于父容器 gacha-screen 定位 */
  bottom: 80px;
  /* 距离底部 80px (留出空间给底部导航栏) */
  right: 20px;
  /* 距离右侧 20px */
  z-index: 100;
  /* 确保它在帖子列表之上 */

  width: 40px;
  height: 40px;
  background-color: #007aff;
  /* 苹果蓝 */
  border-radius: 50%;
  /* 制作成圆形 */
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* 添加阴影使其有立体感 */

  display: flex;
  /* 使用flex布局 */
  justify-content: center;
  /* 水平居中SVG图标 */
  align-items: center;
  /* 垂直居中SVG图标 */
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.floating-action-button:hover {
  transform: scale(1.05);
  /* 鼠标悬浮时轻微放大 */
}

/* === START: GACHA Post 独立样式 (V-Final) === */

/* --- 1. 帖子流容器，设置5px边距 --- */
#gacha-posts-container {
  padding: 15px 5px 0 5px;
  width: 100%;
  box-sizing: border-box;
}

/* --- 2. 帖子卡片 (gp-card) --- */
.gp-card {
  width: 100%;
  margin: 0px 8px 8px 0px;
  background-color: white;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
  overflow: hidden;
  text-align: left;
  border-radius: 12px;
}

/* --- 3. 帖子头部 (gp-header) --- */
.gp-header {
  padding: 12px 15px;
  background-color: #ffffff;
}

.gp-header-content {
  /* 专属类名，不再冲突 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.gp-user-info {
  display: flex;
  align-items: center;
  text-align: left;
  flex-grow: 1;
  margin-right: 10px;
  min-width: 0;
}

.gp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.gp-user-info > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gp-user-name {
  font-size: 15px;
  font-weight: 500;
  color: #111827;
}

.gp-user-handle,
.gp-post-date {
  font-size: 11px;
  color: #86868b;
}

.gp-post-date {
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

/* --- 4. 内容与分割线 --- */
.gp-divider {
  height: 1px;
  background-color: #f0f0f0;
}

.gp-post-content {
  padding: 15px;
}

.gp-post-text {
  color: #1f2937;
  line-height: 1.5;
  margin-bottom: 16px;
  font-size: 15px;
}

.gp-post-text p {
  margin-bottom: 12px;
}

.gp-post-text p:last-child {
  margin-bottom: 0;
}

/* --- 5. 操作按钮 --- */
.gp-action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.gp-action-button {
  display: flex;
  align-items: center;
  color: #86868b;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.gp-action-button svg {
  width: 18px;
  height: 18px;
}

.gp-action-button.liked svg path {
  fill: #007aff !important;
  fill-opacity: 1 !important;
}

/* --- 6. 评论区 --- */
.gp-comment-section {
  border-top: 1px solid #f3f4f6;
  background-color: white;
}

.gp-comment-input-area {
  padding: 12px 15px;
  border-bottom: 1px solid #f3f4f6;
}

.gp-comment-input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gp-comment-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.gp-comment-input {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 7px 14px;
  font-size: 13px;
  outline: none;
  min-width: 0;
  box-sizing: border-box;
}

.gp-comment-input:focus {
  border-color: #007aff;
}

.gp-comment-list {
  max-height: 350px;
  overflow-y: auto;
}

.gp-comment-item {
  display: flex;
  gap: 10px;
  padding: 12px 15px;
  border-bottom: 1px solid #f9fafb;
}

.gp-comment-content {
  flex: 1;
}

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

.gp-comment-username {
  font-weight: 500;
  font-size: 13px;
}

.gp-comment-time {
  color: #86868b;
  font-size: 11px;
}

.gp-comment-text {
  color: #374151;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.gp-comment-actions {
  display: flex;
  gap: 12px;
}

.gp-reply-btn {
  background: none;
  border: none;
  color: #86868b;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}

.gp-reply-input-area {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.gp-reply-input {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 12px;
  outline: none;
}

.gp-reply-input:focus {
  border-color: #007aff;
}

.gp-reply-mention {
  color: #007aff;
  /* 苹果蓝 */
  font-weight: 500;
  /* 字体稍粗一些 */
}

/* --- 7. 深色模式适配 --- */
.phone-frame.dark-mode .gp-card {
  background-color: #2c2c2e;
  border-color: #3a3a3c;
}

.phone-frame.dark-mode .gp-header {
  background-color: #1c1c1e;
}

.phone-frame.dark-mode .gp-user-name,
.phone-frame.dark-mode .gp-post-text,
.phone-frame.dark-mode .gp-comment-username,
.phone-frame.dark-mode .gp-comment-text {
  color: #f5f5f7;
}

.phone-frame.dark-mode .gp-user-handle,
.phone-frame.dark-mode .gp-post-date,
.phone-frame.dark-mode .gp-comment-time,
.phone-frame.dark-mode .gp-reply-btn {
  color: #8e8e93;
}

.phone-frame.dark-mode .gp-divider {
  background-color: #3a3a3c;
}

/* === END: GACHA Post 独立样式 (V-Final) === */
/* --- END: GACHA App 新增样式 === */

/* ▼▼▼ START: Add these new styles for Dark Mode ▼▼▼ */

/* When dark mode is on, change the main background and text colors */
.phone-frame.dark-mode .screen,
.phone-frame.dark-mode .modal-content,
.phone-frame.dark-mode #shop-screen,
.phone-frame.dark-mode .shop-tab-bar {
  background-color: #1c1c1e;
  /* Dark grey background */
  color: #f5f5f7;
  /* Light grey text */
}

/* Style for headers in dark mode */
.phone-frame.dark-mode .settings-header,
.phone-frame.dark-mode .chat-header {
  background-color: rgba(44, 44, 46, 0.85);
  /* Semi-transparent darker grey */
  border-bottom-color: #3a3a3c;
  color: #f5f5f7;
}

/* Make sure header titles and buttons are also light-colored */
.phone-frame.dark-mode .settings-header h1,
.phone-frame.dark-mode .chat-header h1,
.phone-frame.dark-mode .header-text-button {
  color: #f5f5f7;
}

/* Style for input fields and other form elements */
.phone-frame.dark-mode .form-input,
.phone-frame.dark-mode .form-select,
.phone-frame.dark-mode .form-textarea,
.phone-frame.dark-mode .chat-input-area input {
  background-color: #2c2c2e;
  color: #f5f5f7;
  border-color: #3a3a3c;
}

/* Style for buttons */
.phone-frame.dark-mode .form-button-secondary {
  background-color: #2c2c2e;
  color: #0a84ff;
  /* A slightly brighter blue for dark mode */
}

/* Home screen specific text */
.phone-frame.dark-mode .clock span,
.phone-frame.dark-mode .app-name,
.phone-frame.dark-mode #motto {
  color: #ffffff;
}

/* --- 综合修复 --- */
/* 确保所有白色背景的屏幕在深色模式下变黑 */
.phone-frame.dark-mode #settings-screen,
.phone-frame.dark-mode #playlist-detail-screen,
.phone-frame.dark-mode #slacking-off-screen,
.phone-frame.dark-mode #icon-settings-screen {
  background-color: #1c1c1e !important;
  /* 使用 !important 确保最高优先级 */
}

/* 1. 修复：聊天界面底栏 & 表情包面板 */
.phone-frame.dark-mode .chat-input-area,
.phone-frame.dark-mode #emoji-panel {
  background-color: #1c1c1e;
  border-top-color: #3a3a3c;
}

.phone-frame.dark-mode #emoji-grid-container {
  background-color: #1c1c1e;
}

/* 表情包在深色模式下的背景板 */
.phone-frame.dark-mode .emoji-item {
  background-color: #2c2c2e;
}

/* 2. 修复：音乐App歌单详情页 (已包含在上面的综合修复中) */
/* (无需额外代码, #playlist-detail-screen 已处理) */

/* 3. 修复：摸鱼App */
.phone-frame.dark-mode #slacking-off-main-content,
.phone-frame.dark-mode .slacking-off-tab-bar {
  background-color: #1c1c1e;
}

.phone-frame.dark-mode .game-card,
.phone-frame.dark-mode .savings-card,
.phone-frame.dark-mode .details-card,
.phone-frame.dark-mode .transaction-item {
  background-color: #2c2c2e;
  color: #f5f5f7;
}

/* 摸鱼App内的文字颜色修复 */
.phone-frame.dark-mode .savings-card .card-balance,
.phone-frame.dark-mode .game-card-info h3,
.phone-frame.dark-mode .details-card span,
.phone-frame.dark-mode .transaction-info .description {
  color: #f5f5f7;
}

/* 4. 修复：美化App的更换图标卡片 */
.phone-frame.dark-mode .icon-setting-item {
  background-color: #2c2c2e;
}

.phone-frame.dark-mode .app-name-setting {
  color: #f5f5f7;
}

/* 5. 修复：设置App背景 (已包含在上面的综合修复中) */
/* (无需额外代码, #settings-screen 已处理) */

/* --- 其他细节优化 --- */
/* 修复“我的”和“购物车/订单”页面的白色卡片 */
.phone-frame.dark-mode .my-account-list,
.phone-frame.dark-mode .cart-item,
.phone-frame.dark-mode .order-card {
  background-color: #2c2c2e;
  border-color: #3a3a3c;
  color: #f5f5f7;
}

.phone-frame.dark-mode .my-account-item {
  color: #f5f5f7;
  border-bottom-color: #3a3a3c;
}

.phone-frame.dark-mode .order-value {
  color: #f5f5f7;
}

/* 修复GACHA App */
.phone-frame.dark-mode #gacha-screen,
.phone-frame.dark-mode .gacha-tab-bar {
  background-color: #1c1c1e;
}

.phone-frame.dark-mode .gacha-post-card,
.phone-frame.dark-mode .comment-content {
  background-color: #2c2c2e;
}

.phone-frame.dark-mode .post-author-name,
.phone-frame.dark-mode .post-content,
.phone-frame.dark-mode .post-likes-info,
.phone-frame.dark-mode .comment-author-name,
.phone-frame.dark-mode .comment-text {
  color: #f5f5f7;
}

.phone-frame.dark-mode .post-image-desc {
  background-color: #3a3a3c;
  color: #c7c7cc;
  border-left-color: #0a84ff;
}

.phone-frame.dark-mode .post-action-btn {
  color: #8e8e93;
}

.phone-frame.dark-mode .post-action-btn.liked {
  color: #0a84ff;
}

.phone-frame.dark-mode .comment-input {
  background-color: #3a3a3c;
  border-color: #545458;
  color: #f5f5f7;
}

/* ▲▲▲ END: Dark Mode Fixes ▲▲▲ */
/* ▲▲▲ END: Dark Mode styles ▲▲▲ */

.select-recipient-btn {
  /* 基础宽度设置 */
  width: 60%;
  padding: 10px 0;
  /* 垂直内边距，水平为0保持比例 */

  /* 文本样式 */
  font-size: 16px;
  font-weight: 500;
  color: #007aff;
  /* 主题色文字 */
  text-align: center;

  /* 按钮外观 */
  background-color: rgba(0, 122, 255, 0.1);
  /* 主题色浅色背景 */
  border: 1px solid rgba(0, 122, 255, 0.2);
  /* 细边框增强轮廓 */
  border-radius: 12px;
  /* 柔和圆角 */

  /* 交互效果 */
  cursor: pointer;
  transition: all 0.2s ease;
  /* 平滑过渡 */

  /* 居中显示 */
  margin-left: auto;
  margin-right: auto;
  display: block;
  /* 确保宽度和margin生效 */
}

/* 悬停状态优化 */
.select-recipient-btn:hover {
  background-color: rgba(0, 122, 255, 0.15);
  /* 略深背景增强反馈 */
  border-color: rgba(0, 122, 255, 0.3);
  /* 边框色同步加深 */
}

/* 点击状态反馈 */
.select-recipient-btn:active {
  background-color: rgba(0, 122, 255, 0.2);
  transform: scale(0.99);
  /* 轻微缩放强化点击感 */
}

/* === START: Gacha Post 可见范围功能样式 (V9) === */

/* 右上角可见范围设置按钮 */
.gp-visibility-btn {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  /* 将按钮推到最右边 */
  display: none;
}

.gp-visibility-btn svg {
  width: 18px;
  height: 18px;
  fill: #86868b;
  /* 默认灰色 */
}

.gp-visibility-btn.private svg {
  fill: #007aff;
  /* 设置为私密后变为蓝色 */
}

/* Modal内的世界书列表样式 */
.visibility-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.visibility-item input {
  margin-right: 12px;
  width: 18px;
  height: 18px;
}

.visibility-item label {
  font-size: 16px;
}

/* === START: Gacha Post 点赞显示样式 (V12) === */

/* 点赞信息行的容器 */
.gp-comment-likes {
  background-color: #f0f2f5;
  /* 淡灰色背景 */
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 8px;
  /* 与上方元素的间距 */
  font-size: 12px;
  color: #555;
  display: flex;
  /* 使用flex布局 */
  align-items: center;
  /* 垂直居中 */
  gap: 6px;
  /* 图标和文字的间距 */
}

/* 点赞列表里的小爱心图标 */
.gp-comment-likes svg {
  width: 14px;
  height: 14px;
  fill: #8a8a8e;
  /* 图标颜色 */
  flex-shrink: 0;
  /* 防止图标被压缩 */
}

/* 深色模式下的适配 */
.phone-frame.dark-mode .gp-comment-likes {
  background-color: #3a3a3c;
  color: #c7c7cc;
}

.phone-frame.dark-mode .gp-comment-likes svg {
  fill: #8e8e93;
}

/* --- START: 商品卡片品牌标记样式 --- */

/* 1. 确保商品卡片可以作为标记的定位基准 */
.product-card {
  position: relative;
  /* 关键！为绝对定位的子元素提供参考 */
  overflow: hidden;
  /* 防止标记溢出卡片的圆角 */
}

/* 2. 设计品牌标记本身的样式 */
.product-brand-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 9px;
  font-weight: 700;
  color: #000;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 2;
  text-transform: uppercase;
}

/* === 新增：消息编辑功能的样式 === */
.editing-bubble {
  width: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  resize: none;
  background-color: transparent;
  /* 背景透明，融入气泡 */
  font-family: inherit;
  /* 继承父元素字体 */
  font-size: inherit;
  /* 继承父元素字号 */
  color: inherit;
  /* 继承父元素颜色 */
  line-height: 1.4;
  padding: 0;
  margin: 0;
  overflow: hidden;
  /* 隐藏滚动条 */
}

/* === 核心修复：HTML卡片模式下的“裸奔”样式 === */
/* 去除气泡装饰，但保留布局属性（如 margin），完全遵循用户或默认的 Flex/Gap 设置 */
.message-content-wrapper.is-html-content {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  /* 允许卡片自适应宽度，但防止撑爆容器 */
  max-width: 95%;
  overflow: visible !important;
}
/* 同时把里面的气泡背景也去掉 */
.message-content-wrapper.is-html-content .chat-bubble {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 修复头像对齐问题：移除所有 margin/padding hack */
.message-content-wrapper.is-html-content > div {
  display: block;
  max-width: 100%;
}

/* 核心修复：防止任何情况下的头像变形或被挤压 */
.avatar-anchor,
.chat-avatar {
  flex-shrink: 0 !important;
}

/* === 新增：用于强制浏览器使用硬件加速的样式，减轻卡顿 === */
.phone-frame,
.screen,
.chat-messages-container {
  will-change: transform, scroll-position;
}

/* === (新增) 修复由硬件加速导致的输入法渲染Bug === */

/* === 修复：防止 HTML 消息被父容器裁切 === */
.message-content-wrapper.is-html-content {
  overflow: visible !important; /* 允许子元素溢出显示 */
}
.message-content-wrapper.is-html-content > div {
  overflow: visible !important;
}
.message-content-wrapper.is-html-content iframe.html-render-container {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  border: none !important;
  overflow: visible !important;
}

/* 确保消息列表不水平裁切 HTML 卡片 */
.chat-messages-container {
  overflow-x: visible !important;
}
.form-input,
.form-textarea,
.chat-input-area input {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* === 新增：API 库弹出框列表样式 === */
.api-library-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}

.api-library-item:hover {
  background-color: #f9f9f9;
}

.api-library-item:last-child {
  border-bottom: none;
}

.api-library-item .api-info {
  flex-grow: 1;
  min-width: 0;
  padding-right: 15px;
}

.api-library-item .api-info .api-name {
  font-size: 15px;
  font-weight: 500;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.api-library-item .api-info .api-details {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.api-library-item input[type="checkbox"] {
  margin-left: 10px;
  width: 18px;
  height: 18px;
}

/* 深色模式适配 */
.phone-frame.dark-mode .api-library-item {
  background-color: #1c1c1e;
  border-bottom-color: #3a3a3c;
}

.phone-frame.dark-mode .api-library-item:hover {
  background-color: #2c2c2e;
}

.phone-frame.dark-mode .api-library-item .api-name {
  color: #f5f5f7;
}

.phone-frame.dark-mode .api-library-item .api-details {
  color: #8e8e93;
}

/* ========================================================== */
/* === 新增：世界书分组功能的 CSS 样式 === */
/* ========================================================== */

/* --- 1. 世界书分组列表页的显示/隐藏控制 --- */
#worldbook-groups-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  /* 层级高于世界书主页 */
}

.phone-frame.show-worldbook-groups #worldbook-screen {
  opacity: 0;
  pointer-events: none;
}

.phone-frame.show-worldbook-groups #worldbook-groups-screen {
  opacity: 1;
  pointer-events: auto;
}

/* --- 2. 单个分组详情页的显示/隐藏控制 --- */
#worldbook-group-detail-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  /* 层级高于分组列表页 */
}

.phone-frame.show-worldbook-group-detail #worldbook-groups-screen {
  opacity: 0;
  pointer-events: none;
}

.phone-frame.show-worldbook-group-detail #worldbook-group-detail-screen {
  opacity: 1;
  pointer-events: auto;
}

/* --- 3. “移动到分组”弹窗内的列表项样式 --- */
.group-selection-item {
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.group-selection-item:hover {
  background-color: #f0f0f0;
}

.phone-frame.dark-mode .group-selection-item:hover {
  background-color: #2c2c2e;
}

/* ========================================================== */
/* === 新增：空状态下的“新建”按钮样式 === */
/* ========================================================== */
.empty-state-add-button {
  display: block;
  width: 90%;
  margin: 20px auto;
  /* 居中并与顶部保持距离 */
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.1);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s;
}

.empty-state-add-button:hover {
  background-color: rgba(0, 122, 255, 0.15);
}

/* === 新增：修复大型HTML内容的溢出问题 === */
.html-render-container {
  /* 【重要修复】使用visible让阴影不被裁切 */
  overflow: visible;

  /* (可选) 增加一个最小高度，让小内容也看起来像个块 */
  min-height: 50px;

  /* 确保它像一个块级元素一样填充空间 */
  width: auto;
  box-sizing: border-box;

  /* 【修复】解除宽度限制，让HTML内容完整显示 */
  max-width: none !important;
  min-width: 200px;

  /* 确保iframe本身没有边框干扰 */
  border: none !important;
  background: transparent;
}

/* === 新增：确保设置页顶栏最右侧的按钮能自动靠右 === */
.settings-header #select-api-library-btn {
  margin-left: auto;
  /* 自动外边距，会把它推到最右边 */
}

/* ========================================================== */
/* === 新增：语音输入功能的 CSS 样式 === */
/* ========================================================== */

/* --- 1. “按住 说话”按钮的样式 --- */
#voice-record-button {
  /* 1. 核心修复：添加 flex: 1 和 width: 100% */
  flex: 1;
  /* 自动占据剩余空间 */
  width: 100%;
  /* 强制宽度填满 */
  box-sizing: border-box;
  /* 确保边框不会撑破宽度 */

  /* 2. 保持原有的视觉样式 */
  height: 40px;
  border: 1px solid #dcdcdc;
  background-color: #f7f7f7;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  outline: none;

  /* 3. 禁止选中文本（提升体验） */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;

  transition: background-color 0.2s, transform 0.1s;
}

/* --- 2. 当用户按住按钮时的视觉反馈 --- */
#voice-record-button:active {
  background-color: #e0e0e0;
  transform: scale(0.98);
  /* 轻微缩小 */
  border-color: #c7c7c7;
}

/* --- 3. 切换按钮中图标的颜色 --- */
#voice-input-toggle svg {
  width: 24px;
  height: 24px;
  color: #333;
}

/* ========================================================== */
/* === 新增：合并按钮组的“药丸”背景样式 === */
/* ========================================================== */

/* --- 1. “药丸”背景容器的样式 --- */
.action-button-group {
  display: flex;
  /* 让内部按钮水平排列 */
  align-items: center;
  /* 垂直居中 */

  /* 浅灰色背景 */
  border-radius: 20px;
  /* 圆角，形成药丸形状 */

  position: relative;
  /* 为分割线提供定位基准 */
}

/* --- 2. 容器中间的分割线 --- */
.action-button-group::after {
  display: none !important;
  content: none !important;
  /* 双重保险 */
}

/* --- 3. 调整容器内部按钮的样式 --- */
.action-button-group .chat-action-button {
  background-color: transparent;
  /* 核心：让按钮背景变透明 */
  box-shadow: none;
  /* 移除按钮自身的阴影 */
  width: 30px;
  /* 固定宽度 */
  height: 30px;
  /* 固定高度 */
  color: #333;
  /* 图标颜色 */
  position: relative;
  /* 让按钮在分割线之上 */
  z-index: 1;
}

/* --- 4. 移除旧的独立按钮样式，避免冲突 --- */
/* (可选，但推荐) 您可以找到并删除之前为 #chat-add-attachment-button 写的独立样式 */
#chat-add-attachment-button {
  /* 如果您之前为这个按钮写过独立的背景色、阴影等样式，可以在这里覆盖掉或直接删除旧规则 */
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ========================================================== */
/* === 新增：语音输入弹出面板的 CSS 样式 === */
/* ========================================================== */

/* --- 1. 遮罩背景 --- */
.voice-panel-overlay {
  position: fixed;
  /* 固定定位，覆盖整个浏览器窗口 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  /* 确保在最顶层 */

  /* 默认隐藏 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

/* --- 2. 面板主体 --- */
.voice-panel-content {
  background-color: #ffffff;
  border-radius: 16px;
  width: 320px;
  max-width: 90%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;

  /* 弹出动画 */
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

/* 当遮罩显示时，触发面板和自身的动画 */
.voice-panel-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.voice-panel-overlay.visible .voice-panel-content {
  transform: scale(1);
}

/* --- 3. 面板内部件 --- */
.voice-panel-header {
  padding: 20px;
  display: flex;
  justify-content: center;
}

#voice-transcript-preview {
  flex-grow: 1;
  min-height: 100px;
  padding: 0 20px;
  border: none;
  outline: none;
  resize: none;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: transparent;
}

.voice-panel-footer {
  display: flex;
  border-top: 1px solid #f0f0f0;
}

.voice-panel-button {
  flex: 1;
  padding: 15px;
  border: none;
  background: none;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.voice-panel-button.cancel {
  color: #8e8e93;
  border-right: 1px solid #f0f0f0;
}

.voice-panel-button.send {
  color: #007aff;
}

.voice-panel-button:active {
  background-color: #f5f5f5;
}

/* ========================================================== */
/* === 新增：为移动端长按设计的专属动画类 === */
/* ========================================================== */

/* === 磨砂高光增强版面板 === */

:root {
  /* 参考你提供的文件：更高的不透明度(0.85)与强力饱和度 */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-speed: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --glass-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.15);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7); /* 顶部硬高光 */
}

/* 1. 面板容器：从底部滑出（与表情面板行为一致） */
.features-panel {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 15;

  /* 高度和位置：默认隐藏在底部 */
  height: var(--features-panel-height);
  bottom: calc(var(--features-panel-height) * -1);

  /* 布局：水平滚动容器 */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1px 0 24px 0;
  overflow: hidden;

  /* 视觉风格：厚实的磨砂质感 */
  background-color: rgba(255, 255, 255, 1);
  /* border-top: 1px solid rgba(0, 0, 0, 0.06); */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);

  /* 默认状态下不可见 */
  visibility: hidden;

  /* ▼▼▼ 核心：统一的动画曲线，与底栏完全同步 ▼▼▼ */
  transition: bottom 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0.35s;
}

/* 激活状态：面板滑上来 */
#chat-screen.features-panel-active .features-panel {
  bottom: 0;
  visibility: visible;
  transition-delay: 0s;
}

/* 2. 网格容器：水平滚动的分页布局 */
.features-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  /* scroll-snap-type: x mandatory; 禁用原生吸附，改用JS控制灵敏度 */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  flex-grow: 1;

  /* 隐藏滚动条 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.features-grid::-webkit-scrollbar {
  display: none;
}

/* 3. 每一页容器 */
.features-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  scroll-snap-align: start;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  /* gap: 12px 8px; */
  padding: 8px 16px;
  box-sizing: border-box;
  align-content: center;
}

/* 4. 分页指示器（小圆点） */
.features-page-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 0 0 0;
  flex-shrink: 0;
}

.features-page-indicator .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
}

.features-page-indicator .dot.active {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.5);
}

/* 5. 功能项 */
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* 4. 图标容器：实心感（Solid）+ 物理微压感 */
.feature-icon {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;

  /* 浅灰色背景，带一点点向下的内阴影 */
  background: rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);

  transition: all 0.2s ease;
}

/* 5. 纯色填充图标 (无 Stroke) */
.feature-icon svg {
  width: 22px;
  height: 22px;

  stroke: none;
}

/* 6. 文字：参考文件中的字体排版 */
.feature-name {
  font-size: 11px;
  color: #1d1d1f;
  font-weight: 500;
  letter-spacing: -0.2px;
  opacity: 0.8;
}

/* --- 交互效果：点击时的深色回馈 --- */
.feature-item:active .feature-icon {
  transform: scale(0.9);
  background: rgba(0, 0, 0, 0.08);
}

/* --- 深色模式适配 (按你文件风格同步) --- */
@media (prefers-color-scheme: dark) {
  .features-panel {
    background: rgba(28, 28, 30, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }

  .feature-icon {
    background: rgba(255, 255, 255, 0.1);
  }

  .feature-icon svg {
    fill: #ffffff;
  }

  .feature-name {
    color: #ffffff;
  }
}

/* 新增：回执按钮悬浮样式 */
/* === (修改) 回执功能：左侧吸附竖条样式 === */
#receipt-feature {
  /* 1. 定位：吸附在左侧垂直居中 */
  position: absolute;
  left: 0;
  top: 80%;
  transform: translateY(-50%);
  /* 垂直居中修正 */

  /* 2. 尺寸：竖长的长方条 */
  width: 18px;
  /* 宽度窄一点，不挡视线 */
  height: 30px;
  /* 高度拉长 */

  /* 3. 形状：左侧直角，右侧圆角 (看起来像从边缘伸出来的标签) */
  border-radius: 0 12px 12px 0;

  /* 4. 视觉效果：毛玻璃质感 */
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-left: none;
  /* 贴边的部分不需要边框 */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);

  /* 5. 布局：让图标居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  /* 确保在消息之下，但在背景之上，或者根据需要调整 */

  /* 6. 动画：平滑过渡 */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 悬停/点击效果：稍微变宽，颜色变深 */
#receipt-feature:hover {
  width: 32px;
  /* 鼠标放上去变宽一点，方便点击 */
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
}

/* 点击时的反馈 */
#receipt-feature:active {
  transform: translateY(-50%) scale(0.95);
  /* 保持垂直居中的同时轻微缩放 */
}

/* 隐藏文字标签 (因为竖条很窄，放文字不好看，只留图标) */
#receipt-feature .feature-name {
  display: none;
}

/* === 新增：图标包预设页面的动画控制 === */

/* 默认状态：预设页完全透明，且无法交互 */
#preset-management-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  /* 层级介于美化主页和更换图标页之间 */
}

/* 当 .phone-frame 拥有 .show-presets 类名时 */
.phone-frame.show-presets #beautify-screen {
  opacity: 0;
  /* 隐藏美化界面 */
  pointer-events: none;
}

.phone-frame.show-presets #preset-management-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
  /* 预设页浮上来 */
}

/* === 新增：预设列表项的样式 === */
.preset-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px;
  background-color: #f7f7f7;
  border-radius: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.preset-name {
  font-size: 16px;
  font-weight: 500;
}

.apply-preset-btn,
.delete-preset-btn {
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
}

.apply-preset-btn {
  background-color: rgba(0, 122, 255, 0.1);
  color: #007aff;
}

.delete-preset-btn {
  background-color: rgba(255, 59, 48, 0.1);
  color: #ff3b30;
}

/* === 新增：为导出按钮添加样式 === */
.export-preset-btn {
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background-color: rgba(88, 86, 214, 0.1);
  /* 使用一个不同的颜色以区分 */
  color: #5856d6;
}

/* === 新增：签名美化页面的动画控制 === */
#motto-settings-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  /* 层级高于预设页 */
}

.phone-frame.show-motto-settings #beautify-screen {
  opacity: 0;
  pointer-events: none;
}

.phone-frame.show-motto-settings #motto-settings-screen {
  opacity: 1;
  pointer-events: auto;
}

/* === 新增：图标名称美化页面的动画控制 === */
#appname-settings-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  /* 层级高于预设页 */
}

.phone-frame.show-appname-settings #beautify-screen {
  opacity: 0;
  pointer-events: none;
}

.phone-frame.show-appname-settings #appname-settings-screen {
  opacity: 1;
  pointer-events: auto;
}

/* === 新增：统一的、类似时钟的卡片式高斯模糊效果 (最终版) === */

/* 1. 签名模糊效果 (新版) */
#motto.motto-blur-enabled {
  /* 模仿时钟的样式 */
  background-color: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border-radius: 25px;
  /* 增大圆角，更像胶囊 */
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 2. 图标名称模糊效果 (新版) */
.app-name.app-name-blur-enabled {
  display: inline-block;
  /* 保持，对于span元素是必须的 */
  /* 模仿时钟的样式，但尺寸稍作调整以适应小字体 */
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 1px 6px;
  /* 调整为适合小字体的内边距 */
  border-radius: 12px;
  /* 合适的圆角 */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-shadow: none;
  /* 保持，移除文字阴影 */
}

/* 3. 夜间模式适配 (新版) */
.phone-frame.dark-mode #motto.motto-blur-enabled,
.phone-frame.dark-mode .app-name.app-name-blur-enabled {
  background-color: rgba(0, 0, 0, 0.3);
  /* 夜间模式统一使用半透明黑色背景 */
  border-color: rgba(255, 255, 255, 0.15);
  /* 边框统一改为半透明白色 */
}

/* === (新增) 用于显示用户上传图片的气泡样式 === */
.image-bubble {
  padding: 0;
  /* 移除内边距，让图片填满气泡 */
  background-color: transparent;
  /* 移除背景色 */
  max-width: 180px;
  /* 限制图片最大宽度 */
  max-height: 240px;
  /* 限制图片最大高度 */
  border-radius: 12px;
  /* 给图片加个圆角 */
  overflow: hidden;
  /* 确保图片不会超出圆角范围 */
}

/* 确保图片本身能正确显示 */
.image-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保图片内容填满容器而不变形 */
  display: block;
  /* 移除图片下方的空隙 */
}

/* === 新增：图片预览功能的CSS样式 === */

/* 1. 预览弹窗的遮罩背景 (复用已有样式，但确保它在聊天界面之上) */
#image-preview-modal {
  /* 使用绝对定位，使其在 phone-frame 内部全屏 */
  position: absolute;
  z-index: 1001;
  /* 层级要比聊天界面高 */
  background-color: rgba(0, 0, 0, 0.75);
  /* 背景可以更暗一些以突出图片 */
}

/* 2. 预览的图片本身 */
#preview-image-element {
  max-width: 90%;
  /* 最大宽度为屏幕的90% */
  max-height: 80%;
  /* 最大高度为屏幕的80% */
  object-fit: contain;
  /* 确保图片完整显示不被裁剪 */
  border-radius: 8px;
  /* 给预览图也加个小圆角 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  /* 动画效果：出现时有一个轻微的放大动画 */
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 3. 关闭按钮 */
#image-preview-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 36px;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 1002;
  display: none;
}

/* --- 1. 按钮和屏幕的通用控制 --- */

#voice-call-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  /* 核心修复：添加半透明背景和高斯模糊效果 */
  background-color: rgba(0, 0, 0, 0.25);
  /* 半透明深色背景，让白色文字更清晰 */
  -webkit-backdrop-filter: blur(20px);
  /* 兼容 Safari */
  backdrop-filter: blur(20px);
  /* 标准语法 */
}

.phone-frame.show-voice-call #voice-call-screen {
  opacity: 1;
  pointer-events: auto;
}

.call-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(0.7);
  transform: scale(1.1);
}

/* --- 2. 呼叫中/已连接 状态容器 --- */
.call-state-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  /* JS控制显示 */
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  box-sizing: border-box;
  transition: opacity 0.3s ease-in-out;
}

.call-state-container.active {
  display: flex;
}

/* --- 3. “正在呼叫”界面的元素 --- */
#calling-state {
  padding-top: 100px;
}

.call-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #d9d9d9;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

.call-name {
  margin-top: 20px;
  color: white;
  font-size: 24px;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.call-status {
  margin-top: 8px;
  color: white;
  font-size: 16px;
  opacity: 0.8;
}

.call-hang-up-button {
  position: absolute;
  bottom: 80px;
  width: 70px;
  height: 70px;
  background-color: #ff3b30;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* --- 4. “已连接”界面的元素 --- */
.connected-header {
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
}

.call-name.small {
  font-size: 30px;
  margin-top: 0;
}

#ai-speech-bubble-container {
  /* 移除了 flex-grow: 1，让它不再伸展，而是紧跟在头部下方 */

  /* 新增：让多个气泡可以垂直排列 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 让气泡在容器内水平居中 */
  gap: 10px;
  /* 多个气泡之间的垂直间距 */

  width: 100%;
  margin-top: 20px;
  /* 修改：气泡与上方计时器的间距，您可以按需调整这个值 */
}

.ai-speech-bubble {
  position: relative;
  background-color: rgba(255, 255, 255, 0.9);
  color: #1c1c1e;
  padding: 12px 18px;
  border-radius: 20px;
  max-width: 80%;
  font-size: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 这里的小三角样式是错误的，会导致它跑到屏幕顶部，需要修正 */
.ai-speech-bubble.first-bubble::after {
  /* 小三角 */
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent rgba(255, 255, 255, 0.9);
}

.connected-footer {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  width: 70%;
  margin: 0 auto;
}

.call-control-button {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- 按钮通用样式 --- */
.call-control-button {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  /* 新增：让内部的SVG图标居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- 新增：控制所有按钮内SVG的样式 --- */
.call-control-button svg {
  width: 32px;
  /* 控制图标宽度 */
  height: 32px;
  /* 控制图标高度 */
}

/* --- 挂断按钮：只保留背景色 --- */
.call-control-button.hang-up {
  background-color: #ff3b30;
  /* background-image 属性已被删除 */
}

/* --- 说话按钮：只保留背景色 --- */
.call-control-button.speak {
  background-color: #34c759;
  /* background-image 属性已被删除 */
}

/* === 新增：“正在输入”动画的专属样式 === */
.typing-indicator-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 20px !important;
  /* 使用 !important 确保覆盖原有padding */
}

.typing-indicator-bubble .typing-dot {
  width: 6px;
  height: 6px;
  margin: 0 3px;
  background-color: #8e8e93;
  /* 点的颜色 */
  border-radius: 50%;
  animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing-indicator-bubble .typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-indicator-bubble .typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

/* === START: 通话摘要功能专属CSS === */

/* --- 1. 界面切换动画 --- */
#summary-list-screen,
#summary-detail-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  /* 层级高于通话界面 */
  background-color: #f0f2f5;
}

/* ▼▼▼ 在这里粘贴新的代码 ▼▼▼ */
#summary-list-screen .settings-content,
#summary-detail-screen .settings-content {
  padding: 90px 15px 15px 15px;
  /* 顶部留出90px给标题栏 */
  height: 100%;
  /* 高度占满父容器 */
  overflow-y: auto;
  /* 核心：内容超出时，垂直滚动 */
  box-sizing: border-box;
  /* 确保内边距不会影响高度计算 */
}

/* ▲▲▲ 粘贴到这里结束 ▲▲▲ */

.phone-frame.show-summary-list #summary-list-screen,
.phone-frame.show-summary-detail #summary-detail-screen {
  opacity: 1;
  pointer-events: auto;
}

.phone-frame.show-summary-detail #chat-screen {
  opacity: 0;
  /* 从详情页返回时，确保聊天页可见 */
}

/* --- 2. 摘要列表卡片样式 --- */
/* ▼▼▼ 用这段新代码，替换所有旧的 .summary-card 相关样式 ▼▼▼ */

/* --- 1. 摘要卡片主容器 --- */
.summary-card {
  background-color: #ffffff;
  border-radius: 12px;
  /* 更柔和的圆角 */
  padding: 16px;
  margin-bottom: 15px;
  /* 卡片之间的间距 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* 更精致的阴影 */
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* 添加一个极淡的边框增加质感 */
}

/* 鼠标悬浮时，卡片轻微上浮，阴影加深，给用户视觉反馈 */
.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* --- 2. 卡片头部：包含标题和时间 --- */
.summary-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
  /* 顶部的分割线 */
}

.summary-card-title {
  font-size: 16px;
  font-weight: 600;
  /* 标题加粗 */
  color: #1c1c1e;
}

.summary-card-timestamp {
  font-size: 12px;
  color: #8a8a8e;
  /* 时间用柔和的灰色 */
}

/* --- 3. 卡片内容预览区 --- */
.summary-card-snippet {
  font-size: 14px;
  color: #3c3c43;
  /* 正文颜色稍深一些 */
  line-height: 1.5;
  /* 增加行高，更易读 */

  /* 核心：实现最多显示两行，超出部分显示省略号 */
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ▲▲▲ 替换到这里结束 ▲▲▲ */
/* ▼▼▼ 用这段新代码，替换旧的 #summary-detail-container 样式 ▼▼▼ */
#summary-detail-container {
  background-color: #ffffff;
  border-radius: 12px;
  /* 与列表卡片保持一致的圆角 */
  padding: 20px;
  /* 增加内边距，让文字有呼吸感 */
  font-size: 15px;
  line-height: 1.8;
  /* 增大行高，大幅提升长文案的可读性 */
  color: #1c1c1e;
  white-space: pre-wrap;
  /* 保持，用于正确显示换行 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  /* 添加轻微阴影 */
}

/* (可选) 让详情页里加粗的人名更好看 */
#summary-detail-container strong {
  font-weight: 600;
  color: #007aff;
  /* 比如给个主题蓝 */
}

/* ▲▲▲ 替换到这里结束 ▲▲▲ */

.phone-frame.dark-mode #summary-list-screen,
.phone-frame.dark-mode #summary-detail-screen,
.phone-frame.dark-mode .summary-card,
.phone-frame.dark-mode #summary-detail-container {
  background-color: #1c1c1e;
  color: #f5f5f7;
  border-color: #3a3a3c;
}

.phone-frame.dark-mode .summary-card-title,
.phone-frame.dark-mode .summary-card-snippet {
  color: #f5f5f7;
}

.phone-frame.dark-mode .summary-card-timestamp {
  color: #8e8e93;
}

/* === END: 通话摘要功能专属CSS === */

/* === END: 语音通话功能专属CSS (V2 - 完整版) === */

/* === (新增) “趣味晃动”动画的关键帧定义 === */
@keyframes fun-wobble {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-8deg);
  }

  50% {
    transform: rotate(8deg);
  }

  75% {
    transform: rotate(-4deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* === START: AI来电功能专属CSS === */

/* --- 1. “请求来电”按钮的专属颜色 --- */
#request-call-feature .feature-icon {
  background-color: rgba(255, 45, 85, 0.15);
  /* 淡红色背景 */
}

#request-call-feature .feature-icon svg path {
  fill: #ff2d55;
  /* 醒目的红色图标 */
}

/* --- 2. 来电界面的显示/隐藏控制 --- */
#incoming-call-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 7;
  /* 层级高于通话摘要等界面 */
  /* 复用通话界面的高斯模糊背景 */
  background-color: rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.phone-frame.show-incoming-call #incoming-call-screen {
  opacity: 1;
  pointer-events: auto;
}

/* --- 3. 来电界面底部的按钮布局 --- */
.incoming-call-footer {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin: 0 auto;
}

.call-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* 按钮和文字的间距 */
  color: white;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* === (新增) 来电原因文本的样式 === */
#incoming-call-reason {
  margin-top: 15px;
  /* 与上方的“正在呼叫您”拉开距离 */
  font-size: 18px;
  /* 字体可以稍微大一点 */
  font-weight: 500;
  max-width: 80%;
  /* 防止文本过长而换行 */
  text-align: center;
  opacity: 0.9;
}

/* 深色模式适配 */
.phone-frame.dark-mode #appointment-feature .feature-icon {
  background-color: rgba(231, 89, 153, 0.2);
}

.phone-frame.dark-mode #appointment-feature .feature-icon svg {
  stroke: #e96fa9;
}

.phone-frame.dark-mode #dating-history-feature .feature-icon {
  background-color: rgba(166, 125, 48, 0.2);
}

.phone-frame.dark-mode #dating-history-feature .feature-icon svg {
  stroke: #b58e45;
}

/* === (新增) 约会功能专属 CSS (精美风格版) === */

/* 1. 总容器：应用新字体 */
#dating-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  background-color: #ffffff;
  transition: opacity 0.25s ease-in-out;
  font-family: "Noto Serif SC", serif;
  /* 应用我们新引入的字体 */
}

.phone-frame.show-dating #dating-screen {
  opacity: 1;
  pointer-events: auto;
}

/* 2. 加载动画样式 (保持不变) */
.dating-loader {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #a67d30;
  font-size: 18px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}

.dating-loader.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 3. 引导设置界面的全新样式 */
.dating-setup-container {
  width: 100%;
  height: 100%;
  padding: 40px 20px;
  padding-top: max(50px, env(safe-area-inset-top) + 10px); /* 增加顶部间距避免被状态栏遮挡 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* 核心修改：使用优雅的渐变背景替代纯白 */
  background: linear-gradient(180deg, #fdfbf8 0%, #f5f1ea 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

.dating-setup-container.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 标题样式 */
.dating-setup-container h2 {
  color: #a67d30;
  font-weight: 700;
  /* 字体加粗 */
  font-size: 24px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  /* 添加细微文字阴影 */
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(166, 125, 48, 0.3);
  /* 添加装饰性下划线 */
  margin: 0 0 15px 0;
}

/* 上传区域的通用样式 */
.setup-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.setup-section label {
  font-size: 14px;
  color: #5d4a27;
  /* 更深、更搭配的棕色 */
}

/* 上传框的全新“画框”样式 */
.upload-box {
  width: 90%;
  height: 100px;
  border: 1px solid rgba(166, 125, 48, 0.4);
  /* 金色边框 */
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  /* 添加内阴影增加深度感 */
  color: #a67d30;
  font-size: 16px;
  transition: background-color 0.3s, box-shadow 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-size: contain;
  background-position: center;
}

.upload-box:hover {
  background-color: rgba(255, 248, 237, 0.8);
  /* 鼠标悬浮时添加外发光效果 */
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1),
    0 0 10px rgba(166, 125, 48, 0.2);
}

/* 底部按钮的全新样式 */
#start-dating-btn {
  width: 80%;
  margin-top: 15px;
  /* 与上方元素拉开距离 */
  padding: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  font-family: "Noto Serif SC", serif;
  /* 确保按钮也使用新字体 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  background: linear-gradient(145deg, #c8a25d, #a67d30);
  /* 金色渐变 */
  border: 1px solid #8e6a23;
  /* 深金色边框 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

#start-dating-btn:hover {
  background: linear-gradient(145deg, #d4af6e, #b58e45);
  /* 悬浮时颜色变亮 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
  /* 轻微上浮效果 */
}

/* === (新增) 约会设置-背景预览样式 === */
#bg-previews-container {
  width: 100%;
  max-height: 200px;
  /* 设置一个最大高度，超出则滚动 */
  overflow-y: auto;
  /* 允许垂直滚动 */
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(166, 125, 48, 0.2);
  box-sizing: border-box;
  flex-grow: 1;
  /* 让它在父容器中尽可能占据剩余空间 */
}

.bg-preview-item {
  position: relative;
  /* 为内部的绝对定位元素提供基准 */
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  background-color: #fdfbf8;
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.preview-img {
  width: 80px;
  height: 50px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  /* 防止图片被压缩 */
  border: 1px solid rgba(166, 125, 48, 0.2);
}

.preview-details {
  flex-grow: 1;
  font-size: 13px;
  color: #5d4a27;
}

.preview-tags {
  font-weight: 700;
}

.preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}

.preview-actions button {
  background: none;
  border: 1px solid #a67d30;
  color: #a67d30;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preview-actions button:hover {
  background-color: #a67d30;
  color: white;
}

.preview-actions button.delete-btn {
  border-color: #c9c9c9;
  color: #c94a4a;
}

.preview-actions button.delete-btn:hover {
  background-color: #c94a4a;
  color: white;
}

.default-tag {
  position: absolute;
  top: -1px;
  left: -1px;
  background-color: #a67d30;
  color: white;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px 0 6px 0;
}

/* === (新增) 视觉小说(VN)界面专属 CSS === */

#vn-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* 默认隐藏 */
  pointer-events: none;
  transition: opacity 0.8s ease-in-out;
  overflow: hidden;
  /* 确保所有内容都在屏幕内 */
}

#vn-screen.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 场景背景 */
#vn-background {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: background-image 1s ease-in-out;
  /* 背景切换时有淡入淡出效果 */
}

/* 角色立绘 */
#vn-character {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 85%;
  /* 立绘最高占屏幕的85% */
  width: 80%;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* 立绘出现/切换时的动画 */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* 顶部UI栏 */
#vn-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* 宽度占满 */
  padding: 20px 25px;
  /* 上下左右的边距 */
  box-sizing: border-box;
  display: flex;
  /* 使用Flexbox布局 */
  justify-content: space-between;
  /* 核心：让子元素两端对齐 */
  align-items: center;
  /* 垂直居中 */
  z-index: 30;
}

#vn-exit-btn {
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-family: "Noto Serif SC", serif;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

/* 对话框核心样式 (卡片风格) */
#vn-dialog-box {
  position: absolute;
  bottom: 75px;
  left: 5%;
  width: 90%;
  min-height: 120px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(239, 235, 228, 0.9) 100%
  );
  border: 2px solid #a67d30;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  padding: 10px 15px;
  box-sizing: border-box;
  z-index: 20;
  cursor: pointer;
}

/* 角色名容器样式 */
#vn-char-name-container {
  position: absolute;
  top: -18px;
  /* 向上偏移，悬浮在对话框之上 */
  left: 20px;
  background: linear-gradient(145deg, #c8a25d, #a67d30);
  color: white;
  padding: 4px 18px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  border: 1px solid #8e6a23;
}

/* 对话文本样式 */
#vn-dialog-text {
  margin-top: 25px;
  /* 为角色名留出空间 */
  color: #4a3f2d;
  font-size: 15px;
  line-height: 1.8;
}

/* === (新增) 约会功能 - VN界面设置按钮和设置页样式 === */

/* VN界面右上角的设置按钮 */
#vn-settings-btn {
  /* 移除绝对定位，因为它现在由Flexbox容器管理 */
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-family: "Noto Serif SC", serif;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

/* 约会设置界面的显示/隐藏控制 */
#dating-settings-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  /* 层级要高于VN主界面 */
  /* 直接复用引导页的背景 */
  background: linear-gradient(180deg, #fdfbf8 0%, #f5f1ea 100%);
  font-family: "Noto Serif SC", serif;
  transition: opacity 0.25s ease-in-out;
}

.phone-frame.show-dating-settings #dating-settings-screen {
  opacity: 1;
  pointer-events: auto;
}

/* === (新增) 约会设置 - 菜单化重构样式 === */

/* 1. 设置页主菜单容器 */
#dating-settings-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #fdfbf8 0%, #f5f1ea 100%);
}

/* 菜单按钮的容器 */
.settings-menu-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 90px;
}

/* 菜单按钮的统一样式 */
.menu-button {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  font-family: "Noto Serif SC", serif;
  color: #5d4a27;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(166, 125, 48, 0.3);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.menu-button:hover {
  background-color: #fff;
  border-color: #a67d30;
  transform: translateY(-2px);
}

/* 2. 所有子页面的通用样式 */
.settings-submenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  /* 默认隐藏 */
  flex-direction: column;
  background: linear-gradient(180deg, #fdfbf8 0%, #f5f1ea 100%);
}

/* 子页面内容滚动区域 */
/* 子页面内容滚动区域 (已修复遮挡问题) */
.settings-content-area {
  flex-grow: 1;
  overflow-y: auto;
  /* ▼▼▼ 核心修复：为顶栏留出90px的空间 ▼▼▼ */
  padding: 90px 20px 20px 20px;
  box-sizing: border-box;
  /* 确保内边距不会导致布局问题 */
}

/* === (新增) 文游风格返回按钮样式 === */
.vn-back-button {
  background-color: rgba(93, 74, 39, 0.6);
  /* 深棕色半透明背景 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-family: "Noto Serif SC", serif;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: all 0.2s ease;
}

.vn-back-button:hover {
  background-color: rgba(121, 98, 56, 0.8);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* === (新增) 字体设置子页面专属样式 === */

/* 使用flex布局来对齐标签和控件 */
.font-setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid rgba(166, 125, 48, 0.1);
}

.font-setting-item label {
  font-size: 15px;
  color: #5d4a27;
}

/* 颜色选择器和输入框的容器 */
.color-input-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-input-container input[type="text"] {
  width: 80px;
  text-align: center;
  border: 1px solid rgba(166, 125, 48, 0.3);
  border-radius: 6px;
  padding: 5px;
  font-family: "Noto Serif SC", serif;
}

.color-input-container input[type="color"] {
  width: 30px;
  height: 30px;
  border: none;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
}

/* 字体大小滑块的样式 */
.font-slider-container {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 60%;
  /* 限制宽度，避免太长 */
}

.font-slider-container input[type="range"] {
  flex-grow: 1;
  /* 让滑块占据剩余空间 */
}

/* === (新增) VN界面 - 对话引擎专属样式 === */

/* 1. 对话框内的“加载中”动画 */
.dialog-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-top: 20px;
  /* 让动画垂直居中一些 */
}

.dialog-loader span {
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background-color: #a67d30;
  border-radius: 50%;
  animation: dialog-bounce 1.4s infinite ease-in-out both;
}

.dialog-loader span:nth-child(1) {
  animation-delay: -0.32s;
}

.dialog-loader span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes dialog-bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

/* 2. 选项按钮容器的样式 */
#vn-choices-container {
  position: absolute;
  bottom: 270px;
  /* 定位在对话框正上方 */
  left: 0;
  right: 0;
  display: none;
  /* 默认隐藏 */
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 25;
}

/* 3. 单个选项按钮的“文游风”样式 */
.vn-choice-btn {
  width: 80%;
  max-width: 300px;
  padding: 12px;
  font-size: 15px;
  font-family: "Noto Serif SC", serif;
  color: #5d4a27;
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(166, 125, 48, 0.4);
  border-radius: 25px;
  /* 胶囊形状 */
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  text-align: center;
}

.vn-choice-btn:hover {
  background-color: #fff;
  border-color: #a67d30;
  transform: scale(1.03);
}

/* 4. 自定义输入弹窗的样式 (复用已有Modal) */
#custom-choice-modal .modal-content {
  gap: 15px;
}

#custom-choice-modal input {
  width: 90%;
  box-sizing: border-box;
}

/* === (重新设计) 自定义输入框 - 居中文游弹窗风格 === */

/* 1. 弹窗遮罩层 */
#custom-choice-modal {
  display: none;
  /* 默认隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  /* 半透明黑色背景 */
  display: flex;
  /* 使用flexbox居中 */
  justify-content: center;
  align-items: center;
  z-index: 100;
  /* 确保在最上层 */
  opacity: 0;
  /* 初始透明 */
  transition: opacity 0.3s ease-out;
  /* 淡入淡出动画 */
}

#custom-choice-modal.visible {
  opacity: 1;
}

/* 2. 弹窗内容区 - 核心文游风格 */
#custom-choice-modal .vn-modal-style {
  background: linear-gradient(180deg, #fdfbf8 0%, #f5f1ea 100%);
  /* 浅色渐变背景 */
  border: 2px solid #a67d30;
  /* 棕色边框 */
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  width: 90%;
  /* 宽度占手机宽度的90% */
  max-width: 350px;
  /* 最大宽度限制 */
  padding: 0;
  /* 移除默认内边距，让内部header/body/footer控制 */
  box-sizing: border-box;
  transform: scale(0.9);
  /* 初始缩小 */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* 缩放动画 */
}

#custom-choice-modal.visible .vn-modal-style {
  transform: scale(1);
  /* 显示时放大 */
}

/* 3. 弹窗内部元素的调整 */
#custom-choice-modal .modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(166, 125, 48, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#custom-choice-modal .modal-header h2 {
  font-size: 16px;
  color: #5d4a27;
  font-family: "Noto Serif SC", serif;
  margin: 0;
}

#custom-choice-modal .modal-close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #5d4a27;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* 调整确定按钮样式，使其符合文游风格 */
.vn-confirm-button {
  background: linear-gradient(145deg, #c8a25d, #a67d30);
  color: white;
  padding: 8px 20px;
  border: 1px solid #8e6a23;
  border-radius: 8px;
  font-family: "Noto Serif SC", serif;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  bottom: 20px;
}

.vn-confirm-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* === (新增) 文笔偏好功能专属样式 === */

/* 1. 偏好卡片的主体样式 */
.preset-card {
  width: 100%;
  background-color: #fff;
  border: 1px solid rgba(166, 125, 48, 0.2);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 2. 卡片内的文本内容 */
.preset-text {
  font-size: 14px;
  color: #5d4a27;
  line-height: 1.6;
  white-space: pre-wrap;
  /* 保持用户输入的换行 */
}

/* 3. 卡片底部的操作按钮区域 */
.preset-actions {
  display: flex;
  justify-content: flex-end;
  /* 按钮靠右 */
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}

/* --- 核心修复：增加ID选择器，限定样式的作用范围 --- */
#writing-style-settings .preset-actions button {
  background: none;
  border: 1px solid #a67d30;
  color: #a67d30;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-family: "Noto Serif SC", serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* （可选）为了保险起见，也为 hover 效果和删除按钮增加限定，防止它们未来也影响到其他地方 */
#writing-style-settings .preset-actions button:hover {
  background-color: #a67d30;
  color: white;
}

#writing-style-settings .preset-actions button.delete-btn {
  color: #c94a4a;
  border-color: #c94a4a;
}

#writing-style-settings .preset-actions button.delete-btn:hover {
  background-color: #c94a4a;
  color: white;
}

/* 4. “已激活”状态的卡片样式 */
.preset-card.active {
  border-color: #a67d30;
  border-width: 2px;
  box-shadow: 0 4px 15px rgba(166, 125, 48, 0.2);
}

.preset-card.active .select-preset-btn {
  background-color: #a67d30;
  color: white;
  cursor: not-allowed;
}

/* === (全新) 文笔偏好弹窗专属样式 === */

/* 1. 新的遮罩层样式 */
/* === (修复版) 文笔偏好弹窗专属样式 === */

/* 1. 新的遮罩层样式 */
.vn-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);

  /* 布局 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  /* 它确实在最顶层 */

  /* === 核心修复：隐身逻辑 === */
  opacity: 0;
  /* 1. 它是透明的 */
  visibility: hidden;
  /* 2. (新增) 它是隐藏的，浏览器会忽略它的存在 */
  pointer-events: none;
  /* 3. (新增) 它是“虚空”的，鼠标点击会直接穿透它点到底下的APP */

  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

/* === 必须添加：激活状态 === */
/* 当弹窗需要显示时，我们给它加上这个类 */
.vn-modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  /* 恢复实体，可以点击了 */
}

/* 2. 新的弹窗内容区样式 - 核心文游风格 */
.vn-modal-content {
  background: linear-gradient(180deg, #fdfbf8 0%, #f5f1ea 100%);
  border: 1px solid #a67d30;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 350px;
  padding: 0;
  box-sizing: border-box;

  /* 动画效果 */
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. 当遮罩显示时，触发动画 */
.vn-modal-overlay.visible {
  opacity: 1;
}

.vn-modal-overlay.visible .vn-modal-content {
  transform: scale(1);
}

/* 4. 弹窗内部件的样式微调 */
.vn-modal-content .modal-header {
  border-bottom-color: rgba(166, 125, 48, 0.2);
}

.vn-modal-content .modal-header h2 {
  color: #5d4a27;
  font-family: "Noto Serif SC", serif;
}

.vn-modal-content .modal-close-button {
  color: #a67d30;
}

.vn-modal-content .form-textarea {
  border-color: rgba(166, 125, 48, 0.3);
  background-color: #fff;
}

/* === (新增) 自定义输入弹窗专属样式 (修复版) === */

/* 1. 专属的遮罩层样式 */
.vn-custom-modal-overlay {
  position: absolute;
  /* 相对于 .phone-frame 定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;

  /* 默认隐藏 */
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* 2. 激活状态 */
.vn-custom-modal-overlay.visible {
  opacity: 1;
}

/* 3. 内部内容区的动画 (复用已有样式，但选择器更精确) */
.vn-custom-modal-overlay .vn-modal-content {
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.vn-custom-modal-overlay.visible .vn-modal-content {
  transform: scale(1);
}

/* === (新增) 约会记录功能专属样式 === */

/* 1. 记录卡片的主体样式 */
.history-card {
  background-color: #fdfbf8;
  border: 1px solid rgba(166, 125, 48, 0.2);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  /* 隐藏装饰性元素的溢出部分 */
}

/* 2. 卡片头部的日期和伙伴信息 */
.history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(166, 125, 48, 0.3);
}

.history-date {
  font-size: 13px;
  color: #a67d30;
  font-weight: 700;
}

.history-partner {
  font-size: 13px;
  color: #8a8a8e;
}

/* 3. AI生成的日记/摘要内容 */
.history-summary {
  font-size: 15px;
  color: #5d4a27;
  line-height: 1.8;
  white-space: pre-wrap;
  /* 保持AI生成的换行 */
}

/* 4. (可选) 增加一个装饰性的角标 */
.history-card::before {
  content: "♥";
  position: absolute;
  top: -10px;
  right: 10px;
  font-size: 30px;
  color: rgba(166, 125, 48, 0.1);
  transform: rotate(15deg);
}

/* === (修正) 约会记录独立界面专属样式 === */

/* 1. 界面的默认状态：完全透明，无法交互，且在屏幕下层 */
#dating-history-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  background-color: #f0f2f5;
  font-family: "Noto Serif SC", serif;
  transition: opacity 0.3s ease-in-out;
  /* 添加过渡动画 */
}

/* 2. 激活状态：当 .phone-frame 有 .show-dating-history 类时，界面浮现 */
.phone-frame.show-dating-history #dating-history-screen {
  opacity: 1;
  pointer-events: auto;
}

/* 3. 确保内容区域可以滚动 (这个样式您应该已经有了，请确认无误) */
#dating-history-container {
  padding: 90px 15px 15px 15px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

/* 4. 深色模式适配 */
.phone-frame.dark-mode #dating-history-screen {
  background-color: #1c1c1e;
}

/* --- 核心修复：确保内容区域可以滚动 --- */
#dating-history-container,
#style-presets-container {
  /* 将样式同时应用到两个容器 */
  padding: 90px 15px 15px 15px;
  /* 顶部留出空间给标题栏 */
  height: 100%;
  /* 高度占满父容器 */
  overflow-y: auto;
  /* 关键：内容超出时，垂直滚动 */
  box-sizing: border-box;
  /* 确保内边距不会影响高度计算 */
}

/* === (新增) VN界面右下角操作按钮样式 === */
.vn-action-btn {
  position: absolute;
  bottom: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  background-color: rgba(166, 125, 48, 0.6);
  /* 复用文游主题色 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
}

.vn-action-btn:hover {
  background-color: rgba(166, 125, 48, 0.8);
  transform: scale(1.1);
}

.vn-action-btn svg {
  width: 18px;
  height: 18px;
}

/* === START: 通用卡片按钮美化样式 (通话摘要 & 约会记录) === */

/* 1. 为两种卡片内的按钮设置通用样式 */
.summary-card .preset-actions button,
.history-card .preset-actions button {
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 20px;
  /* 胶囊形状 */
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

/* 2. 为两种卡片内的“编辑”按钮设置蓝色主题 */
.summary-card .preset-actions .edit-btn,
.history-card .preset-actions .edit-btn {
  background-color: rgba(0, 122, 255, 0.1);
  color: #007aff;
}

.summary-card .preset-actions .edit-btn:hover,
.history-card .preset-actions .edit-btn:hover {
  background-color: rgba(0, 122, 255, 0.2);
}

/* 3. 为两种卡片内的“删除”按钮设置红色主题 */
.summary-card .preset-actions .delete-btn,
.history-card .preset-actions .delete-btn {
  background-color: rgba(255, 59, 48, 0.1);
  color: #ff3b30;
}

.summary-card .preset-actions .delete-btn:hover,
.history-card .preset-actions .delete-btn:hover {
  background-color: rgba(255, 59, 48, 0.2);
}

/* === END: 通用卡片按钮美化样式 === */

/* === (新增) 约会引导页返回按钮样式 === */

/* 1. 按钮的定位容器 */
.dating-setup-header {
  position: absolute;
  top: max(50px, env(safe-area-inset-top) + 30px); /* 增加顶部距离，避免被状态栏遮挡 */
  left: 20px;
  z-index: 10;
  /* 确保在标题之上 */
}

/* 2. 按钮本身的“文游风”样式 */
.vn-setup-back-btn {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(166, 125, 48, 0.3);
  color: #5d4a27;
  /* 深棕色文字，匹配主题 */
  padding: 5px 15px;
  border-radius: 20px;
  /* 圆角胶囊形状 */
  font-family: "Noto Serif SC", serif;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.vn-setup-back-btn:hover {
  background-color: #fff;
  border-color: #a67d30;
  transform: translateY(-1px);
}

/* === (新增) 字体功能例外规则 === */
/*
  这条规则确保“约会”和“约会记录”功能不受全局字体更换的影响，
  并强制它们始终使用 'Noto Serif SC' 衬线字体。
  !important 用于覆盖JS设置的内联样式。
*/
#dating-screen,
#dating-history-screen {
  font-family: "Noto Serif SC", serif !important;
}

/* === START: Font URL Screen Styles === */

/* --- 1. Animation Control --- */

/* Default state: Font URL page is hidden */
#font-url-settings-screen {
  opacity: 0;
  pointer-events: none;
}

/* When .show-font-url is added to phone-frame... */
.phone-frame.show-font-url #beautify-screen {
  opacity: 0;
  /* Hide the beautify screen */
  pointer-events: none;
}

.phone-frame.show-font-url #font-url-settings-screen {
  opacity: 1;
  /* Show the Font URL screen */
  pointer-events: auto;
}

/* --- 2. List Item Styling --- */

.font-url-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px;
  background-color: #f7f7f7;
  border-radius: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.font-url-text {
  font-size: 14px;
  color: #333;
  /* Prevent long URLs from breaking the layout */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  /* Allow text to take up available space */
  margin-right: 10px;
}

.font-url-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  /* Prevent buttons from shrinking */
}

/* We can reuse existing button styles for consistency */
.apply-font-url-btn,
.delete-font-url-btn {
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
}

.apply-font-url-btn {
  background-color: rgba(0, 122, 255, 0.1);
  color: #007aff;
}

.delete-font-url-btn {
  background-color: rgba(255, 59, 48, 0.1);
  color: #ff3b30;
}

/* === (新增) 修复自定义输入弹窗的居中问题 === */
#custom-choice-modal .modal-body {
  display: flex;
  align-items: center;
  /* This centers the input horizontally */
}

/* === (新增) 文笔偏好激活状态的标签样式 === */
.preset-card .active-tag {
  display: none;
  /* Hide by default */
  position: absolute;
  top: -1px;
  right: -1px;
  background-color: #a67d30;
  color: white;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 0 8px 0 8px;
}

.preset-card.active .active-tag {
  display: block;
  /* Show when the card is active */
}

/* === (全新) AI内心独白弹窗样式 === */

/* 1. 弹窗主容器 */
/* === (美化版) AI内心独白气泡样式 === */

/* 1. 气泡容器 */
.thought-bubble {
  position: absolute;
  top: 95px;
  /* 稍微往下挪一点，不要贴着顶栏太紧 */
  left: 50%;
  transform: translateX(-50%) scale(0.95) translateY(-10px);
  /* 初始状态：略微缩小并上移 */
  z-index: 900;
  /* 提升层级，确保在大多数UI之上 */

  width: 90%;
  max-width: 350px;
  padding: 18px 22px;
  box-sizing: border-box;

  /* --- 核心美化：冷调灰白清透感 --- */
  background-color: rgba(245, 247, 249, 0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);

  /* 极细边缘线和现代阴影 */
  border-radius: 24px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05),
    0 8px 10px -6px rgba(0, 0, 0, 0.05);

  /* 字体设置 */
  color: #4b5563;
  text-align: left;

  /* 动画属性 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* 增强弹性动效 */
  pointer-events: none;
}

/* 2. 激活状态 */
.thought-bubble.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1) translateY(0);
  /* 回到正常大小和位置 */
  pointer-events: auto;
}

/* 3. 顶部小三角 (指向角色名) */
.thought-bubble::before {
  content: "";
  position: absolute;
  top: -8px;
  /* 微调位置 */
  left: 50%;
  transform: translateX(-50%);

  /* 使用边框法绘制三角形 */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #e5e7eb;
  /* 与主气泡边框色一致 */
}

.thought-bubble::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);

  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #f5f7f9;
  /* 遮盖边框，形成一体感 */
}

/* 4. 状态文本 (Status) */
#thought-bubble-status {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  /* 采用更柔和的中性灰 */
  text-transform: uppercase;
  letter-spacing: 1px;

  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
  /* 极细分割线 */

  display: flex;
  align-items: center;
  gap: 6px;
}

/* 5. 内心独白文本 (Monologue) */
#thought-bubble-monologue {
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  margin: 0;
  padding: 0;
  color: #4b5563;
  /* 核心文字颜色 */

  /* 移除深色背景下的阴影，光色主题追求极简 */
  text-shadow: none;
}

/* === 深色模式适配 === */
/* 在深色模式下，可以稍微加深背景，或者保持不变(因为本来就是深色设计) */
/* === 深色模式适配 === */
.phone-frame.dark-mode .thought-bubble {
  background-color: rgba(31, 41, 55, 0.92);
  border-color: rgba(75, 85, 99, 0.4);
  color: rgba(243, 244, 246, 0.9);
}

.phone-frame.dark-mode #thought-bubble-monologue {
  color: rgba(243, 244, 246, 0.9);
}

.phone-frame.dark-mode .thought-bubble::before {
  border-bottom-color: rgba(75, 85, 99, 0.4);
}

.phone-frame.dark-mode .thought-bubble::after {
  border-bottom-color: rgba(31, 41, 55, 0.92);
}

/* === (新增) 文图功能专属CSS (V2 - 带默认文字) === */

/* 2. 文图卡片的核心样式 (保持不变) */
.text-image-card {
  width: 150px;
  height: 150px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  /* 添加相对定位，为内部文字定位做准备 */
  overflow: hidden;
  /* 隐藏超出部分，让动画更干净 */
}

.text-image-card:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 3. 【新增】默认显示的“文图”艺术字样式 */
.text-image-card .default-text {
  /* 使用衬线字体，更具艺术感 */
  font-family: "Noto Serif SC", serif;
  font-size: 32px;
  /* 字体稍大一些 */
  font-weight: 700;
  /* 加粗 */
  color: rgba(0, 0, 0, 0.15);
  /* 使用非常淡的灰色，有高级感 */

  position: absolute;
  /* 绝对定位，使其可以和描述文字重叠 */
  opacity: 1;
  /* 默认状态下完全不透明 */
  transition: opacity 0.4s ease-in-out;
  /* 动画效果 */
}

/* 4. 【修改】用户输入的描述文字样式 */
.text-image-card .card-text {
  font-size: 14px;
  color: #343a40;
  text-align: center;
  line-height: 1.5;

  position: absolute;
  /* 绝对定位，使其可以和默认文字重叠 */
  opacity: 0;
  /* 默认状态下完全透明 */
  transition: opacity 0.4s ease-in-out;
  /* 动画效果 */
}

/* 5. 【核心动画逻辑】当卡片拥有 .text-revealed 类时，反转两个文字的透明度 */
.text-image-card.text-revealed .default-text {
  opacity: 0;
  /* 默认文字消失 */
}

.text-image-card.text-revealed .card-text {
  opacity: 1;
  /* 描述文字浮现 */
}

/* 1. 【核心Bug修复】.screen 的默认状态 */
/* 我们在这里明确定义，任何App页面在默认情况下都是完全透明且不可交互的 */
.screen {
  width: 100%;
  height: 100%;
  background: #f4f4f5;
  position: absolute;
  top: 0;
  left: 0;

  /* --- 核心修复代码 --- */
  opacity: 0;
  pointer-events: none;
  /* --- 修复结束 --- */

  z-index: var(--z-screen);
  transform-origin: top left;
  /* 变换的原点，配合JS计算 */

  /* 2. 【实现优雅动画】定义过渡效果 */
  /* 我们为 transform, opacity, border-radius 这三个属性添加了平滑的过渡动画 */
  transition: transform 0.35s cubic-bezier(0.45, 0, 0.55, 1),
    opacity 0.3s ease-in-out, border-radius 0.35s cubic-bezier(0.45, 0, 0.55, 1);
}

/* 3. App 正在打开或已经打开时的状态 */
/* 这个状态让页面变得可见、可交互，并提升层级 */
.screen.opening,
.screen.opened {
  opacity: 1;
  pointer-events: auto;
  z-index: var(--z-screen-active);
}

/* 4. App 已经完全打开后的最终样式 */
/* 这个状态定义了App铺满全屏时的最终形态 */
.screen.opened {
  transform: translate(0, 0) scale(1);
  border-radius: 0;
}

/* === 设置页面特定布局修复 === */
/* 修复方案：明确设置高度和滚动 */
#settings-screen .settings-content-ios {
  position: absolute !important;
  top: 70px !important; /* header高度：60px + padding-top 50px */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 20px 16px 40px 16px !important; /* 恢复原padding，但top由定位控制 */
  overflow-y: scroll !important; /* 强制滚动 */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

/* 强制修复 settings-group 高度被压缩的问题 */
/* 兼容性修复：移除 fit-content，改用其他方式确保高度正确 */
#settings-screen .settings-group {
  display: block !important;
  height: auto !important;
  /* 移除 min-height: fit-content，因为很多浏览器不支持 */
  min-height: auto !important;
  max-height: none !important;
  overflow: hidden !important; /* 恢复 hidden 以支持圆角 */
  /* 保留原有的样式 */

  border-radius: 12px !important;
  /* 清除任何可能的负高度影响 */
  flex-shrink: 0 !important;
}

/* 确保 settings-item 有明确的高度并正确显示 */
/* 这是关键：通过设置 settings-item 的高度来撑开 settings-group */
#settings-screen .settings-item {
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;
  height: auto !important;
  padding-left: 16px !important;
  background-color: #f6faff !important;
  position: relative !important;
  /* 确保可见性 */
  visibility: visible !important;
  opacity: 1 !important;
  /* 不要在 item 上设置 overflow: visible，保持默认 */
}

/* 修复 settings-content-ios 容器 */
#settings-screen .settings-content-ios {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  /* 确保不使用 absolute 定位，使用正常文档流 */
}

/* === 新增：灵动岛展开后顶部的样式 === */
.expanded-header {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  /* 左右两端对齐 */
  align-items: flex-start;
  /* 顶部对齐 */
}

/* 复用 .song-details 的样式，但确保它不会被压缩 */
.song-details {
  text-align: center;
  flex-shrink: 0;
}

/* 新增的邀请按钮样式 */
.island-action-button {
  position: absolute;
  top: -5px;
  /* 微调垂直位置 */
  right: -5px;
  /* 微调水平位置 */
  background: none;
  border: none;
  padding: 5px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.island-action-button:hover {
  opacity: 1;
}

/* === (更新) 头像挂件基础样式 === */

/* === 新增：头像锚点系统 (解决挂件乱跑问题) === */

/* 1. 头像锚点容器：它就像一个相框，固定大小，作为定位基准 */
.avatar-anchor {
  position: relative;
  /* 关键！让内部的绝对定位元素以我为准 */
  width: 35px;
  /* 必须与你头像的默认大小一致 */
  height: 35px;
  /* 必须与你头像的默认大小一致 */
  flex-shrink: 0;
  /* 防止被气泡挤扁 */
  margin: 0 8px;
  /* 保持原来的间距 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. 头像图片本身：填满锚点 */
.avatar-anchor .chat-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 !important;
  /* 清除旧的外边距，由锚点控制 */
  position: relative;
  z-index: 1;
  /* 头像在底层 */
}

/* 3. 挂件：绝对定位，锁死在锚点上 */
.avatar-pendant {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 默认居中 */

  /* 默认尺寸比头像稍大一点点，防止盖住头像边缘 */
  width: 130%;
  height: 130%;

  z-index: 2;
  /* 挂件在头像上层 */
  pointer-events: none;
  /* 让点击穿透挂件，点到头像 */

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* You can add these new styles anywhere inside the main <style> tag */

/* ▼▼▼ START: 在这里粘贴新的代码 ▼▼▼ */

/* 1. Style for the purple "Block" button */
.purple-button {
  width: 100%;
  padding: 10px;
  font-weight: 500;
  /* A nice light purple */
  color: #5856d6;
  background-color: rgba(88, 86, 214, 0.1);
  border: 1px solid rgba(88, 86, 214, 0.2);
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 10px;
  /* Add some space between it and the clear button */
}

/* 2. Style for the red "You have blocked..." notice in the chat header */
#block-status-notice {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff3b30;
  /* Red background */
  color: white;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  /* Prevent text from wrapping */
}

/* 3. Style for the red exclamation mark next to unblocked messages */
/* This targets the message row when it has our special class */
.message-row.show-blocked-warning .message-content-wrapper.ai::after {
  content: "!";
  position: absolute;
  /* Position it outside and to the right of the bubble wrapper */
  right: -25px;
  top: 50%;
  transform: translateY(-50%);

  /* Style the red circle */
  background-color: #ff3b30;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;

  /* Center the exclamation mark inside the circle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

/* ▲▲▲ 粘贴到这里结束 ▲▲▲ */

/* === 美化App 卡片式布局 (iOS极简高光版) === */

/* 1. 网格容器 */
.beautify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
  gap: 12px;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* 2. 单个卡片样式 */
.beautify-card {
  border-radius: 20px; /* 调大圆角，更显柔和 */
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  border: 0.4px solid #ffffff;

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* 取消浮动阴影，改用背景微变和压感缩放 */
.beautify-card:hover {
  background-color: #f9f9fb;
  border-color: #e5e5ea;
}

/* 点击反馈：iOS 经典的压感缩放 */
.beautify-card:active {
  transform: scale(0.95);
  background-color: #f2f2f7;
}

/* 3. 卡片内图标背景 (无颜色、高质感版) */
.card-icon-bg {
  width: 52px;
  height: 52px;
  border-radius: 14px; /* iOS 连续曲率比例 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 取消色块和阴影，改用非常淡的灰色背景或轻微描边 */

  border: 0.5px solid rgba(0, 0, 0, 0.03);

  /* 模拟微凹的高光质感 */
}

/* 图标 SVG 样式：图标颜色由 HTML inline style 控制 */
.card-icon-bg svg {
  width: 26px;
  height: 26px;
  filter: saturate(1.2); /* 稍微提升图标色彩饱和度 */
}

/* 4. 卡片文字标签 */
.card-label {
  font-size: 11px; /* 13px 是 iOS 标准正文字号 */
  font-weight: 500;
  color: #1c1c1e;
  letter-spacing: -0.3px;
}

/* === 深色模式适配 === */
.phone-frame.dark-mode .beautify-card {
  background-color: #1c1c1e;
  border-color: #2c2c2e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.phone-frame.dark-mode .card-icon-bg {
  background-color: #2c2c2e;
  border-color: rgba(255, 255, 255, 0.05);
}

.phone-frame.dark-mode .card-label {
  color: #f5f5f7;
}

.phone-frame.dark-mode .beautify-card:active {
  background-color: #2c2c2e;
}

/* === 底部打开按钮样式 === */
.drawer-trigger-btn {
  /* --- 核心定位代码开始 --- */
  position: absolute;
  /* 1. 绝对定位：无视周围元素 */
  bottom: 25px;
  /* 2. 距离底部 25px */
  left: 50%;
  /* 3. 跑到左边 50% 的位置 */
  transform: translateX(-50%);
  /* 4. 再往回退自身宽度的一半，达成完美居中 */
  z-index: 20;
  /* 5. 确保层级很高，浮在最上面 */
  /* --- 核心定位代码结束 --- */

  width: 30px;
  /*稍微加大一点点，更容易点到*/
  height: 30px;
  border-radius: 50%;
  /* 保持圆形 */

  /* 视觉样式保持不变 */
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.drawer-trigger-btn:active {
  transform: scale(0.9);
}

/* === 半屏抽屉容器样式 === */
.app-drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  /* 占据屏幕 60% 高度 */
  background-color: rgba(245, 245, 247, 0.95);
  /* 类似 iOS 的磨砂白 */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 30px 30px 0 0;
  /* 顶部圆角 */
  box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.15);
  z-index: 100;
  /* 保证在最上层 */

  /* 核心动画属性 */
  transform: translateY(100%);
  /* 默认向下平移 100% (隐藏) */
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  /* iOS 风格的弹簧曲线 */

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 激活状态：滑上来 */
.app-drawer.active {
  transform: translateY(0);
}

/* === 顶部关闭条/按钮样式 === */
.drawer-handle-container {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* 让用户知道这里可以点 */
}

.drawer-handle {
  width: 50px;
  height: 6px;
  background-color: #d1d1d6;
  border-radius: 3px;
}

/* 抽屉内容区域 */
.drawer-content {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 深色模式适配 */
.phone-frame.dark-mode .drawer-trigger-btn {
  background-color: rgba(50, 50, 50, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.dark-mode .drawer-trigger-btn svg path {
  stroke: #fff;
}

.phone-frame.dark-mode .app-drawer {
  background-color: rgba(44, 44, 46, 0.95);
}

.phone-frame.dark-mode .app-drawer h3 {
  color: #fff !important;
}

.phone-frame.dark-mode .drawer-handle {
  background-color: #555;
}

/* === (修复版) 开启左右悬浮按钮的交互 === */
/* 我们把 #chat-header-actions-select 加到了选择器列表中 */
#chat-screen .floating-glass-btn,
#chat-screen .floating-glass-group,
#chat-header-actions-select {
  pointer-events: auto !important;
  /* 强制开启交互，否则点不动 */
}

/* === 1. 消息页顶栏：液态玻璃化 === */
#messages-screen .settings-header {
  background-color: transparent !important;
  border-bottom: none !important;
  height: 60px;
  z-index: 100;
  /* 关键：让顶栏本身不阻挡视线 */
}

/* 2. 顶栏背景特效：去掉白色渐变，只用模糊 */
#messages-screen .settings-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

  /* ▼▼▼ 核心修改：移除 background 属性 ▼▼▼ */
  background: transparent;

  /* 只保留强力模糊，当列表划过时会变虚 */
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

  /* 给一个极淡的白色内发光，勾勒边缘 */
  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.15);

  /* 蒙版：让模糊效果在底部自然淡出，避免生硬的横线 */
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);

  pointer-events: none;
}

/* === 3. 改造顶栏的所有按钮（返回、添加、多选） === */
#messages-screen .header-text-button,
#messages-screen .header-button {
  /* 背景：极低透明度的白，接近透明 */
  background-color: rgba(255, 255, 255, 0.25) !important;

  /* 强力模糊：把背后的壁纸糊掉 */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  /* 边框：高亮白线，制造玻璃边缘反光感 */
  border: 1px solid rgba(255, 255, 255, 0.4) !important;

  /* 阴影：增加立体感 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  border-radius: 24px !important;
  /* 更圆润 */
  padding: 6px 16px !important;

  /* 字体：深色，加一点阴影保证在复杂壁纸上也能看清 */
  color: #111 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);

  transition: transform 0.2s;
}

/* 按钮按下效果 */
#messages-screen .header-text-button:active,
#messages-screen .header-button:active {
  transform: scale(0.92);
  background-color: rgba(255, 255, 255, 0.4) !important;
}

/* 标题：纯黑加一点发光，更浮凸 */
#messages-screen .settings-header h1 {
  font-weight: 700;
  font-size: 22px;
  /* 加大 */
  color: #000;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

/* === 4. 深色模式适配 === */
.phone-frame.dark-mode #messages-screen .settings-header::before {
  /* 背景变黑渐变 */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.phone-frame.dark-mode #messages-screen .header-text-button,
.phone-frame.dark-mode #messages-screen .header-button {
  /* 按钮变成半透明黑 */
  background-color: rgba(60, 60, 60, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  /* 微弱亮边 */
  color: #fff !important;
}

.phone-frame.dark-mode #messages-screen .settings-header h1 {
  color: #fff;
  text-shadow: none;
}

/* === 新增：消息页悬浮底栏 === */
.messages-bottom-bar {
  position: absolute;
  bottom: 30px;
  /* 距离底部悬浮 */
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 100;
  /* 确保浮在列表上面 */
  pointer-events: none;
  /* 让底栏两侧空白处不挡住列表滚动 */
}

/* 玻璃容器 */
.glass-segment-control {
            pointer-events: auto;
            position: relative;
            display: flex;
            background-color: rgba(255, 255, 255, 0.65); /* 提亮 */
            backdrop-filter: blur(25px) saturate(180%); /* iOS 核心模糊参数 */
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            padding: 4px;
            border-radius: 100px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* 更柔和的投影 */
            border: 1px solid rgba(255, 255, 255, 0.5);
            width: 200px; /* 略微加宽 */
            height: 48px; /* 更加适合手指点击的高度 */
}

/* 单个按钮 */
.segment-btn {
  flex: 1;
  position: relative;
  z-index: 2;
  /* 在滑块之上 */
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: #8e8e93;
  /* 未选中颜色 */
  cursor: pointer;
  transition: color 0.3s ease;
  border-radius: 80px;
}

/* 选中状态的文字颜色 */
.segment-btn.active {
  color: #000;
  font-weight: 600;
}

/* 那个滑动的白色背景块 */
.segment-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  /* 减去padding */
  height: calc(100% - 8px);
  background-color: #fff;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* 丝滑的 iOS 动效 */
}

/* === 状态切换逻辑 (通过 CSS 类控制滑块位置) === */
/* 默认在左边 (单聊)，如果父级有 .group-mode，滑块移到右边 */
.glass-segment-control.group-mode .segment-indicator {
  transform: translateX(100%);
}

/* === 修正：给列表底部增加更多空间，防止被底栏挡住 === */
#messages-screen .messages-content {
  padding-bottom: 100px !important;
  /* 增加底部内边距 */
}

/* === 深色模式适配 === */
.phone-frame.dark-mode .glass-segment-control {
  background-color: rgba(40, 40, 40, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.dark-mode .segment-indicator {
  background-color: #636366;
  /* 深灰色滑块 */
}

.phone-frame.dark-mode .segment-btn.active {
  color: #fff;
}

/* === 消息页顶栏图标按钮样式 === */
#messages-screen .header-icon-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* 圆形 */

  /* 玻璃质感 */
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

  /* 布局 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0;

  /* 图标颜色 */
  color: #111;
  transition: all 0.2s;
}

/* 深色模式适配 */
.phone-frame.dark-mode #messages-screen .header-icon-button {
  background-color: rgba(60, 60, 60, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* 点击反馈 */
#messages-screen .header-icon-button:active {
  transform: scale(0.9);
  background-color: rgba(255, 255, 255, 0.5);
}

/* 删除模式下的特殊样式 */
#messages-screen .header-icon-button.delete-mode-active {
  background-color: rgba(255, 59, 48, 0.1);
  border-color: rgba(255, 59, 48, 0.3);
}

/* === 美化复选框样式 === */

/* 1. 隐藏原生复选框，但保留占位以便点击 */
.contact-item .contact-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #c7c7cc;
  /* 未选中时的灰色边框 */
  border-radius: 50%;
  /* 圆形 */
  outline: none;
  cursor: pointer;
  margin-right: 12px;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
  /* 防止被挤压 */
}

/* 2. 选中状态：变蓝背景，去边框 */
.contact-item .contact-checkbox:checked {
  background-color: #45494d;
  /* iOS 蓝 */
  border-color: #45494d;
}

/* 3. 选中状态：画一个白色对勾 */
.contact-item .contact-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* 4. 删除模式下显示复选框 (如果你之前用的 display:none，这里要确保能显示) */
.contact-list.delete-mode .contact-item .contact-checkbox {
  display: block;
  /* 或者是 inline-block */
}

/* === 3. 模块化卡片 (Section) === */
/* 用于包裹一组相关的输入框 */
.modal-section {
  background-color: #ffffff;
  /* 纯白卡片 */
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  /* 增加一个极淡的边框让卡片更立体 (可选) */
  border: 1px solid rgba(60, 60, 67, 0.02);
}

/* === 核心：单元格 (Cell) 配色优化 === */
.modal-cell {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  background-color: #fff;
  /* 优化分割线颜色 */
  border-bottom: 1px solid #c6c6c8;
}

/* 最后一项去掉分割线 */
.modal-cell:last-child {
  border-bottom: none;
}

/* 【改动】标签颜色变柔和 */
.modal-cell label {
  font-size: 16px;
  color: #3c3c43;
  /* 次级黑色，不那么刺眼 */
  width: 90px;
  /* 稍微加宽一点给中文腾空间 */
  flex-shrink: 0;
  font-weight: 400;
}

/* 简单的标题文本 */
.modal-section-title {
  font-size: 13px;
  color: #8e8e93;
  margin: 0 0 6px 15px;
  /* 左对齐，留出缩进 */
  text-transform: uppercase;
  /* 可选：大写更有设计感 */
}

/* === 4. 控件美化 === */

/* 输入框：去边框，融入背景 */
/* 【改动】输入框文字恢复正常 */
.modal-cell .form-input,
.modal-cell .form-select {
  flex-grow: 1;
  border: none;
  outline: none;
  text-align: right;
  font-size: 16px;
  color: #000000;
  /* 【重要】输入的字是纯黑 */
  background: transparent;
  height: 100%;
  padding: 0;
  font-weight: 400;
}

/* 输入框 placeholder 颜色 (浏览器默认是灰色，这里显式指定一下) */
.modal-cell .form-input::placeholder,
.modal-cell .form-textarea::placeholder {
  color: #c7c7cc;
}

/* 文本域配色优化 */
.modal-cell.textarea-cell {
  height: auto;
  padding: 12px 16px;
  flex-direction: column;
  align-items: flex-start;
}

.modal-cell.textarea-cell .form-textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-size: 15px;
  margin-top: 8px;
  min-height: 80px;
  background-color: transparent;
  color: #000000;
  /* 【重要】纯黑文字 */
  line-height: 1.4;
}

/* === 5. 深色模式适配 === */
.phone-frame.dark-mode .modal-content {
  background-color: rgba(28, 28, 30, 0.85);
  /* 深灰背景 */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.phone-frame.dark-mode .modal-header,
.phone-frame.dark-mode .modal-footer {
  background-color: rgba(44, 44, 46, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.dark-mode .modal-section {
  background-color: #2c2c2e;
  /* 卡片变深 */
}

.phone-frame.dark-mode .modal-cell {
  border-bottom-color: #3a3a3c;
}

.phone-frame.dark-mode .modal-header h2,
.phone-frame.dark-mode .modal-cell label {
  color: #fff;
}

.phone-frame.dark-mode .modal-cell .form-input {
  color: #fff;
  /* 或者保持蓝色 #0A84FF */
}

/* === 2. 输入框美化 (去边框，融入单元格) === */

/* 强制重置模态框内所有输入框的样式 */
#add-contact-modal .modal-cell .form-input,
#add-contact-modal .modal-cell .form-textarea {
  /* 核心：去掉边框和背景 */
  border: none !important;
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  /* 文字样式 */
  text-align: right;
  /* iOS 风格：内容靠右 */
  font-size: 16px;
  color: #000 !important;
  /* 输入的内容是黑色 */

  /* 布局 */
  width: 100%;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

/* 针对多行文本域的特殊调整 */
#add-contact-modal .modal-cell.textarea-cell .form-textarea {
  text-align: left;
  /* 文本域靠左 */
  margin-top: 8px !important;
  min-height: 80px;
  line-height: 1.5;
}

/* 占位符颜色变淡 */
#add-contact-modal .form-input::placeholder,
#add-contact-modal .form-textarea::placeholder {
  color: #c7c7cc !important;
}

/* 深色模式适配 */
.phone-frame.dark-mode #add-contact-modal .modal-cell .form-input,
.phone-frame.dark-mode #add-contact-modal .modal-cell .form-textarea {
  color: #fff !important;
}

/* ========================================= */
/* === 1. 设置页 (Settings App) 专属修复补丁 === */
/* ========================================= */

/* 修复背景色，确保是浅灰，不是透明 */
#settings-screen {
  z-index: 20;
  /* 确保层级正确 */
}

/* 修复内容区域的边距和滚动 */
#settings-screen .settings-content {
  padding: 110px 20px 40px 20px !important;
  /* 避开顶栏，留出底距 */
  width: 100%;
  box-sizing: border-box;
  display: block !important;
  /* 防止被 flex 影响 */
  overflow-y: auto;
  height: 100%;
}

/* 修复卡片分组 (Section) */
#settings-screen .modal-section {
  background-color: #ffffff !important;
  /* 强制纯白背景 */
  border-radius: 12px;
  margin-bottom: 25px !important;
  /* 组与组之间拉开距离 */
  overflow: hidden;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  /* 加一点点阴影 */
  width: 100%;
  /* 占满宽度 */
  display: block;
  /* 确保是块级元素 */
}

/* 修复分组标题 */
#settings-screen .settings-group-title {
  font-size: 13px;
  color: #6d6d72;
  margin: 0 0 8px 15px;
  /* 标题对齐 */
  text-transform: uppercase;
  font-weight: 400;
}

/* 修复单元格 (Cell) */
#settings-screen .modal-cell {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: 48px !important;
  /* 固定高度，防止塌陷 */
  padding: 0 16px !important;
  background-color: #fff !important;
  border-bottom: 1px solid #e5e5ea !important;
}

#settings-screen .modal-cell:last-child {
  border-bottom: none !important;
}

/* 修复标签文字 */
#settings-screen .modal-cell label {
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 400;
  width: auto !important;
  /* 自动宽度 */
  flex-shrink: 0;
}

/* 修复输入框 (右对齐，无边框) */
#settings-screen .form-input,
#settings-screen .form-select {
  text-align: right !important;
  border: none !important;
  background: transparent !important;
  font-size: 16px !important;
  color: #007aff !important;
  /* 蓝色文字 */
  height: 100%;
  width: 60%;
  /* 限制宽度 */
}

/* 修复开关 (Switch) */
#settings-screen .switch {
  margin-left: auto;
  /* 强制靠右 */
}

/* === 设置页布局强制修正补丁 === */

/* 1. 修复系统功能里的开关对齐问题 */
#settings-screen .modal-cell {
  justify-content: space-between;
  /* 左右两端对齐 */
  width: 100%;
  box-sizing: border-box;
}

/* 2. 修复开关 (Switch) 可能被挤压或位置不对的问题 */
#settings-screen .switch {
  margin-left: auto;
  /* 强制推到最右边 */
  flex-shrink: 0;
  /* 防止被挤压 */
}

/* 3. 修复个性化里的跳转箭头布局 */
#settings-screen .settings-action-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 4. 修复输入框高度和对齐 */
#settings-screen .form-input,
#settings-screen .form-select {
  height: 100%;
  /* 填满单元格高度 */
  text-align: right;
  border: none;
  background: transparent;
}

/* 5. 修复温度滑块的容器高度 */
#settings-screen .modal-cell[style*="column"] {
  min-height: 80px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  /* 拉伸子元素 */
}

/* 2. 重写滑块轨道样式 (黑色风格) */
#settings-screen .form-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100% !important;
  /* 占满宽度 */
  height: 4px !important;
  /* 轨道高度 */
  background: #e5e5ea !important;
  /* 未激活部分的底色 (浅灰) */
  border-radius: 2px;
  outline: none;
  margin-top: 10px;
  /* 给点上边距 */

  /* 核心：用渐变实现黑色进度条 */
  /* var(--progress-percent) 由 JS 动态计算，这里默认 50% */
  background: linear-gradient(
    to right,
    #000000 0%,
    #000000 var(--progress-percent, 50%),
    #e5e5ea var(--progress-percent, 50%),
    #e5e5ea 100%
  ) !important;
}

/* 3. 重写滑块按钮 (Thumb) 样式 */
#settings-screen .form-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px !important;
  /* 按钮大一点，好按 */
  height: 24px !important;
  background: #ffffff !important;
  /* 纯白按钮 */
  border: 0.5px solid rgba(0, 0, 0, 0.1) !important;
  /* 微弱描边 */
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  /* 投影 */
  cursor: pointer;
  margin-top: -10px;
  /* 垂直居中修正 (按钮高度的一半减去轨道高度的一半) */
}

/* 兼容 Firefox */
#settings-screen .form-slider::-moz-range-thumb {
  width: 24px !important;
  height: 24px !important;

  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  cursor: pointer;
}

/* ================================================================= */
/* === 全局顶栏统一 (iOS 26 Glass Header System) === */
/* ================================================================= */

/* 1. 顶栏容器：统一高度、透明、毛玻璃 */
.settings-header {
  position: absolute !important;
  /* 悬浮 */
  top: 0;
  left: 0;
  width: 100%;
  height: 70px !important;
  /* 统一高度 */
  padding: 0 15px !important;
  /* 统一边距 */
  padding-top: 50px !important;
  /* 避开刘海 */
  box-sizing: border-box;

  /* 去掉所有背景 */
  /* background-color: #F5F7F9 !important; */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;

  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 2. 顶栏背景光晕 (伪元素实现渐变模糊) */
/* 2. 顶栏背景光晕 (强制隐藏) */
.settings-header::before {
  display: none !important;
  content: none !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3. 顶栏标题 */
.settings-header h1 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #000 !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.5);
  /* 防止背景太花看不清 */
  top: 58px;
}

/* 4. 通用图标按钮 (Header Icon Button) */
/* 替换原来的 .header-text-button 和 .header-button */
.header-icon-button,
.header-text-button,
/* 兼容旧类名 */
.header-button

/* 兼容旧类名 */ {
  width: 40px !important;
  height: 40px !important;
  border-radius: 32px !important;
  /* 圆形 */

  /* 玻璃质感 */
  background-color: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;

  /* 内容居中 */
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  /* 统一设置顶部间距 */
  margin-top: 22px !important;
  /* 保持左右和底部为原来的 4px */
  margin-right: 4px !important;
  margin-bottom: 4px !important;
  margin-left: 4px !important;
  color: #1c1c1e !important;
  /* 图标颜色 */
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;

  /* 如果里面有文字，强制隐藏 (为了过渡) */
  font-size: 0 !important;
}

/* 按钮点击效果 */
.header-icon-button:active,
.header-text-button:active,
.header-button:active {
  transform: scale(0.9);
  background-color: rgba(255, 255, 255, 0.8) !important;
}

/* 按钮内的 SVG 样式 */
.header-icon-button svg,
.header-text-button svg,
.header-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  /* 跟随文字颜色 */
  stroke-width: 2;
  fill: none;
  display: block !important;
  /* 确保显示 */
}

/* 5. 修正右侧按钮组的布局 */
.header-actions {
  display: flex;
  gap: 10px;
  z-index: 2;
}

/* 6. 深色模式适配 */
.phone-frame.dark-mode .settings-header::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.phone-frame.dark-mode .settings-header h1 {
  color: #fff !important;
  text-shadow: none;
}

.phone-frame.dark-mode .header-icon-button,
.phone-frame.dark-mode .header-text-button,
.phone-frame.dark-mode .header-button {
  background-color: rgba(60, 60, 60, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* 7. 修正所有页面的内容顶部间距 (防止被透明顶栏遮挡) */
/* 这一步很关键，否则内容会钻到顶栏下面点不到 */
.messages-content,
.music-content,
.playlist-content,
.settings-content,
#shop-main-content,
#slacking-off-main-content,
#gacha-main-content,
#transactions-list-container,
#dating-history-container,
#dating-settings-main .settings-menu-container {
  padding-top: 100px !important;
  /* 60px高度 + 50px刘海 */
}

/* ========================================= */
/* === 1. 全局 App 背景玻璃化 (Glass OS) === */
/* ========================================= */

/* ========================================= */
/* === 2. 顶栏白色渐变遮罩 (White Mask) === */
/* ========================================= */

/* 重写顶栏背景特效 */
.settings-header::before {
  /* 强制隐藏顶栏的白色渐变遮罩层 */
  display: none !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 深色模式顶栏适配 */
.phone-frame.dark-mode .settings-header::before {
  background: linear-gradient(
    to bottom,
    rgba(28, 28, 30, 0.95) 0%,
    rgba(28, 28, 30, 0.8) 60%,
    rgba(28, 28, 30, 0) 100%
  ) !important;
}

/* ========================================= */
/* === Gacha 悬浮底栏专属样式 === */
/* ========================================= */

/* 1. 底部定位容器 */
.gacha-bottom-bar {
  position: absolute;
  bottom: 30px;
  /* 悬浮高度 */
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  /* 居中 */
  z-index: 100;
  /* 确保在最上层 */
  pointer-events: none;
  /* 让两侧空白区域不挡住点击 */
}

/* 2. 复用 .glass-segment-control 的样式 */
/* (因为我们在消息页已经定义了它，这里直接复用即可) */
/* 这里只需微调一下 Gacha 专属的宽度 */
#gacha-segment-control {
  width: 200px;
  /* 稍微宽一点 */
  pointer-events: auto;
  /* 恢复点击 */
}

/* 3. 滑块动画逻辑 */
/* 默认在左边 (SHARE)，加上 .forum-mode 类后滑到右边 */
#gacha-segment-control.forum-mode .segment-indicator {
  transform: translateX(100%);
}

/* 4. 【关键修复】给内容区域底部加垫子 */
/* 否则最后一条帖子会被悬浮栏挡住看不见 */
#gacha-main-content {
  padding-bottom: 100px !important;
}

/* ========================================= */
/* === 七袋 & 摸鱼 悬浮底栏专属样式 === */
/* ========================================= */

/* 1. 底部定位容器 (通用) */
.shop-bottom-bar,
.game-bottom-bar {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 100;
  /* 确保浮在最上层 */
  pointer-events: none;
}

/* 2. 胶囊宽度设置 */
#shop-segment-control,
#game-segment-control {
  width: 180px;
  /* 两个选项，稍微窄一点 */
  pointer-events: auto;
}

/* 3. 七袋滑块动画 (加上 .my-mode 后右移) */
#shop-segment-control.my-mode .segment-indicator {
  transform: translateX(100%);
}

/* 4. 摸鱼滑块动画 (加上 .savings-mode 后右移) */
#game-segment-control.savings-mode .segment-indicator {
  transform: translateX(100%);
}

/* 5. 【关键】给内容区加底部垫子，防止被遮挡 */
#shop-main-content,
#slacking-off-main-content {
  padding-bottom: 100px !important;
}

/* === 1. 音乐 App 复选框美化 (复用 iOS 风格) === */
.playlist-checkbox,
.song-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #c7c7cc;
  border-radius: 50%;
  /* 圆形 */
  outline: none;
  cursor: pointer;
  position: absolute;
  /* 歌单卡片里是绝对定位 */
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
  /* 稍微给点背景，防止看不清 */
}

/* 歌单卡片复选框位置微调 */
.playlist-checkbox {
  top: 8px;
  right: 8px;
}

/* 歌曲列表复选框位置微调 */
.song-checkbox {
  position: relative;
  /* 列表里是相对定位 */
  margin-right: 12px;
  background-color: transparent;
}

/* 选中状态：变蓝 + 对勾 */
.playlist-checkbox:checked,
.song-checkbox:checked {
  background-color: #007aff;
  border-color: #007aff;
}

.playlist-checkbox:checked::after,
.song-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* 删除模式下才显示 */
.playlist-checkbox,
.song-checkbox {
  display: none;
}

.playlist-grid.delete-mode .playlist-checkbox,
.song-list.delete-mode .song-checkbox {
  display: block;
}

.icon-setting-item,
.preset-item {
  /* 增加边框和更明显的阴影 */
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  background-color: #ffffff !important;
  /* 确保背景纯白 */
  margin-bottom: 12px !important;
  /* 拉开间距 */
}

/* 深色模式适配 */
.phone-frame.dark-mode .icon-setting-item,
.phone-frame.dark-mode .preset-item {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background-color: #2c2c2e !important;
}

/* 群聊模式选择卡片样式 */
.group-mode-card {
  /* 使用极淡的灰色背景，而不是纯白，形成层级感 */
  background-color: #f9f9f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  /* 几乎看不见的描边 */
  border-radius: 18px !important;
  /* 圆润 */
  padding: 18px !important;

  display: flex;
  align-items: center;
  gap: 16px;
  /* 图标和文字间距 */

  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none !important;
  /* 去掉阴影，更扁平 */
}

.group-mode-card:active {
  background-color: #f0f0f0 !important;
  /* 按下变深一点 */
  transform: scale(0.98);
}

.group-mode-card .mode-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  /* iOS 图标圆角 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  /* 默认背景色 (防错) */
  background-color: rgba(0, 0, 0, 0.05);
}

/* 图标 SVG 大小 */
.group-mode-card .mode-icon svg {
  width: 24px;
  height: 24px;
}

.group-mode-card .mode-info h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.group-mode-card .mode-info p {
  margin: 0;
  font-size: 12px;
  color: #888;
}

/* 选人列表样式微调 */
#group-member-list .contact-item {
  padding: 10px 20px;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
}

/* 群聊成员网格布局 */
.group-members-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 一行5个 */
  gap: 15px 10px;
  /* 行间距15，列间距10 */
}

/* 单个成员项 */
.group-member-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  position: relative;
}

.member-delete-btn {
  display: none;
  /* 默认不显示 */
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 59, 48, 1);
  /* iOS 红色 */
  border-radius: 50%;
  color: white;
  font-size: 16px;
  line-height: 18px;
  /* 垂直居中微调 */
  text-align: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 3. 当网格进入删除模式时，显示按钮 */
.group-members-grid.delete-mode .member-delete-btn {
  display: block;
  animation: pop-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. 定义一个小弹跳动画 */
@keyframes pop-in {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

/* 5. 简单的抖动动画 (可选，增加生动感) */
.group-members-grid.delete-mode .group-member-item {
  animation: shake 0.25s infinite alternate;
}

@keyframes shake {
  0% {
    transform: rotate(-1deg);
  }

  100% {
    transform: rotate(1deg);
  }
}

/* 成员头像 */
.group-member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  /* 稍微带点圆角，或者改成 50% 变圆 */
  object-fit: cover;
  background-color: #f0f0f0;
}

/* 成员名字 */
.group-member-name {
  font-size: 11px;
  color: #666;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 那个大大的加号按钮 */
.add-member-btn-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #999;
  font-size: 24px;
  font-weight: 300;
}

/* === 修复层级问题 === */
/* 确保一级弹窗 (群聊设置) 的层级是 1000 */
#group-info-modal {
  z-index: 1000;
}

/* 确保二级弹窗 (编辑成员、新建成员、修改我的名片) 的层级更高，比如 1100 */
#edit-member-modal,
#add-group-member-modal,
#edit-group-user-modal {
  z-index: 1100 !important;
  /* 强制覆盖 */
}

/* 粘贴到 style 标签内 */
#group-info-modal {
  z-index: 1000 !important;
}

#edit-group-user-modal,
#edit-member-modal,
#add-group-member-modal {
  z-index: 1100 !important;
}

/* 隐藏群聊设置弹窗右上角的关闭按钮 */
#group-info-close-btn {
  display: none !important;
}

/* === 群聊专属样式 === */

/* 群昵称 (显示在气泡上方) */
.group-nickname {
  font-size: 12px;
  color: #8e8e93;
  /* 浅灰色 */
  margin-bottom: 2px;
  margin-left: 4px;
  /* AI昵称靠左一点 */
  margin-right: 4px;
  /* 用户昵称靠右一点 */
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 调整内容包装器，让它垂直排列 (上：昵称，下：气泡) */
.message-content-wrapper {
  display: flex;
  /* flex-direction: column;  */
  /* 默认左对齐 (AI) */
  align-items: flex-start;
}

/* 用户发的消息，内容包装器靠右对齐 */
.message-content-wrapper.user {
  align-items: flex-end;
}

/* === 新增：头像与昵称垂直堆叠布局 === */

/* 1. 头像容器：包裹头像图片和昵称 */
.chat-avatar-container {
  display: flex;
  flex-direction: column;
  /* 垂直排列 */
  align-items: center;
  /* 水平居中 */
  justify-content: flex-end;
  /* 靠底部对齐 */
  margin: 0 8px;
  /* 与气泡保持间距 */
  flex-shrink: 0;
  /* 防止被压缩 */
  max-width: 60px;
  /* 限制最大宽度，防止昵称撑开太大 */
  position: relative !important;
}

/* 2. 昵称样式 (位于头像下方) */
.group-nickname {
  font-size: 10px;
  /* 字体更小更精致 */
  color: #8e8e93;
  /* 次级灰色 */
  margin-top: 4px;
  /* 与上方头像的距离 */
  text-align: center;
  line-height: 1.2;

  /* 文本截断处理 */
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3. 消息行布局微调 */
.message-row {
  align-items: flex-end;
  /* 确保所有元素（容器、气泡）底部对齐 */
  margin-bottom: 15px;
}

/* 4. 气泡包装器复位 (不需要垂直排列了，因为名字移走了) */
.group-message-wrapper {
  display: flex;
  /* 恢复 Flex */
  flex-direction: column;
  /* 保持气泡内部可能的多元素垂直 */
  max-width: 70%;
  min-width: 0;
}

/* 移除之前的 margin，改由 avatar-container 控制间距 */
.group-message-wrapper.ai {
  margin-left: 0;
  align-items: flex-start;
}

.group-message-wrapper.user {
  margin-right: 0;
  align-items: flex-end;
}

/* === 修复群聊用户消息对齐问题 === */

/* 1. 用户消息行：内容靠右对齐 */
.message-row:has(.group-message-wrapper.user) {
  justify-content: flex-end;
  /* 整个行内容靠右 */
}

/* 2. 用户消息包装器：内容靠右对齐 */
.group-message-wrapper.user {
  align-items: flex-end;
  /* 气泡内部元素靠右 */
  margin-right: 0;
  /* 移除之前的 margin */
  margin-left: auto;
  /* 确保自身靠右 */
}

/* 3. 用户头像容器：调整位置 */
/* 注意：我们在 JS 里已经通过 appendChild 的顺序把头像放在了右边，
   但为了保险起见，我们可以用 order 属性来控制视觉顺序 */
.message-row:has(.group-message-wrapper.user) .chat-avatar-container {
  order: 2;
  /* 视觉上让头像在最后（最右） */
  margin-left: 8px;
  /* 头像左侧留白 */
  margin-right: 0;
}

.message-row:has(.group-message-wrapper.user) .group-message-wrapper {
  order: 1;
  /* 视觉上让气泡在头像左边 */
}

/* === iOS 26 风格按钮美化 (新建歌单 & 导入歌曲) === */

.add-playlist-button,
.import-button {
  /* 1. 玻璃质感背景 */
  background-color: rgba(255, 255, 255, 0.45) !important;
  /* 半透明白 */
  backdrop-filter: blur(20px) !important;
  /* 强力模糊 */
  -webkit-backdrop-filter: blur(20px) !important;

  /* 2. 精致边框与阴影 */
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  /* 亮色细边框 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  /* 柔和投影 */

  /* 3. 字体与形状 */
  color: #007aff !important;
  /* 苹果蓝 */
  font-weight: 600 !important;
  border-radius: 20px !important;
  /* 胶囊圆角 */

  /* 4. 交互动画 */
  transition: transform 0.2s, background-color 0.2s !important;

  /* 5. 确保布局正确 */
  display: block;
  margin: 0 auto 20px auto;
  /* 保持居中和间距 */
  width: fit-content;
  /* 宽度适应文字，或者你可以保留 width: 100% */
  min-width: 140px;
  /* 给个最小宽度好看点 */
  padding: 10px 24px !important;
}

/* 悬停/按下效果 */
.add-playlist-button:active,
.import-button:active {
  transform: scale(0.96);
  /* 按下微缩 */
  background-color: rgba(255, 255, 255, 0.65) !important;
  /* 颜色变实 */
}

/* === 深色模式适配 === */
.phone-frame.dark-mode .add-playlist-button,
.phone-frame.dark-mode .import-button {
  background-color: rgba(60, 60, 60, 0.5) !important;
  /* 深色半透明 */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #0a84ff !important;
  /* 深色模式下的亮蓝 */
}

/* === 修复：实心图标专用样式 (防止变粗) === */
/* 只要给 svg 加上 class="icon-filled" 就会生效 */
.header-icon-button svg.icon-filled,
.header-button svg.icon-filled,
.app-icon svg.icon-filled {
  stroke: none !important;
  /* 强制关闭描边 */
  stroke-width: 0 !important;
  /* 强制描边宽度为0 */
  fill: currentColor !important;
  /* 强制使用填充色 */
}

#music-screen,
#worldbook-screen,
#worldbook-groups-screen,
#worldbook-group-detail-screen,
#beautify-screen,
#gacha-screen,
#shop-screen,
#slacking-off-screen,
#transactions-screen,
#cart-screen,
#orders-screen,
#dating-history-screen,
#font-url-settings-screen,
#preset-management-screen,
#icon-settings-screen,
#clock-settings-screen,
#motto-settings-screen,
#appname-settings-screen,
#summary-list-screen,
#summary-detail-screen {
  /* 背景改为半透明 (稍微实一点，减少透出的杂乱感) */
  background-color: rgba(242, 242, 247, 0.85) !important;
  background-image: none !important;
}

/* 2. 内容容器：彻底透明化 */
/* 这一步是为了防止里面的 div 还有白色背景挡住上面的玻璃效果 */
.scrollable-list-container,
.music-content,
.settings-content,
.playlist-content,
#shop-main-content,
#gacha-main-content,
#slacking-off-main-content,
#transactions-list-container,
#dating-history-container,
#font-url-list-container,
#icon-list-container,
#preset-list-container {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

#api-model {
  max-width: 100%;
  /* 限制宽度不超过父容器 */
  width: 100%;
  /* 填满可用空间 */

  /* 文字过长显示省略号 (对部分浏览器有效) */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* 如果是原生 select 的下拉选项太长，这是浏览器行为，
   但我们可以限制 select 本身不撑大布局 */
.modal-cell {
  overflow: hidden;
  /* 防止单元格被撑大 */
}

/* ========================================== */
/* === 状态栏/
        /* ========================================== */

.status-bar {
  /* 1. 强制绝对定位，确保它浮起来 */
  position: absolute !important;
  top: 14px !important;
  /* 距离顶部距离 */
  left: 0 !important;
  width: 100% !important;
  height: 20px !important;

  /* 2. 布局：两端对齐，左右留边距 */
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 28px !important;
  /* 避开圆角 */
  box-sizing: border-box !important;

  /* 3. 核心：层级设为最高，防止被 App 遮挡 */
  z-index: 99999 !important;
  pointer-events: none !important;
  /* 让点击穿透 */

  /* 4. 字体颜色 */
  color: #000000;
  /* 默认黑色 */
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
}

.sb-left-container {
  display: flex;
  align-items: center;
  padding-left: 1px;
  /* 稍微离左边框远一点 */
  font-size: 14.5px;
  /* 稍微调整大小 */
  padding-top: 8px;
}

.sb-right-container {
  display: flex;
  align-items: center;
  gap: 6px;
  /* 核心：控制右侧图标之间的间距，让它们不要挤在一起 */
  padding-right: 1px;
  /* 稍微离右边框远一点 */
  padding-top: 8px;
}

/* 图标通用样式 */
.status-icon {
  display: block !important;
}

/* 深色模式适配：强制变白 */
.phone-frame.dark-mode .status-bar {
  color: #ffffff !important;
}

/* 隐藏状态栏 */
.phone-frame.hide-status-bar .status-bar {
  display: none !important;
}

/* === 关于本机页面样式 === */

/* 1. 顶部大图卡片 */
.device-hero-card {
  width: 90%;
  height: 240px;
  /* 高度 */
  border-radius: 20px;
  margin-bottom: 20px;
  background-image: url("https://i.postimg.cc/HkmRC516/17728ccabceb396037e09ea2f3c65db8-720.jpg");
  /* 你的图片URL */
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

  /* 让文字居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

/* 这里的文字样式是直接写在图片上的，如果你换图片自带文字，可以把下面 .hero-content 隐藏 */
.hero-content {
  /* 如果你的背景图已经有文字了，就把 display 改为 none */
  display: none;
  flex-direction: column;
  gap: 5px;
}

/* 2. 网格布局容器 */
.device-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 两列 */
  gap: 12px;
}

/* 3. 小方块卡片 */
.info-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.info-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

/* 4. 进度条样式 */
.info-progress-bar {
  width: 100%;
  height: 6px;
  background-color: #f0f0f0;
  border-radius: 3px;
  margin-bottom: 10px;
  overflow: hidden;
}

.info-progress-bar .progress {
  height: 100%;
  /* 彩虹渐变色 */
  background-color: #000000;
  border-radius: 3px;
}

/* 5. 文字样式 */
.info-label {
  font-size: 13px;
  color: #8e8e93;
}

.info-value {
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.4;
}

/* 6. 长条列表卡片 (占据整行) */
.info-list-card {
  grid-column: 1 / -1;
  /* 跨越两列 */
  background-color: #ffffff;
  border-radius: 16px;
  padding: 5px 20px;
  /* 上下内边距小一点，由 row 撑开 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* 列表行 */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 垂直居中 */
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 15px;
}

.info-row:last-child {
  border-bottom: none;
}

.info-row .label {
  color: #1d1d1f;
  font-weight: 500;
}

.info-row .value {
  color: #8e8e93;
  text-align: right;
}

/* 特殊样式：垂直排列的行 (如摄像头信息) */
.info-row.vertical {
  align-items: flex-start;
  /* 顶部对齐 */
}

.info-row .value.right-align {
  text-align: right;
  line-height: 1.6;
}

/* 标签样式 (+12GB) */
.tag {
  background-color: #f2f2f7;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #1d1d1f;
  margin-left: 5px;
}

/* 深色模式适配 */
.phone-frame.dark-mode .info-card,
.phone-frame.dark-mode .info-list-card {
  background-color: #2c2c2e;
}

.phone-frame.dark-mode .info-label,
.phone-frame.dark-mode .info-row .value {
  color: #8e8e93;
}

.phone-frame.dark-mode .info-value,
.phone-frame.dark-mode .info-row .label {
  color: #fff;
}

.phone-frame.dark-mode .info-row {
  border-bottom-color: #38383a;
}

.phone-frame.dark-mode .tag {
  background-color: #3a3a3c;
  color: #fff;
}

/* 默认状态：关于本机页隐藏 */
#about-device-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 25;
  /* 比设置页高 */
  transform: translateX(20px);
  /* 初始位置稍微偏右 */
  transition: all 0.3s ease;
}

/* 激活状态 */
.phone-frame.show-about-device #about-device-screen {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* ========================================== */
/* === 修复：七袋商城分类栏吸顶 (Sticky Fix) === */
/* ========================================== */

/* 1. 重置主容器的内边距 */
/* 恢复顶部留白，给顶栏留出空间，去掉之前的 margin hacks */
#shop-main-content {
  overflow-y: auto !important;
  /* 确保它是滚动容器 */
  height: 100% !important;
}

/* 2. 修复分类栏的吸附逻辑 */
.category-tabs {
  /* 必须是 sticky */

  position: fixed !important;

  /* 移除之前的 margin hack */
  margin-top: 0px !important;

  /* 层级：要比下面的商品高，但比顶栏(z-index:100)低 */
  z-index: 15 !important;

  padding: 20px 20px;
  /* 隐藏滚动条但允许水平滚动 */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  /* Firefox */
  -ms-overflow-style: none !important;
  /* IE/Edge */
}

.category-tabs {
  display: flex !important;
  align-items: center limportant;
  padding: 0 8px !important;
  white-space: nowraplimportant;
  /*自动宽度，让内容决定容器宽度*/
  width: max-content limportant;
  min-width: 100% !important;
}

/* 3. 确保中间的面板容器不阻挡 sticky */
#shopping-content-panel {
  overflow: visible !important;
  /* 关键：不能是 hidden 或 auto，否则 sticky 失效 */
  height: auto !important;
}

#chat-screen {
  /* 暂时去掉毛玻璃，防止动画卡顿 */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* 保持半透明背景，不至于太丑 */
  background-color: rgba(242, 242, 247, 0.95) !important;

  /* 强行开启 GPU 加速 */
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  /* 触发 3D 加速 */

  /* 优化过渡曲线 */
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 2. 静止状态：动画结束后，加回毛玻璃 */
/* 找到这段 (大约在 1680 行附近) */
#chat-screen.settled {
  background-color: transparent !important;
  transform: none !important;
  will-change: auto !important;
}

/* 深色模式适配 */
.phone-frame.dark-mode #chat-screen {
  background-color: rgba(28, 28, 30, 0.95) !important;
}

.phone-frame.dark-mode #chat-screen.settled {
  background-color: rgba(28, 28, 30, 0.75) !important;
}

/* 4. 文字排版 */
.group-mode-card .mode-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.group-mode-card .mode-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1c1c1e;
  letter-spacing: 0.3px;
}

.group-mode-card .mode-info p {
  margin: 0;
  font-size: 13px;
  color: #8e8e93;
  /* 次级灰色 */
  font-weight: 400;
}

/* === 专属配色 (关键美化点) === */

/* 模式1：选择角色 (蓝色系) */
#mode-select-existing .mode-icon {
  background-color: rgba(0, 122, 255, 0.1) !important;
  /* 淡蓝背景 */
}

#mode-select-existing .mode-icon svg path {
  fill: #007aff !important;
  /* 亮蓝图标 */
}

/* 模式2：新建空白 (绿色系) */
#mode-create-empty .mode-icon {
  background-color: rgba(52, 199, 89, 0.1) !important;
  /* 淡绿背景 */
}

#mode-create-empty .mode-icon svg path {
  fill: #34c759 !important;
  /* 亮绿图标 */
}

/* 深色模式适配 */
.phone-frame.dark-mode .group-mode-card {
  background-color: rgba(44, 44, 46, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.phone-frame.dark-mode .group-mode-card h3 {
  color: #fff !important;
}

/* === 微调：把 5G 图标往上提一点 === */
.sb-left .status-icon:last-child {
  /* translateY 负值表示向上移动 */
  /* 你可以把 -1.5px 改成 -2px 或 -1px 来微调高度 */
  transform: translateY(-0.7px);
}

/* ======================================================= */
/* === 能页面层级提升补丁 === */
/* ======================================================= */

/* 聊天界面的层级通常是 20，所以子功能必须大于 20 */
#voice-call-screen,
/* 语音通话 */
#summary-list-screen,
/* 通话摘要列表 */
#summary-detail-screen,
/* 摘要详情 */
#dating-screen,
/* 约会主界面 */
#dating-setup-screen,
/* 约会引导页 */
#dating-settings-screen,
/* 约会设置页 */
#dating-history-screen,
/* 约会记录 */
#incoming-call-screen,
/* 来电界面 */
#vn-screen

/* 视觉小说界面 */ {
  z-index: 50 !important;
  /* 强制置顶，覆盖聊天界面 */
}

/* 确保遮罩层（如输入框、选择框）比这些页面更高 */
.modal-overlay,
.voice-panel-overlay,
#image-preview-modal {
  z-index: 1000 !important;
}

/* ======================================================= */
/* === 核心修复：图标预设界面无法滑动 & 层级问题 === */
/* ======================================================= */

/* 1. 暴力提升预设界面的层级，防止被其他透明图层遮挡 */
.phone-frame.show-presets #preset-management-screen {
  z-index: 60 !important;
  /* 原来是 3，现在提升到 60，高于所有普通页面 */
  pointer-events: auto !important;
  /* 强制开启交互 */
}

/* 2. 强制修复预设界面的滚动容器 */
#preset-management-screen .settings-content {
  /* 确保容器占满高度，否则无法产生滚动条 */
  height: 100% !important;

  /* 强制开启垂直滚动 */
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* 确保布局模式正确，防止 flex 布局导致无法滚动 */
  display: block !important;

  /* 顶部避让刘海和标题栏 (确保不被遮挡) */
  padding-top: 110px !important;
  padding-bottom: 40px !important;
  /* 底部留白 */

  box-sizing: border-box !important;
}

/* 3. 修复内部列表容器的高度，让它由内容撑开 */
#preset-list-container {
  height: auto !important;
  overflow: visible !important;
  /* 让父容器负责滚动 */
  padding-bottom: 50px;
  /* 额外底部垫片 */
}

/* --- 修复：加载更多按钮的专属样式 --- */
#load-more-messages-btn {
  /* 1. 确保它是块级表现，能够响应 margin: auto 居中 */
  display: block;

  /* 2. 也是核心：给它足够的上下空间 */
  /* 上边距 20px，左右 auto (实现水平居中)，下边距 20px */
  margin: 20px auto 20px auto;

  /* 3. 防止它太宽或太窄 */
  width: fit-content;

  /* 4. 提升层级，确保不被某些奇怪的背景遮挡 */
  position: relative;
  z-index: 5;

  /* 5. 简单的美化，让它看起来像个按钮而不是文字 */
  background-color: rgba(0, 0, 0, 0.05);
  /* 淡淡的背景 */
  color: #007aff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

/* --- 1. 禁用文字选择 --- */
.chat-bubble,
.message-row {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard */
}

/* --- 2. 长按操作菜单 (黑色气泡) --- */
#msg-action-menu {
  position: absolute;
  z-index: 1000;
  background-color: #1f1f1f;
  border-radius: 12px;
  padding: 6px 10px;
  display: none;
  /* 默认隐藏 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  pointer-events: auto !important;
  animation: menu-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-direction: row;
  gap: 8px;
}

#msg-action-menu::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #1f1f1f transparent transparent transparent;
}

@keyframes menu-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.action-menu-btn {
  background: none;
  border: none;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  cursor: pointer;
  padding: 0 5px;
}

/* --- 3. 输入框上方的回复预览条 --- */
/* --- 修复版：输入框上方的回复预览条 --- */
/* --- 修复版：输入框上方的回复预览条 --- */
#reply-preview-bar {
  position: absolute;
  bottom: 93px;
  /* 根据你的布局调整 */
  left: 15px;
  right: 15px;
  /* background-color: rgba(245, 245, 245, 0.95); */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 10px 15px;

  /* ▼▼▼ 核心修复：只保留 display: none ▼▼▼ */
  display: none;
  /* ▲▲▲ 删掉了原来的 display: flex ▲▲▲ */

  /* Flex 布局属性保留，等 JS 把它设为 flex 时就会生效 */
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  /* border-left: 4px solid #007AFF; */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 19;
  animation: slide-up 0.2s ease-out;
}

/* 新增：专门包裹文字的容器 */
.reply-text-wrapper {
  flex: 1;
  /* 占据剩余所有空间 */
  min-width: 0;
  /* 【关键】允许 flex 子项收缩到比内容更小，触发省略号 */
  display: flex;
  flex-direction: column;
}

.reply-content-text {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  /* 确保填满父容器 */
}

.reply-close-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 20px;
  padding: 5px;
  cursor: pointer;
  flex-shrink: 0;
  /* 【关键】禁止按钮被压缩 */
}

@keyframes slide-up {
  from {
    transform: translateY(10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 新增：专门包裹文字的容器 */
.reply-text-wrapper {
  flex: 1;
  /* 占据剩余所有空间 */
  min-width: 0;
  /* 【关键】允许 flex 子项收缩到比内容更小，触发省略号 */
  display: flex;
  flex-direction: column;
}

.reply-content-text {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  /* 确保填满父容器 */
}

.reply-close-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 18px;
  padding: 5px;
  cursor: pointer;
  flex-shrink: 0;
  /* 【关键】禁止按钮被压缩 */
}

/* --- 4. 消息气泡内的引用样式 (Reply Quote) --- */
.reply-quote-container {
  background-color: rgba(0, 0, 0, 0.05);
  /* 淡淡的背景 */
  border-radius: 8px;
  padding: 4px 8px;
  margin-bottom: 2px;
  /* border-left: 3px solid rgba(0, 0, 0, 0.2); */
  display: flex;
  flex-direction: column;
  font-size: 10px;
  cursor: pointer;
  /* 可点击跳转 */
  
  /* 【关键修复】限制引用框的最大宽度，防止撑破气泡 */
  max-width: 240px; 
  box-sizing: border-box;
}

/* 在深色模式下的适配 */
.phone-frame.dark-mode .reply-quote-container {
  background-color: rgba(255, 255, 255, 0.1);
  border-left-color: rgba(255, 255, 255, 0.3);
}

.reply-quote-name {
  font-weight: 600;
  margin-bottom: 2px;
  opacity: 0.8;
}

.reply-quote-text {
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 5. Markdown 引用样式 (Blockquote) - 修复长文本溢出 --- */
blockquote {
  margin: 4px 0;
  padding-left: 10px;
  border-left: 3px solid rgba(0, 0, 0, 0.2);
  opacity: 0.8;
  font-size: 0.95em;
  /* 核心：允许长文本换行 */
  white-space: pre-wrap; 
  word-break: break-all;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* 深色模式下的 Blockquote */
.phone-frame.dark-mode blockquote {
    border-left-color: rgba(255, 255, 255, 0.3);
}

/* --- 聊天记录卡片专属样式 (修复交互版) --- */
.history-card-bubble {
  /* 1. 强制开启鼠标/手指交互，无视父级的阻拦 */
  pointer-events: auto !important;

  /* 2. 提升层级，防止被隐形图层遮挡 */
  position: relative !important;
  z-index: 10 !important;

  /* 原有样式保持 */
  background: white;
  border-radius: 12px;
  padding: 12px;
  width: 220px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}

/* 给卡片加个按下去的效果，让你知道点没点到 */
.history-card-bubble:active {
  transform: scale(0.98);
  background-color: #f5f5f5;
}

/* 1. 任意门按钮颜色 (青色系) */

/* 2. 【核心】中间动作/旁白消息的样式 */
.action-message-container {
  display: flex;
  justify-content: center;
  margin: 15px 0;
  /* 上下留出距离 */
  width: 100%;
  pointer-events: none;
  /* 让它不阻挡点击 */
}

.action-message-text {
  font-size: 12px;
  color: #8e8e93;
  /* 浅灰色文字 */
  background-color: rgba(242, 242, 247, 0.6);
  /* 极淡的背景 */
  padding: 4px 12px;
  border-radius: 12px;
  text-align: center;
  max-width: 80%;
  /* ▼▼▼ 核心修复：必须加上这一行！ ▼▼▼ */
  pointer-events: auto !important;
  /* 让文字部分恢复可点击状态 */
  cursor: pointer;
  /* 加上手型鼠标，提示可点击 */

  /* 稍微加一点模糊滤镜，增加高级感 */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* 深色模式适配 */
.phone-frame.dark-mode .action-message-text {
  color: #98989d;
  background-color: rgba(60, 60, 60, 0.4);
}

/* === 聊天记录详情页 强力修复版 === */

#history-detail-overlay {
  background-color: #fff !important;
  /* 强制覆盖原来的透明黑 */
  align-items: stretch !important;
  /* 让内容拉伸填满 */
  padding: 0 !important;
  /* 移除内边距，由内部元素控制 */
  display: none;
  /* 默认隐藏 */
  flex-direction: column;
  /* 垂直排列：顶栏 + 内容 */
  z-index: 2000 !important;
  /* 保证在最最顶层 */
}

/* 2. 详情页顶栏：模仿 iOS 导航栏 */
#history-detail-overlay .settings-header {
  position: relative !important;
  /* 相对定位，不悬浮覆盖内容 */
  flex-shrink: 0;
  /* 防止被挤压 */
  background-color: #f5f5f7 !important;
  /* 浅灰底色 */
  border-bottom: 1px solid #e5e5e5;
  /* 底部细线 */
  padding-top: 50px !important;
  /* 避开刘海 */
  height: auto !important;
  min-height: 44px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 顶栏标题 */
#history-detail-title {
  font-size: 17px;
  font-weight: 600;
  color: #000;
  text-align: center;
  flex: 1;
  margin: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3. 内容滚动区域 */
#history-detail-content {
  flex: 1;
  /* 占据剩余空间 */
  overflow-y: auto;
  /* 允许垂直滚动 */
  padding: 20px 15px !important;
  /* 内容内边距 */
  background-color: #f5f5f7 !important;
  /* 整体浅灰背景 */
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  /* iOS 滚动回弹 */
}

/* --- 4. 单条消息样式 (仿微信聊天记录) --- */
/* 消息行容器 */
.history-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 统一靠左 */
  margin-bottom: 15px;
  width: 100%;
}

/* 发言人信息 (名字 + 时间) */
.history-meta {
  font-size: 12px;
  color: #8e8e93;
  /* 次级灰色 */
  margin-bottom: 4px;
  padding-left: 4px;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 气泡本体 */
.history-bubble {
  background-color: #ffffff;
  /* 纯白气泡 */
  color: #1c1c1e;
  /* 深黑文字 */
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.5;
  border-radius: 12px;
}

/* --- 优化：强制开启 GPU 加速，解决动画和滚动掉帧 --- */
.phone-frame,
.screen,
.modal-content,
.chat-messages-container,
.dynamic-island,
.features-panel {
  /* 开启 3D 变换，强制 GPU 介入 */
  transform: translate3d(0, 0, 0);
  /* 告诉浏览器这些属性会变化，提前做好优化准备 */
  will-change: transform, opacity;
  /* 某些设备上可以提升滚动流畅度 */
  -webkit-overflow-scrolling: touch;
}

/* 针对毛玻璃元素的特殊优化，防止滚动时闪烁 */
.chat-header,
.chat-input-area,
.features-panel,
.glass-segment-control {
  /* 这是一个渲染层级的黑科技，能稳定混合模式的渲染 */
  isolation: isolate;
}

/* 针对手机端的性能优化 */
@media (max-width: 600px) {
  /* 1. 关闭实时模糊，极大提升滚动性能 */
  .messages-content,
  .music-content,
  .settings-content,
  .glass-segment-control,
  #shop-main-content,
  #gacha-main-content {
    /* 原来是 blur(10px)，改为 none 禁用模糊 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 深色模式下的背景补偿 */
  .phone-frame.dark-mode .messages-content,
  .phone-frame.dark-mode #shop-main-content {
    background-color: rgba(28, 28, 30, 0.98) !important;
  }
}

@media (max-width: 600px) {
  .product-card,
  .beautify-card,
  .contact-item {
    /* 手机端使用更简单的阴影，减少渲染压力 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  }
}

/* 1. 卡片整体容器 */
.file-msg-card {
  /* 布局 */
  display: flex;
  align-items: center;

  /* 尺寸 - 严格保留你要求的尺寸 */
  min-width: 200px;
  max-width: 260px;
  padding: 12px;

  /* 外观 - 这里的改动是核心 */
  background-color: #ffffff;
  border-radius: 16px;
  /* 加大圆角，更圆润可爱 */

  /* 边框：改成非常淡的颜色，不再用黑色半透明，改用冷灰色 */
  border: 1px solid #eff1f5;

  /* 阴影：不再用黑色！使用低饱和度的蓝灰色阴影，去除“脏”的感觉 */
  /* 参数：水平0 垂直4 模糊16 颜色 */
  box-shadow: 0 4px 16px rgba(100, 116, 139, 0.08);

  /* 交互 - 去掉了 Hover，只保留点击动效的过渡 */
  cursor: pointer;
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s;
  position: relative;
  overflow: hidden;
  /* 保证内部元素不溢出圆角 */
}

/* 删除了 :hover 样式，只保留点击效果 */
.file-msg-card:active {
  transform: scale(0.96);
  /* 按压感明显一点 */
  background-color: #f8fafc;
  /* 微微变灰 */
}

/* 2. 左侧图标区域 */
.file-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  /* 稍微圆润一点 */

  /* 配色核心：默认给一个柔和的渐变，解决“太素”的问题 */
  /* 如果 JS 会覆盖这个背景色，建议在 JS 里也用渐变，或者保留这个作为底色 */
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);

  /* 给文字加一点阴影，防溢出 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;

  /* 字体样式 */
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  /* 文字不要纯白，用深灰显得更融合，除非背景很深 */
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* 4. 文件名 */
.file-card-name {
  font-size: 15px;
  font-weight: 600;
  /* 加粗一点点，提升质感 */

  /* 使用深蓝灰色，比纯黑更有高级感 */
  color: #334155;

  margin-bottom: 3px;
  line-height: 1.3;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 5. 文件大小 */
.file-card-size {
  font-size: 12px;
  /* 使用冷调灰色，看起来不脏 */
  color: #94a3b8;
  font-weight: 400;
}

.file-card-icon {
  /* ...之前的代码... */
  /* 文字阴影：给白色文字加一点点浅浅的阴影，增加立体感 */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* === 七浪 APP 专属样式 === */

/* 1. 瀑布流布局核心 */
.qilang-waterfall {
  column-count: 2;
  /* 双列布局 */
  column-gap: 12px;
  /* 列间距 */
  padding: 0 10px;
  box-sizing: border-box;
}

/* 2. 帖子卡片样式 */
/* 找到 .qilang-card，更新为以下代码 */
.qilang-card {
  /* --- 原有属性保持不变 --- */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  /* 把原来的 15px 改小一点，给文字腾出更多空间 */
  margin-bottom: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 80px;
  /* 减小内部元素间距，让卡片更紧凑 */

  /* --- ▼▼▼ 核心修复代码 ▼▼▼ --- */
  box-sizing: border-box;
  /* 确保内边距不撑大宽度 */
  width: 100%;
  /* 强制占满列宽 */
  overflow: hidden;
  /* 溢出部分直接切掉，防止破坏布局 */
  word-break: break-all;
  /* 【关键】强制打断长单词/长符号，防止#标签撑破卡片 */
  /* --- ▲▲▲ 修复结束 ▲▲▲ --- */

  cursor: pointer;
  transition: transform 0.2s ease;
}

.qilang-card:active {
  transform: scale(0.98);
}

/* 大字标题 */
/* 找到 .q-card-title，更新为以下代码 */
.q-card-title {
  /* --- ▼▼▼ 核心修复代码 ▼▼▼ --- */
  font-size: 22px;
  /* 从 20px 改为 15px，双列布局更精致 */
  line-height: 1.4;
  /* 增加行高，文字呼吸感更强 */
  font-weight: 700;
  /* 保持加粗 */
  /* --- ▲▲▲ 修复结束 ▲▲▲ --- */

  color: #000;
  margin-bottom: 4px;

  /* 保持原来的省略号逻辑 */
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 卡片底部信息 */
.q-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #8e8e93;
  margin-top: 5px;
}

/* 预览正文 (字体小一点，灰一点) */
.q-card-preview {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;

  /* 限制显示 2 行 */
  display: none;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 底部栏美化 */
.q-card-footer {
  margin-top: auto;
  /* 推到底部 */
  padding-top: 8px;
  border-top: 1px dashed #eee;
  /* 加个虚线更有设计感 */
}

/* 3. 侧边栏样式 */
.qilang-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  /* 侧边栏宽度 */
  height: 100%;
  background-color: #f2f2f7;
  /* iOS 风格背景 */
  z-index: 200;
  /* 高于内容 */
  transform: translateX(-100%);
  /* 默认隐藏在左侧 */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.qilang-sidebar.active {
  transform: translateX(0);
  /* 滑出 */
}

/* 侧边栏遮罩 */
.qilang-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}

.qilang-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-header {
  padding: 60px 20px 20px;
  font-size: 24px;
  font-weight: bold;
  color: #1c1c1e;
}

.sidebar-menu {
  flex-grow: 1;
  padding: 10px;
}

.sidebar-item {
  padding: 15px 20px;
  margin-bottom: 8px;
  border-radius: 12px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background-color 0.2s;
}

.sidebar-item:active {
  background-color: rgba(0, 0, 0, 0.05);
}

.sidebar-icon {
  font-size: 20px;
}

/* 深色模式适配 */
.phone-frame.dark-mode .qilang-card {
  background-color: #2c2c2e;
  border-color: rgba(255, 255, 255, 0.05);
}

.phone-frame.dark-mode .q-card-title {
  color: #fff;
}

.phone-frame.dark-mode .qilang-sidebar {
  background-color: #1c1c1e;
}

.phone-frame.dark-mode .sidebar-header,
.phone-frame.dark-mode .sidebar-item {
  color: #fff;
}

/* === 七浪 App 的显示/隐藏动画控制 === */
#qilang-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background-color: #f2f2f7;
  /* 默认浅灰背景 */
}

/* 当 phone-frame 拥有 .show-qilang 类名时 */
.phone-frame.show-qilang #home-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.phone-frame.show-qilang #qilang-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 20;
  /* 确保层级足够高 */
}

/* === 七浪 详情页 & 发帖弹窗样式 === */

/* 1. 子页面容器 (详情页) */
.qilang-sub-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 210;
  /* 比侧边栏还要高 */
  transform: translateX(100%);
  /* 默认在右侧屏幕外 */
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.qilang-sub-screen.active {
  transform: translateX(0);
  /* 滑入屏幕 */
}

/* 2. 详情页内容 */
.q-detail-main {
  padding: 20px;
  border-bottom: 2px solid #f2f2f7;
}

.q-detail-author-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.q-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.q-author-info {
  flex-grow: 1;
}

.q-name {
  font-weight: 600;
  font-size: 13px;
}

.q-time {
  font-size: 12px;
  color: #999;
}

.q-follow-btn {
  padding: 4px 12px;
  border: 1px solid #5e5ce6;
  color: #5e5ce6;
  border-radius: 14px;
  background: none;
  font-size: 12px;
  font-weight: 600;
}

.q-detail-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
}

.q-detail-body {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
  white-space: pre-wrap;
  /* 允许换行 */
}

.q-detail-tags {
  color: #5e5ce6;
  font-size: 14px;
}

/* 3. 评论区 */
.q-comments-header {
  padding: 15px 20px;
  font-weight: 600;
  color: #666;
  font-size: 14px;
}

.q-comment-user {
  font-weight: 600;
  font-size: 13px;
  color: #444;
}

.q-comment-text {
  font-size: 14px;
  color: #333;
}

.q-comment-actions {
  margin-top: 6px;
  font-size: 11px;
  color: #999;
  display: flex;
  gap: 15px;
}

/* 4. 底部评论栏 */
.q-detail-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
}

#q-detail-input {
  flex-grow: 1;
  background: #f2f2f7;
  border: none;
  padding: 8px 15px;
  border-radius: 20px;
  margin-right: 10px;
  outline: none;
}

#q-detail-send-btn {
  color: #5e5ce6;
  font-weight: 600;
  background: none;
  border: none;
}

/* 5. 发帖弹窗 */
.qilang-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 220;
  display: none;
  /* 默认隐藏 */
  align-items: flex-end;
  /* 底部对齐 */
}

.qilang-modal-overlay.active {
  display: flex;
}

.qilang-modal-content {
  width: 100%;
  height: 90%;
  /* 占屏幕90%高度 */
  background: #fff;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.qilang-modal-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.qilang-modal-header h3 {
  margin: 0;
  font-size: 16px;
}

.qilang-modal-header button {
  background: none;
  border: none;
  font-size: 15px;
  color: #666;
}

.qilang-modal-header .primary-btn {
  background: #5e5ce6;
  color: white;
  padding: 6px 15px;
  border-radius: 20px;
  font-weight: 600;
}

.qilang-modal-body {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.q-input-title {
  font-size: 18px;
  font-weight: bold;
  border: none;
  outline: none;
  width: 100%;
}

.q-input-body {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 15px;
  resize: none;
  font-family: inherit;
}

.q-input-tags-row {
  display: flex;
  align-items: center;
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
}

.q-tag-icon {
  margin-right: 5px;
  color: #5e5ce6;
  font-weight: bold;
}

#qilang-post-tags-input {
  border: none;
  outline: none;
  flex-grow: 1;
  color: #5e5ce6;
}

/* 深色模式适配 */
.phone-frame.dark-mode .qilang-sub-screen,
.phone-frame.dark-mode .qilang-modal-content,
.phone-frame.dark-mode .q-detail-footer {
  background-color: #1c1c1e;
}

.phone-frame.dark-mode .q-detail-title,
.phone-frame.dark-mode .q-detail-body,
.phone-frame.dark-mode .q-comment-text,
.phone-frame.dark-mode .qilang-modal-header h3,
.phone-frame.dark-mode .q-input-title,
.phone-frame.dark-mode .q-input-body {
  color: #fff;
}

.phone-frame.dark-mode .q-detail-main {
  border-bottom-color: #2c2c2e;
}

.phone-frame.dark-mode #q-detail-input {
  background-color: #2c2c2e;
  color: #fff;
}

.phone-frame.dark-mode .qilang-modal-header {
  border-bottom-color: #2c2c2e;
}

/* === 修复：七浪内容区域滚动 === */
#qilang-content {
  /* 1. 强制占满剩余空间 */
  height: 100% !important;

  /* 2. 允许垂直滚动 */
  overflow-y: auto !important;

  /* 3. 确保内边距不撑大盒子，导致计算错误 */
  box-sizing: border-box !important;

  /* 4. 增加底部留白，防止最后一张卡片被底部操作栏挡住 */
  padding-bottom: 120px !important;

  /* 5. iOS 顺滑滚动支持 */
  -webkit-overflow-scrolling: touch;
}

/* === 评论弹出动画 === */
@keyframes commentPop {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.q-comment-item.pop-in {
  animation: commentPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 调整图标对齐 */
.q-card-footer svg {
  display: block;
  /* 消除图片底部间隙 */
}

/* --- 修复七浪详情页滚动问题 --- */
#qilang-detail-view .settings-content {
  /* 1. 让内容区域占据除去顶栏和底栏后的所有剩余空间 */
  flex-grow: 1;

  /* 2. 关键：Flex子项在主轴方向若要滚动，通常需要设置基准高度为0或auto */
  height: 0;

  /* 3. 允许垂直方向滚动 */
  overflow-y: auto;

  /* 4. 优化：增加iOS的惯性滚动效果，手感更顺滑 */
  -webkit-overflow-scrolling: touch;
}

/* === 七浪详情页菜单 === */
.q-action-menu {
  position: absolute;
  top: 60px;
  right: 15px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 140px;
  z-index: 220;
  overflow: hidden;
  animation: menuFadeIn 0.2s ease-out;
}

@keyframes menuFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.q-menu-item {
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s;
}

.q-menu-item:active {
  background-color: #f5f5f5;
}

.q-menu-item.delete {
  color: #ff3b30;
  border-top: 1px solid #f0f0f0;
}

/* 深色模式适配 */
.phone-frame.dark-mode .q-action-menu {
  background-color: #2c2c2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.phone-frame.dark-mode .q-menu-item {
  color: #fff;
}

.phone-frame.dark-mode .q-menu-item.delete {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* === 七浪侧边栏身份选择 === */
.sidebar-identity-section {
  padding: 0 20px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.sidebar-section-title {
  font-size: 12px;
  color: #8e8e93;
  margin-bottom: 10px;
}

.sidebar-identity-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* 允许横向滚动 */
  padding-bottom: 5px;
  /* 隐藏滚动条 */
  scrollbar-width: none;
}

.sidebar-identity-list::-webkit-scrollbar {
  display: none;
}

.q-identity-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  /* 默认无边框 */
  cursor: pointer;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  transition: all 0.2s;
  position: relative;
}

/* 选中状态：加个蓝圈 */
.q-identity-avatar.active {
  border-color: #5e5ce6;
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(94, 92, 230, 0.3);
}

/* === 现代化评论区样式 (Modern App Style) === */

/* 1. 评论列表容器 */
#q-comments-list {
  padding-bottom: 20px;
}

/* 2. 单条评论容器 (Flex布局) */
.q-comment-item {
  display: flex;
  gap: 12px;
  /* 头像与内容的间距 */

  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  /* 极淡的分割线 */

  /* 动画初始状态：透明且稍微向下偏移 */
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 3. 动画激活状态 */
.q-comment-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 4. 头像样式 */
.q-comment-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: #f0f0f0;
}

/* 5. 右侧内容区域 */
.q-comment-main {
  flex-grow: 1;
  min-width: 0;
  /* 防止内容撑开 */
}

/* 用户名行 */
.q-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.q-comment-user {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  /* 次级灰，不抢眼 */
}

/* 评论正文 */
.q-comment-text {
  font-size: 15px;
  color: #333;
  /* 主色深黑 */
  line-height: 1.6;
  margin-bottom: 8px;
  word-break: break-word;
  /* 防止长串字符破坏布局 */
}

/* 底部操作栏 (时间、回复按钮) */
.q-comment-footer {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 12px;
  color: #999;
}

.q-reply-trigger {
  font-weight: 500;
  cursor: pointer;
  color: #5e5ce6;
  /* 你的主题色 */
}

/* === 子评论/楼中楼 样式 (灰色背景块) === */
.q-sub-comments-box {
  margin-top: 10px;
  background-color: #f7f7f9;
  /* 浅灰背景 */
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 子评论单行 */
.q-sub-item {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.q-sub-user {
  font-weight: 600;
  color: #666;
  margin-right: 4px;
}

/* 深色模式适配 */
.phone-frame.dark-mode .q-comment-user {
  color: #aaa;
}

.phone-frame.dark-mode .q-comment-text {
  color: #eee;
}

.phone-frame.dark-mode .q-sub-comments-box {
  background-color: #2c2c2e;
}

.phone-frame.dark-mode .q-sub-user {
  color: #aaa;
}

.phone-frame.dark-mode .q-sub-item {
  color: #ddd;
}

/* === 现代化评论区样式 (优化版) === */

/* 1. 单条主评论容器 */
.q-comment-item {
  display: flex;
  gap: 12px;
  /* 头像与右侧内容的间距 */
  padding: 18px 0;
  /* 上下间距增加，解决拥挤 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  /* 极淡分割线 */

  /* 动画初始状态 */
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease-out;
}

.q-comment-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 2. 头像 */
.q-comment-avatar-img {
  width: 40px;
  /* 稍微加大头像 */
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  /* 防止头像被挤扁 */
  background-color: #f0f0f0;
}

/* 3. 右侧主体区域 */
.q-comment-main {
  flex-grow: 1;
  min-width: 0;
}

/* 用户名行 */
.q-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.q-comment-user {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  /* 深色 */
}

/* 评论内容 */
.q-comment-text {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  /* 增加行高，提升可读性 */
  margin-bottom: 10px;
}

/* 底部操作栏 */
.q-comment-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  /* 拉开时间与回复按钮的距离 */
  font-size: 12px;
  color: #999;
}

.q-reply-trigger {
  font-weight: 500;
  cursor: pointer;
  color: #5e5ce6;
  /* 主题色 */
  padding: 2px 8px;
  /* 增加点击区域 */
}

/* === 关键：楼中楼 (灰色背景块) === */
.q-sub-comments-box {
  margin-top: 10px;
  background-color: #f7f7f9;
  /* 浅灰背景 */
  border-radius: 8px;
  padding: 12px;
  /* 内边距 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 子评论之间的间距 */
}

/* 子评论单行 */
.q-sub-item {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.q-sub-user {
  font-weight: 600;
  color: #333;
  margin-right: 4px;
}

/* === 修复：七浪详情页布局问题 === */

/* 1. 强制覆盖全局的居中设置，改为拉伸填满 */
#qilang-detail-view .settings-content {
  align-items: stretch !important;
  /* 关键：让子元素宽度自动撑满 */
  text-align: left !important;
  /* 关键：文字左对齐 */
  width: 100% !important;
}

/* 2. 优化详情页主体容器 */
.q-detail-main {
  width: 100%;
  box-sizing: border-box;
  /* 确保内边距不撑爆宽度 */
  padding: 20px;
  background-color: #fff;
  margin-bottom: 10px;
}

/* 3. 优化标题和正文的显示 */
.q-detail-title {
  text-align: left;
  width: 100%;
  display: block;
}

.q-detail-body {
  text-align: justify;
  /* 两端对齐，阅读体验更好 */
  width: 100%;
  white-space: pre-wrap;
  /* 保留换行 */
}

/* === 新增：子评论回复按钮样式 === */
.q-sub-item {
  position: relative;
  /* 为绝对定位做准备 */
  padding-right: 40px;
  /* 右侧留出空间给按钮 */
}

/* 小回复按钮 */
.q-sub-reply-btn {
  font-size: 12px;
  color: #5e5ce6;
  cursor: pointer;
  margin-left: 8px;
  font-weight: 500;
  opacity: 0.8;
}

.q-sub-reply-btn:active {
  opacity: 0.5;
}

/* ========================================= */
/* === 🚧 施工中：暂时禁用底部抽屉按钮 === */
/* ========================================= */

#open-drawer-btn {
  /* 1. 核心：禁止一切鼠标和手指的交互 */
  pointer-events: none !important;

  /* 2. 视觉：把透明度降低，让它看起来像是“禁用”状态 */
  opacity: 0.3 !important;

  /* 3. (可选) 变成黑白，增加一种“不可用”的感觉 */
  filter: grayscale(100%) !important;
}

/* ========================================= */
/* === ⏰ 消息时间戳样式 === */
/* ========================================= */

/* ========================================= */
/* === ⏰ 时间戳布局终极修复版 === */
/* ========================================= */

/* 1. 容器核心布局：横向排列 + 底部对齐 */
.message-content-wrapper {
  display: flex !important;

  /* 强制横向排列 (左右结构)，拒绝上下结构 */
  flex-direction: row !important;

  /* 让所有元素（头像、气泡、时间）都沉底对齐 */
  align-items: flex-end !important;

  gap: 6px !important;
  /* 元素之间的间距 */
  margin-bottom: 10px !important;
  /* 行与行之间的间距 */
}

/* 2. 用户消息 (右侧) */
/* 利用 row-reverse 实现：[时间] [气泡] [头像] 的视觉顺序 */
.message-content-wrapper.user {
  flex-direction: row-reverse !important;
}

/* 3. AI 消息 (左侧) */
/* 保持默认顺序：[头像] [气泡] [时间] */
.message-content-wrapper.ai {
  flex-direction: row !important;
}

/* 4. 时间戳样式美化 */
.message-timestamp {
  /* --- 核心：继承全局字体 --- */
  font-family: inherit !important;

  font-size: 11px !important;
  color: rgba(0, 0, 0, 0.4) !important;
  /* 浅灰色 */

  /* 微调高度，防止和气泡底部贴得太死 */
  margin-bottom: 2px !important;

  /* 禁止时间换行 */
  white-space: nowrap !important;

  /* 禁止时间被挤压变形 */
  flex-shrink: 0 !important;
}

/* 5. 清除头像边距 (由 gap 统一控制) */
.chat-avatar {
  margin: 0 !important;
}

/* 6. 深色模式适配 */
.phone-frame.dark-mode .message-timestamp {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* === 新版语音气泡样式 === */

/* 1. 语音消息的整体容器：确保气泡垂直排列 (上语音，下文字) */
.voice-message-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

/* 针对用户(User)和AI的对齐方式 */
.message-content-wrapper.user .voice-message-wrapper {
  align-items: flex-end;
  /* 用户靠右 */
}

.message-content-wrapper.ai .voice-message-wrapper {
  align-items: flex-start;
  /* AI靠左 */
}

.voice-audio-bubble {
  cursor: pointer;
  min-width: 18px;
  /* 最小宽度 */
  max-width: 18px;
  position: relative;
  transition: opacity 0.2s;
}

.voice-audio-bubble:active {
  opacity: 0.8;
  /* 点击反馈 */
}

/* 3. 下半部分：翻译文本 (灰色圆角矩形) */
.voice-text-panel {
  margin-top: 6px;
  padding: 8px 10px;
  background-color: #ffffff;
  border-radius: 13px;
  font-size: 12px;
  color: #333;
  line-height: 1.5;
  word-break: break-word;
  /* 允许长文本换行 */
  max-width: 240px;
  /* 限制最大宽度，防止太宽 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  align-items: flex-start !important;

  /* 核心动画：默认隐藏，通过高度和透明度做过渡 */
  /* --- 修复：默认不隐藏，或者仅通过 display 控制 --- */
  display: none; /* JS 会切换这个 */
  opacity: 0; /* 配合 fade-in 动画 */
  transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 激活显示时的样式 */
.voice-text-panel.visible {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 动画辅助类 */
.voice-text-panel.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* 语音波纹图标微调 */
.voice-icon-svg {
  width: 20px;
  height: 20px;
}

/* === 长按菜单图标统一控制 === */
#msg-action-menu .action-menu-btn svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  min-height: 18px;
  pointer-events: none;
  fill: currentColor;
}

/* === 性能优化补丁 === */

/* 1. 强制开启硬件加速 */
.phone-frame,
.screen,
.modal-content,
.chat-messages-container,
.dynamic-island,
.features-panel {
  /* 开启 3D 变换，强制 GPU 介入 */
  transform: translate3d(0, 0, 0);
  /* 告诉浏览器这些属性会变化，提前做好优化准备 */
  will-change: transform, opacity;
  /* 某些设备上可以提升滚动流畅度 */
  -webkit-overflow-scrolling: touch;
}

/* 2. 针对毛玻璃元素的特殊优化 */
/* 这里的原理是：给一个独立的渲染层，防止背景滚动时频繁重绘 */
.chat-header,
.chat-input-area,
.features-panel,
.glass-segment-control {
  isolation: isolate;
}

/* 主动消息设置列表样式 */
.proactive-item {
  display: flex;
  align-items: center;
  padding: 12px 15px 12px 0;
  border-bottom: 1px solid #e5e5ea;
}

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

.proactive-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.proactive-item label {
  flex-grow: 1;
  font-size: 16px;
  color: #000;
}

/* === 高斯模糊通知横幅 === */
#notification-banner-container {
  position: fixed;
  top: 40px;
  /* 避开状态栏 */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 350px;
  z-index: var(--z-system-banner);
  /* 通知横幅层级 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  /* 让点击穿透，不挡操作 */
}

.glass-banner {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 22px;
  padding: 12px 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 12px;

  /* 动画 */
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glass-banner.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.glass-banner img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.glass-banner-content {
  flex-grow: 1;
  min-width: 0;
}

.glass-banner-title {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  margin-bottom: 2px;
}

.glass-banner-text {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 深色模式适配 */
.phone-frame.dark-mode .glass-banner {
  background: rgba(40, 40, 40, 0.75);
  border-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.dark-mode .glass-banner-title {
  color: #fff;
}

.phone-frame.dark-mode .glass-banner-text {
  color: #ddd;
}

/* === 主动消息界面专属修复 === */
#proactive-settings-screen .settings-content {
  /* 1. 强制占满高度，预留顶栏空间 */
  height: 100% !important;
  padding-top: 100px !important;
  /* 增加顶部留白，不顶头 */
  padding-bottom: 40px !important;
  padding-left: 16px !important;
  /* 左右留白，解决贴边问题 */
  padding-right: 16px !important;
  box-sizing: border-box !important;

  /* 2. 核心：开启垂直滚动 */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  /* iOS顺滑滚动 */

  /* 3. 布局调整 */
  display: block !important;
  background-color: #f2f2f7;
  /* 统一背景色 */
}

/* 列表项美化：大头像、大间距 */
.proactive-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  /* 增加内边距 */
  border-bottom: 1px solid #e5e5ea;
  background-color: #fff;
  transition: background-color 0.2s;
}

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

.proactive-item:active {
  background-color: #f5f5f5;
}

.proactive-item img {
  width: 48px;
  /* 头像加大 */
  height: 48px;
  border-radius: 10px;
  /* 更现代的圆角 */
  margin-right: 16px;
  object-fit: cover;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
}

.proactive-item label {
  flex-grow: 1;
  font-size: 17px;
  /* 字号加大，更清晰 */
  color: #1c1c1e;
  font-weight: 500;
}

/* 复选框美化 */
.proactive-checkbox {
  width: 24px;
  height: 24px;
  accent-color: #007aff;
  cursor: pointer;
}

/* proactive-settings-screen 作为二级页面，层级高于 settings-screen */
#proactive-settings-screen.opened {
  z-index: var(--z-screen-secondary);
}

/* ios-settings-screen 作为二级页面，层级高于 settings-screen */
#ios-settings-screen.opened {
  z-index: var(--z-screen-secondary);
}

/* ========================================
   iOS Tuner 重新设计 - 参考 iosnative.html
   ======================================== */

.ios-tuner-redesign {
  background-color: #F2F2F7 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  color: #1C1C1E;
  position: relative;
  overflow: hidden;
}

/* 背景点阵图案 */
.ios-tuner-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#d1d1d6 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

/* 顶部导航栏 */
.ios-tuner-nav {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 16px 16px 16px;
  box-sizing: border-box;
}

.ios-tuner-nav-title {
  font-size: 15px;
  font-weight: 600;
  color: #1C1C1E;
}

/* 返回按钮 - 纯箭头无背景 */
.ios-tuner-back-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: -10px;
  transition: opacity 0.2s;
}

.ios-tuner-back-btn:active {
  opacity: 0.5;
}

.ios-tuner-back-btn svg {
  width: 24px;
  height: 24px;
  color: #007AFF;
}

/* 主容器 */
.ios-tuner-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 20px 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  height: calc(100% - 90px);
  -webkit-overflow-scrolling: touch;
}

/* 预览卡片 */
.ios-tuner-preview-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

/* 模拟手机 */
.ios-tuner-mockup-phone {
  width: 130px;
  height: 200px;
  border: 4px solid #333;
  border-radius: 20px;
  position: relative;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ios-tuner-mockup-content {
  flex: 1;
  background: #f5f5f5;
  margin: 4px;
  border-radius: 14px 14px 0 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 6px;
}

.ios-tuner-skeleton-line {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
}

.ios-tuner-skeleton-line.w-80 { width: 80%; }
.ios-tuner-skeleton-line.w-60 { width: 60%; }
.ios-tuner-skeleton-line.w-40 { width: 40%; }

/* 安全区指示器 */
.ios-tuner-safe-area {
  background: rgba(255, 59, 48, 0.15);
  border-top: 1px dashed #FF3B30;
  height: 20px;
  width: 100%;
  transition: height 0.1s linear;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ios-tuner-safe-area::after {
  content: "Safe Area";
  font-size: 8px;
  color: #FF3B30;
  font-weight: 700;
}

/* 控制卡片 */
.ios-tuner-control-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.ios-tuner-control-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}

.ios-tuner-label-group h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #8E8E93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ios-tuner-label-group p {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #AEAEB2;
  font-weight: 400;
}

/* 数值徽章 */
.ios-tuner-value-badge {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 20px;
  font-weight: 700;
  color: #1C1C1E;
  background: #F2F2F7;
  padding: 6px 14px;
  border-radius: 10px;
  min-width: 80px;
  text-align: center;
  transition: color 0.2s, background 0.2s;
}

/* 滑块容器 */
.ios-tuner-slider-wrapper {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
}

.ios-tuner-slider-fill {
  position: absolute;
  left: 0;
  top: 19px;
  height: 6px;
  background: #8E8E93;
  border-radius: 3px;
  pointer-events: none;
  width: 50%;
  z-index: 1;
  transition: background 0.2s;
}

/* 滑块输入 */
.ios-tuner-slider-wrapper input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  z-index: 2;
  position: relative;
}

.ios-tuner-slider-wrapper input[type=range]:focus {
  outline: none;
}

.ios-tuner-slider-wrapper input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: #E5E5EA;
  border-radius: 3px;
}

.ios-tuner-slider-wrapper input[type=range]::-webkit-slider-thumb {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  margin-top: -11px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
  transition: transform 0.1s ease;
}

.ios-tuner-slider-wrapper input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.1);
}

/* 滑块标签 */
.ios-tuner-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #8E8E93;
  font-weight: 500;
}

/* 信息卡片 */
.ios-tuner-info-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ios-tuner-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #F4F4F5;
  border:1px solid rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ios-tuner-info-icon svg {
  color: #8e8e93;
}

.ios-tuner-info-content {
  flex: 1;
}

.ios-tuner-info-content p {
  margin: 0 0 10px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #3C3C43;
}

.ios-tuner-info-content strong {
  color: #1C1C1E;
  font-weight: 600;
}

.ios-tuner-info-content ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #8E8E93;
  line-height: 1.8;
}

.ios-tuner-info-content li {
  margin-bottom: 2px;
}

.ios-tuner-highlight {
  color: #007AFF;
  font-weight: 600;
}

/* 重置按钮 */
.ios-tuner-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: #1C1C1E;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.1s, opacity 0.2s;
}

.ios-tuner-reset-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.ios-tuner-reset-btn svg {
  flex-shrink: 0;
}

/* === 新增：动态电池组件样式 === */

/* 1. 容器 */
.battery-container {
  position: relative;
  width: 30px;
  /* 恢复正常尺寸，不再放大 */
  height: 12px;
  margin-left: -3px;
  /* 给左边的WiFi图标留点空隙 */
  /* 垂直居中微调，如果看起来偏上或偏下，可以调整这个值 */
  top: 0px;
}

/* 2. 外壳与电量 */
.battery-shell-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 默认颜色 (浅色模式下为黑色) */
.shell-stroke {
  stroke: #000000;
  transition: stroke 0.3s;
}

.shell-fill {
  fill: #000000;
  transition: fill 0.3s;
}

#battery-level {
  fill: #000000;
  transition: width 0.3s ease-out, fill 0.3s;
}

/* 3. 闪电图标 */
.battery-bolt-svg {
  position: absolute;
  top: 50%;
  left: 46%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 14px;
  z-index: 2;
  display: none;
  /* 默认不显示 */
}

/* 闪电默认样式 */
.bolt-path {
  fill: #000000;
  stroke: transparent;
  stroke-width: 1.3;
}

/* === 状态变化逻辑 === */

/* 充电中：电量变绿，闪电变黑芯白边 */
.battery-container.charging #battery-level {
  fill: #00d26a !important;
}

.battery-container.charging .bolt-path {
  fill: #000000 !important;
  stroke: #ffffff !important;
}

/* 低电量：变红 */
.battery-container.low #battery-level {
  fill: #ff3b30 !important;
}

/* === 深色模式适配 (适配 .phone-frame.dark-mode) === */

/* 外壳变白 */
.phone-frame.dark-mode .shell-stroke {
  stroke: #ffffff;
  opacity: 0.8;
}

.phone-frame.dark-mode .shell-fill {
  fill: #ffffff;
  opacity: 0.8;
}

/* 电量条变白 (非充电/非低电量时) */
.phone-frame.dark-mode #battery-level {
  fill: #ffffff;
}

/* 注意：充电时因为加了 !important，绿色会覆盖上面的白色，这正是我们想要的 */

/* === 哇呜 (Wow) APP 专属样式 === */

/* 1. 基础容器与背景 */
#wow-screen {
  /* 覆盖默认的白色背景，改为透明以便显示极光 */
  background: #eef2f5 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  color: #2d3436;
  overflow: hidden;
}

/* 极光背景动画 */
#wow-screen .wow-ambient-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#wow-screen .wow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  animation: wow-float 10s infinite alternate ease-in-out;
}

#wow-screen .wow-blob-1 {
  top: -10%;
  left: -10%;
  width: 250px;
  height: 250px;
  background: #a29bfe;
}

#wow-screen .wow-blob-2 {
  bottom: 10%;
  right: -10%;
  width: 200px;
  height: 200px;
  background: #74b9ff;
  animation-delay: -5s;
}

#wow-screen .wow-blob-3 {
  top: 40%;
  left: 30%;
  width: 150px;
  height: 150px;
  background: #fab1a0;
  opacity: 0.4;
  animation-delay: -2s;
}

@keyframes wow-float {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(20px, -20px) scale(1.1);
  }
}

/* 2. 主容器 */
#wow-screen .wow-container {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 3. 玻璃顶栏 */
/* === 修复：顶栏布局 (下移避开刘海) === */
#wow-screen .wow-header {
  /* 1. 增加顶部内边距，把内容顶下来 */
  padding-top: 50px !important;

  /* 2. 高度改为自动，或者设大一点 */
  height: auto !important;
  min-height: 50px !important;
  padding-bottom: 10px !important;

  /* 3. 左右边距 */
  padding-left: 15px;
  padding-right: 15px;

  /* 4. 保持布局 */
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* 5. 玻璃效果保持不变 */
  position: sticky;
  top: 0;
  z-index: 100;

  /* 6. 确保盒子模型正确，防止撑破 */
  box-sizing: border-box;
}

#wow-screen .wow-logo {
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, #2d3436 0%, #636e72 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#wow-screen .wow-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

#wow-screen .wow-icon-btn {
  background: none;
  border: none;
  padding: 5px;
  color: #2d3436;
  cursor: pointer;
}

/* 4. 核心组件：Wow Glass Card (玻璃卡片) */
#wow-screen .wow-glass-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.4) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);

  position: relative;
}

/* 5. 发布框特定样式 */
#wow-screen .wow-create-box {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 15px;
  margin-top: 10px;
}

#wow-screen .wow-input-wrapper {
  flex: 1;
}

#wow-screen .wow-glass-input {
  width: 100%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: inset 2px 2px 5px rgba(166, 171, 189, 0.1);
}

#wow-screen .wow-glass-btn-small {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(9, 132, 227, 0.3);
}

/* 6. 内容滚动区 */
#wow-screen .wow-content-area {
  flex: 1;
  overflow-y: auto;
  padding: 10px 15px;
  scroll-behavior: smooth;
}

#wow-screen .wow-page {
  display: none;
}

#wow-screen .wow-page.active {
  display: block;
  animation: wow-fade-in 0.3s ease;
}

@keyframes wow-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 7. 帖子内容样式 */
#wow-screen .wow-post-header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

#wow-screen .wow-post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #fff;
}

#wow-screen .wow-post-name {
  font-weight: 700;
  font-size: 15px;
  color: #2d3436;
}

#wow-screen .wow-post-time {
  font-size: 11px;
  color: #888;
}

#wow-screen .wow-post-text {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 10px;
}

#wow-screen .wow-comment-section {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 10px;
  margin-top: 10px;
}

#wow-screen .wow-comment-item {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

#wow-screen .wow-comment-user {
  font-weight: 600;
  color: #0984e3;
  flex-shrink: 0;
}

#wow-screen .wow-comment-text {
  color: #555;
}

/* 8. 底部悬浮 Dock */
#wow-screen .wow-dock-container {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

#wow-screen .wow-glass-dock {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  padding: 5px 20px;
  border-radius: 30px;
  display: flex;
  gap: 30px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

#wow-screen .wow-nav-btn {
  background: none;
  border: none;
  color: #b2bec3;
  padding: 10px;
  transition: all 0.2s;
}

#wow-screen .wow-nav-btn.active {
  color: #0984e3;
  transform: scale(1.1);
}

/* 9. 身份选择强制弹窗 */
#wow-screen .wow-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  z-index: 200;
  display: none;
  justify-content: center;
  align-items: center;
}

#wow-screen .wow-modal-card {
  background: white;
  width: 80%;
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
}

#wow-screen .wow-identity-list {
  margin-top: 20px;
  max-height: 300px;
  overflow-y: auto;
}

#wow-screen .wow-identity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

#wow-screen .wow-identity-item:hover {
  background: #f5f5f5;
  border-radius: 10px;
}

#wow-screen .wow-identity-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* 10. 深色模式适配 */
.phone-frame.dark-mode #wow-screen {
  background: #2c2c2e !important;
}

.phone-frame.dark-mode #wow-screen .wow-glass-card {
  background: linear-gradient(
    135deg,
    rgba(50, 50, 50, 0.7) 0%,
    rgba(30, 30, 30, 0.4) 100%
  );
  border-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.dark-mode #wow-screen .wow-post-name,
.phone-frame.dark-mode #wow-screen .wow-post-text {
  color: #eee;
}

.phone-frame.dark-mode #wow-screen .wow-header {
  background: rgba(0, 0, 0, 0.3);
}

/* 控制 Wow APP 的显示与隐藏 */
#wow-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  /* 默认在下层 */
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: scale(0.95);
  /* 初始微缩 */
}

.phone-frame.show-wow #home-screen {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.phone-frame.show-wow #wow-screen {
  opacity: 1;
  pointer-events: auto;
  z-index: 100;
  transform: scale(1);
  /* 放大显示 */
}

/* === 哇呜 (Wow) APP 补全样式 === */

/* 1. 发布弹窗 (Compose Modal) */
.wow-compose-modal {
  display: none;
  /* 默认隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  /* 浅灰背景 */
  z-index: 9999;
  flex-direction: column;
}

.wow-compose-modal.active {
  display: flex;
}

.wow-compose-header {
  display: flex;
  justify-content: space-between;
  padding: 50px 20px 20px 20px;
  align-items: center;
}

.wow-compose-textarea {
  flex: 1;
  border: none;
  padding: 20px;
  font-size: 16px;
  background: transparent;
  outline: none;
  resize: none;
  font-family: inherit;
}

.wow-publish-btn {
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  color: white;
  border: none;
  padding: 6px 20px;
  border-radius: 20px;
  font-weight: 600;
}

/* 2. 详情页 (Detail View) - 核心部分 */
.wow-detail-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(240, 244, 248, 0.98);
  backdrop-filter: blur(20px);
  z-index: 150;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wow-detail-view.show {
  transform: translateX(0);
}

.wow-detail-nav {
  padding-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 15px;
  padding-right: 15px;
}

.wow-detail-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  padding-bottom: 100px;
}

.wow-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.05);
  margin: 20px 0;
}

/* 底部评论输入框 */
.wow-detail-input-area {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 15px 30px 15px;
  /* 适配底部安全区 */
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 10px;
  align-items: center;
}

.wow-main-input {
  flex: 1;
  height: 38px;
  border-radius: 19px;
  border: 1px solid #ddd;
  padding: 0 15px;
  background: #f9f9f9;
  outline: none;
}

.wow-send-btn {
  color: #0984e3;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}

/* 3. 评论样式 (复刻源文件) */
.wow-comment-node {
  margin-bottom: 20px;
}

.wow-comment-main {
  display: flex;
  gap: 10px;
}

.wow-comment-bubble {
  background: rgba(255, 255, 255, 0.7);
  padding: 10px 14px;
  border-radius: 4px 16px 16px 16px;
  min-width: 60%;
  display: inline-block;
}

.wow-comment-author {
  font-weight: 700;
  font-size: 13px;
  color: #444;
}

.wow-comment-text {
  font-size: 14px;
  color: #2d3436;
  margin-top: 2px;
}

.wow-comment-actions {
  margin-top: 6px;
  font-size: 12px;
  color: #888;
  display: flex;
  gap: 15px;
}

.wow-reply-btn {
  color: #0984e3;
  font-weight: 600;
  cursor: pointer;
}

/* 楼中楼 (Sub-comments) */
.wow-sub-comments {
  margin-left: 46px;
  margin-top: 8px;
  border-left: 2px solid rgba(0, 0, 0, 0.05);
  padding-left: 10px;
}

.wow-sub-item {
  margin-bottom: 8px;
  font-size: 13px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 8px;
}

.wow-reply-arrow {
  color: #999;
  margin: 0 4px;
  font-size: 10px;
}

/* 4. 个人中心样式 */
.wow-profile-header {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.wow-profile-avatar-large {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.wow-stats-row {
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding: 10px 0;
}

.wow-stat-num {
  font-weight: 800;
  font-size: 18px;
}

.wow-stat-label {
  font-size: 12px;
  color: #888;
}

/* 5. 消息页样式 */
.wow-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.wow-notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  font-size: 16px;
}

.icon-like {
  background: linear-gradient(135deg, #ff7675, #d63031);
}

.icon-comment {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
}

.wow-notif-content {
  flex: 1;
  font-size: 14px;
}

.wow-notif-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* 6. 发布条样式 (首页) */
.wow-compose-trigger {
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  padding: 15px;
}

.wow-fake-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.4);
  padding: 10px 15px;
  border-radius: 20px;
  color: #999;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 7. 帖子卡片内部微调 */
.wow-action-bar {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 10px;
}

.wow-action-btn {
  color: #636e72;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  cursor: pointer;
}

.wow-user-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.wow-user-info h4 {
  font-size: 15px;
  font-weight: 700;
  color: #2d3436;
  margin: 0;
}

.wow-user-info span {
  font-size: 12px;
  color: #636e72;
}

/* 8. 深色模式适配 */
.phone-frame.dark-mode .wow-detail-view {
  background: #2c2c2e;
}

.phone-frame.dark-mode .wow-detail-nav {
  background: #1c1c1e;
  border-bottom-color: #3a3a3c;
  color: #fff;
}

.phone-frame.dark-mode .wow-detail-input-area {
  background: #1c1c1e;
  border-top-color: #3a3a3c;
}

.phone-frame.dark-mode .wow-main-input {
  background: #3a3a3c;
  border-color: #48484a;
  color: #fff;
}

.phone-frame.dark-mode .wow-compose-modal {
  background: #1c1c1e;
  color: #fff;
}

.phone-frame.dark-mode .wow-compose-textarea {
  color: #fff;
}

.phone-frame.dark-mode .wow-comment-bubble {
  background: #3a3a3c;
  color: #fff;
}

.phone-frame.dark-mode .wow-comment-author {
  color: #ccc;
}

.phone-frame.dark-mode .wow-comment-text {
  color: #eee;
}

.phone-frame.dark-mode .wow-sub-item {
  background: #3a3a3c;
}

.phone-frame.dark-mode .wow-notif-content {
  color: #eee;
}

.phone-frame.dark-mode .wow-user-info h4 {
  color: #fff;
}

.wow-notification-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-200px);
  /* 默认隐藏在顶部 */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 12px 20px;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(255, 255, 255, 0.8);
  pointer-events: auto !important;
  cursor: pointer;
  /* 鼠标手势 */
}

.wow-notification-toast.show {
  transform: translateX(-50%) translateY(0);
}

.wow-notif-text {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* === 哇呜 APP 专属头像修复 === */
#wow-screen .wow-user-meta .avatar,
/* 帖子作者头像 */
#wow-screen .wow-comment-main .avatar

/* 评论区路人头像 */ {
  border-radius: 25px !important;
  /* 强制圆角 25px */
  width: 44px !important;
  /* 稍微加大一点尺寸以适配圆角 */
  height: 44px !important;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* 加个淡淡的白边增加质感 */
}

/* 保持顶栏主角头像为圆形 (如果你想主角也是25px，把下面这段删掉) */
#wow-screen .wow-header-avatar {
  border-radius: 50% !important;
}

/* === 修复：发布页取消按钮美化 === */
#wow-compose-cancel-btn {
  background: transparent !important;
  /* 去掉灰色背景 */
  border: none !important;
  /* 去掉边框 */
  color: #8e8e93 !important;
  /* iOS 标准次级灰色 */
  font-size: 16px !important;
  font-weight: 400 !important;
  padding: 8px 12px !important;
  /* 增加点击区域 */
  cursor: pointer;
  transition: opacity 0.2s;
}

#wow-compose-cancel-btn:active {
  opacity: 0.5;
  /* 点击时的反馈 */
}

/* 顺便优化一下发布按钮，让它和取消按钮对齐 */
.wow-publish-btn {
  box-shadow: 0 4px 10px rgba(9, 132, 227, 0.3);
  /* 加点投影更立体 */
}

/* === 修复：评论输入栏布局 === */
.wow-detail-input-area {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  /* 核心布局 */
  display: flex;
  align-items: center;
  gap: 10px;
  /* 输入框和按钮的间距 */

  padding: 10px 15px 30px 15px;
  /* 底部留出安全距离 */
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  /* 确保 padding 不会撑破宽度 */
  z-index: 200;
}

/* 输入框：自动占据剩余空间 */
.wow-main-input {
  flex: 1;
  /* 关键：占满剩余宽度 */
  min-width: 0;
  /* 防止被长内容撑大 */
  height: 36px;
  border-radius: 18px;
  border: 1px solid #ddd;
  padding: 0 15px;
  background: #f9f9f9;
  outline: none;
  font-size: 14px;
}

/* 发送按钮：防止被压缩 */
.wow-send-btn {
  flex-shrink: 0;
  /* 关键：禁止被挤压 */
  color: #0984e3;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  /* 关键：防止文字换行 */
}

/* === 评论加载动画 === */
.wow-comment-node {
  /* 初始状态：透明且稍微向下偏移 */
  opacity: 0;
  transform: translateY(20px);

  /* 定义动画：名称 时长 曲线 保持结束状态 */
  animation: commentSlideUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
    forwards;
}

/* 定义关键帧 */
@keyframes commentSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.wow-action-bar {
  display: grid;
  /* 变成网格布局 */
  grid-template-columns: repeat(4, 1fr);
  /* 强制分成4等份 */
  justify-items: center;
  /* 图标水平居中 */
  align-items: center;
  /* 垂直居中 */
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 10px;
}

/* 顺便优化一下按钮样式，让它填满格子 */
.wow-action-btn {
  color: #636e72;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 居中 */
  gap: 6px;
  padding: 5px;
  cursor: pointer;
  width: 100%;
  /* 占满格子 */
}

.wow-nav-btn.active {
  color: #007aff;
  /* 变成蓝色 */
  transform: none;
  /* 【关键】去掉放大效果 */
}

/* 新增：强制让选中状态下的 SVG 描边变蓝 */
.wow-nav-btn.active svg path,
.wow-nav-btn.active svg circle,
.wow-nav-btn.active svg rect {
  stroke: #007aff !important;
  fill: #007aff !important;
  /* 如果图标是填充型的，加这行 */
}

/* 发布按钮扩散动画层 */
#wow-publish-ripple {
  position: fixed;
  bottom: 40px;
  /* 从底栏大概位置开始 */
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  /* 扩散出的背景色 */
  border-radius: 50%;
  transform: translate(-50%, 0) scale(0);
  /* 初始不可见 */
  z-index: 9999;
  /* 最顶层 */
  pointer-events: none;
}

/* 激活动画 */
#wow-publish-ripple.animating {
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translate(-50%, -50%) scale(100);
  /* 放大到铺满屏幕 */
}

/* 1. 卡片本体：减小内边距和外边距 */
.wow-glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  /* 圆角稍微改小一点点 */
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

  /* ▼▼▼ 修改这里 ▼▼▼ */
  padding: 10px 12px;
  /* 上下10px，左右12px (原来可能是 15px) */
  margin-bottom: 10px;
  /* 卡片之间的距离也拉近点 */
  /* ▲▲▲ 修改结束 ▲▲▲ */
}

/* 2. 名字和时间 */
.wow-user-info h4 {
  margin: 0;
  font-size: 13px;
  /* 原来可能是 14-15px */
  color: #333;
}

.wow-user-info span {
  font-size: 10px;
  /* 时间改小 */
  color: #999;
}

/* 3. 帖子正文 */
.post-text {
  font-size: 13px;
  /* 正文改小 (原来可能是 15px) */
  line-height: 1.5;
  /* 行高稍微紧凑点 */
  color: #444;
  margin: 6px 0 10px 0;
  /* 减少文字和图片的距离 */
}

/* 4. 底部按钮栏文字 */
.wow-action-btn {
  font-size: 11px;
  /* 底部数字改小 */
  /* 图标如果太大，可以用下面这行整体缩小 */
  /* transform: scale(0.9); */
}

/* 强行把所有卡片底部的 SVG 图标缩小 */
.wow-action-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* 如果你的SVG是线条风格(stroke)而不是填充风格(fill)，请用下面这段：
#narration-toggle-feature svg path {
    stroke: #9C27B0 !important;
    fill: none !important;
} 
*/
body.hide-narration-mode .action-message-text {
  display: none !important;
}

/* (可选) 为了让过渡更自然，可以加个淡出动画，不加也可以 */
.action-message-text {
  transition: opacity 0.3s;
}

/* ========================================================== */
/* === 旁白模式控制：彻底移除占位 === */
/* ========================================================== */

/* 当 body 加上了 hide-narration-mode 类时 */
/* 找到 .action-message-text 这个元素，直接让它消失，不占任何空间 */
/* ========================================================== */
/* === 旁白模式控制：连根拔起版 === */
/* ========================================================== */

/* 找到所有带有 action-row 标记的消息行，直接整行消失 */
body.hide-narration-mode .message-row.action-row {
  display: none !important;
}

/* 为了保险，如果有的结构不一样，我们也把容器层隐藏掉 */
body.hide-narration-mode .action-message-container {
  display: none !important;
}

/* === 💉 修复：防止顶部语录/时钟遮挡第一排 APP === */

/* 1. 让顶部容器“透传”点击 */
/* 这一步最关键！它告诉浏览器：这一大块区域是透明的，鼠标点击时直接穿过去，不要拦着！ */
.header-content {
  pointer-events: none !important;
  position: relative;
  z-index: 10;
}

/* 2. 只恢复“时钟”和“语录”这两个小东西的点击 */
/* 这样你依然可以点时钟改颜色，点语录写字，但它们旁边的空地不会挡住APP */
.clock,
.motto-container {
  pointer-events: auto !important;
}

/* 3. 限制语录容器的高度，防止它无限膨胀 */
/* 这就是导致“弹出输入历史”的真凶，限制它的高度，它就老实了 */
.motto-container {
  max-height: 50px;
  /* 限制最大高度 */
  overflow: visible;
  /* 允许内容显示 */
  margin-bottom: 20px;
  /* 保持间距 */
  display: flex;
  /* 确保布局紧凑 */
  justify-content: center;
  align-items: center;
}

/* 4. 提升第一排 APP 的层级 */
/* 强行让 APP 浮在所有“隐形边框”的上面，确保怎么点都能点到 */
.app-grid {
  position: relative;
  z-index: 20 !important;
  /* 比 header-content 高 */
}

/* 5. 顺手修复那个拼写错误的 padding (7cap -> 0) */
.content {
  /* 原代码写错成了 7cap，导致浏览器解析异常，可能造成布局错位 */
  padding: 70px 0 0 0 !important;
}

.monologueToggle {
  /* 1. 【核心】让宽度适应内容，不再霸占整行 */
  width: fit-content !important;

  /* 3. 如果是 Flex 布局里的子元素，防止被拉伸 */
  align-self: flex-start;
  /* 如果靠左 */
  /* align-self: flex-end;    <-- 如果是靠右的消息，可能需要这个 */

  /* 4. 稍微减少一点内边距，让它看起来更精致 */
  padding: 4px 8px;
  /* 上下4px，左右8px */
}

#device-skin {
  position: absolute;

  /* 1. 把它定到屏幕的正中心 */
  top: 50%;
  left: 50%;

  /* 2. 利用位移修正，让中心点对齐 */
  transform: translate(-50%, -50%);

  /* 3. 尺寸控制：默认宽400高720，可通过JS调整 */
  width: 400px;
  height: 720px;
  /* 高度自动，保持比例，防止变形 */

  /* 4. 确保它在最上面，且不挡手 */
  z-index: 9999;
  pointer-events: none;

  /* 5. 确保显示 */
  display: block;
}

div[id$="-screen"] {
  overflow: hidden;
  /* 内容溢出裁剪 */
  /* 保持圆角 */
  /* 确保它们依然占满 375x700 的空间 */
  width: 100%;
  height: 100%;
}

.content-mask {
  /* 1. 占满整个手机框的空间 */
  width: 100%;
  height: 100%;

  /* 2. 关键：它是新的裁剪者 */

  /* 必须和你手机框的圆角一致 */
  overflow: hidden;
  border-radius: 40px;
  /* 溢出隐藏，切掉直角！ */

  /* 3. 保持定位基准，防止里面的绝对定位元素乱跑 */
  position: relative;

  /* 4. 修复 Safari 上的圆角 bug */
  transform: translateZ(0);
}

/* 所有 App 界面的通用样式 */
.app-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  /* 你的 App 背景颜色 */
  z-index: 100;

  /* 关键 1：初始状态彻底隐藏 */
  visibility: hidden;
  opacity: 0;
  transform: scale(0.85);

  /* 关键 2：定义动画效果 (0.45秒回弹) */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease, visibility 0.3s;

  will-change: transform, opacity;
}

/* 关键 3：当 JS 加入 .active 类时触发的状态 */
.app-screen.active {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

/* --- 新增样式：名字+气泡的垂直容器 --- */
/* ========================================= */
/* 1. 基础布局容器 (Row & Column)            */
/* ========================================= */

/* 消息行：确保头像顶对齐 */
.message-row {
  align-items: flex-start !important;
  margin-bottom: 8px;
  /* 消息间距 */
}

/* 头像容器：只负责装图片 */
.chat-avatar-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 5px;
  /* 微调：跟名字对齐 */
  flex-shrink: 0;
  /* 防止头像被压扁 */
}

/* 消息列容器：包含【名字】+【气泡】的垂直容器 */
.msg-column {
  display: flex;
  flex-direction: column;
  /* 关键修复：收缩到内容大小，而不是占满 85% */
  width: fit-content;
  max-width: 85%;
  min-width: 0;
  flex-shrink: 1;
  justify-content: center;
}

/* ========================================= */
/* 2. 气泡与包裹层 (Wrapper & Bubble)        */
/* ========================================= */

/* 气泡外壳：自适应文字宽度 */
.group-message-wrapper,
.message-content-wrapper {
  width: fit-content;
  /* 关键：文字少就窄，文字多就宽 */
  max-width: 100%;
  /* 不超过 msg-column 的限制 */
  box-sizing: border-box;
}

/* 群聊气泡本体设置 */
.gp-bubble {
  white-space: pre-wrap;
  /* 保留换行 */
  word-break: break-word;
  /* 长单词换行 */
  min-height: 20px;
  /* 最小高度 */
  /* 注意：max-width 交给父级 wrapper 控制，这里设 100% 即可 */
  max-width: 85%;
}

/* ========================================= */
/* 3. 昵称样式 (Nickname)                    */
/* ========================================= */
.group-nickname {
  font-size: 11px;
  color: #999;
  margin-bottom: 4px;
  /* 名字和气泡的间距 */
  padding: 0 2px;
  /* 左右稍微留点空隙 */
  line-height: 1.2;
}

/* ========================================= */
/* 4. 左右对齐逻辑 (Left / Right)            */
/* ========================================= */

/* --- 左侧 (AI/群友) --- */
.message-row .msg-column {
  align-items: flex-start;
  /* 靠左 */
  margin-left: 6px;
  /* 离头像的距离 */
}

.message-row .group-nickname {
  text-align: left;
}

/* --- 右侧 (User/我) --- */
.message-row.is-user {
  justify-content: flex-end !important;
  /* 整行靠右 */
}

.message-row.is-user .msg-column {
  align-items: flex-end;
  /* 靠右 */
  margin-right: 6px;
  /* 离头像的距离 */
  margin-left: 0;
  /* 清除左边距 */
}

.message-row.is-user .group-nickname {
  text-align: right;
}

/* 强制重置 User 气泡的边距，防止样式干扰 */
.message-row.is-user .group-message-wrapper {
  margin: 0 !important;
  align-items: flex-end;
  /* 气泡靠右 */
}

/* ========================================= */
/* 5. 样式净化防火墙 (Style Purifier)        */
/* 核心作用：去掉默认的气泡样式，允许JS注入颜色 */
/* ========================================= */

.group-message-wrapper .chat-bubble,
.group-message-wrapper .gp-bubble {
  /* 1. 扒掉默认的渐变背景和阴影 */
  background-image: none !important;
  background: none !important;
  /* 确保背景色透明，等待 JS 注入 background-color */
  box-shadow: none !important;
  border: none !important;
  font-size: 14px !important;
}

/* ========================================================== */
/* === 6. 气泡宽度终极修复 (Fix Width Conflict) === */
/* ========================================================== */

/* 1. 强制解除旧代码的 60% 封印 */
/* 现在的宽度由 .msg-column (85%) 统一控制，气泡内部只要填满即可 */

.group-message-wrapper .chat-bubble,
.group-message-wrapper .gp-bubble {
  max-width: 100% !important;
  /* 关键！允许气泡占满 msg-column 给的空间 */
  min-width: auto !important;
  /* 解除奇怪的最小宽度限制 */
  width: fit-content !important;
  /* 关键！让气泡根据文字内容自适应宽度 */

  /* 修复对齐问题 */
  text-align: left !important;
  /* 不要用 justify，会导致短句子字间距极其难看 */
  text-justify: auto !important;

  /* 确保换行逻辑正确 */
  white-space: pre-wrap !important;
  /* 保留手动换行 */
  word-break: break-word !important;
  /* 英文单词太长时才切断 */
  word-wrap: break-word !important;
  /* 兼容旧浏览器 */
  box-sizing: border-box !important;
}
.gp-bubble,
.chat-bubble {
  min-width: auto !important;
  width: fit-content !important;
  text-align: left !important;
  text-justify: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  word-wrap: break-word !important;
}

/* 2. 确保群聊外壳也是自适应的 */
.group-message-wrapper {
  max-width: 100% !important;
  width: fit-content !important;
}

/* 3. 确保列容器拥有最高控制权 */
.msg-column {
  max-width: 60% !important;
  /* 这里才是真正的屏幕宽度限制 */
}

.message-content-wrapper.user {
  max-width: 80% !important;
}

.message-content-wrapper.ai {
  max-width: 80% !important;
}

/* 整个对话框外壳 */
/* 1. 对话框外壳 - 优化通透度与内陷感 */
.modal-content {
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.7);
  /* 提高白度，解决灰蒙蒙的感觉 */
  backdrop-filter: blur(25px) saturate(160%);
  /* 增加饱和度，让背景更清澈 */
  -webkit-backdrop-filter: blur(25px) saturate(160%);

  /* 核心边框：纯白亮边 */
  border: 0.4px solid rgba(255, 255, 255, 0.8);

  /* 组合阴影：外发散阴影 + 关键内凹陷阴影 */
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1),
    /* 外层环境阴影 */ 0px 2px 4px rgba(0, 0, 0, 0.05),
    /* 底部微小投影 */ inset 1px 1px 10px rgba(0, 0, 0, 0.03),
    /* 顶部内压痕：产生深邃感 */ inset -1px -1px 5px rgba(255, 255, 255, 0.5);
  /* 底部内高光：产生物理厚度 */

  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 2. 头部区域 */
.modal-header {
  position: relative !important;
  height: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-bottom: 0.4px solid rgba(0, 0, 0, 0.05);
  /* 极淡的分割线 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-header h2 {
  color: #1c1c1e;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* 3. 关闭按钮 - 保持极简玻璃感 */
.modal-close-button {
  position: absolute !important;
  right: 16px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.03) !important;
  /* 微暗的圆圈 */
  border: none !important;
  border-radius: 50%;
  color: #8e8e93 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
  cursor: pointer;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.05);
}

/* 4. 输入区域 - 增强“雕刻”感 */

.form-input:focus,
.form-textarea:focus {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 122, 255, 0.4);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.04),
    0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* 5. 底部与保存按钮 - 解决突兀感 */
.modal-footer {
  text-align: center;
}

.save-button {
  padding: 10px 32px;
  font-size: 15px;
  font-weight: 600;
  /* 改为“高级蓝玻璃”：半透明蓝 + 强亮边 */
  color: #007aff;
  background: rgba(0, 122, 255, 0.08);
  border: 0.4px solid rgba(0, 122, 255, 0.3);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  /* 移除重阴影，改用发光感 */
  box-shadow: 0px 4px 12px rgba(0, 122, 255, 0.1);
}

.save-button:hover {
  background: rgba(0, 122, 255, 0.15);
  box-shadow: 0px 6px 16px rgba(0, 122, 255, 0.2);
  transform: translateY(-1px);
}

.save-button:active {
  background: rgba(0, 122, 255, 0.2);
  transform: translateY(0.5px);
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.1);
}

/* 6. 其他细节辅助类 */
.modal-body {
  padding: 20px 16px;
  background: transparent;
}

.form-group-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.form-group-inline input {
  width: 60px;
  text-align: center;
}

/* 2. 统一输入框容器布局 */
.form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 核心：确保子元素（label和input）在容器内水平居中 */
  gap: 8px;
  margin-bottom: 16px;
}

/* 3. 标签对齐：宽度与输入框保持一致 */
.form-group label {
  /* width: 90%; */
  /* 与下方 input 宽度保持一致 */
  text-align: left;
  font-size: 14px;
  color: #333;
}

/* 4. 输入控件：修正溢出与居中 */


/* 5. 特殊处理：内联输入框（例如上下文记忆数字框） */
/* 不要把它和上面的大输入框写在一起，因为它的宽度通常很小 */
.form-group-inline {
  width: 90%;
  /* 这一行整体占 90%，确保左右对齐线一致 */
  display: flex;
  justify-content: space-between;
  /* 文本在左，数字框在右 */
  align-items: center;
  margin: 0 auto 16px auto;
  /* 自身居中 */
}

.form-group-inline input {
  width: 60px !important;
  /* 数字框不需要 80% 或 90% */
  text-align: center;
  /* 继承玻璃质感 */
  background: rgba(255, 255, 255, 0.4);
  border: 0.4px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 5px;
}

/* --- 编辑模式专用样式 --- */

/* 1. 父容器在编辑时“隐身”，防止出现双重气泡背景 */
.chat-bubble.editing-mode-active,
.gp-user-bubble.editing-mode-active,
.gp-ai-bubble.editing-mode-active {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  /* 让 textarea 撑满 */
  min-height: auto !important;
}

/* 2. 编辑框的基础样式 */
textarea.editing-bubble {
  display: block;
  box-sizing: border-box;
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: 10px 14px;
  /* 这里要模拟原气泡的 padding */
  border-radius: 10px;
  /* 模拟圆角 */
  overflow: hidden;
  margin: 0;
}

/* ========================================= */
/* === Group Chat Bubble Styling === */
/* ========================================= */
.gp-ai-bubble,
.gp-user-bubble {
  padding: 8px 12px;
  border-radius: 18px;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 1.5;
  word-wrap: break-word;
  font-size: 14px;
  min-width: 20px;
  /* 性能优化：移除昂贵的 box-shadow */
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); */
  position: relative;
  /* 性能优化：缩短动画时间，使用更标准的曲线 */
  animation: bubble-scale-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transform-origin: center center;
  /* 性能优化：强制GPU加速 */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  /* 移除不必要的 transition */
  /* transition: box-shadow 0.3s ease; */
}

.gp-user-bubble {
  background: black;
  color: white;
  align-self: flex-start;
}

.gp-ai-bubble {
  background-color: #ffffff;
  color: #1c1c1e;
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  align-self: flex-start;
}

/* === 群聊纯表情包样式（无气泡） === */
.sticker-bubble-plain {
  max-width: 150px;
  max-height: 150px;
  border-radius: 0;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
  animation: bubble-scale-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)
    forwards;
}

/* ========================================= */
/* === 群聊布局完全隔离样式 (只影响群聊！) === */
/* ========================================= */

/* 群聊消息行基础布局 */
#chat-messages-container[data-context-mode="group"] .message-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

/* 群聊消息列容器 - 收缩到内容大小 */
#chat-messages-container[data-context-mode="group"] .msg-column {
  display: flex !important;
  flex-direction: column !important;
  width: fit-content !important;
  max-width: 70% !important;
  flex-shrink: 1 !important;
}

/* 群聊用户消息 - 整行靠右 */
#chat-messages-container[data-context-mode="group"] .message-row.is-user {
  justify-content: flex-end !important;
}

/* 群聊用户消息列 - 内容靠右对齐 */
#chat-messages-container[data-context-mode="group"]
  .message-row.is-user
  .msg-column {
  align-items: flex-end !important;
  margin-right: 8px !important;
  margin-left: 0 !important;
}

/* 群聊AI消息列 - 内容靠左对齐 */
#chat-messages-container[data-context-mode="group"]
  .message-row:not(.is-user)
  .msg-column {
  align-items: flex-start !important;
  margin-left: 8px !important;
  margin-right: 0 !important;
}

/* 群聊头像容器 - 固定大小不收缩 */
#chat-messages-container[data-context-mode="group"] .chat-avatar-container {
  flex-shrink: 0 !important;
  width: auto !important;
}

/* 群聊用户 wrapper - 收缩到内容大小！ */
#chat-messages-container[data-context-mode="group"]
  .group-message-wrapper.user {
  width: fit-content !important;
  /* 不要100%！收缩到内容大小 */
  max-width: 100% !important;
  margin-left: auto !important;
  /* 自动左边距让它靠右 */
  margin-right: 0 !important;
}

/* 群聊AI wrapper - 收缩到内容大小 */
#chat-messages-container[data-context-mode="group"] .group-message-wrapper.ai {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  /* 自动右边距让它靠左 */
}

/* =========================================
   全屏模式样式适配 (基于 body.fullscreen-mode)
   ========================================= */

/* 1. 当 body 开启全屏模式时 -> 手机外框变直角、铺满 */
body.fullscreen-mode .phone-frame {
  width: 100vw !important;
  /* 强制宽度 100% 视口 */
  height: 100vh !important;
  /* 强制高度 100% 视口 */
  border-radius: 0 !important;
  /* 核心：变直角 */
  border: none !important;
  /* 去除边框 */
  margin: 0 !important;

  /* 强制复位定位，防止居中逻辑干扰 */
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  /* 去掉阴影，看着更像原生全屏 */
}

/* 2. 当 body 开启全屏模式时 -> 内部遮罩也变直角 */
/* 这一步如果不加，四个角还是会被里面的 mask 切成圆的 */
body.fullscreen-mode .content-mask {
  border-radius: 0 !important;
}

/* 3. 当 body 开启全屏模式时 -> 隐藏手机外壳图片 */
/* 必须隐藏，否则屏幕中间会悬浮着一个手机框图片 */
body.fullscreen-mode #device-skin {
  display: none !important;
}

/* 4. (可选) 确保内部屏幕容器也是直角 */
body.fullscreen-mode div[id$="-screen"] {
  border-radius: 0 !important;
}

/* ================= 转账卡片 (月白与青黛版 / Moon White & Indigo Grey) ================= */

/* 卡片容器 */
.transfer-card {
  width: 230px !important; /* 调整为新视觉宽度 */
  height: auto !important; /* 内容自适应 */
  background: #ffffff;
  border: 1px solid rgba(69, 73, 77, 0.12); /* --london-border */
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(69, 73, 77, 0.04); /* --london-shadow-soft */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.transfer-card:hover {
  box-shadow: 0 4px 12px rgba(69, 73, 77, 0.08); /* --london-shadow */
  transform: translateY(-1px);
}

/* 头部区域 - 统一为纯白背景，不再随状态变色 */
.transfer-header {
  height: auto;
  min-height: 72px;
  background-color: #ffffff !important;
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 12px;
}

/* 状态颜色控制 - 改为作用于 Icon Box */
/* 待处理：青黛 (默认) */
.transfer-card.status-pending .transfer-icon-box {
  background-color: #45494d !important; /* --london-accent */
}

/* 已收款：冷调绿/蓝 */
.transfer-card.status-accepted .transfer-icon-box {
  background-color: #8fb3c4 !important; /* --london-success */
}

/* 已退回：低饱和红 */
.transfer-card.status-refused .transfer-icon-box {
  background-color: #d4a5a5 !important; /* --london-danger */
}

/* 图标容器 (圆角矩形，不再是圆形) */
.transfer-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s;
  margin-right: 0; /* JS注入样式已处理gap */
}

/* SVG 图标本体 */
.transfer-icon-svg {
  width: 22px !important;
  height: 22px !important;
  fill: #ffffff;
  display: block;
}

/* 信息区域 */
.transfer-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.transfer-amount {
  font-size: 17px;
  font-weight: 600;
  color: #45494d; /* --london-text-primary */
  line-height: 1.2;
  margin-bottom: 2px;
}

.transfer-status-text {
  font-size: 13px;
  color: #5f6b73; /* --london-text-secondary */
  font-weight: 400;
  opacity: 1;
}

/* 底部备注区 */
.transfer-footer {
  height: auto;
  flex: initial;
  padding: 10px 16px;
  background: #f4f7f9; /* --london-card-alt */
  border-top: 1px solid rgba(69, 73, 77, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #9fa6ab; /* --london-text-muted */
}

/* 遮罩层 (极简白风格) */
.transfer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.96); /* 高以太实色 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
}

.transfer-card.status-selecting .transfer-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* 按钮样式优化 --london 风格 */
.transfer-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.action-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  color: white;
}

.btn-accept {
  background: #8fb3c4 !important; /* --london-success */
  color: white !important;
}
.btn-refuse {
  background: #d4a5a5 !important; /* --london-danger */
  color: white !important;
}

.overlay-title {
  font-size: 15px;
  font-weight: 600;
  color: #45494d;
  margin-bottom: 16px;
}

.overlay-cancel {
  font-size: 13px;
  color: #5f6b73;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
}

/* === 聊天设置界面样式优化 === */

/* 统一按钮样式 */
#chat-settings-modal .form-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.1);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 70px;
  text-align: center;
}

#chat-settings-modal .form-button-secondary:hover {
  background-color: rgba(0, 122, 255, 0.15);
}

#chat-settings-modal .form-button-secondary:active {
  background-color: rgba(0, 122, 255, 0.2);
  transform: scale(0.98);
}

/* 统一标签样式 */
#chat-settings-modal .form-group > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  text-align: left;
}

/* 开关行样式统一 */
#chat-settings-modal
  .form-group
  label[style*="justify-content: space-between"] {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* 壁纸按钮容器 */
#chat-settings-modal .wallpaper-buttons {
  display: flex;
  gap: 8px;
}

#chat-settings-modal .wallpaper-buttons .form-button-secondary {
  flex: 1;
}

/* 统一textarea样式 */
#chat-settings-modal .form-textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  resize: vertical;
  min-height: 60px;
}

/* 统一input样式 */
#chat-settings-modal .form-input {
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

/* 分组间距 */
#chat-settings-modal .form-group {
  margin-bottom: 16px;
}

/* 列标题 */
#chat-settings-modal .settings-column h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1c1c1e;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

/* === 可折叠设置分类样式 (修复版：更通透、无圆角背景 SVG) === */

/* 1. Modal Content: 增强通透感 */
#chat-settings-modal .modal-content {
  background: rgba(255, 255, 255, 0.65) !important; /* 更透明 */
  backdrop-filter: blur(40px) saturate(200%); /* 加强模糊和饱和度 */
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding: 0 !important;
  /* overflow: visible !important; 尝试解决遮挡，但这会破坏圆角，先不动 */
}

/* 2. Modal Body: 完全透明且允许滚动 */
#chat-settings-modal .modal-body {
  background-color: transparent !important;
  padding: 20px !important;
  overflow-y: auto !important; /* 确保自身可滚动 */
  max-height: 70vh !important;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20px,
    black calc(100% - 20px),
    transparent 100%
  ); /* 边缘渐变遮罩优化滚动体验 */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20px,
    black calc(100% - 20px),
    transparent 100%
  );
}

#chat-settings-modal .settings-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px; /* 底部留白 */
}

/* 3. 设置卡片：修复展开遮挡，移除 overflow:hidden */
#chat-settings-modal .settings-section {
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.45); /* 很薄的半透明 */
  /* overflow: hidden;  <-- 罪魁祸首！移除它，允许内容撑开 */
  transition: all 0.3s ease;
  /* 解决展开时被截断问题 */
  height: auto !important;
  flex-shrink: 0; /* 防止被压缩 */
}

#chat-settings-modal .settings-section[open] {
  background: rgba(255, 255, 255, 0.65); /* 展开时稍微不透明一点，突出显示 */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); /* 展开时加阴影 */
  z-index: 10;
}

#chat-settings-modal .settings-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: transparent; /* 完全通过父元素背景 */
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  user-select: none;
  list-style: none;
  border-radius: 16px; /* 闭合时的圆角 */
}

#chat-settings-modal .settings-section[open] summary {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px 16px 0 0; /* 展开时只有上面有圆角 */
}

#chat-settings-modal .settings-section summary:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 4. 图标样式重构：移除圆角背景，直接显示彩色 SVG */
#chat-settings-modal .settings-section summary .section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: transparent !important; /* 移除背景色 */
  box-shadow: none !important; /* 移除阴影 */
  margin-right: 12px;
}

#chat-settings-modal .settings-section summary .section-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1px; /* 线条稍粗一点 */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); /* 给线条加一点投影 */
}

/* 5. Chevron 箭头 */
#chat-settings-modal .settings-section summary .chevron {
  color: rgba(60, 60, 67, 0.4);
  display: flex;
  align-items: center;
}
#chat-settings-modal .settings-section summary .chevron svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s;
}
#chat-settings-modal .settings-section[open] summary .chevron svg {
  transform: rotate(180deg);
}

/* 6. 内容区域 */
#chat-settings-modal .settings-section .section-content {
  padding: 0 18px;
  background: transparent;
}

#chat-settings-modal .settings-section .section-content > div {
  padding: 14px 0;
}

/* 修复内容被遮挡问题：确保内容高度自然撑开 */
#chat-settings-modal .avatar-uploader {
  height: auto !important;
}

#chat-settings-modal .settings-section .section-content > div:last-child {
  border-bottom: none;
}

/* 危险区域 */
#chat-settings-modal .danger-section summary span {
  color: #ff3b30;
}

/* 按钮行 */
#chat-settings-modal .button-row {
  border-bottom: none !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* 输入框：融入背景的半透明灰 */
#chat-settings-modal .form-input,
#chat-settings-modal .form-textarea {
  background-color: rgba(118, 118, 128, 0.12) !important;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  color: #1d1d1f;
  transition: all 0.2s;
}
#chat-settings-modal .form-input:focus,
#chat-settings-modal .form-textarea:focus {
  background-color: rgba(118, 118, 128, 0.08) !important;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}

/* 次级按钮样式优化 */
#chat-settings-modal .form-button-secondary {
  background-color: rgba(0, 122, 255, 0.1);
  color: #007aff;
  border-radius: 8px;
  font-weight: 500;
  backdrop-filter: blur(5px);
}
#chat-settings-modal .form-button-secondary:hover {
  background-color: rgba(0, 122, 255, 0.15);
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  #chat-settings-modal .modal-content {
    background: rgba(30, 30, 30, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    color: #fff;
  }
  #chat-settings-modal .modal-header,
  #chat-settings-modal .modal-footer {
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  #chat-settings-modal .settings-section {
    background: rgba(255, 255, 255, 0.1);
  }

  #chat-settings-modal .settings-section summary {
    color: #fff;
  }

  #chat-settings-modal .settings-section summary:active {
    background-color: rgba(255, 255, 255, 0.08); /* 深色模式下的按下变亮 */
  }

  #chat-settings-modal .settings-section[open] summary {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  #chat-settings-modal .settings-section .section-content > div {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  #chat-settings-modal .form-input,
  #chat-settings-modal .form-textarea {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff;
  }
  #chat-settings-modal .form-input:focus,
  #chat-settings-modal .form-textarea:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
  }

  #chat-settings-modal .toggle-row span {
    color: #fff;
  }
  #chat-settings-modal .form-group > label {
    color: #ddd;
  }
}

/* === iOS 风格开关 (Switch) - 终极修复版 === */
/* 容器：强制固定宽高，绝对禁止被 Flex 拉伸 */
#chat-settings-modal .switch {
  position: relative !important;
  display: inline-block !important;
  width: 51px !important; /* 核心：固定宽度 */
  min-width: 51px !important;
  max-width: 51px !important;
  height: 31px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 51px !important; /* 核心：在 Flex 布局中禁止伸缩 */
  flex-shrink: 0 !important;
  vertical-align: middle;
}

/* 隐藏 checkbox */
#chat-settings-modal .switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  margin: 0;
}

/* 滑槽 (背景长条) */
#chat-settings-modal .slider {
  position: absolute !important;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e9e9ea !important; /* 未选中灰色 */
  transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  border-radius: 31px !important; /* 彻底圆角胶囊 */
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* 滑块 (白色圆球) */
#chat-settings-modal .slider:before {
  position: absolute !important;
  content: "";
  height: 27px !important;
  width: 27px !important;
  left: 2px !important;
  bottom: 2px !important;
  background-color: white !important;
  transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  transform: translateX(0);
}

/* 选中状态：背景变绿 */
#chat-settings-modal input:checked + .slider {
  background-color: #3a3a3c !important; /* iOS Green */
}

/* 选中状态：滑块右移 */
#chat-settings-modal input:checked + .slider:before {
  transform: translateX(20px) !important;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  #chat-settings-modal .slider {
    background-color: #39393d !important;
  }
}

/* === 修复按钮组间距 (修复版) === */
#chat-settings-modal .button-row {
  display: flex !important; /* 关键：此前漏了这一行 */
  flex-wrap: nowrap !important;
  border-bottom: none !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  gap: 12px !important;
  justify-content: space-between !important;
}

#chat-settings-modal .form-button-secondary {
  flex: 1 !important; /* 均分宽度 */
  margin: 0 !important;
  min-width: 0; /* 防止溢出 */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* === 新增：开关行样式 (关键修复) === */
#chat-settings-modal .toggle-row {
  display: flex !important;
  justify-content: space-between !important; /* 两端对齐 */
  align-items: center !important; /* 垂直居中 */
  width: 100% !important;
  min-height: 44px; /* 保证最小点击区域高度 */
}

/* 确保 toggle-row 里的文本容器不会无限撑宽 */
#chat-settings-modal .toggle-row > div:first-child {
  flex: 1;
  padding-right: 12px; /* 给开关留点距离 */
}

/* === 修复角色切换器 (Role Switcher) === */
#chat-settings-modal .role-switcher {
  display: flex;
  align-items: center;
  justify-content: center; /* 确保居中 */
  gap: 16px; /* 适度间距 */
  margin-bottom: 20px;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  position: relative !important; /* 保持流布局 */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 强制修复角色切换器中的 switch 变形问题 */
#chat-settings-modal .role-switcher .switch {
  width: 51px !important;
  height: 31px !important;
  flex: 0 0 51px !important; /* 禁止伸缩 */
  min-width: 51px !important;
}

#chat-settings-modal .switch-label {
  font-size: 16px;
  font-weight: 500;
  color: #8e8e93;
  transition: color 0.3s;
  white-space: nowrap; /* 防止换行 */
  line-height: 31px; /* 对齐开关高度 */
}

#chat-settings-modal .switch-label.active {
  color: #1d1d1f;
  font-weight: 600;
  transform: scale(1.05); /* 激活稍微放大 */
}
@media (prefers-color-scheme: dark) {
  #chat-settings-modal .switch-label.active {
    color: #fff;
  }
}

/* === 优化头像上传区域布局 (新) === */
#chat-settings-modal .compact-avatar-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  padding: 0 8px; /* 增加内边距防止边缘贴合 */
}

/* 左列：头像 + 按钮 */
#chat-settings-modal .avatar-left-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 72px; /* 稍微调窄 */
  flex-shrink: 0;
}

#chat-settings-modal .avatar-preview {
  width: 64px; /* 稍微调小一点 */
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #f2f2f7;
}

/* 微型更换按钮 - 优化 */
#chat-settings-modal .change-avatar-btn-small {
  font-size: 12px;
  padding: 4px 10px;
  background: rgba(0, 122, 255, 0.1); /* 浅蓝背景 */
  color: #007aff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
}
#chat-settings-modal .change-avatar-btn-small:hover {
  background: rgba(0, 122, 255, 0.2);
}

/* 右列：名字输入框 */
#chat-settings-modal .avatar-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 4px;
  min-width: 0; /* flex 子元素溢出修复 */
}

/* 标签样式微调 */
#chat-settings-modal label {
  font-size: 12px;

  margin-bottom: 6px;
  display: block;
  font-weight: 500;

  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100% - 50px);
}

#theme-presets-list,
#bubble-presets-list {
  padding: 10px 0;
}

/* ============================================================ */
/* === 井字棋游戏悬浮窗样式 (Tic-Tac-Toe Floating Window) ===   */
/* ============================================================ */

.game-floating-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  max-width: 90vw;
  background: linear-gradient(145deg, #fff8f8 0%, #fff0f5 50%, #f8f0ff 100%);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(255, 150, 180, 0.25),
    0 8px 25px rgba(200, 150, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 200, 220, 0.4);
  z-index: 2000;
  overflow: hidden;
  animation: gameWindowPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 修复布局：确保内容垂直排列 */
  display: flex;
  flex-direction: column;
}

@keyframes gameWindowPopIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(
    135deg,
    rgba(255, 182, 193, 0.3) 0%,
    rgba(221, 160, 221, 0.2) 100%
  );
  border-bottom: 1px solid rgba(255, 200, 220, 0.3);
}

.game-title {
  font-size: 18px;
  font-weight: 700;
  color: #e75480;
  letter-spacing: 1px;
}

.game-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 100, 130, 0.15);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #e75480;
}

.game-close-btn:hover {
  background: rgba(255, 100, 130, 0.3);
  transform: rotate(90deg);
}

.game-players {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 12px;
}

.player {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

/* .player.user-player 不需要特殊样式，使用默认即可 */

.player-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.player-bubble {
  background: #fff;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 12px;
  color: #555;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  max-width: 100px;
  word-wrap: break-word;
  line-height: 1.4;
  position: relative;
  max-height: 60px;
  overflow-y: auto;
  overflow-x: hidden;
}

.ai-player .player-bubble {
  border-bottom-left-radius: 4px;
}

.user-player .player-bubble {
  border-bottom-right-radius: 4px;
  background: linear-gradient(135deg, #ffe4ec 0%, #ffd4e5 100%);
}

.game-status {
  text-align: center;
  padding: 8px 20px;
  font-size: 13px;
  color: #888;
  font-weight: 500;
}

.game-board {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px 24px;
  margin: 0 auto;
  max-width: 240px;
  min-height: 240px;
  visibility: visible !important;
  opacity: 1 !important;
}

.board-cell {
  aspect-ratio: 1;
  background: #fff !important;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 2px solid rgba(255, 200, 220, 0.3);
  min-width: 60px;
  min-height: 60px;
}

.board-cell:hover:not(.occupied) {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(255, 150, 180, 0.2);
  border-color: rgba(255, 150, 180, 0.5);
}

.board-cell.occupied {
  cursor: default;
}

.board-cell img,
.board-cell .piece-avatar {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  object-fit: cover;
}

.board-cell.winner {
  animation: winPulse 0.6s ease infinite alternate;
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

@keyframes winPulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

.game-controls {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.start-panel {
  display: flex;
  gap: 12px;
}

.game-btn {
  padding: 10px 24px;
  border-radius: 20px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  background: linear-gradient(135deg, #ffb6c1 0%, #dda0dd 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(255, 150, 180, 0.3);
}

.game-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 150, 180, 0.4);
}

.game-btn:active {
  transform: translateY(0);
}

/* 井字棋聊天输入容器 */
.game-chat-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 260px;
  padding: 6px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(255, 150, 180, 0.3);
  box-shadow: 0 2px 8px rgba(255, 150, 180, 0.15);
  transition: all 0.2s ease;
}

.game-chat-input-container:focus-within {
  border-color: rgba(255, 150, 180, 0.6);
  box-shadow: 0 4px 12px rgba(255, 150, 180, 0.25);
}

.game-chat-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 6px 12px;
  font-size: 13px;
  color: #333;
  font-family: inherit;
}

.game-chat-input::placeholder {
  color: #e75480;
  opacity: 0.6;
}

.game-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ffb6c1 0%, #dda0dd 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255, 150, 180, 0.3);
}

.game-send-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 150, 180, 0.4);
}

.game-send-btn:active {
  transform: scale(0.95);
}

.game-send-btn svg {
  stroke: #fff;
}

/* 深色模式适配 */
.phone-frame.dark-mode .game-floating-window {
  background: linear-gradient(145deg, #2c1f2d 0%, #1e1e2e 50%, #1a1a2e 100%);
  border-color: rgba(255, 150, 180, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3);
}

.phone-frame.dark-mode .game-header {
  background: linear-gradient(
    135deg,
    rgba(255, 100, 130, 0.15) 0%,
    rgba(180, 100, 200, 0.1) 100%
  );
  border-color: rgba(255, 150, 180, 0.15);
}

.phone-frame.dark-mode .game-title {
  color: #ffb6c1;
}

.phone-frame.dark-mode .game-close-btn {
  background: rgba(255, 100, 130, 0.2);
  color: #ffb6c1;
}

.phone-frame.dark-mode .player-bubble {
  background: #2a2a3a;
  color: #ccc;
}

.phone-frame.dark-mode .user-player .player-bubble {
  background: linear-gradient(135deg, #3a2a3a 0%, #4a2a4a 100%);
}

.phone-frame.dark-mode .game-status {
  color: #888;
}

.phone-frame.dark-mode .board-cell {
  background: #2a2a3a;
  border-color: rgba(255, 150, 180, 0.15);
}

.phone-frame.dark-mode .board-cell:hover:not(.occupied) {
  border-color: rgba(255, 150, 180, 0.4);
}

.phone-frame.dark-mode .game-chat-btn {
  background: rgba(40, 40, 50, 0.8);
  border-color: rgba(255, 150, 180, 0.3);
  color: #ffb6c1;
}

.phone-frame.dark-mode .game-chat-btn svg {
  stroke: #ffb6c1;
}

/* ============================================================ */
/* === 订单分享卡片样式 === */
/* ============================================================ */

.order-share-card-wrapper {
  background: transparent;
  padding: 0;
  max-width: 260px;
}

.order-share-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", sans-serif;
}

.order-card-header {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.order-card-header svg {
  flex-shrink: 0;
}

.order-card-header span {
  color: white;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.order-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.order-share-card .order-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  min-width: 60px;
}

.order-share-card .order-value {
  color: white;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  flex: 1;
  word-break: break-word;
}

.order-share-card .order-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  text-align: right;
}

.order-share-card .order-item {
  color: white;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.order-share-card .order-date {
  font-size: 12px;
  opacity: 0.95;
}

/* 响应式调整 */
@media (max-width: 380px) {
  .order-share-card {
    max-width: 240px;
  }

  .order-card-header span {
    font-size: 14px;
  }

  .order-label,
  .order-value,
  .order-item {
    font-size: 12px;
  }
}

/* ============================================================ */
/* === 飞行棋游戏样式 (Ludo Game Styles) ===                    */
/* ============================================================ */

/* CSS 变量定义 - 支持导出自定义 */
:root {
  --ludo-primary: #ffd93d; /* 阳光黄 */
  --ludo-secondary: #6bcb77; /* 薄荷绿 */
  --ludo-accent: #4d96ff; /* 天蓝色 */
  --ludo-bg-start: #fffbeb; /* 背景渐变起始 */
  --ludo-bg-end: #e8f5e9; /* 背景渐变结束 */
  --ludo-cell-normal: #fff8e7; /* 普通格子 */
  --ludo-cell-bonus: #b4f8c8; /* 前进格子 (绿) */
  --ludo-cell-penalty: #ffadad; /* 后退/原地踏步 (红) */
  --ludo-cell-truth: #ffd6e8; /* 真心话格子 (粉) */
  --ludo-cell-punishment: #c3b1e1; /* 惩罚格子 (紫) */
  --ludo-cell-start: #a0c4ff; /* 起点 (蓝) */
  --ludo-cell-end: #ffe066; /* 终点 (金黄) */
  --ludo-console-bg: #2d2d2d; /* 游戏机外壳 */
  --ludo-console-inner: #1a1a1a; /* 游戏机内部 */
  --ludo-plane-ai: #ff6b6b; /* AI飞机颜色 (红) */
  --ludo-plane-user: #4ecdc4; /* 用户飞机颜色 (青) */
  --ludo-border-radius: 24px;
}

/* 飞行棋悬浮窗 */
.ludo-floating-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  animation: ludoWindowPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ludoWindowPopIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

/* 游戏机边框 - 复古任天堂风格 */
.ludo-console-frame {
  width: 340px;
  max-width: 95vw;
  background: linear-gradient(
    180deg,
    #3d3d3d 0%,
    var(--ludo-console-bg) 10%,
    #252525 100%
  );
  border-radius: var(--ludo-border-radius);
  padding: 12px;
  box-shadow: 0 0 0 3px #1a1a1a, 0 0 0 6px #4a4a4a,
    0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
}

/* 游戏机顶部LED装饰 */
.ludo-console-top-decor {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 6px 0 10px;
}

.console-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #333;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.console-led:nth-child(1) {
  background: var(--ludo-plane-ai);
  box-shadow: 0 0 6px var(--ludo-plane-ai);
}
.console-led:nth-child(2) {
  background: var(--ludo-primary);
  box-shadow: 0 0 6px var(--ludo-primary);
}
.console-led:nth-child(3) {
  background: var(--ludo-secondary);
  box-shadow: 0 0 6px var(--ludo-secondary);
}

/* 游戏内屏幕区域 */
.ludo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(
    135deg,
    var(--ludo-bg-start) 0%,
    var(--ludo-bg-end) 100%
  );
  border-radius: 16px 16px 0 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

.ludo-title {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 #fff;
}

.ludo-header-actions {
  display: flex;
  gap: 8px;
}

.ludo-action-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(77, 150, 255, 0.15);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--ludo-accent);
}

.ludo-action-btn:hover {
  background: rgba(77, 150, 255, 0.25);
  transform: scale(1.05);
}

/* === Ludo Game Premium UI Facelift === */

.ludo-console-frame {
  width: 320px;
  background: #2b2b30; /* Dark matte plastic */
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    inset 0 -4px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid #1a1a1d;
  position: relative;
  padding: 12px; /* Bezel thickness */
}

/* 顶部状态栏 - 模拟屏幕顶部 */
.ludo-header {
  background: #1a1a2e;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px 12px 0 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.ludo-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(77, 150, 255, 0.6);
}

.ludo-close-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%; /* Circular button */
  background: #ff4757;
  border: 2px solid #ff6b81;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.ludo-close-btn svg {
  color: white;
  width: 14px;
  height: 14px;
}

.ludo-close-btn:active {
  transform: scale(0.9);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 玩家信息栏 - 嵌入屏幕内部 */
.ludo-players {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background: #16213e; /* Deep screen blue */
  gap: 15px;
  position: relative;
}

.ludo-player {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.ludo-player.user-player {
  justify-content: flex-end;
}

.ludo-player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px; /* Rounded square for digital feel */
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.ludo-player.ai-player .ludo-player-avatar {
  border-color: #ff6b6b;
}

.ludo-player.user-player .ludo-player-avatar {
  border-color: #4ecdc4;
}

.ludo-player-bubble {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  color: #e0e0e0;
  max-width: 100px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 棋盘主屏幕区域 */
.ludo-board-container {
  padding: 0 2px;
  background: #16213e;
  display: flex;
  justify-content: center;
  position: relative;
}

/* 屏幕光泽效果 */
.ludo-board-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 50% 30%,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 10;
}

.ludo-board {
  width: 280px;
  height: 280px;
  /* 高级深色网格背景 */
  background-color: #0f3460;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  border-radius: 12px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(77, 150, 255, 0.1);
  position: relative;
  z-index: 1;
}

/* 棋盘格子新样式 */
.ludo-cell {
  fill: rgba(255, 255, 255, 0.08); /* 半透明玻璃感 */
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 1.5;
  transition: all 0.3s ease;
}

.ludo-cell:hover {
  fill: rgba(255, 255, 255, 0.2);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

.ludo-cell.cell-start {
  fill: rgba(77, 150, 255, 0.3);
  stroke: #4d96ff;
}

.ludo-cell.cell-end {
  fill: rgba(255, 179, 0, 0.3);
  stroke: #ffb300;
}

.ludo-cell.cell-bonus {
  fill: rgba(46, 204, 113, 0.3); /* Green tint */
  stroke: #2ecc71;
}

.ludo-cell.cell-penalty {
  fill: rgba(231, 76, 60, 0.3); /* Red tint */
  stroke: #e74c3c;
}

.ludo-cell.cell-truth {
  stroke: #ffd6e8;
}

.ludo-cell-number {
  font-size: 9px;
  fill: rgba(255, 255, 255, 0.4);
  font-family: "Courier New", monospace; /* Digital font feel */
  font-weight: 700;
}

/* 骰子和操作区 - 模拟屏幕下方控件区 */
.ludo-controls {
  padding: 15px;
  background: #1a1a2e;
  border-radius: 0 0 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ludo-dice-area {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: transparent;
}

.ludo-dice {
  width: 56px;
  height: 56px;
  background: #e0e0e0; /* Physical dice look */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 0 #999, /* 3D depth */ 0 10px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.1s;
}

.ludo-dice:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #999, 0 4px 6px rgba(0, 0, 0, 0.3);
}

.ludo-status {
  color: #4d96ff;
  font-family: "Courier New", monospace;
  font-size: 13px;
  text-shadow: 0 0 5px rgba(77, 150, 255, 0.4);
  margin-top: 8px;
}

/* 按钮样式优化 */
.ludo-btn {
  padding: 8px 20px;
  border-radius: 6px; /* slightly more squared */
  border: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.1s;
}

.ludo-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.ludo-btn.primary {
  background: #ffce00;
  color: #1a1a1d;
  box-shadow: 0 4px 0 #c49f00;
}

.ludo-btn.primary:active {
  box-shadow: 0 2px 0 #c49f00;
}

/* 游戏机底部装饰 */
.ludo-console-bottom-decor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 8px;
}

.console-dpad {
  width: 45px;
  height: 45px;
  position: relative;
}

.console-dpad::before,
.console-dpad::after {
  content: "";
  position: absolute;
  background: #1a1a1a;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
}

.console-dpad::before {
  width: 15px;
  height: 45px;
  left: 50%;
  transform: translateX(-50%);
}

.console-dpad::after {
  width: 45px;
  height: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.console-buttons {
  display: flex;
  gap: 12px;
  transform: rotate(-15deg);
}

.console-btn-a,
.console-btn-b {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer; /* make them feel interactive */
}

.console-btn-a {
  background: radial-gradient(circle at 30% 30%, #ff6b6b, #ee5253);
  box-shadow: 0 4px 0 #b33939, 0 5px 10px rgba(0, 0, 0, 0.4);
}

.console-btn-a:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b33939, 0 2px 5px rgba(0, 0, 0, 0.4);
}

.console-btn-b {
  background: radial-gradient(circle at 30% 30%, #feca57, #ff9f43);
  box-shadow: 0 4px 0 #e67e22, 0 5px 10px rgba(0, 0, 0, 0.4);
  color: #fff;
}

.console-btn-b:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #e67e22, 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* 骰子区域修正为与屏幕背景一致，消除割裂感 */
.ludo-dice-area {
  background: #16213e; /* match player/board area */
  margin: 0;
  padding: 10px 0;
  width: 100%;
}

/* 骰子本身的对比度优化 */
.ludo-dice {
  background: #f1f2f6;
  border: 1px solid #dcdde1;
  position: relative;
  /* 确保骰子内容可见 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 恢复误删的骰子点数网格布局 */
.dice-face {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas:
    "tl tc tr"
    "ml mc mr"
    "bl bc br";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 8px;
  box-sizing: border-box;
}

.dot {
  background: #2f3542;
  width: 8px; /* Slightly smaller for better fit */
  height: 8px;
  border-radius: 50%;
  align-self: center;
  justify-self: center;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Dot positioning */
.dot.tl {
  grid-area: tl;
}
.dot.tc {
  grid-area: tc;
}
.dot.tr {
  grid-area: tr;
}
.dot.ml {
  grid-area: ml;
}
.dot.center {
  grid-area: mc;
}
.dot.mr {
  grid-area: mr;
}
.dot.bl {
  grid-area: bl;
}
.dot.bc {
  grid-area: bc;
}
.dot.br {
  grid-area: br;
}

/* 修复次级按钮样式 (TA先飞) */
.ludo-btn.secondary {
  background: linear-gradient(135deg, #f5f6fa 0%, #dcdde1 100%);
  color: #2f3640;
  box-shadow: 0 4px 0 #bdc3c7;
}

.ludo-btn.secondary:active {
  box-shadow: 0 2px 0 #bdc3c7;
  transform: translateY(2px);
}

/* 深色模式适配微调 */
.phone-frame.dark-mode .ludo-console-frame {
  border: 1px solid #333;
}

/* ============================================================ */
/* === 记忆功能手账本样式 (Memory Notebook Styles) ===         */
/* ============================================================ */

/* 记忆弹窗容器 */
.memory-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.memory-modal[style*="display: flex"],
.memory-modal[style*="display:flex"] {
  opacity: 1;
  pointer-events: auto;
}

/* 遮罩层 */
.memory-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 1;
}

/* 弹窗主体 - 复古米黄风格 */
.memory-modal-content {
  position: relative;
  width: 75%; /* 手机端默认占满 */
  max-width: 600px;
  margin: 10px auto; /* 确保有上下边距 */
  max-height: 90vh; /* 稍微增加高度利用率 */
  background-color: #faf5ee; /* 手账内页色 */
  border: 1px solid #d2b48c; /* 浅棕边框 */
  box-shadow: 2px 2px 5px rgba(139, 90, 43, 0.1); /* 轻微阴影 */
  border-radius: 2px;
  padding: 25px;
  z-index: 2;
  overflow: hidden;
  /* 复古纹理 */
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23D2B48C' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E");

  font-family: "Noto Serif SC", "SimSun", serif;
  animation: fadeScaleIn 0.3s ease-out;
}

@keyframes fadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 之前右页的容器样式重置，因为现在是单页 */
.memory-right-page {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 滚动区域 */
.memory-panel {
  overflow-y: auto;
  max-height: calc(85vh - 100px);
  padding-right: 5px;
}

.memory-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border: 1px solid #c4a77d;
  background: linear-gradient(to bottom, #fff9f0 0%, #f5ebe0 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 15;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.memory-close-btn:hover {
  background: linear-gradient(to bottom, #fff5e6 0%, #efe1d2 100%);
  border-color: #8b4513;
  transform: scale(1.08);
}

.memory-close-btn svg {
  color: #8b4513;
  width: 14px;
  height: 14px;
}

/* Tab 栏样式 */
/* Tab 栏样式 - 复古 */
.memory-tab-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  background: transparent;
  border-bottom: none;
  padding: 0;
}

.memory-tab {
  padding: 8px 25px;
  margin: 0 10px;
  font-size: 18px;
  color: #8b5a2b;
  cursor: pointer;
  position: relative;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-weight: normal;
  font-family: inherit;
  transition: all 0.2s;
}

.memory-tab:hover {
  color: #800020;
}

.memory-tab.active {
  border-bottom: 2px solid #800020;
  color: #800020;
}

.memory-tab::after {
  content: "";
  position: absolute;
  bottom: -5px;
  right: 0;
  width: 6px;
  height: 6px;
  background-color: #faf5ee;
  border-right: 1px solid #d2b48c;
  border-bottom: 1px solid #d2b48c;
  transform: rotate(45deg);
  display: none;
}

.memory-tab.active::after {
  display: block;
}

.memory-tab-indicator {
  display: none;
}

.memory-panel {
  display: none;
  flex-direction: column;
  gap: 15px;
}

.memory-panel.active {
  display: flex;
}

/* 统计卡片 - 复古信息卡 */
.memory-stats-card {
  border: 1px solid #d2b48c;
  padding: 15px;
  margin-bottom: 5px;
  background-color: #f9f2e7;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.memory-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border-bottom: none;
}

.memory-stat-label {
  font-size: 16px;
  color: #5a3e2b;
  font-family: inherit;
}

.memory-stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #8b5a2b;
  font-family: inherit;
}

/* 移除回溯页面不需要的横线 */
#memory-retrospect-panel {
  background-image: none;
  padding-top: 0;
}

/* 羁绊页面 - 翻页容器 */
#memory-bonds-panel {
  position: relative;
  overflow: visible;
}

.memory-panel::-webkit-scrollbar {
  width: 5px;
}

.memory-panel::-webkit-scrollbar-track {
  background: rgba(139, 90, 43, 0.05);
  border-radius: 3px;
}

.memory-panel::-webkit-scrollbar-thumb {
  background: rgba(139, 90, 43, 0.15);
  border-radius: 3px;
}

.memory-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 90, 43, 0.25);
}

/* 统计卡片 */
.memory-stats-card {
  background: linear-gradient(
    to bottom,
    rgba(255, 248, 235, 0.9) 0%,
    rgba(245, 235, 215, 0.9) 100%
  );
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #d4b896;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.memory-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px dotted rgba(139, 69, 19, 0.15);
}

.memory-stat-item:last-child {
  border-bottom: none;
}

.memory-stat-label {
  font-size: 12px;
  color: #6b5344;
  font-family: "Noto Serif SC", serif;
}

.memory-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: #8b4513;
  font-family: "Courier New", monospace;
}

/* 表单样式 */
.memory-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.memory-form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #5b4636;
  font-family: "Noto Serif SC", serif;
}

/* 表单样式优化 */
/* 表单样式 - 复古风格 */
.memory-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.memory-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #d2b48c;
  background: #faf5ee;
  border-radius: 2px;
  cursor: pointer;
  color: #8b5a2b;
}

.memory-icon-btn:hover {
  background: #f9f2e7;
}

.memory-input,
.memory-select,
.memory-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #d2b48c;
  background-color: #faf5ee;
  font-size: 14px;
  color: #5a3e2b;
  border-radius: 2px;
  /* 打字机输入框效果 */
  font-family: "Courier New", monospace;
  letter-spacing: 0.5px;
  box-shadow: none;
  box-sizing: border-box; /* 修复右边框消失问题 */
}

.memory-input:focus,
.memory-select:focus,
.memory-textarea:focus {
  outline: none;
  border-color: #8b5a2b;
  box-shadow: 0 0 3px rgba(139, 90, 43, 0.2);
}

.memory-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
  background-image: none; /* 移除原来的横线 */
}

/* 复古按钮 */
.memory-btn-primary {
  width: 100%;
  padding: 12px;
  background: #8b5a2b;
  color: #faf5ee;
  border: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  box-shadow: none;
  margin-top: 10px;
}

.memory-btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shine 1.5s infinite;
}

@keyframes shine {
  100% {
    left: 100%;
  }
}

.memory-btn-primary:hover {
  background: #724921;
  transform: none;
  box-shadow: none;
}

.memory-btn-primary svg {
  width: 18px;
  height: 18px;
}

/* 行内编辑样式 */
.memory-inline-edit-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid #c4a77d;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: #4a3728;
  resize: vertical;
}

.memory-inline-edit-textarea:focus {
  outline: none;
  border-color: #8b4513;
  box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.memory-inline-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.memory-edit-confirm-btn,
.memory-edit-cancel-btn {
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.memory-edit-confirm-btn {
  background: #8b4513;
  color: white;
}

.memory-edit-confirm-btn:hover {
  background: #723a0f;
}

.memory-edit-cancel-btn {
  background: #f0ebe4;
  color: #666;
}

.memory-edit-cancel-btn:hover {
  background: #e6e0d8;
}

/* 支票容器 - 翻页布局 */
.memory-cheques-container {
  position: relative;
  min-height: 400px;
}

/* 支票页面容器 */
.memory-cheques-page {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.memory-cheques-page.active {
  display: flex;
}

/* 翻页按钮 */
.memory-page-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(139, 90, 43, 0.2);
}

.memory-page-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #c4a77d;
  background: linear-gradient(to bottom, #fff9f0 0%, #f5ebe0 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #8b4513;
}

.memory-page-btn:hover:not(:disabled) {
  background: linear-gradient(to bottom, #fff5e6 0%, #efe1d2 100%);
  border-color: #8b4513;
  transform: scale(1.1);
}

.memory-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.memory-page-info {
  font-size: 12px;
  color: #8b4513;
  font-family: "Courier New", monospace;
  min-width: 60px;
  text-align: center;
}

.memory-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  color: #999;
  text-align: center;
}

.memory-empty-state svg {
  margin-bottom: 12px;
  opacity: 0.3;
}

.memory-empty-state p {
  margin: 3px 0;
  font-size: 13px;
}

.memory-empty-hint {
  font-size: 11px !important;
  color: #bbb !important;
}

/* 记忆支票容器 - 单卡片翻页模式 */
.memory-cheques-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  min-height: 280px;
  position: relative;
}

/* 翻页控件 */
.memory-cheque-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 12px 0;
  margin-top: 8px;
}

.memory-cheque-pagination .memory-page-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(139, 69, 19, 0.2);
  color: #8b4513;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.memory-cheque-pagination .memory-page-btn:hover:not(:disabled) {
  background: rgba(139, 69, 19, 0.1);
  border-color: #8b4513;
  transform: scale(1.1);
}

.memory-cheque-pagination .memory-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.memory-cheque-pagination .memory-page-info {
  font-size: 13px;
  color: #8b4513;
  font-family: "Courier New", monospace;
  min-width: 60px;
  text-align: center;
  font-weight: 500;
}

/* 记忆支票卡片 - 缩小版本 */
.memory-cheque-card {
  font-family: "Noto Serif SC", "Times New Roman", serif;
  /* 单卡片模式：固定宽度居中显示 */
  /* width: 100%; */
  max-width: 320px;
  display: none; /* 默认隐藏 */
  flex-shrink: 0;
  /* 复古纸张质感 */
  background: linear-gradient(
    135deg,
    rgba(255, 248, 220, 0.95) 0%,
    rgba(253, 245, 230, 0.95) 50%,
    rgba(245, 235, 215, 0.95) 100%
  );
  background-color: #faf4e8;
  border: none;
  border-radius: 0;
  padding: 14px 16px; /* 缩小 padding */
  position: relative;
  margin: 6px 3px; /* 缩小 margin */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.07),
    0 3px 6px rgba(0, 0, 0, 0.05), inset 0 0 25px rgba(139, 90, 43, 0.04);
  transition: all 0.3s ease;
  /* 复古纸张效果 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"),
    linear-gradient(
      135deg,
      rgba(255, 248, 220, 0.95) 0%,
      rgba(253, 245, 230, 0.95) 50%,
      rgba(245, 235, 215, 0.95) 100%
    );
}

/* 邮票锯齿边框 */
.memory-cheque-card::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: radial-gradient(
        circle at 7px -2.5px,
        transparent 4px,
        #8b4513 4px,
        #8b4513 5px,
        transparent 5px
      )
      repeat-x top,
    radial-gradient(
        circle at 7px calc(100% + 2.5px),
        transparent 4px,
        #8b4513 4px,
        #8b4513 5px,
        transparent 5px
      )
      repeat-x bottom,
    radial-gradient(
        circle at -2.5px 7px,
        transparent 4px,
        #8b4513 4px,
        #8b4513 5px,
        transparent 5px
      )
      repeat-y left,
    radial-gradient(
        circle at calc(100% + 2.5px) 7px,
        transparent 4px,
        #8b4513 4px,
        #8b4513 5px,
        transparent 5px
      )
      repeat-y right;
  background-size: 14px 5px, 14px 5px, 5px 14px, 5px 14px;
  z-index: -1;
  pointer-events: none;
}

/* 右上角装饰印章 - 缩小 */
.memory-cheque-card::after {
  content: "記憶";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 38px; /* 缩小 */
  height: 38px;
  border: 2.5px double #c41e3a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px; /* 缩小 */
  font-weight: 700;
  color: #c41e3a;
  transform: rotate(-15deg);
  opacity: 0.6;
  font-family: "Noto Serif SC", serif;
  letter-spacing: 1.5px;
}

.memory-cheque-card:hover {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.07), 0 3px 6px rgba(0, 0, 0, 0.09),
    0 6px 12px rgba(0, 0, 0, 0.07), inset 0 0 25px rgba(139, 90, 43, 0.06);
  transform: translateY(-2px) rotate(-0.3deg);
}

.memory-cheque-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px; /* 缩小 */
  padding-bottom: 7px;
  border-bottom: 1.5px solid #d4b896;
  background-image: linear-gradient(
    to right,
    transparent,
    #d4b896 10%,
    #d4b896 90%,
    transparent
  );
  background-size: 100% 1.5px;
  background-position: bottom;
  background-repeat: no-repeat;
}

.memory-cheque-number {
  font-size: 11px; /* 缩小 */
  color: #8b4513;
  font-weight: 700;
  font-family: "Courier New", monospace;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.memory-cheque-date {
  font-size: 10px; /* 缩小 */
  color: #a67c52;
  font-style: italic;
}

.memory-cheque-content {
  font-size: 12px; /* 缩小 */
  line-height: 1.8;
  color: #4a3728;
  margin-bottom: 10px;
  padding: 8px 5px 8px 0; /* 右侧增加padding防止滚动条遮挡文字 */
  white-space: pre-wrap;
  word-wrap: break-word;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
  /* 限制高度并允许滚动，防止内容过长撑破布局 */
  max-height: 150px;
  overflow-y: auto;
  /* 复古信纸横线效果 - 调整间距 */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 22px,
    rgba(139, 90, 43, 0.1) 22px,
    rgba(139, 90, 43, 0.1) 23px
  );
  background-position: 0 12px;
  background-attachment: local; /* 确保背景随滚动条滚动 */
}

/* 支票内容滚动条样式 */
.memory-cheque-content::-webkit-scrollbar {
  width: 4px;
}
.memory-cheque-content::-webkit-scrollbar-thumb {
  background: rgba(139, 90, 43, 0.2);
  border-radius: 2px;
}
.memory-cheque-content::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 90, 43, 0.4);
}

.memory-cheque-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 7px;
  border-top: 1px dashed #c4a77d;
  margin-top: 6px;
}

.memory-cheque-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 6px;
}

.memory-cheque-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 10px; /* 缩小 */
  border: 1px solid #c4a77d;
  background: linear-gradient(to bottom, #fff9f0 0%, #f5ebe0 100%);
  border-radius: 3px;
  font-size: 11px; /* 缩小 */
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Noto Serif SC", serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.memory-cheque-btn:hover {
  background: linear-gradient(to bottom, #fff5e6 0%, #efe1d2 100%);
  border-color: #8b4513;
  box-shadow: 0 2px 3px rgba(139, 90, 43, 0.12);
}

.memory-cheque-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.memory-cheque-btn svg {
  width: 12px; /* 缩小 */
  height: 12px;
}

.memory-cheque-btn.edit-btn {
  color: #5b4636;
}

.memory-cheque-btn.edit-btn:hover {
  color: #3d2914;
}

.memory-cheque-btn.toggle-btn {
  color: #2e7d32;
}

.memory-cheque-btn.toggle-btn.disabled {
  color: #8b8b8b;
  opacity: 0.7;
}

.memory-cheque-btn.delete-btn {
  color: #a94442;
}

.memory-cheque-btn.delete-btn:hover {
  color: #843534;
  border-color: #a94442;
}

.memory-cheque-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px; /* 缩小 */
  border-radius: 3px;
  font-size: 10px; /* 缩小 */
  font-weight: 600;
  font-family: "Courier New", monospace;
  letter-spacing: 0.4px;
}

.memory-cheque-status.enabled {
  background: rgba(46, 125, 50, 0.12);
  color: #2e7d32;
  border: 1px solid rgba(46, 125, 50, 0.3);
}

.memory-cheque-status.disabled {
  background: rgba(139, 90, 43, 0.08);
  color: #8b8b8b;
  border: 1px solid rgba(139, 90, 43, 0.2);
}

.memory-cheque-status-dot {
  width: 5px; /* 缩小 */
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.memory-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: #999;
}

.memory-loading::after {
  content: "";
  width: 20px;
  height: 20px;
  border: 2.5px solid #f3f3f3;
  border-top: 2.5px solid #8b4513;
  border-radius: 50%;
  animation: memorySpinner 0.8s linear infinite;
}

@keyframes memorySpinner {
  to {
    transform: rotate(360deg);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .memory-modal-content {
    max-width: 95%;
    flex-direction: column;
  }

  .memory-modal-content::before {
    display: none; /* 移动端隐藏左页 */
  }

  .memory-modal-content::after {
    display: none; /* 移动端隐藏装订线 */
  }

  .memory-right-page {
    width: 100%;
    margin-left: 0;
  }

  .memory-cheque-actions {
    flex-direction: column;
  }

  .memory-cheque-btn {
    width: 100%;
  }
}

/* Peeping Feature Styles (iOS 16 / Game UI) */
.peeping-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.peeping-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.peeping-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Peeping Modal - Corkboard / Journal Theme */
.peeping-container {
  position: relative;
  width: 90%;
  max-width: 450px;
  height: 80vh;
  max-height: 700px;
  /* Soft Corkboard Texture */
  background-color: #f7f1e3;
  background-image: radial-gradient(#dccbb5 1px, transparent 1px),
    linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
  background-size: 20px 20px, 100% 100%;

  border-radius: 12px;
  /* Wood Frame Effect */
  border: 8px solid #deb887;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.1);

  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.peeping-modal.active .peeping-container {
  transform: scale(1) rotate(-1deg); /* Slight tilt for realism */
}

.peeping-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
}

/* Header as Tape Label */
.peeping-title {
  font-size: 20px;
  font-weight: 800;
  color: #444;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 24px;
  transform: rotate(-2deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.peeping-close-btn {
  background: #ff6b6b;
  width: 32px;
  height: 32px;
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border: 2px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
}
.peeping-close-btn:hover {
  transform: scale(1.1) rotate(90deg);
}

.peeping-content-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  position: relative;
  /* Hide scrollbar but allow scroll */
  scrollbar-width: none;
  min-height: 0; /* 关键：强制让 flex 子项可以缩小，从而触发 overflow */
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.peeping-content-area::-webkit-scrollbar {
  display: none;
}

/* Intro State */
.peeping-intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
}

.peeping-intro-icon {
  font-size: 64px;
  color: #4ecdc4;
  margin-bottom: 20px;
  background: white;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(78, 205, 196, 0.3);
}

.peeping-intro h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
  font-weight: 800;
}

.peeping-intro p {
  font-size: 15px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 30px;
  padding: 0 20px;
}

.peeping-action-btn {
  background: #4ecdc4; /* Teal */
  color: white;
  border: 3px solid white;
  padding: 12px 30px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 0 #2a9d8f, 0 8px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.peeping-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #2a9d8f, 0 10px 15px rgba(0, 0, 0, 0.2);
}

.peeping-action-btn:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 #2a9d8f, 0 0 0 rgba(0, 0, 0, 0);
}

/* Loader */
.btn-loader {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
  display: none;
}

.peeping-action-btn.loading .btn-text {
  display: none;
}

.peeping-action-btn.loading .btn-loader {
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Timeline Cards */
/* Timeline Cards - Sticky Note Board Style */
.peeping-timeline {
  display: flex;
  flex-direction: column;
  gap: 30px; /* Increased gap for visual breathing connection */
  padding: 20px 10px;
  /* User request: "便签的感觉" */
  font-family: "Microsoft YaHei", sans-serif;
}

.peeping-card {
  background: #fdf5c9; /* Warm yellow sticky note */
  border-radius: 2px; /* Sharp corners like paper block */
  padding: 15px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15); /* Lifted shadow */
  animation: slideUp 0.4s ease forwards;
  opacity: 0;
  transform: translateY(20px);
  border: none;
  width: 65%; /* Narrower cards */
  position: relative;
  color: #333;
  transition: transform 0.2s;
}

.peeping-card:hover {
  transform: scale(1.02) rotate(var(--rot)) !important;
  z-index: 10;
}

/* Tape Effect */
.peeping-card::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 35px;
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1px);
}

/* Staggered Layout logic using Flex alignment */

/* Odd items: Left aligned */
.peeping-card:nth-child(odd) {
  align-self: flex-start;
  margin-left: 10px;
  --rot: -2deg;
  background: #fdf5c9; /* Yellow */
}

/* Even items: Right aligned */
.peeping-card:nth-child(even) {
  align-self: flex-end;
  margin-right: 10px;
  --rot: 2deg;
  background: #e3f2fd; /* Light Blue */
}

.peeping-card:nth-child(3n) {
  background: #fce4ec; /* Light Pink */
}

/* Apply rotation */
.peeping-card {
  transform: translateY(20px) rotate(var(--rot));
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--rot));
  }
}

.peeping-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  align-items: center;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
  padding-bottom: 5px;
}

.peeping-time {
  font-size: 14px;
  font-weight: 700;
  color: #555;
  background: transparent;
  padding: 0;
}

.peeping-location {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  display: flex;
  align-items: center;
  gap: 4px;
}

.peeping-card-body {
  font-size: 15px;
  color: #222;
  line-height: 1.4;
  margin-bottom: 10px;
}

.peeping-spending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #d32f2f;
  border: 1px solid #d32f2f;
  padding: 2px 6px;
  border-radius: 4px;
  transform: rotate(-3deg);
  margin-bottom: 8px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.5);
}

/* Inner Thought: SVG Icon */
.peeping-inner-thought {
  font-size: 13px;
  color: #555;
  background: rgba(0, 0, 0, 0.05);
  padding: 8px;
  border-radius: 4px;
  margin-top: 5px;
  border: none;
  font-style: normal;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.peeping-thought-icon {
  flex-shrink: 0;
  color: #888;
  display: flex;
  align-items: center;
}

.peeping-thought-text {
  flex: 1;
  line-height: 1.4;
}

.feature-name {
  font-size: 10px;
  font-weight: 500;
  color: #444;
}

/* --- Meetu Feature CSS --- */

/* Screen Background */
#meetu-screen {
  background-color: #fcfbf7;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.5) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 20px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: fixed; /* Fixed to viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999; /* Very high z-index */
  overflow: hidden;
  font-family: "PingFang SC", "Songti SC", "SimSun", serif;
  color: #2c1e14;
  /* CRITICAL: Block click-through */
  pointer-events: auto;
  touch-action: auto;
}

#meetu-screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.8;
}

/* Header */
.meetu-header {
  background: transparent !important;
  background: transparent; /* Or semi-transparent */
  /* Enhance visibility against text */
  background: linear-gradient(to bottom, #fcfbf7 80%, rgba(252, 251, 247, 0));
  padding-top: env(safe-area-inset-top); /* Adapt to notch */
  height: auto;
  min-height: 60px;
  z-index: 2002; /* Above content */
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
}

.meetu-header .header-icon-button {
  color: #5d4037;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Content Area - Card Style */
.meetu-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  margin: 90px 16px 10px 16px; /* Top margin increased */
  padding: 24px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(139, 69, 19, 0.05),
    inset 0 0 20px rgba(139, 69, 19, 0.02);

  line-height: 1.8;
  color: #4a3c31;
  font-family: "Songti SC", "SimSun", serif;
  position: relative;
  z-index: 2001;
  -webkit-overflow-scrolling: touch;

  box-sizing: border-box;
  border: 1px solid rgba(139, 69, 19, 0.08);
}

/* Page Style */
.meetu-text-page {
  font-size: 17px;
  text-align: justify;
  white-space: pre-wrap;
  opacity: 1;
  transition: opacity 0.3s ease;
  /* Removed padding-bottom as the container is now a card */
  min-height: 100%; /* Fill card */
}

.meetu-text-page.active {
  opacity: 1;
  pointer-events: auto;
}

/* Page Indicator */
.meetu-page-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  gap: 24px;
  color: #a08b78;
  font-size: 13px;
  font-weight: 500;
  z-index: 2002;
  background: transparent;
}

.page-nav-btn {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(139, 69, 19, 0.1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 14px;
  color: #5d4037;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.page-nav-btn:hover {
  background: rgba(139, 69, 19, 0.08);
}
.page-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Action Buttons */
.meetu-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, #fcfbf7 60%, rgba(252, 251, 247, 0));
  z-index: 2003;
}

.meetu-action-btn.icon-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(139, 69, 19, 0.08);
  color: #5d4037;
}

.meetu-action-btn.icon-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(139, 69, 19, 0.12);
}

.meetu-action-btn.icon-btn:active {
  transform: scale(0.95);
}

.meetu-action-btn.icon-btn.primary {
  background: linear-gradient(135deg, #5d4037, #795548);
  color: #fff;
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.25);
}

.meetu-action-btn.icon-btn.primary:hover {
  box-shadow: 0 6px 16px rgba(93, 64, 55, 0.35);
}

.meetu-action-btn:active {
  transform: scale(0.95);
}

.meetu-action-btn.secondary {
  background: #efebe9;
  color: #5d4037;
  box-shadow: 0 2px 8px rgba(93, 64, 55, 0.1);
}

.meetu-action-btn.primary {
  background: #5d4037;
  color: #fff; /* text-white */
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
}

/* --- Book Flip Animation --- */
#meetu-book-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  perspective: 1500px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1); /* dim background */
}

/* This is a simple animation placeholder. 
   A full 3D book flip requires complex DOM.
   Here we simulate a single page flip revealing the content */

.book-page {
  width: 90%;
  height: 90%;
  background: #fff;
  position: absolute;
  top: 5%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-radius: 5px 15px 15px 5px;
}

.book-page.left-page {
  left: 5%;
  transform-origin: right center;
  animation: flipOpen 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  background: #fdfbf7;
  z-index: 2;
}

.book-page.right-page {
  right: 5%;
  z-index: 1;
  background: #fcfbf7;
}

@keyframes flipOpen {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-180deg);
    opacity: 0;
  }
}

/* --- Style Modal Styles --- */
/* Reuse existing styles but tweak for Meetu */
#meetu-style-list .playlist-item {
  background: #fff;
  border: 1px solid #efebe9;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 12px;
}

#meetu-style-list .playlist-item.active {
  border-color: #5d4037;
  background: #efebe9;
}

.style-card-title {
  font-weight: bold;
  color: #3e2723;
  margin-bottom: 4px;
}
.style-card-desc {
  font-size: 12px;
  color: #795548;
  line-height: 1.4;
}
.active-badge {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 10px;
  color: #fff;
  background: #5d4037;
  padding: 2px 6px;
  border-radius: 4px;
  display: none;
}
#meetu-style-list .playlist-item.active .active-badge {
  display: block;
}

/* === 消息列表样式修正 (支持 Action Sheet) === */
.contact-item {
  position: relative;
  padding: 10px 14px !important; /* 恢复 padding */
  border: none;
  display: flex; /* 恢复 flex 布局 */
  align-items: center;
  background-color: #fff;
  transition: background-color 0.2s;
  user-select: none; /* 防止长按选中文本 */
  cursor: pointer;
}

/* 长按时的视觉反馈 */
.contact-item.pressing {
  background-color: #e5e5ea;
  transform: scale(0.98);
}
.contact-item.pinned {
  background-color: #f3f3f6; /* 置顶背景色 */
}
.contact-item.pinned.pressing {
  background-color: #e5e5ea; /* 长按时统一反馈 */
}
/* 置顶标记 (右上角小三角) */
.contact-item.pinned::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent #007aff transparent transparent;
  opacity: 0.6;
}

/* === Action Sheet (iOS 风格底部菜单) === */
.action-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding-bottom: env(safe-area-inset-bottom, 20px);
}

.action-sheet-overlay.active {
  opacity: 1;
}

.action-sheet-content {
  width: 95%;
  max-width: 360px;
  margin-bottom: 10px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.action-sheet-overlay.active .action-sheet-content {
  transform: translateY(0);
}

.action-sheet-group {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 14px;
  margin-bottom: 8px;
  overflow: hidden;
}

.action-sheet-btn {
  width: 100%;
  padding: 16px;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  font-size: 17px;
  color: #007aff;
  cursor: pointer;
  font-weight: 400;
}

.action-sheet-btn:last-child {
  border-bottom: none;
}

.action-sheet-btn:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.action-sheet-btn.danger-text {
  color: #ff3b30;
}

.action-sheet-group.cancel-group {
  margin-bottom: 0;
}
.action-sheet-group.cancel-group .action-sheet-btn {
  font-weight: 600; /* 取消按钮通常加粗 */
}

/* ==========================================================
   双语折叠气泡样式 (Bilingual Collapsible Bubble)
   用户可在自定义气泡CSS中覆盖这些样式
   ========================================================== */

/* 外层容器：横向排列气泡和按钮 */
.bilingual-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* 双语气泡本体 */
.bilingual-wrapper .bilingual-bubble {
  /* 继承普通气泡样式，覆盖部分 */
  padding: 0 !important;
  overflow: hidden;
  max-width: none !important;
  min-width: auto !important;
  width: fit-content !important;
  white-space: normal !important;
}

/* 原文区域 */
.bilingual-wrapper .bilingual-original {
  padding: 8px 12px;
}

/* 虚线分隔区域 - 默认显示 */
.bilingual-wrapper .bilingual-divider {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 0px;
  transition: height 0.25s ease, opacity 0.2s ease;
}

/* 虚线 */
.bilingual-wrapper .bilingual-divider-line {
  flex: 1;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

/* 翻译区域 - 默认显示 */
.bilingual-wrapper .bilingual-translation {
  padding: 8px 14px 10px;
  color: rgba(69, 90, 100, 0.75);
  font-size: 0.92em;
  line-height: 1.5;
  /* background: rgba(0, 0, 0, 0.02); */
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.25s ease;
}

/* 折叠按钮 - 在气泡外部 */
.bilingual-wrapper .bilingual-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.bilingual-wrapper .bilingual-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}

.bilingual-wrapper .bilingual-toggle-btn:active {
  transform: scale(0.9);
}

.bilingual-wrapper .bilingual-toggle-btn svg {
  transition: transform 0.25s ease;
}

/* ===== 折叠状态：隐藏翻译和分割线 ===== */
.bilingual-wrapper.collapsed .bilingual-divider {
  height: 0;
  opacity: 0;
  padding: 0;
  overflow: hidden;
}

.bilingual-wrapper.collapsed .bilingual-translation {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.bilingual-wrapper.collapsed .bilingual-toggle-btn svg {
  transform: rotate(180deg);
}

/* === Feature: WorldBook Nested Selection Styling (Appended) === */

/* Row container for each book */
.multiselect-item-row {
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.5); /* Slight glass background */
  margin-bottom: 6px;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid transparent; /* Prepare for border transition */
}

/* Hover Effect */
.multiselect-item-row:hover {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Soft shadow */
  transform: translateY(-1px);
}

/* Active/Selected Effect */
.multiselect-item-row:active {
  transform: scale(0.98);
}

/* Custom Checkbox Styling (iOS Style) */
.multiselect-item-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid #c7c7cc;
  border-radius: 50%; /* Circular for modern feel, or 6px for square */
  margin-right: 12px !important;
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Spring transition */
  background-color: white;
  flex-shrink: 0;
}

/* Checked State */
.multiselect-item-row input[type="checkbox"]:checked {
  background-color: #3a3a3c;
  border-color: #3a3a3c;
  transform: scale(1.05);
}

/* Checkmark Icon */
.multiselect-item-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  opacity: 1;
}

/* Unchecked Hover State */
.multiselect-item-row input[type="checkbox"]:hover {
  border-color: #007aff;
}

/* Text Styling */
.multiselect-item-row span {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  user-select: none;
}


/* ============================================================ */
/* ============================================================ */
/* === 📱 iOS 核心性能救急补丁 (Fatal Crash Fix) - 已暂时禁用 === */
/* ============================================================ */
/* 
body.ios-optimize-mode * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.ios-optimize-mode .glass, body.ios-optimize-mode .modal-content, body.ios-optimize-mode .system-loader-card, body.ios-optimize-mode .nav-bar, body.ios-optimize-mode .tab-bar, body.ios-optimize-mode [class*='overlay'], body.ios-optimize-mode [class*='blur'] { background-color: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; }
@media (prefers-color-scheme: dark) { body.ios-optimize-mode .glass, body.ios-optimize-mode .modal-content, body.ios-optimize-mode .system-loader-card, body.ios-optimize-mode .nav-bar, body.ios-optimize-mode .tab-bar, body.ios-optimize-mode [class*='overlay'], body.ios-optimize-mode [class*='blur'] { background-color: rgba(30, 30, 30, 0.98) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; } }
body.ios-optimize-mode img { box-shadow: none !important; filter: none !important; }
body.ios-optimize-mode .scroll-container { -webkit-overflow-scrolling: touch; transform: translateZ(0); }
*/


/* === 🚨 iOS 终极防崩补丁 (SAFE GUARD) - 已暂时禁用 === */
/*
.ios-optimize-mode * { 
    will-change: auto !important; 
    transform: none !important; 
    animation: none !important; 
    transition: none !important;
    background-attachment: scroll !important;
}
.ios-optimize-mode .phone-frame {
    transform: none !important;
    width: 100vw !important;
}
*/


/* ================= BEAUTIFY SCREENS (Ceramic Swiss) ================= */

/* Beautify Header (Sticky/Fixed) */
#beautify-screen .settings-header {
    height: 64px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    position: sticky; 
    top: 0;
    z-index: 50;
    background: #f2f2f6;
  
    flex-shrink: 0; 
}

#beautify-screen .header-icon-button {
    width: 40px; height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.03);
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.2s;
    outline: none; padding: 0;
    position: absolute; left: 24px;
}
#beautify-screen .header-icon-button:active { transform: scale(0.92); background: #fff; }
#beautify-screen .header-icon-button svg { width: 20px; height: 20px; stroke-width: 2.5px; }

#beautify-screen h1 {
    font-size: 17px; font-weight: 700; color: var(--text-primary);
    margin: 0 auto; letter-spacing: -0.01em;
}

/* Beautify Content (Scrollable) */
#beautify-screen .settings-content {
    flex: 1;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
    padding: 16px 24px 120px; 
    scrollbar-width: none;
    height: auto; 
}
#beautify-screen .settings-content::-webkit-scrollbar { display: none; }

.beautify-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-bottom: 40px;
}

/* Card System */
.beautify-card {
    background: var(--bg-card);
    border-radius: 24px;
    padding: 20px;
    display: flex; flex-direction: column; 
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.02), 0 0 0 1px rgba(0,0,0,0.02);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    min-height: 140px;
}

.beautify-card:active { transform: scale(0.97); }
.beautify-card:hover { 
    box-shadow: 0 8px 24px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
    transform: translateY(-2px); 
}

/* Icon Container */
.beautify-card .card-icon-bg {
    width: 48px; height: 48px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: #F9F9F9;
    color: var(--text-primary);
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.beautify-card:hover .card-icon-bg { transform: scale(1.05); }
.beautify-card .card-icon-bg svg { width: 24px; height: 24px; stroke-width: 2px; }

/* Text Info */
.beautify-card .card-info { display: flex; flex-direction: column; gap: 2px; }
.beautify-card .card-label { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.beautify-card .card-sub { font-size: 11px; color: var(--text-secondary); font-weight: 500; }

/* Special Cards */
#global-beautify-btn.beautify-card {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    padding: 24px;
    min-height: 100px;
    background: linear-gradient(120deg, #FFFFFF 0%, #F5F7FA 100%);
    box-shadow: 0 8px 32px -8px rgba(0, 122, 255, 0.15), 0 0 0 1px rgba(255,255,255,0.8) inset;
    border: 1px solid rgba(0, 122, 255, 0.05);
}

#global-beautify-btn .card-icon-bg {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #E0F7FA 0%, #E3F2FD 100%);
    color: #007AFF;
    margin-right: 16px;
}
#global-beautify-btn .card-info { flex: 1; }
#global-beautify-btn .card-label { font-size: 17px; }
#global-beautify-btn .card-sub { font-size: 13px; color: #007AFF; opacity: 0.8; }
#global-beautify-btn::after {
    content: '→'; font-size: 20px; color: #D1D1D6; font-weight: 300; margin-left: 8px;
}

#manage-font-urls-btn .card-icon-bg {
    background: #F2F2F7;
    color: #8A8A8E;
}

/* Colors */
#change-icon-button .card-icon-bg { background: #F0F4F8; color: #546E7A; }
#manage-presets-button .card-icon-bg { background: #F3E5F5; color: #8E24AA; }
#theme-presets-btn .card-icon-bg { background: #E0F2F1; color: #00897B; }
#bubble-presets-btn .card-icon-bg { background: #E8F5E9; color: #43A047; }
#change-clock-button .card-icon-bg { background: #FFF3E0; color: #FB8C00; }
#motto-settings-btn .card-icon-bg { background: #FCE4EC; color: #D81B60; }
#app-name-settings-btn .card-icon-bg { background: #E8EAF6; color: #3949AB; }

/* === Universal Scrolling Container === */
.scrollable-list-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    flex: 1; /* In case it's in a flex container */
    min-height: 0;
}
.chat-messages.bubble-b-mode .message-row.group-start .chat-avatar,
.chat-messages.bubble-b-mode .message-row.group-middle .chat-avatar {
    visibility: hidden; /* Use visibility to keep layout spacing/alignment */
}

/* B Mode: Vertical Spacing (Tighter between grouped messages) */
.chat-messages.bubble-b-mode .message-row.group-middle,
.chat-messages.bubble-b-mode .message-row.group-end {
    margin-top: 1px !important; /* Changed from 2px */
}
.chat-messages.bubble-b-mode .message-row.group-start {
    margin-bottom: 1px !important; /* Changed from 2px */
}

/* B Mode: Border Radius Logic (AI - Left Side) */
/* Top: Big Top, Small Bottom-Left */
.chat-messages.bubble-b-mode .message-row.ai.group-start .chat-bubble {
    border-bottom-left-radius: 4px !important;
}
/* Middle: Small Left */
.chat-messages.bubble-b-mode .message-row.ai.group-middle .chat-bubble {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
     max-width: 85%;
}
/* Bottom: Small Top-Left, Big Bottom */
.chat-messages.bubble-b-mode .message-row.ai.group-end .chat-bubble {
    border-top-left-radius: 4px !important;
}

/* B Mode: Border Radius Logic (User - Right Side) */
/* Top: Big Top, Small Bottom-Right */
.chat-messages.bubble-b-mode .message-row.user.group-start .chat-bubble {
    border-bottom-right-radius: 4px !important;
}
/* Middle: Small Right */
.chat-messages.bubble-b-mode .message-row.user.group-middle .chat-bubble {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}
/* Bottom: Small Top-Right, Big Bottom */
.chat-messages.bubble-b-mode .message-row.user.group-end .chat-bubble {
    border-top-right-radius: 4px !important;
}

/* ============================================================ */
/* === ANTI-GRAVITY FINAL FIXES (V5): The Wrapper Killer ===     */
/* ============================================================ */

/* 核心策略：
   1. ID选择器 #chat-messages-container 提升权重。
   2. 覆盖 .message-row 的间距。
   3. 【关键新增】覆盖 .message-content-wrapper 的 margin-bottom: 10px !important */

/* 1. 彻底释放气泡宽度限制 */
#chat-messages-container.hide-avatars .msg-column,
#chat-messages-container.hide-user-avatar .message-row.user .msg-column,
#chat-messages-container.hide-char-avatar .message-row.ai .msg-column {
    max-width: 90% !important; 
    width: fit-content !important;
}

/* 2. 彻底隐藏头像容器及挂件 */
#chat-messages-container.hide-avatars .avatar-anchor,
#chat-messages-container.hide-user-avatar .message-row.user .avatar-anchor,
#chat-messages-container.hide-char-avatar .message-row.ai .avatar-anchor {
    display: none !important;
}

/* 3. 补刀：强制隐藏挂件 */
#chat-messages-container.hide-avatars .avatar-pendant,
#chat-messages-container.hide-user-avatar .message-row.user .avatar-pendant,
#chat-messages-container.hide-char-avatar .message-row.ai .avatar-pendant,
#chat-messages-container.hide-avatars .message-row .avatar-pendant {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* 4. 放宽气泡外壳宽度 */
#chat-messages-container.hide-avatars .message-content-wrapper,
#chat-messages-container.hide-user-avatar .message-row.user .message-content-wrapper,
#chat-messages-container.hide-char-avatar .message-row.ai .message-content-wrapper {
    max-width: 100% !important; 
}

/* 5. .message-row 间距修复 */
#chat-messages-container.bubble-b-mode .message-row {
    margin-top: 0 !important;
    margin-bottom: 4px !important; /* 行外部间距：2px */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#chat-messages-container.bubble-b-mode .message-row.group-end {
    margin-bottom: 12px !important; 
}

#chat-messages-container.bubble-b-mode .message-row.group-middle,
#chat-messages-container.bubble-b-mode .message-row.group-start {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

/* 6. 【终极修复】消灭 .message-content-wrapper 的内部间距 */
/* 针对用户指出的 L12497 处的 margin-bottom: 10px !important */
#chat-messages-container.bubble-b-mode .message-content-wrapper,
#chat-messages-container.bubble-b-mode .message-row .message-content-wrapper {
    margin-bottom: 0 !important; /* 强制归零，防止撑大父容器 */
    gap: 0 !important; /* 消除内部元素间距干扰 */
}

/* ============================================================ */
/* === Chat Time Separator (Capsule Style) === */
/* ============================================================ */
.chat-time-separator {
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9); /* 明亮的文字 */
    margin: 16px auto; /* 上下16px，左右自动居中 */
    width: fit-content; /* 宽度适应内容 */
    max-width: 80%;
    clear: both;
    font-weight: 500;
    
    /* 圆角矩形背景 + 高斯模糊 + 阴影 */
    background-color: rgba(0, 0, 0, 0.2); 
    padding: 2px 8px; /* 稍微紧凑一点的内边距 */
    border-radius: 10px; /* 胶囊圆角 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 轻微阴影提升层次感 */
    
    /* 确保不被选中 */
    /* 确保不被选中 */
    user-select: none;
    -webkit-user-select: none;
}
.anecdotes-input {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.letter-paper {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.collection-binder {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.bb-view-home {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.bb-view-home .bb-view-home-content {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.bb-retina-container {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.bb-retina-item {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.bb-heartbeat-list {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.transactions-page-content {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.transactions-page-content .transactions-page-content-wrapper {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.memory-cheques-container {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.memory-cheques-container .memory-cheques-content {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.orders-list-container {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.orders-list-container .orders-list-content {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.cart-items-container {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.cart-items-container .cart-items-content {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.lw-view-moments {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.lw-view-subtext {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}
.lw-view-subtext .lw-view-subtext-content {
  min-height: 0;
  -webkit-overflow-scrolling: touch; /* 确保 iOS 滑动流畅 */
}