/* ========================================
   聊天气泡统一样式 - 唯一来源
   核心原则：msg-content 管宽度上限，气泡管自身样式，各管一层
   ======================================== */

/* === 1. CSS 变量 === */
:root {
    --bubble-max-width: min(65vw, 400px);
    --bubble-padding: 10px 14px;
    --bubble-font-size: 14px;
    --bubble-line-height: 1.5;
    --bubble-radius: 18px;

    /* 颜色变量 - 统一使用 theme-variables.css 里的变量 */
    --nav-text: var(--topbar-meta-color);
    --me-text: var(--bubble-me-text);
    --other-text: var(--bubble-other-text);

    /* 玻璃态变量 */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-shadow: 5px 5px 15px rgba(166, 171, 189, 0.2);
}

/* === 2. msg-content 容器：只负责多段内容纵向排列，不参与气泡宽度计算 === */
#msg-container .msg-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    max-width: none;
    overflow: visible;
}

/* === 3. 气泡样式：统一管理宽度、换行和基础视觉 === */
#msg-container .msg-content .speech-bubble,
#msg-container .msg-content .msg-bubble,
#msg-container .msg-content .bubble,
#msg-container .speech-bubble,
#msg-container .msg-bubble,
#msg-container .bubble {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    max-width: 100%;
    padding: var(--bubble-padding);
    font-size: var(--bubble-font-size);
    line-height: var(--bubble-line-height);
    /* border-radius: 由低权重规则控制 */
    position: relative;
    z-index: 1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    /* 文本排版 */
    box-sizing: border-box;
    min-width: 60px;
    width: fit-content;
    max-width: var(--bubble-max-width);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    text-align: left;
    line-break: loose;
}

/* === 5. 消息行布局 === */
#msg-container .msg-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

#msg-container .msg-row.me {
    flex-direction: row-reverse;
}

/* === 6. 头像样式 === */
#msg-container .msg-row .avatar,
#msg-container .msg-row img.avatar,
#msg-container .msg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.1);
    border: none;
    object-fit: cover;
    flex-shrink: 0;
}

/* === 7. 响应式：只调整气泡最大宽度变量 === */
@media (min-width: 768px) {
    :root {
        --bubble-max-width: min(72vw, 420px);
    }
}

@media (min-width: 1024px) {
    :root {
        --bubble-max-width: min(65vw, 480px);
    }
}

@media (min-width: 1440px) {
    :root {
        --bubble-max-width: 520px;
    }
}

/* ==========================================
   出厂默认：软糯米糍气泡 (纯净版，无 !important)
   权重 30，侧边栏用户可轻松覆盖
   ========================================== */
.msg-row.other .speech-bubble {
    color: var(--bubble-other-text);
    background: var(--bubble-other-bg);
    border-radius: var(--bubble-radius-other, var(--bubble-radius));
    border-bottom-left-radius: 6px;
    border: 1px solid var(--navbar-border);
    box-shadow: var(--bubble-other-shadow);
}

.msg-row.me .speech-bubble {
    color: var(--bubble-me-text);
    background: var(--bubble-me-bg);
    border-radius: var(--bubble-radius-me, var(--bubble-radius));
    border-bottom-right-radius: 6px;
    border: 1px solid var(--navbar-border);
    box-shadow: var(--bubble-me-shadow);
}

.speech-bubble {
    border-radius: var(--bubble-radius, 18px);
    cursor: pointer;
    transform-origin: center bottom;
}

@keyframes jelly-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.95) translateY(1px); filter: brightness(0.92); }
    70%  { transform: scale(1.01); filter: brightness(1.02); }
    100% { transform: scale(1); filter: brightness(1); }
}
.animating {
    animation: jelly-pop 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}