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

<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 0;
width: 100%; /* 全幅を使う */
}

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

/* --- アイコン部分 --- */
.think-container .chat-icon {
flex-shrink: 0; /* アイコンが潰れないように固定 */
width: 80px; /* アイコン全体の幅 */
text-align: center;
}

/* アバター画像のラッパー。ここに極小丸2つを配置 */
.think-container .chat-icon .wphg {
display: block;
width: 80px; /* アバター画像に合わせる */
height: 80px; /* アバター画像に合わせる */
margin: 0 auto;
position: relative; /* 極小丸2つの基準点 */
}

.think-container .chat-icon img {
width: 100%; /* ラッパーに合わせる */
height: 100%; /* ラッパーに合わせる */
object-fit: cover;
border: solid 1px #b2d99a;
border-radius: 50%;
display: block;
}

.think-container .chat-name {
font-size: 10px;
margin-top: 5px;
color: #666;
}

/* --- アバター画像自体の右上/左上に配置する極小丸2つ --- */
.think-container .chat-icon .wphg::before,
.think-container .chat-icon .wphg::after {
content: "";
position: absolute;
background: #b2d99a;
border-radius: 50%;
}

/* 【修正】極小丸1（角に近い小さなドット） */
.think-container .chat-icon .wphg::before {
width: 10px;
height: 10px;
}

/* 【修正】極小丸2（角に触れる少し大きなドット） */
.think-container .chat-icon .wphg::after {
width: 10px;
height: 10px;
}

/* 【修正】左寄せ時（アバターは左）の極小丸2つの位置（密集を強める） */
.think-container.left .chat-icon .wphg::before {
top: 5px;
right: -15px;
}
.think-container.left .chat-icon .wphg::after {
top: 0; /* 一番上 */
right: 0; /* アバターの境界線に触れる */
}

/* 【修正】右寄せ時（アバターは右）の極小丸2つの位置（密集を強める） */
.think-container.right .chat-icon .wphg::before {
top: 5px;
left: -15px;
}
.think-container.right .chat-icon .wphg::after {
top: 0; /* 一番上 */
left: 0; /* アバターの境界線に触れる */
}

/* --- 吹き出し本体 --- */
.think-container .chat-bubble {
position: relative;
padding: 15px 20px;
border-radius: 20px;
background: #b2d99a;
color: #333;
line-height: 1.6;
max-width: 70%; /* 吹き出しが広がりすぎないように */
box-sizing: border-box;
}

/* 左寄せの時の吹き出しの左マージン（間の丸のスペース） */
.think-container.left .chat-bubble {
margin-left: 50px; /* ★以前より広くしました */
}

/* 右寄せの時の吹き出しの右マージン（間の丸のスペース） */
.think-container.right .chat-bubble {
margin-right: 50px; /* ★以前より広くしました */
}

/* --- アバターと吹き出しの間の1つの中くらいの丸 --- */
/* 中くらいの丸 */
.think-container .chat-bubble::before {
content: "";
position: absolute;
background: #b2d99a;
border-radius: 50%;
width: 20px; /* 中くらい */
height: 20px; /* 中くらい */
}

/* 以前の`::after`（小さな丸）は削除 */
.think-container .chat-bubble::after {
content: none;
}

/* 左寄せ時の丸の位置（吹き出しの左側） */
.think-container.left .chat-bubble::before {
left: -25px; /* ★アバターと吹き出しの間を中心に */
top: 15px; /* 高さは吹き出しの上部に合わせる */
}

/* 右寄せ時の丸の位置（吹き出しの右側） */
.think-container.right .chat-bubble::before {
right: -25px; /* ★アバターと吹き出しの間を中心に */
top: 15px; /* 高さは吹き出しの上部に合わせる */
}