/* Conversational diagnostic experience. */
.conversation-welcome {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  max-width: 780px;
  margin: 0 auto 22px;
  padding: 17px 19px;
  border: 1px solid #e2ddd3;
  border-radius: 20px 20px 20px 7px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(30, 25, 18, .05);
}

.assistant-avatar {
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #ffc400;
  color: #171a1f;
  font: 900 italic 18px Lato, sans-serif;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .1);
}

.conversation-welcome span { display: block; color: #8a7000; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.conversation-welcome strong { display: block; margin-top: 4px; font: 900 17px Lato, sans-serif; }
.conversation-welcome p { margin: 5px 0 0; color: #6b6d70; font-size: 13px; line-height: 1.5; }
.thinking-message { padding: 15px 18px; }
.assistant-line { display: flex; align-items: center; gap: 12px; }
.assistant-line > div > strong { display: block; font-size: 12px; }
.typing-dots { display: flex; gap: 4px; margin-top: 7px; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c59a00; animation: conversationTyping 1.15s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .14s; }
.typing-dots i:nth-child(3) { animation-delay: .28s; }

.conversation-question-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.conversation-question-head h3 { margin-bottom: 0; }
.question-progress { padding: 5px 8px; border-radius: 99px; background: #f2efe8; color: #6f6c66; font-size: 9px; font-weight: 900; }
.diagnostic-question { animation: conversationQuestionIn .28s ease both; }
.diagnostic-question[hidden], .question-complete[hidden] { display: none; }
.question-complete { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 12px; background: #eaf7f0; color: #225c42; }
.question-complete > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2c8a61; color: #fff; font-weight: 900; }
.question-complete strong, .question-complete small { display: block; }
.question-complete strong { font-size: 12px; }
.question-complete small { margin-top: 3px; color: #537261; font-size: 10px; }
.conversation-next { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 16px 0 0; padding: 12px 14px; border-radius: 13px; background: #f5f3ee; }
.conversation-next strong { font-size: 12px; }
.conversation-next span { color: #6b6d70; font-size: 10px; text-align: right; }
.conversation-next.needs-detail { border-left: 4px solid #ffc400; background: #fff8dd; }

@keyframes conversationTyping {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

@keyframes conversationQuestionIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .conversation-welcome { padding: 15px; }
  .conversation-welcome p { font-size: 12px; }
  .conversation-question-head, .conversation-next { align-items: flex-start; flex-direction: column; }
  .conversation-next span { text-align: left; }
  .question-progress { margin-left: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-dots i, .diagnostic-question { animation: none; }
}