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

.wordsRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 0;
	padding: 8px;
	border: 1px solid variables.$border-default;
	border-radius: variables.$radius-sm;
	background: variables.$bg-default;
	min-height: 40px;
}

.wordGroup {
	display: inline-flex;
	align-items: center;
}

.word {
	display: inline-block;
	padding: 2px 4px;
	font-size: 13px;
	line-height: 1.5;
	color: variables.$text-primary;
	border-radius: 2px;
	user-select: none;
}

.gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 22px;
	padding: 0;
	margin: 0 1px;
	border: none;
	background: none;
	cursor: pointer;
	border-radius: 2px;
	position: relative;
	flex-shrink: 0;

	&::after {
		content: "";
		display: block;
		width: 2px;
		height: 100%;
		background: transparent;
		border-radius: 1px;
		transition: background 0.15s;
	}

	&:hover::after {
		background: variables.$color-primary;
		opacity: 0.4;
	}

	&.active::after {
		background: variables.$color-danger;
		opacity: 1;
	}
}

.preview {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	border: 1px dashed variables.$border-default;
	border-radius: variables.$radius-sm;
	background: variables.$bg-surface;
}

.previewLabel {
	font-size: 11px;
	font-weight: 500;
	color: variables.$text-tertiary;
	margin-bottom: 2px;
}

.previewSegment {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 3px 0;

	& + & {
		border-top: 1px solid variables.$border-default;
	}
}

.previewTime {
	font-size: 11px;
	font-family: monospace;
	color: variables.$text-tertiary;
	white-space: nowrap;
	flex-shrink: 0;
}

.previewText {
	font-size: 13px;
	color: variables.$text-primary;
}

.actions {
	display: flex;
	gap: 8px;
}

.splitBtn {
	padding: 4px 12px;
	border: none;
	border-radius: variables.$radius-sm;
	background: variables.$color-primary;
	color: variables.$color-white;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: opacity 0.15s;

	&:hover {
		opacity: 0.9;
	}

	&:disabled {
		background: variables.$border-default;
		color: variables.$text-tertiary;
		cursor: default;
	}
}

.cancelBtn {
	padding: 4px 12px;
	border: 1px solid variables.$border-default;
	border-radius: variables.$radius-sm;
	background: none;
	color: variables.$text-secondary;
	font-size: 12px;
	cursor: pointer;

	&:hover {
		background: variables.$bg-hover;
	}
}
