/*
 会話形式の吹き出し（functions.php の boki_register_balloon_patterns() で登録したパターン用）
 公開ページとブロックエディタの両方で読み込まれる。キャラクターごとのアイコン画像は
 functions.php の boki_balloon_icon_css() が .boki-balloon--<キー>::before に指定する。

 構造:
   .boki-balloon.boki-balloon--left|right.boki-balloon--<キー>   ← ::before がアイコン
     (.wp-block-group__inner-container)   ← GeneratePressでは挟まることがある。位置は絶対配置なので影響しない
       p.boki-balloon__name               ← アイコンの下の名前
       .boki-balloon__bubble              ← 吹き出し本体（中に段落をいくつ入れてもよい）
*/

.boki-balloon {
    --balloon-icon: 72px;
    position: relative;
    min-height: calc(var(--balloon-icon) + 26px); /* アイコン＋名前の高さ */
    margin: 24px 0;
}

/* GeneratePressはグループの内側の div に padding:40px と max-width を付けるので、吹き出しの中では打ち消す */
.site-main .boki-balloon .wp-block-group__inner-container,
.boki-balloon .wp-block-group__inner-container {
    padding: 0;
    margin: 0;
    max-width: none;
}

.boki-balloon--left  { padding-left:  calc(var(--balloon-icon) + 22px); }
.boki-balloon--right { padding-right: calc(var(--balloon-icon) + 22px); }

/* アイコン（丸く切り抜き、枝ごと鳥が収まるように少し余白を持たせる） */
.boki-balloon::before {
    content: "";
    position: absolute;
    top: 0;
    width: var(--balloon-icon);
    height: var(--balloon-icon);
    border-radius: 50%;
    background-color: #fff;
    background-size: 88%;
    background-position: center 60%;
    background-repeat: no-repeat;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    /* 画像が無いキャラクター用：頭文字を表示する */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    color: #555;
}

.boki-balloon--left::before  { left: 0;  border: 3px solid #dbe8ff; } /* 借方の青 */
.boki-balloon--right::before { right: 0; border: 3px solid #fff3a0; } /* 付箋の黄（白背景で見えるよう少し濃く） */

/* アイコンの下の名前 */
.boki-balloon .boki-balloon__name {
    position: absolute;
    top: calc(var(--balloon-icon) + 4px);
    width: var(--balloon-icon);
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    color: #666;
}

.boki-balloon--left  .boki-balloon__name { left: 0; }
.boki-balloon--right .boki-balloon__name { right: 0; }

/* 吹き出し本体 */
.boki-balloon .boki-balloon__bubble {
    position: relative;
    padding: 14px 18px;
    border-radius: 14px;
    line-height: 1.7;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.12);
}

.boki-balloon--left  .boki-balloon__bubble { background: #e8f0ff; }  /* 借方の青を薄めに */
.boki-balloon--right .boki-balloon__bubble { background: #fff9c4; }  /* 付箋の黄 */

.boki-balloon .boki-balloon__bubble p {
    margin: 0 0 0.8em;
}

.boki-balloon .boki-balloon__bubble p:last-child {
    margin-bottom: 0;
}

/* 吹き出しのしっぽ（アイコンの顔の高さに向ける） */
.boki-balloon .boki-balloon__bubble::before {
    content: "";
    position: absolute;
    top: 24px;
    border: 9px solid transparent;
}

.boki-balloon--left .boki-balloon__bubble::before {
    left: -16px;
    border-right-color: #e8f0ff;
}

.boki-balloon--right .boki-balloon__bubble::before {
    right: -16px;
    border-left-color: #fff9c4;
}

/* スマホではアイコンを小さく */
@media (max-width: 768px) {
    .boki-balloon {
        --balloon-icon: 56px;
    }
    .boki-balloon--left  { padding-left:  calc(var(--balloon-icon) + 16px); }
    .boki-balloon--right { padding-right: calc(var(--balloon-icon) + 16px); }
    .boki-balloon .boki-balloon__bubble {
        padding: 10px 14px;
    }
    .boki-balloon .boki-balloon__bubble::before {
        top: 18px;
    }
}