/* =========================
   组件面板整体外壳
   - 负责整体定位
   - 负责整体平移（折叠/展开）
========================= */
#component-panel-wrapper {
    position: fixed;              /* 固定在屏幕上 */
    left: 10px;                   /* 距离左侧 10px（原数值） */
    top: 150px;                   /* 距离顶部 150px（原数值） */
    z-index: 999;                 /* 保证在画布之上 */
    transition: transform 0.3s ease; /* 折叠/展开平移动画 */
}

/* =========================
   工具框主体
   - 实际放组件按钮的容器
========================= */
#component-panel {
    width: 200px;                 /* 工具栏宽度（原数值） */
    background: #f5f5f5;          /* 浅灰背景 */
    border: 1px solid #ddd;       /* 边框 */
    border-radius: 4px;           /* 圆角 */
    padding: 10px;                /* 内边距 */
    max-height: calc(100vh - 40px); /* 最大高度，防止超屏 */
    overflow-y: auto;             /* 超出时纵向滚动 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 浮层阴影 */
    transition: opacity 0.3s ease; /* 折叠时透明度变化 */
}

/* =========================
   分类区块（每一组组件）
========================= */
.component-category {
    user-select: none;              /* 防止选中文本 */
    margin-bottom: 15px;          /* 分类之间的间距 */
}

/* =========================
   分类标题
========================= */
.component-category-title {
    margin: 0 0 8px;              /* 标题与下方按钮的间距 */
    font-size: 12px;              /* 小号字体 */
    font-weight: bold;            /* 加粗 */
    color: #666;                  /* 深灰色文字 */
}

/* =========================
   组件按钮网格
   - 两列布局
========================= */
.component-grid {
    display: grid;                /* 网格布局 */
    grid-template-columns: repeat(2, 1fr); /* 固定两列 */
    gap: 6px;                     /* 按钮间距 */
}

/* =========================
   单个组件按钮
========================= */
.component-button {
    padding: 6px;                 /* 内边距 */
    background: white;            /* 白色背景 */
    border: 1px solid #ddd;       /* 边框 */
    border-radius: 3px;           /* 小圆角 */
    font-size: 11px;              /* 字体大小 */
    cursor: grab;                 /* 拖拽手势 */
    text-align: center;           /* 文本居中 */
    user-select: none;            /* 禁止选中文本 */
}

/* =========================
   折叠 / 展开切换按钮
   - 位于工具框外右下角
========================= */
#panel-toggle {
    position: absolute;           /* 相对 wrapper 定位 */
    left: 97%;                    /* 位于工具框右侧（原数值） */
    bottom: 2px;                  /* 靠下（原数值） */
    margin-left: 6px;             /* 与工具框的间距 */
    width: 24px;                  /* 宽度 */
    height: 48px;                 /* 高度 */
    background: #f5f5f5;          /* 背景色 */
    border: 1px solid #ddd;       /* 边框 */
    border-radius: 6px;           /* 圆角 */
    display: flex;                /* 使用 flex 居中 */
    align-items: center;          /* 垂直居中 */
    justify-content: center;      /* 水平居中 */
    cursor: pointer;              /* 点击手型 */
    font-size: 12px;              /* 箭头大小 */
    color: #666;                  /* 字体颜色 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* 阴影 */
    transition: all 0.3s ease;    /* hover / 状态动画 */
}

/* =========================
   拖拽时的幽灵元素
========================= */
.drag-ghost {
    position: fixed;              /* 跟随鼠标 */
    padding: 4px 8px;             /* 内边距 */
    background: rgba(51,153,255,0.85); /* 半透明蓝色 */
    color: #fff;                  /* 白色文字 */
    border-radius: 3px;           /* 圆角 */
    pointer-events: none;         /* 不阻挡鼠标事件 */
    z-index: 9999;                /* 最高层级 */
    transform: translate(-50%, -50%); /* 以鼠标为中心 */
    font-size: 11px;              /* 字体大小 */
}