/* 友人帐运行时渲染：骨架占位 / 空态 / 回链状态徽标（配合 /js/friend-links.js 使用，仅 /link 页生效） */

/* 骨架占位：数据到达前撑住卡片网格高度，避免首屏布局跳动。
   宽高与 margin 需与 flink.styl 的 .flexcard-flink-list > a 保持一致，
   媒体查询断点也要同步，否则骨架与真实卡片会错位。 */
.flink-skeleton-card {
  float: left;
  width: calc(100% / 5 - 0.5rem);
  height: 150px;
  margin: 0.5rem 0.25rem;
  border-radius: 8px;
  background: var(--anzhiyu-card-bg, #f2f2f2);
  box-shadow: var(--style-border, 0 0 0 1px rgba(0, 0, 0, 0.06));
  animation: flink-skeleton-pulse 1.4s ease-in-out infinite;
}

@media screen and (max-width: 1024px) {
  .flink-skeleton-card {
    width: calc(33.33333% - 15px);
  }
}

@media screen and (max-width: 600px) {
  .flink-skeleton-card {
    width: calc(50% - 15px);
  }
}

@keyframes flink-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* 空态（接口失败 / 名单为空 / 无脚本兜底共用） */
.flink-empty {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--anzhiyu-secondtext, #858585);
}

/* 状态徽标 */
.flink-status-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 0 8px;
  font-size: 12px;
  line-height: 20px;
  border-radius: 6px;
  color: #fff;
  background: rgba(144, 147, 153, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  animation: flink-status-fade-in 0.3s ease;
  pointer-events: auto;
}

.flink-status-tag--ok {
  background: rgba(68, 170, 106, 0.92);
}

.flink-status-tag--no-backlink {
  background: rgba(230, 162, 60, 0.92);
}

.flink-status-tag--error {
  background: rgba(245, 108, 108, 0.92);
}

.flink-status-tag--unknown {
  background: rgba(144, 147, 153, 0.9);
}

/* 降饱和只作用于卡片内容（封面 + 信息面板），卡片外框与状态徽标不参与——
   徽标是状态信息，必须始终满色可读，不能随内容一起被灰度化。 */
.flink-status-dim .wrapper,
.flink-status-dim .info {
  filter: grayscale(0.85);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* hover 恢复彩色便于查看，范围与降饱和一致；徽标不受影响 */
.flink-status-dim:hover .wrapper,
.flink-status-dim:hover .info {
  filter: none;
  opacity: 1;
}

@keyframes flink-status-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}