/* --- RPG/Fantasy Theme for Code Blocks --- */

/* [1] 主代码块容器: 添加边框、阴影和圆角，营造“卡片”感 */
.markdown-body pre {
  background-color: transparent !important; /* 清除pre元素的默认背景 */
    border: 1px solid #414868; /* 深邃的蓝紫色边框，如同魔法金属 */
      border-radius: 8px; /* 圆润的边角 */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* 更深的阴影，使其悬浮于页面之上 */
          overflow: hidden; /* 确保子元素遵循圆角裁剪 */
          }

          /* [2] 头部栏: 作为标题区域，使用不同的深色背景 */
          .markdown-body pre > div > div.flex.justify-between.h-8 {
            background-color: #2a2c3a !important; /* 略浅于内容区的深蓝紫色 */
              border-bottom: 1px solid #414868 !important; /* 与外边框同色的分割线 */
                padding-left: 12px !important;
                  padding-right: 8px !important;
                  }

                  /* [3] 语言标签 (例如 'ai'): 使用金色以突出显示 */
                  .markdown-body pre > div > div.flex.justify-between > div.text-\[13px\] {
                    color: #e0af68 !important; /* 华丽的暗金色，如同铭文 */
                      font-weight: 600; /* 加粗 */
                        letter-spacing: 0.5px;
                          text-transform: uppercase; /* 大写，增加庄重感 */
                          }

                          /* [4] 复制按钮图标样式 (关键规则 R3): 确保在深色背景下清晰可见 */
                          /* 默认图标颜色 */
                          .markdown-body pre svg.lucide-copy,
                          .markdown-body pre div[data-tooltip-id^="copy-tooltip"] > svg {
                            color: #a9b1d6 !important; /* 柔和的淡蓝色，在深色背景上清晰可辨 */
                              transition: all 0.2s ease-in-out !important;
                              }

                              /* 鼠标悬停时的图标颜色与效果 */
                              .markdown-body pre .group:hover svg.lucide-copy,
                              .markdown-body pre div[data-tooltip-id^="copy-tooltip"]:hover > svg {
                                color: #e0af68 !important; /* 悬停时变为华丽的暗金色 */
                                  transform: scale(1.2) !important; /* 放大效果，提供明确的交互反馈 */
                                  }

                                  /* [5] 代码内容区 (关键规则 R4): 这是状态栏的主要显示区域 */
                                  .markdown-body pre > div > div[node] {
                                    background: #1a1b26 !important; /* 非常深的蓝黑背景，如同午夜的天空 */
                                      color: #c0caf5 !important; /* 默认文字颜色，一种清晰的淡蓝灰色 */
                                        padding: 1em 1.2em !important; /* 增加内边距，使内容更疏朗 */
                                        }

                                        /* [6] 滚动条美化: 统一整体风格 */
                                        .markdown-body pre > div > div[node]::-webkit-scrollbar {
                                          width: 8px;
                                            height: 8px;
                                            }
                                            .markdown-body pre > div > div[node]::-webkit-scrollbar-track {
                                              background: #2a2c3a; /* 滚动条轨道颜色 */
                                              }
                                              .markdown-body pre > div > div[node]::-webkit-scrollbar-thumb {
                                                background-color: #414868; /* 滚动条滑块颜色 */
                                                  border-radius: 4px;
                                                  }
                                                  .markdown-body pre > div > div[node]::-webkit-scrollbar-thumb:hover {
                                                    background-color: #565f89; /* 悬停时颜色加深 */
                                                    }

                                                    /* [7] 无语言标识的纯代码块样式: 确保风格统一 */
                                                    .markdown-body pre > code[node] {
                                                        background: #1a1b26 !important;
                                                            color: #c0caf5 !important;
                                                                padding: 0.8em 1.2em !important;
                                                                    border-radius: 8px; /* 纯代码块没有头部，圆角直接应用于此 */
                                                                        display: block;
                                                                            border: 1px solid #414868; /* 同样添加边框 */
                                                                            }

                                                                            /* [8] 纯代码块的滚动条美化 */
                                                                            .markdown-body pre > code[node]::-webkit-scrollbar {
                                                                              width: 8px;
                                                                                height: 8px;
                                                                                }
                                                                                .markdown-body pre > code[node]::-webkit-scrollbar-track {
                                                                                  background: transparent;
                                                                                  }
                                                                                  .markdown-body pre > code[node]::-webkit-scrollbar-thumb {
                                                                                    background-color: #414868;
                                                                                      border-radius: 4px;
                                                                                      }
                                                                                      .markdown-body pre > code[node]::-webkit-scrollbar-thumb:hover {
                                                                                        background-color: #565f89;
                                                                                        }