/*
 * AI 助手「工作/编码」的右侧栏（js/ai-side-panel.js，仅桌面端）：内置浏览器在上、内置终端在下。
 *
 * 栏是 .ai-drawer-body 里 .ai-chat-panel 右边的一列，宽度变量 --ai-side-width 写在 #aiDrawer 上，
 * 上下比例 --ai-side-split 写在栏上。宽窗口挤压聊天区，窄窗口用页签独占内容区。
 * 不加 will-change / 残留 transform：抽屉里有 position: fixed 的后代（见 CLAUDE.md「打开 AI 抽屉的性能」）。
 */

/* ── 入口：输入框上方 chip 行最右（浏览器在左、终端在右，整组靠右） ── */
.ai-composer-side-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    height: 24px;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 8px;
    font: inherit;
    line-height: 1.6;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid var(--kb-paper-line, rgba(96, 84, 62, 0.15));
    background: transparent;
    color: var(--kb-ink-soft, #5e584e);
    cursor: pointer;
}

/* 整组靠右：只给这一组的第一颗键 auto，后面的紧挨着 */
.ai-composer-side-btn:not(.ai-composer-side-btn + .ai-composer-side-btn) {
    margin-left: auto;
}

.ai-composer-side-btn em {
    font-style: normal;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--kb-active-bg-strong);
    font-size: 0.6875rem;
    line-height: 16px;
    text-align: center;
}

@media (any-hover: hover) {
    .ai-composer-side-btn:hover:not(:where(html[data-kb-pointer="touch"] *)) {
        background: var(--kb-active-bg, rgba(0, 0, 0, 0.04));
        color: var(--kb-ink, #374151);
    }
}

.ai-composer-side-btn.is-active {
    background: var(--kb-active-bg, rgba(0, 0, 0, 0.04));
    border-color: var(--kb-accent);
    color: var(--kb-ink, #374151);
}

/* ── 左缘竖条：长相与命中区在 css/splitter.css（.kb-splitter），这里只给分隔线颜色 ── */
.ai-side-resize-handle,
.ai-side-split-handle {
    --kb-splitter-line: var(--kb-paper-line, rgba(96, 84, 62, 0.15));
}

.ai-side-resize-handle[hidden] {
    display: none;
}

/* ── 栏 ── */
.ai-side-column {
    flex: 0 0 var(--ai-side-width, 480px);
    width: var(--ai-side-width, 480px);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--kb-paper, #fbfaf5);
    /* 主屏幕应用底部指示条的让位，与会话列表同一个变量 */
    padding-bottom: var(--ai-safe-bottom, 0px);
    box-sizing: border-box;
    position: relative;
    /* 里面任何浮层（终端的指令提示、浏览器的菜单）都不许把右侧栏横向撑出窗口；clip 不建滚动容器 */
    overflow-x: clip;
}

.ai-side-column[hidden] {
    display: none;
}

/* 只开一个窗格：它占满整栏；两个都开：上面按比例、下面拿剩下的 */
.ai-side-column > [data-side-pane] {
    flex: 1 1 0;
    min-height: 0;
}

.ai-side-column.is-split > [data-side-pane="browser"] {
    flex: 0 0 var(--ai-side-split, 50%);
}

.ai-side-column > [data-side-pane][hidden] {
    display: none;
}

/* 窗格收着但 AI 正在操作内置浏览器（AiSidePanel.setBackstage）：留在后台渲染，透明、不接鼠标、不占布局 */
.ai-side-column.is-backstage,
.ai-side-compact[data-side-active="chat"].ai-side-backstage .ai-side-column {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--ai-side-width, 480px);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.ai-side-column > [data-side-pane].is-backstage,
.ai-side-compact.ai-side-backstage:not([data-side-active="browser"]) .ai-side-column > [data-side-pane="browser"] {
    display: flex;
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

/* ── 中间横条 ── */
.ai-side-split-handle[hidden] {
    display: none;
}

/* 拖动期间手在动：窗格不追过渡（webview 不吃鼠标统一在 css/splitter.css） */
.ai-drawer.is-side-resizing .ai-side-column,
.ai-drawer.is-side-resizing .ai-side-column > [data-side-pane] {
    transition: none;
}

/* 放不下「聊天 520px + 工具 320px + 分割线」时，用同一批节点切换页签。
   不移动 webview / xterm，不改变工具的打开状态或桌面栏宽偏好。 */
.ai-side-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--kb-paper-line, rgba(96, 84, 62, 0.15));
    -webkit-app-region: no-drag;
}

.ai-side-tabs[hidden],
.ai-side-tabs button[hidden] {
    display: none;
}

.ai-side-tabs button {
    flex: 1;
    min-width: 0 !important;
    min-height: 32px;
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--kb-ink-muted, #827a6d);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.ai-side-tabs button[aria-selected="true"] {
    background: var(--kb-active-bg);
    color: var(--kb-ink, #2f2b24);
}

.ai-side-compact .ai-side-resize-handle,
.ai-side-compact .ai-side-split-handle,
.ai-side-compact:not([data-side-active="chat"]) .ai-chat-panel,
.ai-side-compact:not([data-side-active="chat"]) .ai-session-sidebar,
.ai-side-compact:not([data-side-active="chat"]) .ai-session-resize-handle,
.ai-side-compact:not([data-side-active="chat"]) .ai-sidebar-toggle,
.ai-side-compact:not([data-side-active="chat"]) .ai-session-overlay,
.ai-side-compact[data-side-active="chat"] .ai-side-column,
.ai-side-compact .ai-side-column > [data-side-pane] {
    display: none;
}

.ai-side-compact .ai-side-column {
    flex: 1 1 0;
    width: 100%;
}

.ai-side-compact[data-side-active="browser"] .ai-side-column > [data-side-pane="browser"],
.ai-side-compact[data-side-active="terminal"] .ai-side-column > [data-side-pane="terminal"] {
    display: flex;
    flex: 1 1 0;
}

/* 地址栏独占一行，其余工具按钮换到下一行，避免被压成一个小圆点。 */
.ai-side-compact .ai-browser-toolbar {
    flex-wrap: wrap;
    height: auto;
    padding: 6px 8px;
}

.ai-side-compact .ai-browser-address {
    order: -1;
    flex: 0 0 100%;
    box-sizing: border-box;
    margin: 0;
}

.ai-side-compact .ai-browser-device-bar {
    flex-wrap: wrap;
    height: auto;
}