/* ==========================================================================
CSS 标准化重构 - 统一配色与增强对比度
========================================================================== */
/* ==========================================================================
主容器样式系统
========================================================================== */
/* 主容器基础样式 */
.group .bg-gray-100\/90 {
background: #FFFFFF !important;
border: 2px solid #000000 !important;
border-radius: 8px !important;
box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.7) !important;
color: #000000 !important;
padding: 24px !important;
font-family: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif !important;
font-size: 16px !important;
line-height: 1.8 !important;
font-weight: 400 !important;
text-shadow: none !important;
position: relative !important;
overflow: hidden !important;
}
/* 移除伪元素装饰 */
.group .bg-gray-100\/90::before {
content: none !important;
}
/* 文本选择样式 */
.group .bg-gray-100\/90 ::selection {
background: rgba(0, 170, 255, 0.25) !important;
color: #000000 !important;
text-shadow: none !important;
}
/* 主容器内文本样式 */
.group .bg-gray-100\/90 strong,
.group .bg-gray-100\/90 b {
color: #ff003c !important;
font-weight: 700 !important;
text-shadow: 0 0 5px rgba(255, 0, 60, 0.5) !important;
}
/* 主容器内链接样式 */
.group .bg-gray-100\/90 a {
color: #00aaff !important;
border-bottom: 1px solid rgba(0, 170, 255, 0.5) !important;
text-decoration: none !important;
font-weight: 600 !important;
transition: all 0.2s ease !important;
}
.group .bg-gray-100\/90 a:hover {
background: rgba(0, 170, 255, 0.1) !important;
border-bottom-color: #00aaff !important;
}
/* 主容器内代码样式 */
.group .bg-gray-100\/90 code {
background: rgba(0, 0, 0, 0.05) !important;
color: #000000 !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
font-family: 'SF Mono', 'Courier New', monospace !important;
padding: 3px 6px !important;
font-size: 14px !important;
border-radius: 3px !important;
}
/* ==========================================================================
交互组件样式
========================================================================== */
/* 按钮基础样式 */
.flex.items-center.gap-2.pb-2 > button {
background: #FFFFFF !important;
border: 2px solid #000000 !important;
border-radius: 4px !important;
box-shadow: 3px 3px 0px #000000 !important;
color: #000000 !important;
font-weight: bold !important;
padding: 6px 16px !important;
text-transform: none !important;
transition: all 0.1s ease-in-out !important;
font-family: 'Noto Sans SC', sans-serif !important;
font-size: 12px !important;
text-shadow: none !important;
min-height: 28px !important;
line-height: 1.2 !important;
}
/* 按钮悬停效果 */
.flex.items-center.gap-2.pb-2 > button:hover {
background: #00aaff !important;
border-color: #000000 !important;
color: #FFFFFF !important;
transform: translate(3px, 3px) !important;
box-shadow: none !important;
}
/* 按钮激活状态 */
.flex.items-center.gap-2.pb-2 > button:active {
transform: translate(3px, 3px) !important;
box-shadow: none !important;
}
/* 输入框样式 */
#ai-chat-input {
background-color: #FFFFFF !important;
border: 2px solid #000000 !important;
border-radius: 6px !important;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15) !important;
color: #000000 !important;
font-family: 'Noto Sans SC', sans-serif !important;
font-size: 16px !important;
padding: 14px 18px !important;
line-height: 1.6 !important;
text-shadow: none !important;
transition: all 0.2s ease-in-out !important;
}
/* 输入框聚焦状态 */
#ai-chat-input:focus {
border-color: #000000 !important;
box-shadow: 0 0 8px rgba(0, 170, 255, 0.5), inset 2px 2px 4px rgba(0, 0, 0, 0.15) !important;
outline: none !important;
}
/* 底部输入容器 */
#ai-chat-bottom-input {
background: transparent !important;
backdrop-filter: none !important;
}
/* 头部容器样式 */
.flex.items-center.justify-between.w-full.relative {
background: #FFFFFF !important;
border-bottom: 2px solid #000000 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
color: #000000 !important;
font-family: 'Noto Sans SC', sans-serif !important;
}
/* 模型选择器样式 */
#ai-model-selector > div,
[data-state="closed"] > div {
background: #FFFFFF !important;
border: none !important;
box-shadow: none !important;
color: #000000 !important;
font-weight: 600 !important;
text-shadow: none !important;
padding: 6px 12px !important;
border-radius: 4px !important;
transition: all 0.2s ease-in-out !important;
font-family: 'Noto Sans SC', sans-serif !important;
font-size: 14px !important;
}

