@charset "UTF-8";
/* ===== CSS 变量定义 - 控制整体主题样式 ===== */
:root {
  /*颜色系统*/
  --c-text-primary: #1c1c1e;
  --c-text-secondary: #8e8e93;
  --c-text-tertiary: #c7c7cc;
  --c-bg-primary: #ffffff;
  --c-bg-secondary: #f2f2f5;
  --c-bg-tertiary: #f8f8f8;
  --c-border: #f0f0f0;
  --c-border-light: #e5e5e5;
  --c-accent: #007aff;
  --c-accent-green: #34C759;
  --c-accent-red: #ff3b30;
  --c-black: #000;
  /*间距系统 (固定像素值)*/
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 25px;
  /*圆角系统*/
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.15);
  /*字体大小*/
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 22px;
}

/* =================================================================== */
/* == 【最终版】手机端响应式变量 (字体固定 + 布局微调) == */
/* =================================================================== */
@media (max-width: 600px) {
  :root {
    /*
     * --- 新策略 ---
     * 1. 核心字体 (如正文、按钮文字) 使用固定的 px 值，保证在所有手机上阅读体验一致。
     * 2. 布局间距和少数大标题使用 clamp()，允许它们在合理范围内缩放，但不会无限变大。
     */
    /* --- 【重点修改】响应式间距，使用 clamp() 并收紧最大值 --- */
    /* 这将保证边距会缩放，但不会撑得太大 */
    --space-xs: clamp(4px, 1.28vw, 5px); /* 在 4px-5px 之间缩放 */
    --space-sm: clamp(8px, 2.56vw, 10px); /* 在 8px-10px 之间缩放 */
    --space-md: clamp(12px, 3.84vw, 15px); /* 在 12px-15px 之间缩放 */
    --space-lg: clamp(16px, 5.12vw, 20px); /* 在 16px-20px 之间缩放 */
    --space-xl: clamp(24px, 6.41vw, 28px); /* 在 24px-28px 之间缩放 */
    /* --- 响应式圆角 (这个影响不大，保持原样) --- */
    --radius-sm: 2.05vw;
    --radius-md: 3.07vw;
    --radius-lg: 4.1vw;
    --radius-xl: 5.64vw;
    /* --- 【！！！核心修改！！！】固定核心字体大小 --- */
    /* 我们不再让这些字体缩放，这会彻底解决“字体偏大”的问题 */
    --font-sm: 14px; /* (原14px) 比如时间、小标签等，固定住！ */
    --font-md: 16px; /* (原16px) 比如按钮文字、正文，固定住！这是最重要的！ */
    /* 对于较大的标题，我们仍然允许轻微缩放，但范围收得很紧 */
    --font-lg: clamp(17px, 4.61vw, 18px); /* (原18px) 只允许在 17-18px 之间变化 */
    --font-xl: clamp(20px, 5.64vw, 22px); /* (原22px) 只允许在 20-22px 之间变化 */
  }
}
/* 
  “启动幕帘”：默认隐藏整个 body，
  防止在 JS 初始化完成前出现内容闪烁或布局错乱。
  JS 会在一切就绪后将其设置为 'visible'。
*/
body {
  visibility: hidden;
}

/* ===== 基础布局样式 ===== */
body {
  margin: 0;
  padding: 0;
  /* ▼▼▼ 修改开始：把 body 钉死在屏幕上，这是 iOS 不乱动的关键 ▼▼▼ */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  /* ▲▲▲ 修改结束 ▲▲▲ */
  height: 100%;
  width: 100%;
  overscroll-behavior: none;
  background-color: var(--c-bg-primary, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}

:root {
  /* 默认情况下，这个变量是空的，所以会使用备用字体 */
  --custom-font-family: ;
}

*, *::before, *::after {
  /* 当 --custom-font-family 有值时，它会被优先使用 */
  font-family: var(--custom-font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ===== 全局防误触优化 ===== */
/* 禁止在图片和小组件上长按时弹出系统菜单 (如“保存图片”)，提升App感 */
img, .large-photo-widget, .ticket-widget, .app-icon {
  -webkit-touch-callout: none; /* iOS Safari 关键 */
  -moz-user-select: none;
       user-select: none; /* 禁止选中文本 (标准) */
  -webkit-user-select: none; /* 兼容旧版 Safari */
}

/* ================================================== */
/* =========   全局样式重置 (Global Reset)    ========= */
/* ================================================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* 这是我们的第一道防线：直接禁止页面本身滚动和回弹 */
  overflow: hidden;
  overscroll-behavior: none;
  /* 恢复默认定位，不再使用 fixed */
  position: static;
  background-color: #000;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* 仅在桌面端 (宽度大于 600px) 应用居中效果 */
@media (min-width: 601px) {
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1a1a1a;
  }
}
/* ================================================== */
/* =========      核心布局 (Core Layout)      ========= */
/* ================================================== */
/* 1. 主容器 #flj8W 的通用样式 */
#flj8W {
  margin: 0;
  padding: 0;
  background-color: var(--c-bg-primary, #ffffff);
  /* 确保容器内部也剪裁溢出，防止子元素撑大容器 */
  overflow: hidden;
  z-index: 1;
}

/* 2. 手机端：让主容器 #flj8W 成为“钉死”的那个 */
@media (max-width: 600px) {
  #flj8W {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* ▼▼▼ 修改这里：改成 100% ▼▼▼ */
    /* 因为我们在 base.scss 里把 body 设为了 fixed，这里用 100% 就最稳 */
    height: 100%;
    /* ▲▲▲ 修改结束 ▲▲▲ */
    border-radius: 0;
    box-shadow: none;
    /* 建议加上层级，确保在最上层 */
    z-index: 1;
  }
}
/* 3. 桌面端：恢复主容器 #flj8W 为普通块，以便居中 */
@media (min-width: 601px) {
  #flj8W {
    /* 在桌面端，它是一个相对定位的普通盒子 */
    position: relative;
    width: 390px;
    height: 844px;
    border-radius: 40px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
  }
}
/* 页面内部容器 */
.phone-screen {
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  background-color: var(--c-bg-primary);
  background-size: cover;
  background-position: center;
  /* 确保内部滚动不会影响外部 */
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 桌面端特有的圆角 */
@media (min-width: 601px) {
  .phone-screen {
    border-radius: inherit; /* 继承父容器 #flj8W 的圆角 */
  }
}
.app-page {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 50;
  flex-direction: column;
  box-sizing: border-box;
}

/* ✅✅✅ 替换原本的 .app-header 代码 ✅✅✅ */
.app-header {
  /* 
   * 【改为固定高度】
   * 不再询问浏览器是否有刘海，不再使用 env()。
   * 直接给 30px，这个高度刚好能放下普通手机的状态栏，
   * 即使在游戏模式下没有状态栏，这个间距也就是普通的顶部留白，看着很舒服。
   */
  padding-top: 35px;
  padding-bottom: 10px;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  box-sizing: border-box;
  /* --- 尺寸和布局 --- */
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  background-color: transparent;
  z-index: 100;
  /* --- 边框逻辑 (保持不变) --- */
}
.app-page:not([id^=page-settings]):not(#page-chat):not(#page-dynamics):not(#page-profile) .app-header {
  border-bottom: 1px solid var(--c-border-light);
}

.app-title {
  font-size: var(--font-lg);
  font-weight: 600;
  margin: 0;
}

.app-content {
  flex-grow: 1;
  min-height: 0;
  /* ✅ 修改 padding，底部增加安全距离防止被手机横条遮挡 */
  padding: var(--space-lg);
  padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 让苹果手机滚动更顺滑 */
  display: flex;
  flex-direction: column;
  background-color: var(--c-bg-primary);
  background-size: cover;
  background-position: center;
}

/* 👇👇👇 在这里插入这条针对 #page-dynamics 的特例 👇👇👇 */
#page-dynamics .app-content {
  background-color: #ffffff; /* 强制纯白背景 */
}

.header-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  line-height: 0;
  position: absolute;
}

.back-button {
  left: var(--space-md);
}
.back-button .back-button-icon-wrapper {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-button .back-button-icon-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.back-button svg {
  width: 100%;
  height: 100%;
  stroke: #333;
  stroke-width: 2.5;
}

/* ✅✅✅ 替换文件最底部的 @media 代码 ✅✅✅ */
@media (max-width: 600px) {
  .app-header {
    /* 
     * 手机端适配：
     * 直接设为 8vw (大约是30px)，固定不变。
     * 无论是否开启游戏模式，这个顶部距离永远锁死。
     */
    padding-top: 13vw;
    padding-bottom: 2.5vw;
    min-height: 14vw;
  }
  .back-button .back-button-icon-wrapper {
    width: 5.64vw;
    height: 5.64vw;
  }
  .header-button {
    padding: 2.05vw;
  }
}
/* ======================================================= */
/* === ✅ 【终极解决方案】强制动态页面为纯白背景 === */
/* ======================================================= */
#page-dynamics .app-content {
  /* 
   * 1. 用 !important 覆盖 JS 添加的行内 background-image。
   *    这是战胜 element.style 的唯一方法。
   */
  background-image: none !important;
  /* 
   * 2. 设置我们期望的纯白背景。
   *    因为上一步解除了 _chat.scss 的绑定，这里可以放心设置。
   */
  background-color: #ffffff;
}

.app-dock {
  position: absolute;
  bottom: 30px;
  left: var(--space-md);
  right: var(--space-md);
  height: 85px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 28px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 var(--space-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.app-dock .app-icon .app-name {
  display: none;
}

.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  width: 60px;
}
.app-icon .icon-bg {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
  transition: background-color 0.3s ease;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.app-icon .icon-bg svg {
  width: 30px;
  height: 30px;
  fill: white;
  transition: opacity 0.3s ease;
}
.app-icon .icon-bg.has-image svg {
  opacity: 0;
}
.app-icon .icon-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
.app-icon .app-name {
  color: #333;
  font-size: 11px;
  font-weight: 500;
}

#sms-icon .icon-bg {
  background-color: #2979FF;
}

#phone-icon .icon-bg {
  background-color: #4CAF50;
}

#memory-icon .icon-bg,
#gallery-icon .icon-bg,
#shop-icon .icon-bg {
  background-color: transparent !important;
}

#memo-icon .icon-bg,
#settings-icon .icon-bg,
#love-icon .icon-bg,
#chat-icon .icon-bg {
  background-color: var(--c-bg-primary);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

#memo-icon svg,
#love-icon svg,
#chat-icon svg {
  fill: none;
}

#settings-icon .icon-bg {
  position: relative;
  overflow: hidden;
}
#settings-icon .icon-bg::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: rgba(160, 232, 213, 0.85);
  right: -4px;
  bottom: -6px;
  border-radius: 6px;
  transform: rotate(-15deg);
  z-index: 1;
}
#settings-icon svg {
  fill: none;
  stroke: #2c2c2c;
  stroke-width: 2;
  position: relative;
  z-index: 2;
}

/* --- 响应式布局: 手机端适配 (屏幕宽度小于等于 600px) --- */
@media (max-width: 600px) {
  .app-icon {
    gap: 1.6vw;
    width: 16vw;
  }
  .app-icon .icon-bg {
    width: 16vw;
    height: 16vw;
    border-radius: 4vw;
    box-shadow: 0 1.6vw 4vw rgba(0, 0, 0, 0.12);
  }
  .app-icon .icon-bg svg {
    width: 8vw;
    height: 8vw;
  }
  .app-icon .app-name {
    font-size: 2.9vw;
  }
  #settings-icon .icon-bg::after {
    width: 6.4vw;
    height: 6.4vw;
    right: -1.1vw;
    bottom: -1.6vw;
    border-radius: 1.6vw;
  }
}
.chat-bottom-nav {
  position: absolute;
  bottom: var(--space-md, 16px);
  left: var(--space-md, 16px);
  right: var(--space-md, 16px);
  height: 64px;
  border-radius: 100px;
  background: white;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 60;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.chat-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: var(--font-xs);
  color: var(--c-text-secondary);
  cursor: pointer;
}
.chat-bottom-nav .nav-item svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
  fill: none;
  stroke: var(--c-text-secondary);
}
.chat-bottom-nav .nav-item.active {
  color: #8a6dff;
}
.chat-bottom-nav .nav-item.active svg {
  stroke: #8a6dff;
  fill: rgba(138, 109, 255, 0.1);
}

.btn {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--font-md);
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn.btn-primary {
  background-color: var(--c-text-primary);
  color: white;
}
.btn.btn-primary:hover {
  background-color: #333;
}
.btn.btn-secondary {
  background-color: var(--c-bg-secondary);
  color: var(--c-text-primary);
}
.btn.btn-secondary:hover {
  background-color: #e5e5ea;
}
.btn.btn-accent {
  background-color: var(--c-accent);
  color: white;
}
.btn.btn-small {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.btn.btn-small.btn-save {
  background-color: var(--c-text-primary);
  color: white;
}
.btn.btn-small.btn-reset {
  background-color: var(--c-text-secondary);
  color: white;
}
.btn.full-width {
  width: 100%;
}

.btn-group {
  display: flex;
  gap: var(--space-sm);
  margin-top: 30px;
}
.btn-group .btn {
  flex-grow: 1;
}

.settings-card {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

/* ==========================================================================
   ▼▼▼ 【新增】历史记录弹窗里的卡片样式 ▼▼▼
   ========================================================================== */
.history-record-card {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #F0F0F0;
  gap: 12px;
}
.history-record-card:last-child {
  border-bottom: none;
}
.history-record-card .history-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}
.history-record-card .history-card-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.history-record-card .history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.history-record-card .history-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.history-record-card .history-card-time {
  font-size: 12px;
  color: #999;
}
.history-record-card .history-card-text {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  margin: 0;
  word-break: break-word;
}

#chat-reply-preview {
  background-color: var(--c-bg-tertiary);
  margin: 0 var(--space-md) var(--space-sm);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border-left: 3px solid #8a6dff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-sm);
  transition: all 0.2s ease-in-out;
}
#chat-reply-preview.hidden {
  display: none;
}

.reply-preview-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
}
.reply-preview-content span {
  font-weight: 600;
  color: #8a6dff;
  display: block;
  margin-bottom: 2px;
  font-size: var(--font-sm);
}
.reply-preview-content p {
  margin: 0;
  color: var(--c-text-secondary);
  font-size: var(--font-xs);
}

.reply-preview-close {
  font-size: 24px;
  color: var(--c-text-tertiary);
  cursor: pointer;
  padding: 0 8px;
  font-weight: 300;
  flex-shrink: 0;
}

.chat-input-container {
  flex-shrink: 0;
  background-color: transparent;
  box-shadow: none;
  /* ✅ 关键修改：底部增加安全距离 */
  padding: 8px 0;
  padding-bottom: 11px;
  display: flex;
  flex-direction: column;
  border-top: none;
  z-index: 50; /* 提高层级 */
  width: 100%; /* 确保不被挤压 */
}

.chat-input-area {
  background-color: transparent;
  border-top: none;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  position: relative;
}

.text-input-wrapper {
  background-color: var(--c-bg-secondary);
  border-radius: var(--radius-xl);
  padding: 0 12px;
  display: flex;
  align-items: center;
  position: relative;
  flex-grow: 1;
  min-width: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 8;
}
.text-input-wrapper.expanded {
  margin-right: calc(-36px - var(--space-sm) - 36px - 8px - var(--space-sm));
  padding-right: 56px;
}
.text-input-wrapper.has-text .send-to-screen-btn {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}

#chat-input-field {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--font-md);
  padding: 11px 0;
  line-height: 1.5;
  -moz-user-select: text !important;
       user-select: text !important; /* 强制允许选中文字 */
  -webkit-user-select: text !important; /* 兼容安卓内核 */
  pointer-events: auto !important; /* 强制接收点击事件 */
  touch-action: manipulation; /* 优化触摸响应 */
  z-index: 10; /* 提升层级，防止被背景遮挡 */
  /* ▲▲▲ 添加结束 ▲▲▲ */
}
#chat-input-field::-moz-placeholder {
  color: var(--c-text-tertiary);
}
#chat-input-field::placeholder {
  color: var(--c-text-tertiary);
}

.chat-grid-btn {
  flex-shrink: 0;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}
.chat-grid-btn svg {
  width: 26px;
  height: 26px;
  stroke: var(--c-text-secondary);
}

.chat-emoji-btn {
  flex-shrink: 0;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
}
.chat-emoji-btn svg {
  width: 28px;
  height: 28px;
  stroke: var(--c-text-secondary);
}
.chat-emoji-btn.fade-out {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

#send-message-btn {
  background-color: #007AFF;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
  flex-shrink: 0;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
}
#send-message-btn svg {
  stroke: white;
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}
#send-message-btn.fade-out {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.send-to-screen-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
  z-index: 10;
}
.send-to-screen-btn svg {
  width: 20px;
  height: 20px;
  stroke: #007AFF;
  stroke-width: 2;
}

@media (max-width: 768px) {
  #chat-reply-preview {
    margin: 0 12px var(--space-sm);
  }
  .chat-input-area {
    padding: 0 12px;
    gap: 6px;
  }
  #chat-input-field {
    /* 
     * ▼▼▼【核心修改2】▼▼▼
     * 为了让移动端更紧凑，我们将垂直 padding 从 10px 进一步减小到 8px。
     * 这会比桌面端的 9px 更矮，符合移动端的设计原则。
    */
    padding: 9px 0;
    font-size: 15px;
  }
  .text-input-wrapper.expanded {
    margin-right: -78px;
  }
}
.conversation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: white;
  border-radius: var(--radius-lg);
  padding: 10px var(--space-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.conversation-item.is-pinned {
  background-color: #f8f8fa;
  border-left: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07), 0 12px 28px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
  position: relative;
  z-index: 10;
}
.conversation-item.delete-mode {
  transform: none !important;
}
.conversation-item.delete-mode .friend-pin-btn,
.conversation-item.delete-mode .friend-delete-btn {
  opacity: 1;
  pointer-events: auto;
}
.conversation-item .chat-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
}
.conversation-item .chat-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.conversation-item .online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background-color: var(--c-accent-green);
  border-radius: 50%;
  border: 2px solid white;
}
.conversation-item .chat-details {
  flex: 1;
  min-width: 0;
}
.conversation-item .chat-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 2px;
  white-space: nowrap;
}
.conversation-item .chat-name {
  font-weight: bold;
  font-size: var(--font-md);
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 60%;
}
.conversation-item .chat-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversation-item .chat-tag.tag-green {
  background-color: #d4f8e5;
  color: #34c759;
}
.conversation-item .chat-tag.tag-orange {
  background-color: #fff0e0;
  color: #ff9500;
}
.conversation-item .chat-tag.tag-purple {
  background-color: #f0eaff;
  color: #af52de;
}
.conversation-item .chat-preview {
  font-size: var(--font-sm);
  color: var(--c-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversation-item .chat-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.conversation-item .timestamp {
  font-size: var(--font-xs);
  color: var(--c-text-tertiary);
}
.conversation-item .unread-dot {
  width: 8px;
  height: 8px;
  background-color: var(--c-accent-red);
  border-radius: 50%;
}
.conversation-item .friend-item-checkbox {
  display: none;
  margin-right: var(--space-sm);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.conversation-item .chat-actions-container {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}
.conversation-item .friend-pin-btn,
.conversation-item .friend-delete-btn {
  position: relative;
  right: auto;
  transform: none;
  margin-left: 8px;
}

.friend-selection-mode .conversation-item {
  background-color: #f5f3ff;
}
.friend-selection-mode .conversation-item .friend-item-checkbox {
  display: block;
}

.contacts-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 12px var(--space-md);
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.contacts-list-item:active {
  background-color: #eef5ff;
  transform: scale(0.98);
}
.contacts-list-item.item-selected {
  background-color: #eef5ff;
}
.contacts-list-item:last-child {
  border-bottom: none;
}
.contacts-list-item .item-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  justify-content: center;
  align-items: center;
}
.contacts-list-item .item-icon svg {
  width: 24px;
  height: 24px;
  stroke: white;
}
.contacts-list-item .item-icon.icon-bg-blue {
  background-color: #5ac8fa;
}
.contacts-list-item .item-icon.icon-bg-green {
  background-color: #34c759;
}
.contacts-list-item .contact-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}
.contacts-list-item .item-text {
  font-size: var(--font-md);
  font-weight: 500;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contacts-list-item input[type=checkbox] {
  display: none;
  margin-right: var(--space-sm);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.selection-mode .contacts-list-item input[type=checkbox] {
  display: block;
}

.fab-container {
  position: absolute;
  bottom: var(--space-xl);
  right: var(--space-xl);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-md);
  z-index: 100;
}
.fab-container.active .fab {
  transform: rotate(45deg);
  background-color: #555;
}
.fab-container.active .fab-action-item {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fab-container.active .fab-action-item:nth-child(1) {
  transition-delay: 0.1s;
}
.fab-container.active .fab-action-item:nth-child(2) {
  transition-delay: 0.05s;
}

.fab {
  width: 56px;
  height: 56px;
  background-color: var(--c-accent);
  color: white;
  border-radius: 50%;
  border: none;
  box-shadow: var(--shadow-lg);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
  flex-shrink: 0;
}
.fab svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.fab-actions {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-md);
}

.fab-action-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.fab-action-label {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.fab-action {
  width: 48px;
  height: 48px;
  background-color: var(--c-bg-primary);
  color: var(--c-text-primary);
  border-radius: 50%;
  border: none;
  box-shadow: var(--shadow-md);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.fab-action svg {
  width: 22px;
  height: 22px;
}

.chat-function-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  padding: 25px 20px calc(25px + env(safe-area-inset-bottom));
  z-index: 99;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  border-width: 1.5px;
  border-style: solid;
  -o-border-image: linear-gradient(to bottom, #E9E1FF, #F4EFFF) 1;
     border-image: linear-gradient(to bottom, #E9E1FF, #F4EFFF) 1;
}
.chat-function-panel.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  gap: 20px 15px;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.function-item .icon-bg {
  width: auto;
  height: auto;
  background-color: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: transform 0.2s ease;
}
.function-item .icon-bg svg {
  width: 32px;
  height: 32px;
}
.function-item .icon-bg svg .primary-stroke {
  stroke: #4b4b4b;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.function-item .icon-bg svg .accent-fill {
  fill: #8a6dff;
  stroke: none;
}
.function-item:active .icon-bg {
  transform: scale(0.92);
}
.function-item .function-label {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 14px var(--radius-lg);
  cursor: pointer;
  border-bottom: 1px solid var(--c-border);
  transition: background-color 0.2s ease;
  font-size: var(--font-md);
}
.list-item:last-child {
  border-bottom: none;
}
.list-item:hover {
  background-color: var(--c-bg-tertiary);
}
.list-item .settings-item-icon {
  margin-right: var(--radius-lg);
  display: flex;
  align-items: center;
}
.list-item .settings-item-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
  stroke: #333;
  fill: none;
}
.list-item .settings-item-text {
  flex-grow: 1;
  color: var(--c-text-primary);
}
.list-item .settings-item-arrow svg {
  width: 16px;
  height: 16px;
  stroke: var(--c-text-tertiary);
  stroke-width: 2.5;
}

#chat-message-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  height: 100%;
  overflow-y: auto;
  padding: var(--space-sm) 16px;
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#chat-message-list::-webkit-scrollbar {
  display: none;
}

.message-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 80%;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  position: relative;
}
.message-wrapper.received {
  align-self: flex-start;
}
.message-wrapper.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.message-wrapper.selected {
  background-color: rgba(0, 122, 255, 0.1);
  border-radius: var(--radius-md);
}
.message-wrapper.selected::before {
  content: "✓";
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: var(--c-accent);
  color: white;
  font-weight: bold;
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 1;
}
.message-wrapper .message-timestamp-outside {
  color: #8e8e93;
  font-size: 10px;
  white-space: nowrap;
  margin: 0;
  padding-bottom: 3px;
}

.chat-avatar-small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.bubble-container {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.message-wrapper.sent .bubble-container {
  flex-direction: row-reverse;
}

.message-bubble {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.message-bubble p {
  padding: var(--space-sm) var(--space-md);
  margin: 0;
  font-size: var(--font-md);
  line-height: 1.5;
  word-break: break-word;
}

.message-wrapper.sent .message-bubble {
  background-color: #8a6dff;
  color: white;
}
#page-voice-call .message-wrapper.sent .message-bubble {
  background-color: rgba(80, 80, 80, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.message-reply-preview {
  padding: 10px 12px;
  margin: 8px 12px 0;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 3px solid;
  position: relative;
}
.message-reply-preview strong {
  font-weight: 600;
}

.message-wrapper.received .message-reply-preview {
  background-color: var(--c-bg-secondary);
  color: var(--c-text-secondary);
  border-color: #dcdcdc;
}
.message-wrapper.received .message-reply-preview strong {
  color: var(--c-text-primary);
}

.message-wrapper.sent .message-reply-preview {
  background-color: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
}
.message-wrapper.sent .message-reply-preview strong {
  color: white;
}

.message-bubble.sticker-bubble {
  background: transparent;
  box-shadow: none;
  padding: 0;
  max-width: 120px;
}
.message-bubble.sticker-bubble img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.message-bubble.gallery-image-bubble {
  padding: 0;
  border: none;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
  border-radius: var(--radius-lg);
  max-width: 60%;
  min-height: 50px;
  background-color: #efeff4;
  cursor: pointer;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.message-bubble.gallery-image-bubble img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.message-bubble.gallery-image-bubble.expanded .gallery-image-preview {
  opacity: 0;
}
.message-bubble.gallery-image-bubble.expanded .gallery-image-details {
  opacity: 1;
}

.message-bubble.photo-card {
  width: 150px;
  height: 150px;
  background-color: var(--c-bg-secondary);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
  position: relative;
}
.message-bubble.photo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-border-light);
}
.message-bubble.photo-card.expanded .photo-card-preview {
  opacity: 0;
  pointer-events: none;
}
.message-bubble.photo-card.expanded .photo-card-details {
  opacity: 1;
  pointer-events: auto;
}

.photo-card-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  transition: opacity 0.3s ease;
}
.photo-card-preview .photo-card-placeholder-icon svg {
  width: 60px;
  height: 60px;
  stroke: var(--c-text-tertiary);
  stroke-width: 1.5;
}
.photo-card-preview .preview-text {
  font-size: var(--font-sm);
  color: var(--c-text-secondary);
  font-weight: 500;
}

.photo-card-details {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-bg-primary);
  padding: var(--space-md);
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-primary);
  word-break: break-word;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.photo-card-details::-webkit-scrollbar {
  display: none;
}

.gallery-image-preview {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

.gallery-image-details {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-bg-primary);
  padding: var(--space-md);
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.gallery-image-details p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-primary);
  word-break: break-word;
}

.message-bubble.is-location-message {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

.location-card {
  width: 220px;
  background-color: var(--c-bg-primary);
  border: 1px solid var(--c-border-light);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.location-card:hover {
  box-shadow: var(--shadow-md);
}

.location-card-text {
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--c-text-primary);
  border-bottom: 1px solid var(--c-border-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.location-card-map {
  width: 100%;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.message-bubble.is-transfer-message {
  padding: 0;
  background: transparent;
  box-shadow: none;
  width: 240px;
  overflow: visible;
}

.transfer-card {
  border-radius: 8px;
  width: 100%;
}
.transfer-card.transfer-pending {
  background-color: #FA9D3B;
}
.transfer-card.transfer-receipt {
  background-color: #F3E6D3 !important;
}

.message-wrapper.sent .is-transfer-message .transfer-card.transfer-pending::after {
  border-left-color: #FA9D3B;
}
.message-wrapper.sent .is-transfer-message .transfer-card.transfer-receipt::after {
  border-left-color: #F3E6D3 !important;
}

.message-wrapper.received .is-transfer-message .transfer-card.transfer-pending {
  background-color: #FFFFFF;
}
.message-wrapper.received .is-transfer-message .transfer-card.transfer-pending .transfer-text-group p {
  color: #000;
}
.message-wrapper.received .is-transfer-message .transfer-card.transfer-pending .transfer-footer {
  color: #888;
}
.message-wrapper.received .is-transfer-message .transfer-card.transfer-pending::after {
  border-right-color: #FFFFFF;
}
.message-wrapper.received .is-transfer-message .transfer-card.transfer-receipt .transfer-text-group p {
  color: #444;
}
.message-wrapper.received .is-transfer-message .transfer-card.transfer-receipt .transfer-footer {
  color: #888;
}
.message-wrapper.received .is-transfer-message .transfer-card.transfer-receipt::after {
  border-right-color: #F3E6D3 !important;
}

.transfer-content-wrapper {
  display: flex;
  align-items: center;
  padding: 12px;
}

.transfer-icon {
  width: 36px;
  height: 36px;
  margin-right: 12px;
  flex-shrink: 0;
}

.transfer-text-group {
  display: flex;
  flex-direction: column;
}
.transfer-text-group p {
  margin: 0;
  line-height: 1.4;
  color: white;
  padding: 0;
}
.transfer-text-group .amount {
  font-size: 16px;
  font-weight: 500;
}
.transfer-text-group .status-text {
  font-size: 14px;
}

.transfer-footer {
  font-size: 12px;
  padding: 4px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.message-bubble.is-voice-message {
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  align-items: flex-start;
}

.message-wrapper.sent .message-bubble.is-voice-message {
  align-items: flex-end;
}

.voice-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-lg);
  transition: background-color 0.2s;
  width: 180px;
  box-sizing: border-box;
}
.voice-bar .voice-duration {
  font-size: var(--font-sm);
  font-weight: 500;
  white-space: nowrap;
}

.message-wrapper.received .voice-bar {
  background-color: var(--c-bg-primary);
  box-shadow: var(--shadow-sm);
}
.message-wrapper.received .voice-bar .voice-duration {
  color: var(--c-text-secondary);
}
.message-wrapper.received .voice-bar .bar {
  background-color: var(--c-text-primary);
}

.message-wrapper.sent .voice-bar {
  background-color: #8a6dff;
  flex-direction: row-reverse;
}
.message-wrapper.sent .voice-bar .voice-duration {
  color: white;
}
.message-wrapper.sent .voice-bar .bar {
  background-color: white;
}

.voice-text-content {
  display: none;
  margin-top: 8px;
  padding: 10px 14px;
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text-primary);
  word-break: break-word;
  max-width: 260px;
}

.message-wrapper.voice-expanded .voice-text-content {
  display: block;
}

.voice-waveform {
  flex-grow: 1;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.voice-waveform .bar {
  width: 2px;
  height: 100%;
  border-radius: 2px;
  animation: sound-wave-staggered 2.2s infinite alternate;
  transform-origin: center;
}
.voice-waveform .bar:nth-child(5n+1) {
  animation-delay: -1.4s;
}
.voice-waveform .bar:nth-child(5n+2) {
  animation-delay: -1.1s;
}
.voice-waveform .bar:nth-child(5n+3) {
  animation-delay: -0.8s;
}
.voice-waveform .bar:nth-child(5n+4) {
  animation-delay: -0.5s;
}
.voice-waveform .bar:nth-child(5n+5) {
  animation-delay: -0.2s;
}

@keyframes sound-wave-staggered {
  0% {
    transform: scaleY(0.1);
  }
  25% {
    transform: scaleY(0.8);
  }
  50% {
    transform: scaleY(0.3);
  }
  75% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.2);
  }
}
.message-bubble.is-voice-call-summary,
.message-bubble.is-voice-call-rejected {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  padding: 10px 14px !important;
  border-radius: var(--radius-md) !important;
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.message-bubble.is-voice-call-summary p,
.message-bubble.is-voice-call-rejected p {
  padding: 0 !important;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}
.message-bubble.is-voice-call-summary svg,
.message-bubble.is-voice-call-rejected svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.message-bubble.is-voice-call-summary .call-status-icon,
.message-bubble.is-voice-call-rejected .call-status-icon {
  width: 16px;
  height: 16px;
  stroke: var(--c-text-primary);
  transform: rotate(135deg);
}

.message-wrapper.sent .message-bubble.is-voice-call-summary p,
.message-wrapper.sent .message-bubble.is-voice-call-rejected p {
  color: white;
}
.message-wrapper.sent .message-bubble.is-voice-call-summary svg,
.message-wrapper.sent .message-bubble.is-voice-call-rejected svg {
  stroke: white;
}

.message-wrapper.recalled {
  width: 100%;
  max-width: 100%;
  align-self: center;
  justify-content: center;
  margin: 8px 0;
  padding: 0;
}

.recalled-text {
  font-size: 12px;
  color: #b2b2b7;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ========================================================================== */
/* === 【V3 - 最终版】转账功能样式 (Transfer Feature) === */
/* ========================================================================== */
/* --- 1. 聊天气泡中的转账/回执卡片 --- */
.message-bubble.is-transfer-message {
  padding: 0;
  background: transparent;
  width: 220px; /* <-- 修改 */
  overflow: visible;
}

.transfer-card {
  border-radius: 8px; /* <-- 修改 */
  width: 100%;
}

/* 待处理的转账 (橙色) */
.message-wrapper.sent .is-transfer-message .transfer-card.transfer-pending {
  background-color: #FA9D3B;
}

.message-wrapper.sent .is-transfer-message .transfer-card.transfer-pending::after {
  border-left-color: #FA9D3B;
}

.message-wrapper.received .is-transfer-message .transfer-card.transfer-pending {
  background-color: #FA9D3B;
}

.message-wrapper.received .is-transfer-message .transfer-card.transfer-pending::after {
  border-right-color: #FFFFFF;
}

.message-wrapper.received .is-transfer-message .transfer-card.transfer-pending .transfer-text-group p {
  color: #000;
}

.message-wrapper.received .is-transfer-message .transfer-card.transfer-pending .transfer-footer {
  color: #888;
}

/* 已完成/已退回的回执 (米色) */
.transfer-card.transfer-receipt {
  background-color: #F3E6D3 !important;
}

.message-wrapper.sent .is-transfer-message .transfer-card.transfer-receipt::after {
  border-left-color: #F3E6D3 !important;
}

.message-wrapper.received .is-transfer-message .transfer-card.transfer-receipt::after {
  border-right-color: #F3E6D3 !important;
}

.transfer-card.transfer-receipt .transfer-text-group p {
  color: #444;
}

.transfer-card.transfer-receipt .transfer-footer {
  color: #888;
}

/* 卡片内部结构 */
.transfer-content-wrapper {
  display: flex;
  align-items: center;
  padding: 14px 12px; /* <-- 修改 */
}

.transfer-icon {
  width: 36px; /* <-- 修改 */
  height: 36px; /* <-- 修改 */
  margin-right: 12px;
  flex-shrink: 0;
}

.transfer-text-group {
  display: flex;
  flex-direction: column;
}

.transfer-text-group p {
  margin: 0;
  line-height: 1.3;
  color: white;
}

.transfer-text-group .amount {
  font-size: 16px;
  font-weight: 500;
}

.transfer-text-group .status-text {
  font-size: 14px;
}

.transfer-footer {
  font-size: 12px;
  padding: 6px 12px; /* <-- 修改 */
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

/* ========================================================================== */
/* == 10. 系统事件消息 (System Event Message) == */
/* ========================================================================== */
.message-system-event.is-date-start,
.message-system-event.is-date-end {
  background-color: #e5e5ea; /* 一个更中性的灰色，类似iOS系统提示 */
  color: #8e8e93; /* 搭配的文字颜色 */
  padding: 4px 12px; /* 减小内边距，让它更紧凑 */
  border-radius: 12px; /* 合适的圆角 */
  font-size: 12px; /* 减小字体大小 */
  margin: 8px auto; /* 减小垂直边距，左右居中 */
  max-width: -moz-fit-content;
  max-width: fit-content; /* 宽度自适应内容 */
  -moz-user-select: none;
       user-select: none; /* 禁止用户选择文本 */
  -webkit-user-select: none;
}

/* ========================================================================== */
/* == 响应式布局调整 (Responsive Layout Adjustments) == */
/* ========================================================================== */
/* 当屏幕宽度小于等于 768px 时（覆盖大部分手机和平板竖屏模式）*/
@media (max-width: 768px) {
  #chat-message-list {
    padding: var(--space-sm) 12px;
  }
  .message-wrapper {
    max-width: 85%;
  }
}
.message-bubble.is-moment-card {
  padding: 0 !important;
  background: #fff !important;
  width: 240px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.message-bubble.is-moment-card .moment-card-inner {
  display: flex;
  flex-direction: column;
}
.message-bubble.is-moment-card .mc-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #f9f9f9;
  border-bottom: 1px solid #eee;
}
.message-bubble.is-moment-card .mc-header img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 8px;
}
.message-bubble.is-moment-card .mc-header span {
  font-size: 12px;
  color: #666;
  font-weight: 600;
}
.message-bubble.is-moment-card .mc-header .mc-tag {
  margin-left: auto;
  font-size: 10px;
  color: #bbb;
  border: 1px solid #ddd;
  padding: 0 4px;
  border-radius: 4px;
}
.message-bubble.is-moment-card .mc-body {
  padding: 12px;
  display: flex;
  gap: 10px;
}
.message-bubble.is-moment-card .mc-body .mc-text {
  flex: 1;
  font-size: 13px;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.message-bubble.is-moment-card .mc-body .mc-thumb {
  width: 50px;
  height: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  background: #eee;
  flex-shrink: 0;
}
.message-bubble.is-moment-card .mc-footer {
  padding: 8px 12px;
  font-size: 12px;
  color: #999;
  border-top: 1px solid #f5f5f5;
  display: flex;
  gap: 16px;
}
.message-bubble.is-moment-card .mc-footer .mc-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}
.message-bubble.is-moment-card .mc-footer .mc-stat svg {
  width: 14px;
  height: 14px;
  stroke: #999;
  stroke-width: 1.8;
}
.message-bubble.is-moment-card .mc-footer .mc-stat span {
  line-height: 1;
  margin-top: 1px;
}

.moment-detail-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.moment-detail-modal-overlay.visible {
  opacity: 1;
}

.moment-detail-modal-content {
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.moment-detail-modal-content .moment-card {
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
.moment-detail-modal-content::-webkit-scrollbar {
  width: 4px;
}
.moment-detail-modal-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.message-system-event {
  align-self: center; /* 居中显示 */
  background-color: rgba(0, 0, 0, 0.05); /* 极淡的灰色背景 */
  color: #999; /* 浅灰色文字 */
  font-size: 12px; /* 小号字体 */
  padding: 4px 12px; /* 胶囊内边距 */
  border-radius: 100px; /* 也就是胶囊形状 */
  margin: 10px 0; /* 上下留出一点空隙 */
  max-width: 80%; /* 防止文字太长撑爆屏幕 */
  text-align: center; /* 文字居中 */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none; /* 不让用户选中复制，像系统提示一样 */
}
@media (prefers-color-scheme: dark) {
  .message-system-event {
    background-color: rgba(255, 255, 255, 0.1);
    color: #888;
  }
}

.message-translation {
  padding: 8px 14px 10px 14px;
  margin-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.message-translation.collapsed {
  display: none;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
  margin-top: 0;
}

.btn-toggle-translation {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: #ffffff;
  color: #999;
  font-size: 10px;
  font-family: "Songti SC", "SimSun", serif;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 6px;
  margin-right: 0;
  align-self: flex-end;
  margin-bottom: 2px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.btn-toggle-translation:hover {
  background-color: #f5f5f5;
  color: #666;
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.btn-toggle-translation.active {
  background-color: #636366;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.message-wrapper.sent .btn-toggle-translation {
  margin-left: 0;
  margin-right: 6px;
}

.message-folder {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0;
  width: 100%;
}
.message-folder .btn-load-more {
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background-color 0.2s ease, color 0.2s ease;
  background-color: rgba(142, 142, 147, 0.12);
  color: #8e8e93;
  padding: 0.4rem 0.8rem;
  border-radius: 1rem;
}
.message-folder .btn-load-more:hover {
  background-color: rgba(142, 142, 147, 0.2);
  color: #6c6c70;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal-overlay.visible {
  display: flex;
  opacity: 1;
}
.modal-overlay.visible .modal-card {
  transform: scale(1);
}
.modal-overlay.position-top {
  align-items: flex-start;
  padding-top: 25vh;
  z-index: 201;
}

.modal-card {
  background-color: var(--c-bg-primary);
  border-radius: 14px;
  padding: var(--space-lg);
  width: 85%;
  max-width: 320px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.modal-card h3 {
  margin: 0 0 var(--space-md);
  text-align: center;
  font-size: var(--font-lg);
  color: var(--c-text-primary);
}

.modal-buttons {
  display: flex;
  gap: var(--space-sm);
}
.modal-buttons .btn {
  flex-grow: 1;
  font-weight: 600;
  padding: 12px;
  border-radius: var(--radius-sm);
}

#api-input-modal-card {
  background-color: #f7f7f7;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  padding: 24px;
}
#api-input-modal-card h3 {
  color: #000000;
  font-size: 18px;
  margin-bottom: 20px;
}
#api-input-modal-card input,
#api-input-modal-card textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d1d6;
  border-radius: 12px;
  margin-bottom: var(--space-lg);
  font-size: 15px;
  box-sizing: border-box;
  background-color: #FFFFFF;
  color: #1c1c1e;
  resize: vertical;
}
#api-input-modal-card input::-moz-placeholder, #api-input-modal-card textarea::-moz-placeholder {
  color: #8e8e93;
}
#api-input-modal-card input::placeholder,
#api-input-modal-card textarea::placeholder {
  color: #8e8e93;
}
#api-input-modal-card input:focus,
#api-input-modal-card textarea:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}
#api-input-modal-card .modal-buttons .btn {
  border-radius: 12px;
  padding: 12px;
  font-size: 16px;
}
#api-input-modal-card .modal-buttons .btn-secondary {
  background-color: #e5e5ea;
  color: #1c1c1e;
}
#api-input-modal-card .modal-buttons .btn-accent,
#api-input-modal-card .modal-buttons .btn-primary {
  background-color: #000000;
  color: #FFFFFF;
}

.selection-modal-card .selection-list,
.selection-modal-card .settings-card {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-sm);
}
.selection-modal-card .selection-list-item {
  padding: 12px var(--space-md);
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  font-size: var(--font-sm);
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.selection-modal-card .selection-list-item:last-child {
  border-bottom: none;
}
.selection-modal-card .selection-list-item:hover {
  background-color: var(--c-bg-tertiary);
}
.selection-modal-card .selection-list-item.selected {
  background-color: #eef5ff;
  color: var(--c-accent);
  font-weight: 600;
}
.selection-modal-card .selection-list-item.active .checkmark-icon {
  display: block;
}
.selection-modal-card .selection-list-item .item-text {
  flex-grow: 1;
}
.selection-modal-card .checkmark-icon {
  width: 20px;
  height: 20px;
  stroke: var(--c-accent-green);
  stroke-width: 2.5;
  flex-shrink: 0;
  display: none;
}
.selection-modal-card .modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--radius-lg);
}
.selection-modal-card .modal-actions .btn {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-sm);
}

