/* FAQ Speech Bubbles Animation Styles */

/* CTA区域容器 */
.cta-with-bubbles {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 2rem 0.5rem 2rem;
}

/* CTA按钮容器 */
.cta-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 0 0 auto;
  width: 600px;
}

/* 确保容器内的所有按钮宽度一致 */
.cta-buttons-container .assessment-cta {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* 对话云朵基础样式 */
.speech-bubble {
  flex: 0 0 300px;
  color: white;
  padding: 1.5rem;
  border-radius: 20px;
  position: relative;
  opacity: 0;
  transition: all 0.5s ease;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.speech-bubble.active {
  opacity: 1;
}

/* 左侧对话云朵 - 蓝白渐变，与第一个按钮对齐 */
.speech-bubble-left {
  background: linear-gradient(135deg, #60a5fa 0%, #ffffff 100%);
  box-shadow: 0 10px 30px rgba(96, 165, 250, 0.3);
  align-self: flex-start;
  margin-top: 0;
  transform: translateX(-30px);
}

.speech-bubble-left.active {
  transform: translateX(0);
}

.speech-bubble-left:hover {
  box-shadow: 0 15px 40px rgba(96, 165, 250, 0.4);
  transform: translateX(-5px) scale(1.02);
}

/* 右侧对话云朵 - 深蓝到浅蓝渐变，与中间按钮对齐 */
.speech-bubble-right {
  background: linear-gradient(135deg, #3b82f6 0%, #e0f2fe 100%);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
  align-self: flex-start;
  margin-top: 6.5rem;
  transform: translateX(30px);
}

.speech-bubble-right.active {
  transform: translateX(0);
}

.speech-bubble-right:hover {
  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
  transform: translateX(5px) scale(1.02);
}

/* 左侧云朵箭头 - 指向左边界 */
.speech-bubble-left::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-right: 15px solid #e0f2fe;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* 右侧云朵箭头 - 指向右边界 */
.speech-bubble-right::before {
  content: '';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid #e0f2fe;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* 云朵内容 */
.bubble-question {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #1e40af;
  line-height: 1.4;
}

.bubble-answer {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #1e3a8a;
  margin: 0;
}

/* 响应式设计 - 平板 */
@media (max-width: 1200px) {
  .cta-buttons-container {
    width: 500px;
  }
  
  .speech-bubble {
    flex: 0 0 250px;
    padding: 1.25rem;
  }
  
  .bubble-question {
    font-size: 0.9rem;
  }
  
  .bubble-answer {
    font-size: 0.8rem;
  }
}

/* 响应式设计 - 移动端 */
@media (max-width: 1024px) {
  .cta-with-bubbles {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  
  .cta-buttons-container {
    width: 100%;
    max-width: 600px;
  }
  
  .speech-bubble {
    flex: 1 1 auto;
    max-width: 500px;
    width: 100%;
  }
  
  /* 移动端重置对齐方式 */
  .speech-bubble-left,
  .speech-bubble-right {
    align-self: auto;
    margin-top: 0;
  }
  
  /* 移动端隐藏箭头 */
  .speech-bubble-left::before,
  .speech-bubble-right::before {
    display: none;
  }
  
  /* 移动端调整hover效果 */
  .speech-bubble:hover {
    transform: translateX(0) scale(1);
  }
  
  .speech-bubble-left:hover,
  .speech-bubble-right:hover {
    transform: translateX(0) scale(1);
  }
}

/* 小屏幕优化 */
@media (max-width: 768px) {
  /* 评估开始屏幕在移动端调整 - 保持开始屏幕内容可见 */
  #assessmentStartScreen {
    margin-top: 2rem;
  }
  
  /* 气泡容器布局优化 - 在移动端将气泡移到底部（搜索框下方） */
  /* 注意：通过JavaScript将整个.cta-with-bubbles移动到搜索框下方 */
  .cta-with-bubbles {
    padding: 1rem 1rem 0.5rem 1rem;
    flex-direction: column;
    gap: 1rem;
  }
  
  /* 在移动端，只显示气泡，不显示开始屏幕内容（因为它们会分离） */
  /* 开始屏幕内容应该在原位置显示，气泡会被JavaScript移动到搜索框下方 */
  
  .cta-buttons-container {
    width: 100%;
  }
  
  /* 气泡样式优化 */
  .speech-bubble {
    padding: 1rem;
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    margin: 0;
  }
  
  /* 重置气泡的对齐和变换 */
  .speech-bubble-left,
  .speech-bubble-right {
    align-self: stretch;
    margin-top: 0;
    transform: none;
  }
  
  .speech-bubble-left.active,
  .speech-bubble-right.active {
    transform: none;
  }
  
  /* 问题标题：完整显示 */
  .bubble-question {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    /* 确保问题完整显示，不截断 */
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* 答案内容：限制为2行，超出部分用省略号 */
  .bubble-answer {
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 0;
    /* 限制为2行显示，超出部分用省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em; /* 2行 × 1.5行高 */
  }
}