/* 修复页面内容宽度问题 */
.main-content {
    width: calc(100% - 300px) !important; /* 减去侧边栏宽度 */
    max-width: 1500px !important; /* 增加最大宽度 */
    margin-left: 290px !important; /* 为侧边栏留出空间 */
    margin-right: 10px !important; /* 缩小右侧边距 */
    margin-top: 70px !important; /* 增加顶部边距，避免被导航栏遮挡 */
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    padding-left: 10px !important; /* 减少左内边距 */
    padding-right: 0 !important; /* 减少右内边距 */
}

.function-content {
    padding: 20px !important;
    margin: 10px auto !important;
    width: 100% !important;
    max-width: 100% !important; /* 使用100%宽度 */
    overflow: visible !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

.tool-container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important; /* 使用100%宽度 */
    padding: 24px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* 改为stretch以填充容器宽度 */
    justify-content: flex-start !important; /* 从顶部开始 */
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

.container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* 不要居中 */
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 10px !important; /* 增加顶部内边距 */
    position: relative !important;
}

/* 确保侧边栏不会影响主内容的位置 */
body.with-sidebar .main-content,
.sidebar ~ .main-content,
.sidebar ~ .container .main-content {
    margin-left: 290px !important; /* 侧边栏右侧的间距 */
    margin-right: 10px !important; /* 减少右侧边距 */
    margin-top: 70px !important; /* 增加顶部边距 */
    padding-left: 10px !important; /* 减少左内边距 */
    padding-right: 0 !important; /* 减少右内边距 */
    left: 0 !important;
    transform: none !important;
    width: calc(100% - 300px) !important; /* 确保宽度一致 */
}

/* 确保内容区域的宽度适中且两侧留有边距 */
.function-area {
    width: 100% !important;
    max-width: 100% !important; /* 使用100%宽度 */
    padding-left: 0 !important; 
    padding-right: 0 !important;
    padding-top: 10px !important; /* 增加顶部内边距 */
    box-sizing: border-box !important;
}

/* 调整侧边栏顶部边距，靠近导航栏 */
.sidebar {
    width: 280px !important; /* 增加侧边栏宽度 */
    margin-top: 10px !important; /* 减少侧边栏顶部边距 */
    padding-top: 0 !important; /* 移除顶部内边距 */
    top: 64px !important; /* 与导航栏底部对齐 */
}

/* 移除网格布局，它可能导致内容居中而不考虑侧边栏 */
@supports (display: grid) {
    body {
        display: block !important; /* 改为block而不是grid */
    }
}

/* 特别针对详情AI文案功能的样式修复 */
.evaluation-analyzer .tool-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

.evaluation-analyzer .input-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.evaluation-analyzer .form-group {
    width: 100% !important;
}

.evaluation-analyzer .form-control {
    width: 100% !important;
    box-sizing: border-box !important;
}

.evaluation-analyzer .action-buttons {
    width: 100% !important;
    display: flex !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

.evaluation-analyzer .result-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.evaluation-analyzer .evaluation-results {
    width: 100% !important;
}

/* 分析输入文本区域的最小高度 */
.evaluation-analyzer textarea.form-control {
    min-height: 150px !important;
}

/* 选项卡内容区域 */
.evaluation-analyzer .tab-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* 确保表格能够填充可用宽度 */
.evaluation-analyzer table {
    width: 100% !important;
}

/* 修复详情AI文案标题换行和按钮位置问题 */
.evaluation-analyzer .result-header {
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important;
    justify-content: space-between !important; /* 确保标题和按钮分布在两端 */
    width: 100% !important;
    margin-bottom: 20px !important;
}

.evaluation-analyzer .result-header h3 {
    margin: 0 !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 70% !important; /* 限制标题最大宽度 */
    font-size: 18px !important;
}

.evaluation-analyzer .result-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important; /* 确保按钮靠右对齐 */
    white-space: nowrap !important;
    flex-shrink: 0 !important; /* 防止按钮被压缩 */
    position: absolute !important; /* 使用绝对定位 */
    right: 0 !important; /* 靠右定位 */
    top: 0 !important; /* 顶部对齐 */
}

/* 确保标题和按钮能够共存，且不重叠 */
.evaluation-analyzer .result-header h3,
.evaluation-analyzer .optimization-title,
.evaluation-analyzer .visual-analysis-title {
    padding-right: 180px !important; /* 为右侧的按钮预留足够空间 */
}

/* 确保按钮在正确的位置显示（仅在有标题的情况下） */
.evaluation-analyzer .analysis-result-header .result-actions,
.evaluation-analyzer .result-header .result-actions {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    margin-left: auto !important;
}

