/* ══════════════════════════════════════════════════════════════════════
   LuvMe — Companion Status Indicator (online / idle / busy)
   ══════════════════════════════════════════════════════════════════════ */

/* === BASE INDICATOR === */
.status-indicator {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2.5px solid var(--bg-primary, #1a1a2e);
  bottom: 1px;
  right: 1px;
  z-index: 10;
  transition: background-color 0.4s ease;
}

/* === STATES === */
.status-indicator.online {
  background-color: #22c55e;
  animation: status-pulse 2.5s ease-in-out infinite;
}

.status-indicator.idle {
  background-color: #f97316;
  animation: none;
}

.status-indicator.busy {
  background-color: #94252a;
  animation: none;
}

/* === PULSE — green only === */
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

/* === AVATAR WRAPPER (ensure relative positioning) === */
.avatar-status-wrap {
  position: relative;
  display: inline-flex;
}

/* === SIZE VARIANTS === */

/* Small (chat list sidebar) */
.avatar-status-wrap.sm .status-indicator {
  width: 10px;
  height: 10px;
  border-width: 2px;
}

/* Large (companion profile panel) */
.avatar-status-wrap.lg .status-indicator {
  width: 16px;
  height: 16px;
  border-width: 3px;
  bottom: 2px;
  right: 2px;
}

/* Light theme border */
[data-theme="light"] .status-indicator {
  border-color: var(--bg2, #f5f0eb);
}