/* ============================================================
   OneNav 站点卡片美学状态微灯系统（Logo 右下角呼吸微标）
   精准贴合 Logo 图标右下角 / 不干扰图标显示 / 彻底防穿透
   ============================================================ */

/* 强制卡片建立独立层叠上下文，杜绝页面滚动时微灯穿透吸顶导航与播报条 */
.posts-item.sites-item {
  isolation: isolate;
}

/* 状态微灯底座：绝对定位贴合 Logo 图标右下角，z-index 极低不外溢穿透 */
.ss-status-dot {
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 1;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  transition: transform 0.2s ease;
}

/* 暗色模式自适应边框底座 */
.io-black-mode .ss-status-dot,
.dark-theme .ss-status-dot,
body.dark .ss-status-dot {
  background-color: #1e293b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* 核心指示灯 */
.ss-status-dot > i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: all 0.25s ease;
}

/* 🟢 在线可用：翡翠绿 + 优雅脉冲呼吸光晕 */
.ss-status-dot.ss-ok > i {
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  animation: ss-pulse-glow 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes ss-pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  }
  60% {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* 🔴 异常/失效：静谧暗红 */
.ss-status-dot.ss-error > i {
  background: #ef4444;
  box-shadow: 0 0 3px rgba(239, 68, 68, 0.4);
}

/* 🟠 响应超时：琥珀橙 */
.ss-status-dot.ss-timeout > i {
  background: #f59e0b;
}

/* ⚪ 未检测：极简浅灰 */
.ss-status-dot.ss-unknown > i {
  background: #cbd5e1;
}

/* 悬停微动效：轻微放大质感 */
.posts-item.sites-item:hover .ss-status-dot {
  transform: scale(1.15);
}

/* 异常卡片整体轻柔感知：微弱降饱和 */
.posts-item.sites-item.ss-state-error {
  opacity: 0.85;
}
.posts-item.sites-item.ss-state-error:hover {
  opacity: 1;
}

/* 减少动画模式适配 */
@media (prefers-reduced-motion: reduce) {
  .ss-status-dot.ss-ok > i {
    animation: none;
  }
}