/* 社区容器样式 - 铺满不留边距 */
.community-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #f5f5f5;
    min-height: 100vh;
}

/* 顶部图标导航 */
.community-icons {
    display: flex;
    justify-content: space-around;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.icon-item {
    text-decoration: none;
    text-align: center;
    color: #333;
    flex: 1;
}

.icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;/* 图标大小适配 */
    transition: transform 0.2s;
}
                                        
/* 顶部导航图标样式优化 */
.community-icons .icon i {
    font-size: 24px; /* 图标大小适配 */
}
                                        
                                        

.icon-item:hover .icon {
    transform: scale(1.1);
}

/* 优化图标配色 */
.icon-idea { 
    background: linear-gradient(135deg, #ff9f43, #ff7f00); 
    color: white; 
}
.icon-prayer { 
    background: linear-gradient(135deg, #ea5455, #d63031); 
    color: white; 
}
.icon-qa { 
    background: linear-gradient(135deg, #496df1, #3742fa); 
    color: white; 
}
.icon-prayer-box { 
    background: linear-gradient(135deg, #6c5ce7, #5f4fde); 
    color: white; 
}

.icon-item span {
    color: #333;
    font-size: 12px;
    font-weight: 500;
}

/* 选项卡样式 */
.tabs {
    display: flex;
    gap: 5px;
    padding: 15px;
    overflow-x: auto;
    background: white;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 80px;
    z-index: 99;
}

.tabs button {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background: #f8f9fa;
    color: #666;
    white-space: nowrap;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    flex-shrink: 0;
}

.tabs button.active {
    background: #007bff;
    color: white;
    box-shadow: 0 2px 6px rgba(0,123,255,0.3);
}

.tabs button:hover:not(.active) {
    background: #e9ecef;
}

/* 帖子列表样式 - 减少上下间距 */
.posts-list {
    display: flex;
    flex-direction: column;
    gap: 5px; /* 减少帖子之间的间距 */
    padding: 2px 0; /* 减少上下内边距 */
}

/* 帖子项样式 - 调整布局 */
.post-item {
    display: flex;
    background: white;
    padding: 12px 15px; /* 调整内边距 */
    margin: 0; /* 移除外边距 */
    border-radius: 0; /* 移除圆角使铺满 */
    box-shadow: none; /* 移除阴影 */
    border-bottom: 1px solid #f0f0f0; /* 添加底部边框分隔 */
    transition: background-color 0.2s;
    min-height: 80px; /* 确保最小高度 */
}

.post-item:hover {
    background-color: #fafafa;/* 浅灰色背景 */
}

.post-item .avatar {
    width: 40px; /* 稍微调小头像 */
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    margin-right: 12px;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.post-item .content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-left: 0; /* 确保内容区域不缩进 */
}

/* 用户信息行 - 用户名限制6个字 */
.post-item .user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px; /* 减少底部间距 */
}

.post-item .user-info .nickname {
    font-weight: 600;
    color: #333;
    font-size: 15px;/* 图标大小 */
    max-width: 80px; /* 限制用户名宽度 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-item .user-info .follow-btn {
    background: #ff4757;/* 设置背景颜色为粉红色 */
    color: white;/* 文字颜色设置为白色 */
    border: none;/* 移除按钮的边框 */
    padding: 4px 10px;/* 内边距设置，上下4px，左右10px */
    border-radius: 12px; /*设置圆角的半径 */
    font-size: 11px;/* 图标大小 */
    cursor: pointer;/* 当鼠标悬停在按钮上时显示为手型光标，表示可点击 */
    transition: all 0.3s; /* 过渡平滑变化 */
    flex-shrink: 0;/* 在使用Flex布局时，该元素不会缩小，保持原有宽度 */
}

.post-item .user-info .follow-btn.followed {
    background: #ced6e0;
}

/* .post-item .user-info .follow-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

/* 元信息行 - 与用户名对齐 */
/* 元信息行 - 确保不缩进 */
.post-item .meta-info {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    gap: 8px;
    flex-wrap: wrap;
    padding-left: 0; /* 移除左边距 */ /* 确保不缩进 */
}

.post-item .meta-info .category {
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 11px;
}

.category-thought {
    background: #ffeaa7;
    color: #e17055;
}

.category-prayer {
    background: #fab1a0;
    color: #d63031;
}

.category-qa {
    background: #74b9ff;
    color: #0984e3;
}

.post-item .meta-info .time {
    color: #999;
}

.post-item .meta-info .prayer-status {
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
}

.status-praying {
    background: #ffeaa7;
    color: #e17055;
}

.status-answered {
    background: #55efc4;
    color: #00b894;
}

/* 帖子内容区域 - 从左至右铺满，不缩进 */
.post-item .post-content {
    margin-bottom: 8px;
    line-height: 1.5;
    color: #333;
    font-size: 15px;
    cursor: pointer;
    word-break: break-word;
    padding-left: 0; /* 移除左边距 *//* 完全左对齐 */
    width: 100%; /* 确保宽度铺满 */
    flex: 1; /* 占据剩余空间 */
}

/* 话题标签 */
.post-item .post-tags {
    margin-bottom: 8px;
    font-size: 13px;
    color: #666;
    padding-left: 0; /* 移除左边距 */  /* 完全左对齐 */
}

.post-item .post-tags:before {
    content: "🏷️ ";
    margin-right: 4px;
}

/* 互动按钮区域 - 调整布局和边距 */
.post-item .interact-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 0 0; /* 调整内边距 */
    border-top: 1px solid #f8f9fa;
    /* margin-top: 8px;  */
    margin-top: auto; /* 确保贴底 */
    min-height: 32px; /* 确保最小高度 */
    width: 100%;
}

/* 左侧区域 - 只放代祷箱按钮 */
.interact-left {
    display: flex;
    align-items: center;
}

/* 右侧区域 - 放置顶标签和所有互动按钮 */
.interact-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 置顶标签移动到互动区左边 */
.post-item .sticky-badge {
    background:#f8f8f8 !important;
    color:#222222  !important;
    padding: 2px 6px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-weight: normal !important;
    margin-right: 5px;
    /* order: -1; /* 放在最左边 */
}

/* 祷告帖子的代祷箱按钮放在最左边 */
.post-item .prayer-box-btn {
    margin-right: auto;
}

/* 互动按钮通用样式：定义按钮的基础外观和交互逻辑 */
.post-item .interact-buttons .btn {
    /* Flex布局：让按钮内容水平居中排布（比如图标+文字） */
    display: flex;
    /* 垂直居中对齐：图标和文字上下对齐 */
    align-items: center;
    /* 鼠标悬停时变成手型，提示可点击 */
    cursor: pointer;
    /* 默认文字颜色：浅灰色，不抢眼但易读 */
    color: #999;
    /* 无背景色：按钮本身透明，避免突兀 */
    background: none;
    /* 无边框：干净利落，符合现代UI */
    border: none;
    /* 内边距：上下4px、左右6px，点击区域更友好 */
    padding: 4px 6px;
    /* 圆角边框：6px微弧度，手感更柔和 */
    border-radius: 6px;
    /* 字体大小：12px，适配移动端小屏 */
    font-size: 12px;
    /* 所有属性变化有0.3秒过渡：比如悬停时颜色渐变不突兀 */
    transition: all 0.3s;
    /* 项目间距：图标和文字之间留3px空隙，呼吸感拉满 */
    gap: 3px;
    /* 自动最小宽度：避免按钮被内容撑太窄 */
    min-width: auto;
}

/* 悬停状态：鼠标放上去的视觉反馈 */
.post-item .interact-buttons .btn:hover {
    /* 背景色变浅灰（#f8f9fa）：轻触感提示，不刺眼 */
    background: #f8f9fa;
    /* 文字颜色变深灰（#666）：增强可读性，暗示“已选中” */
    color: #666;
}
/* 互动按钮通用样式 */
.post-item .interact-buttons .btn i {
    font-size: 13px;  /* 图标略大于文字（13px），增强视觉识别度 */
}
                                                   
                                                   
                                                   
/* 互动按钮图标优化，替换为更美观的 FontAwesome 图标并优化样式 */
.interact-buttons .btn i {
    font-size: 16px; /* 增大图标 */
    transition: transform 0.2s;
}
.interact-buttons .btn:hover i {
    transform: scale(1.2); /* 添加hover缩放效果 */
}
/* 点赞图标 */
.interact-buttons .like-btn i {
    content: "\f004"; /* 心形图标 */
}
/* 收藏图标 */
.interact-buttons .collect-btn i {
    content: "\f02e"; /* 书签图标 */
}
/* 代祷箱图标 */
.interact-buttons .prayer-box-btn i {
    content: "\f4be"; /* 箱子图标 */
}
/* 评论图标 */
.interact-buttons .comment-btn i {
    content: "\f075"; /* 评论图标 */
}

                                                    
                                                    
                                                    
                                                    
.post-item .interact-buttons .btn.liked {
    color: #e84393;  /* 点赞后颜色变为粉红色，表示已激活状态 */
}

.post-item .interact-buttons .btn.collected {
    color: #fdcb6e;   /* 收藏后颜色变为金色/琥珀色，表示已收藏 */
}

.post-item .interact-buttons .btn.in-prayer-box {
    color: #6c5ce7;   /* 祷告相关状态使用紫色，表示该内容已被加入祷告箱 */
}
                   
                
/* 确保所有内容区域都不缩进 */
.posts-list,
.community-container {
    padding-left: 0;
    padding-right: 0;
}

                                      
                                      
                                      
/* ▲悬浮按钮发布功能在这里开始添加▲ */
/* ============================================================
   悬浮发布按钮（右下角圆形按钮）
   作用：固定在页面右下角，点击后弹出“发布想法/祷告/问答”选项
============================================================ */

.floating-publish-btn {
    position: fixed;        /* 固定定位，不随页面滚动 */
    bottom: 30px;           /* 距离视口底部 30px */
    right: 20px;            /* 距离视口右侧 20px */
    z-index: 1000;          /* 置于最上层，避免被其他内容遮挡 */
}


/* ============================================================
   悬浮按钮内部的 SVG 铅笔图标样式
   说明：使用 inline SVG，需确保线条颜色为白色，与背景协调
============================================================ */

.pencil-btn .pencil-icon,
.pencil-btn svg.pencil-icon {
    color: white;           /* 文字颜色（对某些图标库生效） */
    stroke: white;          /* SVG 描边颜色设为白色 */
    fill: none;             /* SVG 填充透明，只显示轮廓 */
    display: block;         /* 消除行内元素间隙 */
    margin: 0 auto;         /* 水平居中 */
}

/* 移除可能由字体图标库（如 Font Awesome）自动插入的 ::before 内容 */
/* 避免出现额外图标或乱码 */
.pencil-btn::before {
    display: none;
}


/* ============================================================
   悬浮发布按钮主样式
   特点：圆形、渐变背景、阴影、悬停放大动效
============================================================ */

.pencil-btn {
    width: 56px;                            /* 按钮宽度（正方形） */
    height: 56px;                           /* 按钮高度（正方形） */
    border-radius: 50%;                     /* 变成完美圆形 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 紫色渐变背景 */
    border: none;                           /* 无边框 */
    color: white;                           /* 文字/图标颜色 */
    font-size: 20px;                        /* 图标大小（若用字体图标） */
    display: flex;                          /* 使用 Flex 布局 */
    align-items: center;                    /* 垂直居中 */
    justify-content: center;                /* 水平居中 */
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); /* 柔和投影，增强立体感 */
    cursor: pointer;                        /* 鼠标悬停显示手型 */
    transition: all 0.3s ease;              /* 所有属性变化都有平滑过渡 */
}

/* 悬停效果：轻微放大 + 阴影加深，提升交互反馈 */
.pencil-btn:hover {
    transform: scale(1.1);                  /* 放大 10% */
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6); /* 阴影更明显 */
}


