:host { display: block; }

.hb-skeleton { display: flex; width: 100%; }

.hb-skeleton__header { padding-right: var(--hb-spacing-md); }

.hb-skeleton__content { flex: 1; }

/* 头像占位 */
.hb-skeleton__avatar {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  background: var(--hb-color-fill-secondary);
  border-radius: var(--hb-border-radius-round);
  vertical-align: top;
}

/* 标题占位 */
.hb-skeleton__title {
  width: 28%;
  height: 16px;
  margin-top: var(--hb-spacing-md);
  background: var(--hb-color-fill-secondary);
  border-radius: var(--hb-border-radius-sm);
}

/* 段落占位 */
.hb-skeleton__paragraph { padding: 0; margin: var(--hb-spacing-md) 0 0 0; list-style: none; }
.hb-skeleton__row {
  width: 100%;
  height: 16px;
  margin-bottom: var(--hb-spacing-md);
  background: var(--hb-color-fill-secondary);
  border-radius: var(--hb-border-radius-sm);
  list-style: none;
}
.hb-skeleton__row:last-child { margin-bottom: 0; }
.hb-skeleton__row--short { width: 61%; }

/* 动画状态：对每个占位块应用 shimmer */
.hb-skeleton--active .hb-skeleton__avatar,
.hb-skeleton--active .hb-skeleton__title,
.hb-skeleton--active .hb-skeleton__row {
  background: linear-gradient(
    90deg,
    var(--hb-color-fill-secondary) 25%,
    var(--hb-color-fill) 37%,
    var(--hb-color-fill-secondary) 63%
  );
  background-size: 400% 100%;
  animation: hb-skeleton-loading 1.4s ease infinite;
}

@keyframes hb-skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