/* 模型选择器悬停状态 */
#ai-model-selector > div:hover,
[data-state="closed"] > div:hover {
background-color: rgba(0, 170, 255, 0.1) !important;
color: #000000 !important;
transform: none !important;
box-shadow: none !important;
border: none !important;
}

/* 模型选择器激活/展开状态 */
#ai-model-selector > div[data-state="open"],
[data-state="open"] > div {
background: #FFFFFF !important;
border: none !important;
box-shadow: none !important;
}

/* 模型选择器下拉菜单样式 */
#ai-model-selector [role="listbox"],
[data-state="open"] [role="listbox"] {
background: #FFFFFF !important;
border: 2px solid #000000 !important;
border-radius: 6px !important;
box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.7) !important;
padding: 8px 0 !important;
}

/* 模型选择器选项样式 */
#ai-model-selector [role="option"],
[data-state="open"] [role="option"] {
padding: 8px 16px !important;
color: #000000 !important;
font-family: 'Noto Sans SC', sans-serif !important;
font-size: 14px !important;
transition: all 0.2s ease !important;
}

/* 模型选择器选项悬停状态 */
#ai-model-selector [role="option"]:hover,
[data-state="open"] [role="option"]:hover {
background: rgba(0, 170, 255, 0.15) !important;
color: #000000 !important;
}

/* 模型选择器选中选项样式 */
#ai-model-selector [role="option"][aria-selected="true"],
[data-state="open"] [role="option"][aria-selected="true"] {
background: rgba(0, 170, 255, 0.25) !important;
color: #000000 !important;
font-weight: 600 !important;
}

/* ==========================================================================
标签页系统 - 修复版本
========================================================================== */


/* 隐藏单选框 */
input[name="ST"] { 
    display: none !important; 
}

/* 内容容器定位 */
.content {
    position: relative !important;
}

/* 标签按钮样式 */
.tab-label {
    display: inline-block !important;
    padding: 10px 20px !important;
    background: #FFFFFF !important;
    color: #333333 !important;
    border: 2px solid #000000 !important;
    border-bottom: none !important;
    cursor: pointer !important;
    margin-right: 5px !important;
    border-radius: 4px 4px 0 0 !important;
    position: relative !important;
    bottom: -2px !important;
    transition: all 0.3s !important;
    z-index: 1 !important;
}

.tab-label:hover {
    background: rgba(0, 170, 255, 0.1) !important;
}

/* 默认隐藏所有面板 */
PANEL {
    display: none !important;
    padding: 15px !important;
    border: 2px solid #000000 !important;
    border-top: none !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
    position: relative !important;
    z-index: 0 !important;
    margin-top: -2px !important;
}

/* 默认显示第一个面板 */
#tab-info:checked ~ #tab-info {
    display: block !important;
}

/* 激活状态 - 面板显示 */
#tab-info:checked ~ #tab-info,
#tab-past:checked ~ #tab-past,
#tab-interact:checked ~ #tab-interact {
    display: block !important;
}

/* 激活状态 - 标签样式 */
#tab-info:checked ~ .tab-label[for="tab-info"],
#tab-past:checked ~ .tab-label[for="tab-past"],
#tab-interact:checked ~ .tab-label[for="tab-interact"] {
    background: rgba(0, 170, 255, 0.15) !important;
    color: #000000 !important;
    border-color: #000000 !important;
    border-bottom: 2px solid #FFFFFF !important;
    font-weight: 700 !important;
}

/* 修复：当切换标签时隐藏其他面板 */
#tab-past:checked ~ #tab-info,
#tab-interact:checked ~ #tab-info,
#tab-info:checked ~ #tab-past,
#tab-interact:checked ~ #tab-past,
#tab-info:checked ~ #tab-interact,
#tab-past:checked ~ #tab-interact {
    display: none !important;
}

/* 确保所有单选框和标签按正确顺序排列 */
#tab-info:first-child,
#tab-past:nth-child(2),
#tab-interact:nth-child(3),
.tab-label[for="tab-info"]:nth-child(4),
.tab-label[for="tab-past"]:nth-child(5),
.tab-label[for="tab-interact"]:nth-child(6) {
    /* 确保HTML结构正确 */
}

