/* =========================================
   【玄霄金卷】 仙侠风全界面美化方案
   核心色调：玄墨、暗金、朱砂 (绝无纯白字体)
========================================= */

/* -----------------------------------------
   1. 顶部栏 (九天穹顶)
----------------------------------------- */
.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(180deg, #14110f 0%, #241e1a 100%) !important;
    border-bottom: 2px solid #8b2500 !important; /* 朱砂红底边 */
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15) !important; /* 暗金微光 */
}

/* 模型名称与顶部文字 */
#ai-model-selector .truncate.text-\[13px\] {
    color: #eaddc5 !important; /* 暖玉色，替代白色 */
    font-family: "STKaiti", "Microsoft YaHei", serif !important;
    font-size: 15px !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.6) !important;
}

/* 顶部图标颜色覆写 */
.sticky.w-full.top-0.flex.items-center svg {
    color: #d4af37 !important; /* 暗金色 */
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.5)) !important;
}

/* -----------------------------------------
   2. 聊天主背景 (玄冥幻境)
----------------------------------------- */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: #110e0c !important; /* 极深墨色背景，确保不改动布局 */
}

/* 顶部评论数量文字 */
div.text-lg.font-bold {
    color: #d4af37 !important;
    font-family: "STZhongsong", serif !important;
    letter-spacing: 2px !important;
    border-bottom: 1px dashed #5c4d3c !important;
    padding-bottom: 5px !important;
}

/* -----------------------------------------
   3. 聊天气泡 & 文字表现 (玉简阵纹)
----------------------------------------- */
/* 气泡主容器 */
div.group.ml-0 {
    background: linear-gradient(135deg, #1f1a17 0%, #14110f 100%) !important;
    border: 1px solid #4a3e31 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.03), 0 4px 10px rgba(0,0,0,0.6) !important;
    position: relative !important;
    margin-bottom: 20px !important;
    padding: 15px !important;
    transition: all 0.3s ease !important;
}

/* 气泡悬浮时灵气微亮 */
div.group.ml-0:hover {
    border-color: #8b2500 !important;
    box-shadow: inset 0 0 20px rgba(139, 37, 0, 0.1), 0 6px 15px rgba(0,0,0,0.8) !important;
}

/* 修仙阵纹边角装饰 (左上与右下) - 绝对不遮挡文字 */
div.group.ml-0::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 25px; height: 25px;
    border-top: 2px solid #d4af37 !important;
    border-left: 2px solid #d4af37 !important;
    border-top-left-radius: 4px !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
}
div.group.ml-0::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 25px; height: 25px;
    border-bottom: 2px solid #d4af37 !important;
    border-right: 2px solid #d4af37 !important;
    border-bottom-right-radius: 4px !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* 正文文字颜色与排版 (暖玉色，绝无纯白) */
div.break-all {
    color: #e8dcc8 !important; 
    font-family: "STZhongsong", "Microsoft YaHei", serif !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
    text-shadow: 0 0 1px rgba(232, 220, 200, 0.1) !important; /* 极微弱的灵光，保证清晰 */
}

/* -----------------------------------------
   4. 头像与名称 (真气护体动画)
----------------------------------------- */
/* 用户名与称号 */
div.text-sm.text-grey-600 span.font-bold {
    color: #d4af37 !important;
    font-family: "STKaiti", serif !important;
    font-size: 15px !important;
}
span.text-\[10px\] {
    color: #8b2500 !important; /* (你) 的标签改为朱砂红 */
}

/* 头像真气呼吸动画 */
@keyframes qiBreathing {
    0% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.3), 0 0 10px rgba(139, 37, 0, 0.2); border-color: #5c4d3c; }
    50% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.7), 0 0 20px rgba(139, 37, 0, 0.5); border-color: #d4af37; }
    100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.3), 0 0 10px rgba(139, 37, 0, 0.2); border-color: #5c4d3c; }
}
div.group img.rounded-full {
    border: 2px solid #5c4d3c !important;
    animation: qiBreathing 4s infinite ease-in-out !important; /* 思考/护体动画 */
}

/* -----------------------------------------
   5. 状态栏美化 (修仙玉简卷轴)
----------------------------------------- */
/* 折叠框外层 */
div.break-all details {
    background: linear-gradient(to right, rgba(36, 30, 26, 0.95), rgba(20, 17, 15, 0.95)) !important;
    border: 1px solid #5c4d3c !important;
    border-left: 4px solid #8b2500 !important; /* 左侧朱砂红封边 */
    border-radius: 4px !important;
    margin: 15px 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
}

/* 标题栏 (玉简封条) */
div.break-all summary {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.15), transparent) !important;
    color: #d4af37 !important;
    padding: 12px 18px !important;
    font-weight: bold !important;
    font-family: "STKaiti", serif !important;
    font-size: 16px !important;
    cursor: pointer !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.3s ease !important;
    letter-spacing: 3px !important;
}
div.break-all details[open] summary {
    border-bottom: 1px solid #4a3e31 !important;
    background: linear-gradient(90deg, rgba(139, 37, 0, 0.2), transparent) !important;
    color: #eaddc5 !important;
}

/* 状态栏内的表格美化 */
div.break-all table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 10px 0 !important;
}
div.break-all th {
    background: rgba(139, 37, 0, 0.3) !important;
    color: #f0e6d2 !important;
    border: 1px solid #5c4d3c !important;
    padding: 10px !important;
    font-family: "STKaiti", serif !important;
}
div.break-all td {
    border: 1px solid #4a3e31 !important;
    color: #d1c5b4 !important;
    padding: 10px !important;
}

