/* ============================================================
   MDto - 文章排版编辑器专属样式
   ============================================================ */

/* ---- 工具类 ---- */
.hidden { display: none !important; }

/* ---- 平台切换 tabs ---- */
.platform-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-toolbar);
    border-radius: var(--radius-md);
    padding: 3px;
}
.platform-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.platform-tab:hover { background: var(--bg-panel); color: var(--text-primary); }
.platform-tab--active {
    background: var(--bg-panel);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.header-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 8px;
}

/* ---- 工具栏扩展 ---- */
.toolbar-select {
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-panel);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}
.toolbar-select:focus { border-color: var(--accent); }
.toolbar-select--theme { min-width: 110px; }

.toolbar-spacer { flex: 1; }

.toolbar-btn--primary {
    display: flex;
    align-items: center;
    gap: 5px;
    width: auto;
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--radius-sm);
    padding: 4px 14px !important;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.toolbar-btn--primary:hover { background: var(--accent-hover) !important; }

/* 带文字的次要工具栏按钮（导出 MD 等） */
#btnExportMd {
    width: auto;
    padding: 0 12px;
    gap: 5px;
    font-size: 12px;
    white-space: nowrap;
    background: #dbeafe !important;
    color: #2563eb !important;
}
#btnExportMd:hover { background: #2563eb !important; color: #fff !important; }
body.dark #btnExportMd { background: rgba(37,99,235,.2) !important; color: #60a5fa !important; }
body.dark #btnExportMd:hover { background: #2563eb !important; color: #fff !important; }

/* ---- 主工作区 ---- */
.editor-workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    gap: 0;
}

/* ---- 编辑面板 ---- */
.editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 300px;
    overflow: hidden;
    background: var(--bg-panel);
}
.editor-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* TipTap 编辑器容器 */
.tiptap-editor {
    min-height: 100%;
    padding: 32px 40px;
    outline: none;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-primary);
    caret-color: var(--accent);
}
.tiptap-editor .ProseMirror {
    outline: none;
    min-height: calc(100vh - 200px);
}
/* placeholder */
.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
    float: left;
    height: 0;
}

/* TipTap 内容样式（编辑区） */
.tiptap-editor h1 { font-size: 1.8em; font-weight: 700; margin: .8em 0 .4em; line-height: 1.3; }
.tiptap-editor h2 { font-size: 1.4em; font-weight: 700; margin: .8em 0 .4em; line-height: 1.4; }
.tiptap-editor h3 { font-size: 1.2em; font-weight: 600; margin: .7em 0 .3em; }
.tiptap-editor h4 { font-size: 1.05em; font-weight: 600; margin: .6em 0 .3em; }
.tiptap-editor p  { margin: 0 0 .8em; }
.tiptap-editor strong { font-weight: 700; }
.tiptap-editor em    { font-style: italic; }
.tiptap-editor u     { text-decoration: underline; }
.tiptap-editor s     { text-decoration: line-through; }
.tiptap-editor mark  { background: #ffe066; padding: 0 2px; border-radius: 2px; }
.tiptap-editor a     { color: var(--accent); text-decoration: underline; }
.tiptap-editor blockquote {
    border-left: 4px solid var(--accent);
    margin: .8em 0;
    padding: .4em 1em;
    color: var(--text-secondary);
    background: var(--accent-light);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tiptap-editor ul, .tiptap-editor ol { padding-left: 1.5em; margin: .5em 0; }
.tiptap-editor li + li { margin-top: .2em; }
.tiptap-editor code {
    font-family: var(--font-mono);
    font-size: .88em;
    background: var(--bg-toolbar);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--accent);
}
.tiptap-editor pre {
    background: #1e1e2e;
    color: #cdd6f4;
    border-radius: var(--radius-md);
    padding: 1em 1.2em;
    overflow-x: auto;
    margin: .8em 0;
    font-family: var(--font-mono);
    font-size: .88em;
    line-height: 1.6;
}
.tiptap-editor pre code { background: none; color: inherit; padding: 0; }
.tiptap-editor hr {
    border: none;
    border-top: 2px solid var(--border);
    margin: 1.2em 0;
}
.tiptap-editor img { max-width: 100%; border-radius: var(--radius-sm); margin: .5em 0; }

/* 表格 */
.tiptap-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: .8em 0;
    font-size: .9em;
}
.tiptap-editor th, .tiptap-editor td {
    border: 1px solid var(--border);
    padding: 6px 12px;
    text-align: left;
}
.tiptap-editor th { background: var(--bg-toolbar); font-weight: 600; }
.tiptap-editor tr:nth-child(even) td { background: var(--bg-app); }

/* 任务列表 */
.tiptap-editor ul[data-type="taskList"] { padding-left: 0; list-style: none; }
.tiptap-editor ul[data-type="taskList"] li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.tiptap-editor ul[data-type="taskList"] li > label {
    flex-shrink: 0;
    margin-top: 3px;
}
.tiptap-editor ul[data-type="taskList"] li > div { flex: 1; }

/* 工具栏激活状态 */
.toolbar-btn.is-active {
    background: var(--accent-light);
    color: var(--accent);
}

/* ---- 预览面板 ---- */
.preview-panel {
    width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-app);
    border-left: 1px solid var(--border);
    overflow: hidden;
}
.preview-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 16px;
}

.panel-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--accent-light);
    color: var(--accent);
}

