/* ==================== 1. 聊天框基础样式：粉紫渐变背景适配平台 ==================== */
/* 替换原 .bg-gray-100... 为平台级物理气泡容器选择器 */
.group.is-user > div:first-child,
.group.is-assistant > div:first-child {
    background: linear-gradient(135deg, #FFD1DC, #E6E6FA) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(218, 112, 214, 0.15) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    isolation: isolate !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 16px !important;
}

/* ==================== 2. 背景动效：SVG缓缓升起的半透明气泡 ==================== */
.group.is-user > div:first-child::before,
.group.is-assistant > div:first-child::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important; /* 沉入底层，绝不遮挡文字 */
    pointer-events: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Ccircle cx='20%25' cy='100%25' r='12' fill='%23FFB6C1' opacity='0.3'%3E%3Canimate attributeName='cy' values='110%25;-10%25' dur='15s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='80%25' cy='100%25' r='18' fill='%239370DB' opacity='0.2'%3E%3Canimate attributeName='cy' values='120%25;-20%25' dur='20s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

/* ==================== 3. 核心文本与高亮适配 ==================== */
/* 针对平台渲染区进行覆盖，确保浅色背景下的深色字体可读性 */
.rili-markdown-renderer,
.rili-markdown-renderer p,
.rili-markdown-renderer span {
    color: #3D3D3D !important;
    font-family: "Microsoft YaHei", system-ui, sans-serif !important;
    line-height: 1.6 !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* 平台附加元素联动：深色化处理底部消耗与按钮，防止白底白字不可见 */
.text-xs.font-mono.text-muted-foreground,
.bg-muted.rounded.flex button svg.lucide {
    color: rgba(61, 61, 61, 0.7) !important;
    stroke: rgba(61, 61, 61, 0.7) !important;
}

/* 隐藏可能干扰的顶部装饰条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 隐藏平台自带加载动画圆点，防止破坏美感 */
.flex.gap-2.w-full.h-full.items-center.justify-center > span { 
    display: none !important; 
}

/* ==================== 以下为完全保留的用户专属定制代码 ==================== */

/* ==================== 5. 对话气泡样式 ==================== */

/* 女主对话气泡：粉红暖色调，左对齐 */
.rili-markdown-renderer dialogf, dialogf {
    display: block !important;
    background: linear-gradient(135deg, #FFE5EC, #FFC1D5) !important;
    border: 1.5px solid rgba(255, 105, 180, 0.4) !important;
    border-radius: 18px 18px 18px 4px !important;
    padding: 12px 16px !important;
    margin: 10px 25% 10px 0 !important;
    max-width: 70% !important;
    width: fit-content !important;
    box-shadow: 0 4px 16px rgba(255, 105, 180, 0.15) !important;
    color: #AD1457 !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
}

/* 男主对话气泡：蓝紫冷色调，右对齐 */
.rili-markdown-renderer dialogm, dialogm {
    display: block !important;
    background: linear-gradient(135deg, #E8EAF6, #C5CAE9) !important;
    border: 1.5px solid rgba(103, 58, 183, 0.4) !important;
    border-radius: 18px 18px 4px 18px !important;
    padding: 12px 16px !important;
    margin: 10px 0 10px auto !important;
    max-width: 70% !important;
    width: fit-content !important;
    box-shadow: 0 4px 16px rgba(103, 58, 183, 0.15) !important;
    color: #4527A0 !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
    margin-left: auto !important;
}

/* ==================== 6. 折叠面板样式 ==================== */

details {
    margin: 12px 0 !important;
    border: 1.5px solid rgba(218, 112, 214, 0.3) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.1) !important;
    position: relative !important;
    z-index: 1 !important;
}

summary {
    cursor: pointer !important;
    padding: 10px 14px !important;
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.5), rgba(221, 160, 221, 0.5)) !important;
    font-weight: bold !important;
    color: #6A1B9A !important;
    font-size: 15px !important;
    list-style: none !important;
    border-bottom: 1px solid rgba(218, 112, 214, 0.2) !important;
    transition: background 0.2s ease !important;
}

summary:hover {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.7), rgba(221, 160, 221, 0.7)) !important;
}

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

details[open] {
    border-color: rgba(218, 112, 214, 0.5) !important;
    box-shadow: 0 4px 12px rgba(147, 112, 219, 0.18) !important;
}

details[open] > summary {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.7), rgba(221, 160, 221, 0.7)) !important;
    border-bottom: 2px solid rgba(218, 112, 214, 0.4) !important;
}

/* ==================== 7. 表格美化 (兼容Markdown表格) ==================== */

table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

thead tr {
    background: linear-gradient(135deg, rgba(230, 230, 250, 0.8), rgba(221, 160, 221, 0.6)) !important;
}

thead th {
    padding: 10px 12px !important;
    text-align: left !important;
    font-weight: bold !important;
    color: #6A1B9A !important;
    border-bottom: 2px solid rgba(218, 112, 214, 0.4) !important;
    font-size: 14px !important;
}

tbody tr {
    border-bottom: 1px solid rgba(218, 112, 214, 0.15) !important;
    transition: background 0.2s ease !important;
}

tbody tr:hover {
    background: rgba(255, 240, 245, 0.5) !important;
}

tbody td {
    padding: 8px 12px !important;
    color: #4A148C !important;
    font-size: 13px !important;
    vertical-align: top !important;
}

/* 针对非记忆区的双列表格第一列加粗 */
details:not(:has(summary:contains("星记忆区"))) tbody td:first-child {
    font-weight: bold !important;
    color: #7B1FA2 !important;
    background: rgba(243, 229, 245, 0.4) !important;
    width: 28% !important;
}

/* ==================== 8. 剧情分支选择美化 ==================== */

/* 精确定位包含“剧情分支”的面板内的段落 */
details:has(summary:contains("剧情分支")) p {
    margin: 8px 12px !important;
    padding: 8px 12px !important;
    background: rgba(255, 240, 245, 0.6) !important;
    border-left: 3px solid #EC407A !important;
    border-radius: 6px !important;
    color: #880E4F !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

details:has(summary:contains("剧情分支")) p strong {
    color: #AD1457 !important;
    font-weight: 900 !important;
}

/* ==================== 9. 嵌套折叠面板（星记忆回廊配置等） ==================== */

details details {
    margin: 8px 10px !important;
    border: 1px solid rgba(186, 104, 200, 0.3) !important;
    border-radius: 8px !important;
    background: rgba(248, 237, 250, 0.5) !important;
    padding-bottom: 8px !important;
}

details details > summary {
    padding: 8px 10px !important;
    font-size: 13px !important;
    background: rgba(225, 190, 231, 0.5) !important;
    color: #6A1B9A !important;
    margin-bottom: 8px !important;
}

details details[open] > summary {
    background: rgba(225, 190, 231, 0.7) !important;
}

/* 记忆配置区的纯文本排版美化 */
details:has(summary:contains("配置")) {
    color: #6A1B9A !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    padding: 0 12px 8px 12px !important;
}

/* ==================== 10. 移动端适配 ==================== */

@media (max-width: 480px) {
    .group.is-user > div:first-child, .group.is-assistant > div:first-child { padding: 12px !important; }
    dialogm, dialogf { max-width: 85% !important; padding: 10px 14px !important; margin-left: 0 !important; margin-right: 0 !important; }
    dialogm { margin-left: auto !important; }
    thead th, tbody td { padding: 8px 10px !important; font-size: 12px !important; }
}