/* Bubbles – shared styles (front + editor), chat-style with tails + outside avatars */

.bubbles-wrap{
  --bubbles-bg: #fdecec;
  --avatar-size: 75px;
  --avatar-top: -6px; /* vertical nudge for avatar & tail */
  display:flex;
  margin: 22px 0 16px;
  overflow: visible; /* ensure avatars/tails never get clipped */
}
.bubbles-wrap.is-question{ justify-content:flex-start; }
.bubbles-wrap.is-answer{ justify-content:flex-end; }

/* Bubble card */
.bubbles{
  position: relative;
  max-width: min(760px, 92%);
  background: var(--bubbles-bg);
  color: inherit;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);

  /* Center short bubbles nicely */
  display: flex;
  align-items: center;
}

/* Borders */
.bubbles-wrap.is-question .bubbles { border-style: solid; }
.bubbles-wrap.is-answer  .bubbles { border-style: solid; }

/* Speech tails centered to avatar */
.bubbles::before{
  content: "";
  position: absolute;
  top: calc(var(--avatar-top) + (var(--avatar-size) / 2));
  transform: translateY(-50%);
  border: 8px solid transparent;
}
.bubbles-wrap.is-question .bubbles::before{
  left: -8px;
  border-right-color: var(--bubbles-bg);
  border-left-width: 0;
  filter: drop-shadow(-1px 0 rgba(0,0,0,.08));
}
.bubbles-wrap.is-answer .bubbles::before{
  right: -8px;
  border-left-color: var(--bubbles-bg);
  border-right-width: 0;
  filter: drop-shadow(1px 0 rgba(0,0,0,.08));
}

/* Avatar outside bubble */
.bubbles__avatar{
  position: absolute;
  top: var(--avatar-top);
}
.bubbles__avatar img{
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.bubbles__avatar img:hover{
  opacity: .8;
  transform: scale(1.05);
}

/* Space for avatar — match the exact offset (avatar width + 12px gap) */
.bubbles-wrap.is-question .bubbles{ margin-left:  calc(var(--avatar-size) + 12px); }
.bubbles-wrap.is-answer  .bubbles{ margin-right: calc(var(--avatar-size) + 12px); }

/* Position avatar left/right — same magnitude as reserved space */
.bubbles-wrap.is-question .bubbles__avatar{ left:  calc(-1 * (var(--avatar-size) + 12px)); }
.bubbles-wrap.is-answer  .bubbles__avatar{ right: calc(-1 * (var(--avatar-size) + 12px)); }

/* Content */
.bubbles__content{ line-height: 1.6; width: 100%; }
.bubbles__content p{ margin: 0; }           /* reset */
.bubbles__content p + p{ margin-top: 8px; } /* only space between paragraphs */

/* Optional: flip align on mobile */
@media (max-width: 640px){
  .bubbles-wrap.flip-mobile.is-question{ justify-content:flex-end; }
  .bubbles-wrap.flip-mobile.is-answer{ justify-content:flex-start; }
}