/* 全局样式和响应式布局 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #f6f6f6;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden; /* 禁止页面在手机上出现左右滚动 */
}

/* 确保夜间模式切换时整个页面背景都会变黑 */
.dark-mode, .dark-mode html, .dark-mode body {
    background-color: #1e1e1e; /* 夜间模式的背景颜色 */
    color: #cfcfcf; /* 夜间模式的文字颜色 */
}

body {
    display: block; /* 恢复为常规块布局 */
}

/* 主内容区域的样式 */
.main-container {
    width: 670px; /* 主内容区域宽度 */
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-sizing: border-box;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode .main-container {
    background-color: #2e2e2e; /* 夜间模式下主内容区域的背景 */
}

/* 对于移动端的布局调整 */
@media only screen and (max-width: 600px) {
    .main-container {
        max-width: 100%; /* 在移动端宽度100% */
        width: 100%;
        margin: 0; /* 取消居中 */
        padding: 15px;
    }
}

/* 文字切换按钮 */
.theme-toggle-text {
    position: fixed;
    top: 10px;
    right: 20px;
    font-size: 18px;
    color: #007bff;
    cursor: pointer;
    transition: color 0.3s;
}

.theme-toggle-text:hover {
    color: #0056b3;
}

/* 主标题样式 */
h2 {
    font-size: 1.5em;
    margin: 10px 0;
}

/* 主贴内容样式 */
.message, .message-full {
    font-size: 1em;
    margin-bottom: 0;
}

/* 阅读全帖链接 */
.read-more {
    margin-left: 10px;
    color: #007bff;
    text-decoration: none;
    font-size: 0.9em;
}

.read-more:hover {
    text-decoration: underline;
}

/* 按钮行布局 */
.ContentItem-actions {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 10px;
}

/* 赞同和反对按钮的基础样式 */
.VoteButton--style {
    background-color: #f1f3f4;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 15px;
    font-size: 0.9em;
    color: #333;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.VoteButton--style:hover {
    background-color: #e2e6ea;
    border-color: #888;
}

/* 无边框按钮（评论、分享、收藏、喜欢） */
.no-border {
    background-color: transparent;
    border: none;
    color: #333;
    font-size: 0.9em;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.2s ease;
}

.no-border:hover {
    color: #0056b3;
}

/* 分割线样式 */
.divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 20px 0;
}

/* 右侧固定信息区域的样式 */
.sidebar {
    position: fixed; /* 默认固定在右侧 */
    width: 240px;
    top: 80px;
    left: calc(50% + 370px);
    background-color: #f9f9f9;
    padding: 15px;
    border-left: 1px solid #ddd;
    font-size: 0.85em;
    color: #555;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.dark-mode .sidebar {
    background-color: #2e2e2e; 
    color: #cfcfcf;
}

/* 返回顶部按钮 */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #007bff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2em;
    z-index: 1000;
    transition: background-color 0.3s;
}

.back-to-top:hover {
    background-color: #0056b3;
}

/* 标题链接的样式 - 白天模式下显示黑色 */
.main-container a {
    color: #333 !important;
    text-decoration: none !important;
    transition: color 0.3s;
}

.main-container a:hover {
    color: #0056b3 !important;
    text-decoration: underline !important;
}

/* 夜间模式下标题链接的样式 - 显示白色 */
.dark-mode .main-container a {
    color: #fff !important;
    text-decoration: none !important;
}

.dark-mode .main-container a:hover {
    color: #cccccc !important;
    text-decoration: underline !important;
}

/* 消息预览和完整内容样式 */
.message-preview, .message-full {
    font-size: 1em;
    margin-bottom: 0;
}

.message-full {
    display: none; /* 初始状态下隐藏 */
}

.icon-area {
  display: inline-flex;
  align-items: center;
}




/* ---------------------------
   评论区（尽量参考知乎风格）
   --------------------------- */
