/* ============================================================
   云能 AI 助手 - 专用样式（对齐移动端 pages/ai/chat.vue）
   设计语言：浅灰底 + 白色卡片 + 蓝色主色，桌面/移动双端适配
   ============================================================ */

/* ==================== 全局变量 & 布局 ==================== */
:root {
    --ai-primary: #3b82f6;
    --ai-primary-light: #5c9bff;
    --ai-primary-dark: #2563eb;
    --ai-primary-bg: #eef4ff;
    --ai-primary-border: #d6e4ff;
    --ai-bg: #f0f2f5;
    --ai-card-bg: #ffffff;
    --ai-text: #1f2329;
    --ai-text-secondary: #57606a;
    --ai-text-tertiary: #8a8f99;
    --ai-border: #e8eaf0;
    --ai-input-bg: #f5f7fa;
    --ai-user-msg: #3b82f6;
    --ai-user-msg-text: #ffffff;
    --ai-ai-msg-bg: #ffffff;
    --ai-success: #10b981;
    --ai-success-bg: #f0fdf6;
    --ai-danger: #ef4444;
    --ai-danger-bg: #fef4f4;
    --ai-warning: #f59e0b;
    --ai-warning-bg: #fffaee;
    --ai-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    --ai-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --ai-radius: 10px;
    --ai-radius-lg: 14px;
    --header-height: 56px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: var(--ai-bg);
    color: var(--ai-text);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

/* ==================== 顶部导航栏 ==================== */
#app-header {
    height: var(--header-height);
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 84px;
}

.header-right {
    justify-content: flex-end;
}

.header-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.header-logo {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex-shrink: 0;
}

.header-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ai-text);
    white-space: nowrap;
}

.header-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--ai-text);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, opacity 0.2s;
    flex-shrink: 0;
}

.header-btn:hover {
    background: #f0f2f5;
}

.header-btn:active {
    opacity: 0.6;
}

/* ==================== 侧边栏（历史会话） ==================== */
.sidebar {
    position: fixed;
    top: 0;
    left: -320px;
    width: 320px;
    max-width: 82vw;
    height: 100%;
    height: 100dvh;
    background: var(--ai-card-bg);
    z-index: 500;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--ai-shadow-lg);
    display: flex;
    flex-direction: column;
}

.sidebar.open {
    left: 0;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 499;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-header {
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--ai-border);
    flex-shrink: 0;
}

.sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.sidebar-title-row h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--ai-text);
}

/* 侧边栏关闭按钮（明确可见） */
.sidebar-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f2f5;
    color: var(--ai-text-secondary);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.sidebar-close-btn:hover {
    background: #e5e7eb;
    color: var(--ai-text);
}

.sidebar-new-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
    background: var(--ai-primary-bg);
    border-radius: 999px;
    color: var(--ai-primary);
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.2s;
}

.sidebar-new-btn:active {
    opacity: 0.7;
}

.sidebar-new-icon {
    font-size: 14px;
}

.sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0 20px;
    -webkit-overflow-scrolling: touch;
}

.sidebar-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--ai-text-tertiary);
    font-size: 14px;
}

.sidebar-empty i {
    display: block;
    font-size: 22px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    transition: background 0.2s;
    border-left: 3px solid transparent;
}

.conversation-item:hover {
    background: #f5f7fa;
}

.conversation-item.active {
    background: var(--ai-primary-bg);
    border-left-color: var(--ai-primary);
}

.conversation-item .conv-info {
    flex: 1;
    min-width: 0;
}

.conversation-item .conv-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ai-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item .conv-preview {
    font-size: 12px;
    color: var(--ai-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.conversation-item .conv-delete-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--ai-text-tertiary);
    font-size: 13px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.conversation-item:hover .conv-delete-btn,
.conversation-item.active .conv-delete-btn {
    display: flex;
}

.conversation-item .conv-delete-btn:hover {
    background: var(--ai-danger-bg);
    color: var(--ai-danger);
}

/* ==================== 主聊天区域 ==================== */
#chat-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

#messages-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 12px 12px 20px;
}

/* 欢迎空态 */
.welcome-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px 12px;
}

.welcome-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--ai-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

.welcome-icon img {
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

.welcome-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--ai-text);
    margin-bottom: 8px;
}

.welcome-sub {
    font-size: 13px;
    color: var(--ai-text-tertiary);
    margin-bottom: 14px;
}

/* DeepSeek V4.1 Flash 能力徽标条 */
.welcome-model-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 520px;
    margin: 0 auto 20px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.6;
    color: #1e40af;
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
    border: 1px solid #bfdbfe;
}

.welcome-model-badge strong {
    font-weight: 700;
    color: #1d4ed8;
}

.welcome-model-badge .wmb-sep {
    color: #93b4e8;
}

.welcome-model-badge .wmb-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.welcome-model-badge .wmb-link:hover {
    text-decoration: underline;
}

.footer-model-link {
    color: var(--ai-text-secondary, #4b5563);
    font-weight: 600;
    text-decoration: none;
}

.footer-model-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* ==================== Agent 做事能力 UI：任务清单 / 提问 / 方案 ==================== */

.agent-panels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

/* ── 任务清单 ── */
.todo-card {
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
    padding: 12px 14px;
}

.todo-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.todo-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #1d4ed8;
}

.todo-card-progress {
    font-size: 12px;
    font-weight: 700;
    color: #2563eb;
    background: #e0edff;
    border-radius: 999px;
    padding: 2px 9px;
}

.todo-progress-bar {
    height: 4px;
    border-radius: 999px;
    background: #dbeafe;
    overflow: hidden;
    margin-bottom: 10px;
}

.todo-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    transition: width .35s ease;
}

.todo-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.todo-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
}

.todo-item-icon {
    margin-top: 3px;
    font-size: 12px;
    color: #94a3b8;
    flex-shrink: 0;
}

