.settings-page,
.config-page,
.beautify-page,
.contacts-page {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    bottom: 0;
    /*height: auto;*/
}

/* ========== 开始：粘贴这段全新的、修正后的代码块CSS ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 20px;
}

/* --- 聊天界面样式 --- */

/* ===== 高级简约聊天界面样式 - 开始 ===== */

.chat-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f7f8fa; /* 柔和的背景色 */
    z-index: 1005;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chat-page.show {
    transform: translateY(0);
}

/* 当 chat-page 拥有 simple-style 类时触发 */
.chat-page.simple-style .message-row {
    flex-direction: row !important; /* 强制 头像-内容 顺序 */
    justify-content: flex-start !important; /* 强制 左对齐 */
}

/* 并且，移除气泡的所有样式 */
.chat-page.simple-style .chat-bubble {
    background: transparent;
    color: #333;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}


/* 消息内容容器，用于包裹发送者和消息文本 */
/* 这是解决问题的关键！ */
.chat-page.simple-style .message-content {
    display: flex;
    flex-direction: column;
    gap: 4px; /* 发送者和消息之间的间距 */
    min-width: 0; /* 关键修复！允许flex子项收缩，防止被内部内容撑开 */
}


/* 简洁模式下，发送消息的气泡也不再有特殊颜色 */
.chat-page.simple-style .message-row.sent .chat-bubble {
    background: transparent;
    color: #333;
}


/* 发送者名称的样式 */
.message-sender-name {
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

/* 默认隐藏头像和名字，只在简洁模式下显示 */


.chat-page.simple-style .message-chat-avatar,
.chat-page.simple-style .message-sender-name {
    display: block; /* 在简洁模式下显示它们 */
}

/* 聊天中的小头像样式 */
.message-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
    background: #ccc;
}

.message-chat-avatar img,
.message-chat-avatar .initials {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
}

.message-chat-avatar, .message-sender-name {
    display: none;
}

/* ========== 结束：【最终修正版】简洁聊天样式 ========== */


.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 12px 12px; /* 调整内边距 */
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* 更柔和的阴影 */
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.chat-header .back-btn {
    margin-right: 8px;
}

.chat-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px; /* 稍微调整字体大小 */
    font-weight: 600;
    color: #000;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0; /* 按钮之间不留空隙 */
}

.edit-contact-btn, .chat-settings-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #0A84FF; /* 统一为品牌蓝色 */
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.chat-settings-btn {
    font-size: 20px; /* 让图标稍大一些 */
}

.edit-contact-btn:hover, .chat-settings-btn:hover {
    background-color: #f0f2f5;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background-color: rgba(247, 248, 250, 0.85); /* 新增此行 */
}


.chat-messages::-webkit-scrollbar {
    display: none;
}

/* ========== 开始：修复气泡对齐问题 ========== */

/* 1. 让消息内容容器成为flex容器 */
.message-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%; /* 占满可用宽度，这样align-items才能生效 */
}

/* 2. 气泡模式：发送消息右对齐 */
.message-row.sent .message-content {
    align-items: flex-end;
}

/* 3. 气泡模式：接收消息左对齐 */
.message-row.received .message-content {
    align-items: flex-start;
}

/* 4. 简洁模式：强制所有消息左对齐 */
.chat-page.simple-style .message-row.sent .message-content,
.chat-page.simple-style .message-row.received .message-content {
    align-items: flex-start !important;
}

/* ========== 结束：修复气泡对齐问题 ========== */

/* --- 1. 消息行的基础布局 --- */
.message-row {
    display: flex;
    max-width: 100%;
    /*gap: 12px;*/
    margin: 8px 0;
    align-items: flex-start;
}

/* --- 2. 气泡模式：接收消息（头像在左，左对齐）--- */
.message-row.received {
    flex-direction: row;
    justify-content: flex-start;
}

/* --- 3. 气泡模式：发送消息（头像在右，右对齐）--- */
.message-row.sent {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* --- 4. 简洁模式：所有消息都左对齐，头像都在左 --- */
.chat-page.simple-style .message-row.sent,
.chat-page.simple-style .message-row.received {
    flex-direction: row !important;
    justify-content: flex-start !important;
}


/* --- 5. 消息气泡样式 --- */
.chat-bubble {
    max-width: calc(100vw - 120px);
    width: fit-content;
    padding: 12px;
    border-radius: 20px;
    font-size: 16px;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    word-break: break-word;
    display: flex; /* 1. 声明为 Flex 容器 */
    flex-direction: column; /* 2. 设置主轴为垂直方向 */
    gap: 8px;
}

/* --- 6. 图片消息样式 --- */
.chat-bubble.image-only {
    padding: 0;
    background: transparent;
    box-shadow: none;
    max-width: 65%;
    border-radius: 12px;
    overflow: hidden;
}

.chat-bubble.image-only img {
    display: block;
    max-width: 240px;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* --- 7. 接收消息气泡颜色 --- */
.message-row.received .chat-bubble {
    background: #e9e9eb;
    color: #000;
    border-bottom-left-radius: 5px;
}

/* --- 8. 发送消息气泡颜色 --- */
.message-row.sent .chat-bubble {
    background: #0A84FF;
    color: white;
    border-bottom-right-radius: 5px;
}

/* --- 9. 图片消息无特殊颜色 --- */
.message-row .chat-bubble.image-only {
    background: transparent;
    border-radius: 12px;
}


.message-row:hover .delete-msg-btn {
    opacity: 1;
}

.delete-msg-btn:hover {
    background: #fecaca;
    color: #b91c1c;
}

.chat-input-area {
    display: flex;
    flex-direction: column; /* 核心修改：让子元素垂直排列 */
    align-items: stretch; /* 让子元素宽度撑满 */
    gap: 8px; /* 引用预览框和输入行之间的间距 */
    padding: 8px 12px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    flex-shrink: 0;
}

.chat-input-main-row {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 8px; /* 按钮和输入框之间的间距 */
    width: 100%; /* 确保它撑满父容器 */
}

.chat-input-area input {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: #f0f2f5;
    border-radius: 20px;
    font-size: 16px;
    outline: none;
}

/* ========== 开始： .chat-action-btn 规则 ========== */

.chat-input-area .chat-action-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* 统一所有非主按钮的背景色 */
    background: #f0f2f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* 默认隐藏新的发送按钮 */

#sendMsgBtn {
    display: none;
}

/* 当输入框有内容时，通过JS添加 .has-text 类来显示发送按钮 */

.chat-input-area.has-text #sendMsgBtn {
    display: flex; /* 使用 flex 保持居中 */
}

/* 同时隐藏信封按钮 */

.chat-input-area.has-text #getReplyBtn {
    display: none;
}

/* 重新定义 primary 按钮的样式，确保它只作用于我们期望的按钮上 */

#sendMsgBtn.primary {
    background: #0A84FF;
}

#sendMsgBtn.primary svg {
    fill: white;
}

.chat-input-area .chat-action-btn svg {
    width: 20px;
    height: 20px;
    fill: #6c757d;
}

.chat-settings-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1006;
    display: flex;
    flex-direction: column;
}

.chat-settings-page.show {
    transform: translateX(0);
}

/* ===== 高级简约聊天界面样式 - 结束 ===== */

/* 1. 引用预览条 (输入时) */
.quote-preview {
    display: none; /* 默认隐藏 */
    padding: 8px 12px;
    background-color: #f0f2f5; /* 白色背景 */
    border-radius: 12px;
    border: none;
    align-items: flex-start; /* 垂直方向顶部对齐 */
    gap: 8px;
}

.quote-preview.show {
    display: flex; /* 当有 .show 类时显示 */
}

.quote-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quote-sender {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.quote-text {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.quote-close-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #cccccc;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.quote-close-btn:hover {
    background-color: #aaaaaa;
}

/* 2. 最终渲染的引用消息样式 (发出时) */
.quoted-message-wrapper {
    background: rgba(0, 0, 0, 0.1);
    padding: 8px 12px;
    /*margin-bottom: 8px;*/
    border-radius: 8px;
    border-left: 3px solid #0A84FF; /* 左侧的蓝色指示条 */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 接收到的消息，指示条颜色不同 */
.message-row.received .quoted-message-wrapper {
    border-left-color: #a0a0a0;
}


.quoted-sender {
    font-size: 14px;
    font-weight: 600;
    color: #0A84FF; /* 蓝色高亮发送者 */
}

.message-row.received .quoted-sender {
    color: #555; /* 接收到的消息，发送者颜色不同 */
}


.quoted-text {
    font-size: 14px;
    color: inherit; /* 继承气泡的文字颜色 */
    opacity: 0.8;
    /* 防止过长的引用文本撑破气泡 */
    word-break: break-word;
}

/* 3. 主消息文本样式（引用消息下方的新消息） */
.main-message-text {
    margin-top: 4px; /* 和引用内容之间留出一点空隙 */
}


.phone {
    width: 375px;
    height: 812px;
    background: #000;
    border-radius: 40px;
    padding: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    position: relative;
    margin: auto;
}

.phone::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 28px;
    background: #000;
    border-radius: 0 0 20px 20px;
    z-index: 999;
}

/* ========== 开始：粘贴这段全新的 CSS 代码 ========== */

/* 当 body 标签拥有 fullscreen-enabled 类时，激活以下样式 */

body.fullscreen-enabled .phone {
    width: 100vw; /* 视口宽度，占满整个浏览器窗口宽度 */
    height: 100vh; /* 视口高度，占满整个浏览器窗口高度 */
    border-radius: 0; /* 移除圆角 */
    padding: 0; /* 移除内边距 */
    background: transparent; /* 边框背景变透明 */
    box-shadow: none; /* 移除阴影 */
    margin: 0; /* 移除外边距，确保完全贴合 */
}

body.fullscreen-enabled .screen {
    border-radius: 0; /* 屏幕也移除圆角，以匹配父容器 */
}

/* 移除刘海屏的黑色遮挡 */

body.fullscreen-enabled .phone::before {
    display: none;
}

/* 同时让 body 在全屏时没有内边距 */

body.fullscreen-enabled {
    padding: 0;
}

.screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #fef5f9 0%, #f0e6f5 100%);
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out;

    /* 🔥🔥🔥 在这里添加这两行强制裁剪修复代码 🔥🔥🔥 */
    /* 1. 这行代码利用遮罩强制按照 border-radius 形状裁剪子元素 */
    -webkit-mask-image: -webkit-radial-gradient(white, black);

    /* 2. 这行代码开启 GPU 加速，确保裁剪在渲染层生效，防止闪烁 */
    transform: translate3d(0, 0, 0);
}



.pages-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pages-wrapper.no-transition {
    transition: none;
}

.page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.status-bar {
    display: flex;
    justify-content: space-between;
    padding: 40px 20px 12px;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

.status-icons {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.status-icon-svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
    display: block;
}

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

.battery-icon {
    position: relative;
    width: 34px;
    height: 17px;
}

.battery-icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.battery-level {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    right: 6px;
    height: 8px;
    background-color: #1a1a1a;
    border-radius: 2px;
    width: 0%;
    transition: width 0.5s ease;
}

.battery-level.low {
    background-color: #ff4757;
}

.charging-bolt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    fill: #1a1a1a;
    display: none;
}

.battery-container.charging .charging-bolt {
    display: block;
}

.battery-container.charging .battery-level {
    display: none;
}

.battery-text {
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
}

.time-weather-section {
    flex-shrink: 0;
    /* 左右边距从 20px 减少到 8px */
    padding: 0 8px 12px;
    position: relative;
    z-index: 50;
}

.top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(168, 201, 245, 0.15);
}

.location-display {
    display: flex;
    align-items: center;
    gap: 6px;
}

.location-icon {
    font-size: 16px;
}

.location-text {
    font-size: 14px;
    color: #666;
    font-weight: 600;
}

.weather-display {
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(168, 201, 245, 0.1);
    transition: all 0.2s;
}

.weather-display:hover {
    background: rgba(168, 201, 245, 0.2);
    transform: scale(1.05);
}

.current-weather-icon {
    font-size: 28px;
    display: block;
}

.mood-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.5), rgba(255, 230, 240, 0.3));
    transition: all 0.2s;
}

.mood-section:hover {
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.7), rgba(255, 230, 240, 0.5));
    transform: scale(1.02);
}

.mood-label {
    font-size: 11px;
    color: #888;
    font-weight: 600;
}

.mood-text {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    min-height: 20px;
}

.mood-text.empty {
    color: #aaa;
    font-style: italic;
}

.weather-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 100;
    min-width: 200px;
}

.weather-popup-title {
    font-size: 13px;
    color: #666;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
}

.weather-options {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.weather-option {
    font-size: 36px;
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    transition: all 0.2s;
    opacity: 0.4;
}

.weather-option:hover {
    transform: scale(1.15);
    opacity: 0.7;
}

.weather-option.active {
    opacity: 1;
    background: rgba(168, 201, 245, 0.15);
    transform: scale(1.1);
}


.grid-container {
    flex: 1;
    padding: 12px 8px 120px;
    display: grid;
    /* 🔴 修改点 1：改为 2 列 */
    grid-template-columns: repeat(2, 1fr);
    /* 🔴 修改点 2：改为 3 行 */
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    position: relative;
    overflow-y: visible;
    align-content: start;
}

.grid-container::-webkit-scrollbar {
    display: none;
}

.app-icon {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.15s ease;
    z-index: 10;
    user-select: none;
    padding: 4px;
}

.app-icon:active:not(.dragging) {
    transform: scale(0.95);
}

.app-icon.dragging {
    z-index: 150;
    opacity: 0.85;
    transform: scale(1.08) rotate(1deg);
    transition: none;
}

/* 3. 核心：放大应用图标容器 */
.icon-wrapper {
    /* 尺寸从 62px 增加到 76px */
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92));
    /* 圆角稍微加大 */
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 内部图标/文字字体放大 */
    font-size: 38px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(168, 201, 245, 0.15);
    pointer-events: none;
    overflow: hidden;
}

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

.badge {
    position: absolute;
    top: -2px;
    right: 4px;
    background: #ff4757;
    color: white;
    border-radius: 10px;
    padding: 2px 5px;
    min-width: 18px;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    z-index: 15;
    box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
    pointer-events: none;
}

.app-label {
    /* 字体稍微加大 */
    font-size: 13px;
    color: #FFF;
    text-shadow: -1px -1px 0 rgba(165, 42, 42, 0.5),
    1px -1px 0 rgba(165, 42, 42, 0.5),
    -1px 1px 0 rgba(165, 42, 42, 0.5),
    1px 1px 0 rgba(165, 42, 42, 0.5);
    text-align: center;
    /* 允许文字更宽一点 */
    max-width: 84px;
    overflow: visible;
    white-space: nowrap;
    font-weight: 500;
    pointer-events: none;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


.page-dots {
    position: absolute;
    bottom: 95px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 200;
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dot.active {
    background: rgba(255, 255, 255, 0.9);
    width: 18px;
    border-radius: 3.5px;
}



.edit-hint {
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 22px;
    font-size: 12px;
    width: 200px;
    text-align: center;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 300;
    backdrop-filter: blur(10px);
}

.edit-hint.show {
    opacity: 1;
}

#editHint2 {
    display: none;
}

.settings-page, .config-page, .beautify-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.settings-page.show, .config-page.show, .beautify-page.show {
    transform: translateX(0);
}

.config-page {
    z-index: 1001;
}

.settings-header {
    display: flex;
    align-items: center;
    padding: 45px 20px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.back-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(168, 201, 245, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s;
    color: #333;
    font-weight: bold;
}

.back-btn:active {
    transform: scale(0.9);
    background: rgba(168, 201, 245, 0.25);
}

.settings-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-right: 36px;
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.settings-content::-webkit-scrollbar {
    display: none;
}

.settings-section {
    margin-bottom: 20px;
}

.section-title {
    padding: 12px 20px 8px;
    font-size: 12px;
    color: #666;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.settings-item {
    background: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.settings-item:first-of-type {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.settings-item:last-of-type {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom: none;
}

.settings-item:active {
    background: #f8f9fa;
}

.settings-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 14px;
}

.settings-info {
    flex: 1;
}

.settings-label {
    font-size: 15px;
    color: #333;
    font-weight: 600;
    margin-bottom: 2px;
}

.settings-desc {
    font-size: 12px;
    color: #888;
}

.settings-arrow {
    font-size: 16px;
    color: #bbb;
    font-weight: bold;
}

.form-group {
    background: white;
    padding: 20px;
    margin-bottom: 2px;
}

.form-group:first-of-type {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.form-group:last-of-type {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.voice-setting-section,
.sweetheart-field .voice-setting-input,
.library-section .voice-setting-input { /* 为统一角色卡和密友卡片增加样式 */
    margin-top: 10px;
}
.voice-setting-label,
.sweetheart-label .label-text { /* 标签样式复用现有 */
    font-size: 14px;
    font-weight: 600;
    color: #333; /* 可以根据主题调整 */
    margin-bottom: 8px;
}
.voice-setting-input,
.sweetheart-input,
.library-input { /* 输入框样式复用现有 */
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}
.voice-setting-input:focus,
.sweetheart-input:focus,
.library-input:focus {
    outline: none;
    border-color: #a8c9f5;
}

.form-label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-input, .form-select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-input:focus, .form-select:focus {
    outline: none;
    border-color: #a8c9f5;
}

.btn-group {
    display: flex;
    gap: 8px;
    margin: 20px;
}

.save-btn, .test-btn, .fetch-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.save-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.test-btn {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: white;
}

.fetch-btn {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: white;
}

.save-btn:active, .test-btn:active, .fetch-btn:active {
    transform: scale(0.98);
}


.config-details {
    flex: 1;
    min-width: 0;
}

.delete-config-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f2f6;
    border: none;
    color: #a4b0be;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 12px;
    transition: background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.delete-config-btn:hover {
    background: #ff4757;
    color: white;
    transform: scale(1.1) rotate(90deg);
}


.config-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.config-url {
    font-size: 12px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-new-btn {
    width: 100%;
    padding: 14px;
    background: white;
    border: 2px dashed #ddd;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
}

.add-new-btn:hover {
    border-color: #667eea;
    color: #667eea;
}

.app-preview-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.app-preview-item {
    background: white;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

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

.preview-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

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

.preview-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.upload-section {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.upload-btn, .url-input-btn {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    background: white;
    font-weight: 600;
    color: #666;
}

.upload-btn:hover, .url-input-btn:hover {
    border-color: #a8c9f5;
    color: #667eea;
}

.file-input {
    display: none;
}

.url-input-box {
    margin-top: 8px;
    display: none;
}

.url-input-box.show {
    display: block;
}

.url-input-field {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 6px;
}

.url-input-field:focus {
    outline: none;
    border-color: #a8c9f5;
}

.confirm-btn {
    width: 100%;
    padding: 8px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.status-message {
    margin-top: 8px;
    font-size: 11px;
    color: #28a745;
    font-weight: 600;
}

.status-message.error {
    color: #dc3545;
}

.delete-time-btn, .delete-weather-btn, .delete-widget-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(255, 71, 87, 0.9);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    z-index: 250;
}

.time-card {
    position: relative;
}

.time-card.show-delete .delete-time-btn {
    display: flex;
}

.weather-card.show-delete .delete-weather-btn {
    display: flex;
}

.saved-widget-item {
    background: white;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.saved-widget-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.restore-btn {
    flex: 1;
    padding: 8px;
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}

.delete-saved-btn {
    flex: 1;
    padding: 8px;
    background: #f5f5f5;
    color: #666;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}

/* ========== 新增：文件夹浮层样式 ========== */
.folder-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.folder-overlay.show {
    opacity: 1;
    visibility: visible;
}

.folder-modal {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    width: calc(100% - 40px);
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.folder-overlay.show .folder-modal {
    transform: scale(1);
}

.folder-header {
    text-align: center;
    padding-bottom: 16px;
}

/* ========== 新增：文件夹名称编辑样式 (修正版) ========== */
#folderNameInput {
    /* 继承父元素的字体样式 */
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: inherit;

    /* 移除输入框默认外观 */
    border: none;
    background: transparent;

    /* 文本居中 */
    text-align: center;

    /* 移除点击时的轮廓线 */
    outline: none;

    /* 宽度撑满，与标题一致 */
    width: 100%;
    padding: 0;
    margin: 0;

    /* 添加一个细微的下划线，提示用户正在编辑 */
    border-bottom: 2px solid #a0a0a0;
}

/* 当文件夹头部处于编辑状态时 */
.folder-header.is-editing #folderName {
    display: none; /* 隐藏原始标题 */
}

.folder-header.is-editing #folderNameInput {
    /* ▼▼▼ 核心修正点在这里 ▼▼▼ */
    display: block !important; /* 显示输入框，并强制覆盖内联样式 */
}


#folderName {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.folder-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    align-content: start;
}

/* 文件夹浮层中图标的样式, 它复用了.app-icon的结构 */
.folder-grid-container .app-icon {
    position: relative; /* 从absolute改为relative，适应grid布局 */
    top: auto;
    left: auto;
    width: auto;
    height: auto;
}

/* ========== 开始：粘贴这段全新的CSS代码 ========== */

.folder-mini-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片不变形地填满容器 */
    border-radius: 4px; /* 给小图标也加上一点圆角，更美观 */
}

/* ========== 结束：粘贴全新的CSS代码 ========== */


.contacts-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1002;
    display: flex;
    flex-direction: column;
}

.contacts-page.show {
    transform: translateY(0);
}

/* ========== 开始：粘贴这段【修正版】CSS 代码 ========== */

.contacts-header {
    display: flex;
    align-items: center;
    padding: 45px 20px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 10; /* <<< --- 新增：提升头部的堆叠层级 --- <<< */
}

.contacts-search {
    flex: 1;
    padding: 10px 16px;
    background: rgba(168, 201, 245, 0.1);
    border: none;
    border-radius: 20px;
    font-size: 14px;
    margin: 0 12px;
}

.contacts-search:focus {
    outline: none;
    background: rgba(168, 201, 245, 0.2);
}

.add-contact-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(168, 201, 245, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s;
    color: #333;
    font-weight: bold;
}

.add-contact-btn:active {
    transform: scale(0.9);
    background: rgba(168, 201, 245, 0.25);
}

.contact-menu {
    position: absolute;
    top: 100%;
    right: 20px;
    margin-top: 8px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: none;
    z-index: 1003;
    min-width: 160px;
}

.contact-menu.show {
    display: block;
}

.contact-menu-item {
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.contact-menu-item:active {
    background: #f8f9fa;
}

.contacts-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.contacts-list::-webkit-scrollbar {
    display: none;
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.2s;
}

.contact-item:active {
    background: #f8f9fa;
}

.contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    margin-right: 12px;
    flex-shrink: 0;
}

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

.contact-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.contact-status {
    font-size: 12px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-badge {
    background: #ff4757;
    color: white;
    border-radius: 10px;
    padding: 2px 8px;
    min-width: 18px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
    padding: 0 20px;
}

.wallpaper-thumbnail {
    width: 100%;
    padding-top: 150%;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border: 3px solid transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    position: relative;
}

.wallpaper-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.wallpaper-thumbnail.active {
    border-color: #667eea;
    transform: scale(1.02);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(5px);
    overscroll-behavior: contain;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.character-card-modal {
    background: #fff;
    border: 6px solid #000;
    border-radius: 24px;
    width: 100%;
    max-width: 330px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.modal-overlay.show .character-card-modal {
    transform: scale(1);
}

.character-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 顶部信息区：简单的两列 Flex 布局 */
.top-info-section {
    display: flex;
    gap: 16px; /* 左右两列的间距 */
    align-items: flex-start;
}

/* 1. 左侧头像：固定宽度，不收缩 */
.character-avatar {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    border: 2px solid #eee;
    border-radius: 12px;
    background: #f8f8f8;
    cursor: pointer;
    overflow: hidden;
}

.character-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. 右侧核心信息：占据所有剩余空间 */
.core-details {
    flex: 1; /* 关键：占据所有剩余空间 */
    min-width: 0; /* 安全措施，防止内容溢出 */
    display: flex;
    flex-direction: column;
    gap: 12px; /* 姓名和性别选项之间的垂直间距 */
    padding-top: 4px; /* 微调，让姓名输入框与头像顶部更协调 */
}

.core-details input[type="text"] {
    width: 100%;
    border: none;
    border-bottom: 2px solid #ccc;
    padding: 6px 0;
    font-size: 20px;
    font-weight: bold;
    background: transparent;
    color: #000;
}

.core-details input[type="text"]:focus {
    outline: none;
    border-bottom-color: #000;
}

/* 性别选项：横向排列 */
.character-gender-selection {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px; /* 加大选项间距，更美观 */
    align-items: center;
}

.character-gender-selection label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #555;
}

.character-gender-selection input {
    margin-right: 6px;
}


.persona-section {
    width: 100%;
}

.persona-section textarea {
    width: 100%;
    height: 100px;
    padding: 12px;
    border: 2px solid #eee;
    border-radius: 12px;
    background: #f8f8f8;
    font-size: 14px;
    color: #333;
    resize: vertical;
    transition: border-color 0.2s, background-color 0.2s;
}

.persona-section textarea:focus {
    outline: none;
    border-color: #aaa;
    background: #fff;
}

.character-card-footer {
    display: flex;
    background: #f8f8f8;
    border-top: 2px solid #eee;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
}

.character-card-btn {
    flex: 1;
    padding: 14px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    color: #888;
}

.character-card-btn:hover {
    background: #eee;
}

.character-card-btn.save {
    background: #000;
    color: #fff;
}

.character-card-btn.save:hover {
    background: #333;
}

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

/* ▼▼▼ 第2步：在这里粘贴新增的CSS代码 ▼▼▼ */
/* ========== 角色卡中的世界书区域样式 ========== */
.character-card-content {
    max-height: 70vh; /* 限制最大高度，为滚动条做准备 */
    overflow-y: auto; /* 超出部分可滚动 */
}

.character-card-content::-webkit-scrollbar {
    width: 6px;
}

.character-card-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.character-card-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.character-worldbook-section {
    margin-top: 10px;
}

.char-wb-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f8f8f8;
    border: 2px solid #eee;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.char-wb-toggle:hover {
    background-color: #f0f0f0;
}

.char-wb-toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.char-wb-toggle-arrow {
    font-size: 12px;
    color: #888;
    transition: transform 0.3s ease;
}

.char-wb-toggle-arrow.open {
    transform: rotate(180deg);
}

.char-wb-list {
    margin-top: 8px;
    padding: 8px;
    background: #fdfdfd;
    border: 2px solid #eee;
    border-radius: 10px;
    max-height: 150px;
    overflow-y: auto;
}

.char-wb-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

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

.char-wb-item input[type="checkbox"] {
    margin-right: 10px;
    cursor: pointer;
    accent-color: #555; /* 让复选框颜色更搭 */
}

.char-wb-item label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: #555;
}

/* ▲▲▲ CSS代码粘贴结束 ▲▲▲ */


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

.avatar-action-sheet.show {
    opacity: 1;
    visibility: visible;
}

.action-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.action-sheet-options {
    position: relative;
    z-index: 2000;
    background: #f0f2f5;
    padding: 8px;
    margin: 8px;
    border-radius: 14px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: none;
    outline: none;
    box-shadow: none;
}

.avatar-action-sheet.show .action-sheet-options {
    transform: translateY(0);
}


.success-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2500;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.success-modal.show {
    opacity: 1;
}

.modal-content {
    background: white;
    padding: 24px 32px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.success-modal.show .modal-content {
    transform: scale(1);
}

.modal-content h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #333;
}

.modal-content p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* --- 复制并粘贴这段代码 --- */

.settings-item {
    justify-content: space-between;
}

.settings-action {
    flex-shrink: 0;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

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

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

/* ========== 普通聊天的消息操作菜单 ========== */
.chat-page .message-action-sheet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1020;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.chat-page .message-action-sheet.show {
    opacity: 1;
    visibility: visible;
}

.chat-page .message-action-sheet .action-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.chat-page .message-action-sheet .action-sheet-options {
    position: relative;
    z-index: 1;
    background: #f0f2f5;
    padding: 8px;
    margin: 8px;
    border-radius: 14px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chat-page .message-action-sheet.show .action-sheet-options {
    transform: translateY(0);
}

/* ========== 密友聊天的消息操作菜单 ========== */
.sweetheart-chat-page .message-action-sheet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1020;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sweetheart-chat-page .message-action-sheet.show {
    opacity: 1;
    visibility: visible;
}

.sweetheart-chat-page .message-action-sheet .action-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.sweetheart-chat-page .message-action-sheet .action-sheet-options {
    position: relative;
    z-index: 1;
    background: #f0f2f5;
    padding: 8px;
    margin: 8px;
    border-radius: 14px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sweetheart-chat-page .message-action-sheet.show .action-sheet-options {
    transform: translateY(0);
}


/* ========== 开始：粘贴这段全新的 CSS 代码 ========== */

/* 密友聊天设置页面 - 主容器 */
.chat-settings-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%); /* 默认从右侧隐藏 */
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1007; /* 层级高于聊天页面，低于模态框 */
    display: flex;
    flex-direction: column;
}

/* 当有 .show 类时滑入 */
.chat-settings-page.show {
    transform: translateX(0);
}

/* 密友聊天设置页面的特定主题 */
#sweetheartChatSettingsPage {
    background: linear-gradient(180deg, #FFF0F5 0%, #FFE4E9 100%); /* 可爱的粉色渐变 */
}

#sweetheartChatSettingsPage .settings-header {
    background: linear-gradient(135deg, #FFB6C1, #FFC0D9); /* 头部使用更深的粉色 */
}

#sweetheartChatSettingsPage .settings-title {
    color: white; /* 标题文字为白色 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#sweetheartChatSettingsPage .back-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

#sweetheartChatSettingsPage .section-title {
    color: #C7828F; /* 节标题使用粉棕色 */
}

#sweetheartChatSettingsPage .settings-item {
    background: rgba(255, 255, 255, 0.8); /* 选项使用半透明白色 */
    border-radius: 12px;
    margin: 0 16px 8px; /* 为选项添加圆角和边距 */
    border-bottom: none; /* 移除默认的下划线 */
}

#sweetheartChatSettingsPage .settings-item:first-of-type {
    border-radius: 12px;
}

#sweetheartChatSettingsPage .settings-item:last-of-type {
    border-radius: 12px;
}

#sweetheartChatSettingsPage .settings-label {
    color: #8D6E63; /* 选项标签使用棕色 */
}

#sweetheartChatSettingsPage .settings-desc {
    color: #BCAAA4; /* 描述文字使用浅棕色 */
}

