@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');

        :root {
            --theme-primary: #81c784;
            --theme-primary-hover: #66bb6a;
            --theme-secondary: #aed581;
            --sent-message-bg: #e6f5c9;
            --background-start: #f1f8e9;
            --background-end: #ffffff;
            --text-on-primary: #ffffff;
            --text-dark: #424242;
            --text-gray: #757575;
            --soft-red: #ff8a80;
            --border-color: #e8e8e8;
            --shadow-color: rgba(129, 199, 132, 0.12);
            --soft-radius: 16px;
            --card-background: rgba(255, 255, 255, 0.7);
        }
        
       /* --- 您新增的叙事模式美化样式 --- */
.narrative-speech {
    background-color: #e6f5c9; /* 清新的青苹果色背景 (来自您已有的 --sent-message-bg 变量) */
    padding: 2px 8px;
    border-radius: 8px;
    display: inline-block;
    margin: 1px 0;
}

.narrative-psychology {
    text-decoration: none; /* 去掉下划线 */
    background-color: #e6f5c9; /* 浅绿色背景 (复用已有变量 --sent-message-bg) */
    color: #66bb6a; /* 青苹果绿字体 (复用已有变量 --theme-primary-hover) */
    padding: 2px 6px; /* 增加一点内边距，让背景更好看 */
    border-radius: 6px; /* 增加圆角 */
    font-style: normal; /* 也可以加一点斜体来区分 */
}

