:root {
  /* 深色主题 - 现代化设计 */
  --background: #121212;
  --surfacePrimary: #1e1e1e;
  --surfaceSecondary: #2d2d2d;
  --divider: rgba(255, 255, 255, 0.12);
  --icon: #ffffff;
  --textPrimary: rgba(255, 255, 255, 0.87);
  --textSecondary: rgba(255, 255, 255, 0.6);

  /* 圆角设计 */
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-lg: 16px;

  /* 现代化阴影 (深色版本) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);

  /* 深色主题色彩 */
  --primary: #8ab4f8;
  --primary-light: #1a2a3a;
  --primary-dark: #4285f4;
  --secondary: #81c995;
  --secondary-light: #1a2e1a;
  --accent: #f28b82;
  --accent-light: #2e1a1a;
  --warning: #fdd663;
  --warning-light: #2e2a1a;

  /* 渐变色 */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

  /* 现代化图标颜色 (深色适配) */
  --icon-blue: #8ab4f8;
  --icon-green: #81c995;
  --icon-yellow: #fdd663;
  --icon-red: #f28b82;
  --icon-purple: #d7aefb;
  --icon-teal: #78d9ec;
}

body {
  background: var(--background);
  color: var(--textPrimary);
  font-family: 'Google Sans', 'Segoe UI', Roboto, sans-serif;
}

#loading {
  background: var(--background);
}
#loading .spinner div, main .spinner div {
  background: var(--icon);
}

#login {
  background: var(--background);
}

.header {
  background: var(--surfacePrimary);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.filecat-search-box__inner {
  background: var(--surfaceSecondary);
  border-color: var(--divider);
  border-radius: var(--border-radius);
}
.filecat-search-box__inner input::placeholder {
  color: var(--textSecondary);
}

.action {
  color: var(--textPrimary) !important;
  border-radius: var(--border-radius-sm);
  /*transition: all 0.2s ease;*/
}
.action:hover {
  background-color: var(--primary-light);
  /*transform: translateY(-1px);*/
}
.action i,.material-icons.icon {
  color: var(--icon) ;
}
.action .counter {
  border-color: var(--divider);
  background: var(--accent-light);
  color: var(--accent);
}

nav > div {
  border-color: var(--divider);
}

.breadcrumbs {
  border-color: var(--divider);
  color: var(--textPrimary) !important;
}
.breadcrumbs span {
  color: var(--textPrimary) !important;
}
.breadcrumbs a:hover {
  background-color: var(--primary-light);
  border-radius: var(--border-radius-sm);
}

#listing .item {
  background: var(--surfacePrimary);
  color: var(--textSecondary);
  border-color: var(--divider) !important;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  /*transition: all 0.2s ease;*/
}
#listing .item:hover {
  box-shadow: var(--shadow-md);
  /*transform: translateY(-2px);*/
}
/*#listing .item i {*/
/*  color: var(--icon);*/
/*}*/
#listing .item .modified {
  color: var(--textSecondary);
}
#listing h2,
#listing.list .header span {
  color: var(--textPrimary) !important;
}
#listing.list .header span {
  color: var(--textPrimary);
}
#listing.list .header i {
  color: var(--icon-blue);
}
#listing.list .item.header {
  background: var(--background);
  box-shadow: none;
}

.message {
  color: var(--textPrimary);
}

.card {
  background: var(--surfacePrimary);
  color: var(--textPrimary);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}
.button--flat:hover {
  background: var(--primary-light);
  border-radius: var(--border-radius-sm);
}

.dashboard #nav ul li {
  color: var(--textSecondary);
}
.dashboard #nav ul li:hover {
  background: var(--surfaceSecondary);
}

.card h3,
.dashboard #nav,
.dashboard p label {
  color: var(--textPrimary);
}

td .input {
  background: transparent;
  border: 0px ;
}
td .input:focus {
  background: var(--surfaceSecondary);
}

.select_dropdown,
.card#share input,
.card#share select,
.input {
  background: var(--surfaceSecondary);
  color: var(--textPrimary);
  border: 1px solid var(--divider);
  border-radius: var(--border-radius-sm);
}
.input:hover,
.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.input--red {
  background: var(--accent-light);
  color: var(--accent);
}

.input--green {
  background: var(--secondary-light);
  color: var(--secondary);
}

.select_option:hover {
  background: var(--surfacePrimary);
}

.select_option--selected {
  background: var(--surfacePrimary);
}


.dashboard #nav .wrapper,
.collapsible {
  border-color: var(--divider);
}
.collapsible > label * {
  color: var(--textPrimary);
}

table th {
  color: var(--textSecondary);
}

.file-list li:hover {
  background: var(--primary-light);
  border-radius: var(--border-radius-sm);
}
.file-list li:before {
  color: var(--textSecondary);
}
.file-list li[aria-selected=true]:before {
  color: var(--icon-blue);
}

