/** 
 * Live Streams CSS for Social Feed 
 */ 
 
/* Live Streams Container Styles */ 
.live-streams-container { 
  margin: 0 0 15px 0; 
  padding: 10px 0; 
  background-color: #222; 
  border-radius: 8px; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 
} 
 
.live-streams-container.hidden { 
  display: none; 
} 
 
.live-streams-header { 
  display: flex; 
  align-items: center; 
  padding: 0 15px 10px; 
  margin-bottom: 5px; 
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
} 
 
.live-streams-header .live-indicator-dot { 
  width: 10px; 
  height: 10px; 
  background-color: #ff0000; 
  border-radius: 50%; 
  margin-right: 8px; 
  animation: pulse 1.5s infinite; 
} 
 
.live-streams-header span { 
  font-weight: bold; 
  font-size: 16px; 
  color: #fff; 
} 
 
.live-streams-scroll { 
  width: 100%; 
  overflow-x: auto; 
  scrollbar-width: thin; 
  scrollbar-color: #1DB954 #333; 
  -webkit-overflow-scrolling: touch; 
  padding: 5px 0; 
} 
 
.live-streams-scroll::-webkit-scrollbar { 
  height: 6px; 
} 
 
.live-streams-scroll::-webkit-scrollbar-track { 
  background: #333; 
  border-radius: 3px; 
} 
 
.live-streams-scroll::-webkit-scrollbar-thumb { 
  background-color: #1DB954; 
  border-radius: 3px; 
} 
 
.live-streams-list { 
  display: flex; 
  padding: 0 10px; 
  gap: 15px; 
  min-width: max-content; 
} 
 
.live-stream-item { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  cursor: pointer; 
  transition: transform 0.2s; 
  position: relative; 
  width: 100px; 
} 
 
.live-stream-item:hover { 
  transform: translateY(-3px); 
} 
 
.live-stream-avatar-container { 
  position: relative; 
} 
 
.live-stream-avatar { 
  width: 70px; 
  height: 70px; 
  border-radius: 50%; 
  object-fit: cover; 
  border: 2px solid #ff0000; 
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3); 
} 
 
.live-stream-username { 
  margin-top: 8px; 
  font-size: 12px; 
  font-weight: bold; 
  color: #fff; 
  text-align: center; 
  max-width: 100%; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
} 
 
.live-stream-badge { 
  position: absolute; 
  top: -5px; 
  right: -5px; 
  background-color: #ff0000; 
  color: white; 
  font-size: 10px; 
  font-weight: bold; 
  padding: 2px 6px; 
  border-radius: 10px; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
  text-transform: uppercase; 
} 
 
.live-stream-viewers { 
  display: flex; 
  align-items: center; 
  gap: 3px; 
  font-size: 11px; 
  color: #ccc; 
  margin-top: 3px; 
} 
 
.live-stream-viewers i { 
  font-size: 10px; 
} 
 
@keyframes pulse { 
  0% { 
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); 
  } 
  70% { 
    box-shadow: 0 0 0 6px rgba(255, 0, 0, 0); 
  } 
  100% { 
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); 
  } 
}