/**
 * 「工作/编码」会话的结构化提问（js/ai-ask.js，V3.108，参考 Claude Code / Codex 的提问交互）：
 * 输入框上方的问题面板 + 工具卡片里的问答清单。
 *
 * 面板外壳复用确认条（ai-search.css 的 .ai-confirm-overlay / .ai-confirm-card / .ai-confirm-actions / .ai-confirm-btn），
 * 这里只补提问特有的部分。颜色一律取 --kb-* 与语义变量（写之前已确认都有定义），按钮禁用态走 --kb-control-disabled-*。
 * 加载在 ai-search.css 之后。
 */

/* ---------------- 面板 ---------------- */

/* 提问可以比确认条高一些：四个选项 + 说明 + 题签，六成高常常装不下；内容区自己滚 */
.ai-ask-overlay,
.ai-ask-overlay .ai-ask-card {
    max-height: min(72vh, var(--ai-overlay-room, 72vh));
}

.ai-ask-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-ask-head {
    align-items: center;
    flex-shrink: 0;
}

.ai-ask-head .ai-confirm-title {
    flex: 1;
    min-width: 0;
}

.ai-ask-collapse {
    flex-shrink: 0;
    margin-left: auto;
}

/* 只纵向滚：内容一旦比卡片宽（曾经是选项不换行），overflow-y: auto 会连带出横向滚动，左边被卷走一截 */
.ai-ask-body {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 14px -4px 0;
    padding: 0 4px;
}

/* 收起：只剩标题一行，消息区让出的高度跟着缩（ResizeObserver），可以翻上去看上下文 */
.ai-ask-overlay.is-collapsed .ai-ask-body,
.ai-ask-overlay.is-collapsed .ai-ask-actions {
    display: none;
}

/* 题签：一题一颗，○ 未答 / ✓ 已答，当前题加底色 */
.ai-ask-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.ai-ask-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0 !important;
    min-height: 28px !important;
    max-width: 100%;
    padding: 2px 12px;
    border: none;
    border-radius: 999px;
    background: var(--kb-paper-soft);
    color: var(--kb-ink-muted);
    font-size: 12.5px;
    cursor: pointer;
}

.ai-ask-tab span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-ask-tab.is-answered i {
    color: var(--kb-accent);
}

.ai-ask-tab.is-active {
    background: var(--kb-accent-soft);
    color: var(--kb-accent-strong);
    font-weight: 600;
}