#sweetheartChatSettingsPage .settings-arrow {
    color: #FFC0D9; /* 箭头使用粉色 */
}

/* ========== 结束：粘贴全新的 CSS 代码 ========== */

/* style.css */

/* ========== 代码块与复制按钮样式 (按钮在pre内部版) ========== */

/* 1. 代码块包装器 */
.code-block-wrapper {
    position: relative;
    display: block;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

/* 2. pre 元素样式 - 作为按钮的定位容器 */
.code-block-wrapper pre {
    /*!* 重要：pre 需要作为定位容器 *!*/
    /*position: relative;*/

    /* 基础样式 */
    background-color: #1e1e1e;
    color: #d4d4d4;
    /* 增加顶部内边距，为按钮留出空间 */
    padding: 36px 12px 12px 12px; /* 从36px增加到45px */
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    line-height: 1.5;

    /* 布局样式 */
    margin: 0;
    width: 100%;
    box-sizing: border-box;

    /* 文本处理 */
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;

    /* 确保 pre 是块级元素 */
    display: block;
}

/* 3. 复制按钮 - 定位在pre内部顶部 */
.copy-code-btn {
    /* 绝对定位在 pre 内部的右上角 */
    position: absolute;
    top: 8px; /* 距离顶部的距离 */
    right: 8px; /* 距离右边的距离，与pre的padding对齐 */
    z-index: 10;

    /* 调大按钮尺寸 */
    min-width: auto;
    height: auto;
    padding: 6px 8px; /* 从 6px 10px 增加到 8px 14px */

    /* 外观样式 */
    background: rgba(255, 255, 255, 0.12); /* 稍微提高不透明度 */
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px; /* 稍微增大圆角 */
    color: #b0b0b0; /* 稍微提亮颜色 */

    /* 使用 flexbox 确保内容完美居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* 增加图标和文字的间距 */

    /* 调大字体 */
    font-size: 14px !important; /* 从12px增加到14px */
    font-weight: 500; /* 稍微加粗 */
    line-height: 1;
    white-space: nowrap;

    /* 交互样式 */
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease-in-out;

    /* 添加轻微阴影，增加层次感 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 4. SVG 图标样式 - 调大尺寸 */
.copy-code-btn svg {
    /* 增大图标尺寸 */
    width: 16px; /* 从14px增加到16px */
    height: 16px;

    /* 确保不会被压缩或拉伸 */
    flex-shrink: 0;
    flex-grow: 0;

    /* 颜色继承 */
    fill: currentColor;

    /* 垂直对齐 */
    vertical-align: middle;
    display: block;
}

/* 5. 按钮文本样式 */
.copy-code-btn span {
    font-size: inherit;
    line-height: 1;
    vertical-align: middle;
    font-weight: inherit;
}

/* 6. 鼠标悬停显示按钮 */
.code-block-wrapper:hover .copy-code-btn {
    opacity: 1;
}

/* 7. 按钮悬停效果 */
.copy-code-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.3);
    /* 悬停时稍微放大 */
    transform: scale(1.05);
}

/* 8. 按钮按下效果 */
.copy-code-btn:active {
    transform: scale(0.98);
}

/* 9. 复制成功状态 */
.copy-code-btn.copied {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
    opacity: 1;
}

/* 10. 特殊情况：当代码块在聊天气泡中时 */
.chat-bubble .code-block-wrapper {
    margin: -12px;
    width: calc(100% + 24px);
}

/* 11. 确保气泡只包含代码块时的样式正确 */
.chat-bubble:has(.code-block-wrapper) {
    padding: 0;
    background: transparent;
}

/* 12. 代码滚动模式的特殊处理 */
body.code-scrolling-enabled .code-block-wrapper pre {
    white-space: pre;
    word-break: normal;
    overflow-x: auto;
    /* ▼▼▼ 新增以下关键样式 ▼▼▼ */
    /* 允许 IOS 设备惯性滚动，滑动更流畅 */
    -webkit-overflow-scrolling: touch;
    /* 明确告诉浏览器横向滑动是允许的，不要被父级 JS 捕获 */
    touch-action: pan-x;
    /* ▲▲▲ 新增结束 ▲▲▲ */
    /* 滚动模式下可能需要更多顶部空间 */
    padding-top: 50px;
}

/* 13. 确保按钮不会影响代码内容的布局 */
.code-block-wrapper pre code {
    display: block;
    /* 确保代码内容不会与按钮重叠 */
    position: relative;
    z-index: 1;
}

/* ========== 代码块气泡对齐修复 ========== */

/* 1. 当气泡内只包含代码块时，移除气泡的默认样式 */
.chat-bubble:has(.code-block-wrapper:only-child) {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 100%; /* 允许代码块使用全部可用宽度 */
}

/* 2. 确保代码块本身有正确的圆角和阴影 */
.chat-bubble .code-block-wrapper:only-child pre {
    border-radius: 12px; /* 与普通气泡一致的圆角 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 与普通气泡一致的阴影 */
}

/* 3. 修复代码块的宽度，确保与普通气泡一致 */
.message-row .code-block-wrapper {
    max-width: calc(100vw - 120px); /* 与普通气泡的 max-width 保持一致 */
    width: fit-content;
}

/* 4. 确保代码块在发送/接收时的对齐正确 */
.message-row.sent .code-block-wrapper {
    margin-left: auto; /* 发送的代码块右对齐 */
}

.message-row.received .code-block-wrapper {
    margin-right: auto; /* 接收的代码块左对齐 */
}

/* 5. 移除之前可能导致问题的负边距 */
.chat-bubble .code-block-wrapper {
    margin: 0 !important; /* 覆盖之前的 margin: -12px */
    width: 100% !important; /* 覆盖之前的 calc(100% + 24px) */
}

/* 6. 如果浏览器不支持 :has 选择器，使用备用方案 */
@supports not selector(:has(*)) {
    /* 为只包含代码块的气泡添加特殊类（需要在 JS 中配合添加） */
    .chat-bubble.code-only {
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .chat-bubble.code-only .code-block-wrapper pre {
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
}

/* 7. 确保简洁模式下代码块也能正确显示 */
.chat-page.simple-style .code-block-wrapper pre {
    background-color: #1e1e1e; /* 保持深色背景 */
    padding: 45px 12px 12px 12px; /* 保持原有内边距 */
}

/* 8. 调整代码滚动模式的特殊处理 */
body.code-scrolling-enabled .code-block-wrapper {
    max-width: calc(100vw - 120px);
}


/* ========== 开始：分段选择器UI样式 ========== */

.segmented-control {
    display: flex;
    background-color: #e9e9eb;
    border-radius: 8px;
    padding: 2px;
}

.segmented-option {
    flex: 1;
    padding: 6px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

.segmented-option.active {
    background-color: white;
    color: #000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}





/* ========== 开始：粘贴这段全新的 CSS 代码块 ========== */

/* 1. 调整输入区域，为新按钮腾出空间 */

.chat-input-area {
    position: relative; /* 这是让菜单定位的关键！ */
}

/* 2. 附件菜单容器的样式 */

.attachment-menu {
    position: absolute; /* 相对于 .chat-input-area 定位 */
    bottom: 60px; /* 定位在输入框上方 */
    left: 12px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 16px;
    padding: 12px;

    /* 默认隐藏的动画属性 */
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 10;
}

/* 3. 当菜单拥有 .show 类时，将它显示出来 */

.attachment-menu.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* 4. 菜单中每个选项的样式 */

.attachment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* 5. 选项中的图标样式 */

.attachment-icon {
    width: 56px;
    height: 56px;
    background-color: #f0f2f5;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: transform 0.2s;
}

.attachment-item:hover .attachment-icon {
    transform: scale(1.05);
}

/* 6. 选项中的文字标签样式 */

.attachment-label {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

/* 7. 调整旧的 #addMsgBtn，现在它变成了“+”按钮，所以样式也需要改一下 */

#addMsgBtn {
    display: none; /* 隐藏旧的添加按钮，现在被发送按钮替代 */
}

/* === 猫咪胡须时间卡片CSS - 开始 === */

/* 1. 外层 .time-card 容器保持相对定位，作为胡须的定位锚点 */
.time-card {
    position: relative;
    padding: 0;
    overflow: visible;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    margin-bottom: 24px;
}

/* 隐藏不再需要的旧元素 */
.time-card .card-background-wrapper {
    display: none;
}

.time-card .final-time-container::before,
.time-card .final-time-container::after {
    display: none;
}

/* 2. 新增的 .whiskers-bg 层，这是实现效果的核心 */
.whiskers-bg {
    position: relative; /* 作为胡须伪元素的定位参考 */
    width: 75%; /* 控制卡片宽度，比之前窄一点更可爱 */
    margin: 0 auto; /* 水平居中 */
    padding: 12px 20px;
    /* 核心：棕色背景 */
    background: #A1887F; /* 一个柔和的棕色 */
    border-radius: 20px; /* 可爱的圆角 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* 柔和的阴影 */
    border: 2px solid #ffffff; /* 添加白色边框增加质感 */

    /* 为胡须留出空间 */
    margin-left: auto;
    margin-right: auto;
}

/* 3. 使用伪元素创建左边的两条胡须 */
.whiskers-bg::before {
    content: '';
    position: absolute;
    z-index: -1; /* 将胡须置于背景层之下 */
    top: 50%;

    /* 定位到左边并伸出去一点 */
    left: -20px;

    /* 胡须的尺寸 */
    width: 40px;
    height: 10px; /* 两条胡须之间的间距 */

    /* 用边框画出两条线 */
    border-top: 2.5px solid #FFC0D9; /* 粉色 */
    border-bottom: 2.5px solid #FFC0D9; /* 粉色 */

    /* 旋转和垂直居中 */
    transform: translateY(-50%) rotate(-20deg);
}

/* 4. 使用伪元素创建右边的两条胡须 */
.whiskers-bg::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;

    /* 定位到右边并伸出去一点 */
    right: -20px;

    width: 40px;
    height: 10px;
    border-top: 2.5px solid #FFC0D9;
    border-bottom: 2.5px solid #FFC0D9;

    /* 向相反方向旋转 */
    transform: translateY(-50%) rotate(20deg);
}


/* 5. 内部的时间容器 .final-time-container，现在只负责布局，不再有背景色 */
.time-card .final-time-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    /* 移除所有背景、边框和阴影样式 */
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    position: relative;
    z-index: 2;
}

/* 6. 调整时间字体颜色，确保在棕色背景上清晰可见 */
#finalMainTime {
    font-size: 38px;
    font-weight: 700;
    color: #FFF; /* 改为白色 */
    line-height: 1;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 轻微的阴影增加可读性 */
    letter-spacing: -1px;
}

/* 7. 调整日期字体颜色 */
#finalMainDate {
    font-size: 13px;
    font-weight: 600;
    color: #F5EFE6; /* 一个非常浅的米白色，与主时间有区分 */
    margin: 0;
    padding-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === 猫咪胡须时间卡片CSS - 结束 === */


.card-divider {
    border-bottom: 2px dashed #eee;
    text-align: center;
    margin: 16px 0;
    position: relative;
}

.divider-text {
    position: relative;
    top: 10px;
    background: #fff;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: #aaa;
}

#user-name {
    /* 让用户昵称输入框和角色名输入框样式一致 */
    width: 100%;
    border: none;
    border-bottom: 2px solid #ccc;
    padding: 6px 0;
    font-size: 20px;
    font-weight: bold;
    background: transparent;
    color: #000;
    transition: border-color 0.2s;
}

#user-name:focus {
    outline: none;
    border-bottom-color: #000;
}

/* 在"可爱卡片背景CSS"之前添加这段 */
.weather-card {
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(168, 201, 245, 0.15);
    border: 1px solid rgba(168, 201, 245, 0.2);
    position: relative;
    backdrop-filter: blur(10px);
}

.weather-card {
    position: relative; /* 确保卡片成为内部绝对定位元素的锚点 */
    overflow: hidden; /* 隐藏超出卡片圆角的背景 */
    background: none; /* 移除卡片自身的背景色/渐变 */
    border: none; /* 移除卡片自身的边框 */
    padding: 0; /* 移除内边距，因为内容需要重新定位 */
}

.weather-card > * {
    position: relative;
    z-index: 2; /* 确保内容层级高于背景 */
}

/* 2. 确保所有内容都在背景之上 */
.weather-card > .mood-section {
    padding: 20px;
}

.weather-card > .top-row {
    padding-top: 20px;
}

.weather-card > .mood-section {
    padding-bottom: 20px;
}

.weather-card > .weather-popup {
    /* 修正弹窗位置问题 */
    left: calc(50% - 12px);
}

/* 3. 背景的包裹容器样式 */
.card-background-wrapper {
    position: absolute; /* 绝对定位，脱离文档流 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 在内容之下 */
}

.card-background-wrapper .top-gingham-bg {
    height: 50%;
    background-color: white;
    background-image: linear-gradient(to right, rgba(255, 192, 203, 0.6) 50%, transparent 50%),
    linear-gradient(to bottom, rgba(255, 192, 203, 0.6) 50%, transparent 50%);
    background-size: 30px 30px; /* 格子尺寸调小一些以适应卡片 */
}

.card-background-wrapper .bottom-stripes-bg {
    height: 50%;
    background-color: #fffafc;
    background-image: repeating-linear-gradient(
            90deg,
            #ffeaf0, #ffeaf0 15px,
            #fffafc 15px, #fffafc 30px
    );
}

.card-background-wrapper .drip-divider {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 40px; /* 滴落效果高度 */
    transform: translateY(-50%);
}

.card-background-wrapper .drip-divider::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15) 50%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: none;
    filter: drop-shadow(0 2px 4px rgba(220, 150, 160, 0.15));
}

/* 6. 中间的波浪奶油分割线 */
.drip-divider {
    position: absolute;
    top: 52%; /* 精确调整分割线的位置 */
    left: 0;
    width: 100%;
    height: 30px; /* 控制波浪的高度 */
    /* 使用内联SVG作为背景图片来创建形状 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 2 Q 10 7, 20 3 Q 30 0, 40 4 Q 50 8, 60 5 Q 70 2, 80 6 Q 90 10, 100 5 L100 0 L0 0 Z' fill='rgba(255,255,255,0.7)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* 使用 backdrop-filter 制作磨砂玻璃质感 */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* 兼容 Safari */
}

/* ---可爱卡片背景CSS - 结束--- */
/* BUG 修复：强制天气卡片内的删除按钮使用绝对定位，防止其影响卡片高度 */
.weather-card > .delete-weather-btn {
    position: absolute;
    z-index: 250;
}


/* ========== 开始：粘贴这段全新的CSS代码 ========== */

.avatar-action-sheet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2001; /* 比卡片高，比模态框覆盖层低 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* 默认隐藏 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.avatar-action-sheet.show {
    opacity: 1;
    visibility: visible;
}

.action-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.action-sheet-options {
    position: relative;
    z-index: 2000;
    padding: 0;
    margin: 8px;
    /* 动画效果：从下方滑入 */
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.avatar-action-sheet.show .action-sheet-options {
    transform: translateY(0);
}

/* ========== 普通聊天菜单样式 ========== */
.chat-page .message-action-sheet .action-option {
    background: #fff;
    padding: 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #007aff;
    cursor: pointer;
    border-bottom: 1px solid #e5e5e5;
    border-left: none;
    border-right: none;
    border-top: none;
}

.chat-page .message-action-sheet .action-option:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.chat-page .message-action-sheet .action-option:last-child {
    border-bottom: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.chat-page .message-action-sheet .action-option.cancel {
    background: #fff;
    margin-top: 8px;
    border-radius: 12px;
    font-weight: 600;
}

.chat-page .message-action-sheet .action-option.destructive {
    color: #ff3b30;
}

/* ========== 密友聊天菜单样式 ========== */
.sweetheart-chat-page .message-action-sheet .action-option {
    background: #fff;
    padding: 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #007aff;
    cursor: pointer;
    border-bottom: 1px solid #e5e5e5;
    border-left: none;
    border-right: none;
    border-top: none;
}

.sweetheart-chat-page .message-action-sheet .action-option:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.sweetheart-chat-page .message-action-sheet .action-option:last-child {
    border-bottom: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.sweetheart-chat-page .message-action-sheet .action-option.cancel {
    background: #fff;
    margin-top: 8px;
    border-radius: 12px;
    font-weight: 600;
}

.sweetheart-chat-page .message-action-sheet .action-option.destructive {
    color: #ff3b30;
}


/* ========== 结束：粘贴全新的CSS代码 ========== */
/* 确保ID区域不会挤压中间内容 */
.character-id {
    font-size: 12px;
    color: #888;
    margin-top: auto;
    font-family: 'Menlo', 'Monaco', monospace;
    flex-shrink: 0; /* 防止收缩 */
    max-width: 80px; /* 限制最大宽度 */
    word-break: break-all; /* 允许ID换行 */
}

/* 改进性别选择的样式 */
.character-gender-selection {
    color: #555;
    font-size: 14px;
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.character-gender-selection label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
}

.character-gender-selection input {
    margin-right: 6px;
}

/* 确保核心详情区域有足够空间 */
.core-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0; /* 允许内容收缩 */
}

/* 确保姓名输入框不会被挤压 */
.core-details input[type="text"] {
    width: 100%;
    border: none;
    border-bottom: 2px solid #ccc;
    padding: 6px 0;
    font-size: 20px;
    font-weight: bold;
    background: transparent;
    color: #000;
    transition: border-color 0.2s;
    min-width: 0; /* 重要：允许输入框收缩 */
}


/* ========== 开始：新增的密友列表页面样式 ========== */

/* 1. 页面主容器样式 (粉色到褐色的可爱渐变) */
.sweetheart-list-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #F8E8EE 0%, #EEDDD3 100%); /* 柔和的粉-褐渐变 */
    transform: translateY(100%); /* 默认从下方隐藏 */
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1008; /* 与其他页面层级类似 */
    display: flex;
    flex-direction: column;
}

