/**
 * GitHub 风格的评论编辑器和展示样式（仅浅色，禁用暗色模式）
 */

/* ========== 1. 宽度：与页面正文区严格对齐 ==========
   #commentBox 保持父容器内容宽度，不使用负 margin，避免左右溢出 */
html body #commentBox {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 内部元素统一撑满 #commentBox */
html body .github-comment-box,
html body .github-comments-empty,
html body .github-comments-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* 内部元素（编辑器、评论卡片）用自身 max-width 约束，居中 */
html body .github-comment-box,
html body .github-comments .comment-item,
html body .github-comments-empty {
    max-width: 100% !important;
}

/* ========== 2. 强制禁用暗色模式 ========== */
/* 用更精确的选择器 + :not() 强制覆盖任何可能的深色继承 */
html:not(.dark-mode) body #commentBox,
html[data-theme='light'] body #commentBox,
body #commentBox {
    color-scheme: light !important;
}

/* ========== 3. 编辑器容器（对齐站点卡片风格） ========== */
html body .github-comment-box {
    border: 1px solid #e2dcc6 !important;
    border-radius: 8px !important;
    background: #fff !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

/* ========== 4. EasyMDE 编辑器强制浅色（核心！） ========== */
html body .EasyMDEContainer {
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #1f2328 !important;
}

/* CodeMirror 编辑区 */
html body .EasyMDEContainer .CodeMirror {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #1f2328 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    min-height: 160px !important;
    max-height: 280px !important;
    height: auto !important;
}

html body .EasyMDEContainer .CodeMirror textarea,
html body .EasyMDEContainer .CodeMirror div.CodeMirror-cursor {
    background: transparent !important;
    color: #1f2328 !important;
}

/* 工具栏 —— 对齐修复：用 flex + align-items 强制所有图标和分隔符水平居中 */
html body .EasyMDEContainer .editor-toolbar,
html body .EasyMDEContainer .editor-toolbar.fullscreen {
    background: #faf8f0 !important;
    border: none !important;
    border-bottom: 1px solid #ece7d9 !important;
    border-radius: 0 !important;
    padding: 6px 8px !important;
    color: #333 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    line-height: 1 !important;
    font-size: 0 !important;  /* 消除 inline-block 间隙 */
}

html body .EasyMDEContainer .editor-toolbar a,
html body .EasyMDEContainer .editor-toolbar button,
html body .EasyMDEContainer .editor-toolbar i {
    color: #1f2328 !important;
    background: transparent !important;
    border-radius: 4px !important;
    opacity: 0.85 !important;
    margin: 0 2px !important;
    padding: 4px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    width: 28px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* 分隔符竖线 —— EasyMDE 用 <i class="separator">|</i> 渲染，
   必须把字面量 "|" 隐藏（否则斜体 <i> 会显示成斜线），只保留一条 border */
html body .EasyMDEContainer .editor-toolbar i.separator,
html body .EasyMDEContainer .editor-toolbar a.separator {
    display: inline-block !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 0 6px !important;
    border-left: 1px solid #ddd8c4 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    font-style: normal !important;
    text-indent: -10px !important;
    overflow: hidden !important;
    align-self: center !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}

/* 预览/并排等非方形宽度按钮 */
html body .EasyMDEContainer .editor-toolbar a.preview,
html body .EasyMDEContainer .editor-toolbar a.side-by-side,
html body .EasyMDEContainer .editor-toolbar a.fullscreen {
    width: auto !important;
    min-width: 28px !important;
}

/* CodeMirror 底部状态栏 */
html body .EasyMDEContainer .CodeMirror .CodeMirror-scrollbar-filler,
html body .EasyMDEContainer .CodeMirror .CodeMirror-gutter-filler {
    background-color: #fff !important;
}

html body .EasyMDEContainer .CodeMirror .CodeMirror-gutters {
    background: #f6f8fa !important;
    border-right: 1px solid #d0d7de !important;
}

html body .EasyMDEContainer .CodeMirror-linenumber {
    color: #57606a !important;
}

/* 全屏 & 预览侧栏 */
html body .EasyMDEContainer .CodeMirror-fullscreen,
html body .EasyMDEContainer .editor-preview-side {
    background: #fff !important;
    color: #1f2328 !important;
}

html body .EasyMDEContainer .editor-preview-side {
    border-left: 1px solid #d0d7de !important;
    padding: 16px !important;
}

/* ========== 5. 底部操作栏 ========== */
html body .github-comment-box .editor-footer {
    background: #faf8f0 !important;
    border-top: 1px solid #ece7d9 !important;
    border-radius: 0 0 8px 8px !important;
    padding: 8px 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
}

html body .github-comment-box .editor-footer .editor-help {
    display: flex !important;
    gap: 12px !important;
    font-size: 12px !important;
    color: #656d76 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

html body .github-comment-box .editor-footer .editor-help a {
    color: #337ab7 !important;
    text-decoration: none !important;
}

html body .github-comment-box .editor-footer .editor-help a:hover {
    text-decoration: underline !important;
}

html body .github-comment-box .editor-footer .editor-actions {
    display: flex !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

html body .github-comment-box .editor-footer .btn,
html body .github-comment-box .editor-footer button[type='submit'] {
    padding: 6px 16px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid #2e6da4 !important;
    cursor: pointer !important;
    background: #337ab7 !important;
    color: #fff !important;
    box-shadow: none !important;
}

html body .github-comment-box .editor-footer .btn:hover,
html body .github-comment-box .editor-footer button[type='submit']:hover {
    background: #2e6da4 !important;
}

/* ========== 6. 表单字段区域 ========== */
html body .github-comment-box .form-group,
html body .github-comment-box .input-group-addon {
    background: transparent !important;
    color: #1f2328 !important;
}

/* ========== 7. 评论列表 ========== */
html body .github-comments {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html body .github-comments .comment-item {
    border: 1px solid #e2dcc6 !important;
    border-radius: 8px !important;
    background: #fff !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    list-style: none !important;
}

html body .github-comments .comment-item .comment-header {
    background: #faf8f0 !important;
    border-bottom: 1px solid #ece7d9 !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: #333 !important;
}

html body .github-comments .comment-item .comment-header .avatar {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #d0d7de !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    color: #656d76 !important;
    overflow: hidden !important;
}

html body .github-comments .comment-item .comment-header .avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body .github-comments .comment-item .comment-header .username {
    font-weight: 600 !important;
    color: #333 !important;
}

/* ========== 7.4 回复按钮 ========== */
html body .github-comments .comment-item .comment-actions .btn-reply-comment {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    font-size: 13px !important;
    color: #555 !important;
    background: #fff !important;
    border: 1px solid #e2dcc6 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

html body .github-comments .comment-item .comment-actions .btn-reply-comment:hover {
    background: #faf8f0 !important;
    border-color: #d8d2ba !important;
    color: #337ab7 !important;
    text-decoration: none !important;
}

html body .github-comments .comment-item .comment-header .timestamp {
    color: #656d76 !important;
    text-decoration: none !important;
    margin-left: auto !important;
    font-size: 12px !important;
}

html body .github-comments .comment-item .comment-header .timestamp:hover {
    color: #337ab7 !important;
    text-decoration: underline !important;
}

/* ========== 8. Markdown 渲染区 ========== */
html body .markdown-body {
    padding: 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    color: #1f2328 !important;
    background-color: #fff !important;
}

html body .markdown-body > :first-child {
    margin-top: 0 !important;
}

html body .markdown-body > :last-child {
    margin-bottom: 0 !important;
}

html body .markdown-body h1,
html body .markdown-body h2,
html body .markdown-body h3,
html body .markdown-body h4,
html body .markdown-body h5,
html body .markdown-body h6 {
    margin-top: 24px !important;
    margin-bottom: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #1f2328 !important;
    border-bottom: none !important;
}

html body .markdown-body h1 { font-size: 2em !important; }
html body .markdown-body h2 {
    font-size: 1.5em !important;
    border-bottom: 1px solid #d0d7de !important;
    padding-bottom: 0.3em !important;
}
html body .markdown-body h3 { font-size: 1.25em !important; }
html body .markdown-body h4 { font-size: 1em !important; }
html body .markdown-body h5 { font-size: 0.875em !important; }
html body .markdown-body h6 { font-size: 0.85em !important; color: #656d76 !important; }

html body .markdown-body p {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

html body .markdown-body a {
    color: #337ab7 !important;
    text-decoration: none !important;
}
html body .markdown-body a:hover { text-decoration: underline !important; }

html body .markdown-body strong { font-weight: 600 !important; }

html body .markdown-body ol,
html body .markdown-body ul {
    padding-left: 2em !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

html body .markdown-body li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
html body .markdown-body li + li { margin-top: 0.25em !important; }

html body .markdown-body .task-list-item {
    list-style: none !important;
    margin-left: -1.4em !important;
}
html body .markdown-body .task-list-item input[type="checkbox"] {
    margin-right: 0.5em !important;
}

html body .markdown-body blockquote {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding: 0 1em !important;
    color: #656d76 !important;
    border-left: 0.25em solid #d0d7de !important;
    background: transparent !important;
}

html body .markdown-body code {
    padding: 0.2em 0.4em !important;
    margin: 0 !important;
    font-size: 85% !important;
    background-color: rgba(175, 184, 193, 0.2) !important;
    border-radius: 6px !important;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
    color: #1f2328 !important;
}

html body .markdown-body pre {
    padding: 16px !important;
    overflow: auto !important;
    font-size: 85% !important;
    line-height: 1.45 !important;
    background-color: #f6f8fa !important;
    border-radius: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    color: #1f2328 !important;
}

html body .markdown-body pre code {
    padding: 0 !important;
    font-size: 100% !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    white-space: pre !important;
    color: #1f2328 !important;
}

html body .markdown-body table {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    overflow: auto !important;
    border-collapse: collapse !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

html body .markdown-body table th,
html body .markdown-body table td {
    padding: 6px 13px !important;
    border: 1px solid #d0d7de !important;
    color: #1f2328 !important;
}

html body .markdown-body table th {
    font-weight: 600 !important;
    background-color: #f6f8fa !important;
}

html body .markdown-body table tr {
    background-color: #fff !important;
    border-top: 1px solid #d0d7de !important;
}

html body .markdown-body table tr:nth-child(2n) {
    background-color: #f6f8fa !important;
}

html body .markdown-body hr {
    height: 0.25em !important;
    padding: 0 !important;
    margin: 24px 0 !important;
    background-color: #d0d7de !important;
    border: 0 !important;
}

html body .markdown-body img {
    max-width: 100% !important;
    box-sizing: content-box !important;
    background-color: #fff !important;
}

html body .markdown-body del { text-decoration: line-through !important; }
html body .markdown-body input[type="checkbox"] { cursor: pointer !important; }

/* ========== 9. 评论操作栏 ========== */
html body .comment-actions {
    padding: 8px 16px !important;
    background: #faf8f0 !important;
    border-top: 1px solid #ece7d9 !important;
    display: flex !important;
    gap: 16px !important;
}

html body .comment-actions button,
html body .comment-actions a {
    background: transparent !important;
    border: none !important;
    color: #656d76 !important;
    cursor: pointer !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

html body .comment-actions button:hover,
html body .comment-actions a:hover {
    color: #1f2328 !important;
    background: rgba(208, 215, 222, 0.48) !important;
    text-decoration: none !important;
}

/* ========== 11. 空评论列表状态 ========== */
html body .github-comments-empty {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #777 !important;
    background: #faf8f0 !important;
    border-radius: 8px !important;
    border: 1px dashed #e2dcc6 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ========== 10.1 评论列表标题栏（与站点卡片统一） ========== */
html body .comments-header-panel {
    border: 1px solid #e2dcc6 !important;
    border-radius: 8px !important;
    background: #faf8f0 !important;
    margin-bottom: 12px !important;
}

html body .comments-header-panel .panel-heading {
    border-bottom: none !important;
    background: transparent !important;
    padding: 10px 16px !important;
    color: #333 !important;
}

/* ========== 11. 分页 ========== */
html body .comments-pager {
    margin: 4px 0 16px !important;
}

html body .comments-pager .pager {
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 4px !important;
}

html body .comments-pager .pager a,
html body .comments-pager .pager span {
    padding: 4px 10px !important;
    border-radius: 4px !important;
    border: 1px solid #e2dcc6 !important;
    background: #fff !important;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 13px !important;
}

html body .comments-pager .pager a:hover {
    background: #faf8f0 !important;
    border-color: #d8d2ba !important;
}

html body .comments-pager .pager .disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

html body .comments-pager .pager .active {
    background: #337ab7 !important;
    color: #fff !important;
    border-color: #2e6da4 !important;
}

/* ========== 12. Emoji picker ========== */
html body .emoji-picker-container {
    position: absolute !important;
    background: #fff !important;
    border: 1px solid #d0d7de !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2) !important;
    padding: 8px !important;
    z-index: 1000 !important;
}

html body .emoji-picker-container .emoji-grid {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 2px !important;
}

html body .emoji-picker-container .emoji-btn {
    background: transparent !important;
    border: none !important;
    font-size: 20px !important;
    padding: 4px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
}

html body .emoji-picker-container .emoji-btn:hover {
    background: #f6f8fa !important;
}

/* ========== 13. 待审核提示 ========== */
html body .comment-pending-notice {
    background: #fff8c5 !important;
    border: 1px solid #d4a72c !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    color: #9a6700 !important;
}