/* ============================ 消息区 ============================ */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-anchor: none;
}
/* 内容限宽居中 —— 现代 AI 产品的高级感来源 */
.chat-messages > .message,
.chat-messages > .empty-state {
    width: 100%;
    max-width: var(--content-max);
}

.scroll-to-bottom-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 132px;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    z-index: 10;
    transition: background var(--duration-fast) var(--ease),
        transform var(--duration-fast) var(--ease);
}
.scroll-to-bottom-btn:hover {
    background: var(--color-surface-hover);
    transform: translateX(-50%) translateY(-2px);
}
.scroll-to-bottom-btn.visible {
    display: flex;
}

.message {
    display: flex;
    gap: 14px;
    margin-bottom: 28px;
}
.message.user {
    flex-direction: row-reverse;
}
.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.message.user .message-avatar {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
.message.assistant .message-avatar {
    background: var(--color-text);
    color: var(--color-bg);
}
/* 深色模式:--color-text 翻成浅白会让头像底色发白、白图标消失。
   改用中性深灰底 + 浅色图标,融入深色界面。 */
:root[data-theme="dark"] .message.assistant .message-avatar {
    background: var(--color-surface-hover);
    color: var(--color-text);
}
.message.assistant.thinking .message-avatar {
    animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.94); }
}
/* 消息内容外层（头像旁的列）*/
.message > div:not(.message-avatar) {
    min-width: 0;
    max-width: calc(100% - 46px);
}
.message.user > div:not(.message-avatar) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.message-content {
    background: var(--color-surface);
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    line-height: 1.65;
    font-size: 0.95rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.message.assistant .message-content {
    border-top-left-radius: var(--radius-sm);
}
.message.user .message-content {
    background: var(--color-primary);
    color: var(--color-primary-text);
    border-color: transparent;
    border-top-right-radius: var(--radius-sm);
}
.message.user .message-content a {
    color: #fff;
    text-decoration: underline;
}
.message.assistant .message-content {
    color: var(--color-text);
}
.message.assistant .message-content p,
.message.assistant .message-content li,
.message.assistant .message-content blockquote,
.message.assistant .message-content h1,
.message.assistant .message-content h2,
.message.assistant .message-content h3,
.message.assistant .message-content h4,
.message.assistant .message-content h5,
.message.assistant .message-content h6 {
    color: var(--color-text);
}
.message-content p { margin-bottom: 0.5rem; }
.message-content p:last-child { margin-bottom: 0; }
.message-content.markdown-body {
    max-width: 100%;
    overflow-wrap: anywhere;
}
/* 代码块样式归一:第三方 github-markdown-css 用 @media (prefers-color-scheme:dark)
   跟随系统深色给 pre 套 GitHub 深色配色,而本项目界面主题由 :root[data-theme] 自管,
   两套机制脱节会导致浅色气泡里冒出深色代码框 + highlight 错乱色块。这里用项目
   --color-* token 显式写死 pre/code 配色(特异性靠 .message-content.markdown-body
   多一个类压过第三方规则),让代码块在浅色 / data-theme 深色两种界面主题下都协调一致。 */
.message-content.markdown-body pre {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.85em;
    line-height: 1.5;
}
.message-content.markdown-body pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}
.message-content.markdown-body code {
    background: var(--color-surface-hover);
    color: var(--color-text);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

/* 覆盖 github-markdown-css 默认的 hr(height: .25em + 灰色填充块,显得又粗又突兀),
   改为一条清晰柔和的灰色细线。用 --color-divider(比卡片边框略深一档),
   因为卡片边框那档灰拉成长横线放在纯白气泡上对比太低、几乎看不见。 */
.message-content.markdown-body hr {
    height: 1px;
    margin: 1.25rem 0;
    background-color: var(--color-divider);
    border: 0;
}

/* 去掉 github-markdown-css 给标题加的 border-bottom 下划线:
   极简风下标题靠字号字重区分即可,分隔统一交给上面的细 hr,
   避免"标题下划线 + 紧邻分隔线"两条灰线挤在一起。 */
.message.assistant .message-content h1,
.message.assistant .message-content h2 {
    border-bottom: none;
    padding-bottom: 0;
}

.message-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 0.5rem 0;
}
.message.user .message-content img {
    max-width: 150px;
    max-height: 150px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 2px solid rgba(255, 255, 255, 0.5);
}
/* 非表格(内嵌于正文)的商标图片:默认不超过 200px,窄屏按容器宽度自适应 */
.message.assistant .message-content img {
    max-width: min(100%, 200px);
    max-height: 200px;
    object-fit: contain;
    border: 1px solid var(--color-border);
}
.message.assistant .message-content img:not(.user-uploaded-image) {
    cursor: zoom-in;
}

