/* ==========================================================================
   Hero "Apex MD AI" panel — typing playback. Paired with /assets/js/aichat.js.
   The .ax-chat class is added by the script, never by the markup: with JS off
   the panel renders exactly as the handoff authored it, fully visible.
   ========================================================================== */

.ax-chat .ax-msg {
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transform-origin: left bottom;
}
.ax-chat .ax-msg.ax-in {
  opacity: 1;
  transform: none;
  transition: opacity .28s ease-out, transform .34s cubic-bezier(.2, .8, .3, 1);
}
/* the member's own reply comes from the other side */
.ax-chat .ax-msg.ax-in--out { transform-origin: right bottom; }
.ax-chat .ax-msg:not(.ax-in).ax-out,
.ax-chat .ax-msg:not(.ax-in)[style*="flex-end"] { transform: translateY(8px) scale(.985); }

/* three dots in a bubble sized like the incoming rows */
.ax-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  width: 46px;
  padding: 13px 14px;
  background: #26272b;
  border-radius: 12px;
}
.ax-typing[hidden] { display: none; }
.ax-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9a9aa0;
  animation: ax-bounce 1.15s infinite ease-in-out;
}
.ax-typing i:nth-child(2) { animation-delay: .16s; }
.ax-typing i:nth-child(3) { animation-delay: .32s; }

@keyframes ax-bounce {
  0%, 62%, 100% { opacity: .35; transform: translateY(0); }
  28%           { opacity: 1;   transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .ax-chat .ax-msg { opacity: 1; transform: none; }
  .ax-typing { display: none; }
  .ax-typing i { animation: none; }
}