/**
 * Zibll Markdown 适配插件 - 前端样式
 * 1. 分栏实时预览布局
 * 2. 拖拽上传高亮
 * 3. 评论三点菜单修复
 */

/* ========== 分栏实时预览 ========== */

.zdzl-md-split {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 12px;
    border: 1px solid var(--main-border-color, #e8e8e8);
    border-radius: var(--main-radius, 8px);
    /* 不在 split 裁剪，避免裁掉 TinyMCE 工具栏下拉菜单；由 split-body 负责裁剪 */
    background: var(--main-bg-color, #fff);
}

.dark-theme .zdzl-md-split {
    border-color: var(--main-border-color, #444);
    background: var(--main-bg-color, #2a2a2a);
}

/* ---- 工具栏行（全宽） ---- */

.zdzl-md-split > .wp-editor-tools,
.zdzl-md-split > .mce-toolbar-grp {
    flex-shrink: 0;
    width: 100%;
    border-bottom: 1px solid var(--main-border-color, #e8e8e8);
    margin: 0;
    z-index: 2;
}

/* 顶部第一行贴合整体圆角 */
.zdzl-md-split > .wp-editor-tools:first-child,
.zdzl-md-split > .mce-toolbar-grp:first-child {
    border-top-left-radius: var(--main-radius, 8px);
    border-top-right-radius: var(--main-radius, 8px);
}

/* ---- 分栏主体：编辑区 | 预览区 ---- */

.zdzl-md-split-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-bottom-left-radius: var(--main-radius, 8px);
    border-bottom-right-radius: var(--main-radius, 8px);
}

/* ---- 编辑区（左栏） ---- */

.zdzl-md-edit-pane {
    flex: 0 0 50%;
    min-width: 0;
    border-right: 1px solid var(--main-border-color, #e8e8e8);
    display: flex;
    flex-direction: column;
}

.dark-theme .zdzl-md-edit-pane {
    border-right-color: var(--main-border-color, #444);
}

.zdzl-md-edit-pane .wp-editor-wrap {
    border: none !important;
    border-radius: 0 !important;
}

.zdzl-md-edit-pane .wp-editor-container,
.zdzl-md-edit-pane .mce-tinymce {
    border-radius: 0 !important;
}

/* TinyMCE iframe 自适应父容器宽度 */
.zdzl-md-edit-pane .mce-ifr {
    width: 100% !important;
}

/* 编辑区内的 textarea（评论等） */
.zdzl-md-edit-pane textarea {
    width: 100% !important;
    min-height: 180px;
    border: none !important;
    border-radius: 0 !important;
    resize: vertical;
    padding: 12px 15px !important;
    background: transparent;
    color: var(--main-color, #333);
    font-size: 14px;
    line-height: 1.7;
    font-family: inherit;
}

.dark-theme .zdzl-md-edit-pane textarea {
    color: var(--main-color, #ccc);
}

.zdzl-md-edit-pane textarea:focus {
    outline: none;
    box-shadow: none;
}

/* ---- 预览区（右栏） ---- */

.zdzl-md-preview-pane {
    flex: 0 0 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--main-bg-color, #fff);
}

.dark-theme .zdzl-md-preview-pane {
    background: var(--main-bg-color, #2a2a2a);
}

/* 面板头部 */
.zdzl-md-pane-header {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--muted-bg-color, #f8f8f8);
    border-bottom: 1px solid var(--main-border-color, #e8e8e8);
    flex-shrink: 0;
}

.dark-theme .zdzl-md-pane-header {
    background: var(--muted-bg-color, #333);
    border-bottom-color: var(--main-border-color, #444);
}

.zdzl-md-pane-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-color, #999);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 预览头部使用主题色强调 */
.zdzl-md-pane-label-preview {
    color: var(--theme-color, #ff6c00);
}

/* 预览内容区 */
.zdzl-md-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px 20px;
    min-height: 160px;
    max-height: 600px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: var(--main-color, #333);
    font-size: 14px;
    line-height: 1.8;
}

.dark-theme .zdzl-md-preview-body {
    color: var(--main-color, #ccc);
}

/* 预览占位提示 */
.zdzl-md-preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--muted-color, #bbb);
    font-size: 13px;
    text-align: center;
    user-select: none;
}

/* 预览加载状态 */
.zdzl-md-preview-body.zdzl-md-loading {
    position: relative;
}

.zdzl-md-preview-body.zdzl-md-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--theme-color, #ff6c00) 50%, transparent 100%);
    animation: zdzl-md-loading-bar 1.2s ease-in-out infinite;
}

@keyframes zdzl-md-loading-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---- 预览内容样式 ----
 * 复用 Zibll 主题 UI：
 * 前台发帖/编辑时，预览容器带 .wp-posts-content 类，直接套用主题
 * main.css 中 .wp-posts-content 的标题/列表/表格/代码/图片/链接样式，
 * 预览效果与发布后完全一致。
 * 后台文章编辑器不加载主题 main.css，以下 :not() 兜底规则才生效。
 */

.zdzl-md-preview-body:not(.wp-posts-content) h1,
.zdzl-md-preview-body:not(.wp-posts-content) h2,
.zdzl-md-preview-body:not(.wp-posts-content) h3,
.zdzl-md-preview-body:not(.wp-posts-content) h4,
.zdzl-md-preview-body:not(.wp-posts-content) h5,
.zdzl-md-preview-body:not(.wp-posts-content) h6 {
    margin: 1em 0 0.5em;
    line-height: 1.4;
    font-weight: 600;
}

.zdzl-md-preview-body:not(.wp-posts-content) h1 { font-size: 1.5em; }
.zdzl-md-preview-body:not(.wp-posts-content) h2 { font-size: 1.3em; }
.zdzl-md-preview-body:not(.wp-posts-content) h3 { font-size: 1.15em; }
.zdzl-md-preview-body:not(.wp-posts-content) h4 { font-size: 1.05em; }
.zdzl-md-preview-body:not(.wp-posts-content) h5 { font-size: 1em; }
.zdzl-md-preview-body:not(.wp-posts-content) h6 { font-size: 0.9em; color: var(--muted-color, #999); }

.zdzl-md-preview-body:not(.wp-posts-content) p {
    margin: 0 0 1em;
    line-height: 1.8;
}

.zdzl-md-preview-body:not(.wp-posts-content) ul,
.zdzl-md-preview-body:not(.wp-posts-content) ol {
    margin: 0.5em 0;
    padding-left: 2em;
    line-height: 1.8;
}

.zdzl-md-preview-body:not(.wp-posts-content) li {
    margin: 0.3em 0;
}

.zdzl-md-preview-body:not(.wp-posts-content) li > ul,
.zdzl-md-preview-body:not(.wp-posts-content) li > ol {
    margin: 0.2em 0;
}

.zdzl-md-preview-body:not(.wp-posts-content) hr {
    margin: 1.5em 0;
    border: none;
    border-top: 2px solid var(--main-border-color, #eee);
}

.dark-theme .zdzl-md-preview-body:not(.wp-posts-content) hr {
    border-color: var(--main-border-color, #444);
}

.zdzl-md-preview-body:not(.wp-posts-content) pre {
    margin: 1em 0;
    padding: 15px;
    background: #282c34;
    border-radius: var(--main-radius, 8px);
    overflow-x: auto;
    line-height: 1.5;
}

.zdzl-md-preview-body:not(.wp-posts-content) code {
    font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 0.9em;
    padding: 2px 6px;
    background: var(--muted-bg-color, #f0f0f0);
    border-radius: 3px;
    color: #e96900;
}

.dark-theme .zdzl-md-preview-body:not(.wp-posts-content) code {
    background: var(--muted-bg-color, #3a3a3a);
}

.zdzl-md-preview-body:not(.wp-posts-content) pre code {
    padding: 0;
    background: none;
    color: #abb2bf;
    font-size: 0.85em;
}

.zdzl-md-preview-body:not(.wp-posts-content) table {
    width: 100%;
    margin: 1em 0;
    border-collapse: collapse;
    font-size: 0.95em;
}

.zdzl-md-preview-body:not(.wp-posts-content) th,
.zdzl-md-preview-body:not(.wp-posts-content) td {
    padding: 10px 12px;
    border: 1px solid var(--main-border-color, #ddd);
    text-align: left;
}

.dark-theme .zdzl-md-preview-body:not(.wp-posts-content) th,
.dark-theme .zdzl-md-preview-body:not(.wp-posts-content) td {
    border-color: var(--main-border-color, #444);
}

.zdzl-md-preview-body:not(.wp-posts-content) th {
    background: var(--muted-bg-color, #f5f5f5);
    font-weight: 600;
}

.dark-theme .zdzl-md-preview-body:not(.wp-posts-content) th {
    background: var(--muted-bg-color, #333);
}

.zdzl-md-preview-body:not(.wp-posts-content) img {
    max-width: 100%;
    height: auto;
    border-radius: var(--main-radius, 8px);
    margin: 0.5em 0;
}

/* Zibll 引言样式（.quote_q）：前台由主题 main.css 提供，此处仅后台兜底 */
.zdzl-md-preview-body:not(.wp-posts-content) .quote_q {
    padding: 1.2em;
    margin: 10px 0 20px 0;
    position: relative;
    --quote-color: var(--theme-color, #ff6c00);
    color: var(--quote-color);
    border-radius: var(--main-radius, 8px);
}

.zdzl-md-preview-body:not(.wp-posts-content) .quote_q > div,
.zdzl-md-preview-body:not(.wp-posts-content) .quote_q > p {
    position: relative;
    margin: 0;
    padding-left: 2em;
    opacity: 0.8;
    font-size: 14px;
    line-height: 1.8;
}

.zdzl-md-preview-body:not(.wp-posts-content) .quote_q::before {
    content: '';
    border-radius: var(--main-radius, 8px);
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0.08;
    right: 0;
    background: var(--quote-color);
    top: 0;
}

.zdzl-md-preview-body:not(.wp-posts-content) .quote_q::after {
    font: normal normal normal 14px/1 FontAwesome;
    content: '\f10d';
    font-size: 1.2em;
    margin-right: 0.5em;
    position: absolute;
    color: var(--quote-color);
    top: 16px;
    left: 16px;
    opacity: 0.5;
}

/* 颜色变体（后台兜底） */
.zdzl-md-preview-body:not(.wp-posts-content) .quote_q.qe_wzk_c-red { --quote-color: #dc3f3f; }
.zdzl-md-preview-body:not(.wp-posts-content) .quote_q.qe_wzk_lan { --quote-color: #0092ff; }
.zdzl-md-preview-body:not(.wp-posts-content) .quote_q.qe_wzk_lv { --quote-color: #23790e; }

/* ========== KaTeX 数学公式 ========== */

.zdzl-md-preview-body .zdzl-md-math-display,
.zdzl-md-preview-body .zdzl-md-math-inline {
    /* LaTeX保护span不加额外样式，KaTeX会替换其内容 */
}

.zdzl-md-preview-body .katex-display {
    margin: 1em 0;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
}

.zdzl-md-preview-body .katex {
    font-size: 1.05em;
    line-height: 1.4;
}

/* ========== 拖拽上传高亮 ========== */

.zdzl-md-dragover {
    outline: 2px dashed var(--theme-color, #ff6c00) !important;
    outline-offset: -2px;
    background: rgba(255, 108, 0, 0.05);
}

.zdzl-md-file-input {
    display: none !important;
}

/* ========== 响应式：移动端上下堆叠 ========== */

@media (max-width: 768px) {
    .zdzl-md-split-body {
        flex-direction: column;
    }

    .zdzl-md-edit-pane,
    .zdzl-md-preview-pane {
        flex: 0 0 auto;
        width: 100%;
    }

    .zdzl-md-edit-pane {
        border-right: none;
        border-bottom: 1px solid var(--main-border-color, #e8e8e8);
    }

    .dark-theme .zdzl-md-edit-pane {
        border-bottom-color: var(--main-border-color, #444);
    }

    .zdzl-md-preview-body {
        max-height: 350px;
        padding: 12px 15px;
        font-size: 13px;
    }

    .zdzl-md-edit-pane textarea {
        min-height: 140px;
        padding: 10px 12px !important;
        font-size: 13px;
    }
}

/* ========== @提及功能 ========== */

/*
 * @用户搜索下拉框
 * 设计参考：iOS 液态玻璃（Liquid Glass）控制中心
 * - 多层半透明叠加
 * - 强背景模糊 + 饱和度提升
 * - 内发光高光边框
 * - 大圆角、柔和阴影
 * - 暗色模式自动适配
 * - 平滑过渡动画
 */
.zdzl-mention-dropdown {
    position: absolute;
    z-index: 999;
    min-width: 200px;
    max-width: 280px;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px 0;
    /* 液态玻璃：低透明度白色 + 强模糊 + 提升饱和度 */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.25) 100%
    );
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    /* 内高光 + 外边框，营造玻璃厚度 */
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: calc(var(--main-radius, 8px) + 6px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.15),
        0 12px 40px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: opacity 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 0.18s ease;
}

/* 暗色模式：更深的半透明 + 冷色调高光 */
.dark-theme .zdzl-mention-dropdown {
    background: linear-gradient(
        135deg,
        rgba(60, 60, 65, 0.55) 0%,
        rgba(35, 35, 40, 0.25) 100%
    );
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 12px 40px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.18);
}

.zdzl-mention-dropdown[style*="display: block"],
.zdzl-mention-dropdown[style*="opacity: 1"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1);
}

/* @提及项：纯文字列表，无头像 */
.zdzl-mention-dropdown > li > a.zdzl-mention-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 18px !important;
    font-size: 13px;
    line-height: 1.5;
    color: var(--main-color, #333);
    transition: background 0.12s ease;
}

.zdzl-mention-dropdown > li > a.zdzl-mention-link:hover,
.zdzl-mention-dropdown > li.active > a.zdzl-mention-link {
    background: rgba(0, 0, 0, 0.06);
    color: var(--main-color, #333);
}

.dark-theme .zdzl-mention-dropdown > li > a.zdzl-mention-link:hover,
.dark-theme .zdzl-mention-dropdown > li.active > a.zdzl-mention-link {
    background: rgba(255, 255, 255, 0.09);
}

.zdzl-mention-dropdown > li:first-child > a.zdzl-mention-link {
    border-radius: calc(var(--main-radius, 8px) + 6px) calc(var(--main-radius, 8px) + 6px) 0 0;
}

.zdzl-mention-dropdown > li:last-child > a.zdzl-mention-link {
    border-radius: 0 0 calc(var(--main-radius, 8px) + 6px) calc(var(--main-radius, 8px) + 6px);
}

/* 显示名 */
.zdzl-mention-name {
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--main-color, #333);
}

/* 登录名：次要文字 */
.zdzl-mention-login {
    font-size: 11px;
    color: var(--muted-color, #999);
    flex-shrink: 0;
    opacity: 0.8;
}

/* 自定义滚动条（对齐 Zibll mini-scrollbar） */
.zdzl-mention-dropdown::-webkit-scrollbar {
    width: 4px;
}

.zdzl-mention-dropdown::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.dark-theme .zdzl-mention-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

.zdzl-mention-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

/* 内容中渲染的 @提及链接（用主题色） */
.zdzl-mention {
    color: var(--theme-color, #ff6c00);
    font-weight: 500;
    text-decoration: none;
    padding: 0 2px;
    transition: opacity 0.15s ease;
}

.zdzl-mention:hover {
    opacity: 0.8;
    color: var(--theme-color, #ff6c00);
    text-decoration: none;
}

/* 移动端：下拉框跟随编辑器宽度 */
@media (max-width: 768px) {
    .zdzl-mention-dropdown {
        min-width: 160px;
        max-width: 240px;
        max-height: 200px;
    }

    .zdzl-mention-dropdown > li > a.zdzl-mention-link {
        padding: 8px 14px !important;
    }
}

/* ========== 评论三点菜单修复 ========== */

#postcomments .dropdown-menu {
    z-index: 1080;
    min-width: 140px;
}

#postcomments .drop-fixed-sm {
    position: relative;
    overflow: visible !important;
}

#postcomments .drop-fixed-sm .dropdown-menu {
    overflow: visible !important;
}

@media (max-width: 768px) {
    .drop-fixed-sm .dropdown-menu {
        max-height: 70vh !important;
        padding: 16px 10px !important;
    }

    .drop-fixed-sm .dropdown-menu > li > a {
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
}