/*
 * 右下角的 AI 助手悬浮机器人（js/ai-float-trigger.js）。
 *
 * 定位挂在外层 .ai-trigger-dock 上（fixed；拖过之后由 JS 改写成 left/top），
 * 球本身 .ai-search-trigger 的底色 / 尺寸 / hover 仍在 ai-search.css 与 reading-theme.css 里，
 * 这里只加机器人动效、拖动态、气泡与小红点。
 * 加载在 ai-search.css 之后，同权重后来者胜。
 */

.ai-trigger-dock {
    position: fixed;
    right: 24px;
    bottom: 80px; /* 与 .ai-search-trigger 原来的位置一致；桌面端 / 窄屏的覆盖见下方与 desktop.css */
    z-index: 1000;
    /* 拖动交给 Pointer Events，触屏上不能让浏览器抢去滚动 */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/*
 * 拖动与松手吸附的位移都由 JS 的弹簧模拟逐帧写 left/top（见 AiFloatTrigger._tick）：
 * 拖动时球像橡皮筋一样略微滞后于指针并顺着运动方向拉长，松手后欠阻尼地弹到边缘。
 * 这里刻意不写 left/top 的 transition——过渡会和逐帧写入打架，反而抖。
 */

.ai-trigger-dock .ai-search-trigger {
    position: relative;
    right: auto;
    bottom: auto;
    /* 它是 <button> 了：抹掉 UA 的边框与内边距，尺寸仍由 ai-search.css 给 */
    border: none;
    padding: 0;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

.ai-trigger-dock.is-dragging .ai-search-trigger,
.ai-trigger-dock.is-snapping .ai-search-trigger {
    /* 拉伸变形由 JS 按速度逐帧写在 style.transform 上，hover 的那条 transform 过渡要关掉 */
    transition: box-shadow 0.2s ease;
    cursor: grabbing;
}

.ai-trigger-dock.is-dragging .ai-search-trigger {
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.45);
}

.ai-trigger-dock.is-dragging .ai-search-trigger .ai-robot {
    animation: none;
}

/* ---------------- 机器人 ---------------- */

.ai-robot {
    width: 32px;
    height: 32px;
    display: block;
    /* 天线让图形的视觉重心偏上，整体往下挪 2px 才像居中 */
    position: relative;
    top: 2px;
    animation: ai-robot-float 4s ease-in-out infinite;
}

@keyframes ai-robot-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2.5px); }
}

.ai-robot-antenna-light {
    transform-box: fill-box;
    transform-origin: center;
    animation: ai-robot-antenna 2.4s ease-in-out infinite;
}