/* 2. 当有 .show 类时，页面滑入 */
.sweetheart-list-page.show {
    transform: translateY(0);
}

/* 3. 头部样式 */
.sweetheart-list-header {
    display: flex;
    align-items: center;
    padding: 45px 20px 20px;
    background: rgba(255, 245, 240, 0.7); /* 半透明的柔粉色 */
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(161, 136, 127, 0.1); /* 柔和的棕色阴影 */
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

/* 4. 标题样式 (使用深褐色文字) */
.sweetheart-list-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #A1887F; /* 温馨的深褐色 */
    margin-right: 36px; /* 为返回按钮留出空间 */
}

/* 5. 列表容器样式 */
.sweetheart-list-content {
    flex: 1;
    overflow-y: auto;
    padding-top: 12px;
}

.sweetheart-list-content::-webkit-scrollbar {
    display: none;
}

/* 6. 每个联系人项目的样式 */
.sweetheart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    margin: 0 12px 10px;
    background: rgba(255, 255, 255, 0.8); /* 半透明白色，增加层次感 */
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(161, 136, 127, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.sweetheart-item:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 1);
}

/* 7. 头像样式 (带有可爱的粉色边框) */
.sweetheart-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: #fff;
    border: 2px solid #FFC0D9; /* 可爱的粉色边框 */
}

.sweetheart-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 8. 姓名和状态的容器 */
.sweetheart-info {
    flex: 1;
    min-width: 0;
}

/* 9. 姓名样式 */
.sweetheart-name {
    font-size: 16px;
    font-weight: 600;
    color: #8D6E63; /* 比标题略浅的棕色 */
    margin-bottom: 2px;
}

/* 10. 状态/最后消息样式 */
.sweetheart-status {
    font-size: 13px;
    color: #BCAAA4; /* 柔和的浅棕灰色 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== 结束：新增的密友列表页面样式 ========== */
/* ========== 密友角色卡 - 粉褐色可爱风格 ========== */

/* 弹窗容器 */
#sweetheartCardModal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(161, 136, 127, 0.5);
    z-index: 3000 !important;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

#sweetheartCardModal.show {
    opacity: 1;
    visibility: visible;
    display: flex;
}

/* 卡片主体 */
.sweetheart-card-modal {
    background: linear-gradient(180deg, #FFF5F5 0%, #FFE8E8 100%);
    border: 4px solid #FFB6C1;
    border-radius: 24px;
    width: 100%;
    max-width: 340px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(255, 182, 193, 0.4);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#sweetheartCardModal.show .sweetheart-card-modal {
    transform: scale(1);
}

/* 顶部装饰条 */
.sweetheart-card-header {
    background: linear-gradient(135deg, #FFB6C1, #FFC0D9);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-bottom: 3px solid #FF9AAD;
}

.header-deco {
    font-size: 20px;
    animation: float 2s ease-in-out infinite;
}

.header-deco:nth-child(3) {
    animation-delay: 0.5s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.header-title {
    font-size: 18px;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(161, 136, 127, 0.3);
}

/* 内容区域 */
.sweetheart-card-content {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.sweetheart-card-content::-webkit-scrollbar {
    width: 6px;
}

.sweetheart-card-content::-webkit-scrollbar-track {
    background: #FFE8E8;
}

.sweetheart-card-content::-webkit-scrollbar-thumb {
    background: #FFB6C1;
    border-radius: 3px;
}

/* 头像区域 */
.sweetheart-avatar-section {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.sweetheart-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #FFB6C1;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.4);
    transition: transform 0.2s ease;
}

.sweetheart-avatar:hover {
    transform: scale(1.05);
}

.sweetheart-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========== 统一角色卡样式修补 ========== */
/* ========== 统一角色卡样式修补 ========== */

/* 头像上的悬浮提示 */
.avatar-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 12px;
    text-align: center;
    padding: 2px 0;
    pointer-events: none;
}

/* 扩展字段区域 */
.char-wb-list input.form-input,
.char-wb-list textarea.form-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background-color: #fff;
    margin-bottom: 8px; /* 间距 */
}

/* 性别选择微调 */
.character-gender-selection label {
    margin-right: 10px;
    font-size: 13px;
    cursor: pointer;
}

/* 适配不同屏幕高度 */
.character-card-modal {
    max-height: 90vh; /* 增加最大高度利用率 */
}


/* 表单字段 */
.sweetheart-field {
    margin-bottom: 16px;
}

.sweetheart-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #8D6E63;
}

.label-icon {
    font-size: 16px;
}

.required-star {
    color: #FF6B9D;
    font-weight: bold;
}

/* 输入框 */
.sweetheart-input,
.sweetheart-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #FFD1DC;
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    background: white;
    transition: all 0.2s ease;
}

.sweetheart-input:focus,
.sweetheart-textarea:focus {
    outline: none;
    border-color: #FFB6C1;
    box-shadow: 0 0 0 3px rgba(255, 182, 193, 0.2);
}

.sweetheart-textarea {
    resize: vertical;
    min-height: 80px;
}

/* 必填字段样式 */
.required-field .sweetheart-input,
.required-field .sweetheart-textarea {
    border-color: #FFB6C1;
    background: #FFFAFA;
}

/* 世界书折叠区域 */
.sweetheart-label-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;
    background: #FFF0F5;
    border-radius: 10px;
    transition: background 0.2s;
    user-select: none;
}

.sweetheart-label-toggle:hover {
    background: #FFE4E9;
}

.toggle-arrow {
    font-size: 12px;
    color: #FFB6C1;
    transition: transform 0.3s ease;
}

.toggle-arrow.open {
    transform: rotate(180deg);
}

.sweetheart-worldbooks-list {
    margin-top: 12px;
    padding: 12px;
    background: white;
    border: 2px solid #FFD1DC;
    border-radius: 10px;
    max-height: 180px;
    overflow-y: auto;
}

.sweetheart-wb-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #FFF0F5;
    cursor: pointer;
    transition: background 0.2s;
}

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

.sweetheart-wb-item:hover {
    background: #FFF5F8;
}

.sweetheart-wb-item input[type="checkbox"] {
    margin-right: 10px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: #FFB6C1;
}

.sweetheart-wb-item label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: #8D6E63;
}

/* 底部按钮 */
.sweetheart-card-footer {
    display: flex;
    padding: 16px;
    gap: 12px;
    background: #FFF0F5;
    border-top: 2px solid #FFD1DC;
}

.sweetheart-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-cancel {
    background: white;
    color: #BCAAA4;
    border: 2px solid #E0D5D1;
}

.btn-cancel:hover {
    background: #F5F5F5;
    transform: translateY(-2px);
}

.btn-cancel:active {
    transform: translateY(0);
}

.btn-save {
    background: linear-gradient(135deg, #FFB6C1, #FF9AAD);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.4);
}

.btn-save:hover {
    background: linear-gradient(135deg, #FF9AAD, #FF8BA0);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 182, 193, 0.5);
}

.btn-save:active {
    transform: translateY(0);
}

/* ========== 步骤1：在这里粘贴“密友专属”聊天主题CSS ========== */
/* ========== 密友专用聊天页面样式 ========== */

.sweetheart-chat-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #FFF0F5 0%, #FFE4E9 100%);
    z-index: 1005;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sweetheart-chat-page.show {
    transform: translateY(0);
}

/* 头部样式 - 粉色渐变 */
.sweetheart-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 12px 12px;
    background: linear-gradient(135deg, #FFB6C1, #FFC0D9);
    box-shadow: 0 2px 8px rgba(212, 165, 165, 0.3);
    flex-shrink: 0;
}

.sweetheart-chat-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
    font-weight: 600;
    color: white;
    margin: 0;
    text-shadow: 0 1px 3px rgba(161, 136, 127, 0.3);
}

/* 消息区域 - 带心形图案背景 */
.sweetheart-chat-messages {
    flex: 1; /* 保持：占满可用垂直空间 */
    overflow-y: auto; /* 保持：当内容超出时滚动 */
    min-height: 0; /* ✨ 这是解决问题的关键！允许此区域收缩 */
    /* ... 其他样式保持不变 ... */
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #FDF6F8;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F8E8EE' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.sweetheart-chat-messages::-webkit-scrollbar {
    display: none;
}

/* 我方发送的气泡 - 粉色渐变 */
.sweetheart-chat-page .message-row.sent .chat-bubble {
    background: linear-gradient(135deg, #FFB6C1, #FF9AAD);
    color: white;
    box-shadow: 0 3px 8px rgba(255, 182, 193, 0.3);
}

/* 对方发送的气泡 - 白色带粉边 */
.sweetheart-chat-page .message-row.received .chat-bubble {
    background: #FFFFFF;
    color: #8D6E63;
    border: 1px solid #FFE4E9;
    box-shadow: 0 2px 6px rgba(161, 136, 127, 0.08);
}

/* 输入区域 */
.sweetheart-chat-input-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #FFF5F8 0%, #FFFFFF 100%);
    border-top: 1px solid #FFE8E8;
    flex-shrink: 0;
    position: relative; /* 新增 */
    z-index: 10; /* 新增：确保输入区域在最上层 */
}

.sweetheart-chat-input-area input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #FFD1DC;
    background: white;
    border-radius: 20px;
    font-size: 16px;
    outline: none;
}

/* 🔧 修复：确保输入框可以获得焦点和接收输入 */
.sweetheart-chat-input-area input {
    pointer-events: auto; /* 确保可以点击 */
    user-select: text; /* 确保可以选择文本 */
    -webkit-user-select: text; /* Safari兼容 */
}

.sweetheart-chat-input-area input:disabled {
    pointer-events: none;
    opacity: 0.6;
}


.sweetheart-chat-input-area input:focus {
    border-color: #FFB6C1;
    box-shadow: 0 0 0 3px rgba(255, 182, 193, 0.2);
}

/* 按钮样式 */
/* 🔧 修复：确保密友聊天界面的附件按钮SVG图标可见 */
.sweetheart-chat-input-area .chat-action-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f0f2f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sweetheart-chat-input-area .chat-action-btn svg {
    width: 20px;
    height: 20px;
    fill: #6c757d;
}

.sweetheart-chat-input-area .chat-action-btn.primary {
    background: linear-gradient(135deg, #FFB6C1, #FF9AAD);
    display: none; /* 默认隐藏 */
}

.sweetheart-chat-input-area.has-text .chat-action-btn.primary {
    display: flex;
}

.sweetheart-chat-input-area.has-text #sweetheartGetReplyBtn {
    display: none;
}

.sweetheart-chat-input-area .chat-action-btn.primary svg {
    fill: white;
}

/* 密友设置页面 */
#sweetheartChatSettingsPage {
    background: linear-gradient(180deg, #FFF0F5 0%, #FFE4E9 100%);
}

#sweetheartChatSettingsPage .settings-header {
    background: linear-gradient(135deg, #FFB6C1, #FFC0D9);
}

#sweetheartChatSettingsPage .settings-title {
    color: white;
}

/* 为密友聊天输入区按钮内的图片图标设置样式 */
.sweetheart-chat-input-area .chat-action-btn img {
    width: 28px; /* 设置图片宽度 */
    height: 28px; /* 设置图片高度 */
    object-fit: contain; /* 确保图片完整显示不被裁剪 */
    transition: transform 0.2s ease;
}

/* 鼠标悬停时稍微放大图片 */
.sweetheart-chat-input-area .chat-action-btn:hover img {
    transform: scale(1.15);
}

/* ========== 【最终修正版】气泡样式修正 ========== */

/* 1. 在所有气泡模式下，强制隐藏昵称元素 */
.chat-page:not(.simple-style) .message-sender-name,
.sweetheart-chat-page .message-sender-name {
    display: none;
}

/* 2. 【核心修复】在所有气泡模式下，移除父容器的gap，彻底消除空白 */
.chat-page:not(.simple-style) .message-content,
.sweetheart-chat-page .message-content {
    gap: 0;
}

/* 3. 在简洁模式下，再把gap加回来，保证昵称和消息文本有间距 */
.chat-page.simple-style .message-content {
    gap: 4px;
}

/* ====================================
   语音条消息样式
   ==================================== */

/* 语音气泡容器 - 继承 chat-bubble 的基础样式 */
.voice-message-bubble {
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    max-width: 80%;
    transition: background-color 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden !important; /* 确保进度条不会溢出气泡圆角 */
    position: relative !important; /* 为进度条的绝对定位提供参考 */
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); /* 添加点击反馈 */
    touch-action: manipulation; /* 优化触摸响应 */
}

/* 语音消息主体内容（播放图标、波形、时长） */
.voice-main-content {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative; /* 确保voice-bar的定位正常 */
    z-index: 1; /* 确保内容在进度条之上 */
    height: 28px; /* 确保有足够高度，防止被遮挡 */
}

/* 播放图标 */
.voice-play-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer !important; /* 保持指针样式 */
    /* === 新增/修改的样式 === */
    border: none; /* 移除边框 */
    background: transparent; /* 背景透明 */
    outline: none; /* 移除聚焦时的轮廓 */
    padding: 0; /* 移除内边距 */
    transition: transform 0.2s; /* 动画效果：点击时会稍微缩小 */
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
}

.voice-play-icon svg {
    width: 20px; /* 稍微大一点 */
    height: 20px;
    /* fill 颜色将由 JS 动态设置或根据父元素继承 */
    transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out; /* 让图标本身的动画更平滑 */
}

/* 播放按钮悬停效果 */
.voice-play-icon:hover {
    opacity: 0.8;
}

/* 点击时的缩放效果 */
.voice-play-icon:active {
    transform: scale(0.9);
}

/* 播放状态的图标动画 */
.voice-play-icon.playing svg path {
    /* 暂停图标的路径 */
    d: path('M6 19h4V5H6v14zm8-14v14h4V5h-4z');
    transition: d 0.2s ease-in-out; /* 路径变换动画 */
}

/* 模拟语音波形条 */
/* 语音波形条容器 */
.voice-bar {
    flex: 1;
    height: 20px;
    display: flex;
    align-items: center;
    position: relative; /* 确保.voice-bar是disclosure-arrow的定位父元素 */
    overflow: hidden;
    border-radius: 5px;
    background: transparent;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    z-index: 1; /* 确保在disclosure-arrow下方 */
    cursor: pointer !important;
    padding: 5px 0; /* 增加点击区域 */
    margin: -5px 0; /* 补偿padding */
}

.voice-bar::before { /* 静态波形图的背景 (未播放部分) */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* 默认波形颜色 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><rect x="0" y="5" width="4" height="10" fill="%23ccc"/><rect x="7" y="2" width="4" height="16" fill="%23ccc"/><rect x="14" y="8" width="4" height="4" fill="%23ccc"/><rect x="21" y="0" width="4" height="20" fill="%23ccc"/><rect x="28" y="6" width="4" height="8" fill="%23ccc"/><rect x="35" y="4" width="4" height="12" fill="%23ccc"/><rect x="42" y="10" width="4" height="0" fill="%23ccc"/><rect x="49" y="3" width="4" height="14" fill="%23ccc"/><rect x="56" y="7" width="4" height="6" fill="%23ccc"/><rect x="63" y="1" width="4" height="18" fill="%23ccc"/><rect x="70" y="9" width="4" height="2" fill="%23ccc"/><rect x="77" y="5" width="4" height="10" fill="%23ccc"/><rect x="84" y="2" width="4" height="16" fill="%23ccc"/><rect x="91" y="8" width="4" height="4" fill="%23ccc"/></svg>');
    background-size: contain;
    background-repeat: repeat-x;
    opacity: 0.5; /* 静态波形图淡一点 */
}

.voice-bar:hover {
    opacity: 0.8;
}

/* 接收消息的静态波形图颜色 */
.message-row.received .voice-bar::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><rect x="0" y="5" width="4" height="10" fill="%23666"/><rect x="7" y="2" width="4" height="16" fill="%23666"/><rect x="14" y="8" width="4" height="4" fill="%23666"/><rect x="21" y="0" width="4" height="20" fill="%23666"/><rect x="28" y="6" width="4" height="8" fill="%23666"/><rect x="35" y="4" width="4" height="12" fill="%23666"/><rect x="42" y="10" width="4" height="0" fill="%23666"/><rect x="49" y="3" width="4" height="14" fill="%23666"/><rect x="56" y="7" width="4" height="6" fill="%23666"/><rect x="63" y="1" width="4" height="18" fill="%23666"/><rect x="70" y="9" width="4" height="2" fill="%23666"/><rect x="77" y="5" width="4" height="10" fill="%23666"/><rect x="84" y="2" width="4" height="16" fill="%23666"/><rect x="91" y="8" width="4" height="4" fill="%23666"/></svg>');
}

/* 接收消息的进度条颜色 */
.message-row.received .voice-progress-fill {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><rect x="0" y="5" width="4" height="10" fill="%23000"/><rect x="7" y="2" width="4" height="16" fill="%23000"/><rect x="14" y="8" width="4" height="4" fill="%23000"/><rect x="21" y="0" width="4" height="20" fill="%23000"/><rect x="28" y="6" width="4" height="8" fill="%23000"/><rect x="35" y="4" width="4" height="12" fill="%23000"/><rect x="42" y="10" width="4" height="0" fill="%23000"/><rect x="49" y="3" width="4" height="14" fill="%23000"/><rect x="56" y="7" width="4" height="6" fill="%23000"/><rect x="63" y="1" width="4" height="18" fill="%23000"/><rect x="70" y="9" width="4" height="2" fill="%23000"/><rect x="77" y="5" width="4" height="10" fill="%23000"/><rect x="84" y="2" width="4" height="16" fill="%23000"/><rect x="91" y="8" width="4" height="4" fill="%23000"/></svg>');
}

/* 语音时长 */
.voice-duration {
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
    position: relative;
    z-index: 1; /* 确保内容在进度条之上 */
    cursor: pointer !important;
    padding: 5px;
    margin: -5px;
    user-select: none;
}

.voice-duration:hover {
    opacity: 0.7;
}

/* 密友聊天主题下的语音条样式 */
.sweetheart-chat-page .message-row.sent .voice-message-bubble {
    background: linear-gradient(135deg, #FFB6C1, #FF9AAD);
    color: white;
    box-shadow: 0 3px 8px rgba(255, 182, 193, 0.3);
}
.sweetheart-chat-page .message-row.sent .voice-play-icon svg {
    fill: white;
}
/* 密友发送的静态语音条的颜色 */
.sweetheart-chat-page .message-row.sent .voice-bar::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><rect x="0" y="5" width="4" height="10" fill="%23fff"/><rect x="7" y="2" width="4" height="16" fill="%23fff"/><rect x="14" y="8" width="4" height="4" fill="%23fff"/><rect x="21" y="0" width="4" height="20" fill="%23fff"/><rect x="28" y="6" width="4" height="8" fill="%23fff"/><rect x="35" y="4" width="4" height="12" fill="%23fff"/><rect x="42" y="10" width="4" height="0" fill="%23fff"/><rect x="49" y="3" width="4" height="14" fill="%23fff"/><rect x="56" y="7" width="4" height="6" fill="%23fff"/><rect x="63" y="1" width="4" height="18" fill="%23fff"/><rect x="70" y="9" width="4" height="2" fill="%23fff"/><rect x="77" y="5" width="4" height="10" fill="%23fff"/><rect x="84" y="2" width="4" height="16" fill="%23fff"/><rect x="91" y="8" width="4" height="4" fill="%23fff"/></svg>');
}
/* 密友发送的进度条颜色 */
.sweetheart-chat-page .message-row.sent .voice-progress-fill {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><rect x="0" y="5" width="4" height="10" fill="%23FFC0D9"/><rect x="7" y="2" width="4" height="16" fill="%23FFC0D9"/><rect x="14" y="8" width="4" height="4" fill="%23FFC0D9"/><rect x="21" y="0" width="4" height="20" fill="%23FFC0D9"/><rect x="28" y="6" width="4" height="8" fill="%23FFC0D9"/><rect x="35" y="4" width="4" height="12" fill="%23FFC0D9"/><rect x="42" y="10" width="4" height="0" fill="%23FFC0D9"/><rect x="49" y="3" width="4" height="14" fill="%23FFC0D9"/><rect x="56" y="7" width="4" height="6" fill="%23FFC0D9"/><rect x="63" y="1" width="4" height="18" fill="%23FFC0D9"/><rect x="70" y="9" width="4" height="2" fill="%23FFC0D9"/><rect x="77" y="5" width="4" height="10" fill="%23FFC0D9"/><rect x="84" y="2" width="4" height="16" fill="%23FFC0D9"/><rect x="91" y="8" width="4" height="4" fill="%23FFC0D9"/></svg>');
}
.sweetheart-chat-page .message-row.received .voice-message-bubble {
    background: #FFFFFF;
    color: #8D6E63;
    border: 1px solid #FFE4E9;
    box-shadow: 0 2px 6px rgba(161, 136, 127, 0.08);
}
.sweetheart-chat-page .message-row.received .voice-play-icon svg {
    fill: #8D6E63;
}
/* 密友接收的静态语音条的颜色 */
.sweetheart-chat-page .message-row.received .voice-bar::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><rect x="0" y="5" width="4" height="10" fill="%238D6E63"/><rect x="7" y="2" width="4" height="16" fill="%238D6E63"/><rect x="14" y="8" width="4" height="4" fill="%238D6E63"/><rect x="21" y="0" width="4" height="20" fill="%238D6E63"/><rect x="28" y="6" width="4" height="8" fill="%238D6E63"/><rect x="35" y="4" width="4" height="12" fill="%238D6E63"/><rect x="42" y="10" width="4" height="0" fill="%238D6E63"/><rect x="49" y="3" width="4" height="14" fill="%238D6E63"/><rect x="56" y="7" width="4" height="6" fill="%238D6E63"/><rect x="63" y="1" width="4" height="18" fill="%238D6E63"/><rect x="70" y="9" width="4" height="2" fill="%238D6E63"/><rect x="77" y="5" width="4" height="10" fill="%238D6E63"/><rect x="84" y="2" width="4" height="16" fill="%238D6E63"/><rect x="91" y="8" width="4" height="4" fill="%238D6E63"/></svg>');
}
/* 密友接收的进度条颜色 */
.sweetheart-chat-page .message-row.received .voice-progress-fill {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><rect x="0" y="5" width="4" height="10" fill="%23BCAAA4"/><rect x="7" y="2" width="4" height="16" fill="%23BCAAA4"/><rect x="14" y="8" width="4" height="4" fill="%23BCAAA4"/><rect x="21" y="0" width="4" height="20" fill="%23BCAAA4"/><rect x="28" y="6" width="4" height="8" fill="%23BCAAA4"/><rect x="35" y="4" width="4" height="12" fill="%23BCAAA4"/><rect x="42" y="10" width="4" height="0" fill="%23BCAAA4"/><rect x="49" y="3" width="4" height="14" fill="%23BCAAA4"/><rect x="56" y="7" width="4" height="6" fill="%23BCAAA4"/><rect x="63" y="1" width="4" height="18" fill="%23BCAAA4"/><rect x="70" y="9" width="4" height="2" fill="%23BCAAA4"/><rect x="77" y="5" width="4" height="10" fill="%23BCAAA4"/><rect x="84" y="2" width="4" height="16" fill="%23BCAAA4"/><rect x="91" y="8" width="4" height="4" fill="%23BCAAA4"/></svg>');
}