.narrative-action {
    font-style: normal;
    color: #517655; /* 深一点的青苹果色 (来自您已有的 --theme-primary-hover 变量) */
} 
        
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* ↓↓↓ 就是修改这一行 ↓↓↓ */
    font-family: var(--main-font, 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}
        
        body {
            background-image: linear-gradient(to bottom, var(--background-start), var(--background-end));
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        
        #app-container, #screen {
            width: 100%;
            height: 100%;
            background-color: transparent;
        }
        
        #screen {
            display: flex;
            flex-direction: column;
            position: relative;
            box-shadow: 0 5px 25px var(--shadow-color);
        }
        
        .chat-header {
    background-color: rgba(129, 199, 132, 0.75);
    backdrop-filter: blur(12px);
    color: var(--text-on-primary);
    padding: 8px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: grid; /* <--- 核心改动1：使用网格布局 */
    grid-template-columns: 1fr auto 1fr; /* <--- 核心改动2：三列布局 */
    align-items: center;
    z-index: 10;
    flex-shrink: 0;
}
/* 新增：修复顶栏右侧按钮的对齐问题 */
.chat-header > div:last-child {
    text-align: right;
}
        .app-header, .world-book-header, .api-header, .moments-header, .discover-header, .contact-settings-header {
            background-color: rgba(220, 237, 200, 0.7);
            backdrop-filter: blur(12px);
            color: var(--text-dark);
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            z-index: 10;
            flex-shrink: 0;
        }
        
        .chat-input-area {
            background-color: #f8f9fa;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            border-top: 1px solid var(--border-color);
            flex-shrink: 0;
            position: relative;
        }
        
        #message-input {
            flex-grow: 1;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 20px;
            padding: 8px 15px;
            font-size: 15px;
            outline: none;
            resize: none;
            max-height: 100px;
            overflow-y: auto;
            align-self: flex-end;
            min-height: 38px;
        }

        .input-action-btn {
            border: none;
            border-radius: 50%;
            width: 38px;
            height: 38px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 8px;
            cursor: pointer;
            font-size: 18px;
            flex-shrink: 0;
            transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
            align-self: flex-end;
        }
        .input-action-btn:hover {
            transform: scale(1.1);
        }

        #send-btn {
            background-color: var(--theme-primary);
            color: var(--text-on-primary);
            width: auto;
            padding: 0 18px;
            border-radius: 22px;
        }
        #send-btn .fa-paper-plane {
            font-size: 18px;
        }

        #request-reply-btn {
            background-color: var(--theme-secondary);
            color: var(--text-on-primary);
        }
        
        #chat-screen {
            background-image: url('https://i.postimg.cc/SQ3DH79X/MEITU-20250811-151831796.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            flex-direction: column;
        }
        
        #main-screen { height: 100%; display: flex; flex-direction: column; }
        .app-title { font-size: 20px; font-weight: 700; }
        .contacts-container { flex-grow: 1; overflow-y: auto; padding: 10px 0; }
        .section-title { padding: 10px 15px; font-size: 14px; color: var(--text-gray); background-color: transparent; font-weight: 600; }
        .contact-item { display: flex; align-items: center; padding: 12px 15px; background-color: transparent; border-bottom: 1px solid var(--border-color); border-radius: var(--soft-radius); margin: 0 8px 4px; cursor: pointer; transition: background-color 0.2s; }
        .contact-item:hover { background-color: rgba(255, 255, 255, 0.7); }
        .contact-avatar { width: 50px; height: 50px; border-radius: 50%; background-color: #ddd; margin-right: 15px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-gray); overflow: hidden; flex-shrink: 0; }
        .contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .contact-info { flex-grow: 1; min-width: 0; }
        .contact-name { font-weight: 600; margin-bottom: 3px; color: var(--text-dark); }
        .contact-last-message { font-size: 14px; color: var(--text-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
        .contact-time { font-size: 12px; color: #999; margin-top: 5px; }
        .unread-count { background-color: var(--theme-primary); color: var(--text-on-primary); font-size: 12px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 10px; }
        .bottom-nav { display: flex; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-top: 1px solid var(--border-color); padding: 10px 0; flex-shrink: 0; }
        .nav-item { flex: 1; text-align: center; color: var(--text-gray); font-size: 14px; cursor: pointer; transition: color 0.2s, transform 0.2s; }
        .nav-item-content { position: relative; display: inline-block; }
        .nav-item.active { color: var(--theme-primary); transform: scale(1.1); }
        .nav-icon { font-size: 20px; margin-bottom: 5px; }
        .notification-dot { position: absolute; top: -2px; right: -8px; width: 8px; height: 8px; background-color: var(--soft-red); border-radius: 50%; border: 1px solid white; display: none; }
        .back-btn { font-size: 24px; cursor: pointer; margin-right: 15px; }
        .chat-info { flex-grow: 1; text-align: center; }
        .chat-name { font-weight: 700; font-size: 18px; }
        .chat-status { font-size: 13px; opacity: 0.8; }
        .chat-messages { flex-grow: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; }
        #load-more-messages { background-color: #e0e0e0; color: #555; border: none; padding: 8px 15px; border-radius: 15px; cursor: pointer; margin: 0 auto 15px; font-size: 13px; display: none; }
        #load-more-messages:hover { background-color: #d1d1d1; }
        .message-wrapper { display: flex; max-width: 85%; margin-bottom: 2px; position: relative; }
        .message-wrapper.received { align-self: flex-start; flex-direction: row; }
        .message-wrapper.sent { align-self: flex-end; flex-direction: row-reverse; }
        .message-avatar { width: 40px; height: 40px; border-radius: 6px; flex-shrink: 0; visibility: hidden; }
        .is-first-in-sequence .message-avatar { visibility: visible; margin-top: 10px; }
        .message-avatar img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }
        .message-body { display: flex; flex-direction: column; margin: 0 10px; }
        .message-wrapper.sent .message-body { align-items: flex-end; }
        .message-wrapper.received .message-body { align-items: flex-start; }
        .message-author-name { font-size: 13px; color: #888; margin-bottom: 4px; display: none; }
        .is-first-in-sequence .message-author-name { display: block; margin-top: 10px;}
        .message { padding: 10px 18px; border-radius: 22px; position: relative; animation: fadeIn 0.3s ease; word-wrap: break-word; min-width: 50px; box-shadow: 0 2px 4px var(--shadow-color); font-size: 14px;}
        .message-timestamp { font-size: 11px; color: #aaa; margin-top: 4px; padding: 0 5px; }
        .message-wrapper.selected .message, .message-wrapper.selected .message.red-packet, .message-wrapper.selected .message.voice, .message-wrapper.selected .message.picture-description { background-color: #bde0fe !important; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .message.received { background-color: white; border-top-left-radius: 4px; }
        .message.sent { background-color: var(--sent-message-bg); border-top-right-radius: 4px; }
        .message-image-container { padding: 5px; background-color: inherit; border-radius: inherit; }
        .message-image { max-width: 150px; max-height: 150px; border-radius: 12px; display: block; cursor: default; }
        .message-image-container.sent { border-top-right-radius: 4px; }
        .message-image-container.received { border-top-left-radius: 4px; }
        .message.image-message { padding: 0; background-color: transparent; box-shadow: none; }
        .emoji-btn, .attachment-btn { font-size: 22px; margin-right: 10px; cursor: pointer; color: var(--text-gray); align-self: flex-end; margin-bottom: 10px; }
        .attachment-btn { background: none; border: none; padding: 0; }
        #edit-mode-bar, #moments-edit-mode-bar { display: none; padding: 10px 15px; background-color: #f0f0f0; border-top: 1px solid #ddd; justify-content: space-between; align-items: center; flex-shrink: 0; }
        .edit-action-btn { padding: 8px 16px; border-radius: 20px; border: none; font-size: 14px; cursor: pointer; }
        #delete-selected-btn, #delete-selected-moments-btn { background-color: var(--soft-red); color: white; }
        #cancel-edit-btn, #cancel-moments-edit-btn { background-color: #bdc3c7; color: #333; }
        #profile-screen, #char-profile-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; display: none; flex-direction: column; }
        
        .profile-header {
            background-image: linear-gradient(135deg, var(--sent-message-bg), #dcedc8);
            padding: 30px 20px 15px;
            text-align: center;
            color: var(--text-dark);
            position: relative;
            flex-shrink: 0;
        }
        .avatar-container {
            position: relative;
            margin: 0 auto 15px;
            width: 100px;
            height: 100px;
        }
        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        .change-avatar-btn {
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: rgba(255, 255, 255, 0.7);
            color: var(--text-dark);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .profile-name { font-size: 22px; font-weight: 700; margin-bottom: 5px; }
        .profile-status { font-size: 16px; opacity: 0.9; }
        .profile-actions { display: flex; justify-content: center; gap: 20px; padding: 10px 0; background-color: white; border-bottom: 1px solid #eee; flex-shrink: 0; }
        .action-item { text-align: center; cursor: pointer; }
        .action-icon { width: 50px; height: 50px; border-radius: 50%; background-color: #f0f2f5; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--theme-primary); margin: 0 auto 10px; transition: all 0.3s; }
        .action-icon:hover { background-color: #e0f2f1; transform: scale(1.05); }
        .action-label { font-size: 14px; color: var(--text-gray); }
        .profile-details { flex-grow: 1; overflow-y: auto; padding: 10px; background-color: #f0f2f5; }
        .detail-item { padding: 15px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background-color: white; }
        .detail-item:last-child { border-bottom: none; }
        .discover-section .detail-item { border-radius: 0; margin-bottom: 0; }
        .discover-section .detail-item:first-child { border-top-left-radius: var(--soft-radius); border-top-right-radius: var(--soft-radius); }
        .discover-section .detail-item:last-child { border-bottom-left-radius: var(--soft-radius); border-bottom-right-radius: var(--soft-radius); border-bottom: none; }
        .detail-label { font-size: 16px; color: #333; font-weight: 600; }
        .detail-value { font-size: 16px; color: var(--text-gray); max-width: 60%; text-align: right; overflow: hidden; text-overflow: ellipsis; }
        .edit-btn { color: var(--theme-primary); font-size: 18px; cursor: pointer; padding: 5px; }
        #discover-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; display: none; flex-direction: column; }
        .discover-title { font-size: 20px; font-weight: 700; flex-grow: 1; text-align: center; margin-left: 0; }
        .discover-content { flex-grow: 1; overflow-y: auto; padding: 20px; }
        .discover-section { background-color: var(--card-background); border-radius: var(--soft-radius); box-shadow: 0 4px 12px var(--shadow-color); border: 1px solid white; margin-bottom: 20px;}
        .discover-item { padding: 15px; display: flex; align-items: center; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.2s; background-color: transparent; }
        .discover-item:last-child { border-bottom: none; }
        .discover-item:hover { background-color: rgba(255,255,255,0.5); }
        .discover-icon { width: 40px; height: 40px; border-radius: 8px; background-color: #f0f2f5; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--theme-primary); margin-right: 15px; }
        .discover-info { flex-grow: 1; }
        .discover-name { font-weight: 600; margin-bottom: 3px; }
        .discover-desc { font-size: 14px; color: var(--text-gray); }
        .discover-arrow { color: #999; font-size: 18px; }
        /* ▼▼▼ 使用这个新版本替换上面的旧规则 ▼▼▼ */
#automation-modal, #automation-screen, #world-book-screen, #api-settings-screen, #contact-settings-screen, #moments-screen, #diary-screen, #emoticon-library-screen, .preset-management-screen, #post-detail-screen, #trending-topic-screen, #square-api-settings-screen, #memory-album-screen, #music-library-screen, #shopping-screen, #product-detail-screen, 
#schedule-screen, #events-screen /* <--- 在这里加上了两个新页面的ID */ {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: none;
    flex-direction: column;
}
        .world-book-content, .api-content, .contact-settings-content, .emoticon-library-content { flex-grow: 1; overflow-y: auto; padding: 20px; }
        .world-book-list { display: flex; flex-direction: column; gap: 15px; }
        .world-book-item { background-color: white; border-radius: var(--soft-radius); box-shadow: 0 4px 12px var(--shadow-color); border: 1px solid white; margin-bottom: 20px; padding: 15px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;}
        .world-book-item:hover { transform: translateY(-3px); box-shadow: 0 6px 12px var(--shadow-color); }
        .book-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
        .book-name { font-weight: 600; font-size: 18px; }
        .book-content { color: var(--text-gray); line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
        .api-title { font-size: 20px; font-weight: 600; margin-left: 15px; }
        .form-group { background-color: white; border-radius: var(--soft-radius); box-shadow: 0 4px 12px var(--shadow-color); border: 1px solid white; margin-bottom: 20px; padding: 15px;}
        .form-label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-gray); }
        .form-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
        .form-input:focus { outline: none; border-color: var(--theme-primary); }
        .form-button { width: 100%; padding: 15px; background-color: var(--theme-primary); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 10px; }
        .form-group-inline { display: flex; align-items: center; gap: 10px; }
        .form-group-inline .form-input { flex-grow: 1; }
        #fetch-models-btn, #fetch-square-models-btn { padding: 10px 15px; background-color: var(--theme-primary); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; flex-shrink: 0; }
        #add-world-book-modal, #post-moment-modal, #user-persona-preset-modal, #thought-preset-modal, #add-emoticon-modal, #automation-modal, #send-red-packet-modal, #send-transfer-modal, #send-voice-modal, #send-picture-modal, #add-music-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 100; }
        .modal-content { background-color: white; width: 90%; max-width: 400px; border-radius: var(--soft-radius); overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); animation: modalIn 0.3s ease; }
        @keyframes modalIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .modal-header { background-color: var(--theme-primary); color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
        .modal-title { font-size: 18px; font-weight: 600; }
        .close-btn { font-size: 24px; cursor: pointer; }
        .modal-body { padding: 20px; }
        .form-textarea { width: 100%; height: 150px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; resize: vertical; }
        .form-textarea:focus { outline: none; border-color: var(--theme-primary); }
        .form-button:hover { background-color: var(--theme-primary-hover); }
        #add-contact-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 100; }
        .contact-form-group { margin-bottom: 20px; }
        .contact-form-label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-gray); }
        .contact-form-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
        .contact-form-input:focus { outline: none; border-color: var(--theme-primary); }
        .contact-form-textarea { width: 100%; height: 100px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; resize: vertical; }
        .contact-form-textarea:focus { outline: none; border-color: var(--theme-primary); }
        .contact-form-select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background-color: white; }
        .contact-form-select:focus { outline: none; border-color: var(--theme-primary); }
        .mask-editor, .world-book-selector { background-color: white; border-radius: var(--soft-radius); box-shadow: 0 4px 12px var(--shadow-color); border: 1px solid white; margin-bottom: 20px; padding: 15px;}
        .mask-editor-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; color: var(--theme-primary); }
        .mask-editor-group { margin-bottom: 15px; }
        .mask-editor-label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-gray); }
        .mask-editor-textarea { width: 100%; height: 150px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; resize: vertical; }
        .mask-editor-textarea:focus { outline: none; border-color: var(--theme-primary); }
        .world-book-selector-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; color: var(--theme-primary); }
        .world-book-selector .world-book-list { max-height: 200px; overflow-y: auto; border: 1px solid #eee; border-radius: 8px; padding: 10px; }
        #world-book-selector-list .world-book-item { padding: 10px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; }
        .world-book-checkbox { margin-right: 10px; }
        .world-book-name { font-weight: 500; }
        .save-settings-btn { width: 100%; padding: 15px; background-color: var(--theme-primary); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; }
        .user-mask-editor { background-color: white; border-radius: var(--soft-radius); box-shadow: 0 4px 12px var(--shadow-color); border: 1px solid white; margin-bottom: 20px; padding: 15px;}
        .user-mask-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; color: var(--theme-primary); }
        .user-mask-textarea { width: 100%; height: 150px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; resize: vertical; }
        .user-mask-textarea:focus { outline: none; border-color: var(--theme-primary); }
        
        /* --- V7.0 新增: 一起听歌卡片样式 --- */
.message.music-share-card {
    background-color: #f3f4f6;
    color: #333;
    width: 260px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: default;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.message.sent.music-share-card { background-color: var(--sent-message-bg); }
.music-card-cover {
    width: 60px;
    height: 60px;
    background-color: #555;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: spin 8s linear infinite;
    animation-play-state: paused; /* 默认暂停 */
}
.music-card-cover.playing {
    animation-play-state: running; /* 播放时旋转 */
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.music-card-play-btn {
    position: absolute;
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.music-card-info {
    flex-grow: 1;
    min-width: 0;
}
.music-card-title {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.music-card-artist {
    font-size: 13px;
    color: var(--text-gray);
    margin-top: 2px;
}
.music-card-progress-bar {
    width: 100%;
    height: 3px;
    background-color: #ddd;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}
.music-card-progress {
    width: 0%;
    height: 100%;
    background-color: var(--theme-primary);
}
.music-card-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}
.music-card-loop-btn {
    cursor: pointer;
    font-size: 14px;
}
/* --- V7.0 新增: 小窝相册新样式 --- */
.album-section {
    background-color: white;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px var(--shadow-color);
}
.album-section-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--theme-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.album-milestone-item, .album-stat-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-size: 16px;
}
.album-item-icon {
    width: 30px;
    text-align: center;
    margin-right: 15px;
    color: var(--text-gray);
}
.album-item-label { color: #333; }
.album-item-value {
    margin-left: auto;
    font-weight: 600;
    color: var(--text-dark);
}
.album-memory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.album-memory-item {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #eee;
    cursor: pointer;
}
.album-memory-item .fas {
    margin-right: 5px;
    color: var(--theme-secondary);
}
        
        /* ---论坛/微博 样式--- */
        .moments-header .back-btn { font-size: 24px; cursor: pointer; position: relative; z-index: 1; }
        .moments-header .action-btn { font-size: 20px; }
        .header-actions { display: flex; gap: 20px; position: relative; z-index: 1; }
        .moments-content { flex-grow: 1; overflow-y: auto; background-color: #f0f2f5; }
        .mention {
    color: var(--theme-primary);
    font-weight: 600;
    cursor: pointer;
}
.mention:hover {
    text-decoration: underline;
}
        .feed-tabs { display: flex; justify-content: space-around; padding: 0 10px; background-color: #e8f5e9; flex-shrink: 0; }
        .feed-tab-btn { flex: 1; padding: 12px 0; font-size: 16px; font-weight: 600; color: var(--text-gray); border: none; background: none; cursor: pointer; position: relative; transition: color 0.3s; }
        .feed-tab-btn.active { color: var(--theme-primary); }
        .feed-tab-btn.active::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 3px; background-color: var(--theme-primary); border-radius: 3px; }

        .feed-sub-tabs { display: flex; justify-content: center; gap: 15px; padding: 8px 10px; background-color: #fafafa; flex-shrink: 0; border-bottom: 1px solid #eee; }
        .feed-sub-tab-btn { padding: 6px 14px; font-size: 14px; font-weight: 500; color: var(--text-gray); border: 1px solid #ddd; background-color: white; border-radius: 18px; cursor: pointer; transition: all 0.3s; }
        .feed-sub-tab-btn.active { color: white; background-color: var(--theme-primary); border-color: var(--theme-primary); }

        .posts-list { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
        .post-item { position: relative; display: flex; padding: 15px; gap: 12px; background-color: white; border-radius: var(--soft-radius); box-shadow: 0 1px 3px rgba(0,0,0,0.05); cursor: pointer;}
        .post-delete-btn { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-gray); font-size: 14px; cursor: pointer; z-index: 2; transition: all 0.2s; }
        .post-delete-btn:hover { background-color: var(--soft-red); color: white; }

        .post-item-avatar img { width: 45px; height: 45px; border-radius: 50%; flex-shrink: 0; }
        .post-content-area { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
        .post-author-name { font-weight: 700; color: var(--text-dark); }
        .post-author-handle { font-size: 14px; color: var(--text-gray); margin-left: 8px; }
        .post-text { line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; font-size: 15px; }
        .post-meta { color: #999; font-size: 13px; }
        .post-actions { display: flex; justify-content: space-between; align-items: center; color: var(--text-gray); font-size: 14px; margin-top: 12px; padding-top: 8px; border-top: 1px solid #f0f0f0; }
        .post-action-btn { cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color 0.2s; }
        .post-action-btn:hover, .post-action-btn.liked { color: var(--theme-primary); }
        .post-action-btn.liked .fa-heart { font-weight: 900; }
        .post-action-btn i { font-size: 16px; }

        .post-comments { background-color: #f7f9f9; border-radius: 10px; padding: 10px; font-size: 14px; display: flex; flex-direction: column; gap: 8px; margin-top: 5px; }
        .post-comments:empty { display: none; }
        
        .comment-delete-btn { color: var(--text-gray); font-size: 12px; cursor: pointer; opacity: 0; transition: all 0.2s; }
        .comment-delete-btn:hover { color: var(--soft-red); }
        .post-comment-item:hover .comment-delete-btn { opacity: 1; }

        .post-comment-item { line-height: 1.5; padding: 8px 0; border-bottom: 1px solid #eee; }
        .post-comment-item:last-child { border-bottom: none; }
        .comment-author { font-weight: 600; color: var(--theme-primary); margin-right: 5px; cursor: pointer; }
        .comment-content { color: var(--text-dark); }
        .comment-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-gray); margin-top: 4px; }
        .comment-reply-to { background-color: #e9e9e9; padding: 4px 8px; border-radius: 8px; font-size: 13px; margin-left: 5px; }
        /* --- 新增：用于在帖子中显示作者签名 --- */
.post-author-signature {
    font-size: 13px;
    color: var(--text-gray);
    margin-top: 4px; /* 与昵称拉开一点距离 */
    padding-bottom: 8px; /* 与帖子正文拉开一点距离 */
    white-space: pre-wrap; /* 允许签名中的换行 */
    word-break: break-word;
}


        /* 热搜榜样式 */
        .trending-list { list-style: none; padding: 10px; background-color: white;}
        .trending-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .trending-item:hover { background-color: #f9f9f9; }
        .trending-item:last-child { border-bottom: none; }
        .trending-rank { font-size: 18px; font-weight: bold; color: var(--text-gray); width: 40px; text-align: center; }
        .trending-rank.top-3 { color: var(--soft-red); }
        .trending-info { flex-grow: 1; }
        .trending-title { font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
        .trending-meta { font-size: 13px; color: var(--text-gray); }
        .trending-tag { background-color: #ffcdd2; color: #c62828; font-size: 11px; padding: 2px 6px; border-radius: 5px; margin-left: 8px; font-weight: bold; }
        
        #post-detail-screen { background-color: #f0f2f5; }
        .post-detail-content { flex-grow: 1; overflow-y: auto; }
        #post-detail-container { padding: 0; }
        #post-detail-container .post-item { cursor: default; }
        .comments-section { padding: 15px; background-color: #f0f2f5; }
        .comments-title { font-size: 16px; font-weight: 700; color: var(--text-dark); padding-bottom: 10px; border-bottom: 1px solid #ddd; margin-bottom: 10px; }
        .comment-input-area { display: flex; padding: 10px 15px; background-color: white; border-top: 1px solid #ddd; flex-shrink: 0; }
        #comment-input { flex-grow: 1; border: 1px solid #ddd; border-radius: 18px; padding: 8px 15px; font-size: 15px; resize: none; }
        #submit-comment-btn { background-color: var(--theme-primary); color: white; border: none; border-radius: 18px; padding: 8px 20px; margin-left: 10px; font-weight: 600; cursor: pointer; }
        
        .diary-entry {
            position: relative;
            background-color: white;
            border-radius: 12px;
            padding: 15px 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px var(--shadow-color);
        }
        
        .diary-content { flex-grow: 1; overflow-y: auto; padding: 20px; }
        .diary-entry-meta { font-size: 12px; color: #999; margin-bottom: 10px; }
        .diary-entry-content { font-size: 16px; line-height: 1.6; color: #333; }
        .diary-delete-btn { position: absolute; top: 15px; right: 15px; font-size: 18px; color: #aaa; cursor: pointer; transition: color 0.2s ease; }
        .diary-delete-btn:hover { color: var(--soft-red); }
        .preset-list { display: flex; flex-direction: column; gap: 10px; padding: 15px 20px; }
        .preset-item { background-color: white; border-radius: 12px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); display: flex; justify-content: space-between; align-items: center; }
        .preset-info { flex-grow: 1; cursor: pointer; min-width: 0; margin-right: 10px; }
        .preset-name { font-weight: 500; font-size: 16px; color: #333; margin-bottom: 5px; }
        .preset-desc { font-size: 13px; color: var(--text-gray); overflow: hidden; text-overflow: ellipsis; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
        .preset-actions { display: flex; gap: 10px; flex-shrink: 0; }
        .preset-action-btn { font-size: 18px; color: #999; cursor: pointer; padding: 5px; }
        .preset-action-btn:hover { color: var(--theme-primary); }
        .preset-action-btn.delete:hover { color: var(--soft-red); }
        /* ▼▼▼ 把这段新代码粘贴进去 ▼▼▼ */
.preset-action-btn.active {
    color: var(--theme-primary); /* 使用主题绿色作为激活颜色 */
}
        .emoticon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 15px; }
        .emoticon-item { background-color: #fff; border-radius: 8px; padding: 8px; box-shadow: 0 1px 3px var(--shadow-color); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
        .emoticon-item img { max-width: 100%; height: 60px; object-fit: contain; margin-bottom: 5px; }
        .emoticon-name { font-size: 12px; color: #333; text-align: center; word-break: break-all; }
        .emoticon-delete-btn { position: absolute; top: -5px; right: -5px; background-color: var(--soft-red); color: white; width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 20px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
        #emoticon-picker { position: absolute; bottom: 65px; left: 10px; right: 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); max-height: 250px; overflow-y: auto; padding: 10px; display: none; z-index: 50; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px; }
        #emoticon-picker.active { display: grid; }
        #emoticon-picker .emoticon-item { cursor: pointer; transition: transform 0.2s; }
        #emoticon-picker .emoticon-item:hover { transform: scale(1.1); }
        #emoticon-picker .emoticon-delete-btn { display: none; }
        
        /* --- 音乐库新增样式 --- */
        #music-library-list { display: flex; flex-direction: column; gap: 10px; }
        .music-item { background-color: white; border-radius: 8px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 3px var(--shadow-color); }
        .music-info { flex-grow: 1; }
        .music-title { font-weight: 600; color: #333; }
        .music-artist { font-size: 14px; color: var(--text-gray); margin-top: 3px; }
        .music-delete-btn { background: none; border: none; font-size: 16px; color: #aaa; cursor: pointer; padding: 5px; }
        .music-delete-btn:hover { color: var(--soft-red); }
        #music-library-picker .picker-title { font-weight: 600; color: var(--text-gray); margin-bottom: 8px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
        #music-library-picker .picker-list { max-height: 120px; overflow-y: auto; }
        #music-library-picker .picker-item { padding: 8px 5px; cursor: pointer; border-radius: 4px; }
        #music-library-picker .picker-item:hover { background-color: #f0f0f0; }

        #feed-status-indicator {
            padding: 10px;
            text-align: center;
            background-color: #e8f5e9;
            color: var(--text-gray);
            font-size: 14px;
            display: none;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
            order: 1; /* 确保它在header下面 */
        }
        .switch { position: relative; display: inline-block; width: 50px; height: 28px; }
        .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; }
        .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
        input:checked + .slider { background-color: var(--theme-primary); }
        input:focus + .slider { box-shadow: 0 0 1px var(--theme-primary); }
        input:checked + .slider:before { transform: translateX(22px); }
        .slider.round { border-radius: 28px; }
        .slider.round:before { border-radius: 50%; }
        #attachment-menu { position: absolute; bottom: 65px; left: 10px; right: 10px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 12px; box-shadow: 0 -4px 15px rgba(0,0,0,0.1); padding: 15px; display: none; grid-template-columns: repeat(4, 1fr); gap: 15px; z-index: 50; transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(10px); opacity: 0; }
        #attachment-menu.active { display: grid; transform: translateY(0); opacity: 1; }
        .attachment-menu-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; text-align: center; }
        .attachment-menu-item .icon-wrapper { width: 60px; height: 60px; background-color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #555; margin-bottom: 8px; border: 1px solid #eee; }
        .attachment-menu-item .label { font-size: 13px; color: var(--text-gray); }
        .attachment-menu-item:hover .icon-wrapper { background-color: #f0f0f0; }
        .system-notification { align-self: center; background-color: #e1e1e1; color: var(--text-gray); font-size: 12px; padding: 5px 12px; border-radius: 15px; margin: 10px 0; text-align: center; }
        .message.picture-description { display: flex; align-items: center; cursor: pointer; }
        .message.sent.picture-description { background-color: var(--sent-message-bg); }
        .message.received.picture-description { background-color: #fff; }
        .message.picture-description i { font-size: 20px; color: var(--text-gray); margin-right: 10px; }
        .message.picture-description span { color: #333; }
        .message.voice { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
        .message.voice .fa-wifi { font-size: 20px; transform: rotate(90deg); color: var(--text-gray); }
        .message.sent.voice { background-color: var(--sent-message-bg); }
        .message.received.voice { background-color: #fff; }
        .message.sent.voice .fa-wifi { order: 2; margin-left: 15px; }
        .message.received.voice .fa-wifi { margin-right: 15px; }
        .voice-duration { color: var(--text-gray); }
        .transcribed-text { background-color: #fff; border: 1px solid #eee; padding: 10px; border-radius: 8px; margin-top: 5px; font-size: 14px; color: #333; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out; }
        .transcribed-text.visible { max-height: 200px; opacity: 1; }
        .message.red-packet { background-color: #FFCC80; color: #5D4037; width: 240px; padding: 0; overflow: hidden; cursor: pointer; transition: background-color 0.3s, box-shadow 0.3s; box-shadow: 0 2px 5px rgba(255, 152, 0, 0.2); }
        .message.red-packet.opened { background-color: #FFF3E0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
        .message.red-packet .red-packet-header { padding: 10px 15px; display: flex; align-items: center; }
        .message.red-packet .red-packet-icon { font-size: 24px; margin-right: 10px; color: #FFA726; }
        .message.red-packet .red-packet-blessing { font-size: 15px; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
        .message.red-packet .red-packet-status { font-size: 13px; opacity: 0.9; }
        .message.red-packet.opened .red-packet-icon, .message.red-packet.opened .red-packet-blessing, .message.red-packet.opened .red-packet-status { color: #BCAAA4; }
        .message.red-packet .red-packet-footer { background-color: transparent; color: #A1887F; font-size: 12px; padding: 5px 15px; border-top: 1px solid rgba(161, 136, 127, 0.2); }
        .message.red-packet.opened .red-packet-footer { color: #cebeba; border-top: 1px solid rgba(161, 136, 127, 0.1); }
        .message.sent.red-packet { border-top-right-radius: 0; }
        .message.received.red-packet { border-top-left-radius: 0; }
        .message.transfer { background-color: var(--theme-primary); color: white; width: 240px; padding: 0; overflow: hidden; position: relative; box-shadow: 0 2px 5px var(--shadow-color); }
        .message.transfer.completed { background-color: #C8E6C9; }
        .message.transfer.completed .transfer-info .transfer-text, .message.transfer.completed .transfer-info .transfer-amount { color: #388E3C; }
        .message.transfer.completed .transfer-icon i { color: var(--theme-primary-hover); }
        .message.transfer.completed::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--theme-primary-hover); }
        .message.transfer .transfer-header { padding: 10px 15px; display: flex; align-items: center; }
        .message.transfer .transfer-icon { font-size: 24px; margin-right: 10px; }
        .message.transfer .transfer-info .transfer-text { font-size: 15px; font-weight: 500; }
        .message.transfer .transfer-info .transfer-amount { font-size: 18px; font-weight: bold; }
        .message.transfer .transfer-footer { background-color: transparent; color: white; font-size: 12px; padding: 5px 15px; border-top: 1px solid rgba(255,255,255,0.3); opacity: 0.9; }
        .message.transfer.completed .transfer-footer { color: var(--theme-primary-hover); border-top: 1px solid rgba(102, 187, 106, 0.2); }
        .message.sent.transfer { border-top-right-radius: 0; }
        .message.received.transfer { border-top-left-radius: 0; }

        /* --- Pet Game Styles --- */
        #pet-container {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin-top: 20px;
        }
        .pet-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        #pet-name {
            color: var(--text-dark);
        }
        #pet-gold-display {
            font-size: 16px;
            color: #E6A23C;
        }
        .pet-visual-area {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
            margin-bottom: 15px;
        }
        .pet-stats {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 15px;
        }
        .stat-bar-container {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }
        .stat-bar-label {
            width: 60px;
            text-align: right;
        }
        .stat-bar {
            flex-grow: 1;
            height: 10px;
            background-color: #eee;
            border-radius: 5px;
            overflow: hidden;
        }
        .stat-bar-inner {
            height: 100%;
            width: 100%;
            border-radius: 5px;
            background-color: var(--theme-primary);
            transition: width 0.3s ease, background-color 0.3s ease;
        }
        .pet-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .pet-action-btn {
            padding: 10px;
            font-size: 14px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            background-color: #f0f2f5;
            color: var(--text-dark);
        }
        .pet-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .pet-action-btn:disabled {
            background-color: #e9ecef;
            color: #adb5bd;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        #work-pet-btn {
            background-color: var(--theme-secondary);
            color: white;
        }
        
        .slime {
    width: 55px; /* 宽度设为55px */
    height: 40px; /* 高度设为40px，这样基础形状更稳定 */
    /* 背景色和半透明效果保持不变 */
    background-color: rgba(209, 233, 206, 0.8); 
    
    /* 核心修改：只设置左上角和右上角的圆角，让底部保持平坦 */
    /* 这四个值分别对应：左上、右上、右下、左下 */
    border-radius: 60px 60px 30px 30px; 

    position: relative;
    animation: slime-bob 2s infinite ease-in-out;
    transition: all 0.5s ease;
    
    /* 边框效果保持不变 */
    border: 2px solid rgba(76, 175, 80, 0.5);
    /* 新增：移除底部边框线，让它完美地“贴”在地面上 */
    border-bottom: none; 
    
    /* 内阴影果冻质感保持不变 */
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.15), 
                inset 0 4px 6px rgba(255, 255, 255, 0.4);
}
        .slime.hungry { background-color: #ffb74d; }
        .slime.dirty { background-color: #bdbdbd; }
        .slime::before {
            content: '';
            position: absolute;
            width: 7px;
            height: 7px;
            background-color: #212121;
            border-radius: 50%;
            top: 15px;
            left: 12px;
            transition: all 0.5s ease;
        }
        .slime::after {
            content: '';
            position: absolute;
            width: 7px;
            height: 7px;
            background-color: #212121;
            border-radius: 50%;
            top: 15px;
            right: 12px;
            transition: all 0.5s ease;
        }
        .slime-shadow {
            width: 50px;
            height: 8px;
            background-color: rgba(0,0,0,0.1);
            border-radius: 50%;
            margin-top: 5px;
            animation: slime-shadow-squish 2s infinite ease-in-out;
            transition: all 0.5s ease;
        }
        @keyframes slime-bob {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        @keyframes slime-shadow-squish {
             0%, 100% { transform: scaleX(1); }
            50% { transform: scaleX(0.8); }
        }

        /* --- V6.0 新增：宠物进化形态 --- */
        /* 初始宝宝期形态 */
        .slime.baby-form { }

        /* 幼年期 */
        .slime.toddler-form {
            transform: scale(1.15); /* 长大一点 */
            background-color: #a5d6a7; /* 颜色变嫩一点 */
        }
        .slime.toddler-form::before, 
        .slime.toddler-form::after {
            width: 7px; /* 眼睛变大一点 */
            height: 7px;
            box-shadow: 0 0 2px rgba(255, 255, 255, 0.6); /* 眼睛里有光 */
        }

        /* 少年期，眼睛变成 > < 的样子*/
        .slime.teenager-form {
            transform: scale(1.25);
            animation-duration: 1.5s; /* 变得更活泼，跳得快一点 */
        }
        .slime.teenager-form::before { /* 左眼 */
            content: '>';
            font-weight: bold;
            color: white;
            background: none;
            font-size: 12px;
            line-height: 1;
            transform: rotate(-15deg);
            top: 18px;
            left: 18px;
        }
        .slime.teenager-form::after { /* 右眼 */
            content: '<';
            font-weight: bold;
            color: white;
            background: none;
            font-size: 12px;
            line-height: 1;
            transform: rotate(15deg);
            top: 18px;
            right: 18px;
        }
        /* --- 新增：史莱姆互动动画 --- */
        .slime.happy-jiggle {
            animation: happy-jiggle 0.5s ease-in-out;
        }
        @keyframes happy-jiggle {
            0%, 100% { transform: scale(1, 1); }
            25% { transform: scale(0.95, 1.05); }
            50% { transform: scale(1.05, 0.95); }
            75% { transform: scale(0.98, 1.02); }
        }

        .slime .blush {
            position: absolute;
            width: 15px;
            height: 6px;
            background-color: rgba(255, 105, 180, 0); /* 默认透明 */
            border-radius: 50%;
            top: 22px;
            transition: background-color 0.3s ease;
        }
        .slime .blush.left { left: 5px; transform: rotate(-15deg); }
        .slime .blush.right { right: 5px; transform: rotate(15deg); }
        .slime.is-blushing .blush {
            background-color: rgba(255, 105, 180, 0.6); /* 脸红 */
        }

        /* --- 新增：用于隐藏思维预设的编辑功能 --- */
        /* 1. 隐藏“思维预设管理”页面右上角的“+”添加按钮 */
        #add-thought-preset-btn {
            display: none;
        }

        /* 2. 隐藏每个思维预设项目右侧包含“编辑”和“Delet”图标的整个操作区 */
        #thought-presets-list .preset-actions {
            display: none;
        }
/* --- 钱包收支明细样式 --- */
        #transaction-list {
            padding: 10px 0;
        }
        .transaction-item {
            background-color: white;
            padding: 15px;
            margin: 0 15px 10px;
            border-radius: 8px;
            box-shadow: 0 2px 4px var(--shadow-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .transaction-info .desc {
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 4px;
            font-size: 16px;
        }
        .transaction-info .time {
            font-size: 13px;
            color: var(--text-gray);
        }
        .transaction-amount {
            font-size: 16px;
            font-weight: bold;
            flex-shrink: 0;
            margin-left: 15px;
        }
        .transaction-amount.income {
            color: var(--theme-primary-hover);
        }
        .transaction-amount.expense {
            color: var(--soft-red);
        }

/* --- 转账退还样式 --- */
        .message.transfer.returned {
            background-color: #bdc3c7; /* 中性灰色背景 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .message.transfer.returned .transfer-info .transfer-text,
        .message.transfer.returned .transfer-info .transfer-amount,
        .message.transfer.returned .transfer-footer {
            color: #6c757d;
            text-decoration: line-through; /* 添加Delet线表示作废 */
        }
        .message.transfer.returned .transfer-icon i {
            color: #6c757d;
        }
        /* 将退还后的图标从对勾变为退还箭头 */
        .message.transfer.returned::after {
            content: '\f0e2'; /* Font Awesome "reply/undo" icon */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900; 
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            color: #6c757d;
        }
        /* 转账弹窗里的退还按钮样式 */
        #return-transfer-btn {
            margin-top: 10px;
            background-color: #e67e22; /* 胡萝卜橙色 */
        }
        /* --- 全新美化的转账弹窗样式 --- */
        #transfer-modal .modal-header { /* 优化头部 */
            background-color: #f7f9f9;
            color: var(--text-dark);
            border-bottom: 1px solid #eee;
        }
        #transfer-modal .close-btn { color: #999; }
        #transfer-modal .modal-body {
            padding: 20px 25px 30px;
            text-align: center;
        }
        .transfer-sender-profile { /* 发起人信息 */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
        }
        .transfer-sender-avatar {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            margin-right: 12px;
        }
        .transfer-sender-info { text-align: left; }
        .transfer-sender-name {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-dark);
        }
        .transfer-recipient-name {
            font-size: 14px;
            color: var(--text-gray);
        }
        .transfer-amount-display { /* 金额显示 */
            padding-bottom: 25px;
            margin-bottom: 25px;
            border-bottom: 1px dashed #ddd;
        }
        .transfer-amount-display span:first-child { /* '¥' 符号 */
            font-size: 32px;
            font-weight: 500;
            margin-right: 4px;
        }
        .transfer-amount-display span:last-child { /* 金额数字 */
            font-size: 48px;
            font-weight: 700;
            color: var(--text-dark);
        }
        .transfer-action-area .form-button { /* 按钮区域 */
            margin-top: 10px;
        }
        #confirm-transfer-btn { background-color: var(--theme-primary); }
        #return-transfer-btn { background-color: #e67e22; }

        /* --- 已收款/已退还状态视图 --- */
        .transfer-status-info {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 600;
            color: var(--text-dark);
        }
        .transfer-status-info i {
            font-size: 24px;
            margin-right: 10px;
        }
        .transfer-status-info i.fa-check-circle { color: var(--theme-primary-hover); }
        .transfer-status-info i.fa-undo-alt { color: #e67e22; }
        .transfer-status-subtext {
            margin-top: 8px;
            font-size: 14px;
            color: var(--text-gray);
        }
        /* --- 修正系统消息包裹层，使其居中 --- */
        .message-wrapper.system-wrapper {
            align-self: center;
            /* 解除最大宽度限制，让内部的灰色消息自己决定宽度 */
            max-width: none;
        }
        /* --- 论坛帖子内的红包卡片样式 --- */
        .forum-red-packet-card {
            background-color: #FFCC80;
            color: #5D4037;
            padding: 10px 15px;
            margin-top: 15px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .forum-red-packet-card:hover {
            transform: scale(1.02);
        }
        .forum-red-packet-card .red-packet-icon {
            font-size: 24px;
            margin-right: 10px;
            color: #FFA726;
        }
        .forum-red-packet-card .red-packet-blessing {
            font-weight: 500;
        }

        /* --- 帖子分享到私聊里的卡片样式 --- */
        .message.post-share-card {
            background-color: #fff;
            border: 1px solid #eee;
            width: 250px;
            padding: 12px;
            border-radius: 12px;
            cursor: pointer;
        }
        .post-share-header {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid #f0f0f0;
        }
        .post-share-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .post-share-name {
            font-weight: 600;
            font-size: 14px;
        }
        .post-share-content {
            font-size: 14px;
            color: var(--text-gray);
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.5;
        }
        .post-share-footer {
            margin-top: 8px;
            font-size: 12px;
            color: #ccc;
            text-align: right;
        }
        
        /* --- 发布动态时添加红包的按钮样式 --- */
        .moment-extra-actions {
            display: flex;
            justify-content: flex-start;
            padding-top: 10px;
            border-top: 1px solid #f0f0f0;
        }
        .moment-action-btn {
            font-size: 20px;
            color: var(--text-gray);
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
        }
        .moment-action-btn:hover {
            background-color: #f0f0f0;
        }
        .moment-action-btn.active {
            color: var(--soft-red);
        }
        
        /* --- 转发时选择联系人的弹窗样式 --- */
        .contact-picker-list {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 5px;
            margin-bottom: 15px;
        }
        .contact-picker-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-radius: 6px;
        }
        .contact-picker-item:hover {
            background-color: #f9f9f9;
        }
        .contact-picker-item input {
            margin-right: 15px;
        }
        .contact-picker-item img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
        #custom-confirm-confirm-btn.danger {
    background-color: var(--soft-red) !important;
}
/* ========================================================== */
/* V9.0 新增：悬浮音乐播放器样式 */
/* ========================================================== */
:root {
    --apple-green: #8DB600; /* 新增苹果绿 */
}
#music-player-card {
    display: none; /* 默认隐藏，由JS控制 */
    flex-direction: column;
    position: absolute; /* 使用absolute定位在#screen内 */
    width: 320px;
    height: 500px;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    top: 50px; 
    left: 50px;
    z-index: 1000;
    transition: all 0.4s ease-in-out;
}
.player-header {
    padding: 0 15px;
    height: 45px;
    font-weight: 600;
    color: var(--text-dark);
    background-color: rgba(0,0,0,0.05);
    cursor: move;
    position: relative;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.player-collapse-btn {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-light);
    padding: 5px;
}
/* --- ▼▼▼ 新增的关闭按钮样式 ▼▼▼ --- */
#player-close-btn {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-gray);
    padding: 5px;
    font-size: 18px;
    transition: transform 0.2s ease;
}
#player-close-btn:hover {
    transform: translateY(-50%) scale(1.15);
}
.header-collapsed-content {
    display: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-left: 35px;
}
.header-avatar-stack { display: flex; align-items: center; }
.header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
}
.header-avatar:last-child { margin-left: -10px; }
.header-lyric {
    flex-grow: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--apple-green);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s;
}
.player-avatar-stack { display: flex; justify-content: center; align-items: center; padding: 20px 0 15px; }
.player-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.player-avatar:last-child { margin-left: -25px; }
.player-song-info { text-align: center; }
.player-title { font-size: 18px; font-weight: 700; color: var(--text-dark); }
.player-artist { font-size: 14px; color: var(--text-light); margin-top: 5px; }
.lyrics-container { flex-grow: 1; overflow: hidden; position: relative; mask-image: linear-gradient(transparent 0%, black 20%, black 80%, transparent 100%); margin-top: 15px; }
.lyrics-wrapper { position: absolute; width: 100%; transition: transform 0.5s ease-out; }
.lyric-line { padding: 8px 20px; text-align: center; font-size: 16px; color: var(--text-light); transition: color 0.5s, transform 0.5s; }
.lyric-line.active {
    color: var(--apple-green);
    font-weight: 600; 
    transform: scale(1.1); 
}
.player-controls-wrapper { padding: 15px 20px; border-top: 1px solid rgba(0,0,0,0.05); }
.player-progress-bar-wrapper { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-light); }
.player-progress-bar { flex-grow: 1; height: 4px; background-color: rgba(0,0,0,0.1); border-radius: 2px; cursor: pointer; padding: 4px 0; background-clip: content-box; }
.player-progress { width: 0%; height: 100%; background-color: var(--theme-primary); border-radius: 2px; }
.player-controls { display: flex; justify-content: space-around; align-items: center; font-size: 20px; margin-top: 10px; color: var(--text-dark); }
.player-control-btn { cursor: pointer; transition: transform 0.2s; width: 30px; text-align: center;}
.player-control-btn:hover { transform: scale(1.15); }
.player-play-btn { font-size: 40px; color: var(--theme-primary); }

#music-player-card.collapsed {
    height: 45px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(25px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}
#music-player-card.collapsed .header-collapsed-content,
#music-player-card.collapsed .player-collapse-btn {
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
#music-player-card.collapsed .player-header-title { display: none; }
#music-player-card.collapsed .header-collapsed-content { display: flex; }
#music-player-card.collapsed .player-main-content { visibility: hidden; opacity: 0; }

.player-playlist-view {
    position: absolute;
    top: 45px;
    left: 0; right: 0; bottom: 95px; 
    background-color: rgba(255, 255, 255, 0.92); 
    backdrop-filter: blur(20px); 
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; /* 建议给opacity也加上过渡效果 */
    opacity: 0;
    padding: 10px 0;
    overflow-y: auto;
    border-top: 1px solid rgba(0,0,0,0.05);
    pointer-events: none; /* <-- 核心新增：隐藏时忽略点击事件 */
    z-index: 3;
}
.player-playlist-view.active { 
    transform: translateY(0); 
    opacity: 1; 
    pointer-events: auto; /* <-- 核心新增：显示时恢复点击事件 */
}
.playlist-item { padding: 12px 20px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.05); }
.playlist-item:hover { background-color: rgba(0,0,0,0.05); }
.playlist-item.playing .playlist-title { color: var(--theme-primary); }
.playlist-title { font-weight: 600; color: var(--text-dark); font-size: 14px; }
.playlist-artist { font-size: 12px; color: var(--text-light); }
/* ========================================================== */
/* V16.0 最终完美版：无缝、平滑的呼吸光晕 */
/* ========================================================== */

/* 1. 【防重叠魔法】(此部分无变化) */
.player-avatar {
    position: relative;
}
.player-avatar:first-child {
    z-index: 2;
}
.player-avatar:last-child {
    z-index: 1;
}

/* 2. 【重新定义动画】创建一个完整的“吸气-呼气”循环 */
@keyframes pulse-glow-left {
    /* 动画的开始和结束点都是同一个状态：最小、最明显的光晕 */
    0%, 100% {
        box-shadow: -2px 0 5px 0px rgba(129, 199, 132, 0.7);
    }
    /* 动画的中点是另一个状态：最大、最微弱的光晕 */
    50% {
        /* 关键：这里的透明度不是0，而是0.1，保留了一丝微光，确保动画永不中断！ */
        box-shadow: -8px 0 20px 12px rgba(129, 199, 132, 0.1);
    }
}

@keyframes pulse-glow-right {
    0%, 100% {
        box-shadow: 2px 0 5px 0px rgba(129, 199, 132, 0.7);
    }
    50% {
        box-shadow: 8px 0 20px 12px rgba(129, 199, 132, 0.1);
    }
}

/* 3. 【应用新动画】移除 alternate，并使用更平滑的 ease-in-out */
#player-avatar-stack.is-playing .player-avatar:first-child {
    /* 动画时长3秒，无限循环，缓入缓出效果，不再需要 alternate */
    animation: pulse-glow-left 3s infinite ease-in-out;
}
#player-avatar-stack.is-playing .player-avatar:last-child {
    animation: pulse-glow-right 3s infinite ease-in-out;
}
/* --- 红包领取详情弹窗样式 --- */
.claimer-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
}
.claimer-item:last-child {
    border-bottom: none;
}
.claimer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    margin-right: 12px;
}
.claimer-info {
    flex-grow: 1;
}
.claimer-name {
    font-weight: 500;
    color: var(--text-dark);
}
.claim-time {
    font-size: 12px;
    color: var(--text-gray);
    margin-top: 2px;
}
.claim-amount {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
}
.best-luck-badge {
    background-color: #FFD700;
    color: #A67C00;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 5px;
    margin-left: 8px;
}
/* --- V-Final 新增: 游戏转盘样式 --- */
.wheel-option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.wheel-option-item input[type="text"] {
    flex-grow: 1;
}
.wheel-option-item input[type="number"] {
    width: 60px;
    text-align: center;
}
.wheel-option-item .delete-option-btn {
    background: none;
    border: none;
    color: var(--soft-red);
    cursor: pointer;
    font-size: 18px;
}
.message.game-wheel-card {
    background-color: #fff;
    border: 1px solid #eee;
    width: 250px;
    padding: 12px;
    border-radius: 12px;
}
.wheel-card-title {
    font-weight: bold;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
}
.wheel-card-result-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wheel-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wheel-player-name {
    font-size: 14px;
    color: #555;
}
.wheel-player-result {
    font-size: 14px;
    font-weight: 600;
    background-color: #f0f2f5;
    padding: 4px 10px;
    border-radius: 12px;
}
.spin-btn {
    background-color: var(--theme-primary);
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
}
.spin-btn:hover {
    background-color: var(--theme-primary-hover);
}
/* --- 引用Reply功能样式 --- */
.message-wrapper {
    position: relative; /* 确保Reply按钮可以正确定位 */
}

.reply-btn {
    position: absolute;
    top: 50%;
    background-color: rgba(240, 240, 240, 0.8);
    backdrop-filter: blur(2px);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    opacity: 0; /* 默认完全透明，隐藏 */
    transform: translateY(-50%) scale(0.8); /* 默认缩小一点 */
    transition: opacity 0.2s ease, transform 0.2s ease; /* 添加平滑过渡动画 */
    pointer-events: none; /* 隐藏时不可点击 */
}

/* 当父级 message-wrapper 拥有 .show-reply-btn 类时，让按钮显示出来 */
.message-wrapper.show-reply-btn .reply-btn {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto; /* 显示时恢复点击 */
}

.message-wrapper.sent .reply-btn {
    left: -35px; /* 发送的消息，按钮在左边 */
}
.message-wrapper.received .reply-btn {
    right: -35px; /* 收到的消息，按钮在右边 */
}
.reply-btn:hover {
    transform: translateY(-50%) scale(1.1) !important;
}

/* 聊天输入框上方的引用预览条 */
#reply-preview-bar {
    padding: 8px 15px;
    background-color: #f0f0f0;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
}
#reply-preview-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666;
}
#reply-preview-content .sender {
    font-weight: 600;
    color: #333;
}
#cancel-reply-btn {
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
    color: #888;
}

/* 聊天气泡中的引用消息框 */
.message-quote {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 6px 12px;
    border-left: 3px solid var(--theme-primary);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    cursor: pointer; /* 添加手型光标，提示可以点击 */
}
.message-quote .sender {
    font-weight: 600;
    color: var(--theme-primary);
}
.message-quote .content {
    color: #555;
    white-space: normal; /* Allows the text to wrap naturally */
    word-wrap: break-word; /* Ensures long words don't overflow */
    display: block;
    /* The overflow and text-overflow properties are no longer needed */
}

/* 点击引用框跳转后，目标消息的高亮效果 */
.message-wrapper.highlighted .message {
    animation: highlight-anim 1.5s ease;
}
@keyframes highlight-anim {
    0% { background-color: #fff3cd; }
    100% { background-color: inherit; }
}
.message-wrapper.sent.highlighted .message.sent {
     animation: highlight-anim-sent 1.5s ease;
}
@keyframes highlight-anim-sent {
    0% { background-color: #bde0fe; }
    100% { background-color: var(--sent-message-bg); }
}
/* --- V-Final 新增: 叙事模式气泡加宽 --- */
#chat-messages.narrative-mode-active .message-wrapper {
    max-width: 90%; /* 从默认的 85% 增加到 95% */
}
/* --- V-Final 新增: 在聊天中隐藏角色头像 --- */
.message-wrapper.contact-avatar-hidden .message-avatar {
    display: none;
}
.message-wrapper.received.contact-avatar-hidden .message-body {
    margin-left: 0;
}
/* ========================================================== */
/* V17.0 新增：视频通话样式 (简化版) */
/* ========================================================== */
.video-call-card-content {
    width: 90%;
    max-width: 400px;
    height: 75%;
    max-height: 650px;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    color: var(--text-dark);
    overflow: hidden;
}
.video-call-header { padding: 15px; text-align: center; flex-shrink: 0; border-bottom: 1px solid rgba(0,0,0,0.07); }
#call-contact-name { font-size: 18px; font-weight: 700; }
#call-status { display: block; font-size: 13px; color: var(--theme-primary); margin-top: 4px; font-weight: 600; }
.video-call-main { flex-grow: 1; padding: 15px; overflow: hidden; }
.narrative-feed { height: 100%; overflow-y: auto; padding-right: 10px; display: flex; flex-direction: column; }
.char-bubble { align-self: flex-start; max-width: 90%; background-color: #fff; border: 1px solid var(--border-color); box-shadow: 0 1px 2px rgba(0,0,0,0.04); padding: 10px 15px; border-radius: 18px; border-top-left-radius: 4px; margin-bottom: 12px; font-size: 15px; line-height: 1.6; }
.char-bubble p { margin: 0 0 8px 0; }
.char-bubble p:last-child { margin-bottom: 0; }
.char-bubble .narrative-speech { color: var(--text-dark); font-weight: 500; }
.char-bubble .narrative-action { color: var(--text-gray); font-style: italic; }
.char-bubble .narrative-psychology { color: var(--theme-primary-hover); font-style: italic; }
.narrative-feed > .narrative-action { color: var(--text-gray); font-style: italic; align-self: center; text-align: center; font-size: 13px; margin: 5px 0 15px 0; }
.user-message { align-self: flex-end; background-color: var(--sent-message-bg); padding: 10px 15px; border-radius: 18px; border-bottom-right-radius: 4px; color: var(--text-dark); font-weight: 500; margin-bottom: 12px; max-width: 90%; font-size: 15px; line-height: 1.6; }
.video-call-input-area { padding: 8px 15px; display: flex; align-items: center; border-top: 1px solid rgba(0,0,0,0.07); background-color: rgba(0,0,0,0.03); flex-shrink: 0; }
#video-call-input { flex-grow: 1; background-color: white; border: 1px solid var(--border-color); border-radius: 20px; padding: 8px 15px; font-size: 15px; outline: none; resize: none; max-height: 100px; overflow-y: auto; font-family: inherit; }
#video-call-send-btn { background-color: var(--theme-primary); color: var(--text-on-primary); border: none; border-radius: 50%; width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; margin-left: 8px; cursor: pointer; font-size: 16px; flex-shrink: 0; transition: background-color 0.2s; }
.video-call-controls { display: flex; justify-content: space-around; align-items: center; padding: 15px 20px; background-color: rgba(0,0,0,0.03); flex-shrink: 0; }
.control-btn { display: flex; flex-direction: column; align-items: center; cursor: pointer; width: 80px; text-align: center; }
.control-btn i { width: 60px; height: 60px; border-radius: 50%; background-color: #e9ecef; color: var(--text-dark); display: flex; justify-content: center; align-items: center; font-size: 26px; margin-bottom: 6px; transition: all 0.2s ease; }
.control-btn span { font-size: 12px; font-weight: 500; color: var(--text-gray); }
.control-btn.hang-up i { background-color: var(--soft-red); color: white; }

/* 来电界面样式 */
#incoming-call-screen {
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1002; 
    background-color: rgba(0,0,0,0.7); 
    backdrop-filter: blur(10px); 
    color: white; 
    text-align: center; 
    flex-direction: column; 
    justify-content: space-around; 
    align-items: center;
}

/* 实际通话界面样式 */
#video-call-screen {
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    justify-content: center; 
    align-items: center; 
    z-index: 1001; 
    background-color: rgba(0,0,0,0.4);
}
/* --- 新增：响应式手机屏幕模拟 --- */
#app-container {
    /* 默认情况下（手机访问时），占满整个屏幕 */
    width: 100%;
    height: 100%;
    background-color: #f0f2f5; /* 给电脑屏幕背景一个颜色，突出手机区域 */
}

/* 当屏幕宽度大于等于 600px 时（可以理解为平板或电脑）*/
@media (min-width: 600px) {
    #app-container {
        /* 将其最大宽度限制为手机尺寸 */
        max-width: 414px;

        /* 高度也限制为手机尺寸 */
        height: 896px;

        /* 保留圆角来模拟屏幕形状 */
        border-radius: 40px; 
        
        /* 加一点阴影，让它在电脑上有悬浮感，如果完全不想要也可以Delet这行 */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

        /* 确保内部内容不会溢出圆角 */
        overflow: hidden; 
        
        /* 确保内部的 #screen 元素能正确继承尺寸 */
        position: relative; 
    }
}
/* --- V-Final 新增: 购物中心样式 V3 (修正版) --- */
.product-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 6px;
    padding: 10px;
}
.product-item {
    background-color: white;
    border-radius: var(--soft-radius);
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
/* V3核心修正：瀑布流错位效果 */
.product-item:nth-child(even) {
    margin-top: 10px;
}
.product-details {
    padding: 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.product-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-dark);
    margin-bottom: 8px;
}
.product-description {
    font-size: 13px;
    color: #555;
    background-color: #f7f9fa;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    line-height: 1.5;
}
.product-shop {
    font-size: 12px;
    color: var(--text-gray);
    margin-top: auto;
    padding-top: 5px;
}
.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}
.product-price {
    font-size: 16px;
    font-weight: bold;
    color: #ff7043;
}
.product-price span {
    font-size: 12px;
    font-weight: normal;
}
.product-share-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-gray);
    cursor: pointer;
    padding: 5px;
}
.product-share-btn:hover {
    color: var(--theme-primary);
}
.message.product-share-card {
    background-color: #fff;
    border: 1px solid #eee;
    width: 240px;
    padding: 10px;
    border-radius: 12px;
}
.product-share-intent {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gray);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}
.product-share-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.product-share-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.product-share-info .product-title {
    -webkit-line-clamp: 3;
    font-weight: 600;
}
.product-share-info .product-price {
    margin-top: 5px;
    text-align: right;
}
.product-share-accompanying-msg {
    margin-top: 10px;
    padding: 8px;
    background-color: #f7f9fa;
    border-radius: 8px;
    font-size: 13px;
    color: #555;
    white-space: pre-wrap;
    word-break: break-all;
}
.product-share-accompanying-msg:empty {
    display: none;
}
#product-detail-content #product-main-info {
    background-color: #fff;
    padding: 20px;
    border-radius: var(--soft-radius);
    box-shadow: var(--shadow-color);
}
#detail-action-bar {
    border-top: 1px solid var(--border-color);
    padding: 10px 15px;
}

/* --- V3 新增: 商品详情页样式 --- */
#product-detail-content #product-main-info {
    background-color: #fff;
    padding: 20px;
    border-radius: var(--soft-radius);
    box-shadow: var(--shadow-color);
}
#detail-action-bar {
    border-top: 1px solid var(--border-color);
    padding: 10px 15px;
}
/* --- V-Final 新增: 聊天内分享的商品卡片样式 V2 --- */
.message.product-share-card {
    background-color: #fff;
    border: 1px solid #eee;
    width: 240px;
    padding: 10px;
    border-radius: 12px;
}
.product-share-intent {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gray);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}
/* V2改动：卡片内不再有图片，改为显示文字描述 */
.product-share-body {
    display: flex;
    flex-direction: column; /* 改为垂直布局 */
    gap: 8px;
}
.product-share-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.product-share-info .product-title {
    -webkit-line-clamp: 3;
    font-weight: 600;
}
.product-share-info .product-price {
    margin-top: 5px;
    text-align: right;
}
.product-share-accompanying-msg {
    margin-top: 10px;
    padding: 8px;
    background-color: #f7f9f9;
    border-radius: 8px;
    font-size: 13px;
    color: #555;
    white-space: pre-wrap;
    word-break: break-all;
}
.product-share-accompanying-msg:empty {
    display: none;
}
/* --- 聊天顶栏“更多操作”菜单样式 (小竖条版) --- */
#chat-options-menu {
    position: absolute;
    top: 55px; /* 从顶栏下方弹出 */
    right: 10px; /* 对齐右侧的按钮 */
    width: 160px; /* 核心改动：固定宽度，让它成为一个“竖条” */
    background-color: rgba(248, 249, 250, 0.92); /* 使用一个更明亮的背景色 */
    backdrop-filter: blur(12px);
    border-radius: 12px; /* 圆角可以稍微小一点，更显精致 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 一个更柔和的阴影 */
    z-index: 100;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.chat-option-item {
    display: flex;
    align-items: center;
    padding: 10px 15px; /* 减少一点垂直内边距，让菜单更紧凑 */
    cursor: pointer;
    font-size: 14px; /* 字体也可以稍微小一点 */
    color: var(--text-gray);
    transition: background-color 0.2s; /* 添加一个过渡效果 */
}

.chat-option-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.chat-option-item i {
    margin-right: 12px;
    color: var(--text-gray);
    width: 20px; /* 固定图标宽度，让文字对齐 */
    text-align: center;
}

.chat-option-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 4px 10px; /* 分割线也调整一下边距 */
}
/* --- ▼▼▼ 把这段新代码粘贴到 <style> 标签里 --- */
.collapsible-title {
    cursor: pointer; /* 鼠标悬浮时显示为小手形状 */
    display: flex; /* 使用flex布局，让标题和箭头能在一行显示 */
    justify-content: space-between; /* 让标题在左，箭头在右 */
    align-items: center;
}

.collapsible-title .collapse-icon {
    transition: transform 0.2s ease-in-out; /* 让箭头旋转有动画效果 */
    font-size: 14px;
}

.collapsible-title.collapsed .collapse-icon {
    transform: rotate(-90deg); /* 折叠时，箭头旋转-90度 */
}
/* --- ▲▲▲ 粘贴到这里结束 --- */
/* --- 新增：史莱姆随机表情 --- */
/* 移除默认眼睛，为新表情做准备 */
.slime.expression-happy::before, .slime.expression-happy::after,
.slime.expression-sad::before, .slime.expression-sad::after,
.slime.expression-annoyed::before, .slime.expression-annoyed::after,
.slime.expression-shocked::before, .slime.expression-shocked::after {
    background: none; /* 隐藏原来的黑点背景 */
    font-weight: bold;
    font-size: 12px;
    line-height: 1;
    color: #212121; /* 统一设为深灰色 */
}

/* 1. 开心表情 ^_^ */
.slime.expression-happy::before,
.slime.expression-happy::after {
    content: '^';
    top: 18px;
}

/* 2. 难过表情 T_T */
.slime.expression-sad::before,
.slime.expression-sad::after {
    content: 'T';
    top: 18px;
    color: #4285F4; /* 来点蓝色眼泪 */
}

/* 3. 生气/不爽表情 >_< */
.slime.expression-annoyed::before {
    content: '>';
    transform: rotate(-15deg);
    top: 18px;
    left: 18px;
}
.slime.expression-annoyed::after {
    content: '<';
    transform: rotate(15deg);
    top: 18px;
    right: 18px;
}

/* 4. 震惊表情 o_o */
.slime.expression-shocked::before,
.slime.expression-shocked::after {
    content: ''; /* 恢复为空，我们用边框画圆 */
    width: 8px;
    height: 8px;
    border: 2px solid #212121; /* 用边框画一个空心圆 */
    background: white; /* 中间是白色的 */
}
/* --- 新增：更多可爱表情 --- */

/* 1. 开心满足 (u u) */
.slime.expression-pleased::before,
.slime.expression-pleased::after {
    content: 'u';
    font-size: 13px; /* 字体尺寸可以微调 */
    top: 18px;
    font-weight: 600; /* 加粗一点更明显 */
    color: #333;
    background: none;
}

/* 2. 晕乎乎 (x x) */
.slime.expression-dizzy::before,
.slime.expression-dizzy::after {
    content: '×'; /* 使用乘号 × 比字母 x 更好看 */
    font-size: 14px;
    top: 17px;
    font-weight: 600;
    color: #555;
    background: none;
}

/* 3. 无语/怀疑 (- .) */
.slime.expression-doubtful::before {
    content: '';
    width: 10px; /* 横线宽度 */
    height: 3px;  /* 横线厚度 */
    background: #212121;
    border-radius: 2px; /* 让横线两端圆润 */
    top: 20px;
    left: 10px;
}
.slime.expression-doubtful::after {
    /* 右眼还是一个点 */
    content: '';
    width: 7px;
    height: 7px;
    background-color: #212121;
    border-radius: 50%;
    top: 15px;
    right: 12px;
}
/* --- 新增：嘴巴的基础样式和“猫猫嘴”表情 --- */

/* 1. 嘴巴的基础样式 (定位和默认隐藏) */
.slime .mouth {
    position: absolute;
    bottom: 8px; /* 嘴巴在底部偏上一点的位置 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    width: 0;
    height: 0;
    transition: all 0.3s ease; /* 让表情变化更平滑 */
}

/* 2. 可爱的猫猫嘴 (owo) 表情 */
.slime.expression-cat-face::before,
.slime.expression-cat-face::after {
    /* 眼睛是两个空心圆圈 'o' */
    content: '';
    width: 9px;
    height: 9px;
    border: 2px solid #212121;
    background: white;
    border-radius: 50%;
    top: 14px;
}
/* 用边框“画”一个 'w' 形的嘴巴 */
.slime.expression-cat-face .mouth {
    width: 14px;
    height: 7px;
    border-radius: 0 0 10px 10px / 0 0 6px 6px;
    border: 3px solid #212121;
    border-top: none;
    border-left: 2px solid transparent; /* 用透明边框切出豁口 */
    border-right: 2px solid transparent;
    box-sizing: border-box;
}
/* --- 新增：联系人列表的Delet按钮样式 --- */
.contact-delete-btn {
    color: #b0b0b0; /* 默认灰色，不显眼 */
    margin-bottom: 6px; /* 在按钮和下方的时间/未读数之间创建一些间距 */
    cursor: pointer;
    font-size: 10px; /* 图标大小 */
    padding: 5px 8px; /* 增加可点击区域，防止误触 */
    transition: color 0.2s ease;
    display: block; /* 确保按钮在时间的上方 */
    text-align: right; /* 确保图标在容器内是右对齐的 */
}

.contact-delete-btn:hover {
    color: var(--soft-red); /* 鼠标悬浮时变为醒目的红色 */
}
/* --- 新增：用于隐藏AI发送的HTML消息的气泡和头像 --- */
.message-wrapper.ai-html-message .message-avatar,
.message-wrapper.ai-html-message .message-author-name,
.message-wrapper.ai-html-message .message-timestamp {
    display: none !important; /* 彻底隐藏头像、名字和时间戳 */
}
/* --- 新增：热搜话题描述框样式 --- */
#trending-topic-description-container {
    background-color: #e8f5e9; /* 一个淡淡的背景色 */
    padding: 15px;
    margin: 10px; /* 与列表和边缘保持距离 */
    border-radius: var(--soft-radius); /* 使用已有的圆角变量 */
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}
/* --- 新增：地图功能样式 --- */
#map-grid-container {
    position: relative; /* 这个很重要，让后面的图标能相对于它定位 */
    width: 1000px;      /* <--- 新增：给地图一个固定的宽度 */
    height: 1000px;     /* <--- 新增：给地图一个固定的高度 */
    background-color: #e8f5e9; /* 新增：给个底色，防止意外透明 */
    overflow: hidden;   /* 新增：防止图标被拖到地图外面 */
    cursor: crosshair;  /* 新增：鼠标放上去时变成十字准星，更像编辑器 */
    background-image:
        linear-gradient(rgba(129, 199, 132, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(129, 199, 132, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
}

.map-icon {
    position: absolute;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    font-size: 16px;
    transition: transform 0.2s, background-color 0.2s;
    border: 2px solid white;
}
.map-icon:hover {
    transform: scale(1.2);
    background-color: white;
}
.map-icon-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none; /* 让标签不影响点击图标 */
    opacity: 0;
    transition: opacity 0.2s;
}
.map-icon:hover .map-icon-label {
    opacity: 1;
}
/* --- 新增：地图编辑器中轴线 --- */
#map-grid-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%; /* 水平居中 */
    width: 1px; /* 线的宽度 */
    height: 100%; /* 线的高度 */
    background-color: rgba(255, 0, 0, 0.4); /* 半透明红色，很醒目 */
    z-index: 1; /* 确保它在网格之上，但在图标之下 */
    pointer-events: none; /* 让这条线不会影响你点击图标 */
}

#map-grid-container::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%; /* 垂直居中 */
    width: 100%; /* 线的宽度 */
    height: 1px; /* 线的高度 */
    background-color: rgba(255, 0, 0, 0.4); /* 半透明红色 */
    z-index: 1; /* 确保它在网格之上，但在图标之下 */
    pointer-events: none; /* 让这条线不会影响你点击图标 */
}
/* --- 新增：分级地点样式 --- */
.map-icon.tier-1 {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-width: 3px;
    z-index: 10; /* 让一级地点永远在最上层 */
}

.map-icon.tier-2 {
    /* 默认大小，可以不写，或者明确写出来 */
    width: 30px;
    height: 30px;
    font-size: 16px;
    z-index: 5;
}

.map-icon.tier-3 {
    width: 22px;
    height: 22px;
    font-size: 12px;
    z-index: 2; /* 让三级地点在最下层 */
}

/* 鼠标悬浮时，统一放大，体验更好 */
.map-icon.tier-1:hover { transform: scale(1.2); }
.map-icon.tier-2:hover { transform: scale(1.3); }
.map-icon.tier-3:hover { transform: scale(1.4); }
.message.location-share-card {
    background-color: #fff;
    border: 1px solid #eee;
    width: 250px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}
.location-card-icon {
    font-size: 24px;
    color: var(--theme-primary);
    flex-shrink: 0;
}
.location-card-info .name {
    font-weight: 600;
    font-size: 15px;
}
.location-card-info .footer {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* === Auto-pruned Discover items (hidden, no functionality impact) === */
#shopping-center-btn,
#emoticon-library-btn,
#world-book-btn,
#map-management-btn {
  display: none !important;
}
/* No-id author link is hidden inline in HTML via [data-pruned=true] */


/* === Auto-pruned Signature block === */
.detail-item .detail-label:contains("个性签名"),
#signature-value,
[data-field="signature"] {
  display: none !important;
}
[data-removed="signature-block"] { display: none !important; }

/* === Restore World Book === */
#world-book-btn{display:flex!important}

/* === Restore 世界书 (World Book) === */
#world-book-btn{display:flex!important}