/* solosight-skeleton.css - shared skeleton loading affordance for
   SoloSight v2 surfaces. One-time CSS import; use the .sd-skel class
   with optional --w / --h custom properties for width / height. */

.sd-skel {
  display: block;
  width: var(--sd-skel-w, 100%);
  height: var(--sd-skel-h, 12px);
  border-radius: 6px;
  background: linear-gradient(90deg,
    color-mix(in srgb, currentColor 8%, transparent) 25%,
    color-mix(in srgb, currentColor 14%, transparent) 50%,
    color-mix(in srgb, currentColor 8%, transparent) 75%);
  background-size: 200% 100%;
  animation: sd-skel-pulse 1.6s ease-in-out infinite;
}
.sd-skel + .sd-skel { margin-top: 8px; }
.sd-skel-row {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  align-items: center;
}
.sd-skel-row .sd-skel-avatar {
  width: 32px; height: 32px; border-radius: 999px; flex: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, currentColor 8%, transparent) 25%,
    color-mix(in srgb, currentColor 14%, transparent) 50%,
    color-mix(in srgb, currentColor 8%, transparent) 75%);
  background-size: 200% 100%;
  animation: sd-skel-pulse 1.6s ease-in-out infinite;
}
.sd-skel-row .sd-skel-body { flex: 1; min-width: 0; }

@keyframes sd-skel-pulse {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-skel, .sd-skel-row .sd-skel-avatar { animation: none; }
}