/* chat-bubble.css — P1.3 ③ 问答场景对标微信对话气泡 */

/* 用户气泡:brand-50 / fill-active(亮 = 淡蓝,暗 = 半透明蓝) */
.chat-message.user .chat-bubble {
    background: var(--fill-active);
    color: var(--text-primary);
    border-bottom-right-radius: 4px;
}

/* AI 不确定标记:气泡顶部 warning chip */
.chat-uncertainty-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-warning);
    background: var(--color-warning-bg);
    border-radius: var(--token-radius-full);
}
.chat-uncertainty-chip::before {
    content: "\26A0\FE0F";
}

/* 长对话浮按钮容器 */
.chat-float-actions {
    position: sticky;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
    pointer-events: none;
    z-index: 10;
}
.chat-float-actions[hidden] {
    display: none;
}
.chat-float-actions .chat-float-btn {
    pointer-events: auto;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--token-radius-full);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background var(--motion-fast), color var(--motion-fast);
}
.chat-float-actions .chat-float-btn:hover {
    background: var(--fill-active);
    color: var(--brand-primary);
}

/* §4.6.3 气泡底部一行 source chip:每颗 = 一个被引用文档,点击跳详情。
 * 三个 variant:is-current(brand 蓝表示"当前文章")/ is-wiki(AI 紫表示 wiki 派生)/
 * is-raw(中性表示原始文档)— 让用户一眼分辨"AI 用了什么类型的资料"。*/
.chat-source-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}
.chat-source-chip {
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--token-radius-full);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--motion-fast), color var(--motion-fast);
}
.chat-source-chip.is-current {
    color: var(--brand-primary);
    background: var(--fill-active);
}
.chat-source-chip.is-wiki {
    color: var(--color-ai);
    background: var(--color-ai-bg);
}
.chat-source-chip.is-raw {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}
.chat-source-chip:hover {
    filter: brightness(0.96);
}
.chat-source-chips-more {
    font-size: 11px;
    color: var(--text-muted);
    padding: 3px 6px;
}

/* §4.6.3 流式光标:文字流入末尾 ▌ 1Hz 闪烁(克制,非旋转 spinner)。
 * 用 brand-primary 跟用户操作色一致,不抢眼。bubbletext-flow 期间 token 增长
 * 不重排版,光标 inline-block 不占段落额外行。*/
.stream-cursor {
    display: inline-block;
    margin-left: 1px;
    color: var(--brand-primary);
    font-weight: 600;
    animation: stream-cursor-blink 1s steps(2, end) infinite;
    /* 提示给 screen reader / 自动化测试:这是装饰元素 */
    user-select: none;
}
@keyframes stream-cursor-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* §4.6.3 失败 inline 重试:气泡内,不弹 toast。.chat-retry-btn 现在
 * 是 chip 形态(原本无样式,样式靠继承). */
.chat-retry-btn {
    margin-top: 8px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--token-radius-full);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
    background: var(--color-danger-bg);
    cursor: pointer;
    transition: background var(--motion-fast);
}
.chat-retry-btn:hover {
    background: var(--color-danger);
    color: var(--token-color-ink-0);
}
.chat-error-bubble .chat-error-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-danger);
    margin-bottom: 4px;
}
.chat-error-bubble .chat-error-text {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 6px 8px;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}