/**
 * 统一富文本编辑器与前端展示样式
 * 应用于：Quill编辑器、文章详情页、工具详情页
 * 确保所见即所得
 */

/* 基础文本样式 */
.content-editor,
.ql-editor,
.prose-content {
    color: #334155;
    font-size: 16px;
    line-height: 1.75;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 段落 */
.content-editor p,
.ql-editor p,
.prose-content p {
    margin: 1em 0;
    line-height: 1.75;
}

/* 标题样式 - 统一前后端 */
.content-editor h1,
.ql-editor h1,
.prose-content h1 {
    font-size: 2em;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    line-height: 1.3;
}

.content-editor h2,
.ql-editor h2,
.prose-content h2 {
    font-size: 1.75em;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    line-height: 1.3;
}

.content-editor h3,
.ql-editor h3,
.prose-content h3 {
    font-size: 1.4em;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    line-height: 1.3;
}

/* 列表样式 - 统一缩进和间距 */
.content-editor ul,
.ql-editor ul,
.prose-content ul,
.content-editor ol,
.ql-editor ol,
.prose-content ol {
    margin: 1em 0;
    padding-left: 2em;
}

.content-editor li,
.ql-editor li,
.prose-content li {
    margin: 0.5em 0;
    line-height: 1.75;
}

.content-editor ul li,
.ql-editor ul li,
.prose-content ul li {
    list-style-type: disc;
}

.content-editor ol li,
.ql-editor ol li,
.prose-content ol li {
    list-style-type: decimal;
}

/* 引用块 */
.content-editor blockquote,
.ql-editor blockquote,
.prose-content blockquote {
    border-left: 4px solid #e2e8f0;
    padding-left: 1em;
    margin: 1em 0;
    color: #64748b;
    font-style: italic;
}

/* 代码块 */
.content-editor pre,
.ql-editor pre,
.prose-content pre {
    background-color: #f1f5f9;
    padding: 1em;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1em 0;
    font-family: "Monaco", "Menlo", "Consolas", monospace;
    font-size: 0.875em;
}

.content-editor code,
.ql-editor code,
.prose-content code {
    background-color: #f1f5f9;
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-family: "Monaco", "Menlo", "Consolas", monospace;
    font-size: 0.875em;
}

/* 链接 */
.content-editor a,
.ql-editor a,
.prose-content a {
    color: #3b82f6;
    text-decoration: underline;
}

.content-editor a:hover,
.ql-editor a:hover,
.prose-content a:hover {
    color: #2563eb;
}

/* 图片样式 - 统一前后端 */
.content-editor img,
.ql-editor img,
.prose-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 1.5em 0;
    display: block;
}

/* 加粗 */
.content-editor strong,
.ql-editor strong,
.prose-content strong,
.content-editor b,
.ql-editor b,
.prose-content b {
    font-weight: 700;
    color: #0f172a;
}

/* 斜体 */
.content-editor em,
.ql-editor em,
.prose-content em,
.content-editor i,
.ql-editor i,
.prose-content i {
    font-style: italic;
}

/* 删除线 */
.content-editor s,
.ql-editor s,
.prose-content s,
.content-editor del,
.ql-editor del,
.prose-content del {
    text-decoration: line-through;
}

/* 下划线 */
.content-editor u,
.ql-editor u,
.prose-content u {
    text-decoration: underline;
}

/* 水平线 */
.content-editor hr,
.ql-editor hr,
.prose-content hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 2em 0;
}

/* 表格 */
.content-editor table,
.ql-editor table,
.prose-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

.content-editor th,
.ql-editor th,
.prose-content th,
.content-editor td,
.ql-editor td,
.prose-content td {
    border: 1px solid #e2e8f0;
    padding: 0.75em;
    text-align: left;
}

.content-editor th,
.ql-editor th,
.prose-content th {
    background-color: #f8fafc;
    font-weight: 600;
}

/* ==================== Quill 编辑器特定样式 ==================== */

/* 覆盖 Quill 默认样式，使其与前端一致 */
.ql-editor {
    min-height: 250px;
    font-size: 16px;
    line-height: 1.75;
}

.ql-editor p {
    margin: 1em 0;
}

.ql-editor h1 {
    font-size: 2em;
}

.ql-editor h2 {
    font-size: 1.75em;
}

.ql-editor h3 {
    font-size: 1.4em;
}

/* Quill 编辑器内的图片样式 - 限制尺寸便于编辑 */
.ql-editor img {
    max-width: 300px;
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: 0.5rem;
    margin: 1em 0;
    display: block;
    object-fit: contain;
}

/* 确保 Quill 工具栏不影响内容区 */
.ql-toolbar {
    border-bottom: 1px solid #e2e8f0;
}

.ql-container {
    border: 1px solid #e2e8f0;
    border-radius: 0 0 0.5rem 0.5rem;
}

/* ==================== 前端展示特定样式 ==================== */

/* prose-content 用于前端文章/工具详情展示 */
.prose-content {
    max-width: none;
}

.prose-content:first-child {
    margin-top: 0;
}

.prose-content:last-child {
    margin-bottom: 0;
}