/* Comprehensive Chat Box Styling */

/* Chat Box Container */
.chat-box {
  position: fixed;
  bottom: 20px;
  right:7%;
  width: 400px;
  height: 400px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  flex-direction: column;
  z-index: 1000;
  border: 1px solid rgba(58, 123, 236, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* 重要：移除display:none，使用这些属性控制可见性 */
  /* transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); */
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  display: flex;
}

/* 显示状态的聊天框 */
.chat-box.visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all; /* 可以接受交互 */

}

.chat-box.visible #closeChat {
  transform: scale(1);
  opacity: 1;
  transition-delay: 0.2s; /* 延迟显示关闭按钮 */
}

/* 消息气泡动画 */
@keyframes messagePopIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  50% {
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes messageHover {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

.chat-body p {
  animation: messagePopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 0.3s ease;
}

.chat-body p:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 用户消息特殊动画 */
.chat-body p.user-message {
  animation: messagePopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat-body p.user-message:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(58, 123, 236, 0.15);
}

/* 消息时间戳动画 */
.chat-body .timestamp {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.chat-body p:hover .timestamp {
  opacity: 1;
}

/* Chat Box Close Button Styles */

#closeChat {
  position: absolute;
  top: 12px;
  right: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a7bec, #2c62c9);
  border: 2px solid white;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
  z-index: 1001;
  font-size: 0;
  padding: 0;
  overflow: hidden;
  transform: scale(0);
  opacity: 0;
}

#closeChat:hover {
  background: linear-gradient(135deg, #5591f5, #3a7bec); /* Use gradient on hover too */
  transform: scale(1.05);
}

#closeChat:active {
  transform: scale(0.95);
  background: linear-gradient(135deg, #2c62c9, #3a7bec);
}

/* Cross icon */
#closeChat::before,
#closeChat::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  background-color: white;
}

#closeChat::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#closeChat::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
















/* Chat Header */
.chat-header {
  background: linear-gradient(135deg, #3a7bec, #5591f5);
  color: white;
  padding: 15px 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  position: relative;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: move;
}

.chat-header span {
  font-size: 16px;
  margin-left: 5px;
}

.chat-header::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #4CD964;
  border-radius: 50%;
  margin-right: 8px;
}

/* Chat Body */
.chat-body {
  padding: 15px;
  height: 280px;
  min-height: 280px;
  overflow-y: auto;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}

/* Message styling with avatars */
.chat-body p {
  position: relative;
  background-color: white;
  padding: 12px 16px;
  border-radius: 8px;
  max-width: 60%;
  margin-bottom: 22px;
  margin-left: 35px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  line-height: 1.4;
  color: #333;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-top-left-radius: 4px;
  animation: fadeIn 0.3s ease;
  word-break: break-word;
}

/* Bot/System avatar */
.chat-body p::before {
  content: '助';
  position: absolute;
  left: -35px;
  top: 0;
  width: 28px;
  height: 28px;
  background-image: linear-gradient(135deg, #4787FF, #3a7bec);
  color: white;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* System message timestamp */
.chat-body p::after {
  content: attr(data-time);
  position: absolute;
  bottom: -18px;
  font-size: 10px;
  color: #999;
  left: 0;
}

/* User messages */
.chat-body p.user-message {
  margin-left: auto;
  margin-right: 35px;
  align-self: flex-end;
  background: linear-gradient(135deg, #E7F1FF, #F0F6FF);
  border: 1px solid rgba(58, 123, 236, 0.1);
  border-top-left-radius: 18px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
  position: relative;
  margin-bottom: 22px; /* Space for timestamp below */
}

/* User avatar - fixed to remove blue circle */
.chat-body p.user-message::after {
  content: '您';
  position: absolute !important;
  right: -35px !important; /* 强制应用右侧定位 */
  left: auto !important; /* 确保不使用左侧定位 */
  top: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #6C757D, #495057); /* Removed background-image, just using gradient */
  color: white;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Fix timestamp for user messages - use a class selector for the span */
.chat-body .timestamp {
  position: absolute;
  bottom: -18px;
  font-size: 10px;
  color: #999;
  display: block;
}

/* Position the timestamp correctly based on message type */
.chat-body p:not(.user-message) .timestamp {
  left: 0;
}

.chat-body p.user-message .timestamp {
  right: 0;
}

/* User message timestamp */
.chat-body p.user-message::before {
  content: attr(data-time);
  position: absolute;
  bottom: -18px;
  font-size: 10px;
  color: #999;
  right: 0;
  left: auto;
  background: none; /* Remove any background */
  border: none; /* Remove any border */
  box-shadow: none; /* Remove any shadow */
  width: auto; /* Auto width */
  height: auto; /* Auto height */
  display: block;
}

/* Chat Footer */
.chat-footer {
  display: flex;
  height: 65px;
  min-height: 65px;
  padding: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.8);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius:5px;
}

.chat-footer input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(58, 123, 236, 0.2);
  border-radius: 20px;
  outline: none;
  font-size: 14px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
}

.chat-footer input:focus {
  border-color: #3a7bec;
  box-shadow: 0 0 0 3px rgba(58, 123, 236, 0.1);
  background: white;
}

.send-button {
  background: linear-gradient(135deg, #3a7bec, #5591f5);
  color: white;
  border: none;
  min-width: 60px;
  height: 36px;
  border-radius: 8px;
  margin-left: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  transition: all 0.3s ease;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(58, 123, 236, 0.2);
}

.send-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(58, 123, 236, 0.3);
}

.send-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(58, 123, 236, 0.2);
}

/* Scrollbar styling */
.chat-body::-webkit-scrollbar {
  width: 4px;
}

.chat-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.chat-body::-webkit-scrollbar-thumb {
  background: #969696;
  border-radius: 10px;
}

.chat-body::-webkit-scrollbar-thumb:hover {
  background: #7a7a7a;
}

/* Add space at the bottom for scrolling */
.chat-body::after {
  content: '';
  height: 15px;
}

/* Make sure new messages appear with animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}