:root{
  --loader-card:#fff;
  --loader-shadow:0 4px 10px rgba(0,0,0,0.06);
  --loader-radius:18px;
  --loader-base:#ececec;
  --loader-shine:#f7f7f7;
}

.loading-bubble,
.skeleton-card{
  background:var(--loader-card);
  border-radius:var(--loader-radius);
  padding:1.2rem;
  box-shadow:var(--loader-shadow);
  margin-bottom:1rem;
  overflow:hidden;
}

.skeleton-stack{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.skeleton-line,
.skeleton-cover,
.skeleton-pill{
  background:linear-gradient(90deg, var(--loader-base) 25%, var(--loader-shine) 50%, var(--loader-base) 75%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.15s infinite linear;
}

.skeleton-line{
  height:14px;
  border-radius:999px;
}

.skeleton-line.short{ width:35%; }
.skeleton-line.medium{ width:60%; }
.skeleton-line.long{ width:85%; }
.skeleton-line.full{ width:100%; }

.skeleton-pill{
  height:22px;
  width:90px;
  border-radius:999px;
}

.skeleton-submission{
  display:flex;
  align-items:stretch;
  gap:1rem;
}

.skeleton-cover{
  width:82px;
  height:120px;
  border-radius:8px;
  flex-shrink:0;
}

.skeleton-content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  justify-content:center;
}

.skeleton-bottom{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  gap:.95rem;
}

.fade-in{
  animation:fadeInContent .22s ease both;
}

@keyframes skeletonShimmer{
  from{ background-position:200% 0; }
  to{ background-position:-200% 0; }
}

@keyframes fadeInContent{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .skeleton-line,
  .skeleton-cover,
  .skeleton-pill,
  .fade-in{
    animation:none !important;
  }
}