/* pages/chat/chat.wxss — AI 对话页样式 */

page {
  background-color: var(--color-gray-1, #f3f3f3);
}

/* ========== 错误态 ========== */
.page-error {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--color-gray-1, #f3f3f3);
}
.error-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
}
.error-text {
  font-size: 28rpx;
  color: var(--color-gray-8, #777777);
}
.retry-btn {
  padding: 16rpx 48rpx;
  background: var(--color-primary, #0052d9);
  border-radius: 22rpx;
}
.retry-btn--hover { opacity: 0.8; }
.retry-btn-text {
  font-size: 28rpx;
  color: #ffffff;
}

/* ========== 页面容器 ========== */
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--color-gray-1, #f3f3f3);
  position: relative;
}

/* ========== 消息列表 ========== */
.message-list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 112rpx;
  padding: 24rpx 28rpx;
  box-sizing: border-box;
}

.scroll-bottom-spacer {
  height: 160rpx;
}

/* ========== 引用内容卡片 ========== */
.reference-card {
  background: #ecf2fe;
  border-radius: 20rpx;
  border-left: 6rpx solid #0052d9;
  padding: 22rpx 26rpx;
  margin-bottom: 28rpx;
}
.reference-label-row {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 10rpx;
}
.reference-quote-icon {
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reference-tag {
  font-size: 20rpx;
  line-height: 29rpx;
  font-weight: 600;
  color: #0052d9;
  background: rgba(0, 82, 217, 0.10);
  padding: 2rpx 12rpx;
  border-radius: 8rpx;
}
.reference-source {
  font-size: 20rpx;
  line-height: 29rpx;
  color: #5e5e5e;
}
.reference-summary {
  font-size: 24rpx;
  line-height: 36rpx;
  color: #393939;
  font-weight: 500;
}

/* ========== 空对话提示 ========== */
.empty-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 160rpx;
  gap: 18rpx;
}
.empty-ai-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
  box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.30);
}
.empty-ai-img {
  width: 72rpx;
  height: 72rpx;
}
.empty-text {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--color-gray-13, #242424);
}
.empty-sub {
  font-size: 26rpx;
  color: var(--color-gray-6, #a6a6a6);
}

/* ========== IM 时间分割线 ========== */
.time-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20rpx 0 8rpx;
  padding: 0 28rpx;
}

.time-divider-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6rpx 20rpx;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 20rpx;
  margin: 12rpx;
}

.time-divider-text {
  font-size: 20rpx;
  color: var(--color-gray-7, #8b8b8b);
  line-height: 28rpx;
  font-variant-numeric: tabular-nums;
}

/* ========== IM 消息行 ========== */
.message-row {
  display: flex;
  margin-bottom: 28rpx;
}
.message-user {
  justify-content: flex-end;
}
.message-assistant {
  justify-content: flex-start;
  gap: 16rpx;
}

/* ========== AI 头像 ========== */
.ai-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6rpx 16rpx rgba(102, 126, 234, 0.25);
  overflow: hidden;
}
.ai-avatar-img {
  width: 46rpx;
  height: 46rpx;
}

/* ========== 气泡 ========== */
.bubble-wrapper {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.bubble {
  padding: 20rpx 28rpx;
  word-break: break-all;
}
.bubble-text {
  font-size: 28rpx;
  line-height: 1.65;
}
.bubble-user {
  max-width: 80%;
  background-color: var(--color-primary, #0052d9);
  border-radius: 32rpx 8rpx 32rpx 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 82, 217, 0.22);
}
.bubble-user .bubble-text { color: #ffffff; }
.bubble-assistant {
  background-color: #ffffff;
  border-radius: 8rpx 32rpx 32rpx 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}
.bubble-assistant .bubble-text { color: var(--color-gray-13, #242424); }

/* ========== AI 内联引用卡片 ========== */
.inline-ref-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx 24rpx;
  border-left: 6rpx solid var(--color-primary, #0052d9);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  max-width: 80%;
}

/* 用户侧引用卡片：右对齐，挂在用户气泡下方 */
.user-bubble-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12rpx;
  max-width: 80%;
}

.inline-ref-card--user {
  border-left: none;
  border-right: 6rpx solid var(--color-primary, #0052d9);
  background-color: #ecf2fe;
  max-width: 100%;
}
.inline-ref-header {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 8rpx;
}
.inline-ref-type {
  font-size: 22rpx;
  color: var(--color-primary, #0052d9);
  font-weight: 600;
}
.inline-ref-title {
  font-size: 24rpx;
  color: var(--color-gray-13, #242424);
  font-weight: 500;
}
.inline-ref-summary {
  font-size: 22rpx;
  color: var(--color-gray-8, #777777);
  margin-bottom: 12rpx;
  display: block;
  line-height: 1.5;
}
.inline-ref-data {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx 24rpx;
}
.ref-data-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.ref-data-key {
  font-size: 20rpx;
  color: var(--color-gray-7, #8b8b8b);
}
.ref-data-value {
  font-size: 20rpx;
  color: var(--color-gray-13, #242424);
  font-weight: 500;
}

/* ========== 打字指示器 ========== */
.typing-bubble { padding: 20rpx 32rpx; }
.typing-dots {
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: var(--color-gray-6, #a6a6a6);
  animation: typingBounce 1.4s infinite ease-in-out;
}
.dot-1 { animation-delay: 0s; }
.dot-2 { animation-delay: 0.2s; }
.dot-3 { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ========== 底部输入区域 ========== */
.input-bar {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 16rpx 24rpx 32rpx;
  background-color: #ffffff;
  border-top: 2rpx solid var(--color-gray-2, #eeeeee);
  box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.04);
  z-index: 100;
  transition: bottom 0.25s ease;
}
.input-wrapper {
  flex: 1;
  background-color: var(--color-gray-1, #f3f3f3);
  border-radius: 48rpx;
  padding: 18rpx 28rpx;
  min-height: 72rpx;
  display: flex;
  align-items: center;
}
.chat-input {
  width: 100%;
  font-size: 28rpx;
  color: var(--color-gray-13, #242424);
  line-height: 1.4;
  background: transparent;
}
.input-placeholder {
  color: var(--color-gray-6, #a6a6a6);
  font-size: 28rpx;
}
.send-btn {
  width: 88rpx;
  height: 72rpx;
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.send-btn-active {
  background: var(--color-primary, #0052d9);
  box-shadow: 0 4rpx 16rpx rgba(0, 82, 217, 0.28);
}
.send-btn-disabled {
  background-color: var(--color-gray-3, #e0e0e0);
}
.send-btn--hover {
  opacity: 0.75;
  transform: scale(0.95);
}
.send-icon {
  width: 44rpx;
  height: 44rpx;
}