/* ========================================================== */
/*           5b. 「画像＋テキスト」吹き出し表示                */
/* ========================================================== */

/* --- テキスト吹き出しのスタイル --- */
.magatama-icon-text-bubble {
  background-color: var(--user-bubble-bg);
  color: var(--user-bubble-text-color);
  padding: 12px 16px;
  /* ★内側の余白★ */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  position: relative;
  /* 疑似要素の基準点 */

  /* ★幅を自動調整し、最大幅を設定★ */
  width: auto;
  max-width: 200px;
}

/* --- 吹き出しの「しっぽ」 --- */
.magatama-icon-text-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  /* 吹き出しの右端に配置 */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 12px;
  border-color: transparent transparent transparent var(--user-bubble-bg);
  z-index: 2000;
}

/* ========================================================== */
/*           7. 縦並びレイアウトの「しっぽ」スタイル           */
/* ========================================================== */

/* 縦並びの時は、既存のしっぽ(::after)を一度非表示にする */
#magatama-chat-launcher.layout-vertical .magatama-icon-text-bubble::after {
  display: none;
}

/* 縦並びの時は、::beforeを使って下向きのしっぽを新しく作る */
#magatama-chat-launcher.layout-vertical .magatama-icon-text-bubble::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  /* 吹き出しの下端に配置 */
  transform: translateX(-50%);
  /* 左右中央に配置 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 10px 0 10px;
  /* 上向きの三角形のサイズ */
  border-color: var(--user-bubble-bg) transparent transparent transparent;
  /* 上側だけに色を付ける */
}

/* ========================================================== */
/*           8. アイコン左右反転スタイルの吹き出し表示          */
/* ========================================================== */

/* is-reversedクラスが付与されたら、しっぽの向きを逆にする */
#magatama-chat-launcher.is-reversed .magatama-icon-text-bubble::after {
  left: auto;
  /* leftの指定を解除 */
  right: 100%;
  /* 吹き出しの左端に配置 */
  border-color: transparent var(--user-bubble-bg) transparent transparent;
  /* 右向きの三角を作る */
  border-width: 10px 12px 10px 0;
}