:root { 
    --bg-color: #f8fafc; --chat-bg: #ffffff; --sidebar-bg: #f1f5f9; 
    --text-color: #334155; --text-secondary: #64748b; --border-color: #e2e8f0; 
    --primary-color: #475569; --my-msg-bg: #475569; --my-msg-text: #ffffff; 
    --ai-msg-bg: #f1f5f9; --ai-msg-text: #1e293b; --danger-color: #ef4444;
    --success-color: #10b981; /* 新增成功色 */
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* --- 深色/赛博朋克模式配色 --- */
[data-theme="dark"] { 
    --bg-color: #0c0c16; 
    --chat-bg: rgba(12, 12, 22, 0.6); 
    --sidebar-bg: rgba(20, 16, 35, 0.7); 
    --text-color: #e2e8f0; 
    --text-secondary: #a39eb5; 
    --border-color: rgba(156, 116, 255, 0.2); 
    --primary-color: #9c74ff; 
    --my-msg-bg: #9c74ff; 
    --my-msg-text: #ffffff; 
    --ai-msg-bg: rgba(255, 255, 255, 0.08); 
    --ai-msg-text: #f1f5f9; 
    --danger-color: #ff5f5f;
    --success-color: #5effa8; /* 深色模式下的成功色 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }
body, html { height: 100%; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background-color: var(--bg-color); color: var(--text-color); overflow: hidden; position: fixed; width: 100%; }

/* 全局背景：极光渐变 */
[data-theme="dark"] body {
    background: radial-gradient(circle at 30% 20%, #2a2340, #0c0c16);
    background-attachment: fixed; 
}

.icon-btn { background: transparent; border: none; cursor: pointer; color: var(--text-secondary); padding: 8px; border-radius: 6px; transition: var(--transition); display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: rgba(0,0,0,0.05); color: var(--text-color); }

/* 毛玻璃效果 */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .app-container,
[data-theme="dark"] .chat-header, 
[data-theme="dark"] .input-wrapper {
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
}
[data-theme="dark"] .icon-btn:hover {
    background: rgba(156, 116, 255, 0.2);
    color: #fff;
}
[data-theme="dark"] .session-item:hover { background: rgba(255,255,255,0.03); }

/* 登录页样式保留 */
#login-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color); display: flex; align-items: center; justify-content: center; z-index: 9999; flex-direction: column; }
.login-box { background: var(--chat-bg); padding: 40px; border-radius: 24px; border: 1px solid var(--border-color); width: 90%; max-width: 360px; text-align: center; box-shadow: var(--shadow); }
.login-input { width: 100%; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--border-color); border-radius: 12px; font-size: 15px; background: var(--bg-color); color: var(--text-color); }
.login-btn { width: 100%; padding: 12px; background: var(--text-color); color: var(--chat-bg); border: none; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 15px; margin-top: 8px; }

.app-container { display: none; height: 100%; position: relative; max-width: 1600px; margin: 0 auto; background: var(--chat-bg); box-shadow: var(--shadow); }
@media (min-width: 1201px) { .app-container { height: 96vh; margin-top: 2vh; border-radius: 20px; border: 1px solid var(--border-color); overflow: hidden; } }

.sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 300px; background-color: var(--sidebar-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; transform: translateX(-100%); transition: var(--transition); z-index: 50; }
.sidebar-content { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.sidebar.open { transform: translateX(0); }
.overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); z-index: 40; }
.overlay.show { display: block; }

.search-box { position: relative; }
.search-input { width: 100%; padding: 10px 36px 10px 12px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--chat-bg); color: var(--text-color); font-size: 14px; }
.search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); width: 16px; height: 16px; }

.section-title { font-size: 11px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; font-weight: 600; padding-left: 4px; }
.mode-list { display: grid; grid-template-columns: 1fr; gap: 6px; }

.mode-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--chat-bg); border: 1px solid var(--border-color); cursor: pointer; transition: all 0.2s; }
.mode-card:hover { border-color: var(--text-secondary); transform: translateY(-1px); }

