/* ==========================================================================
主容器样式系统
========================================================================== */
/* 主容器基础样式 */
.group .bg-gray-100\/90 {
    background: var(--secondary-bg) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px var(--shadow-color) !important;
    color: var(--text-color) !important;
    padding: 24px !important;
    font-family: 'Noto Sans SC', sans-serif !important;
    font-size: 18px !important; /* 从16px加大到18px */
    line-height: 1.8 !important;
    font-weight: 400 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 主容器内文本样式 */
.group .bg-gray-100\/90 strong,
.group .bg-gray-100\/90 b {
    color: var(--header-color) !important;
    font-weight: 700 !important;
    font-size: 19px !important; /* 强调文本也相应加大 */
}

/* 主容器内链接样式 */
.group .bg-gray-100\/90 a {
    color: var(--accent-color) !important;
    border-bottom: 1px solid rgba(77, 208, 225, 0.5) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 18px !important; /* 链接字体也加大 */
    transition: all 0.2s ease !important;
}

/* 主容器内代码样式 */
.group .bg-gray-100\/90 code {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    font-family: 'SF Mono', 'Courier New', monospace !important;
    padding: 4px 8px !important; /* 代码块内边距相应调整 */
    font-size: 16px !important; /* 代码字体也相应加大 */
    border-radius: 3px !important;
}

/* 主容器内段落文本 */
.group .bg-gray-100\/90 p {
    font-size: 18px !important; /* 段落文本加大 */
    line-height: 1.8 !important;
    margin-bottom: 16px !important;
}

/* 主容器内标题文本 */
.group .bg-gray-100\/90 h1,
.group .bg-gray-100\/90 h2,
.group .bg-gray-100\/90 h3,
.group .bg-gray-100\/90 h4,
.group .bg-gray-100\/90 h5,
.group .bg-gray-100\/90 h6 {
    font-size: 22px !important; /* 标题相应加大 */
    font-weight: 700 !important;
    color: var(--header-color) !important;
    margin: 20px 0 12px 0 !important;
}

/* 主容器内列表文本 */
.group .bg-gray-100\/90 ul,
.group .bg-gray-100\/90 ol {
    font-size: 18px !important; /* 列表文本加大 */
}

.group .bg-gray-100\/90 li {
    font-size: 18px !important; /* 列表项文本加大 */
    margin-bottom: 8px !important;
}

/* 响应式设计 - 移动端字体调整 */
@media (max-width: 768px) {
    .group .bg-gray-100\/90 {
        font-size: 17px !important; /* 移动端也相应加大 */
        padding: 20px !important;
    }
    
    .group .bg-gray-100\/90 p {
        font-size: 17px !important;
    }
    
    .group .bg-gray-100\/90 strong,
    .group .bg-gray-100\/90 b {
        font-size: 18px !important;
    }
    
    .group .bg-gray-100\/90 a {
        font-size: 17px !important;
    }
    
    .group .bg-gray-100\/90 code {
        font-size: 15px !important;
    }
}
/* ==========================================================================
交互组件样式
========================================================================== */
/* 按钮基础样式 */
.flex.items-center.gap-2.pb-2 > button {
background: var(--secondary-bg) !important;
border: 2px solid var(--border-color) !important;
border-radius: 6px !important;
box-shadow: 0 2px 4px var(--shadow-color) !important;
color: var(--text-color) !important;
font-weight: 500 !important;
padding: 8px 16px !important;
transition: all 0.3s ease !important;
font-family: 'Noto Sans SC', sans-serif !important;
font-size: 14px !important;
min-height: 36px !important;
line-height: 1.2 !important;
}
/* 按钮悬停效果 */
.flex.items-center.gap-2.pb-2 > button:hover {
background: var(--accent-color) !important;
border-color: var(--accent-color) !important;
color: white !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 8px var(--shadow-color) !important;
}
/* 按钮激活状态 */
.flex.items-center.gap-2.pb-2 > button:active {
transform: translateY(0) !important;
}
/* 输入框样式 */
#ai-chat-input {
background-color: var(--secondary-bg) !important;
border: 2px solid var(--border-color) !important;
border-radius: 6px !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
color: var(--text-color) !important;
font-family: 'Noto Sans SC', sans-serif !important;
font-size: 16px !important;
padding: 12px 16px !important;
line-height: 1.6 !important;
transition: all 0.2s ease-in-out !important;
}
/* 输入框聚焦状态 */
#ai-chat-input:focus {
border-color: var(--accent-color) !important;
box-shadow: 0 0 0 3px rgba(77, 208, 225, 0.3) !important;
outline: none !important;
}
/* 底部输入容器 */
#ai-chat-bottom-input {
background: transparent !important;
backdrop-filter: none !important;
}
/* 头部容器样式 */
.flex.items-center.justify-between.w-full.relative {
background: var(--secondary-bg) !important;
border-bottom: 2px solid var(--border-color) !important;
box-shadow: 0 2px 8px var(--shadow-color) !important;
color: var(--text-color) !important;
font-family: 'Noto Sans SC', sans-serif !important;
}
/* 模型选择器样式 */
#ai-model-selector > div,
[data-state="closed"] > div {
background: var(--secondary-bg) !important;
border: 2px solid var(--border-color) !important;
box-shadow: 0 2px 4px var(--shadow-color) !important;
color: var(--text-color) !important;
font-weight: 500 !important;
padding: 8px 16px !important;
border-radius: 6px !important;
transition: all 0.2s ease !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(77, 208, 225, 0.1) !important;
border-color: var(--accent-color) !important;
}
/* 模型选择器激活/展开状态 */
#ai-model-selector > div[data-state="open"],
[data-state="open"] > div {
background: var(--secondary-bg) !important;
border-color: var(--accent-color) !important;
}
/* 模型选择器下拉菜单样式 */
#ai-model-selector [role="listbox"],
[data-state="open"] [role="listbox"] {
background: var(--secondary-bg) !important;
border: 2px solid var(--border-color) !important;
border-radius: 6px !important;
box-shadow: 0 4px 12px var(--shadow-color) !important;
padding: 8px 0 !important;
}
/* 模型选择器选项样式 */
#ai-model-selector [role="option"],
[data-state="open"] [role="option"] {
padding: 8px 16px !important;
color: var(--text-color) !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(77, 208, 225, 0.15) !important;
}
/* 模型选择器选中选项样式 */
#ai-model-selector [role="option"][aria-selected="true"],
[data-state="open"] [role="option"][aria-selected="true"] {
background: rgba(77, 208, 225, 0.25) !important;
color: var(--header-color) !important;
font-weight: 600 !important;
}
/* ==========================================================================
标签页系统 - 修复版本
========================================================================== */
/* 隐藏单选框 */
input[name="ST"] { 
display: none !important; 
}
/* 内容容器定位 */
.content {
position: relative !important;
}
/* 标签按钮样式 */
.tab-label {
display: inline-block !important;
padding: 12px 24px !important;
background: var(--secondary-bg) !important;
color: var(--text-color) !important;
border: 2px solid var(--border-color) !important;
border-bottom: none !important;
cursor: pointer !important;
margin-right: 5px !important;
border-radius: 6px 6px 0 0 !important;
position: relative !important;
bottom: -2px !important;
transition: all 0.3s !important;
z-index: 1 !important;
font-family: 'Noto Sans SC', sans-serif !important;
font-weight: 500 !important;
}
.tab-label:hover {
background: rgba(77, 208, 225, 0.1) !important;
}
/* 默认隐藏所有面板 */
PANEL {
display: none !important;
padding: 20px !important;
border: 2px solid var(--border-color) !important;
border-top: none !important;
background-color: var(--secondary-bg) !important;
color: var(--text-color) !important;
position: relative !important;
z-index: 0 !important;
margin-top: -2px !important;
border-radius: 0 0 6px 6px !important;
font-family: 'Noto Sans SC', sans-serif !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(77, 208, 225, 0.15) !important;
color: var(--header-color) !important;
border-color: var(--border-color) !important;
border-bottom: 2px solid var(--secondary-bg) !important;
font-weight: 600 !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;
}
/* ==========================================================================
通用UI组件样式
========================================================================== */
/* Details/Summary 组件 */
details { 
border: 2px solid var(--border-color) !important;
border-radius: 6px !important; 
margin-bottom: 1em !important; 
background: var(--secondary-bg) !important;
font-family: 'Noto Sans SC', sans-serif !important;
}
summary { 
padding: 12px !important; 
cursor: pointer !important; 
background: rgba(77, 208, 225, 0.1) !important;
color: var(--text-color) !important;
font-weight: 600 !important; 
list-style: none !important;
border-radius: 4px 4px 0 0 !important;
}
summary::-webkit-details-marker {
display: none !important;
}
/* 角色详情 */
.char-details { 
color: var(--text-color) !important;
font-size: 0.9em !important; 
}
/* ==========================================================================
进度条系统
========================================================================== */
/* 进度条容器 */
.progress-bar-container { 
background-color: #f0f8ff !important;
border-radius: 5px !important; 
overflow: hidden !important; 
position: relative !important; 
height: 20px !important; 
margin: 8px 0 !important; 
border: 1px solid var(--border-color) !important;
}
/* 进度条填充 */
.progress-bar-fill { 
height: 100% !important; 
background: linear-gradient(45deg, var(--accent-color), var(--accent-hover)) !important;
}
.progress-bar-container.mp .progress-bar-fill { 
background: linear-gradient(45deg, #2196F3, #42A5F5) !important;
}
.progress-bar-container.tp .progress-bar-fill { 
background: linear-gradient(45deg, #FFC107, #FFD54F) !important;
}
/* 进度条标签 */
.progress-bar-label, 
.progress-bar-value, 
.progress-bar-percent { 
position: absolute !important; 
top: 50% !important; 
transform: translateY(-50%) !important; 
color: var(--text-color) !important;
font-size: 0.8em !important; 
font-weight: 600 !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: 16px !important; 
background: var(--secondary-bg) !important;
margin: 12px 0 !important; 
border-radius: 6px !important; 
border: 2px solid var(--border-color) !important;
font-family: 'Noto Sans SC', sans-serif !important;
}
/* 特殊属性样式 */
.lewd-attributes .body-status p { 
margin: 6px 0 !important; 
padding-left: 12px !important; 
border-left: 3px solid var(--accent-color) !important;
background: #f8f9fa !important;
padding: 8px 12px !important;
border-radius: 4px !important;
}
/* ==========================================================================
物品与工具提示系统
========================================================================== */
/* 物品槽位 */
.item-slot { 
position: relative !important; 
padding: 12px !important; 
border: 2px solid var(--border-color) !important;
background: var(--secondary-bg) !important;
margin: 8px !important; 
border-radius: 6px !important; 
transition: all 0.2s ease !important;
}
.item-slot:hover { 
background: rgba(77, 208, 225, 0.1) !important;
border-color: var(--accent-color) !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: 280px !important; 
background: var(--secondary-bg) !important;
border: 2px solid var(--border-color) !important;
padding: 16px !important; 
border-radius: 6px !important; 
box-shadow: 0 4px 12px var(--shadow-color) !important;
font-size: 0.9em !important; 
color: var(--text-color) !important;
font-family: 'Noto Sans SC', sans-serif !important;
}
/* 任务名称 */
quest_name { 
font-weight: 600 !important; 
color: var(--header-color) !important;
display: block !important; 
margin-bottom: 8px !important; 
border-bottom: 2px solid var(--border-color) !important;
padding-bottom: 4px !important;
}
/* ==========================================================================
动画效果
========================================================================== */
@keyframes curtain-open {
0% { opacity: 0 !important; transform: translateY(10px) !important; }
100% { opacity: 1 !important; transform: translateY(0) !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: 10px 14px !important;
font-size: 15px !important;
}
.flex.items-center.gap-2.pb-2 > button {
padding: 8px 14px !important;
font-size: 13px !important;
min-height: 32px !important;
}
.tab-label {
padding: 10px 16px !important;
font-size: 14px !important;
}
}
/* ==========================================================================
侧边栏样式系统 - 基于主容器风格统一
========================================================================== */
/* 左侧面板样式 - 用户信息 */
.left-side-panel {
    position: fixed !important;
    width: 50px !important;
    height: 50px !important;
    background: #e6f7ff !important; /* 浅蓝色不透明底色 */
    border: 2px solid var(--border-color) !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: 0 4px 12px var(--shadow-color) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    color: var(--text-color) !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', sans-serif !important;
}

.left-side-panel:hover {
    width: 300px !important;
    height: 650px !important;
    box-shadow: 0 8px 24px var(--shadow-color) !important;
    background: #e6f7ff !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: #e6f7ff !important; /* 浅蓝色不透明底色 */
    color: var(--text-color) !important;
    border-radius: 6px !important;
    height: calc(100% - 60px) !important;
    border: 2px solid var(--border-color) !important;
    font-family: 'Noto Sans SC', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
}

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

.left-panel-icon {
    font-size: 24px !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    background: #e6f7ff !important; /* 浅蓝色不透明底色 */
    padding: 5px !important;
    border-radius: 0 6px 6px 0 !important;
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

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

/* 侧边栏内文本选择样式 */
.left-side-panel ::selection,
.left-panel-content ::selection {
    background: rgba(77, 208, 225, 0.25) !important;
    color: var(--text-color) !important;
}

/* 侧边栏内强调文本样式 */
.left-panel-content strong,
.left-panel-content b {
    color: var(--header-color) !important;
    font-weight: 700 !important;
}

/* 侧边栏内链接样式 */
.left-panel-content a {
    color: var(--accent-color) !important;
    border-bottom: 1px solid rgba(77, 208, 225, 0.5) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.left-panel-content a:hover {
    background: rgba(77, 208, 225, 0.1) !important;
    border-bottom-color: var(--accent-color) !important;
}

/* 侧边栏内代码样式 */
.left-panel-content code {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !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: var(--secondary-bg) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px var(--shadow-color) !important;
    color: var(--text-color) !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    transition: all 0.3s ease !important;
    font-family: 'Noto Sans SC', sans-serif !important;
    font-size: 14px !important;
    min-height: 36px !important;
    line-height: 1.2 !important;
}

.left-panel-content button:hover {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px var(--shadow-color) !important;
}

/* 侧边栏内进度条系统 */
.left-panel-content .progress-bar-container { 
    background-color: #f0f8ff !important;
    border-radius: 5px !important; 
    overflow: hidden !important; 
    position: relative !important; 
    height: 20px !important; 
    margin: 8px 0 !important; 
    border: 1px solid var(--border-color) !important;
}

.left-panel-content .progress-bar-fill { 
    height: 100% !important; 
    background: linear-gradient(45deg, var(--accent-color), var(--accent-hover)) !important;
}

/* 侧边栏内属性容器 */
.left-panel-content attributes, 
.left-panel-content .social-status { 
    display: flex !important; 
    justify-content: space-around !important; 
    padding: 16px !important; 
    background: var(--secondary-bg) !important;
    margin: 12px 0 !important; 
    border-radius: 6px !important; 
    border: 2px solid var(--border-color) !important;
    font-family: 'Noto Sans SC', sans-serif !important;
}

/* 侧边栏内物品槽位 */
.left-panel-content .item-slot { 
    position: relative !important; 
    padding: 12px !important; 
    border: 2px solid var(--border-color) !important;
    background: var(--secondary-bg) !important;
    margin: 8px !important; 
    border-radius: 6px !important; 
    transition: all 0.2s ease !important;
}

.left-panel-content .item-slot:hover { 
    background: rgba(77, 208, 225, 0.1) !important;
    border-color: var(--accent-color) !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: 280px !important; 
    background: var(--secondary-bg) !important;
    border: 2px solid var(--border-color) !important;
    padding: 16px !important; 
    border-radius: 6px !important; 
    box-shadow: 0 4px 12px var(--shadow-color) !important;
    font-size: 0.9em !important; 
    color: var(--text-color) !important;
    font-family: 'Noto Sans SC', sans-serif !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;
    }
}