@keyframes ai-robot-antenna {
    0%, 100% { opacity: 0.55; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* 眨眼：眼睛竖向压扁；JS 随机加 .is-blinking 160ms */
.ai-robot-eye {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.08s ease-in;
}

.ai-search-trigger.is-blinking .ai-robot-eye {
    transform: scaleY(0.12);
}

/* 任务完成那一下换成弯月眼 */
.ai-robot-eyes-happy {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ai-search-trigger.is-celebrating .ai-robot-eyes {
    opacity: 0;
}

.ai-search-trigger.is-celebrating .ai-robot-eyes-happy {
    opacity: 1;
}

.ai-search-trigger.is-celebrating .ai-robot {
    animation: ai-robot-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2;
}

@keyframes ai-robot-bounce {
    0%, 100% { transform: translateY(0) rotate(0); }
    40% { transform: translateY(-5px) rotate(-6deg); }
    70% { transform: translateY(-2px) rotate(4deg); }
}

/* ---------------- 小红点 ---------------- */

.ai-trigger-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 2px var(--bg-primary, #ffffff);
    font-size: 9px;
    line-height: 12px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    pointer-events: none;
}

.ai-trigger-badge--count {
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    top: 0;
    right: 0;
}

/* ---------------- 气泡 ---------------- */

.ai-trigger-bubble {
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    transform: translateY(-50%) scale(0.9);
    transform-origin: right center;
    display: flex;
    /* 关闭键与**首行**文字对齐（多行时也不该掉到中间），靠它自己的高度等于一行行高 */
    align-items: flex-start;
    gap: 6px;
    /*
     * 绝对定位元素的 shrink-to-fit 以容器（56px 的 dock）为可用宽度，不写 max-content 的话
     * 气泡会被压成一列竖排的字。宽度按内容撑，超过 max-width 才换行
     */
    width: max-content;
    max-width: min(260px, calc(100vw - 120px));
    padding: 8px 12px;
    border-radius: 14px;
    border-bottom-right-radius: 4px;
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #1f2937);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    text-align: left;
    font-size: 0.8125rem;
    line-height: 1.45;
    white-space: normal;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ai-trigger-bubble.is-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* 小尾巴指向机器人 */
.ai-trigger-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    width: 10px;
    height: 10px;
    background: inherit;
    border-right: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    transform: translateY(-50%) rotate(45deg);
}

/* 球贴在左缘时气泡从右侧展开，尾巴换到左边 */
.ai-trigger-dock[data-edge="left"] .ai-trigger-bubble {
    right: auto;
    left: calc(100% + 12px);
    transform-origin: left center;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 4px;
}

.ai-trigger-dock[data-edge="left"] .ai-trigger-bubble::after {
    right: auto;
    left: -6px;
    border-right: none;
    border-top: none;
    border-left: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}

.ai-trigger-bubble[data-variant="done"] {
    border-color: rgba(34, 197, 94, 0.45);
}

.ai-trigger-bubble[data-variant="done"] .ai-trigger-bubble-text::before {
    content: '✅ ';
}

.ai-trigger-bubble[data-variant="error"] {
    border-color: rgba(239, 68, 68, 0.45);
}

.ai-trigger-bubble[data-variant="error"] .ai-trigger-bubble-text::before {
    content: '⚠️ ';
}

.ai-trigger-bubble-text {
    flex: 1;
    min-width: 0;
}

.ai-trigger-bubble-close {
    flex-shrink: 0;
    width: 20px;
    /* 高度 = 正文一行的行高（0.8125rem × 1.45），图标就落在首行的正中 */
    height: calc(0.8125rem * 1.45);
    /* form-unified.css 有一条全局的 `button, .btn { min-height: 40px }`（手机端 mobile.css 又是 32px）：
       min-height 无视先后与权重都压过 height，不收回来它就把气泡撑成两行高 */
    min-height: 0;
    min-width: 0;
    margin-right: -4px;
    border: none;
    border-radius: 50%;
    padding: 0;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* 上面的 display:inline-flex 会压过 UA 的 [hidden]，藏起来要显式写 */
.ai-trigger-bubble-close[hidden] {
    display: none;
}

.ai-trigger-bubble-close:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary, #1f2937);
}

[data-theme="dark"] .ai-trigger-bubble {
    background: #1f2937;
    color: #f3f4f6;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .ai-trigger-bubble::after {
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .ai-trigger-bubble-close:hover:not(:where(html[data-kb-pointer="touch"] *)) {
    background: rgba(255, 255, 255, 0.08);
}

/*
 * 纸张主题：气泡与面板同一张纸。文字色取 --kb-ink（reading-theme.css 里深浅各一份，
 * 深色下是浅色墨）——写成不存在的 --kb-text 时兜底值永远生效，深色主题下就是深字压深底、什么都看不见。
 * 这条排在上面 [data-theme="dark"] 那条之后、同权重，所以变量本身必须随主题变
 */
.kb-paper-app .ai-trigger-bubble {
    background: var(--kb-paper-panel, #fffdf8);
    color: var(--kb-ink, #2f2b24);
    border-color: var(--kb-paper-line, rgba(0, 0, 0, 0.1));
    box-shadow: var(--kb-paper-shadow, 0 8px 24px rgba(0, 0, 0, 0.1));
}

.kb-paper-app .ai-trigger-bubble-close {
    color: var(--kb-ink-muted, #827a6d);
}

.kb-paper-app .ai-trigger-bubble::after {
    border-color: var(--kb-paper-line, rgba(0, 0, 0, 0.1));
}

.kb-paper-app .ai-trigger-badge {
    box-shadow: 0 0 0 2px var(--kb-paper, #fbfaf5);
}

/* 窄屏：与 ai-search.css 里原来给 .ai-search-trigger 的位置一致 */
@media (max-width: 1023px) {
    .ai-trigger-dock {
        right: 16px;
        bottom: 100px;
    }
}

/* 减弱动效：留眨眼（很轻），去掉浮动、天线呼吸、回弹与庆祝 */
@media (prefers-reduced-motion: reduce) {
    .ai-robot,
    .ai-robot-antenna-light,
    .ai-search-trigger.is-celebrating .ai-robot {
        animation: none;
    }

    .ai-trigger-bubble {
        transition: opacity 0.2s ease;
    }
}