.ai-ask-question {
    margin-bottom: 10px;
    color: var(--kb-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.55;
}

.ai-ask-index {
    margin-right: 6px;
    color: var(--kb-ink-muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.ai-ask-multi {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--kb-active-bg);
    color: var(--kb-ink-soft);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.7;
    vertical-align: 1px;
}

.ai-ask-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 一个选项一行：序号键位、单选圆点 / 多选方框、标签 + 推荐徽标、灰色说明。
   与确认卡同一种做法（V3.227）：不画边框，浅底块区分各行，选中换强调色的浅底 */
.ai-ask-option {
    display: flex;
    align-items: flex-start;
    /* form-unified.css 给所有 button 设了 justify-content: center，选项行要靠左 */
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius-md, 8px);
    background: var(--kb-paper-soft);
    color: var(--kb-ink);
    text-align: left;
    /* form-unified.css 给所有 button 设了 white-space: nowrap：选项行是 button，长说明不换行，
       把选项撑出卡片右缘，内容区随之出现横向滚动（左边也被卷走一截）。这里收回来 */
    white-space: normal;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

@media (any-hover: hover) {
    .ai-ask-option:hover:not(:where(html[data-kb-pointer="touch"] *)) {
        background: var(--kb-active-bg-strong);
    }
}

.ai-ask-option:focus-visible:where(html:not(.kb-focus-pointer) *),
.ai-ask-option:focus-within {
    outline: none;
    box-shadow: 0 0 0 2px var(--kb-accent-soft);
}

.ai-ask-option.is-selected {
    background: var(--kb-accent-soft);
}

.ai-ask-key {
    flex-shrink: 0;
    width: 18px;
    color: var(--kb-ink-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
}

.ai-ask-mark {
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border: 1.5px solid var(--kb-ink-muted);
}

.ai-ask-mark--radio {
    border-radius: 50%;
}

.ai-ask-mark--check {
    border-radius: 4px;
}

.ai-ask-option.is-selected .ai-ask-mark {
    border-color: var(--kb-accent);
    background: var(--kb-accent);
    box-shadow: inset 0 0 0 3px var(--kb-paper-panel);
}

.ai-ask-option.is-selected .ai-ask-mark--check {
    box-shadow: inset 0 0 0 2px var(--kb-paper-panel);
}

.ai-ask-option-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

/* overflow-wrap: anywhere：没有空格的长串（路径、dish.ingredients 这类标识符）也能在行内断开 */
.ai-ask-option-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ai-ask-recommended {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--kb-accent);
    color: var(--text-inverse);
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.7;
    vertical-align: 1px;
}

.ai-ask-option-desc {
    color: var(--kb-ink-muted);
    font-size: 12.5px;
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 「其他」：一行输入框，输入即选中 */
.ai-ask-option--other {
    align-items: center;
    cursor: text;
}

.ai-ask-option--other .ai-ask-mark {
    margin-top: 0;
}

/* 多带一层 .ai-ask-option：form-unified.css 的 input[type="text"]（边框、40px 高、左右 1rem 内边距）特异度比单个类高 */
.ai-ask-option .ai-ask-other-input,
.ai-ask-option .ai-ask-other-input:focus {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 2px 0;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: var(--kb-ink);
    font-size: 0.875rem;
    line-height: 1.55;
}

/*
 * 聚焦态由外层选项卡（.ai-ask-option 的描边）承担，输入框自己不再画一圈。
 * reading-theme.css 的 `.kb-paper-app input:focus` 给所有输入框套了带 !important 的 3px 光晕与描边，
 * 上面不带 !important 的 none 压不住——这里同样 !important、靠更高的特异度（4 个类 > 2 类 1 元素）胜出
 */
.kb-paper-app .ai-ask-option .ai-ask-other-input:focus,
.kb-paper-app .ai-ask-option .ai-ask-other-input:focus-visible {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.ai-ask-option .ai-ask-other-input::placeholder {
    color: var(--kb-ink-muted);
}

.ai-ask-error {
    margin-top: 8px;
    color: var(--kb-diff-del-fg);
    font-size: 12.5px;
}

.ai-ask-privacy {
    margin: 10px 0 0;
    color: var(--kb-ink-muted, var(--text-secondary));
    font-size: 0.75rem;
    line-height: 1.6;
}

.ai-ask-actions {
    flex-shrink: 0;
    align-items: center;
}

/* 「跳过」靠左，超时提示居中撑开，翻题与提交靠右 */
.ai-ask-actions .ai-ask-skip {
    margin-right: auto;
}

.ai-ask-timeout {
    color: var(--kb-ink-muted);
    font-size: 12px;
}

.ai-ask-actions .ai-confirm-btn:disabled {
    border-color: var(--kb-control-disabled-border);
    background: var(--kb-control-disabled-bg);
    color: var(--kb-control-disabled-text);
    cursor: default;
}

/* 窄屏：超时提示单独一行，按钮整宽好点 */
@media (max-width: 720px) {
    .ai-ask-timeout {
        order: -1;
        width: 100%;
    }

    .ai-ask-actions .ai-ask-skip {
        margin-right: 0;
    }

    .ai-ask-actions .ai-confirm-btn {
        flex: 1;
    }
}

/* ---------------- 工具卡片里的问答清单 ---------------- */

.ai-ask-summary {
    padding: 2px 0;
}

.ai-ask-summary-list {
    margin: 0;
    padding-left: 18px;
}

.ai-ask-summary-item {
    margin: 6px 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--kb-ink);
}

.ai-ask-summary-header {
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--kb-active-bg);
    color: var(--kb-ink-soft);
    font-size: 11px;
}

.ai-ask-summary-answer {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 2px;
    color: var(--kb-accent-strong);
    font-weight: 500;
}

.ai-ask-summary-open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-top: 4px;
    padding: 4px 10px;
    border: 1px solid var(--kb-accent);
    border-radius: 8px;
    background: transparent;
    color: var(--kb-accent-strong);
    font-size: 12.5px;
    cursor: pointer;
}

/* 等待回答的卡片：图标轻轻闪一下，与跑着的工具（转圈）区分开 */
.ai-ask-pending-icon {
    color: var(--kb-accent);
    animation: ai-ask-pulse 1.6s ease-in-out infinite;
}

@keyframes ai-ask-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-ask-pending-icon {
        animation: none;
    }
}