@charset "UTF-8";

/* 💬 共通設定 */
.talking {
  display: flex;
  align-items: flex-start;
  margin: 24px 0;
  gap: 12px;
  max-width: 100%;
}

/* 👤 アイコン */
.talking .icon {
  text-align: center;
  flex-shrink: 0;
}

.talking .icon img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.talking .icon figcaption {
  font-size: 12px;
  margin-top: 4px;
  color: #555;
  width: 60px;
  text-align: center;
}

/* 💬 吹き出し共通 */
.talking .balloon {
  position: relative;
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid var(--balloon-border, #66d9ef);
  background: var(--balloon-bg, #ccf5ff);
  width: 60%;
  font-size: 15px;
  line-height: 1.6;
  overflow: visible;
  box-sizing: border-box;
}

/* 📍 左アイコン／左三角 */
.talking.left {
  flex-direction: row;
  justify-content: flex-start;
}

.talking.left .balloon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -18px;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-right-color: var(--balloon-bg, #ccf5ff);
  z-index: 1;
}

.talking.left .balloon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-right-color: var(--balloon-border, #66d9ef);
  z-index: 0;
}

/* 📍 右アイコン／右三角 */
.talking.right {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.talking.right .balloon {
  margin-left: auto;
 margin-top: 20px; /* ← 任意で下にずらす調整 */
}
 
.talking.right .balloon::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left-color: var(--balloon-bg, #ccf5ff);
  z-index: 1;
}

.talking.right .balloon::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left-color: var(--balloon-border, #66d9ef);
  z-index: 0;
}

/* 🎨 カラーバリエーション */
.balloon.blue {
  --balloon-bg: #ccf5ff;
  --balloon-border: #66d9ef;
}

.balloon.green {
  --balloon-bg: #d3f9d8;
  --balloon-border: #70c18c;
}

.balloon.orange {
  --balloon-bg: #fff3cd;
  --balloon-border: #f0ad4e;
}

.balloon.brown {
  --balloon-bg: #f3e5d5;
  --balloon-border: #a67c52;
}