/**
 * LINE 風会話（ましろ博士 / RINGO）— ショートコード mtl_line_chat 用
 */

/* 投稿本文と同じカラム幅（.post-featured-image-wrap と同じ 100%）で表示 */
.mtl-line-chat {
    container-type: inline-size;
    container-name: mtl-line-chat;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 1.25rem 0 1.5rem;
    padding: 1.1rem clamp(0.4rem, 1.8vw, 0.75rem) 1.15rem;
    border-radius: 14px;
    border: 1px solid rgba(88, 145, 245, 0.48);
    background: linear-gradient(
        155deg,
        rgba(44, 62, 108, 0.75) 0%,
        rgba(30, 42, 78, 0.82) 52%,
        rgba(22, 32, 58, 0.88) 100%
    );
    box-shadow:
        0 4px 16px rgba(8, 14, 32, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mtl-line-msg {
    box-sizing: border-box;
    display: flex;
    /* LINE 同様、アバター上端＝吹き出し上端。しっぽはアバター縦中央に合わせる */
    align-items: flex-start;
    gap: 0.72rem;
    /* 吹き出しおおよそ 1 行分の高さ＋隙間 */
    margin: 0 0 calc(1.03rem * 1.62 + 0.62rem);
    width: 100%;
    max-width: 100%;
}

.mtl-line-msg:last-child {
    margin-bottom: 0;
}

/* ましろ博士: 左 */
.mtl-line-msg--hakase {
    flex-direction: row;
    justify-content: flex-start;
}

/* RINGO: 右。row-reverse は Android 実機でアバター画像が反転・反色っぽく崩れることがあるため、通常の row + order で同じ見た目にする */
.mtl-line-msg--ringo {
    flex-direction: row;
    justify-content: flex-end;
}

.mtl-line-msg__avatar {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* 吹き出しと同じ 2px 枠・ハイライト／外光（博士・RINGO ともライトブルー枠で統一） */
.mtl-line-msg--hakase .mtl-line-msg__avatar {
    border-color: rgba(100, 168, 255, 0.95);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 30, 70, 0.12),
        0 2px 10px rgba(20, 50, 100, 0.28),
        0 0 0 1px rgba(95, 145, 255, 0.28);
}

.mtl-line-msg--ringo .mtl-line-msg__avatar {
    order: 2;
    border-color: rgba(100, 168, 255, 0.95);
    /* 博士と同一（枠の影だけ違うと端末でアイコン色がずれて見えることがある） */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 30, 70, 0.12),
        0 2px 10px rgba(20, 50, 100, 0.28),
        0 0 0 1px rgba(95, 145, 255, 0.28);
}

/* アバター画像: .mtl-line-msg__avatar-img--hakase / --ringo は HTML 側の発言者タグ（親の .mtl-line-msg--ringo は行レイアウト用） */
.mtl-line-msg__avatar-img {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    max-width: none;
    object-fit: contain;
    object-position: center center;
    display: block;
    margin: 2px;
    flex-shrink: 0;
    aspect-ratio: 1;
    background-color: transparent;
}

/* 旧マークアップ用: 以前 RINGO のみ span+背景画像だったときの互換 */
.mtl-line-msg--ringo .mtl-line-msg__avatar-sprite {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    flex: 1 0 auto;
    min-height: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* アイキャッチと同じく本文カラムいっぱい（26rem 上限は廃止） */
.mtl-line-msg__col {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 3.47rem);
}

/* RINGO: 列は残り幅まで広げ、吹き出しは列内で右寄せ（左寄せに見えるのを防ぐ） */
.mtl-line-msg--ringo .mtl-line-msg__col {
    flex: 1 1 auto;
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.mtl-line-msg__bubble {
    display: block;
    position: relative;
    overflow: visible;
    width: fit-content;
    max-width: 100%;
    padding: 0.55rem 0.82rem 0.62rem;
    border-radius: 14px;
    /* 本文より一段ヒラギノ／ゴシック優先で輪郭が出やすく */
    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic UI",
        YuGothic,
        Meiryo,
        sans-serif;
    font-size: clamp(0.98rem, 0.93rem + 0.25vw, 1.06rem);
    line-height: 1.62;
    letter-spacing: 0.012em;
    /* 500 だと本文も中太になり strong との差が潰れやすい → 通常 400、強調は strong のみ太く */
    font-weight: 400;
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

/* タブレット以上のみ：吹き出し最大幅を会話ブロック幅の半分（スマホは 100% のまま） */
@media (min-width: 768px) {
    .mtl-line-chat .mtl-line-msg__bubble {
        max-width: min(50cqw, 100%);
    }
}

/* 博士: ライトブルー寄りだが白文字で読めるようやや彩度のある青 */
.mtl-line-msg--hakase .mtl-line-msg__bubble {
    /* しっぽ（::after）と同一色を変数で共有。inset 影はしっぽに乗らないため外側の光だけにする */
    --mtl-line-hakase-face: rgb(58, 128, 198);
    --mtl-line-hakase-edge: rgb(100, 168, 255);
    background: var(--mtl-line-hakase-face);
    border: 2px solid var(--mtl-line-hakase-edge);
    color: #edf4ff;
    border-radius: 5px 16px 16px 14px;
    box-shadow:
        0 2px 10px rgba(20, 50, 100, 0.28),
        0 0 0 1px rgba(95, 145, 255, 0.28),
        0 0 22px rgba(90, 155, 255, 0.22);
}

/* アバター（2.75rem）の縦中央にしっぽの先を合わせる（Androidで枠線が消えにくい回転四角2層） */
.mtl-line-msg--hakase .mtl-line-msg__bubble::before,
.mtl-line-msg--hakase .mtl-line-msg__bubble::after {
    content: '';
    position: absolute;
    top: calc(2.75rem / 2);
    transform: translateY(-50%);
    box-sizing: border-box;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    pointer-events: none;
}

.mtl-line-msg--hakase .mtl-line-msg__bubble::before {
    left: -15px;
    width: 14px;
    height: 18px;
    background: var(--mtl-line-hakase-edge);
}

.mtl-line-msg--hakase .mtl-line-msg__bubble::after {
    left: -11px;
    width: 11px;
    height: 14px;
    background: var(--mtl-line-hakase-face);
}

/* RINGO: 塗りはティール系のまま、枠線は博士と同じライトブルーで統一 */
.mtl-line-msg--ringo .mtl-line-msg__bubble {
    --mtl-line-ringo-face: rgba(14, 72, 82, 0.96);
    --mtl-line-ringo-edge: rgba(100, 168, 255, 0.95);
    background: var(--mtl-line-ringo-face);
    border: 2px solid var(--mtl-line-ringo-edge);
    color: #edf4ff;
    border-radius: 16px 5px 14px 16px;
    margin-inline-start: auto;
    box-shadow:
        0 2px 12px rgba(10, 40, 75, 0.38),
        0 0 0 1px rgba(95, 145, 255, 0.28),
        0 0 24px rgba(90, 155, 255, 0.2);
}

.mtl-line-msg--ringo .mtl-line-msg__bubble::before,
.mtl-line-msg--ringo .mtl-line-msg__bubble::after {
    content: '';
    position: absolute;
    top: calc(2.75rem / 2);
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    pointer-events: none;
}

.mtl-line-msg--ringo .mtl-line-msg__bubble::before {
    right: -13px;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent var(--mtl-line-ringo-edge);
}

.mtl-line-msg--ringo .mtl-line-msg__bubble::after {
    right: -9px;
    border-width: 7px 0 7px 10px;
    border-color: transparent transparent transparent var(--mtl-line-ringo-face);
}

.mtl-line-msg__bubble p {
    margin: 0 0 0.45rem;
    font-weight: 400;
}

.mtl-line-msg__bubble p:last-child {
    margin-bottom: 0;
}

.mtl-line-msg__bubble a {
    color: var(--accent, #6e8cff);
    text-decoration: underline;
    font-weight: 500;
}

.mtl-line-msg--hakase .mtl-line-msg__bubble a,
.mtl-line-msg--ringo .mtl-line-msg__bubble a {
    color: #5cadff;
    font-weight: 500;
}

/* 会話ツール: ライトブルー（span 旧形式 / strong.mtl-line-msg__accent 併用） */
.mtl-line-chat .mtl-line-msg__bubble .mtl-line-msg__accent {
    color: #5cadff;
}

/* PHP が付与する mtl-line-msg__emph: 親の font:inherit より詳細度で勝つ */
.mtl-line-chat .mtl-line-msg__bubble :is(strong.mtl-line-msg__emph, b.mtl-line-msg__emph) {
    font-weight: 900 !important;
    font-style: normal !important;
    font-synthesis: weight !important;
    color: #ffffff !important;
    letter-spacing: 0.03em !important;
    text-shadow:
        0 0.06em 0 rgba(0, 12, 40, 0.45),
        0 0 0.75em rgba(255, 255, 255, 0.22) !important;
}

/* 太字強調＋ライトブルー（会話ツール「選択部分を強調」）— emph の白より後勝ち */
.mtl-line-chat .mtl-line-msg__bubble strong.mtl-line-msg__emph.mtl-line-msg__accent,
.mtl-line-chat .mtl-line-msg__bubble strong.mtl-line-msg__accent.mtl-line-msg__emph,
.mtl-line-chat .mtl-line-msg__bubble b.mtl-line-msg__emph.mtl-line-msg__accent,
.mtl-line-chat .mtl-line-msg__bubble b.mtl-line-msg__accent.mtl-line-msg__emph {
    color: #5cadff !important;
}

/* フィルタ前の本文・抜粋など emph 未付与のときのフォールバック（accent 専用 strong は除外） */
.mtl-line-chat .mtl-line-msg__bubble strong:not(.mtl-line-msg__emph):not(.mtl-line-msg__accent),
.mtl-line-chat .mtl-line-msg__bubble b:not(.mtl-line-msg__emph):not(.mtl-line-msg__accent) {
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.03em !important;
    text-shadow:
        0 0.06em 0 rgba(0, 12, 40, 0.45),
        0 0 0.75em rgba(255, 255, 255, 0.22) !important;
}

.mtl-line-chat .mtl-line-msg__bubble strong.mtl-line-msg__accent:not(.mtl-line-msg__emph),
.mtl-line-chat .mtl-line-msg__bubble b.mtl-line-msg__accent:not(.mtl-line-msg__emph) {
    font-weight: 800 !important;
    color: #5cadff !important;
    letter-spacing: 0.03em !important;
    text-shadow:
        0 0.06em 0 rgba(0, 12, 40, 0.45),
        0 0 0.75em rgba(255, 255, 255, 0.22) !important;
}

.mtl-line-msg__bubble code {
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
}

.mtl-line-msg--hakase .mtl-line-msg__bubble code,
.mtl-line-msg--ringo .mtl-line-msg__bubble code {
    background: rgba(0, 0, 0, 0.26);
    color: #f2f8ff;
}

/* ラッパー外で単体利用したとき */
.entry-content > .mtl-line-msg,
.post-single-content > .mtl-line-msg,
.software-content > .mtl-line-msg,
.post-content > .mtl-line-msg {
    margin-bottom: calc(1.03rem * 1.62 + 0.62rem);
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}