.todo-item.done .todo-item-icon { color: #16a34a; }
.todo-item.done .todo-item-text { color: #94a3b8; text-decoration: line-through; }
.todo-item.doing .todo-item-icon { color: #2563eb; }
.todo-item.doing .todo-item-text { color: #1e3a8a; font-weight: 600; }

/* ── 结构化提问 ── */
.question-card {
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: linear-gradient(180deg, #fffbf5 0%, #fff7ed 100%);
    padding: 12px 14px;
}

.question-card-head {
    font-size: 13px;
    font-weight: 700;
    color: #b45309;
    margin-bottom: 9px;
}

.question-block + .question-block {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #fed7aa;
}

.question-header {
    font-size: 11px;
    font-weight: 700;
    color: #c2410c;
    letter-spacing: .3px;
    margin-bottom: 3px;
}

.question-text {
    font-size: 13.5px;
    color: #422006;
    line-height: 1.6;
    margin-bottom: 9px;
}

.question-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.question-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid #fdba74;
    background: #fff;
    color: #7c2d12;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .16s ease;
    text-align: left;
    font-family: inherit;
}

.question-option:hover:not(:disabled) {
    background: #ffedd5;
    border-color: #f97316;
    transform: translateY(-1px);
}

.question-option:disabled { opacity: .55; cursor: default; }
.question-option.selected { background: #fed7aa; border-color: #ea580c; }

.question-option .qo-desc {
    font-size: 11px;
    font-weight: 400;
    color: #9a3412;
    opacity: .85;
}

/* ── 方案确认 ── */
.plan-card {
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    background: linear-gradient(180deg, #faf9ff 0%, #f5f3ff 100%);
    padding: 12px 14px;
}

.plan-card-head {
    font-size: 13px;
    font-weight: 700;
    color: #6d28d9;
    margin-bottom: 9px;
}

.plan-body {
    font-size: 13px;
    color: #3b3663;
    line-height: 1.65;
}

.plan-body h1,
.plan-body h2,
.plan-body h3 {
    font-size: 14px;
    margin: 6px 0 4px;
    color: #4c1d95;
}

.plan-steps {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 13px;
    color: #4c1d95;
    line-height: 1.75;
}

.plan-actions {
    display: flex;
    gap: 8px;
    margin-top: 11px;
}

.plan-btn {
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .16s ease;
    font-family: inherit;
}

.plan-btn-ok {
    background: #6d28d9;
    color: #fff;
}

.plan-btn-ok:hover:not(:disabled) { background: #5b21b6; transform: translateY(-1px); }

.plan-btn-no {
    background: #fff;
    color: #6d28d9;
    border-color: #c4b5fd;
}

.plan-btn-no:hover:not(:disabled) { background: #ede9fe; }

.plan-btn:disabled { opacity: .55; cursor: default; }

.welcome-suggests {
    width: 100%;
    max-width: 560px;
}

/* ==================== 欢迎页：能力体验台 ==================== */

.welcome-cap-title {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 560px;
    margin: 26px 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #1f2c44;
}

.welcome-cap-title i { color: #0066CC; }

.welcome-cap-tip {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 500;
    color: #94a3b8;
}

.welcome-cap-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 560px;
}

/* 能力卡片 */
.cap-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 13px 13px 11px;
    text-align: left;
    font-family: inherit;
    background: #fff;
    border: 1px solid #e4ebf4;
    border-radius: 13px;
    cursor: pointer;
    transition: all .16s ease;
}

.cap-card:hover {
    border-color: #9fc6ef;
    box-shadow: 0 6px 16px rgba(16, 42, 82, .09);
    transform: translateY(-2px);
}

.cap-card.active {
    border-color: #0066CC;
    background: linear-gradient(180deg, #f2f8ff 0%, #e9f2ff 100%);
    box-shadow: 0 6px 16px rgba(0, 102, 204, .14);
}

.cap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
    border-radius: 9px;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, #0066CC, #3b82f6);
}

.cap-card.active .cap-icon { background: linear-gradient(135deg, #004d99, #0066CC); }

.cap-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #1f2c44;
}

.cap-desc {
    font-size: 11.5px;
    line-height: 1.5;
    color: #7b879b;
    /* 描述最多两行，避免卡片高度参差 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cap-count {
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 600;
    color: #0066CC;
    background: #eaf3ff;
    border-radius: 999px;
    padding: 1px 8px;
}

/* 示例区标题 + 换一批 */
.welcome-suggests-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 560px;
    margin: 24px 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #1f2c44;
}

.welcome-refresh {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: #0066CC;
    background: #eef6ff;
    border: 1px solid #cfe4fb;
    border-radius: 999px;
    cursor: pointer;
    transition: all .16s ease;
}

.welcome-refresh:hover { background: #e0efff; }
.welcome-refresh:active i { display: inline-block; animation: wrSpin .5s ease; }

@keyframes wrSpin { to { transform: rotate(360deg); } }

/* 示例条目：主文案 + 说明 + 箭头 */
.suggest-item {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--ai-card-bg, #fff);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 9px;
    cursor: pointer;
    transition: all .16s ease;
}

.suggest-item:hover {
    border-color: #9fc6ef;
    background: #f8fbff;
    transform: translateX(2px);
}

.suggest-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    font-size: 12.5px;
    color: #0066CC;
    background: #eaf3ff;
}

.suggest-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.suggest-text {
    font-size: 13.5px;
    color: #1f2c44;
    line-height: 1.45;
}

.suggest-hint {
    font-size: 11.5px;
    color: #94a3b8;
}

.suggest-go {
    flex-shrink: 0;
    font-size: 11px;
    color: #c3cfdf;
    transition: all .16s ease;
}

.suggest-item:hover .suggest-go { color: #0066CC; transform: translateX(2px); }

/* 窄屏：能力卡片两列 */
@media (max-width: 640px) {
    .welcome-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cap-desc { -webkit-line-clamp: 2; }
}

/* 说明：.suggest-item / .suggest-icon / .suggest-text 的样式已在上方
   「欢迎页：能力体验台」区块统一定义（含 .suggest-body / .suggest-hint / .suggest-go），
   此处不再重复定义，避免两套规则互相覆盖。 */

/* ==================== 消息气泡 ==================== */
.message {
    display: flex;
    margin-bottom: 16px;
    animation: msgIn 0.25s ease-out;
}

@keyframes msgIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 消息区整体重建（换会话 / 拉完历史 / 拉全量）时不重放入场动画。
   重建会重新创建全部 .message 节点，若播放 msgIn，整屏内容会一起淡入 —— 看起来就是"闪一下"。
   该 class 由 renderMessages() 常驻添加；流式新增的节点不受影响。 */
#messages-list.no-anim .message {
    animation: none;
}

/* 增量更新的插槽层（agent-hit / thinking / tool-strip / followups 外层）。
   display: contents 让插槽本身不生成盒子，包裹后各块的宽度与间距
   与"直接作为 .message-body 子元素"完全一致。 */
.agent-hit-slot,
.thinking-slot,
.tool-strip-slot,
.followups-slot {
    display: contents;
}

.message.user {
    justify-content: flex-end;
}

.message.ai {
    justify-content: flex-start;
}

.message-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 8px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.message.ai .message-avatar {
    background: var(--ai-primary);
    color: #fff;
}

/* 用户消息头像：显示在消息右侧 */
.message.user .message-avatar {
    display: flex;
    background: var(--ai-input-bg);
    color: var(--ai-text-secondary);
    margin-right: 0;
    margin-left: 8px;
    order: 2;               /* 头像放到消息体之后（右侧） */
    overflow: hidden;
}

.message.user .message-avatar .user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.message.user .message-body {
    order: 1;
    align-items: flex-end;
}

.message-body {
    display: flex;
    flex-direction: column;
    max-width: 82%;
    min-width: 0;
}

.message.ai .message-body {
    align-items: flex-start;
}

.message.user .message-body {
    align-items: flex-end;
}

.message-content {
    max-width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    position: relative;
    min-width: 0;
}

/* ★正文还没开始出字时不显示气泡。
   工具执行阶段（连续读回多个结果时可能持续十几秒）如果留一个带边框的空白卡片，
   用户会以为「AI 什么都没回答」。有内容后由 typewriter 移除 is-blank。
   整轮都没有正文（纯工具轮）时保持隐藏，信息由工具卡片 + 阶段提示承载。 */
.message-content.is-blank {
    display: none;
}

.message.user .message-content {
    background: var(--ai-user-msg);
    color: var(--ai-user-msg-text);
    border-bottom-right-radius: 4px;
}

.message.ai .message-content {
    background: var(--ai-ai-msg-bg);
    color: var(--ai-text);
    border: 1px solid var(--ai-border);
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Agent 命中提示 */
.agent-hit {
    display: inline-flex;
    align-items: center;
    margin: 0 0 8px 4px;
    padding: 4px 12px;
    background: var(--ai-primary-bg);
    border-radius: 999px;
    border: 1px solid var(--ai-primary-border);
    font-size: 12px;
    color: var(--ai-primary);
}

/* ==================== Markdown 渲染样式 ==================== */
.markdown-body {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }

.markdown-body p {
    margin: 6px 0;
    line-height: 1.6;
    overflow-wrap: break-word;
    word-break: break-word;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    font-weight: 600;
    line-height: 1.4;
    margin: 10px 0 6px;
}

.markdown-body h1 { font-size: 18px; }
.markdown-body h2 { font-size: 17px; }
.markdown-body h3 { font-size: 16px; }
.markdown-body h4 { font-size: 15px; }

.markdown-body ul,
.markdown-body ol {
    margin: 6px 0;
    padding-left: 20px;
}

.markdown-body li {
    margin: 3px 0;
    line-height: 1.6;
}

.markdown-body code {
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    background: rgba(59, 130, 246, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    color: #d63384;
    word-break: break-all;
}

.message.user .markdown-body code {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.markdown-body pre {
    margin: 8px 0;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    position: relative;
    line-height: 1.5;
}

.markdown-body pre code {
    background: none;
    color: #e2e8f0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
    word-break: normal;
    white-space: pre;
}

.markdown-body .code-lang-label {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 8px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0 8px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.markdown-body blockquote {
    border-left: 3px solid var(--ai-primary);
    padding: 6px 10px;
    margin: 8px 0;
    color: var(--ai-text-secondary);
    background: var(--ai-primary-bg);
    border-radius: 0 6px 6px 0;
}

.markdown-body blockquote p {
    margin: 2px 0;
}

.markdown-body strong {
    font-weight: 600;
}

.markdown-body del {
    color: var(--ai-text-tertiary);
    text-decoration: line-through;
}

.markdown-body a {
    color: var(--ai-primary);
    text-decoration: underline;
    word-break: break-all;
}

/* 裸 URL 自动 linkify 的链接（https://...）：主色 + 弱下划线 */
.markdown-body a.md-url {
    color: var(--ai-primary);
    text-decoration: none;
    border-bottom: 1px dashed var(--ai-primary);
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}

.markdown-body a.md-url:hover {
    color: var(--ai-primary-dark);
    border-bottom-color: var(--ai-primary-dark);
    border-bottom-style: solid;
}

/* 页面导航链接按钮（[打开页面|...|...]） */
.markdown-body a.nav-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 16px;
    background: var(--ai-primary-bg);
    color: var(--ai-primary);
    border: 1px solid var(--ai-primary);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    margin: 2px 0;
    transition: background 0.15s, transform 0.15s;
}

.markdown-body a.nav-link-btn:hover {
    background: var(--ai-primary);
    color: #fff;
}

.markdown-body a.nav-link-btn:active {
    transform: scale(0.96);
}

.markdown-body a.nav-link-btn::after {
    content: ' →';
    font-weight: 400;
}

/* Markdown 图片 */
.markdown-body .markdown-image {
    max-width: 180px;
    max-height: 180px;
    border-radius: 10px;
    margin: 6px 0;
    display: inline-block;
    object-fit: cover;
    vertical-align: top;
}

/* 表格容器（自适应列宽 + 横向滚动兜底） */
.markdown-body .table-wrapper {
    overflow-x: auto;
    max-width: 100%;
    margin: 8px 0;
    border-radius: 6px;
    border: 1px solid var(--ai-border);
    background: var(--ai-card-bg);
}

.markdown-body .table-wrapper table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    margin: 0;
    table-layout: fixed;          /* 列按容器宽度等分 */
}

.markdown-body .table-wrapper th,
.markdown-body .table-wrapper td {
    border: 1px solid var(--ai-border);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
    /* 单元格内容超出时可在任意字符间断行（URL、邮箱不需空格也能换行） */
    word-break: break-word;
    overflow-wrap: anywhere;
}

.markdown-body .table-wrapper th {
    background: var(--ai-bg);
    font-weight: 600;
    color: var(--ai-text-secondary);
}

.markdown-body .table-wrapper tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.025);
}

[data-theme="dark"] .markdown-body .table-wrapper tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.04);
}

.markdown-body hr {
    border: none;
    border-top: 1px solid var(--ai-border);
    margin: 10px 0;
}

/* ==================== 工具调用流程 ==================== */
.tool-strip {
    margin: 6px 0 12px;
    width: 100%;
}

/* 小标题：让用户看清这一片是「工具调用」而不是 AI 的回答正文 */
.tool-strip-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px 2px;
    font-size: 12px;
    color: var(--ai-text-tertiary);
}

.tool-strip-head .fa-bolt {
    font-size: 11px;
}

.tool-strip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.tool-step {
    background: var(--ai-card-bg);
    border: 1px solid var(--ai-border);
    border-radius: 10px;
    margin-bottom: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.tool-step:last-child {
    margin-bottom: 0;
}

.tool-step:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

/* 状态只体现在「边框色 + 右侧徽标」上。
   旧版给整张卡片铺状态底色，五六张卡片叠在一起非常花，视觉上还压过了正文。 */
.tool-step.tool-running { border-color: rgba(59, 130, 246, .45); }
.tool-step.tool-success { border-color: rgba(34, 197, 94, .36); }
.tool-step.tool-fail { border-color: rgba(239, 68, 68, .45); }
.tool-step.tool-unknown { border-color: rgba(148, 163, 184, .45); }
.tool-step.tool-needlogin { border-color: rgba(245, 158, 11, .45); }

.tool-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
}

.tool-step-icon {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--ai-text-tertiary);
}

.tool-step-name {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ai-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 状态徽标：小而有色，一眼可辨 */
.tool-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    background: rgba(0, 0, 0, .05);
    color: var(--ai-text-tertiary);
}

.tool-step-badge i {
    font-size: 10px;
}

.tool-step.tool-running .tool-step-badge { background: rgba(59, 130, 246, .13); color: #2563eb; }
.tool-step.tool-success .tool-step-badge { background: rgba(34, 197, 94, .13); color: #16a34a; }
.tool-step.tool-fail .tool-step-badge { background: rgba(239, 68, 68, .13); color: #dc2626; }
.tool-step.tool-unknown .tool-step-badge { background: rgba(148, 163, 184, .18); color: #64748b; }
.tool-step.tool-needlogin .tool-step-badge { background: rgba(245, 158, 11, .15); color: #d97706; }

/* 折叠时的结果摘要：不展开也能看到关键结论 */
.tool-step-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 12px 9px 36px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ai-text-secondary);
    word-break: break-word;
}

.tool-step-toggle {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--ai-text-tertiary);
    transition: transform .2s ease;
}

.tool-step.expanded .tool-step-toggle {
    transform: rotate(180deg);
}

.tool-step-detail {
    display: none;
    padding: 9px 12px 11px;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.tool-step.expanded .tool-step-detail {
    display: block;
}

/* 参数 chips：{"ref":"x","offset":4000,"limit":6200} 这种原始 JSON 又长又难扫，
   拆成 key / value 小标签后，一眼就能看清「它拿什么参数在做什么」 */
.tool-args {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 2px;
}

.tool-arg-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .04);
    font-size: 11.5px;
    color: var(--ai-text-secondary);
    word-break: break-all;
}

.tool-arg-chip b {
    font-weight: 600;
    color: var(--ai-text-tertiary);
}

.tool-detail-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.tool-detail-label {
    width: 34px;
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ai-text-tertiary);
}

.tool-detail-value {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ai-text-secondary);
    word-break: break-word;
}

.tool-login-btn {
    margin-top: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    background: var(--ai-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, transform 0.15s;
}

.tool-login-btn:hover {
    background: var(--ai-primary-dark);
}

.tool-login-btn:active {
    transform: scale(0.96);
}

/* Markdown 独立导航按钮行 / 图片行 */
.markdown-body .nav-line,
.markdown-body .image-line {
    margin: 4px 0;
}

.markdown-body .image-line img {
    display: block;
}

/* ==================== 猜你想问（对齐移动端 followups） ==================== */
.followups {
    margin: 8px 0 4px;
    width: 100%;
}

.followups-title {
    display: block;
    font-size: 11px;
    color: var(--ai-text-tertiary);
    margin-bottom: 6px;
}

.followup-item {
    display: inline-flex;
    align-items: center;
    background: var(--ai-card-bg);
    border: 1px solid var(--ai-primary-border);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 8px 8px 0;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    max-width: 100%;
}

.followup-item:hover {
    background: var(--ai-primary-bg);
    border-color: var(--ai-primary);
}

.followup-text {
    font-size: 13px;
    color: var(--ai-primary);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.followup-arrow {
    font-size: 11px;
    color: var(--ai-primary);
    margin-left: 6px;
    flex-shrink: 0;
}

/* ==================== AI 思考指示器 ==================== */
/* 打字机光标 */
.streaming-cursor {
    display: inline-block;
    width: 2px;
    height: 14px;
    background: var(--ai-primary);
    margin-left: 2px;
    animation: cursorBlink 1s step-end infinite;
    vertical-align: text-bottom;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.thinking-indicator {
    max-width: 820px;
    margin: 0 auto;
    padding: 2px 20px 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.thinking-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.thinking-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ai-primary);
    animation: thinkingPulse 1s ease-in-out infinite;
}

@keyframes thinkingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.thinking-text {
    font-size: 13px;
    color: var(--ai-text-tertiary);
}

/* 正在执行的工具名（对齐移动端 .thinking-tool）：
   让"等待"变成"正在做什么"，工具跑十几秒时用户心里有数 */
.thinking-tool {
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ai-primary);
    opacity: .9;
}

/* 思维链片段预览：只显示末尾约 100 字，单行省略，避免撑高页面 */
.thinking-preview {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ai-text-tertiary);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================== 思考过程折叠块（thinking_delta） ==================== */
.thinking-block {
    margin: 0 0 8px;
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius);
    background: var(--ai-input-bg);
    overflow: hidden;
}

.thinking-block-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    font-size: 12px;
    color: var(--ai-text-secondary);
    transition: background 0.2s;
}

.thinking-block-head:hover {
    background: var(--ai-primary-bg);
}

.thinking-block-arrow {
    font-size: 10px;
    color: var(--ai-text-tertiary);
    transition: transform 0.2s;
}

.thinking-block.expanded .thinking-block-arrow {
    transform: rotate(90deg);
}

.thinking-block-icon {
    color: var(--ai-primary);
    font-size: 12px;
}

.thinking-block-title {
    font-weight: 500;
}

.thinking-block-count {
    color: var(--ai-text-tertiary);
    font-size: 11px;
}

.thinking-block-body {
    display: none;
    padding: 0 12px 10px;
}

.thinking-block.expanded .thinking-block-body {
    display: block;
}

.thinking-block-text {
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
    line-height: 1.65;
    color: var(--ai-text-tertiary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ==================== 底部输入区（对齐移动端 input-bar） ==================== */
.input-bar {
    flex-shrink: 0;
    padding: 8px 12px calc(8px + var(--safe-bottom));
    background: var(--ai-card-bg);
    border-top: 1px solid #f0f0f0;
}

.input-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

/* Agent 选择按钮 */
.agent-pick-btn {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 10px;
    background: var(--ai-input-bg);
    border-radius: 999px;
    flex-shrink: 0;
    transition: background 0.2s, opacity 0.2s;
    gap: 4px;
    max-width: 30%;
}

.agent-pick-btn:hover {
    background: #e8eef5;
}

.agent-pick-btn:active {
    opacity: 0.7;
}

.agent-pick-icon {
    font-size: 14px;
    color: var(--ai-primary);
    line-height: 1;
    flex-shrink: 0;
}

.agent-pick-label {
    font-size: 13px;
    color: var(--ai-text);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-pick-arrow {
    font-size: 10px;
    color: var(--ai-text-tertiary);
    line-height: 1;
    flex-shrink: 0;
}

.message-input {
    flex: 1;
    border: none;
    background: var(--ai-input-bg);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--ai-text);
    outline: none;
    resize: none;
    max-height: 120px;
    font-family: inherit;
    line-height: 1.5;
    min-height: 40px;
}

.message-input::placeholder {
    color: var(--ai-text-tertiary);
}

.send-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ai-primary);
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, opacity 0.2s, transform 0.1s;
    flex-shrink: 0;
}

.send-btn:hover {
    background: var(--ai-primary-dark);
}

.send-btn:active {
    transform: scale(0.94);
}

.send-btn:disabled {
    background: #bcd2f7;
    color: #e6eefc;
    cursor: not-allowed;
    transform: none;
}

.input-footer {
    max-width: 820px;
    margin: 4px auto 0;
    text-align: center;
    font-size: 11px;
    color: var(--ai-text-tertiary);
}

/* ==================== Agent 选择弹窗（底部弹出） ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.agent-modal {
    align-items: flex-end;
}

.agent-panel {
    width: 100%;
    max-width: 640px;
    max-height: 72vh;
    background: var(--ai-card-bg);
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--safe-bottom);
    animation: panelSlideUp 0.25s ease-out;
    margin: 0 auto;
}

@keyframes panelSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

.agent-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--ai-border);
    flex-shrink: 0;
}

.agent-panel-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ai-text);
}

.agent-panel-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f2f5;
    color: var(--ai-text-secondary);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.agent-panel-close:hover {
    background: #e5e7eb;
}

.agent-panel-list {
    overflow-y: auto;
    padding: 8px 0 12px;
    -webkit-overflow-scrolling: touch;
}

.agent-loading {
    padding: 40px 20px;
    text-align: center;
    color: var(--ai-text-tertiary);
    font-size: 14px;
}

.agent-option {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.agent-option:hover {
    background: #f5f7fa;
}

.agent-option.selected {
    background: var(--ai-primary-bg);
}

.agent-opt-icon {
    font-size: 22px;
    color: var(--ai-primary);
    margin-right: 16px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.agent-opt-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.agent-opt-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ai-text);
}

.agent-opt-desc {
    font-size: 12px;
    color: var(--ai-text-tertiary);
    margin-top: 3px;
    line-height: 1.4;
}

.agent-opt-check {
    font-size: 16px;
    color: var(--ai-primary);
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 10px;
}

/* ==================== 登录弹窗 ==================== */
.modal-container {
    width: 400px;
    max-width: 90vw;
    max-height: 85vh;
    background: var(--ai-card-bg);
    border-radius: 14px;
    box-shadow: var(--ai-shadow-lg);
    overflow-y: auto;
    animation: modalSlideUp 0.25s ease-out;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 0;
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ai-text);
}

.modal-header h2 i {
    color: var(--ai-primary);
    margin-right: 8px;
}

.modal-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f2f5;
    color: var(--ai-text-secondary);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.modal-close-btn:hover {
    background: #e5e7eb;
    color: var(--ai-text);
}

.auth-tabs-compact {
    display: flex;
    gap: 2px;
    margin: 16px 22px 0;
    background: var(--ai-bg);
    border-radius: 10px;
    padding: 3px;
}

.auth-tab-btn {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    color: var(--ai-text-secondary);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.auth-tab-btn.active {
    background: var(--ai-card-bg);
    color: var(--ai-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

.auth-form-panel {
    display: none;
    padding: 18px 22px;
}

.auth-form-panel.active {
    display: block;
    animation: panelSlideIn 0.2s ease-out;
}

@keyframes panelSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.form-group {
    margin-bottom: 14px;
}

.input-group-compact {
    display: flex;
    align-items: center;
    background: var(--ai-input-bg);
    border: 1px solid var(--ai-border);
    border-radius: 10px;
    padding: 0 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-group-compact:focus-within {
    border-color: var(--ai-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-group-compact i {
    color: var(--ai-text-tertiary);
    font-size: 15px;
    margin-right: 10px;
    flex-shrink: 0;
}

.input-group-compact input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 11px 0;
    font-size: 14px;
    color: var(--ai-text);
    outline: none;
    min-width: 0;
}

.input-group-compact input::placeholder {
    color: var(--ai-text-tertiary);
}

.toggle-pwd-btn,
.send-code-btn-compact {
    border: none;
    background: none;
    color: var(--ai-primary);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 6px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.toggle-pwd-btn:hover,
.send-code-btn-compact:hover {
    opacity: 0.7;
}

.send-code-btn-compact:disabled {
    color: var(--ai-text-tertiary);
    cursor: not-allowed;
}

.auth-submit-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ai-primary), var(--ai-primary-dark));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.auth-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.auth-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.auth-error-msg {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ai-danger);
    min-height: 20px;
    text-align: center;
}

.modal-footer-text {
    padding: 0 22px 18px;
    text-align: center;
    font-size: 12px;
    color: var(--ai-text-tertiary);
}

.modal-footer-text .link {
    color: var(--ai-primary);
}

/* ==================== Toast 通知 ==================== */
.toast-container {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.toast-item {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    animation: toastIn 0.3s ease-out;
    pointer-events: auto;
    max-width: 90vw;
    text-align: center;
}

.toast-item.success { background: rgba(16, 185, 129, 0.92); }
.toast-item.error { background: rgba(239, 68, 68, 0.92); }
.toast-item.warning { background: rgba(245, 158, 11, 0.92); }
.toast-item.info { background: rgba(59, 130, 246, 0.92); }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.toast-item.removing {
    animation: toastOut 0.3s ease-in forwards;
}

@keyframes toastOut {
    to { opacity: 0; transform: translateY(-10px); }
}

/* ==================== 移动端适配 ==================== */
@media (max-width: 600px) {
    :root {
        --header-height: 50px;
    }

    .header-title {
        font-size: 16px;
    }

    .header-logo {
        width: 24px;
        height: 24px;
    }

    .header-left,
    .header-right {
        min-width: 70px;
    }

    #messages-container {
        padding: 10px 10px 16px;
    }

    .welcome-section {
        padding: 24px 12px 8px;
    }

    .welcome-icon {
        width: 48px;
        height: 48px;
    }

    .welcome-icon img {
        width: 34px;
        height: 34px;
    }

    .welcome-title {
        font-size: 18px;
    }

    .suggest-item {
        padding: 10px 14px;
        border-radius: 10px;
    }

    .message-avatar {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .message-body {
        max-width: 86%;
    }

    .message-content {
        padding: 8px 12px;
        font-size: 13px;
    }

    .markdown-body pre {
        padding: 10px 12px;
    }

    .tool-step-head {
        padding: 8px 12px;
    }

    .input-bar {
        padding: 6px 10px calc(6px + var(--safe-bottom));
    }

    .agent-pick-btn {
        height: 36px;
        padding: 0 8px;
        max-width: 34%;
    }

    .agent-pick-label {
        font-size: 12px;
        max-width: 56px;
    }

    .message-input {
        font-size: 14px;
        padding: 9px 12px;
        min-height: 36px;
    }

    .send-btn {
        width: 38px;
        height: 38px;
    }

    .sidebar {
        width: 78vw;
        left: -78vw;
    }

    .agent-panel {
        border-radius: 14px 14px 0 0;
    }
}

/* ==================== 桌面端大屏（消息内容更宽松） ==================== */
@media (min-width: 1200px) {
    #messages-container {
        padding: 20px 24px 28px;
    }

    .welcome-section {
        padding-top: 60px;
    }
}

/* ==================== 暗色模式 ==================== */
@media (prefers-color-scheme: dark) {
    :root {
        --ai-bg: #1c1c1e;
        --ai-card-bg: #2c2c2e;
        --ai-text: #f5f5f7;
        --ai-text-secondary: #c0c0c6;
        --ai-text-tertiary: #8a8a94;
        --ai-border: #38383a;
        --ai-input-bg: #17171a;
        --ai-ai-msg-bg: #2c2c2e;
        --ai-primary-bg: rgba(59, 130, 246, 0.15);
        --ai-primary-border: rgba(59, 130, 246, 0.35);
    }

    #app-header {
        background: #1c1c1e;
        border-bottom-color: #2e2e33;
    }

    .header-btn:hover {
        background: #38383a;
    }

    .sidebar {
        background: #2c2c2e;
    }

    .conversation-item:hover {
        background: #38383a;
    }

    .sidebar-close-btn,
    .agent-panel-close,
    .modal-close-btn {
        background: #38383a;
        color: #c0c0c6;
    }

    .suggest-item {
        background: #2c2c2e;
        border-color: #3a3a3c;
    }

    .suggest-item:hover {
        background: var(--ai-primary-bg);
        border-color: var(--ai-primary);
    }

    .message.ai .message-content {
        background: #2c2c2e;
        border-color: #3a3a3c;
    }

    .markdown-body pre {
        background: #0a0a0b;
    }

    .markdown-body code {
        background: rgba(255, 255, 255, 0.1);
        color: #ff7b72;
    }

    .markdown-body blockquote {
        background: rgba(59, 130, 246, 0.08);
    }

    .markdown-body .table-wrapper {
        background: #2c2c2e;
        border-color: #3a3a3c;
    }

    .markdown-body .table-wrapper th {
        background: #38383a;
    }

    .markdown-body .table-wrapper tr:nth-child(even) td {
        background: rgba(255, 255, 255, 0.03);
    }

    .tool-step {
        background: #2c2c2e;
        border-color: #3a3a3c;
    }

    .tool-step.tool-running {
        background: rgba(59, 130, 246, 0.12);
    }

    .tool-step.tool-success {
        background: rgba(16, 185, 129, 0.1);
    }

    .tool-step.tool-fail {
        background: rgba(239, 68, 68, 0.1);
    }

    .tool-step.tool-needlogin {
        background: rgba(245, 158, 11, 0.1);
    }

    .followup-item {
        background: #2c2c2e;
    }

    .input-bar {
        background: #1c1c1e;
        border-top-color: #2e2e33;
    }

    .agent-pick-btn {
        background: #38383a;
    }

    .agent-pick-btn:hover {
        background: #444446;
    }

    .message-input {
        background: #17171a;
    }

    .send-btn:disabled {
        background: #3a4a66;
        color: #8a9ab8;
    }

    .agent-option:hover {
        background: #38383a;
    }

    .agent-option.selected {
        background: var(--ai-primary-bg);
    }

    .auth-tabs-compact {
        background: #17171a;
    }

    .auth-tab-btn.active {
        background: #3a3a3c;
    }

    .input-group-compact {
        background: #17171a;
        border-color: #38383a;
    }

    .toast-item {
        background: rgba(60, 60, 62, 0.95);
    }
}

/* ==================== 跟随全站手动主题切换（upgrade.js 设置 [data-theme]） ==================== */
/* 之前 [data-theme="dark"] 只设变量、没覆盖元素，因此手动切深色仍显示浅色；
   这里把 @media (prefers-color-scheme: dark) 中的元素级深色样式同步一份过来。 */
[data-theme="dark"] {
    --ai-bg: #1c1c1e;
    --ai-card-bg: #2c2c2e;
    --ai-text: #f5f5f7;
    --ai-text-secondary: #c0c0c6;
    --ai-text-tertiary: #8a8a94;
    --ai-border: #38383a;
    --ai-input-bg: #17171a;
    --ai-ai-msg-bg: #2c2c2e;
    --ai-primary-bg: rgba(59, 130, 246, 0.15);
    --ai-primary-border: rgba(59, 130, 246, 0.35);
}

[data-theme="dark"] #app-header {
    background: #1c1c1e;
    border-bottom-color: #2e2e33;
}

[data-theme="dark"] .header-btn:hover {
    background: #38383a;
}

[data-theme="dark"] .sidebar {
    background: #2c2c2e;
}

[data-theme="dark"] .conversation-item:hover {
    background: #38383a;
}

[data-theme="dark"] .sidebar-close-btn,
[data-theme="dark"] .agent-panel-close,
[data-theme="dark"] .modal-close-btn {
    background: #38383a;
    color: #c0c0c6;
}

[data-theme="dark"] .suggest-item {
    background: #2c2c2e;
    border-color: #3a3a3c;
}

[data-theme="dark"] .suggest-item:hover {
    background: var(--ai-primary-bg);
    border-color: var(--ai-primary);
}

[data-theme="dark"] .message.ai .message-content {
    background: #2c2c2e;
    border-color: #3a3a3c;
}

[data-theme="dark"] .markdown-body pre {
    background: #0a0a0b;
}

[data-theme="dark"] .markdown-body code {
    background: rgba(255, 255, 255, 0.1);
    color: #ff7b72;
}

[data-theme="dark"] .markdown-body blockquote {
    background: rgba(59, 130, 246, 0.08);
}

[data-theme="dark"] .markdown-body .table-wrapper {
    background: #2c2c2e;
    border-color: #3a3a3c;
}

[data-theme="dark"] .markdown-body .table-wrapper th {
    background: #38383a;
}

[data-theme="dark"] .markdown-body .table-wrapper tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .tool-step {
    background: #2c2c2e;
    border-color: #3a3a3c;
}

[data-theme="dark"] .tool-step.tool-running {
    background: rgba(59, 130, 246, 0.12);
}

[data-theme="dark"] .tool-step.tool-success {
    background: rgba(16, 185, 129, 0.1);
}

[data-theme="dark"] .tool-step.tool-fail {
    background: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .tool-step.tool-needlogin {
    background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .followup-item {
    background: #2c2c2e;
}

[data-theme="dark"] .input-bar {
    background: #1c1c1e;
    border-top-color: #2e2e33;
}

[data-theme="dark"] .agent-pick-btn {
    background: #38383a;
}

[data-theme="dark"] .agent-pick-btn:hover {
    background: #444446;
}

[data-theme="dark"] .message-input {
    background: #17171a;
}

[data-theme="dark"] .send-btn:disabled {
    background: #3a4a66;
    color: #8a9ab8;
}

[data-theme="dark"] .agent-option:hover {
    background: #38383a;
}

[data-theme="dark"] .agent-option.selected {
    background: var(--ai-primary-bg);
}

[data-theme="dark"] .auth-tabs-compact {
    background: #17171a;
}

[data-theme="dark"] .auth-tab-btn.active {
    background: #3a3a3c;
}

[data-theme="dark"] .input-group-compact {
    background: #17171a;
    border-color: #38383a;
}

[data-theme="dark"] .toast-item {
    background: rgba(60, 60, 62, 0.95);
}

/* 手动 light 模式下不要响应 prefers-color-scheme，避免冲突 */
[data-theme="light"] #app-header {
    background: #ffffff;
    border-bottom-color: #f0f0f0;
}

[data-theme="light"] .sidebar,
[data-theme="light"] .message.ai .message-content,
[data-theme="light"] .tool-step,
[data-theme="light"] .suggest-item,
[data-theme="light"] .followup-item {
    background: var(--ai-card-bg);
}

[data-theme="light"] .markdown-body pre {
    background: #0f172a;
}

[data-theme="light"] .markdown-body code {
    background: rgba(59, 130, 246, 0.08);
    color: #d63384;
}

[data-theme="light"] .message-input,
[data-theme="light"] .input-group-compact,
[data-theme="light"] .auth-tabs-compact,
[data-theme="light"] .agent-pick-btn {
    background: var(--ai-input-bg);
}

/* ==================== 用户协议与隐私政策同意弹窗（阻断式） ==================== */
/* 说明：复用 .modal-overlay 布局，z-index 高于 header/输入区，遮罩本身不可点击关闭 */
#consent-modal.consent-overlay {
    z-index: 1200;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.consent-dialog {
    width: 480px;
    max-width: 92vw;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--ai-card-bg);
    border-radius: var(--ai-radius-lg);
    box-shadow: var(--ai-shadow-lg);
    overflow: hidden;
    animation: modalSlideUp 0.25s ease-out;
}

.consent-header {
    padding: 20px 22px 12px;
    flex-shrink: 0;
}

.consent-header h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--ai-text);
}