/* ---- 手机外框 ---- */
.phone-frame {
    width: 375px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 0 0 10px #1a1a2e, 0 20px 60px rgba(0,0,0,.4);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100% - 48px);
}
.phone-frame::before {
    content: '';
    display: block;
    height: 36px;
    background: transparent;
    position: relative;
    z-index: 2;
}
.phone-frame::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 34px;
    background: #1a1a2e;
    border-radius: 20px;
    z-index: 3;
}
.phone-screen {
    background: #fff;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* 公众号文章头部模拟 */
.phone-article-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.phone-article-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 8px;
    word-break: break-all;
}
.phone-article-meta {
    display: flex;
    gap: 6px;
    font-size: 12px;
    color: #999;
}

/* 文章正文区域 */
.phone-article-body {
    padding: 16px;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    overflow-x: hidden;
    word-break: break-all;
}
/* 预览区基础样式（会被内联样式覆盖） */
.phone-article-body h1 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; }
.phone-article-body h2 { font-size: 18px; font-weight: 700; margin: 14px 0 7px; }
.phone-article-body h3 { font-size: 16px; font-weight: 600; margin: 12px 0 6px; }
.phone-article-body p  { margin: 0 0 12px; }
.phone-article-body strong { font-weight: 700; }
.phone-article-body em { font-style: italic; }
.phone-article-body blockquote {
    border-left: 4px solid #07c160;
    padding: 6px 12px;
    color: #666;
    background: #f7f7f7;
    margin: 10px 0;
}
.phone-article-body code {
    font-size: 13px;
    background: #f5f5f5;
    padding: 1px 5px;
    border-radius: 3px;
    color: #d63200;
}
.phone-article-body pre {
    background: #f5f5f5;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 13px;
    margin: 10px 0;
}
.phone-article-body pre code { background: none; color: inherit; padding: 0; }
.phone-article-body img { max-width: 100%; border-radius: 4px; display: block; margin: 8px 0; }
.phone-article-body ul, .phone-article-body ol { padding-left: 20px; margin: 8px 0; }
.phone-article-body hr { border: none; border-top: 1px solid #eee; margin: 16px 0; }
.phone-article-body table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.phone-article-body th,
.phone-article-body td { border: 1px solid #e0e0e0; padding: 6px 10px; }
.phone-article-body th { background: #f5f5f5; font-weight: 600; }

/* ---- 复制成功 Toast ---- */
.copy-toast {
    position: fixed;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #fff;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    transition: opacity .3s;
}
.copy-toast.hidden { opacity: 0; pointer-events: none; }
.copy-toast i { color: #10b981; }

/* ---- 表单控件（链接弹窗用） ---- */
.form-field { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.form-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-editor);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.form-input:focus { border-color: var(--accent); }

.modal-box--sm { max-width: 400px; }

/* ---- 深色模式适配 ---- */
body.dark .phone-frame { box-shadow: 0 0 0 10px #0a0a16, 0 20px 60px rgba(0,0,0,.6); }
body.dark .phone-screen,
body.dark .phone-article-body { background: #1a1a1a; color: #e0e0e0; }
body.dark .phone-article-title { color: #f0f0f0; }
body.dark .phone-article-header { border-bottom-color: #2a2a2a; }

/* ---- 预览按钮：PC 端隐藏，仅移动端显示 ---- */
.panel-btn--preview {
    display: none;  /* PC 端不显示 */
    align-items: center;
    gap: 4px;
    width: auto;
    padding: 0 10px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.panel-btn--preview:hover {
    background: var(--accent);
    color: #fff;
}
.panel-btn-label { font-size: 12px; }

/* ---- 工具栏多行：主要按钮组可换行 ---- */
.editor-toolbar {
    /* 覆盖继承的 flex-wrap，确保允许换行 */
    flex-wrap: wrap;
    row-gap: 4px;
}
/* 右侧操作区（主题+复制）固定在行尾 */
.toolbar-spacer { flex: 1; min-width: 0; }

/* ---- 响应式（移动端 ≤ 900px） ---- */
@media (max-width: 900px) {
    /* 显示预览按钮 */
    .panel-btn--preview { display: flex; }

    /* 隐藏右侧预览面板和分隔线 */
    .preview-panel { display: none; }
    .panel-resizer { display: none; }

    /* 头部：紧凑间距 */
    .app-header { padding: 0 10px; gap: 6px; }
    .app-header-right { gap: 4px; }
    .header-divider { margin: 0 4px; }

    /* 头部导航仅图标，隐藏文字；平台 tabs 完全隐藏 */
    .app-nav-item span { display: none; }
    .app-title { font-size: 16px; letter-spacing: .3px; }
    .app-nav-item {
        padding: 4px 8px;
        font-size: 13px;
    }
    .platform-tabs { display: none; }
    .header-divider { display: none; }

    /* 工具栏：允许换行，行间距收紧 */
    .editor-toolbar {
        flex-wrap: wrap;
        padding: 4px 8px;
        gap: 3px;
        row-gap: 3px;
    }
    .toolbar-group { flex-shrink: 0; }
    .toolbar-divider { flex-shrink: 0; }
    /* 右侧操作组（主题+复制）在移动端隐藏，预览页已提供 */
    .toolbar-spacer { display: none; }
    #themeSelect,
    #btnCopy, #btnCopyMd, #btnExportMd { display: none !important; }

    /* 编辑区撑满 */
    .editor-panel { min-width: 0; width: 100%; }
    .tiptap-editor { padding: 16px 14px; }

    /* 状态栏 */
    .status-bar { font-size: 11px; padding: 0 10px; }
}

/* ---- 极小屏（≤ 600px） ---- */
@media (max-width: 600px) {
    /* 复制按钮仅图标 */
    #copyBtnLabel { display: none; }
    .toolbar-btn--primary { padding: 4px 10px !important; }

    /* 预览按钮仅图标 */
    .panel-btn-label { display: none; }
    .panel-btn--preview { padding: 0 8px; }
}