/* static/style.css */
:root {
    --primary-color: #1a73e8;
    --primary-hover-color: #155abf;
    --sidebar-bg: #f1f3f4;
    --chat-area-bg: #ffffff;
    --container-border: #dadce0;
    --text-color: #202124;
    --secondary-text-color: #5f6368;
    --user-message-bg: #e8f0fe;
    --bot-message-bg: #f8f9fa;
    --button-hover-bg: rgba(0, 0, 0, 0.04);
    --button-active-bg: rgba(0, 0, 0, 0.08);
    --error-color: #d93025;
    --error-bg: #fce8e6;
    /* --- 代码块颜色 --- */
    --code-bg: #282c34;                     /* 代码块最终背景色 (深色) */
    --code-streaming-text-color: #abb2bf; /* 流式输出时，代码块内文字颜色 (浅灰，适配深色背景) */
    --code-final-text-color: #abb2bf;     /* 高亮主题基础文字颜色 */
    --scrollbar-thumb-color: #bdc1c6;
    --scrollbar-track-color: #e8eaed;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0; background-color: #ffffff; color: var(--text-color);
    font-size: 14px; line-height: 1.6; height: 100vh; width: 100vw;
    display: flex; flex-direction: column; overflow: hidden;
}

.main-title {
    background-color: var(--sidebar-bg); padding: 12px 24px;
    border-bottom: 1px solid var(--container-border); flex-shrink: 0; text-align: center;
}
.main-title h1 { margin: 0; font-size: 1.5em; font-weight: 500; color: var(--text-color); }

.app-container { display: flex; flex-grow: 1; width: 100%; background-color: var(--chat-area-bg); overflow: hidden; }

.sidebar {
    width: 280px; flex-shrink: 0; background-color: var(--sidebar-bg);
    border-right: 1px solid var(--container-border); display: flex; flex-direction: column;
    padding: 12px 8px; transition: width 0.2s ease;
}
@media (max-width: 768px) { .sidebar { width: 220px; } }

