/* Match the homepage autoplay phone to the scenario conversation phone. */
#home-interactive-hero .phone {
  max-width: 450px;
  background: #b9cee1;
  border-color: #d5dfed;
  border-radius: 25px;
  box-shadow: 0 20px 55px #284f7c15;
}
#home-interactive-hero .phone-top {
  gap: 14px;
  padding: 18px 22px;
  background: #f7fafef2;
  border-bottom: 0;
}
#home-interactive-hero .hero-back,
#home-interactive-hero .hero-menu {
  flex: none;
  color: #203344;
  font-size: 19px;
  line-height: 1;
}
#home-interactive-hero .hero-back { width: 10px; text-align: center; }
#home-interactive-hero .hero-menu { margin-left: auto; font-size: 16px; }
#home-interactive-hero .hero-header-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
#home-interactive-hero .hero-profile-copy { flex: 1; min-width: 0; }
#home-interactive-hero .phone-top strong { font-size: 15px; }
#home-interactive-hero .phone-top small { font-size: 10px; margin-top: 2px; }
#home-interactive-hero .chat {
  height: 420px;
  min-height: 420px;
  padding: 23px 16px;
  gap: 19px;
  background: #b9cee1;
}
#home-interactive-hero .chat > .message { flex-shrink: 0; }
#home-interactive-hero .chat .message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 89%;
}
#home-interactive-hero .chat .message.you { align-self: flex-end; }
#home-interactive-hero .chat .message.ai { align-self: flex-start; }
#home-interactive-hero .chat .message > div { min-width: 0; }
#home-interactive-hero .chat .message p,
#home-interactive-hero .chat .hero-message-body > .bubble {
  margin: 0;
  padding: 12px 14px;
  color: #203344;
  font-size: 13px;
  line-height: 1.7;
  background: #fff;
  border-radius: 3px 15px 15px 15px;
  box-shadow: 0 1px 2px #2d465614;
}
#home-interactive-hero .chat .message.you p {
  background: #a5eb83;
  border-radius: 15px 3px 15px 15px;
}
#home-interactive-hero .chat .message .demo-avatar {
  width: 29px;
  height: 29px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
#home-interactive-hero .chat .message .voice-msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}
#home-interactive-hero .chat .message .voice-caption {
  display: block;
  margin-top: 5px;
  color: #687a8e;
  font-size: 11px;
  line-height: 1.45;
}
#home-interactive-hero .chat .hero-typing {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
#home-interactive-hero .chat .hero-typing-bubble {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  color: #687a8e;
  font-size: 11px;
  background: #fff;
  border-radius: 3px 15px 15px 15px;
}
#home-interactive-hero .chat .hero-typing.you .hero-typing-bubble {
  background: #a5eb83;
  border-radius: 15px 3px 15px 15px;
}
#home-interactive-hero .chat .hero-typing-bubble span { margin-right: 6px; }
#home-interactive-hero .chat .hero-typing-bubble i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #2b6fd8;
  animation: hero-typing-dot 1s ease-in-out infinite;
}
#home-interactive-hero .chat .hero-typing-bubble i:nth-of-type(2) { animation-delay: .15s; }
#home-interactive-hero .chat .hero-typing-bubble i:nth-of-type(3) { animation-delay: .3s; }
@media (max-width: 640px) {
  #home-interactive-hero .phone-top { padding: 16px 13px; gap: 11px; }
  #home-interactive-hero .chat { height: 360px; min-height: 360px; padding: 16px 13px; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #home-interactive-hero .chat .hero-typing-bubble i { animation: none; }
}