.consent-header h2 i {
    color: var(--ai-primary);
    margin-right: 8px;
}

.consent-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ai-text-tertiary);
}

.consent-body {
    padding: 0 22px 4px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
    line-height: 1.75;
    color: var(--ai-text-secondary);
}

.consent-p {
    margin-bottom: 10px;
}

.consent-body a {
    color: var(--ai-primary);
    text-decoration: none;
    word-break: break-all;
}

.consent-body a:hover {
    text-decoration: underline;
}

.consent-list {
    margin: 0 0 10px;
    padding: 12px 14px 12px 30px;
    list-style: disc;
    background: var(--ai-primary-bg);
    border-radius: var(--ai-radius);
    font-size: 12.5px;
    line-height: 1.7;
}

.consent-list li {
    margin: 4px 0;
}

.consent-note {
    font-size: 12px;
    color: var(--ai-text-tertiary);
}

.consent-actions {
    display: flex;
    gap: 10px;
    padding: 14px 22px calc(18px + var(--safe-bottom));
    flex-shrink: 0;
}

.consent-btn {
    flex: 1;
    height: 42px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}

.consent-btn:active {
    opacity: 0.8;
}

.consent-btn-ghost {
    background: var(--ai-input-bg);
    color: var(--ai-text-secondary);
    border: 1px solid var(--ai-border);
}

