/*
  全新设计的参数滑块样式
  灵感来源：用户提供的基于 Radix UI 和 Framer Motion 的 React 组件。
  目标：使用纯 CSS 复刻其核心视觉元素，包括渐变、光晕和动画效果。
*/

/* 统一的滑块容器样式 */
.parameter-slider-container {
  background-color: color-mix(in oklab, var(--theme-card) 70%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid color-mix(in oklab, var(--theme-border) 70%, transparent); /* 主题边框 */
  padding: 1rem; /* p-4 */
  border-radius: 0.75rem; /* rounded-xl */
  margin-bottom: 1rem;
}

/* 标签行 */
.parameter-slider-container .slider-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

/* 右侧的值显示徽章 */
.parameter-slider-container .slider-value-badge {
  padding: 0.25rem 0.75rem; /* px-3 py-1 */
  border-radius: 9999px; /* rounded-full */
  background-image: linear-gradient(to right, color-mix(in oklab, var(--primary-color) 20%, transparent), color-mix(in oklab, var(--secondary-color) 20%, transparent));
  border: 1px solid color-mix(in oklab, var(--primary-color) 30%, transparent);
  font-family: monospace;
  font-size: 0.875rem; /* text-sm */
  color: var(--theme-foreground);
}

/* 滑块轨道、滑块和动画的通用样式 */
input[type="range"].themed-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.75rem; /* h-3 */
  border-radius: 9999px;
  background: transparent; /* 背景由轨道伪元素提供 */
  cursor: pointer;
  outline: none;
  position: relative;
}

/* 轨道 - Webkit (Chrome, Safari) */
input[type="range"].themed-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.75rem;
  border-radius: 9999px;
  background-image: linear-gradient(to right, var(--theme-border), color-mix(in oklab, var(--theme-border) 70%, var(--theme-muted))); /* 主题轨道 */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  overflow: hidden; /* 确保内部的填充元素不会溢出 */
  position: relative;
}

/* 轨道 - Mozilla (Firefox) */
input[type="range"].themed-slider::-moz-range-track {
  width: 100%;
  height: 0.75rem;
  border-radius: 9999px;
  background-image: linear-gradient(to right, var(--theme-border), color-mix(in oklab, var(--theme-border) 70%, var(--theme-muted)));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* 滑块/拇指 - Webkit */
input[type="range"].themed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 10;
  margin-top: -0.375rem; /* (轨道高度 - 滑块高度) / 2 */
  width: 1.5rem; /* h-6 w-6 */
  height: 1.5rem; /* h-6 w-6 */
  border-radius: 9999px;
  background-image: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
  border: 2px solid var(--theme-card);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3);
  transition: transform 0.2s ease-in-out;
}

input[type="range"].themed-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

/* 滑块/拇指 - Mozilla */
input[type="range"].themed-slider::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-image: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
  border: 2px solid var(--theme-card);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3);
  transition: transform 0.2s ease-in-out;
}

input[type="range"].themed-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
}

/* 进度条 (填充部分) - Firefox */
input[type="range"].themed-slider::-moz-range-progress {
  height: 0.75rem;
  border-radius: 9999px;
  background-image: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 进度条动画背景 - 这是一个棘手的部分，使用伪元素模拟 */
input[type="range"].themed-slider.progress-fill::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--progress-percent, 0%);
  background-image: linear-gradient(90deg, var(--primary-color), var(--accent-color), var(--secondary-color), var(--primary-color));
  background-size: 300% 100%;
  border-radius: 9999px;
  animation: gradient-flow 4s linear infinite;
  z-index: 1;
}
input[type="range"].themed-slider {
  background: linear-gradient(to right, var(--primary-color), var(--accent-color), var(--secondary-color)) 0 / var(--progress-percent, 0%) 100% no-repeat, 
              linear-gradient(to right, var(--theme-border), color-mix(in oklab, var(--theme-border) 70%, var(--theme-muted))) 0 / 100% 100% no-repeat;
}


@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* 美化后的颜色选择器容器 */
.color-input-container {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 0.375rem; /* rounded-md */
  padding: 2px;
  background-image: linear-gradient(to right, #e5e7eb, #d1d5db);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.color-input-container input[type="color"] {
  width: 100%;
  height: 1.25rem; /* h-5 */
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
}

/* 移除浏览器默认的颜色选择器边框和填充 */
.color-input-container input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-input-container input[type="color"]::-webkit-color-swatch {
  border: 2px solid white;
  border-radius: 0.25rem; /* rounded-sm */
}