/* ==========================================================================
DNE Kore Injected CSS v1.1 (Transparency Refactor)
========================================================================== */
/* 顶栏悬停展开效果 */
#top_info {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
background-color: #0A0A19 !important;
color: #FFFFFF !important;
padding: 5px 20px !important;
height: 30px !important;
overflow: hidden !important;
transition: height 0.4s ease-in-out !important;
z-index: 9999 !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
box-sizing: border-box !important;
border-bottom: 2px solid #000000 !important;
backdrop-filter: blur(5px) !important;
}
#top_info:hover { 
height: 80px !important; 
}
#top_info time,
#top_info position,
#top_info game_area_rule { 
display: block !important; 
line-height: 1.6 !important; 
}
/* ==========================================================================
通用UI组件样式
========================================================================== */
/* Details/Summary 组件 */
details { 
border: 2px solid #000000 !important;
border-radius: 4px !important; 
margin-bottom: 1em !important; 
background: #FFFFFF !important;
}
summary { 
padding: 0.5em !important; 
cursor: pointer !important; 
background: #F0F0F0 !important;
color: #000000 !important;
font-weight: bold !important; 
list-style: none !important;
}
summary::-webkit-details-marker {
display: none !important;
}
/* 角色详情 */
.char-details { 
color: #333333 !important;
font-size: 0.9em !important; 
}