.consent-btn-ghost:hover {
    background: var(--ai-border);
}

.consent-btn-primary {
    background: linear-gradient(135deg, #0066cc, var(--ai-primary));
    color: #fff;
    box-shadow: 0 5px 14px rgba(59, 130, 246, 0.28);
}

.consent-btn-primary:hover {
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.36);
}

[data-theme="dark"] .thinking-block,
[data-theme="dark"] .consent-dialog {
    border-color: var(--ai-border);
}

[data-theme="dark"] .consent-btn-ghost:hover {
    background: #38383a;
}

/* ==================== Markdown 渲染（与 App 端 ai-message 保持一致） ====================
   规则与 App 端 components/ai-message/ai-message.vue 一一对应：同一套 ai-* 类名、同一套排版。
   选择器带元素名（p./ul./table./pre.）是为了在同名旧规则之后稳定生效，无需 !important。
   注意：ai-widget.css 里有同名区块，改这里时记得一起改。 */
:root {
    --ai-md-text: #1f2329;
    --ai-md-text-2: #667085;
    --ai-md-border: #e8ecf2;
    --ai-md-divider: #eef1f6;
    --ai-md-accent: #3b82f6;
    --ai-md-code-bg: #1f2430;
    --ai-md-code-head: #171b26;
    --ai-md-code-text: #e6edf3;
    --ai-md-quote-bg: rgba(59, 130, 246, 0.06);
    --ai-md-quote-bar: #93b4f7;
    --ai-md-quote-text: #4a5568;
    --ai-md-inline-code-bg: #f0f2f5;
    --ai-md-inline-code-text: #d63384;
    --ai-md-done: #07c160;
}

