/* Kimoota Speech Balloon / legacy Cocoon class compatibility */
:root {
    --km-speech-desktop-icon-size: 150px;
    --km-speech-mobile-icon-size: 80px;
    --km-speech-border-color: #fa8072;
    --km-speech-background: #2a2a2a;
    --km-speech-text-color: #eeeeee;
}

.km-speech-wrap,
.speech-wrap {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    margin: 0 0 3em;
}

.km-speech-wrap.km-speech-right,
.speech-wrap.sbp-r {
    flex-direction: row-reverse;
}

.km-speech-person,
.speech-person {
    flex: 0 0 var(--km-speech-desktop-icon-size);
    width: var(--km-speech-desktop-icon-size);
}

.km-speech-person figure,
.speech-person figure {
    width: var(--km-speech-desktop-icon-size);
    height: var(--km-speech-desktop-icon-size);
    margin: 0;
}

.km-speech-person img,
.speech-person img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.km-speech-balloon,
.speech-balloon {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 50px;
    margin-top: 55px;
    padding: 20px 25px;
    background: var(--km-speech-background);
    border: 2px solid var(--km-speech-border-color);
    border-radius: 12px;
}

.km-speech-balloon p,
.speech-balloon p {
    margin: 0;
    padding: 0;
    color: var(--km-speech-text-color);
    line-height: 1.7;
    text-align: left;
}

/* 旧Cocoon系HTMLに残るキャラクター名は表示しない。 */
.speech-name {
    display: none !important;
}

.km-speech-balloon::before,
.km-speech-balloon::after,
.speech-balloon::before,
.speech-balloon::after {
    position: absolute;
    top: 40px;
    width: 0;
    height: 0;
    content: "";
}

.km-speech-left .km-speech-balloon::before,
.sbp-l .speech-balloon::before {
    left: -14px;
    border-top: 10px solid transparent;
    border-right: 14px solid var(--km-speech-border-color);
    border-bottom: 10px solid transparent;
}

.km-speech-left .km-speech-balloon::after,
.sbp-l .speech-balloon::after {
    left: -10px;
    border-top: 10px solid transparent;
    border-right: 12px solid var(--km-speech-background);
    border-bottom: 10px solid transparent;
}

.km-speech-right .km-speech-balloon::before,
.sbp-r .speech-balloon::before {
    right: -14px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 14px solid var(--km-speech-border-color);
}

.km-speech-right .km-speech-balloon::after,
.sbp-r .speech-balloon::after {
    right: -10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 12px solid var(--km-speech-background);
}

/* TinyMCE内では本文の視認性を優先。 */
.mce-content-body .km-speech-balloon,
.mce-content-body .speech-balloon {
    background: var(--km-speech-background) !important;
}

.mce-content-body .km-speech-balloon p,
.mce-content-body .speech-balloon p {
    color: var(--km-speech-text-color) !important;
}

@media screen and (max-width: 1080px) {
    .km-speech-wrap,
    .speech-wrap {
        gap: 12px;
    }

    .km-speech-person,
    .speech-person {
        flex-basis: var(--km-speech-mobile-icon-size);
        width: var(--km-speech-mobile-icon-size);
    }

    .km-speech-person figure,
    .speech-person figure {
        width: var(--km-speech-mobile-icon-size);
        height: var(--km-speech-mobile-icon-size);
    }

    .km-speech-balloon,
    .speech-balloon {
        margin-top: 35px;
        padding: 15px 18px;
    }

    .km-speech-balloon::before,
    .km-speech-balloon::after,
    .speech-balloon::before,
    .speech-balloon::after {
        top: 20px;
    }
}

/*
 * 既存サイト互換。
 * 旧実装で使用していた wink 用背景指定は、既存記事を壊さないため残す。
 */
.speech-person.balloon-icon-wink {
    width: 150px !important;
    height: 150px !important;
    background-image: url('https://wordpress.kimoota.net/wp-content/uploads/2026/05/30250b292faa34280f6a8c60b6183807.avif') !important;
    background-size: 450px 150px !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
}