/* 转写文字区域 */
.voice-transcription {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.4);
    font-size: 13px;
    line-height: 1.5;
    position: relative;
    z-index: 0;
    pointer-events: none; /* 文字区域不接收点击事件 */
    /* 这里很重要：设置position: relative; 使得三角形可以相对定位到这个区域，并且允许文字内容正常显示 */
    cursor: pointer !important;
    user-select: text; /* 允许选择文字 */
}

.voice-transcription:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.voice-transcription .voice-text {
    pointer-events: auto; /* 但文字本身可以被选中 */
}

/* AI 接收到的语音条样式 */
.message-row.received .voice-message-bubble {
    background: #e9e9eb; /* 接收消息气泡色 */
    color: #333;
}
.message-row.received .voice-play-icon svg {
    fill: #333;
}
.message-row.received .voice-transcription {
    border-top-color: rgba(0, 0, 0, 0.2);
    color: #333;
}

/* 用户发送的语音条样式 */
.message-row.sent .voice-message-bubble {
    background: linear-gradient(135deg, #0A84FF, #0066CC); /* 发送消息气泡色 */
    color: white;
}
.message-row.sent .voice-play-icon svg {
    fill: white;
}
.message-row.sent .voice-transcription {
    border-top-color: rgba(255, 255, 255, 0.4);
    color: white;
}
/*.message-row.sent .disclosure-arrow {*/
/*    color: rgba(255, 255, 255, 0.6);*/
/*}*/

.voice-message-bubble:active {
    filter: brightness(0.9);
}


/* 播放状态动画 */
.play-tts-btn.playing svg path {
    d: path('M6 19h4V5H6v14zm8-14v14h4V5h-4z'); /* 动画到暂停图标 */
}
/* 圆形进度条 */
.play-tts-btn .circle-progress {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: rotate(-90deg); /* 从顶部开始 */
}
.play-tts-btn .circle-progress circle {
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

/* 将 TTS 按钮集成到消息流中 */
.message-row {
    flex-wrap: nowrap; /* 防止TTS按钮换行 */
}
/* AI消息的TTS按钮需要在气泡左侧 */
.message-row.received .message-content + .message-actions {
    margin-left: 0;
    margin-right: -8px; /* 微调间距 */
    color: #555;
    order: 3; /* 将播放按钮排在内容的后面 */
}
/* 我的消息的TTS按钮需要在气泡右侧 */
.message-row.sent .message-content + .message-actions {
    margin-left: -8px; /* 微调间距 */
    margin-right: 0;
    color: white;
    order: -1; /* 将播放按钮排在内容的左边，因为flex-direction:row-reverse在发送消息时 */
}
/* 针对密友聊天，调整TTS按钮的颜色 */
.sweetheart-chat-page .message-row.received .play-tts-btn {
    background: rgba(161, 136, 127, 0.1);
}

.sweetheart-chat-page .message-row.received .play-tts-btn:hover {
    background: rgba(161, 136, 127, 0.2);
}

.sweetheart-chat-page .message-row.received .play-tts-btn svg {
    fill: #8D6E63;
}
.sweetheart-chat-page .message-row.sent .play-tts-btn {
    background: rgba(255, 255, 255, 0.2);
}

.sweetheart-chat-page .message-row.sent .play-tts-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sweetheart-chat-page .message-row.sent .play-tts-btn svg {
    fill: white;
}

/* 加载状态的旋转动画 */
@keyframes tts-spinner-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.play-tts-btn .spinner {
    animation: tts-spinner-spin 1s linear infinite;
}
.play-tts-btn .spinner .path {
    stroke: currentColor;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.message-row.received .message-actions {
    order: 3; /* TTS 按钮在第三个（最右） */
    margin-left: 8px; /* TTS 按钮与内容之间间距 */
}
/* 3. 发送消息（自己）：TTS 按钮在左，头像在右，内容居中 */
.message-row.sent {
    flex-direction: row-reverse; /* 保持 Dom 顺序：TTS按钮-头像-内容，但视觉上从右往左排 */
    justify-content: flex-end; /* 整体右对齐 */
}
/* 调整发送消息的顺序和间距 */
.message-row.sent .message-chat-avatar {
    order: 1; /* 头像在第一个（最右） */
    margin-left: 8px; /* 头像与内容之间间距 */
}
.message-row.sent .message-content {
    order: 2; /* 内容在第二个 */
}
.message-row.sent .message-actions {
    order: 3; /* TTS 按钮在第三个（最左） */
    margin-right: 8px; /* TTS 按钮与内容之间间距 */
}

/* ========== 世界选择页面样式 ========== */
.world-select-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #E8F4F8 0%, #D4E9F0 100%);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2000;
    display: flex;
    flex-direction: column;
}

.world-select-page.show {
    transform: translateY(0);
}

.world-select-header {
    display: flex;
    align-items: center;
    padding: 45px 20px 30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(76, 150, 175, 0.1);
}

.world-select-header .world-select-title {
    flex: 1;
    text-align: center;
    margin-right: 36px; /* 为返回按钮留出空间，保持标题居中 */
}


.world-select-title {
    font-size: 22px;
    font-weight: 600;
    color: #2C6B8F;
    text-align: center;
}

.world-select-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.world-select-content::-webkit-scrollbar {
    display: none;
}

/* 世界卡片 */
.world-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(44, 107, 143, 0.15);
    cursor: pointer;
    transition: transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
    border: 2px solid transparent;
}

.world-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(44, 107, 143, 0.25);
    border-color: #5FB3D6;
}

.world-card-icon {
    font-size: 48px;
    text-align: center;
    margin-bottom: 16px;
}

.world-card-name {
    font-size: 18px;
    font-weight: 600;
    color: #2C6B8F;
    text-align: center;
    margin-bottom: 8px;
}

.world-card-desc {
    font-size: 13px;
    color: #7FB5D1;
    text-align: center;
    line-height: 1.5;
}

.world-card-contacts {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #E8F4F8;
}

/* 新建世界按钮 */
.world-card.new-world {
    border: 2px dashed #5FB3D6;
    background: rgba(95, 179, 214, 0.05);
}



.world-worldbooks-list {
    margin-top: 12px;
    padding: 12px;
    background: white;
    border: 2px solid #B8D9E8;
    border-radius: 10px;
    max-height: 180px;
    overflow-y: auto;
}

.world-wb-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #F0F8FB;
    cursor: pointer;
    transition: background 0.2s;
}

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

.world-wb-item:hover {
    background: #F8FCFD;
}

.world-wb-item input[type="checkbox"] {
    margin-right: 10px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: #5FB3D6;
}

.world-wb-item label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: #2C6B8F;
}

.new-world-footer {
    display: flex;
    padding: 16px;
    gap: 12px;
    background: #F0F8FB;
    border-top: 2px solid #B8D9E8;
}

.world-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.world-btn.btn-cancel {
    background: white;
    color: #7FB5D1;
    border: 2px solid #B8D9E8;
}

.world-btn.btn-cancel:hover {
    background: #F5F5F5;
    transform: translateY(-2px);
}

.world-btn.btn-save {
    background: linear-gradient(135deg, #5FB3D6, #4A9CBF);
    color: white;
    box-shadow: 0 4px 12px rgba(95, 179, 214, 0.4);
}

.world-btn.btn-save:hover {
    background: linear-gradient(135deg, #4A9CBF, #3D8AAD);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(95, 179, 214, 0.5);
}


/* ========== 世界书页面样式 - 开始 ========== */

/* 1. 世界书主页面容器 */
.worldbook-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #E8F5E9 0%, #F1F8E9 100%); /* 清新的绿色渐变 */
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1004;
    display: flex;
    flex-direction: column;
}

.worldbook-page.show {
    transform: translateY(0);
}

/* 2. 头部导航栏 */
.worldbook-header {
    display: flex;
    align-items: center;
    padding: 45px 20px 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
    flex-shrink: 0;
}

.worldbook-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #4CAF50;
    margin-right: 36px;
}

/* 3. 内容区域 */
.worldbook-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.worldbook-content::-webkit-scrollbar {
    display: none;
}

/* 4. 空状态提示 */
.worldbook-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #81C784;
    padding: 40px 20px;
}

.worldbook-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.worldbook-empty-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.worldbook-empty-hint {
    font-size: 13px;
    color: #A5D6A7;
}

/* 5. 世界书条目列表 */
.worldbook-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.worldbook-item {
    background: white;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 4px solid #4CAF50;
}

.worldbook-item:active {
    transform: scale(0.98);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
}

.worldbook-item-title {
    font-size: 16px;
    font-weight: 600;
    color: #2E7D32;
    margin-bottom: 8px;
}

.worldbook-item-category {
    font-size: 12px;
    color: #81C784;
    background: #E8F5E9;
    padding: 4px 10px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 8px;
}

.worldbook-item-preview {
    font-size: 13px;
    color: #66BB6A;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ========== 世界书弹窗样式 - 开始 ========== */

.worldbook-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1015;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(5px);
}

.worldbook-modal.show {
    opacity: 1;
    visibility: visible;
}

.worldbook-modal-card {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 340px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.worldbook-modal.show .worldbook-modal-card {
    transform: scale(1);
}

.worldbook-modal-header {
    padding: 20px;
    border-bottom: 1px solid #E8F5E9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.worldbook-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #2E7D32;
}

.worldbook-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F1F8E9;
    border: none;
    color: #4CAF50;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.worldbook-modal-close:hover {
    background: #E8F5E9;
    transform: rotate(90deg);
}

.worldbook-modal-body {
    padding: 20px;
}

.worldbook-form-group {
    margin-bottom: 20px;
}

.worldbook-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #388E3C;
    margin-bottom: 8px;
}

.worldbook-form-input,
.worldbook-form-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #C8E6C9;
    border-radius: 12px;
    font-size: 14px;
    color: #2E7D32;
    transition: border-color 0.2s;
    font-family: inherit;
}

.worldbook-form-input:focus,
.worldbook-form-textarea:focus {
    outline: none;
    border-color: #4CAF50;
}

.worldbook-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.worldbook-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #E8F5E9;
    display: flex;
    gap: 12px;
}

.worldbook-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.worldbook-btn-cancel {
    background: #F1F8E9;
    color: #689F38;
}

.worldbook-btn-cancel:active {
    background: #E8F5E9;
}

.worldbook-btn-save {
    background: linear-gradient(135deg, #66BB6A, #43A047);
    color: white;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.worldbook-btn-save:active {
    transform: scale(0.97);
}

.worldbook-btn-delete {
    background: #FFEBEE;
    color: #E53935;
}

.worldbook-btn-delete:active {
    background: #FFCDD2;
}

/* 分组选择器样式 */
.worldbook-category-selector {
    position: relative;
    cursor: pointer;
}

.category-selected {
    padding: 12px;
    border: 2px solid #C8E6C9;
    border-radius: 12px;
    background: white;
    font-size: 14px;
    color: #2E7D32;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-selected::after {
    content: '▼';
    font-size: 12px;
    color: #81C784;
    transition: transform 0.3s;
}

.worldbook-category-selector.active .category-selected::after {
    transform: rotate(180deg);
}

.category-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #C8E6C9;
    border-radius: 12px;
    margin-top: 4px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

.worldbook-category-selector.active .category-options {
    max-height: 200px;
    opacity: 1;
}

.category-option {
    padding: 12px;
    font-size: 14px;
    color: #2E7D32;
    cursor: pointer;
    transition: background 0.2s;
}

.category-option:hover {
    background: #E8F5E9;
}

.category-option.selected {
    background: #C8E6C9;
    font-weight: 600;
}

/* 分组管理按钮 */
.category-manage-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(168, 201, 245, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
    color: #4CAF50;
    font-weight: bold;
    margin-left: 8px;
}

.category-manage-btn:active {
    transform: scale(0.9);
    background: rgba(168, 201, 245, 0.25);
}

/* ========== 分组管理页面样式 - 开始 ========== */
/* ========== 分类管理页面样式 ========== */
.category-manage-page#classificationManagePage {
    z-index: 1006; /* 确保层级比世界书页面高 */
}

/* 1. 主页面容器 */
.category-manage-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #FFE8E8 0%, #F5DDD3 100%); /* 粉褐色渐变 */
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1005;
    display: flex;
    flex-direction: column;
}

.category-manage-page.show {
    transform: translateX(0);
}

/* 2. 头部导航 */
.category-manage-header {
    display: flex;
    align-items: center;
    padding: 45px 20px 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(161, 136, 127, 0.1);
    flex-shrink: 0;
}

.category-manage-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #A1887F;
    margin-right: 36px;
}

.add-category-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 192, 203, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s;
    color: #D4A5A5;
    font-weight: bold;
}

.add-category-btn:active {
    transform: scale(0.9);
    background: rgba(255, 192, 203, 0.3);
}

/* 3. 内容区域 */
.category-manage-content {
    flex: 1;
    overflow-y: auto;
    padding-top: 12px;
}

.category-manage-content::-webkit-scrollbar {
    display: none;
}

/* 4. 空状态 */
.category-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #D4A5A5;
    padding: 60px 20px;
}

.category-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.category-empty-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.category-empty-hint {
    font-size: 13px;
    color: #E6C4B8;
}

/* 5. 分组列表 */
.category-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px 20px;
}

/* 6. 分组项 */
.category-item {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(161, 136, 127, 0.08);
    overflow: hidden;
}

.category-item-header {
    display: flex;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.category-item-header:active {
    background: #FFF5F5;
}

.category-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFD1DC, #F5C9C9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 12px;
    flex-shrink: 0;
}

.category-item-info {
    flex: 1;
    min-width: 0;
}

.category-item-name {
    font-size: 16px;
    font-weight: 600;
    color: #8D6E63;
    margin-bottom: 4px;
}

.category-item-count {
    font-size: 12px;
    color: #BCAAA4;
}

.category-item-arrow {
    font-size: 18px;
    color: #D4A5A5;
    transition: transform 0.3s;
}

.category-item.expanded .category-item-arrow {
    transform: rotate(90deg);
}

/* 7. 世界书条目列表 */
.category-worldbooks {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #FFF8F5;
}

.category-item.expanded .category-worldbooks {
    max-height: 500px;
}

.worldbook-mini-item {
    padding: 12px 16px;
    border-top: 1px solid #FFE8E8;
    cursor: pointer;
    transition: background 0.2s;
}

.worldbook-mini-item:active {
    background: #FFEAEA;
}

.worldbook-mini-title {
    font-size: 14px;
    color: #8D6E63;
    margin-bottom: 4px;
}

.worldbook-mini-preview {
    font-size: 12px;
    color: #BCAAA4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== 新建分组弹窗样式 ========== */

.category-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1016;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(5px);
}

.category-modal.show {
    opacity: 1;
    visibility: visible;
}

.category-modal-card {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 340px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.category-modal.show .category-modal-card {
    transform: scale(1);
}

.category-modal-header {
    padding: 20px;
    border-bottom: 1px solid #FFE8E8;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #8D6E63;
}

.category-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFF5F5;
    border: none;
    color: #D4A5A5;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.category-modal-close:hover {
    background: #FFE8E8;
    transform: rotate(90deg);
}

.category-modal-body {
    padding: 20px;
}

.category-form-group {
    margin-bottom: 20px;
}

.category-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #A1887F;
    margin-bottom: 8px;
}

.category-form-input,
.category-form-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #FFD1DC;
    border-radius: 12px;
    font-size: 14px;
    color: #8D6E63;
    transition: border-color 0.2s;
    font-family: inherit;
}

.category-form-input:focus,
.category-form-textarea:focus {
    outline: none;
    border-color: #FFC0CB;
}

.category-form-textarea {
    min-height: 80px;
    resize: vertical;
}

.category-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #FFE8E8;
    display: flex;
    gap: 12px;
}

.category-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.category-btn-cancel {
    background: #FFF5F5;
    color: #D4A5A5;
}

.category-btn-cancel:active {
    background: #FFE8E8;
}

.category-btn-save {
    background: linear-gradient(135deg, #FFB6C1, #FFA5B8);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.3);
}

.category-btn-save:active {
    transform: scale(0.97);
}

.category-btn-delete {
    background: #FFEBEE;
    color: #E53935;
}

.category-btn-delete:active {
    background: #FFCDD2;
}

/* ========== 分组管理样式 - 结束 ========== */
/* ========== 新增：世界地图功能样式 ========== */
.world-map-preview-container {
    width: 100%;
    height: 120px;
    border: 2px dashed #B8D9E8;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.world-map-preview-container:hover {
    border-color: #5FB3D6;
    background-color: rgba(255, 255, 255, 0.9);
}

#worldMapPreview {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片不变形地填充容器 */
}

#worldMapPlaceholder {
    font-size: 14px;
    font-weight: 500;
    color: #7FB5D1;
}

.world-map-options {
    display: none; /* 默认隐藏 */
    gap: 10px;
    margin-top: 10px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.world-map-btn {
    flex: 1;
    padding: 10px;
    border: 2px solid #B8D9E8;
    border-radius: 10px;
    background: white;
    color: #2C6B8F;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.world-map-btn:hover {
    border-color: #5FB3D6;
    background-color: #F0F8FB;
}


/* ========== 世界书样式 - 结束 ========== */
/* ========== 数码像素猫组件样式 - 开始 ========== */

.cat-widget {
    position: absolute;
    width: 100%;
    height: 100%;
    /* 背景可以根据喜好调整，这里保留了原有的可爱风格 */
    background: linear-gradient(135deg, #FFE5F0 0%, #FFF0F8 100%);
    border-radius: 22px;
    padding: 16px;
    overflow: visible;
    box-shadow: 0 6px 20px rgba(161, 136, 127, 0.15);
    border: 3px solid #FFB6C1;
}

/* 像素猫主体容器 */
/* 用这段全新的代码替换旧的 .pixel-cat-body */
.pixel-cat-body {
    position: absolute;
    width: 68px;
    height: 72px; /* 稍微增加高度，为动画留出空间 */
    bottom: 40px; /* 重新微调位置 */
    left: 50%;
    transform: translateX(-50%);
    /* 新增：应用动画 */
    animation: catBreathe 2.5s ease-in-out infinite;
}


/* 用这段全新的代码替换旧的 .pixel-cat-body::before */
/* 粘贴这段全新的代码，它包含了新的绘制逻辑和动画定义 */

/* 使用 ::before 绘制猫咪的轮廓和身体主体 */
.pixel-cat-body::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    /* 这次我们用纯黑色 #222 作为基准颜色来画轮廓 */
    background: #222;

    /* 全新重绘的像素图 */
    box-shadow: /* 耳朵 */ 4px -12px 0 #222, 8px -12px 0 #222, 12px -12px 0 #222,
    32px -12px 0 #222, 36px -12px 0 #222, 40px -12px 0 #222,
    0 -8px 0 #222, 4px -8px 0 #f2c1b1, 8px -8px 0 #f2c1b1, 12px -8px 0 #c6b9b3, 16px -8px 0 #222,
    28px -8px 0 #222, 32px -8px 0 #c6b9b3, 36px -8px 0 #f2c1b1, 40px -8px 0 #f2c1b1, 44px -8px 0 #222,
    -4px -4px 0 #222, 0 -4px 0 #c6b9b3, 4px -4px 0 #c6b9b3, 12px -4px 0 #a1928b, 16px -4px 0 #a1928b, 20px -4px 0 #222,
    24px -4px 0 #222, 28px -4px 0 #a1928b, 32px -4px 0 #a1928b, 40px -4px 0 #c6b9b3, 44px -4px 0 #c6b9b3, 48px -4px 0 #222,
    -4px 0 0 #222, 0 0 #c6b9b3, 4px 0 0 #c6b9b3, 8px 0 0 #f5efed, 12px 0 0 #f5efed, 16px 0 0 #f5efed, 20px 0 0 #f5efed, 24px 0 0 #f5efed, 28px 0 0 #f5efed, 32px 0 0 #f5efed, 36px 0 0 #f5efed, 40px 0 0 #c6b9b3, 44px 0 0 #c6b9b3, 48px 0 0 #222,
        /* 眼睛和脸颊 */ -8px 4px 0 #222, -4px 4px 0 #c6b9b3, 0 4px 0 #f2c1b1, 4px 4px 0 #f5efed, 8px 4px 0 #222, 12px 4px 0 #222, 16px 4px 0 #f5efed, 20px 4px 0 #f5efed, 24px 4px 0 #222, 28px 4px 0 #222, 32px 4px 0 #f5efed, 36px 4px 0 #f2c1b1, 40px 4px 0 #c6b9b3, 44px 4px 0 #222, 48px 4px 0 #222,
    -8px 8px 0 #222, -4px 8px 0 #c6b9b3, 0 8px 0 #c6b9b3, 4px 8px 0 #f5efed, 8px 8px 0 #f5efed, 12px 8px 0 #222, 16px 8px 0 #f5efed, 20px 8px 0 #f5efed, 24px 8px 0 #222, 28px 8px 0 #f5efed, 32px 8px 0 #f5efed, 36px 8px 0 #c6b9b3, 40px 8px 0 #c6b9b3, 44px 8px 0 #222,
    -4px 12px 0 #222, 0 12px 0 #f5efed, 4px 12px 0 #f5efed, 8px 12px 0 #4b3f3a, 12px 12px 0 #4b3f3a, 16px 12px 0 #f5efed, 20px 12px 0 #f5efed, 24px 12px 0 #4b3f3a, 28px 12px 0 #4b3f3a, 32px 12px 0 #f5efed, 36px 12px 0 #f5efed, 40px 12px 0 #222,
    0 16px 0 #222, 4px 16px 0 #f5efed, 8px 16px 0 #f5efed, 12px 16px 0 #f5efed, 16px 16px 0 #f5efed, 20px 16px 0 #f5efed, 24px 16px 0 #f5efed, 28px 16px 0 #f5efed, 32px 16px 0 #f5efed, 36px 16px 0 #222,
    4px 20px 0 #222, 8px 20px 0 #222, 12px 20px 0 #4b3f3a, 16px 20px 0 #e8ded8, 20px 20px 0 #4b3f3a, 24px 20px 0 #e8ded8, 28px 20px 0 #4b3f3a, 32px 20px 0 #222,
        /* 身体 */ 8px 24px 0 #222, 12px 24px 0 #f5efed, 16px 24px 0 #f5efed, 20px 24px 0 #f5efed, 24px 24px 0 #f5efed, 28px 24px 0 #c6b9b3, 32px 24px 0 #222,
    8px 28px 0 #f5efed, 12px 28px 0 #222, 16px 28px 0 #c6b9b3, 20px 28px 0 #f5efed, 24px 28px 0 #f5efed, 28px 28px 0 #222, 32px 28px 0 #a1928b, 36px 28px 0 #222, 40px 28px 0 #c6b9b3, 44px 28px 0 #222,
    4px 32px 0 #a1928b, 8px 32px 0 #f5efed, 12px 32px 0 #f5efed, 16px 32px 0 #f5efed, 20px 32px 0 #f5efed, 24px 32px 0 #e8ded8, 28px 32px 0 #a1928b, 32px 32px 0 #c6b9b3, 36px 32px 0 #a1928b, 40px 32px 0 #222,
    0 36px 0 #222, 4px 36px 0 #4b3f3a, 8px 36px 0 #f5efed, 12px 36px 0 #f5efed, 16px 36px 0 #e8ded8, 20px 36px 0 #f5efed, 24px 36px 0 #222, 28px 36px 0 #4b3f3a, 32px 36px 0 #4b3f3a,
    -4px 40px 0 #222, 0 40px 0 #a1928b, 4px 40px 0 #f5efed, 8px 40px 0 #222, 12px 40px 0 #f5efed, 16px 40px 0 #f5efed, 20px 40px 0 #222, 28px 40px 0 #222,
    -4px 44px 0 #222, 0 44px 0 #a1928b, 4px 44px 0 #f5efed, 8px 44px 0 #222, 12px 44px 0 #f5efed, 16px 44px 0 #f5efed, 20px 44px 0 #222,
    -4px 48px 0 #222, 0 48px 0 #222, 4px 48px 0 #222, 8px 48px 0 #222, 12px 48px 0 #222, 16px 48px 0 #222, 20px 48px 0 #222;

}

/* 使用 ::after 绘制尾巴和眼睛高光 */
.pixel-cat-body::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: white; /* 基准点是眼睛高光 */
    top: 8px; /* 调整高光的垂直位置 */
    left: 12px;

    box-shadow: /* 另一只眼睛的高光 */ 16px 0 0 white,
        /* 尾巴 */ -20px 24px 0 #222, -16px 24px 0 #a1928b, -12px 24px 0 #a1928b, -8px 24px 0 #222,
    -24px 28px 0 #222, -20px 28px 0 #a1928b, -16px 28px 0 #8d7e78, -12px 28px 0 #a1928b, -8px 28px 0 #222,
    -24px 32px 0 #222, -20px 32px 0 #8d7e78, -16px 32px 0 #a1928b, -12px 32px 0 #222,
    -24px 36px 0 #222, -20px 36px 0 #222, -16px 36px 0 #222;
}

