/*
 * 全站统一的窗口分割线（js/components/splitter.js 的 KbSplitter.bind）：
 * 会话列表宽度、目录宽度、「工作/编码」右侧栏的宽度与上下比例都是这一副形态。
 * 各自文件只管「什么时候显示」与拖动期间关自己的过渡，长相、命中区、拖动期间的全局状态都在这里。
 * 不加 will-change / transform：AI 抽屉里有 position: fixed 的后代（见 CLAUDE.md「打开 AI 抽屉的性能」）。
 */
.kb-splitter {
    position: relative;
    flex-shrink: 0;
    z-index: 11;
    touch-action: none;
    width: 1px;
    cursor: col-resize;
    /* 平时那条线的颜色：默认看不见（两侧面板自己有边框），右侧栏的两条给成纸面分隔线 */
    background: var(--kb-splitter-line, transparent);
}

.kb-splitter[aria-orientation="horizontal"] {
    width: auto;
    height: 1px;
    cursor: row-resize;
}

/* 命中区：视觉上 1px，向两侧各扩 4px（共 9px），鼠标靠近就能按住拖 */
.kb-splitter::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    right: -4px;
}

.kb-splitter[aria-orientation="horizontal"]::before {
    top: -4px;
    bottom: -4px;
    left: 0;
    right: 0;
}

/* 悬停 / 拖动时的强调条：3px，居中压在线上 */
.kb-splitter::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 3px;
    background: var(--kb-accent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.kb-splitter[aria-orientation="horizontal"]::after {
    top: -1px;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 3px;
}

@media (any-hover: hover) {
    .kb-splitter:hover:not(:where(html[data-kb-pointer="touch"] *))::after {
        opacity: 1;
    }
}

.kb-splitter.active::after {
    opacity: 1;
    transition: none;
}

/* 拖动期间：光标不随经过的元素乱跳、不选中文字；webview / iframe 不吃鼠标（指针捕获之外的双保险） */
html.kb-splitter-dragging,
html.kb-splitter-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

html[data-kb-splitter="x"],
html[data-kb-splitter="x"] * {
    cursor: col-resize !important;
}

html[data-kb-splitter="y"],
html[data-kb-splitter="y"] * {
    cursor: row-resize !important;
}

html.kb-splitter-dragging iframe,
html.kb-splitter-dragging webview,
html.kb-splitter-dragging embed,
html.kb-splitter-dragging object {
    pointer-events: none !important;
}

/*
 * 全站统一的贴边收起 / 展开键（.kb-edge-toggle）：左侧菜单、AI 会话列表、详情目录、终端指令集都是这一副长相——
 * 14×40、纸面底色、三边描线（贴着分隔线的那边不描）、单个 chevron。各自文件只管位置（left / top / transform）、
 * 显隐与方向（图标旋转或换类），不要再写自己的底色、尺寸和圆角。
 * **这里不写 display**：本文件在 index 末尾才加载，写了会压过各处同特异度的 display:none（.desktop-only、终端没开侧栏时）。
 * min-* 带 !important：mobile.css 在 ≤1023px 给所有 button 兜了 min-width / min-height，min-width 不看特异度、会把 14px 撑宽。
 */
.kb-edge-toggle {
    align-items: center;
    justify-content: center;
    width: 14px !important;
    min-width: 14px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0;
    margin: 0;
    border: 1px solid var(--kb-paper-line, rgba(96, 84, 62, 0.15));
    border-left: none;
    border-radius: 0 6px 6px 0;
    background: var(--kb-paper, #fbfaf5);
    color: var(--kb-ink-muted, #827a6d);
    box-shadow: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.kb-edge-toggle i {
    line-height: 1;
}

@media (any-hover: hover) {
    .kb-edge-toggle:hover:not(:where(html[data-kb-pointer="touch"] *)) {
        color: var(--kb-ink, #2f2b24);
        background: var(--kb-active-bg);
    }
}

.kb-edge-toggle:focus-visible:where(html:not(.kb-focus-pointer) *) {
    outline: 2px solid var(--kb-accent);
    outline-offset: -2px;
}