:root {
    --icon-size: 3.5rem;
    --balloon-gap: 0.75rem;

    --chat-padding-y: 0.75rem;
    --chat-padding-x: 1rem;

    --chat-radius: 0.75rem;

    --triangle-outer: 0.70rem;
    /* 外側の三角形の半径 */
    --triangle-inner: 0.60rem;
    /* 内側の三角形の半径 */

    --triangle-offset: 0.68rem;
    /* 三角形を外へ押し出す距離 */

    --border-color: rgb(200, 200, 200);
    --bg-chat: rgb(50, 50, 50);
}

/* 吹き出し全体 */
.balloon {
    display: flex;
    align-items: flex-start;
    gap: var(--balloon-gap);
    margin-block: 1rem;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

.balloon.left {
    flex-direction: row;
}

.balloon.right {
    flex-direction: row-reverse;
}

/* アイコン */
.icon {
    flex: 0 0 var(--icon-size);
}

.icon img {
    width: var(--icon-size);
    height: auto;
    border-radius: 10%;
}

.balloon figure {
    margin: 0;
    padding: 0;
}



/* 吹き出し本体 */
.chat {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--chat-padding-y) var(--chat-padding-x);
    border: 2px solid var(--border-color);
    border-radius: var(--chat-radius);
    background: var(--bg-chat);
    line-height: 1.6;
    word-break: break-word;
}

/* 三角形（共通） */
.chat::before,
.chat::after {
    content: "";
    position: absolute;

    /* 三角形の縦位置を “吹き出しの角丸の中心” に合わせる */
    top: calc(var(--chat-padding-y) + var(--chat-radius) * 0.5);

    border-style: solid;
    pointer-events: none;
}

/* 外側の三角形（枠線） */
.chat::before {
    top: 1.0rem;
    border-width: var(--triangle-outer);
}

/* 内側の三角形（背景） */
.chat::after {
    border-width: var(--triangle-inner);
}

/* 左向き */
.balloon.left .chat::before {
    left: calc(-1 * var(--triangle-outer) - var(--triangle-offset));
    border-color: transparent var(--border-color) transparent transparent;
}

.balloon.left .chat::after {
    left: calc(-1 * var(--triangle-inner) - var(--triangle-offset) + 0.2rem);
    border-color: transparent var(--bg-chat) transparent transparent;
}

/* 右向き */
.balloon.right .chat::before {
    right: calc(-1 * var(--triangle-outer) - var(--triangle-offset));
    border-color: transparent transparent transparent var(--border-color);
}

.balloon.right .chat::after {
    right: calc(-1 * var(--triangle-inner) - var(--triangle-offset) + 0.2rem);
    border-color: transparent transparent transparent var(--bg-chat);
}