/* --- 图标优化样式 --- */
.mode-icon { 
    font-size: 20px; 
    width: 36px; 
    height: 36px; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; 
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden; 
    flex-shrink: 0;
}
.model-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    padding: 4px;
    border-radius: 4px;
}
[data-theme="dark"] .mode-icon {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .mode-card:hover .mode-icon {
    background: rgba(156, 116, 255, 0.2);
    border-color: rgba(156, 116, 255, 0.3);
}

.mode-info div:first-child { font-size: 14px; font-weight: 500; }
.mode-info div:last-child { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

.session-group { margin-bottom: 20px; }
.group-header { font-size: 11px; color: var(--text-secondary); margin: 0 0 6px 8px; font-weight: 600; }
.session-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: space-between; color: var(--text-color); margin-bottom: 2px; }
.session-item.active { background: var(--chat-bg); color: var(--text-color); font-weight: 600; border: 1px solid var(--border-color); }

/* 侧边栏高亮优化 */
[data-theme="dark"] .session-item.active {
    background: rgba(156, 116, 255, 0.15);
    border-color: #9c74ff;
    color: #fff;
}
.session-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 8px; display: flex; align-items: center; gap: 8px; }
.session-actions { display: none; gap: 2px; }
.session-item:hover .session-actions, .session-item.active .session-actions { display: flex; }

.sidebar-footer { padding: 16px; border-top: 1px solid var(--border-color); display:flex; flex-direction:column; gap:8px;}
.sidebar-btn { width: 100%; padding: 10px; border-radius: 8px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; font-weight: 500;}
.btn-ghost { background: transparent; border: 1px solid var(--border-color); color: var(--text-color); } .btn-ghost:hover { background: var(--bg-color); }
.btn-danger { background: rgba(239, 68, 68, 0.1); color: var(--danger-color); border: 1px solid transparent; } .btn-danger:hover { background: rgba(239, 68, 68, 0.2); }

.main-chat { flex: 1; display: flex; flex-direction: column; background-color: var(--chat-bg); position: relative; width: 100%; }
.chat-header { padding: 0 20px; height: 64px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; background-color: var(--chat-bg); z-index: 10; flex-shrink: 0; }
[data-theme="dark"] #headerTitle {
    text-shadow: 0 0 10px rgba(156, 116, 255, 0.5);
}

#chat-box { flex: 1; overflow-y: auto; padding: 20px 0; display: flex; flex-direction: column; gap: 24px; scroll-behavior: smooth; }
.message-row { display: flex; width: 100%; padding: 0 20px; gap: 12px; }
.message-row.user { justify-content: flex-end; }
.avatar { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; overflow: hidden; } /* 增加 overflow:hidden 确保图片圆角 */
.ai-avatar { background: var(--ai-msg-bg); border: 1px solid var(--border-color); } .user-avatar { background: var(--primary-color); color: var(--my-msg-text); order: 2; }
.message-bubble { max-width: 85%; padding: 12px 16px; border-radius: 12px; font-size: 15px; line-height: 1.6; position: relative; border: 1px solid transparent; }
.message-row.user .message-bubble { background: var(--my-msg-bg); color: var(--my-msg-text); border-top-right-radius: 2px; order: 1; }
.message-row.ai .message-bubble { background: var(--ai-msg-bg); color: var(--ai-msg-text); border-top-left-radius: 2px; border-color: var(--border-color); }
.message-bubble p { margin: 0 0 10px 0; } .message-bubble p:last-child { margin: 0; }
/* 代码块容器样式，用于相对定位复制按钮 */
.message-bubble pre { 
    background: #1e1e1e; 
    color: #e2e8f0; 
    padding: 12px; 
    border-radius: 8px; 
    overflow-x: auto; 
    margin: 12px 0; 
    font-family: monospace; 
    font-size: 13px; 
    border: 1px solid rgba(0,0,0,0.3);
    position: relative; /* 核心：为复制按钮提供定位上下文 */
    padding-top: 35px; /* 增加顶部空间以容纳复制按钮 */
}
/* 代码块内部代码样式，确保代码占据剩余空间 */
.message-bubble pre code {
    background: transparent;
    padding: 0;
    display: block;
}
.message-bubble code { background: rgba(125, 125, 125, 0.2); padding: 2px 5px; border-radius: 4px; font-family: monospace; font-size: 0.9em; }
.message-bubble img { max-width: 100%; border-radius: 6px; margin-top: 8px; border: 1px solid var(--border-color); }
.msg-meta { font-size: 10px; opacity: 0.5; margin-top: 4px; text-align: right; }