.shell {
  background: var(--surfacePrimary);
  color: var(--textPrimary);
  border-radius: var(--border-radius);
}
.shell__divider {
  background: var(--divider);
  border-radius: 2px;
}
.shell__divider:hover {
  background: var(--primary);
}
.shell__result {
  border-top: 1px solid var(--divider);
}
.xterm-screen {
  background: var(--surfacePrimary);
  border-radius: var(--border-radius);
}


#editor-container {
  background: var(--background) !important;
}

#editor-container .bar {
  background: var(--surfacePrimary);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

@media (max-width: 736px) {
  #file-selection {
    background: var(--surfaceSecondary) !important;
    border-radius: var(--border-radius);
  }
  #file-selection span {
    color: var(--textPrimary) !important;
  }
  nav {
    background: var(--surfaceSecondary) !important;
    border-radius: var(--border-radius);
  }
  #dropdown {
    background: var(--surfaceSecondary) !important;
    border-radius: var(--border-radius);
  }
}

.share__box {
  background: var(--surfacePrimary) !important;
  color: var(--textPrimary);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}

.share__box__element {
  border-top-color: var(--divider);
}

.dropdown_item {
  background: var(--surfacePrimary);
  margin: 0;
  /*border-radius: var(--border-radius-sm);*/
}
.dropdown > div:hover {
  background: var(--primary-light);
}
.menu ul li:hover {
  background: var(--primary-light);
  /*border-radius: var(--border-radius-sm);*/
}
.md-context div{
  background: var(--surfaceSecondary);
  color: var(--textPrimary);
  border-radius: var(--border-radius-sm);
}
#md-container .md-context{
  background: var(--surfacePrimary);
  border-radius: var(--border-radius);
}
.card-content  textarea {
  background: var(--surfacePrimary);
  color: var(--textPrimary);
  border-radius: var(--border-radius-sm);
}

.nav_list_a,.nav_list_a a {
  background: var(--surfacePrimary);
  border-radius: var(--border-radius);
}

.studio .studio-nav,.studio-nav div,.studio-body {
  background: var(--surfacePrimary) !important;
  border-radius: var(--border-radius);
}

.studio-item-title:hover * {
  color: var(--primary);
}

.chat-message.bot{
  background: var(--primary-light);
  border-radius: var(--border-radius);
  color: var(--textPrimary);
  border-bottom: 1px solid var(--divider);
}
.chat-message.user {
  background: #1a2a3a;
  color: var(--textPrimary);
  border-bottom: none;
}
.chat-message.bot::before {
  background: var(--primary);
  opacity: 0.6;
  transition: opacity 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}


/* 暗黑模式 - AI 执行中最后一个气泡头像呼吸 */
[data-sending="true"] .chat-message.bot:last-of-type::before {
  opacity: 1;
  background: var(--primary);
  box-shadow: 0 0 10px 3px var(--primary-light);
  animation: ai-avatar-pulse-dark 1.5s ease-in-out infinite;
}

@keyframes ai-avatar-pulse-dark {
  0%, 100% {
    box-shadow: 0 0 8px 2px var(--primary-light);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 18px 6px var(--primary-light);
    transform: scale(1.15);
  }
}

/* 暗黑模式 - 工具调用中头像橙色旋转 */
[data-sending="true"] .chat-message.bot.tool-info:last-of-type::before {
  background: #f59e0b;
  box-shadow: 0 0 10px 3px rgba(245, 158, 11, 0.5);
  animation: ai-avatar-spin-dark 1.5s linear infinite;
}

@keyframes ai-avatar-spin-dark {
  0% {
    box-shadow: 0 0 10px 3px rgba(245, 158, 11, 0.5);
    transform: rotate(0deg) scale(1.1);
  }
  100% {
    box-shadow: 0 0 16px 5px rgba(245, 158, 11, 0.7);
    transform: rotate(360deg) scale(1.1);
  }
}