[data-theme="dark"] {
    --ai-md-text: #EBEBF5;
    --ai-md-text-2: #A1A1A6;
    --ai-md-border: #38383A;
    --ai-md-divider: #38383A;
    --ai-md-accent: #60A5FA;
    --ai-md-code-bg: #16181d;
    --ai-md-code-head: #12141a;
    --ai-md-quote-bg: rgba(96, 165, 250, 0.1);
    --ai-md-quote-bar: #4b6a9b;
    --ai-md-quote-text: #C7C7CC;
    --ai-md-inline-code-bg: #3A3A3C;
    --ai-md-inline-code-text: #FF8FB1;
}

/* 系统深色兜底：页面没显式选亮色时跟随系统（未加载 upgrade.js 也不会漏） */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ai-md-text: #EBEBF5;
        --ai-md-text-2: #A1A1A6;
        --ai-md-border: #38383A;
        --ai-md-divider: #38383A;
        --ai-md-accent: #60A5FA;
        --ai-md-code-bg: #16181d;
        --ai-md-code-head: #12141a;
        --ai-md-quote-bg: rgba(96, 165, 250, 0.1);
        --ai-md-quote-bar: #4b6a9b;
        --ai-md-quote-text: #C7C7CC;
        --ai-md-inline-code-bg: #3A3A3C;
        --ai-md-inline-code-text: #FF8FB1;
    }
}

