/* Reels style avatar ring for stories */
.user-status-home .status-list li a.story-item {
  position: relative;
  display: block;
}
.user-status-home .status-list li a.story-item img {
  border-radius: 10px;
}
/* avatar ring */
.user-status-home .status-list li a.story-item .story-avatar-ring {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
  z-index: 10;
}
.user-status-home .status-list li a.story-item .story-avatar-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50% !important;
  object-fit: cover;
  position: static !important; /* evita el estilo global que pone position:absolute en todas las imágenes dentro de <a> */
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}
/* estados del anillo */
.user-status-home .status-list li a.story-item .story-avatar-ring.pro {
  border-color: #d4af37 !important; /* gold */
  box-shadow: 0 0 0 2px rgba(212,175,55,0.35);
}
/* Cuando todas las historias están vistas, el estado debe ser gris aún si es pro */
.user-status-home .status-list li a.story-item .story-avatar-ring.seen {
  border-color: #9e9e9e !important;
  box-shadow: 0 0 0 2px rgba(158,158,158,0.35);
}
/* Asegurar prioridad del estado visto sobre pro */
.user-status-home .status-list li a.story-item .story-avatar-ring.pro.seen {
  border-color: #9e9e9e !important;
  box-shadow: 0 0 0 2px rgba(158,158,158,0.35) !important;
}
.user-status-home .status-list li a.story-item .story-avatar-ring.seen { border: 3px solid #9aa0a6; }
.user-status-home .status-list li a.story-item .story-avatar-ring.unseen { border: 3px solid #2196F3; }

/* Movement animation when opening a story (like facebook reels zoom-in) */
.lightbox-content { transform-origin: center center; }
.lightbox-container.story-opening .lightbox-content { animation: openStoryZoom 300ms ease-out both; }
@keyframes openStoryZoom {
  0% { transform: translateY(10px) scale(0.98); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* optional subtle pulse for unseen ring when hovered */
.user-status-home .status-list li a.story-item:hover .story-avatar-ring.unseen {
  animation: pulseRing 1200ms ease-in-out infinite;
}
@keyframes pulseRing { 0% { border-color: #2196F3; } 50% { border-color: #64b5f6; } 100% { border-color: #2196F3; } }

/* Flechas de navegación del carrusel de historias (Default) */
.user-status-home { position: relative; }
.user-status-home .stories-nav {
  position: absolute;
  top: 50%; /* valor por defecto; JS recalcula al centro exacto de la lista */
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  color: #212121;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  border: none;
  outline: none;
  cursor: pointer;
}
.user-status-home .stories-nav svg { pointer-events: none; }
.user-status-home .stories-nav.prev { left: -12px; }
.user-status-home .stories-nav.next { right: -12px; }
.user-status-home .stories-nav.disabled { display: none; }

/* Ajustes responsivos */
@media (max-width: 520px){
  .user-status-home .stories-nav { width: 36px; height: 36px; }
  .user-status-home .stories-nav.prev { left: -8px; }
  .user-status-home .stories-nav.next { right: -8px; }
}