<div class="universal-ai-bubble">
    <div class="bubble-accent"></div>
    <div class="bubble-body">
        <div class="bubble-message">{message_content}</div>
    </div>
</div>


/* --- 1. AI 气泡主体 (保持不变，维持阅读舒适度) --- */
.universal-ai-bubble { 
    display: flex;     
    align-items: flex-start;         
    gap: 12px;    
    margin: 16px 0;
    animation: fadeInUp 0.3s ease-out;
    max-width: 100%;
    position: relative;
}

.bubble-accent {
    width: 3px;
    min-height: 48px;
    background: linear-gradient(135deg, #d4bb94, #bfa27b);
    border-radius: 4px;
    margin-top: 10px;
    flex-shrink: 0;
}

.bubble-body {
    background: #fbf5e8;
    border-radius: 12px 24px 24px 12px;
    padding: 16px 20px 16px 30px; 
    box-shadow: 0 2px 10px rgba(140, 100, 80, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(180, 130, 110, 0.3);
    flex: 1;
    position: relative; 
}

.bubble-body::before {
    content: "✦"; 
    position: absolute;
    top: 12px;
    left: 12px;
    color: #cda886;
    font-size: 14px;
    opacity: 0.8;
    line-height: 1;
}

.bubble-body::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    border-top: 1px solid rgba(205, 168, 134, 0.6);
    border-left: 1px solid rgba(205, 168, 134, 0.6);
    border-top-left-radius: 8px;
}

.bubble-message {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 15px;
    line-height: 1.7;
    color: #4a4238;
}

.dialogue {
    color: #9e5b50;
    font-weight: 600;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 2. 状态栏 (Details) 极致瘦身版 --- */
details {
    background-color: #faf7f2;
    border: 1px solid #eaddd3;
    /* 【变细】左侧强调线从 4px 缩小到 2px，显得更秀气 */
    border-left: 2px solid #cda886; 
    /* 【变小】圆角从 6px 收敛到 4px，看起来更利落 */
    border-radius: 4px;
    margin-bottom: 8px;
    /* 【变小】大幅度压缩上下左右的内边距，让框体紧贴文字 */
    padding: 6px 10px;
    /* 【变浅】阴影调得更轻薄 */
    box-shadow: 0 1px 4px rgba(120, 90, 70, 0.03);
    transition: all 0.3s ease;
}

details:hover {
    box-shadow: 0 3px 8px rgba(120, 90, 70, 0.06);
    border-color: #dcc8b8;
}

summary {
    font-weight: 600;
    color: #5c4b41;
    cursor: pointer;
    outline: none;
    list-style: none;
    display: flex;
    align-items: center;
    /* 【变小】拉近标题与下方内容的距离 */
    padding-bottom: 2px;
    border-bottom: none; 
    margin-bottom: 4px;
    /* 【变小】标题字号从 14px 降为 13px */
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* 替换原本的 summary::after */
summary::after {
content: "· ✧ ⋆ ✧ ·"; /* 复古尾花符号 */
flex: none; /* 不拉伸，保持原本小巧的尺寸 */
margin-left: 10px;
color: #cda886;
font-size: 11px;
letter-spacing: 2px;
font-weight: normal;
opacity: 0.8;
}

summary::before {
    content: "▶";
    /* 【变小】箭头也同步缩小 */
    font-size: 9px;
    margin-right: 6px;
    color: #cda886;
    transition: transform 0.25s ease;
}

details[open] summary::before {
    transform: rotate(90deg);
}

details p {
    /* 【变小】段落上下间距压实到 2px */
    margin: 2px 0;
    line-height: 1.4;
    color: #6b5a4f;
    /* 【变小】正文字号降为 12px（数据面板的黄金字号） */
    font-size: 12px;
    padding-left: 2px;
}

details p:last-child {
    margin-bottom: 0;
}

details p strong {
    color: #4a4238;
}

/* 台词内容 */
.dialogue {
  color: #7B5A3C;
  font-weight:600;
}