/* ========================================
   话题详情页 - 简洁轻量设计
   聚焦内容，优化阅读体验
   ======================================== */

/* 字体定义 */
@font-face {
    font-family: 'SourceHanSansCN';
    src: url('../../../public/mainpack/fonts/SOURCEHANSANSCN-NORMAL.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'SourceHanSansCN';
    src: url('../../../public/mainpack/fonts/SOURCEHANSANSCN-MEDIUM.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'SourceHanSansCN';
    src: url('../../../public/mainpack/fonts/SOURCEHANSANSCN-BOLD.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

/* 基础设置 */
.topic-show-page {
    background: #ffffff;
    min-height: 100vh;
    font-family: 'SourceHanSansCN', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 容器 - 800px阅读宽度 */
.topic-show-page .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ========================================
   标题区域 - 轻量设计
   ======================================== */

.show-info-title {
    font-size: 1.625rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
    margin: 0 0 0.875rem 0;
    letter-spacing: -0.01em;
}

.show-info-title .badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.show-info-title a {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}

.show-info-title a:hover {
    color: #3b82f6;
}

/* ========================================
   标签区域 - #号样式（独立在content-header外，与昵称左对齐）
   ======================================== */

.topic-tags {
    margin: 0.5rem 0 1.5rem calc(40px + 0.75rem);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.topic-tag-link {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.topic-tag-link:hover {
    color: #3b82f6;
    background: #eff6ff;
    text-decoration: none;
}

/* ========================================
   用户信息区域 - 头像高度为标准（40px）
   ======================================== */

.topic-show-page .content-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    margin-bottom: 0.75rem;
    height: 40px;
}

/* 用户头像 - 高度标准（仅限话题详情页） */
.topic-show-page .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 用户信息容器 - 在40px高度内垂直居中（仅限话题详情页） */
.topic-show-page .user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
    height: 40px;
}

/* 用户名 - 第一行（仅限话题详情页） */
.topic-show-page .username {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.topic-show-page .username a {
    color: #111827;
    text-decoration: none;
    transition: color 0.2s ease;
}

.topic-show-page .username a:hover {
    color: #3b82f6;
}

/* 元信息 - 第二行（仅限话题详情页） */
.topic-show-page .post-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #9ca3af;
    line-height: 1.3;
}

.topic-show-page .post-date,
.topic-show-page .post-comment,
.topic-show-page .post-view {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.topic-show-page .post-separator {
    color: #d1d5db;
    margin: 0 0.125rem;
}

.topic-show-page .post-meta i {
    font-size: 0.75rem;
}

/* 操作按钮区 - 在40px高度内垂直居中（仅限话题详情页） */
.topic-show-page .follow-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    height: 40px;
}

/* 按钮 - 轻量样式，确保尺寸一致 */
.anor_fn_follow,
.btn-message {
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    background: #f8fafc;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 28px;
    min-width: 52px;
    line-height: 1;
}

.anor_fn_follow:hover,
.btn-message:hover {
    background: #f1f5f9;
    color: #374151;
    text-decoration: none;
}

.anor_fn_follow.followed {
    background: #eff6ff;
    color: #3b82f6;
}

.anor_fn_follow.followed:hover {
    background: #dbeafe;
}

/* 清理旧样式 */
.anor_fn_follow .btn-text,
.anor_fn_follow .btn-hover-text,
.anor_fn_follow:before,
.anor_fn_follow:after {
    display: none !important;
}

/* ========================================
   内容区域 - 优化阅读体验
   ======================================== */

.topic-view.common-content {
    padding: 0;
    margin-bottom: 1.5rem;
    line-height: 1.75;
    color: #374151;
    font-size: 0.9375rem;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* 段落 - 规范间距 */
.topic-view.common-content p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.topic-view.common-content p:last-child {
    margin-bottom: 0;
}

.topic-view.common-content p:empty {
    margin-bottom: 0.5rem;
}

/* 图片 - 根据比例智能显示 */
.topic-view.common-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1.25rem auto;
    display: block;
}

/* 宽图片可以突破容器（桌面端） */
@media (min-width: 900px) {
    .topic-view.common-content img {
        max-width: calc(100% + 120px);
        margin-left: -60px;
    }
}

/* 居中图片 */
.topic-view.common-content p.tac img {
    margin-left: auto;
    margin-right: auto;
}

/* 视频 */
.topic-view.common-content video {
    max-width: 100%;
    border-radius: 6px;
    margin: 1.25rem 0;
}

/* 列表 */
.topic-view.common-content ul,
.topic-view.common-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.topic-view.common-content li {
    margin-bottom: 0.5rem;
}

/* 引用 */
.topic-view.common-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid #3b82f6;
    background: #f8fafc;
    color: #475569;
    font-style: normal;
}

/* 代码 */
.topic-view.common-content code {
    padding: 0.2rem 0.4rem;
    background: #f1f5f9;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: 'SF Mono', Monaco, monospace;
}

.topic-view.common-content pre {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #1e293b;
    border-radius: 6px;
    overflow-x: auto;
}

.topic-view.common-content pre code {
    background: none;
    color: #e2e8f0;
    padding: 0;
}

/* ========================================
   管理工具栏 - 线框按钮设计
   ======================================== */

.btool {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0;
    border-top: none !important;
    border: none !important;
}

.btool a {
    padding: 0.375rem 0.75rem;
    background: transparent;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btool a:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

.btool a i {
    font-size: 0.75rem;
}

/* ========================================
   评论区域 - 简洁设计
   ======================================== */

.comment-section {
    margin-top: 2rem;
    padding-top: 0;
}

.comment-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-count {
    font-size: 0.875rem;
    font-weight: 500;
    color: #9ca3af;
}

/* 评论禁用提示 */
.comment-disabled {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
    font-size: 0.9375rem;
}

/* 登录提示 */
.comment-login {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.comment-login-btn {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.comment-login-btn:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* 评论表单 - 全新简洁设计 */
.commentform {
    margin-bottom: 2.5rem;
}

/* 评论表单容器 */
.u-flex {
    display: flex;
}

.u-col-top {
    align-items: flex-start;
}

.u-flex-1 {
    flex: 1;
}

/* 评论者头像 */
.commentform-user-face {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 0.75rem;
}

/* 评论输入区域 */
.my-edit {
    margin-bottom: 0;
}

.my-edit textarea {
    width: 100%;
    min-height: 88px;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.2s ease;
    background: #ffffff;
}

.my-edit textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 评论表单操作区 */
.comment-form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* 公开选项 - 轻量胶囊设计 */
.privacy-options {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #f8fafc;
    border-radius: 6px;
    padding: 0.25rem;
}

.privacy-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
    position: relative;
}

.privacy-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.privacy-option input[type="radio"]:checked + span {
    color: #3b82f6;
}

.privacy-option:has(input:checked) {
    background: #ffffff;
    color: #3b82f6;
    font-weight: 500;
}

.privacy-option span {
    transition: color 0.2s ease;
}

.checkbox .checkmark {
    display: none;
}

/* 提交按钮 - 蓝色主按钮 */
.btn-submit,
.commentform .btn-info,
.commentform .btn-primary {
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    background: #3b82f6;
    color: white;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-submit:hover,
.commentform .btn-info:hover,
.commentform .btn-primary:hover {
    background: #2563eb;
}

/* ========================================
   Summernote编辑器样式优化 - 轻量化
   ======================================== */

/* 编辑器容器 - 工具栏在底部 */
.my-edit .note-editor {
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column-reverse !important;
}

.my-edit .note-editor.note-frame {
    border: 1px solid #e5e7eb !important;
}

/* 聚焦状态 */
.my-edit .note-editor.note-frame.focused {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* 工具栏 - 显示在底部 */
.my-edit .note-toolbar {
    background: #fafbfc !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    order: 2 !important;
    border-radius: 0 0 6px 6px !important;
}

/* 编辑区域在上 */
.my-edit .note-editing-area {
    order: 1 !important;
    border-radius: 6px 6px 0 0 !important;
}

/* 评论表单底部操作区 */
.comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    gap: 1rem;
}

.comment-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

/* 工具栏按钮组 - 仅工具栏中的显示 */
.my-edit .note-toolbar .note-btn-group {
    margin-right: 0.25rem !important;
    border: none !important;
    display: flex !important;
}

/* 隐藏非工具栏的按钮组 */
.my-edit .note-btn-group:not(.note-toolbar .note-btn-group) {
    display: none !important;
}

/* 工具栏按钮 - 轻量样式（仅工具栏内的按钮） */
.my-edit .note-toolbar .note-btn {
    background: #f8fafc !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0.375rem 0.5rem !important;
    margin: 0 !important;
    color: #6b7280 !important;
    font-size: 0.8125rem !important;
    height: 28px !important;
    min-width: auto !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

.my-edit .note-toolbar .note-btn:hover {
    background: #f1f5f9 !important;
    color: #374151 !important;
}

.my-edit .note-toolbar .note-btn.active,
.my-edit .note-toolbar .note-btn:active {
    background: #eff6ff !important;
    color: #3b82f6 !important;
}

/* 隐藏工具栏外的所有按钮 */
.my-edit .note-btn:not(.note-toolbar .note-btn) {
    display: none !important;
}

/* 图标优化 - 仅工具栏内 */
.my-edit .note-toolbar .note-btn i {
    font-size: 0.875rem !important;
    color: inherit !important;
}

/* 图片按钮 - 显示📷 emoji图标 */
.my-edit .note-toolbar .note-btn[data-original-title*="图片"]:before,
.my-edit .note-toolbar .note-btn[data-original-title*="Picture"]:before,
.my-edit .note-toolbar .note-btn[aria-label*="Picture"]:before {
    content: "📷 ";
    font-size: 0.875rem;
    margin-right: 0.125rem;
}

/* 表情按钮 - 使用纯😊 emoji */
.my-edit .note-toolbar .note-btn[data-original-title*="表情"] i,
.my-edit .note-toolbar .note-btn[data-original-title*="Emoji"] i,
.my-edit .note-toolbar .note-btn[aria-label*="Emoji"] i {
    display: none !important;
}

.my-edit .note-toolbar .note-btn[data-original-title*="表情"]:before,
.my-edit .note-toolbar .note-btn[data-original-title*="Emoji"]:before,
.my-edit .note-toolbar .note-btn[aria-label*="Emoji"]:before {
    content: "😊";
    font-size: 1rem;
}

/* 下拉菜单 */
.my-edit .note-dropdown-menu {
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    padding: 0.25rem !important;
}

.my-edit .note-dropdown-menu li a {
    padding: 0.375rem 0.75rem !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
}

.my-edit .note-dropdown-menu li a:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* 编辑区域 */
.my-edit .note-editable {
    background: #ffffff !important;
    padding: 0.75rem !important;
    min-height: 88px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: #374151 !important;
    border-radius: 6px 6px 0 0 !important;
    position: relative !important;
}

.my-edit .note-editable:focus {
    background: #ffffff !important;
    outline: none !important;
}

/* 确保编辑区域内没有任何按钮显示 */
.my-edit .note-editable button,
.my-edit .note-editable .btn,
.my-edit .note-editable .note-btn {
    display: none !important;
    visibility: hidden !important;
}

/* 编辑区域内的图片 */
.my-edit .note-editable img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0.5rem 0;
}

/* 移除编辑器内所有浮动按钮和旧的表情按钮 */
.my-edit .note-air-popover,
.my-edit .note-popover.popover,
.my-edit .note-popover.bottom,
.my-edit .note-editor .note-btn-emotion,
.my-edit .note-editor button[data-event="emotion"] {
    display: none !important;
}

/* placeholder */
.my-edit .note-placeholder {
    color: #9ca3af !important;
    font-size: 0.875rem !important;
    padding: 0.75rem !important;
}

/* 状态栏 - 隐藏 */
.my-edit .note-statusbar {
    display: none !important;
}

/* 隐藏自定义表情面板 - 最顽固的那个！*/
.my-edit-smile-panel,
.my-edit .my-edit-smile-panel,
div.my-edit-smile-panel,
.my-edit-smile-panel-btn,
.my-edit .my-edit-smile-panel-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

/* 隐藏编辑器内置的各种按钮和控件 - 使用强优先级 */
.my-edit .note-resizebar,
.my-edit .note-handle,
.my-edit .note-icon-bar,
.my-edit .note-icon-menu,
.my-edit .note-icon-emotion,
.my-edit .note-popover:not(.note-emoji-dialog),
.my-edit .note-control-selection,
.my-edit .note-editing-area button,
.my-edit .note-editing-area .btn-group,
.my-edit .note-editable + button,
.my-edit .note-editable ~ button,
.my-edit button.note-btn:not(.note-toolbar button),
.my-edit .btn-group:not(.note-toolbar .btn-group) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* 表情按钮特殊优化 */
.my-edit .note-btn[data-original-title*="表情"],
.my-edit .note-btn[data-original-title*="Emoji"] {
    font-size: 1rem !important;
}

/* 表情面板 */
.note-emoji-dialog {
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

.note-emoji-dialog .note-emoji {
    font-size: 1.25rem !important;
    padding: 0.25rem !important;
    border-radius: 4px !important;
    transition: background 0.2s ease !important;
}

.note-emoji-dialog .note-emoji:hover {
    background: #f3f4f6 !important;
}

/* 这部分规则已合并到上面的统一隐藏规则中 */

/* 链接输入框 */
.my-edit .note-link-dialog .form-control {
    border: 1px solid #e5e7eb !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
}

.my-edit .note-link-dialog .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Modal对话框 */
.my-edit .modal-content {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

/* 兼容旧编辑器 */
.my-edit .edui-toolbar {
    border: none !important;
    background: transparent !important;
    padding: 0.5rem 0 !important;
}

.my-edit .edui-button {
    border: none !important;
    background: transparent !important;
}

.my-edit .edui-button:hover {
    background: #f3f4f6 !important;
}

/* ========================================
   评论列表样式 - 业界规范设计
   ======================================== */

.comment {
    margin-top: 0;
}

.comment ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 评论项 - 两栏布局：头像 | 右侧内容区 */
.comment li {
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem 0;
    position: relative;
    border: none !important;
    border-bottom: none !important;
}

.comment li:first-child {
    padding-top: 0;
}

.comment li:last-child {
    padding-bottom: 0;
}

/* 评论者头像 */
.comment-avatar {
    flex-shrink: 0;
}

.comment-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none !important;
    object-fit: cover;
    display: block;
}

/* 右侧内容区 */
.comment-right {
    flex: 1;
    min-width: 0;
}

/* 用户信息行 - 一行显示（业界标准） */
.comment-user-info {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.comment-username {
    font-weight: 600;
    color: #1f2937 !important;
    text-decoration: none;
    font-size: 0.875rem;
}

.comment-username:hover {
    color: #3b82f6 !important;
}

.comment-author-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
    font-size: 0.6875rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 8px;
    font-weight: 600;
}

.comment-time {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: normal;
}

.comment-floor {
    font-size: 0.75rem;
    color: #d1d5db;
    font-weight: normal;
    font-style: normal;
}

.comment-content {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
    word-break: break-word;
}

/* 评论内容中的段落 */
.comment-content p {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

/* 评论内容中的链接 */
.comment-content a {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.comment-content a:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* 评论内容中的图片 */
.comment-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0.75rem 0;
    display: block;
}

/* 私密和审核提示 */
.comment-private-notice,
.comment-audit-notice {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

.comment-audit-notice {
    background: #e0e7ff;
    color: #3730a3;
}

/* 评论操作按钮 - 业界标准样式 */
.comment-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.625rem;
}

.comment-action-btn {
    color: #8a8f98;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
}

.comment-action-btn:hover {
    color: #3b82f6;
}

.comment-action-btn.comment-delete:hover {
    color: #ef4444;
}

/* 回复表单 - 统一最小化设计 */
.comment-reply-form {
    margin-top: 0.75rem;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reply-textarea {
    width: 100%;
    min-height: 72px;
    padding: 0.75rem;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    transition: all 0.2s ease;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.reply-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.reply-textarea::placeholder {
    color: #9ca3af;
}

.reply-form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
    justify-content: flex-end;
}

/* 回复列表 - 使用背景色区分层级 */
.recomment-list {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: none;
}

/* 回复项 */
.recomment-item {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.625rem;
    padding: 0;
    margin-bottom: 1rem;
}

.recomment-item:first-child {
    padding-top: 0;
}

/* 回复项之间的间距 */
.recomment-item + .recomment-item {
    margin-top: 0;
}

/* 真正的最后一个回复项（无论是否隐藏） */
.recomment-list > .recomment-item:last-of-type,
.recomment-list .recomment-item:last-of-type {
    margin-bottom: 0 !important;
}

/* 加载更多按钮上方需要间距 */
.recomment-list > .load-more-replies {
    margin-top: 0;
    padding-top: 1rem;
}

/* 隐藏的回复项 - 不使用!important，让jQuery可以控制 */
.recomment-item-hidden {
    display: none;
}

/* 回复者头像 */
.recomment-avatar {
    flex-shrink: 0;
}

.recomment-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: none !important;
    display: block;
}

/* 回复右侧内容区 */
.recomment-right {
    flex: 1;
    min-width: 0;
}

/* 回复用户信息行 - 一行显示 */
.recomment-user-info {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.recomment-username {
    font-weight: 600;
    color: #374151 !important;
    text-decoration: none;
    font-size: 0.8125rem;
}

.recomment-username:hover {
    color: #3b82f6 !important;
}

.recomment-time {
    font-size: 0.6875rem;
    color: #9ca3af;
}

.recomment-content {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #4b5563;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
    word-break: break-word;
}

.recomment-content p {
    margin-bottom: 0.5rem;
}

.recomment-content p:last-child {
    margin-bottom: 0;
}

.recomment-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0.5rem 0;
}

/* 回复对象样式 */
.reply-to {
    color: #6b7280;
    font-size: 0.875rem;
}

.reply-to a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.reply-to a:hover {
    text-decoration: underline;
}

/* 回复操作按钮 */
.recomment-actions {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-top: 0.5rem;
}

.recomment-action-btn {
    color: #8a8f98;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
}

.recomment-action-btn:hover {
    color: #3b82f6;
}

.recomment-action-btn.recomment-delete:hover {
    color: #ef4444;
}

/* 加载更多回复 - 纯文字链接样式 */
.load-more-replies {
    margin-top: 0;
    text-align: center;
    padding-top: 1rem;
}

.load-more-btn {
    display: inline-block;
    color: #6b7280;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
}

.load-more-btn:hover {
    color: #3b82f6;
}

/* 加载中状态 */
.load-more-btn.loading {
    color: #9ca3af;
    cursor: wait;
    pointer-events: none;
}

/* 文字 */
.load-more-text {
    font-weight: 500;
}

/* 隐藏的回复项 - 通过JavaScript控制 */
.recomment-item-hidden {
    /* 默认不设置display，由JavaScript完全控制 */
}

/* 当JavaScript设置为none时 */
.recomment-item-hidden[style*="display: none"] {
    display: none !important;
}

/* 当JavaScript设置为flex时 */
.recomment-item-hidden[style*="display: flex"] {
    display: flex !important;
}

/* 表单按钮样式 - 业界标准 */
.comment .btn-sm {
    padding: 0.4375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    border: none;
    cursor: pointer;
    line-height: 1.4;
}

.comment .btn-primary {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.comment .btn-primary:hover {
    background: #2563eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.comment .btn-secondary {
    background: #ffffff;
    color: #6b7280;
    border: 1px solid #e1e4e8;
}

.comment .btn-secondary:hover {
    background: #f6f8fa;
    border-color: #d0d7de;
    color: #374151;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .comment li {
        gap: 0.625rem;
        padding: 1rem 0;
    }

    .comment-avatar img {
        width: 36px;
        height: 36px;
    }

    .comment-username {
        font-size: 0.8125rem;
    }

    .comment-content {
        font-size: 0.875rem;
    }

    /* 回复列表 */
    .recomment-list {
        padding: 0.75rem;
    }

    .recomment-avatar img {
        width: 28px;
        height: 28px;
    }

    .recomment-username {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .comment li {
        gap: 0.5rem;
        padding: 0.875rem 0;
    }

    .comment-avatar img {
        width: 32px;
        height: 32px;
    }

    .comment-username {
        font-size: 0.8125rem;
    }

    .comment-author-badge {
        font-size: 0.625rem;
        padding: 0.0625rem 0.3125rem;
    }

    .comment-time,
    .comment-floor {
        font-size: 0.6875rem;
    }

    .comment-content {
        font-size: 0.875rem;
    }

    .comment-actions {
        gap: 0.75rem;
    }

    /* 回复列表 */
    .recomment-list {
        padding: 0.75rem;
        margin-top: 0.875rem;
    }

    .recomment-item {
        gap: 0.5rem;
        margin-bottom: 0.875rem;
    }

    .recomment-avatar img {
        width: 24px;
        height: 24px;
    }

    .recomment-username {
        font-size: 0.75rem;
    }

    .recomment-time {
        font-size: 0.625rem;
    }

    .recomment-content {
        font-size: 0.8125rem;
    }

    .recomment-actions {
        gap: 0.625rem;
    }
}

/* 评论分页样式 - 简洁设计 */
.comment + .page {
    margin-top: 2.5rem;
    padding-top: 0;
    display: flex;
    justify-content: center;
}

.page {
    display: flex;
    gap: 0.375rem;
}

.page a,
.page span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid #e1e4e8;
    background: #ffffff;
}

.page a {
    color: #6b7280;
}

.page a:hover {
    color: #3b82f6;
    background: #f6f8fa;
    border-color: #d0d7de;
}

.page span {
    color: #ffffff;
    background: #3b82f6;
    border-color: #3b82f6;
}

/* ========================================
   响应式设计
   ======================================== */

@media (max-width: 900px) {
    /* 图片在小屏幕上不突破容器 */
    .topic-view.common-content img {
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    
    .topic-view.common-content video {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .topic-show-page .container {
        padding: 24px 16px;
    }
    
    .show-info-title {
        font-size: 1.375rem;
    }
    
    .topic-show-page .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        height: auto;
    }
    
    .topic-show-page .user-info {
        height: auto;
    }
    
    .topic-show-page .follow-action {
        width: 100%;
        justify-content: flex-start;
        height: auto;
    }
    
    .topic-tags {
        margin-left: 0;
        margin-top: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .topic-view.common-content {
        font-size: 0.875rem;
    }
    
    /* 评论表单底部响应式 */
    .comment-form-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .comment-toolbar-left {
        justify-content: flex-start;
    }
    
    .comment-form-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .topic-show-page .container {
        padding: 20px 12px;
    }
    
    .show-info-title {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }
    
    .topic-show-page .user-avatar {
        width: 28px;
        height: 28px;
    }
    
    .commentform-user-face {
        width: 28px;
        height: 28px;
    }
    
    .topic-tags {
        margin: 0.5rem 0 1rem 0;
    }
    
    .topic-tag-link {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }
    
    .topic-view.common-content {
        font-size: 0.875rem;
    }
    
    .topic-view.common-content p {
        margin-bottom: 0.875rem;
    }
}

/* ========================================
   付费内容
   ======================================== */

.alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    color: #1e40af;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

/* ========================================
   自定义弹窗 - 简洁清爽设计
   ======================================== */

/* 弹窗容器 */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 遮罩层 */
.custom-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* 弹窗对话框 */
.custom-modal-dialog {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 弹窗头部 */
.custom-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f3f5;
}

.custom-modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.custom-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #9ca3af;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.custom-modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

/* 弹窗主体 */
.custom-modal-body {
    padding: 1.5rem;
}

.custom-modal-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.custom-modal-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
}

.custom-modal-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-modal-error {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #ef4444;
    min-height: 20px;
}

/* 弹窗底部 */
.custom-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f3f5;
}

.custom-modal-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.custom-modal-btn-cancel {
    background: #ffffff;
    color: #6b7280;
    border: 1px solid #e1e4e8;
}

.custom-modal-btn-cancel:hover {
    background: #f6f8fa;
    border-color: #d0d7de;
}

.custom-modal-btn-primary {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.custom-modal-btn-primary:hover {
    background: #2563eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 响应式 */
@media (max-width: 480px) {
    .custom-modal-dialog {
        width: 95%;
        max-width: none;
        margin: 1rem;
    }
    
    .custom-modal-header,
    .custom-modal-body,
    .custom-modal-footer {
        padding: 1rem;
    }
}

/* ========================================
   辅助样式
   ======================================== */

.text-muted {
    color: #9ca3af;
}

.mt-3 {
    margin-top: 1rem;
}

.tac {
    text-align: center;
}

.rounded-circle {
    border-radius: 50%;
}

/* Row布局 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
}

.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px;
}

@media (max-width: 768px) {
    .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Form控件 */
.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: #3b82f6;
}

.form-control-sm {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
}

.w-auto {
    width: auto !important;
}

.float-left {
    float: left;
}

.text-right {
    text-align: right;
}

.fs16 {
    font-size: 16px;
}

.u-row-right {
    justify-content: flex-end;
}

/* 验证码 */
.form-control + img {
    vertical-align: middle;
}