/**
 * insights-skeletons.css — loading + error states for /insights/* pages.
 *
 * Containers carrying [data-insights-render] start in a "loading" state
 * showing a low-contrast pulsing block. Renderers replace innerHTML on
 * insights:ready, removing the skeleton. If a renderer hits an error,
 * .insights-error replaces the contents.
 */

@keyframes insights-skel-pulse {
  0%   { opacity: 0.45; }
  50%  { opacity: 0.85; }
  100% { opacity: 0.45; }
}

[data-insights-render]:empty,
[data-insights-render].is-loading {
  position: relative;
  min-height: 80px;
}

[data-insights-render]:empty::before,
[data-insights-render].is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.07) 50%,
    rgba(0, 0, 0, 0.04) 100%
  );
  border-radius: 12px;
  animation: insights-skel-pulse 1.8s ease-in-out infinite;
}

/* Larger min-heights for sections that fill more vertical space, so the
   skeleton doesn't visually collapse before data lands. */
.chart-card[data-insights-render]:empty,
.chart-card[data-insights-render].is-loading {
  min-height: 280px;
}

.cwe-heatmap-section[data-insights-render]:empty,
.cwe-heatmap-section[data-insights-render].is-loading {
  min-height: 360px;
}

.stat-strip[data-insights-render]:empty,
.stat-strip[data-insights-render].is-loading,
.stat-strip-grid[data-insights-render]:empty,
.stat-strip-grid[data-insights-render].is-loading {
  min-height: 64px;
}

.bar-list[data-insights-render]:empty,
.bar-list[data-insights-render].is-loading,
.severity-bands[data-insights-render]:empty,
.severity-bands[data-insights-render].is-loading {
  min-height: 200px;
}

.cve-card-grid[data-insights-render]:empty,
.cve-card-grid[data-insights-render].is-loading {
  min-height: 320px;
}

/* Honor reduced-motion: stop the pulse, keep the static dim background. */
@media (prefers-reduced-motion: reduce) {
  [data-insights-render]:empty::before,
  [data-insights-render].is-loading::before {
    animation: none;
  }
}

/* Inline error message inside a section that failed to load. */
.insights-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 24px;
  color: var(--text-muted);
  font-size: 14px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}