/* Skeleton Loader */

.skeleton-loader {
  padding-block-start: 1.5rem;
}

.skeleton-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (width <= 64rem) {
  .skeleton-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 40rem) {
  .skeleton-list {
    grid-template-columns: 1fr;
  }
}

.skeleton-item {
  background: var(--ls-surface-card);
  border: 1px solid var(--ls-border);
  border-inline-start: 3px solid var(--ls-border);
  border-radius: var(--ls-radius-lg);
  padding: 1rem;
}

.skeleton-img {
  display: none;
}

.skeleton-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-title {
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, var(--ls-border) 25%, var(--bg-secondary) 50%, var(--ls-border) 75%);
  background-size: 200% 100%;
  block-size: 1.25rem;
  border-radius: var(--ls-radius-sm);
  inline-size: 80%;
}

.skeleton-description {
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
  background: linear-gradient(90deg, var(--ls-border) 25%, var(--bg-secondary) 50%, var(--ls-border) 75%);
  background-size: 200% 100%;
  block-size: 0.875rem;
  border-radius: var(--ls-radius-sm);
  inline-size: 60%;
}

.skeleton-actions {
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  animation-delay: 0.2s;
  background: linear-gradient(90deg, var(--ls-border) 25%, var(--bg-secondary) 50%, var(--ls-border) 75%);
  background-size: 200% 100%;
  block-size: 2rem;
  border-radius: var(--ls-radius-sm);
  inline-size: 40%;
  margin-block-start: 0.5rem;
}

/* List view skeleton */
#bookmarks-container.view-list .skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#bookmarks-container.view-list .skeleton-item {
  padding: 0.75rem 1rem;
}

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

@media (prefers-reduced-motion: reduce) {
  .skeleton-title,
  .skeleton-description,
  .skeleton-actions {
    animation: none;
    background: var(--ls-border);
  }
}