/* AI STEAM Plus — skeleton states + lazy-mount perf (2026-05-11).
 *
 * Critical CSS, kept tiny + inlined where possible. Mirrors dashboard
 * widget shapes so a skeleton placeholder occupies the same vertical
 * space as the real widget when it mounts — eliminating CLS.
 *
 * Pulses use prefers-reduced-motion guards so the page is calm for
 * motion-sensitive users.
 */

/* ----------------------------------------------------------------
 * Section: the .v5-card baseline shape (matches CSS section 61)
 * ---------------------------------------------------------------- */
.aisteam-skeleton {
  background: #11141B;
  border: 1px solid rgba(154, 166, 189, 0.18);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin: 1rem 0;
  position: relative;
  overflow: hidden;
  /* Reserve at minimum 160px so widget mount doesn't cause layout
   * shift. Most widgets fit within 240-360px once data loads. */
  min-height: 160px;
}

.aisteam-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(150, 211, 95, 0.06) 35%,
    rgba(150, 211, 95, 0.12) 50%,
    rgba(150, 211, 95, 0.06) 65%,
    transparent 100%
  );
  animation: aisteam-skeleton-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}

.aisteam-skeleton-title,
.aisteam-skeleton-line,
.aisteam-skeleton-pill,
.aisteam-skeleton-bar {
  background: rgba(154, 166, 189, 0.12);
  border-radius: 6px;
  display: block;
}
.aisteam-skeleton-title {
  height: 14px;
  width: 55%;
  margin-bottom: 0.6rem;
}
.aisteam-skeleton-line {
  height: 10px;
  width: 100%;
  margin-bottom: 0.4rem;
}
.aisteam-skeleton-line.short { width: 70%; }
.aisteam-skeleton-line.medium { width: 85%; }
.aisteam-skeleton-pill {
  height: 22px;
  width: 80px;
  border-radius: 12px;
  display: inline-block;
  margin: 0.25rem 0.25rem 0.25rem 0;
}
.aisteam-skeleton-bar {
  height: 30px;
  width: 100%;
  margin-top: 0.4rem;
}

@keyframes aisteam-skeleton-shimmer {
  0%   { transform: translateX(-20%); }
  100% { transform: translateX(120%); }
}

/* Respect reduced-motion (also honoured by the v5 a11y switch) */
html[data-a11y-motion="reduced"] .aisteam-skeleton::after,
@media (prefers-reduced-motion: reduce) {
  .aisteam-skeleton::after { animation: none; opacity: 0.4; }
}

/* When a mount anchor flips to "mounted", swap the skeleton for the
 * real widget by hiding the .aisteam-skeleton child. */
[data-aisteam-mounted="1"] .aisteam-skeleton { display: none; }

/* ----------------------------------------------------------------
 * Section: a small "loading more…" indicator for any list widget
 * ---------------------------------------------------------------- */
.aisteam-loading-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #9AA6BD;
  font-size: 0.85rem;
  padding: 0.4rem 0;
}
.aisteam-loading-row::before {
  content: '';
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(150, 211, 95, 0.4);
  border-top-color: #96D35F;
  animation: aisteam-spin 700ms linear infinite;
}
@keyframes aisteam-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aisteam-loading-row::before { animation: none; border-top-color: transparent; }
}