.selection-modal-card .selection-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-sm);
}
.selection-modal-card .selection-list-item {
  padding: 12px var(--space-md);
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  font-size: var(--font-sm);
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.selection-modal-card .selection-list-item:last-child {
  border-bottom: none;
}
.selection-modal-card .selection-list-item:hover {
  background-color: var(--c-bg-tertiary);
}
.selection-modal-card .selection-list-item.selected {
  background-color: #eef5ff;
  color: var(--c-accent);
  font-weight: 600;
}
.selection-modal-card .selection-list-item.active .checkmark-icon {
  display: block;
}
.selection-modal-card .selection-list-item .item-text {
  flex-grow: 1;
}
.selection-modal-card .checkmark-icon {
  width: 20px;
  height: 20px;
  stroke: var(--c-accent-green);
  stroke-width: 2.5;
  flex-shrink: 0;
  display: none;
}
.selection-modal-card .modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--radius-lg);
}
.selection-modal-card .modal-actions .btn {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-sm);
}

.config-list-item .config-name-text {
  flex-grow: 1;
  font-weight: 500;
  color: var(--c-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delete-icon {
  width: 20px;
  height: 20px;
  stroke: var(--c-accent-red);
  stroke-width: 2;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.delete-icon:hover {
  opacity: 1;
}

/* ==========================================================================
   角色编辑弹窗 - 时尚黑白线条风格 (Line Art Fashion Style)
   ========================================================================== */
#add-char-modal-overlay .line-art-card {
  background-color: #ffffff;
  border: 1px solid #000000;
  box-shadow: 10px 10px 0px rgb(0, 0, 0);
  padding: 0;
  width: 85%;
  max-width: 350px;
  color: #000;
  overflow: hidden; /* 保持内容在卡片圆角内 */
  border-radius: 12px;
  /* ▼▼▼【核心修改】从这里开始 ▼▼▼ */
  display: flex; /* 1. 将卡片设置为 Flex 容器 */
  flex-direction: column; /* 2. 让子元素（header, body, footer）垂直排列 */
  max-height: 85vh; /* 3. 限制弹窗最大高度为视窗的85%，超出则触发内部滚动 */
  /* ▲▲▲【核心修改】到这里结束 ▲▲▲ */
}

/* 1. 头部：头像区 */
.line-header {
  padding: 30px 0 20px;
  display: flex;
  justify-content: center;
  background-color: #fff;
  flex-shrink: 0;
}

.char-modal-avatar-container {
  width: 100px;
  height: 100px;
  border: 1px solid #000; /* 头像黑边框 */
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.char-modal-avatar-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* 占位符样式 */
.avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #000;
}

.avatar-placeholder svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

.avatar-placeholder span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* 2. 内容区 */
.line-body {
  padding: 0 24px 20px; /* 增加了底部内边距，让滚动到底部时更美观 */
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* ▼▼▼【核心修改】从这里开始 ▼▼▼ */
  flex-grow: 1; /* 1. 让内容区占据 header 和 footer 之间的所有可用空间 */
  overflow-y: auto; /* 2. 【关键】当内容高度超出时，自动显示垂直滚动条 */
  /* ▲▲▲【核心修改】到这里结束 ▲▲▲ */
}

/* 输入组：标签 + 下划线输入框 */
.line-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.line-input-group label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #000;
  text-transform: uppercase;
  opacity: 0.6;
}

.line-input {
  border: none;
  border-bottom: 1px solid #e0e0e0; /* 默认浅灰线 */
  padding: 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  background: transparent;
  border-radius: 0;
  transition: border-color 0.2s;
}

.line-input:focus {
  outline: none;
  border-bottom: 2px solid #000; /* 聚焦变黑粗线 */
}

/* 下拉框容器 */
.select-wrapper {
  position: relative;
}

.line-select {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  padding: 8px 0;
  font-size: 15px;
  color: #000;
  background: transparent;
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; /* 移除默认箭头 */
  cursor: pointer;
}

.line-select:focus {
  outline: none;
  border-bottom: 2px solid #000;
}

.select-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  fill: none;
  stroke: #000;
  stroke-width: 2;
}

/* ====================================================== */
/* 角色设定折叠区 (Persona Setting)                         */
/* ====================================================== */
/* 折叠区域总容器，定义了上下黑边框 */
.line-details {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-top: 10px;
}

/* 折叠区域的标题部分 (Summary)，就是 "PERSONA SETTING" 那一行 */
.line-details summary {
  padding: 10px 0;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.line-details summary svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

/* 隐藏 Chrome/Safari 默认的折叠箭头 */
.line-details summary::-webkit-details-marker {
  display: none;
}

/* 当折叠区域展开时 (<details> 标签拥有 open 属性)，旋转 SVG 图标（让 + 变成 x） */
.line-details[open] summary svg {
  transform: rotate(45deg);
}

/* 展开后的内容区域 */
.details-content {
  padding-bottom: 15px;
}

/* 角色设定的文本输入框 (Textarea) */
.line-textarea {
  width: 100%;
  border: none;
  background: #f9f9f9;
  padding: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
  height: 260px; /* 【修改】从 100px 增大到 150px，让文本框更高 */
  resize: none;
  box-sizing: border-box;
}

/* 文本框获得焦点时的样式 */
.line-textarea:focus {
  outline: 1px solid #000;
  background: #fff;
}

.line-action-btn {
  padding: 10px 16px;
  border: 1px solid #000;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
  flex-shrink: 0;
}
.line-action-btn svg {
  width: 20px;
  height: 20px;
}

.line-action-btn:active {
  background: #000;
  color: #fff;
}

.btn-content {
  display: flex;
  flex-direction: column;
}

.btn-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.btn-subtitle {
  font-size: 9px;
  opacity: 0.6;
  margin-top: 2px;
}

/* 3. 底部按钮区 */
.line-footer {
  display: flex;
  border-top: 1px solid #000; /* 分割线 */
  flex-shrink: 0;
}

.line-footer button {
  flex: 1;
  padding: 18px;
  border: none;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-line-secondary {
  color: #000;
  border-right: 1px solid #000; /* 中间分割线 */
}

.btn-line-secondary:hover {
  background: #f0f0f0;
}

.btn-line-primary {
  background: #000 !important;
  color: #fff !important;
}

.btn-line-primary:hover {
  opacity: 0.9;
}

/* ==========================================================================
   NPC 管理弹窗 - 极简黑白时尚风格 (Minimalist Black & White)
   ========================================================================== */
#char-npc-modal-overlay .npc-minimal-card {
  background-color: #ffffff; /* 纯白背景 */
  border-radius: 24px; /* 大圆角 */
  padding: 0; /* 移除默认内边距，由内部控制 */
  width: 90%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); /* 极其柔和的高级阴影 */
  border: 1px solid rgba(0, 0, 0, 0.04); /* 几乎看不见的边框增加质感 */
  overflow: hidden; /* 确保圆角不被内部内容切掉 */
  color: #1c1c1e; /* 深黑色文字 */
}

/* 1. 标题区 */
.npc-header {
  padding: 24px 24px 10px; /* 上左右宽一点 */
  text-align: center;
}

.npc-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.5px; /* 字体紧凑一点更时尚 */
}

.npc-header p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #8e8e93; /* 浅灰色辅助说明 */
}

/* 2. 列表区 */
.npc-list-area {
  padding: 0 24px;
  margin-bottom: 20px;
}

.npc-list-container {
  /* 【修改】增加高度，超过约 3-4 个 NPC 时会出现滚动条 */
  max-height: 240px;
  overflow-y: auto;
  min-height: 60px;
  /* 保持滚动条隐藏但可滚动 (美观) */
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* 给个内边距，防止内容贴边 */
  padding-bottom: 10px;
}

.npc-list-container::-webkit-scrollbar {
  display: none;
}

/* 【新增】被选中正在编辑的 NPC 样式 */
.npc-item.editing {
  background-color: #f0f0f0;
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
  border: 1px solid #000; /* 加个黑边框表示选中 */
}

/* 列表项样式 */
.npc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f2f2f7; /* 极细的分割线 */
}

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

.npc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.npc-info span {
  font-size: 16px;
  font-weight: 600;
  color: #1c1c1e;
}

.npc-info small {
  font-size: 12px;
  color: #8e8e93;
}

/* 删除按钮：灰色小圆圈 */
.npc-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f2f2f7;
  color: #8e8e93;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
}

.npc-delete-btn:hover {
  background: #ff3b30; /* 悬停变红 */
  color: white;
}

/* 3. 输入区 (灰色背景块) */
.npc-input-area {
  background-color: #F9F9F9; /* 非常淡的灰底，区分输入区 */
  padding: 20px 24px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.npc-input-row {
  display: flex;
  gap: 10px;
}

/* 输入框通用样式 */
.minimal-input {
  background: #ffffff;
  border: 1px solid #e5e5ea; /* 浅灰边框 */
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  color: #1c1c1e;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
  font-family: inherit;
}

.minimal-input:focus {
  outline: none;
  border-color: #000000; /* 聚焦时变成黑色边框 */
}

.minimal-input::-moz-placeholder {
  color: #c7c7cc;
}

.minimal-input::placeholder {
  color: #c7c7cc;
}

.minimal-textarea {
  height: 70px;
  resize: none;
}

/* 添加按钮：纯黑块 */
.btn-minimal-black {
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-minimal-black:active {
  opacity: 0.7;
}

.btn-minimal-black svg {
  width: 16px;
  height: 16px;
}

/* 4. 底部完成按钮 */
.npc-footer {
  padding: 10px 24px 20px;
  background-color: #F9F9F9;
  text-align: center;
}

.btn-minimal-text {
  background: transparent;
  border: none;
  color: #8e8e93;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 20px;
}

.btn-minimal-text:hover {
  color: #000;
}

/* 
 * ==========================================================================
 *   ▼▼▼ 新增/修复：位置发送模态框专属样式 ▼▼▼
 * ==========================================================================
 */
/* 模态框内的地图预览容器 */
#location-map-preview {
  width: 100%;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background-color: var(--c-bg-secondary); /* 加载时的背景色 */
  margin-top: 15px;
  border: 1px solid var(--c-border-light);
}

/* 地图图片 */
#location-map-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 随机生成的红色图钉 */
#location-map-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  /* 使用内联 SVG 作为图钉图标，无需外部图片文件 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23EA4335"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
  background-size: contain;
  /* 关键：让图钉的尖端对准坐标点，而不是左上角 */
  transform: translate(-50%, -90%);
}

/* 
 * ==========================================================================
 *   ▼▼▼ 新增/修复：转账发送模态框专属样式 ▼▼▼
 * ==========================================================================
 */
.transfer-modal-card .transfer-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-bottom: 20px;
}
.transfer-modal-card .transfer-header img {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  -o-object-fit: cover;
     object-fit: cover;
}
.transfer-modal-card .transfer-header h3 {
  margin: 0;
  font-size: var(--font-md);
  font-weight: 500;
}
.transfer-modal-card .transfer-body {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}
.transfer-modal-card .currency-symbol {
  font-size: 32px;
  font-weight: 500;
  margin-right: 10px;
}
.transfer-modal-card #transfer-amount-input {
  flex-grow: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 40px;
  font-weight: 600;
  width: 100%;
}
.transfer-modal-card .transfer-remark-body {
  padding-top: 10px;
  border-top: 1px solid var(--c-border-light);
}
.transfer-modal-card #transfer-remark-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  padding: 5px 0;
}

/* 
 * ==========================================================================
 *   ▼▼▼ 新增/修复：聊天设置页 - 表情包选择弹窗样式 ▼▼▼
 * ==========================================================================
 */
#chat-sticker-selector-overlay .modal-card {
  width: 90%;
  max-width: 360px;
}

#chat-sticker-list {
  padding: 0;
  margin: 0;
  list-style: none;
  max-height: 60vh;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#chat-sticker-list::-webkit-scrollbar {
  display: none;
}

.sticker-selection-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--c-border);
  transition: background-color 0.2s;
}
.sticker-selection-item:last-child {
  border-bottom: none;
}
.sticker-selection-item:hover {
  background-color: var(--c-bg-tertiary);
}

.sticker-pack-preview {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 12px;
  background-color: var(--c-bg-secondary);
}

.sticker-selection-item .item-text {
  flex-grow: 1;
  font-size: 16px;
}

.sticker-selection-item input[type=checkbox] {
  width: 22px;
  height: 22px;
  margin-left: 16px;
  flex-shrink: 0;
  accent-color: var(--c-accent);
}

/* 
 * ======================================================================
 *   ▼▼▼ 新增/修复：专属铃声设置模态框样式 ▼▼▼
 * ======================================================================
 */
#ringtone-modal-card {
  width: 85vw;
  max-width: 340px;
  padding: var(--space-lg);
  background-color: var(--c-bg-secondary);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

#ringtone-modal-card .modal-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 var(--space-sm) 0;
  color: var(--c-text-primary);
}

.ringtone-options-list {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ringtone-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ringtone-option:not(:last-child) {
  border-bottom: 1px solid var(--c-border-light);
}

.ringtone-option:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.ringtone-option .option-label {
  font-size: 16px;
  color: var(--c-text-primary);
}

.ringtone-option .selection-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #c7c7cc;
  transition: all 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ringtone-option.selected .selection-indicator {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}

.ringtone-option.selected .selection-indicator::after {
  content: "✓";
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.ringtone-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
}

.ringtone-preview .preview-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ringtone-preview .preview-label {
  font-size: 12px;
  color: var(--c-text-secondary);
}

.ringtone-preview #current-ringtone-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text-primary);
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ringtone-preview .preview-play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--c-bg-tertiary);
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.preview-play-btn:hover {
  background-color: var(--c-border-light);
}

.preview-play-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--c-text-primary);
}

/* 
 * ======================================================================
 *   ▼▼▼ 新增/修复：消息通知设置模态框样式 ▼▼▼
 * ======================================================================
 */
#notification-modal-card {
  width: 85vw;
  max-width: 340px;
  padding: var(--space-lg);
  background-color: var(--c-bg-secondary);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

#notification-modal-card .modal-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin: 0;
  color: var(--c-text-primary);
}

.notification-settings-section {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.4s ease, transform 0.3s ease;
  transform-origin: top;
}

.notification-settings-section .section-header {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-secondary);
  padding: 10px var(--space-lg) 5px;
}

#notification-sound-section {
  max-height: 500px;
  opacity: 1;
  transform: scaleY(1);
}
#notification-sound-section.disabled {
  max-height: 0;
  opacity: 0;
  transform: scaleY(0.9);
  pointer-events: none;
  margin-top: -20px;
}

#notification-modal-card .settings-item {
  padding: 16px var(--space-lg);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#notification-modal-card .ringtone-options-list {
  background-color: transparent;
}

#notification-modal-card .ringtone-preview {
  margin: 0 var(--space-md) var(--space-md);
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--c-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 
 * ==========================================================================
 *   ▼▼▼ 新增/修复：上下文轮数设置弹窗样式 ▼▼▼
 * ==========================================================================
 */
.context-turns-modal-card {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.context-turns-modal-card h4 {
  font-size: var(--font-lg);
  font-weight: 600;
  margin: 0 0 8px 0;
}
.context-turns-modal-card .helper-text {
  font-size: var(--font-xs);
  color: var(--c-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-xl);
}

.slider-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.slider-label {
  font-size: var(--font-sm);
  color: var(--c-text-tertiary);
  font-weight: 500;
}

.context-turns-modal-card .slider {
  position: static;
  cursor: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 6px;
  background: var(--c-bg-secondary);
  border-radius: 6px;
  outline: none;
  accent-color: var(--c-text-primary);
}

.context-turns-modal-card .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--c-bg-primary);
  border: 2px solid var(--c-text-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  -webkit-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}
.context-turns-modal-card .slider::-webkit-slider-thumb:active {
  transform: scale(1.2);
}

.context-turns-modal-card .slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--c-bg-primary);
  border: 2px solid var(--c-text-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.slider-value-display {
  font-size: var(--font-sm);
  color: var(--c-text-secondary);
  margin-bottom: var(--space-xl);
}
.slider-value-display span {
  font-weight: 600;
  font-size: var(--font-md);
  color: var(--c-text-primary);
}

.context-turns-modal-card .btn {
  background-color: var(--c-text-primary);
  color: white;
  padding: 14px;
  border-radius: var(--radius-lg);
  transition: background-color 0.2s ease;
}
.context-turns-modal-card .btn:hover {
  background-color: #333;
}

.context-turns-modal-card .slider::before {
  display: none;
}

/* 
 * ==========================================================================
 *   ▼▼▼ 【新增/修复】通话记录详情模态框专属样式 ▼▼▼
 * ==========================================================================
 */
/* 1. 调整卡片本身，使其更高，并使用flex布局 */
#call-history-modal-card {
  width: 90%;
  max-width: 380px;
  max-height: 70vh; /* 限制最大高度为屏幕的70% */
  display: flex;
  flex-direction: column; /* 让头部和内容区垂直排列 */
  padding: 0; /* 移除内边距，由内部元素控制 */
}

/* 头部样式 */
.call-history-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--c-border-light);
  flex-shrink: 0; /* 防止头部被压缩 */
}

.call-history-char-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}

.call-history-char-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text-primary);
}

.call-history-char-info p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--c-text-secondary);
}

/* 内容区域（消息列表）样式 */
#call-history-modal-card .modal-content {
  padding: 10px 15px; /* 为消息列表添加内边距 */
  flex-grow: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 超出部分滚动 */
  background-color: var(--c-bg-secondary); /* 添加一点底色区分 */
}

/* 2. 消息列表容器样式 */
#call-history-message-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* 消息之间的间距 */
  padding-right: 8px; /* 为滚动条留出一点空间，即使隐藏了也让内容不贴边 */
}

/* 隐藏滚动条，保持界面整洁 */
#call-history-message-list::-webkit-scrollbar {
  display: none;
}

#call-history-message-list {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 3. 借用并微调主聊天窗口的消息样式，以确保视觉统一 */
/* 消息外层容器 (包含头像和气泡) */
#call-history-message-list .message-wrapper {
  display: flex;
  /* 核心修正：让头像和气泡顶部对齐 */
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 90%; /* 限制最大宽度 */
  margin-bottom: 2px; /* 减小消息行之间的垂直间距 */
}

#call-history-message-list .message-wrapper.received {
  align-self: flex-start;
}

#call-history-message-list .message-wrapper.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}

/* 头像 */
#call-history-message-list .chat-avatar-small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

/* 气泡 */
#call-history-message-list .message-bubble {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  /* 核心修正：减小内边距，使其更紧凑 */
  padding: 1px 8px;
  box-shadow: var(--shadow-sm);
}

#call-history-message-list .message-bubble p {
  margin: 0;
  font-size: var(--font-md);
  line-height: 1.5;
  word-break: break-word;
}

#call-history-message-list .message-wrapper.sent .message-bubble {
  background-color: #8a6dff;
  color: white;
}

/* 底部样式 */
.call-history-footer {
  padding: 12px;
  text-align: center;
  border-top: 1px solid var(--c-border-light);
  flex-shrink: 0; /* 防止底部被压缩 */
}

.call-history-footer .btn {
  width: 100%;
  padding: 10px;
}

/* 
 * ==========================================================================
 *   ▼▼▼ 【新增/修复】撤回消息查看弹窗样式 ▼▼▼
 * ==========================================================================
 */
.recalled-content-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.recalled-content-modal.visible {
  opacity: 1;
  pointer-events: auto;
}

.recalled-content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.recalled-content-card {
  position: relative;
  background: var(--c-bg-primary);
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.2s ease;
}

.recalled-content-modal.visible .recalled-content-card {
  transform: scale(1);
}

.recalled-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  /* border-bottom: 1px solid #e5e5e5; */ /* <-- 移除这条线 */
}

.recalled-content-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text-primary);
}

.recalled-close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 28px;
  color: var(--c-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.recalled-close-btn:hover {
  background: var(--c-bg-secondary);
}

.recalled-content-body {
  padding: 24px 20px;
  text-align: center;
}

.recalled-message-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-primary);
  margin: 0;
  word-wrap: break-word;
}

.recalled-sticker-preview {
  max-width: 150px;
  max-height: 150px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.recalled-sticker-text {
  font-size: 14px;
  color: var(--c-text-secondary);
  margin: 0;
}

.recalled-content-footer {
  padding: 12px 20px;
  /* border-top: 1px solid #e5e5e5; */ /* <-- 移除这条线 */
  text-align: center;
}

.recalled-time {
  font-size: 12px;
  color: var(--c-text-tertiary);
}

/* 
 * ==========================================================================
 *   ▼▼▼ 【修改】相册-添加图片弹窗专属样式 (浅色主题) ▼▼▼
 * ==========================================================================
 */
.image-upload-modal {
  background-color: #FFFFFF;
  color: #1c1c1e;
  border-radius: 20px;
  width: 90%;
  max-width: 380px;
  padding: 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.image-upload-modal .upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.image-upload-modal .upload-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}
.image-upload-modal .upload-header .close-btn {
  background: #f0f2f5;
  color: #8e8e93;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 28px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.image-upload-modal .upload-header .close-btn:hover {
  background-color: #e5e5ea;
}
.image-upload-modal .upload-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: #f7f7f7;
}
.image-upload-modal .upload-area {
  border: 2px dashed #d1d1d6;
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
  color: #636366;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background-color: #FFFFFF;
  transition: background-color 0.2s, border-color 0.2s;
}
.image-upload-modal .upload-area.dragover {
  background-color: #f0f2f5;
  border-color: #007aff;
}
.image-upload-modal .upload-area svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.5;
  stroke: #8e8e93;
  margin-bottom: 8px;
}
.image-upload-modal .upload-area .file-input-label {
  color: #007aff;
  cursor: pointer;
  font-weight: 500;
}
.image-upload-modal .file-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.image-upload-modal .upload-item {
  background-color: #FFFFFF;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #f0f0f0;
}
.image-upload-modal .upload-item .preview-img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  background-color: #f0f2f5;
}
.image-upload-modal .upload-item .upload-details {
  flex-grow: 1;
}
.image-upload-modal .upload-item .upload-details input {
  width: 100%;
  background: #f0f2f5;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  padding: 8px 10px;
  color: #1c1c1e;
  font-size: 14px;
}
.image-upload-modal .upload-item .upload-details input:focus {
  outline: none;
  border-color: #007aff;
  background-color: #FFFFFF;
}
.image-upload-modal .upload-item .upload-details input::-moz-placeholder {
  color: #8e8e93;
}
.image-upload-modal .upload-item .upload-details input::placeholder {
  color: #8e8e93;
}
.image-upload-modal .upload-item .remove-upload-btn {
  background: none;
  border: none;
  color: #8e8e93;
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
}
.image-upload-modal .upload-footer {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
  background-color: #ffffff;
  /* ▼▼▼ 【新增】修复圆角问题 ▼▼▼ */
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.image-upload-modal .upload-footer .btn {
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  border: none;
  font-size: 15px;
}
.image-upload-modal .upload-footer .btn-secondary {
  background-color: #e5e5ea;
  color: #1c1c1e;
}
.image-upload-modal .upload-footer .btn-primary {
  background-color: #000000;
  color: #FFFFFF;
}
.image-upload-modal .upload-footer .btn-primary:disabled {
  background-color: #d1d1d6;
  color: #8e8e93;
  cursor: not-allowed;
}
.image-upload-modal .unified-selector-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 20px;
  background-color: #f0f2f5;
  border-bottom: 1px solid #e5e5ea;
  flex-shrink: 0;
}
.image-upload-modal .unified-selector-container .selector-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.image-upload-modal .unified-selector-container .selector-group label {
  font-size: 14px;
  color: #636366;
  flex-shrink: 0;
}
.image-upload-modal .unified-selector-container .selector-group select {
  flex-grow: 1;
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #d1d1d6;
  background-color: #FFFFFF;
  font-size: 14px;
}
.image-upload-modal .unified-selector-container .selector-group .btn-text-link {
  background: none;
  border: none;
  color: #007aff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.image-upload-modal .upload-item .upload-details .upload-selectors {
  margin-top: 8px;
}
.image-upload-modal .upload-item .upload-details .upload-selectors select.group-select {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  background-color: #FFFFFF;
  border: 1px solid #e5e5ea;
  border-radius: 6px;
}

/* ==========================================================================
   ▼▼▼ 【新增】通用弹窗表单样式 ▼▼▼
   ========================================================================== */
.modal-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-card .form-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-secondary);
}

.modal-card .styled-input,
.modal-card .styled-select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--c-border-light);
  border-radius: 12px;
  font-size: 15px;
  background-color: var(--c-bg-secondary);
  color: var(--c-text-primary);
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-card .styled-input::-moz-placeholder {
  color: var(--c-text-tertiary);
}

.modal-card .styled-input::placeholder {
  color: var(--c-text-tertiary);
}

.modal-card .styled-input:focus,
.modal-card .styled-select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.modal-card .styled-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

/* ==========================================================================
   ▼▼▼ 【新增】历史记录弹窗样式 ▼▼▼
   ========================================================================== */
.history-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.history-modal-overlay.visible {
  display: flex;
  opacity: 1;
}
.history-modal-overlay.visible .history-modal-card {
  transform: scale(1);
}

.history-modal-card {
  background-color: #FFFFFF;
  border-radius: 16px;
  width: 90%;
  max-width: 380px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.history-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #EAEAEA;
  flex-shrink: 0;
}
.history-modal-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  color: #1C1C1E;
}

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

.history-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #EAEAEA;
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.history-modal-footer button {
  flex-grow: 1;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.history-modal-footer .btn-delete {
  background-color: #FFF1F0;
  color: #D93026;
}
.history-modal-footer .btn-delete:hover {
  background-color: #FFDCD9;
}
.history-modal-footer .btn-cancel {
  background-color: #f0f2f5;
  color: #1C1C1E;
}
.history-modal-footer .btn-cancel:hover {
  background-color: #e5e5ea;
}

/* ==========================================================================
   ▼▼▼ 【精准修复#3】强制修正历史记录弹窗内头像的异常变形问题 ▼▼▼
   ========================================================================== */
.history-modal-card .session-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: auto !important;
  background: none !important;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

/* ==========================================================================
   ▼▼▼ 【UI优化】重塑历史记录弹窗内的 session-summary 卡片样式 ▼▼▼
   ========================================================================== */
.history-modal-card .session-summary {
  list-style: none;
  display: block;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.history-modal-card .session-summary::-webkit-details-marker {
  display: none;
}
.history-modal-card .session-summary .session-avatars {
  margin-bottom: 10px;
}
.history-modal-card .session-summary .session-title {
  font-size: 16px;
  font-weight: 600;
  color: #1c1c1e;
  line-height: 1.4;
  margin-bottom: 6px;
}
.history-modal-card .session-summary .session-date {
  font-size: 13px;
  color: #8e8e93;
}
.history-modal-card .session-summary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.history-modal-card .session-summary[aria-expanded=true] {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.history-modal-content {
  padding: 8px 16px;
}

/* 
 * ==========================================================================
 *   ▼▼▼ 【恢复/修复】历史记录详情弹窗卡片化样式 ▼▼▼
 * ==========================================================================
 */
#history-record-detail-overlay {
  z-index: 1001;
}

#history-record-detail-card {
  width: 85%;
  max-width: 340px;
  padding: 0;
  text-align: left;
  background-color: #f7f7f7;
}
#history-record-detail-card h3 {
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border-light);
  font-size: 17px;
  font-weight: 600;
  background-color: #ffffff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  margin: 0;
}
#history-record-detail-card .modal-content {
  padding: 12px;
  max-height: 65vh;
  overflow-y: auto;
}
#history-record-detail-card .history-record-item {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
#history-record-detail-card .history-record-item:last-child {
  margin-bottom: 0;
}
#history-record-detail-card .record-sender {
  font-weight: 600;
  color: var(--c-text-secondary);
  font-size: 14px;
  margin: 0;
}
#history-record-detail-card .record-text {
  margin: 4px 0 0 0 !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-primary);
  white-space: pre-wrap;
}
#history-record-detail-card .modal-buttons {
  padding: 12px 20px;
  border-top: 1px solid var(--c-border-light);
  background-color: #ffffff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
#history-record-detail-card .modal-buttons .btn-danger {
  background-color: var(--c-accent-red-light);
  color: var(--c-accent-red);
}
#history-record-detail-card .modal-buttons .btn-danger:hover {
  background-color: rgb(255, 217.2, 214.5);
}

/* 
 * ==========================================================================
 *   ▼▼▼ 【最终版】纯粹、精致的黑白风时间设置弹窗样式 ▼▼▼
 * ==========================================================================
 */
#time-settings-modal .modal-card.time-settings-card {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 12px 50px -12px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 370px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#time-settings-modal .modal-card.time-settings-card .modal-header {
  padding: 24px 28px 20px;
  position: relative;
}
#time-settings-modal .modal-card.time-settings-card .modal-header .modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  text-align: center;
}
#time-settings-modal .modal-card.time-settings-card .modal-header .modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  background: #f0f0f0;
  color: #888;
  border-radius: 50%;
  font-size: 22px;
  line-height: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
#time-settings-modal .modal-card.time-settings-card .modal-header .modal-close-btn:hover {
  background: #e0e0e0;
  transform: rotate(90deg);
}
#time-settings-modal .modal-card.time-settings-card .modal-content {
  padding: 0 28px 28px;
}
#time-settings-modal .modal-card.time-settings-card .setting-group {
  padding: 20px 0;
  border-top: 1px solid #f0f0f0;
}
#time-settings-modal .modal-card.time-settings-card .setting-group:first-child {
  border-top: none;
  padding-top: 0;
}
#time-settings-modal .modal-card.time-settings-card .settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
#time-settings-modal .modal-card.time-settings-card .settings-item .setting-label {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
}
#time-settings-modal .modal-card.time-settings-card .setting-description {
  font-size: 14px;
  color: #7d7d7d;
  margin-top: 12px;
  line-height: 1.5;
  padding: 0;
}
#time-settings-modal.visible .modal-card.time-settings-card {
  transform: scale(1);
}

/* 
 * ==========================================================================
 *   ▼▼▼ 【修正版】分组选择弹窗样式 (白黑简约风) ▼▼▼
 * ==========================================================================
 */
#group-selector-modal-overlay .minimal-bw-card {
  background-color: #ffffff !important; /* 纯白背景 */
  border: 1px solid #000000; /* 黑色细边框 */
  border-radius: 16px; /* 更圆润的边角 */
  color: #000000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 24px;
}
#group-selector-modal-overlay .minimal-bw-card h3 {
  text-align: center;
  font-weight: 700;
  margin: 0 0 20px 0;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 16px;
  font-size: 18px;
}
#group-selector-modal-overlay .minimal-bw-card .group-list-container {
  border: none;
  background-color: #f7f7f7;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 24px;
  max-height: 250px;
  overflow-y: auto;
}
#group-selector-modal-overlay .minimal-bw-card .group-option-item {
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}
#group-selector-modal-overlay .minimal-bw-card .group-option-item:last-child {
  margin-bottom: 0;
}
#group-selector-modal-overlay .minimal-bw-card .group-option-item:hover {
  border-color: #aaaaaa;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
#group-selector-modal-overlay .minimal-bw-card .group-option-item.selected {
  background-color: #000000;
  color: #ffffff;
  border-color: #000000;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
#group-selector-modal-overlay .minimal-bw-card .modal-buttons .btn-secondary-bw {
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}
#group-selector-modal-overlay .minimal-bw-card .modal-buttons .btn-secondary-bw:hover {
  background: #f0f0f0;
}
#group-selector-modal-overlay .minimal-bw-card .modal-buttons .btn-primary-bw {
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
}
#group-selector-modal-overlay .minimal-bw-card .modal-buttons .btn-primary-bw:hover {
  opacity: 0.8;
}

/* ======================================================
   NPC 管理弹窗 - 新增样式 (头像与概率滑块)
   ====================================================== */
.npc-form-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 头像上传框 */
.npc-avatar-upload {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #f0f0f0;
  border: 1px solid #e5e5ea;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.npc-avatar-upload img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.npc-avatar-upload .upload-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 文本输入框容器 */
.npc-text-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

/* 概率设置行 */
.npc-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
}

.setting-label {
  font-size: 12px;
  color: #8e8e93;
  font-weight: 500;
  width: 100px;
}

