/* 群聊消息布局 — 重构版，无 !important */

/* 头像必须在气泡左边（row方向），禁止换行 */
#echo .msg-row.other,
#echo .msg-row.ai {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
    width: auto;
    max-width: 100%;
}

/* 头像固定尺寸，不收缩，顶部对齐 */
#echo .msg-row.other .msg-avatar,
#echo .msg-row.ai .msg-avatar,
#echo .msg-row.other .chat-avatar,
#echo .msg-row.ai .chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    flex-shrink: 0;
    margin-top: 0;
    align-self: flex-start;
}

/* 右侧主内容区：纵向 Flex，名字在上，气泡在下 */
#echo .msg-row.other .msg-main-content,
#echo .msg-row.ai .msg-main-content,
#echo .msg-row.other .msg-bubble-wrap,
#echo .msg-row.ai .msg-bubble-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 70%;
}

/* 名字标签：紧贴气泡上方 */
#echo .msg-row.other .name-tag,
#echo .msg-row.ai .name-tag {
    font-size: 11px;
    color: var(--name-tag-color);
    background: var(--name-tag-bg);
    margin: 0;
    padding: 0 4px;
    line-height: 1.2;
    position: static;
}

/* 气泡本体：确保顶部对齐 */
#echo .msg-row.other .msg-content,
#echo .msg-row.other .speech-bubble,
#echo .msg-row.other .msg-bubble,
#echo .msg-row.ai .msg-content,
#echo .msg-row.ai .speech-bubble,
#echo .msg-row.ai .msg-bubble {
    margin: 0;
    align-self: flex-start;
}

/* 语音气泡区域：确保不会超出容器导致换行 */
#echo .msg-row.other .voice-message-group,
#echo .msg-row.ai .voice-message-group {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    align-items: flex-start;
}

/* 头像容器 */
#echo .msg-row .avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex-shrink: 0;
    position: relative;
    width: 36px;
    height: 36px;
}

/* name-tag 在 avatar-wrap 内时绝对定位（悬浮在头像上方） */
#echo .msg-row .avatar-wrap .name-tag {
    position: absolute;
    top: -16px;
    left: 0;
    white-space: nowrap;
}