/* 定义呼吸动画 */
@keyframes catBreathe {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-2px); /* 向上轻微移动2像素 */
    }
}


/* 状态数据条容器 */
.cat-stats-container {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* 🔧 新增优化 */
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

/* 单个状态条 */
.cat-stat-item {
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.cat-stat-item:hover {
    transform: scale(1.02);
}

.cat-stat-item:last-child {
    margin-bottom: 0;
}

/* 状态标签 */
.cat-stat-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #8D6E63;
    margin-bottom: 4px;
}

.cat-stat-value {
    font-size: 10px;
    color: #A1887F;
}

/* 状态条背景 */
.cat-stat-bar-bg {
    height: 8px;
    background: #F5F5F5;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 状态条填充 */
.cat-stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFB6C1, #FF9AAD);
    border-radius: 10px;
    transition: width 0.3s ease;
    position: relative;
}

/* 不同状态的颜色 */
.cat-stat-item[data-stat="happiness"] .cat-stat-bar-fill {
    background: linear-gradient(90deg, #FFD700, #FFA500);
}

.cat-stat-item[data-stat="hunger"] .cat-stat-bar-fill {
    background: linear-gradient(90deg, #90EE90, #32CD32);
}

.cat-stat-item[data-stat="energy"] .cat-stat-bar-fill {
    background: linear-gradient(90deg, #87CEEB, #4682B4);
}

.cat-stat-item[data-stat="cleanliness"] .cat-stat-bar-fill {
    background: linear-gradient(90deg, #DDA0DD, #BA55D3);
}

/* 🔧 优化后的闪光效果 */
.cat-stat-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: translateX(-100%);
    will-change: transform; /* 提示浏览器优化此属性 */
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}


/* 猫咪对话气泡 */
.cat-speech-bubble {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 75%;
    background: white;
    padding: 10px 14px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    color: #8D6E63;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    border: 2px solid #FFB6C1;
}

.cat-speech-bubble:hover {
    background: #FFF5F5;
    transform: translateX(-50%) scale(1.03);
}

/* 气泡小尾巴 */
.cat-speech-bubble::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #FFB6C1;
}

.cat-speech-bubble::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
}

/* 删除按钮 */
.cat-widget .delete-widget-btn {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(255, 71, 87, 0.9);
    border-radius: 50%;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    z-index: 250;
    align-items: center;
    justify-content: center;
}

.cat-widget.show-delete .delete-widget-btn {
    display: flex;
}

/* ========== 修复聊天气泡顶部空白问题 ========== */

/* 1. 移除主消息文本的顶部边距 */
.chat-bubble .main-message-text {
    margin-top: 0;
}

/* 2. 当有引用内容时，才添加间距 */
.chat-bubble .quoted-message-wrapper + .main-message-text {
    margin-top: 4px;
}

/* 3. 确保气泡内第一个元素没有顶部边距 */
.chat-bubble > *:first-child {
    margin-top: 0;
}

/* 4. 确保气泡内最后一个元素没有底部边距 */
.chat-bubble > *:last-child {
    margin-bottom: 0;
}

/* 5. 如果还有问题，可以尝试减少气泡的内边距 */
.chat-bubble {
    padding: 10px 12px; /* 原来是 12px，稍微减少顶部内边距 */
}

/* 6. 确保代码块也没有额外的顶部边距 */
.chat-bubble .code-block-wrapper:first-child {
    margin-top: 0;
}

/* 针对特定父元素内部的直接子级 <br> 标签进行隐藏 */
.code-block-wrapper > br {
    display: none;
}


/* ========== 密友设置界面样式 ========== */
.sweetheart-settings-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #FFF0F5 0%, #FFE4E9 100%);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1009;
    display: flex;
    flex-direction: column;
}

.sweetheart-settings-page.show {
    transform: translateX(0);
}

/* 地图编辑页面样式 */
.map-editor-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F5F5F5;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1010;
    display: flex;
    flex-direction: column;
}

.map-editor-page.show {
    transform: translateX(0);
}

.map-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 20px 20px;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.map-editor-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.map-save-btn {
    padding: 8px 16px;
    background: #4FC3F7;
    color: white;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ... existing code ... */

/* 地图编辑页面样式 */
/* ... existing styles for map-editor-page ... */

/* ✨ 新增：地图上传按钮样式 */
.map-upload-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(168, 201, 245, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    margin-right: 8px; /* 与保存按钮的间距 */
    transition: all 0.2s;
}

.map-upload-btn:active {
    transform: scale(0.9);
    background: rgba(168, 201, 245, 0.25);
}

.map-editor-content {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

/* 修改地图容器样式 - 自适应图片 */
.map-container {
    position: relative;
    width: 100%;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: crosshair;
    /* 移除固定高度，让容器自适应内容 */
    display: inline-block;
    touch-action: none;
}

#worldMapImage {
    width: 100%;
    height: auto;
    display: block;
    max-height: 60vh; /* 限制最大高度 */
    object-fit: contain; /* 保持图片比例 */
}

/* 地图为空时的占位样式 */
.map-container.empty {
    min-height: 400px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-container.empty::before {
    content: '请先设置世界地图';
    color: #999;
    font-size: 14px;
}

/* 修改大头针样式，添加拖动状态 */
.map-pin {
    position: absolute;
    width: 32px;
    height: 32px;
    cursor: pointer;
    transform: translate(-50%, -100%);
    transition: transform 0.2s;
    z-index: 100;
    user-select: none; /* 防止选中文字 */
    -webkit-user-select: none;
    touch-action: none;
}

.map-pin.dragging {
    cursor: grabbing;
    transform: translate(-50%, -100%) scale(1.3);
    z-index: 100;
    transition: none;
    opacity: 0.9;
    pointer-events: none; /* 拖拽时忽略自身的点事件，防止闪烁 */
}

.map-pin:hover:not(.dragging) {
    transform: translate(-50%, -100%) scale(1.2);
}

/* 拖动时的提示 */
.drag-hint {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}

.drag-hint.show {
    opacity: 1;
    visibility: visible;
}

.map-pin:hover {
    transform: translate(-50%, -100%) scale(1.2);
}

.map-pin-icon {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.map-pin-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.2s;
}

.map-pin:hover .map-pin-label {
    opacity: 1;
}

.map-hint {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: #666;
}

/* 地点编辑弹窗样式 */
.location-modal-card {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 320px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#locationModal.show .location-modal-card {
    transform: scale(1);
}

.location-modal-header {
    padding: 20px;
    border-bottom: 1px solid #E0E0E0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-modal-content {
    padding: 20px;
}

.location-field {
    margin-bottom: 16px;
}

.location-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.location-input,
.location-textarea,
.location-select {
    width: 100%;
    padding: 10px;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.location-input:focus,
.location-textarea:focus,
.location-select:focus {
    outline: none;
    border-color: #4FC3F7;
}

.location-modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #E0E0E0;
}

.location-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete {
    background: #FFE8E8;
    color: #FF5252;
}

.btn-save {
    background: #4FC3F7;
    color: white;
}

.modal-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F5F5F5;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

/* ▼▼▼ 步骤二：在这里粘贴新的CSS样式 ▼▼▼ */

/* 1. 为密友聊天主页面添加背景图相关的样式和过渡效果 */
.sweetheart-chat-page {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* 为背景图切换添加一个柔和的淡入淡出动画 */
    transition: background-image 0.5s ease-in-out, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. 让消息区域的背景半透明，这样才能透出下方的背景图 */
.sweetheart-chat-messages {
    /* 将纯色背景改为带透明度的版本 */
    background-color: rgba(253, 246, 248, 0.85);
    /* 如果背景图比较亮，可以使用半透明的黑色遮罩来压暗，提升文字可读性 */
    /* background-color: rgba(0, 0, 0, 0.1); */

    /* 添加磨砂玻璃效果，让质感更高级 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
}

/* ▲▲▲ 步骤二：粘贴结束 ▲▲▲ */
/* ========== 密友聊天设置 - AI记忆轮数步进器样式 ========== */
.number-stepper {
    display: flex;
    align-items: center;
    background-color: #f0f2f5;
    border-radius: 8px;
    border: 1px solid #e0e4e8;
    overflow: hidden;
}

.stepper-btn {
    width: 28px;
    height: 28px;
    border: none;
    background-color: transparent;
    color: #8D6E63; /* 使用主题棕色 */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.stepper-btn:hover {
    background-color: #e8eaed;
}

.stepper-input {
    width: 40px;
    height: 28px;
    border: none;
    border-left: 1px solid #e0e4e8;
    border-right: 1px solid #e0e4e8;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #8D6E63;
    background-color: #fff;
    /* 隐藏原生数字输入框的箭头 */
    -moz-appearance: textfield;
}

.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ========== 世界设定编辑页面样式 ========== */
.world-settings-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #E8F4F8 0%, #D4E9F0 100%);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1011;
    display: flex;
    flex-direction: column;
}

.world-settings-page.show {
    transform: translateX(0);
}

.world-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 20px 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(76, 150, 175, 0.1);
}

.world-settings-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #2C6B8F;
}

.world-settings-save-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #5FB3D6, #4A9CBF);
    color: white;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.world-settings-save-btn:hover {
    transform: scale(1.05);
}

.world-settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.world-settings-field {
    margin-bottom: 20px;
}

.field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #2C6B8F;
}

.label-icon {
    font-size: 18px;
}

.field-input,
.field-textarea,
.field-select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #B8D9E8;
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    background: white;
    transition: all 0.2s ease;
}

.field-input:focus,
.field-textarea:focus,
.field-select:focus {
    outline: none;
    border-color: #5FB3D6;
    box-shadow: 0 0 0 3px rgba(95, 179, 214, 0.2);
}

.field-textarea {
    resize: vertical;
    min-height: 80px;
}

.field-select {
    cursor: pointer;
}

/* ========== 开始：粘贴这段全新的CSS ========== */

/* 让密友聊天输入区域也能成为附件菜单的定位参考点 */
.sweetheart-chat-input-area {
    position: relative;
}

/* 确保附件菜单在密友聊天界面也能正常工作 */
.sweetheart-chat-input-area .attachment-menu {
    position: absolute;
    bottom: 60px; /* 定位在输入框上方 */
    left: 12px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(161, 136, 127, 0.15); /* 使用主题色阴影 */
    display: flex;
    gap: 16px;
    padding: 12px;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 10;
}

.sweetheart-chat-input-area .attachment-menu.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* ========== 结束：粘贴全新的CSS ========== */
/* ========== 气泡库页面样式 ========== */

.bubble-library-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f0f4f8 0%, #d9e2ec 100%);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1003;
    display: flex;
    flex-direction: column;
}

.bubble-library-page.show {
    transform: translateX(0);
}

/* Tab切换 */
.bubble-tab-container {
    display: flex;
    gap: 8px;
    padding: 12px 20px 0;
    background: transparent;
}

.bubble-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    transition: all 0.2s;
}

.bubble-tab.active {
    color: #333;
    background: white;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

/* 编辑器容器 */
.bubble-editor-container {
    padding: 0 20px 20px;
}

/* 代码输入区域 */
.bubble-code-section {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

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

.bubble-code-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.bubble-example-btn {
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bubble-example-btn:active {
    transform: scale(0.95);
}

.bubble-code-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #333;
    background: #f8f9fa;
    resize: vertical;
    transition: border-color 0.2s;
}

.bubble-code-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
}

/* 操作按钮 */
.bubble-action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.bubble-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bubble-btn-preview {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: white;
}

.bubble-btn-apply {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: white;
}

.bubble-btn-reset {
    background: #f1f2f6;
    color: #666;
}

.bubble-btn:active {
    transform: scale(0.97);
}

/* 帮助说明 */
.bubble-help-section {
    padding: 0 20px;
}

.bubble-help-content {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.bubble-help-content p {
    margin: 8px 0;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

/* ========== 预览框样式 ========== */

.bubble-preview-box {
    margin-top: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #e0e0e0;
}

.preview-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 600;
}

.preview-chat-container {
    background: white;
    padding: 12px;
    border-radius: 8px;
    min-height: 50px;
}

.preview-message {
    display: flex;
    margin: 4px 0;
}

.preview-message.sent {
    justify-content: flex-end;
}

.preview-message.received {
    justify-content: flex-start;
}

.preview-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    word-break: break-word;
    /* 默认样式 */
    background: #e9e9eb;
    color: #333;
}

.preview-message.sent .preview-bubble {
    background: #0A84FF;
    color: white;
}

/* ========== 预设库样式 ========== */

.preset-library-section {
    margin-top: 24px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 16px;
}

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

.preset-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preset-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 13px;
}

.preset-card {
    background: white;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
}

.preset-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

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

.preset-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.preset-date {
    font-size: 11px;
    color: #999;
}

.preset-preview-mini {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 8px;
}

.mini-bubble {
    flex: 1;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 11px;
    text-align: center;
    /* 默认样式会被内联样式覆盖 */
}

.preset-actions {
    display: flex;
    gap: 8px;
}

.preset-btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.apply-btn {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: white;
}

.apply-btn:active {
    transform: scale(0.95);
}

.delete-btn {
    background: #ffe5e5;
    color: #ff4757;
}

.delete-btn:active {
    transform: scale(0.95);
    background: #ffcccc;
}

/* 修改保存预设按钮样式 */
.bubble-btn-save-preset {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: white;
}

.delete-btn {
    background: #ffe5e5;
    color: #ff4757;
}

/* ▼▼▼ 在这里粘贴新样式 ▼▼▼ */
.preset-tag {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    background: #e9ecef;
    color: #868e96;
    user-select: none; /* 不可选中 */
}

/* ▲▲▲ 粘贴结束 ▲▲▲ */
/* ====================================
   1. 修复：头部状态按钮样式 (让按钮重新显示出来)
   ==================================== */
.status-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s;
    /* 确保按钮在头部的布局中占位 */
    flex-shrink: 0;
}

.status-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.status-btn svg {
    width: 22px;
    height: 22px;
    fill: white; /* 这里的颜色取决于你的 Header 背景。如果是浅色Header，这里可能要改 #333 */
    opacity: 0.9;
    transition: opacity 0.2s;
}

/* 针对密友聊天（粉色主题）的特殊适配 */
.sweetheart-chat-header .status-btn svg {
    fill: white; /* 在粉色渐变背景上用白色图标 */
}

/* ====================================
   2. 新增：记忆HUD (悬浮表格) 样式
   ==================================== */
.memory-hud {
    position: absolute;
    top: 75px; /* 位于头部下方 */
    right: 12px; /* 靠右悬浮 */
    width: 280px;

    /* 磨砂玻璃质感 */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(161, 136, 127, 0.15); /* 柔和阴影 */
    border: 1px solid rgba(255, 255, 255, 0.8);
    z-index: 900; /* 高于消息内容 */
    padding: 12px 16px;

    /* 默认隐藏状态 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}

/* 显示状态 */
.memory-hud.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.memory-hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(141, 110, 99, 0.2);
}

.hud-title {
    font-size: 13px;
    font-weight: 700;
    color: #8D6E63; /* 棕色主题文字 */
    display: flex;
    align-items: center;
    gap: 6px;
}

.hud-edit-btn {
    font-size: 14px;
    cursor: pointer;
    color: #BCAAA4;
    transition: color 0.2s;
}
.hud-edit-btn:hover { color: #8D6E63; }

/* 表格样式 */
.memory-table-container {
    max-height: 200px; /* 防止内容太长遮挡聊天 */
    overflow-y: auto;
}

.memory-table {
    width: 100%;
    border-collapse: collapse;
}

.memory-table th {
    text-align: left;
    font-size: 11px;
    color: #BCAAA4;
    padding-bottom: 6px;
    font-weight: 500;
}

.memory-table td {
    font-size: 12px;
    color: #5D4037;
    padding: 6px 0;
    vertical-align: top;
    line-height: 1.4;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.memory-table tr:last-child td {
    border-bottom: none;
}

/* 第一行（最新状态）高亮 */
.memory-table tr:first-child td {
    color: #E91E63;
    font-weight: 600;
}
/* ========== 极简记忆编辑弹窗样式 ========== */
.simple-edit-card {
    background: #fff;
    width: 85%;
    max-width: 320px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(161, 136, 127, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #FFD1DC; /* 粉色边框 */
}

#simpleStatusEditModal.show .simple-edit-card {
    transform: scale(1);
}

.simple-edit-header {
    background: linear-gradient(135deg, #FFB6C1, #FFC0D9);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.simple-edit-header h3 {
    margin: 0;
    font-size: 16px;
    color: white;
    font-weight: 600;
}

.simple-edit-header .close-btn {
    color: white;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.simple-edit-body {
    padding: 20px;
    background: #FFF5F8; /* 极淡粉色背景 */
}

.simple-input-group {
    margin-bottom: 16px;
}

.simple-input-group label {
    display: block;
    font-size: 13px;
    color: #8D6E63; /* 棕色文字 */
    margin-bottom: 8px;
    font-weight: 600;
}

.simple-input-group input,
.simple-input-group textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #FFE4E9;
    border-radius: 10px;
    font-size: 14px;
    color: #5D4037;
    background: white;
    font-family: inherit;
    transition: border-color 0.2s;
}

.simple-input-group input:focus,
.simple-input-group textarea:focus {
    outline: none;
    border-color: #FF9AAD;
}

.simple-edit-footer {
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    background: white;
    border-top: 1px solid #FFE4E9;
}

.simple-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.simple-btn.cancel {
    background: #F5F5F5;
    color: #999;
}

.simple-btn.save {
    background: linear-gradient(135deg, #FFB6C1, #FF9AAD);
    color: white;
    box-shadow: 0 4px 10px rgba(255, 182, 193, 0.4);
}

.simple-btn.save:active {
    transform: scale(0.95);
}

/* ========== HTML渲染气泡样式 - 开始 ========== */

/* style.css (修正后的代码) */

/* 1. 渲染气泡容器：移除固定高度，改为 auto */
.render-bubble {
    padding: 0;
    overflow: hidden;
    background: #fff;
    width: 300px;
    height: auto !important; /* 保持自适应 */
    min-height: 100px;

    /* 🔥 关键修复：设置最大高度，防止无限增长 */
    max-height: 500px;
    overflow-y: auto; /* 内容过长时显示滚动条 */

    display: flex;
    flex-direction: column;
    transition: height 0.2s ease;
}


/* 2. iframe 样式：确保它是块级元素 */
.render-iframe {
    width: 100%;
    /* height: 100%;  <-- 删除这个，由 JS 动态控制内联样式 */
    border: none;
    display: block;
    overflow: hidden; /* 隐藏 iframe 内部滚动条 */
}

/* 3. 在密友聊天界面，给渲染气泡一个可爱的边框 */
.sweetheart-chat-page .render-bubble {
    border: 2px solid #FFC0D9;
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.3);
}

/* ========== 针对 iframe 消息的事件捕获覆盖层 ========== */
.iframe-event-capture-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* 确保在 iframe 上方 */
    cursor: pointer; /* 鼠标样式，提示可交互 */
    background: transparent; /* 完全透明 */
    pointer-events: auto; /* 关键：始终捕获事件 */
}


/* ========== HTML渲染气泡样式 - 结束 ========== */
/* ========== 联系人库页面样式 (最终版) ========== */
.contact-library-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f0f2f5; /* 更简洁的背景色 */
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1004; /* 比设置页高一级 */
    display: flex;
    flex-direction: column;
}

.contact-library-page.show {
    transform: translateX(0);
}

.contact-library-page .settings-header {
    background: #fff;
}

.contact-library-content {
    flex: 1;
    overflow-y: auto;
}

.contact-library-content::-webkit-scrollbar {
    display: none;
}

.contact-library-search-wrapper {
    padding: 12px 20px;
    background: #f0f2f5;
    position: sticky;
    top: 0;
    z-index: 5;
}

.contact-library-search {
    width: 100%;
    padding: 12px 18px;
    border: none;
    border-radius: 22px;
    background: #fff;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.contact-library-search:focus {
    outline: none;
    box-shadow: 0 0 0 2px #cce4ff;
}

#contactLibraryList {
    padding: 0 0 20px;
}

.contact-library-section-title {
    padding: 16px 20px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-library-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: white;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f0f2f5;
}

.contact-library-item:active {
    background: #f8f9fa;
}

.contact-library-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 14px;
    flex-shrink: 0;
    overflow: hidden;
    background: #e9ecef;
}

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

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

.contact-library-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.contact-library-type {
    font-size: 12px;
    color: #888;
}

.contact-library-type.sweetheart {
    color: #ff6384;
}

.contact-library-item .settings-arrow {
    font-size: 16px;
    color: #ccc;
    font-weight: bold;
}

/* ========== 左滑删除功能 CSS (修正版) 开始 ========== */

/* 1. 滑动项的通用外层包裹容器 */
.contact-item-wrapper,
.sweetheart-item-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #ff3b30; /* iOS风格的红色删除背景 */
    transition: all 0.2s ease-out; /* 用于删除时的动画 */
}

/* 为普通联系人列表项设置边距和圆角 */
.contact-item-wrapper {
    margin: 0; /* 普通联系人列表项之间由border分隔，不需要外边距 */
}

/* 为密友列表项设置边距和圆角 */
.sweetheart-item-wrapper {
    margin: 0 12px 10px;
    border-radius: 16px;
}

/* 2. 可滑动的内容层 */
.contact-item-content,
.sweetheart-item-content {
    position: relative;
    z-index: 2;
    background: white; /* 核心修正：确保内容层有坚实的不透明背景 */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 普通联系人内容层的样式 */
.contact-item-content {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid #f0f2f5;
}

/* 密友内容层的样式 */
.sweetheart-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    border-radius: 16px;
}

/* 3. 底层的操作层 (放置删除按钮) */
.swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 1;
}