#npc-prob-display {
  color: #000;
  font-weight: 700;
}

/* 简约滑块 */
.minimal-slider {
  flex-grow: 1;
  height: 4px;
  -webkit-appearance: none;
  background: #e5e5ea;
  border-radius: 2px;
  outline: none;
}

.minimal-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* ======================================================
   ▼▼▼ 【新增】背景图选择弹窗样式 (粘贴到文件最底部) ▼▼▼
   ====================================================== */
#bg-choice-modal-overlay {
  /* 标题稍微有些间距 */
  /* 按钮通用样式 */
  /* 1. 上传图片按钮 (黑底白字) */
  /* 2. URL按钮 (灰底黑字) */
  /* 3. 取消按钮 (透明背景) */
}
#bg-choice-modal-overlay .modal-card {
  width: 300px; /* 固定宽度，不大不小 */
  text-align: center; /* 内容居中 */
  display: flex;
  flex-direction: column;
  gap: 12px; /* 按钮之间的间距 */
}
#bg-choice-modal-overlay h3 {
  margin-bottom: 8px;
}
#bg-choice-modal-overlay .btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
#bg-choice-modal-overlay #bg-choice-upload-btn {
  background-color: #000000;
  color: #ffffff;
}
#bg-choice-modal-overlay #bg-choice-url-btn {
  background-color: #f0f0f0;
  color: #1c1c1e;
}
#bg-choice-modal-overlay #bg-choice-cancel-btn {
  background-color: transparent;
  color: #8e8e93;
  margin-top: 4px;
}

/* ======================================================
   ▼▼▼ 【新增】保存方案弹窗专属样式 (iOS 风格) ▼▼▼
   ====================================================== */
#save-scheme-modal-overlay {
  z-index: 1050;
  /* 头部文字 */
  /* 表单区域 */
  /* 输入框美化 */
  /* 类型选择器 (胶囊网格) */
  /* 单个胶囊按钮 */
  /* 底部按钮 */
}
#save-scheme-modal-overlay .save-scheme-card {
  width: 320px;
  background-color: #ffffff;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
#save-scheme-modal-overlay .save-scheme-header {
  text-align: center;
}
#save-scheme-modal-overlay .save-scheme-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin: 0 0 6px 0;
}
#save-scheme-modal-overlay .save-scheme-header p {
  font-size: 13px;
  color: #8e8e93;
  margin: 0;
  line-height: 1.4;
}
#save-scheme-modal-overlay .save-scheme-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#save-scheme-modal-overlay .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#save-scheme-modal-overlay .form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 4px;
}
#save-scheme-modal-overlay .minimal-input {
  background: #f2f2f7;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 16px;
  color: #1c1c1e;
  outline: none;
  transition: all 0.2s;
}
#save-scheme-modal-overlay .minimal-input::-moz-placeholder {
  color: #c7c7cc;
}
#save-scheme-modal-overlay .minimal-input::placeholder {
  color: #c7c7cc;
}
#save-scheme-modal-overlay .minimal-input:focus {
  background: #fff;
  border-color: #007aff;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}
#save-scheme-modal-overlay .scheme-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#save-scheme-modal-overlay .type-chip {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  background-color: #f2f2f7;
  color: #1c1c1e;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* 选中状态：黑底白字 */
}
#save-scheme-modal-overlay .type-chip:hover {
  background-color: #e5e5ea;
}
#save-scheme-modal-overlay .type-chip.active {
  background-color: #000000;
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
#save-scheme-modal-overlay .modal-buttons {
  margin-top: 8px;
  gap: 12px;
}
#save-scheme-modal-overlay .modal-buttons .btn {
  padding: 14px;
  border-radius: 14px;
  font-size: 15px;
}

/* ======================================================
   背景图选择弹窗样式 (iOS 风格)
   ====================================================== */
#bg-choice-modal-overlay {
  align-items: flex-end;
}
#bg-choice-modal-overlay .modal-card {
  width: 100%;
  max-width: 100%;
  margin: 8px;
  border-radius: 14px;
  background-color: rgba(249, 249, 249, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}
#bg-choice-modal-overlay.visible .modal-card {
  transform: translateY(0);
}
#bg-choice-modal-overlay h3 {
  display: none;
}
#bg-choice-modal-overlay .modal-buttons .btn {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font-size: 17px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  background-color: #fff;
  color: var(--c-accent);
  transition: background-color 0.2s;
}
#bg-choice-modal-overlay .modal-buttons .btn:active {
  background-color: #e5e5e5;
}
#bg-choice-modal-overlay .modal-buttons .btn-primary {
  color: #000;
  font-weight: 600;
}
#bg-choice-modal-overlay .modal-buttons .btn-secondary {
  color: #000;
}

/* ======================================================
   ▼▼▼ 【新增】单个聊天数据导入/导出弹窗样式 ▼▼▼
   ====================================================== */
.chat-data-modal {
  width: 90%;
  max-width: 360px;
  padding: 0;
  background-color: var(--c-bg-secondary);
  border-radius: var(--radius-xl);
}
.chat-data-modal .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-data-modal .modal-header .modal-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}
.chat-data-modal .modal-header .modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--c-text-secondary);
  cursor: pointer;
}
.chat-data-modal .modal-content {
  padding: 20px;
}
.chat-data-modal .modal-content .modal-description {
  font-size: 14px;
  color: var(--c-text-secondary);
  text-align: center;
  margin: 0 0 24px 0;
  line-height: 1.5;
}
.chat-data-modal .modal-content .modal-description strong {
  color: var(--c-text-primary);
  font-weight: 600;
}
.chat-data-modal .data-selection-group {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.chat-data-modal .data-selection-item {
  display: flex;
  align-items: center;
  padding: 16px;
  cursor: pointer;
}
.chat-data-modal .data-selection-item:not(:last-child) {
  border-bottom: 1px solid var(--c-border-light);
}
.chat-data-modal .data-selection-item input[type=checkbox] {
  display: none;
}
.chat-data-modal .data-selection-item .custom-checkbox {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: 50%;
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.chat-data-modal .data-selection-item .custom-checkbox::after {
  content: "✓";
  color: white;
  font-size: 14px;
  font-weight: bold;
  transform: scale(0);
  transition: transform 0.2s ease;
}
.chat-data-modal .data-selection-item .label-text {
  font-size: 16px;
  font-weight: 500;
}
.chat-data-modal .data-selection-item input[type=checkbox]:checked + .custom-checkbox {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}
.chat-data-modal .data-selection-item input[type=checkbox]:checked + .custom-checkbox::after {
  transform: scale(1);
}
.chat-data-modal .modal-footer {
  padding: 20px;
  display: flex;
  gap: 12px;
}
.chat-data-modal .modal-footer .btn {
  flex: 1;
  border-radius: var(--radius-lg);
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
}
.chat-data-modal .modal-footer .btn-secondary {
  background-color: var(--c-bg-tertiary);
  color: var(--c-text-primary);
}

/* ======================================================
   ▼▼▼ 【新增】线下设置弹窗专属样式 (黑白、圆润、精致) ▼▼▼
   ====================================================== */
#offline-settings-modal .modal-card.offline-settings-card {
  background-color: #f7f7f7;
  border-radius: 20px;
  width: 90%;
  max-width: 360px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
#offline-settings-modal .settings-modal-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
}
#offline-settings-modal .settings-modal-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #000;
  flex-grow: 1;
  text-align: center;
  padding-left: 30px;
}
#offline-settings-modal .settings-modal-header .modal-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #e9e9eb;
  color: #8a8a8e;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#offline-settings-modal .settings-modal-content {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#offline-settings-modal .setting-group-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
#offline-settings-modal .setting-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
#offline-settings-modal .setting-group-header svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  color: #8a8a8e;
}
#offline-settings-modal .setting-group-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1c1c1e;
}
#offline-settings-modal .wallpaper-preview {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  background-color: #e9e9eb;
  margin-bottom: 16px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
#offline-settings-modal .preview-placeholder {
  font-size: 14px;
  color: #8a8a8e;
}
#offline-settings-modal .wallpaper-actions {
  display: flex;
  gap: 12px;
}
#offline-settings-modal .btn-action, #offline-settings-modal .btn-action-secondary {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s;
}
#offline-settings-modal .btn-action {
  background-color: #000000;
  color: #ffffff;
}
#offline-settings-modal .btn-action:active {
  background-color: #333;
}
#offline-settings-modal .btn-action-secondary {
  background-color: #e9e9eb;
  color: #1c1c1e;
}
#offline-settings-modal .btn-action-secondary:active {
  background-color: #dcdce1;
}
#offline-settings-modal .placeholder-text {
  text-align: center;
  font-size: 14px;
  color: #aeaeae;
  padding: 20px 0;
}

#offline-wallpaper-source-menu {
  z-index: 1100;
}

/* ======================================================
   ▼▼▼ 【问题修复】提升URL输入弹窗的层级 ▼▼▼
   ====================================================== */
#api-input-modal-overlay {
  z-index: 210;
}

/* ======================================================
   ▼▼▼ 【UI更新】删除聊天记录弹窗样式 (白底黑图标精致风) ▼▼▼
   ====================================================== */
.minimal-black-white-modal {
  background-color: #ffffff; /* 变为白色背景 */
  color: #1c1c1e; /* 默认文字变为深灰色 */
  border-radius: 20px;
  border: 1px solid #f0f0f0; /* 边框变为浅灰色 */
  width: 90%;
  max-width: 350px;
  padding: 0;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); /* 阴影调浅 */
}
.minimal-black-white-modal .modal-header-bw {
  padding: 20px 24px;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #f0f0f0; /* 分割线变浅 */
}
.minimal-black-white-modal .modal-header-bw .modal-title-bw {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #000000; /* 标题为纯黑 */
}
.minimal-black-white-modal .modal-header-bw .modal-close-btn-bw {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  background: #f0f2f5; /* 关闭按钮背景变浅灰 */
  color: #8e8e93; /* 图标颜色变中灰 */
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 26px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.minimal-black-white-modal .modal-header-bw .modal-close-btn-bw:hover {
  background-color: #e5e5ea;
}
.minimal-black-white-modal .delete-options-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.minimal-black-white-modal .delete-option-item {
  padding: 12px 16px;
  border-radius: 12px;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
.minimal-black-white-modal .delete-option-item:hover {
  background-color: #ebebeb;
  transform: scale(1.02);
}
.minimal-black-white-modal .delete-option-item .option-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e9e9eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.minimal-black-white-modal .delete-option-item .option-icon svg {
  width: 20px;
  height: 20px;
  color: #1c1c1e;
}
.minimal-black-white-modal .delete-option-item .option-text {
  display: flex;
  flex-direction: column;
}
.minimal-black-white-modal .delete-option-item .option-title {
  font-size: 15px;
  font-weight: 500;
  color: #1c1c1e;
}
.minimal-black-white-modal .delete-option-item .option-desc {
  font-size: 12px;
  color: #8e8e93;
  margin-top: 4px;
}
.minimal-black-white-modal .delete-option-item[data-action=all] .option-icon {
  background-color: #ffe5e3;
}
.minimal-black-white-modal .delete-option-item[data-action=all] .option-icon svg {
  color: #FF3B30;
}
.minimal-black-white-modal .delete-option-item[data-action=all] .option-title {
  color: #FF3B30;
}
.minimal-black-white-modal .modal-footer-bw {
  padding: 16px;
}
.minimal-black-white-modal .modal-footer-bw .btn-secondary-bw {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background-color: #e5e5ea;
  color: #1c1c1e;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.minimal-black-white-modal .modal-footer-bw .btn-secondary-bw:hover {
  background-color: #dcdce1;
}

/* ======================================================
   ▼▼▼ 【新增】日记壁纸来源选择弹窗 (iOS Action Sheet 风格) ▼▼▼
   ====================================================== */
#diary-wallpaper-source-modal {
  align-items: flex-end;
  z-index: 1200;
}
#diary-wallpaper-source-modal .wallpaper-source-card {
  width: calc(100% - 16px);
  max-width: 420px;
  margin: 0 8px 8px;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}
#diary-wallpaper-source-modal.visible .wallpaper-source-card {
  transform: translateY(0);
}
#diary-wallpaper-source-modal .action-sheet-group {
  background-color: rgba(245, 245, 247, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 14px;
  margin-bottom: 8px;
}
#diary-wallpaper-source-modal .action-sheet-group:last-child {
  margin-bottom: 0;
}
#diary-wallpaper-source-modal .action-sheet-btn {
  width: 100%;
  border: none;
  padding: 16px;
  font-size: 17px;
  font-weight: 500;
  color: #000000;
  background-color: transparent;
  border-top: 1px solid rgba(60, 60, 67, 0.29);
  transition: background-color 0.2s;
}
#diary-wallpaper-source-modal .action-sheet-btn:first-child {
  border-top: none;
}
#diary-wallpaper-source-modal .action-sheet-btn:active {
  background-color: rgba(220, 220, 222, 0.9);
}
#diary-wallpaper-source-modal .action-sheet-btn.cancel {
  font-weight: 600;
}

.thoughts-overlay-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(0, 0, 0, 0.3);
}

.inner-thoughts-poster {
  width: 85%;
  max-width: 360px;
  height: auto;
  max-height: 75vh;
  padding: 0;
  background-color: #fffef9;
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.inner-thoughts-poster .poster-bg-text {
  position: absolute;
  top: -20px;
  left: -20px;
  font-size: 80px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.03);
  z-index: 0;
  font-family: sans-serif;
  pointer-events: none;
  letter-spacing: 5px;
}
.inner-thoughts-poster .poster-content-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 24px 24px;
}
.inner-thoughts-poster .thoughts-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.inner-thoughts-poster .thoughts-header .decoration-line {
  width: 20px;
  height: 1px;
  background-color: #d1d1d1;
}
.inner-thoughts-poster .thoughts-header .thoughts-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #8c8c8c;
  text-transform: uppercase;
}
.inner-thoughts-poster .thoughts-scroll-area {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.inner-thoughts-poster .thoughts-scroll-area::-webkit-scrollbar {
  display: none;
}
.inner-thoughts-poster .thoughts-text {
  font-family: "Songti SC", "Noto Serif SC", STSong, serif;
  font-size: 17px;
  line-height: 1.9;
  color: #2c2c2c;
  text-align: justify;
  white-space: pre-wrap;
}
.inner-thoughts-poster .thoughts-text strong {
  color: #8e443d;
  font-weight: 600;
  background: linear-gradient(to bottom, transparent 65%, rgba(142, 68, 61, 0.15) 65%);
  padding: 0 2px;
  margin: 0 1px;
  border-radius: 2px;
}
.inner-thoughts-poster .thoughts-footer {
  margin-top: 24px;
  text-align: right;
  flex-shrink: 0;
}
.inner-thoughts-poster .thoughts-footer .footer-sign {
  font-family: "Georgia", serif;
  font-style: italic;
  font-size: 12px;
  color: #b0b0b0;
  border-bottom: 1px solid #eee;
  padding-bottom: 2px;
}
.inner-thoughts-poster .poster-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #ccc;
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s, transform 0.2s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner-thoughts-poster .poster-close-btn:hover {
  color: #333;
  transform: rotate(90deg);
}
.inner-thoughts-poster .poster-close-btn svg {
  width: 20px;
  height: 20px;
}

.exit-confirmation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.exit-confirmation-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.exit-confirmation-modal {
  background-color: #f7f7f7;
  border-radius: 24px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
  width: 90%;
  max-width: 320px;
  text-align: center;
  padding: 24px;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.exit-confirmation-overlay.visible .exit-confirmation-modal {
  transform: scale(1) translateY(0);
}
.exit-confirmation-modal .profiles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.exit-confirmation-modal .profile-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.exit-confirmation-modal .profile-item .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.exit-confirmation-modal .profile-item .nickname {
  font-size: 13px;
  font-weight: 500;
  color: #3c3c43;
}
.exit-confirmation-modal .heartbeat-container {
  flex-grow: 1;
  height: 60px;
  margin: 0 16px;
  overflow: hidden;
}
.exit-confirmation-modal .heartbeat-svg {
  width: 100%;
  height: 100%;
}
.exit-confirmation-modal .heartbeat-path {
  fill: none;
  stroke: #F472B6;
  stroke-width: 2.5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  filter: drop-shadow(0 0 4px #F472B6) drop-shadow(0 0 12px rgba(244, 114, 182, 0.7));
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw-in 2s linear infinite;
}
@keyframes draw-in {
  to {
    stroke-dashoffset: 0;
  }
}
.exit-confirmation-modal .modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  margin: 16px 0;
}
.exit-confirmation-modal .modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.exit-confirmation-modal .modal-actions button {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.exit-confirmation-modal .modal-actions button:active {
  transform: scale(0.96);
}
.exit-confirmation-modal .modal-actions button.cancel-btn {
  background-color: #e5e5ea;
  color: #1c1c1e;
}
.exit-confirmation-modal .modal-actions button.confirm-btn {
  background-color: #000000;
  color: #FFFFFF;
}

@keyframes heartbeat-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* ==========================================================================
   通用弹出菜单 (Action Popover - 用于简单的横向菜单)
   ========================================================================== */
.action-popover, .message-action-popover, #recent-memory-action-popover {
  position: absolute;
  background-color: var(--c-bg-primary);
  color: var(--c-text-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border-light);
  z-index: 1002;
  display: flex;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.action-popover.visible, .visible.message-action-popover, .visible#recent-memory-action-popover {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.action-popover::after, .message-action-popover::after, #recent-memory-action-popover::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background-color: var(--c-bg-primary);
  border-right: 1px solid var(--c-border-light);
  border-bottom: 1px solid var(--c-border-light);
}

.popover-button {
  padding: 10px 15px;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
.popover-button:hover {
  background-color: var(--c-bg-tertiary);
}
.popover-button svg {
  width: 18px;
  height: 18px;
  stroke: var(--c-text-primary);
  stroke-width: 2;
  fill: none; /* 确保图标是空心的 */
}
.popover-button.delete svg {
  stroke: var(--c-accent-red);
}
.popover-button.delete span {
  color: var(--c-accent-red);
}

.popover-divider {
  width: 1px;
  background-color: var(--c-border);
  margin: 8px 0;
}

/* 
 * ==========================================================================
 *   ▼▼▼ 新增/修正：消息长按菜单专属样式 (Message Action Popover) ▼▼▼
 * ==========================================================================
 */
.message-action-popover, #recent-memory-action-popover {
  /* 继承 .action-popover 的基础样式，但覆盖布局 */
  /* --- 核心：网格布局 --- */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建一个3列的网格 */
  gap: 4px; /* 网格项之间的间距 */
  padding: 8px;
  width: 240px; /* 给一个固定的宽度，让布局更稳定 */
  overflow: visible; /* 确保箭头不会被裁剪 */
  /* 当菜单被放置在消息下方时，箭头需要朝上 */
  /* 调整内部按钮以适应网格 */
  /* 调整内部按钮以适应网格 */
  /* 隐藏旧的分割线，因为网格布局不再需要它 */
}
.message-action-popover.popover-place-below::after, .popover-place-below#recent-memory-action-popover::after {
  top: -7px;
  bottom: auto;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid var(--c-border-light);
  border-top: 1px solid var(--c-border-light);
}
.message-action-popover .popover-button, #recent-memory-action-popover .popover-button {
  background: none; /* <-- 新增：移除按钮的默认背景 */
  border: none; /* <-- 新增：移除按钮的默认边框 */
  padding: 8px;
  border-radius: 8px;
  justify-content: center;
  gap: 6px;
}
.message-action-popover .popover-divider, #recent-memory-action-popover .popover-divider {
  display: none;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .message-action-popover, #recent-memory-action-popover {
    width: 61.5vw; /* 使用vw单位以适应不同屏幕 */
  }
}
/* ==========================================================================
   灵动岛 (Dynamic Island)
   ========================================================================== */
.dynamic-island-container {
  position: absolute;
  top: var(--space-sm);
  left: 50%;
  transform: translateX(-50%) scale(0.5) translateY(-100px);
  opacity: 0;
  background-color: var(--c-text-primary);
  color: white;
  border-radius: 50px;
  padding: var(--space-sm) var(--space-lg);
  z-index: 1001;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.dynamic-island-container.show {
  transform: translateX(-50%) scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.dynamic-island-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  font-weight: 500;
}

.dynamic-island-content svg {
  stroke: var(--c-accent-green);
}

/* ==========================================================================
   ▼▼▼ 样式修正：统一近期记忆菜单的样式 ▼▼▼
   ========================================================================== */
#recent-memory-action-popover::after {
  display: none;
}

/* 
 * ==========================================================================
 *   ▼▼▼ 新增：通用垂直操作菜单 (Action Menu Popover) ▼▼▼
 * ==========================================================================
 */
.action-menu-popover {
  position: absolute;
  top: 75px;
  right: 15px;
  background-color: var(--c-bg-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--c-border-light);
  z-index: 200;
  overflow: hidden;
  display: none;
  min-width: 160px;
  padding: 6px;
  box-sizing: border-box;
}
.action-menu-popover.show {
  display: block;
}

/* styles/components/_popover.scss */
.action-menu-popover {
  position: absolute;
  top: 75px;
  right: 15px;
  background-color: var(--c-bg-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--c-border-light);
  min-width: 160px;
  padding: 6px;
  box-sizing: border-box;
  z-index: 999;
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.action-menu-popover.show {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  padding: 0 var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 110;
  pointer-events: none;
  color: var(--c-text-primary);
}
.status-bar.hidden {
  display: none !important;
}
.status-bar .status-time,
.status-bar .battery-percentage {
  font-size: 15px;
  font-weight: 600;
}
.status-bar .status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-bar .status-icons svg:first-of-type {
  position: relative;
  top: -1.5px;
}
.status-bar .battery-percentage {
  margin-left: 4px;
}

.sticker-picker-panel {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  max-width: 350px;
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sticker-picker-panel.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px) scale(0.9);
  pointer-events: none;
  visibility: hidden;
}

.sticker-picker-content {
  overflow-y: auto;
  padding: var(--space-sm);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
  gap: var(--space-sm);
  align-content: start;
  max-height: 200px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sticker-picker-content::-webkit-scrollbar {
  display: none;
}

.sticker-picker-item {
  cursor: pointer;
  border-radius: var(--radius-md);
  background-color: var(--c-bg-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  aspect-ratio: 1/1;
}
.sticker-picker-item:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-md);
  z-index: 1;
}
.sticker-picker-item:active {
  transform: scale(0.95);
}

.sticker-image-wrapper {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3px;
}
.sticker-image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.sticker-label {
  font-size: 10px;
  color: var(--c-text-secondary);
  text-align: center;
  margin: 0;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

.sticker-picker-empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--c-text-secondary);
  font-size: var(--font-sm);
  padding: var(--space-lg) var(--space-md);
  line-height: 1.6;
}

.sticker-picker-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px var(--space-md);
  background-color: var(--c-bg-secondary);
  border-top: 1px solid var(--c-border);
  overflow-x: auto;
  flex-shrink: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sticker-picker-tabs::-webkit-scrollbar {
  display: none;
}

.sticker-pack-tab {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 14px;
  background-color: var(--c-bg-primary);
  color: var(--c-text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--c-border);
  white-space: nowrap;
}
.sticker-pack-tab:hover {
  background-color: var(--c-bg-tertiary);
}
.sticker-pack-tab.active {
  background-color: #8a6dff;
  color: white;
  border-color: #8a6dff;
}

/* ==========================================================================
   Dropdown Style Picker Component (下拉样式选择器组件)
   ========================================================================== */
.timestamp-center-option {
  flex-wrap: wrap;
  padding-bottom: 0;
}
.timestamp-center-option.dropdown-open {
  padding-bottom: 12px;
}

.dropdown-trigger-area {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-grow: 1;
  min-width: 120px;
}

.dropdown-arrow {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  color: var(--c-text-tertiary);
  transition: transform 0.2s ease-in-out;
  flex-shrink: 0;
}
.dropdown-arrow.active {
  transform: rotate(180deg);
}

.style-picker-dropdown {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease, margin-top 0.3s ease;
}
.style-picker-dropdown.active {
  display: flex;
  max-height: 200px;
  opacity: 1;
}

.style-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: 1px solid transparent;
}
.style-option:hover {
  background-color: var(--c-bg-secondary);
}
.style-option.selected {
  background-color: var(--c-accent-blue-bg);
  border-color: var(--c-accent-blue);
}

.style-preview {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  background-color: var(--c-bg-primary);
  font-size: 13px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.style-preview span::before {
  display: none !important;
}

.simple-center-preview {
  color: var(--c-text-secondary);
}

.pill-center-preview {
  background-color: #E6E6E6;
  color: var(--c-text-primary);
  font-weight: 500;
  gap: 6px;
}
.pill-center-preview svg {
  color: #666;
}

.style-description {
  color: var(--c-text-primary);
  font-size: 14px;
  flex-shrink: 0;
  width: 70px;
}

.chat-timestamp {
  display: flex;
  justify-content: center;
  margin: 16px 0;
  width: 100%;
  clear: both;
}

.chat-timestamp-content {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  font-size: 13px;
  color: #ffffff;
}

.chat-timestamp--pill-center {
  padding: 5px 12px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.chat-timestamp--pill-center .timestamp-icon {
  width: 1em;
  height: 1em;
  margin-right: 6px;
}

.chat-timestamp--simple-center {
  color: #8e8e93;
  background-color: transparent;
}

#home-screen-wrapper {
  padding: var(--space-lg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--c-bg-primary);
  background-size: cover;
  background-position: center center;
  transition: background-image 0.5s ease-in-out;
}

.time-module {
  color: var(--c-text-primary);
  /* 保持与原版接近的边距 (原版55px)，避免下方内容大幅跳动 */
  margin-top: 50px;
  /* 稍微调整左右内边距，跟下方的 App 图标对齐 */
  padding: 0 20px;
  box-sizing: border-box;
  flex-shrink: 0;
  /* 确保文字阴影轻柔，提升质感 */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}
.time-module .time {
  /* 原版 88px -> 微调至 76px，保留大气的视觉重心 */
  font-size: 76px;
  /* 保持极细字体，还原你要的轻盈感 */
  font-weight: 200;
  line-height: 1;
  /* 稍微收紧字间距，这是让大号细字体显精致的关键 */
  letter-spacing: -2.5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.time-module .date-line {
  display: flex;
  align-items: center;
  /* 控制日期距离时间的间隙 */
  margin-top: 8px;
  /* 元素间距 */
  gap: 12px;
}
.time-module .date-line .day-period,
.time-module .date-line .date {
  /* 原版 28px -> 微调至 20px，既不喧宾夺主，又清晰可见 */
  font-size: 20px;
  /* 稍微比时间粗一点点(300)，增加层级对比 */
  font-weight: 300;
  /* 增加字间距，提升高级感 */
  letter-spacing: 1px;
  /* 颜色稍微淡一点，突出时间 */
  opacity: 0.85;
}
.time-module .date-line .separator {
  font-size: 14px;
  opacity: 0.3; /* 分隔符做得很淡，起装饰作用 */
  transform: translateY(-1px); /* 微调垂直对齐 */
}

.main-content-area {
  margin-top: var(--space-xl);
  flex-grow: 1;
}

.top-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.middle-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 55px;
}

.main-apps-grid,
.secondary-apps-grid {
  display: grid;
  grid-template-columns: repeat(2, 64px);
  gap: var(--space-lg) 18px;
}

.secondary-apps-grid {
  padding-left: 10px;
}

.large-photo-widget {
  width: 168px;
  height: 168px;
  background-color: var(--c-bg-tertiary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  overflow: hidden;
}
.large-photo-widget img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ticket-widget {
  width: 160px;
  position: relative; /* 【修改】确保它是子元素定位的锚点 */
}

/* ▲▲▲ 修改结束 ▲▲▲ */
/* ▼▼▼ 用这段代码替换你原来的 .ticket-widget 样式 ▼▼▼ */
.ticket-widget {
  width: 160px;
  position: relative;
  /* 【核心修改】给它一个内边距，为悬浮的插槽腾出一点空间 */
  padding-top: 5px;
}

/* ▲▲▲ 替换结束 ▲▲▲ */
.ticket-header-title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-family: "Courier New", Courier, monospace;
}

/* ▼▼▼ 用这段代码【替换】你原来的 .ticket-slot 样式 ▼▼▼ */
.ticket-slot {
  height: 15px;
  background-color: #e0e0e0;
  border-radius: 3px 3px 0 0;
  /* --- 【核心修改】 --- */
  position: absolute; /* 让它脱离文档流，悬浮起来 */
  top: -5px; /* 向上移动5px，制造重叠效果 */
  left: 50%; /* 水平居中的第一步 */
  transform: translateX(-50%); /* 水平居中的第二步 */
  width: 180px; /* 【关键】给它一个比父容器更宽的固定宽度 */
  z-index: 1; /* 确保它在票身的下方（视觉上） */
}
.ticket-slot::after {
  content: "";
  position: absolute;
  width: 95%; /* 让黑条充满父容器(ticket-slot)的宽度 */
  height: 6px;
  background-color: #2c2c2e;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 99px;
}

/* ▲▲▲ 替换结束 ▲▲▲ */
/* ▼▼▼ 用这段代码【替换】你原来的 .ticket-body 样式 ▼▼▼ */
.ticket-body {
  background-color: white;
  padding: 8px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--c-border);
  border-radius: 0 0 10px 10px;
  position: relative; /* 必须有定位才能让 z-index 生效 */
  z-index: 2; /* 【关键】让票身在票槽之上，盖住它 */
  /* margin-top: -10px; <-- 确保这一行被彻底删除 */
  -webkit-mask: radial-gradient(circle 7px at 0 144px, transparent 100%, black 0), radial-gradient(circle 7px at 100% 144px, transparent 100%, black 0);
  mask: radial-gradient(circle 7px at 0 144px, transparent 100%, black 0), radial-gradient(circle 7px at 100% 144px, transparent 100%, black 0);
}

/* ▲▲▲ 替换结束 ▲▲▲ */
.ticket-photo-label {
  display: block;
  cursor: pointer;
  margin-bottom: 8px;
}

#ticket-photo-img {
  display: block;
  width: 100%;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
}

.perforation-line {
  border-top: 2px dashed #ddd;
  margin: 0 0 8px 0;
}

#ticket-stub-input {
  width: 100%;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: inherit;
  font-size: 11px;
  text-align: center;
  color: #555;
  box-sizing: border-box;
  cursor: text;
}
#ticket-stub-input::-moz-placeholder {
  color: #999;
  opacity: 1;
}
#ticket-stub-input::placeholder {
  color: #999;
  opacity: 1;
}

.hidden-upload {
  display: none;
}

/* ▼▼▼ 请用这段代码替换你文件中【整个】的 @media (max-width: 600px) 代码块 ▼▼▼ */
@media (max-width: 600px) {
  .time-module {
    margin-top: 13.3vw;
    padding: 0 5.3vw;
    margin-bottom: 10.7vw;
  }
  .time-module .time {
    font-size: 20.2vw;
    letter-spacing: -0.67vw;
  }
  .time-module .date-line .day-period,
  .time-module .date-line .date {
    font-size: 5.3vw;
  }
  .middle-section {
    margin-top: 14.7vw;
  }
  .main-apps-grid,
  .secondary-apps-grid {
    grid-template-columns: repeat(2, 17vw);
    gap: var(--space-lg) 4.8vw;
  }
  .secondary-apps-grid {
    padding-left: 2.7vw;
  }
  .large-photo-widget {
    width: 44.8vw;
    height: 44.8vw;
  }
  .ticket-widget-wrapper {
    padding-right: 2.56vw;
  }
  .ticket-widget {
    /* (160px / 375px) * 100vw ≈ 42.7vw */
    width: 42.7vw;
    /* (5px / 375px) * 100vw ≈ 1.33vw */
    padding-top: 1.33vw;
  }
  .ticket-header-title {
    font-size: 5vw;
    letter-spacing: 0.5vw;
    margin-bottom: 2vw;
  }
  .ticket-slot {
    /* 【修改】应用您的最终方案，替换掉旧的 margin 写法 */
    height: 5vw; /* 15px -> 4vw */
    /* -5px -> -1.33vw */
    width: 48vw; /* 180px -> 48vw */
    border-radius: 0.8vw 0.8vw 0 0; /* 3px -> 0.8vw */
    /* 【删除】旧的 margin 属性，因为它已经被 absolute 定位替代 */
  }
  .ticket-slot::after {
    /* 【保持】您的 95% 宽度方案，这是最完美的响应式做法 */
    width: 95%;
    height: 1.6vw; /* 6px -> 1.6vw */
    border-radius: 99px; /* 无需转换 */
  }
  .ticket-body {
    padding: 2.1vw; /* 8px -> 2.1vw */
    border-radius: 0 0 2.7vw 2.7vw; /* 10px -> 2.7vw */
    /* 【删除】旧的 margin-top 属性，现在用 z-index 控制堆叠 */
    /* 【修正】mask 的垂直位置，以精确匹配桌面版比例 */
    /* 桌面版图片高120px + padding 8px*2 + line 2px + input 11px ≈ 149px。mask在144px。*/
    /* 移动端图片高29vw, 144/149 ≈ 0.96。 29vw * 0.96 ≈ 28vw。所以mask位置应在33vw左右。我们用更精确的计算。*/
    /* (144px / 160px) * 42.7vw (票身宽度) = 38.4vw */
    -webkit-mask: radial-gradient(circle 1.8vw at 0 38.4vw, transparent 100%, black 0), radial-gradient(circle 1.8vw at 100% 38.4vw, transparent 100%, black 0);
    mask: radial-gradient(circle 1.8vw at 0 38.4vw, transparent 100%, black 0), radial-gradient(circle 1.8vw at 100% 38.4vw, transparent 100%, black 0);
  }
  .ticket-photo-label {
    margin-bottom: 2.05vw;
  }
  #ticket-photo-img {
    height: 32vw; /* 120px -> 32vw */
  }
  .perforation-line {
    border-top-width: 0.51vw;
    margin-bottom: 2.05vw;
  }
  #ticket-stub-input {
    font-size: 2.9vw; /* 11px -> 2.9vw */
  }
}
/* ▲▲▲ 替换结束 ▲▲▲ */
[id^=page-settings-] .app-header,
#page-settings .app-header {
  border-bottom: 1px solid var(--c-border-light);
}
[id^=page-settings-] .app-content,
#page-settings .app-content {
  padding: var(--space-lg) var(--space-md);
  background-color: var(--c-bg-secondary);
}

/* --- API设置页面 & 屏幕设置页面 --- */
#page-settings-api .app-content, #page-settings-screen .app-content {
  padding: var(--space-sm) var(--space-md);
}

/* 带有标题和分割线的设置区域 */
.settings-section-header {
  display: flex;
  align-items: center;
  margin: var(--space-xl) 0 var(--space-sm) var(--space-xs);
}

.settings-section-header .header-title {
  background-color: var(--c-text-primary);
  color: white;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: 600;
}

.settings-section-header .header-line {
  flex-grow: 1;
  height: 1px;
  background-color: #e0e0e0;
  margin-left: calc(-1 * var(--space-sm));
  z-index: -1;
}

/* 设置项列表卡片 */
.settings-list {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-md);
  flex-shrink: 0;
}

.settings-list-item {
  justify-content: space-between;
  padding: var(--radius-lg);
  font-size: var(--font-md);
}

.settings-list-item .label {
  color: var(--c-text-primary);
}

.settings-list-item .value {
  color: var(--c-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.settings-list-item .value::after {
  content: "›";
  font-size: var(--space-lg);
  font-weight: bold;
  color: var(--c-text-tertiary);
}

/* 按钮组和辅助文本 */
.btn-group {
  display: flex;
  gap: var(--space-sm);
  margin-top: 30px;
}

.btn-group .btn {
  flex-grow: 1;
}

.helper-text {
  font-size: var(--font-xs);
  color: var(--c-text-secondary);
  text-align: center;
  padding: 0 var(--space-md);
  margin-top: 8px;
}

/* 温度滑块专属样式 */
.settings-list-item.temperature-control {
  padding-bottom: 8px;
  cursor: default;
}

.settings-list-item.temperature-control:hover {
  background-color: var(--c-bg-primary);
}

.value-no-arrow {
  color: var(--c-text-secondary);
}

.settings-list-item .value-no-arrow::after {
  content: "";
}

.temperature-slider-container {
  background-color: var(--c-bg-primary);
  padding: 0 var(--radius-lg) var(--radius-lg);
  border-bottom: 1px solid var(--c-border);
}

.settings-list .temperature-slider-container:last-child {
  border-bottom: none;
}

input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 8px;
  background: var(--c-border);
  border-radius: var(--space-xs);
  outline: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

input[type=range]:hover {
  opacity: 1;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--c-bg-primary);
  border: 1px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--c-bg-primary);
  border: 1px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#page-settings-account .app-header {
  justify-content: space-between;
  border-bottom: none;
  /* 
   * ✅ 修改点：
   * 删除了 env(safe-area-inset-top)。
   * 原来是 刘海 + 45px，现在直接给一个舒服的固定值 75px。
   * 这个高度会让大头像下面的空间显得更开阔，无论有无状态栏都好看。
   */
  padding-top: 50px;
  padding-bottom: 20px;
}
#page-settings-account .app-header .app-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#page-settings-account .header-more-button {
  right: var(--space-md);
}
#page-settings-account .header-more-button svg {
  width: 24px;
  height: 24px;
  fill: #333;
}
#page-settings-account .app-content > .btn {
  margin-top: auto;
  margin-bottom: var(--space-sm);
}