/* -----------------------------------------
   6. 底部输入与操作区 (造化熔炉)
----------------------------------------- */
/* 底部渐变遮罩 */
#ai-chat-bottom-input {
    background: linear-gradient(to top, #0a0807 60%, transparent) !important;
}

/* 核心输入框 (聚气特效) */
#ai-chat-input {
    background: rgba(26, 22, 20, 0.85) !important;
    border: 1px solid #5c4d3c !important;
    color: #eaddc5 !important; /* 暖玉色文字 */
    border-radius: 8px !important;
    font-family: "STZhongsong", serif !important;
    box-shadow: 0 0 15px rgba(0,0,0,0.5) !important;
    transition: all 0.4s ease !important;
}
#ai-chat-input::placeholder {
    color: #7a6b58 !important;
}
#ai-chat-input::selection {
    background: rgba(212, 175, 55, 0.4) !important;
    color: #fff8e7 !important;
}

/* 输入框聚焦时的灵气汇聚动画 */
@keyframes inputQiGather {
    0% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.2), inset 0 0 5px rgba(212, 175, 55, 0.1); border-color: #d4af37; }
    100% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.6), inset 0 0 15px rgba(212, 175, 55, 0.2); border-color: #ffd700; }
}
#ai-chat-input:focus {
    outline: none !important;
    animation: inputQiGather 1.5s infinite alternate !important;
}

/* 字数统计 */
div.bg-gray-100.text-gray-500 {
    background: transparent !important;
    color: #8b7355 !important;
    font-family: "STKaiti", serif !important;
}

/* 发送按钮 (飞剑传书) */
div[data-state="closed"] svg[data-icon="Send03"] {
    color: #d4af37 !important;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.6)) !important;
    transition: transform 0.3s !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover svg[data-icon="Send03"] {
    transform: translateX(3px) scale(1.1) !important;
    color: #ffeb73 !important;
}

/* -----------------------------------------
   7. 底部按钮改名与修仙化 (法器铭文)
----------------------------------------- */
/* 隐藏原生文字，重塑按钮外观 */
#ai-mod-button2 button.MuiButton-root {
    font-size: 0 !important; /* 隐藏原文字 */
    background: linear-gradient(180deg, #2a231e 0%, #1a1614 100%) !important;
    border: 1px solid #5c4d3c !important;
    border-radius: 4px !important;
    padding: 6px 16px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* 注入修仙词汇 */
#ai-mod-button2 button.MuiButton-root::before {
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #d4af37 !important; /* 暗金字 */
    font-family: "STKaiti", "Microsoft YaHei", serif !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.3) !important;
}

/* 按顺序赋予修仙法号 (涵盖常见按钮) */
#ai-mod-button2 button.MuiButton-root:nth-child(1)::before { content: '天道法则' !important; } /* 对应 Mod/设定 */
#ai-mod-button2 button.MuiButton-root:nth-child(2)::before { content: '衍化万物' !important; } /* 对应 流式/生成 */
#ai-mod-button2 button.MuiButton-root:nth-child(3)::before { content: '须弥芥子' !important; } /* 对应 记忆/存储 */
#ai-mod-button2 button.MuiButton-root:nth-child(4)::before { content: '神识传音' !important; } /* 对应 语音/其他 */
#ai-mod-button2 button.MuiButton-root:nth-child(5)::before { content: '逆转乾坤' !important; } /* 对应 撤销/重置 */

/* 按钮悬浮特效 (法器激活) */
#ai-mod-button2 button.MuiButton-root:hover {
    border-color: #d4af37 !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4), inset 0 0 8px rgba(139, 37, 0, 0.3) !important;
}
#ai-mod-button2 button.MuiButton-root:hover::before {
    color: #ffeb73 !important;
}

/* 原生图标颜色统一 */
#ai-mod-button2 button.MuiButton-root svg {
    color: #d4af37 !important;
    margin-right: 5px !important;
    width: 16px !important;
    height: 16px !important;
}

/* -----------------------------------------
   8. 分页栏与杂项 (星宿流转)
----------------------------------------- */
/* 排序按钮 */
button.MuiButton-containedPrimary {
    background: #8b2500 !important; /* 选中的排序为朱砂红 */
    color: #f0e6d2 !important;
    border: 1px solid #d4af37 !important;
}
button.MuiButton-outlinedPrimary {
    color: #d4af37 !important;
    border: 1px solid #5c4d3c !important;
}

/* 分页按钮 */
.MuiPaginationItem-root {
    color: #a3907c !important;
    border: 1px solid #3d3328 !important;
    background: #14110f !important;
    font-family: serif !important;
}
.MuiPaginationItem-root.Mui-selected {
    background: linear-gradient(135deg, #8b2500, #4a1400) !important;
    color: #f0e6d2 !important;
    border-color: #d4af37 !important;
    box-shadow: 0 0 10px rgba(139, 37, 0, 0.8) !important;
}
.MuiPaginationItem-icon {
    color: #d4af37 !important;
}

/* 评分星星 (命星) */
span.MuiRating-iconEmpty svg { color: #3d3328 !important; }
span.MuiRating-iconFilled svg { 
    color: #d4af37 !important; 
    filter: drop-shadow(0 0 4px #d4af37) !important; 
}
span.text-orange-500 { color: #d4af37 !important; }

/* 分割线 (剑痕) */
div.style_divider__mW0YX {
    background: linear-gradient(90deg, transparent, #8b2500, transparent) !important;
    height: 1px !important;
    opacity: 0.6 !important;
}

/* 回复按钮 (点化) */
span.cursor-pointer {
    color: #d4af37 !important;
    transition: all 0.3s !important;
}
span.cursor-pointer:hover {
    color: #ffeb73 !important;
    text-shadow: 0 0 5px #d4af37 !important;
}