.wk-category-header {
    display: flex;
    align-items: center;
    gap: var(--wk-sp-1);
    padding: var(--wk-sp-2) var(--wk-sp-2) var(--wk-sp-0-5);
    border-radius: var(--wk-r-xs);
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: background 120ms;
    width: 100%;
    box-sizing: border-box;
}

.wk-category-header:hover {
    background: transparent;
    color: var(--wk-text-strong);
}

/* 空分组整行降透明度 */
.wk-category-header--empty {
    opacity: 0.6;
}

/* 右键菜单打开时的 active 态 */
.wk-category-header--active {
    background: var(--wk-bg-hover);
}

/* 行内重命名编辑态 */
.wk-category-header--editing {
    background: var(--wk-purple-alpha-04);
    width: 100%;
    box-sizing: border-box;
}

.wk-category-header__rename-wrap {
    display: flex;
    align-items: center;
    gap: var(--wk-sp-1);
    flex: 1;
    min-width: 0;
}

.wk-category-header__rename-input {
    flex: 1;
    min-width: 0;
    height: 24px;
    padding: var(--wk-sp-0-5) var(--wk-sp-1-5);
    border: 1px solid var(--wk-brand-primary);
    border-radius: var(--wk-r-xs);
    background: var(--wk-bg-surface);
    box-shadow: 0 0 0 2px var(--wk-purple-alpha-12);
    font: 600 var(--wk-text-size-sm) var(--wk-font-sans);
    color: var(--wk-text-primary);
    outline: none;
}

.wk-category-header__rename-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--wk-r-xs);
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.1s ease;
}

.wk-category-header__rename-btn:hover {
    background: var(--wk-bg-active);
}

.wk-category-header__rename-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wk-category-header__rename-btn--ok {
    color: var(--wk-color-success);
}

.wk-category-header__rename-btn--cancel {
    color: var(--wk-color-error);
}

/* 折叠箭头 — design v3.1: 10x10 chev */
.wk-category-header__arrow {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.15s ease;
    color: var(--wk-icon-muted);
}

.wk-category-header__arrow svg {
    width: 10px;
    height: 10px;
}

/* 折叠态：箭头旋转 -90deg */
.wk-category-header__arrow--collapsed {
    transform: rotate(-90deg);
}

/* 分组名 — design v3.1: 11px, icon-default */
.wk-category-header__name {
    font-size: var(--wk-text-size-xs);
    font-weight: 500;
    color: var(--wk-icon-default);
    flex: 1;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 折叠时括号数量 / 空分组 (空)：内联在分组名里，不是独立 flex item */
.wk-category-header__count {
    font-size: var(--wk-text-size-xs);
    font-weight: 400;
    color: var(--wk-text-tertiary);
}

.wk-category-header__count--empty {
    font-style: italic;
}

/* 未读 badge 容器（多个角标并排） */
.wk-category-header__badges {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

/* 未读 badge */
.wk-category-header__badge {
    min-width: 16px;
    height: 16px;
    border-radius: var(--wk-r-full);
    background: var(--wk-badge-danger-bg);    /* Figma: 淡红 */
    color: var(--wk-badge-danger-text);       /* Figma: 红色文字 */
    font-size: var(--wk-text-size-tiny);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--wk-sp-1);
    flex-shrink: 0;
}

/* @ mention badge（红色圆形，白色文字） */
.wk-category-header__badge--mention {
    width: 16px;
    height: 16px;
    min-width: unset;
    padding: 0;
    border-radius: var(--wk-r-circle);
    background: var(--wk-color-danger);
    color: var(--wk-color-white);
    font-size: var(--wk-text-size-xs);
    font-weight: 900;
    line-height: 16px;
    text-align: center;
    user-select: none;
}

/* 分组拖拽 handle */
.wk-category-header__drag-handle {
    flex-shrink: 0;
    width: 14px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wk-text-tertiary);
    cursor: grab;
    opacity: 0;
    transition: opacity 150ms;
    margin-right: var(--wk-sp-0-5);
}

.wk-category-header:hover .wk-category-header__drag-handle {
    opacity: 1;
}

.wk-category-header__drag-handle:active {
    cursor: grabbing;
}

/* drop-over 高亮 */
.wk-category-section--drop-over > .wk-category-header {
    background: var(--wk-brand-tint-08);
    border-radius: var(--wk-r-sm);
}

/* DragOverlay ghost 样式 */
.wk-category-header--ghost {
    background: var(--wk-bg-base);
    border: 1px solid var(--wk-brand-from);
    border-radius: var(--wk-r-sm);
    box-shadow: var(--wk-shadow-md);
    opacity: 0.9;
    padding: var(--wk-sp-1-5) var(--wk-sp-2);
}
