/* NAXCORE - Story strip (Instagram-like circles on right sidebar) */
.story-strip{
  display:flex;
  gap: 14px;
  padding: 10px 8px 12px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

.story-strip::-webkit-scrollbar{
  height: 6px;
}
.story-strip::-webkit-scrollbar-thumb{
  background: linear-gradient(135deg, rgba(88,101,242,.7), rgba(255,79,216,.7));
  border-radius: 999px;
}

.story-strip .story-item{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
  cursor:pointer;
  min-width: 64px;
  scroll-snap-align: start;
  user-select: none;
  transition: transform .16s ease, filter .16s ease;
}

.story-strip .story-item:hover{
  transform: translateY(-2px) scale(1.03);
}

.story-strip .story-item:not(.seen) .story-ring{
  animation: storyGlow 2.4s ease-in-out infinite;
}

.story-strip .story-item.story-add .story-ring{
  animation: storyGlowAdd 2.4s ease-in-out infinite;
}

.story-strip .story-ring{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 210deg,
    rgba(255,79,216,1) 0deg,
    rgba(88,101,242,1) 120deg,
    rgba(0,255,204,1) 220deg,
    rgba(255,193,7,1) 300deg,
    rgba(255,79,216,1) 360deg
  );
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 20px rgba(88,101,242,.65);
}

.story-strip .story-item.seen .story-ring{
  background: radial-gradient(circle at 30% 0%, rgba(255,255,255,.25), transparent 55%),
              radial-gradient(circle at 100% 120%, rgba(0,0,0,.9), transparent 55%),
              rgba(35,39,52,1);
  box-shadow: 0 0 0 1px rgba(0,0,0,.7);
}

.story-strip .story-avatar{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #202225;
  background-size: cover;
  background-position:center;
  border: 2px solid #111318;
}

.story-strip .story-item.seen .story-avatar{
  filter: grayscale(1);
  opacity: .85;
}

.story-strip .story-name{
  font-weight: 800;
  font-size: 11px;
  color: #f5f6ff;
  max-width: 76px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(0,0,0,.9);
}

.story-strip .story-sub{ display:none; }

/* Story upload modal should always be on top (above story viewer) */
#story-upload-modal{ z-index: 21050 !important; }

/* Make the STORY + button easier to click */
.story-item.story-add .story-ring{
  background: radial-gradient(circle at 30% 0%, rgba(255,255,255,.25), transparent 55%),
              linear-gradient(135deg, rgba(88,101,242,.9), rgba(255,79,216,.9));
}
.story-item.story-add .story-avatar-add{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border-radius:50%;
  background:transparent;
  color:#fefbff;
  font-size:18px;
}
.story-name-add{
  color:#e9ebff;
}


.story-strip .story-item.gold-user .story-ring{
  background: linear-gradient(135deg, #c38b19, #f5c451, #fff0b0, #c38b19);
  box-shadow: 0 0 16px rgba(245,196,81,.22);
}
.story-strip .story-item.gold-user .story-name{
  color:#ffe39a;
}
.story-strip .story-item.gold-user.seen .story-ring{
  background: linear-gradient(135deg, rgba(160,130,70,.48), rgba(110,100,74,.28));
}

.story-strip .story-item .story-name{ max-width:78px; overflow:hidden; text-overflow:ellipsis; }

/* Empty state (story yok) */
.story-empty-state{
  flex:1;
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 8px;
  color:rgba(228,231,255,.82);
  font-size:12px;
  font-weight:500;
}
.story-empty-icon{
  width:26px;
  height:26px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at 30% 0%, rgba(255,255,255,.25), transparent 55%),
              linear-gradient(135deg, rgba(88,101,242,.9), rgba(255,79,216,.9));
  color:#fefbff;
  box-shadow: 0 8px 24px rgba(0,0,0,.7);
  font-size:13px;
}
.story-empty-text span{
  display:block;
}
.story-empty-title{
  font-weight:700;
  margin-bottom:2px;
}
.story-empty-sub{
  opacity:.8;
}

@keyframes storyGlow{
  0%   { box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 10px rgba(88,101,242,.35); }
  50%  { box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 18px rgba(255,79,216,.55); }
  100% { box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 10px rgba(88,101,242,.35); }
}

@keyframes storyGlowAdd{
  0%   { transform: translateY(0); box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 12px rgba(255,79,216,.55); }
  50%  { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 20px rgba(255,255,255,.6); }
  100% { transform: translateY(0); box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 12px rgba(255,79,216,.55); }
}