/* ---------- 段落 / 行内 ---------- */
p.ai-para {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.72;
    color: var(--ai-md-text);
}

p.ai-para:last-child {
    margin-bottom: 0;
}

/* 整行加粗 → 小标题层级（AI 常用 **小标题** 代替 ##） */
p.ai-para.is-title {
    margin: 20px 0 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

p.ai-para.is-title:first-child {
    margin-top: 0;
}

.ai-strong,
strong.ai-strong {
    font-weight: 600;
}

em.ai-italic,
.ai-italic {
    font-style: italic;
}

del.ai-strike {
    text-decoration: line-through;
    color: var(--ai-md-text-2);
}

code.ai-code-inline {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    background: var(--ai-md-inline-code-bg);
    color: var(--ai-md-inline-code-text);
    padding: 1px 5px;
    border-radius: 4px;
    word-break: break-word;
}

a.ai-link,
a.ai-link-bare {
    color: var(--ai-md-accent);
    text-decoration: underline;
    word-break: break-all;
}

/* ---------- 标题（带层级色条） ---------- */
h1.ai-heading,
h2.ai-heading,
h3.ai-heading,
h4.ai-heading,
h5.ai-heading,
h6.ai-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 11px 0 5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ai-md-text);
}

h1.ai-heading:first-child,
h2.ai-heading:first-child,
h3.ai-heading:first-child {
    margin-top: 0;
}

