/* ========================================= */
           /* ▼▼▼ CPhone Browser 高端重构 (Swiss Style) ▼▼▼ */
           /* ========================================= */

           /* 1. 浏览器整体容器背景 */
           #char-browser-screen,
           #char-browser-article-screen {
               background-color: #F2F2F7 !important;
               /* iOS 高级灰底色 */
           }

           #phone-screen.dark-mode #char-browser-screen,
           #phone-screen.dark-mode #char-browser-article-screen {
               background-color: #000000 !important;
           }

           /* 2. 历史记录列表容器 */
           #char-browser-history {
               padding: 20px !important;
               /* 增加外边距，让内容呼吸 */
               display: flex;
               flex-direction: column;
               gap: 12px;
               /* 卡片之间的完美间距 */
           }

           /* 3. 单个历史记录卡片 */
           .char-browser-item {
               background-color: #FFFFFF;
               padding: 16px 20px !important;
               /* 内部留白 */
               border-radius: 12px;
               /* 现代感圆角 */
               box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
               /* 极轻微的悬浮感 */
               border: 1px solid rgba(0, 0, 0, 0.03);
               /* 几乎不可见的边界 */
               display: flex;
               align-items: center;
               gap: 16px;
               /* 图标与文字的间距 */
               transition: transform 0.1s, background-color 0.2s;
           }

           .char-browser-item:active {
               transform: scale(0.98);
               background-color: #F9F9F9;
           }

           /* 4. 列表项左侧图标容器 (替代 Emoji) */
           .char-browser-icon-box {
               width: 40px;
               height: 40px;
               border-radius: 10px;
               background-color: #F2F2F7;
               /* 浅灰背景衬托图标 */
               display: flex;
               align-items: center;
               justify-content: center;
               color: #007AFF;
               /* 瑞士蓝 Accent Color */
               flex-shrink: 0;
           }

           .char-browser-icon-box svg {
               width: 20px;
               height: 20px;
               stroke-width: 2;
           }

           /* 5. 列表项文字内容 */
           .char-browser-info {
               flex-grow: 1;
               overflow: hidden;
               display: flex;
               flex-direction: column;
               gap: 4px;
               /* 标题与URL的间距 */
           }

           .char-browser-item .title {
               font-size: 16px !important;
               font-weight: 600 !important;
               color: #1C1C1E;
               margin: 0 !important;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
               letter-spacing: -0.01em;
           }

           .char-browser-item .url {
               font-size: 12px !important;
               color: #8E8E93 !important;
               /* 次要信息灰色 */
               font-weight: 400;
               font-family: -apple-system, BlinkMacSystemFont, "SF Mono", monospace;
               /* 网址用等宽字体更有科技感 */
           }

           /* 6. 列表项右侧箭头 */
           .char-browser-arrow {
               color: #C7C7CC;
               flex-shrink: 0;
           }

           /* 7. 文章详情页排版 (阅读体验优化) */
           #char-article-content {
               padding: 30px 24px !important;
               /* 宽敞的阅读边距 */
               background-color: #FFFFFF !important;
               /* 纯白阅读背景 */

               /* --- 修复开始 --- */
               /* 1. 删除或注释掉 min-height: 100%; */
               /* min-height: 100%; */

               /* 2. 添加 height: 0; 配合 flex-grow 使用，强制它在 flex 容器内滚动 */
               height: 0 !important;

               /* 3. 确保 flex 属性和滚动开启 */
               flex-grow: 1;
               overflow-y: auto !important;
               /* --- 修复结束 --- */
           }

           /* 文章标题 */
           #char-article-title {
               font-size: 17px !important;
               /* 导航栏标题大小 */
               font-weight: 600;
           }

           /* 文章正文容器内的大标题 (如果有) */
           .article-large-title {
               font-size: 24px;
               font-weight: 700;
               color: #1C1C1E;
               margin-bottom: 16px;
               line-height: 1.3;
               letter-spacing: -0.02em;
           }

           /* 文章正文文字 */
           #char-article-content p {
               font-size: 17px;
               /* 最佳阅读字号 */
               line-height: 1.6;
               /* 黄金比例行高 */
               color: #333333;
               margin-bottom: 20px;
               /* 段落间距 */
               text-align: justify;
               /* 两端对齐 */
           }

           /* 文章图片 */
           .char-browser-image-description {
               margin-top: 40px;
               padding: 40px 20px;
               background-color: #F9F9F9;
               border-radius: 12px;
               color: #666;
               font-style: italic;
               text-align: center;
               border: 1px dashed #E5E5E5;
           }

           /* --- 暗黑模式适配 --- */
           #phone-screen.dark-mode .char-browser-item {
               background-color: #1C1C1E;
               border-color: #333;
           }

           #phone-screen.dark-mode .char-browser-icon-box {
               background-color: #2C2C2E;
               color: #0A84FF;
           }

           #phone-screen.dark-mode .char-browser-item .title {
               color: #FFFFFF;
           }

           #phone-screen.dark-mode #char-article-content {
               background-color: #000000 !important;
           }

           #phone-screen.dark-mode .article-large-title {
               color: #FFFFFF;
           }

           #phone-screen.dark-mode #char-article-content p {
               color: #E0E0E0;
           }

           #phone-screen.dark-mode .char-browser-image-description {
               background-color: #1C1C1E;
               border-color: #333;
               color: #AAA;
           }