/* 全局重置，初始化样式，确保一致的浏览器显示 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 让宽高包含内边距和边框 */
  font-family: "Segoe UI", sans-serif;
}

/* 页面基础布局 */
html, body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 禁止整个页面的滚动 */
}

body {
  color: #333;
  background: #f5f7fa;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}

/* 固定渐变背景 */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  background: linear-gradient(to bottom, #f0f9ff, #d0e8ff);
}

/* 顶部导航栏 */
nav {
  background: #00bcd4;
  color: white;
  padding: 5px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 导航链接样式 */
nav a {
  margin-left: 20px;
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: opacity 0.3s;
}

/* 导航链接悬停效果 */
nav a:hover {
  opacity: 0.8;
}

/* 页脚 */
footer {
  flex-shrink: 0; /* 防止页脚被压缩 */
  text-align: center;
  padding: 10px;
  background: #eeeeee;
  font-size: 0.9em;
  color: #555;
}

/* 应用于nav-links导航栏的类 */
.nav-links {
  flex-wrap: wrap; /* 当子元素总宽度超过容器时，允许它们自动换行 */
}

/* 右侧登录部分 */
.nav-right {
  display: flex;             /* 使用 Flexbox 布局，让子元素可以横向排列 */
  align-items: center;       /* 垂直方向居中对齐子元素（通常是图标、文字、按钮等） */
  flex-direction: row;       /* 子元素沿主轴水平方向（从左到右）排列 */
  flex-wrap: nowrap;         /* 不允许子元素换行，超出部分可能会溢出 */
}

/* 表示应用到.nav-right 类下的所有 <a> 标签 */
.nav-right a {
  white-space: nowrap;  /* 防止“登录”换行 */
}

.logo {
  font-size: 22px;
  font-weight: bold;
  margin-right: 30px;
}

/* 主体内容占满除导航和页脚外的剩余高度 */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 允许内容区域压缩，避免溢出 */
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 网格布局：标题、搜索、发表按钮、内容 */
/* 网格容器填满 main，高度被限制 */
.grid-container {
  flex: 1;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  grid-template-rows: auto 1fr; /* 第一行（标题/搜索/发表按钮）固定，高度自动 */
  min-height: 0; /* 允许第二行压缩滚动 */
}

.title {
  grid-column: 1;
  grid-row: 1;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.search {
  grid-column: 2;
  grid-row: 1;
  padding: 5px;
  display: flex;
  align-items: center;
}

.search input {
  width: 100%;
  padding: 9px;
  font-size: 16px;
}

.post-button {
  grid-column: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;           /* 禁止文字换行，只允许横向排布 */
  padding: 10px;       /* 设置元素的内边距（上下左右均为 8px），为内容提供内侧间距 */
}

.post-button button {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  font-size: 16px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* 内容区（帖子列表） */
.content {
  grid-column: 1 / 4;
  grid-row: 2;
  overflow-y: auto;       /* 滚动条仅限内容区域 */
  padding: 10px 20px;
  background: #f9f9f9;
  min-height: 0;          /* 关键：允许压缩并触发滚动 */
  color: #333;
  box-sizing: border-box;
}

/* 发表框整体样式 */
.post-box {
  border: 1px solid #ccc;        /* 灰色边框 */
  padding: 10px;                 /* 内边距，增加内容与边框的间距 */
  background: #f9f9f9;           /* 浅灰色背景，突出发表框 */
  margin-bottom: 10px;           /* 与下方元素的间距 */
  border-radius: 5px;            /* 圆角边框 */
}

/* 发表框中的输入框和文本域样式 */
.post-box input,
.post-box textarea {
  width: 100%;                   /* 宽度占满整个发表框 */
  margin-bottom: 10px;           /* 每个输入框或文本域底部间距 */
  padding: 8px;                  /* 内边距，使输入文字不贴边 */
  font-size: 16px;               /* 字体大小，保证可读性 */
}

/* 发表框内按钮样式 */
.post-box button,
.post-box input[type="submit"] {
  background: #007bff;       /* 蓝色背景 */
  color: #fff;               /* 白色文字 */
  border: none;              /* 去掉默认边框 */
  padding: 8px 15px;         /* 内边距，增加可点击区域 */
  font-size: 16px;           /* 字体大小与输入框一致 */
  border-radius: 5px;        /* 圆角边框 */
  cursor: pointer;           /* 鼠标悬停变成手型 */
  transition: background 0.3s ease; /* 悬停时平滑过渡 */
}

/* 悬停时的按钮高亮效果 */
.post-box button:hover,
.post-box input[type="submit"]:hover {
  background: #0056b3;       /* 加深蓝色 */
}

/* 话题显示框 */
.v-box {
  border: 1px solid #ccc;
  padding: 10px;
  background: #f9f9f9;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 第一行：头像、用户名、点赞 */
.v-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 用户名 */
.v-username h4 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

/* 点赞按钮 */
.v-like button {
  padding: 5px 10px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.v-like button:hover {
  background: #007bff;
}

/* 帖子内容 */
.v-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  word-wrap: break-word;
  position: relative;
}

.post-content {
  max-height: 70px;  /* 限制最大高度 */
  overflow: hidden;    /* 超出部分隐藏 */
  transition: max-height 0.3s ease;
}

/* 可选：设置超出时的显示样式 */
.post-content.expanded {
  max-height: none;  /* 取消最大高度限制，显示完整内容 */
}
.v-full-view a {
  cursor: pointer;
  color: #00796b;
  font-weight: bold;
  text-decoration: none;
}

/* 隐藏“完全显示”按钮直到内容超过最大高度 */
.view-more {
  display: none;
  background-color: #00796b;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
}

/* 内容超过最大高度时，显示“完全显示”按钮 */
.v-content.expanded .post-content {
  max-height: none;   /* 内容展开后不再限制最大高度 */
}

.v-content.expanded .view-more {
  display: none;  /* 展开后隐藏“完全显示”按钮 */
}

.v-footer .view-more {
  margin-top: 10px;  /* 使按钮与底部回复区有适当间距 */
}

/* 帖子底部：日期、操作 */
.v-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #777;
}

.v-footer a {
  color: #007bff;
  text-decoration: none;
}

.v-footer a:hover {
  text-decoration: underline;
}

/* 回复框部分 */
.v-reply-form {
  display: flex;
  flex-direction: row;     /* 横向布局 */
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}

.v-reply-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  padding: 10px;
  font-size: 16px;        /* 设置字体大小为 16px 以避免放大 */
  line-height: 1.5;
  box-sizing: border-box;
}

.v-reply-form button {
  padding: 10px 15px;
  font-size: 16px;        /* 与 textarea 保持一致 */
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}

/* 回复框部分总框架 */
/* 主回复样式 */
.v-reply-item {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

/* 最后一个回复不加间隔 */
.v-reply-item:last-child {
  margin-bottom: 0;
}

/* 回复头部：头像+用户名 */
.v-reply-item .reply-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

/* 回复内容 */
.v-reply-item .reply-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 6px;
}

/* 回复底部：时间+回复按钮 */
.v-reply-item .reply-footer {
  font-size: 12px;   /* ✅ 调大字体 */
  color: #666;       /* ✅ 颜色也稍微加深，提升可读性 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reply-footer small {
  font-size: 12px;
  color: #888; /* 可选，让颜色稍微深一点 */
}






/* 嵌套回复整体区域 */
.nested-replies {
  margin-left: 40px;            /* 向右缩进以区分层级 */
  margin-top: 10px;
  border-left: 2px solid #e0e0e0; /* 左侧引用线，区分层次 */
  padding-left: 12px;
}

/* 嵌套回复的单项 */
.nested-replies .v-reply-item {
  background: #fefefe;
  border: 1px solid #eee;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 5px;
}

/* 嵌套回复最后一个去掉底部间隔 */
.nested-replies .v-reply-item:last-child {
  margin-bottom: 0;
}

/* 嵌套回复表单（输入框） */
.nested-reply-form {
  margin-left: 40px;             /* 与嵌套回复保持对齐 */
  margin-top: 8px;
}
.nested-reply-form textarea {
  width: 100%;
  height: 60px;
  resize: none;
  padding: 6px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 6px;
}
.nested-reply-form button {
  background: #66bb6a;
  color: #fff;
  border: none;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 4px;
  font-weight: bold;       /* 加粗，保持一致 */
  cursor: pointer;
}
.nested-reply-form button:hover {
  background: #43a047;
}



/* 回复框部分总框架 */
/* 回复框部分 */






/* 通用头像容器 */
/* 基础头像容器 */
.v-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
  font-weight: bold;
  color: #fff;
  background: #ccc; /* 默认灰色背景 */
}

.v-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 不同场景尺寸 */
.v-avatar--post { width: 40px; height: 40px; font-size: 18px; }   /* 帖子作者头像 */

/* 一级回复头像 */
.v-avatar--reply {
  width: 28px;
  height: 28px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 二级回复头像 */
.v-avatar--nested {
  width: 22px;
  height: 22px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 首字母头像 */
.avatar-initial {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #00796b; /* 和登录一致的主题色 */
}






/* 1级回复：头像与用户名之间增加间距 */
.reply-header {
  display: flex;
  align-items: center;  /* 垂直居中对齐 */
  gap: 10px;            /* 增加头像和用户名之间的间距 */
  margin-bottom: 5px;
}

/* 2级回复：头像和用户名确保在一行显示 */
.nested-reply-header {
  display: flex;        /* 使用 flex 布局 */
  align-items: center;  /* 垂直居中 */
  gap: 10px;            /* 头像和用户名之间的间距 */
}


/* 保证头像和用户名对齐 */
.reply-username, .nested-reply-username {
  font-weight: bold;
  font-size: 14px;
  color: #333;
}






.nested-reply-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 4px; /* 内容和日期间距 */
}

.nested-reply-date {
  font-size: 12px;
  color: #888;
  display: block; /* 强制独占一行 */
}



/* 一级回复的回复链接（与帖子的回复部分一致） */
.reply-link {
  color: #66bb6a;         
  text-decoration: none;  
  font-size: 12px;
  margin-left: 8px;
  cursor: pointer;
  font-weight: bold;       /* 加粗 */
  transition: color 0.3s ease; /* 平滑过渡 */
}

.reply-link:hover {
  color: #43a047; /* 悬停时颜色加深 */
}


/* 帖子底部的回复按钮 */
.v-reply a {
  color: #007bff;            /* 颜色与之前保持一致 */
  text-decoration: none;     /* 去掉下划线 */
  font-size: 12px;
  font-weight: 500;
  margin-left: 10px;         /* 和左侧保持一定间距 */
  transition: opacity 0.3s ease; /* 悬停时透明度渐变 */
}

/* 悬停时效果 */
.v-reply a:hover {
  opacity: 0.8;             /* 悬停时稍微变淡 */
  text-decoration: none;    /* 确保悬停时也不出现下划线 */
}




/* 帖子边框 - 蓝色 */
.v-box {
  border: 2px solid #42a5f5; /* 鲜艳的蓝色，主体层 */
}

/* 一级回复边框 - 绿色 */
.v-reply-item {
  border: 2px solid #66bb6a; /* 清新的绿色 */
}

/* 二级回复边框 - 橙色 */
.nested-replies .v-reply-item {
  border: 2px solid #ffa726; /* 明亮的橙色 */
}

/* 二级回复左侧引用线 - 浅橙 */
.nested-replies {
  border-left: 3px solid #ffcc80; /* 左侧层级引用线，浅橙色 */
}