#page-settings-persona .app-content > .btn {
  margin-top: auto;
}

#page-settings-social .full-width-button {
  margin-top: var(--space-md);
  font-weight: 600;
}
#page-settings-social .helper-text {
  margin-top: 0;
  margin-bottom: var(--space-lg);
}

#page-settings-stickers .app-header {
  justify-content: center;
}
#page-settings-stickers .app-content {
  padding: var(--space-md);
  background-color: var(--c-bg-secondary);
  padding-bottom: 100px;
}

.account-profile-card {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  padding: var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.account-avatar-wrapper {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #e0e0e0;
  margin-bottom: var(--radius-lg);
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.account-avatar-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.account-name {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--c-text-primary);
  margin: 0 0 8px;
  cursor: pointer;
}

.account-location {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-sm);
  color: var(--c-text-secondary);
  cursor: pointer;
}
.account-location svg {
  width: 16px;
  height: 16px;
  fill: var(--c-text-secondary);
}

.persona-card {
  padding: var(--space-sm);
  flex-grow: 1;
  display: flex;
  margin-bottom: var(--space-md);
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
}

#persona-textarea,
#contact-persona-textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: var(--font-sm);
  line-height: 1.6;
  background-color: transparent;
  color: var(--c-text-primary);
}

.contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: #e9e9eb;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-name {
  font-weight: 500;
}

.contact-relation {
  font-size: 12px;
  color: var(--c-text-secondary);
}

.styled-input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
  box-sizing: border-box;
  background-color: var(--c-bg-tertiary);
}
.styled-input:focus {
  outline: none;
  border-color: var(--c-accent);
  background-color: var(--c-bg-primary);
}

.helper-text {
  font-size: var(--font-xs);
  color: var(--c-text-secondary);
  text-align: center;
  padding: 0 var(--space-md);
  margin-top: 8px;
}

/* --- 用户设置页: 身份管理弹窗专属样式 --- */
.identity-delete-icon {
  margin-left: auto;
}

.identity-modal-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.identity-modal-actions .btn {
  flex-grow: 1;
  padding: 12px;
  font-size: var(--font-md);
}

/* --- 用户设置页: 身份管理弹窗列表样式修正 (V2 - 提升优先级) --- */
#identity-switcher-card .settings-card {
  max-height: 220px !important;
  overflow-y: auto !important;
  margin-bottom: 0 !important;
}

/* --- 用户设置页: 身份管理弹窗 - “添加身份”按钮颜色覆盖 --- */
#add-identity-btn {
  background-color: var(--c-text-primary);
  color: white;
}
#add-identity-btn:hover {
  background-color: #333;
}

/* ========================================================================== */
/* === 【新增】联系人编辑页面样式 (Contact Edit Page) === */
/* ========================================================================== */
#page-contact-edit .app-content {
  padding: var(--space-lg) var(--space-md);
  background-color: var(--c-bg-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-edit-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) 0;
}

.contact-edit-avatar-wrapper {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #e0e0e0;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  flex-shrink: 0; /* 防止头像被压缩 */
}

.contact-edit-avatar-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.contact-edit-inputs-card,
.contact-edit-persona-card {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.contact-edit-inputs-card .list-item {
  padding: 8px var(--radius-lg); /* 减小内边距以适应输入框 */
  gap: var(--space-md);
}

.contact-edit-inputs-card .list-item .label {
  font-weight: 500;
  color: var(--c-text-primary);
  flex-basis: 50px; /* 给标签一个固定宽度 */
  flex-shrink: 0;
}

.contact-edit-inputs-card .list-item input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: var(--font-md);
  color: var(--c-text-secondary);
  text-align: right;
}

.contact-edit-persona-card {
  flex-grow: 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
}

#page-contact-edit .btn-group {
  margin-top: auto; /* 将按钮推到底部 */
  padding-top: var(--space-md);
}

/* --- 屏幕设置: 图标自定义 --- */
.settings-list-item .btn-reset.wallpaper-reset-btn {
  background-color: var(--c-text-secondary);
  color: white;
}

.icon-custom-item {
  cursor: default;
  padding: var(--space-md) var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon-custom-item:hover {
  background-color: var(--c-bg-primary);
}

.icon-custom-item .label {
  font-weight: 500;
}

.icon-preview {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--c-bg-tertiary);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--c-border-light);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: var(--space-md);
}

.icon-preview svg {
  width: 24px;
  height: 24px;
}

.icon-preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.icon-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
  width: 165px;
}

.btn-small {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.btn-small.btn-save {
  background-color: var(--c-text-primary);
  color: white;
}

.btn-small.btn-reset {
  background-color: var(--c-text-secondary);
  color: white;
}

#icon-customization-list {
  max-height: 45vh;
  overflow-y: auto;
}

/* --- 分组和表情网格样式 --- */
.sticker-drawer {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.sticker-drawer[open] {
  box-shadow: var(--shadow-md);
}

.sticker-drawer summary {
  display: flex;
  align-items: center;
  padding: var(--space-lg);
  cursor: pointer;
  list-style: none;
  outline: none;
  position: relative;
}

.sticker-drawer summary::-webkit-details-marker {
  display: none;
}

.sticker-drawer-header-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-right: var(--space-md);
}

.sticker-drawer-info {
  flex-grow: 1;
}

.sticker-drawer-info .name {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--c-text-primary);
}

.sticker-drawer-info .count {
  font-size: var(--font-sm);
  color: var(--c-text-secondary);
}

.sticker-drawer-actions {
  display: flex;
  gap: var(--space-sm);
}

.sticker-drawer-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 0.5;
}

.sticker-drawer-actions button:hover {
  opacity: 1;
}

.sticker-drawer-actions svg {
  width: 18px;
  height: 18px;
  stroke: var(--c-text-secondary);
}

.sticker-drawer-chevron {
  margin-left: var(--space-md);
  transition: transform 0.3s ease;
}

.sticker-drawer-chevron svg {
  width: 20px;
  height: 20px;
  stroke: var(--c-text-tertiary);
  stroke-width: 2.5;
}

.sticker-drawer[open] > summary .sticker-drawer-chevron {
  transform: rotate(90deg);
}

.sticker-drawer-content {
  padding: 0 var(--space-lg) var(--space-lg);
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space-md);
  border-top: 1px solid var(--c-border);
  padding-top: var(--space-lg);
}

.sticker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  background-color: var(--c-bg-secondary);
  padding: var(--space-xs);
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.sticker-item:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.sticker-item .sticker-image {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.sticker-item .sticker-explanation {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 11px;
  text-align: center;
  padding: 5px;
  margin: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.sticker-item:hover .sticker-explanation {
  opacity: 1;
}

.sticker-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.sticker-item:hover .sticker-delete-btn {
  opacity: 1;
}

/* --- 上传弹窗样式 --- */
.sticker-upload-modal {
  width: 90%;
  max-width: 420px;
}

#sticker-upload-unified-grouping {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background-color: #f0f2f5;
  border-bottom: 1px solid #e5e5ea;
  flex-shrink: 0;
}

#sticker-upload-unified-grouping label {
  font-size: 14px;
  color: #636366;
  flex-shrink: 0;
}

#sticker-upload-unified-grouping select {
  flex-grow: 1;
  /* 移除了 width: 100% 因为 flex-grow 已经足够 */
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #d1d1d6;
  background-color: #FFFFFF;
  font-size: 14px;
}

.sticker-upload-list {
  max-height: 55vh;
  overflow-y: auto;
  margin-bottom: var(--space-lg);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
}

.sticker-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
  color: var(--c-text-secondary);
  border: 2px dashed var(--c-border-light);
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.sticker-upload-dropzone.dragover {
  background-color: #eef5ff;
  border-color: var(--c-accent);
}

.sticker-upload-dropzone svg {
  stroke: var(--c-text-tertiary);
  margin-bottom: var(--space-sm);
}

.sticker-upload-dropzone .file-input-label {
  color: var(--c-accent);
  font-weight: 500;
  cursor: pointer;
}

.sticker-upload-dropzone small {
  margin-top: var(--space-xs);
  font-size: var(--font-xs);
}

.sticker-upload-buttons {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}

.sticker-upload-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--c-border);
}

.sticker-upload-list > .sticker-upload-item:last-child {
  border-bottom: none;
}

.sticker-upload-item .preview-img {
  width: 60px;
  height: 60px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--radius-sm);
  background-color: var(--c-bg-tertiary);
  flex-shrink: 0;
}

.sticker-upload-item .upload-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sticker-upload-item .upload-details input, .sticker-upload-item .upload-details select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background-color: var(--c-bg-primary);
}

.sticker-upload-item .upload-details input:focus, .sticker-upload-item .upload-details select:focus {
  outline: none;
  border-color: var(--c-accent);
}

.sticker-upload-item .remove-upload-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  opacity: 0.6;
}

.sticker-upload-item .remove-upload-btn:hover {
  opacity: 1;
}

.sticker-upload-item .remove-upload-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--c-accent-red);
}

/* ========================================================== */
/* == 【新增 + 精修】设置页面在手机端的响应式微调 == */
/* ========================================================== */
@media (max-width: 600px) {
  /* --- 通用设置页面样式 --- */
  [id^=page-settings-] .app-content,
  #page-settings .app-content {
    /* 【保持】间距使用变量，可以缩放 */
    padding: var(--space-lg) var(--space-md);
  }
  #page-settings-api .app-content,
  #page-settings-screen .app-content {
    padding: var(--space-sm) var(--space-md);
  }
  /* --- 账户设置页面特殊调整 --- */
  #page-settings-account .app-header {
    padding-top: 15vw;
    padding-bottom: 7vw; /* 30px */
  }
  #page-settings-account .header-more-button svg {
    width: 6.15vw; /* 24px */
    height: 6.15vw; /* 24px */
  }
  /* --- 账户信息卡片 --- */
  .account-profile-card {
    padding: var(--space-xl) 0;
  }
  .account-avatar-wrapper {
    width: 23vw; /* 90px */
    height: 23vw; /* 90px */
    margin-bottom: var(--radius-lg);
  }
  .account-name {
    /* 【修改】大标题字体用 clamp 严格控制 */
    font-size: clamp(20px, 5.12vw, 22px);
    margin-bottom: 2.05vw; /* 8px */
  }
  .account-location svg {
    width: 4.1vw; /* 16px */
    height: 4.1vw; /* 16px */
  }
  /* --- 人设/交际圈卡片 --- */
  .persona-card {
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  .contact-avatar {
    width: 10.25vw; /* 40px */
    height: 10.25vw; /* 40px */
  }
  .contact-info {
    gap: 0.51vw; /* 2px */
  }
  /* --- 输入框和按钮 --- */
  .styled-input {
    padding: 2.56vw; /* 10px */
  }
  .btn-group {
    margin-top: 7.69vw; /* 30px */
  }
  /* --- 联系人编辑页 --- */
  #page-contact-edit .app-content {
    gap: var(--space-md);
  }
  .contact-edit-avatar-section {
    padding: var(--space-md) 0;
  }
  .contact-edit-avatar-wrapper {
    width: 23vw; /* 90px */
    height: 23vw; /* 90px */
  }
  .contact-edit-inputs-card .list-item {
    padding: 2.05vw var(--radius-lg); /* 8px */
  }
  /* --- 表情包页面 --- */
  #page-settings-stickers .app-content {
    padding-bottom: 25.64vw; /* 100px */
  }
  .sticker-drawer-header-icon {
    width: 10.25vw; /* 40px */
    height: 10.25vw; /* 40px */
  }
  .sticker-drawer-actions button {
    padding: 1.02vw; /* 4px */
  }
  .sticker-drawer-actions svg {
    width: 4.61vw; /* 18px */
    height: 4.61vw; /* 18px */
  }
  .sticker-drawer-chevron svg {
    width: 5.12vw; /* 20px */
    height: 5.12vw; /* 20px */
  }
  .sticker-grid {
    /* 【修改】网格最小宽度用 vw 以便缩放 */
    grid-template-columns: repeat(auto-fill, minmax(20.51vw, 1fr)); /* minmax(80px, 1fr) */
  }
  .sticker-item .sticker-explanation {
    /* 【修改】这里的字体固定为 11px */
    font-size: 11px;
    padding: 1.28vw; /* 5px */
  }
}
/* ========================================================================== */
/* == 【新增】设置 - 数据管理页面样式 (Data Management) == */
/* ========================================================================== */
#page-settings-data {
  /* --- 核心修复：强制所有卡片禁止被挤压 --- */
}
#page-settings-data .app-content {
  background-color: #f0f2f5;
  overflow-y: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  /* --- 核心修复：添加回水平和顶部内边距 --- */
  padding: var(--space-lg) var(--space-md) 80px;
  box-sizing: border-box;
}
#page-settings-data .data-management-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: center;
}
#page-settings-data .data-storage-viz-container,
#page-settings-data .data-optimizer-card,
#page-settings-data .data-actions-card,
#page-settings-data .data-danger-zone {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
#page-settings-data .data-actions-card,
#page-settings-data .data-danger-zone {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
#page-settings-data .data-action-item {
  display: flex;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#page-settings-data .data-action-item:not(:last-child) {
  border-bottom: 1px solid #f0f2f5;
}
#page-settings-data .data-action-item:hover {
  background-color: #f9f9f9;
}
#page-settings-data .data-action-item .action-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}
#page-settings-data .data-action-item .action-icon svg {
  width: 20px;
  height: 20px;
  stroke: #333;
}
#page-settings-data .data-action-item .action-icon.danger svg {
  stroke: #ff3b30;
}
#page-settings-data .data-action-item .action-text {
  flex-grow: 1;
}
#page-settings-data .data-action-item .action-text .title {
  display: block;
  font-weight: 500;
  color: #000;
}
#page-settings-data .data-action-item .action-text .subtitle {
  display: block;
  font-size: 13px;
  color: #8e8e93;
  margin-top: 2px;
}
#page-settings-data .data-action-item .action-text .text-danger {
  color: #ff3b30;
}
#page-settings-data .data-action-item .action-arrow {
  font-size: 20px;
  color: #c7c7cc;
  margin-left: 12px;
}

.data-hero-section {
  display: none !important;
}

/* --- 【重构】柔和版数据视图样式 --- */
.data-storage-viz-container.style-soft {
  background-color: #fff;
  border-radius: 24px; /* 更大的圆角，更柔和 */
  padding: 28px 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03); /* 极轻的阴影，像漂浮的纸片 */
  position: relative;
  overflow: hidden;
  /* 顶部标题区 */
  /* 核心数字区 */
  /* 进度条轨道 */
  /* 图例列表 */
}
.data-storage-viz-container.style-soft .viz-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.data-storage-viz-container.style-soft .viz-header .header-info {
  display: flex;
  flex-direction: column;
}
.data-storage-viz-container.style-soft .viz-header .header-info .title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.5px;
}
.data-storage-viz-container.style-soft .viz-header .header-info .subtitle {
  font-size: 12px;
  color: #999;
  font-family: serif; /* 衬线体增加一点文艺感 */
  font-style: italic;
  margin-top: 2px;
}
.data-storage-viz-container.style-soft .viz-header .refresh-icon-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #999;
  transition: color 0.3s ease;
}
.data-storage-viz-container.style-soft .viz-header .refresh-icon-btn svg {
  width: 20px;
  height: 20px;
}
.data-storage-viz-container.style-soft .viz-header .refresh-icon-btn:active {
  color: #000;
}
.data-storage-viz-container.style-soft .viz-total-section {
  text-align: center;
  margin-bottom: 28px;
}
.data-storage-viz-container.style-soft .viz-total-section .total-value {
  display: block;
  font-size: 42px; /* 纤细且巨大 */
  font-weight: 300; /* Light weight */
  color: #000;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -1px;
}
.data-storage-viz-container.style-soft .viz-total-section .total-label {
  display: block;
  font-size: 13px;
  color: #888;
  margin-top: 8px;
  letter-spacing: 1px;
}
.data-storage-viz-container.style-soft .viz-progress-track {
  width: 100%;
  height: 12px; /* 变细，更精致 */
  background-color: #f7f7f7;
  border-radius: 10px; /* 全圆角 */
  display: flex;
  overflow: hidden; /* 裁剪 */
  margin-bottom: 30px;
  gap: 2px; /* 分段之间留微小白隙 */
}
.data-storage-viz-container.style-soft .viz-bar-segment {
  height: 100%;
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* 1. 聊天：深邃黑 */
  /* 2. 媒体：波点纹理 (时尚感) */
  /* 3. 世界书：高级灰 */
  /* 4. 其他：非常浅的灰 */
}
.data-storage-viz-container.style-soft .viz-bar-segment:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.data-storage-viz-container.style-soft .viz-bar-segment:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.data-storage-viz-container.style-soft .viz-bar-segment.seg-chat {
  background-color: #222;
}
.data-storage-viz-container.style-soft .viz-bar-segment.seg-media {
  background-color: #e0e0e0;
  background-image: radial-gradient(#888 15%, transparent 16%);
  background-size: 4px 4px; /* 细密的波点 */
}
.data-storage-viz-container.style-soft .viz-bar-segment.seg-world {
  background-color: #bbb;
}
.data-storage-viz-container.style-soft .viz-bar-segment.seg-other {
  background-color: #eaeaea;
}
.data-storage-viz-container.style-soft .viz-legend-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.data-storage-viz-container.style-soft .viz-legend-list .legend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #f0f0f0; /* 虚线分割，更轻盈 */
}
.data-storage-viz-container.style-soft .viz-legend-list .legend-row:last-child {
  border-bottom: none;
}
.data-storage-viz-container.style-soft .viz-legend-list .legend-row .legend-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #444;
}
.data-storage-viz-container.style-soft .viz-legend-list .legend-row .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%; /* 圆点 */
}
.data-storage-viz-container.style-soft .viz-legend-list .legend-row .dot.chat {
  background-color: #222;
}
.data-storage-viz-container.style-soft .viz-legend-list .legend-row .dot.media {
  background-color: #e0e0e0;
  background-image: radial-gradient(#888 15%, transparent 16%);
  background-size: 4px 4px;
}
.data-storage-viz-container.style-soft .viz-legend-list .legend-row .dot.world {
  background-color: #bbb;
}
.data-storage-viz-container.style-soft .viz-legend-list .legend-row .dot.other {
  background-color: #eaeaea;
  border: 1px solid #ddd;
}
.data-storage-viz-container.style-soft .viz-legend-list .legend-row .legend-val {
  font-family: monospace; /* 等宽字体 */
  color: #000;
  font-weight: 500;
  opacity: 0.8;
}

/* --- 【新增】空间优化卡片样式 --- */
.data-optimizer-card {
  background-color: #fff;
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.data-optimizer-card .opt-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.data-optimizer-card .opt-header .opt-main-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.data-optimizer-card .opt-header .opt-sub-title {
  font-size: 11px;
  color: #aaa;
  font-family: serif;
  font-style: italic;
  margin-top: 2px;
}
.data-optimizer-card .opt-item-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
}
.data-optimizer-card .opt-item-row .opt-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  color: #444;
}
.data-optimizer-card .opt-item-row .opt-icon-box svg {
  width: 20px;
  height: 20px;
}
.data-optimizer-card .opt-item-row .opt-text-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.data-optimizer-card .opt-item-row .opt-text-content .opt-name {
  font-size: 14px;
  font-weight: 500;
  color: #222;
}
.data-optimizer-card .opt-item-row .opt-text-content .opt-desc {
  font-size: 12px;
  color: #999;
}
.data-optimizer-card .opt-item-row .btn-opt-action {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 20px; /* 胶囊按钮 */
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  /* 禁用/处理中状态 */
}
.data-optimizer-card .opt-item-row .btn-opt-action:active {
  opacity: 0.8;
  transform: scale(0.96);
}
.data-optimizer-card .opt-item-row .btn-opt-action.processing {
  background-color: #e0e0e0;
  color: #888;
  cursor: not-allowed;
}
.data-optimizer-card .opt-divider {
  height: 1px;
  background-color: #f2f2f2;
  margin: 16px 0 16px 54px; /* 左侧留白对齐文字 */
}

/* styles/pages/_settings.scss */
[id^=page-settings-] .app-header, #page-settings .app-header {
  border-bottom: 1px solid var(--c-border-light);
}
[id^=page-settings-] .app-content, #page-settings .app-content {
  padding: var(--space-md);
  background-color: var(--c-bg-secondary);
}

.settings-card {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.settings-item:not(:last-child) {
  border-bottom: 1px solid var(--c-border-light);
}
.settings-item:hover {
  background-color: var(--c-bg-tertiary);
}
.settings-item > span:first-child {
  color: var(--c-text-primary);
}
.settings-item .settings-item-value {
  color: var(--c-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 60%;
}
.settings-item .settings-arrow {
  font-size: 18px;
  color: var(--c-text-tertiary);
  margin-left: 4px;
}

#page-settings-sound .settings-input {
  background: transparent;
  border: none;
  text-align: right;
  font-size: 15px;
  color: var(--c-text-primary);
  width: auto;
  flex-grow: 1;
}
#page-settings-sound .settings-input:focus {
  outline: none;
  color: var(--c-accent);
}
#page-settings-sound .settings-input::-moz-placeholder {
  color: var(--c-text-tertiary);
}
#page-settings-sound .settings-input::placeholder {
  color: var(--c-text-tertiary);
}
#page-settings-sound .settings-item .switch {
  transform: scale(0.85);
}
#page-settings-sound .btn.full-width {
  margin-top: 12px;
}

/* ========================================================== */
/* == 【修复】声音设置页在移动端输入时页面偏移问题 == */
/* ========================================================== */
#page-settings-sound .app-content {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: 40px;
}

#page-settings-sound .app-content {
  display: flex;
  flex-direction: column;
}
#page-settings-sound .app-content .btn-group.full-width {
  margin-top: auto;
}

/* --- 新增：字体设置专属样式 --- */
#page-settings-screen .list-item .styled-input#font-url-input {
  height: 40px;
  box-sizing: border-box;
}
#page-settings-screen .btn.btn-primary#save-font-button {
  height: 40px;
  padding: 0 20px;
  flex-shrink: 0;
  font-size: var(--font-sm);
  align-self: center;
}

#page-chat .app-header,
#page-profile .app-header {
  background: transparent;
  justify-content: space-between;
  padding: 0;
  height: 50px;
}
#page-chat .app-header .app-title,
#page-profile .app-header .app-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#page-chat .app-content,
#page-profile .app-content {
  background-color: transparent;
  padding: var(--space-lg) var(--space-lg) 10vh;
}
#page-chat .back-button,
#page-profile .back-button {
  left: var(--space-xs);
}

#page-chat {
  display: flex;
  flex-direction: column;
}
#page-chat .chat-main-area {
  flex-grow: 1;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f0ff 0%, #e9efff 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}
#page-chat .chat-main-area .app-content {
  flex-grow: 1;
  overflow-y: auto;
  padding-bottom: 10vh;
}

.chat-top-area {
  background-color: transparent;
  padding: 32px var(--space-lg) 8px;
  flex-shrink: 0;
}

.chat-search-bar {
  position: relative;
  margin-top: -10px;
  margin-bottom: var(--space-lg);
}
.chat-search-bar svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: #b2b2b7;
  stroke-width: 2;
}
.chat-search-bar input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 15px 12px 40px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  box-shadow: 0 2px 8px rgba(138, 109, 255, 0.08);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  font-size: var(--font-sm);
}
.chat-search-bar input::-moz-placeholder {
  color: #b2b2b7;
}
.chat-search-bar input::placeholder {
  color: #b2b2b7;
}
.chat-search-bar input:focus {
  outline: none;
  border-color: rgba(138, 109, 255, 0.5);
  box-shadow: 0 4px 12px rgba(138, 109, 255, 0.12);
}

.chat-tabs {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  font-weight: 600;
  font-size: var(--font-md);
}

.tab-item {
  color: var(--c-text-secondary);
  cursor: pointer;
  padding-bottom: var(--space-xs);
  position: relative;
}
.tab-item.active {
  color: #8a6dff;
}
.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #8a6dff;
}

.contacts-section {
  background-color: white;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(32, 31, 35, 0.08);
}

.contacts-group {
  margin-bottom: var(--space-md);
}
.contacts-group summary {
  padding: 10px var(--space-md);
  font-size: var(--font-xs);
  color: var(--c-text-secondary);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
}
.contacts-group summary::-webkit-details-marker {
  display: none;
}
.contacts-group summary::before {
  content: "▶";
  display: inline-block;
  margin-right: var(--space-sm);
  transition: transform 0.2s;
  font-size: 7px;
}
.contacts-group[open] > summary::before {
  transform: rotate(90deg);
}
.contacts-group .contacts-section {
  margin-bottom: 0;
}

#add-friend-btn,
#contacts-more-btn {
  display: none;
  position: absolute;
  right: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
#add-friend-btn svg,
#contacts-more-btn svg {
  width: 24px;
  height: 24px;
  stroke: #333;
  fill: #333;
}

#contacts-menu {
  display: none;
  position: absolute;
  top: 45px;
  right: var(--space-md);
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 120;
  overflow: hidden;
  width: 156px;
}
#contacts-menu .menu-item {
  padding: 12px var(--space-md);
  font-size: var(--font-sm);
  cursor: pointer;
  border-bottom: 1px solid var(--c-border);
}
#contacts-menu .menu-item:last-child {
  border-bottom: none;
}
#contacts-menu .menu-item:hover {
  background-color: var(--c-bg-tertiary);
}

#add-friend-list-container {
  max-height: 40vh; /* Limit height to allow scrolling */
  overflow-y: auto;
  padding: 0 8px;
}

.add-friend-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.add-friend-item:hover {
  background-color: var(--c-bg-secondary);
}

.add-friend-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ========================================================== */
/* == 【新增】聊天页面在手机端的响应式调整 == */
/* ========================================================== */
@media (max-width: 600px) {
  #page-chat .app-header {
    height: 12.8vw; /* 50px */
  }
  .chat-top-area {
    padding: 9vw var(--space-lg) 2.05vw; /* 32px var(--space-lg) 8px */
  }
  .chat-search-bar {
    margin-top: -2.56vw; /* -10px */
  }
  .chat-search-bar svg {
    left: 3.84vw; /* 15px */
    width: 4.61vw; /* 18px */
    height: 4.61vw; /* 18px */
  }
  .chat-search-bar input {
    padding: 3.07vw 3.84vw 3.07vw 10.25vw; /* 12px 15px 12px 40px */
    box-shadow: 0 0.51vw 2.05vw rgba(138, 109, 255, 0.08); /* 0 2px 8px ... */
  }
  .chat-search-bar input:focus {
    box-shadow: 0 1.02vw 3.07vw rgba(138, 109, 255, 0.12); /* 0 4px 12px ... */
  }
  .tab-item.active::after {
    width: 1.53vw; /* 6px */
    height: 1.53vw; /* 6px */
  }
  .contacts-group summary {
    padding: 2.56vw var(--space-md); /* 10px ... */
  }
  .contacts-group summary::before {
    font-size: 1.8vw; /* 7px */
  }
  #contacts-menu {
    top: 11.5vw; /* 45px */
    width: 40vw; /* 156px */
  }
  #contacts-menu .menu-item {
    padding: 3.07vw var(--space-md); /* 12px ... */
  }
  .add-friend-item {
    padding: 2.56vw; /* 10px */
  }
  .add-friend-item img {
    width: 10.25vw; /* 40px */
    height: 10.25vw; /* 40px */
    margin-right: 3.07vw; /* 12px */
  }
}
#page-chat-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* ▼▼▼ 修改：让消息列表负责滚动和伸缩 ▼▼▼ */
  /* ▲▲▲ 修改结束 ▲▲▲ */
}
#page-chat-detail .app-header {
  display: flex;
  align-items: center;
  padding: 44px 8px 8px;
  background-color: transparent;
  border-bottom: none;
  position: relative;
  min-height: auto;
}
#page-chat-detail .back-button,
#page-chat-detail .header-button {
  position: static;
  left: auto;
  right: auto;
}
#page-chat-detail .back-button {
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-chat-detail .back-button svg {
  width: 28px;
  height: 28px;
  stroke: #1c1c1e;
  stroke-width: 2.5;
}
#page-chat-detail .chat-detail-content {
  /* ▼▼▼ 修改：内容区域也要变成弹性盒子 ▼▼▼ */
  flex: 1;
  background-color: transparent;
  position: relative;
  overflow: hidden;
  padding: 0;
  display: flex; /* 新增 */
  flex-direction: column; /* 新增 */
  /* ▲▲▲ 修改结束 ▲▲▲ */
}
#page-chat-detail .chat-detail-content::-webkit-scrollbar {
  display: none;
}
#page-chat-detail .chat-message-list {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 允许内部滚动 */
  height: 0; /* 配合 flex:1 使用，防止被内容撑开 */
  position: relative;
  z-index: 1;
  -webkit-overflow-scrolling: touch; /* 增加 iOS 惯性滚动 */
}

.chat-detail-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chat-detail-header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.chat-detail-header-right .header-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-detail-header-right .header-button svg {
  width: 28px;
  height: 28px;
  stroke: #1c1c1e;
  stroke-width: 2;
  fill: none;
}

.chat-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-detail-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

#chat-detail-char-name {
  font-size: 17px;
  font-weight: 600;
  color: #1c1c1e;
  white-space: nowrap;
}

.chat-header-content-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#page-chat-detail.multiselect-active #chat-header-normal {
  display: none;
}
#page-chat-detail.multiselect-active #chat-header-multiselect {
  display: flex;
}

#chat-header-multiselect button {
  font-size: 17px;
  font-weight: 500;
  color: var(--c-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
#chat-header-multiselect button:disabled {
  color: var(--c-text-tertiary);
  cursor: not-allowed;
}

@media (max-width: 768px) {
  #page-chat-detail .app-header {
    padding-top: 47px;
    padding-bottom: 6px;
  }
  .chat-title-group {
    gap: 8px;
  }
  .chat-detail-avatar {
    width: 36px;
    height: 36px;
  }
  #chat-detail-char-name {
    font-size: 16px;
  }
  .chat-detail-header-right {
    gap: 12px;
  }
}
#page-chat-detail .chat-detail-content {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
#page-chat-detail .chat-detail-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);
  z-index: 0;
}
#page-chat-detail .chat-detail-content .chat-message-list {
  position: relative;
  z-index: 1;
}

#page-chat-settings .app-content.settings-style-content {
  overflow-y: auto;
  min-height: 0;
  padding: var(--space-md) var(--space-sm);
  background-color: var(--c-bg-secondary);
  scrollbar-width: none;
}
#page-chat-settings .app-content.settings-style-content::-webkit-scrollbar {
  display: none;
}
#page-chat-settings .settings-card {
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
  flex-shrink: 0;
}
#page-chat-settings .settings-card:last-child {
  margin-bottom: 0;
}
#page-chat-settings .settings-card .settings-item:last-child {
  border-bottom: none;
}
#page-chat-settings .settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--space-md);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--font-md);
  cursor: pointer;
}
#page-chat-settings .settings-item > span:first-child {
  color: var(--c-text-primary);
}
#page-chat-settings .chat-settings-profile {
  padding: var(--space-sm) var(--space-md);
}
#page-chat-settings .chat-settings-profile .settings-avatar {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: var(--space-md);
}
#page-chat-settings .chat-settings-profile .settings-name {
  flex-grow: 1;
  font-size: var(--font-lg);
  font-weight: 500;
}
#page-chat-settings .settings-arrow {
  font-size: 20px;
  color: var(--c-text-tertiary);
  font-weight: bold;
}
#page-chat-settings .settings-item-value {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--c-text-secondary);
  font-size: var(--font-sm);
}
#page-chat-settings .text-danger {
  color: var(--c-accent-red);
  width: 100%;
  text-align: center;
}
#page-chat-settings .report-user-link {
  text-align: center;
  font-size: var(--font-sm);
  color: var(--c-text-secondary);
  margin-top: var(--space-lg);
}
#page-chat-settings .report-user-link a {
  color: var(--c-accent);
  text-decoration: none;
}

/* 
 * 开关 (Toggle Switch) 组件样式
 * (这个样式是全局的，放在这里或 _components/_button.scss 中都可以，暂时保留)
 */
.switch {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e9e9eb;
  transition: 0.4s;
}
.slider::before {
  position: absolute;
  content: "";
  height: 27px;
  width: 27px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.slider.round {
  border-radius: 34px;
}
.slider.round::before {
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #000000;
}

input:checked + .slider::before {
  transform: translateX(20px);
}

/* 
 * ==========================================================================
 *   ▼▼▼ 【全新升级】精致的时间设置弹窗样式 ▼▼▼
 * ==========================================================================
 */
#time-settings-modal .modal-card.time-settings-card {
  background-color: #f7f7f7;
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 360px;
}
#time-settings-modal .modal-card.time-settings-card .modal-header {
  padding: 16px 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#time-settings-modal .modal-card.time-settings-card .modal-header .modal-title {
  font-size: 17px;
  font-weight: 600;
}
#time-settings-modal .modal-card.time-settings-card .modal-content {
  padding: 22px 16px;
}
#time-settings-modal .modal-card.time-settings-card .setting-group {
  background-color: #ffffff;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
#time-settings-modal .modal-card.time-settings-card .setting-group:last-child {
  margin-bottom: 0;
}
#time-settings-modal .modal-card.time-settings-card .settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
}
#time-settings-modal .modal-card.time-settings-card .settings-item:last-child {
  border-bottom: none;
}
#time-settings-modal .modal-card.time-settings-card .setting-label {
  font-size: 16px;
  color: #000;
}
#time-settings-modal .modal-card.time-settings-card .setting-description {
  font-size: 13px;
  color: #6d6d72;
  padding: 10px 16px;
  background-color: transparent;
  line-height: 1.4;
}
#time-settings-modal .modal-card.time-settings-card .radio-group {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-top: 20px;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
}
#time-settings-modal .modal-card.time-settings-card .radio-group .radio-option {
  display: flex;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s ease;
  position: relative;
  /*
   * =========================================
   *   ▼▼▼ 【本次修改的核心】选中时的样式 ▼▼▼
   * =========================================
   */
}
#time-settings-modal .modal-card.time-settings-card .radio-group .radio-option:last-child {
  border-bottom: none;
}
#time-settings-modal .modal-card.time-settings-card .radio-group .radio-option:hover {
  background-color: #f9f9f9;
}
#time-settings-modal .modal-card.time-settings-card .radio-group .radio-option input[type=radio] {
  display: none;
}
#time-settings-modal .modal-card.time-settings-card .radio-group .radio-option .radio-custom-icon {
  position: relative;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  flex-shrink: 0;
}
#time-settings-modal .modal-card.time-settings-card .radio-group .radio-option .radio-custom-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ddd;
  background-color: #fff;
  transition: all 0.2s ease;
}
#time-settings-modal .modal-card.time-settings-card .radio-group .radio-option .radio-custom-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #000;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#time-settings-modal .modal-card.time-settings-card .radio-group .radio-option .radio-label {
  color: #1a1a1a;
  font-size: 16px;
}
#time-settings-modal .modal-card.time-settings-card .radio-group .radio-option input:checked + .radio-custom-icon::before {
  border-color: #000;
}
#time-settings-modal .modal-card.time-settings-card .radio-group .radio-option input:checked + .radio-custom-icon::after {
  transform: scale(1);
}
#time-settings-modal .modal-card.time-settings-card .radio-group .radio-option input:checked ~ .radio-label {
  font-weight: 600;
}

/*
 * ====================================================================
 *   ▼▼▼ 【新增】为“居中显示”的分钟输入框添加样式和交互效果 ▼▼▼
 * ====================================================================
 */
#time-settings-modal .radio-group {
  /* 
   * 【交互核心】当“居中显示”的 radio 被选中时，
   *  通过兄弟选择器 (~) 找到其后的分钟输入框容器，
   *  并使其显示出来。
   */
}
#time-settings-modal .radio-group .radio-option.timestamp-center-option .radio-label {
  flex-grow: 1;
}
#time-settings-modal .radio-group .timestamp-center-interval {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#time-settings-modal .radio-group .timestamp-center-interval input[type=number] {
  width: 48px;
  height: 32px;
  background-color: #f0f0f0;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  -moz-appearance: textfield;
}
#time-settings-modal .radio-group .timestamp-center-interval input[type=number]::-webkit-outer-spin-button, #time-settings-modal .radio-group .timestamp-center-interval input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#time-settings-modal .radio-group .timestamp-center-interval span {
  font-size: 14px;
  color: #555;
}
#time-settings-modal .radio-group .radio-option input[type=radio]:checked ~ .timestamp-center-interval {
  opacity: 1;
  pointer-events: auto;
}

