.ruelle-chat {
  margin: 0; padding: clamp(5rem, 10vw, 9rem) max(1.25rem, 5vw);
  background: #f6f3ec; color: #5e4040; font-family: Inter, Arial, sans-serif;
}
.ruelle-chat .ruelle-chat__inner { max-width: 650px; margin: 0 auto; }
.ruelle-chat .ruelle-chat__conversation { display: flex; flex-direction: column; gap: 2rem; }
.ruelle-chat .ruelle-chat__message { width: fit-content; max-width: 85%; }
.ruelle-chat .ruelle-chat__sender { margin: 0 0 .625rem 1.25rem; font-size: .9375rem; font-weight: 500; line-height: 1.5; }
.ruelle-chat .ruelle-chat__bubble {
  margin: 0; padding: 1.25rem 1.6rem; background: #e9e4da;
  border-radius: 1.5rem 1.5rem 1.5rem .35rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.6;
}
.ruelle-chat .ruelle-chat__answer { display: grid; justify-items: end; }
.ruelle-chat .ruelle-chat__reply { grid-area: 1 / 1; }
.ruelle-chat .ruelle-chat__reply .ruelle-chat__sender { text-align: right; margin: 0 1.25rem .625rem 0; }
.ruelle-chat .ruelle-chat__reply .ruelle-chat__bubble { background: #edb1c9; border-radius: 1.5rem 1.5rem .35rem 1.5rem; }
.ruelle-chat .ruelle-chat__typing {
  display: none; grid-area: 1 / 1; align-self: end; align-items: center; gap: .375rem;
  padding: 1.25rem 1.5rem; border-radius: 1.5rem 1.5rem .35rem 1.5rem; background: #edb1c9;
}
.ruelle-chat .ruelle-chat__typing span { width: .375rem; height: .375rem; border-radius: 50%; background: #5e4040; }
.ruelle-chat .ruelle-chat__action { margin-top: clamp(2.75rem, 5vw, 4rem); text-align: center; }
.ruelle-chat .ruelle-chat__cta {
  display: inline-flex; align-items: center; gap: 1rem; max-width: 100%;
  min-height: 48px; padding: .7rem 0; border-bottom: 2px solid #da257a;
  color: #5e4040; text-decoration: none; font-size: 1rem; font-weight: 600; line-height: 1.5;
}
.ruelle-chat .ruelle-chat__cta svg { flex: 0 0 24px; }
.ruelle-chat .ruelle-chat__cta:hover { border-color: #5e4040; }
.ruelle-chat .ruelle-chat__cta:focus-visible { outline: 2px solid #5e4040; outline-offset: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .ruelle-chat.is-ready .ruelle-chat__customer,
  .ruelle-chat.is-ready .ruelle-chat__reply,
  .ruelle-chat.is-ready .ruelle-chat__action { opacity: 0; }
  .ruelle-chat.is-playing .ruelle-chat__customer { animation: ruelle-chat-enter .45s ease-out both; }
  .ruelle-chat.is-playing .ruelle-chat__reply { animation: ruelle-chat-enter .45s ease-out 2.8s both; }
  .ruelle-chat.is-playing .ruelle-chat__action { animation: ruelle-chat-cta .5s ease-out 3.5s both; }
  .ruelle-chat.is-playing .ruelle-chat__typing { display: flex; animation: ruelle-chat-typing 2.8s linear both; }
  .ruelle-chat.is-playing .ruelle-chat__typing span { animation: ruelle-chat-dot .8s ease-in-out 1.2s 2; }
  .ruelle-chat.is-playing .ruelle-chat__typing span:nth-child(2) { animation-delay: 1.32s; }
  .ruelle-chat.is-playing .ruelle-chat__typing span:nth-child(3) { animation-delay: 1.44s; }
}
@keyframes ruelle-chat-enter { from { opacity: 0; transform: translateY(8px); visibility: hidden; } to { opacity: 1; transform: translateY(0); visibility: visible; } }
@keyframes ruelle-chat-cta { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ruelle-chat-typing { 0%, 39% { opacity: 0; visibility: hidden; } 44%, 94% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes ruelle-chat-dot { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (max-width: 540px) {
  .ruelle-chat .ruelle-chat__message { max-width: 92%; }
  .ruelle-chat .ruelle-chat__bubble { padding: 1rem 1.2rem; }
  .ruelle-chat .ruelle-chat__cta { text-align: left; gap: .75rem; }
}
/* Override the theme's default width for ungrouped content blocks. */
.entry-content > .ruelle-chat { max-width: none; width: 100%; margin-inline: 0; box-sizing: border-box; }
.ruelle-chat .ruelle-chat__cta svg { display: none; }
.ruelle-chat .ruelle-chat__cta::after {
  content: ""; width: 24px; height: 24px; flex: 0 0 24px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h17M14 5l7 7-7 7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}