body {
  font-family: 'Microsoft JhengHei', 'Helvetica', sans-serif;
  height: 100vh;
  /* 设置全局字体为黑体 */
}

.container-fluid {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 90vh;
  /* 使用视口高度 */
}

.top-layer {
  background: linear-gradient(60deg, #254e0c, #50c607);
  /* 设置渐变背景 */
  /* padding: 10px; */
  margin-bottom: 0;
  text-align: center;
  flex: 0 0 6%;
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.5);
  z-index: 5;
}



.middle-layer {
  display: flex;
  /* flex-direction: row; */
  /* flex: auto; */
  width: 100vw;
  height: 90vh;
}

.bottom-layer {
  background-color: #d0d0d0;
  padding: 0;
  text-align: center;
  flex: 0 0 4.5%;
  z-index: 2;
}


.left-side {
  background: linear-gradient(180deg, #264123, #043906);
  /* 设置渐变背景 */
  background-color: #dfeff8;
  padding: 5px;
  height: 90vh;
  width: 50px;
  /* position: absolute; */
  z-index: 2;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
}


#right-side {
  background-color: #777e71;
  margin-left: 2px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  height: 100%;
  width: 55%;
  transform: translateX(0%);
}


#right-side.shifted {
  width: 55%;

  transform: translateX(-31%);
  /* 初始状态，向左偏移100% */
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

#sidebar {
  margin-left: 0px;
  padding: 0;
  width: 18vw;
  flex-direction: column;
  display: flex;
  background-color: #ffffff;
  transition: transform 0.3s ease;
  /* z-index: 1; */
  box-shadow: #333639 0px 0px 10px;

  transform: translateX(0%);
  /* 初始状态，向左偏移100% */
}

#sidebar.hidden {

  transform: translateX(-100%);
}


.sidebar-title {
  margin-left: 20px;
  padding-bottom: 0;
  font-size: 14px;
  color: #f4fbf0;
  font-style: italic;
  font-weight: bolder;
  font-family: 'Helvetica', sans-serif;


}

.sidebar-header {
  height: 5%;
  /* width: 100%;; */
  background: linear-gradient(180deg, #36901d, #132909);
  margin-top: 0px;
  /* padding-left: 5px; */
  display: flex;
  /* justify-content: space-between; */
  background-color: #c0c0c0;
  align-items: center;

}

.btn {
  color: wheat;
  border: none;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  margin-left: 4px;
}

.btn-close-all {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  margin-right: 0px;
  padding: 0;
}

.btn-open-all {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  margin-left: 0;
  margin-right: 0px;
}



.btn {
  /* margin-left: 5px; */
  text-align: center;
}

.btn-group {
  float: right;
  /* 设置为右浮动 */
  margin-top: 1px;
}

.btn-close-all,
.btn-open-all {
  height: 10px;
  width: 100%;
  /* 设置按钮宽度为100% */
  margin-bottom: 2px;
}

.sidebar-body {
  height: 90vh;
  width: 98%;
  /* 限定侧边栏的高度 */
  padding: 10px;
  padding-left: 20px;
  /* 添加内边距 */
  overflow-y: auto;
  /* 当内容超出时，出现垂直滚动条 */
}

.tab-content {
  width: 100%;
  display: flex;
  background-color: white; 
  border-radius: 10px; 
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.327);

}



.nav-group {
  margin-top: 0;
  margin-bottom: 0;
  /* 每个组之间的间距 */
  border-bottom: #e8e3e3 solid 1px;
}

.nav-list {
  display: none;
  /* 默认隐藏子项 */
  /* padding-left: 20px; */
  /* 设置子项与标题的间距 */
}

.nav-group h6 {
  cursor: pointer;
  font-size: 14px;
  /* 鼠标悬停时显示为可点击 */
}

.nav-h6 {
  /* border-bottom: #e8e3e3 solid 1px; */
  height: 35px;
  margin-bottom: 0;
  font-size: 14px;
}

