三歩あるけば物も忘れる

忘れていましたが、下記のサイトの設定もしていました。
https://dokuwiki.oreda.net/template/dokuwiki.html#styleini

こちらのサイトを参考にdokuwiki/conf/userall.cssを配置した。

/* ページ内段落行の高さ */
.dokuwiki .page p {line-height:1.5em;margin-top:.2em;margin-bottom:1em;}

/* ページ内見出し */
.dokuwiki .page h1 {line-height:1em;margin-top:.2em;margin-bottom:.2em;}
.dokuwiki .page h2 {line-height:1em;margin-top:.2em;margin-bottom:.2em;}
.dokuwiki .page h3 {line-height:1em;margin-top:.2em;margin-bottom:.2em;}
.dokuwiki .page h4 {line-height:1em;margin-top:.2em;margin-bottom:.2em;}
.dokuwiki .page h5 {line-height:1em;margin-top:.2em;margin-bottom:.2em;}
.dokuwiki .page h6 {line-height:1em;margin-top:.2em;margin-bottom:.2em;}

WRAPをチャット風に使うため bubble というCSSクラスを作った

/* 吹き出しの共通設定 */
.dokuwiki .wrap_bubble {
    position: relative;
    padding: 10px 15px;
    border-radius: 15px;
    margin-bottom: 10px;
    max-width: 70%;
    clear: both;
}

/* 左側（相手） */
.dokuwiki .wrap_left.wrap_bubble {
    float: left;
    background-color: #f0f0f0; /* グレー */
    border: 1px solid #ddd;
}

/* 右側（自分） */
.dokuwiki .wrap_right.wrap_bubble {
    float: right;
    background-color: #98e165; /* LINE風の緑 */
    border: 1px solid #85c956;
}

/* 回り込み解除（これがないと後の文章が崩れます） */
.dokuwiki .wrap_bubble::after {
    content: "";
    display: block;
    clear: both;
}

/* 1. 共通の透明な枠（右端を揃えるための壁） */
.dokuwiki .wrap_bubble {
    display: block !important;
    width: 100% !important;
    max-width: 800px; /* チャット全体の幅 */
    margin: 20px auto !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    clear: both;
}

/* 2. 左側（Left）：左側に固定して背景色 */
.dokuwiki .wrap_left.wrap_bubble {
    text-align: left;
}
.dokuwiki .wrap_left.wrap_bubble {
    background-color: #f0f0f0 !important;
    border-radius: 18px;
    padding: 15px 20px !important;
    width: fit-content !important; /* 文字数に合わせる */
    max-width: 85%;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* 3. 右側（Right）：右側に固定して背景色 */
.dokuwiki .wrap_right.wrap_bubble {
    text-align: left; /* 文字自体は左から読みやすく */
}
.dokuwiki .wrap_right.wrap_bubble {
    background-color: #d2e3fc !important; /* Gemini風の青 */
    border-radius: 18px;
    padding: 15px 20px !important;
    width: fit-content !important; /* 文字数に合わせる */
    max-width: 85%;
    margin-left: auto !important; /* これで右端の壁にピタッと吸い付く */
    margin-right: 0 !important;
}

/* 4. 吹き出しの中の段落がバラバラにならないように設定 */
.dokuwiki .wrap_bubble p {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    display: block !important;
    width: auto !important;
}
.dokuwiki .wrap_bubble p:last-child {
    margin-bottom: 0 !important;
}