.inline-dropdown-container {
  display: flex;
  align-items: center;
  margin-left: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.inline-dropdown-container select {
  width: 120px;
  height: 32px;
  background-color: #f0f0f0;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  padding: 0 8px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}

/* 
 * 【交互核心】当“显示在气泡外”的 radio 被选中时，
 *  通过兄弟选择器 (~) 找到其后的下拉框容器，
 *  并使其显示出来。
 */
.radio-option input[type=radio][value=outside]:checked ~ .inline-dropdown-container {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================================== */
/* == 【新增 + 精修】聊天设置页在手机端的响应式微调 == */
/* ========================================================== */
@media (max-width: 600px) {
  .settings-item {
    padding: 3.58vw var(--space-md); /* 14px */
  }
  /* --- 顶部头像区域 --- */
  .chat-settings-profile {
    padding: var(--space-sm) var(--space-md);
  }
  .chat-settings-profile .settings-avatar {
    width: 12.82vw; /* 50px */
    height: 12.82vw; /* 50px */
  }
  .chat-settings-profile .settings-name {
    /* 【修改】聊天对象名字用 clamp 严格控制 */
    font-size: clamp(17px, 4.61vw, 18px);
  }
  /* --- 右侧箭头 --- */
  .settings-arrow {
    /* 【修改】字体大小用 vw 缩放，因为它更像一个图标 */
    font-size: 5.12vw; /* 20px */
  }
  /* --- 开关 --- */
  .switch {
    width: 13vw; /* 51px */
    height: 7.9vw; /* 31px */
  }
  .slider::before {
    height: 6.9vw; /* 27px */
    width: 6.9vw; /* 27px */
    left: 0.51vw; /* 2px */
    bottom: 0.51vw; /* 2px */
  }
  input:checked + .slider::before {
    transform: translateX(5.12vw); /* 20px */
  }
  /* --- 时间设置弹窗 --- */
  #time-settings-modal .modal-card.time-settings-card {
    border-radius: 3.58vw; /* 14px */
  }
  #time-settings-modal .modal-header {
    padding: 4.1vw 5.64vw; /* 16px 22px */
  }
  #time-settings-modal .modal-header .modal-title {
    /* 【修改】弹窗标题用 clamp 严格控制 */
    font-size: clamp(16px, 4.35vw, 17px);
  }
  #time-settings-modal .modal-content {
    padding: 5.64vw 4.1vw; /* 22px 16px */
  }
  #time-settings-modal .setting-group {
    border-radius: 3.07vw; /* 12px */
    margin-bottom: 4.1vw; /* 16px */
  }
  #time-settings-modal .settings-item {
    padding: 3.58vw 4.1vw; /* 14px 16px */
  }
  #time-settings-modal .setting-label {
    /* 【修改】设置项标签文字固定为 16px */
    font-size: 16px;
  }
  #time-settings-modal .setting-description {
    /* 【修改】灰色小字说明固定为 13px */
    font-size: 13px;
    padding: 2.56vw 4.1vw; /* 10px 16px */
  }
  #time-settings-modal .radio-group {
    margin-top: 5.12vw; /* 20px */
    border-radius: 3.07vw; /* 12px */
  }
  #time-settings-modal .radio-option {
    padding: 4.1vw; /* 16px */
  }
  #time-settings-modal .radio-custom-icon {
    width: 5.64vw; /* 22px */
    height: 5.64vw; /* 22px */
    margin-right: 3.07vw; /* 12px */
  }
  #time-settings-modal .radio-custom-icon::before {
    width: 5.12vw; /* 20px */
    height: 5.12vw; /* 20px */
  }
  #time-settings-modal .radio-custom-icon::after {
    left: 1.28vw; /* 5px */
    top: 1.28vw; /* 5px */
    width: 3.07vw; /* 12px */
    height: 3.07vw; /* 12px */
  }
  #time-settings-modal .radio-label {
    /* 【修改】单选框文字固定为 16px */
    font-size: 16px;
  }
  #time-settings-modal .timestamp-center-interval {
    gap: 1.53vw; /* 6px */
  }
  #time-settings-modal .timestamp-center-interval input[type=number] {
    width: 12.3vw; /* 48px */
    height: 8.2vw; /* 32px */
    border-radius: 2.05vw; /* 8px */
    /* 【修改】输入框文字固定为 14px */
    font-size: 14px;
  }
  #time-settings-modal .timestamp-center-interval span {
    /* 【修改】“分钟后”文字固定为 14px */
    font-size: 14px;
  }
}
/* styles/pages/_chat-settings.scss */
/* --- 背景装饰元素 --- */
#bg-activity-modal-overlay {
  overflow: hidden;
}
#bg-activity-modal-overlay .magnetic-decor-plus, #bg-activity-modal-overlay .magnetic-decor-minus {
  position: absolute;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.1);
  font-family: sans-serif;
  pointer-events: none;
  z-index: 0;
}
#bg-activity-modal-overlay .magnetic-decor-plus {
  top: 10%;
  right: -5%;
  font-size: 300px;
  transform: rotate(15deg);
}
#bg-activity-modal-overlay .magnetic-decor-plus::before {
  content: "+";
}
#bg-activity-modal-overlay .magnetic-decor-minus {
  bottom: 10%;
  left: -5%;
  font-size: 400px;
  transform: rotate(-15deg);
}
#bg-activity-modal-overlay .magnetic-decor-minus::before {
  content: "−";
}

/* --- 卡片本体 --- */
.magnetic-card {
  position: relative;
  background-color: #ffffff;
  border-radius: 22px;
  width: 90%;
  max-width: 400px;
  padding: 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- 头部 --- */
.magnetic-header {
  padding: 24px 24px 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.magnetic-header .header-text {
  display: flex;
  flex-direction: column;
  /* 【修改】确保文字和容器都左对齐 */
  align-items: flex-start;
  text-align: left;
}
.magnetic-header .header-text .title {
  font-size: 22px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.5px;
}
.magnetic-header .header-text .subtitle {
  font-size: 12px;
  color: #a0a0a0;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}
.magnetic-header .magnetic-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f4f4f4;
  border: none;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.magnetic-header .magnetic-close-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}
.magnetic-header .magnetic-close-btn:hover {
  background: #e0e0e0;
  transform: rotate(90deg);
}

/* --- 滚动内容区 --- */
.magnetic-content {
  padding: 10px 20px 20px;
  overflow-y: auto;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- 能量模块 (Card) --- */
.energy-module {
  background-color: #f9f9f9;
  border-radius: 16px;
  padding: 4px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.energy-module.active {
  background-color: #fff;
  border-color: #000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.energy-module.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* 模块表面 (Face) */
.module-face {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 16px;
}

.icon-box {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.icon-box.pulse-blue {
  color: #007aff;
}
.icon-box.pulse-orange {
  color: #ff9500;
}
.icon-box svg {
  width: 22px;
  height: 22px;
}

.module-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.module-info .name {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}
.module-info .desc {
  font-size: 12px;
  color: #888;
  font-weight: 500;
}

/* --- 正负极开关 (Pole Switch) --- */
.pole-switch {
  position: relative;
  width: 64px;
  height: 32px;
  cursor: pointer;
}
.pole-switch input {
  display: none;
}
.pole-switch .track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e0e0e0;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}
.pole-switch .track .icon-minus, .pole-switch .track .icon-plus {
  font-size: 14px;
  font-weight: 900;
  color: #a0a0a0;
  z-index: 1;
  line-height: 1;
}
.pole-switch .thumb {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.5, 1.6, 0.4, 0.7);
  z-index: 2;
}
.pole-switch input:checked + .track {
  background-color: #1a1a1a;
}
.pole-switch input:checked + .track .icon-minus, .pole-switch input:checked + .track .icon-plus {
  color: rgba(255, 255, 255, 0.3);
}
.pole-switch input:checked + .track .thumb {
  transform: translateX(32px);
  background-color: #fff;
}

/* --- 模块详细设置 (折叠区) --- */
.module-settings {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}
.module-settings .inner-padding {
  padding: 0 16px 16px 16px;
  margin-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 16px;
}

/* 当模块激活时展开设置 */
.energy-module.active .module-settings {
  max-height: 300px;
}

/* --- 设置项组件 --- */
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.setting-row:last-child {
  margin-bottom: 0;
}
.setting-row .label {
  font-size: 14px;
  color: #555;
  font-weight: 500;
}

.pill-group {
  display: flex;
  background: #eee;
  padding: 3px;
  border-radius: 10px;
}
.pill-group label {
  position: relative;
  cursor: pointer;
}
.pill-group label input {
  display: none;
}
.pill-group label span {
  display: block;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 8px;
  color: #666;
  transition: all 0.2s;
  font-weight: 500;
}
.pill-group label input:checked + span {
  background: #fff;
  color: #000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.magnetic-card .action-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 12px;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.magnetic-card .action-btn:active {
  background: #f0f0f0;
  transform: scale(0.98);
}

/* --- 时间轮 (Ruler) --- */
.time-wheel-container {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #eee;
}

.wheel-readout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.wheel-readout .value {
  font-size: 20px;
  font-weight: 700;
  color: #000;
  font-family: monospace;
}

.wheel-ruler-wrapper {
  position: relative;
  height: 50px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.wheel-ruler-wrapper::-webkit-scrollbar {
  display: none;
}
.wheel-ruler-wrapper::before, .wheel-ruler-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 20px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.wheel-ruler-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}
.wheel-ruler-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}
.wheel-ruler-wrapper .center-marker {
  position: absolute;
  left: 50%;
  top: 5px;
  bottom: 5px;
  width: 3px;
  background: #ff3b30;
  border-radius: 2px;
  transform: translateX(-50%);
  z-index: 3;
}

/* 找到 #bg-activity-modal-overlay 下的 .ruler-track 样式 */
.ruler-track {
  display: flex;
  padding: 0 50%;
  height: 100%;
  align-items: flex-end;
  width: 1450px;
}
.ruler-track .tick {
  flex-shrink: 0;
  width: 1px;
  background: #ddd;
  margin-right: 9px;
  height: 10px;
}
.ruler-track .tick.hour {
  height: 20px;
  background: #999;
  width: 2px;
  position: relative;
}
.ruler-track .tick.hour::after {
  content: attr(data-hour);
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #999;
}
.ruler-track .tick.half {
  height: 15px;
}

.hint-text {
  font-size: 11px;
  color: #999;
  text-align: center;
  margin-top: 8px;
}

/* --- 底部 --- */
.magnetic-footer {
  padding: 20px 24px;
  background: #fff;
  border-top: 1px solid #f4f4f4;
}
.magnetic-footer .save-pill-btn {
  width: 100%;
  padding: 16px;
  border-radius: 50px;
  background: #1a1a1a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}
.magnetic-footer .save-pill-btn:active {
  transform: scale(0.98);
}

/* 
 * ==========================================================================
 *   ▼▼▼ 【重写】会话形象设置弹窗样式 (纯净极简风) ▼▼▼
 * ==========================================================================
 */
.refine-modal {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  width: 88%;
  max-width: 360px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  color: #1c1c1e;
  /* 输入框样式优化 */
  /* 两个部分之间的间隔 */
  /* 底部按钮组 */
}
.refine-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  /* 恢复默认按钮样式 */
}
.refine-modal .modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin: 0;
}
.refine-modal .modal-header .btn-reset-text {
  background: none;
  border: none;
  font-size: 14px;
  color: #86868b; /* 灰色 */
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}
.refine-modal .modal-header .btn-reset-text:hover {
  background-color: #f2f2f7;
  color: #ff3b30; /* 悬停时变红，提示重置 */
}
.refine-modal .avatar-section {
  /* 头像预览圆圈 */
  /* 输入框区域 */
}
.refine-modal .avatar-section .section-label {
  font-size: 12px;
  color: #86868b;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.refine-modal .avatar-section .avatar-editor-row {
  display: flex;
  align-items: center;
  gap: 20px; /* 拉大头像和输入框的间距 */
}
.refine-modal .avatar-section .avatar-preview-wrapper {
  position: relative;
  width: 72px; /* 稍微加大头像 */
  height: 72px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  /* 移除边框，更干净 */
  /* 纯黑小圆标 */
}
.refine-modal .avatar-section .avatar-preview-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  background-color: #f2f2f7;
}
.refine-modal .avatar-section .avatar-preview-wrapper .edit-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #000000; /* 纯黑 */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff; /* 白色描边让它从头像上浮起来 */
}
.refine-modal .avatar-section .avatar-preview-wrapper .edit-badge svg {
  width: 14px;
  height: 14px;
  fill: #ffffff; /* 纯白图标 */
}
.refine-modal .avatar-section .input-group {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.refine-modal .avatar-section .input-group label {
  font-size: 12px;
  color: #86868b;
}
.refine-modal .refine-input {
  width: 100%;
  padding: 12px 0; /* 只有上下padding，做成下划线风格，或者全包围看你喜好 */
  padding: 10px 14px; /* 这里用全包围 */
  border-radius: 10px;
  border: 1px solid #e5e5ea;
  background-color: #ffffff;
  font-size: 16px;
  color: #000;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s;
}
.refine-modal .refine-input:focus {
  border-color: #000; /* 聚焦变黑框 */
}
.refine-modal .refine-input::-moz-placeholder {
  color: #c7c7cc;
}
.refine-modal .refine-input::placeholder {
  color: #c7c7cc;
}
.refine-modal .divider-gap {
  height: 30px; /* 拉大上下部分的间距 */
  width: 100%;
  position: relative;
  /* 中间加一条细线 */
}
.refine-modal .divider-gap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #f2f2f7;
}
.refine-modal .modal-footer {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}
.refine-modal .modal-footer button {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.1s;
}
.refine-modal .modal-footer button:active {
  transform: scale(0.98);
}
.refine-modal .modal-footer .btn-cancel {
  background: #f2f2f7;
  color: #000;
}
.refine-modal .modal-footer .btn-save {
  background: #000;
  color: #fff;
}

/* ======================================================
   ▼▼▼ 【新增】视频通话壁纸弹窗样式 ▼▼▼
   ====================================================== */
#video-wallpaper-modal-overlay .video-wallpaper-card {
  width: 90%;
  max-width: 400px;
  background: #fff;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  /* 双栏布局 */
  /* 预览框 (模拟手机屏幕比例) */
  /* 底部文字按钮 */
}
#video-wallpaper-modal-overlay .video-wallpaper-card .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .modal-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .modal-header .modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .modal-content {
  padding: 20px;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .wallpaper-split-view {
  display: flex;
  gap: 16px;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .wallpaper-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .column-title {
  font-size: 13px;
  font-weight: 500;
  color: #666;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .wallpaper-preview-box {
  width: 100%;
  aspect-ratio: 9/16; /* 9:16 比例 */
  background: #eee;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid #e0e0e0;
  /* 悬浮上传按钮 */
  /* 鼠标悬停或点击时显示上传图标 */
}
#video-wallpaper-modal-overlay .video-wallpaper-card .wallpaper-preview-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .wallpaper-preview-box .overlay-controls {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .wallpaper-preview-box:hover .overlay-controls {
  opacity: 1;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .wallpaper-preview-box .btn-icon-upload {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #333;
  transition: transform 0.2s;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .wallpaper-preview-box .btn-icon-upload:active {
  transform: scale(0.9);
}
#video-wallpaper-modal-overlay .video-wallpaper-card .column-actions {
  display: flex;
  gap: 10px;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .column-actions .btn-text-action {
  background: none;
  border: none;
  font-size: 11px;
  color: #3a3a3a;
  cursor: pointer;
  padding: 4px;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .column-actions .btn-text-action:hover {
  text-decoration: underline;
}
#video-wallpaper-modal-overlay .video-wallpaper-card .modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
}

@keyframes breathing-glow {
  0% {
    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.2), 0 0 0px 0px rgba(255, 255, 255, 0.1) inset;
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.4), 0 0 10px 2px rgba(255, 255, 255, 0.2) inset;
  }
  100% {
    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.2), 0 0 0px 0px rgba(255, 255, 255, 0.1) inset;
  }
}
.call-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20vw 8vw 15vw;
  box-sizing: border-box;
  color: white;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.call-overlay.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.call-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(15px) brightness(0.3);
  transform: scale(1.2);
  z-index: -1;
}

.incoming-call-info {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.incoming-call-info img {
  width: 25vw;
  height: 25vw;
  border-radius: 2vw;
  border: none;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  animation: breathing-glow 2.5s ease-in-out infinite;
}
.incoming-call-info h2 {
  font-size: 6.4vw;
  font-weight: 600;
  margin: var(--space-sm) 0 0 0;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.incoming-call-info p {
  font-size: 4vw;
  opacity: 0.7;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  margin: 0;
  margin-top: 2px;
}

.incoming-call-actions {
  position: absolute;
  bottom: 12vh;
  width: 100%;
  padding: 0 10vw;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.call-action-item > span {
  color: white;
  margin-top: var(--space-sm);
  font-size: 3.5vw;
}

.call-action-btn.accept {
  background-color: var(--c-accent-green);
}
.call-action-btn.accept:active {
  background-color: #25a25a;
  transform: scale(0.95);
}

.call-action-btn.hang-up svg {
  transform: rotate(135deg);
}

#page-voice-call {
  background-color: #3e443a;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  z-index: 150;
}

#voice-call-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(25px) brightness(0.6);
  transform: scale(1.1);
  z-index: -1;
  opacity: 0.7;
}

.voice-call-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 44px var(--space-lg) 0;
  flex-shrink: 0;
}

.call-header-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  opacity: 0.8;
}
.call-header-btn svg {
  width: 24px;
  height: 24px;
  stroke: white;
  stroke-width: 2;
  fill: none;
}

.voice-call-timer {
  font-size: var(--font-md);
  font-family: "SF Mono", "Courier New", Courier, monospace;
}

.voice-call-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0 var(--space-md);
}

.voice-call-char-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin-top: 40px;
  margin-bottom: 15px;
}

#voice-call-avatar {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-xl);
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  margin-bottom: var(--space-xl);
}

#voice-call-name {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

#voice-call-status {
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.2);
  padding: 4px 12px;
  border-radius: 12px;
  margin: 0;
}

#voice-call-message-list {
  position: relative;
  flex-grow: 1;
  width: 100%;
  max-width: 350px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 12px);
  overflow-y: auto;
  background: transparent;
  padding-bottom: var(--space-md);
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* ====================================================================== */
  /* == 【V2.4 新增与隔离】通话中的加载动画 (Typing Indicator) == */
  /* ====================================================================== */
}
#voice-call-message-list::-webkit-scrollbar {
  display: none;
}
#voice-call-message-list .message-wrapper .chat-avatar-small {
  display: none;
}
#voice-call-message-list .message-wrapper.received .message-bubble {
  background-color: rgba(255, 255, 255, 0.25);
  color: white;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
#voice-call-message-list .message-wrapper.received .message-bubble p {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
#voice-call-message-list .voice-call-typing {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 10px;
  gap: 5px;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
#voice-call-message-list .voice-call-typing span {
  height: 6px;
  width: 6px;
  background-color: rgba(255, 255, 255, 0.8);
  display: block;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
}
#voice-call-message-list .voice-call-typing span:nth-child(1) {
  animation-delay: -0.32s;
}
#voice-call-message-list .voice-call-typing span:nth-child(2) {
  animation-delay: -0.16s;
}
#voice-call-message-list .voice-call-typing span:nth-child(3) {
  animation-delay: 0s;
}
#video-typing .typing-indicator {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  gap: 6px;
  background-color: rgba(80, 80, 80, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
#video-typing .typing-indicator span {
  width: 7px;
  height: 7px;
  background: white;
  border-radius: 50%;
  margin: 0;
  animation: typingBounce 1.4s infinite ease-in-out both;
}
#video-typing .typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}
#video-typing .typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes blink {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

.voice-call-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 0 var(--space-lg) calc(20px + env(safe-area-inset-bottom));
  flex-shrink: 0;
}

.voice-call-input-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#voice-call-textarea {
  flex-grow: 1;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 10px 15px;
  color: white;
  font-size: 15px;
  resize: none;
  outline: none;
  min-height: 20px;
  max-height: 80px;
  overflow-y: hidden;
}
#voice-call-textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
#voice-call-textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

#voice-call-send-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background-color: var(--c-bg-primary);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
#voice-call-send-btn svg {
  stroke: var(--c-text-primary);
  width: 22px;
  height: 22px;
}

.voice-call-actions-grid {
  display: flex;
  justify-content: space-around;
  width: 100%;
  transform: translateY(-5px);
}

.call-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 80px;
  text-align: center;
}
.call-action-item span {
  font-size: var(--font-xs);
  color: rgba(255, 255, 255, 0.9);
  margin-top: var(--space-xs);
  display: block;
}

.call-action-btn {
  width: 18vw;
  height: 18vw;
  max-width: 70px;
  max-height: 70px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s, transform 0.2s;
}
.call-action-btn#toggle-mic-btn, .call-action-btn#toggle-speaker-btn, .call-action-btn.dark {
  background-color: rgba(80, 80, 80, 0.8);
}
.call-action-btn.hang-up {
  background-color: var(--c-accent-red);
}
.call-action-btn:active {
  filter: brightness(0.9);
}
.call-action-btn svg {
  width: 28px;
  height: 28px;
}

#toggle-mic-btn svg {
  fill: #fff;
}

#toggle-speaker-btn svg {
  stroke: #fff;
  fill: #fff;
}

#hang-up-btn svg {
  fill: #fff;
}

#call-menu-overlay {
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}
#call-menu-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
#call-menu-overlay.visible #call-menu-card {
  transform: translateY(0);
}

#call-menu-card {
  background-color: var(--c-bg-secondary);
  width: 100%;
  box-sizing: border-box;
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  padding: var(--space-xs);
  padding-bottom: calc(var(--space-xs) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.call-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--c-text-primary);
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color 0.2s;
}
.call-menu-item:not(.cancel) {
  justify-content: flex-start;
}
.call-menu-item.cancel {
  margin-top: var(--space-sm);
}
.call-menu-item:active {
  background-color: var(--c-bg-tertiary);
}

.call-menu-icon {
  width: 22px;
  height: 22px;
  margin-right: var(--space-md);
  fill: var(--c-text-primary);
  stroke: var(--c-text-primary);
  stroke-width: 2;
}

#video-call-btn .call-menu-icon {
  fill: none;
}

#voice-call-btn .call-menu-icon {
  stroke: none;
}

/* ========================================================== */
/* == 【精修版】通话页面在手机端的响应式微调 == */
/* ========================================================== */
@media (max-width: 600px) {
  /* --- 来电界面 --- */
  .incoming-call-info p {
    /* 【修改】来电提示语（如“AI语音来电...”）字体彻底固定为 14px */
    font-size: 14px;
    margin-top: 0.51vw; /* 2px */
  }
  /* --- 通话中界面 --- */
  .voice-call-header {
    padding-top: var(--status-bar-height, 11.28vw);
  }
  .call-header-btn {
    padding: 2.05vw;
  }
  .call-header-btn svg {
    width: 6.15vw;
    height: 6.15vw;
  }
  .voice-call-main {
    padding: 0 var(--space-md);
  }
  .voice-call-char-info {
    margin-top: 10.25vw;
    margin-bottom: 3.84vw;
  }
  #voice-call-avatar {
    width: 25.64vw;
    height: 25.64vw;
    margin-bottom: var(--space-xl);
  }
  #voice-call-name {
    /* 【修改】大标题字体用 clamp() 严格控制在 22px-24px 之间 */
    font-size: clamp(22px, 6.15vw, 24px);
    margin-bottom: 2.05vw;
  }
  #voice-call-status {
    padding: 1.02vw 3.07vw;
    border-radius: 3.07vw;
  }
  /* --- 输入框和按钮 --- */
  .voice-call-footer {
    gap: 3.84vw;
    padding-bottom: calc(5.12vw + env(safe-area-inset-bottom));
  }
  .voice-call-input-container {
    gap: 2.56vw;
  }
  #voice-call-textarea {
    border-radius: 5.12vw;
    padding: 2.56vw 3.84vw;
    min-height: 5.12vw;
    max-height: 20.51vw;
  }
  #voice-call-send-btn {
    width: 11.28vw;
    height: 11.28vw;
  }
  #voice-call-send-btn svg {
    width: 5.64vw;
    height: 5.64vw;
  }
  .call-action-item {
    gap: 2.05vw;
    width: 20.51vw;
  }
  .call-action-item span {
    /* 【修改】底部按钮下方的文字（如“挂断”）彻底固定为 12px */
    font-size: 12px;
    margin-top: var(--space-xs); /* 使用变量间距 */
  }
  .call-action-btn svg {
    width: 7.17vw;
    height: 7.17vw;
  }
  .call-menu-item {
    padding: 4.1vw;
  }
}
/* /styles/pages/_call.scss */
/* ====================================================================== */
/* == 【V2.2 最终修正版】视频通话页面样式 (Video Call Page) == */
/* ====================================================================== */
#video-call-container {
  background-color: #000;
  display: flex;
  flex-direction: column;
  z-index: 150;
  position: relative;
}
#video-call-container .video-call-bg-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#video-call-container .video-call-bg-view img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#video-call-container .local-view {
  position: absolute;
  top: 8vh;
  right: 15px;
  width: 28vw;
  height: 40vw;
  max-width: 110px;
  max-height: 156px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: #333;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
#video-call-container .local-view img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#video-call-container .video-call-overlay-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8vh 15px calc(20px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  pointer-events: none;
}
#video-call-container .video-call-top-info {
  align-self: flex-start;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  color: white;
  pointer-events: auto;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
#video-call-container .video-call-top-info h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 5px 0;
}
#video-call-container .video-call-top-info span {
  font-size: 13px;
  opacity: 0.9;
}
#video-call-container .video-call-top-info .video-call-timer-chip {
  margin-top: 8px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 13px;
  font-family: "SF Mono", monospace;
  display: inline-block;
}
#video-call-container .video-call-bottom-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  pointer-events: auto;
}
#video-call-container .video-call-bottom-controls .video-call-input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 5px;
  padding-left: 15px;
}
#video-call-container .video-call-bottom-controls .video-call-input-wrapper input {
  flex-grow: 1;
  background: none;
  border: none;
  outline: none;
  color: white;
  font-size: 15px;
}
#video-call-container .video-call-bottom-controls .video-call-input-wrapper input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
#video-call-container .video-call-bottom-controls .video-call-input-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
#video-call-container .video-call-bottom-controls .video-call-input-wrapper .video-call-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 8px;
}
#video-call-container .video-call-bottom-controls .video-call-input-wrapper .video-call-send-btn svg {
  fill: rgb(0, 0, 0);
  width: 20px;
  height: 20px;
  transform: rotate(-35deg) translateX(1px);
}
#video-call-container .video-call-bottom-controls .video-call-main-actions {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 320px;
}
#video-call-container .video-call-bottom-controls .control-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#video-call-container .video-call-bottom-controls .control-action-item .call-action-btn {
  width: 64px;
  height: 64px;
  background-color: rgba(80, 80, 80, 0.6);
}
#video-call-container .video-call-bottom-controls .control-action-item .call-action-btn svg {
  fill: white;
  width: 30px;
  height: 30px;
}
#video-call-container .video-call-bottom-controls .control-action-item .call-action-btn.hang-up {
  background-color: #f85149;
}
#video-call-container .video-call-bottom-controls .control-action-item .call-action-btn.hang-up svg {
  transform: rotate(135deg);
  width: 28px;
  height: 28px;
}
#video-call-container .video-call-bottom-controls .control-action-item span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

/* /styles/pages/_call.scss */
/* ====================================================================== */
/* == 【V2.3 新增】视频通话内消息列表 & 可拖拽窗口样式 == */
/* ====================================================================== */
#video-call-container .local-view {
  cursor: move;
}
#video-call-container #video-call-message-list {
  position: absolute;
  bottom: calc(120px + env(safe-area-inset-bottom));
  top: 50%;
  left: 18px;
  right: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-bottom: 55px;
  -webkit-mask-image: linear-gradient(to top, black 85%, transparent 100%);
  mask-image: linear-gradient(to top, black 85%, transparent 100%);
  pointer-events: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#video-call-container #video-call-message-list::-webkit-scrollbar {
  display: none;
}
#video-call-container #video-call-message-list .message-wrapper {
  max-width: 85%;
}
#video-call-container #video-call-message-list .message-wrapper .chat-avatar-small {
  display: none;
}
#video-call-container #video-call-message-list .message-wrapper .message-bubble {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#video-call-container #video-call-message-list .message-wrapper .message-bubble p {
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.5;
}
#video-call-container #video-call-message-list .message-wrapper.received .message-bubble {
  background-color: rgba(80, 80, 80, 0.4);
}
#video-call-container #video-call-message-list .message-wrapper.sent .message-bubble {
  background-color: rgba(80, 80, 80, 0.25);
}

/* styles/pages/_call.scss */
#video-typing {
  margin-bottom: 10px;
}
#video-typing .typing-indicator {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 20px;
}
#video-typing .typing-indicator span {
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  margin: 0 3px;
  animation: typingBounce 1.4s infinite ease-in-out both;
}
#video-typing .typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}
#video-typing .typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
.modal-card.video-history-mode {
  width: 90% !important;
  max-width: 400px !important;
  height: 80vh !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  border-radius: 24px;
  overflow: hidden;
}
.modal-card.video-history-mode .call-history-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.modal-card.video-history-mode .call-history-header h3 {
  color: rgba(255, 255, 255, 0.95) !important;
}
.modal-card.video-history-mode .call-history-header p {
  color: rgba(255, 255, 255, 0.7) !important;
}
.modal-card.video-history-mode .modal-content {
  background: transparent !important;
  padding: 20px 15px;
}
.modal-card.video-history-mode .video-history-item {
  margin-bottom: 16px;
  display: flex;
  width: 100%;
  background: none !important;
  border: none !important;
}
.modal-card.video-history-mode .video-history-item.received {
  justify-content: flex-start;
}
.modal-card.video-history-mode .video-history-item.received .message-bubble {
  background-color: rgba(0, 0, 0, 0.6) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-top-left-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.modal-card.video-history-mode .video-history-item.sent {
  justify-content: flex-end;
}
.modal-card.video-history-mode .video-history-item.sent .message-bubble {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border-top-right-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  margin-left: auto;
}
.modal-card.video-history-mode .video-history-item .message-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.modal-card.video-history-mode .video-history-item .message-bubble p {
  margin: 0;
  color: inherit !important;
}
.modal-card.video-history-mode .video-history-item .message-bubble .dialogue-highlight {
  background: none !important;
  color: #fff !important;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  padding: 0 !important;
  border: none !important;
}
.modal-card.video-history-mode .call-history-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* ========================================================================== */
/* === 记忆系统通用样式 === */
/* ========================================================================== */
.memory-header {
  background-color: transparent;
  border-bottom: none !important;
  z-index: 10;
}

.memory-switcher-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
.memory-switcher-trigger:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.memory-content {
  background-color: #F6F7F9;
  padding: 0 var(--space-lg);
  padding-top: 10px;
}

/* ========================================================================== */
/* === 长期记忆主页 (Long-term Main) === */
/* ========================================================================== */
.memory-hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 25px;
  margin-top: 10px;
}

.memory-avatar-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 12px;
}

#memory-hero-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border: 4px solid white;
}

.memory-status-badge {
  position: absolute;
  bottom: 0;
  right: -5px;
  background-color: var(--c-accent-green);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 8px;
  border: 2px solid white;
}

.memory-intro {
  text-align: center;
}

#memory-hero-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text-primary);
}

#memory-hero-desc {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--c-text-secondary);
}

.memory-stats-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  border-radius: 16px;
  padding: 16px 0;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text-primary);
  font-family: "SF Mono", "Roboto Mono", monospace;
}

.stat-label {
  font-size: 11px;
  color: var(--c-text-tertiary);
  margin-top: 4px;
}

.stat-divider {
  width: 1px;
  height: 20px;
  background-color: #eee;
}

.memory-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-secondary);
  margin-bottom: 12px;
  margin-left: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.memory-section-title .counter {
  font-size: 12px;
  background-color: #eee;
  padding: 2px 6px;
  border-radius: 6px;
}

.memory-card {
  background-color: white;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s;
  -webkit-user-select: none; /* 适配 Safari/Chrome 内核的浏览器 */
  -moz-user-select: none; /* 适配 Firefox 浏览器 */ /* 适配 IE/Edge 浏览器 */
  user-select: none; /* W3C 标准语法 */
}
.memory-card:active {
  transform: scale(0.98);
}

.memory-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.memory-card-header span {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-primary);
}

.icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-box svg {
  width: 18px;
  height: 18px;
}
.icon-box.yellow {
  background-color: #FFF8E1;
  color: #FFB300;
}
.icon-box.blue {
  background-color: #E3F2FD;
  color: #2196F3;
}

.memory-card-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.memory-photo-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.photo-item {
  position: relative;
  background-color: #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1/1;
}
.photo-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}
.photo-item:hover img {
  transform: scale(1.1);
}
.photo-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.photo-item.placeholder {
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-item.placeholder::after {
  content: "IMG";
  color: #ccc;
  font-size: 10px;
  font-weight: bold;
}

/* ========================================================================== */
/* === 长期记忆详情页 (Long-term Detail) === */
/* ========================================================================== */
#page-memory-detail .app-content {
  background-color: #F9FAFB;
  padding: 0 var(--space-lg) 40px;
}

.header-back-btn {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  line-height: 0;
  z-index: 2;
}
.header-back-btn svg {
  width: 24px;
  height: 24px;
  fill: var(--c-text-primary);
}

/* 将 top 的值从 50% 修改为 calc(50% + 15px) */
.header-more-btn {
  position: absolute;
  right: 12px;
  top: calc(50% + 15px); /* <--- 修改这里 */
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  line-height: 0;
  z-index: 2;
}

.header-more-btn svg {
  width: 24px;
  height: 24px;
  fill: var(--c-text-primary);
}

.mem-card.relation-card {
  background: #fff;
  border-radius: 20px;
  padding: 20px 0;
  margin-top: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.relation-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.relation-label {
  font-size: 12px;
  color: var(--c-text-tertiary);
}

.relation-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text-primary);
}
.relation-value.accent {
  color: #8A70D6;
}

.relation-divider {
  width: 1px;
  height: 30px;
  background-color: var(--c-border-light);
}

.mem-timeline {
  position: relative;
  padding-left: 12px;
}
.mem-timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background-color: #EAEAF0;
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  padding-left: 28px;
  margin-bottom: 20px;
}
.timeline-item:last-child {
  margin-bottom: 0;
}

.tl-dot {
  position: absolute;
  left: 0;
  top: 20px;
  width: 10px;
  height: 10px;
  background-color: #8A70D6;
  border: 4px solid #F9FAFB;
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 0 1px #EAEAF0;
}

.tl-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(138, 112, 214, 0.08);
  border: 1px solid #F0F0F5;
  display: flex;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.tl-card:active {
  transform: scale(0.98);
}

.tl-card-date {
  flex-shrink: 0;
  width: 75px;
  background-color: #F7F6FB;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  border-right: 1px solid #F0F0F5;
}
.tl-card-date .day {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  line-height: 1;
  font-family: "SF Mono", "Roboto Mono", monospace;
}
.tl-card-date .month-year {
  font-size: 11px;
  color: #8A70D6;
  font-weight: 500;
  margin-top: 6px;
  letter-spacing: 0.5px;
}

.tl-card-content {
  flex-grow: 1;
  padding: 18px 20px;
}

.tl-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text-primary);
  margin-bottom: 8px;
}

.tl-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

#page-memory-detail .mem-section-title {
  font-size: 18px;
  font-weight: 600;
}

/* ========================================================================== */
/* === 近期记忆页面 (Recent Memory) === */
/* ========================================================================== */
.memory-container {
  background-color: #ffffff;
  padding: 30px 25px;
  height: calc(100% - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.memory-container::-webkit-scrollbar {
  display: none;
}

.memory-header-hint {
  color: #999;
  font-size: 13px;
  text-align: center;
  margin-bottom: 35px;
  letter-spacing: 0.5px;
}

.memory-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 60px;
}

.memory-note {
  position: relative;
  width: auto;
  margin: 0 10px;
  min-height: 90px;
  padding: 18px 22px;
  background-color: #fcfcfc;
  background-image: linear-gradient(#e8e8e8 1px, transparent 1px), linear-gradient(90deg, #e8e8e8 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center top;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: none !important;
}
.memory-note::before, .memory-note::after {
  content: "";
  position: absolute;
  background-color: rgba(40, 40, 40, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  z-index: 10;
  clip-path: polygon(5% 0, 95% 0, 100% 20%, 93% 40%, 100% 60%, 95% 80%, 100% 100%, 5% 100%, 0 80%, 7% 60%, 0 40%, 8% 20%);
}
.memory-note::before {
  top: -8px;
  left: -12px;
  width: 55px;
  height: 16px;
  transform: rotate(-35deg);
}
.memory-note::after {
  bottom: -8px;
  right: -12px;
  width: 50px;
  height: 16px;
  transform: rotate(-35deg);
}
.memory-note:nth-child(3n)::after {
  display: none;
}
.memory-note:nth-child(odd) {
  transform: rotate(-2.2deg);
}
.memory-note:nth-child(even) {
  transform: rotate(1.8deg);
}
.memory-note:nth-child(5n) {
  transform: rotate(3.5deg);
}
.memory-note:hover {
  transform: scale(1.03) rotate(0deg) !important;
  z-index: 100;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.note-yellow, .note-blue, .note-pink {
  background-color: #fcfcfc !important;
  background-image: linear-gradient(#e8e8e8 1px, transparent 1px), linear-gradient(90deg, #e8e8e8 1px, transparent 1px) !important;
}

.memory-note p {
  margin: 4px 0 12px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.02em;
}

.note-time {
  font-size: 11px;
  color: #aaa;
  align-self: flex-end;
  font-family: monospace;
  background-color: #fcfcfc;
  padding: 0 4px;
}

/* ========================================================================== */
/* === 记忆系统相关菜单和模态框 === */
/* ========================================================================== */
.more-menu,
.action-menu-popover {
  position: absolute;
  top: 55px;
  right: 10px;
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border-light);
  padding: 8px 0;
  z-index: 110;
  display: none;
  width: 160px;
}
.more-menu.show, .more-menu.visible,
.action-menu-popover.show,
.action-menu-popover.visible {
  display: block;
}

.more-menu-item,
.action-menu-item {
  padding: 12px 18px;
  font-size: var(--font-sm);
  cursor: pointer;
  transition: background-color 0.2s;
}
.more-menu-item:hover,
.action-menu-item:hover {
  background-color: var(--c-bg-tertiary);
}

.action-menu-popover {
  top: 75px;
  right: 15px;
  padding: 8px;
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  transform-origin: top right;
}
.action-menu-popover.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.action-menu-popover .action-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  font-weight: 500;
  color: var(--c-text-primary);
  border-radius: var(--radius-sm);
}
.action-menu-popover .action-menu-item svg {
  width: 20px;
  height: 20px;
  stroke: var(--c-text-secondary);
}

#recent-memory-more-btn {
  right: var(--space-md);
}

#memory-action-popover {
  position: absolute;
  z-index: 1003;
}

#add-memory-modal .modal-card {
  background-color: var(--c-bg-primary);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+PGZpbHRlciBpZD0iYSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9Ii42IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iMC4wNCIvPjwvc3ZnPg==");
  border-radius: 20px;
  padding: 24px;
  width: 90%;
  max-width: 360px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
#add-memory-modal .modal-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px 0;
  text-align: center;
}
#add-memory-modal .modal-card p {
  font-size: 14px;
  color: var(--c-text-secondary);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 24px;
}
#add-memory-modal .modal-card .input-wrapper,
#add-memory-modal .modal-card input[type=date],
#add-memory-modal .modal-card textarea {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--c-border-light);
  border-radius: 0;
  padding: 12px 4px;
  font-size: 15px;
  color: var(--c-text-primary);
  transition: border-color 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 18px;
}
#add-memory-modal .modal-card .input-wrapper {
  padding: 0;
}
#add-memory-modal .modal-card .input-wrapper input {
  border: none !important;
  outline: none;
  width: 100%;
  font-size: 15px;
  padding: 0 4px;
}
#add-memory-modal .modal-card .input-wrapper:focus-within,
#add-memory-modal .modal-card input[type=date]:focus,
#add-memory-modal .modal-card textarea:focus {
  outline: none;
  border-bottom-color: var(--c-accent);
}
#add-memory-modal .modal-card textarea {
  min-height: 100px;
  resize: vertical;
}
#add-memory-modal .modal-card ::-moz-placeholder {
  color: var(--c-text-tertiary);
}
#add-memory-modal .modal-card ::placeholder {
  color: var(--c-text-tertiary);
}
#add-memory-modal .modal-card .modal-buttons {
  margin-top: 16px;
}
#add-memory-modal .modal-card .modal-buttons .btn {
  padding: 14px;
  border-radius: 12px;
  font-weight: 600;
}

