* { box-sizing: border-box; }
body { 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', 'Microsoft YaHei', Arial, sans-serif; 
  margin: 0; 
  color: #222; 
  background: #e8eaed; 
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
  touch-action: pan-y; /* 优化触摸滚动 */
}
header { padding: 12px 16px; border-bottom: 1px solid #eee; background: #ffffff; }
h1 { font-size: 18px; margin: 0 0 8px 0; }
.hints { color: #666; font-size: 12px; margin-top: 6px; }
main { display: flex; gap: 16px; padding: 16px; height: calc(100vh - 80px); }
.stage-wrap { 
  flex: 0 0 auto; 
  display: flex; 
  justify-content: flex-start; 
  align-items: flex-start; 
  overflow: auto; 
  touch-action: none; /* 禁用触摸滚动，允许自定义手势 */
}
.stage { 
  position: relative; 
  width: 800px; 
  height: 1400px; 
  background: #4a4a4a; 
  border: 1px solid #333; 
  border-radius: 8px; 
  overflow: hidden; 
  touch-action: none; /* 防止触摸时页面滚动 */
  user-select: none; /* 防止文本选择 */
  -webkit-user-select: none;
}
/* 若存在 ../image/model.png，将在 JS 中动态设置尺寸 */

/* 画布占满容器，绘制在单一 canvas 上 */
.stage canvas { 
  width: 100%; 
  height: 100%; 
  display: block; 
  image-rendering: auto; 
  cursor: grab; 
  touch-action: none; /* 禁用默认触摸行为 */
  user-select: none; /* 防止文本选择 */
  -webkit-user-select: none;
}
.stage canvas.grabbing { cursor: grabbing; }

/* 合成中的小提示 */
.busy { position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,0.6); color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 12px; pointer-events: none; }

.sidebar { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  gap: 16px; 
  background: #fff; 
  padding: 16px; 
  border-radius: 8px; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
  overflow-y: auto; 
  min-width: 400px; 
  -webkit-overflow-scrolling: touch; /* iOS 流畅滚动 */
}
.search-bar { display: flex; flex-direction: column; gap: 8px; }
.search-input-wrap { position: relative; }
.search-input-wrap input { width: 100%; padding: 8px 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.search-bar button { padding: 8px 12px; font-size: 14px; border: 1px solid #888; background: #fff; border-radius: 6px; cursor: pointer; }
.search-bar button:hover { background: #f5f5f5; }

h3 { font-size: 14px; margin: 0 0 8px 0; color: #444; }

.icon-picker { display: flex; flex-direction: column; gap: 8px; }
.icon-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.icon-tab { padding: 6px 12px; font-size: 12px; border: 1px solid #ddd; background: #f9f9f9; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.icon-tab:hover { background: #f0f0f0; }
.icon-tab.active { background: #4a90e2; color: #fff; border-color: #4a90e2; }

/* 图标网格区域 */
#iconGrid { display: flex; flex-direction: column; gap: 12px; }

/* 分页控制 */
.icon-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #f5f5f5; border-radius: 6px; border: 1px solid #e0e0e0; }
.icon-pager button { padding: 6px 16px; font-size: 13px; border: 1px solid #999; background: #fff; border-radius: 4px; cursor: pointer; transition: all 0.2s; }
.icon-pager button:hover:not(:disabled) { background: #4a90e2; color: #fff; border-color: #4a90e2; }
.icon-pager button:disabled { opacity: 0.4; cursor: not-allowed; background: #eee; }
.icon-pager .page-info { font-size: 13px; color: #666; white-space: nowrap; }

/* 图标网格容器 */
.icon-grid-container { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); 
  gap: 10px; 
  max-height: 500px; 
  overflow-y: auto; 
  padding: 4px; 
  -webkit-overflow-scrolling: touch; /* iOS 流畅滚动 */
}
.icon-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 1px solid #e0e0e0; border-radius: 8px; cursor: pointer; background: #A9A9A9; transition: all 0.2s; }
.icon-item:hover { border-color: #4a90e2; box-shadow: 0 2px 8px rgba(74,144,226,0.2); transform: translateY(-2px); }
.icon-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 4px; }
.icon-item .name { font-size: 11px; color: #666; text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.selected-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #eef4ff; color: #1a3f8b; border: 1px solid #c9dafc; border-radius: 999px; font-size: 12px; }
.chip .x { cursor: pointer; color: #0b2a6d; font-weight: bold; padding-left: 4px; }
.chip .x:hover { color: #c00; }

.debug { background: #111; color: #0f0; padding: 8px; border-radius: 6px; font-size: 12px; max-height: 220px; overflow: auto; }

/* 候选下拉 */
.suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #dcdfe6; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,0.12); max-height: 280px; overflow: auto; z-index: 1000; }
.suggestion-item { padding: 8px 10px; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; cursor: pointer; }
.suggestion-item:hover { background: #f5f7fa; }
.suggestion-item.active { background: #e6f0ff; }
.suggestion-item .name { color: #222; }
.suggestion-item .meta { color: #666; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* 移动端适配 */
@media (max-width: 1024px) {
  main { 
    flex-direction: column; 
    height: auto; 
    padding: 12px; 
  }
  
  .stage-wrap { 
    width: 100%; 
    justify-content: center; 
    overflow-x: auto; 
    /* 移动端保持触摸控制 */
    touch-action: none;
  }
  
  .stage { 
    width: 100%; 
    max-width: 600px; 
    height: auto; 
    aspect-ratio: 4 / 7; /* 保持宽高比 */
    /* 移动端禁用选择和上下文菜单 */
    -webkit-touch-callout: none;
  }
  
  .sidebar { 
    min-width: 0; 
    width: 100%; 
  }
  
  .icon-grid-container { 
    max-height: 400px; 
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); 
  }
  
  .icon-item img { 
    width: 50px; 
    height: 50px; 
  }
  
  /* 移动端按钮更易点击 */
  .icon-item {
    min-height: 60px;
  }
  
  h1 { 
    font-size: 16px; 
  }
  
  .hints { 
    font-size: 11px; 
  }
}

/* 小屏手机适配 */
@media (max-width: 640px) {
  header { 
    padding: 10px 12px; 
  }
  
  main { 
    padding: 8px; 
    gap: 12px; 
  }
  
  .stage { 
    max-width: 100%; 
    -webkit-touch-callout: none; /* iOS 禁用长按菜单 */
  }
  
  .sidebar { 
    padding: 12px; 
    gap: 12px; 
  }
  
  .icon-grid-container { 
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); 
    gap: 8px; 
    max-height: 350px; 
  }
  
  .icon-item { 
    padding: 6px; 
    min-height: 55px; /* 更易点击 */
  }
  
  .icon-item img { 
    width: 45px; 
    height: 45px; 
  }
  
  .icon-item .name { 
    font-size: 10px; 
  }
  
  .icon-tab { 
    padding: 5px 10px; 
    font-size: 11px; 
    min-height: 32px; /* 更易点击 */
  }
  
  .icon-pager { 
    padding: 6px 8px; 
    gap: 8px; 
  }
  
  .icon-pager button { 
    padding: 5px 12px; 
    font-size: 12px; 
    min-height: 36px; /* 更易点击 */
  }
  
  .icon-pager .page-info { 
    font-size: 12px; 
  }
  
  .search-bar button { 
    padding: 6px 10px; 
    font-size: 13px; 
    min-height: 36px; /* 更易点击 */
  }
  
  .chip { 
    font-size: 11px; 
    padding: 5px 8px; 
  }
}