.inline-player {
	display: flex;
	flex-direction: column;

	// Fixed dimensions to prevent layout shift
	.time-display {
		min-width: 120px;
		text-align: right;
		font-size: 14px;
		line-height: 1.4;
	}

	// Stable button sizes
	.control-button {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		height: 40px;

		&.play-button {
			min-width: 50px;
			height: 50px;
		}
	}

	// Progress slider container
	.progress-container {
		margin: 16px 0;

		.ant-slider {
			margin: 0;

			.ant-slider-rail {
				background: #f5f5f5;
				height: 6px;
			}

			.ant-slider-track {
				background: #1890ff;
				height: 6px;
			}

			.ant-slider-handle {
				width: 16px;
				height: 16px;
				margin-top: -5px;
				border: 2px solid #1890ff;

				&:hover,
				&:focus {
					border-color: #40a9ff;
					box-shadow: 0 0 0 5px rgba(24, 144, 255, 0.12);
				}
			}

			&:hover .ant-slider-track {
				background: #40a9ff;
			}
		}
	}

	// Speed controls
	.speed-controls {
		display: flex;
		align-items: center;
		gap: 4px;

		.speed-label {
			font-size: 12px;
			color: #666;
			margin-right: 8px;
			min-width: 35px;
		}

		.speed-button {
			min-width: 50px;
			height: 28px;
			font-size: 12px;
			border-radius: 4px;

			&.ant-btn-primary {
				background: #1890ff;
				border-color: #1890ff;
			}
		}
	}

	// Volume controls
	.volume-controls {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 140px;

		.volume-icon {
			color: #666;
			font-size: 16px;
			min-width: 16px;
		}

		.volume-slider {
			width: 80px;
			margin: 0;

			.ant-slider-rail {
				background: #f0f0f0;
				height: 4px;
			}

			.ant-slider-track {
				background: #52c41a;
				height: 4px;
			}

			.ant-slider-handle {
				width: 12px;
				height: 12px;
				margin-top: -4px;
				border: 2px solid #52c41a;
			}
		}

		.volume-text {
			font-size: 11px;
			color: #999;
			min-width: 30px;
			text-align: center;
		}
	}

	// Main controls layout
	.main-controls {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
		min-height: 50px;
	}

	.secondary-controls {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 32px;
	}

	// Responsive adjustments
	@media (max-width: 768px) {
		.ant-card-body {
			padding: 16px;
		}

		.main-controls {
			flex-direction: column;
			gap: 12px;

			.time-display {
				min-width: 100px;
				font-size: 12px;
			}
		}

		.secondary-controls {
			flex-direction: column;
			gap: 16px;

			.speed-controls,
			.volume-controls {
				width: 100%;
				justify-content: center;
			}
		}

		.volume-controls {
			min-width: 120px;

			.volume-slider {
				width: 60px;
			}
		}
	}

	@media (max-width: 480px) {
		.speed-controls {
			flex-wrap: wrap;
			justify-content: center;

			.speed-button {
				min-width: 45px;
				margin: 2px;
			}
		}
	}

	// Smooth transitions
	.ant-btn {
		transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		border-radius: 6px;

		&:hover:not(:disabled) {
			transform: translateY(-1px);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}

		&:active {
			transform: translateY(0);
		}
	}

	// Loading state
	.ant-btn-loading {
		.anticon {
			animation: ant-spin 1s infinite linear;
		}
	}

	// Error state styling
	&.has-error {
		.ant-slider {
			.ant-slider-rail {
				background: #ffccc7;
			}

			.ant-slider-track {
				background: #ff4d4f;
			}
		}
	}

	// Focus styles for accessibility
	.ant-btn:focus-visible {
		outline: 2px solid #1890ff;
		outline-offset: 2px;
	}

	.ant-slider:focus-within {
		.ant-slider-handle {
			border-color: #1890ff;
			box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.2);
		}
	}
}
