.root {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.playerWrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: variables.$radius-md;
	overflow: hidden;
}

.videoArea {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.playButton {
	position: absolute;
	bottom: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s;

	&:hover {
		background: rgba(0, 0, 0, 0.8);
	}
}

.timeRange {
	position: absolute;
	bottom: 8px;
	left: 8px;
	padding: 2px 8px;
	border-radius: variables.$radius-sm;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.segmentControls {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: variables.$bg-canvas;
}

.segmentTime {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: variables.$text-secondary;
	white-space: nowrap;
}

.segmentTrack {
	position: relative;
	flex: 1;
	height: 4px;
	background: variables.$border-subtle;
	border-radius: 2px;
	cursor: pointer;
}

.segmentTrackFill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: variables.$color-primary;
	border-radius: 2px;
	pointer-events: none;
}

.segmentTrackThumb {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: variables.$color-primary;
	transform: translate(-50%, -50%);
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.textArea {
	width: 100%;
	min-height: 72px;
	padding: 10px 12px;
	border: 1px solid variables.$border-default;
	border-radius: variables.$radius-sm;
	background: variables.$bg-surface;
	color: variables.$text-primary;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	resize: vertical;

	&:focus {
		outline: none;
		border-color: variables.$color-primary;
		box-shadow: var(--focus-ring);
	}
}

.actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.splitAction {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.actionsSpacer {
	flex: 1;
}

.spinner {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