.ai-heading .ai-heading-bar {
    flex-shrink: 0;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--ai-md-accent);
}

h1.ai-heading { font-size: 19px; }
h2.ai-heading { font-size: 17.5px; }
h2.ai-heading .ai-heading-bar { height: 12px; }
h3.ai-heading { font-size: 16px; }
h3.ai-heading .ai-heading-bar { height: 10px; background: #7aa7f5; }
h4.ai-heading { font-size: 15px; }
h5.ai-heading,
h6.ai-heading { font-size: 14.5px; color: var(--ai-md-text-2); }

/* ---------- 代码块（语言标签 + 复制按钮 + 横向滚动） ---------- */
.ai-code-block {
    margin: 8px 0;
    border-radius: 7px;
    overflow: hidden;
    background: var(--ai-md-code-bg);
}

.ai-code-block .ai-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    background: var(--ai-md-code-head);
}

.ai-code-block .ai-code-lang {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #8b95a7;
    position: static;
    background: none;
    border-radius: 0;
}

.ai-code-block .ai-code-copy {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ai-code-block .ai-code-copy.is-done {
    background: rgba(7, 193, 96, 0.22);
}

.ai-code-block .ai-code-copy .ai-code-copy-text {
    font-size: 11px;
    line-height: 1.6;
    color: #c9d1d9;
}

.ai-code-block .ai-code-copy.is-done .ai-code-copy-text {
    color: #4ade80;
}

.ai-code-block .ai-code-scroll {
    width: 100%;
    overflow-x: auto;
}

/* 代码不折行：保住缩进结构，靠横向滚动查看 */
pre.ai-code-text {
    display: block;
    margin: 0;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--ai-md-code-text);
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    overflow: visible;
}

