/*
 * 発言ブロックの共通スタイル。
 * 旧サイト (Bootstrap 3 + village-browser.css + werewolf-bootstrap-override.css)
 * の見た目を Bootstrap 5 環境で再現する。
 *
 * 旧 sayKbn と class の対応:
 *  1 white         (通常)  → say-row.say-white     → .message (背景 #fff)
 *  2 red           (囁き)  → say-row.say-red       → .message.bg-danger
 *  3 haka          (墓)    → say-row.say-haka      → .message.bg-info
 *  4 gray          (独白)  → say-row.say-gray      → .message.bg-whitegray
 *  5 system_white  (シス白)→ say-row.say-system    → .message
 *  6 system_gray   (シス灰)→ say-row.say-system-gray  → .message.text-muted
 *  7 system_red    (シス赤)→ say-row.say-system-red   → .message.text-danger
 *
 * 旧構造:
 *   <div class="clearfix sayN" data-chara data-say-kbn>
 *     <span class="small">anchor. キャラ名 9d01:45:01 (1/40) 21字</span>
 *     <div class="row" style="display: flex;">
 *       <div class="faceXX" style="border-radius:50%"></div>
 *       <div class="message [bg-...]" style="flex:1; margin-left:5px;">...</div>
 *     </div>
 *   </div>
 */

/* 発言と発言の間隔。旧 .message { margin-bottom: 20px } と同じ */
.say-row { margin-bottom: 20px; }

/* 上部メタ情報 (アンカー + キャラ名 + 時刻 + (N/M) + 文字数) — 旧 .small 相当 */
.say-row .say-meta {
    font-size: 12px;
    line-height: 1.4;
    color: #888;
    margin-bottom: 0;
    word-break: break-all;
}
.say-row .say-meta .say-anchor {
    color: #337ab7;
    cursor: pointer;
    text-decoration: none;
}
.say-row .say-meta .say-anchor:hover { text-decoration: underline; }

/* face + message の横並び。旧構造は <div style="width:50px"> でアイコン領域確保 */
.say-row .say-content {
    display: flex;
    align-items: flex-start;
}
.say-row .say-face {
    /* .wolf-icon (40x40) を丸く切り抜き、右に 10px の余白を確保
       (旧構造の `<div style="width:50px">` ガターと同等) */
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 10px;
}

/* 発言本文 (.message は旧クラス名そのまま) */
.say-row .message {
    flex: 1;
    font-family: sans-serif;
    padding: 9px;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
    font-size: 12px;
    min-height: 40px;
    word-break: break-all;
    color: #333;
    background-color: #ffffff;
    margin-bottom: 0;
}
/* 旧 Bootstrap 3 の .bg-danger / .bg-info 相当の淡色背景。
   Bootstrap 5 の同名クラスは !important で濃色を当ててくるため別名にしている。 */
.say-row .message.say-bg-danger    { background-color: #f2dede; color: #a94442; border-color: #ebccd1; }
.say-row .message.say-bg-info      { background-color: #d9edf7; color: #31708f; border-color: #bce8f1; }
.say-row .message.say-bg-whitegray { background-color: #e0e0e0; }

/* システムメッセージ: face を持たず .message を全幅で出す */
.say-row.say-system .say-content,
.say-row.say-system-gray .say-content,
.say-row.say-system-red  .say-content { display: block; }
.say-row.say-system .say-message,
.say-row.say-system-gray .say-message,
.say-row.say-system-red  .say-message {
    flex: 1;
    font-family: sans-serif;
    padding: 9px;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
    font-size: 12px;
    min-height: 40px;
    color: #333;
    background-color: #ffffff;
    margin-bottom: 0;
}
.say-row.say-system-gray .say-message { color: #777; }
.say-row.say-system-red  .say-message { color: #ff0000; border-color: #ff0000; }