/* 编辑器样式 - Editor Styles */

/* 编辑器样式 - Editor Styles */

.editor-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: calc(var(--vh, 1vh) * 100 - 130px);
    padding: 0;
    background: var(--bg-surface) !important;
    margin: 24px auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    max-width: 1200px;
    backdrop-filter: blur(12px);
    /* 只在 hover 相关属性上使用过渡，避免初始化抖动 */
    transition: box-shadow 0.3s ease;
}

.editor-container:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.editor-container.keyboard-open {
    height: auto !important;
    min-height: calc(var(--vh, 1vh) * 100 - 70px);
    overflow-y: auto;
}

.editor-container.keyboard-open #vditor,
.editor-container.keyboard-open .vditor {
    height: auto !important;
}

#vditor {
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0;
    border: none !important;
    overflow-y: auto;
}

#vditor,
.vditor {
    background: var(--bg-surface) !important;
    --vditor-border-color: var(--border-color);
    --vditor-toolbar-bg: var(--bg-surface);
}

/* Vditor Editor Content */
.vditor-ir .vditor-ir__main,
.vditor-wysiwyg .vditor-wysiwyg__main,
.vditor-sv .vditor-sv__main {
    padding: 30px 60px !important;
    max-width: none !important;
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-main) !important;
}

.vditor-preview {
    padding: 30px 60px !important;
    max-width: none !important;
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-main) !important;
}

.vditor-ir .vditor-ir__main textarea {
    padding: 0 !important;
    margin: 0 !important;
}

.vditor-sv .vditor-sv__main textarea,
.vditor-wysiwyg .vditor-wysiwyg__main {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Vditor Toolbar */
.vditor-toolbar {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-left: 10px !important;
}

.vditor-toolbar__item {
    color: var(--text-secondary) !important;
}

.vditor-toolbar__item:hover {
    color: var(--text-main) !important;
    background-color: var(--bg-surface-hover) !important;
}

.vditor-content,
.vditor-wysiwyg,
.vditor-wysiwyg .vditor-wysiwyg__main {
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
}

.vditor-wysiwyg__main,
.vditor-wysiwyg__main .vditor-wysiwyg__main,
.vditor-wysiwyg .vditor-wysiwyg__main .vditor-wysiwyg__main,
.vditor-wysiwyg__main>div,
.vditor-wysiwyg__main .vditor-wysiwyg__main>div,
.vditor-wysiwyg__main[contenteditable="true"],
.vditor-ir,
.vditor-ir .vditor-ir__main,
.vditor-ir .vditor-ir__main textarea {
    background: var(--bg-surface) !important;
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
}

.vditor-preview,
.vditor-preview .vditor-reset,
.vditor-sv,
.vditor-sv .vditor-sv__main,
.vditor-sv .vditor-sv__preview,
.vditor-sv .vditor-sv__preview .vditor-reset {
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
}

.vditor-wysiwyg *,
.vditor-ir * {
    background-color: transparent !important;
}

/* Hide Preview Toolbar Options */
.vditor-preview__action,
.vditor-preview__action--current,
.vditor-preview__action[data-type="desktop"],
.vditor-preview__action[data-type="tablet"],
.vditor-preview__action[data-type="mobile"],
.vditor-preview__action[data-type="mp-wechat"],
.vditor-preview__action[data-type="zhihu"] {
    display: none !important;
}

.vditor-preview__toolbar {
    display: none !important;
}

/* YAML Frontmatter Styles */
.vditor-preview .language-yaml,
.vditor-preview pre[data-lang="yaml"],
.vditor-preview code.language-yaml {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    border-radius: var(--radius-md) !important;
}

.vditor-ir pre.vditor-ir__marker--pre code,
.vditor-wysiwyg pre code {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--text-main) !important;
}

.vditor-preview hr+pre,
.vditor-preview hr+pre code {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    border-radius: var(--radius-md) !important;
}

.vditor-preview pre,
.vditor-preview pre code,
.vditor-preview .hljs,
.vditor-preview .hljs-attr,
.vditor-preview .hljs-string,
.vditor-preview .hljs-literal {
    background: var(--bg-body) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-md) !important;
}

.vditor-preview .hljs-attr {
    color: #60a5fa !important;
    /* Blue 400 */
}

.vditor-preview .hljs-string {
    color: #34d399 !important;
    /* Emerald 400 */
}

.vditor-preview .hljs-literal {
    color: #f472b6 !important;
    /* Pink 400 */
}

/* Drag Over Effect */
.drag-over {
    border: 2px dashed var(--primary-color) !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
    position: relative;
}

.drag-over::after {
    content: '拖拽图片到此处上传';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary-color);
    color: white;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 16px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
}

/* 隐藏 Vditor 内置的上传提示 - 我们使用自己的上传进度对话框 */
.vditor-tip {
    display: none !important;
}