/* ============================================================
   发布选项弹窗（从底部滑出的面板）
   包含三个选项：想法 / 祷告 / 问答
============================================================ */

.publish-options-modal {
    position: fixed;                        /* 固定在视口底部 */
    bottom: 0;
    left: 0;
    right: 0;
    background: white;                      /* 白色背景 */
    border-radius: 20px 20px 0 0;           /* 顶部圆角，底部直角 */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); /* 向上投影 */
    padding: 30px 20px 20px;                /* 内边距：上30，左右20，下20 */
    z-index: 999;                           /* 层级略低于悬浮按钮（但实际不会重叠） */
    display: none;                          /* 默认隐藏，JS 控制显示 */
}

/* 选项列表：横向排列三个选项，间距均匀 */
.publish-options-modal .option-list {
    display: flex;
    gap: 20px;                              /* 选项之间间隔 20px */
    justify-content: space-around;          /* 均匀分布 */
    margin-bottom: 20px;                    /* 与“取消”按钮留空 */
}

/* 单个选项项（包含图标 + 文字） */
.option-item {
    display: flex;
    flex-direction: column;                 /* 图标在上，文字在下 */
    align-items: center;                    /* 内容水平居中 */
    cursor: pointer;                        /* 鼠标悬停显示手型 */
    flex: 1;                                /* 平分容器宽度 */
}