/* --- 重新生成按钮样式 (位于 AI 消息泡下方) --- */
.regenerate-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
.regenerate-action .icon-btn {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    font-weight: 500;
}
[data-theme="dark"] .regenerate-action .icon-btn {
    background: rgba(156, 116, 255, 0.1);
    border-color: rgba(156, 116, 255, 0.3);
    color: var(--primary-color);
}
.regenerate-action .icon-btn:hover {
    background: rgba(156, 116, 255, 0.25);
}


/* --- 代码复制按钮样式 (已在 app.js 中生成 HTML) --- */
.copy-code-btn {
    position: absolute; 
    top: 8px; 
    right: 8px; 
    background: rgba(255,255,255,0.2) !important; 
    color: #fff !important; 
    padding: 6px; 
    border-radius: 6px; 
    font-size: 12px;
    z-index: 2; /* 确保在代码块之上 */
}
.copy-code-btn:hover {
    background: rgba(255,255,255,0.3) !important;
}

/* --- 轻量级 Toast 提示样式 (#toast) --- */
#toast {
    position: fixed; 
    bottom: 30px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: var(--primary-color); 
    color: white; 
    padding: 10px 20px; 
    border-radius: 8px; 
    font-size: 14px; 
    z-index: 1000; 
    opacity: 0; 
    transition: all 0.3s ease-in-out; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
[data-theme="dark"] #toast {
    background: var(--primary-color);
    box-shadow: 0 4px 15px rgba(156, 116, 255, 0.4);
}

.input-wrapper { padding: 16px 20px; background: var(--chat-bg); width: 100%; padding-bottom: max(16px, env(safe-area-inset-bottom)); flex-shrink: 0; }
.input-box { display: flex; align-items: flex-end; gap: 8px; background: var(--bg-color); padding: 8px; border-radius: 12px; border: 1px solid var(--border-color); transition: border-color 0.2s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
[data-theme="dark"] .input-box {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(156, 116, 255, 0.3);
}
[data-theme="dark"] .input-box:focus-within {
    border-color: #9c74ff;
    box-shadow: 0 0 15px rgba(156, 116, 255, 0.2);
}

textarea { flex: 1; background: transparent; border: none; outline: none; resize: none; color: var(--text-color); font-size: 15px; max-height: 150px; overflow-y: auto; padding: 10px 4px; line-height: 1.5; font-family: inherit; }
.send-btn { background: var(--text-color); color: var(--bg-color); width: 36px; height: 36px; border-radius: 8px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; }
.send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

#preview-area { display: flex; gap: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.preview-item { width: 48px; height: 48px; border-radius: 6px; overflow: hidden; position: relative; border: 1px solid var(--border-color); display:flex; align-items:center; justify-content:center; background: var(--bg-color); }
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.remove-file { position: absolute; top: 0; right: 0; background: rgba(0,0,0,0.5); color: #fff; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; cursor: pointer; transition: opacity 0.2s; }
.preview-item:hover .remove-file { opacity: 1; }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; }
.modal.open { display: flex; }
.modal-panel { background: var(--chat-bg); width: 95%; max-width: 800px; max-height: 85vh; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); border: 1px solid var(--border-color); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--border-color); }
.accordion-item { border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 10px; overflow: hidden; background: var(--bg-color); }
.accordion-header { padding: 14px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; background: var(--bg-color); transition: background 0.2s; }
.accordion-header:hover { background: rgba(0,0,0,0.02); }
.accordion-item.active .accordion-header i { transform: rotate(180deg); }
.accordion-body { display: none; padding: 16px; border-top: 1px solid var(--border-color); background: var(--chat-bg); }
.accordion-item.active .accordion-body { display: block; }
.announce-content { line-height: 1.6; color: var(--text-color); font-size: 15px; max-height: 60vh; overflow-y: auto; padding: 20px; }
@media (max-width: 768px) { .sidebar { width: 85%; max-width: 320px; } .chat-header { padding: 0 16px; height: 56px; } .input-wrapper { padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); } }