.add-memory-modal-card {
  width: 90%;
  max-width: 360px;
  padding: 0;
  background-color: #1C1C1E;
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 1px solid #444;
}

.add-memory-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #333;
}
.add-memory-modal-header h3 {
  margin: 0;
  font-size: var(--font-md);
  font-weight: 600;
}

.add-memory-modal-close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #888;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.add-memory-modal-body {
  padding: 20px;
}

#add-memory-textarea {
  width: 100%;
  height: 120px;
  background-color: #2C2C2E;
  border: 1px solid #444;
  border-radius: var(--radius-sm);
  color: #FFFFFF;
  padding: 12px;
  font-size: var(--font-sm);
  resize: none;
  box-sizing: border-box;
}
#add-memory-textarea::-moz-placeholder {
  color: #888;
}
#add-memory-textarea::placeholder {
  color: #888;
}
#add-memory-textarea:focus {
  outline: none;
  border-color: #555;
}

.add-memory-modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px;
  background-color: #252527;
  border-top: 1px solid #333;
}
.add-memory-modal-footer .btn {
  flex: 1;
  font-weight: 600;
}
.add-memory-modal-footer .btn.btn-secondary {
  background-color: #3A3A3C;
  color: #FFF;
  border: none;
}
.add-memory-modal-footer .btn.btn-secondary:hover {
  background-color: #4A4A4C;
}
.add-memory-modal-footer .btn.btn-primary {
  background-color: #FFF;
  color: #000;
  border: none;
}
.add-memory-modal-footer .btn.btn-primary:hover {
  background-color: #E5E5E5;
}

.retention-modal-card {
  width: 90%;
  max-width: 360px;
  padding: 0;
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.retention-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border-light);
}
.retention-modal-header h3 {
  margin: 0;
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--c-text-primary);
}

.retention-modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--c-text-secondary);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.retention-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.retention-option {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.retention-option:hover {
  background-color: var(--c-bg-tertiary);
}
.retention-option.selected {
  border-color: #007aff;
  background-color: #f0f8ff;
}
.retention-option input[type=radio] {
  display: none;
}

.option-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-border-light);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color 0.2s;
  position: relative;
}
.option-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  background-color: #007aff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.retention-option.selected .option-indicator {
  border-color: #007aff;
}

.retention-option input:checked + .option-indicator::after {
  transform: translate(-50%, -50%) scale(1);
}

.option-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.option-details .title {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--c-text-primary);
}
.option-details .description {
  font-size: var(--font-xs);
  color: var(--c-text-secondary);
  line-height: 1.5;
}

.retention-modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px;
  background-color: var(--c-bg-secondary);
  border-top: 1px solid var(--c-border-light);
}
.retention-modal-footer .btn {
  flex: 1;
}

#retention-settings-modal-overlay .btn.btn-secondary {
  background-color: var(--c-bg-primary);
  color: var(--c-text-primary);
  border: 1px solid var(--c-border-light);
}
#retention-settings-modal-overlay .btn.btn-secondary:hover {
  background-color: var(--c-bg-tertiary);
}

/* ========================================================== */
/* == 【新增】记忆页面在手机端的响应式调整 == */
/* ========================================================== */
@media (max-width: 600px) {
  /* --- 通用部分 --- */
  .memory-switcher-trigger {
    gap: 1.02vw; /* 4px */
    padding: 1.53vw 3.07vw; /* 6px 12px */
    border-radius: 5.12vw; /* 20px */
  }
  .memory-content {
    padding-top: 2.56vw; /* 10px */
  }
  /* --- 长期记忆主页 --- */
  .memory-hero-section {
    margin-bottom: 6.41vw; /* 25px */
    margin-top: 2.56vw; /* 10px */
  }
  .memory-avatar-container {
    width: 25.64vw; /* 100px */
    height: 25.64vw; /* 100px */
    margin-bottom: 3.07vw; /* 12px */
  }
  #memory-hero-avatar {
    border-width: 1.02vw; /* 4px */
  }
  .memory-status-badge {
    right: -1.28vw; /* -5px */
    font-size: 2.56vw; /* 10px */
    padding: 0.51vw 1.53vw; /* 2px 6px */
    border-radius: 2.05vw; /* 8px */
    border-width: 0.51vw; /* 2px */
  }
  #memory-hero-desc {
    margin-top: 1.02vw; /* 4px */
  }
  .memory-stats-row {
    border-radius: 4.1vw; /* 16px */
    padding: 4.1vw 0; /* 16px */
    margin-bottom: 6.15vw; /* 24px */
  }
  .stat-label {
    margin-top: 1.02vw; /* 4px */
  }
  .stat-divider {
    height: 5.12vw; /* 20px */
  }
  .memory-section-title {
    font-size: 3.84vw; /* 15px */
    margin-bottom: 3.07vw; /* 12px */
    margin-left: 1.02vw; /* 4px */
  }
  .memory-section-title .counter {
    padding: 0.51vw 1.53vw; /* 2px 6px */
    border-radius: 1.53vw; /* 6px */
  }
  .memory-card {
    border-radius: 4.1vw; /* 16px */
    padding: 4.1vw; /* 16px */
    margin-bottom: 4.1vw; /* 16px */
  }
  .memory-card-header {
    gap: 2.56vw; /* 10px */
    margin-bottom: 3.07vw; /* 12px */
  }
  .memory-card-header span {
    font-size: 3.84vw; /* 15px */
  }
  .icon-box {
    width: 8.2vw; /* 32px */
    height: 8.2vw; /* 32px */
    border-radius: 2.05vw; /* 8px */
  }
  .icon-box svg {
    width: 4.61vw; /* 18px */
    height: 4.61vw; /* 18px */
  }
  .memory-photo-wall {
    gap: 1.53vw; /* 6px */
    margin-top: 2.56vw; /* 10px */
  }
  .photo-item {
    border-radius: 2.05vw; /* 8px */
  }
  /* --- 长期记忆详情页 --- */
  #page-memory-detail .app-content {
    padding-bottom: 10.25vw; /* 40px */
  }
  .header-back-btn, .header-more-btn {
    padding: 2.05vw; /* 8px */
  }
  .header-back-btn svg, .header-more-btn svg {
    width: 6.15vw; /* 24px */
    height: 6.15vw; /* 24px */
  }
  .header-more-btn {
    right: 3.07vw; /* 12px */
    top: calc(50% + 3.84vw); /* 15px */
  }
  .mem-card.relation-card {
    border-radius: 5.12vw; /* 20px */
    padding: 5.12vw 0; /* 20px */
    margin-top: 2.56vw; /* 10px */
  }
  .relation-column {
    gap: 1.53vw; /* 6px */
  }
  .relation-divider {
    height: 7.69vw; /* 30px */
  }
  .mem-timeline {
    padding-left: 3.07vw; /* 12px */
  }
  .mem-timeline::before {
    left: 2.56vw; /* 10px */
    top: 5.12vw; /* 20px */
    bottom: 5.12vw; /* 20px */
    width: 0.51vw; /* 2px */
  }
  .timeline-item {
    padding-left: 7.17vw; /* 28px */
    margin-bottom: 5.12vw; /* 20px */
  }
  .tl-dot {
    top: 5.12vw; /* 20px */
    width: 2.56vw; /* 10px */
    height: 2.56vw; /* 10px */
    border-width: 1.02vw; /* 4px */
  }
  .tl-card {
    border-radius: 5.12vw; /* 20px */
  }
  .tl-card-date {
    width: 19.23vw; /* 75px */
    padding: 4.1vw 0; /* 16px */
  }
  .tl-card-date .day {
    font-size: 7.17vw; /* 28px */
  }
  .tl-card-date .month-year {
    margin-top: 1.53vw; /* 6px */
  }
  .tl-card-content {
    padding: 4.61vw 5.12vw; /* 18px 20px */
  }
  .tl-title {
    margin-bottom: 2.05vw; /* 8px */
  }
  /* --- 近期记忆页 --- */
  .memory-container {
    padding: 7.69vw 6.41vw; /* 30px 25px */
  }
  .memory-header-hint {
    margin-bottom: 8.97vw; /* 35px */
  }
  .memory-grid {
    gap: 7.69vw; /* 30px */
    padding-bottom: 15.38vw; /* 60px */
  }
  .memory-note {
    margin: 0 2.56vw; /* 10px */
    min-height: 23.07vw; /* 90px */
    padding: 4.61vw 5.64vw; /* 18px 22px */
  }
  .memory-note p {
    margin-bottom: 3.07vw; /* 12px */
  }
}
#page-offline-mode {
  display: flex;
  flex-direction: column;
}
#page-offline-mode .app-header {
  /* --- 1. 布局方式 (不变) --- */
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  /* --- 2. 尺寸控制 (最强硬的方式) --- */
  min-height: 75px !important; /* 【最终武器】强制规定：最小高度就是75px，不接受任何反驳！*/
  height: auto; /* 高度可以自适应变高，但绝不能低于75px */
  /* --- 3. 内边距 (最安全的方式) --- */
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 10px;
  padding-top: max(30px, env(safe-area-inset-top));
  /* --- 4. 样式清理 (不变) --- */
  border-bottom: none !important;
  background-color: transparent;
}
#page-offline-mode .app-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 60%;
  margin: 0;
  padding: 0;
}
#page-offline-mode .more-button {
  position: static;
  margin-left: auto;
  padding: 8px;
  cursor: pointer;
}
#page-offline-mode .more-button svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
  display: block;
}
#page-offline-mode .app-content.offline-chat-content {
  flex-grow: 1;
  padding: 15px;
  padding-bottom: 80px;
  overflow-y: auto;
  background-color: #f4f4f6;
  scroll-behavior: smooth;
  scroll-padding-bottom: 20px;
}
#page-offline-mode .offline-chat-input-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 20px 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
}
#page-offline-mode .offline-chat-input-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 15px 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
}
#page-offline-mode #offline-chat-input {
  flex-grow: 1;
  height: 44px;
  border: none;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 0 18px;
  font-size: 0.95rem;
  color: var(--c-text-primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
#page-offline-mode #offline-chat-input::-moz-placeholder {
  color: var(--c-text-tertiary);
}
#page-offline-mode #offline-chat-input::placeholder {
  color: var(--c-text-tertiary);
}
#page-offline-mode .send-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  color: var(--c-text-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
#page-offline-mode .send-btn:hover {
  background-color: var(--c-accent-blue);
  color: white;
}
#page-offline-mode .send-btn svg {
  width: 20px;
  height: 20px;
}

.offline-message-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--c-accent-blue-light);
}
.offline-message-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.offline-message-card .sender-info {
  display: flex;
  align-items: center;
}
.offline-message-card .sender-info .sender-name {
  font-weight: 600;
  color: var(--c-text-primary);
}
.offline-message-card .sender-info .timestamp {
  font-size: 0.75rem;
  color: var(--c-text-tertiary);
  margin-left: 8px;
}
.offline-message-card .sender-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 10px;
}
.offline-message-card .card-actions {
  display: flex;
  gap: 5px;
}
.offline-message-card .card-actions .icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text-secondary);
  padding: 5px;
}
.offline-message-card .card-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-text-primary);
}
.offline-message-card .card-body .italic {
  font-style: italic;
  color: var(--c-text-secondary);
}
.offline-message-card .card-footer {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border-light);
}
.offline-message-card .card-footer .reaction-btn {
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 15px;
  padding: 4px 10px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.offline-message-card .card-footer .reaction-btn svg {
  margin-top: -2px;
}

.offline-message-card.is-character {
  border-left-style: dashed;
  border-left-color: #D1D1D6;
}
.offline-message-card.is-character .card-footer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--c-border-subtle);
}
.offline-message-card.is-character .card-watermark {
  font-size: 0.7rem;
  font-style: italic;
  color: #AEAEB2;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

#ai-typing-indicator {
  background: transparent;
  box-shadow: none;
  border-left: none;
  padding: 10px 15px;
}
#ai-typing-indicator .sender-info {
  align-items: center;
}

.typing-indicator {
  display: flex;
  align-items: center;
}
.typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: var(--c-text-tertiary);
  border-radius: 50%;
  margin: 0 2px;
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-of-type(1) {
  animation-delay: -0.32s;
}
.typing-indicator span:nth-of-type(2) {
  animation-delay: -0.16s;
}

@keyframes typing-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
#page-offline-mode .card-body,
#page-offline-mode .message-bubble p {
  white-space: pre-line;
  line-height: 1.7;
}

#page-offline-mode .context-menu {
  position: fixed;
  z-index: 1000;
  background-color: rgba(40, 40, 40, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
  min-width: 120px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#page-offline-mode .context-menu.is-visible {
  opacity: 1;
  transform: scale(1);
}
#page-offline-mode .context-menu .menu-item {
  padding: 8px 12px;
  font-size: 0.9rem;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.15s;
}
#page-offline-mode .context-menu .menu-item:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
#page-offline-mode .context-menu .menu-item.is-separator {
  height: 1px;
  padding: 0;
  margin: 5px 0;
  background-color: rgba(255, 255, 255, 0.1);
}

.history-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 16px;
  color: #AEAEB2;
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.history-separator .text {
  padding: 0 12px;
  white-space: nowrap;
}
.history-separator .line {
  flex-grow: 1;
  height: 1px;
  background-color: #D1D1D6;
  opacity: 0.8;
}

/* ========================================================================== */
/* === 【新增】新的全屏收款页面 (#page-transfer-detail) === */
/* ========================================================================== */
#page-transfer-detail {
  background-color: #f7f7f7;
}

.transfer-detail-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 从顶部开始 */
  padding: 40px 20px;
  height: 100%;
  box-sizing: border-box;
}

#transfer-detail-icon-container {
  margin-top: 20px;
  margin-bottom: 16px;
}

.transfer-status-icon {
  width: 64px;
  height: 64px;
}

#transfer-detail-status {
  font-size: 16px;
  color: #000;
  margin: 0;
}

#transfer-detail-amount {
  font-size: 48px;
  font-weight: bold;
  color: #000;
  margin: 12px 0 30px 0;
}

.transfer-info-line {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 300px;
  padding: 16px 0;
  border-top: 1px solid #e5e5e5;
  font-size: 15px;
}

.transfer-info-line span:first-child {
  color: #888;
}

.transfer-info-line span:last-child {
  color: #000;
}

.transfer-actions-footer {
  margin-top: auto; /* 将这部分推到底部 */
  text-align: center;
  padding-bottom: 20px;
}

.transfer-actions-footer .confirm-btn {
  width: 280px;
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  background-color: #07C160;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background-color 0.2s;
}

.transfer-actions-footer .confirm-btn:hover {
  background-color: #06AD56;
}

.transfer-actions-footer p {
  font-size: 14px;
  color: #888;
}

.transfer-actions-footer p a {
  color: #576B95;
  text-decoration: none;
  margin-left: 4px;
}

/* ========================================================== */
/* == 【精修版】转账页面在手机端的响应式微调 == */
/* ========================================================== */
@media (max-width: 600px) {
  /*
   * 特别说明：此页面中的常规字体（如“收款金额”、“收款说明”）
   * 在原始样式中已是固定的 px 值，无需修改。
   * 我们唯一保留缩放的是那个超大的金额数字，因为它更像一个装饰元素。
  */
  .transfer-detail-content {
    padding: 10.25vw 5.12vw;
  }
  #transfer-detail-icon-container {
    margin-top: 5.12vw;
    margin-bottom: 4.1vw;
  }
  .transfer-status-icon {
    width: 16.41vw;
    height: 16.41vw;
  }
  #transfer-detail-amount {
    /* 【保持】这个超大金额数字，必须让它缩放以适应屏幕，所以保留 vw */
    font-size: 12.3vw; /* 48px */
    margin: 3.07vw 0 7.69vw 0;
  }
  .transfer-info-line {
    max-width: 76.92vw;
    padding: 4.1vw 0;
  }
  .transfer-actions-footer {
    padding-bottom: 5.12vw;
  }
  .transfer-actions-footer .confirm-btn {
    width: 71.79vw;
    padding: 3.07vw;
    border-radius: 2.05vw;
    margin-bottom: 4.1vw;
  }
  .transfer-actions-footer p a {
    margin-left: 1.02vw;
  }
}
/* ======================================================
 *  World Book Page Styles
 * ====================================================== */
.screen {
  background-color: #ffffff;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease-in-out;
}

/* ======================================================
 *  ↓↓↓【头部布局最终优化】↓↓↓
 * ====================================================== */
.page-header {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 15px 12px;
}

.page-header .header-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 10px;
  /* [保留] 样式和溢出处理 */
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* [移除] max-width: 60%; 不再需要，由flex动态计算 */
}

.header-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  min-width: 40px;
  /* [移除] position: relative; z-index: 1; 不再需要层级修复 */
}
.header-btn:hover {
  background-color: #f5f5f5;
}
.header-btn.save-btn {
  font-size: 16px;
  font-weight: 500;
  color: #007aff;
  border-radius: 8px;
  padding: 6px 12px;
}

.page-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 16px;
}

#world-book-screen {
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
  /* --- 【全新】世界书卡片样式 --- */
}
#world-book-screen .page-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}
#world-book-screen .wb-body-wrapper {
  flex: 1;
  display: flex;
  padding: 12px;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
}
#world-book-screen .wb-category-sidebar {
  flex: 0 0 85px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#world-book-screen .wb-category-sidebar::-webkit-scrollbar {
  display: none;
}
#world-book-screen .tab-item {
  flex-shrink: 0;
  width: 85%;
  max-width: 65px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  background-color: #f0f2f5;
  color: #555;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#world-book-screen .tab-item.active {
  background-color: #1a1a1a;
  color: #ffffff;
}
#world-book-screen .world-book-main-content {
  flex: 1;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#world-book-screen .world-book-main-content #world-book-list {
  padding: 20px;
}
#world-book-screen .wb-list-group-header {
  font-size: 15px;
  font-weight: 700;
  color: #828282;
  /* ▼▼▼ 【关键修改】 ▼▼▼ */
  text-align: center; /* 1. 实现文字水平居中 */
  margin: 20px 0 10px 0; /* 2. 调整外边距: 上40px, 左右0, 下16px */
  /* ▲▲▲ 修改结束 ▲▲▲ */
  position: relative; /* 1. 必须设置为相对定位，作为伪元素的定位基准 */
  padding-bottom: 10px; /* 2. 为分隔线留出空间 */
}
#world-book-screen .wb-list-group-header::after {
  content: ""; /* 伪元素必须有 content 属性 */
  position: absolute; /* 绝对定位，相对于父元素 .wb-list-group-header */
  left: 50%; /* 从中心开始 */
  bottom: 0; /* 定位在父元素的底部 */
  transform: translateX(-50%); /* 向左移动自身宽度的一半，实现完美居中 */
  width: 50px; /* 分隔线的宽度 */
  height: 2px; /* 分隔线的厚度 */
  background-color: #e0e0e0; /* 分隔线的颜色，浅灰色 */
  border-radius: 1px; /* 让线条边缘更圆润 */
}
#world-book-screen .empty-list-placeholder {
  text-align: center;
  color: #999;
  padding: 40px 15px;
  line-height: 1.6;
}
#world-book-screen .world-book-item {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
  cursor: pointer;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  max-width: 80%; /* 设置卡片最大宽度为其父容器的85% */
  width: 100%; /* 确保在小屏幕上能正常缩放 */
  margin-left: auto; /* 实现水平居中 */
  margin-right: auto; /* 实现水平居中 */
}
#world-book-screen .world-book-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
#world-book-screen .item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
#world-book-screen .item-title {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  flex-grow: 1;
  padding-right: 10px;
}
#world-book-screen .item-importance-badge {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 12px;
  color: #fff;
}
#world-book-screen .world-book-item[data-importance=high] .item-importance-badge {
  background-color: #ff6b6b;
}
#world-book-screen .world-book-item[data-importance=medium] .item-importance-badge {
  background-color: #feca57;
}
#world-book-screen .world-book-item[data-importance=low] .item-importance-badge {
  background-color: #48dbfb;
}
#world-book-screen .item-content-preview {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
#world-book-screen .item-meta {
  font-size: 14px;
  color: #999;
  margin: 0;
}

/* “添加”按钮的弹出菜单样式 */
#world-book-add-menu {
  position: absolute;
  top: 70px;
  right: 15px;
  width: 160px;
  background-color: var(--c-bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border-light);
  z-index: 100;
  padding: 8px 0;
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none; /* 隐藏时不可点击 */
}

#world-book-add-menu.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto; /* 显示时可点击 */
}

.action-menu-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 15px;
  cursor: pointer;
  gap: 12px;
  color: var(--c-text-primary);
}

.action-menu-item:hover {
  background-color: var(--c-bg-tertiary);
}

.action-menu-item svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  flex-shrink: 0;
  color: var(--c-text-secondary);
}

#world-book-editor-screen .editor-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}
#world-book-editor-screen .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#world-book-editor-screen .form-group.full-height {
  flex-grow: 1;
}
#world-book-editor-screen label {
  font-size: 14px;
  font-weight: 500;
  color: #444;
}
#world-book-editor-screen input[type=text],
#world-book-editor-screen textarea {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#world-book-editor-screen input[type=text]:focus,
#world-book-editor-screen textarea:focus {
  outline: none;
  border-color: #007aff;
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}
#world-book-editor-screen textarea {
  height: 100%;
  resize: none;
  font-family: inherit;
}

/* 
 * ======================================================================
 *   ▼▼▼ 【新增】添加世界书弹窗专属样式 ▼▼▼
 * ======================================================================
 */
#add-wb-entry-modal-overlay .modal-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#add-wb-entry-modal-overlay .modal-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
#add-wb-entry-modal-overlay .modal-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#add-wb-entry-modal-overlay .modal-card label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
#add-wb-entry-modal-overlay .modal-card .styled-input, #add-wb-entry-modal-overlay .modal-card .styled-textarea, #add-wb-entry-modal-overlay .modal-card .styled-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f7f7f7;
  box-sizing: border-box;
  transition: all 0.2s ease;
}
#add-wb-entry-modal-overlay .modal-card .styled-input:focus, #add-wb-entry-modal-overlay .modal-card .styled-textarea:focus, #add-wb-entry-modal-overlay .modal-card .styled-select:focus {
  outline: none;
  border-color: #007aff;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}
#add-wb-entry-modal-overlay .modal-card textarea.styled-input {
  resize: vertical;
  min-height: 100px;
}
#add-wb-entry-modal-overlay .modal-card select.styled-select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
}
#add-wb-entry-modal-overlay .modal-card .segmented-control {
  display: flex;
  width: 100%;
  background-color: #e9e9eb;
  border-radius: 8px;
  padding: 2px;
}
#add-wb-entry-modal-overlay .modal-card .segmented-control input[type=radio] {
  display: none;
}
#add-wb-entry-modal-overlay .modal-card .segmented-control label {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#add-wb-entry-modal-overlay .modal-card .segmented-control input[type=radio]:checked + label {
  background-color: #ffffff;
  color: #000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
#add-wb-entry-modal-overlay .modal-card .helper-text {
  font-size: 12px;
  color: #999;
  margin: -4px 0 0 4px;
}

/* 
 * ======================================================================
 *   ▼▼▼ 【新增】固定的放大镜图标样式 ▼▼▼
 * ======================================================================
 */
.search-icon-fixed {
  /* 1. 核心定位：使用绝对定位，相对于 .wb-body-wrapper */
  position: absolute;
  bottom: 25px; /* 距离父容器底部的间距 */
  /* 2. 精准水平定位：计算位置使其在左侧边栏下方居中 */
  /* 算法: 容器左内边距(12px) + 侧边栏宽度(85px)/2 - 图标自身宽度(60px)/2 */
  left: 37px;
  /* 3. 外观样式 */
  width: 35px;
  height: 35px;
  background-color: #1a1a1a; /* 使用和激活标签一致的深色，保持风格统一 */
  color: white; /* SVG 图标颜色 */
  border-radius: 50%; /* 变为圆形 */
  border: none;
  cursor: pointer;
  /* 4. Flex 布局使内部 SVG 完美居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 5. 添加阴影，营造悬浮感 */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
  /* 6. 【关键】设置层级，确保它在滚动列表的上方，不会被遮盖 */
  z-index: 100;
  /* 7. 添加过渡效果，让交互更平滑 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.search-icon-fixed:hover {
  transform: translateY(-3px); /* 鼠标悬浮时轻微上移 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* 调整 SVG 图标本身的大小 */
.search-icon-fixed svg {
  width: 18px;
  height: 18px;
}

/* 
 * ======================================================================
 *   ▼▼▼ 【在这里添加以下代码】 ▼▼▼
 * ======================================================================
 */
.wb-search-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px 15px 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}
.wb-search-container input[type=text] {
  flex-grow: 1;
  height: 38px;
  padding: 0 12px;
  font-size: 15px;
  border: none;
  background-color: #f0f2f5;
  border-radius: 10px;
}
.wb-search-container input[type=text]:focus {
  outline: none;
  background-color: #e8eaf0;
}
.wb-search-container .wb-search-cancel-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 500;
  color: #007aff;
  cursor: pointer;
  padding: 6px;
}

.page-header.search-mode-active .header-btn, .page-header.search-mode-active .header-title {
  opacity: 0;
  pointer-events: none;
}
.page-header.search-mode-active .wb-search-container {
  opacity: 1;
  pointer-events: auto;
}

/* 
 * ======================================================================
 *   ▼▼▼ 【确保文件末尾有这些样式】 ▼▼▼
 * ======================================================================
 */
/* 搜索结果项的高亮效果 */
.world-book-item.highlight {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 122, 255, 0.2);
  border: 1.5px solid #007aff;
}

/* 扁平化搜索结果中，用于显示分类的元信息样式 */
.world-book-item .item-meta {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  font-size: 12px;
  color: #888;
  text-align: right;
}

/* ====================================================== */
/* == 【恢复】极简黑白多选弹窗样式 (用于“添加世界书”的分类选择) == */
/* ====================================================== */
/* 弹窗卡片主体 */
.minimal-dark-modal {
  width: 90%;
  max-width: 320px;
  background-color: #1c1c1e; /* 深邃的黑色背景 */
  color: #f2f2f7; /* 明亮的白色文字 */
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  border: 1px solid #38383a;
}

.minimal-dark-modal .modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
}

.minimal-dark-modal .modal-helper-text {
  font-size: 0.8rem;
  color: #8e8e93; /* 灰色辅助文字 */
  text-align: center;
  margin-bottom: 20px;
}

/* 选项列表容器 */
.minimal-dark-modal .selection-options-list {
  max-height: 250px;
  overflow-y: auto;
  margin-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: #555 #333;
}

/* 隐藏原生复选框 */
.minimal-dark-modal .selection-options-list input[type=checkbox] {
  display: none;
}

/* 自定义复选框的标签样式 */
.minimal-dark-modal .selection-options-list label {
  display: flex;
  align-items: center;
  padding: 12px 0;
  cursor: pointer;
  border-bottom: 1px solid #38383a;
  transition: background-color 0.2s ease;
}

.minimal-dark-modal .selection-options-list label:last-child {
  border-bottom: none;
}

/* 自定义复选框的方框 */
.minimal-dark-modal .selection-options-list .checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #8e8e93;
  border-radius: 4px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* 自定义复选框的对勾 SVG */
.minimal-dark-modal .selection-options-list .checkbox-custom svg {
  width: 14px;
  height: 14px;
  color: #fff;
  stroke-width: 3;
  opacity: 0; /* 默认隐藏 */
  transform: scale(0.5);
  transition: all 0.2s ease;
}

/* 当复选框被选中时的样式 */
.minimal-dark-modal .selection-options-list input[type=checkbox]:checked + .checkbox-custom {
  background-color: #007aff; /* 蓝色高亮 */
  border-color: #007aff;
}

.minimal-dark-modal .selection-options-list input[type=checkbox]:checked + .checkbox-custom svg {
  opacity: 1; /* 显示对勾 */
  transform: scale(1);
}

/* 底部按钮 */
.minimal-dark-modal .modal-buttons {
  display: flex;
  gap: 10px;
}

.minimal-dark-modal .btn {
  flex: 1;
  border-radius: 8px;
  font-weight: 600;
  padding: 12px;
  border: none;
}

.minimal-dark-modal .btn-secondary {
  background-color: #3a3a3c;
  color: #f2f2f7;
}

.minimal-dark-modal .btn-danger {
  background-color: #ae2a25; /* 更深沉的红色 */
  color: #fff;
}

/* ====================================================== */
/* == 【修正】挂载世界书弹窗样式 (白底黑字) == */
/* ====================================================== */
/* 弹窗卡片主体 */
.light-selection-modal {
  width: 90%;
  max-width: 340px;
  background-color: #f9f9f9;
  color: #1c1c1e;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid #e8e8e8;
}

.light-selection-modal .modal-title {
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
}

.light-selection-modal .modal-helper-text {
  font-size: 0.85rem;
  color: #888;
  text-align: center;
  margin-bottom: 20px;
}

/* 列表容器 */
.light-selection-modal .mount-wb-list {
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 20px;
  padding-right: 5px;
}
.light-selection-modal .mount-wb-list::-webkit-scrollbar {
  width: 6px;
}
.light-selection-modal .mount-wb-list::-webkit-scrollbar-track {
  background: #f0f0f0;
}
.light-selection-modal .mount-wb-list::-webkit-scrollbar-thumb {
  background: #ccc;
}

/* 可折叠的分组 */
.light-selection-modal .mount-wb-group {
  margin-bottom: 10px;
}
.light-selection-modal .mount-wb-group[open] > .mount-wb-group-title .chevron {
  transform: rotate(90deg);
}

/* 分组标题 */
.light-selection-modal .mount-wb-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 5px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  list-style: none;
}
.light-selection-modal .mount-wb-group-title::-webkit-details-marker {
  display: none;
}
.light-selection-modal .mount-wb-group-title .chevron {
  width: 16px;
  height: 16px;
  stroke: #aaa;
  stroke-width: 2.5;
  transition: transform 0.2s ease;
}

/* 分组下的条目列表 */
.light-selection-modal .mount-wb-items {
  padding-left: 10px;
  border-left: 1px solid #e0e0e0;
  margin-left: 5px;
}

/* 单个条目 */
.light-selection-modal .mount-wb-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
}
.light-selection-modal .mount-wb-item input[type=checkbox] {
  display: none;
}
.light-selection-modal .mount-wb-item .checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  background-color: #fff;
  border-radius: 4px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.light-selection-modal .mount-wb-item .checkbox-custom svg {
  width: 14px;
  height: 14px;
  color: #fff;
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}
.light-selection-modal .mount-wb-item span:last-child {
  font-size: 0.95rem;
  color: #1c1c1e;
}
.light-selection-modal .mount-wb-item input[type=checkbox]:checked + .checkbox-custom {
  background-color: #30d158;
  border-color: #30d158;
}
.light-selection-modal .mount-wb-item input[type=checkbox]:checked + .checkbox-custom svg {
  opacity: 1;
  transform: scale(1);
}

/* 底部按钮 */
.light-selection-modal .modal-buttons {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.light-selection-modal .btn {
  flex: 1;
  border-radius: 10px;
  font-weight: 500;
  font-size: 16px;
  padding: 12px;
  border: none;
  transition: background-color 0.2s ease;
}

.light-selection-modal .btn-secondary {
  background-color: #e5e5ea;
  color: #1c1c1e;
}
.light-selection-modal .btn-secondary:hover {
  background-color: #dcdce0;
}

.light-selection-modal .btn-primary {
  background-color: #080808;
  color: #fff;
}
.light-selection-modal .btn-primary:hover {
  background-color: #0056b3;
}

/* ========================================================== */
/* == 【精修版】世界书在手机端的响应式微调 == */
/* ========================================================== */
@media (max-width: 600px) {
  /* --- 通用头部 --- */
  .page-header {
    padding: 10.25vw 3.84vw 3.07vw;
  }
  .page-header .header-title {
    font-size: clamp(16px, 4.35vw, 17px);
    padding: 0 2.56vw;
  }
  .page-header .header-btn {
    padding: 2.05vw;
    min-width: 10.25vw;
  }
  /* --- 列表页 --- */
  #world-book-screen .wb-body-wrapper {
    padding: 3.07vw;
    gap: 3.07vw;
  }
  #world-book-screen .wb-category-sidebar {
    flex-basis: 21.79vw;
    border-radius: 4.1vw;
    padding: 3.07vw 0;
    gap: 2.56vw;
  }
  #world-book-screen .tab-item {
    max-width: 16.6vw;
    padding: 2.05vw 3.07vw;
    border-radius: 4.61vw;
  }
  #world-book-screen .world-book-main-content {
    border-radius: 4.1vw;
    gap: 3.07vw;
  }
  #world-book-screen .world-book-main-content #world-book-list {
    padding: 5.12vw;
  }
  #world-book-screen .wb-list-group-header {
    margin: 5.12vw 0 2.56vw 0;
    padding-bottom: 2.56vw;
  }
  #world-book-screen .wb-list-group-header::after {
    width: 12.82vw;
    height: 0.51vw;
  }
  #world-book-screen .world-book-item {
    border-radius: 3.58vw;
    padding: 4.61vw;
  }
  #world-book-screen .item-header {
    margin-bottom: 2.56vw;
  }
  #world-book-screen .item-title {
    /* 【修改】将卡片标题字体彻底固定为 17px */
    font-size: 17px;
    padding-right: 2.56vw;
  }
  /* --- 搜索按钮和弹窗 (无字体修改) --- */
  .search-icon-fixed {
    bottom: 6.41vw;
    left: 9.48vw;
    width: 8.97vw;
    height: 8.97vw;
  }
  .search-icon-fixed svg {
    width: 4.61vw;
    height: 4.8vw;
  }
  .wb-search-container {
    padding-top: 10.25vw;
  }
  .wb-search-container input[type=text] {
    height: 9.74vw;
  }
}
#page-gallery {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  position: relative;
  height: 100%;
}

.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 15px 12px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  z-index: 10;
  flex-shrink: 0;
}
.gallery-header h1 {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 10px;
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-search-container {
  padding: 8px 20px 12px;
  flex-shrink: 0;
}
.gallery-search-container .search-bar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.gallery-search-container .search-icon {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: #aaa;
  pointer-events: none;
}
.gallery-search-container #gallery-ai-search-input {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  background-color: #f7f7f7;
  padding: 0 15px 0 40px;
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
}
.gallery-search-container #gallery-ai-search-input:disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
}
.gallery-search-container #gallery-ai-search-input:focus {
  border-color: #007aff;
  background-color: #fff;
}
.gallery-search-container .spinner {
  position: absolute;
  right: 12px;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.gallery-search-container .status-text {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 6px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.header-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  min-width: 40px;
}
.header-btn:hover {
  background-color: #f5f5f5;
}
.header-btn svg {
  width: 24px;
  height: 24px;
}

#page-gallery .character-selector {
  margin: 16px 20px;
  background-color: #f0f2f5;
  border-radius: 20px;
  padding: 12px 0;
  flex-shrink: 0;
}
#page-gallery .character-selector .character-wrapper {
  display: flex;
  gap: 16px;
  padding: 0 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
}
#page-gallery .character-selector .character-wrapper::-webkit-scrollbar {
  display: none;
}
#page-gallery .character-selector .character-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  width: 58px;
  flex-shrink: 0;
}
#page-gallery .character-selector .character-avatar .img-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  border: 2px solid transparent;
}
#page-gallery .character-selector .character-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
#page-gallery .character-selector .character-avatar span {
  font-size: 11px;
  color: #8E8E93;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
