/* =========================================================
   Overlord [外壳6种淡色轮换 + 内部粉红] 状态栏与UI精美渲染
========================================================= */

ul, ol, li { list-style: none !important; padding: 0 !important; margin: 0 !important; }
details > summary::-webkit-details-marker { display: none !important; }

/* --- 全局正文字体放大 --- */
.markdown-body, .theme-details {
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif !important;
    font-size: 16px !important; /* 从15px放大至16px */
    line-height: 1.7 !important;
    color: #2C3E50 !important;
}

/* --- 1. 状态栏主面板 (基础设置) --- */
.theme-details {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    overflow: visible !important;
    transition: all 0.3s ease !important;
}

.fold-header {
    padding: 12px 16px !important;
    cursor: pointer !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    font-size: 17px !important; /* 标题相应放大 */
    letter-spacing: 1px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    border-radius: 11px !important;
}
details[open] > .fold-header {
    border-radius: 11px 11px 0 0 !important;
}

.fold-content {
    padding: 16px !important;
    background: #FFF5F7 !important; 
    border-radius: 0 0 11px 11px !important;
    overflow: visible !important;
}

/* =========================================================
   外壳颜色 6色轮流排序系统 (绿->蓝->黄->紫->橘->薄荷)
========================================================= */

/* 第1顺位：淡绿外壳 (6n+1) */
.theme-details:nth-of-type(6n+1) {
    box-shadow: 0 5px 15px rgba(136, 224, 160, 0.2) !important;
    border: 1px solid rgba(136, 224, 160, 0.4) !important;
}
.theme-details:nth-of-type(6n+1) > .fold-header { background: linear-gradient(135deg, #88E0A0 0%, #3CB371 100%) !important; }
.theme-details:nth-of-type(6n+1) > .fold-content { border-top: 2px solid #88E0A0 !important; }

/* 第2顺位：淡蓝外壳 (6n+2) */
.theme-details:nth-of-type(6n+2) {
    box-shadow: 0 5px 15px rgba(135, 206, 250, 0.2) !important;
    border: 1px solid rgba(135, 206, 250, 0.4) !important;
}
.theme-details:nth-of-type(6n+2) > .fold-header { background: linear-gradient(135deg, #7AC5FA 0%, #4682B4 100%) !important; }
.theme-details:nth-of-type(6n+2) > .fold-content { border-top: 2px solid #7AC5FA !important; }

/* 第3顺位：淡黄外壳 (6n+3) */
.theme-details:nth-of-type(6n+3) {
    box-shadow: 0 5px 15px rgba(252, 233, 127, 0.2) !important;
    border: 1px solid rgba(252, 233, 127, 0.5) !important;
}
.theme-details:nth-of-type(6n+3) > .fold-header { background: linear-gradient(135deg, #FCE97F 0%, #D4A017 100%) !important; }
.theme-details:nth-of-type(6n+3) > .fold-content { border-top: 2px solid #FCE97F !important; }

/* 第4顺位：淡紫外壳 (6n+4) */
.theme-details:nth-of-type(6n+4) {
    box-shadow: 0 5px 15px rgba(209, 196, 233, 0.3) !important;
    border: 1px solid rgba(209, 196, 233, 0.6) !important;
}
.theme-details:nth-of-type(6n+4) > .fold-header { background: linear-gradient(135deg, #D1C4E9 0%, #9575CD 100%) !important; }
.theme-details:nth-of-type(6n+4) > .fold-content { border-top: 2px solid #D1C4E9 !important; }

/* 第5顺位：淡橘外壳 (6n+5) */
.theme-details:nth-of-type(6n+5) {
    box-shadow: 0 5px 15px rgba(255, 224, 178, 0.3) !important;
    border: 1px solid rgba(255, 224, 178, 0.6) !important;
}
.theme-details:nth-of-type(6n+5) > .fold-header { background: linear-gradient(135deg, #FFE0B2 0%, #FFB74D 100%) !important; }
.theme-details:nth-of-type(6n+5) > .fold-content { border-top: 2px solid #FFE0B2 !important; }

/* 第6顺位：淡薄荷外壳 (6n+6) */
.theme-details:nth-of-type(6n+6) {
    box-shadow: 0 5px 15px rgba(178, 235, 242, 0.3) !important;
    border: 1px solid rgba(178, 235, 242, 0.6) !important;
}
.theme-details:nth-of-type(6n+6) > .fold-header { background: linear-gradient(135deg, #B2EBF2 0%, #4DD0E1 100%) !important; }
.theme-details:nth-of-type(6n+6) > .fold-content { border-top: 2px solid #B2EBF2 !important; }

/* --- 2. 子面板 (内部卡片：粉色系保持不变) --- */
.sub-details {
    background: #FFFFFF !important;
    border: 1px solid #FFB6C1 !important; 
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 8px rgba(255, 182, 193, 0.2) !important;
    overflow: visible !important;
}
.sub-details > summary {
    padding: 10px 14px !important;
    color: #D53F8C !important; 
    font-size: 16px !important; /* 放大字体 */
    font-weight: bold !important;
    cursor: pointer !important;
    background: #FFE4E1 !important; 
    border-bottom: 1px solid #FFB6C1 !important;
    border-radius: 7px !important;
}
details[open] > .sub-details > summary { border-radius: 7px 7px 0 0 !important; }
.sub-body {
    padding: 14px !important;
    background: #FFFFFF !important;
    border-radius: 0 0 7px 7px !important;
    overflow: visible !important;
}

/* --- 3. 悬浮/点击详情框 (最高层级置顶) --- */
.hover-item {
    position: relative !important;
    display: inline-block !important;
    cursor: pointer !important; 
    color: #D53F8C !important; 
    font-weight: bold !important;
    border-bottom: 1px dashed #D53F8C !important;
    margin-right: 6px !important;
    outline: none !important; 
}
.hover-item .item-desc {
    visibility: hidden !important;
    opacity: 0 !important;
    width: 280px !important;
    background-color: #FFFFFF !important;
    color: #333333 !important;
    text-align: left !important;
    border-radius: 8px !important;
    padding: 12px !important;
    position: absolute !important;
    z-index: 99999 !important; 
    bottom: 130% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid #FFB6C1 !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important; /* 放大字体 */
    font-weight: normal !important;
    line-height: 1.6 !important;
}
.hover-item .item-desc::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    margin-left: -6px !important;
    border-width: 6px !important;
    border-style: solid !important;
    border-color: #FFB6C1 transparent transparent transparent !important;
}
.hover-item:hover .item-desc,
.hover-item:focus .item-desc,
.hover-item:active .item-desc {
    visibility: visible !important;
    opacity: 1 !important;
    bottom: 140% !important;
}

/* --- 4. 规整的网格排版系统 --- */
.info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}
.info-grid b { color: #4A90E2 !important; }

hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, #FFB6C1, transparent) !important;
    margin: 10px 0 !important;
}

/* --- 5. 玩家状态：血条/蓝条/经验条 UI --- */
.bar-wrap {
    width: 100% !important;
    height: 18px !important;
    background: #E2E8F0 !important;
    border-radius: 9px !important;
    position: relative !important;
    margin: 4px 0 8px 0 !important;
    border: 1px solid #CBD5E0 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
    overflow: hidden !important; 
}
.bar-fill {
    height: 100% !important;
    border-radius: 9px 0 0 9px !important;
    transition: width 0.5s ease-in-out !important;
}
.hp-bar { background: linear-gradient(90deg, #FC8181, #E53E3E) !important; }
.mp-bar { background: linear-gradient(90deg, #63B3ED, #3182CE) !important; }
.exp-bar { background: linear-gradient(90deg, #F6E05E, #D69E2E) !important; }

.bar-text {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 18px !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important;
    pointer-events: none !important;
}

/* --- 6. 附近的人：从上往下排序，靠左不居中 --- */
.npc-top {
    display: flex !important;
    flex-direction: column !important; /* 改为纵向：图片在上，文字在下 */
    gap: 15px !important;
    margin-bottom: 12px !important;
    align-items: flex-start !important; /* 靠左对齐，取消居中 */
}

.npc-avatar {
    width: 160px !important; 
    height: 240px !important; 
    border-radius: 8px !important;
    background-color: #FFF5F7 !important;
    border: 2px solid #FFB6C1 !important; 
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.5) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    display: block !important; /* 取消flex居中模式 */
}

.npc-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: top left !important; /* 裁切时优先保留图片靠上部分(头部)，不强制居中 */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
}

.npc-intro {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    font-size: 15px !important; /* 放大字体 */
}
.npc-intro b { color: #D53F8C !important; }

.npc-bottom {
    border-top: 1px dashed #FFB6C1 !important;
    padding-top: 12px !important;
    margin-top: 8px !important;
}
.npc-bottom b { color: #4A90E2 !important; }

.bond-card {
    background: #FFFFFF !important;
    border-left: 4px solid #D53F8C !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
    border-radius: 4px 8px 8px 4px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}
.bond-card b { color: #D53F8C !important; }

/* 移动端适配 */
@media (max-width: 600px) {
    .info-grid, .npc-intro { grid-template-columns: 1fr !important; }
    .npc-avatar { width: 140px !important; height: 210px !important; } 
    .hover-item .item-desc { width: 240px !important; }
}
/* =========================================
   顶部栏：透明化与文字可读性优化
========================================= */
/* 顶部主容器透明化 */
.sticky.w-full.top-0.flex.items-center {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* 为透明背景下的文字和图标添加阴影，确保绝对可读性 */
#ai-model-selector .truncate.text-\[13px\],
#ai-model-selector .shrink-0.flex.items-center svg,
.sticky.w-full.top-0 svg.lucide-clock-8,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]),
#header-setting-button svg {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)) !important;
    color: #ffffff !important; /* 强制文字偏白以配合阴影 */
}

/* =========================================
   底部输入栏：浅蓝清新色调
========================================= */
/* 移除默认的底部渐变遮罩 */
.bg-gradient-to-t {
    background: transparent !important; 
}

/* 输入框外层容器 */
#ai-chat-bottom-input {
    background-color: rgba(230, 243, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 20px !important;
    padding: 8px !important;
    box-shadow: 0 -2px 10px rgba(0, 120, 255, 0.05) !important;
}

/* 主输入框 */
#ai-chat-input {
    background-color: #e6f3ff !important;
    color: #003366 !important;
    border: 1px solid #b3d9ff !important;
    border-radius: 15px !important;
}

/* 占位符与文字选中状态 */
#ai-chat-input::placeholder {
    color: #8abceb !important;
}
#ai-chat-input::selection {
    background-color: #99ccff !important;
    color: #000 !important;
}

/* =========================================
   底部按钮：粉红爱心动效风格
========================================= */
#ai-mod-button2 button.MuiButton-root {
    background-color: #ffb7c5 !important; /* 甜美粉色 */
    color: white !important;
    border-radius: 50px !important; /* 极度圆润 */
    border: 2px solid #ff9eb3 !important;
    box-shadow: 0 4px 12px rgba(255, 183, 197, 0.6) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 悬浮时触发“心跳”放大效果 */
#ai-mod-button2 button.MuiButton-root:hover {
    transform: scale(1.15) !important; 
    background-color: #ff9eb3 !important;
    box-shadow: 0 6px 16px rgba(255, 158, 179, 0.8) !important;
}

/* 确保按钮内的图标变白以搭配粉色 */
#ai-mod-button2 button.MuiButton-root svg {
    color: white !important;
    fill: white !important;
}

/* =========================================
   评论区：番茄小说护眼阅读模式 (黄底黑字)
========================================= */
/* 评论区主背景 - 经典护眼暖黄 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background-color: #f6eed8 !important; 
    color: #1a1a1a !important;
}

/* 顶部标题及评分文字 */
div.text-lg.font-bold,
p.MuiTypography-body1.text-grey-600 {
    color: #000000 !important;
}

/* 评论输入框区域 */
div.flex.flex-col.border-gray-200 {
    border-color: #e0d5ba !important;
    background-color: #fdfbf7 !important;
}
textarea.rc-textarea {
    color: #000000 !important;
    caret-color: #ff6600 !important; /* 番茄红光标 */
}

/* 输入字数统计 */
div.bg-gray-100.text-gray-500 {
    background-color: transparent !important;
    color: #887f6b !important;
}

/* 发送评论按钮 - 番茄主题色 */
div.cursor-pointer.group.flex.items-center.justify-center {
    background-color: #ff6600 !important; 
    border-radius: 50% !important;
}
div[data-state="closed"] svg[data-icon="Send03"] {
    color: #ffffff !important;
}

/* 分割线颜色调整融入背景 */
div.style_divider__mW0YX {
    border-color: #e6dcc1 !important;
}

/* 排序按钮 */
button.MuiButton-containedPrimary {
    background-color: #ff6600 !important; /* 选中的番茄橙 */
    color: #ffffff !important;
}
button.MuiButton-outlinedPrimary {
    border-color: #c9bc9d !important;
    color: #333333 !important;
}

/* --- 评论列表项 --- */
/* 用户名 */
div.text-sm.text-grey-600 span.font-bold {
    color: #222222 !important; 
}

/* “（你）” 标签 */
span.text-\[10px\] {
    color: #ff6600 !important; 
    border-color: #ff6600 !important;
}

/* 评论正文 - 强化小说阅读体验 */
div.break-all {
    color: #000000 !important; /* 纯黑字体，绝对可读 */
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important; /* 增加行高，提升阅读舒适度 */
}

/* 时间戳 */
div.text-xs.text-grey-600 {
    color: #8a816c !important; 
}

/* 回复按钮与回复边框 */
span.cursor-pointer {
    color: #ff6600 !important; 
}
div.ml-8.border-l {
    border-color: #dfd4b8 !important; 
}
span.MuiRating-iconFilled svg {
    color: #ff6600 !important;
}
span.text-orange-500 {
    color: #ff6600 !important;
}
/* =========================================
   顶部栏：AI模型选择器“毛玻璃胶囊”美化
========================================= */

/* 模型选择器主按钮容器 */
#ai-model-selector .group.flex.items-center {
    /* 半透明磨砂玻璃背景，适配透明顶部栏 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 24px !important; /* 圆润的胶囊形状 */
    padding: 6px 16px !important; /* 增加内边距撑起按钮感 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 鼠标悬浮时的呼吸发光与上浮动效 */
#ai-model-selector .group.flex.items-center:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15)) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* 强化内部模型名称文字的清晰度与质感 */
#ai-model-selector .truncate.text-\[13px\] {
    font-weight: 600 !important; /* 加粗字体 */
    letter-spacing: 0.5px !important; /* 增加字间距 */
    color: #ffffff !important; 
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important; /* 强阴影确保在亮色背景下依然可读 */
}

/* 强化下拉箭头的视觉效果 */
#ai-model-selector .shrink-0.flex.items-center svg {
    color: #ffffff !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)) !important;
    transition: transform 0.3s ease !important;
}

/* 悬浮时下拉箭头产生微小的互动位移 */
#ai-model-selector .group.flex.items-center:hover svg {
    transform: translateY(2px) !important;
}