/* 4. 删除按钮本身 */
.swipe-delete-btn {
    width: 80px;
    height: 100%;
    border: none;
    background: transparent;
    color: white;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 5. 当 JS 添加 is-swiped 类时，内容层向左滑动 */
.is-swiped .contact-item-content,
.is-swiped .sweetheart-item-content {
    transform: translateX(-80px);
}

/* ========== 左滑删除功能 CSS 结束 ========== */
/* ========== 联系人实例ID显示样式 ========== */

/* 普通角色卡ID区域 */
.character-id-section {
    background: #f8f9fa;
    padding: 12px 16px;
    border-radius: 12px;
    margin: 16px 0;
    border: 2px dashed #e0e0e0;
}

.id-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.id-icon {
    font-size: 14px;
}

.id-text {
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

.id-value {
    font-family: 'Courier New', 'Monaco', monospace;
    font-size: 11px;
    color: #333;
    background: white;
    padding: 6px 10px;
    border-radius: 6px;
    word-break: break-all;
    border: 1px solid #e0e0e0;
}

/* 密友角色卡ID区域 */
.sweetheart-id-section {
    background: #FFF5F5;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 2px dashed #FFD1DC;
}

.sweetheart-id-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #8D6E63;
}

.sweetheart-id-value {
    font-family: 'Courier New', 'Monaco', monospace;
    font-size: 11px;
    color: #8D6E63;
    background: white;
    padding: 6px 10px;
    border-radius: 6px;
    word-break: break-all;
    border: 1px solid #FFD1DC;
}

/* 联系人列表项中显示ID的样式 */
.contact-instance-id,
.sweetheart-instance-id {
    font-size: 10px;
    color: #999;
    font-family: 'Courier New', monospace;
    margin-top: 2px;
}

/* style.css */

/* ========== 联系人库多选功能样式 (已修复点击问题) ========== */

/* 1. 右上角按钮容器 (不变) */
.contact-lib-actions {
    display: flex;
    align-items: center;
}

/* 2. 多选切换按钮 (不变) */
.multi-select-toggle {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(168, 201, 245, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
}

.multi-select-toggle:active {
    transform: scale(0.9);
    background: rgba(168, 201, 245, 0.25);
}

/* 3. 多选工具栏 (不变) */
.multi-select-toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ... 其他 toolbar-btn 样式保持不变 ... */
.toolbar-btn {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.delete-btn {
    background: #FFE8E8;
    color: #FF5252;
}

.clone-btn {
    background: #E3F2FD;
    color: #2196F3;
}

.done-btn {
    background: linear-gradient(135deg, #66BB6A, #43A047);
    color: white;
}


/* 4. 🔥【核心修复】多选模式下的联系人项样式 */
.contact-library-item.multi-select-mode {
    position: relative; /* 保持相对定位用于伪元素 */
    cursor: pointer; /* 确保整个项目都是可点击的 */
    /* 移除之前的 padding-left */
}

/* 🔥【核心修复】将头像和信息向右移动，为复选框腾出空间 */
.contact-library-item.multi-select-mode .contact-library-avatar {
    margin-left: 36px; /* 原来是 14px，增加 22px 空间 */
}

/* 复选框的伪元素 */
.contact-library-item.multi-select-mode::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 6px;
    background: white;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5; /* 确保在最上层 */
    pointer-events: none; /* 关键：让伪元素不捕获鼠标事件 */
}

/* 选中状态的复选框 */
.contact-library-item.multi-select-mode.selected::before {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: #667eea;
    transform: translateY(-50%) scale(1.1); /* 增加一个轻微的放大动画 */
}

/* 复选框内的 "✓" 符号 */
.contact-library-item.multi-select-mode.selected::after {
    content: '✓';
    position: absolute;
    left: 24.5px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 15px;
    font-weight: bold;
    z-index: 6; /* 比复选框更高一层 */
    pointer-events: none; /* 关键：同样不捕获鼠标事件 */
}

/* 5. 选中状态高亮 (不变) */
.contact-library-item.selected {
    background: #F0F4FF;
}

/* ========== 联系人库统一角色卡样式 ========== */
.library-character-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1015; /* 高于联系人库页面 (1004) */
    display: none;
}

.library-character-modal.show {
    display: block;
}

.library-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.library-character-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 340px;
    max-height: 85vh;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    animation: libraryModalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes libraryModalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.library-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 2px solid #f0f2f5;
}

.library-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.library-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f2f5;
    border: none;
    color: #666;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.library-close-btn:hover {
    background: #e0e4e8;
    transform: rotate(90deg);
}

.library-card-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.library-card-content::-webkit-scrollbar {
    width: 6px;
}

.library-card-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.library-section {
    margin-bottom: 20px;
}

.library-avatar-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.library-avatar {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    background: #f0f2f5;
}

.library-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.library-avatar-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    text-align: center;
    padding: 4px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s;
}

.library-avatar:hover .library-avatar-overlay {
    opacity: 1;
}

.library-basic-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.library-id-display {
    font-size: 11px;
    color: #999;
    font-family: 'Courier New', monospace;
    background: #f8f9fa;
    padding: 6px 10px;
    border-radius: 6px;
}

.library-id-label {
    font-weight: 600;
}

.library-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.library-label-sm {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

.library-input,
.library-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e4e8;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.library-input:focus,
.library-textarea:focus {
    outline: none;
    border-color: #667eea;
}

.library-textarea {
    resize: vertical;
}

.library-toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: background 0.2s;
    user-select: none;
}

.library-toggle-header:hover {
    background: #e9ecef;
}

.library-toggle-arrow {
    font-size: 12px;
    color: #999;
    transition: transform 0.3s;
}

.library-toggle-arrow.open {
    transform: rotate(180deg);
}

.library-extended-fields,
.library-worldbooks-list {
    margin-top: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.library-field {
    margin-bottom: 12px;
}

.library-field:last-child {
    margin-bottom: 0;
}

.library-worldbooks-list {
    max-height: 200px;
    overflow-y: auto;
}

.library-wb-item {
    display: flex;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
}

.library-wb-item:hover {
    background: white;
}

.library-wb-item input[type="checkbox"] {
    margin-right: 10px;
    cursor: pointer;
    accent-color: #667eea;
}

.library-wb-item label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.library-card-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 2px solid #f0f2f5;
}

.library-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.library-btn-cancel {
    background: #f0f2f5;
    color: #666;
}

.library-btn-cancel:hover {
    background: #e0e4e8;
}

.library-btn-save {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.library-btn-save:hover {
    transform: scale(1.02);
}

/*
====================================
密友聊天 - 世界地图弹窗样式
====================================
*/

.world-map-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(161, 136, 127, 0.5); /* 使用主题棕色作为背景 */
    backdrop-filter: blur(5px);
}

.world-map-modal {
    position: relative;
    z-index: 1;
    width: 95%;
    max-width: 360px;
    background: linear-gradient(180deg, #FFF5F5 0%, #FFE8E8 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(255, 182, 193, 0.3);
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#worldMapPopup.show .world-map-modal {
    transform: scale(1);
}

.world-map-header {
    padding: 16px;
    text-align: center;
    border-bottom: 2px dashed #FFD1DC;
    position: relative;
}

.world-map-title {
    font-size: 16px;
    font-weight: 700;
    color: #8D6E63;
    margin: 0;
}

.world-map-close {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFF0F5;
    color: #D4A5A5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
}

.world-map-close:hover {
    transform: translateY(-50%) rotate(90deg);
}

.world-map-content {
    padding: 16px;
}

.map-popup-container {
    position: relative;
    width: 100%;
    background: #fdfdfd;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 2px solid #FFD1DC;
}

#mapPopupImage {
    width: 100%;
    height: auto;
    display: block;
}

.map-popup-hint {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    color: #BCAAA4;
    font-style: italic;
}

/* 地图上的大头针样式 */
.map-popup-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map-popup-pin:hover {
    transform: translate(-50%, -50%) scale(1.2);
    z-index: 10;
}

.map-popup-pin-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.map-popup-pin-label {
    background: rgba(255, 255, 255, 0.9);
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #8D6E63;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
}

/* ========== HTML渲染气泡样式 - 开始 ========== */

/* 1. 渲染气泡容器：允许内部滚动 */
.render-bubble {
    padding: 0;
    background: #fff;
    width: 300px; /* 默认宽度 */

    /* 🔥 核心修改 1: 允许垂直滚动，隐藏水平滚动 */
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* iOS 惯性滚动支持 */

    /* 保持自适应高度逻辑 */
    height: auto !important;
    min-height: 100px;

    /* 🔥 核心修改 2: 严格限制最大高度，超过这个高度就出现滚动条 */
    max-height: 70vh; /* 你可以根据需要调整这个值，比如 60vh */

    display: flex;
    flex-direction: column;
    transition: height 0.2s ease;

    /* 确保气泡本身能接收滚动事件 */
    pointer-events: auto;
}


/* 2. iframe 样式 */
.render-iframe {
    width: 100%;
    /* 高度由内容撑开，或者填满父容器 */
    min-height: 100px;
    border: none;
    display: block;
}

/* 3. 在密友聊天界面，给渲染气泡一个可爱的边框 */
.sweetheart-chat-page .render-bubble {
    border: 2px solid #FFC0D9;
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.3);
}

/* ========== HTML渲染气泡样式 - 结束 ========== */

/* ========== iframe 消息气泡的事件捕获遮罩 (修改版) ========== */
.iframe-event-capture-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;

    /* 🔥 核心修改 3: 必须设为 none！
       这样手指/鼠标才能穿透这层遮罩，直接触摸到下面的 iframe 进行滑动或点击按钮。
       之前的 auto 会像玻璃一样挡住操作。
    */
    pointer-events: none !important;

    background: transparent;
}
/* (可选) 如果你希望长按气泡边缘还能触发菜单，保留这个，但中间内容区域必须能交互 */
.chat-bubble.render-bubble {
    position: relative;
    /* 确保气泡本身可以被点击 */
    pointer-events: auto;
}

/* 🎯 只在需要时激活事件捕获（例如长按时） */
/* 这是为了确保在长按检测过程中，iframe 内部的元素不会吞噬事件 */
.render-bubble .iframe-event-overlay {
    pointer-events: none; /* 默认关闭 */
}

/* 🎯 只在需要时激活事件捕获（例如长按时） */
.chat-bubble.render-bubble:active .iframe-event-overlay,
.chat-bubble.render-bubble.selecting .iframe-event-overlay {
    pointer-events: auto;
}

/* ========== 消息多选功能样式 ========== */

/* 多选工具栏 */
.multi-select-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolbar-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-btn.delete-btn {
    background: #ff3b30;
    color: white;
}

.toolbar-btn.delete-btn:active {
    background: #d32f2f;
    transform: scale(0.95);
}

.toolbar-btn.done-btn {
    background: #0A84FF;
    color: white;
}

.toolbar-btn.done-btn:active {
    background: #0066CC;
    transform: scale(0.95);
}

/* 消息行的多选模式 */
.message-row.multi-select-mode {
    padding-left: 40px;
    position: relative;
}

/* 复选框容器 */
.message-checkbox-container {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* 自定义复选框样式 */
.message-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.message-checkbox.checked {
    background: #0A84FF;
    border-color: #0A84FF;
}

.message-checkbox.checked::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* 密友聊天的复选框样式 */
.sweetheart-chat-page .message-checkbox.checked {
    background: #FFB6C1;
    border-color: #FFB6C1;
}

/* 2. 修复多选失败：在多选模式下，禁止内容区捕获点击事件 */
/* 当消息行处于 multi-select-mode 时，它的内容子元素不再响应鼠标，
   这样点击就会冒泡到 .message-row，从而触发 toggleMessageSelection */
.message-row.multi-select-mode .message-content {
    pointer-events: none !important;
}

/* 但要保留复选框的点击能力 (虽然上面pointer-events:none通常只影响后代，
   但为了保险起见，如果复选框在message-content内的话要排除，
   不过你的复选框是在 row 里的，所以上面的代码应该足够。
   为了双重保险，我们可以显式指定) */
.message-row.multi-select-mode .message-checkbox-container {
    pointer-events: auto !important;
}

/* ========== 面具管理功能样式 - 开始 ========== */

/* 面具管理页面 */
.mask-library-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1002;
    display: flex;
    flex-direction: column;
}

.mask-library-page.show {
    transform: translateX(0);
}

/* 面具列表 */
#maskLibraryList {
    padding: 0 20px 20px;
}

.mask-item {
    background: white;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s;
}

.mask-item:active {
    transform: scale(0.98);
    background: #f8f9fa;
}

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

.mask-item-icon {
    font-size: 24px;
    margin-right: 12px;
}

.mask-item-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.mask-item-desc {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}

.mask-item-preview {
    font-size: 12px;
    color: #999;
    line-height: 1.4;
}

/* 空状态 */
.mask-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
}

.mask-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.mask-empty-text {
    font-size: 16px;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
}

.mask-empty-hint {
    font-size: 13px;
    color: #999;
    text-align: center;
}

/* 面具编辑弹窗 */
.mask-modal-card {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 360px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.mask-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.mask-modal-header .header-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.modal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f0f0;
    border: none;
    color: #666;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close-btn:hover {
    background: #e0e0e0;
    transform: rotate(90deg);
}

.mask-modal-content {
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
}

.mask-modal-content::-webkit-scrollbar {
    width: 6px;
}

.mask-modal-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.mask-field {
    margin-bottom: 20px;
}

.mask-field.required-field .mask-label {
    font-weight: 600;
}

.mask-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
}

.label-icon {
    font-size: 16px;
}

.required-star {
    color: #ff3b30;
    font-weight: bold;
}

.mask-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.mask-input:focus {
    outline: none;
    border-color: #667eea;
}

.mask-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    transition: border-color 0.2s;
}

.mask-textarea:focus {
    outline: none;
    border-color: #667eea;
}

.mask-modal-footer {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid #eee;
}

.mask-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mask-btn-cancel {
    background: #f0f0f0;
    color: #666;
}

.mask-btn-cancel:hover {
    background: #e0e0e0;
}

.mask-btn-delete {
    background: #ff3b30;
    color: white;
}

.mask-btn-delete:hover {
    background: #e02020;
}

.mask-btn-save {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.mask-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 面具选择列表样式（用于角色卡中） */
.sweetheart-masks-list,
.library-masks-list,
.char-wb-list {
    margin-top: 8px;
    padding: 8px;
    background: #fdfdfd;
    border: 2px solid #eee;
    border-radius: 10px;
    max-height: 150px;
    overflow-y: auto;
}

.mask-checkbox-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

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

.mask-checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    cursor: pointer;
    accent-color: #667eea;
}

.mask-checkbox-item label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: #555;
}

/* ========== 面具管理功能样式 - 结束 ========== */
/* ========== 线上/线下模式切换按钮样式 ========== */
.mode-toggle-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFB6C1, #FFC0D9);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 182, 193, 0.3);
    margin-right: 100px;
}

.mode-toggle-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.5);
}

.mode-toggle-btn:active {
    transform: scale(0.95);
}


/* ========== 地点提示卡片样式（持久化版本）========== */
.location-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px auto;
    padding: 16px;
    max-width: 85%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    border: 2px solid #FFD1DC;
    box-shadow: 0 4px 12px rgba(161, 136, 127, 0.15);
    /* ✅ 新增：确保在聊天历史中正确显示 */
    position: relative;
}

.location-notice-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.location-notice-text {
    flex: 1;
}

.location-notice-text strong {
    display: block;
    font-size: 16px;
    color: #8D6E63;
    margin-bottom: 6px;
}

.location-notice-text p {
    font-size: 14px;
    color: #BCAAA4;
    margin: 0;
    line-height: 1.4;
}

/* ========== AI记忆轮数设置样式 ========== */
.number-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stepper-btn {
    width: 32px;
    height: 32px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    font-size: 18px;
    font-weight: bold;
    color: #667eea;
    cursor: pointer;
    transition: all 0.2s;
}

.stepper-btn:hover {
    background: #f0f4ff;
    border-color: #667eea;
}

.stepper-btn:active {
    transform: scale(0.95);
}

.stepper-input {
    width: 50px;
    height: 32px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.stepper-input:focus {
    outline: none;
    border-color: #667eea;
}

/* ========== 记忆存储中心样式 ========== */
.memory-center-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.memory-center-page.show {
    transform: translateX(0);
}

/* Tab切换 */
.memory-tab-container {
    display: flex;
    background: white;
    border-radius: 12px;
    margin: 12px 20px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.memory-tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.memory-tab.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* 内容区域 */
.memory-content-area {
    flex: 1;
    overflow-y: auto;
}

/* 知识点卡片 */
.knowledge-card {
    background: white;
    margin: 0 20px 16px;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.knowledge-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.knowledge-card-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.knowledge-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.knowledge-card-date {
    font-size: 11px;
    color: #999;
}

.knowledge-card-badge {
    background: #667eea;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.knowledge-card-content {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
}

.knowledge-card-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.knowledge-card-source {
    font-size: 12px;
    color: #888;
}

.knowledge-card-actions {
    display: flex;
    gap: 8px;
}

.knowledge-action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-knowledge-btn {
    background: #ffebee;
    color: #f44336;
}

.delete-knowledge-btn:hover {
    background: #ffcdd2;
}

/* 空状态 */
.memory-empty {
    text-align: center;
    padding: 60px 20px;
}

.memory-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.memory-empty-text {
    font-size: 16px;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
}

.memory-empty-hint {
    font-size: 13px;
    color: #999;
    line-height: 1.5;
}

#newWorldModal {
    z-index: 2001; /* 确保这个值高于 #worldSelectPage 的 2000 */
}

/*
====================================
状态弹窗 - 右上角编辑按钮样式
====================================
*/

/* 2. 编辑按钮容器 */
.status-popup-edit {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精确垂直居中 */
    right: 58px; /* 关键：定位在关闭按钮的左边 (28px的关闭按钮宽度 + 28px的自身宽度) */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFF0F5; /* 使用主题色 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* 3. 悬停效果 */
.status-popup-edit:hover {
    background: #FFE4E9;
    transform: translateY(-50%) scale(1.1); /* 增加一个轻微的放大效果 */
}

/* 4. SVG图标样式 */
.status-popup-edit svg {
    width: 18px;
    height: 18px;
    fill: #D4A5A5; /* 使用主题色 */
}

/*
====================================
状态弹窗 - 就地编辑模式样式
====================================
*/

/* 1. 默认状态下的样式 */
.status-popup-modal .status-input,
.status-popup-modal .status-popup-save,
.status-popup-modal .header-title-editing {
    display: none; /* 默认隐藏所有输入框、保存按钮和编辑标题 */
}

/* 2. 编辑模式下的样式 (当 .is-editing 类被添加到弹窗上时) */
.status-popup-modal.is-editing .status-value,
.status-popup-modal.is-editing .status-popup-edit,
.status-popup-modal.is-editing .header-title-static {
    display: none; /* 隐藏所有只读文本、编辑按钮和静态标题 */
}

.status-popup-modal.is-editing .status-input,
.status-popup-modal.is-editing .status-popup-save,
.status-popup-modal.is-editing .header-title-editing {
    display: flex; /* 显示所有输入框、保存按钮和编辑标题 */
}

/* 3. 输入框的具体样式 */
.status-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: #8D6E63;
    border: 2px solid #FFD1DC; /* 使用主题粉色作为边框 */
    border-radius: 8px;
    background: white;
    transition: all 0.2s;
}

.status-input:focus {
    outline: none;
    border-color: #FF9AAD;
    box-shadow: 0 0 0 3px rgba(255, 182, 193, 0.3); /* 聚焦时发光效果 */
}

/* 4. 修改头部样式以适应新按钮 */
.status-popup-header .header-title-static,
.status-popup-header .header-title-editing {
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    font-size: 16px;
    font-weight: 700;
    color: #8D6E63;
    position: absolute; /* 1. 开启相对定位 */
}

.status-popup-save {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 58px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e8f5e9; /* 保存按钮用绿色 */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.status-popup-save:hover {
    background: #c8e6c9;
    transform: translateY(-50%) scale(1.1);
}

.status-popup-save svg {
    width: 22px;
    height: 22px;
    fill: #4caf50;
}

/* style.css */
/* 1. 基础图标容器样式（最终无背景版） */
.settings-icon {
    width: 32px;
    height: 32px;
    margin-right: 14px;

    /* 核心修改：让背景完全透明 */
    background-color: transparent;
    /* 移除为背景板设计的圆角 */
    border-radius: 0;
    /* 背景图片通用属性 */
    background-size: contain; /* contain能确保图标完整显示 */
    background-position: center;
    background-repeat: no-repeat;
}

/* 2. 为每个图标单独设置 `background-image` */
/* 和上次一样，这里只设置图片 URL */
.icon-api {
    background-image: url('https://chatbotcos.weixin.qq.com/chatbot/30-openaiassets_68f3834db21084aab1644317b57b1737_469401762089707973.png');
}

/* style.css (在 settings-icon 定义下) */
.icon-voice {
    background-image: url('https://yanfa-upload.oss-cn-zhangjiakou.aliyuncs.com/images/20251112/1762885109_wqbs_tpzb.png'); /* 替换为你的语音图标 */
}

.icon-database {
    background-image: url('https://s3plus.meituan.net/opapisdk/op_ticket_1_5677168484_1762885229487_qdqqd_1tiq2h.png');
}

.icon-fullscreen {
    background-image: url('https://kycloud4.koyoo.cn/202511127acfa202511120219417826.png');
}

.icon-storage {
    background-image: url('https://static.eeo.cn/upload/images/20251112/b1d57cfe371561654181.png');
}

.icon-contacts {
    background-image: url('https://kycloud4.koyoo.cn/20251112fc1d4202511120222082324.png');
}

.icon-mask {
    background-image: url('https://static.eeo.cn/upload/file/20251112/1762884823848355.png');
}

.icon-memory {
    background-image: url('https://static.eeo.cn/upload/images/20251112/130697f11739d9c51667.png');
}

.icon-beautify {
    background-image: url('https://kycloud4.koyoo.cn/202511129f0ea202511120216506324.png');
}

.icon-bubble {
    background-image: url('https://www.yn12377.cn/jubao/upload/smjb/2025/11/12/83b37e19fd754b9abab38a2d15649c99.png');
}

.icon-widget {
    background-image: url('https://yanfa-upload.oss-cn-zhangjiakou.aliyuncs.com/images/20251112/1762885109_wqbs_tpzb.png');
}

.icon-danger {
    background-image: url('https://file.zhuyitai.com/feedback/202511/12/ad03506e64f04510b9ab6e85c5dff324.png');
}

/*
====================================
聊天头部 - 标题与模式图标布局优化
====================================
*/

/* 1. 让头部容器内的元素能更好地对齐 */
.sweetheart-chat-header {
    position: relative; /* 确保绝对定位的子元素有参考 */
}

/* 2. 将标题和模式图标组合在一起，并让它们居中 */
.sweetheart-chat-title {
    position: static; /* 移除绝对定位，让它参与flex布局 */
    transform: none; /* 移除transform */
    margin: 0; /* 移除外边距 */

    /* 使用flex布局让标题和后面的图标对齐 */
    display: flex;
    align-items: center;
    gap: 8px; /* 标题和图标之间的间距 */

    /* 关键：将组合体移动到页面中心 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding-top: 30px; /* 适配状态栏高度 */
}

/* 3. 调整模式切换按钮的样式 */
.mode-toggle-btn {
    /* 移除原有的圆形背景和边框 */
    background: none;
    box-shadow: none;
    width: auto; /* 宽度自适应 */
    height: auto; /* 高度自适应 */
    border-radius: 0;

    /* 让它在flex布局中垂直居中 */
    display: flex;
    align-items: center;
}

/* 4. 设置图标图片的大小 */
.mode-toggle-btn img {
    height: 1.2em; /* 核心修改：让图标高度与文字大小关联 (1.2倍文字高度) */
    width: auto; /* 核心修改：宽度自动调整，以保持图片原始比例不失真 */
    opacity: 0.7; /* 让图标柔和一点 */
    transition: opacity 0.2s, transform 0.2s;
}

/* 5. 鼠标悬停时增加交互效果 */
.mode-toggle-btn:hover img {
    opacity: 1;
    transform: scale(1.1);
}

/* ========== 测试功能样式 ========== */

/* 测试配置弹窗 */
.test-config-card {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 340px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#testConfigModal.show .test-config-card {
    transform: scale(1);
}

.test-config-header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.test-config-content {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.test-field {
    margin-bottom: 20px;
}

.test-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.knowledge-selector {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 12px;
    /*max-height: 200px;*/
    /*overflow-y: auto;*/
}

.knowledge-checkbox-item {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background 0.2s;
}

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

.knowledge-checkbox-item:hover {
    background: #f8f9fa;
}

.knowledge-checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 3px;
    cursor: pointer;
    accent-color: #667eea;
}

.knowledge-checkbox-label {
    flex: 1;
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}

.test-config-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
}

.test-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.test-btn-cancel {
    background: #f0f0f0;
    color: #666;
}

.test-btn-generate {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.test-btn-generate:active {
    transform: scale(0.97);
}

/* 测试确认弹窗 */
.test-ready-card {
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    max-width: 300px;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#testReadyModal.show .test-ready-card {
    transform: scale(1);
}

.test-ready-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.test-ready-card h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

.test-ready-card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
}

.test-ready-actions {
    display: flex;
    gap: 12px;
}

.test-btn-start {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: white;
}

/* 测试页面 */
.test-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f7f8fa;
    z-index: 2500 !important;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.test-page.show {
    transform: translateY(0);
}

.test-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 12px 12px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.test-timer {
    font-size: 16px;
    font-weight: 600;
    color: #667eea;
    font-family: 'Courier New', monospace;
}

.test-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.test-question {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.question-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.question-number {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.question-type {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.question-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.6;
    margin-bottom: 16px;
}

.question-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.option-item:hover {
    background: #f8f9fa;
    border-color: #667eea;
}

.option-item.selected {
    background: #e8eaf6;
    border-color: #667eea;
}

.option-item input[type="radio"] {
    margin-right: 12px;
    cursor: pointer;
    accent-color: #667eea;
}

.option-label {
    flex: 1;
    font-size: 14px;
    color: #555;
}

.answer-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 14px;
    resize: vertical;
    min-height: 60px;
}

.answer-input:focus {
    outline: none;
    border-color: #667eea;
}

.test-footer {
    padding: 16px 20px;
    background: white;
    border-top: 1px solid #e0e0e0;
}

.test-submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.test-submit-btn:active {
    transform: scale(0.98);
}

/* 测试结果弹窗 */
.test-result-card {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 360px;
    max-height: 80vh;
    /*overflow: hidden;*/
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex; /* 新增：启用flex布局，让子元素可以分配空间 */
    flex-direction: column; /* 新增：让子元素垂直排列 */
}

#testResultModal.show .test-result-card {
    transform: scale(1);
}

.test-result-header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.test-result-content {
    padding: 30px 20px;
    flex: 1; /* 新增：让内容区占据所有可用的剩余空间 */
    overflow-y: auto; /* 新增：当内容超出时，在这个区域出现滚动条 */
}

.score-display {
    text-align: center;
    margin-bottom: 30px;
}

.score-number {
    font-size: 72px;
    font-weight: bold;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.score-label {
    font-size: 18px;
    color: #666;
    margin-top: 8px;
}

.score-details {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
}

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

.detail-label {
    font-size: 14px;
    color: #666;
}

.detail-value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.test-result-footer {
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
}

.test-btn-close {
    width: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

/* 错题解析区域 */
.wrong-answers-section {
    margin-top: 20px;
}

.wrong-answers-section .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}

.wrong-answer-item {
    background: #fff5f5;
    border-left: 3px solid #ff3b30;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 8px;
}

.wrong-q-number {
    font-size: 12px;
    color: #ff3b30;
    font-weight: 600;
    margin-bottom: 6px;
}

.wrong-q-text {
    font-size: 13px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

.wrong-answer-row {
    display: flex;
    align-items: baseline;
    margin: 4px 0;
    font-size: 12px;
}

.answer-label {
    font-weight: 600;
    margin-right: 6px;
    min-width: 80px;
}

.answer-label.wrong {
    color: #ff3b30;
}

.answer-label.correct {
    color: #34c759;
}

.answer-text {
    flex: 1;
    color: #555;
}

/*
====================================
状态历史记录功能 - 样式
====================================
*/

/* 1. "我的状态" 区域的头部容器，使用 Flex 布局 */
.my-status-header {
    display: flex;
    align-items: center;
    gap: 8px; /* 图标和文字之间的间距 */
    margin-bottom: 12px;
}

/* 2. "历史记录" 图标按钮样式 */
.status-history-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFF0F5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.status-history-btn:hover {
    background: #FFE4E9;
    transform: scale(1.1);
}

.status-history-btn svg {
    width: 16px;
    height: 16px;
    fill: #D4A5A5;
}

/* 3. 历史记录弹窗样式 */
.status-history-modal {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 340px;
    background: linear-gradient(180deg, #FFF5F5 0%, #FFE8E8 100%);
    border: 3px solid #FFB6C1;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(255, 182, 193, 0.3);
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.status-history-header {
    padding: 16px 20px;
    border-bottom: 2px dashed #FFD1DC;
    position: relative;
    text-align: center;
}

.status-history-title {
    font-size: 16px;
    font-weight: 700;
    color: #8D6E63;
    margin: 0;
}

.status-history-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-history-content::-webkit-scrollbar {
    width: 6px;
}

.status-history-content::-webkit-scrollbar-track {
    background: #FFE8E8;
}

.status-history-content::-webkit-scrollbar-thumb {
    background: #FFB6C1;
    border-radius: 3px;
}

/* 4. 单条历史记录项样式 */
.history-item {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid #FFD1DC;
    position: relative;
}

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

.history-item-date {
    font-size: 11px;
    font-weight: 600;
    color: #BCAAA4;
}

.history-item-delete-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFE4E9;
    color: #D4A5A5;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.history-item-delete-btn:hover {
    background: #FFB6C1;
    color: white;
    transform: rotate(90deg);
}

.history-status-section {
    font-size: 12px;
    color: #8D6E63;
    padding-left: 10px;
    border-left: 3px solid #FFC0D9;
}

.history-status-section h5 {
    font-size: 12px;
    color: #A1887F;
    margin-bottom: 6px;
}

.history-status-section p {
    margin: 4px 0;
}

/* 5. 历史记录为空时的占位符样式 */
.history-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #D4A5A5;
    min-height: 200px;
}

.history-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.history-empty-text {
    font-size: 14px;
    font-weight: 600;
}

/* 在 style.css 中添加 */
/* 当滑动时，暂时禁用高消耗的 backdrop-filter */
.body.is-swiping .dock,
.body.is-swiping .folder-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.8); /* 提供一个降级背景 */
}

#widgetManager .settings-content {
    overflow-y: auto !important;
    max-height: 75vh !important; /* 限制最大高度，强制显示滚动条 */
}

#savedWidgetsList {
    overflow-y: auto;
    max-height: 60vh; /* 确保列表可滚动 */
}
/* ========== 同步组管理样式 - 开始 ========== */

