/**
 * 雷达图中文标签修复和优化
 * 这个CSS文件用于解决Chart.js雷达图中的中文标签显示问题
 */

/* 增强雷达图容器最小高度，确保有足够的空间显示标签 */
#personaPainPointsChart,
#aiCapabilitiesChart {
    min-height: 380px !important;
}

/* 在移动设备上增加高度以适应旋转的标签 */
@media (max-width: 768px) {
    #personaPainPointsChart,
    #aiCapabilitiesChart {
        min-height: 350px !important;
    }
}

@media (max-width: 480px) {
    #personaPainPointsChart,
    #aiCapabilitiesChart {
        min-height: 320px !important;
    }
}

/* 修复雷达图容器在某些设备上可能出现的溢出问题 */
.chart-container canvas {
    max-width: 100%;
}

/* 覆盖Chart.js默认样式，确保雷达图中的中文文本正确显示 */
.chartjs-size-monitor {
    overflow: visible !important;
}

/* 确保雷达图中的标签显示完整 */
.chart-container {
    overflow: visible !important;
}

/* 增加图表下方的标题和说明的间距，避免与雷达图标签重叠 */
#personaPainPointsChart + .chart-caption,
#aiCapabilitiesChart + .chart-caption {
    margin-top: 25px;
}

/* 增加图表图例项之间的间距，改善中文图例的可读性 */
.chartjs-render-monitor {
    margin: 0 auto;
}

/* 增强图表标题的换行显示，确保长标题能够正确换行 */
.chart-container h3 {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}