/* AI 输出图片占位:1:1 容器撑高,加载完淡入,避免高度跳变 */
.message.assistant .message-content .md-img-frame {
    display: inline-block;
    position: relative;
    width: min(100%, 200px);
    aspect-ratio: 1 / 1;
    max-height: 200px;
    margin: 0.5rem 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: md-img-shimmer 1.4s linear infinite;
}
.message.assistant .message-content .md-img-frame > img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    margin: 0;
    border: none;
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.message.assistant .message-content .md-img-frame.loaded {
    animation: none;
    background: transparent;
}
.message.assistant .message-content .md-img-frame.loaded > img { opacity: 1; }
.message.assistant .message-content .md-img-frame.error {
    animation: none;
    background: #f5f5f5;
}
.message.assistant .message-content .md-img-frame.error::after {
    content: '图片加载失败';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
    font-size: 12px;
}
@keyframes md-img-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .message.assistant .message-content .md-img-frame { animation: none; }
    .message.assistant .message-content .md-img-frame > img { transition: none; }
    .image-preview-thumb { animation: none; }
}

/* AI 流式输出中,链接右括号还没到达时的 dim 占位 */
.md-link-pending {
    color: var(--color-text-tertiary);
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
}
.message-content .user-uploaded-image {
    max-width: 150px !important;
    max-height: 150px !important;
    object-fit: cover !important;
}
.message.user .message-content .user-uploaded-image {
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
}

/* AI 回复操作条:复制等图标按钮,预留扩展位 */
.message-actions {
    display: flex;
    gap: 2px;
    margin-top: 4px;
}
.msg-action-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease),
        color var(--duration-fast) var(--ease);
}
.msg-action-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}
.msg-action-btn.is-done { color: #16a34a; }
/* B3 重新生成:仅最后一条 AI 回复可重发,历史回复隐藏该按钮(复制/赞/踩等其余操作每条都保留) */
.message.assistant:not(.is-last-assistant) .msg-action-btn[data-msg-action="regenerate"] {
    display: none;
}
/* A2 引导追问:仅最后一条 AI 回复展示快捷操作,发新消息后旧回复的 chips 随即隐藏 */
.message.assistant:not(.is-last-assistant) .followup-chips {
    display: none;
}
/* B2 反馈:赞用主题色,踩用警示色 */
.msg-action-btn.is-active[data-msg-action="like"] { color: var(--color-primary); }
.msg-action-btn.is-active[data-msg-action="dislike"] { color: var(--color-danger); }
/* B3 重新生成:进行中按钮转为 loading 态(旋转 loader + 禁用),避免重复点击 */
.msg-action-btn:disabled { cursor: default; opacity: 0.6; }
.msg-action-btn:disabled:hover { background: transparent; color: var(--color-text-tertiary); }
.msg-action-btn .lucide.spin { animation: spin 0.8s linear infinite; }

/* B2 点踩原因选择列表 */
.feedback-reason-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.feedback-reason-item {
    text-align: left;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.92rem;
    transition: background var(--duration-fast) var(--ease),
        border-color var(--duration-fast) var(--ease);
}
.feedback-reason-item:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}