/* -------------------------------------- */
/*         一、全局及基础样式             */
/* -------------------------------------- */
* {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.8px;
    font-family: "LXGW WenKai", "Source Han Serif SC", "Noto Serif SC", serif;
}
/* -------------------------------------- */
/*         二、对话与加载动画             */
/* -------------------------------------- */

/* AI 对话气泡 */
.group.flex.gap-2 {
    background: #fffbf0 !important; /* 浅黄纸张色 */
    border: 3px solid #8b4513 !important; /* 深棕色边框 */
    border-radius: 0 !important; /* 移除圆角，准备用花纹边框 */
    box-shadow: 
        8px 8px 0px rgba(139, 69, 19, 0.15),
        15px 15px 25px rgba(0, 0, 0, 0.08) !important;
    color: #3a2810 !important; /* 深褐色文字 */
    padding: 20px 25px 25px 25px !important;
    margin: 15px 0 !important;
    position: relative !important;
    
    /* [修改] 更换为武侠风的回纹花边 */
    border-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238b4513' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 0h40v40H0V0zm10 10h20v20H10V10zm4 4h12v12H14V14zm4 4h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E") 10 stretch !important;
    border-image-width: 12px !important;

    /* 关键属性: 为伪元素定位创建上下文，并裁剪溢出的内容 */
    position: relative;
    overflow: hidden;
    font-family: "LXGW WenKai", "Source Han Serif SC", "Noto Serif SC", serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.8px;
}

.group.flex.gap-2 p {
    text-indent: 2em;
}

.group.flex.gap-2 details p {
    text-indent: 0;
}

/* 太极图水印伪元素 */
.group.flex.gap-2::after {
    content: '☯';
    position: absolute;
    z-index: 0; /* 确保在文本下方 */
    
    /* 定位到右下角，并使用负值让其部分“藏”在角落 */
    bottom: -50px;
    right: -50px;
    
    font-size: 250px; /* 巨大的字体大小 */
    line-height: 1; /* 避免影响布局 */
    
    /* 使用半透明的颜色，使其成为水印 */
    color: rgba(141, 90, 43, 0.1); /* 沿用古铜色系，透明度10% */
    
    pointer-events: none; /* 防止遮挡和影响文本选择 */
    transform: rotate(15deg); /* 轻微旋转，更具动感 */
}

/* -------------------------------------- */
/*         四、状态面板与布局             */
/* -------------------------------------- */

/* 面板包裹容器 - 关键：使用gap统一控制间距，确保上下间距相等 */
.panels-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* 统一设置面板间距 */
    margin-bottom: 0px;
}

/* 基础折叠面板样式 */
details {
    background: #F8F0E3;
    color: #4A3728;
    border-radius: 8px;
    border: 1px solid #D3C4A8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: flex-basis 0.4s ease-in-out;
    margin-bottom: 16xp !important; /* 移除独立margin，由wrapper的gap控制 */
}

/* 面板标题 */
summary {
    background: linear-gradient(to right, #6D533D, #5C4033);
    color: #EFEBE2;
    font-weight: bold;
    padding: 12px 20px;
    cursor: pointer;
    list-style: none;
    position: relative;
    transition: background 0.3s ease;
}
summary:hover {
    background: linear-gradient(to right, #7a5c43, #6c4f41);
}
summary::before { content: ''; }

/* 面板内容区域 */
details > div, details > table {
    padding: 15px 20px;
}

/* 动态并排布局核心 */
.panels-wrapper > details {
    flex: 1 1 calc(50% - 8px); /* 基础为50%宽度减半个gap，允许伸缩 */
    min-width: 200px;
}
.panels-wrapper > details[open] {
    flex-basis: 100%; /* 打开时占据100%宽度 */
}
.panels-wrapper:has(> details[open]) > details:not([open]) {
    flex-basis: calc(50% - 8px); /* 容器内有打开项时，未打开的保持50% */
}
.panels-wrapper > details[open] > summary {
    animation: enlarge-title 0.6s ease-in-out; /* 打开时标题播放动画 */
}

/* 面板内各种元素样式 */
.chapter-box { background: #31251E; color: #D3C4A8; padding: 10px 15px; border-radius: 6px; margin-bottom: 16px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); }
.chap-row { padding: 4px 0; font-size: 0.9em; }
.task-heading { color: #8B5A2B; font-weight: bold; margin-top: 10px; margin-bottom: 8px; border-left: 4px solid #8B5A2B; padding-left: 8px; }
.task-details-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; }
.task-label { font-weight: bold; color: #6D533D; }
.task-divider { border: none; height: 1px; background: linear-gradient(to right, transparent, #C8B092, transparent); margin: 20px 0; }
.task-item { font-weight: 600; }
.task-item + span { color: #665747; font-size: 0.9em; padding-left: 1em; }
.char-card { line-height: 1.8; }
.char-card name { font-size: 1.5em; font-weight: bold; color: #5C4033; }
.char-card m { color: #665747; font-size: 0.9em; }
.char-header { margin-bottom: 1em; }
table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
table th, table td { border: 1px solid #D3C4A8; padding: 8px 10px; text-align: left; }
table th { background-color: #E8DDCB; font-weight: bold; }
table tr:nth-of-type(even) { background-color: #FDF6E9; }

table {
    table-layout: fixed !important; /* 核心阵法：强制网格固定，剥夺内容撑开表格的权利 */
    width: 100% !important; /* 锁死宽度，与屏幕同宽 */
}

th, td {
    word-wrap: break-word !important; 
    word-break: break-all !important; /* 斩断连体婴：遇到超长无空格的日期/数字/英文，直接一刀切断强制换行 */
    white-space: normal !important; /* 严禁死磕单行，必须换行 */
}

/* -------------------------------------- */
/*         五、杂项及提示信息             */
/* -------------------------------------- */

/* 模型信息提示 */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j {
    background: #31251E; padding: 4px 10px; border-radius: 4px; border: 1px solid #5C4033;
    display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 8px !important;
}
.MuiStack-root .MuiTypography-root { font-size: 12px !important; font-weight: normal !important; }
.MuiStack-root p.css-6c0gf2 { color: #EFEBE2 !important; } /* 模型名称 */
.MuiStack-root p.css-1x48u03 { color: #D4AF37 !important; } /* token数 */
@media (max-width: 768px) {
    * {
        font-size: 16px ;
        line-height: 1.8 ;
        font-weight: 500;
    }
    
    .group .bg-gray-100\/90 {
        padding: 15px 18px ;
        margin: 12px 0 ;
        border-image-width: 12px; 
    }
    .group .bg-gray-100\/90::after {
        font-size: 150px;
        bottom: -30px;
        right: -50px;
    }

    #ai-chat-input {
        padding: 12px 14px !important;
        min-height: 55px !important;
    }
    
    .flex.items-center.gap-2.pb-2 > button,
    .flex.items-center.gap-2.pb-2 > div > button {
        padding: 6px 12px !important;
        font-size: 14px !important;
    }

    summary { padding: 10px 15px; }
    details > div, details > table { padding: 10px 15px; }
    
    .flex.items-center.justify-center:has(.style_dot-flashing__8L91Q)::before { font-size: 30px; }
    .flex.items-center.justify-center:has(.style_dot-flashing__8L91Q)::after { font-size: 14px; }
}