/* ========== 基础与防横向滚动 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
.top-banner { width: 100%; display: block; }

/* ========== 打开页的柔和入场（海报 & 问答容器） ========== */
.pre-reveal {
  opacity: 0;
  transform: translateY(16px);
}
.page-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease; /* 柔和，不突兀 */
}

/* ========== 聊天区 ========== */
.chat-wrapper {
  padding: 1.143rem 0.714rem 60px 0.714rem;
  overflow-x: hidden; /* 双保险 */
}
.chat-message { display: flex; margin: 0.571rem 0; }

/* 机器人 / 用户消息容器 + 动画时长 0.8s */
:root { --chat-anim-duration: .8s; }

.chat-message.robot {
  justify-content: flex-start;
  max-width: 80%;
  animation: robot-message-show var(--chat-anim-duration) ease both;
}
.chat-message.user {
  justify-content: flex-end;
  animation: user-message-show var(--chat-anim-duration) ease both;
}

/* 机器人头像与标签 */
.chat-message.robot img.avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.robot .robot-message-box { margin-left: .5rem; }
.chat-robot-name {
  margin-left: .1rem;
  font-size: .85rem;
  color: #666;
  margin-bottom: .25rem;
}

/* 气泡 */
.chat-message-content {
  padding: 8px 8px;
  border-radius: 0.857rem;
  line-height: 1.45;
  word-break: break-word;
  max-width: calc(100vw - 100px); /* 预留头像/边距空间 */
}
.robot .chat-message-content { background: #f5f5f5; color: #333; }
.user .chat-message-content  { background: #d94141; color: #fff; margin-right: .35rem; }

/* 选项按钮（嵌在机器人气泡里） */
.chat-option-group {
  display: flex;
  flex-wrap: wrap;
  gap: .571rem;
  margin-top: .6rem;
}
.chat-option-btn {
  padding: .5rem .9rem;
  background: #d94141;
  color: #fff;
  border: none;
  border-radius: .5rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  font-weight: 600;
}
.chat-option-btn:active { opacity: .92; }

/* 消息入场动画（px，避免首帧溢出触发横向滚动） */
@keyframes robot-message-show {
  0%   { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes user-message-show {
  0%   { opacity: 0; transform: translateX(12px); }
  100% { opacity: 1; transform: translateX(0); }
}
.chat-message { will-change: transform; }