パーツ（会話の吹き出し、考え・思考中吹き出し）

<div class="chat-container left">
<div class="chat-icon">
<div class="wphg"><img src="画像のURL" alt="名前" /></div>
<div class="chat-name">★★★</div>
</div>
<div class="chat-bubble">
左寄せパターンです。文章が長くなっても、アイコンが潰れずに綺麗に回り込みます。
</div>
</div>
<div class="chat-container right">
<div class="chat-icon">
<div class="wphg"><img src="画像のURL" alt="名前" /></div>
<div class="chat-name">★★★</div>
</div>
<div class="chat-bubble">
右寄せパターンです。HTMLの構造はそのままで、CSSで左右を反転させています。
</div>
</div>

/* --- 吹き出し全体のレイアウト --- */
.chat-container {
display: flex;
align-items: flex-start; /* 上揃え */
margin: 20px 10px;
width: 95%;
}

/* 右寄せ用の設定（左右を反転させる） */
.chat-container.right {
flex-direction: row-reverse;
}

/* --- アイコン部分 --- */
.chat-icon {
flex-shrink: 0; /* アイコンが横に潰れるのを防ぐ */
width: 100px; /* アイコンの幅 */
text-align: center;
}

.chat-icon img {
width: 80px; /* 画像の実際のサイズ */
height: 80px;
object-fit: cover;
border: solid 1px #b2d99a;
border-radius: 50%; /* 円形 */
display: block;
margin: 0 auto;
}

.chat-name {
font-size: 10px;
margin-top: 7px;
color: #333;
}

/* --- 吹き出し本体 --- */
.chat-bubble {
position: relative;
padding: 15px;
border-radius: 20px;
background: #b2d99a;
margin: 5px 20px; /* アイコンとの横の間隔 */
max-width: 70%; /* スマホで見てもはみ出さない幅 */
line-height: 1.6;
word-break: break-all; /* 長い単語での突き抜け防止 */
}

/* --- 吹き出しのしっぽ（共通） --- */
.chat-bubble::after {
content: "";
position: absolute;
top: 15px;
border-style: solid;
}

/* 左寄せのしっぽ */
.left .chat-bubble::after {
left: -14px;
border-width: 0 18px 15px 0;
border-color: transparent #b2d99a transparent transparent;
}

/* 右寄せのしっぽ */
.right .chat-bubble::after {
right: -14px;
border-width: 15px 18px 0 0;
border-color: #b2d99a transparent transparent transparent;
}

<div class="think-container left">
<div class="chat-icon">
<div class="wphg"><img src="画像のURL" alt="名前" /></div>
<div class="chat-name">★★★</div>
</div>
<div class="chat-bubble">
左寄せの考え中パターンです。しっぽを丸いドットに変更して、思考している雰囲気にしています。
</div>
</div>
<div class="think-container right">
<div class="chat-icon">
<div class="wphg"><img src="画像のURL" alt="名前" /></div>
<div class="chat-name">★★★</div>
</div>
<div class="chat-bubble">
右寄せの考え中パターンです。こちらもクラスを変えるだけで反転します。
</div>
</div>

/* --- 考え中吹き出し全体のレイアウト --- */
.think-container {
display: flex;
align-items: flex-start;
margin: 20px 10px;
width: 95%;
}

/* 右寄せ反転 */
.think-container.right {
flex-direction: row-reverse;
}

/* --- アイコン部分 --- */
.think-container .chat-icon {
flex-shrink: 0;
width: 100px;
text-align: center;
}

.think-container .chat-icon img {
width: 80px;
height: 80px;
object-fit: cover;
border: solid 1px #b2d99a;
border-radius: 50%;
display: block;
margin: 0 auto;
}

.think-container .chat-name {
font-size: 10px;
margin-top: 7px;
}

/* --- 吹き出し本体 --- */
.think-container .chat-bubble {
position: relative;
padding: 15px;
border-radius: 25px; /* 少し丸みを強めにすると可愛くなります */
background: #b2d99a;
margin: 10px 25px;
max-width: 70%;
line-height: 1.6;
}

/* --- 考え中のポワポワ（丸いドット） --- */
/* 中くらいの丸 */
.think-container .chat-bubble::before {
content: "";
position: absolute;
background: #b2d99a;
border-radius: 50%;
width: 14px;
height: 14px;
top: 10px;
}

/* 小さな丸 */
.think-container .chat-bubble::after {
content: "";
position: absolute;
background: #b2d99a;
border-radius: 50%;
width: 8px;
height: 8px;
top: 5px;
}

/* 左寄せ時の丸の位置 */
.think-container.left .chat-bubble::before {
left: -18px;
}
.think-container.left .chat-bubble::after {
left: -28px;
}

/* 右寄せ時の丸の位置 */
.think-container.right .chat-bubble::before {
right: -18px;
}
.think-container.right .chat-bubble::after {
right: -28px;
}