/* 我的状态标题栏 */
.my-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.my-status-header h4 {
    margin: 0;
}

/* 同步按钮 */
.status-sync-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFB6C1, #FF9AAD);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 182, 193, 0.3);
}

.status-sync-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.4);
}

.status-sync-btn:active {
    transform: scale(0.95);
}

.status-sync-btn svg {
    width: 18px;
    height: 18px;
}

/* 同步弹窗 */
.status-sync-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1012;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.status-sync-popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

.status-sync-popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(161, 136, 127, 0.5);
    backdrop-filter: blur(4px);
}

.status-sync-popup-modal {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #FFF5F5 0%, #FFE8E8 100%);
    border: 3px solid #FFB6C1;
    border-radius: 20px;
    width: 85%;
    max-width: 340px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(255, 182, 193, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.status-sync-popup-overlay.show .status-sync-popup-modal {
    transform: scale(1);
}

.status-sync-popup-header {
    padding: 20px;
    border-bottom: 2px dashed #FFD1DC;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.status-sync-title {
    font-size: 16px;
    font-weight: 700;
    color: #8D6E63;
    margin: 0;
}

.status-sync-popup-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.status-sync-popup-content::-webkit-scrollbar {
    width: 6px;
}

.status-sync-popup-content::-webkit-scrollbar-track {
    background: #FFE8E8;
}

.status-sync-popup-content::-webkit-scrollbar-thumb {
    background: #FFB6C1;
    border-radius: 3px;
}

/* 同步状态信息 */
.sync-status-info {
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    margin-bottom: 20px;
}

.sync-status-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.sync-status-text {
    font-size: 14px;
    color: #8D6E63;
    line-height: 1.5;
}

/* 同步组成员列表 */
.sync-group-members {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sync-member-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.sync-member-item.is-me {
    border-color: #FFB6C1;
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.2), rgba(255, 154, 173, 0.2));
}

.sync-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: #fff;
    border: 2px solid #FFE8E8;
}

.sync-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sync-member-info {
    flex: 1;
}

.sync-member-name {
    font-size: 14px;
    font-weight: 600;
    color: #8D6E63;
    margin-bottom: 2px;
}

.sync-member-badge {
    font-size: 11px;
    color: #BCAAA4;
}

.sync-member-badge.active {
    color: #FF9AAD;
    font-weight: 600;
}

.sync-member-status {
    font-size: 20px;
}

.sync-member-status.active {
    color: #4CAF50;
}

.sync-member-status.inactive {
    color: #999;
    opacity: 0.5;
}

/* 底部按钮 */
.status-sync-popup-footer {
    padding: 16px 20px;
    border-top: 2px dashed #FFD1DC;
    flex-shrink: 0;
}

.status-sync-toggle-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.status-sync-toggle-btn.join {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
    color: white;
}

.status-sync-toggle-btn.leave {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
}

.status-sync-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.status-sync-toggle-btn:active {
    transform: translateY(0);
}

/* ========== 同步组管理样式 - 结束 ========== */
/* ========== 消息渲染异常防御 ========== */
.chat-bubble:empty::before {
    content: '[空消息]';
    color: #999;
    font-style: italic;
}

.render-iframe {
    min-height: 100px; /* 确保iframe有最小高度 */
    background: #f5f5f5; /* 加载时的背景色 */
}

/* 防止异常内容破坏布局 */
.chat-bubble * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* style.css */

/* ▼▼▼ 在这里粘贴新增的错误提示框CSS ▼▼▼ */
.error-modal {
    z-index: 3000; /* 确保在最顶层 */
    display: none; /* 默认隐藏 */
}

.error-modal .modal-content {
    background: #fff;
    border: 3px solid #ff4757; /* 醒目的红色边框 */
    box-shadow: 0 10px 30px rgba(255, 71, 87, 0.3);
}

.error-icon {
    font-size: 48px;
    margin-bottom: 16px;
    animation: shake 0.5s;
}

.error-modal h3 {
    color: #c0392b; /* 深红色标题 */
}

.error-modal p {
    color: #7f8c8d; /* 灰色描述文字 */
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px) rotate(-2deg); }
    75% { transform: translateX(5px) rotate(2deg); }
}
/* ▲▲▲ CSS代码粘贴结束 ▲▲▲ */

/* 优化触摸响应 */
.chat-action-btn,
.attachment-item,
.action-option {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* ============================
   红包功能 - 样式 (修复版)
============================ */
/* 1. 聊天气泡中的红包样式 */
.red-packet-bubble {
    background-color: #FA9D3B; /* 微信红包的橙色 */
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px; /* 稍微加宽一点 */
    transition: background-color 0.3s;
    user-select: none;
}

.red-packet-bubble.opened {
    background-color: #FAD0A3; /* 打开后的浅橙色 */
    cursor: default;
}

.red-packet-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.red-packet-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止文字溢出 */
}

.red-packet-greeting {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.red-packet-type {
    font-size: 12px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    opacity: 0.9;
}

/* ============================
   红包弹窗样式修正版
============================ */
/* 弹窗整体卡片 */
.red-packet-creator {
    width: 300px; /* 固定宽度，防止塌陷 */
    background: #F3F3F3; /* 微信灰背景 */
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    animation: rpModalIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative; /* 确保定位准确 */
}

@keyframes rpModalIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 红色头部 */
.rp-creator-header {
    height: 50px;
    background: #E55743; /* 经典的红包红 */
    color: #F8D69A; /* 金色字体 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.rp-creator-close {
    position: absolute;
    left: 16px;
    font-size: 20px;
    color: #F8D69A; /* 叉号也用金色 */
    cursor: pointer;
    padding: 10px; /* 增加点击区域 */
}

.rp-creator-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.rp-creator-body {
    padding: 0; /* 移除内边距，让里面的行贴边 */
    background: white;
    display: flex;
    flex-direction: column;
}

.rp-greeting-field {
    margin-top: 0; /* 留言框紧贴着也行，或者留一点空隙 */
    border-top: 1px solid #eee;
}

/* 输入框行容器 */
.rp-amount-field, .rp-greeting-field {
    background: white;
    padding: 16px 20px;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 左右两端对齐 */
    margin-top: 20px; /* 与上一行的间距 */
}

.rp-amount-field {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rp-amount-label {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    flex-shrink: 0; /* 防止文字被挤压 */
}

.rp-amount-input {
    flex: 1; /* 占据中间剩余空间 */
    min-width: 0; /* 🔥 关键修复：防止Flex子元素溢出 */
    border: none;
    font-size: 24px;
    text-align: right; /* 数字靠右 */
    font-weight: bold;
    color: #333;
    background: transparent;
    outline: none;
    height: 30px;
}
.rp-amount-input:focus, .rp-greeting-input:focus {
    outline: none;
}

.rp-amount-unit {
    font-size: 16px;
    color: #333;
    flex-shrink: 0;
    margin-left: 4px;
}

/* 隐藏数字输入框的小箭头 */
.rp-amount-input::-webkit-outer-spin-button,
.rp-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rp-greeting-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #333;
    outline: none;
}

.rp-greeting-input::placeholder {
    color: #999;
}

.rp-creator-footer {
    padding: 30px 20px;
    text-align: center;
    background: #F3F3F3;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rp-display-amount {
    font-size: 40px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.rp-display-amount span {
    font-family: 'DIN Alternate', sans-serif; /* 尝试用数字字体 */
}

.rp-send-btn {
    width: 80%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: #E55743;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rp-send-btn.disabled {
    background: #FFAD9F;
    cursor: not-allowed;
}

/* 3. 开红包的弹窗样式 */
#redPacketOpenModal {
    background: transparent;
    backdrop-filter: none;
}
.rp-opener-backdrop {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 5;
}

.rp-opener-card {
    position: relative;
    z-index: 10;
    width: 280px;
    height: 480px;
    /* 修正渐变方向 */
    background: linear-gradient(180deg, #E55743 0%, #D94632 100%);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform: translateY(-100vh);
    animation: rpOpenerFall 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes rpOpenerFall {
    to { transform: translateY(0); }
}

.rp-cover, .rp-details {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 增加内边距 */
    padding: 0;
    transition: opacity 0.5s ease;
}

/* 红包上半圆弧 */
.rp-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10%; /* 扩大一点防止边缘漏缝 */
    width: 120%;
    height: 100px;
    background: #D94632; /* 深一点的红色 */
    border-radius: 0 0 50% 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.rp-sender-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
}

.rp-sender-avatar {
    width: 48px; height: 48px;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 8px;
    border: 1px solid rgba(0,0,0,0.1);
}
.rp-sender-avatar img, .rp-sender-avatar span {
    width: 100%; height: 100%;
    object-fit: cover;
    font-size: 28px;
    display: flex; align-items: center; justify-content: center;
}

.rp-sender-name {
    font-size: 16px;
    color: #F8D69A;
    font-weight: 500;
}

.rp-greeting {
    position: relative;
    z-index: 1;
    margin-top: 24px;
    font-size: 22px;
    color: #F8D69A;
    font-weight: 500;
}

.rp-open-btn {
    width: 90px;
    height: 90px;
    background: #F8D69A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.rp-open-btn:active {
    transform: scale(0.95);
}

.rp-open-btn.spinning {
    animation: spin 1s linear infinite;
    font-size: 0; /* 旋转时隐藏文字 */
}
/* 旋转时显示一个圈圈，或者整图旋转 */
.rp-open-btn.spinning::after {
    content: "开";
    font-size: 36px;
}
@keyframes spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* 打开后的样式 */
/* 详情页（打开后的白底页） */
.rp-details {
    opacity: 0;
    background: #F7F7F7;
    transition-delay: 0.3s;
    pointer-events: none; /* 未显示时不可点 */
}
.rp-opener-card.is-opened .rp-cover {
    opacity: 0;
    pointer-events: none;
}
.rp-opener-card.is-opened .rp-details {
    opacity: 1;
    pointer-events: auto;
}
.rp-details-amount {
    margin-top: 100px;
    font-size: 50px;
    font-weight: 500;
    color: #CFB53B; /* 金色或者黑色 */
}
.rp-details-amount span:last-child {
    font-size: 14px;
    color: #333;
    margin-left: 4px;
    font-weight: normal;
}
.rp-details-greeting {
    margin-top: 10px;
    font-size: 14px;
    color: #999;
}
.rp-details-tip {
    position: absolute;
    bottom: 20px;
    font-size: 12px;
    color: #5583A8; /* 链接蓝 */
}
/* ========== [最高优先级版本] 密友聊天头像显示控制 ========== */

/* 1. 默认隐藏头像和发送者名称（降低优先级，方便被覆盖）*/
.sweetheart-chat-page .message-chat-avatar,
.sweetheart-chat-page .message-sender-name {
    display: none;
}

/* 2. ✅ 开启头像显示时，使用更高的优先级强制显示 */
.sweetheart-chat-page.show-avatars .message-chat-avatar {
    display: flex !important; /* 使用 !important 确保优先级最高 */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background: #FFF0F5;
    border: 2px solid #FFE8E8;
}

/* 3. 头像内的图片样式 */
.sweetheart-chat-page.show-avatars .message-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 4. 头像内的emoji/文字样式 */
.sweetheart-chat-page.show-avatars .message-chat-avatar .initials {
    font-size: 18px;
    line-height: 1;
    color: #D4A5A5;
}

/* 5. ✅ 也让发送者名称显示出来（可选，如果需要的话）*/
.sweetheart-chat-page.show-avatars .message-sender-name {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

/* 6. 消息行的基础flex布局 */
.sweetheart-chat-page.show-avatars .message-row {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    margin-bottom: 12px;
    padding: 0 2px;
    width: 100%;
}

/* 7. ✅ 接收的消息（对方）：头像在左，内容在右 */
.sweetheart-chat-page.show-avatars .message-row.received {
    justify-content: flex-start !important;
    flex-direction: row !important;
}

/* 8. ✅ 发送的消息（自己）：通过order让头像显示在右侧 */
.sweetheart-chat-page.show-avatars .message-row.sent {
    justify-content: flex-end !important;
    flex-direction: row !important;
}

/* 9. ✅ 核心技巧：使用CSS的order属性调整sent消息的视觉顺序 */
/* 因为DOM顺序统一为：头像 → 内容，所以用order让sent消息的头像显示在后面 */
.sweetheart-chat-page.show-avatars .message-row.sent .message-chat-avatar {
    order: 2; /* 头像排在后面（右侧）*/
}

.sweetheart-chat-page.show-avatars .message-row.sent .message-content {
    order: 1; /* 内容排在前面（左侧）但整体靠右 */
}

/* 10. 接收消息保持默认order（头像在左，内容在右）*/
.sweetheart-chat-page.show-avatars .message-row.received .message-chat-avatar {
    order: 1;
}

/* 调整接收消息的顺序和间距 */
.message-row.received .message-chat-avatar {
    order: 1; /* 头像在第一个 */
    margin-right: 8px; /* 头像与内容之间间距 */
}

.sweetheart-chat-page.show-avatars .message-row.received .message-content {
    order: 2;
}

.message-row.received .message-content {
    order: 2; /* 内容在第二个 */
}

/* 11. 消息内容容器的样式 */
.sweetheart-chat-page.show-avatars .message-content {
    max-width: calc(100% - 50px);
    display: flex;
    flex-direction: column;
}

/* 12. 接收消息的内容左对齐 */
.sweetheart-chat-page.show-avatars .message-row.received .message-content {
    align-items: flex-start;
}

/* 13. 发送消息的内容右对齐 */
.sweetheart-chat-page.show-avatars .message-row.sent .message-content {
    align-items: flex-end;
}

/* 14. 气泡自适应内容，不超出容器 */
.sweetheart-chat-page.show-avatars .chat-bubble {
    max-width: 100%;
    word-wrap: break-word;
    word-break: break-word;
}

/* 15. 红包消息的宽度限制 */
.sweetheart-chat-page.show-avatars .red-packet-bubble {
    max-width: 220px;
}

/* 16. 图片消息的特殊处理 */
.sweetheart-chat-page.show-avatars .chat-bubble.image-only {
    max-width: 200px;
    padding: 0;
    background: transparent;
}

.sweetheart-chat-page.show-avatars .chat-bubble.image-only img {
    border-radius: 8px;
}

/* 17. 代码块的宽度限制 */
.sweetheart-chat-page.show-avatars .code-block-wrapper {
    max-width: calc(100vw - 120px);
}

/* 18. iframe消息的特殊处理 */
.sweetheart-chat-page.show-avatars .render-bubble {
    max-width: 280px;
    min-width: 200px;
}

/*
====================================
 语音条进度动画 - 【最终版】
====================================
*/

/*!* 1. 关键帧动画：定义箭头从左到右的滑动行为 *!*/
/*@keyframes disclosureArrowSlide {*/
/*  from {*/
/*    !* 动画开始时，箭头在最左边 (稍微向右偏移一点点，视觉效果更好) *!*/
/*    left: 2%;*/
/*  }*/
/*  to {*/
/*    !* 动画结束时，箭头在最右边 (同样留一点边距) *!*/
/*    left: 98%;*/
/*  }*/
/*}*/

/* 2. 让 voice-bar 成为箭头定位的参考父元素 */
.voice-bar {
    position: relative; /* 核心：让箭头可以相对它定位 */
    overflow: hidden;   /* 确保箭头不会超出轨道 */
}


/* 同时，让进度条填充也动起来 */
.voice-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* 初始宽度为0 */
    background: rgba(0,0,0,0.1);
    border-radius: 5px;
    transition: width 0.1s linear; /* 平滑过渡 */
    z-index: 1; /* 确保在箭头下方 */
}

.voice-message-bubble.is-playing .voice-progress-fill {
  /* JS会直接更新宽度，不需要CSS动画 */
}

/* AI接收到的消息，进度条填充颜色 */
.message-row.received .voice-progress-fill {
    background: rgba(0,0,0,0.2);
}

/* 我方发送的消息，进度条填充颜色 */
.message-row.sent .voice-progress-fill {
    background: rgba(255,255,255,0.2);
}

/* 密友聊天主题色 */
.sweetheart-chat-page .message-row.sent .voice-progress-fill {
    background: rgba(255,255,255,0.3);
}
.sweetheart-chat-page .message-row.received .voice-progress-fill {
   background: rgba(141, 110, 99, 0.2);
}

/* 播放/加载中图标的样式 */
.voice-play-icon.loading .spinner {
    width: 20px;
    height: 20px;
    animation: tts-spinner-spin 1s linear infinite;
}
.voice-play-icon.loading .spinner .path {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 5;
    fill: none;
    animation: dash 1.5s ease-in-out infinite;
}
@keyframes tts-spinner-spin {
    100% { transform: rotate(360deg); }
}
@keyframes dash {
  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* 移除可能的遮挡层 */
.message-row::before,
.message-row::after,
.chat-bubble::before,
.chat-bubble::after {
    pointer-events: none !important;
}

/* 确保消息容器不会干扰 */
.message-content {
    pointer-events: none;
}

.message-content > * {
    pointer-events: auto;
}

/* 移除可能的遮挡 */
.voice-message-bubble::before,
.voice-message-bubble::after {
    pointer-events: none !important;
}

/* 确保加载动画不会遮挡 */
.voice-play-icon.loading {
    pointer-events: none;
}

.voice-play-icon:not(.loading) {
    pointer-events: auto !important;
}

/* ========== 密友聊天输入框按钮切换逻辑 (修复版) ========== */

/* 1. 默认状态 (输入框无字) */
/* 隐藏发送按钮 (爱心) */
#sweetheartSendMsgBtn {
    display: none !important;
}
/* 显示接收按钮 (星星/信封) */
#sweetheartGetReplyBtn {
    display: flex !important;
}

/* 2. 输入状态 (输入框有字，父容器有 .has-text 类) */
/* 显示发送按钮 */
.sweetheart-chat-input-area.has-text #sweetheartSendMsgBtn {
    display: flex !important;
}
/* 隐藏接收按钮 */
.sweetheart-chat-input-area.has-text #sweetheartGetReplyBtn {
    display: none !important;
}

