/* Avatar：圓形縮寫 */
.avatar-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
}

.avatar-xxs {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 600;
}

/* 訊息區可滾動 */
.chat-scroll {
    max-height: 54vh;
    overflow: auto;
    padding: 2px;
}

/* 氣泡 */
.chat-bubble {
    max-width: min(78%, 640px);
    border-radius: 16px;
    padding: 10px 12px 6px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

    .chat-bubble .chat-text {
        white-space: pre-wrap;
        word-break: break-word;
    }

    .chat-bubble .chat-time {
        font-size: 12px;
        color: #8a8a8a;
        margin-top: 4px;
        text-align: right;
    }

    /* 左右兩側不同風格 */
    .chat-bubble.peer {
        background: #f5f7fb; /* 左側（客服） */
        border: 1px solid #e6e9f2;
    }

    .chat-bubble.me {
        background: #0d6efd; /* 右側（自己）用 Bootstrap 主色 */
        color: #fff;
    }

/* 自訂 Bootstrap Subtle 樣式（舊版 BS 沒有時） */
.bg-success-subtle {
    background: #eaf7ee !important;
}

.text-success {
    color: #1f8f4e !important;
}

.bg-secondary-subtle {
    background: #f2f2f2 !important;
}

.text-secondary {
    color: #6c757d !important;
}