/* Import Google font - Poppins */
@import url('https://health.diandi001.com/static/css/googleapis-fonts-css2.css');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
:root {
  --text-color: #FFFFFF;
  --icon-color: #ACACBE;
  --icon-hover-bg: #5b5e71;
  --placeholder-color: #dcdcdc;
  --outgoing-chat-bg: #343541;
  --incoming-chat-bg: #444654;
  --outgoing-chat-border: #343541;
  --incoming-chat-border: #444654;
}
.light-mode {
  --text-color: #343541;
  --icon-color: #a9a9bc;
  --icon-hover-bg: #f1f1f3;
  --placeholder-color: #6c6c6c;
  --outgoing-chat-bg: #FFFFFF;
  --incoming-chat-bg: #F7F7F8;
  --outgoing-chat-border: #FFFFFF;
  --incoming-chat-border: #D9D9E3;
}
html, body {
  background: var(--outgoing-chat-bg);
  max-width: 100%;
  overflow-x: hidden;
}

/* Chats container styling */
.chat-container {
  overflow-y: auto;
  max-height: 100vh;
  padding-bottom: 100px;
  margin-bottom: 140px;
}
:where(.chat-container, textarea)::-webkit-scrollbar {
  width: 6px;
}
:where(.chat-container, textarea)::-webkit-scrollbar-track {
  background: var(--incoming-chat-bg);
  border-radius: 25px;
}
:where(.chat-container, textarea)::-webkit-scrollbar-thumb {
  background: var(--icon-color);
  border-radius: 25px;
}
.default-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 70vh;
  padding: 0 10px;
  text-align: center;
  color: var(--text-color);
}
.default-text h1 {
  font-size: 3.3rem;
}
.default-text p {
  margin-top: 10px;
  font-size: 1.1rem;
}
.chat-container .chat {
  padding: 25px 15px;
  display: flex;
  justify-content: center;
  color: var(--text-color);
}
.chat-container .chat.outgoing {
  background: var(--outgoing-chat-bg);
  /*border: 1px solid var(--outgoing-chat-border);*/
  max-width: 1200px;
  display: block;
  margin: auto;
}
.chat-container .chat.incoming {
  background: var(--incoming-chat-bg);
  /*border: 1px solid var(--incoming-chat-border);*/
  max-width: 1200px;
  display: block;
  margin: auto;
}
.chat .chat-content {
  display: flex;
  max-width: 1200px;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
}
span.material-symbols-rounded {
  user-select: none;
  cursor: pointer;
}
.chat .chat-content span {
  cursor: pointer;
  /* font-size: 1.3rem; */
  /* color: var(--icon-color); */
   /* visibility: hidden; */ /* 如果这里设置了hidden，需要移除或更改 */
}
.chat:hover .chat-content:not(:has(.typing-animation), :has(.error)) span {
  visibility: visible;
}
.chat .chat-details {
  display: flex;
  align-items: center;
}
.chat .chat-details img {
  width: 32px;
  height: 32px;
  align-self: flex-start;
  object-fit: cover;
  border-radius: 2px;
}
.chat .chat-details p {
  white-space: pre-wrap;
  font-size: 1.05rem;
  padding: 4px 20px 4px 20px;
  color: var(--text-color);
  word-break: break-word;
  margin-bottom: 0px;
}
.chat .chat-details p.error {
  color: #e55865;
}
.chat-details .text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.chat .chat-details .chat-keep-btn {
  padding: 8px 16px; /* 设置按钮内边距 */
  border: none; /* 移除边框 */
  border-radius: 4px; /* 设置边框圆角 */
  background-color: #007bff; /* 设置背景颜色 */
  color: white; /* 设置文字颜色 */
  cursor: pointer; /* 设置鼠标样式 */
  font-size: 0.95rem; /* 设置字体大小 */
  align-self: flex-start; /* 使按钮左对齐 */
  margin-left: 20px;
  margin-top: 10px;
}
.chat .chat-details .chat-keep-btn:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}

/* 打字机效果的关键帧动画 */
@keyframes typing {
  0% { width: 0; }
  30% { width: 90%; } /* 打字效果快速完成 */
  50% { width: 120%; } /* 从50%到90%的时间内文本保持可见，实现停留效果 */
  100% { width: 120%; }   /* 在100%时重置宽度，为下一次动画做准备 */
}

/* 光标闪烁效果的关键帧动画 */
@keyframes blink-caret {
  0%, 100% { border-color: transparent; }
  50% { border-color: var(--icon-color); }
}
/* 应用打字机效果的样式 */
.typing-animation .thinking-text {
  font-size: 1.1rem;
  color: var(--text-color);
  overflow: hidden; /* 隐藏未显示的文本 */
  white-space: nowrap; /* 保持文本在一行 */
  border-right: .1em solid var(--icon-color); /* 光标效果 */
  width: 0; /* 开始时文本宽度为0 */
  display: inline-block; /* 使用inline-block布局 */
  /* 打字动画，总持续时间为6s，其中打字占4s，暂停占2s */
  animation: typing 3.5s steps(22, end) infinite,
             blink-caret 1s step-end infinite; /* 光标闪烁动画 */
}