/* 修改按钮容器为绝对定位，并靠右放置 */
.evaluation-analyzer .analysis-result-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    position: relative !important; /* 需要relative以便内部元素可以absolute定位 */
}

/* 优化按钮样式 */
.evaluation-analyzer .result-actions button,
.evaluation-analyzer .result-actions a {
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: auto !important;
    padding: 8px 15px !important;
    margin: 0 !important;
}

/* 确保Excel/复制图标正确显示 */
.evaluation-analyzer .result-actions .secondary-btn span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

/* 优化分析结果区域布局 */
.evaluation-analyzer .analysis-result {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    margin-top: 20px !important;
    border-radius: 8px !important;
    background: rgba(30, 30, 30, 0.3) !important;
}

/* 添加响应式设计支持 */
@media (max-width: 768px) {
    .evaluation-analyzer .action-buttons {
        flex-direction: column !important;
    }
    
    .evaluation-analyzer .primary-btn,
    .evaluation-analyzer .secondary-btn {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .evaluation-analyzer .result-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .evaluation-analyzer .result-actions {
        margin-left: 0 !important;
        margin-top: 10px !important;
    }
}

/* 优化标题在各种工具中的显示 */
.evaluation-analyzer .tool-header h2,
.evaluation-analyzer .section-title,
.evaluation-analyzer .result-title,
.evaluation-analyzer .tab-pane h3 {
    white-space: normal !important; /* 允许标题换行 */
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
}

/* 确保分析过程中的标题完整显示 */
.evaluation-analyzer .visual-analysis-section h3,
.evaluation-analyzer .persuasive-review-section h3,
.evaluation-analyzer .optimization-section h3 {
    white-space: normal !important;
    overflow: visible !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
}

/* 特别修复详情优化结果标题的问题 */
.evaluation-analyzer .result-header h3,
.evaluation-analyzer .analysis-result h2,
.evaluation-analyzer .analysis-result h3 {
    display: inline-block !important;
    white-space: nowrap !important; /* 对标题强制不换行 */
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    line-height: 1.2 !important;
    text-align: left !important;
    padding-right: 20px !important; /* 右侧留出空间 */
}

/* 确保输入框顶部对齐 */
.evaluation-analyzer .input-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* 强制使按钮显示在最右侧 */
.evaluation-analyzer .result-actions,
.visual-analysis-content + .result-actions,
.visual-analysis-title ~ .result-actions,
.optimization-content + .result-actions,
.optimization-title ~ .result-actions,
.analysis-result .result-actions {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    margin-left: auto !important;
    z-index: 10 !important; /* 确保按钮显示在上层 */
    background: rgba(20, 20, 20, 0.7) !important; /* 添加半透明背景增强可见性 */
    padding: 5px 10px !important;
    border-radius: 4px !important;
}

/* 确保包含按钮的容器使用相对定位 */
.evaluation-analyzer .result-header,
.evaluation-analyzer .analysis-result-header,
.evaluation-analyzer .visual-analysis-result-content,
.evaluation-analyzer .optimization-result-content,
.visual-analysis-content,
.optimization-content {
    position: relative !important;
    padding-right: 190px !important; /* 给按钮留出足够空间 */
    min-height: 40px !important; /* 确保容器高度足够容纳按钮 */
}

/* 强制按钮在同一行并排显示 */
.evaluation-analyzer .result-actions button,
.evaluation-analyzer .result-actions a {
    display: inline-flex !important; 
    align-items: center !important;
    justify-content: center !important;
    min-width: auto !important;
    height: 32px !important;
    padding: 0 10px !important;
    margin: 0 5px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

/* 调整模块标题区域，确保按钮显示在最右侧 */
.evaluation-analyzer .visual-analysis-result-section,
.evaluation-analyzer .optimization-result-section,
.evaluation-analyzer .persuasive-review-section {
    position: relative !important;
    width: 100% !important;
    overflow: visible !important;
}

/* 直接覆盖DOM结构创建的按钮容器样式 */
.analysis-result-header {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
}

.analysis-result-header .result-actions {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
}

/* 重新设计按钮布局样式 */
/* 清除所有之前的按钮布局相关样式 */
.evaluation-analyzer .result-header,
.evaluation-analyzer .analysis-result-header,
.evaluation-analyzer .result-actions {
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
}

/* 1. 首先设置结果容器为相对定位 */
.evaluation-analyzer .visual-analysis-result-content,
.evaluation-analyzer .optimization-result-content,
.evaluation-analyzer .persuasive-review-content {
    position: relative !important;
    width: 100% !important;
    padding-top: 50px !important; /* 为顶部的按钮预留空间 */
    margin-top: 10px !important;
}

/* 2. 设置标题区域样式 */
.evaluation-analyzer .visual-analysis-title,
.evaluation-analyzer .optimization-title,
.evaluation-analyzer h3 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    font-size: 18px !important;
    margin: 10px 0 20px 0 !important;
    padding: 0 !important;
    z-index: auto !important;
    max-width: none !important;
    width: auto !important;
}

/* 3. 强制按钮显示在顶部右侧 */
.evaluation-analyzer .result-actions {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    z-index: 10 !important;
    background: rgba(30, 30, 30, 0.8) !important;
    padding: 5px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    width: auto !important;
}

/* 4. 统一按钮样式 */
.evaluation-analyzer .result-actions button,
.evaluation-analyzer .result-actions a {
    margin: 0 5px !important;
    padding: 5px 10px !important;
    min-width: auto !important;
    height: 30px !important;
    line-height: 20px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border-radius: 3px !important;
}

/* 5. 覆盖所有可能的按钮选择器 */
.visual-analysis-content ~ .result-actions,
.visual-analysis-title ~ .result-actions,
.optimization-content ~ .result-actions,
.optimization-title ~ .result-actions,
.analysis-result-header .result-actions,
.result-header .result-actions,
div[class*="content"] + .result-actions,
div[class*="title"] + .result-actions {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: auto !important;
}

/* 6. 确保标题与内容正确布局 */
.evaluation-analyzer .visual-analysis-content,
.evaluation-analyzer .optimization-content {
    margin-top: 40px !important;
    padding-top: 10px !important;
    width: 100% !important;
    position: relative !important;
}

/* 7. 针对已知的DOM结构单独修复 */
.analysis-result-header {
    position: relative !important;
    min-height: 40px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

/* 8. 特别处理容器边距确保有足够空间 */
.evaluation-analyzer .analysis-result {
    padding: 20px !important;
    position: relative !important;
}

/* 最高优先级样式覆盖，确保按钮定位正确 */
.evaluation-analyzer .result-actions {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    z-index: 9999 !important;
}

/* 直接针对视觉分析和详情优化的按钮容器 */
.visual-analysis-result-content .result-actions,
.optimization-result-content .result-actions {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: auto !important;
    z-index: 9999 !important;
}

/* 修复标题叠加显示的问题 */

/* 1. 首先重置评价分析工具的所有标题样式 */
.evaluation-analyzer h1, 
.evaluation-analyzer h2, 
.evaluation-analyzer h3, 
.evaluation-analyzer h4, 
.evaluation-analyzer h5, 
.evaluation-analyzer h6 {
    position: static !important;
    display: block !important;
    margin: 15px 0 !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
}

/* 2. 重置主要界面布局，确保正确的文档流 */
.evaluation-analyzer .tab-content,
.evaluation-analyzer .tab-pane,
.evaluation-analyzer .input-section,
.evaluation-analyzer .analysis-result {
    position: relative !important;
    padding: 20px !important;
    margin: 10px 0 !important;
    display: block !important;
    width: 100% !important;
}

/* 3. 特别处理结果容器和标题 */
.evaluation-analyzer .visual-analysis-result-content,
.evaluation-analyzer .optimization-result-content,
.evaluation-analyzer .persuasive-review-content {
    position: relative !important;
    padding: 20px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    display: block !important;
}

/* 4. 修复特定标题的样式 */
.evaluation-analyzer .tool-header h2 {
    font-size: 22px !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.evaluation-analyzer .section-title {
    font-size: 20px !important;
    margin: 20px 0 10px 0 !important;
    border-left: 3px solid #5b00d7 !important;
    padding-left: 10px !important;
    line-height: 1.4 !important;
}

/* 5. 确保按钮容器定位不影响标题布局 */
.evaluation-analyzer .result-actions {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    z-index: 9999 !important;
}

/* 6. 处理有特殊DOM结构的地方 */
.evaluation-analyzer .analysis-result-header {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    padding-right: 150px !important; /* 给按钮预留位置 */
    display: block !important;
    min-height: 40px !important;
}

.evaluation-analyzer .analysis-result-header h3 {
    position: static !important;
    display: block !important;
    margin-bottom: 10px !important;
}

/* 7. 针对页面顶部标题特别处理 */
.evaluation-analyzer .tool-container > h3,
.evaluation-analyzer .tool-container > h2 {
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    font-size: 22px !important;
    border-bottom: 1px solid #333 !important;
    padding-bottom: 10px !important;
}

/* 8. 确保内容区域不受影响 */
.evaluation-analyzer .visual-analysis-content,
.evaluation-analyzer .optimization-content {
    margin-top: 20px !important;
    width: 100% !important;
}

/* 移除之前设置的标题绝对定位 */
.evaluation-analyzer h2,
.evaluation-analyzer h3 {
    position: static !important;
}