:root {
    --light-bg: #f7f8fa;
    --light-main: #ffffff;
    --light-sidebar: #f0f2f5;
    --light-border: #e5e7eb;
    --light-text: #374151;
    --light-text-strong: #111827;
    --light-text-subtle: #6b7280;
    --light-accent: #3b82f6;

    --dark-bg: #111111;
    --dark-main: #181818;
    --dark-sidebar: #090909;
    --dark-border: #27272a;
    --dark-text: #a1a1aa;
    --dark-text-strong: #e4e4e7;
    --dark-text-subtle: #71717a;
    --dark-accent: #3b82f6;
}

html.light {
    --bg-color: var(--light-bg);
    --main-color: var(--light-main);
    --sidebar-color: var(--light-sidebar);
    --border-color: var(--light-border);
    --text-color: var(--light-text);
    --text-strong-color: var(--light-text-strong);
    --text-subtle-color: var(--light-text-subtle);
}

html.dark {
    --bg-color: var(--dark-bg);
    --main-color: var(--dark-main);
    --sidebar-color: var(--dark-sidebar);
    --border-color: var(--dark-border);
    --text-color: var(--dark-text);
    --text-strong-color: var(--dark-text-strong);
    --text-subtle-color: var(--dark-text-subtle);
}

body {
    font-family: 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.bg-light-bg { background-color: var(--light-bg); }
.dark .dark\:bg-dark-bg { background-color: var(--dark-bg); }
.bg-light-main { background-color: var(--light-main); }
.dark .dark\:bg-dark-main { background-color: var(--dark-main); }
.bg-light-sidebar { background-color: var(--light-sidebar); }
.dark .dark\:bg-dark-sidebar { background-color: var(--dark-sidebar); }

.border-light-border { border-color: var(--light-border); }
.dark .dark\:border-dark-border { border-color: var(--dark-border); }

.text-light-text { color: var(--light-text); }
.dark .dark\:text-dark-text { color: var(--dark-text); }
.text-light-text-strong { color: var(--light-text-strong); }
.dark .dark\:text-dark-text-strong { color: var(--dark-text-strong); }
.text-light-text-subtle { color: var(--light-text-subtle); }
.dark .dark\:text-dark-text-subtle { color: var(--dark-text-subtle); }

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    color: var(--text-subtle-color);
}

.nav-item:hover {
    background-color: rgba(128, 128, 128, 0.1);
    color: var(--text-strong-color);
}

.nav-item.active {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--text-strong-color);
}
.nav-item.active i {
    color: var(--dark-accent);
}

#theme-toggle-btn {
    background-color: #e5e7eb;
}
html.dark #theme-toggle-btn {
    background-color: #374151;
}

#theme-toggle-indicator {
    transform: translateX(0px);
}
html.dark #theme-toggle-indicator {
    transform: translateX(20px);
}

/* Custom Scrollbar */
#chat-container::-webkit-scrollbar { width: 8px; }
#chat-container::-webkit-scrollbar-track { background: transparent; }
#chat-container::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 4px; }
#chat-container::-webkit-scrollbar-thumb:hover { background: #718096; }
textarea::-webkit-scrollbar { display: none; }

/* Chat Message Styling */
.chat-message .prose {
    color: inherit;
}
.chat-message.user {
    color: var(--text-strong-color);
}
.chat-message.ai {
    color: var(--text-strong-color);
}
.chat-message .prose p, .chat-message .prose ul, .chat-message .prose ol, .chat-message .prose blockquote {
    margin: 0.5em 0;
}
.chat-message .prose pre {
    background-color: rgba(0,0,0,0.2) !important;
    border-radius: 8px;
    padding: 1em;
}

.typing-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    margin: 0 2px;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

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

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

/* Gradient text animation for welcome screen */
#welcome-title {
    animation: gradient-pan 5s ease infinite;
}

@keyframes gradient-pan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 在文件末尾添加以下内容 */

/* 移动端菜单样式 */
@media (max-width: 768px) {
    #sidebar {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    }
    
    #sidebar.open {
        left: 0;
    }
    
    #mobile-menu-toggle {
        transition: all 0.3s ease;
    }
    
    #mobile-menu-toggle.open {
        left: calc(80% - 20px);
        background-color: transparent;
        box-shadow: none;
    }
}