/* ========== 小说书架样式 (修复版) ========== */
.novel-shelf-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F2F2F7;
    z-index: 1300; /* 层级很高，所以必须确保被移出屏幕 */

    /* 核心隐藏逻辑：默认向右平移100%，并隐藏可见性 */
    transform: translateX(100%);
    visibility: hidden;

    /* 过渡动画 */
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.35s;

    display: flex;
    flex-direction: column;
    border-radius: 0;
}

/* 当添加了 .show 类时的样式 */
.novel-shelf-page.show {
    transform: translateX(0); /* 移回屏幕中间 */
    visibility: visible;      /* 设为可见 */
}

/* 1. 书架容器 */
.novel-shelf-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;

    display: grid;
    /* 固定分成3列，每列占据1份可用空间 */
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    align-content: start;

    gap: 20px 15px;
}

/* 2. 单本书的容器 */
.book-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;

    /* 🔥【核心修复】🔥 */
    /* min-width: 0 允许Grid子项在空间不足时收缩，而不是被长文本撑大 */
    min-width: 0;
    width: 100%; /* 占满格子的宽度 */
}

/* 3. 封面样式 */
.book-cover {
    width: 100%;
    /* 锁定 2:3 比例，高度自动计算 */
    aspect-ratio: 2 / 3;

    border-radius: 6px;
    background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%);
    box-shadow: 2px 4px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
    overflow: hidden;
}

/* 4. 封面上的文字预览修正 */
.book-title-preview {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);

    /* 🔥 防止长英文/数字不换行撑大容器 🔥 */
    word-break: break-all;
    white-space: normal;

    line-height: 1.4;
    max-height: 80%;
    overflow: hidden;
}

.book-name-label {
    font-size: 12px;
    color: #333;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-delete-hint {
    font-size: 10px;
    color: #999;
    margin-top: -4px;
}

/* ========== 小说阅读器加载动画 ========== */
.reader-loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #8D6E63;
    z-index: 100;
}

.reader-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #E0E0E0;
    border-top: 4px solid #8D6E63;
    border-radius: 50%;
    animation: reader-spin 1s linear infinite;
}

.reader-loading-text {
    font-size: 14px;
    font-weight: 500;
    color: #8D6E63;
    text-align: center;
}

@keyframes reader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ========== 修正后的：阅读器样式 (Screen基准版) ========== */
.novel-reader-page {
    position: absolute;
    top: 0;
    left: 0;

    /* 🔥 核心：强制宽度和高度占满父级 (.screen) */
    width: 100% !important;
    height: 100% !important;

    background-color: #E6E2D3; /* 羊皮纸色 */
    z-index: 1400;

    /* 翻页动画 */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.35s;

    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    border-radius: 0;

    /* 移除所有内边距，确保容器就是屏幕大小 */
    padding: 0 !important;
    box-sizing: border-box;
}

.novel-reader-page.show {
    transform: translateX(0);
    visibility: visible;
}

/* --- 核心阅读容器 --- */
.reader-container {
    display: block; /* 确保是块级 */
    width: 100%;

    /* 除去顶部和底部的安全区域，你可以根据需要调整这个高度 */
    height: calc(100% - 60px);
    margin-top: 100px;
    margin-bottom: 50px;

    /* 横向滚动设置 */
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;

    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;

    position: relative;

    /* 🔥 核心：零内边距，零外边距，确保 contentBox 宽度 = 屏幕宽度 */
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;

    /* 🔥 新增：强制滚动吸附 (CSS Scroll Snap) */
    /* 这是一个双重保险，浏览器会在滚动停止时自动对齐到最近的一页 */
    scroll-snap-type: x mandatory;
}
.reader-container::-webkit-scrollbar { display: none; }

/* 修改 #readerContent 样式 */
#readerContent {
    height: 100%;
    width: 100%;

    /* 关键设置 */
    column-gap: 0 !important;
    column-fill: auto;

    padding: 0 !important;
    box-sizing: border-box;
}
/* 修改段落样式，确保没有横向溢出 */
#readerContent p {
    /* 你的现有样式... */
    margin: 0 0 1em 0;
    text-indent: 2em;
    font-size: 19px;
    line-height: 1.8;
    color: #2c2c2c;
    text-align: justify;

    /* 视觉留白交给 P 标签 */
    padding: 0 24px;
    box-sizing: border-box;

    /* 防止段落被拦腰截断 */
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;

    /* 🔥 新增：让每一页的内容都作为吸附点 */
    scroll-snap-align: start;
}
/* 顶部标题栏容器 */
.reader-header-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 增加顶部内边距，避开刘海屏/状态栏 */
    padding: 50px 16px 10px 16px !important;
    background-color: rgba(230, 226, 211, 0.95); /* 与背景色一致的半透明色 */
    backdrop-filter: blur(10px);
    z-index: 10;
    display: flex;
    align-items: center;
    /* justify-content: center; */ /* 如果你想让标题绝对居中，取消这行的注释 */
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

/* 优化标题栏，使其能显示章节标题 */
#headerTitle {
    font-size: 15px; /*稍微减小一点以容纳长标题*/
    font-weight: 500;
    color: #5d5d5d;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
    transition: opacity 0.3s;
}

/* 章节切换时的淡入淡出动画类 */
.fade-out-content {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
.fade-in-content {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

/* 底部浮动菜单 - 黑色胶囊风格 */
.reader-float-menu {
    position: absolute;
    bottom: 40px; /* 距离底部的高度 */
    left: 50%;
    transform: translateX(-50%);

    /* 胶囊容器样式 */
    background: rgba(30, 30, 30, 0.9); /* 深色背景 */
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 50px; /* 大圆角 */

    display: flex;
    align-items: center;
    gap: 20px; /* 两个按钮之间的间距 */

    z-index: 20;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);

    /* 动画 */
    transition: opacity 0.3s, transform 0.3s;
}

/* 隐藏时的状态（配合 JS 的 hidden 类） */
.reader-float-menu.hidden {
    display: flex; /* 保持 flex 布局以便测量 */
    opacity: 0;
    bottom: 20px;
    pointer-events: none;
}

/* 菜单按钮样式 */
.menu-pill-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #fff; /* 白色文字 */
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.9;
}

.menu-pill-btn:active {
    opacity: 0.6;
}

/* 按钮图标 */
.menu-pill-btn svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

/* 中间的分隔线 */
.menu-pill-divider {
    width: 1px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* ========== 阅读器底部系统栏样式 (新增) ========== */

/* 1. 系统栏容器：固定在底部 */
.reader-system-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44px; /* 系统栏高度 */

    /* 布局：两端对齐 */
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* 间距 */
    padding: 0 24px;
    padding-bottom: 14px; /* 适配手机底部安全区 */

    /* 样式 */
    font-size: 13px;
    color: #7d7568; /* 深灰褐色，适合羊皮纸背景 */
    background: transparent; /* 透明背景 */
    z-index: 99; /* 确保在最上层 */
    font-family: Menlo, Monaco, 'Courier New', monospace; /* 数字用等宽字体好看 */
    pointer-events: none; /* 让点击穿透，不影响翻页 */
}

/* 优化系统栏，让页码显示更清晰 */
.reader-progress {
    font-size: 12px;
    color: #999;
}

/* 3. 右侧信息容器 (时间和电量) */
.reader-sys-right {
    display: flex;
    align-items: center;
    gap: 10px; /* 时间和电池的间距 */
}

/* 4. 电池外框样式 */
.reader-battery {
    width: 22px;
    height: 11px;
    border: 1px solid #7d7568;
    border-radius: 2px;
    padding: 1px;
    position: relative;
    opacity: 0.8;
    display: flex;
    align-items: center;
}

/* 5. 电池正极小头 */
.reader-battery::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 4px;
    background: #7d7568;
    border-radius: 0 1px 1px 0;
}

/* 6. 电量填充条 */
.reader-battery-level {
    height: 100%;
    background: #7d7568;
    width: 100%; /* 默认满电，JS会控制实际宽度 */
    border-radius: 1px;
}

/* ========== 阅读器目录列表样式 ========== */
.chapter-list-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: #fff; /* 必须是纯色背景 */
    border-radius: 20px 20px 0 0;

    z-index: 2000; /* 层级保持很高 */

    /* 🔥🔥🔥 核心新增：就是这行代码解决了穿透问题 🔥🔥🔥 */
    pointer-events: auto !important;
    /* 强制捕获所有鼠标/触摸事件 */

    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
}



.chapter-list-panel.show {
    transform: translateY(0);
}

.chapter-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.chapter-list-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.chapter-list-close {
    font-size: 14px;
    color: #666;
    padding: 6px 12px;
    background: #f5f5f5;
    border-radius: 14px;
    cursor: pointer;
}

.chapter-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
    position: relative;
}

.chapter-item {
    padding: 14px 20px;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chapter-item:active {
    background: #f0f0f0;
}

.chapter-item.active {
    color: #0A84FF; /* 当前章节高亮色 */
    font-weight: 600;
    background: rgba(10, 132, 255, 0.05);
}
/* style.css */

/* 通用的旋转动画，用于听书加载状态 */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
    width: 16px;
    height: 16px;
}

/* 稍微优化一下浮动菜单的按钮，防止文字变长导致挤压 */
.reader-float-menu .menu-pill-btn {
    min-width: 60px; /* 确保有最小宽度 */
    justify-content: center;
}

/* ========== 小说段落与讨论按钮样式 ========== */

/* 段落容器，设置为相对定位以便放置按钮 */
#readerContent p {
    position: relative;
    padding-right: 30px !important; /* 右侧留出空间给图标 */
    transition: background-color 0.2s;
    border-radius: 8px;
}

#readerContent p:hover {
    background-color: rgba(0, 0, 0, 0.03); /* 鼠标悬停时段落微微变色 */
}

/* 讨论小标志 */
.discuss-btn {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.3; /* 默认比较淡 */
    transition: all 0.2s ease;
    user-select: none;
    padding: 4px;
}

/* 悬停段落时，图标变明显 */
#readerContent p:hover .discuss-btn {
    opacity: 1;
    transform: scale(1.2);
}

.discuss-btn:hover {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* 确保讨论按钮在最上层且可点击 */
.discuss-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    font-size: 18px; /* 稍微调大一点 */
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.2s ease;
    user-select: none;
    padding: 8px 12px; /* 增加点击热区 */
    z-index: 100; /* 🔥 确保在段落文字之上 */
    background: transparent;
    pointer-events: auto; /* 🔥 确保能接收点击事件 */
}

/* 修复阅读内容区域的层级，防止遮挡按钮 */
#readerContent p {
    position: relative;
    padding-right: 40px !important; /* 留出更多空间给按钮 */
    box-sizing: border-box;
    z-index: 1;
}

/* 悬停效果 */
#readerContent p:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

#readerContent p:hover .discuss-btn {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
}

/* 🔥 强制提升层级，确保联系人选择器永远在最上层 */
.contact-library-page {
    z-index: 2000 !important; /* 原始是1004，提升到2000超过所有APP */
}

/* 同样提升聊天页面的层级，防止选完人后聊天框被书架挡住 */
.chat-page,
.sweetheart-chat-page {
    z-index: 1500 !important; /* 原始是1005，提升到1500超过书架(1300) */
}

/* ========== 剧情讨论弹窗样式 ========== */
#discussModal {
    z-index: 2500; /* 必须高于联系人库(2000)和小说阅读器(1400) */
    background: rgba(0, 0, 0, 0.3); /* 稍微深一点的遮罩 */
    align-items: flex-end; /* 让弹窗从底部出现，类似键盘或面板 */
    padding: 0;
}

.discuss-card {
    width: 100%;
    height: 70%; /* 占据屏幕 70% 高度 */
    background: #fff;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#discussModal.show .discuss-card {
    transform: translateY(0);
}

.discuss-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f9f9;
    border-radius: 20px 20px 0 0;
}

.discuss-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.discuss-close-btn {
    font-size: 14px;
    color: #666;
    background: #e0e0e0;
    border: none;
    padding: 6px 12px;
    border-radius: 12px;
    cursor: pointer;
}

.discuss-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 复用现有的消息气泡样式，但在讨论窗中稍微缩小 */
.discuss-messages .chat-bubble {
    font-size: 14px;
    padding: 10px;
    max-width: 85%;
}

.discuss-input-area {
    padding: 10px 15px;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    /* 适配 iPhone 底部安全区 */
    padding-bottom: 25px;
}

#discussInput {
    flex: 1;
    padding: 10px 14px;
    background: #f0f2f5;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
}

.discuss-send-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

/* style.css 末尾添加 */

/* ========== 剧情讨论 Markdown 样式优化 ========== */

/* Markdown 内容容器 */
.markdown-content {
    line-height: 1.6;
    font-size: 14px;
    color: inherit;
}

/* 1. 标题样式 */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 12px 0 6px 0;
    line-height: 1.4;
}
.markdown-content h1:first-child,
.markdown-content h2:first-child,
.markdown-content h3:first-child {
    margin-top: 0;
}

/* 2. 列表样式 (关键：解决缩进问题) */
.markdown-content ul,
.markdown-content ol {
    margin: 6px 0;
    padding-left: 20px; /* 留出圆点空间 */
}

.markdown-content li {
    margin-bottom: 4px;
    list-style-position: outside; /* 标记在外部，整齐对齐 */
}

/* 3. 粗体与斜体 */
.markdown-content strong {
    font-weight: 700;
    color: inherit; /* 继承气泡文字颜色 */
}
.markdown-content em {
    font-style: italic;
    opacity: 0.9;
}

/* 4. 引用块 (Blockquote) */
.markdown-content blockquote {
    margin: 8px 0;
    padding: 8px 12px;
    border-left: 3px solid rgba(0, 0, 0, 0.2); /* 半透明边框 */
    background: rgba(0, 0, 0, 0.05); /* 半透明背景 */
    border-radius: 4px;
    font-size: 0.95em;
    color: inherit;
}

/* 发送方的引用块颜色适配 (蓝色背景) */
.message-row.sent .markdown-content blockquote {
    border-left-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);
}

/* 5. 行内代码与代码块 */
.markdown-content code {
    font-family: 'Consolas', monospace;
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.9em;
}
.message-row.sent .markdown-content code {
    background: rgba(255, 255, 255, 0.2);
}

.markdown-content pre {
    background: #2d2d2d;
    color: #e6e6e6;
    padding: 10px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
}
.markdown-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* 6. 段落处理 */
.markdown-content p {
    margin-bottom: 8px;
}
.markdown-content p:last-child {
    margin-bottom: 0;
}



/* ========== 记账本页面样式 ========== */
.ledger-page {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #F2F4F7;
    z-index: 1100;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.3s;
    display: flex;
    flex-direction: column;
}
.ledger-page.show {
    transform: translateX(0);
    visibility: visible;
}

/* 1. 卡片主容器：增加渐变和阴影，看起来像一张银行卡 */
.ledger-summary-card {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); /* 干净的银白色渐变 */
    margin: 15px;
    padding: 20px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.8);
}
/* 装饰背景圆（可选，增加层次感） */
.ledger-summary-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(176, 106, 179, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}
.ledger-month-selector {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 16px;
    color: #333;
}
.ledger-toggle-mode {
    font-size: 13px;
    color: #667eea;
    cursor: pointer;
    background: rgba(255,255,255,0.6);
    padding: 4px 10px;
    border-radius: 12px;
}
.ledger-stats-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
.stat-item {
    display: flex;
    flex-direction: column;
}
.stat-label { font-size: 12px; opacity: 0.7; }
.stat-num { font-size: 20px; font-weight: bold; font-family: 'DIN Alternate', sans-serif; }
.stat-num.income { color: #f39c12; }
.stat-num.expense { color: #e74c3c; }
.ledger-balance {
    border-top: 1px dashed rgba(0,0,0,0.1);
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

/* 内容区域通用 */
.ledger-content-area {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
    border-radius: 20px 20px 0 0;
    margin-top: 10px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
}
.ledger-content-area.hidden { display: none; }

/* 聊天记账模式 */
.ledger-chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.ledger-system-msg {
    text-align: center;
    font-size: 12px;
    color: #999;
    background: #f5f5f5;
    padding: 5px 10px;
    border-radius: 10px;
    align-self: center;
}
.ledger-msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
}
.ledger-msg.user {
    align-self: flex-end;
    background: #667eea;
    color: white;
    border-bottom-right-radius: 4px;
}
.ledger-msg.ai {
    align-self: flex-start;
    background: #f0f2f5;
    color: #333;
    border-bottom-left-radius: 4px;
    white-space: pre-wrap; /* 保留换行 */
    line-height: 1.5;
}


/* 底部输入框 */
.ledger-input-bar {
    padding: 10px 15px; /* 增加底部内边距 */
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 30px; /* 适配全面屏底部 */
}
.ledger-upload-btn {
    font-size: 24px;
    cursor: pointer;
}
#ledgerInput {
    flex: 1;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 20px;
    background: #f9f9f9;
    outline: none;
}
.ledger-send-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
}

/* 列表模式 */
.ledger-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
}
.ledger-record-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
}
.record-icon {
    width: 40px; height: 40px;
    background: #f0f2f5;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-right: 12px;
}
.record-info { flex: 1; }
.record-title { font-size: 15px; color: #333; font-weight: 500; }
.record-date { font-size: 12px; color: #999; margin-top: 2px; }
.record-amount { font-size: 16px; font-weight: bold; font-family: 'DIN Alternate', sans-serif; }
.record-amount.expense { color: #333; }
.record-amount.income { color: #f39c12; }
.record-delete {
    color: #ff4757; font-size: 12px; margin-left: 10px;
    cursor: pointer; padding: 5px; opacity: 0.5;
}

/* ========== 记账本联系人选择器 ========== */
.ledger-contact-selector {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #b06ab3; /* 紫色边框呼应AI模式 */
    cursor: pointer;
    background: #fff;
    transition: transform 0.2s;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ledger-contact-selector:active {
    transform: scale(0.9);
}

.ledger-contact-selector img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes popIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}


/* ========== 新增：AI 记账模式样式 ========== */

/* 头部布局调整 */
.ledger-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

/* AI 开关容器 */
.ledger-ai-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
    padding: 4px 8px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.ai-switch-label {
    font-size: 12px;
    font-weight: bold;
    color: #888;
}

/* 开关轨道 */
.ai-toggle-btn {
    width: 36px;
    height: 20px;
    background: #ccc;
    border-radius: 20px;
    position: relative;
    transition: background 0.3s ease;
}

/* 开关圆球 */
.ai-toggle-circle {
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* AI 模式激活状态 */
.ledger-ai-switch.active .ai-switch-label {
    color: #8A2BE2; /* 紫色文字 */
    text-shadow: 0 0 5px rgba(138, 43, 226, 0.3);
}

.ledger-ai-switch.active .ai-toggle-btn {
    background: linear-gradient(135deg, #b06ab3, #4568dc); /* 魔法渐变色 */
}

.ledger-ai-switch.active .ai-toggle-circle {
    transform: translateX(16px);
}

/* 输入框在 AI 模式下的特效 */
.ledger-input-bar.ai-active {
    border-top: 2px solid #b06ab3;
    box-shadow: 0 -4px 20px rgba(176, 106, 179, 0.15);
}

.ledger-input-bar.ai-active .ledger-send-btn {
    background: linear-gradient(135deg, #b06ab3, #4568dc);
    animation: glow 2s infinite;
}

@keyframes glow {
    0% { box-shadow: 0 0 5px rgba(176, 106, 179, 0.5); }
    50% { box-shadow: 0 0 15px rgba(176, 106, 179, 0.8); }
    100% { box-shadow: 0 0 5px rgba(176, 106, 179, 0.5); }
}

/* --- 修复测试结果弹窗层级问题 --- */
#testResultModal {
    /* 必须比 .test-page (2500) 更高 */
    z-index: 3000 !important;
}

/* 确保结果卡片也能正常显示 */
#testResultModal .test-result-card {
    position: relative;
    z-index: 3001;
}
/* ========== 修复版：记账本卡片样式 ========== */


/* 2. 顶部栏布局：左右分开 */
.ledger-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

/* 左侧月份显示 */
.ledger-month-display {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

#ledgerCurrentMonth {
    font-size: 28px;
    font-weight: 800; /* 加粗 */
    color: #333;
    font-family: 'DIN Alternate', sans-serif; /* 数字字体 */
}

.month-label {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    font-weight: 500;
}

/* 右侧操作区容器 */
.ledger-controls {
    display: flex;
    align-items: center;
    gap: 10px; /* 关键：让按钮之间有间距 */
}

/* 3. 各个按钮组件样式 */

/* 切换视图按钮 (胶囊状) */
.ledger-toggle-btn {
    padding: 6px 12px;
    background: white;
    border-radius: 20px;
    font-size: 12px;
    color: #555;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    cursor: pointer;
    white-space: nowrap; /* 禁止换行 */
    transition: all 0.2s;
}
.ledger-toggle-btn:active { transform: scale(0.95); }

/* AI 开关 (优化间距) */
.ledger-ai-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.5);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
}
.ledger-ai-switch.active {
    background: rgba(176, 106, 179, 0.1);
}
.ai-switch-label {
    font-size: 12px;
    font-weight: 700;
    color: #999;
}
/* 开关圆球轨道 */
.ai-toggle-btn {
    width: 32px;
    height: 18px;
    background: #e0e0e0;
    border-radius: 20px;
    position: relative;
    transition: background 0.3s;
}
.ai-toggle-circle {
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 激活状态 */
.ledger-ai-switch.active .ai-toggle-btn { background: #b06ab3; }
.ledger-ai-switch.active .ai-toggle-circle { transform: translateX(14px); }
.ledger-ai-switch.active .ai-switch-label { color: #b06ab3; }

/* 4. 联系人头像 (带动画) */
.ledger-contact-selector {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #b06ab3;
    padding: 1px; /* 内间距 */
    background: white;
    cursor: pointer;
    overflow: hidden;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ledger-contact-selector img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* 5. 数据显示区：三列布局 */
.ledger-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 三等分 */
    gap: 10px;
    position: relative;
    z-index: 1;
}

.stat-box {
    display: flex;
    flex-direction: column;
}

/* 只有第一个靠左，最后一个靠右，中间居中 */
.stat-box:nth-child(1) { align-items: flex-start; }
.stat-box:nth-child(2) { align-items: center; } /* 支出居中好看点，或者靠左也行 */
.stat-box:nth-child(3) { align-items: flex-end; }

.stat-title {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 6px;
    font-weight: 500;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'DIN Alternate', -apple-system, sans-serif;
    letter-spacing: 0.5px;
}

.stat-value.income { color: #febc2e; } /* 活力橙 */
.stat-value.expense { color: #ff6b6b; } /* 柔和红 */
.stat-value.balance { color: #333; }    /* 深黑 */

/* 动画 */
@keyframes popIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}