/* ============================================================
   发布选项中的图标容器（圆形背景）
   关键：确保严格 60x60 圆形，图标居中，支持悬停缩放
============================================================ */

.option-icon {
    width: 60px;                            /* 固定宽度 */
    height: 60px;                           /* 固定高度 */
    border-radius: 50%;                     /* 变成圆形 */
    display: flex;                          /* Flex 布局 */
    align-items: center;                    /* 垂直居中 */
    justify-content: center;                /* 水平居中 */
    margin-bottom: 8px;                     /* 与下方文字间距 */
    transition: transform 0.2s ease;        /* 缩放动画平滑 */
    box-sizing: border-box;                 /* 确保 padding/border 不影响宽高 */
}

/* 图标本身（通常为 <i class="fa ...">） */
.option-icon i {
    font-size: 24px;                        /* 图标大小 */
    color: white;                           /* 白色图标，与彩色背景形成对比 */
    width: 100%;                            /* 占满父容器 */
    height: 100%;                           /* 占满父容器 */
    display: flex;                          /* 再次 Flex 居中（双重保险） */
    align-items: center;
    justify-content: center;
}

/* 悬停时图标轻微放大，增强交互感 */
.option-item:hover .option-icon {
    transform: scale(1.1);
}


/* ============================================================
   不同发布类型的图标背景色（通过 data-type 区分）
   - 想法：橙色系
   - 祷告：红色系
   - 问答：蓝色系
============================================================ */

