/*
 * 开发者：姚佳良/YAO JIALIANG/STEVE YAO
 * 源代码及网站内所有功能和商标版权归开发者个人所有。
 */

/* 优化的历史记录加载动画和样式 */

/* 加载指示器动画 */
@keyframes pulse {
  0% {
    background-color: rgba(245, 36, 125, 0.1);
  }
  50% {
    background-color: rgba(245, 36, 125, 0.2);
  }
  100% {
    background-color: rgba(245, 36, 125, 0.1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* 历史记录加载指示器 */
.history-loading-indicator {
  padding: 8px 16px;
  text-align: center;
  color: #666;
  font-size: 12px;
  background: rgba(245, 36, 125, 0.1);
  border: 1px solid rgba(245, 36, 125, 0.2);
  border-radius: 8px;
  margin: 8px;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s ease;
  animation: pulse 1.5s infinite;
}

.history-loading-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 加载失败指示器 */
.history-error-indicator {
  padding: 8px 16px;
  text-align: center;
  color: #ff6b6b;
  font-size: 12px;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.2);
  border-radius: 8px;
  margin: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-error-indicator:hover {
  background: rgba(255, 107, 107, 0.15);
  border-color: rgba(255, 107, 107, 0.3);
}

/* 没有更多历史记录指示器 */
.history-end-indicator {
  padding: 8px 16px;
  text-align: center;
  color: #999;
  font-size: 12px;
  background: rgba(153, 153, 153, 0.1);
  border: 1px solid rgba(153, 153, 153, 0.2);
  border-radius: 8px;
  margin: 8px;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s ease;
}

.history-end-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 聊天容器优化 */
.chat-container-optimized {
  scroll-behavior: auto; /* 禁用自动平滑滚动，我们手动控制 */
}

/* 消息进入动画优化 */
.message-enter {
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 流畅的按钮悬停效果 */
.load-more-button {
  transition: all 0.2s ease;
}

.load-more-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(245, 36, 125, 0.3);
}

.load-more-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(245, 36, 125, 0.2);
}

/* 优化的加载状态 */
.loading-state {
  pointer-events: none;
  opacity: 0.6;
}