/* --- 渲染规则绑定范围美化 --- */

           /* 1. 容器美化：类似 iOS 分组卡片 */
           #rule-scope-checkboxes {
               max-height: 250px;
               overflow-y: auto;
               background-color: var(--secondary-bg);
               /* 适配暗黑模式 */
               border: 1px solid var(--border-color);
               border-radius: 10px;
               padding: 5px;
               margin-top: 5px;
               display: flex;
               flex-direction: column;
               gap: 2px;
           }

           /* 2. 单行列表项美化 */
           .rule-scope-item {
               display: flex;
               align-items: center;
               padding: 10px 12px;
               border-radius: 8px;
               cursor: pointer;
               transition: background-color 0.2s ease;
               user-select: none;
               /* 防止双击选中文字 */
           }

           /* 悬停和点击效果 */
           .rule-scope-item:hover {
               background-color: rgba(0, 0, 0, 0.05);
           }

           .rule-scope-item:active {
               background-color: rgba(0, 0, 0, 0.1);
           }

           /* 3. 复选框美化：变大一点，并增加右边距 */
           .rule-scope-item input[type="checkbox"] {
               appearance: none;
               /* 移除默认样式 */
               -webkit-appearance: none;
               width: 22px;
               height: 22px;
               border: 2px solid #c7c7cc;
               border-radius: 50%;
               /* 圆形复选框，像选择列表 */
               margin-right: 12px;
               position: relative;
               transition: all 0.2s;
               flex-shrink: 0;
           }

           /* 选中状态 */
           .rule-scope-item input[type="checkbox"]:checked {
               background-color: var(--accent-color);
               border-color: var(--accent-color);
           }

           /* 选中时的对勾 */
           .rule-scope-item input[type="checkbox"]:checked::after {
               content: '✔';
               font-size: 14px;
               color: white;
               position: absolute;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               font-weight: bold;
           }

           /* 4. 头像样式 */
           .rule-scope-avatar {
               width: 36px;
               height: 36px;
               border-radius: 50%;
               object-fit: cover;
               margin-right: 12px;
               border: 1px solid rgba(0, 0, 0, 0.1);
               flex-shrink: 0;
           }

           /* 公用图标的特殊样式 */
           .rule-scope-icon-box {
               width: 36px;
               height: 36px;
               border-radius: 50%;
               background-color: #007aff;
               /* 蓝色背景 */
               color: white;
               display: flex;
               align-items: center;
               justify-content: center;
               margin-right: 12px;
               font-size: 18px;
               flex-shrink: 0;
           }

           /* 5. 文字排版 */
           .rule-scope-info {
               display: flex;
               flex-direction: column;
               flex-grow: 1;
               overflow: hidden;
           }

           .rule-scope-name {
               font-size: 15px;
               font-weight: 500;
               color: var(--text-primary);
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
           }

           .rule-scope-desc {
               font-size: 12px;
               color: var(--text-secondary);
           }

           /* 暗黑模式适配 */
           #phone-screen.dark-mode #rule-scope-checkboxes {
               background-color: #1c1c1e;
               border-color: #38383a;
           }

           #phone-screen.dark-mode .rule-scope-item:hover {
               background-color: rgba(255, 255, 255, 0.1);
           }

           /* --- 渲染规则管理模式样式 --- */

           /* 1. 规则卡片容器调整 */
           .rule-card {
               position: relative;
               /* 为复选框定位 */
               transition: transform 0.2s ease, border-color 0.2s;
           }

           /* 2. 隐藏的复选框 */
           .rule-select-checkbox {
               position: absolute;
               top: 15px;
               right: 15px;
               width: 22px;
               height: 22px;
               border: 2px solid #c7c7cc;
               border-radius: 50%;
               appearance: none;
               -webkit-appearance: none;
               background-color: transparent;
               display: none;
               /* 默认隐藏 */
               z-index: 5;
               transition: all 0.2s;
           }

           /* 3. 选中状态 */
           .rule-select-checkbox:checked {
               background-color: var(--accent-color);
               border-color: var(--accent-color);
           }

           .rule-select-checkbox:checked::after {
               content: '✔';
               color: white;
               font-size: 14px;
               position: absolute;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               font-weight: bold;
           }

           /* 4. 管理模式激活时 */
           #rules-content-container.management-mode {
               padding-bottom: 80px;
               /* 为底部栏留空 */
           }

           #rules-content-container.management-mode .rule-select-checkbox {
               display: block;
               /* 显示复选框 */
           }

           #rules-content-container.management-mode .rule-card {
               border-right: 30px solid transparent;
               /* 稍微挤压一点内容 */
           }

           #rules-content-container.management-mode .rule-card.selected {
               background-color: rgba(0, 122, 255, 0.05);
               border-color: var(--accent-color);
           }

           /* 暗黑模式适配 */
           #phone-screen.dark-mode #rules-action-bar {
               background-color: rgba(28, 28, 30, 0.95);
               border-top-color: #38383a;
               color: #fff;
           }

           /* --- START: 聊天图片缩略图与放大样式 --- */

           /* 1. 强制缩小聊天记录中的图片尺寸 */
           .message-bubble .chat-image {
               max-width: 140px !important;
               /* 缩略图最大宽度 */
               max-height: 180px !important;
               /* 缩略图最大高度 */
               width: auto !important;
               height: auto !important;
               border-radius: 8px !important;
               cursor: zoom-in !important;
               /* 鼠标移上去显示放大图标 */
               object-fit: cover !important;
               display: block;
           }

           /* 2. 简单的全屏放大遮罩层 (不依赖相册组件) */
           #simple-image-zoom-overlay {
               position: fixed;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background-color: rgba(0, 0, 0, 0.85);
               /* 深色半透明背景 */
               z-index: 99999;
               /* 保证在最上层 */
               display: none;
               /* 默认隐藏 */
               justify-content: center;
               align-items: center;
               opacity: 0;
               transition: opacity 0.25s ease;
               /* 渐变动画 */
               backdrop-filter: blur(5px);
           }

           #simple-image-zoom-overlay.visible {
               display: flex;
               opacity: 1;
           }

           /* 放大后的图片本体 */
           #simple-image-zoom-overlay img {
               max-width: 95%;
               max-height: 90%;
               border-radius: 4px;
               box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
               transform: scale(0.9);
               transition: transform 0.25s ease;
               object-fit: contain;
           }

           #simple-image-zoom-overlay.visible img {
               transform: scale(1);
           }

           /* --- END: 聊天图片缩略图与放大样式 --- */
           /* 通用按钮样式 */
           .nai-regenerate-btn,
           .nai-upload-imgbb-btn,
           .nai-save-local-btn {
               width: 32px;
               height: 32px;
               background-color: rgba(0, 0, 0, 0.6);
               backdrop-filter: blur(4px);
               -webkit-backdrop-filter: blur(4px);
               border: 1px solid rgba(255, 255, 255, 0.3);
               border-radius: 50%;
               color: white;
               cursor: pointer;
               display: flex;
               align-items: center;
               justify-content: center;
               padding: 0;
               opacity: 0;
               transition: all 0.2s ease-in-out;
           }

           /* 悬停显示 */
           .nai-image-wrapper:hover .nai-regenerate-btn,
           .nai-image-wrapper:hover .nai-upload-imgbb-btn,
           .nai-image-wrapper:hover .nai-save-local-btn {
               opacity: 1;
           }

           /* 按钮高亮 */
           .nai-regenerate-btn:hover,
           .nai-upload-imgbb-btn:hover,
           .nai-save-local-btn:hover {
               background-color: rgba(0, 0, 0, 0.85);
               transform: scale(1.1);
           }