.comment-section {
    display: none;
    margin: 10px 0 0;
    padding: 12px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fafafa;
}
.dark-mode .comment-section {
    background: #242424;
    border-color: #3a3a3a;
}

.comment-editor {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.comment-input {
    flex: 1;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 18px;
    outline: none;
    background: #fff;
}
.dark-mode .comment-input {
    background: #1f1f1f;
    border-color: #444;
    color: #e6e6e6;
}

.comment-send {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #1677ff;
    background: #1677ff;
    color: #fff;
    border-radius: 18px;
    cursor: pointer;
}
.comment-send:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.comment-count {
    font-size: 12px;
    color: #8590a6;
    margin: 6px 0 10px;
}
.dark-mode .comment-count { color: #9aa4b2; }

.comment-list {
    padding: 4px 2px;
}

.comment-item {
    display: flex;
    gap: 10px;
    padding: 10px 4px;
    border-top: 1px solid #eee;
}
.comment-item:first-child { border-top: none; }
.dark-mode .comment-item { border-top-color: #333; }

.comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex: 0 0 28px;
}
.dark-mode .comment-avatar {
    background: #1e3a8a;
    color: #dbeafe;
}

.comment-body { flex: 1; min-width: 0; }

.comment-author {
    font-size: 13px;
    font-weight: 600;
    color: #1f2329;
    line-height: 1.2;
}
.dark-mode .comment-author { color: #e6e6e6; }

.comment-text {
    font-size: 13px;
    color: #333;
    margin-top: 4px;
    line-height: 1.55;
    word-break: break-word;
}
.dark-mode .comment-text { color: #d4d4d4; }

.comment-meta {
    margin-top: 6px;
    font-size: 12px;
    color: #8590a6;
}
.dark-mode .comment-meta { color: #9aa4b2; }

.comment-footer {
    margin-top: 8px;
    display: flex;
    justify-content: flex-start;
}

.comment-more-btn {
    border: none;
    background: transparent;
    color: #175199;
    padding: 4px 0;
    cursor: pointer;
    font-size: 13px;
}
.comment-more-btn:hover { text-decoration: underline; }
.dark-mode .comment-more-btn { color: #6aa9ff; }



/* ---------------------------
   帖子卡片（知乎风格）
   --------------------------- */
.post-card {
    padding: 16px 0;
}

.post-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 6px 0;
    color: #1f2329;
}
.dark-mode .post-title { color: #e6e6e6; }

.user-show {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #8590a6;
}
.dark-mode .user-show { color: #9aa4b2; }

.message-preview {
    font-size: 14px;
    color: #333;
    line-height: 1.7;
}
.dark-mode .message-preview { color: #d4d4d4; }

.message-full {
    font-size: 14px;
    color: #333;
    line-height: 1.7;
}
.dark-mode .message-full { color: #d4d4d4; }

.read-more {
    display: inline-block;
    margin-top: 8px;
    color: #175199;
    font-size: 13px;
}
.dark-mode .read-more { color: #6aa9ff; }

.ContentItem-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}
.dark-mode .ContentItem-actions { border-top-color: #333; }

.comment-collapsed-bar {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
    color: #8590a6;
    font-size: 13px;
    cursor: pointer;
}
.comment-collapsed-bar:hover {
    border-color: #cfd8e3;
    background: #fafafa;
}
.dark-mode .comment-collapsed-bar {
    background: #1f1f1f;
    border-color: #3a3a3a;
    color: #9aa4b2;
}



.comment-actions {
    margin-top: 6px;
    font-size: 12px;
    color: #8590a6;
}
.dark-mode .comment-actions { color: #9aa4b2; }

.comment-action {
    cursor: pointer;
}
.comment-action:hover {
    color: #175199;
    text-decoration: underline;
}
.dark-mode .comment-action:hover { color: #6aa9ff; }



/* ---------------------------
   顶部导航（知乎风格）
   --------------------------- */
.zh-header {
    position: sticky;
    top: 0;
    z-index: 999;
    height: 56px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #eee;
}
.dark-mode .zh-header {
    background: rgba(30, 30, 30, 0.92);
    border-bottom-color: #333;
}

.zh-header-inner {
    width: 1000px;
    margin: 0 auto;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
    box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
    .zh-header-inner {
        width: 100%;
        padding: 0 12px;
    }
}

.zh-logo {
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #1677ff;
    font-size: 18px;
    text-decoration: none;
}

.zh-search {
    flex: 1;
    height: 34px;
    border-radius: 18px;
    border: 1px solid #e6e6e6;
    background: #f6f6f6;
    padding: 0 12px;
    outline: none;
}
.dark-mode .zh-search {
    border-color: #3a3a3a;
    background: #1f1f1f;
    color: #e6e6e6;
}

.zh-icon-btn {
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    border-radius: 18px;
    border: 1px solid #e6e6e6;
    background: #fff;
    cursor: pointer;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
}
.zh-icon-btn:hover { background: #fafafa; }
.dark-mode .zh-icon-btn {
    border-color: #3a3a3a;
    background: #1f1f1f;
    color: #e6e6e6;
}

/* 覆盖旧的右上角文字切换按钮（改为 header 内按钮） */
.theme-toggle-text { display:none; }



.zh-primary-btn {
    border-color: #1677ff;
    background: #1677ff;
    color: #fff;
}
.zh-primary-btn:hover {
    background: #1466d6;
}
.dark-mode .zh-primary-btn {
    border-color: #1677ff;
    background: #1677ff;
    color: #fff;
}



/* ---------------------------
   页面布局（主栏 + 右栏，知乎风格）
   --------------------------- */
.zh-layout {
    width: 1000px;
    margin: 16px auto 0;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 0 10px;
    box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
    .zh-layout {
        width: 100%;
        margin-top: 12px;
        padding: 0 12px;
        display: block;
    }
}

.main-container {
    width: 694px;
    margin: 0;
    padding: 0;
    background: transparent;
    min-height: auto;
}

.zh-right {
    width: 290px;
}

.sidebar {
    position: sticky;
    top: 76px;
    width: 100%;
    left: auto;
    box-shadow: none;
    border: 1px solid #eee;
    border-radius: 8px;
}
.dark-mode .sidebar { border-color: #333; }

@media only screen and (max-width: 600px) {
    .zh-right { width: 100%; }
    .sidebar { position: static; border-radius: 8px; }
}

.post-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px 16px 14px;
    margin-bottom: 10px;
}
.dark-mode .post-card { background: #1f1f1f; border-color: #333; }

.divider { display:none; }

/* ---------------------------
   点赞/踩（更接近知乎）
   --------------------------- */
.VoteButton--style {
    border-radius: 18px;
    padding: 6px 14px;
    border: 1px solid #e6e6e6;
    background: #f6f6f6;
}

.VoteButton--up {
    background: #e8f1ff;
    border-color: #cfe2ff;
    color: #175199;
}

.VoteButton--down {
    background: #f6f6f6;
    border-color: #e6e6e6;
    color: #8590a6;
}

.VoteButton--up.is-active {
    background: #1677ff;
    border-color: #1677ff;
    color: #fff;
}

.VoteButton--down.is-active {
    background: #4b5563;
    border-color: #4b5563;
    color: #fff;
}

.no-border {
    color: #8590a6;
}
.no-border:hover {
    color: #175199;
}

.dark-mode .VoteButton--style {
    background: #1f1f1f;
    border-color: #3a3a3a;
}
.dark-mode .VoteButton--up {
    background: rgba(22, 119, 255, 0.18);
    border-color: rgba(22, 119, 255, 0.35);
    color: #6aa9ff;
}
.dark-mode .VoteButton--down { color: #9aa4b2; }



/* ---------------------------
   提问弹窗（知乎风格）
   --------------------------- */
.zh-modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.zh-modal {
    width: 640px;
    max-width: calc(100% - 24px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
}
.dark-mode .zh-modal { background: #1f1f1f; }

.zh-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    font-weight: 700;
}
.dark-mode .zh-modal-header { border-bottom-color: #333; color: #e6e6e6; }

.zh-modal-body {
    padding: 14px 16px;
}

.zh-field {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
    background: #fff;
}
.zh-field:focus { border-color: #1677ff; }
.dark-mode .zh-field { background: #1b1b1b; border-color: #3a3a3a; color: #e6e6e6; }

.zh-textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.6;
}

.zh-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #eee;
}
.dark-mode .zh-modal-footer { border-top-color: #333; }

.zh-btn {
    height: 34px;
    padding: 0 14px;
    border-radius: 18px;
    border: 1px solid #e6e6e6;
    background: #fff;
    cursor: pointer;
}
.dark-mode .zh-btn { border-color: #3a3a3a; background: #1f1f1f; color: #e6e6e6; }

.zh-btn-primary {
    border-color: #1677ff;
    background: #1677ff;
    color: #fff;
}
.zh-btn-primary:hover { background: #1466d6; }

.zh-btn-close {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 4px 6px;
}
.dark-mode .zh-btn-close { color: #e6e6e6; }



.comment-collapsed-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comment-collapsed-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comment-collapsed-preview {
    display: none;
    color: #606a7a;
    font-size: 13px;
    line-height: 1.55;
}

.comment-collapsed-preview .line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark-mode .comment-collapsed-preview { color: #9aa4b2; }

.comment-collapsed-more {
    color: #175199;
    font-size: 13px;
}
.dark-mode .comment-collapsed-more { color: #6aa9ff; }



/* ---------------------------
   作者行（知乎风格）
   --------------------------- */
.author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 10px;
}
.author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f0f2f5;
    color: #1f2329;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}
.dark-mode .author-avatar {
    background: #2a2a2a;
    color: #e6e6e6;
}
.author-name {
    font-size: 14px;
    color: #1f2329;
    font-weight: 600;
}
.dark-mode .author-name { color: #e6e6e6; }

/* ---------------------------
   正文与阅读全文/收起
   --------------------------- */
.message-preview {
    color: #1f2329;
}
.dark-mode .message-preview { color: #d4d4d4; }

.read-more {
    margin-top: 6px;
    color: #175199;
}

.collapse-link {
    margin-top: 8px;
    display: inline-block;
    color: #8590a6;
    font-size: 13px;
}
.collapse-link:hover { color: #175199; }
.dark-mode .collapse-link { color: #9aa4b2; }

/* ---------------------------
   操作栏（更像知乎）
   --------------------------- */
.ContentItem-actions {
    gap: 10px;
    align-items: center;
}

.Button.ContentItem-action.no-border {
    padding: 6px 8px;
}


/* ---------------------------
   手机端适配 (max-width: 600px)
   --------------------------- */
@media only screen and (max-width: 600px) {
    /* 禁止左右滚动 */
    html, body {
        overflow-x: hidden;
    }

    .main-container {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 15px;
    }

    /* 将侧边栏移动到底部 */
    .sidebar {
        position: static; 
        width: auto; 
        margin-top: 20px; 
        border-left: none; /* 去掉左边线 */
        box-shadow: none;  /* 去掉阴影 */
    }

    /* 调整按钮字体大小，让手机上更大一些 */
    .VoteButton--style,
    .no-border {
        font-size: 1.05em; /* 比默认 0.9em 稍大 */
    }
}


.comment-btn-text {
    margin-left: 4px;
}


/* read-more click fix */
.read-more {
  position: relative;
  z-index: 5;
  display: inline-block;
  padding: 2px 0;
}
.message-preview img, .message-preview embed {
  max-width: 100%;
}


.read-more-btn {
  margin-top: 6px;
  border: none;
  background: transparent;
  color: #175199;
  cursor: pointer;
  padding: 2px 0;
  font-size: 13px;
}
.read-more-btn:hover { text-decoration: underline; }
.dark-mode .read-more-btn { color: #6aa9ff; }