.chat-input-area textarea,
.chat-input-area .ace-input-container.chat-input .ace_editor,
.chat-input-area .rich-textarea.chat-input {
  background: var(--surfacePrimary);
  border-radius: var(--border-radius);
  color: var(--textPrimary);
  border-color: var(--divider);
}
.chat-input-area textarea:focus,
.chat-input-area .rich-textarea.chat-input:focus {
  border-color: var(--primary);
  background: var(--surfaceSecondary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.chat-input-area {
  background: var(--background);
  border-top: 1px solid var(--divider);
}

.chat-main {
  background: var(--background);
}

.chat-header {
  background: var(--background);
  color: var(--textPrimary);
}

.chat-messages {
  background: var(--background);
}

.common-box  {
  background: var(--background);
}

.chat-header ,.chat-input-area {
  background: var(--background);
}

.dashboard,.full_screen_context {
  background: var(--background);
}

.site_edit {
  background: var(--background);
}

.chat-session-list {
  background: var(--background);
}

.chat-session-item {
  background: var(--surfacePrimary);
  border-radius: var(--border-radius-sm);
  color: var(--textPrimary);
}

.chat-session-search-input {
  background: var(--surfaceSecondary);
  border-color: var(--divider);
  color: var(--textPrimary);
}

.chat-session-search-input::placeholder {
  color: var(--textSecondary);
}

.chat-session-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.chat-session-item.active,
.chat-session-item:hover {
  background: var(--primary-light);
}

/* ===== 暗黑模式 - AI 加载气泡 ===== */
.ai-loading-bubble .ai-loading-text {
  color: var(--textSecondary);
}
.ai-loading-dot {
  background-color: var(--textSecondary);
}

/* ===== 暗黑模式 - 工具调用状态气泡 ===== */
.tool-status-bubble {
  background: var(--surfacePrimary);
  border-color: var(--borderPrimary);
  color: var(--textPrimary);
}

/* ===== 暗黑模式 - 输入区迷你指示器 ===== */
.ai-thinking-mini {
  background: var(--surfacePrimary);
}
.ai-thinking-mini .ai-thinking-dot {
  background-color: var(--textSecondary);
}

/* ===== 暗黑模式 - 消息操作按钮 ===== */
.message-actions button {
  border-color: var(--borderPrimary);
  background: var(--surfacePrimary);
  color: var(--textSecondary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.message-actions button:hover {
  color: var(--textPrimary);
  border-color: var(--borderSecondary);
  background: var(--surfaceSecondary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ===== 暗黑模式 - 附件 ===== */
.chat-attachment-chip {
  border-color: var(--divider);
  background: var(--surfaceSecondary);
  color: var(--textPrimary);
}
.chat-attachment-chip button {
  color: var(--textSecondary);
}
.chat-attach-button {
  border-color: var(--divider);
  background: var(--surfacePrimary);
  color: var(--textSecondary);
}
.chat-attach-button:hover {
  background: var(--primary-light);
}

.chat-message-attachment {
  background: var(--surfaceSecondary);
}

/* ===== 暗黑模式 - AI思考指示器 ===== */
.ai-thinking-indicator {
  border-color: var(--divider);
  background: var(--surfacePrimary);
}

.ai-thinking-spinner {
  border-color: var(--divider);
  background: var(--surfacePrimary);
}
.ai-thinking-spinner::after {
  border-color: var(--divider);
  border-top-color: var(--primary);
}

.chat-session-item small {
  color: var(--textSecondary);
}
.chat-session-source {
  color: var(--icon-purple);
}

/* ===== 暗黑模式 - 模型选择器 ===== */
.model-selector-dropdown {
  border-color: var(--divider);
  background: var(--surfacePrimary);
  color: var(--textPrimary);
}
.model-selector-dropdown:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

/* ===== 暗黑模式 - 用量统计弹框 ===== */
.usage-stats-popup {
  background: var(--surfacePrimary);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.usage-stats-header {
  border-color: var(--divider);
}
.usage-stats-header h3 {
  color: var(--textPrimary);
}
.usage-stats-close {
  color: var(--textSecondary);
}
.usage-stats-close:hover {
  background: var(--primary-light);
  color: var(--textPrimary);
}
.usage-stats-loading,
.usage-stats-empty {
  color: var(--textSecondary);
}
.usage-stats-row {
  background: var(--background);
}
.usage-stats-row:nth-child(even) {
  background: var(--surfaceSecondary);
}
.usage-stats-label {
  color: var(--textSecondary);
}
.usage-stats-value {
  color: var(--textPrimary);
}
.usage-stats-total {
  background: var(--primary-light) !important;
  border-color: var(--primary);
}
.usage-stats-total .usage-stats-label,
.usage-stats-total .usage-stats-value {
  color: var(--primary);
}

/* ===== 暗黑模式 - 工具调用列表 ===== */
.chat-message-call-list {
  border-color: var(--divider);
  background: rgba(255,255,255,0.03);
}
.call-list-header {
  color: var(--textSecondary);
  background: rgba(255,255,255,0.02);
}
.call-list-header:hover {
  background: rgba(255,255,255,0.05);
}
.call-list-item.call-success {
  border-color: rgba(34,197,94,0.25);
  background: rgba(34,197,94,0.08);
}
.call-list-item.call-fail {
  border-color: rgba(239,68,68,0.25);
  background: rgba(239,68,68,0.08);
}
.call-list-tool-name {
  color: var(--textPrimary);
}
.call-list-duration {
  color: var(--textSecondary);
}
.call-list-details summary {
  color: var(--textSecondary);
}
.call-list-details summary:hover {
  background: rgba(255,255,255,0.04);
}
.call-list-pre {
  background: rgba(255,255,255,0.04);
}
.call-list-error-text {
  color: var(--accent);
}

.chat-header-model {
  color: var(--textSecondary);
}

.menu-select-popup {
  background: var(--surfacePrimary);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
}

.menu-select-item:hover {
  background:var(--primary-light);
  border-radius: var(--border-radius-sm);
}

.usage-stats-popup {
  background: var(--surfacePrimary);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
}

.usage-stats-header {
  border-color: var(--divider);
}

.usage-stats-header h3 {
  color: var(--textPrimary);
}

.usage-stats-close {
  color: var(--textSecondary);
  border-radius: 50%;
}

.usage-stats-close:hover {
  color: var(--textPrimary);
  background: var(--primary-light);
}

.usage-stats-loading,
.usage-stats-empty {
  color: var(--textSecondary);
}

.usage-stats-row {
  background: var(--background);
  border-radius: var(--border-radius-sm);
}

.usage-stats-row:nth-child(even) {
  background: var(--surfaceSecondary);
}

.usage-stats-label {
  color: var(--textSecondary);
}

.usage-stats-value {
  color: var(--textPrimary);
}

.usage-stats-total {
  background: var(--primary-light) !important;
  border-color: var(--primary);
  border-radius: var(--border-radius);
}

.usage-stats-total .usage-stats-label,
.usage-stats-total .usage-stats-value {
  color: var(--primary);
}

/* 移除硬编码颜色，改用 CSS 变量 */
nav .nav_2 {
  /*transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); !* 使用更柔和的缓动曲线 *!*/
  border-radius: var(--border-radius-lg); /* 使用你定义的圆角变量 */
  /*margin: 4px 8px; !* 给菜单项之间留出空间 *!*/
  width: auto;
}

/* 现代悬停态 */
nav .nav_2:hover {
  background-color: var(--surfaceSecondary);
  /*transform: scale(1.02); !* 轻微放大，提供物理反馈 *!*/
}

/* 现代激活态 */
nav .nav_2_active {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
  /*font-weight: 500;*/
}

/* 激活态图标颜色 */
nav .nav_2_active i {
  color: var(--primary);
}

/* 整体悬停时，图标也会有一个微小的放大或颜色变化 */
nav .nav_2:hover i {
  color: var(--textPrimary);
  /*transition: color 0.2s;*/
}

.nav_list_a {
  background: transparent; /* 默认透明 */
  border-radius: var(--border-radius-lg);
  /*transition: all 0.25s ease;*/
  border: 1px solid transparent; /* 预留边框，防止 Hover 时布局抖动 */
  color: var(--background);
}

.nav_list_a:hover {
  background: var(--surfacePrimary);
  box-shadow: var(--shadow-sm); /* 悬停时浮起 */
  border-color: var(--divider);
}

/* 激活时呈现边框高亮 */
.nav_list_a.active {
  background: var(--primary-light);
  color: var(--primary);
}

nav {
  /*border-right: 1px solid var(--divider); !* 增加右侧分割线 *!*/
  background: var(--background);
}

/* 滚动条隐藏但在悬停时可见（增强交互感） */
nav::-webkit-scrollbar {
  width: 6px;
}
nav:hover::-webkit-scrollbar-thumb {
  background: var(--divider);
  border-radius: 4px;
}

.dashboard label, .dashboard_label {
  color: var(--textPrimary);
}
/* ===== 暗黑模式 - 后台进程面板 ===== */
.chat-bg-process-panel {
  background: var(--background);
  border-left-color: var(--divider);
}
.chat-bg-process-header {
  border-bottom-color: var(--divider);
}
.chat-bg-process-title {
  color: var(--textPrimary);
}
.chat-bg-process-toolbar {
  border-bottom-color: var(--divider);
}
.chat-bg-process-count {
  color: var(--textSecondary);
}
.chat-bg-process-empty {
  color: var(--textSecondary);
}
.chat-bg-process-item:hover,
.chat-bg-process-item.active {
  background: var(--surfacePrimary);
  border-color: var(--divider);
}
.chat-bg-process-pid {
  color: var(--textPrimary);
}
.chat-bg-process-cmd {
  color: var(--textSecondary);
}
.chat-bg-process-time,
.chat-bg-process-exit-code {
  color: var(--textSecondary);
}
.chat-bg-process-output {
  border-top-color: var(--divider);
}
.chat-bg-process-output-header {
  border-bottom-color: var(--divider);
  color: var(--textPrimary);
}
.chat-bg-process-output-pre {
  background: #0d0d0d;
  color: #d4d4d4;
}

table tr {
  border-bottom: 1px solid var(--surfaceSecondary);
}

.chat-session-actions {
  border-top: 1px solid var(--surfaceSecondary);
}