/* ═══════════════════════ 聊天框主体 · SmartArt卡片式 ═══════════════════════ */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #2a1a2e 0%, #1f1420 100%) !important;
    border: 1px solid rgba(220, 140, 148, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(220, 140, 148, 0.08) inset !important;
    padding: 18px 20px !important;
    max-width: 100% !important;
}

/* 输入聊天框差异化 —— 偏冷调，与AI输出区分 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: linear-gradient(135deg, #1e1a2e 0%, #161320 100%) !important;
    border: 1px solid rgba(180, 160, 200, 0.3) !important;
}

/* 移除顶部装饰条 */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* ═══════════════════════ 正文文本 ═══════════════════════ */
.markdown-body {
    color: #f0e0e3 !important;
    font-family: 'STKaiti', 'KaiTi', '楷体', 'Noto Serif SC', serif !important;
    font-size: 16px !important;
    line-height: 1.95 !important;
    letter-spacing: 0.5px !important;
    background: transparent !important;
}

.markdown-body p {
    color: #f0e0e3 !important;
    margin: 0.6em 0 !important;
}

.markdown-body strong {
    color: #ffc4cc !important;
    font-weight: bold !important;
}

.markdown-body em {
    color: #e6b8d0 !important;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    color: #ffd4d8 !important;
    font-family: 'STKaiti', 'KaiTi', '楷体', serif !important;
    border-bottom: 1px dashed rgba(220, 140, 148, 0.35) !important;
    padding-bottom: 6px !important;
}

.markdown-body blockquote {
    background: rgba(60, 35, 55, 0.5) !important;
    border-left: 3px solid #dc8c94 !important;
    color: #e0d0d5 !important;
    padding: 10px 15px !important;
    border-radius: 4px !important;
}

/* ═══════════════════════ 折叠栏目 · SmartArt方框 ═══════════════════════ */
/* 每个 details 独立卡片 —— 边界分明 */
.markdown-body details {
    background: linear-gradient(135deg, #3a2338 0%, #2a1929 100%) !important;
    border: 1.5px solid rgba(220, 140, 148, 0.5) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin: 14px 0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(220, 140, 148, 0.06) !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.markdown-body details:hover {
    border-color: rgba(220, 140, 148, 0.8) !important;
    box-shadow: 0 6px 20px rgba(220, 100, 130, 0.25) !important;
}

/* summary 标题栏 —— 明显的分区标签感 */
.markdown-body details summary {
    color: #ffd8dc !important;
    font-weight: bold !important;
    font-size: 15px !important;
    letter-spacing: 2px !important;
    padding: 8px 14px !important;
    background: linear-gradient(90deg, rgba(120, 50, 70, 0.7), rgba(80, 40, 60, 0.5)) !important;
    border-radius: 6px !important;
    border-left: 4px solid #dc8c94 !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
    list-style: none !important;
    display: block !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.markdown-body details summary::before {
    content: '❦ ' !important;
    color: #ffc4cc !important;
    margin-right: 4px !important;
}

.markdown-body details summary::-webkit-details-marker {
    display: none !important;
}

.markdown-body details[open] summary {
    background: linear-gradient(90deg, rgba(160, 70, 90, 0.8), rgba(110, 50, 80, 0.6)) !important;
    border-bottom: 2px solid rgba(220, 140, 148, 0.4) !important;
}

/* 折叠栏内容 —— 与外部正文明确区分 */
.markdown-body details > *:not(summary) {
    color: #f0e0e3 !important;
    font-size: 14.5px !important;
    line-height: 1.9 !important;
    padding: 4px 6px !important;
}

.markdown-body details p,
.markdown-body details li {
    color: #e8d5d8 !important;
    margin: 4px 0 !important;
}

.markdown-body details strong {
    color: #ffc4cc !important;
}

.markdown-body details em {
    color: #f4b8be !important;
    font-style: normal !important;
}

/* 嵌套列表美化 */
.markdown-body details ul,
.markdown-body details ol {
    padding-left: 22px !important;
    margin: 6px 0 !important;
}

.markdown-body details li {
    padding: 2px 0 !important;
}

/* 表格美化（记忆区可能用到） */
.markdown-body table {
    background: rgba(30, 20, 30, 0.6) !important;
    border: 1px solid rgba(220, 140, 148, 0.35) !important;
    border-radius: 6px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

.markdown-body table th {
    background: linear-gradient(135deg, #78324a, #502840) !important;
    color: #ffd8dc !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
}

.markdown-body table td {
    background: rgba(40, 25, 40, 0.5) !important;
    color: #e0d0d3 !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-top: 1px solid rgba(220, 140, 148, 0.15) !important;
}

/* ═══════════════════════ 底部附加元素 ═══════════════════════ */
/* 操作按钮 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #e8d5d8 !important;
    font-family: 'STKaiti', 'KaiTi', '楷体', serif !important;
    transition: color 0.3s !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #ffc4cc !important;
}

/* 模型名称 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #d0b8c0 !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
}

/* Token消耗 */
.text-orange-500 {
    color: #e8b880 !important;
    font-size: 12px !important;
}

/* ═══════════════════════ 加载动画（SVG SMIL 花瓣旋转） ═══════════════════════ */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    min-width: 40px !important;
    min-height: 40px !important;
    isolation: isolate !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 32px !important;
    height: 32px !important;
    transform: translate(-50%, -50%) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g><circle cx='20' cy='8' r='3' fill='%23dc8c94'/><circle cx='32' cy='20' r='3' fill='%23f4b8be' opacity='0.8'/><circle cx='20' cy='32' r='3' fill='%23dc8c94' opacity='0.6'/><circle cx='8' cy='20' r='3' fill='%23f4b8be' opacity='0.4'/><animateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='1.4s' repeatCount='indefinite'/></g></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    z-index: 1 !important;
}

.flex.items-center.justify-center.w-6.h-5::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 14px !important;
    transform: translate(-50%, -50%) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='4' fill='%23ffd8dc'><animate attributeName='r' values='4;6;4' dur='1.4s' repeatCount='indefinite'/><animate attributeName='opacity' values='0.6;1;0.6' dur='1.4s' repeatCount='indefinite'/></circle></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    z-index: 2 !important;
}

/* CSS增强动画（作为SMIL的补充，被禁用时不影响主视觉） */
@keyframes petal-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ═══════════════════════ 移动端适配 ═══════════════════════ */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        padding: 14px 14px !important;
        border-radius: 10px !important;
    }
    .markdown-body {
        font-size: 15px !important;
        line-height: 1.85 !important;
    }
    .markdown-body details {
        padding: 10px 12px !important;
        margin: 10px 0 !important;
        border-radius: 8px !important;
    }
    .markdown-body details summary {
        font-size: 14px !important;
        letter-spacing: 1.5px !important;
        padding: 6px 10px !important;
    }
    .markdown-body details > *:not(summary) {
        font-size: 13.5px !important;
        line-height: 1.8 !important;
    }
    .markdown-body table th,
    .markdown-body table td {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
    .flex.items-center.justify-center.w-6.h-5 {
        min-width: 34px !important;
        min-height: 34px !important;
    }
    .flex.items-center.justify-center.w-6.h-5::before {
        width: 26px !important;
        height: 26px !important;
    }
}

/* 低动效模式 */
@media (prefers-reduced-motion: reduce) {
    .flex.items-center.justify-center.w-6.h-5::before {
        opacity: 0.85 !important;
    }
    .markdown-body details {
        transition: none !important;
    }
}