.nav-group ul {
  list-style-type: none;
  /* 去掉默认列表样式 */
  padding: 0;
  /* 去掉内边距 */
}

.nav-group li {
  margin: 5px 0;
  /* 每个链接的间距 */
}

.nav-group li a {
  text-decoration: none;
  /* 去掉链接下划线 */
  color: #333;
  /* 链接颜色 */
}

.nav-group li a:hover {
  text-decoration: underline;
  /* 鼠标悬停时添加下划线 */
}

.list-group {
  margin-top: 0px;

}

.function-controls {
  height: 20px;
  /* 功能按钮高度 */
}

.input-area {
  flex: 0 0 auto;
  /* 固定高度，自适应内容面积 */
  margin-top: 0;
  margin-left: 10px 0;
  /* 上下边距 */
}

.input-area textarea {
  width: 100%;
  /* 使用全宽 */
  height: calc(15 * 1.2em);
  resize: none;
  /* 禁止自定义调整大小 */
}

.flexible-bottom {
  flex: 1;
  /* 自适应内容区域 */
  margin-top: 5px;
  /* 上边距 */
  padding: 10px;
  background-color: #fffce8;
  /* 自适应区域的背景色 */
}

.hidden {
  display: none;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
  /* 颜色可以更改 */
  margin-left: 10px;
  /* 左侧添加一些间距 */
  float: right;
  /* 靠右对齐 */
}

h6 {
  cursor: pointer;
  /* 鼠标悬停时显示为手指形状 */
  transition: background-color 0.3s, color 0.3s;
  /* 背景色和文字颜色平滑过渡 */
  padding: 5px;
  /* 添加一些内边距 */
}

h6:hover {
  background-color: #f0f0f0;
  /* 悬停时改变背景色 */
  color: #007bff;
  /* 悬停时改变文字颜色 */
}

.img-fluid {
  padding: 3px;
  width: 30px;
  /* 自适应宽度 */
}


#guider-area {
  transform: translateY(100%);
  /* 初始状态在视口底部之外 */
  position: fixed;
  padding: 5px;
  bottom: -45px;
  left: 305px;
  margin-bottom: 45px;
  width: 82%;
  height: 80%;
  background-color: #f4f6ee;
  transition: transform 0.5s ease;
  /* 动画效果 */
  z-index: 10;
  /* 确保元素在其他元素之上 */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  border-radius: 10px;
}

#guider-area.visible {
  transform: translateY(-5%);
  /* 当需要显示时，回到原位置 */
}

.content-header {
  height: calc(100 * 1.5em);
  padding: 5px;
  box-sizing: border-box;
  /* 包含内边距在高度计算中 */
  overflow: auto;
  /* 超出部分隐藏 */
  text-align: start;
  word-wrap: break-word;
  white-space: normal;
}

.guide-desc,
.guide-header {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  width: 100%;
  /* 适应父容器宽度 */
  border: 1px solid #ccc;
  /* 可选样式 */
  padding: 10px;
  /* 可选样式 */
  margin-top: 10px;
  /* 可选样式 */
  background-color: #ffffff;
}

.result-area {
  background-color: white;
  height: 87vh;
  padding: 10px;
}

.result-area h1,
.guider-header h1 {
  color: #007bff;
  /* 标题颜色 */
  font-size: 1.4em;
  /* h1 的字体大小 */
}

.result-area h2,
.guider-header h2 {
  color: #007bff;
  /* 标题颜色 */
  font-size: 1.2em;
  /* h2 的字体大小 */
}

.result-area h3,
.guider-header h3 {
  color: #007bff;
  /* 标题颜色 */
  font-size: 1em;
  /* h3 的字体大小 */
}


.result-area p,
.guider-header p {
  /* 链接Markdown样式 */
  color: #333639;
  /* 链接颜色 */
  text-decoration: none;
  /* 去掉下划线 */
}

.result-area h1:hover {
  background-color: #f0f0f0;
}

