/* ============================================================ */
        /* 【1. 全局基础样式】*/
        /* ============================================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f5f5f5;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            padding-bottom: env(safe-area-inset-bottom);
        }

        .content-area {
            position: fixed;
            top: 44px;
            left: 0;
            right: 0;
            bottom: 50px;
            overflow-y: auto;
            background-color: #fafafa;
            padding-bottom: env(safe-area-inset-bottom);
			scroll-padding-bottom: 70px; /* 为底部的输入框预留空间 */
        }

        .content-area.me-page-active { top: 0; }
        .content-area.no-bottom-nav { bottom: 0; }
        .page { display: none; height: 100%; padding: 0; }
        .page.active { display: block; }
        
        #chat-page .page-content {
            padding: 0;
        }

        /* ============================================================ */
        /* 【2. 顶部栏样式】*/
        /* ============================================================ */
        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            background-color: #f8f8f8;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            padding: 0 15px;
            z-index: 998;
        }
        #avatar-edit-top { background-color: #000; border-bottom: none; }
        #avatar-edit-top .top-bar-back,
        #avatar-edit-top .top-bar-title,
        #avatar-edit-top .top-bar-right-btn { color: #fff; }
        #avatar-edit-top .top-bar-back { display: flex; }
        .top-bar-back {
            width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
            color: #07c160; font-size: 18px; cursor: pointer; display: none;
        }
        .top-bar-title {
            position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
            font-size: 17px; font-weight: 500; color: #333; max-width: 200px;
            text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .top-bar-right-btn {
            position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
            width: auto; min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
            color: #07c160; font-size: 16px; cursor: pointer; border: none; background: transparent; outline: none; padding: 0 5px;
        }
        #avatar-more-btn { transform: translateY(-50%) rotate(90deg); }

        /* ============================================================ */
        /* 【3. 页面内容容器样式】*/
        /* ============================================================ */
        .page-content {min-height: 100%; padding: 10px; }
        #me-page .page-content { padding-top: 20px; }
        #user-info-page .page-content { padding-top: 15px; }
        #avatar-edit-page .page-content {
            background-color: #000; display: flex; align-items: center; justify-content: center;
            padding: 0 !important; width: 100%; height: 100%; padding-top: 44px !important; box-sizing: border-box;
        }
        #name-edit-page .page-content, #status-edit-page .page-content,
        #gender-edit-page .page-content, #region-edit-page .page-content,
        #mask-edit-page .page-content, #setting-page .page-content { padding: 20px; }

        #chat-api-setting-page .page-content {
            padding: 20px; display: flex; flex-direction: column;
        }
        #api-settings-form { flex-grow: 1; }
        
        #new-chat-page .page-content { padding: 20px; }
        .form-section { margin-bottom: 25px; }
        .form-label { display: block; font-size: 14px; color: #666; margin-bottom: 8px; }
        .form-input, .form-textarea, .form-select {
            width: 100%; padding: 10px 15px; border: 1px solid #ddd;
            border-radius: 4px; font-size: 16px; background-color: #fff;
        }
        .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: #07c160; outline: none; }
        .form-textarea { height: 120px; resize: vertical; }

        /* ============================================================ */
        /* 【4. 输入框和表单样式】*/
        /* ============================================================ */
        .name-input {
            width: 100%; height: 44px; padding: 0 15px; border: 1px solid #eee;
            border-radius: 4px; font-size: 17px; outline: none; background-color: #fff;
        }
        .name-input:focus { border-color: #07c160; }
        .mask-input {
            width: 100%; min-height: 200px; max-height: 300px; padding: 15px; border: 1px solid #eee;
            border-radius: 4px; font-size: 17px; outline: none; background-color: #fff;
            resize: none; overflow-y: auto; line-height: 1.5;
        }
        .mask-input:focus { border-color: #07c160; }
        
        .api-setting-group { margin-bottom: 25px; }
        .api-setting-label { display: block; font-size: 14px; color: #666; margin-bottom: 8px; }
        .api-setting-input {
            width: 100%; height: 44px; padding: 0 15px; border: 1px solid #ddd;
            border-radius: 4px; font-size: 16px; background-color: #fff;
        }
        .api-setting-input:focus { border-color: #07c160; outline: none; }
        .model-fetch-container { display: flex; align-items: center; gap: 10px; }
        .model-fetch-container select {
            flex-grow: 1; height: 44px; padding: 0 10px; border: 1px solid #ddd;
            border-radius: 4px; background-color: #fff; font-size: 16px;
        }
        .model-fetch-container button {
            height: 44px; padding: 0 15px; border: none; border-radius: 4px; background-color: #07c160;
            color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; gap: 5px;
        }
        .model-fetch-container button:disabled { background-color: #999; cursor: not-allowed; }
        .api-preset-bar {
            display: flex; align-items: center; gap: 10px; padding: 10px;
            background-color: #f0f0f0; border-radius: 8px; margin-bottom: 20px;
        }
        .api-preset-bar select {
            flex-grow: 1; height: 40px; border: 1px solid #ccc; border-radius: 4px; padding: 0 8px;
        }
        .api-preset-bar button {
            height: 40px; padding: 0 15px; border: 1px solid #07c160;
            color: #07c160; background-color: #fff; border-radius: 4px; cursor: pointer;
        }
        .save-preset-btn {
            width: 100%; height: 44px; margin-top: 10px; border-radius: 4px; border: 1px solid #07c160;
            background-color: #fff; color: #07c160; font-size: 16px; font-weight: 500; cursor: pointer;
        }
        .character-info-card {
            background-color: #fff; border-radius: 8px; padding: 15px;
            display: flex; align-items: center; gap: 15px; border: 1px solid #eee;
        }
        .character-avatar-uploader {
            width: 60px; height: 60px; border-radius: 8px; background-color: #e9e9e9;
            border: 2px dashed #ccc; cursor: pointer; display: flex; align-items: center;
            justify-content: center; overflow: hidden; flex-shrink: 0;
        }
        .character-avatar-uploader i { font-size: 24px; color: #aaa; }
        .character-avatar-uploader img { width: 100%; height: 100%; object-fit: cover; }
        #character-name-input { 
            font-size: 16px; font-weight: 400; padding: 10px 15px; border: 1px solid #ddd;
        }
        #character-name-input:focus {
            border-color: #07c160; outline: none; box-shadow: none;
        }
        .switch-container {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px; background-color: #fff; border: 1px solid #eee; border-radius: 4px;
        }
        .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; border-radius: 28px;
        }
        .slider:before {
            position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px;
            background-color: white; transition: .4s; border-radius: 50%;
        }
        input:checked + .slider { background-color: #07c160; }
        input:checked + .slider:before { transform: translateX(22px); }

        /* ============================================================ */
        /* 【5. 底部导航栏样式】*/
        /* ============================================================ */
        .bottom-nav {
            position: fixed; bottom: 0; left: 0; width: 100%; height: calc(50px + env(safe-area-inset-bottom));
            background-color: #f8f8f8; border-top: 1px solid #eee; display: flex;
            justify-content: space-around; align-items: center; z-index: 999; padding-bottom: env(safe-area-inset-bottom);
        }
        .bottom-nav.hidden { display: none; }
        .nav-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            color: #999; font-size: 12px; cursor: pointer; width: 25%; height: 100%;
        }
        .nav-item.active { color: #07c160; }
        .nav-item i { font-size: 20px; margin-bottom: 2px; }
        
        /* 对话图标的未读红点 */
        .nav-item-icon-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .nav-item-unread-dot {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 10px;
            height: 10px;
            background-color: #ff3b30;
            border-radius: 50%;
            border: 2px solid #f8f8f8;
            display: none;
            z-index: 10;
        }
        .nav-item.has-chat-unread .nav-item-unread-dot {
            display: block;
        }

        /* ============================================================ */
        /* 【6. 按钮样式】*/
        /* ============================================================ */
        .menu-container { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0; }
        .menu-btn, .setting-btn, .user-info-edit-btn {
            display: flex; flex-direction: row; align-items: center; justify-content: space-between;
            height: 60px; background-color: #f8f8f8; border-radius: 4px; border: 1px solid #eee;
            cursor: pointer; transition: background-color 0.2s; padding: 0 20px;
        }
        .menu-btn-left { display: flex; align-items: center; }
        .menu-btn:hover, .user-info-card:hover, .user-info-edit-btn:hover, .setting-btn:hover { background-color: #f0f0f0; }
        .menu-btn i.icon { font-size: 22px; color: #07c160; margin-right: 20px; width: 28px; text-align: center; }
        .menu-btn-arrow { font-size: 14px; color: #999; }
        .menu-btn-text, .setting-btn-text, .edit-btn-label { font-size: 14px; color: #333; }

        /* ============================================================ */
        /* 【7. 页面专属样式】*/
        /* ============================================================ */
        .user-info-card {
            display: flex; align-items: center; justify-content: space-between; height: 100px;
            background-color: #f8f8f8; border-radius: 4px; border: 1px solid #eee;
            padding: 0 20px; margin-bottom: 12px; cursor: pointer; transition: background-color 0.2s;
        }
        .user-avatar, .avatar-preview {
            width: 60px; height: 60px; border-radius: 4px; background-color: #07c160;
            display: flex; align-items: center; justify-content: center; color: white;
        }
        .user-avatar { font-size: 24px; margin-right: 50px; }
        .avatar-preview { width: 40px; height: 40px; font-size: 18px; margin-right: 10px; object-fit: cover; }
        .user-text-area { flex: 1; }
        .user-name { font-size: 18px; color: #333; font-weight: 500; margin-bottom: 4px; }
        .user-status { font-size: 14px; color: #999; }
        .edit-btn-label { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .edit-btn-value {
            flex: 1; font-size: 14px; color: #666; text-align: right; padding-right: 10px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .avatar-big-preview {
            aspect-ratio: 1/1; width: 100%; background-color: #07c160;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: clamp(40px, 20vw, 120px); object-fit: cover; border-radius: 0;
        }
        
        #chat-list-container { display: flex; flex-direction: column; }
        .chat-card {
            display: flex; align-items: center; padding: 10px 15px;
            background-color: #fff; border-bottom: 1px solid #f0f0f0;
            cursor: pointer; transition: background-color 0.2s;
        }
        .chat-card:hover { background-color: #f5f5f5; }
        .chat-avatar {
            width: 50px; height: 50px; border-radius: 8px; margin-right: 15px;
            flex-shrink: 0; background-color: #e9e9e9; display: flex;
            align-items: center; justify-content: center; overflow: visible;
        }
        .chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .chat-avatar i { font-size: 24px; color: #aaa; }
        .chat-info { flex-grow: 1; overflow: hidden; }
        .chat-info-top {
            display: flex; justify-content: space-between;
            align-items: center; margin-bottom: 4px;
        }
        .chat-name { font-size: 16px; font-weight: 500; color: #333; }
        .chat-time { font-size: 12px; color: #999; flex-shrink: 0; margin-left: 10px; }
        .chat-last-msg {
            font-size: 14px; color: #888; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis;
        }

        /* ============================================================ */
        /* 【8. 弹窗和隐藏元素样式】*/
        /* ============================================================ */
        .modal-mask {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: none;
            align-items: center; justify-content: center;
        }
        .modal-mask.show { display: flex; }
        #upload-modal { align-items: flex-end; }
        .upload-modal-content {
            width: 100%; background-color: #fff; border-radius: 12px 12px 0 0;
            padding: 15px 0; margin-bottom: env(safe-area-inset-bottom);
        }
        .upload-modal-btn {
            height: 50px; line-height: 50px; text-align: center; font-size: 17px;
            color: #333; cursor: pointer; border-bottom: 1px solid #eee;
        }
        .upload-modal-btn:last-child { border-bottom: none; margin-top: 10px; color: #ff3b30; }
        .center-modal-content {
            width: 90%; max-width: 320px; background-color: #fff; border-radius: 12px;
            padding: 20px; display: flex; flex-direction: column; gap: 15px;
        }
        .center-modal-title { font-size: 18px; font-weight: 500; text-align: center; }
        .center-modal-input {
            width: 100%; height: 40px; border: 1px solid #ddd; border-radius: 4px; padding: 0 10px; font-size: 16px;
        }
        .center-modal-buttons { display: flex; gap: 10px; }
        .center-modal-buttons button { flex: 1; height: 40px; border-radius: 4px; font-size: 16px; cursor: pointer; }
        .modal-btn-primary { background-color: #07c160; color: #fff; border: none; }
        .modal-btn-secondary { background-color: #f0f0f0; color: #333; border: 1px solid #ddd; }
        #preset-list-container {
            max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
        }
        .preset-list-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px; background-color: #f8f8f8; border-radius: 4px;
        }
        .preset-list-item span { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .preset-delete-btn {
            width: 30px; height: 30px; border: none; background: transparent;
            color: #ff3b30; font-size: 18px; cursor: pointer; margin-left: 10px;
        }
        #avatar-upload-file, #avatar-upload-album, #backup-upload-file, #character-avatar-upload-input { display: none; }
    
		/* ============================================================ */
        /* 【9. 对话卡片操作菜单样式】 */
        /* ============================================================ */
        .chat-actions-btn {
            position: absolute;
            right: 5px;
            top: 5px;
            width: 30px;
            height: 30px;
            border: none;
            background: transparent;
            color: #ccc;
            font-size: 16px;
            cursor: pointer;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .chat-actions-btn:hover {
            background-color: #e0e0e0;
            color: #888;
        }
        
        /* 重新调整卡片内边距，为按钮留出空间 */
        .chat-card {
            position: relative; /* 必须设置为相对定位，作为按钮的定位基准 */
            padding-right: 40px; /* 右侧留出空间给按钮 */
        }

		/* ============================================================ */
		/* 【未读消息提示样式】*/
		/* ============================================================ */
		/* 头像上的红色圆点 */
		.chat-avatar-unread {
			position: absolute;
			top: 2px;
			left: 50px;
			width: 18px;
			height: 18px;
			background-color: #ff3b30;
			border-radius: 50%;
			border: 3px solid #fff;
			display: none;
			z-index: 10;
			align-items: center;
			justify-content: center;
			font-size: 10px;
			font-weight: bold;
			color: #fff;
			min-width: 18px;
			line-height: 18px;
		}
		.chat-card.has-unread .chat-avatar-unread {
			display: flex;
		}
	.chat-avatar-unread::after {
		content: attr(data-unread-count);
	}

	/* ============================================================ */
	
	/* 1. 聊天输入底栏 (固定在底部，替代导航栏) */
	.chat-input-bar {
		position: fixed;
		bottom: 0; left: 0; right: 0;
		min-height: 50px;
		background-color: #f7f7f7;
		border-top: 1px solid #dcdcdc;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 10px;
		padding-bottom: calc(8px + env(safe-area-inset-bottom));
		z-index: 1001;
		gap: 10px;
	}

	/* ============================================================ */

        .chat-bar-group { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .chat-bar-center { flex-grow: 1; }

        .chat-bar-btn {
            width: 36px; height: 36px; border-radius: 50%;
            border: none; background: transparent;
            color: #333; font-size: 24px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
        }
        .chat-bar-btn:active { background-color: #e5e5e5; }
        .ai-btn { color: #07c160; }

        .chat-bar-input {
            width: 100%; height: 36px;
            border: 1px solid #ddd; border-radius: 4px;
            padding: 0 10px; font-size: 16px; background-color: #fff;
        }
        .chat-bar-input:focus { border-color: #07c160; outline: none; }

        /* ============================================================ */
        /* 【11. 白色卡片样式】 */
        /* ============================================================ */
        .chat-menu-dropdown {
            position: absolute;
            top: 50px; right: 10px;
            background-color: #fff; /* 背景改为白色 */
            color: #333; /* 文字改为深色 */
            border-radius: 4px;
            width: 150px;
            display: none;
            box-shadow: 0 0 15px rgba(0,0,0,0.15); /* 添加阴影，让白底更明显 */
            z-index: 2000;
        }
        .chat-menu-dropdown.show { display: block; }
        
        /* 修改上方的小三角箭头颜色 */
        .chat-menu-dropdown::before {
            content: ''; position: absolute; top: -6px; right: 12px;
            width: 0; height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #fff; /* 箭头颜色改为白色 */
        }
        
        .chat-menu-item {
            padding: 12px 15px;
            border-bottom: 1px solid #f5f5f5; /* 分割线颜色变浅 */
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        .chat-menu-item:last-child { border-bottom: none; }
        .chat-menu-item:active { background-color: #f0f0f0; } /* 点击反馈颜色 */

        /* 3. 聊天内容区域调整 */
        #chat-detail-page .page-content {
            /* 底部留出空间给输入框，防止内容被遮挡 */
            padding-bottom: 70px; 
            display: flex; flex-direction: column;
        }
		
		/* ============================================================ */
        /* 【12. 新建对话页 - 多选滚动窗口 & 圆形勾选样式】 */
        /* ============================================================ */
        .scroll-select-box {
            width: 100%;
            height: 120px; /* 固定高度 */
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #fff;
            overflow-y: auto; /* 内容多了可以滚动 */
            padding: 10px;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            cursor: pointer;
            padding: 8px 0;
            border-bottom: 1px solid #f9f9f9;
        }
        .checkbox-item:last-child { border-bottom: none; }
        
        /* 1. 隐藏原始的方形复选框 */
        .checkbox-item input[type="checkbox"] {
            display: none; 
        }
        
        /* 2. 自定义圆形外框 */
        .custom-check-circle {
            width: 20px; height: 20px;
            border: 2px solid #ccc; /* 未选中时的灰色边框 */
            border-radius: 50%;     /* 变成圆形 */
            margin-right: 12px;
            position: relative;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        
        /* 3. 自定义中间的实心圆点 (默认隐藏) */
        .custom-check-circle::after {
            content: "";
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%) scale(0); /* 缩放到0，即隐藏 */
            width: 10px; height: 10px;
            background-color: #07c160; /* 选中时的绿色实心 */
            border-radius: 50%;
            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        /* 4. 选中状态：外框变绿 */
        .checkbox-item input[type="checkbox"]:checked + .custom-check-circle {
            border-color: #07c160;
        }
        
        /* 5. 选中状态：中间实心点出现 */
        .checkbox-item input[type="checkbox"]:checked + .custom-check-circle::after {
            transform: translate(-50%, -50%) scale(1);
        }
		
		
		/* ============================================================ */
		/* 【13. 聊天气泡 & 消息流样式 (新增)】 */
		/* ============================================================ */

		/* 消息行容器 */
		.chat-msg-row {
			display: flex;
			width: 100%;
			margin-bottom: 15px;
			align-items: flex-start;
		}

		/* 消息流向区分 */
		.chat-msg-row.left { flex-direction: row; } /* AI 消息 */
		.chat-msg-row.right { flex-direction: row-reverse; } /* 用户消息 */

		/* 头像样式 */
		.msg-avatar {
			width: 40px; height: 40px;
			border-radius: 6px;
			flex-shrink: 0;
			overflow: hidden;
			background-color: #ddd;
		}
		.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
		.msg-avatar i { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; background-color: #ccc; }

		/* 气泡内容包裹层 (包含气泡、时间详情) */
		.msg-content-wrapper {
			max-width: 70%;
			margin: 0 10px;
			display: flex;
			flex-direction: column;
			position: relative;
		}
		.chat-msg-row.left .msg-content-wrapper { align-items: flex-start; }
		.chat-msg-row.right .msg-content-wrapper { align-items: flex-end; }

		/* 气泡本体 */
		.msg-bubble {
			padding: 10px 12px;
			border-radius: 6px;
			font-size: 16px;
			line-height: 1.5;
			color: #333;
			position: relative;
			word-wrap: break-word;
			word-break: break-all;
			cursor: pointer; /* 点击显示时间 */
		}

		/* 气泡颜色 */
		.chat-msg-row.left .msg-bubble {
			background-color: #fff;
			border: 1px solid #ededed;
		}
		.chat-msg-row.right .msg-bubble {
			background-color: #95ec69; /* 微信绿 */
			border: 1px solid #86d65e;
		}

		/* 气泡点击状态 (可选：点击变色) */
		.msg-bubble:active { opacity: 0.8; }

		/* 详情时间 (默认隐藏，点击气泡显示) */
		.msg-detail-time {
			font-size: 12px;
			color: #b2b2b2;
			margin-top: 4px;
			display: none; /* 默认隐藏 */
			user-select: none;
		}
		.msg-detail-time.show { display: block; }


		/* 居中系统时间戳 (超过5分钟显示) */
		.system-time-stamp {
			text-align: center;
			margin: 20px 0;
		}
		.system-time-stamp span {
			background-color: rgba(0,0,0,0.1);
			color: #fff;
			font-size: 12px;
			padding: 4px 8px;
			border-radius: 4px;
		}
		
		/* ============================================================ */
		/* 14.撤回消息实体化 & 菜单样式 */
		/* ============================================================ */

		/* 1. 撤回消息的行容器 (为了容纳批量复选框，必须由 flex 布局) */
		.chat-msg-row.system-row {
			justify-content: center; /* 默认居中 */
			width: 100%;
			margin-bottom: 15px;
			position: relative;
		}

		/* 2. 批量模式下，系统行需要左对齐以便显示复选框 */
		.batch-mode-active .chat-msg-row.system-row {
			justify-content: flex-start;
		}

		/* 3. 撤回消息的实体胶囊 */
		.system-withdraw-msg {
			background-color: rgba(0, 0, 0, 0.05); /* 浅灰色背景 */
			padding: 4px 10px;
			border-radius: 4px;
			font-size: 12px;
			color: #999;
			cursor: pointer; /* 鼠标变为手型，提示可点击 */
			user-select: none;
			transition: background-color 0.2s;
			position: relative; /* 为菜单定位做基准 */
			display: inline-block;
		}

		.system-withdraw-msg:active {
			background-color: rgba(0, 0, 0, 0.1); /* 点击反馈 */
		}

		/* 4. 系统消息的菜单定位 (居中上方) */
		.chat-msg-row.system-row .bubble-menu {
			left: 50%;
			transform: translateX(-50%);
			transform-origin: bottom center;
			bottom: 100%;
			margin-bottom: 8px;
		}
		/* 菜单直接显示，无动画 */
		.chat-msg-row.system-row .bubble-menu.show { 
			display: flex;
			animation: none;
		}

		/* 5. 系统消息菜单的小三角 (居中) */
		.chat-msg-row.system-row .bubble-menu::after {
			left: 50%;
			margin-left: -6px; /* 居中修正 */
			right: auto;
		}
		/* ============================================================ */
		/* 【15. 气泡悬浮菜单样式 (新版)】 */
		/* ============================================================ */

		/* 确保包裹层相对定位，作为菜单定位的基准 */
		.msg-content-wrapper {
			position: relative; 
			/* 其他样式保持不变... */
		}

		/* ============================================================ */
		/* 【14. 气泡悬浮菜单样式 (修复版)】 */
		/* ============================================================ */

		.msg-content-wrapper {
			position: relative;
			display: flex;
			flex-direction: column;
		}

		/* 黑色小卡片菜单容器 - 基础样式 */
		.bubble-menu {
			position: absolute;
			bottom: 100%; /* 位于气泡上方 */
			background-color: #333;
			border-radius: 6px;
			padding: 0; /*去掉内边距，完全由按钮填充 */
			display: none;
			flex-direction: row;
			align-items: center;
			box-shadow: 0 4px 12px rgba(0,0,0,0.2);
			z-index: 100;
			margin-bottom: 8px;
			white-space: nowrap;
		}

		/* --- 左侧 AI 消息菜单：左对齐 --- */
		.chat-msg-row.left .bubble-menu {
			left: 0;
			transform-origin: bottom left;
		}
		/* 左侧小三角 */
		.chat-msg-row.left .bubble-menu::after {
			content: ''; position: absolute; top: 100%; left: 15px; /* 箭头靠左 */
			border-width: 6px; border-style: solid; border-color: #333 transparent transparent transparent;
		}

		/* --- 右侧 用户 消息菜单：右对齐 --- */
		.chat-msg-row.right .bubble-menu {
			right: 0;
			transform-origin: bottom right;
		}
		/* 右侧小三角 */
		.chat-msg-row.right .bubble-menu::after {
			content: ''; position: absolute; top: 100%; right: 15px; /* 箭头靠右 */
			border-width: 6px; border-style: solid; border-color: #333 transparent transparent transparent;
		}

		/* 菜单显示动画 */
		.bubble-menu.show { display: flex; animation: menuPop 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28); }

		@keyframes menuPop {
			from { opacity: 0; transform: scale(0.8); }
			to { opacity: 1; transform: scale(1); }
		}

		/* 菜单项文字按钮 */
		.menu-option {
			color: #fff; font-size: 13px; padding: 10px 14px; /* 增加点击区域 */
			cursor: pointer; user-select: none; position: relative;
		}
		.menu-option:active { background-color: #444; border-radius: 6px; }

		/* 分割线 */
		.menu-option:not(:last-child)::after {
			content: ''; position: absolute; right: 0; top: 12px; bottom: 12px;
			width: 1px; background-color: #555;
		}
		
		/* 简单的淡入动画 */
		@keyframes fadeIn {
			from { opacity: 0; transform: translateX(-50%) translateY(5px); }
			to { opacity: 1; transform: translateX(-50%) translateY(0); }
		}
		
		/* ============================================================ */
		/* 【16. 编辑弹窗专属样式】 */
		/* ============================================================ */
		#edit-msg-input {
			resize: none; /* 禁止手动拖动大小 */
			font-family: inherit;
			line-height: 1.5;
		}
		/* 确保弹窗层级最高 */
		#edit-msg-modal { z-index: 2000; }

		/* ============================================================ */
		/* 【17. 历史记录加载器样式】 */
		/* ============================================================ */
		.history-loader {
			text-align: center;
			padding: 15px 0;
			cursor: pointer;
			font-size: 12px;
			color: #999;
			user-select: none;
		}
		.history-loader span {
			background-color: rgba(0,0,0,0.05);
			padding: 4px 12px;
			border-radius: 10px;
		}
		.history-loader:active span {
			background-color: rgba(0,0,0,0.1);
		}
		
		/* ============================================================ */
		/* 【18. 下拉加载动画专属样式】 */
		/* ============================================================ */

		/* 消息容器 (用于做位移动画) */
		#chat-message-container {
			transform: translateY(0);
			/* 默认不加 transition，拖动时需要实时跟随；松手时才加 transition */
		}
		#chat-message-container.animating {
			transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		}

		/* 顶部隐藏的加载提示区 */
		.pull-refresh-spinner {
			position: absolute;
			top: -40px; /* 藏在顶部外面 */
			left: 0;
			width: 100%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			color: #999;
			z-index: 10;
			opacity: 0;
			transition: opacity 0.2s;
		}
		.pull-refresh-spinner.visible { opacity: 1; }
		.pull-refresh-spinner i { margin-right: 6px; }

		/* 旋转动画 */
		.fa-spin-fast { animation: fa-spin 1s infinite linear; }
		
		
		/* ============================================================ */
		/* 【19. 新增功能样式：引用、撤回、预览条】 */
		/* ============================================================ */

		/* 1. 输入框上方的引用预览条 */
		.reply-preview-bar {
			position: absolute;
			bottom: 100%; /* 位于输入栏正上方 */
			left: 0;
			right: 0;
			background-color: #f7f7f7;
			padding: 8px 12px;
			border-top: 1px solid #e5e5e5;
			border-bottom: 1px solid #e5e5e5;
			display: none; /* 默认隐藏 */
			align-items: center;
			justify-content: space-between;
			z-index: 1000;
			color: #666;
			font-size: 13px;
		}
		.reply-preview-bar.show { display: flex; }
		.reply-text {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 85%;
			border-left: 3px solid #07c160;
			padding-left: 8px;
		}
		.reply-close-btn {
			font-size: 16px;
			color: #999;
			padding: 5px;
			cursor: pointer;
		}

		/* 2. 气泡内的引用卡片 */
		.msg-quote-card {
			background-color: rgba(0, 0, 0, 0.05);
			padding: 6px 8px;
			border-radius: 4px;
			margin-bottom: 6px;
			font-size: 13px;
			color: #666;
			display: flex;
			flex-direction: column;
			position: relative;
			user-select: none; /* 防止复制消息时把这一块也复制得乱七八糟 */
		}
		.msg-quote-name {
			font-weight: bold;
			font-size: 12px;
			margin-bottom: 2px;
			color: #555;
		}
		.msg-quote-content {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; /* 最多显示2行 */
			-webkit-box-orient: vertical;
		}

		/* 3. 撤回消息的系统提示 (复用 system-time-stamp，但稍微调整) */
		.system-withdraw-msg {
			text-align: center;
			margin: 10px 0;
			font-size: 12px;
			color: #999;
		}
		.system-withdraw-msg span {
			/* 不加背景色，直接纯文字，或者加浅灰色背景 */
			padding: 2px 5px;
		}
		
		/* --- 引用卡片样式 (在气泡内部) --- */
		.msg-quote-card {
			display: flex;
			flex-direction: column;
			background-color: rgba(0, 0, 0, 0.05); /* 淡淡的灰色背景 */
			border-radius: 4px;
			padding: 6px 10px;
			margin-bottom: 8px; /* 和正文拉开距离 */
			border-left: 3px solid #ccc; /* 左侧装饰线 */
			font-size: 13px;
			color: #666;
			line-height: 1.4;
			user-select: none; /* 防止复制时选中 */
			cursor: default;
		}

		/* 如果是发送方(绿色气泡)，引用卡片的背景稍微调深一点，增加对比度 */
		.chat-msg-row.right .msg-quote-card {
			background-color: rgba(0, 0, 0, 0.1); 
			border-left-color: rgba(0, 0, 0, 0.2);
			color: #444; /* 绿色背景下的文字颜色 */
		}

		.msg-quote-name {
			font-weight: 600;
			margin-bottom: 2px;
			font-size: 12px;
			opacity: 0.8;
		}

		.msg-quote-content {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; /* 限制最多显示2行 */
			-webkit-box-orient: vertical;
		}
		
		/* ============================================================ */
		
		/* ============================================================ */
		/* 【20. 批量删除模式专属样式】 */
		/* ============================================================ */

		/* 1. 复选框容器 (默认隐藏，宽度为0) */
		.batch-checkbox-col {
			width: 0;
			overflow: hidden;
			opacity: 0;
			transition: all 0.2s ease; /* 添加动画效果 */
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* 2. 激活批量模式时，复选框显示 */
		.batch-mode-active .batch-checkbox-col {
			width: 40px; /* 腾出空间 */
			opacity: 1;
			margin-right: 5px;
		}

		/* 3. 复选框圆圈样式 */
		.batch-circle {
			width: 22px; height: 22px;
			border: 2px solid #c5c5c5;
			border-radius: 50%;
			position: relative;
			background-color: #fff;
			flex-shrink: 0;
		}

		/* 4. 选中状态 (变成绿色实心) */
		.batch-circle.checked {
			background-color: #07c160;
			border-color: #07c160;
		}
		.batch-circle.checked::after {
			content: '';
			position: absolute;
			left: 7px; top: 3px;
			width: 5px; height: 10px;
			border: solid white;
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
		}

		/* 5. 底部批量操作栏 (固定在底部) */
		.batch-action-bar {
			position: fixed;
			bottom: 0; left: 0; right: 0;
			height: 50px;
			background-color: #f7f7f7;
			border-top: 1px solid #dcdcdc;
			display: none; /* 默认隐藏 */
			align-items: center;
			justify-content: space-between;
			padding: 0 20px;
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 1100; /* 层级要比输入框高 */
		}
		.batch-action-bar.show { display: flex; }

		.batch-btn {
			font-size: 16px; border: none; background: transparent; cursor: pointer;
		}
		.batch-cancel { color: #333; }
		.batch-delete { color: #ff3b30; font-weight: 600; }
		.batch-delete:disabled { color: #ccc; }


		/* ============================================================ */
		/* 【21.全局基础样式】-> top-bar 区域修改 */
		/* ============================================================ */

		/* 聊天详情页顶栏，增加高度以容纳两行文字 */
		#chat-detail-top {
			height: 60px; /* 从 44px 增加到 60px */
		}

		/* 标题容器，改为垂直flex布局 */
		#chat-detail-title-container {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 2px; /* 标题和副标题之间的间距 */
		}

		/* 主标题 */
		.top-bar-main-title {
			font-size: 16px;
			font-weight: 500;
			color: #333;
			max-width: 200px;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* 副标题 (状态) */
		.top-bar-subtitle {
			font-size: 12px;
			color: #888;
		}

		/* 修正返回按钮和右侧按钮的垂直居中 */
		#chat-detail-top .top-bar-back,
		#chat-detail-top .top-bar-right-btn {
			height: 60px; /* 与顶栏高度一致 */
		}
		
		/* ============================================================ */
		/* 【22. 对话卡片置顶 & 菜单样式 (新增)】 */
		/* ============================================================ */

		/* 1. 置顶对话卡片的特殊背景色 */
		.chat-card.pinned {
			background-color: #f5f5f5;
		}

		/* 2. 确保新菜单使用绝对定位，以便 JS 控制位置 */
		#chat-card-action-menu {
			position: absolute; /* 必须是 absolute */
		}

		/* ============================================================ */
		/* 【新增/确认】AI 撤回内容气泡样式 */
		/* ============================================================ */

		/* 隐藏内容的特殊气泡 */
		.ai-secret-bubble {
			display: none; /* 默认隐藏 */
			margin-top: 8px; /* 距离上方胶囊的间距 */
			padding: 10px 14px;
			background-color: #fff; /* 改为白色背景，更像气泡 */
			border: 1px solid #e0e0e0;
			border-radius: 8px;
			color: #666;
			font-size: 14px;
			max-width: 85%;
			position: relative;
			box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 加一点阴影 */
			animation: fadeIn 0.3s ease;
			word-wrap: break-word;
		}

		.ai-secret-bubble.show {
			display: block;
		}

		/* 简单的淡入动画 */
		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(-5px); }
			to { opacity: 1; transform: translateY(0); }
		}

		/* 记忆设置页 - 长期记忆占位符 */
		.long-term-placeholder {
			background-color: #f9f9f9;
			border: 2px dashed #ddd;
			border-radius: 8px;
			padding: 40px 20px;
			text-align: center;
			color: #aaa;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transition: all 0.3s;
		}

		.long-term-placeholder:hover {
			border-color: #ccc;
			background-color: #f5f5f5;
		}

		.long-term-placeholder i {
			font-size: 32px;
			margin-bottom: 15px;
			color: #ccc;
		}

		.long-term-placeholder p {
			font-size: 14px;
			margin: 0;
		}
		
		/* ============================================================ */
		/* 【23. 长期记忆编辑页面样式 (新增)】 */
		/* ============================================================ */
		#ltm-editor-container {
			display: flex;
			flex-direction: column;
			gap: 15px;
		}

		.ltm-counter {
			font-size: 14px;
			color: #888;
			padding: 5px;
			background-color: #f5f5f5;
			border-radius: 4px;
			text-align: center;
			border: 1px solid #eee;
		}

		.ltm-item {
			display: flex;
			align-items: flex-start;
			gap: 10px;
		}

		.ltm-item textarea {
			flex-grow: 1;
			min-height: 80px;
			resize: vertical;
			padding: 10px;
			border: 1px solid #ddd;
			border-radius: 4px;
			font-size: 14px;
			line-height: 1.5;
		}

		.ltm-item-actions {
			display: flex;
			flex-direction: column;
			gap: 8px;
			flex-shrink: 0;
		}

		.ltm-action-btn {
			width: 36px;
			height: 36px;
			border: 1px solid #ddd;
			background-color: #fff;
			border-radius: 4px;
			cursor: pointer;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.ltm-action-btn:active {
			background-color: #f0f0f0;
		}

		.ltm-action-btn.delete { color: #ff3b30; }
		.ltm-action-btn.insert { color: #07c160; }