/* ==========================================================================
进度条系统
========================================================================== */
/* 进度条容器 */
.progress-bar-container { 
background-color: #E0E0E0 !important;
border-radius: 5px !important; 
overflow: hidden !important; 
position: relative !important; 
height: 20px !important; 
margin: 5px 0 !important; 
border: 1px solid #000000 !important;
}
/* 进度条填充 */
.progress-bar-fill { 
height: 100% !important; 
background-image: linear-gradient(45deg, #2E7D32, #4CAF50) !important;
}
.progress-bar-container.mp .progress-bar-fill { 
background-image: linear-gradient(45deg, #1565C0, #2196F3) !important;
}
.progress-bar-container.tp .progress-bar-fill { 
background-image: linear-gradient(45deg, #F57C00, #FFC107) !important;
}
.progress-bar-container.lust .progress-bar-fill { 
background-image: linear-gradient(45deg, #C2185B, #E91E63) !important;
}
.progress-bar-container.exposure .progress-bar-fill { 
background-image: linear-gradient(45deg, #7B1FA2, #9C27B0) !important;
}
/* 进度条标签 */
.progress-bar-label, 
.progress-bar-value, 
.progress-bar-percent { 
position: absolute !important; 
top: 50% !important; 
transform: translateY(-50%) !important; 
color: #000000 !important;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7) !important;
font-size: 0.8em !important; 
font-weight: bold !important;
}
.progress-bar-label { 
left: 10px !important; 
}
.progress-bar-value { 
right: 10px !important; 
}
.progress-bar-percent { 
right: 10px !important; 
}
/* ==========================================================================
属性与状态组件
========================================================================== */
/* 属性容器 */
attributes, 
.social-status { 
display: flex !important; 
justify-content: space-around !important; 
padding: 10px !important; 
background: #FFFFFF !important;
margin: 10px 0 !important; 
border-radius: 4px !important; 
border: 2px solid #000000 !important;
}
/* 特殊属性样式 */
.lewd-attributes .body-status p { 
margin: 4px 0 !important; 
padding-left: 10px !important; 
border-left: 2px solid #C2185B !important;
background: #F8F8F8 !important;
}
/* ==========================================================================
物品与工具提示系统
========================================================================== */
/* 物品槽位 */
.item-slot { 
position: relative !important; 
padding: 8px !important; 
border: 1px solid #000000 !important;
background: #FFFFFF !important;
margin: 5px !important; 
border-radius: 3px !important; 
}
.item-slot:hover { 
background: #F0F0F0 !important;
}
.item-slot:hover .tooltip-card { 
display: block !important; 
}
/* 工具提示 */
.tooltip-card { 
display: none !important; 
position: absolute !important; 
bottom: 100% !important; 
left: 0 !important; 
z-index: 100 !important; 
width: 250px !important; 
background: #FFFFFF !important;
border: 2px solid #000000 !important;
padding: 10px !important; 
border-radius: 5px !important; 
box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.7) !important;
font-size: 0.9em !important; 
color: #000000 !important;
}
/* 任务名称 */
quest_name { 
font-weight: bold !important; 
color: #000000 !important;
display: block !important; 
margin-bottom: 5px !important; 
border-bottom: 1px solid #000000 !important;
}
/* ==========================================================================
动画效果
========================================================================== */
@keyframes curtain-open {
0% { opacity: 0 !important; }
100% { opacity: 1 !important; }
}
.group .bg-gray-100\/90,
.flex.items-center.justify-between.w-full.relative {
animation: curtain-open 0.5s ease-out !important;
}
/* ==========================================================================
响应式设计
========================================================================== */
@media (max-width: 768px) {
.group .bg-gray-100\/90 {
padding: 16px !important;
font-size: 15px !important;
}
#ai-chat-input {
padding: 12px !important;
font-size: 15px !important;
}
.flex.items-center.gap-2.pb-2 > button {
padding: 5px 10px !important;
font-size: 11px !important;
min-height: 26px !important;
}
label.tab-label {
padding: 8px 12px !important;
font-size: 14px !important;
}
}


/* ==========================================================================
侧边栏样式系统 - 基于主容器风格统一
========================================================================== */

/* 左侧面板样式 - 用户信息 */
.left-side-panel {
    position: fixed !important;
    width: 50px !important; /* 折叠宽度 */
    height: 50px !important; /* 折叠高度 */
    background: #FFFFFF !important; /* 统一白色背景 */
    border: 2px solid #000000 !important; /* 统一黑色边框 */
    border-radius: 0 8px 8px 0 !important; /* 统一圆角 */
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.7) !important; /* 统一阴影效果 */
    transition: all 0.3s ease-in-out !important; /* 统一过渡效果 */
    overflow: hidden !important;
    color: #000000 !important; /* 统一黑色文字 */
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    font-family: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif !important; /* 统一字体 */
    padding: 0 !important;
}

.left-side-panel:hover {
    width: 300px !important; /* 展开宽度 */
    height: 650px !important; /* 展开高度 */
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.7) !important; /* 增强阴影 */
}

.left-panel-content {
    opacity: 0 !important;
    width: calc(100% - 40px) !important;
    margin: 20px !important;
    padding: 24px !important; /* 统一内边距 */
    transition: opacity 0.3s ease 0.1s !important; /* 延迟显示内容 */
    overflow-y: auto !important;
    background: #FFFFFF !important; /* 统一白色背景 */
    color: #000000 !important; /* 统一黑色文字 */
    border-radius: 6px !important;
    height: calc(100% - 60px) !important;
    border: 2px solid #000000 !important; /* 内部边框 */
    font-family: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif !important; /* 统一字体 */
    font-size: 16px !important; /* 统一字体大小 */
    line-height: 1.8 !important; /* 统一行高 */
    font-weight: 400 !important; /* 统一字重 */
    text-shadow: none !important;
}

.left-side-panel:hover .left-panel-content {
    opacity: 1 !important;
}

.left-panel-icon {
    font-size: 24px !important;
    transition: all 0.3s ease-in-out !important; /* 统一过渡效果 */
    text-align: center !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    background: #FFFFFF !important; /* 统一白色背景 */
    padding: 5px !important;
    border-radius: 0 6px 6px 0 !important;
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    border: 2px solid #000000 !important; /* 统一黑色边框 */
    color: #000000 !important; /* 统一黑色图标 */
}

.left-side-panel:hover .left-panel-icon {
    transform: rotate(360deg) !important;
}

/* 侧边栏内文本选择样式 */
.left-side-panel ::selection,
.left-panel-content ::selection {
    background: rgba(0, 170, 255, 0.25) !important; /* 统一文本选择背景 */
    color: #000000 !important; /* 统一文本选择颜色 */
    text-shadow: none !important;
}

/* 侧边栏内强调文本样式 */
.left-panel-content strong,
.left-panel-content b {
    color: #ff003c !important; /* 统一强调色 */
    font-weight: 700 !important;
    text-shadow: 0 0 5px rgba(255, 0, 60, 0.5) !important; /* 统一文字阴影 */
}

/* 侧边栏内链接样式 */
.left-panel-content a {
    color: #00aaff !important; /* 统一链接色 */
    border-bottom: 1px solid rgba(0, 170, 255, 0.5) !important; /* 统一链接下划线 */
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important; /* 统一过渡效果 */
}

.left-panel-content a:hover {
    background: rgba(0, 170, 255, 0.1) !important; /* 统一悬停背景 */
    border-bottom-color: #00aaff !important; /* 统一悬停下划线颜色 */
}

/* 侧边栏内代码样式 */
.left-panel-content code {
    background: rgba(0, 0, 0, 0.05) !important; /* 统一代码背景 */
    color: #000000 !important; /* 统一代码颜色 */
    border: 1px solid rgba(0, 0, 0, 0.1) !important; /* 统一代码边框 */
    font-family: 'SF Mono', 'Courier New', monospace !important; /* 统一代码字体 */
    padding: 3px 6px !important;
    font-size: 14px !important;
    border-radius: 3px !important;
}

/* 侧边栏内按钮样式 */
.left-panel-content button {
    background: #FFFFFF !important; /* 统一按钮背景 */
    border: 2px solid #000000 !important; /* 统一按钮边框 */
    border-radius: 4px !important; /* 统一按钮圆角 */
    box-shadow: 3px 3px 0px #000000 !important; /* 统一按钮阴影 */
    color: #000000 !important; /* 统一按钮文字颜色 */
    font-weight: bold !important;
    padding: 6px 16px !important;
    text-transform: none !important;
    transition: all 0.1s ease-in-out !important; /* 统一过渡效果 */
    font-family: 'Noto Sans SC', sans-serif !important;
    font-size: 12px !important;
    text-shadow: none !important;
    min-height: 28px !important;
    line-height: 1.2 !important;
}

.left-panel-content button:hover {
    background: #00aaff !important; /* 统一按钮悬停背景 */
    border-color: #000000 !important;
    color: #FFFFFF !important; /* 统一按钮悬停文字颜色 */
    transform: translate(3px, 3px) !important;
    box-shadow: none !important;
}

/* 侧边栏内进度条系统 */
.left-panel-content .progress-bar-container { 
    background-color: #E0E0E0 !important;
    border-radius: 5px !important; 
    overflow: hidden !important; 
    position: relative !important; 
    height: 20px !important; 
    margin: 5px 0 !important; 
    border: 1px solid #000000 !important; /* 统一黑色边框 */
}

.left-panel-content .progress-bar-fill { 
    height: 100% !important; 
    background-image: linear-gradient(45deg, #2E7D32, #4CAF50) !important;
}

/* 侧边栏内属性容器 */
.left-panel-content attributes, 
.left-panel-content .social-status { 
    display: flex !important; 
    justify-content: space-around !important; 
    padding: 10px !important; 
    background: #FFFFFF !important; /* 统一白色背景 */
    margin: 10px 0 !important; 
    border-radius: 4px !important; 
    border: 2px solid #000000 !important; /* 统一黑色边框 */
}

/* 侧边栏内物品槽位 */
.left-panel-content .item-slot { 
    position: relative !important; 
    padding: 8px !important; 
    border: 1px solid #000000 !important; /* 统一黑色边框 */
    background: #FFFFFF !important; /* 统一白色背景 */
    margin: 5px !important; 
    border-radius: 3px !important; 
}

.left-panel-content .item-slot:hover { 
    background: #F0F0F0 !important;
}

.left-panel-content .item-slot:hover .tooltip-card { 
    display: block !important; 
}

/* 侧边栏内工具提示 */
.left-panel-content .tooltip-card { 
    display: none !important; 
    position: absolute !important; 
    bottom: 100% !important; 
    left: 0 !important; 
    z-index: 100 !important; 
    width: 250px !important; 
    background: #FFFFFF !important; /* 统一白色背景 */
    border: 2px solid #000000 !important; /* 统一黑色边框 */
    padding: 10px !important; 
    border-radius: 5px !important; 
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.7) !important; /* 统一阴影效果 */
    font-size: 0.9em !important; 
    color: #000000 !important; /* 统一黑色文字 */
}

/* 侧边栏动画效果 */
@keyframes panel-slide-in {
    0% { 
        opacity: 0 !important; 
        transform: translateY(-50%) translateX(-10px) !important;
    }
    100% { 
        opacity: 1 !important; 
        transform: translateY(-50%) translateX(0) !important;
    }
}

.left-side-panel {
    animation: panel-slide-in 0.5s ease-out !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .left-side-panel:hover {
        width: 250px !important; /* 移动端展开宽度 */
        height: 500px !important; /* 移动端展开高度 */
    }
    
    .left-panel-content {
        padding: 16px !important; /* 统一移动端内边距 */
        font-size: 15px !important; /* 统一移动端字体大小 */
    }
}