/**
 * editormd 编辑器预览区域样式补充
 * 用于覆盖 editormd 默认样式和第三方库样式冲突
 * 
 * 使用：在任何需要渲染 editormd Markdown 内容的页面引入此 CSS
 * <link rel="stylesheet" href="/static/cms/css/editormd.replenish.css">
 */

/* ===== 图片样式 ===== */
/* 覆盖 editormd 默认 .markdown-body img { max-width: 100% } 和 layui 全局 inline-block */
.editormd-html-preview img,
.markdown-body img {
    display: block !important;
    max-width: 80% !important;
    max-height: 750px !important;
    height: auto !important;
    margin: 16px 0 !important;
    box-sizing: border-box !important;
}

/* ===== 音频播放器样式 ===== */
.editormd-html-preview audio,
.markdown-body audio {
    display: block !important;
    width: 80% !important;
    height: 40px !important;
    margin: 16px 0 !important;
    outline: none;
}

/* ===== 视频播放器样式 ===== */
.editormd-html-preview video,
.markdown-body video {
    display: block !important;
    width: 80% !important;
    aspect-ratio: 16 / 9 !important;
    margin: 16px 0 !important;
    outline: none;
    background: #000;
    border-radius: 4px;
}

/* ===== 附件下载链接样式 ===== */
.editormd-html-preview a#download,
.markdown-body a#download {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    padding: 10px 20px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    color: #16baaa;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all .2s;
}

/* 下载图标 */
.editormd-html-preview a#download::before,
.markdown-body a#download::before {
    content: '\f019';  /* Font Awesome fa-download icon */
    font-family: 'FontAwesome';
    font-size: 16px;
    color: #16baaa;
}

.editormd-html-preview a#download:hover,
.markdown-body a#download:hover {
    color: #0d9488;
    background: rgba(22, 186, 170, .08);
    border-color: #16baaa;
}

.editormd-html-preview a#download:hover::before,
.markdown-body a#download:hover::before {
    color: #0d9488;
}