#page-gallery .character-selector .character-avatar.active .img-wrapper {
  border-color: #000000;
  transform: scale(1.05);
}
#page-gallery .character-selector .character-avatar.active span {
  color: #000000;
  font-weight: 500;
}
#page-gallery .character-selector .add-new-character .img-wrapper {
  border: 1.5px dashed #C7C7CC;
}
#page-gallery .character-selector .add-new-character .img-wrapper .add-icon {
  color: #C7C7CC;
  font-size: 22px;
  font-weight: 300;
}
#page-gallery .image-grid-container {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0 20px 80px 20px;
}
#page-gallery .image-groups-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#page-gallery .date-separator {
  text-align: center;
  font-size: 12px;
  color: #999;
  padding: 10px 0;
}
#page-gallery .image-group-card {
  background-color: #f7f7f7;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#page-gallery .image-group-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
#page-gallery .image-group-card .group-cover-image {
  width: 100%;
  padding-bottom: 56.25%;
  background-color: #e0e0e0;
  background-size: cover;
  background-position: center;
}
#page-gallery .image-group-card .group-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}
#page-gallery .image-group-card .info-main .group-title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin: 0 0 5px 0;
}
#page-gallery .image-group-card .info-main .group-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #888;
}
#page-gallery .image-group-card .info-main .group-status svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}
#page-gallery .image-group-card .info-action {
  display: flex;
  align-items: center;
  gap: 8px;
}
#page-gallery .image-group-card .group-action-btn {
  background-color: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
  color: #555;
}
#page-gallery .image-group-card .group-action-btn:hover {
  background-color: #f5f5f5;
}
#page-gallery .image-group-card .group-action-btn svg {
  width: 16px;
  height: 16px;
}
#page-gallery .image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
#page-gallery .image-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
}
#page-gallery .image-card:hover {
  transform: translateY(-3px);
}
#page-gallery .image-card .image-placeholder {
  width: 100%;
  padding-bottom: 100%;
  background-color: #f0f2f5;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
#page-gallery .image-card .image-meaning {
  display: none;
}
#page-gallery .image-card .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
#page-gallery .image-card.active .image-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#page-gallery .image-card .image-description-overlay {
  font-size: 12px;
  color: #fff;
  margin: 0;
  align-self: flex-start;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
#page-gallery .image-card .image-actions {
  align-self: flex-end;
  display: flex;
  gap: 6px;
}
#page-gallery .image-card .image-actions button {
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: background-color 0.2s ease;
  padding: 0;
}
#page-gallery .image-card .image-actions button:hover {
  background-color: rgb(255, 255, 255);
}
#page-gallery .image-card .image-actions button svg {
  width: 16px;
  height: 16px;
  color: #333;
}

#gallery-action-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  pointer-events: none;
  transform-origin: top right;
  position: absolute;
  z-index: 150;
  top: 75px;
  right: 15px;
  background-color: #ffffff;
  border-radius: 12px;
  min-width: 160px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 6px;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
#gallery-action-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#gallery-action-menu .action-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s ease;
}
#gallery-action-menu .action-menu-item svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
  flex-shrink: 0;
}
#gallery-action-menu .action-menu-item:hover {
  background-color: #f5f5f5;
}

/* =======================================================
  4. ▼▼▼【修改处】分组详情页样式 ▼▼▼
  ======================================================= */
#page-gallery-group-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #FFFFFF;
}
#page-gallery-group-detail .group-detail-content {
  padding: 16px;
  flex-grow: 1;
  overflow-y: auto;
}
#page-gallery-group-detail .group-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
#page-gallery-group-detail .image-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
}
#page-gallery-group-detail .image-card:hover {
  transform: translateY(-3px);
}
#page-gallery-group-detail .image-card .image-placeholder {
  width: 100%;
  padding-bottom: 100%;
  background-color: #f0f2f5;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
#page-gallery-group-detail .image-card .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
#page-gallery-group-detail .image-card.active .image-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#page-gallery-group-detail .image-card .image-description-overlay {
  font-size: 12px;
  color: #fff;
  margin: 0;
  align-self: flex-start;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
#page-gallery-group-detail .image-card .image-actions {
  align-self: flex-end;
  display: flex;
  gap: 6px;
}
#page-gallery-group-detail .image-card .image-actions button {
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: background-color 0.2s ease;
  padding: 0;
}
#page-gallery-group-detail .image-card .image-actions button:hover {
  background-color: rgb(255, 255, 255);
}
#page-gallery-group-detail .image-card .image-actions button svg {
  width: 16px;
  height: 16px;
  color: #333;
}

#gallery-settings-modal .modal-card {
  background-color: #f7f7f7;
  border-radius: 20px;
  max-width: 360px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
#gallery-settings-modal .modal-header {
  text-align: center;
  padding: 20px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
}
#gallery-settings-modal .modal-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
}
#gallery-settings-modal #gallery-settings-close-btn {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: #888;
  font-size: 16px;
  line-height: 28px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
#gallery-settings-modal #gallery-settings-close-btn:hover {
  background-color: #d1d1d1;
  color: #333;
}
#gallery-settings-modal .modal-body {
  padding: 8px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#gallery-settings-modal .settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: none;
}
#gallery-settings-modal .settings-row label {
  font-size: 16px;
  font-weight: 500;
  color: #1d1d1f;
}
#gallery-settings-modal .settings-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 4px 0;
}
#gallery-settings-modal .settings-hint {
  font-size: 13px;
  color: #86868b;
  margin: -12px 0 10px 0;
  line-height: 1.5;
  padding: 0 4px;
}
#gallery-settings-modal .switch input:checked + .slider {
  background-color: #30D158;
}
#gallery-settings-modal .slider-row {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-top: 16px;
}
#gallery-settings-modal .slider-row .label-group {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
#gallery-settings-modal .slider-row .slider-value {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}
#gallery-settings-modal .slider-row input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  outline: none;
  transition: background 0.2s;
}
#gallery-settings-modal .slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  background: #ffffff;
  cursor: pointer;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.1);
}
#gallery-settings-modal .slider-row input[type=range]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  background: #ffffff;
  cursor: pointer;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.1);
}
#gallery-settings-modal .btn-danger {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}
#gallery-settings-modal .btn-danger:hover {
  background-color: #c0392b;
}
#gallery-settings-modal .settings-help-text {
  font-size: 13px;
  color: #86868b;
  margin-top: 8px;
  text-align: center;
  line-height: 1.5;
  padding: 0 4px;
}

/* ========================================================== */
/* == 【精修版】相册页面在手机端的响应式微调 == */
/* ========================================================== */
@media (max-width: 600px) {
  /* --- 顶部通用样式 --- */
  .gallery-header {
    padding: 10.25vw 3.84vw 3.07vw; /* 40px 15px 12px */
  }
  .gallery-header h1 {
    /* 【修改】标题字体使用 clamp() 进行严格控制，在16px-17px之间微调 */
    font-size: clamp(16px, 4.35vw, 17px);
    padding: 0 2.56vw; /* 10px */
  }
  .gallery-search-container {
    padding: 2.05vw 5.12vw 3.07vw; /* 8px 20px 12px */
  }
  .gallery-search-container .search-icon {
    left: 3.07vw;
    width: 4.61vw;
    height: 4.61vw;
  }
  .gallery-search-container #gallery-ai-search-input {
    height: 10.25vw; /* 40px */
    border-radius: 5.12vw; /* 20px */
    padding: 0 3.84vw 0 10.25vw;
    /* 输入框字体已经在原始样式中固定为15px，这里无需修改 */
  }
  /* --- 角色选择器 --- */
  .character-selector {
    margin: 4.1vw 5.12vw;
    border-radius: 5.12vw;
    padding: 3.07vw 0;
  }
  .character-selector .character-wrapper {
    gap: 4.1vw;
    padding: 0 5.12vw;
  }
  .character-selector .character-avatar {
    gap: 1.53vw;
    width: 14.87vw;
  }
  .character-selector .character-avatar .img-wrapper {
    width: 12.82vw;
    height: 12.82vw;
  }
  .character-selector .character-avatar span {
    /* 【修改】将角色名字的字体彻底固定为 11px */
    font-size: 11px;
  }
  /* --- 图片网格 (这部分没有字体，保持不变) --- */
  .image-grid-container {
    padding: 0 5.12vw 20.51vw 5.12vw;
  }
  .image-groups-list {
    gap: 4.1vw;
  }
  .date-separator {
    padding: 2.56vw 0;
  }
  .image-group-card {
    border-radius: 4.1vw;
  }
  .image-group-card .group-info {
    padding: 3.07vw 4.1vw;
  }
  .image-group-card .info-main .group-title {
    margin-bottom: 1.28vw; /* 这里的字体已在原样式固定为16px */
  }
  .image-grid {
    gap: 3.07vw;
  }
  .image-card .image-placeholder {
    border-radius: 3.07vw;
  }
}
.moments-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: var(--status-bar-height, 44px) 8px 12px;
  height: calc(var(--status-bar-height, 44px) + 52px);
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.moments-header .header-button {
  position: static;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.moments-header .back-button svg {
  width: 18px;
  height: 18px;
}
.moments-header .moments-header__actions svg {
  width: 28px;
  height: 28px;
}
.moments-header svg {
  fill: white;
  transition: fill 0.3s ease;
}
.moments-header svg path {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* ==========================================================================
   动态页 - 个人信息头部样式
   ========================================================================== */
.moments-profile {
  position: relative;
  margin-top: -20px;
  margin-bottom: 40px;
}

.moments-profile__cover {
  height: 280px;
  background-color: #eee;
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
  background-size: cover;
  background-position: center;
  margin-left: -20px;
  margin-right: -20px;
}

.moments-profile__user {
  position: absolute;
  right: 8px;
  bottom: -20px;
  display: flex;
  align-items: center;
}

.moments-profile__name {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin-right: 16px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.moments-profile__avatar {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  -o-object-fit: cover;
     object-fit: cover;
}

/*
 * 关键修正：
 * 因为个人信息头部占用了空间，我们需要把下面的动态内容往下推
 * 否则会被遮住
 */
.moments-content {
  background: white;
  padding-bottom: 90px;
}

/* ==========================================================================
   动态页 - 动态卡片样式 (杂志风 + 微信九宫格)
   ========================================================================== */
.moment-card {
  background-color: #fff;
  padding: 24px 0 12px 0;
  border-bottom: 1px solid #f2f2f2;
}
.moment-card:last-child {
  border-bottom: none;
}

/* --- 1. 头部 (头像与名字) --- */
.moment-card__header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 0 5px;
}
.moment-card__header .avatar-wrapper {
  position: relative;
  margin-right: 12px;
}
.moment-card__header .avatar-wrapper .avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
}
.moment-card__header .meta-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.moment-card__header .meta-wrapper .author-name {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  line-height: 1.2;
  margin-bottom: 3px;
}
.moment-card__header .meta-wrapper .meta-info {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
}
.moment-card__header .meta-wrapper .meta-info .separator {
  margin: 0 4px;
  font-weight: bold;
}
.moment-card__header .more-btn {
  background: none;
  border: none;
  color: #ccc;
  padding: 8px;
  margin-right: -8px;
  cursor: pointer;
}
.moment-card__header .more-btn svg {
  width: 20px;
  height: 20px;
}

/* --- 2. 内容区 (左对齐头像，方块图) --- */
.moment-card__body {
  margin-bottom: 5px;
  padding: 0 5px;
}
.moment-card__body .content-text {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 16px;
  word-wrap: break-word;
  white-space: pre-wrap;
  text-align: justify;
}
.moment-card__body .media-grid {
  display: grid;
  gap: 4px;
  border-radius: 0;
  overflow: hidden;
  max-width: 100%;
}
.moment-card__body .media-grid .media-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  background-color: #f7f7f7;
  overflow: hidden;
}
.moment-card__body .media-grid .media-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 0;
}
.moment-card__body .media-grid.grid-1 {
  grid-template-columns: 1fr;
  max-width: 200px;
}
.moment-card__body .media-grid.grid-2 {
  grid-template-columns: 1fr 1fr;
  max-width: 80%;
}
.moment-card__body .media-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.moment-card__body .media-grid.grid-4 {
  grid-template-columns: 1fr 1fr;
  max-width: 60%;
}
.moment-card__body .media-grid.grid-5, .moment-card__body .media-grid.grid-6, .moment-card__body .media-grid.grid-7, .moment-card__body .media-grid.grid-8, .moment-card__body .media-grid.grid-9 {
  grid-template-columns: repeat(3, 1fr);
}

/* --- 3. 底部操作栏 (图标靠右，不分离) --- */
.moment-card__footer {
  display: flex;
  align-items: center;
  padding-top: 4px;
  padding-right: 5px;
  padding-left: 5px;
  justify-content: flex-end;
  gap: 24px;
}
.moment-card__footer .action-btn {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #555;
  transition: all 0.2s;
}
.moment-card__footer .action-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5px;
}
.moment-card__footer .action-btn .count {
  margin-left: 5px;
  font-size: 13px;
  color: #777;
  font-weight: 400;
  min-width: 10px;
}
.moment-card__footer .action-btn:active {
  transform: scale(0.9);
}
.moment-card__footer .action-btn.liked svg {
  fill: #ff4d4f;
  stroke: #ff4d4f;
}
.moment-card__footer .action-btn.liked .count {
  color: #ff4d4f;
}

/* --- 4. 模拟文字图片 (无圆角方块 + 遮罩交互) --- */
.simulated-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  background-color: #f0f0f0;
}
.simulated-image-container .simulated-content {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  color: #040404;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  word-break: break-all;
}
.simulated-image-container .spoiler-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ecebeb;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.simulated-image-container .spoiler-overlay svg {
  width: 20px;
  height: 20px;
  color: #141414;
  margin-bottom: 4px;
}
.simulated-image-container .spoiler-overlay span {
  font-size: 10px;
  color: #111010;
  letter-spacing: 1px;
  font-weight: bold;
}
.simulated-image-container.is-revealed .spoiler-overlay {
  opacity: 0;
}

@media (max-width: 600px) {
  .moment-card__header,
  .moment-card__body,
  .moment-card__footer {
    padding-left: 0vw;
    padding-right: 0vw;
  }
  .moment-card__body .media-grid {
    gap: 1vw;
  }
}
/* ==========================================================================
   动态页 - 滚动后导航栏的样式
   ========================================================================== */
.moments-header__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: var(--status-bar-height, 44px);
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.moments-header.is-scrolled {
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.moments-header.is-scrolled .moments-header__title {
  opacity: 1;
}
.moments-header.is-scrolled svg path {
  fill: black;
  filter: none;
}

#moments-cover-image,
#moments-user-avatar {
  cursor: pointer;
  transition: filter 0.2s ease-in-out;
}
#moments-cover-image:hover,
#moments-user-avatar:hover {
  filter: brightness(0.9);
}

#moments-user-name {
  cursor: text;
}
#moments-user-name:focus {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.1);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ==========================================================================
   【重构】发布动态弹窗样式 (极简黑白杂志风)
   ========================================================================== */
.create-moment-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* 纯白画布 */
  z-index: 2000;
  /* 优雅的滑出动画 */
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.create-moment-modal.active {
  transform: translateY(0);
}

.create-moment-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: var(--status-bar-height, 44px);
}

/* 1. 顶部导航 - 极简 */
.create-moment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 10;
}
.create-moment-header .header-icon-btn {
  background: none;
  border: none;
  padding: 8px;
  margin-left: -8px;
  cursor: pointer;
  color: #333;
}
.create-moment-header .header-icon-btn svg {
  width: 28px;
  height: 28px;
  transition: transform 0.2s;
}
.create-moment-header .header-icon-btn:active svg {
  transform: scale(0.9);
}
.create-moment-header .header-title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  font-family: "Helvetica Neue", sans-serif; /* 英文字体更时尚 */
  letter-spacing: 0.5px;
}
.create-moment-header .post-btn {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: #000; /* 极致纯黑 */
  border: none;
  border-radius: 20px; /* 药丸形状 */
  padding: 8px 20px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 淡淡的投影 */
  transition: transform 0.1s, box-shadow 0.2s;
}
.create-moment-header .post-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 滚动区域容器 */
.create-moment-scroll-container {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px; /* 两侧留白，增加精致感 */
}

/* 2. 内容编辑区 */
.create-moment-body {
  margin-top: 10px;
}
.create-moment-body textarea {
  width: 100%;
  min-height: 140px; /* 更高一点 */
  border: none;
  resize: none;
  font-size: 18px; /* 字号更大 */
  line-height: 1.6;
  color: #000;
  outline: none;
  font-family: inherit;
  background: transparent;
}
.create-moment-body textarea::-moz-placeholder {
  color: #ccc;
  font-weight: 300;
}
.create-moment-body textarea::placeholder {
  color: #ccc;
  font-weight: 300;
}

/* 图片九宫格 - 圆角更大 */
.moment-media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* 间距更大 */
  margin-top: 20px;
  margin-bottom: 40px; /* 和下方选项拉开距离 */
}
.moment-media-grid .add-media-btn, .moment-media-grid .media-item {
  width: 100px;
  height: 100px;
  border-radius: 16px; /* 大圆角，类似 iOS */
  overflow: hidden;
}
.moment-media-grid .add-media-btn {
  background-color: #f5f5f5;
  border: 1px dashed #e0e0e0; /* 虚线边框增加设计感 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
}
.moment-media-grid .add-media-btn svg {
  width: 32px;
  height: 32px;
  stroke: #bbb;
}
.moment-media-grid .add-media-btn:active {
  background-color: #eee;
}
.moment-media-grid .media-item {
  -o-object-fit: cover;
     object-fit: cover;
  background-color: #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 3. 选项控制面板 - 悬浮卡片风格 */
.create-moment-options-card {
  background-color: #fafafa; /* 极淡的灰，区分于背景白 */
  border-radius: 20px;
  padding: 8px 20px;
  border: 1px solid #f0f0f0; /* 极细的边框 */
}

.moment-option-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px; /* 每一行更高，利于点击 */
  border-bottom: 1px solid #eee;
  cursor: pointer;
  /* 左侧：图标+文字 */
  /* 右侧：状态+箭头 */
  /* 隐藏的原生选择器覆盖层 */
}
.moment-option-row:last-child {
  border-bottom: none;
}
.moment-option-row .option-left {
  display: flex;
  align-items: center;
}
.moment-option-row .option-left .icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); /* 图标微投影 */
}
.moment-option-row .option-left .icon-box svg {
  width: 18px;
  height: 18px;
  color: #333;
}
.moment-option-row .option-left .option-label {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.moment-option-row .option-right {
  display: flex;
  align-items: center;
}
.moment-option-row .option-right .option-placeholder {
  font-size: 14px;
  color: #bbb;
  margin-right: 8px;
}
.moment-option-row .option-right .option-value {
  font-size: 14px;
  color: #000; /* 选中值黑色高亮 */
  font-weight: 500;
  margin-right: 8px;
}
.moment-option-row .option-right .arrow {
  width: 16px;
  height: 16px;
  color: #ddd;
}
.moment-option-row .hidden-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ========================================================== */
/* == 【新增】动态页面在手机端的响应式调整 == */
/* ========================================================== */
@media (max-width: 600px) {
  .moments-header {
    padding-top: var(--status-bar-height, 11.28vw); /* 44px */
    padding-bottom: 3.07vw; /* 12px */
    padding-left: 2.05vw; /* 8px */
    padding-right: 2.05vw; /* 8px */
    height: calc(var(--status-bar-height, 11.28vw) + 13.33vw); /* 44px + 52px */
  }
  /* --- 个人信息头部 --- */
  .moments-profile {
    margin-top: -5.12vw; /* -20px */
    margin-bottom: 10.25vw; /* 40px */
  }
  .moments-profile__cover {
    height: 71.79vw; /* 280px */
    margin-left: -5.12vw; /* -20px */
    margin-right: -5.12vw; /* -20px */
  }
  .moments-profile__user {
    right: 2.05vw; /* 8px */
    bottom: -5.12vw; /* -20px */
  }
  .moments-profile__name {
    font-size: 5.12vw; /* 20px */
    margin-right: 4.1vw; /* 16px */
  }
  .moments-profile__avatar {
    width: 18.46vw; /* 72px */
    height: 18.46vw; /* 72px */
    border-radius: 2.05vw; /* 8px */
    border-width: 0.76vw; /* 3px */
  }
  /* --- 动态卡片 --- */
  .moment-card {
    padding-top: 4.1vw; /* 16px */
    /* 如果你想要一个8px的间隙，请使用 margin-bottom */
    margin-bottom: 2.05vw; /* 约等于 8px */
    /* 同时将边框宽度改回固定的 1px */
    border-bottom-width: 1px;
  }
  .moment-card__header {
    margin-bottom: 3.07vw; /* 12px */
  }
  .moment-card__avatar {
    width: 10.76vw; /* 42px */
    height: 10.76vw; /* 42px */
    margin-right: 3.07vw; /* 12px */
  }
  .moment-card__text {
    margin-bottom: 2.05vw; /* 8px */
  }
  .moment-card__gallery {
    gap: 1.02vw; /* 4px */
  }
  .moment-card__footer {
    margin-top: 3.07vw; /* 12px */
  }
  .moment-card__actions button {
    width: 9.23vw; /* 36px */
    height: 6.15vw; /* 24px */
    margin-left: 2.05vw; /* 8px */
  }
  .moment-card__actions button svg {
    width: 4.61vw; /* 18px */
    height: 4.61vw; /* 18px */
  }
  .moment-card__interactions {
    margin-top: 2.56vw; /* 10px */
    padding: 1.02vw 3.07vw; /* 4px 12px */
  }
  .moment-card__interactions .likes-section, .moment-card__interactions .comments-section {
    padding: 1.02vw 0; /* 4px 0 */
  }
  .moment-card__interactions .likes-section svg, .moment-card__interactions .comments-section svg {
    margin-right: 1.53vw; /* 6px */
  }
  .moments-header__title {
    top: var(--status-bar-height, 11.28vw); /* 44px */
  }
  /* --- 发布动态弹窗 --- */
  .create-moment-wrapper {
    padding-top: var(--status-bar-height, 11.28vw); /* 44px */
  }
  .create-moment-header {
    padding: 0 5.12vw; /* 0 20px */
    height: 15.38vw; /* 60px */
  }
  .create-moment-header .header-icon-btn {
    padding: 2.05vw; /* 8px */
    margin-left: -2.05vw; /* -8px */
  }
  .create-moment-header .header-icon-btn svg {
    width: 7.17vw; /* 28px */
    height: 7.17vw; /* 28px */
  }
  .create-moment-header .post-btn {
    border-radius: 5.12vw; /* 20px */
    padding: 2.05vw 5.12vw; /* 8px 20px */
  }
  .create-moment-scroll-container {
    padding: 0 6.15vw; /* 0 24px */
  }
  .create-moment-body {
    margin-top: 2.56vw; /* 10px */
  }
  .create-moment-body textarea {
    min-height: 35.89vw; /* 140px */
  }
  .moment-media-grid {
    gap: 3.07vw; /* 12px */
    margin-top: 5.12vw; /* 20px */
    margin-bottom: 10.25vw; /* 40px */
  }
  .moment-media-grid .add-media-btn, .moment-media-grid .media-item {
    width: 25.64vw; /* 100px */
    height: 25.64vw; /* 100px */
    border-radius: 4.1vw; /* 16px */
  }
  .moment-media-grid .add-media-btn svg {
    width: 8.2vw; /* 32px */
    height: 8.2vw; /* 32px */
  }
  .create-moment-options-card {
    border-radius: 5.12vw; /* 20px */
    padding: 2.05vw 5.12vw; /* 8px 20px */
  }
  .moment-option-row {
    height: 16.41vw; /* 64px */
  }
}
/* ==========================================================================
   ▼▼▼ 【新增】自定义隐私选择面板样式 (底部弹窗) ▼▼▼
   ========================================================================== */
.privacy-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  align-items: flex-end;
  justify-content: center;
}
.privacy-sheet-overlay.visible {
  display: flex;
  opacity: 1;
}
.privacy-sheet-overlay.visible .privacy-sheet-card {
  transform: translateY(0);
}

.privacy-sheet-card {
  width: 100%;
  background-color: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding-bottom: env(safe-area-inset-bottom, 20px);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.privacy-sheet-header {
  padding: 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #888;
  border-bottom: 1px solid #f5f5f5;
}

.privacy-sheet-list {
  overflow-y: auto;
  padding: 0 16px;
}

.privacy-section-header {
  padding: 8px 20px;
  background-color: #f7f7f7;
  color: #8e8e93;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #f0f0f0;
  margin-top: -1px;
}

.privacy-sheet-item {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #f9f9f9;
  cursor: pointer;
  background-color: #fff;
  transition: background-color 0.2s;
}
.privacy-sheet-item:active {
  background-color: #f5f5f5;
}
.privacy-sheet-item .item-icon-wrapper {
  width: 36px;
  height: 36px;
  margin-right: 12px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f2f5;
  flex-shrink: 0;
}
.privacy-sheet-item .item-icon-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.privacy-sheet-item .item-icon-wrapper svg {
  width: 20px;
  height: 20px;
  fill: #333;
}
.privacy-sheet-item.type-char .item-icon-wrapper {
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.privacy-sheet-item .item-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.privacy-sheet-item .item-content .item-label {
  font-size: 16px;
  color: #000;
  font-weight: 500;
}
.privacy-sheet-item .item-content .item-sub-label {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.privacy-sheet-item .item-check {
  width: 20px;
  height: 10px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg) translate(2px, -2px);
  opacity: 0;
  transition: opacity 0.2s;
}
.privacy-sheet-item.selected {
  background-color: #fafafa;
}
.privacy-sheet-item.selected .item-check {
  opacity: 1;
}

.privacy-sheet-cancel {
  margin-top: 8px;
  padding: 16px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #000;
  border-top: 8px solid #f5f5f5;
  background: #fff;
  cursor: pointer;
}
.privacy-sheet-cancel:active {
  background-color: #f0f0f0;
}

/* ==========================================================================
   ▼▼▼ 【新增】媒体选择动作面板 (Action Sheet) ▼▼▼
   ========================================================================== */
.action-sheet-card {
  width: 100%;
  background-color: #f0f0f0;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.action-sheet-item {
  background-color: #fff;
  padding: 18px 0;
  text-align: center;
  font-size: 17px;
  color: #000;
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}
.action-sheet-item:active {
  background-color: #e5e5e5;
}
.action-sheet-item.type-cancel {
  margin-top: 8px;
  border-bottom: none;
  font-weight: 600;
}

/* ==========================================================================
   ▼▼▼ 【修改】九宫格图片样式 (防变形) ▼▼▼
   ========================================================================== */
.moment-media-grid .media-item-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}
.moment-media-grid .media-item-wrapper .media-item {
  width: 100%;
  height: 100%;
}
.moment-media-grid .media-item-wrapper .media-item[data-type=real] {
  -o-object-fit: cover;
     object-fit: cover;
}
.moment-media-grid .media-item-wrapper .media-item.simulated-img {
  background-color: #1a1a1a;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 8px;
  text-align: center;
  line-height: 1.4;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.moment-media-grid .media-item-wrapper .delete-media-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  color: white;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 2px solid #fff;
  z-index: 2;
}

@media (max-width: 600px) {
  .moment-media-grid .media-item-wrapper {
    width: 25.64vw;
    height: 25.64vw;
  }
}
/* ==========================================================================
   ▼▼▼ 【重做】媒体选择弹窗 (中央卡片式) ▼▼▼
   ========================================================================== */
.media-select-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3200;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.media-select-overlay.visible {
  display: flex;
  opacity: 1;
}
.media-select-overlay.visible .media-select-card {
  transform: scale(1);
}

.media-select-card {
  width: 85%;
  max-width: 320px;
  background-color: #fff;
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.media-select-card h3 {
  margin: 0 0 4px 0;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #000;
}

.media-option-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-select-album {
  background-color: #f5f5f5;
  color: #000;
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.2s;
}
.btn-select-album:hover {
  background-color: #e0e0e0;
}
.btn-select-album svg {
  width: 20px;
  height: 20px;
  fill: #333;
}

.simulated-input-row {
  display: flex;
  gap: 8px;
}
.simulated-input-row input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}
.simulated-input-row input:focus {
  border-color: #000;
}
.simulated-input-row button {
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.simulated-input-row button:active {
  transform: scale(0.95);
}

.btn-media-close {
  margin-top: 4px;
  background: none;
  border: none;
  color: #888;
  font-size: 15px;
  cursor: pointer;
  padding: 8px;
}

/* ==========================================================================
   ▼▼▼ 【新增】提醒谁看 (Remind Sheet) 特有样式 ▼▼▼
   ========================================================================== */
#custom-remind-sheet .privacy-sheet-header {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.btn-text-link {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  cursor: pointer;
  padding: 4px 8px;
  margin-right: -8px;
  outline: none;
}
.btn-text-link:active {
  opacity: 0.6;
  transform: scale(0.98);
}
.btn-text-link:disabled {
  color: #ccc;
  pointer-events: none;
}

.item-check-custom {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.item-check-custom div {
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.item-check-custom svg {
  width: 24px;
  height: 24px;
  animation: check-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes check-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* ==========================================================================
   ▼▼▼ 【重构】评论区样式 (极简黑白风格 - 边距对齐修正版) ▼▼▼
   ========================================================================== */
.moment-card__comments {
  display: none;
  margin-top: 10px;
  padding: 0 5px 12px 5px;
  animation: fadeIn 0.3s ease;
}
.moment-card__comments .comments-box {
  background-color: #f7f7f7;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  position: relative;
}
.moment-card__comments .comments-box::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 14px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #f7f7f7;
}
.moment-card__comments .likes-list {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 8px;
  margin-bottom: 8px;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.moment-card__comments .likes-list svg {
  width: 14px;
  height: 14px;
  fill: #333;
  margin-right: 6px;
  transform: translateY(1px);
}
.moment-card__comments .comment-list .comment-item {
  margin-bottom: 6px;
  line-height: 1.5;
  color: #444;
  font-size: 14px;
  word-break: break-all;
}
.moment-card__comments .comment-list .comment-item:last-child {
  margin-bottom: 0;
}
.moment-card__comments .comment-list .comment-item .comment-user {
  color: #000;
  font-weight: 700;
  margin-right: 4px;
  cursor: pointer;
}
.moment-card__comments .comment-list .comment-item .comment-user:active {
  opacity: 0.6;
}
.moment-card__comments .comment-list .comment-item .comment-content {
  color: #333;
}
.moment-card__comments .comment-input-wrapper {
  display: flex;
  align-items: center;
  margin-top: 12px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 4px 6px 4px 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.moment-card__comments .comment-input-wrapper input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #000;
  padding: 6px 0;
  outline: none;
}
.moment-card__comments .comment-input-wrapper input::-moz-placeholder {
  color: #bbb;
  font-size: 13px;
}
.moment-card__comments .comment-input-wrapper input::placeholder {
  color: #bbb;
  font-size: 13px;
}
.moment-card__comments .comment-input-wrapper button {
  margin-left: 8px;
  padding: 6px 12px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
}
.moment-card__comments .comment-input-wrapper button:active {
  transform: scale(0.95);
  opacity: 0.8;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  .moment-card__comments {
    padding-left: 0vw;
    padding-right: 0vw;
    padding-bottom: 3.2vw;
  }
}
/* ==========================================================================
   ▼▼▼ 【新增】动态卡片操作菜单样式 ▼▼▼
   ========================================================================== */
.moment-action-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1500;
}

.moment-action-menu {
  position: absolute;
  min-width: 100px;
  background-color: #333;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding: 6px;
  z-index: 1501;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.9);
  transform-origin: top right;
  animation: menu-pop-in 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.moment-action-menu .menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: white;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}
.moment-action-menu .menu-item:hover, .moment-action-menu .menu-item:active {
  background-color: rgba(255, 255, 255, 0.15);
}
.moment-action-menu .menu-item svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}
.moment-action-menu .menu-item.danger {
  color: #ff4d4f;
}
.moment-action-menu .menu-item.danger svg {
  stroke: #ff4d4f;
}
.moment-action-menu .menu-item.danger:hover, .moment-action-menu .menu-item.danger:active {
  background-color: rgba(255, 77, 79, 0.15);
}

@keyframes menu-pop-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* --- 朋友圈评论样式增强 --- */
.comment-item {
  cursor: pointer; /* 鼠标放上去显示可点击的手指 */
  padding: 2px 4px;
  margin: 1px 0;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.comment-item:hover {
  background-color: #f0f0f0; /* 鼠标悬停时有背景色，提示可以点击 */
}

.reply-indicator {
  color: #888;
  font-size: 0.9em;
  margin: 0 4px;
}

/* ... 放在文件最末尾 ... */
.image-reveal-container {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
}
.image-reveal-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.image-reveal-container .hidden-desc-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.image-reveal-container .hidden-desc-overlay p {
  color: rgb(4, 4, 4);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  margin: 0;
  word-break: break-all;
}
.image-reveal-container.show-desc .hidden-desc-overlay {
  opacity: 1;
  pointer-events: auto;
}
.image-reveal-container.show-desc img {
  transform: scale(1.05);
}

/* --- 评论长按菜单样式 --- */
.comment-item {
  -webkit-user-select: none; /* Safari / Chrome */
  -moz-user-select: none;
       user-select: none; /* 标准 */
  -webkit-touch-callout: none; /* 禁用系统默认菜单 */
}

.comment-action-card {
  background-color: #fff;
  border-radius: 12px;
  width: 200px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
}

.comment-menu-title {
  padding: 12px;
  font-size: 13px;
  color: #999;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.comment-menu-btn {
  padding: 14px;
  text-align: center;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.comment-menu-btn:last-child {
  border-bottom: none;
}
.comment-menu-btn:active {
  background-color: #f5f5f5;
}
.comment-menu-btn.danger {
  color: #ff4d4f;
}
.comment-menu-btn.danger svg {
  stroke: #ff4d4f;
}
.comment-menu-btn svg {
  width: 18px;
  height: 18px;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.forward-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.forward-modal-overlay.visible {
  display: flex;
  opacity: 1;
}
.forward-modal-overlay .forward-modal-card {
  width: 80%;
  max-width: 320px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.forward-modal-overlay .forward-modal-card h3 {
  margin: 0;
  padding: 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}
.forward-modal-overlay .forward-modal-card .friend-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.forward-modal-overlay .forward-modal-card .forward-friend-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid #f9f9f9;
}
.forward-modal-overlay .forward-modal-card .forward-friend-item:hover {
  background: #f5f5f5;
}
.forward-modal-overlay .forward-modal-card .forward-friend-item img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  margin-right: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}
.forward-modal-overlay .forward-modal-card .forward-friend-item span {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}
.forward-modal-overlay .forward-modal-card .modal-cancel-btn {
  width: 100%;
  padding: 14px;
  border: none;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  font-size: 15px;
  color: #666;
  cursor: pointer;
}
.forward-modal-overlay .forward-modal-card .modal-cancel-btn:active {
  background: #f0f0f0;
}

/* style/pages/_profile.scss */
#page-profile.profile-immersive-page {
  background-color: #fff;
  position: relative;
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.profile-scroll-container {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.profile-bg-wrapper {
  position: relative;
  width: 100%;
  height: 52vh;
  background-color: #f0f0f0;
  overflow: hidden;
}
.profile-bg-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1.05);
  filter: saturate(0.8);
}
.profile-bg-wrapper .profile-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgb(255, 255, 255) 100%);
  opacity: 0.3;
}
.profile-bg-wrapper .edit-bg-capsule {
  position: absolute;
  bottom: 90px;
  right: 24px;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 14px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  z-index: 5;
  transition: transform 0.2s;
}
.profile-bg-wrapper .edit-bg-capsule svg {
  width: 12px;
  height: 12px;
  opacity: 0.9;
}
.profile-bg-wrapper .edit-bg-capsule:active {
  transform: scale(0.95);
}

.profile-sheet {
  position: relative;
  margin-top: -60px;
  background: #fff;
  border-radius: 40px 40px 0 0;
  padding: 0 24px;
  min-height: 60vh;
  z-index: 10;
  box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.08);
}

.design-line-deco {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #e5e5ea, transparent);
  z-index: 0;
}

.sheet-handle-bar {
  position: relative;
  width: 40px;
  height: 4px;
  background-color: #e5e5ea;
  border-radius: 4px;
  margin: 12px auto 0 auto;
  z-index: 1;
}

.sheet-header {
  display: flex;
  justify-content: center;
  position: relative;
  top: -55px;
  margin-bottom: -35px;
  z-index: 2;
}

