/* ==========================================================
   3. 页面宏观布局
   ========================================================== */
.app-container { display: flex; max-width: 1200px; margin: 0 auto; gap: var(--margin); padding-top: 78px; }
.feed-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--margin); }

/* 侧边栏开启 sticky，修复了被挤压的问题 */
.sidebar { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--margin); position: sticky; top: 10px; align-self: flex-start; max-height: calc(100vh - 20px); overflow-y: auto; padding-bottom: 20px; }
.sidebar > * { flex-shrink: 0; }
.sidebar::-webkit-scrollbar { width: 0; display: none; }

/* ==========================================================
   4. 通用组件 (卡片、按钮)
   ========================================================== */
.card { background-color: var(--bg-publish-card); border-radius: var(--radius8); padding: var(--margin20); border: 1px solid var(--border-color); transition: transform 0.2s; }
.card:hover { background-color: var(--btn-hover-color2); }
.btn-outline { background: transparent; border: 1px solid var(--yellow-color); color: var(--yellow-color); padding: 6px 10px; border-radius: var(--radius8); cursor: pointer; }
 
/* ==========================================================
   5. 文章信息流列表
   ========================================================== */
.article-top { display: flex; gap: var(--margin20); align-items: stretch; margin-bottom: var(--margin20); }
.article-image { width: 160px; flex-shrink: 0; border-radius: var(--radius8); overflow: hidden; background-color: var(--bg-hover); }
.article-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.article-image img:hover { transform: scale(1.05); }
.article-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; }
.article-title { font-size: 18px; font-weight: bold;  color: var(--text-title); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article-content-wrapper { font-size: 14px;line-height:22px; color: var(--text-content); margin-top: 5px; }
.article-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; margin-bottom: var(--margin20); transition: all 0.3s ease; }
.article-text.expanded { -webkit-line-clamp: unset; display: block; overflow: hidden; }
.article-text.expanded img, .article-text.expanded iframe, .article-text.expanded video { max-width: 100%; height: auto; border-radius: var(--radius8); margin: 10px 0; display: block; }
.toggle-btn { color: var(--blue-color); cursor: pointer; background: none; border: none; font-size: 14px; padding: 0; outline: none; }
.toggle-btn:hover { text-decoration: underline; }
.article-actions { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-muted); border-top: 1px dashed var(--dashed-color); padding-top: var(--margin20); }
.meta-info { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-meta); margin-left: 0; }
.action-buttons { display: flex; gap: var(--margin20); }
.action-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; transition: color 0.2s; outline: none; }
.action-btn:hover { color: var(--blue-color); }
.view-count { display: flex; align-items: center; gap: var(--margin); }
.icon-eye { width: 14px; height: 14px; fill: currentColor; }

/* ==========================================================
   6. 右侧边栏模块 (统计、分类、热门、搜索)
   ========================================================== */
