/* ----- Dudley embedded chat polish ----- */

.chat-heading{
  display:flex;
  align-items:center;
  gap:10px;
}

.chat-heading-logo{
  width:60px;
  height:auto;
  flex-shrink:0;
}

/* No .container override here on purpose: the old chat prototype pinned this
   section's container to max-width:1100px, which is why the embedded chat
   was narrower than the Affordability accordion below it (that section's
   .container has no such override and renders wider). Letting this section
   use the same site-wide .container as everything else keeps them in sync. */

/* ----- Typing indicator (3 coloured dots) ----- */

.chat-typing{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height: 16px;
}

.chat-typing span{
  width:6px;
  height:6px;
  border-radius:50%;
  animation: chatTypingBounce 1s infinite ease-in-out;
}

/* Dudley colours (tweak hexes if you want them exact) */
.chat-typing span:nth-child(1){ background:#D60078; } /* pink */
.chat-typing span:nth-child(2){ background:#009CDD; } /* pale blue */
.chat-typing span:nth-child(3){ background:#004C97; } /* dark blue */

.chat-typing span:nth-child(2){ animation-delay: 0.15s; }
.chat-typing span:nth-child(3){ animation-delay: 0.30s; }

@keyframes chatTypingBounce{
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-4px); opacity: 0.9; }
}

/* Compact typing bubble */
.chat-msg[data-typing="1"]{
  padding: 10px 14px;
  min-height: auto;
  line-height: 1;
}