/* ================================================================
   css/charts.css — 图表容器 + 工具栏 + 动画
   ================================================================ */
.chart-wrapper {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    transition: box-shadow var(--transition);
    overflow: hidden;
}
.chart-wrapper:hover { box-shadow: var(--shadow-lg); }

.btn-tool {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    color: var(--color-text);
    cursor: pointer;
    font-size: 12px;
    transition: background var(--transition), border-color var(--transition);
}
.btn-tool:hover { background: var(--color-bg); border-color: var(--color-accent); }
.btn-collapse { padding: 2px 6px; font-size: 14px; min-width: 28px; }

.chart-wrapper .uplot { border-radius: 4px; }

/* Skeleton screen */
.chart-skeleton {
    min-height: 400px;
    background: linear-gradient(90deg, var(--color-bg) 25%, var(--color-surface) 50%, var(--color-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

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

.pending-chart {
    min-height: 400px;
    background: linear-gradient(90deg, var(--color-bg) 25%, var(--color-surface) 50%, var(--color-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}