.avatar-hero-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
}
.avatar-hero-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}
.avatar-hero-wrapper .avatar-edit-overlay {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.avatar-hero-wrapper .avatar-edit-overlay svg {
  width: 24px;
  height: 24px;
}
.avatar-hero-wrapper:hover .avatar-edit-overlay {
  opacity: 1;
}

.info-cluster {
  text-align: center;
  padding-top: 10px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.info-cluster .name-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}
.info-cluster .name-row h1 {
  position: relative;
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.5px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.info-cluster .name-row h1:focus {
  outline: none;
  background: #f5f5f5;
}
.info-cluster .name-row .verified-badge-complex {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-badge 3s infinite ease-in-out;
}
.info-cluster .name-row .verified-badge-complex svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 114, 255, 0.3));
}
.info-cluster .profile-tags {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.info-cluster .profile-tags .tag-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: transform 0.2s;
  cursor: text;
}
.info-cluster .profile-tags .tag-pill:hover {
  transform: translateY(-1px);
}
.info-cluster .profile-tags .tag-pill span {
  outline: none;
  min-width: 20px;
  display: inline-block;
}
.info-cluster .profile-tags .tag-pill.style-solid-black {
  background-color: #111;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.info-cluster .profile-tags .tag-pill.style-solid-black svg {
  color: #fff;
  width: 14px;
  height: 14px;
}
.info-cluster .profile-tags .tag-pill.style-outline {
  background-color: transparent;
  color: #333;
  border: 1px solid #e0e0e0;
}
.info-cluster .profile-tags .tag-pill.style-outline:focus-within {
  border-color: #999;
  background: #fafafa;
}
.info-cluster .signature-line p {
  margin: 0;
  font-size: 14px;
  color: #888;
  font-family: serif;
  font-style: italic;
  padding: 2px 8px;
  border-radius: 4px;
}
.info-cluster .signature-line p:focus {
  outline: none;
  background: #f9f9f9;
}

.modern-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 12px;
  padding: 0 12px;
}

.stat-box {
  background: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 18px;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.stat-box .stat-val {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}
.stat-box .stat-key {
  margin-top: 4px;
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.stat-box.premium-card {
  border: none;
  background: #111;
  position: relative;
  overflow: hidden;
}
.stat-box.premium-card .stat-val {
  color: #fff;
}
.stat-box.premium-card .premium-badge {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #111;
  background: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}
.stat-box.premium-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  border-radius: 0 0 0 100%;
}

.profile-feature-card {
  margin-top: 25px;
  background-color: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 22px;
  padding: 10px 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.settings-item.with-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-item.with-icon .settings-icon-wrapper {
  background-color: #f0f2f5;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-item.with-icon .settings-icon-wrapper svg {
  width: 18px;
  height: 18px;
  color: #8e8e93;
}

@keyframes pulse-badge {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
#page-chat-beautify {
  background-color: #f5f5f7;
  /* _chat-beautify.scss */
}
#page-chat-beautify .app-header {
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
#page-chat-beautify .app-header .app-title {
  font-weight: 600;
  color: #1c1c1e;
  font-size: 17px;
}
#page-chat-beautify .app-header #save-theme-scheme-btn {
  background: #000;
  color: #fff;
  border-radius: 16px;
  border: none;
  transition: transform 0.1s;
}
#page-chat-beautify .app-header #save-theme-scheme-btn:active {
  transform: scale(0.95);
}
#page-chat-beautify .app-content.scrolling-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  gap: 20px;
}
#page-chat-beautify .app-content.scrolling-content > * {
  flex-shrink: 0;
}
#page-chat-beautify .settings-card, #page-chat-beautify .preview-section {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.02);
  margin-bottom: 0;
  overflow: hidden;
}
#page-chat-beautify .preview-tabs {
  display: flex;
  padding: 6px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  gap: 6px;
}
#page-chat-beautify .preview-tabs .preview-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #8e8e93;
  cursor: pointer;
  transition: all 0.2s ease;
}
#page-chat-beautify .preview-tabs .preview-tab.active {
  background-color: #f2f2f7;
  color: #000;
  font-weight: 600;
}
#page-chat-beautify .preview-viewport {
  height: 480px;
  background-color: #f2f2f7;
  position: relative;
  overflow: hidden;
  border-top: none;
}
#page-chat-beautify #preview-chat-scene .mock-header {
  height: 50px;
  background: transparent;
  padding: 0;
  justify-content: space-between;
  position: relative;
}
#page-chat-beautify #preview-chat-scene .mock-header .mock-title-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  color: #1c1c1e;
}
#page-chat-beautify #preview-chat-scene .mock-header .mock-back-btn, #page-chat-beautify #preview-chat-scene .mock-header .mock-icon-wrapper {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
}
#page-chat-beautify #preview-chat-scene .mock-header .mock-back-btn {
  left: 10px;
}
#page-chat-beautify #preview-chat-scene .mock-header .mock-icon-wrapper {
  right: 10px;
}
#page-chat-beautify #preview-chat-scene .mock-header svg {
  width: 24px;
  height: 24px;
  stroke: #333;
}
#page-chat-beautify #preview-chat-scene .mock-content.chat-main-content {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}
#page-chat-beautify #preview-chat-scene .mock-search-bar {
  margin: 0 16px 16px;
  background: #fff;
  padding: 12px 15px 12px 40px;
  border-radius: 10px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(138, 109, 255, 0.08);
}
#page-chat-beautify #preview-chat-scene .mock-search-bar svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: #b2b2b7;
  stroke-width: 2;
}
#page-chat-beautify #preview-chat-scene .mock-search-bar span {
  color: #b2b2b7;
  font-size: 15px;
}
#page-chat-beautify #preview-chat-scene .mock-chat-tabs {
  display: flex;
  gap: 24px;
  padding: 0 16px;
  margin-bottom: 24px;
}
#page-chat-beautify #preview-chat-scene .mock-chat-tabs .tab {
  font-size: 16px;
  font-weight: 600;
  color: #8e8e93;
  position: relative;
  padding-bottom: 8px;
}
#page-chat-beautify #preview-chat-scene .mock-chat-tabs .tab.active {
  color: #8a6dff;
}
#page-chat-beautify #preview-chat-scene .mock-chat-tabs .tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #8a6dff;
}
#page-chat-beautify #preview-chat-scene .mock-conversation-item {
  height: 70px;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin: 0 16px;
}
#page-chat-beautify #preview-chat-scene .mock-conversation-item:last-child {
  border-bottom: none;
}
#page-chat-beautify #preview-chat-scene .mock-bottom-nav {
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 16px;
  height: 64px;
  border-radius: 100px;
  background: white;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#page-chat-beautify #preview-chat-scene .mock-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #8e8e93;
}
#page-chat-beautify #preview-chat-scene .mock-bottom-nav .nav-item svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
  fill: none;
  stroke: #8e8e93;
}
#page-chat-beautify #preview-chat-scene .mock-bottom-nav .nav-item.active {
  color: #8a6dff;
}
#page-chat-beautify #preview-chat-scene .mock-bottom-nav .nav-item.active svg {
  stroke: #8a6dff;
  fill: rgba(138, 109, 255, 0.1);
}
#page-chat-beautify .mock-bottom-nav {
  height: 60px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 15px;
  flex-shrink: 0;
}
#page-chat-beautify .mock-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: #8e8e93;
}
#page-chat-beautify .mock-bottom-nav .nav-item svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
  fill: none;
  stroke: #8e8e93;
}
#page-chat-beautify .mock-bottom-nav .nav-item.active {
  color: #8a6dff;
}
#page-chat-beautify .mock-bottom-nav .nav-item.active svg {
  stroke: #8a6dff;
}
#page-chat-beautify .preview-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  background-color: #fff;
}
#page-chat-beautify .preview-scene.active {
  display: flex;
}
#page-chat-beautify .mock-header {
  height: 50px; /* 稍微缩小一点高度适应预览 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
  z-index: 10;
  flex-shrink: 0;
}
#page-chat-beautify .mock-header .mock-header-left {
  display: flex;
  align-items: center;
  gap: 4px;
}
#page-chat-beautify .mock-header .mock-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
#page-chat-beautify .mock-header .mock-header-right svg {
  width: 22px;
  height: 22px;
  stroke: #1c1c1e;
}
#page-chat-beautify .mock-header .mock-back-btn svg {
  width: 24px;
  height: 24px;
  stroke: #1c1c1e;
}
#page-chat-beautify .mock-header .mock-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
#page-chat-beautify .mock-header .mock-avatar-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
#page-chat-beautify .mock-header .mock-title-text {
  font-size: 15px;
  font-weight: 600;
  color: #1c1c1e;
}
#page-chat-beautify .mock-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#page-chat-beautify .mock-content::-webkit-scrollbar {
  display: none;
}
#page-chat-beautify .message-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 80%;
}
#page-chat-beautify .message-wrapper.received {
  align-self: flex-start;
}
#page-chat-beautify .message-wrapper.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}
#page-chat-beautify .message-wrapper .chat-avatar-small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}
#page-chat-beautify .message-wrapper .message-bubble {
  padding: 0;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
#page-chat-beautify .message-wrapper .message-bubble p {
  margin: 0;
  padding: 8px 12px;
  font-size: 15px;
  line-height: 1.5;
}
#page-chat-beautify .message-wrapper.received .message-bubble {
  background-color: #fff;
  color: #000;
}
#page-chat-beautify .message-wrapper.sent .message-bubble {
  background-color: #8a6dff;
  color: #fff;
}
#page-chat-beautify .message-system-event {
  align-self: center;
  background-color: #e5e5ea;
  color: #8e8e93;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  margin: 5px 0;
}
#page-chat-beautify .mock-footer {
  background-color: #fff;
  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
}
#page-chat-beautify .mock-footer .mock-input-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
#page-chat-beautify .mock-footer .mock-icon-btn {
  background: none;
  border: none;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-chat-beautify .mock-footer .mock-icon-btn svg {
  width: 24px;
  height: 24px;
  color: #1c1c1e;
}
#page-chat-beautify .mock-footer .mock-input-wrapper {
  flex: 1;
  height: 36px;
  background: #f2f2f7;
  border-radius: 18px;
  display: flex;
  align-items: center;
  padding: 0 4px 0 12px;
}
#page-chat-beautify .mock-footer .mock-input-wrapper input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
}
#page-chat-beautify .mock-footer .mock-input-wrapper input::-moz-placeholder {
  color: #999;
}
#page-chat-beautify .mock-footer .mock-input-wrapper input::placeholder {
  color: #999;
}
#page-chat-beautify .mock-footer .mock-input-wrapper .mock-send-screen-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}
#page-chat-beautify .mock-footer .mock-input-wrapper .mock-send-screen-btn svg {
  width: 14px;
  height: 14px;
  color: #000;
}
#page-chat-beautify .mock-footer .mock-send-btn-main {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #000;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#page-chat-beautify .mock-footer .mock-send-btn-main svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
}
#page-chat-beautify .mock-footer.offline-footer {
  background: transparent;
  border: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-left: 15px;
  padding-right: 15px;
}
#page-chat-beautify .mock-footer.offline-footer .mock-stop-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}
#page-chat-beautify .mock-footer.offline-footer .mock-stop-btn svg {
  width: 20px;
  height: 20px;
}
#page-chat-beautify .mock-footer.offline-footer .mock-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}
#page-chat-beautify .mock-footer.offline-footer .mock-send-btn svg {
  width: 20px;
  height: 20px;
}
#page-chat-beautify .mock-footer.offline-footer .mock-input-pill {
  flex: 1;
  height: 44px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #999;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
#page-chat-beautify .mock-header.offline-header {
  background-color: transparent !important;
  border: none;
  justify-content: center;
  position: relative;
}
#page-chat-beautify .mock-header.offline-header .mock-back-btn {
  position: absolute;
  left: 12px;
}
#page-chat-beautify .mock-header.offline-header .mock-header-right {
  position: absolute;
  right: 12px;
}
#page-chat-beautify .mock-header.offline-header .mock-offline-title {
  font-size: 15px;
  font-weight: 600;
}
#page-chat-beautify .mock-content.offline-content {
  background-color: #f4f4f6;
  padding-bottom: 70px;
}
#page-chat-beautify .offline-message-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
#page-chat-beautify .offline-message-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
#page-chat-beautify .offline-message-card .card-header .sender-info {
  display: flex;
  align-items: center;
}
#page-chat-beautify .offline-message-card .card-header .sender-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
#page-chat-beautify .offline-message-card .card-header .sender-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
#page-chat-beautify .offline-message-card .card-body {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}
#page-chat-beautify .offline-message-card .card-body .italic {
  font-style: italic;
  color: #666;
}
#page-chat-beautify .offline-message-card.is-character {
  border-left-style: dashed;
  border-left-color: #d1d1d6;
}
#page-chat-beautify .offline-message-card.is-character .card-footer {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
#page-chat-beautify .offline-message-card.is-character .card-footer .card-watermark {
  font-size: 11px;
  color: #AEAEB2;
  font-style: italic;
}
#page-chat-beautify .mock-footer.offline-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
#page-chat-beautify .mock-footer.offline-footer .mock-stop-btn, #page-chat-beautify .mock-footer.offline-footer .mock-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-chat-beautify .mock-footer.offline-footer .mock-stop-btn svg, #page-chat-beautify .mock-footer.offline-footer .mock-send-btn svg {
  width: 18px;
  height: 18px;
  stroke: #333;
}
#page-chat-beautify .mock-footer.offline-footer .mock-input-pill {
  flex: 1;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
#page-chat-beautify .beautify-section-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f5f5f7;
}
#page-chat-beautify .beautify-section-header .header-title {
  font-size: 15px;
  font-weight: 700;
  color: #1c1c1e;
}
#page-chat-beautify .beautify-settings-tabs {
  display: flex;
  padding: 6px;
  background-color: #f7f7f9;
  border-bottom: 1px solid #f0f0f0;
  gap: 6px;
}
#page-chat-beautify .beautify-settings-tabs .settings-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #8e8e93;
  cursor: pointer;
  transition: all 0.2s ease;
}
#page-chat-beautify .beautify-settings-tabs .settings-tab.active {
  background-color: #fff;
  color: #000;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
#page-chat-beautify .beautify-settings-panel {
  display: none;
}
#page-chat-beautify .beautify-settings-panel.active {
  display: block;
}
#page-chat-beautify .custom-icon-row {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
#page-chat-beautify .row-info {
  display: flex;
  gap: 12px;
  width: 140px;
  flex-shrink: 0;
}
#page-chat-beautify .row-info .label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  flex: 1;
}
#page-chat-beautify .row-info .icon-preview-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #f7f7f9;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-chat-beautify .row-info .icon-preview-box img, #page-chat-beautify .row-info .icon-preview-box svg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#page-chat-beautify .row-controls {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#page-chat-beautify .control-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#page-chat-beautify .btn-mini {
  padding: 6px 0;
  font-size: 12px;
  border-radius: 8px;
  background-color: #f2f2f7;
  border: none;
  color: #1c1c1e;
  font-weight: 500;
}
#page-chat-beautify .btn-mini:hover {
  background-color: #e5e5ea;
}
#page-chat-beautify .btn-mini.upload-trigger {
  background-color: #1c1c1e;
  color: #fff;
}
#page-chat-beautify .slider-group {
  display: flex;
  align-items: center;
  background-color: #fafafa;
  padding: 4px 10px;
  border-radius: 8px;
}
#page-chat-beautify .slider-group span {
  font-size: 11px;
  color: #8e8e93;
  margin-right: 8px;
}
#page-chat-beautify .slider-group input[type=range] {
  flex-grow: 1;
  height: 4px;
  background: #e5e5ea;
  border-radius: 2px;
}
#page-chat-beautify .slider-group input[type=range]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  margin-top: -6px;
}
#page-chat-beautify .bar-settings-group {
  padding: 20px;
}
#page-chat-beautify .bar-settings-group .group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
#page-chat-beautify .bar-settings-group .group-header .group-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
#page-chat-beautify .bar-settings-group .group-header .deco-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff3b30;
}
#page-chat-beautify .bar-settings-group .group-header .deco-dot.blue {
  background-color: #007aff;
}
#page-chat-beautify .bar-settings-group .control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
#page-chat-beautify .bar-settings-group .btn-soft {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  color: #666;
  transition: all 0.2s;
}
#page-chat-beautify .bar-settings-group .btn-soft svg {
  width: 20px;
  height: 20px;
  color: #999;
}
#page-chat-beautify .bar-settings-group .btn-soft span {
  font-size: 12px;
}
#page-chat-beautify .bar-settings-group .btn-soft:hover {
  background-color: #f9f9f9;
  border-color: #e5e5ea;
  color: #000;
}
#page-chat-beautify .bar-settings-group .btn-soft:hover svg {
  color: #000;
}
#page-chat-beautify .bar-settings-group .css-input-wrapper {
  width: 100%;
}
#page-chat-beautify .bar-settings-group .css-override-input {
  width: 100%;
  height: 80px;
  padding: 10px;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  background-color: #fafafa;
  font-family: "Menlo", monospace;
  font-size: 12px;
  color: #333;
  resize: none;
  box-sizing: border-box;
}
#page-chat-beautify .bar-settings-group .css-override-input:focus {
  background-color: #fff;
  border-color: #007aff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}
#page-chat-beautify .bar-settings-group .css-override-input::-moz-placeholder {
  color: #c7c7cc;
}
#page-chat-beautify .bar-settings-group .css-override-input::placeholder {
  color: #c7c7cc;
}
#page-chat-beautify .divider {
  height: 1px;
  background-color: #f5f5f7;
  margin: 0 20px;
}
#page-chat-beautify .scheme-list {
  padding: 0;
}
#page-chat-beautify .scheme-list .scheme-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f5f5f7;
  background: #fff;
  transition: background-color 0.2s;
}
#page-chat-beautify .scheme-list .scheme-item:last-child {
  border-bottom: none;
}
#page-chat-beautify .scheme-list .scheme-item:hover {
  background-color: #fafafa;
}
#page-chat-beautify .scheme-list .scheme-item.active .name {
  color: #000000;
  font-weight: 600;
}
#page-chat-beautify .scheme-list .scheme-item.active .status {
  font-size: 11px;
  color: #030303;
  background: rgba(4, 4, 4, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
}
#page-chat-beautify .scheme-list .scheme-item .name {
  font-size: 14px;
  color: #333;
}
#page-chat-beautify .scheme-list .scheme-item .btn-mini {
  background: transparent;
  border: 1px solid #e5e5ea;
  padding: 4px 12px;
}
#page-chat-beautify .scheme-list .scheme-item .btn-mini:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}
#page-chat-beautify .floating-save-btn {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #000;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#page-chat-beautify .floating-save-btn svg {
  color: #fff;
}
#page-chat-beautify .floating-save-btn:active {
  transform: translateX(-50%) scale(0.95);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* === 新版：极简主题应用列表 === */
.theme-application-container {
  display: flex;
  flex-direction: column;
}

.theme-application-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f5f5f7;
  /* 统一的应用按钮 */
}
.theme-application-row:last-child {
  border-bottom: none;
}
.theme-application-row .row-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.theme-application-row .row-label {
  font-size: 15px;
  font-weight: 600;
  color: #1c1c1e;
}
.theme-application-row .row-desc {
  font-size: 12px;
  color: #8e8e93;
}
.theme-application-row .btn-clean-apply {
  background-color: #f2f2f7;
  color: #000;
  border: none;
  border-radius: 20px; /* 胶囊形 */
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.theme-application-row .btn-clean-apply:hover {
  background-color: #e5e5ea;
}
.theme-application-row .btn-clean-apply:active {
  transform: scale(0.95);
}

/* === 新版：配置弹窗样式 === */
.theme-config-card {
  width: 90%;
  max-width: 360px;
  background: #fff;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 85vh; /* 防止太高 */
  /* 方案选择框 (伪装成下拉) */
  /* 角色列表 (内置在弹窗里) */
}
.theme-config-card .modal-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}
.theme-config-card .modal-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.theme-config-card .modal-content {
  padding: 20px;
  overflow-y: auto;
  background: #f9f9f9;
}
.theme-config-card .config-section {
  margin-bottom: 20px;
}
.theme-config-card .config-section:last-child {
  margin-bottom: 0;
}
.theme-config-card .section-label {
  display: block;
  font-size: 13px;
  color: #8e8e93;
  margin-bottom: 8px;
  margin-left: 4px;
}
.theme-config-card .select-box-trigger {
  background: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #e5e5e5;
  cursor: pointer;
}
.theme-config-card .select-box-trigger span {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}
.theme-config-card .select-box-trigger svg {
  width: 16px;
  height: 16px;
  stroke: #999;
  fill: none;
  stroke-width: 2;
}
.theme-config-card .char-select-list {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  max-height: 200px;
  overflow-y: auto;
}
.theme-config-card .char-select-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f7;
  cursor: pointer;
  /* 复选框样式 */
  /* ▼▼▼【核心替换部分】▼▼▼ */
  /* 应用标签的容器 */
  /* 单个标签的样式 */
  /* ▲▲▲【核心替换部分】▲▲▲ */
}
.theme-config-card .char-select-item:last-child {
  border-bottom: none;
}
.theme-config-card .char-select-item input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  accent-color: #000;
}
.theme-config-card .char-select-item .char-name {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}
.theme-config-card .char-select-item .applied-tags-container {
  margin-left: auto; /* 关键：将标签组推到最右边 */
  display: flex;
  align-items: center;
  gap: 6px; /* 标签之间的间距 */
}
.theme-config-card .char-select-item .applied-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.theme-config-card .char-select-item .applied-tag.tag-detail {
  background-color: #eef2ff;
  color: #4338ca;
}
.theme-config-card .char-select-item .applied-tag.tag-bubble {
  background-color: #f0fdf4;
  color: #166534;
}
.theme-config-card .char-select-item .applied-tag.tag-offline {
  background-color: #fffbeb;
  color: #b45309;
}
.theme-config-card .modal-footer {
  padding: 16px 20px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 12px;
}
.theme-config-card .modal-footer .btn {
  padding: 12px;
  border-radius: 12px;
  flex: 1;
}

#page-profile .profile-feature-card {
  height: 40px;
  width: 90%;
  max-width: 320px;
  margin: 20px auto;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.1s;
}
#page-profile .profile-feature-card:active {
  transform: scale(0.98);
}
#page-profile .profile-feature-card .settings-item {
  width: 100%;
  height: 100%;
  padding: 0 4px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
#page-profile .profile-feature-card .settings-item span {
  font-size: 16px;
  font-weight: 600;
  color: #1c1c1e;
}
#page-profile .profile-feature-card .settings-item .settings-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-profile .profile-feature-card .settings-item .settings-icon-wrapper svg {
  width: 22px;
  height: 22px;
  color: #0c0c0c;
}
#page-profile .profile-feature-card .settings-item .settings-arrow {
  display: none;
}

#page-chat-beautify .beautify-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#page-chat-beautify .beautify-section-header .scheme-header-actions {
  display: flex;
  gap: 8px;
}
#page-chat-beautify .beautify-section-header .scheme-header-actions .btn-mini {
  background-color: #f2f2f7;
  border: none;
  color: #1c1c1e;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}
#page-chat-beautify .beautify-section-header .scheme-header-actions .btn-mini:hover {
  background-color: #e5e5ea;
}
#page-chat-beautify .beautify-section-header .scheme-header-actions .btn-mini#export-theme-schemes-btn {
  background-color: #000;
  color: #fff;
}
#page-chat-beautify .beautify-section-header .scheme-header-actions .btn-mini#export-theme-schemes-btn:hover {
  background-color: #333;
}
#page-chat-beautify .scheme-list .scheme-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
#page-chat-beautify .scheme-list .scheme-item .scheme-select-checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: #000;
  cursor: pointer;
}
#page-chat-beautify .scheme-list .scheme-item > div:first-of-type {
  flex-grow: 1;
}

.diary-list-page,
.diary-detail-page {
  background-color: transparent;
  background-image: var(--diary-list-wallpaper);
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.diary-list-page.active,
.diary-detail-page.active {
  transform: translateX(0);
}
.diary-list-page .diary-detail-page,
.diary-detail-page .diary-detail-page {
  background-image: var(--diary-detail-wallpaper) !important;
}
.diary-list-page .app-content,
.diary-detail-page .app-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  background-color: transparent !important;
  scrollbar-width: none;
}
.diary-list-page .app-content::-webkit-scrollbar,
.diary-detail-page .app-content::-webkit-scrollbar {
  display: none;
}

.diary-header {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-top: 50px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: none;
  flex-shrink: 0;
}
.diary-header .back-btn {
  position: absolute;
  left: 20px;
  top: 52px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #1D1D1F;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}
.diary-header .back-btn:active {
  background-color: #f0f0f0;
  transform: scale(0.95);
}
.diary-header h1 {
  font-family: -apple-system, "Songti SC", "Noto Serif SC", serif;
  font-size: 18px;
  font-weight: 600;
  color: #1D1D1F;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 2px;
}
.diary-header .decoration-line {
  margin-top: 10px;
  width: 30px;
  height: 2px;
  background-color: #1D1D1F;
  position: relative;
  border-radius: 2px;
}
.diary-header .decoration-line::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #D3B8AE;
}
.diary-header .decoration-line::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid #1D1D1F;
  background-color: transparent;
}
.diary-header .header-actions-right {
  position: absolute;
  right: 20px;
  top: 52px;
  display: flex;
  gap: 8px;
}
.diary-header .header-action-btn {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #1D1D1F;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}
.diary-header .header-action-btn svg {
  width: 16px;
  height: 16px;
}
.diary-header .header-action-btn:active {
  background-color: #f0f0f0;
  transform: scale(0.95);
}

.diary-timeline-container {
  padding: 20px 24px 120px 24px;
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}
.diary-timeline-container::before {
  display: none;
}

.diary-entry-card {
  display: flex;
  margin-bottom: 40px;
  position: relative;
  align-items: flex-start;
}
.diary-entry-card .entry-date-stamp {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin-right: 16px;
  margin-top: 4px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05), 5px 5px 10px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.diary-entry-card .entry-date-stamp .day {
  font-family: "Didot", "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  color: #1D1D1F;
  line-height: 1;
}
.diary-entry-card .entry-date-stamp .month {
  font-size: 9px;
  color: #b08f7d;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.diary-entry-card .entry-date-stamp::before {
  content: "";
  position: absolute;
  right: -16px;
  top: 50%;
  width: 16px;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.05);
}
.diary-entry-card .entry-content {
  background-color: #FFFFFF;
  border-radius: 16px;
  border-top-left-radius: 2px;
  padding: 16px 16px 5px 16px;
  min-height: 90px;
  position: relative;
  flex-grow: 1;
  position: relative;
  flex-grow: 1;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
  border: 1px solid #fff;
  transition: transform 0.2s ease;
}
.diary-entry-card .entry-content:active {
  transform: scale(0.99);
}
.diary-entry-card .entry-content .entry-snippet {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin: 0;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.diary-entry-card .entry-content .entry-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: none;
}
.diary-entry-card .entry-content .entry-meta .entry-thumbnail {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin: 0;
}
.diary-entry-card .entry-content .entry-meta .entry-location {
  display: none;
}
.diary-entry-card .entry-content .entry-actions {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 30px;
  padding-right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.diary-entry-card .entry-content .entry-actions .action-btn {
  background: transparent;
  border: none;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  color: #ccc;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diary-entry-card .entry-content .entry-actions .action-btn svg {
  width: 15px;
  height: 15px;
}
.diary-entry-card .entry-content .entry-actions .action-btn:active {
  background-color: #f0f0f0;
  color: #555;
}
.diary-entry-card .entry-content .entry-actions .action-btn.delete-btn:active {
  color: #D93026;
  background-color: rgba(217, 48, 38, 0.05);
}

.diary-detail-page .app-content {
  padding: 0 0 60px 0;
  background-color: transparent;
}
.diary-detail-page .detail-top-spacer {
  height: 20px;
}
.diary-detail-page .diary-article {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 28px;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.diary-detail-page .article-meta {
  text-align: center;
  margin-bottom: 40px;
}
.diary-detail-page .article-meta .article-date {
  font-family: "Times New Roman", serif;
  font-size: 32px;
  font-weight: 400;
  color: #1D1D1F;
  margin: 0 0 10px 0;
}
.diary-detail-page .article-meta .article-weather {
  display: inline-block;
  font-size: 12px;
  padding: 4px 16px;
  color: #555555;
  border: 1px solid #eee;
  border-radius: 20px;
  letter-spacing: 1px;
}
.diary-detail-page .separator-line {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
}
.diary-detail-page .separator-line::before, .diary-detail-page .separator-line::after {
  content: "";
  width: 4px;
  height: 4px;
  background-color: #ddd;
  border-radius: 50%;
}
.diary-detail-page .separator-line::before {
  background-color: #D3B8AE;
}
.diary-detail-page .article-body p {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  text-align: justify;
  margin-bottom: 24px;
}
.diary-detail-page .article-body p:first-of-type::first-letter {
  font-family: "Times New Roman", serif;
  font-size: 40px;
  float: left;
  line-height: 0.8;
  margin-right: 8px;
  margin-top: 4px;
  color: #1D1D1F;
}
.diary-detail-page .article-body .article-image {
  width: 100%;
  border-radius: 16px;
  margin: 20px 0 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  display: block;
}

@media (max-width: 380px) {
  .diary-header {
    padding-top: 40px;
  }
  .diary-header .back-btn {
    top: 42px;
  }
  .diary-entry-card .entry-content {
    padding: 16px;
  }
}
.floating-dial-btn {
  position: absolute;
  bottom: 30px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #1D1D1F;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 300;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.floating-dial-btn::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.floating-dial-btn::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-radius: 50%;
}
.floating-dial-btn svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  stroke-width: 1.5;
  transition: transform 0.4s ease;
}
.floating-dial-btn:active {
  transform: scale(0.9) rotate(20deg);
}

.dial-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(249, 248, 245, 0.9);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  z-index: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.dial-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.dial-overlay .dial-year-control {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 35px;
  opacity: 0;
  animation: fadeIn-up 0.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.dial-overlay .dial-year-control .year-text {
  font-family: "Georgia", serif;
  font-size: 32px;
  font-weight: 400;
  color: #555;
  letter-spacing: 1.5px;
}
.dial-overlay .dial-year-control .year-btn {
  background: transparent;
  border: none;
  color: #CCC;
  font-size: 22px;
  cursor: pointer;
  transition: color 0.3s;
}
.dial-overlay .dial-year-control .year-btn:hover {
  color: #777;
}
.dial-overlay .rotary-dial-container {
  position: relative;
  width: 330px;
  height: 330px;
  touch-action: none;
  opacity: 0;
  transform: scale(0.9);
  animation: fadeIn-scaleUp 0.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.dial-overlay .rotary-dial-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #E85D54;
  z-index: 100;
}
.dial-overlay .dial-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: none;
  transition: box-shadow 0.3s ease;
}
.dial-overlay .dial-ring.ring-outer {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 15px 50px rgba(100, 100, 100, 0.1);
  z-index: 1;
}
.dial-overlay .dial-ring.ring-inner {
  width: 60%;
  height: 60%;
  background-color: #F5F5F7;
  box-shadow: inset 0px 3px 15px rgba(0, 0, 0, 0.05);
  z-index: 2;
}
.dial-overlay .dial-ring.active.ring-outer {
  box-shadow: 0 20px 60px rgba(100, 100, 100, 0.15);
}
.dial-overlay .dial-ring.active.ring-inner {
  box-shadow: inset 0px 4px 20px rgba(0, 0, 0, 0.08);
}
.dial-overlay .dial-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -16px;
  margin-left: -16px;
  text-align: center;
  font-size: 14px;
  color: #BBB;
  font-family: -apple-system, "SF Pro Text", sans-serif;
  font-weight: 400;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 0.3s, font-weight 0.3s;
}
.dial-overlay .dial-item.active {
  color: #333;
  font-weight: 600;
}
.dial-overlay .ring-outer .dial-item.active {
  color: #E85D54;
  font-size: 16px;
}
.dial-overlay .dial-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background-color: #1C1C1E;
  color: #FFFFFF;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 20;
  transition: transform 0.1s ease;
}
.dial-overlay .dial-center:active {
  transform: translate(-50%, -50%) scale(0.95);
}
.dial-overlay .dial-center .dial-center-label {
  font-size: 9px;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dial-overlay .dial-center .dial-center-value {
  font-family: "Georgia", serif;
  font-size: 16px;
}
.dial-overlay .dial-confirm-btn {
  margin-top: 45px;
  padding: 12px 50px;
  background-color: #1c1c1e;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  opacity: 0;
  animation: fadeIn-up 0.6s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transition: all 0.2s;
}
.dial-overlay .dial-confirm-btn:active {
  transform: scale(0.97);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.dial-overlay .close-dial-btn {
  position: absolute;
  bottom: 30px;
  font-size: 14px;
  color: #AAA;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  animation: fadeIn-up 0.6s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeIn-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn-scaleUp {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.header-action-btn.writing svg {
  animation: diary-writing-spin 1.2s linear infinite;
}

@keyframes diary-writing-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.empty-diary-prompt {
  text-align: center;
  margin-top: 50px;
  color: #999;
  font-size: 14px;
  line-height: 1.6;
}

#diary-multiselect-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 12px 20px 30px;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.08);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 350;
  display: flex;
  justify-content: space-around;
  align-items: center;
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
#diary-multiselect-footer .footer-action {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #555;
}
#diary-multiselect-footer .footer-action svg {
  width: 24px;
  height: 24px;
}
#diary-multiselect-footer .delete-btn {
  color: #D93026;
}

.diary-list-page.multiselect-active #diary-multiselect-footer {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#diary-settings-modal .diary-settings-header::before {
  top: 2px;
}

.diary-list-page::before,
.diary-detail-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

.diary-list-page::before {
  background-image: var(--diary-list-wallpaper, none);
}

.diary-detail-page::before {
  background-image: var(--diary-detail-wallpaper, none);
}

#diary-settings-modal {
  display: flex;
  align-items: flex-end;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#diary-settings-modal.visible {
  opacity: 1;
  pointer-events: auto;
}
#diary-settings-modal.visible .modal-card.diary-settings-card {
  transform: translateY(0);
}
#diary-settings-modal .modal-card.diary-settings-card {
  width: 100%;
  max-width: 100%;
  border-radius: 28px 28px 0 0;
  background-color: #f7f7f7;
  padding: 12px 0 30px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
  border: none;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
#diary-settings-modal .diary-settings-header {
  padding: 4px 20px 16px;
  text-align: center;
  position: relative;
}
#diary-settings-modal .diary-settings-header::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background-color: #d1d1d6;
  border-radius: 2px;
}
#diary-settings-modal .diary-settings-header .settings-title {
  font-size: 17px;
  font-weight: 600;
  color: #1D1D1F;
  margin: 20px 0 0;
}
#diary-settings-modal .diary-settings-header .settings-close-btn {
  position: absolute;
  top: 20px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e5e5ea;
  border: none;
  color: #8e8e93;
  font-size: 22px;
  line-height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#diary-settings-modal .diary-settings-content {
  padding: 0 20px;
  margin-top: 16px;
}
#diary-settings-modal .settings-group {
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
#diary-settings-modal .setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}
#diary-settings-modal .setting-item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
#diary-settings-modal .setting-item:active {
  background-color: #f0f0f0;
}
#diary-settings-modal .setting-item .label {
  font-size: 16px;
  font-weight: 400;
  color: #1D1D1F;
}
#diary-settings-modal .setting-item .value-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8e8e93;
  font-size: 16px;
}
#diary-settings-modal .setting-item .value-wrapper .arrow {
  font-size: 18px;
  color: #c7c7cc;
}
#diary-settings-modal .setting-item.danger .label {
  color: #D93026;
  text-align: center;
  width: 100%;
}
#diary-settings-modal.wallpaper-source-card {
  padding: 0;
  width: calc(100% - 16px);
  max-width: 400px;
  margin: 0 8px 8px;
  border-radius: 14px;
  background-color: transparent;
  box-shadow: none;
}
#diary-settings-modal.wallpaper-source-card .action-sheet-group {
  background-color: rgba(249, 249, 249, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 14px;
  margin-bottom: 8px;
}
#diary-settings-modal.wallpaper-source-card .action-sheet-group .action-sheet-btn {
  width: 100%;
  padding: 18px 0;
  font-size: 17px;
  color: #007aff;
  border: none;
  background: transparent;
}
#diary-settings-modal.wallpaper-source-card .action-sheet-group .action-sheet-btn:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#diary-settings-modal.wallpaper-source-card .action-sheet-group .action-sheet-btn.cancel {
  font-weight: 600;
}

.diary-list-page.multiselect-active .diary-entry-card .entry-date-stamp {
  margin-left: 30px;
}

.multiselect-checkbox-container {
  position: absolute;
  left: 24px;
  top: 58px;
  width: 24px;
  height: 24px;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.multiselect-checkbox-container .multiselect-checkbox {
  display: none;
}
.multiselect-checkbox-container .checkbox-label {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
}
.multiselect-checkbox-container .checkbox-label svg {
  width: 100%;
  height: 100%;
  stroke: #fff;
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}
.multiselect-checkbox-container .multiselect-checkbox:checked + .checkbox-label {
  background-color: rgba(60, 60, 67, 0.6);
  border-color: transparent;
}
.multiselect-checkbox-container .multiselect-checkbox:checked + .checkbox-label svg {
  opacity: 1;
  transform: scale(0.7);
}

.diary-list-page.multiselect-active .multiselect-checkbox-container {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.diary-entry-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(180, 180, 180, 0.15);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.diary-entry-card.selected-for-delete::after {
  opacity: 1;
}

#diary-multiselect-footer {
  background: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
  border-top: none;
  padding: 0;
  height: 0;
}
#diary-multiselect-footer .footer-action {
  display: none;
}

.multiselect-action-btn {
  position: absolute;
  bottom: 40px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(60, 60, 67, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 400;
  opacity: 0;
  transform: translateY(30px) scale(0.8);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.multiselect-action-btn svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  stroke-width: 2;
}
.multiselect-action-btn.cancel-btn {
  left: 40px;
}
.multiselect-action-btn.delete-btn {
  right: 40px;
  background-color: rgba(255, 59, 48, 0.7);
}

.diary-list-page.multiselect-active .multiselect-action-btn {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}/*# sourceMappingURL=main.css.map */