.option-item[data-type="thought"] .option-icon {
    background: linear-gradient(135deg, #ff9f43, #ff7f00); /* 想法：温暖橙色 */
}

.option-item[data-type="prayer"] .option-icon {
    background: linear-gradient(135deg, #ea5455, #d63031); /* 祷告：热情红色 */
}

.option-item[data-type="qa"] .option-icon {
    background: linear-gradient(135deg, #496df1, #3742fa); /* 问答：科技蓝色 */
}


/* ============================================================
   发布选项下方的文字标签样式
============================================================ */

.option-item span {
    font-size: 14px;                        /* 字号适中 */
    color: #333;                            /* 深灰色文字 */
    font-weight: 500;                       /* 稍微加粗，提升可读性 */
}


/* ============================================================
   “取消”按钮样式（位于弹窗底部）
============================================================ */

.cancel-option {
    text-align: center;                     /* 文字居中 */
    padding: 15px;                          /* 内边距 */
    color: #666;                            /* 灰色文字 */
    font-size: 16px;                        /* 稍大字号，易于点击 */
    cursor: pointer;                        /* 手型光标 */
    border-top: 1px solid #f0f0f0;          /* 顶部细线，与上方内容分隔 */
    margin-top: 10px;                       /* 与上方选项留空 */
}


/* ============================================================
   关注按钮样式（用于用户卡片等位置）
   特点：小尺寸、圆角、红色背景，已关注时变灰
============================================================ */

.follow-btn {
    background: #ff4757;                    /* 默认红色背景 */
    color: white;                           /* 白色文字 */
    border: none;                           /* 无边框 */
    padding: 3px 8px !important;            /* 小内边距 */
    border-radius: 10px;                    /* 圆角 */
    font-size: 10px !important;             /* 小字号 */
    cursor: pointer;                        /* 手型 */
    transition: all 0.3s;                   /* 平滑过渡 */
    flex-shrink: 0;                         /* 不被压缩 */
    height: 20px;                           /* 固定高度 */
    line-height: 1;                         /* 避免文字偏移 */
}

/* 已关注状态：背景变浅灰 */
.follow-btn.followed {
    background: #ced6e0;
}
/* ▲悬浮按钮发布功能在这里结束添加▲ */
                                              
                                              
                                              
                                              
/* 帖子列表容器 */
#posts-container {
    min-height: 300px;
    padding-bottom: 80px;
}

/* 发布表单样式 */
.publish-form-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 998;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.publish-form-modal .form-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.publish-form-modal .form-header .back-btn {
    color: #007bff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}

.publish-form-modal .form-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.publish-form-modal .form-header .publish-btn {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.publish-form-modal .form-header .publish-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.publish-form-modal .form-content {
    display: flex;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 2px; /*  统一控制子元素之间的间距 */
    margin: 0; /* 确保没有额外外边距 */
  padding: 16px; /* 可保留，用于整体内边距 */
}

.publish-form-modal textarea {
    width: 100%;
     flex: 1;      /* none;取消 flex 伸缩 */
    min-height: 300px; /* 确保有足够高度 */
    height: auto;    /* 允许内容撑高（可选） */
    margin-bottom: 2px; /* 缩小到字数统计的距离 */
    /* flex: 1;*/
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
    resize: none;
    font-size: 16px;
    line-height: 1.5;
    resize: vertical; /* 允许用户拖动调整高度（更友好） */
    /*  margin-bottom: 10px;*/
    box-sizing: border-box;
}

.publish-form-modal textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

/* 字数统计样式 */
.word-count {
    text-align: right;
    font-size: 14px;
    color: #999;
    /* 删除 margin-top: -8px; *//* 微调靠近 textarea */
    margin: 0; /* 确保没有额外外边距 */
}

.word-count.limit-exceeded {
    color: #e74c3c;
}

/* 来源输入框区域 */
.publish-form-modal .source-group label {
  display: block;
  font-size: 14px;
  font-weight: 1000;
  margin-bottom: 6px;
  color: #495057;
  margin: 0; /* 防止默认 margin 干扰 */
}

.publish-form-modal .source-group input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.publish-form-modal .source-group input[type="text"]:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}



/* —————— 祷告标签输入框样式 —————— */

.publish-form-modal .prayer-tags-group {
  margin: 0; /* 避免额外外边距，由父容器 gap 控制间距 */
}

/* 标签标题 */
.publish-form-modal .prayer-tags-group label {
  display: block;
  font-size: 14px;
  font-weight: 1000;
  color: #495057;
  margin-bottom: 6px;
}

/* 标签输入框 */
.publish-form-modal .prayer-fields input[type="text"],
.publish-form-modal .prayer-tags-group input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e9ecef;
 /* border-radius: 6px;007bff */
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-color: #fff;
}

/* 聚焦状态 */
.publish-form-modal .prayer-tags-group input[type="text"]:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* 占位符颜色（更柔和） */
.publish-form-modal .prayer-tags-group input::placeholder {
  color: #adb5bd;
  font-style: italic;
}



/* 状态提示 */
.loading, .empty, .error {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.empty {
    color: #999;
}

.error {
    color: #e74c3c;
}

/* 确保模态框在最上层 */
.publish-options-modal,
.publish-form-modal {
    z-index: 10000;
}

/* 隐藏滚动条当模态框打开时 */
body.modal-open {
    overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .community-container {
        padding: 0;
    }
    
    .post-item {
        padding: 10px 12px;
    }
    
    .post-item .avatar {
        width: 36px;
        height: 36px;
        margin-right: 10px;
    }
    
    .tabs {
        padding: 10px 12px;
    }
    
    .tabs button {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .community-icons {
        padding: 10px 0;
    }
    
    .icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    
    .floating-publish-btn {
        bottom: 15px;
        right: 15px;
    }
    
    .post-item .user-info .nickname {
        max-width: 70px; /* 移动端稍宽一点 */
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.post-item {
    animation: fadeIn 0.3s ease-out;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

                                 
                                                           
                                                           
                                                           
/* 确保内容区域完全左对齐 */
.community-container .posts-list .post-item .content > * {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 确保互动区域完全左对齐 */
.community-container .posts-list .post-item .interact-buttons {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 高度自适应调整 */
.post-item {
    align-items: flex-start !important;
}

.post-item .content {
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 60px; /* 确保最小高度 */
}

/* 确保内容区域和互动区域不会因为内容少而留白 */
.post-item .post-content {
    flex-shrink: 1;
    min-height: 20px;
}

.post-item .interact-buttons {
    flex-shrink: 0;
    margin-top: auto;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .post-item {
        padding: 10px 12px;
        min-height: 70px;
    }
    
    .post-item .avatar {
        width: 36px;
        height: 36px;
        margin-right: 10px;
    }
    
    .interact-right {
        gap: 10px;
    }
    
    .post-item .interact-buttons .btn {
        font-size: 11px;
        padding: 3px 5px;
    }
    
    .post-item .sticky-badge {
        font-size: 9px !important;
        padding: 1px 4px !important;
    }
}

/* 确保所有元素都不缩进 */
.community-container,
.posts-list,
.post-item,
.post-item .content,
.post-item .post-content,
.post-item .post-tags,
.post-item .interact-buttons {
    padding-left: 0;
    margin-left: 0;
}
                                 
                                 
/* 确保所有元素都不缩进 */
.community-container,
.posts-list,
.post-item,
.post-item .content,
.post-item .post-content,
.post-item .post-tags,
.post-item .interact-buttons {
    padding-left: 0;
    margin-left: 0;
}

/* 确保所有元素都不缩进 */
.community-container,
.posts-list,
.post-item,
.post-item .content,
.post-item .post-content,
.post-item .post-tags,
.post-item .interact-buttons {
    padding-left: 0;
    margin-left: 0;
}

/* ▼▼▼ 在这里开始添加：代祷箱样式 ▼▼▼ */
.prayer-box-container {
    background: white;
    min-height: 300px;
}

.prayer-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.prayer-tab-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: none;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
}

.prayer-tab-btn.active {
    color: #007bff;
    font-weight: 600;
    border-bottom: 2px solid #007bff;
    background: white;
}

.prayer-posts-list {
    padding: 0;
}

.prayer-box-item {
    display: flex;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    background: white;
}

.prayer-box-item .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    margin-right: 12px;
    flex-shrink: 0;
}

.prayer-box-item .content {
    flex: 1;
    min-width: 0;
}

.prayer-box-item .user-info {
    margin-bottom: 4px;
}

.prayer-box-item .nickname {
    font-weight: 600;
    color: #333;
    font-size: 15px;
}

.prayer-box-item .meta-info {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    gap: 8px;
    flex-wrap: wrap;
}

.prayer-box-item .post-content {
    margin-bottom: 8px;
    line-height: 1.5;
    color: #333;
    font-size: 15px;
}

.prayer-box-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.prayer-box-actions .btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.prayer-box-actions .complete-prayer {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.prayer-box-actions .remove-from-prayer-box {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.prayer-box-actions .btn:hover {
    opacity: 0.8;
}
/* ▲▲▲ 在这里结束添加 ▲▲▲ */



/* ▼▼▼ 在这里开始添加：代祷箱样式 ▼▼▼ */
.prayer-box-container {
    background: white;
    min-height: 300px;
}

.prayer-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.prayer-tab-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: none;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
}

.prayer-tab-btn.active {
    color: #007bff;
    font-weight: 600;
    border-bottom: 2px solid #007bff;
    background: white;
}

.prayer-posts-list {
    padding: 0;
}

.prayer-box-item {
    display: flex;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    background: white;
}

.prayer-box-item .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    margin-right: 12px;
    flex-shrink: 0;
}

.prayer-box-item .content {
    flex: 1;
    min-width: 0;
}

.prayer-box-item .user-info {
    margin-bottom: 4px;
}

.prayer-box-item .nickname {
    font-weight: 600;
    color: #333;
    font-size: 15px;
}

.prayer-box-item .meta-info {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    gap: 8px;
    flex-wrap: wrap;
}

.prayer-box-item .post-content {
    margin-bottom: 8px;
    line-height: 1.5;
    color: #333;
    font-size: 15px;
}

.prayer-box-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.prayer-box-actions .btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.prayer-box-actions .complete-prayer {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.prayer-box-actions .remove-from-prayer-box {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.prayer-box-actions .btn:hover {
    opacity: 0.8;
}
/* ▲▲▲ 在这里结束添加 ▲▲▲ */
                                                                      

.word-count {
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.word-count.limit-exceeded {
    color: #e74c3c;
    font-weight: bold;
}

/* 修复关注按钮样式 - 调小尺寸 */
.post-item .user-info .follow-btn {
    background: #f8f8f8;
    color: #222222;
    border: none;
    padding: 3px 8px !important;
    border-radius: 12px;
    font-size: 10px !important;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
    height: 20px;
    line-height: 1;
}

/* 超级置顶标签样式 */
.post-item .sticky-badge.super-sticky {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
    color: white !important;
    padding: 2px 6px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    margin-right: 5px;
    border: 1px solid #ff9ff3;
}

/* 已关注状态的样式 */
.post-item .user-info .follow-btn.followed {
    background: #f8f8f8;
}

/* 修复图标显示 */
.fa {
    font-family: FontAwesome !important;
}
/* 所有互动按钮的默认颜色（收藏、点赞、阿们等） */
/* 确保互动按钮初始状态正确 */
.interact-buttons .btn {
    color: #999 !important;
}
/* "已点赞/已阿们/已同问"状态的颜色 */
.interact-buttons .btn.liked {
    color: #e84393 !important;
}
/* "已收藏"状态的颜色 */
.interact-buttons .btn.collected {
    color: #fdcb6e !important;
}
/* "已在代祷箱中"状态的颜色 */
.interact-buttons .btn.in-prayer-box {
    color: #6c5ce7 !important;
}
                                         
                                         
                                         
/* 用户操作区域举报等相关样式 */
.user-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* 更多操作菜单容器 */
.more-actions {
    position: relative;
}

/* 三个点按钮 */
.more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
}

.more-btn:hover {
    background: #f5f5f5;
    color: #666;
}

/* 下拉菜单 */
.more-menu {
    position: fixed; /* 改为固定定位 */
    bottom: 0; /* 靠底部 */
    left: 0;
    right: 0; /* 左右充满屏幕 */
    background: white;
    border: none; /* 移除边框 */
    border-radius: 12px 12px 0 0; /* 顶部圆角 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 顶部阴影 */
    min-width: auto; /* 取消最小宽度限制 */
    z-index: 1000;
    display: none;
    padding: 15px; /* 增加内边距 */
}

/* 激活状态下显示并横向排列 */
.more-actions.active .more-menu {
    display: flex;
    gap: 20px; /* 菜单项间距 */
    justify-content: center; /* 水平居中 */
}

/* 菜单项样式调整 */
.menu-item {
    display: flex;
    flex-direction: column; /* 图标在上文字在下 */
    align-items: center; /* 内容居中 */
    padding: 10px 15px;
    font-size: 14px;
    width: auto; /* 自动宽度 */
}

/* 图标样式优化 */
.menu-item.report-post:before,
.menu-item.block-user:before,
.menu-item.delete-post:before {
    font-size: 20px; /* 增大图标 */
    margin-right: 0; /* 移除右侧间距 */
    margin-bottom: 5px; /* 图标与文字间距 */
    display: block; /* 图标单独一行 */
    text-align: center;
}


                                                                 
                                                                 
                                                                 
                                                                 
.menu-item:hover {
    background: #f8f9fa;
    color: #e74c3c;
}

.menu-item.report-post:before {
    content: "⚠️ ";
    margin-right: 4px;
}

.menu-item.block-user:before {
    content: "👁️ ";
    margin-right: 4px;
}

.menu-item.delete-post:before {
    content: "🗑️ ";
    margin-right: 4px;
    color: #e74c3c;
}

/* 举报模态框样式 */
.report-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.report-modal.active {
    display: flex;
}

.report-content {
    background: white;
    border-radius: 12px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.report-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.close-report {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
}

.report-reasons {
    margin-bottom: 15px;
}

.reason-item {
    display: block;
    margin-bottom: 8px;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
}

.reason-item:hover {
    background: #f8f9fa;
    border-color: #007bff;
}

.reason-item.selected {
    background: #e3f2fd;
    border-color: #007bff;
    color: #007bff;
}

.report-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.report-actions button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.cancel-report {
    background: #f8f9fa;
    color: #666;
}

.submit-report {
    background: #e74c3c;
    color: white;
}

.submit-report:disabled {
    background: #ccc;
    cursor: not-allowed;
}



/* ▼▼▼ 在这里开始修复：隐藏WordPress页面标题并调整布局 ▼▼▼ */
/* 隐藏WordPress页面标题 */
.page-title,
.entry-title,
.post-title,
h1.entry-title {
    display: none !important;
}

/* 调整详情页容器，移除不必要的边距 */
.community-post-detail {
    margin-top: -79px !important; /* 直接抵消111像素空白 */
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 调整详情页主容器 */
.cc-detail-container {
    background: white;
    min-height: 100vh;
    position: relative;
}

/* 调整可滚动内容区域，让用户信息紧贴顶部 */
.cc-detail-scrollable {
    margin-top: 50px; /* 顶部导航高度 */
    margin-bottom: 20px; /* 底部交互高度 */
    padding: 0; /* 移除内边距 */
    min-height: calc(100vh - 120px);
    box-sizing: border-box;
}

/* 用户信息区域紧贴顶部 */
.cc-user-info {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    padding: 15px 15px 15px; /* 调整内边距 */
    border-bottom: 1px solid #f5f5f5;
    background: white;
}

/* 主体内容区域 */
.cc-main-content {
    margin-bottom: 20px;
    padding: 0 15px; /* 添加左右内边距 */
}

/* 评论区调整 */
.cc-comments-section {
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    padding: 0 15px; /* 添加左右内边距 */
}

/* 确保内容区域没有额外边距 */
.cc-detail-container > * {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
/* ▲▲▲ 在这里结束修复 ▲▲▲ */




/* 主体内容区域 */
.cc-main-content {
    margin-bottom: 20px;
    padding: 0 15px; /* 添加左右内边距 */
}

/* 评论区调整 */
.cc-comments-section {
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    padding: 0 15px; /* 添加左右内边距 */
}

/* 确保内容区域没有额外边距 */
.cc-detail-container > * {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
/* ▲▲▲ 在这里结束修复 ▲▲▲ */


/* 顶部导航区 - 修复显示问题 */
.cc-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px;
    background: white;
    border-bottom: 1px solid #eee;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000; /* 提高层级确保显示 */
    height: 50px;
    box-sizing: border-box;
}

/* 修复返回按钮 */
.cc-back-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    padding: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cc-detail-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: center;
    flex: 1;
} 


/* ▼▼▼ 在这里开始修复：调整更多菜单位置避免被底部遮挡 ▼▼▼ */
/* 下拉菜单 - 调整位置避免被底部互动区域遮挡 */
.cc-more-menu {
    position: fixed;
    bottom: 70px; /* 调整到高于底部互动区域 */
    left: 0;
    right: 0;
    background: white;
    border: none;
    border-radius: 12px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 15px;
    display: none;
    z-index: 10001;
    flex-direction: row;
    justify-content: space-around;
    max-width: 300px;
    margin: 0 auto;
}

/* 移动端进一步调整 */
@media (max-width: 768px) {
    .cc-more-menu {
        bottom: 60px; /* 移动端稍低一点 */
        max-width: 280px;
    }
}
/* ▲▲▲ 在这里结束修复 ▲▲▲ */
                                                   
                                                   
                                                   
/* ▼▼▼ 在这里开始修复：将更多菜单改为从顶部弹出 ▼▼▼ */
/* 下拉菜单 - 改为从顶部弹出避免被底部遮挡 */
.cc-more-menu {
    position: fixed;
    top: 60px; /* 在顶部导航下方 */
    right: 10px; /* 靠右对齐 */
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 15px;
    display: none;
    z-index: 10001;
    flex-direction: column; /* 改为垂直排列 */
    gap: 10px;
    min-width: 140px;
    border: 1px solid #f0f0f0;
}

.cc-more-actions.active .cc-more-menu {
    display: flex;
}

/* 菜单项样式调整 */
.cc-menu-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    border-radius: 6px;
    transition: background-color 0.2s;
    flex-direction: row; /* 水平排列图标和文字 */
}

.cc-menu-item:hover {
    background: #f5f5f5;
}

.cc-menu-item i {
    font-size: 16px;
    margin-right: 8px;
    width: 20px;
    text-align: center;
}
/* ▲▲▲ 在这里结束修复 ▲▲▲ */




.cc-more-actions.active .cc-more-menu {
    display: flex;
}

.cc-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.cc-menu-item i {
    font-size: 20px;
    margin-bottom: 5px;
}


/* 可滚动内容区域 - 调整边距为5px */
.cc-detail-scrollable {
    margin-top: 50px; /* 顶部导航高度 */
    margin-bottom: 0px; /* 底部交互高度 */
    padding: 0; /* 上下15px，左右5px */
    min-height: calc(100vh - 150px);
    box-sizing: border-box;
}
     


/* 发布者信息区 - 紧贴顶部，移除上边距 */
.cc-user-info {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0; /* 移除底部外边距 */
    padding:  8px 15px 6px; /* 最小化内边距：上8px，左右15px，下6px */
    border-bottom: 1px solid #f5f5f5;
    background: white;
}

/* 调整用户头像和元信息间距 */
.cc-avatar {
    width: 38px; /* 稍微调小头像 */
    height: 38px;
    border-radius: 50%;
    background: #e9ecef;
    margin-right: 10px; /* 减少右边距 */
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.cc-user-meta {
    flex: 1;
}

.cc-username {
    font-weight: 600;
    color: #333;
    font-size: 15px; /* 稍微调小字体 */
    margin-bottom: 2px; /* 减少底部间距 */
}

.cc-post-meta {
    display: flex;
    align-items: center;
    gap: 8px; /* 减少元素间距 */
    font-size: 11px; /* 调小字体 */
}

.cc-category {
    padding: 3px 4px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

/* 类型标签颜色 */
.cc-category.thought {
    background: #fff9e6;
    color: #e6a700;
}

.cc-category.prayer {
    background: #ffe6e6;
    color: #d63031;
}

.cc-category.qa {
    background: #e6f7ff;
    color: #1890ff;
}

.cc-time {
    color: #999;
}

/* 关注按钮调整 */
.cc-follow-btn {
    background: #ff4757;
    color: white;
    border: none;
    padding: 4px 10px !important; /* 调整内边距 */
    border-radius: 12px;
    font-size: 11px !important; /* 调小字体 */
    cursor: pointer;
    flex-shrink: 0;
    height: 26px; /* 调小高度 */
    line-height: 1;
}

.cc-follow-btn.followed {
    background: #f8f8f8;
    color: #c6c6c7;
}

/* 主体内容区 - 调整上边距 */
.cc-main-content {
    margin-bottom: 15px;
    padding: 0 15px; /* 保持左右内边距 */
}


/* 帖子内容区域调整 */
.cc-post-content-full {
    line-height: 1.7; /* 稍微调小行高 */
    color: #333;
    font-size: 16px;
    margin-bottom: 13px; /* 减少底部间距 */
    word-break: break-word;
    letter-spacing: 0.2px; /* 稍微调小字间距 */
}

/* 想法详情页来源框 */
.cc-source-box {
    background: #f0f0f0;
    padding: 10px 12px; /* 减少内边距 */
    border-radius: 6px;
    margin-bottom: 12px; /* 减少底部间距 */
    font-size: 13px; /* 调小字体 */
    color: #666;
}

.cc-source-box strong {
    color: #333;
}

/* 祷告状态 */
.cc-prayer-status {
    
    display: flex;
    align-items: center;
    gap: 6px; /* 减少间距 */
    padding: 8px 0; /* 减少内边距 */
    color: #666;
    font-size:  11px; /* 调小字体 */
    font-weight: 500;
}

.cc-prayer-status i {
    font-size: 14px;
}

.status-praying {
    color: #666;
}

.status-answered {
    color: #00b894;
}

/* 标签区域调整 */
.cc-tags {
    margin: 12px 0; /* 减少边距 */
}

.cc-tag {
    display: inline-block;
    background: #f8f9fa;
    color: #666;
    padding:  3px 8px; /* 减少内边距 */
    border-radius: 10px;
    font-size: 11px; /* 调小字体 */
    margin-right: 6px; /* 减少右边距 */
    margin-bottom: 4px; /* 减少底部边距 */
}

/* 评论区 - 调整上边距 */
.cc-comments-section {
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    padding: 0 15px; /* 保持左右内边距 */
    
}


/* 评论区头部调整 */
.cc-comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* 减少底部间距 */
    padding: 0.5px;
}

.cc-comments-header h4 {
    margin: 0;
    font-size: 15px; /* 调小字体 */
    font-weight: 600;
    color: #333;
}

.cc-comments-count {
    color: #999;
    font-size: 13px;/* 调小字体 */
}

.cc-comments-list {
    min-height: 50px;
    padding: 0 5px;
}

.cc-loading-comments,
.cc-no-comments {
    text-align: center;
    padding: 10px;
    color: #999;
    font-size: 16px;
}

/* 评论项调整 */
.cc-comment-item {
    display: flex;
    margin-bottom: 12px; /* 减少底部间距 */
    padding-bottom: 12px; /* 减少内边距 */
    border-bottom: 1px solid #f8f8f8;
}  
  /* 评论头像 */
.cc-comment-avatar {
    width: 24px; /* 调小头像 */
    height: 24px;
    border-radius: 50%;
    background: #e9ecef;
    margin-right: 5px; /* 减少右边距 */
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.cc-comment-content {
    flex: 1;
}

.cc-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.cc-comment-user {
    font-weight: 600;
    color: #333;
    font-size: 13px;
}

.cc-comment-time {
    color: #999;
    font-size: 11px;
}  
   /* 评论正文 */
.cc-comment-text {
    color: #333;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.cc-comment-actions {
    display: flex;
    gap: 15px;
}

.cc-comment-reply,
.cc-comment-like {
    background: none;
    border: none;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cc-comment-like.liked {
    color: #e84393;
}

.cc-comment-like i {
    font-size: 12px;
}


/* ▼▼▼ 在这里开始修复：重新设计底部互动区域布局 ▼▼▼ */
/* 底部交互区 - 重新设计布局 */
.cc-bottom-interaction {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #eee;
    padding: 8px 10px;
    z-index: 10000;
    box-sizing: border-box;
    height: 100px; /* 固定高度 */
}

.cc-interaction-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 改为两端对齐 */
    width: 100%;
    height: 100%;
    gap: 10px;
}

/* 输入区域优化 - 占据更多空间 */
.cc-input-area {
    flex: 1;
    display: flex;
    gap: 8px;
    min-width: 0;
    max-width: none; /* 移除最大宽度限制 */
}

.cc-input-field {
    flex: 1;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 14px;
    outline: none;
    min-width: 0;
    box-sizing: border-box;
    height: 36px; /* 固定高度 */
}
/* 提交按钮 */
.cc-input-submit {
    background: #de5484;
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 60px;
    height: 36px; /* 与输入框同高 */
}

/* 互动按钮区域优化 - 重新设计布局 */
.cc-action-buttons {
    display: flex;
    align-items: center;
    gap: 15px; /* 增加间距 */
    flex-shrink: 0;
    justify-content: flex-end;
    min-width: auto;
}

/* ▼▼▼ 在这里开始修复：为新的HTML结构添加CSS样式 ▼▼▼ */
/* 详情页互动按钮 - 使用div元素确保对齐 */
.cc-detail-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    padding: 5px 8px;
    min-width: 45px;
    height: 50px;
    transition: all 0.2s;
    text-align: center;
}

.cc-detail-action:hover {
    background: #f8f9fa;
    border-radius: 8px;
}

.cc-detail-action i {
    font-size: 18px;
    margin-bottom: 2px;
    display: block;
    line-height: 1;
}

.cc-detail-action .count {
    font-size: 11px;
    line-height: 1.2;
    display: block;
}

/* 确保所有互动按钮在同一水平线上 */
.cc-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .cc-detail-action {
        min-width: 40px;
        height: 45px;
        padding: 4px 6px;
    }
    
    .cc-detail-action i {
        font-size: 16px;
    }
    
    .cc-detail-action .count {
        font-size: 10px;
        
    }
}
/* ▲▲▲ 在这里结束修复 ▲▲▲ */


/* 电脑端优化 */
@media (min-width: 769px) {
    .community-post-detail {
        max-width: 600px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
    }
    
    .cc-detail-header,
    .cc-bottom-interaction {
        max-width: 600px;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .cc-detail-scrollable {
        padding: 15px 10px;
    }
} 


/* 确保所有详情页都有正确的边距 */
.cc-detail-container.thought-detail,
.cc-detail-container.prayer-detail,
.cc-detail-container.qa-detail {
    padding: 0;
    margin: 0;
}




/* ▼▼▼ 在这里开始添加：微信浏览器专用CSS修复 ▼▼▼ */
/* 微信浏览器强制样式重置 */
.wechat-fix {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* 微信浏览器加载动画优化 */
.loading {
    position: relative;
}

.loading:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: wechat-spin 1s linear infinite;
    display: none; /* 默认隐藏，微信浏览器显示 */
}

/* 微信浏览器显示旋转动画 */
@media not all and (pointer: coarse) {
    .loading:before {
        display: block;
    }
}

@keyframes wechat-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 微信浏览器点击优化 */
.post-item, .publish-btn, .tab-btn, .icon-item {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    cursor: pointer;
}

/* 微信浏览器滚动优化 */
.community-container {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* 微信浏览器图片加载优化 */
.avatar {
    background-color: #f8f9fa;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
/* ▲▲▲ 在这里结束添加 ▲▲▲ */