.publish-card { text-align: center; }
.publish-stats { display: flex; justify-content: space-around;  border-radius: var(--radius8);   }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-bottom: var(--margin20); }
.stat-value { font-size: 22px; font-weight: bold; color: var(--text-primary); }
.card-title { font-size: 16px; margin-bottom: var(--margin15); color: var(--blue-color); padding-left: var(--margin); border-left: 4px solid var(--blue-color); }
.category-nav-list { list-style: none; display: flex; flex-direction: column;   }
.category-nav-list li a{ color: var(--text-content); border-bottom:1px solid var(--btn-hover-color2); text-decoration: none; font-size: 14px; display: block; padding: 10px 10px;cursor: pointer; }
.category-nav-list li a:hover {  color: var(--yellow-color); }
.category-nav-list li a.active {  color: var(--text-primary); font-weight: bold; }
.category-nav-list li:last-child a{border:none !important;}
.hot-list { list-style: none; }
.hot-list li { margin-bottom: var(--margin); font-size: 14px; cursor: pointer; transition: color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot-list li:hover { color: var(--blue-color); }

.journal_search { background-color: var(--bg-publish-card); border: 1px solid var(--border-color); border-radius: var(--radius8); padding: 5px; height: 48px; box-sizing: border-box; display: flex; }
.journal_search .search { display: flex; align-items: center; width: 100%; justify-content: space-between; height: 100%; }
.journal_search .search input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--text-title); padding: 0 10px; outline: none; font-size: 14px; height: 100%; }
.journal_search .search .btn_search { width: 60px; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; font-size: 12px; background-color: var(--yellow-color); color: #000; font-weight: bold; }

/* ==========================================================
   7. 富文本编辑器 (WangEditor 5) 暗色主题适配
   ========================================================== */
:root {
    /* 覆盖 WangEditor 默认变量实现暗黑模式 */
    --w-e-textarea-bg-color: var(--bg-hover);
    --w-e-textarea-color: var(--text-primary);
    --w-e-toolbar-bg-color: var(--bg-color);
    --w-e-toolbar-color: var(--text-primary);
    --w-e-toolbar-active-color: var(--yellow-color);
    --w-e-toolbar-active-bg-color: var(--btn-hover-color2);
    --w-e-toolbar-disabled-color: #999;
    --w-e-toolbar-border-color: var(--border-color);
    --w-e-modal-button-bg-color: var(--yellow-color);
    --w-e-modal-button-color: #000;
}

 

.quill-error {
    border-color: var(--color-error) !important;
    transition: border-color 0.3s;
}

/* 覆盖编辑器自带弹窗下拉列表的暗黑样式 */
.w-e-modal, .w-e-drop-panel {
    background-color: var(--bg-publish-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.w-e-modal input, .w-e-modal textarea {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.w-e-select-list {
    background-color: var(--bg-publish-card) !important;
    border-color: var(--border-color) !important;
}

.w-e-select-list ul li:hover {
    background-color: var(--btn-hover-color2) !important;
}
#editor-modal #editor-modal-in {
    width: 90vw !important;
    max-width: 90vw !important;
    height: 90vh !important; /* 强制弹窗高度为 90vh */
    display: flex;
    flex-direction: column;  /* 让内部元素从上到下垂直排列 */
}

.editor-wrapper {
    flex: 1; /* 神奇的一笔：让编辑器外层自动撑满中间所有的剩余高度 */
    display: flex;
    flex-direction: column;
    margin-top: 10px; 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius8); 
    z-index: 100;
    min-height: 0; /* 关键属性：防止 flex 子项溢出撑破弹窗 */
    /* 重点：千万不要写 overflow: hidden，否则下拉菜单会被切断！ */
}

.editor-toolbar {
    border-bottom: 1px solid var(--border-color);
    height: auto !important; /* 让工具栏根据内部按钮多少自动适配高度 */
    flex-shrink: 0; /* 保证工具栏绝对不会被挤压变形 */
}

.editor-text-area {
    flex: 1; /* 让输入框本身自动填满 wrapper 剩下的空间 */
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}
.editor-text-area > div {
    flex: 1;
    height: 100% !important; 
}
 /* ==========================================================
   8. 移动端响应式适配
   ========================================================== */
.mobile-overlay { display: none; }
.mobile-fab { display: none; }
.mobile-sidebar-header { display: none; }

@media (max-width: 768px) { 
    .app-container { flex-direction: column; } 
    .article-top { flex-direction: column; } 
    .article-image { width: 100%; height: 180px; } 

    .mobile-fab { display: flex; position: fixed; right: 20px; bottom: 20px; width: 50px; height: 50px; border-radius: 50%; background-color: var(--blue-color); color: #fff; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.5); z-index: 990; border: none; cursor: pointer; transition: transform 0.2s; }
    .mobile-fab:active { transform: scale(0.9); }

    .sidebar { position: fixed !important; top: 0 !important; right: -100%; bottom: 0; width: 280px; max-width: 85vw; background-color: var(--bg-color); z-index: 1000; padding: 20px 15px; margin: 0; max-height: 100vh; overflow-y: auto; transition: right 0.3s ease; box-shadow: -5px 0 15px rgba(0,0,0,0.8); display: flex; flex-direction: column; padding-bottom: 40px; }
    .sidebar.active { right: 0; }
    
    .mobile-sidebar-header { display: flex; justify-content: space-between; align-items: center;  padding-bottom: 10px; border-bottom: 1px solid var(--border-color); font-size: 16px; color: var(--text-title); font-weight: bold; }
    .mobile-sidebar-header button { background: none; border: none; color: var(--text-title); font-size: 28px; line-height: 1; cursor: pointer; padding: 0; outline: none; }

    .mobile-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 995; opacity: 0; visibility: hidden; transition: opacity 0.3s; }
    .mobile-overlay.active { opacity: 1; visibility: visible; }

    .editor-toolbar{}
}