/* 超轻量级走势图专用样式 */
.mini-trend-chart {
    width: 100% !important;
    height: 50px !important; /* 调整为50px高度 */
    min-height: 50px !important;
    display: block !important;
    position: relative !important;
    background: transparent !important; /* 移除背景色，更简洁 */
    border: none !important; /* 移除边框 */
    border-radius: 0 !important;
    margin: 1px 0 !important; /* 最小边距 */
    padding: 0 !important; /* 移除内边距 */
    /* 禁用交互 */
    pointer-events: none !important; /* 禁用鼠标事件 */
    z-index: 1 !important;
    overflow: hidden !important;
    box-shadow: none !important; /* 移除阴影 */
}

/* 测试图表的特殊样式 */
#test-chart-BTC-large,
#test-chart-ETH-large {
    height: 120px !important;
    min-height: 120px !important;
    border-radius: 6px !important;
}

/* 确保首页小趋势图的父级容器有正确的高度 - 只影响首页的列表区域 */
/* 顶部滚动列表的走势图容器 */
.u-listsp .u-chartview,
.u-listsp.list .u-chartview,
.u-listsp.s6 .u-chartview {
    height: 52px !important; /* 适应50px走势图高度 */
    min-height: 52px !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
}

.u-listsp .u-target .u-chartview {
    height: 52px !important; /* 适应50px走势图高度 */
    min-height: 52px !important;
    position: relative !important;
    overflow: hidden !important;
}

.u-listsp .u-chartview .chart,
.u-listsp.list .u-chartview .chart,
.u-listsp.s6 .u-chartview .chart {
    width: 100% !important;
    height: 52px !important; /* 适应50px走势图高度 */
    min-height: 52px !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}

/* 强制设置顶部滚动列表中所有走势图容器的尺寸 */
.tab-pane .u-listsp .u-chartview,
.tab-content .u-listsp .u-chartview {
    height: 52px !important;
    min-height: 52px !important;
    width: 100% !important;
    display: block !important;
}

.tab-pane .u-listsp .u-chartview .chart,
.tab-content .u-listsp .u-chartview .chart {
    height: 52px !important;
    min-height: 52px !important;
    width: 100% !important;
    display: block !important;
}

/* 移动端响应式设计 - 统一高度为45px */
@media (max-width: 768px) {
    .mini-trend-chart {
        height: 45px !important;
        min-height: 45px !important;
    }
    
    .u-listsp .u-chartview {
        height: 45px !important;
        min-height: 45px !important;
    }
    
    .u-listsp .u-target .u-chartview {
        height: 45px !important;
        min-height: 45px !important;
    }
    
    .u-listsp .u-chartview .chart {
        height: 45px !important;
        min-height: 45px !important;
    }
}

/* 覆盖原有的图片样式 */
.u-chartview .chart .mini-trend-chart {
    width: 100% !important;
    height: 50px !important;
    object-fit: unset !important;
}

/* 确保ECharts canvas正确渲染 */
.mini-trend-chart canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 加载状态样式 */
.mini-trend-chart.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: loading 1.5s infinite !important;
    border: 1px dashed #007bff !important;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 错误状态样式 */
.mini-trend-chart.error {
    background: #f5f5f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #999 !important;
    font-size: 12px !important;
    border: 1px dashed #dc3545 !important;
}

.mini-trend-chart.error::after {
    content: "图表加载失败" !important;
}

/* 调试模式：显示容器边框 */
.debug-charts .mini-trend-chart {
    border: 2px solid #ff0000 !important;
    background: rgba(255, 255, 0, 0.2) !important;
}

.debug-charts .u-chartview {
    border: 1px solid #00ff00 !important;
}

.debug-charts .u-chartview .chart {
    border: 1px solid #0000ff !important;
}