/* =========================================================
   Shared Characters Block - 吹き出しスタイル
   ========================================================= */

/* 吹き出し本体（共通） */
.wp-block-media-text.scb-bubble .wp-block-media-text__content {
  position: relative;
  background: #fff;
  border: 2px solid #222;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 0 #222;
}

/* 吹き出し内の段落のマージンをリセット */
.wp-block-media-text.scb-bubble .wp-block-media-text__content p {
  margin: 0;
}

/* =========================================================
   通常テール（三角） - speech
   ========================================================= */

/* 左テール（画像が左＝テキスト右） */
.wp-block-media-text.scb-bubble.scb-tail-speech .wp-block-media-text__content::before,
.wp-block-media-text.scb-bubble.scb-tail-speech .wp-block-media-text__content::after {
  content: "";
  position: absolute;
  top: 24px;
  left: -14px;
  width: 0;
  height: 0;
  border-style: solid;
}

.wp-block-media-text.scb-bubble.scb-tail-speech .wp-block-media-text__content::before {
  border-width: 10px 14px 10px 0;
  border-color: transparent #222 transparent transparent; /* 外枠 */
}
.wp-block-media-text.scb-bubble.scb-tail-speech .wp-block-media-text__content::after {
  left: -12px;
  border-width: 9px 12px 9px 0;
  border-color: transparent #fff transparent transparent; /* 中身 */
}

/* 右テール（画像が右＝テキスト左） */
.wp-block-media-text.is-media-on-the-right.scb-bubble.scb-tail-speech .wp-block-media-text__content::before,
.wp-block-media-text.is-media-on-the-right.scb-bubble.scb-tail-speech .wp-block-media-text__content::after {
  top: 24px;
  right: -14px;
  left: auto;
}

.wp-block-media-text.is-media-on-the-right.scb-bubble.scb-tail-speech .wp-block-media-text__content::before {
  border-width: 10px 0 10px 14px;
  border-color: transparent transparent transparent #222;
}
.wp-block-media-text.is-media-on-the-right.scb-bubble.scb-tail-speech .wp-block-media-text__content::after {
  right: -12px;
  border-width: 9px 0 9px 12px;
  border-color: transparent transparent transparent #fff;
}

/* モバイル（600px以下・縦積み）→ 上中央に */
@media only screen and (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile.scb-bubble.scb-tail-speech .wp-block-media-text__content::before,
  .wp-block-media-text.is-stacked-on-mobile.scb-bubble.scb-tail-speech .wp-block-media-text__content::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .wp-block-media-text.is-stacked-on-mobile.scb-bubble.scb-tail-speech .wp-block-media-text__content::before {
    top: -12px;
    border-width: 0 10px 12px 10px;
    border-color: transparent transparent #222 transparent;
  }
  .wp-block-media-text.is-stacked-on-mobile.scb-bubble.scb-tail-speech .wp-block-media-text__content::after {
    top: -10px;
    border-width: 0 9px 11px 9px;
    border-color: transparent transparent #fff transparent;
  }
}

/* =========================================================
   回想テール（丸ドット） - thought
   ========================================================= */

/* 左側（画像が左＝テキスト右） */
.wp-block-media-text.scb-bubble.scb-tail-thought .wp-block-media-text__content::before,
.wp-block-media-text.scb-bubble.scb-tail-thought .wp-block-media-text__content::after {
  content: "";
  position: absolute;
  display: block;
  background: #fff;
  border: 2px solid #222;
  border-radius: 50%;
}

.wp-block-media-text.scb-bubble.scb-tail-thought .wp-block-media-text__content::before {
  width: 12px;
  height: 12px;
  top: 28px;
  left: -18px;
}
.wp-block-media-text.scb-bubble.scb-tail-thought .wp-block-media-text__content::after {
  width: 8px;
  height: 8px;
  top: 28px;
  left: -32px;
}

/* 右側（画像が右＝テキスト左） */
.wp-block-media-text.is-media-on-the-right.scb-bubble.scb-tail-thought .wp-block-media-text__content::before {
  width: 12px;
  height: 12px;
  top: 28px;
  right: -18px;
  left: auto;
}
.wp-block-media-text.is-media-on-the-right.scb-bubble.scb-tail-thought .wp-block-media-text__content::after {
  width: 8px;
  height: 8px;
  top: 28px;
  right: -32px;
  left: auto;
}

/* モバイル（600px以下・縦積み）→ 上中央にドット */
@media only screen and (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile.scb-bubble.scb-tail-thought .wp-block-media-text__content::before,
  .wp-block-media-text.is-stacked-on-mobile.scb-bubble.scb-tail-thought .wp-block-media-text__content::after {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }
  .wp-block-media-text.is-stacked-on-mobile.scb-bubble.scb-tail-thought .wp-block-media-text__content::before {
    width: 12px;
    height: 12px;
    top: -18px;
  }
  .wp-block-media-text.is-stacked-on-mobile.scb-bubble.scb-tail-thought .wp-block-media-text__content::after {
    width: 8px;
    height: 8px;
    top: -34px;
  }
}

/* モーダル内の画像一覧を小さめに */
.scb-grid--modal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* サムネ幅 */
  gap: 12px;
}

.scb-thumb {
  border: 1px solid #ccc;
  padding: 6px;
  text-align: center;
  background: #fafafa;
  cursor: pointer;
}

.scb-thumb__preview img {
  max-width: 100%;
  height: auto;
  max-height: 100px;   /* ここで高さを抑える */
  object-fit: contain;
}

.scb-thumb__name {
  font-size: 12px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 吹き出し同士の間隔を確保 */
.wp-block-media-text.scb-bubble {
  margin: 0 0 1.5em;
}

/* ==== Editor only: Gutenberg でのはみ出し対策 ==== */
.editor-styles-wrapper .wp-block-media-text.scb-bubble {
  margin-left: auto;
  margin-right: auto; /* 編集キャンバスで中央寄せを維持 */
}

/* 擬似要素がクリック判定や幅計算に干渉しないように */
.editor-styles-wrapper
  .wp-block-media-text.scb-bubble
  .wp-block-media-text__content::before,
.editor-styles-wrapper
  .wp-block-media-text.scb-bubble
  .wp-block-media-text__content::after {
  pointer-events: none;
}

/* モバイル縦積み時（600px以下）は中央上テールのままでOK。
   追加の上書きは不要ですが、念のため editor でも中央化を強制 */
@media only screen and (max-width: 600px) {
  .editor-styles-wrapper
    .wp-block-media-text.is-stacked-on-mobile.scb-bubble.scb-tail-speech
    .wp-block-media-text__content::before,
  .editor-styles-wrapper
    .wp-block-media-text.is-stacked-on-mobile.scb-bubble.scb-tail-speech
    .wp-block-media-text__content::after,
  .editor-styles-wrapper
    .wp-block-media-text.is-stacked-on-mobile.scb-bubble.scb-tail-thought
    .wp-block-media-text__content::before,
  .editor-styles-wrapper
    .wp-block-media-text.is-stacked-on-mobile.scb-bubble.scb-tail-thought
    .wp-block-media-text__content::after {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
}