pre.ai-code-text code {
    background: none;
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    white-space: pre;
}

/* ---------- 列表（多级嵌套 + 任务清单） ---------- */
ul.ai-list,
ol.ai-list {
    margin: 5px 0;
    padding-left: 0;
    list-style: none;
}

ul.ai-list > li.ai-list-item,
ol.ai-list > li.ai-list-item {
    position: relative;
    padding-left: 18px;
    margin-bottom: 4px;
    line-height: 1.7;
    list-style: none;
    color: var(--ai-md-text);
}

ul.ai-list > li.ai-list-item:last-child,
ol.ai-list > li.ai-list-item:last-child {
    margin-bottom: 0;
}

ul.ai-list > li.ai-list-level-0,
ol.ai-list > li.ai-list-level-0 { padding-left: 18px; }
ul.ai-list > li.ai-list-level-1,
ol.ai-list > li.ai-list-level-1 { padding-left: 32px; }
ul.ai-list > li.ai-list-level-2,
ol.ai-list > li.ai-list-level-2 { padding-left: 46px; }
ul.ai-list > li.ai-list-level-3,
ol.ai-list > li.ai-list-level-3 { padding-left: 60px; }

.ai-list .ai-list-marker {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 11px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--ai-md-accent);
}

.ai-list .ai-list-marker.is-task {
    width: 13px;
    height: 13px;
    min-width: 13px;
    margin-top: 3px;
    border-radius: 4px;
    border: 1px solid var(--ai-md-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-list .ai-task-box {
    font-size: 9px;
    line-height: 1;
    color: #ffffff;
}

.ai-list li.ai-list-level-1 .ai-list-marker,
.ai-list li.ai-list-level-2 .ai-list-marker,
.ai-list li.ai-list-level-3 .ai-list-marker {
    color: var(--ai-md-text-2);
    font-weight: 400;
}

.ai-list li.is-done .ai-list-marker.is-task {
    background: var(--ai-md-done);
    border-color: var(--ai-md-done);
}

.ai-list li.is-done .ai-inline,
.ai-list li.is-done strong {
    color: var(--ai-md-text-2);
    text-decoration: line-through;
}

/* ---------- 表格（列宽由渲染器按内容给出，表头与内容严格对齐） ---------- */
.ai-table-wrap {
    margin: 8px 0;
    border: 1px solid var(--ai-md-border);
    border-radius: 6px;
    overflow: hidden;
}

.ai-table-wrap .ai-table-scroll {
    width: 100%;
    overflow-x: auto;
}

table.ai-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table.ai-table th.ai-table-cell,
table.ai-table td.ai-table-cell {
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    color: var(--ai-md-text);
    border: none;
    border-right: 1px solid var(--ai-md-divider);
    border-bottom: 1px solid var(--ai-md-divider);
}

table.ai-table th.ai-table-cell {
    font-weight: 600;
    background: rgba(148, 163, 184, 0.08);
}

table.ai-table tr.ai-table-row:last-child td.ai-table-cell {
    border-bottom: none;
}

table.ai-table th.ai-table-cell:last-child,
table.ai-table td.ai-table-cell:last-child {
    border-right: none;
}

table.ai-table th.ai-table-cell.ai-align-center,
table.ai-table td.ai-table-cell.ai-align-center {
    text-align: center;
}

table.ai-table th.ai-table-cell.ai-align-right,
table.ai-table td.ai-table-cell.ai-align-right {
    text-align: right;
}

table.ai-table tr.ai-table-row:nth-child(even):not(.ai-table-head) td.ai-table-cell {
    background: rgba(148, 163, 184, 0.05);
}

[data-theme="dark"] table.ai-table th.ai-table-cell {
    background: rgba(148, 163, 184, 0.14);
}

[data-theme="dark"] table.ai-table tr.ai-table-row:nth-child(even):not(.ai-table-head) td.ai-table-cell {
    background: rgba(148, 163, 184, 0.07);
}

/* ---------- 引用 / 分割线 / 图片 ---------- */
blockquote.ai-quote {
    margin: 7px 0;
    padding: 7px 10px;
    border: none;
    border-left: 3px solid var(--ai-md-quote-bar);
    background: var(--ai-md-quote-bg);
    border-radius: 4px;
    color: var(--ai-md-quote-text);
}

hr.ai-divider {
    height: 1px;
    margin: 10px 0;
    border: none;
    background: var(--ai-md-border);
}

img.ai-image,
img.ai-inline-image {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 6px 0;
    border-radius: 6px;
}

/* ---------- 跳转按钮 ---------- */
a.ai-nav-inline {
    display: inline-block;
    margin: 0 3px;
    padding: 3px 10px;
    border: 1px solid var(--ai-md-accent);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ai-md-accent);
    background: var(--ai-md-quote-bg);
    text-decoration: none;
}

.ai-nav-btn .ai-nav-arrow {
    font-size: 14px;
    margin-left: 4px;
}