.story-modal {
	z-index: 99999;
}

.story-modal-content {
	width: 100%;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.story-frame {
	aspect-ratio: 9 / 16;
	width: 100%;
	max-height: 90dvh;
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	background: #000;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
}

#storyVideo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.story-progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
}

.story-desc {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	z-index: 20;
	max-height: 40%;
	overflow: hidden;
}

	.story-desc.collapsed {
		max-height: 4.5rem;
	}
/* =========================
   Story Bar
========================= */

.story-bar {
	position: relative;
}

.story-container {
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block: 0.5rem;
}

	.story-container::-webkit-scrollbar {
		display: none;
	}




/* =========================================================
   Story Item
========================================================= */

.story-item {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.3s ease, z-index 0.3s ease;
}
/*.story-item {
	flex-shrink: 0;
	width: clamp(72px, 7vw, 88px);
	display: flex;
	flex-direction: column;
	align-items: center;
}*/


	.story-item:hover {
		z-index: 20;
	}


.story-image {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 999px;
	display: block;
}

/* =========================================================
   Story Thumbnail
========================================================= */

.story-thumb {
	position: relative;
	z-index: 2;
	border-radius: 999px;
	overflow: hidden;
	transform: scale(1);
	transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

	/* Glow Layer */
	.story-thumb::before {
		content: "";
		position: absolute;
		inset: -4px;
		border-radius: inherit;
		background: linear-gradient( 135deg, #3b82f6, #8b5cf6, #ec4899 );
		filter: blur(12px);
		opacity: 0;
		z-index: -1;
		transition: opacity 0.35s ease;
	}

/* Hover Effects */
.story-item:hover .story-thumb {
	transform: scale(1.06);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 0 18px rgba(59, 130, 246, 0.18);
}

	.story-item:hover .story-thumb::before {
		opacity: 0.9;
	}

/* =========================================================
   Story Title
========================================================= */

.story-title {
	position: relative;
	margin-top: 0.55rem;
	padding: 0.55rem 0.9rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 500;
	text-align: center;
	line-height: 1.3;
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #111827;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.45);
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.story-item:hover .story-title {
	transform: translateY(-2px);
}

/* Dark Mode */
.dark .story-title {
	color: #f9fafb;
	background: rgba(17, 24, 39, 0.72);
	border-color: rgba(255,255,255,0.08);
	box-shadow: 0 10px 24px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.04);
}

/* =========================================================
   Story Arrows
========================================================= */

.story-arrow {
	width: 46px;
	height: 46px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.12);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255,255,255,0.16);
	box-shadow: 0 8px 20px rgba(0,0,0,0.18);
	transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}

	.story-arrow:hover {
		transform: translateY(-50%) scale(1.08);
		background: rgba(255,255,255,0.2);
		box-shadow: 0 10px 25px rgba(0,0,0,0.22);
	}

	.story-arrow:active {
		transform: translateY(-50%) scale(0.96);
	}

/* Dark Mode */
.dark .story-arrow {
	background: rgba(17,24,39,0.55);
	border-color: rgba(255,255,255,0.08);
}

/* =========================================================
   Active Story Animation
========================================================= */

.story-item.active .story-thumb {
	animation: pulseStory 2s infinite;
}

@keyframes pulseStory {

	0% {
		box-shadow: 0 0 0 0 rgba(59,130,246,0.55);
	}

	70% {
		box-shadow: 0 0 0 14px rgba(59,130,246,0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(59,130,246,0);
	}
}

/* =========================================================
   Story Description Box
========================================================= */

.story-desc {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 20px;
	padding: 14px 16px;
	border-radius: 18px;
	background: rgba(15, 23, 42, 0.62);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255,255,255,0.08);
	color: #fff;
	box-shadow: 0 10px 35px rgba(0,0,0,0.28);
	z-index: 30;
	transition: all 0.3s ease;
}

/* Light Mode */
html:not(.dark) .story-desc {
	background: rgba(255,255,255,0.82);
	color: #111827;
	border-color: rgba(0,0,0,0.06);
}

/* Text */
.story-desc-text {
	font-size: 0.92rem;
	line-height: 1.8;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Expanded */
.story-desc.expanded .story-desc-text {
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* Toggle Button */
.story-desc-toggle {
	margin-top: 10px;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	opacity: 0.9;
	transition: opacity 0.25s ease;
}

	.story-desc-toggle:hover {
		opacity: 1;
	}




/* ========================================
   STORY SLIDER
======================================== */

.story-slider {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

/* ========================================
   WRAPPER
======================================== */

.story-track-wrapper {
	overflow: hidden;
	width: 100%;
}

/* ========================================
   TRACK
======================================== */

.story-track {
	display: flex;
	gap: 16px;
	transition: transform 0.4s ease;
	will-change: transform;
}

/* ========================================
   STORY ITEM
======================================== */

.story-item {
	flex: 0 0 calc(20% - 13px);
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1024px) {

	.story-item {
		flex: 0 0 calc(25% - 12px);
	}
}

@media (max-width: 768px) {

	.story-item {
		flex: 0 0 calc(33.333% - 11px);
	}
}

/* ========================================
   THUMB
======================================== */

.story-thumb {
	width: 100%;
	max-width: 96px;
	border-radius: 999px;
	transition: transform .3s ease;
}

.story-item:hover .story-thumb {
	transform: scale(1.05);
}

/* ========================================
   IMAGE
======================================== */

.story-image {
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: 999px;
	object-fit: cover;
	display: block;
}

/* ========================================
   TITLE
======================================== */

.story-title {
	margin-top: 10px;
	font-size: .85rem;
	font-weight: 500;
	text-align: center;
}

/* ========================================
   ARROWS
======================================== */

.story-arrow {
	position: absolute;
	top: 40%;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.9);
	box-shadow: 0 4px 15px rgba(0,0,0,.12);
	z-index: 10;
}

.story-arrow-right {
	right: -10px;
}

.story-arrow-left {
	left: -10px;
}