/* 
 * 前端聊天界面样式 (最终完整修复版：布局恢复 + 双子星按钮)
 * 标记号：daima10-full-recovery
 */

:root {
    --zlb-bg-body: #ffffff;
    --zlb-bg-sidebar: #f7f8fa;
    --zlb-primary: #2b65ff;
    --zlb-text-main: #1d1d1f;
    --zlb-border: #e5e5e5;
    --zlb-input-bg: #f2f3f5;
    --zlb-brand-red: #ea4c59;
    --zlb-icon-inactive: #8ebbf9; /* 浅蓝色图标 */
    --zlb-btn-inactive-bg: #e0f2fe; /* 浅蓝色背景 */
}

#zlb-ai-root * { box-sizing: border-box; }

/* ================= PC 端布局 (>= 1025px) ================= */
@media (min-width: 1025px) {
    #zlb-ai-root {
        display: flex !important;
        flex-direction: row !important;
        width: 1000px !important;
        min-width: 1000px !important;
        max-width: 1000px !important;
        height: 800px !important;
        margin: 20px auto !important;
        gap: 40px !important;
        position: relative;
        z-index: 10;
    }

    .zlb-sidebar { 
        width: 240px !important; flex: 0 0 240px !important;    
        display: flex !important; position: static !important;
        box-shadow: none !important; z-index: 1 !important;
        left: auto !important; top: auto !important; bottom: auto !important;
    }

    .zlb-main-area { width: 720px !important; flex: 0 0 720px !important; }
    .zlb-mobile-toggle { display: none !important; }
    .zlb-mobile-overlay { display: none !important; }
}

