/**
 * AI 助手输入框的 @ 提及下拉
 *
 * 面板挂在 body 上（position: fixed），由 JS 按输入框位置定位，
 * 这样不会被抽屉的 overflow 裁掉。
 */

:root {
    --ai-mention-bg: #ffffff;
    --ai-mention-border: #e5e7eb;
    --ai-mention-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    --ai-mention-text: #111827;
    --ai-mention-muted: #6b7280;
    --ai-mention-active-bg: #eff6ff;
    --ai-mention-active-text: #1d4ed8;
}

[data-theme="dark"],
html.dark {
    --ai-mention-bg: #1f2937;
    --ai-mention-border: #374151;
    --ai-mention-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --ai-mention-text: #f3f4f6;
    --ai-mention-muted: #9ca3af;
    --ai-mention-active-bg: rgba(59, 130, 246, 0.18);
    --ai-mention-active-text: #93c5fd;
}

.ai-mention-panel {
    position: fixed;
    z-index: 12000;
    max-height: 280px;
    overflow-y: auto;
    background: var(--ai-mention-bg);
    border: 1px solid var(--ai-mention-border);
    border-radius: 10px;
    box-shadow: var(--ai-mention-shadow);
    padding: 4px;
    font-size: 13px;
    color: var(--ai-mention-text);
}

.ai-mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    cursor: pointer;
    min-height: 36px;
}

/*
 * 键盘导航时必须屏蔽 hover。
 *
 * hover 与 active 共用一条高亮规则，而鼠标停在哪一行是与键盘无关的状态——
 * 用 ↑↓ 把 active 移到别处时，指针下那一行仍然亮着，界面上就出现两个高亮。
 * 面板一旦被键盘操作就打上 .is-keyboard，直到指针真的移动过才恢复 hover。
 */
.ai-mention-item.active {
    background: var(--ai-mention-active-bg);
    color: var(--ai-mention-active-text);
}

.ai-mention-panel:not(.is-keyboard) .ai-mention-item:hover {
    background: var(--ai-mention-active-bg);
    color: var(--ai-mention-active-text);
}

.ai-mention-item-icon {
    flex: 0 0 auto;
    font-size: 15px;
    opacity: 0.8;
}

/*
 * 三段文字的宽度优先级：标题 > 分类信息 > 摘要。
 *
 * 原来摘要是 flex: 1 1 auto——basis 为 auto 意味着它的基准尺寸是整段摘要的宽度。
 * 一条 200 字的摘要基准约 2400px，标题只有 100px，按比例收缩时标题要分摊掉
 * 大部分缺口，于是「上线部署相关待办」被压成「上线…」。
 *
 * 改法：摘要 basis 设 0，它只吃剩余空间、也最先被压没，永远不跟标题抢；
 * 分类信息的收缩系数给到标题的 4 倍，让它排在标题之前牺牲。
 */
.ai-mention-item-name {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-mention-item-meta {
    flex: 0 4 auto;
    min-width: 0;
    max-width: 40%;
    color: var(--ai-mention-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-mention-item-desc {
    flex: 1 1 0;
    min-width: 0;
    color: var(--ai-mention-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-mention-item-type {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--ai-mention-border);
    color: var(--ai-mention-muted);
    font-size: 11px;
    line-height: 16px;
}

.ai-mention-hint {
    padding: 6px 10px 4px;
    border-top: 1px solid var(--ai-mention-border);
    margin-top: 4px;
    color: var(--ai-mention-muted);
    font-size: 11px;
}

/* 移动端触摸目标要够大，且提示行没有键盘意义 */
@media (max-width: 1023px) {
    .ai-mention-item {
        min-height: 44px;
        padding: 10px 12px;
    }

    /* 窄屏先砍摘要；分类信息比摘要重要，留到实在放不下再由 flex 收缩处理 */
    .ai-mention-item-desc {
        display: none;
    }

    .ai-mention-item-meta {
        max-width: 50%;
    }

    .ai-mention-hint {
        display: none;
    }
}

.ai-mention-empty {
    padding: 10px 12px;
    color: var(--ai-mention-muted);
    font-size: 12px;
}

/* ============================================================
 * 提及标签（chip）
 *
 * contenteditable="false" 让它成为一个原子节点：整体选中、退格一次整块删除、
 * 无法被局部编辑——这正是 textarea 方案做不到、只能靠「发送前回查文本」兜底的地方。
 * ============================================================ */
.ai-mention-chip {
    display: inline;
    padding: 0 6px;
    margin: 0 1px;
    border-radius: 5px;
    background: var(--ai-mention-active-bg);
    color: var(--ai-mention-active-text);
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    /* 用户选中整块时要看得出来，光标也不该显示成文本插入态 */
    cursor: default;
    user-select: all;
}

.ai-mention-chip::selection,
.ai-mention-chip ::selection {
    background: var(--ai-mention-active-text);
    color: var(--ai-mention-bg);
}

/* 消息气泡中的提及复用输入框 chip，只取消编辑态专属的交互语义。 */
.ai-message-mention-chip {
    vertical-align: baseline;
    cursor: text;
    user-select: text;
}

/* 深色阅读主题的用户气泡本身是浅色纸张色，提及文字需改用深蓝保证可读性。 */
[data-theme="dark"] .kb-paper-app .message-user .ai-message-mention-chip,
html.dark .kb-paper-app .message-user .ai-message-mention-chip {
    color: #1e40af;
}