/* ========== CSS 变量 / 基础 ========== */
:root {
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== 全局过渡 ========== */
* { transition: background-color var(--transition), border-color var(--transition), color var(--transition); }

/* ========== 暗色模式 ========== */
.dark { color-scheme: dark; }

/* ========== 滚动条 ========== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }
.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* ========== 消息气泡动画 ========== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.message-bubble { animation: fadeInUp 0.35s ease-out; }

/* ========== 打字指示器 ========== */
.typing-dots {
    display: inline-flex;
    gap: 5px;
    padding: 6px 0;
}
.typing-dots span {
    width: 7px; height: 7px;
    background-color: #9ca3af;
    border-radius: 50%;
    animation: blinkDot 1.4s infinite ease-in-out both;
}
.dark .typing-dots span { background-color: #6b7280; }
.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
.typing-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes blinkDot {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ========== Markdown 渲染 ========== */
.markdown-body { line-height: 1.7; word-break: break-word; }
.markdown-body p { margin-bottom: 0.6em; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body strong { font-weight: 600; }
.markdown-body em { font-style: italic; }
.markdown-body code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.88em;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
}
.dark .markdown-body code { background: #374151; color: #e5e7eb; }
.markdown-body pre {
    background: #f8fafc;
    color: #334155;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border: 1px solid #e2e8f0;
    overflow-x: auto;
    margin: 0.6em 0;
    font-size: 0.85em;
    line-height: 1.6;
}
.dark .markdown-body pre {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}
.markdown-body pre code {
    background: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}
.markdown-body ul, .markdown-body ol {
    padding-left: 1.5em;
    margin: 0.5em 0;
}
.markdown-body li { margin-bottom: 0.3em; }
.markdown-body blockquote {
    border-left: 4px solid #6366f1;
    padding: 8px 16px;
    color: #475569;
    margin: 0.6em 0;
    background: #f8fafc;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.dark .markdown-body blockquote {
    border-color: #818cf8;
    color: #cbd5e1;
    background: #1e293b;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
    font-weight: 600;
    margin: 0.75em 0 0.25em;
    color: #1e293b;
}
.dark .markdown-body h1, .dark .markdown-body h2, .dark .markdown-body h3 { color: #f1f5f9; }
.markdown-body h1 { font-size: 1.2em; }
.markdown-body h2 { font-size: 1.08em; }
.markdown-body h3 { font-size: 1em; }
.markdown-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.6em 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
.markdown-body th, .markdown-body td {
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    text-align: left;
    font-size: 0.825em;
    white-space: nowrap;
}
.dark .markdown-body th, .dark .markdown-body td { border-color: #334155; }
.markdown-body th { background: #f1f5f9; font-weight: 600; }
.dark .markdown-body th { background: #1e293b; }
.dark .markdown-body th { background: #1e293b; }
.markdown-body tr:nth-child(even) { background: #f8fafc; }
.dark .markdown-body tr:nth-child(even) { background: #0f172a; }
.markdown-body hr { border: none; border-top: 1px solid #e2e8f0; margin: 1em 0; }
.dark .markdown-body hr { border-color: #334155; }

/* ========== 来源卡片 ========== */
.source-card {
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: 12px;
    transition: box-shadow var(--transition);
}
.source-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.dark .source-card { border-color: #334155; }
.dark .source-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.source-card-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    border: none;
    text-align: left;
    user-select: none;
}
.dark .source-card-toggle { background: #1e293b; color: #94a3b8; }
.source-card-toggle:hover { background: #f1f5f9; }
.dark .source-card-toggle:hover { background: #1e293b; }
.source-card-toggle svg { transition: transform var(--transition); flex-shrink: 0; }
.source-card-toggle.open svg { transform: rotate(90deg); }
.source-card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.source-card-content.open { max-height: 300px; overflow-y: auto; }
.source-card-item {
    padding: 8px 14px;
    font-size: 13px;
    color: #475569;
    border-top: 1px solid #f1f5f9;
}
.dark .source-card-item { color: #94a3b8; border-color: #1e293b; }

/* ========== Toast 通知 ========== */
@keyframes toastIn {
    from { opacity: 0; transform: translateX(100px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(100px); }
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    min-width: 280px;
    max-width: 400px;
    font-size: 14px;
    animation: toastIn 0.3s ease-out;
    pointer-events: auto;
    backdrop-filter: blur(8px);
}
.toast.removing { animation: toastOut 0.25s ease-in forwards; }
.toast-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.toast-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.toast-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.toast-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.dark .toast-success { background: #022c22; color: #6ee7b7; border-color: #064e3b; }
.dark .toast-error   { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
.dark .toast-info    { background: #172554; color: #93c5fd; border-color: #1e3a5f; }
.dark .toast-warning { background: #451a03; color: #fcd34d; border-color: #78350f; }

/* ========== 侧边栏可折叠区域 ========== */
.sidebar-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: inherit;
}
.collapse-arrow-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.collapse-arrow-btn svg.collapse-arrow {
    transition: transform var(--transition);
    width: 14px;
    height: 14px;
    color: #9ca3af;
}
.dark .collapse-arrow-btn svg.collapse-arrow {
    color: #6b7280;
}
.collapse-arrow-btn.collapsed svg.collapse-arrow {
    transform: rotate(-90deg);
}
.sidebar-collapse-content {
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    max-height: 300px;
    opacity: 1;
}
.sidebar-collapse-content.collapsed {
    max-height: 0;
    opacity: 0;
}

/* ========== 侧边栏聊天项悬停 ========== */
.chat-history-item {
    transition: all var(--transition);
}
.chat-history-item:hover {
    transform: translateX(2px);
}

/* ========== 按钮脉冲动画（新聊天） ========== */
@keyframes subtlePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    50% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); }
}
#new-chat-btn:hover { animation: subtlePulse 1.5s infinite; }

/* ========== 移动端侧边栏 ========== */
@media (max-width: 767px) {
    #sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 50;
    }
    #sidebar.open { transform: translateX(0); }
    #sidebar-overlay.show { display: block; }

    #rerank-panel {
        position: fixed;
        right: 0;
        top: 56px;
        bottom: 0;
        width: 300px;
        z-index: 45;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    #rerank-panel.show { transform: translateX(0); }

    #rerank-overlay.show { display: block; }

    #rerank-toggle-btn { display: flex; }
}
@media (min-width: 768px) {
    #rerank-toggle-btn { display: none; }
}

/* ========== 输入框焦点光晕 ========== */
#user-input:focus { outline: none; }
.input-wrapper:focus-within {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* ========== 按钮反馈 ========== */
button:active { transform: scale(0.96); }
button:disabled { transform: none; }

/* ========== 行截断 ========== */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========== 欢迎页动画 ========== */
@keyframes floatUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.welcome-icon { animation: floatUpDown 3s ease-in-out infinite; }

/* ========== 重排序面板结果项 ========== */
.rerank-result-item {
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 12px;
    background: #f8fafc;
    transition: all var(--transition);
    overflow: hidden;
}
.rerank-result-item:hover {
    border-color: #818cf8;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
}
.dark .rerank-result-item { background: #1e293b; border-color: #334155; }
.dark .rerank-result-item:hover { border-color: #6366f1; box-shadow: 0 2px 12px rgba(99, 102, 241, 0.15); }

/* 重排序结果内容可滚动 */
.rerank-result-item .overflow-auto {
    overflow-x: auto;
    overflow-y: auto;
}

/* 重排序面板容器确保可滚动 */
#rerank-results {
    overflow-y: auto;
    overflow-x: hidden;
}