/* 原先的dot效果 @deprecated */
.chat .typing-animation {
  padding-left: 20px;
  display: inline-flex;
  align-items: center;  /* 垂直居中子元素 */
}
.typing-animation .typing-dot {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  margin: 0 3px;
  opacity: 0.7;
  background: var(--text-color);
  animation: animateDots 1.5s var(--delay) ease-in-out infinite;
}
.typing-animation .typing-dot:first-child {
  margin-left: 0;
}
@keyframes animateDots {
  0%,44% {
    transform: translateY(0px);
  }
  28% {
    opacity: 0.4;
    transform: translateY(-6px);
  }
  44% {
    opacity: 0.2;
  }
}

/* Typing container styling */
.typing-container {
  position: fixed; /* position: relative; */
  bottom: 0;
  width: 100%;
  display: flex;
  padding: 20px 10px;
  justify-content: center;
  background: var(--outgoing-chat-bg);
  border-top: 1px solid var(--incoming-chat-border);
}
.typing-container .typing-content {
  display: flex;
  max-width: 1200px;
  width: 100%;
  align-items: flex-end;
}
.typing-container .typing-textarea {
  width: 100%;
  display: flex;
  position: relative;
}
.typing-textarea textarea {
  resize: none;
  height: 55px;
  width: 100%;
  margin: 0;
  border: none;
  padding: 15px 45px 15px 20px;
  color: var(--text-color);
  font-size: 1rem;
  border-radius: 4px;
  max-height: 250px;
  overflow-y: auto;
  background: var(--incoming-chat-bg);
  outline: 1px solid var(--incoming-chat-border);
}
.typing-textarea textarea::placeholder {
  color: var(--placeholder-color);
}
.typing-textarea button {
  resize: none;
  height: 55px;
  width: 100%;
  margin: 0;
  border: none;
  padding: 15px 45px 15px 20px;
  color: #ffc107;
  font-size: 1rem;
  border-radius: 4px;
  max-height: 250px;
  overflow-y: auto;
  background: var(--incoming-chat-bg);
  outline: 1px solid var(--incoming-chat-border);
}
.typing-content span {
  width: 55px;
  height: 55px;
  display: flex;
  border-radius: 4px;
  font-size: 1.35rem;
  align-items: center;
  justify-content: center;
  color: var(--icon-color);
}
.typing-textarea span {
  position: absolute;
  right: 0;
  bottom: 0;
  visibility: hidden;
}
.typing-textarea textarea:valid ~ span {
  visibility: visible;
}
.typing-controls {
  display: flex;
}
.typing-controls span {
  margin-left: 7px;
  font-size: 1.4rem;
  background: var(--incoming-chat-bg);
  outline: 1px solid var(--incoming-chat-border);
}
.typing-controls span:hover {
  background: var(--icon-hover-bg);
}

/* Reponsive Media Query */
@media screen and (max-width: 600px) {
  .default-text h1 {
    font-size: 2.3rem;
  }
  :where(.default-text p, textarea, .chat p) {
    font-size: 0.95rem!important;
  }
  .chat-container .chat {
    padding: 20px 10px;
  }
  .chat-container .chat img {
    height: 32px;
    width: 32px;
  }
  .chat-container .chat p {
    padding: 0 20px;
  }
  .chat .chat-content:not(:has(.typing-animation), :has(.error)) span {
    visibility: visible;
  }
  .typing-container {
    padding: 15px 10px;
  }
  .typing-textarea textarea {
    height: 45px;
    padding: 10px 40px 10px 10px;
  }
  .typing-textarea button {
    height: 45px;
    padding: 10px 40px 10px 10px;
   }
  .typing-content span {
    height: 45px;
    width: 45px;
    margin-left: 5px;
  }
  span.material-symbols-rounded {
    font-size: 1.25rem!important;
  }
}

#audioModal .modal-title,
#audioModal #audioDescriptionTitle,
#audioModal #audioDescription {
    color: #5a6268; /* Bootstrap浅灰色 */
}

#audioModal audio {
    width: 100%;
    margin: 0 auto; /* 居中显示 */
    display: block;
    margin:10px 0px 20px 0px;
}

#audioModal #audioDescriptionTitle {
    margin-top: 25px; /* 在标题上方增加一些间距 */
}

/* 未访问的链接 */
a:link {
    color: #1E90FF;
}

/* 已访问的链接 */
a:visited {
    color: #663399;
}

/* 鼠标悬浮时的链接 */
a:hover {
    color: #FF4500;
}

/* 鼠标点击时的链接 */
a:active {
    color: #B22222;
}

.nav-link {
    color: inherit; /* 保持默认颜色，不使用链接颜色 */
}
.tab-pane {
    margin-top: 15px; /* 添加上边距 */
}

#audioTabContent span{
    display: block; /* 让span表现得像块级元素，占据独立的一行 */
    margin-bottom: 10px; /* 在每个span元素的底部添加10px的间隔 */
}

@media (min-width: 992px) { /* 这个媒体查询针对大屏幕设备，如桌面显示器 */
  #audioModal .modal-dialog {
    max-width: 1000px; /* 或者你可以使用其他具体的宽度值 */
  }
}

/* 设置页签内容的最大高度和滚动 */
.tab-content {
    max-height: 400px; /* 你可以根据需要调整这个值 */
    overflow-y: auto; /* 允许垂直滚动 */
}

/* 响应式设计：确保模态框在较小屏幕上也能完整显示 */
@media (max-height: 800px) {
    .modal-content {
      max-height: 90vh; /* 视口高度的90% */
      overflow-y: auto; /* 允许垂直滚动 */
    }
}