.nav-link {
  margin-top: 4px;
  height: 35px;
  padding-top: 4px;
  color: #ffffff;
  /* 设置字体颜色为白色 */
}


.nav-link.active {
  color: #f8f6f2;
  /* 活动状态时的字体颜色（示例为黄色） */
}

.nav-link:disabled {
  color: #868282;
  /* 禁用状态时的字体颜色（示例为灰色） */
}

.nav-link:hover {
  color: #aef393;
}

.user-info {
  align-items: end;
  margin-top: 30px;
  margin-right: 10px;
  font-weight: bold;
  color: white;
}


#imageUpload {
  display: none;
  /* 隐藏文件输入框 */
}

.ql-image {
  border: 2px solid red;
  /* 给图片添加一个明显的边框用于调试 */
}




.resize-drag {
  width: 233px;
  height: 223px;
  transform: translate(0px, 0px);
}

.version-bar {
  background-color: white;
  padding-bottom: 4px;
  padding-left: 20px;
  text-align: start;
}

.tc-container {
  padding: 0;
  margin: 0;
  /* width: 50vw; */
}

.modify-header {
  background-color: #264123;
}

.modify-date {
  width: 20%;
}

.modify-revision {
  width: 10%;
}

.modify-remark {
  width: 60%;
}

.edit-button {
  width: 30%;
}

#input-remark {
  background-color: #466755;
}

.temp-tab-pane {
  height: 400px;
  overflow-y: auto;
}


.revision-list {
  height: 18px;
}


#right-offset-canvas {
  width: 25.8% !important;
  flex: 0 0 auto; /* 禁止缩小和藏蓬 */
  flex-direction: column;
  padding-left: 0  ;
  display: flex;
  margin-left: 0;
  flex-grow: 1; /* 允许扩展 */
  transition: transform 0.3s ease, width 0.1s ease; /* 增加宽度过渡 */
  justify-content: flex-start;
}

#right-offset-canvas.shifted {
  width: 43% !important;
  margin-left: 0;
  display: flex;
  justify-content: flex-start;
  transform: translateX(-40%);
}

.rigt-offset-header {
  height: 4%;
  width:100%;
  background: linear-gradient(180deg, #36901d, #132909);
  display: flex;
  padding: 0;
  background-color: #c0c0c0;
  color: white;
  text-align: start;
  justify-content: center;
  align-items: center;
  padding-top: 4px;
}

#rigt-offset-body{
  height: 60vh;
  overflow:auto;
}

#rigt-offset-body h1{
  color:#007bff;
  font-size: 1.25em;
}

#rigt-offset-body h2{
  color:#007bff;
  font-size: 1.2em;
}

#rigt-offset-body h3{
  color:#007bff;
  font-size: 1.15em;
}

#rigt-offset-body h4{
  color:#007bff;
  font-size: 1.0em;
}

#rigt-offset-body h5{
  color:#007bff;
  font-size: 0.9em;
}


#ai-textinput {
  margin-bottom: 0;
  width: 100%;
  display: flex;
  padding-left: 2px;
  border: 0;
  outline: none;
}

.ai-assitant-tools{
  border: #c0c4bff3 solid 0.25px;
  background-color: rgba(193, 199, 183, 0.825);
  display: flex;
  justify-content:center;
}

#aiMessage-loding {
  position:absolute;
  bottom: 10%;
  right: 12%; 
  transform: translate(-50%, -50%);
  justify-content: flex-end;
 
  display:flex;
  width: 20px;
  height: 20px;
  border: 5px solid #ccc;
  border-top: 5px solid #3498db; /* 可以设置顶部的颜色 */
  border-radius: 50%; /* 圆形 */
  animation: spin 1s linear infinite; /* 应用旋转动画 */
  display: none;
  z-index:10;
}

@keyframes spin {
  0% {
    transform: rotate(0deg); /* 起始位置 */
  }
  100% {
    transform: rotate(360deg); /* 结束位置 */
  }
}

.messageDiv{
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  padding: 8px;
  margin-bottom: 10px;
}