.sidebar-header { padding: 0 8px 12px 8px; flex-shrink: 0; }
.sidebar-button { display: flex; align-items: center; width: 100%; padding: 10px 12px; border-radius: 8px; background-color: transparent; border: none; cursor: pointer; text-align: left; font-size: 0.95em; color: var(--text-color); transition: background-color 0.15s ease-in-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-button:hover { background-color: var(--button-hover-bg); }
.sidebar-button:active { background-color: var(--button-active-bg); }
.sidebar-button svg { margin-right: 12px; flex-shrink: 0; stroke: currentColor; }
.new-chat-btn { font-weight: 500; background-color: var(--chat-area-bg); border: 1px solid var(--container-border); }
.new-chat-btn:hover { background-color: #f1f3f4; }

.conversation-nav { flex-grow: 1; overflow-y: auto; padding: 0 4px; }
.conversation-nav::-webkit-scrollbar { width: 6px; }
.conversation-nav::-webkit-scrollbar-track { background: transparent; }
.conversation-nav::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); border-radius: 3px;}
.conversation-nav::-webkit-scrollbar-thumb:hover { background: #a8abad; }

.conversation-list { list-style: none; padding: 0; margin: 0; }
.conversation-list li { padding: 10px 12px; margin-bottom: 4px; border-radius: 6px; cursor: pointer; font-size: 0.9em; color: var(--secondary-text-color); transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; position: relative; display: flex; align-items: center; justify-content: space-between; }
.conversation-list li:hover { background-color: var(--button-hover-bg); color: var(--text-color); }
.conversation-list li.active { background-color: var(--user-message-bg); color: var(--primary-color); font-weight: 500; }
.conversation-list li.active:hover { background-color: #ddeafd; }
.conversation-list li .title-text { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 8px; }
.conversation-list li .delete-btn { background: none; border: none; color: var(--secondary-text-color); opacity: 0; cursor: pointer; padding: 4px; line-height: 1; font-size: 1.1em; border-radius: 4px; flex-shrink: 0; transition: opacity 0.15s ease, background-color 0.15s ease; }
.conversation-list li:hover .delete-btn { opacity: 0.6; }
.conversation-list li .delete-btn:hover { opacity: 1; background-color: rgba(0,0,0,0.08); }
.conversation-list li.active .delete-btn { color: var(--primary-color); opacity: 0; }
.conversation-list li.active:hover .delete-btn { opacity: 0.7; }
.conversation-list li.active .delete-btn:hover { opacity: 1; background-color: rgba(26, 115, 232, 0.1); }
.conversation-list .no-history { color: var(--secondary-text-color); font-style: italic; text-align: center; padding: 20px 10px; cursor: default; font-size: 0.9em; display: none; justify-content: center; }
.conversation-list .no-history:hover { background-color: transparent; }

.sidebar-footer { padding: 12px 8px 0 8px; flex-shrink: 0; border-top: 1px solid var(--container-border); margin-top: 12px; }
.clear-history-btn span { color: var(--secondary-text-color); font-size: 0.9em; }
.clear-history-btn svg { stroke: var(--secondary-text-color); }
.clear-history-btn:hover span { color: var(--error-color); }
.clear-history-btn:hover svg { stroke: var(--error-color); }

.chat-area { flex-grow: 1; display: flex; overflow: hidden; }
.chat-content-wrapper { flex-grow: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.chat-header { padding: 16px 24px; border-bottom: 1px solid var(--container-border); flex-shrink: 0; text-align: left; background-color: var(--chat-area-bg); }
.chat-header h2 { margin: 0; font-size: 1.1em; font-weight: 500; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chatbox { flex-grow: 1; overflow-y: auto; padding: 24px; background-color: var(--chat-area-bg); scroll-behavior: smooth; }
.chatbox::-webkit-scrollbar { width: 8px; }
.chatbox::-webkit-scrollbar-track { background: var(--scrollbar-track-color); border-radius: 4px;}
.chatbox::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); border-radius: 4px;}
.chatbox::-webkit-scrollbar-thumb:hover { background: #a8abad; }

.message { display: flex; margin-bottom: 20px; max-width: 95%; }
.message-content { padding: 12px 18px; border-radius: 18px; line-height: 1.6; color: var(--text-color); word-break: break-word; }
.user-message { justify-content: flex-end; margin-left: auto; }
.user-message .message-content { background-color: var(--user-message-bg); border-bottom-right-radius: 4px; color: #174ea6; }
.bot-message { justify-content: flex-start; margin-right: auto; }
.bot-message .message-content { background-color: var(--bot-message-bg); border-bottom-left-radius: 4px; }
.bot-message.error-message .message-content { background-color: var(--error-bg); color: var(--error-color); border: 1px solid #fdd8d6;}
.message-content p { margin-top: 0; margin-bottom: 0.8em; }
.message-content p:last-child { margin-bottom: 0; }
.message-content ul, .message-content ol { padding-left: 24px; margin: 0.8em 0; }
.message-content li { margin-bottom: 0.3em; }
.message-content strong { font-weight: 700; }
.message-content a { color: var(--primary-color); text-decoration: none; }
.message-content a:hover { text-decoration: underline; }
.message-content code:not(pre code) { /* 行内代码样式调整 */
    background-color: rgba(0,0,0,0.06); /* 稍深一点背景 */
    padding: 0.2em 0.4em; border-radius: 4px; /* 圆角稍大 */
    font-size: 0.9em; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    color: #c7254e; /* 可以用一种不同的颜色标示行内代码 */
}

/* --- 代码块样式核心修改 --- */
.message-content pre {
    margin: 1em 0; padding: 0; /* pre 不加 padding */
    background-color: var(--code-bg); /* pre 设置为最终的深色背景 */
    border-radius: 8px; overflow-x: auto; position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1); /* 深色背景配浅色边框 */
}
/* 针对所有 pre > code 的基础样式 */
.message-content pre > code {
    display: block;
    padding: 1em; /* 内边距加在 code 上 */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.9em; line-height: 1.6; white-space: pre;
    color: var(--code-streaming-text-color); /* ** 流式时文本用浅灰色 ** */
    background-color: transparent !important; /* ** code 背景透明，显示 pre 的背景 ** */
    border-radius: 0; /* code 不需要圆角 */
    /* transition: color 0.3s ease; */ /* 可以加过渡，但可能效果不佳 */
}
/* 当 highlight.js 添加高亮类后，特定 token 的颜色会覆盖上面的基础颜色 */
.message-content pre code.hljs {
    color: var(--code-final-text-color); /* 确保基础文字颜色正确 */
    background: none !important; /* 再次确认背景透明 */
}
/* （可选）隐藏 highlightjs 添加的背景色，强制使用 pre 的背景 */
.hljs {
    background: transparent !important;
}


.cursor { display: inline-block; width: 8px; height: 1.1em; background-color: currentColor; vertical-align: text-bottom; animation: blink 1s step-end infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }

.input-area { display: flex; align-items: flex-end; padding: 16px 24px; border-top: 1px solid var(--container-border); background-color: var(--chat-area-bg); flex-shrink: 0; position: relative; box-shadow: 0 -2px 5px rgba(0,0,0,0.03); }
#userInput { flex-grow: 1; padding: 12px 18px; border: 1px solid var(--container-border); border-radius: 22px; resize: none; margin-right: 12px; font-size: 1em; line-height: 1.5; max-height: 200px; overflow-y: auto; background-color: var(--chat-area-bg); color: var(--text-color); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
#userInput:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15); }
#userInput::placeholder { color: var(--secondary-text-color); opacity: 0.8; }
#userInput::-webkit-scrollbar { width: 6px; }
#userInput::-webkit-scrollbar-track { background: transparent; }
#userInput::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); border-radius: 3px;}

#sendBtn { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; background-color: var(--primary-color); color: white; border: none; border-radius: 50%; cursor: pointer; transition: background-color 0.2s ease, opacity 0.2s ease; flex-shrink: 0; opacity: 0.5; }
#sendBtn:not(:disabled) { opacity: 1; }
#sendBtn:not(:disabled):hover { background-color: var(--primary-hover-color); }
#sendBtn:disabled { cursor: not-allowed; background-color: #d2e3fc; opacity: 0.5 !important; }
#sendBtn svg { fill: white; }

.loading-indicator { position: absolute; bottom: 74px; left: 24px; display: flex; align-items: center; font-size: 0.85em; color: var(--secondary-text-color); background-color: var(--bot-message-bg); padding: 4px 10px; border-radius: 12px; border: 1px solid var(--container-border); box-shadow: 0 1px 3px rgba(0,0,0,0.08); z-index: 10; }
.spinner { border: 2.5px solid #f3f3f3; border-top: 2.5px solid var(--primary-color); width: 14px; height: 14px; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 8px;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.error-display { position: absolute; bottom: 74px; left: 24px; right: 24px; background-color: var(--error-bg); color: var(--error-color); padding: 6px 12px; border: 1px solid #f5c2c7; border-radius: 6px; font-size: 0.9em; text-align: center; z-index: 10; box-shadow: 0 2px 4px rgba(217, 48, 37, 0.1); }