/* ================= 移动端适配 ================= */
@media (max-width: 1024px) {
    #zlb-ai-root {
        width: 100% !important; min-width: 0 !important; max-width: 100vw !important;
        height: 85vh !important; flex-direction: column !important;
        gap: 0 !important; margin: 0 !important; border: none !important;
    }
    .zlb-sidebar {
        position: fixed !important; left: -280px; top: 0; bottom: 0;
        width: 280px !important; z-index: 100000 !important;
        transition: left 0.3s ease; box-shadow: 5px 0 15px rgba(0,0,0,0.1);
        display: flex !important;
    }
    .zlb-sidebar.open { left: 0; }
    .zlb-main-area { width: 100% !important; flex: 1 !important; height: 100% !important; border-radius: 0 !important; border: none !important; }
    .zlb-mobile-toggle { 
        display: flex !important; align-items: center; justify-content: center;
        background: none; border: none; font-size: 20px; color: #333; 
        padding: 10px; margin-right: 10px; cursor: pointer;
    }
    .zlb-top-bar-wrapper { padding: 10px 15px !important; justify-content: flex-start !important; }
    .zlb-mobile-overlay {
        display: none; position: fixed !important; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5); z-index: 99999 !important;
    }
    .zlb-input-wrapper { padding: 10px 15px 15px !important; }
    
    #zlb-chat-container.empty { overflow: hidden !important; overscroll-behavior: none; }

    /* 优化1：减少输入容器高度 */
    #zlb-chat-input { min-height: 48px !important; }
    .zlb-input-box { min-height: 60px !important; }
    
    /* 优化2：顶部模型选择区自适应 */
    .zlb-model-bar {
        width: auto !important;
        max-width: calc(100% - 50px) !important;
    }
    .zlb-model-info {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 优化3：欢迎标题不换行 */
    .zlb-welcome-screen h1 {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    
    /* 优化4：底部按钮自适应布局 */
    .zlb-action-bar {
        margin-top: 15px !important;
        min-height: auto !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    .zlb-action-left {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        flex: 1 !important;
        overflow: hidden !important;
    }
    .zlb-capsule-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        height: 32px !important;
        flex: 1 !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
    .zlb-action-right {
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    .zlb-icon-btn, .zlb-send-btn-circle {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* 超小屏幕下简化按钮文字 */
    @media (max-width: 360px) {
        .zlb-capsule-btn span {
            display: none !important;
        }
        .zlb-capsule-btn::before {
            content: attr(data-short-text) !important;
        }
    }
}

/* ================= 通用样式 ================= */

.zlb-sidebar {
    background-color: var(--zlb-bg-sidebar);
    flex-direction: column; padding: 20px 15px;
    border-radius: 16px;
    border: 1px solid #eee;
    height: 100%;
    overflow-y: hidden;
}
.zlb-user-profile { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.zlb-user-profile.guest-login-trigger { cursor: pointer; transition: opacity 0.2s; }
.zlb-user-profile.guest-login-trigger:hover { opacity: 0.8; }

.zlb-avatar { width: 40px; height: 40px; background: var(--zlb-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.zlb-username { font-weight: 700; font-size: 15px; color: #333; }

.zlb-btn-new-chat-dashed {
    width: 100%; padding: 12px; background: #fff; border: 1px dashed #cbd5e1;
    border-radius: 8px; color: var(--zlb-primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14px; font-weight: 600; margin-bottom: 20px;
}

.zlb-feature-list { margin-bottom: 30px; }
.zlb-feature-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; font-size: 13px; color: #475569; cursor: pointer; border-radius: 6px; }
.zlb-feature-item:hover { background: #e2e8f0; }
.zlb-feature-item .icon { width: 20px; display: flex; justify-content: center; }
.zlb-feature-item .icon-doc { color: #7c4dff; }
.zlb-feature-item .icon-sum { color: #0ea5e9; }
.zlb-feature-item .icon-tax { color: #6366f1; }

.zlb-history-container {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
    margin-right: -5px;
}

/* 美化滚动条 */
.zlb-history-container::-webkit-scrollbar {
    width: 6px;
}

.zlb-history-container::-webkit-scrollbar-track {
    background: transparent;
}

.zlb-history-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.zlb-history-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
.zlb-history-label { font-size: 12px; color: #999; margin: 10px 0 10px 5px; font-weight: 600; }
.zlb-history-card { padding: 10px 12px; border-radius: 8px; margin-bottom: 4px; font-size: 13px; color: #333; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zlb-history-card:hover { background: #e2e8f0; }
.zlb-history-card.active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

.zlb-main-area {
    display: flex; flex-direction: column; background: #fff;
    border-radius: 16px; border: 1px solid #eee;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); height: 100%;
    overflow: hidden; position: relative;
}

.zlb-top-bar-wrapper { padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }

.zlb-model-bar {
    background: #f8fafc; height: 40px; padding: 0 15px;
    border-radius: 6px; display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: #666; width: 100%; flex: 1;
    position: relative; cursor: pointer; transition: background 0.2s;
}
.zlb-model-bar:hover { background: #f1f5f9; }
.zlb-model-info { display: flex; align-items: center; gap: 8px; flex: 1; white-space: nowrap; overflow: hidden; }
.zlb-model-info .ai-icon { color: var(--zlb-brand-red); }
.zlb-model-dropdown { color: #999; padding: 5px; }

.zlb-model-dropdown-menu {
    position: absolute; top: 45px; left: 0; width: 100%;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100; padding: 5px;
    animation: fadeIn 0.2s ease-out;
}
.model-option { padding: 10px 12px; border-radius: 6px; cursor: pointer; color: #333; transition: background 0.2s; }
.model-option:hover { background: #f1f5f9; }
.model-option.active { background: #eff6ff; color: var(--zlb-primary); font-weight: 600; }

.zlb-chat-container {
    flex: 1; overflow-y: auto; padding: 20px 30px;
    display: flex; flex-direction: column; position: relative;
}

.zlb-welcome-screen { margin: auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; text-align: center; }
.zlb-brand-logo { margin-bottom: 20px; display: flex; justify-content: center; }

.zlb-logo-img { 
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover; 
    display: block; box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}
.logo-fallback { 
    width: 60px; height: 60px; background: var(--zlb-brand-red); 
    border-radius: 50%; color: #fff; display: flex; align-items: center; 
    justify-content: center; font-weight: bold; font-size: 14px;
    box-shadow: 0 5px 15px rgba(234, 76, 89, 0.3); 
}

.zlb-welcome-screen h1 { font-size: 24px !important; color: #000; margin: 0 0 15px 0; font-weight: 800; }
.zlb-welcome-desc-box { max-width: 500px; width: 100%; text-align: left; margin-bottom: 25px; padding: 0 10px; }
.zlb-welcome-desc-box p { color: #666; line-height: 1.6; font-size: 14px !important; margin: 0; }
.zlb-capsule-tag { background: #fffbeb; color: #b45309; padding: 6px 15px; border-radius: 20px; font-size: 12px; border: 1px solid #fde68a; align-self: center; }

.zlb-input-wrapper { padding: 15px 30px 15px; width: 100%; background: #fff; flex-shrink: 0; position: relative; }
.zlb-input-box { background: var(--zlb-input-bg); border-radius: 12px; padding: 12px; margin-bottom: 0; min-height: 84px; }
#zlb-chat-input { width: 100%; border: none; background: transparent; resize: none; outline: none; font-size: 15px; color: #333; min-height: 70px; }

.zlb-action-bar {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    width: 100% !important; 
    margin-top: 15px !important;
    padding-bottom: 5px;
    min-height: auto;
    flex-wrap: wrap;
    gap: 10px;
}
.zlb-action-left { display: flex; gap: 10px; align-items: center; }
.zlb-capsule-btn {
    border: none !important; background: #e2e8f0 !important; color: #64748b !important;
    border-radius: 20px !important; padding: 8px 16px !important;
    font-size: 13px !important; font-weight: 600 !important;
    cursor: pointer !important; display: flex !important; align-items: center !important; gap: 6px !important;
    height: 36px !important; line-height: 1 !important;
    outline: none !important; /* 移除默认focus轮廓线 */
    box-shadow: none !important; /* 移除阴影 */
    -webkit-tap-highlight-color: transparent !important; /* 移除移动端点击高亮 */
    transition: background-color 0.2s ease, color 0.2s ease !important; /* 只过渡颜色 */
}

/* 移除所有状态下的轮廓线和额外样式 */
.zlb-capsule-btn:focus,
.zlb-capsule-btn:focus-visible,
.zlb-capsule-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.zlb-capsule-btn.active {
    background: #dbeafe !important; color: var(--zlb-primary) !important;
}

.zlb-action-right { display: flex; align-items: center; gap: 15px; }

/* ================= 底部按钮组完美协调版 ================= */

/* 1. 上传按钮：实心圆风格 */
.zlb-icon-btn {
    /* 基础盒子：42px 圆形，浅蓝背景 */
    width: 42px !important; 
    height: 42px !important; 
    background: var(--zlb-btn-inactive-bg) !important; /* 默认浅蓝底 */
    border-radius: 50%; 
    
    /* 布局与交互 */
    display: flex !important; 
    align-items: center !important; 
    justify-content: center;
    border: none !important; 
    padding: 0 !important;
    cursor: pointer !important; 
    transition: all 0.2s ease;
    outline: none !important; 
    margin-right: 5px;
}

/* 悬停效果 */
.zlb-icon-btn:hover { 
    background: #dbeafe !important;
    transform: scale(1.05);
}

/* 激活状态（有文件）：红底 */
.zlb-icon-btn.active { 
    background: var(--zlb-brand-red) !important; 
    box-shadow: 0 4px 10px rgba(234, 76, 89, 0.3);
}

/* 2. 上传图标 SVG：尺寸与颜色 */
.icon-cloud-svg { 
    width: 22px;  /* 【关键】在圆圈里，22px 是黄金比例 */
    height: 22px; 
    display: block; 
}

.icon-cloud-svg path { 
    stroke: var(--zlb-primary); /* 默认：蓝图标 */
    stroke-width: 2;
    transition: stroke 0.2s; 
}

/* 激活状态：图标变白 */
.zlb-icon-btn.active .icon-cloud-svg path { 
    stroke: #ffffff; 
}

/* 3. 发送按钮：保持一致 */
.zlb-send-btn-circle {
    width: 42px !important; 
    height: 42px !important; 
    background: var(--zlb-btn-inactive-bg) !important; /* 默认也是浅蓝底 */
    border-radius: 50% !important; 
    border: none !important;
    
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
    outline: none !important;
}

/* 发送图标 */
.zlb-send-btn-circle i { 
    font-size: 18px; /* 图标大小 */
    color: var(--zlb-primary); /* 默认：蓝图标 */
    transition: color 0.2s;
}

/* 激活状态（有文字）：红底 + 白图标 */
.zlb-send-btn-circle.active { 
    background: var(--zlb-brand-red) !important; 
    box-shadow: 0 4px 10px rgba(234, 76, 89, 0.3);
}

.zlb-send-btn-circle.active i { 
    color: #ffffff; /* 激活变白 */
}

.zlb-file-preview-area { margin-bottom: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.zlb-file-tag { display: inline-flex; align-items: center; gap: 8px; background: #fff; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.zlb-file-tag .status { color: #16a34a; background: #dcfce7; padding: 2px 6px; border-radius: 4px; font-size: 12px; }

.zlb-guest-mask {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 50; border-radius: 0 0 16px 16px;
    display: flex; align-items: center; justify-content: center;
}
.zlb-guest-content {
    text-align: center; background: #fff; padding: 20px 30px;
    border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid #eee;
}
.zlb-guest-content .lock-icon { font-size: 24px; color: var(--zlb-primary); margin-bottom: 10px; }
.zlb-guest-content h3 { margin: 0 0 5px 0; font-size: 16px; color: #333; }
.zlb-guest-content p { margin: 0 0 15px 0; font-size: 13px; color: #666; }
.zlb-btn-login {
    display: inline-block; background: var(--zlb-primary); color: #fff; text-decoration: none;
    padding: 8px 20px; border-radius: 20px; font-size: 14px; font-weight: 600; transition: background 0.2s;
}
.zlb-btn-login:hover { background: #1d4ed8; }

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

/* ==========================================================================
 * ⬇️ 请将以下代码追加到 frontend.css 文件的最末尾 ⬇️
 * 用于修复：对话气泡丢失、头像堆叠、思考动画不显示、Markdown排版
 * ========================================================================== */

/* 1. 修复欢迎界面 Logo 过大 */
.zlb-welcome-screen img {
    max-width: 80px;
    height: auto;
    margin: 0 auto 15px auto;
    display: block;
}

/* 2. 消息行布局 (关键：防止头像和文字挤在一起) */
.zlb-message-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    width: 100%;
}

/* 用户消息靠右，AI 消息靠左 */
.zlb-message-row.user { flex-direction: row-reverse; }
.zlb-message-row.ai, .zlb-message-row.system { flex-direction: row; }

/* 3. 头像样式 */
.zlb-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* 禁止头像被压缩 */
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.zlb-msg-avatar.user { background-color: #1f2937; color: #fff; }
.zlb-msg-avatar.ai { background-color: #2b65ff; color: #fff; }

/* 4. 气泡基础样式 */
.zlb-message-bubble {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.6;
    max-width: 85%;
    word-wrap: break-word; /* 防止长单词撑破 */
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 用户气泡 (蓝底白字) */
.zlb-message-row.user .zlb-message-bubble {
    background-color: #2b65ff;
    color: #ffffff;
    border: none;
    border-top-right-radius: 2px;
}

/* AI 气泡 (白底黑字 + 边框) */
.zlb-message-row.ai .zlb-message-bubble {
    background-color: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-top-left-radius: 2px;
    /* 添加卡片堆叠效果 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border-radius: 12px;
}

/* 系统报错气泡 (红底红字) */
.zlb-message-row.system .zlb-message-bubble {
    background-color: #fff1f0;
    border: 1px solid #ffccc7;
    color: #cf1322;
    width: 100%;
    /* 添加卡片堆叠效果 */
    box-shadow: 0 4px 12px rgba(207, 19, 34, 0.05);
    border-radius: 12px;
}

/* AI 回复内容卡片效果 */
.zlb-ai-content {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

/* 打字机光标效果优化 */
.typing-cursor::after {
    content: '▋';
    display: inline-block;
    vertical-align: middle;
    color: var(--zlb-primary);
    animation: blink 1s step-start infinite;
    margin-left: 2px;
    font-size: 18px;
    line-height: 1;
}

/* 5. 思考中动画 (...) */
#zlb-thinking .zlb-message-bubble {
    min-width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background-color: #8c8c8c;
    border-radius: 50%;
    margin: 0 3px;
    animation: zlb-typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes zlb-typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* 6. Markdown 内容排版 (修复列表、代码块样式) */
.markdown-body p { margin-bottom: 10px; }
.markdown-body p:last-child { margin-bottom: 0; }

.markdown-body pre {
    background-color: #1e1e1e; /* 深色代码背景 */
    border-radius: 6px;
    padding: 12px;
    overflow-x: auto;
    margin: 10px 0;
    color: #e6e6e6;
}

.markdown-body code {
    font-family: monospace;
    font-size: 85%;
    background: rgba(175, 184, 193, 0.2);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

.markdown-body pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

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

/* 限制AI回复中的标题大小 */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin: 15px 0 10px 0;
    font-weight: 600;
    line-height: 1.3;
}

.markdown-body h1 {
    font-size: 20px !important;
}

.markdown-body h2 {
    font-size: 18px !important;
}

.markdown-body h3 {
    font-size: 16px !important;
}

.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    font-size: 15px !important;
}
/* ==========================================================================
 * ⬇️ 新增样式：修复头像、思考过程、免责声明 ⬇️
 * ========================================================================== */

/* 1. 修复 AI 头像 (强制圆形 + 指定图片) */
.zlb-msg-avatar.ai {
    background: none !important; /* 去掉背景色 */
    overflow: hidden;
    padding: 0;
    border: 1px solid #eee;
}

.zlb-msg-avatar.ai img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片填满圆形 */
    display: block;
}

/* 2. 深度思考过程容器 */
.zlb-thinking-process {
    background-color: #f4f6f8;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #eef0f2;
}

/* 思考图标动画 */
.zlb-thinking-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zlb-primary);
}

/* 3. 免责声明样式 */
.zlb-disclaimer {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    width: 100%;
    font-style: italic;
}

/* 4. 打字机光标效果 */
.typing-cursor::after {
    content: '▋';
    display: inline-block;
    vertical-align: middle;
    color: var(--zlb-primary);
    animation: blink 1s step-start infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* 5. 引用源样式 */
.zlb-citation {
    display: inline-block;
    margin: 0 2px;
    vertical-align: super;
    font-size: 0.8em;
}

.zlb-citation a {
    color: var(--zlb-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.zlb-citation a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* 6. 参考资料样式 */
.zlb-references {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.zlb-references h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.zlb-references ul {
    margin: 0;
    padding-left: 20px;
    list-style-type: decimal;
}

.zlb-references li {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.zlb-references li:last-child {
    margin-bottom: 0;
}

.zlb-references a {
    color: var(--zlb-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.zlb-references a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* 7. 正在搜索状态样式 */
.zlb-thinking-process .text {
    transition: all 0.3s ease;
}

.zlb-thinking-process .text::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 1em;
    vertical-align: baseline;
}

/* 8. 联网检索动画样式 - 优化版 */ 
 .zlb-searching-process { 
     /* 优化1：背景改为输入容器底色 (通常为极浅灰或白色，这里取通用输入框底色) */ 
     background-color: #f5f7fa; 
     /* 优化2：移除胶囊样式，改为小圆角 */ 
     border-radius: 8px; 
     /* 优化3：移除边框和阴影 */ 
     border: none; 
     box-shadow: none; 
     
     padding: 10px 12px; 
     margin: 12px 0; 
     font-size: 13px; 
     /* 优化4：字体颜色改为深色，并加粗 */ 
     color: #1f2937; 
     font-weight: 700; /* 加粗 */ 
     
     display: flex; 
     align-items: center; 
     gap: 8px; 
     transition: all 0.3s ease; 
     order: 1; 
 } 
 
 /* 保持图标颜色或根据需要调整 */ 
 .zlb-searching-process svg { 
     color: #10b981; /* 保持绿色或改为其他颜色 */ 
 } 
 
 /* 正在检索时的文字样式 */ 
 .zlb-searching-text { 
     font-weight: 700; 
 } 
 
 /* 确保加载点的样式 */ 
 .loading-dots { 
     font-weight: normal; 
     color: #6b7280; 
 }

/* ========================================================================== 
  * 中律宝 AI 内容输出区 - 深度优化样式 (配合新版 JS) 
  * ========================================================================== */ 
 
 /* --- 1. 消息行整体布局 (垂直流式) --- */ 
 .zlb-message-row.ai-row { 
     display: flex; 
     flex-direction: row; /* 使用与用户消息相同的布局方向 */ 
     align-items: flex-start; 
     gap: 12px; /* 头像与内容的间距 */ 
     width: 100%; 
     max-width: 100%; 
     margin-bottom: 24px; 
     position: relative; 
 } 

 /* --- 2. 头部区域：头像 --- */ 
 .zlb-ai-header-wrapper { 
     display: flex; 
     flex-direction: column; 
     align-items: flex-start; 
     gap: 0; /* 移除不必要的间距 */ 
     height: auto; /* 自适应高度 */ 
     flex-shrink: 0; /* 禁止压缩 */ 
     width: auto; /* 自适应宽度 */ 
 } 

 /* 头像样式微调 */ 
 .zlb-message-row.ai-row .zlb-msg-avatar { 
     width: 36px; 
     height: 36px; 
     border-radius: 50%; 
     overflow: hidden; 
     flex-shrink: 0; 
     margin: 0; /* 清除可能存在的默认边距 */ 
     border: 1px solid #f3f4f6; 
 } 

 /* 深度思考状态胶囊 (浅蓝背景) */ 
 .zlb-thinking-status-box { 
     display: flex; 
     align-items: center; 
     gap: 8px; 
     padding: 4px 12px; 
     background-color: #eff6ff; /* 极浅蓝色背景 */ 
     border-radius: 6px; 
     color: #3b82f6; /* 品牌蓝 */ 
     font-size: 13px; 
     height: 36px; /* 与头像高度一致 */ 
     box-sizing: border-box; 
     animation: zlb-fade-in 0.3s ease; 
     transform: none; /* 移除居中对齐 */ 
     margin-left: 0; /* 移除左侧外边距 */ 
     white-space: nowrap; /* 防止文字换行 */ 
     margin-top: 0; /* 移除顶部外边距 */ 
 } 
 
 .zlb-thinking-icon svg { 
     animation: zlb-spin 2s linear infinite; /* 缓慢旋转 */ 
 } 
 
 /* --- 3. 联网检索区域 (科技感胶囊) --- */ 
 .zlb-search-section { 
     width: 100%; 
     padding-left: 0; /* 移除左侧内边距 */ 
     box-sizing: border-box; 
 } 
 
 /* 检索中胶囊 (灰色背景 + 动态雷达) */ 
 .zlb-search-capsule { 
     display: inline-flex; 
     align-items: center; 
     gap: 10px; 
     background-color: #f3f4f6; /* 浅灰背景 */ 
     border-radius: 6px; /* 6度圆角 */ 
     padding: 8px 16px; 
     font-size: 13px; 
     color: #4b5563; 
     border: 1px solid rgba(0,0,0,0.05); 
     transition: all 0.3s ease; 
     cursor: pointer; /* 暗示可点击展开 */ 
     user-select: none; 
 } 
 
 .zlb-search-capsule:hover { 
     background-color: #e5e7eb; 
 } 
 
 /* 动态搜索图标 */ 
 .zlb-search-icon-anim { 
     width: 16px; 
     height: 16px; 
     color: #3b82f6; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
 } 
 
 .zlb-search-icon-anim svg { 
     width: 100%; 
     height: 100%; 
     animation: zlb-radar-scan 2s infinite ease-in-out; 
 } 
 
 /* 搜索成功后的图标状态 */ 
 .zlb-search-icon-anim.success svg { 
     animation: none; 
     color: #10b981; /* 绿色 */ 
 } 
 
 /* 检索详情抽屉 */ 
 .zlb-search-drawer { 
     margin-top: 8px; 
     background: #fafafa; 
     border-radius: 6px; 
     padding: 10px 14px; 
     font-size: 12px; 
     color: #6b7280; 
     border-left: 3px solid #e5e7eb; 
     transition: all 0.3s ease; 
     position: relative; 
 } 
 
 /* 折叠状态：只显示前2行 */ 
 .zlb-search-drawer.collapsed { 
     max-height: 42px; /* 约2行高度 */ 
     overflow: hidden; 
     opacity: 0.8; 
     mask-image: linear-gradient(to bottom, black 60%, transparent 100%); 
     -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%); 
 } 
 
 /* --- 3. AI 内容容器 (包含思考状态、搜索区域、正文、底部操作栏) --- */ 
 .zlb-ai-content-container { 
     display: flex; 
     flex-direction: column; 
     gap: 12px; /* 各区块之间的间距 */ 
     flex: 1; /* 自适应剩余宽度 */ 
 } 

 /* --- 4. 正文内容区域 --- */ 
 .zlb-markdown-content { 
     width: 100%; 
     padding: 0; /* 移除左侧内边距，因为现在是水平布局 */ 
     box-sizing: border-box; 
     color: #1f2937; 
     line-height: 1.7; 
     font-size: 15px; 
 } 
 
 /* 移除可能存在的边框或背景 */ 
 .zlb-markdown-content.markdown-body { 
     border: none !important; 
     background: transparent !important; 
     padding-top: 0 !important; 
     padding-bottom: 0 !important; 
 } 
 
 /* --- 5. 底部操作栏 --- */ 
 .zlb-msg-footer { 
     display: flex; 
     flex-direction: column; 
     gap: 10px; 
     padding-left: 0; /* 移除左侧内边距 */ 
     margin-top: 8px; 
     width: 100%; 
     box-sizing: border-box; 
 } 
 
 /* 按钮组 */ 
 .zlb-action-buttons { 
     display: flex; 
     gap: 12px; 
 } 
 
 .zlb-act-btn { 
     display: inline-flex; 
     align-items: center; 
     gap: 6px; 
     padding: 6px 10px; 
     background: transparent; 
     border: 1px solid transparent; 
     border-radius: 4px; 
     color: #9ca3af; 
     font-size: 12px; 
     cursor: pointer; 
     transition: all 0.2s; 
 } 
 
 .zlb-act-btn:hover { 
     background-color: #eff6ff; 
     color: #3b82f6; 
 } 
 
 /* 底部提示语胶囊 */ 
 .zlb-disclaimer-capsule { 
     display: inline-block; 
     background-color: #f9fafb; 
     color: #9ca3af; 
     font-size: 11px; 
     padding: 6px 12px; 
     border-radius: 12px; /* 胶囊圆角 */ 
     width: fit-content; 
     border: 1px solid #f3f4f6; 
 } 
 
 /* --- 6. 关键动画定义 --- */ 
 
 /* 旋转动画 */ 
 @keyframes zlb-spin { 
     from { transform: rotate(0deg); } 
     to { transform: rotate(360deg); } 
 } 
 
 /* 雷达扫描/呼吸效果 */ 
 @keyframes zlb-radar-scan { 
     0% { transform: scale(0.9); opacity: 0.8; } 
     50% { transform: scale(1.1); opacity: 1; } 
     100% { transform: scale(0.9); opacity: 0.8; } 
 } 
 
 /* 三点加载动画 (...) */ 
 .loading-dots::after { 
     content: ''; 
     animation: zlb-dots 1.5s infinite steps(4, end); 
     display: inline-block; 
     width: 12px; 
     text-align: left; 
 } 
 
 @keyframes zlb-dots { 
     0% { content: ''; } 
     25% { content: '.'; } 
     50% { content: '..'; } 
     75% { content: '...'; } 
 } 
 
 @keyframes zlb-fade-in { 
     from { opacity: 0; transform: translateY(5px); } 
     to { opacity: 1; transform: translateY(0); } 
 }