/* ========================================
   全局加载动画（现代化设计）
   ======================================== */

.app-loading-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  animation: fadeIn 0.4s ease-out;
  overflow: hidden;
}

.app-loading-overlay::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(64, 158, 255, 0.1) 0%, transparent 50%);
  animation: pulse 3s ease-in-out infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

.app-loading-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Logo容器 */
.loading-logo-container {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: logoFloat 2s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.loading-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(64, 158, 255, 0.4));
  animation: logoGlow 2s ease-in-out infinite;
}

@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 8px 24px rgba(64, 158, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 8px 32px rgba(64, 158, 255, 0.6));
  }
}

/* 加载动画 */
.app-loading-spinner {
  position: relative;
  width: 60px;
  height: 60px;
}

.spinner-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(64, 158, 255, 0.2);
  border-top-color: #409eff;
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.spinner-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid #409eff;
  border-radius: 50%;
  opacity: 0;
  animation: pulseRing 1.5s ease-out infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* 加载文字 */
.app-loading-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.loading-brand {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 1px;
  animation: textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
  0%, 100% {
    opacity: 0.9;
    text-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 20px rgba(64, 158, 255, 0.6);
  }
}

.loading-status {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% {
    content: 'Initializing';
  }
  40% {
    content: 'Initializing.';
  }
  60% {
    content: 'Initializing..';
  }
  80%, 100% {
    content: 'Initializing...';
  }
}

.loading-tip {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  margin-top: 4px;
  text-align: center;
}

/* 加载进度条 */
.app-loading-progress {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.progress-bar-container {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  border-radius: 2px;
  transition: width 0.3s ease-out;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
}

.progress-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

/* Monaco 编辑器加载占位符 */
.monaco-loading-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  z-index: 10;
}

.monaco-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.monaco-loading-spinner {
  position: relative;
  width: 50px;
  height: 50px;
}

.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: #409eff;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

.spinner-ring:nth-child(2) {
  animation-delay: -0.5s;
  opacity: 0.6;
}

.spinner-ring:nth-child(3) {
  animation-delay: -1s;
  opacity: 0.3;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.monaco-loading-text {
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 500;
}

.monaco-loading-progress {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.monaco-progress-bar {
  width: 100%;
  height: 3px;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}

.monaco-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  border-radius: 2px;
  transition: width 0.3s ease-out;
}

.monaco-progress-text {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

.monaco-loading-tip {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.7;
  margin-top: 8px;
  text-align: center;
}

/* ========================================
   Floating context menu for resource manager and workspace
   ======================================== */
   
.context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 180px;
  max-width: 280px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 8px 24px var(--modal-shadow);
  user-select: none;
}

.context-menu-item {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 20px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.context-menu-item:hover {
  background: var(--bg-hover);
}

.context-menu-item:active {
  background: var(--bg-active);
}

.context-menu-item.danger {
  color: var(--danger-color);
}
/* ========================================
   全局样式与布局
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
}

#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

[v-cloak] {
  display: none;
}

/* ========================================
   自定义标题栏（无边框窗口）
   ======================================== */

.custom-titlebar {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  z-index: 10001;
  flex-shrink: 0;
}

.titlebar-dark {
  background-color: #1e1e1e;
  border-bottom-color: #2d2d2d;
}

.titlebar-drag-region {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 8px;
  -webkit-app-region: drag; /* 允许拖拽窗口 */
}

.titlebar-icon {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.titlebar-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.titlebar-title {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 400;
  opacity: 0.9;
}

/* 工作区专用功能按钮区域 */
.titlebar-workspace-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
  -webkit-app-region: no-drag; /* 按钮区域不可拖拽 */
}

.titlebar-workspace-actions .el-button {
  height: 28px;
}

.titlebar-controls {
  display: flex;
  height: 100%;
  -webkit-app-region: no-drag; /* 按钮区域不可拖拽 */
}

.titlebar-button {
  width: 46px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
  margin: 0;
  outline: none;
}

.titlebar-button:hover {
  background-color: var(--bg-hover);
}

.titlebar-button:active {
  background-color: var(--bg-active);
}

.titlebar-button svg {
  pointer-events: none;
}

/* 关闭按钮特殊样式 */
.titlebar-close:hover {
  background-color: #e81123;
  color: white;
}

.titlebar-close:active {
  background-color: #c50f1f;
  color: white;
}

/* macOS系统适配：标题栏预留红绿灯按钮空间 */
body.is-macos .workspace,
body.is-macos .welcome-screen {
  padding-top: 0; /* macOS使用原生标题栏，不需要额外padding */
}

/* ========================================
   启动欢迎界面
   ======================================== */

   .welcome-screen {
    width: 100%;
    flex: 1; /* 使用flex自动占据剩余空间，而不是height: 100% */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-primary);
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden; /* 防止内容溢出 */
  }
  
  .welcome-container {
    max-width: 900px;
    width: 90%;
    height: 97%;
    display: flex;
    gap: 60px;
    padding: 40px;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    box-shadow: 0 8px 32px var(--modal-shadow);
  }

  /* ========================================
   Welcome区域用户入口
   ======================================== */

.welcome-user-entry {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}

.user-avatar-btn {
  width: 40px;
  height: 40px;
  background: var(--el-color-primary);
  border: 2px solid var(--el-color-primary);
  color: white;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.user-avatar-btn:hover {
  background: var(--el-color-primary-light-3);
  border-color: var(--el-color-primary-light-3);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.user-avatar-btn:active {
  transform: scale(0.95);
}

/* ========================================
   个人主页对比框样式
   ======================================== */

.account-dialog .el-dialog__body {
  padding: 0;
}

.account-profile {
  padding: 0;
}

/* 用户头像区域 */
.account-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  border-bottom: 1px solid var(--border-color);
}

.avatar-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
  font-weight: 700;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.user-email {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.plan-badge {
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ===============================
   Settings modal (custom overlay)
   =============================== */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

.settings-modal {
  width: 560px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 32px var(--modal-shadow);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.settings-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  border-radius: 4px;
  padding: 4px;
}
.settings-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.settings-body { padding: 16px 20px; background: var(--bg-primary); overflow-y: auto; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; align-items: center; gap: 12px; }
.form-label { width: 180px; font-size: 13px; color: var(--text-secondary); }
.form-field { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.form-tip { margin: 6px 0 0 0; color: var(--text-secondary); font-size: 12px; }

/* inputs */
.input { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 6px 8px; font-size: 14px; }
.input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0,122,204,0.15); }
.input-number { width: 100px; text-align: right; }

/* range slider */
.range-group { display: flex; align-items: center; gap: 8px; }
.range { -webkit-appearance: none; appearance: none; height: 4px; background: var(--border-color); border-radius: 2px; width: 220px; }
.range:focus { outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--primary-color); cursor: pointer; }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--primary-color); cursor: pointer; border: none; }
.unit { color: var(--text-secondary); font-size: 12px; }

/* switch */
.switch { position: relative; display: inline-block; width: 42px; height: 22px; }
.switch-input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-hover); border: 1px solid var(--border-color); transition: .2s; border-radius: 22px; }
.switch-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; top: 2px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 50%; transition: .2s; }
.switch-input:checked + .switch-slider { background: var(--primary-color); border-color: var(--primary-color); }
.switch-input:checked + .switch-slider:before { transform: translateX(20px); border-color: transparent; }
.switch-text { color: var(--text-secondary); font-size: 12px; margin-left: 8px; }

.settings-footer { display: flex; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border-color); background: var(--bg-secondary); }
.settings-footer .spacer { flex: 1; }
.btn-link { background: transparent; border-color: transparent; color: var(--primary-color); }
.btn-danger { background: transparent; border-color: rgba(209,52,56,0.6); color: var(--danger-color); }

/* 分区标题 */
.account-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.account-section:last-of-type {
  border-bottom: none;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 订阅信息 */
.subscription-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.info-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.info-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.info-value.active {
  color: var(--el-color-success);
}

.info-value.inactive {
  color: var(--el-color-warning);
}

/* 使用情况网格 */
.usage-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.usage-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.usage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.usage-label {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.usage-count {
  font-size: 13px;
  color: var(--text-secondary);
}

.usage-percent {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}

/* 操作按钮 */
.account-actions {
  padding: 20px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Account modal container (custom) */
.account-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000; /* 调整以支持对比框z-index: 3000 */
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}
.account-modal {
  width: 620px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 32px var(--modal-shadow);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.account-modal-header { display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.account-modal-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.account-modal-close { background:none; border:none; color: var(--text-secondary); font-size:20px; cursor:pointer; border-radius:4px; padding:4px; }
.account-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.account-modal-body { padding: 0; background: var(--bg-primary); }

/* progress bars */
.progress { height: 8px; border-radius: 6px; background: var(--border-color); overflow: hidden; }
.progress-bar { height: 100%; background: var(--primary-color); transition: width .2s; }
.progress-bar.danger { background: var(--danger-color); }

/* 响应式调整 */
@media (max-width: 600px) {
  .account-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .plan-badge {
    align-self: flex-start;
  }
}

/* ========================================
   登录覆盖层（现代化双栏设计）
   ======================================== */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(100, 210, 255, 0.04) 100%),
              rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.auth-card-modern {
  width: 900px;
  max-width: 90vw;
  height: 600px;
  max-height: 85vh;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 左侧品牌区域 */
.auth-brand-section {
  flex: 1;
  background: linear-gradient(135deg, var(--el-color-primary) 0%, #0f0f0f 100%);
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.auth-brand-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.auth-brand-content {
  position: relative;
  z-index: 1;
  color: white;
}

.auth-logo-container {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.auth-logo-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

.auth-brand-title {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 12px 0;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.auth-brand-subtitle {
  font-size: 16px;
  margin: 0 0 40px 0;
  text-align: center;
  opacity: 0.95;
  font-weight: 300;
}

.auth-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

.auth-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  opacity: 0.95;
  transition: all 0.3s ease;
}

.auth-feature-item:hover {
  opacity: 1;
  transform: translateX(5px);
}

.auth-feature-item .feature-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

/* 右侧登录表单区域 */
.auth-form-section {
  flex: 1;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-secondary);
}

.auth-form-content {
  max-width: 380px;
  margin: 0 auto;
  width: 100%;
}

.auth-header {
  margin-bottom: 40px;
  text-align: center;
}

.auth-header h2 {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--text-primary);
}

.auth-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-button {
  width: 100%;
  height: 48px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-button .btn-icon {
  font-size: 18px;
}

.auth-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.auth-button:active {
  transform: translateY(0);
}

.auth-google-btn {
  background: #4285f4;
  border-color: #4285f4;
  color: white;
}

.auth-google-btn:hover {
  background: #357ae8;
  border-color: #357ae8;
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4);
}

.auth-email-btn {
  background: var(--el-color-success);
  border-color: var(--el-color-success);
}

.auth-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.divider-text {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.toggle-text {
  font-size: 13px;
  color: var(--text-secondary);
}

.toggle-link {
  font-size: 13px;
  font-weight: 500;
  padding: 0 4px;
}

.auth-footer {
  margin-top: 30px;
  text-align: center;
}

.footer-text {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.footer-link {
  color: var(--el-color-primary);
  text-decoration: none;
  transition: all 0.2s ease;
}

.footer-link:hover {
  text-decoration: underline;
  color: var(--el-color-primary-light-3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .auth-card-modern {
    flex-direction: column;
    width: 95vw;
    height: auto;
    max-height: 95vh;
    overflow-y: auto;
  }
  
  .auth-brand-section {
    padding: 30px 20px;
    min-height: auto;
  }
  
  .auth-brand-title {
    font-size: 28px;
  }
  
  .auth-features {
    display: none;
  }
  
  .auth-form-section {
    padding: 30px 20px;
  }
  
  .auth-header h2 {
    font-size: 24px;
  }
}
  
  .welcome-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 40px;
    border-right: 1px solid var(--border-color);
  }
  
  .welcome-left-middle {
    justify-content: center;
    align-items: center;
  }

  .welcome-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  min-height: 0; /* allow inner list to scroll within fixed container */
  }
  
  .welcome-header {
    margin-bottom: 60px;
    text-align: left;
  }
  
  .welcome-logo {
    font-size: 64px;
    color: var(--el-color-primary);
    margin-bottom: 20px;
  }

/* 欢迎页大图 */
.welcome-hero {
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
}
.welcome-hero-img {
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 24px var(--modal-shadow));
}
  
  .welcome-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px 0;
  }
  
  .welcome-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
  }
  
  .welcome-actions {
    display: flex;
    flex-direction: column;
  gap: 16px;
  align-items: center; /* center buttons horizontally */
  }

/* Remove Element Plus default sibling margin inside welcome actions */
.welcome-actions .el-button + .el-button {
  margin: 0;
}
  
  .welcome-btn {
    width: 240px;
    height: 48px;
    font-size: 16px;
    justify-content: flex-start;
  }

/* Ensure Element Plus button content aligns left for all three buttons */
.welcome-btn .el-button__content { justify-content: center; }
  
  .welcome-recent {
    flex: 1;
    display: flex;
    flex-direction: column;
  min-height: 0; /* fix flex overflow for scroll area */
  }
  
  .welcome-recent-header {
    margin-bottom: 24px;
  }
  
  .welcome-recent-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }
  
  /* Recent Projects 空状态 */
  .welcome-recent-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
  }
  
  .welcome-recent-empty .empty-icon {
    color: var(--text-secondary);
    opacity: 0.4;
    margin-bottom: 16px;
  }
  
  .welcome-recent-empty .empty-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 8px 0;
  }
  
  .welcome-recent-empty .empty-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
  }
  
  .welcome-recent-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
  overflow-y: auto;
  min-height: 0; /* allow scrolling inside fixed-height container */
  }
  
  .welcome-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .welcome-recent-item:hover {
    background-color: var(--bg-hover);
    border-color: var(--el-color-primary);
    transform: translateX(4px);
  }
  
  .recent-item-icon {
    font-size: 24px;
    color: var(--el-color-primary);
    flex-shrink: 0;
  }
  
  .recent-item-info {
    flex: 1;
    min-width: 0;
  }
  
  .recent-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .recent-item-path {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .recent-item-remove {
    opacity: 0;
    transition: opacity 0.2s;
  }
  
  .welcome-recent-item:hover .recent-item-remove {
    opacity: 1;
  }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .welcome-container {
      flex-direction: column;
      height: auto;
      gap: 40px;
    }
    
    .welcome-left {
      padding-right: 0;
      border-right: none;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 40px;
    }
    .welcome-hero {
      display: flex;
      justify-content: center;
    }
    
    .welcome-actions {
      align-items: center;
    }
  }

/* ========================================
   工作区
   ======================================== */

.workspace {
  width: 100%;
  flex: 1; /* 使用flex自动占据剩余空间，而不是height: 100% */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止内容溢出 */
}

/* ========================================
   旧的标题栏样式（已废弃，保留用于兼容）
   ======================================== */

/* .title-bar 已被移除，功能合并到 .custom-titlebar */

/* 低余量提示条 */
.quota-banner {
  flex-shrink: 0; /* 防止被压缩 */
}

.el-alert--warning{
  --el-alert-bg-color:none;
  background-color:none !important;
}



/* ========================================
   主容器
   ======================================== */

.main-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 右侧AI对话抽屉 - 非覆盖式 */
.chat-drawer {
  /* width通过内联样式动态设置 */
  background-color: var(--bg-sidebar);
  border-left: 1px solid var(--border-color);
  transition: width 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative; /* 为拖拽手柄定位 */
  user-select: none;
  -webkit-user-select: none;
}

/* 对话区拖拽手柄 */
.chat-drawer-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: ew-resize;
  background-color: transparent;
  transition: background-color 0.2s;
  z-index: 10;
}

.chat-drawer-resize-handle:hover {
  background-color: var(--primary-color);
}

/* 抽屉顶部会话条 */
.chat-sessions-bar {
  height: 48px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 8px;
  background-color: var(--bg-secondary);
}

.chat-sessions-bar .sessions-scroll {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  flex: 1;
}

.chat-sessions-bar .sessions-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-left: 6px;
}

.session-chip {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  border-radius: 8px 40px;
  padding: 2px 16px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.session-chip.active {
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
}

.session-chip .chip-del {
  opacity: 0;
}

.session-chip:hover .chip-del {
  opacity: 1;
}

.session-new {
  margin-left: 0;
}

/* 消息区 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding-top: 12px;
  padding-left: 12px; /* 为撤回图标预留空间 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  user-select: text;
  -webkit-user-select: text;
}

.chat-empty-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-empty-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}
.chat-empty-placeholder .inkling {
  max-width: 240px;
  opacity: 0.9;
}
.chat-empty-placeholder .empty-tip {
  font-size: 13px;
  margin-bottom: 2px;
}

.msg {
  display: flex;
}

.msg.user {
  justify-content: flex-end;
  position: relative;
}

.msg.assistant {
  justify-content: flex-start;
}

/* 撤回图标 */
.msg-undo-icon {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-undo-icon svg {
  width: 100%;
  height: 100%;
}

.msg.user:hover .msg-undo-icon {
  opacity: 1;
}

.msg-undo-icon:hover {
  color: var(--vscode-errorForeground);
}

.msg-bubble {
  max-width: 100%;
  padding: 10px 20px;
  border-radius: 10px;
  line-height: 1.6;
  border: 1px solid var(--border-color);
  position: relative;
}

.msg.user .msg-bubble {
  background: rgba(64, 158, 255, 0.1);
  border-color: rgba(64, 158, 255, 0.3);
}

.msg.assistant .msg-bubble {
  background: var(--bg-primary);
}

/* 消息操作按钮容器 */
.msg-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.msg-bubble:hover .msg-actions {
  opacity: 1;
}

/* 消息操作按钮 */
.msg-action-btn {
  padding: 4px !important;
  font-size: 14px !important;
  color: var(--text-secondary) !important;
  background: var(--bg-secondary) !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  min-width: 24px !important;
  height: 24px !important;
}

.msg-action-btn:hover {
  color: var(--primary-color) !important;
  background: var(--bg-hover) !important;
  transform: scale(1.1);
}

/* 撤回按钮特殊样式 */
.msg-action-btn.revoke-btn:hover {
  color: #9e9e9e !important;
}

/* 暂停按钮特殊样式 */
.msg-action-btn.stop-btn {
  color: #676767 !important;
  animation: pulse 1.5s ease-in-out infinite;
}

.msg-action-btn.stop-btn:hover {
  color: #808080 !important;
  animation: none;
}

/* 脉冲动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.msg-content {
  white-space: pre-wrap;
  word-break: break-word;
}

.msg-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}

/* Agent工具调用样式 */
.agent-tool-calls {
  background: rgba(103, 194, 58, 0.08);
  border: 1px solid rgba(103, 194, 58, 0.2);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.agent-header {
  font-weight: 600;
  font-size: 13px;
  color: var(--vscode-textLink-foreground);
  margin-bottom: 8px;
  animation: fadeIn 0.3s ease-out;
}

/* 通用淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.agent-thinking {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 6px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  animation: fadeIn 0.3s ease-out;
}

.tool-call {
  margin-bottom: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  animation: toolCallFadeIn 0.4s ease-out;
}

.tool-call:last-child {
  margin-bottom: 0;
}

/* 工具调用淡入动画 */
@keyframes toolCallFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tool-call-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.tool-name {
  font-weight: 600;
  color: var(--vscode-textLink-foreground);
}

.tool-params {
  color: var(--text-secondary);
  font-size: 11px;
}

.tool-result {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  padding-left: 26px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Agent摘要 */
.agent-summary {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(103, 194, 58, 0.08);
  border: 1px solid rgba(103, 194, 58, 0.2);
  border-radius: 6px;
}

.agent-operations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-operations-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.agent-operations-count {
  font-size: 12px;
  color: var(--text-secondary);
}

.agent-operations-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agent-operation-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 12px;
  transition: background 0.2s, border-color 0.2s;
}

.agent-operation-item.clickable {
  cursor: pointer;
  border: 1px solid transparent;
}

.agent-operation-item.clickable:hover {
  background: rgba(64, 158, 255, 0.15);
  border-color: rgba(64, 158, 255, 0.3);
}

.agent-operation-text {
  color: var(--text-primary);
}

.agent-operation-text code {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 11px;
  color: var(--vscode-textLink-foreground);
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 4px;
  border-radius: 3px;
}

.agent-confirm-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.agent-confirm-actions .el-button {
  flex-shrink: 0;
  min-width: 100px;
}

/* 输入区 */
.chat-input-area {
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background-color 0.2s;
}

.chat-input-area.drag-over {
  background: rgba(64, 158, 255, 0.1);
  border-top: 2px solid rgba(64, 158, 255, 0.6);
}

.chat-uploaded-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-uploaded-files .file-tag {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; /* 允许换行，避免UI太拥挤 */
}

.chat-actions {
  display: flex;
  justify-content: flex-end;
}

/* ========================================
   左侧边栏
   ======================================== */

.sidebar {
  /* width通过内联样式动态设置 */
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: relative; /* 为拖拽手柄定位 */
  transition: width 0.3s;
  user-select: none;
  -webkit-user-select: none;
}

.sidebar.collapsed {
  width: 48px;
}

/* 侧边栏拖拽手柄 */
.sidebar-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: ew-resize;
  background-color: transparent;
  transition: background-color 0.2s;
  z-index: 10;
}

.sidebar-resize-handle:hover {
  background-color: var(--primary-color);
}

.sidebar-header {
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 13px;
}

.sidebar-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.sidebar-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}

.history-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-item {
  position: relative;
  padding: 10px 12px;
  background-color: var(--bg-primary);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.history-item:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-color);
}

.history-item.active {
  background-color: var(--bg-active);
  border-color: var(--primary-color);
}

.history-item-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  user-select: text;
  transition: background-color 0.2s;
  padding: 2px 4px;
  border-radius: 3px;
}

.history-item-title:hover {
  background-color: var(--bg-hover);
}

.history-item-title-edit {
  margin-bottom: 4px;
}

.history-title-input {
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  padding: 2px 6px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--primary-color);
  border-radius: 3px;
  outline: none;
  font-family: inherit;
}

.history-title-input:focus {
  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
}

.history-item.editing {
  background-color: var(--bg-active);
  border-color: var(--primary-color);
}

.history-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-secondary);
}

.operation-type {
  background-color: var(--tag-bg);
  padding: 2px 6px;
  border-radius: 3px;
}

.delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.history-item:hover .delete-btn {
  opacity: 1;
}

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 13px;
}

/* ========================================
   编辑器容器
   ======================================== */

.editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; /* 为assist-bar提供定位上下文 */
}
/* 实时写作辅助提示条 */
.assist-bar {
  position: absolute; /* 悬浮模式，不占用布局空间 */
  top: 48px; /* toolbar高度 */
  left: 0;
  right: 0;
  z-index: 10; /* 悬浮在编辑器上方 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 添加阴影增强悬浮效果 */
  user-select: none;
  -webkit-user-select: none;
  opacity: 0.85;
}
.assist-hints {
  flex: 1;
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}
.assist-hints::-webkit-scrollbar {
  height: 4px;
}
.assist-hints::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}
.assist-hints::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}
.assist-chip {
  max-width: 400px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.assist-chip.clickable {
  cursor: pointer !important;
}
.assist-chip.clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0.9;
}
.assist-chip .hint-content {
  display: inline;
}
.assist-chip .hint-old-text {
  background-color: rgba(255, 100, 100, 0.2);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}
.assist-chip .hint-new-text {
  background-color: rgba(100, 200, 100, 0.25);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}
.assist-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hint-counter {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 工具栏 */
.toolbar {
  height: 48px;
  flex-shrink: 0; /* 防止被压缩 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  user-select: none;
  -webkit-user-select: none;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.el-divider--vertical {
  height: 20px;
  margin: 0 8px;
}

/* 编辑器包装器 */
.editor-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* 编辑器空状态提示 */
.editor-empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
}

.editor-empty-state .empty-icon {
  color: var(--text-secondary);
  opacity: 0.5;
  margin-bottom: 16px;
}

.editor-empty-state .empty-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.editor-empty-state .empty-hint {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.monaco-editor {
  width: 100%;
  height: 100%;
}

/* 底部操作栏 */
.action-bar {
  height: 56px;
  flex-shrink: 0; /* 防止被压缩 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  user-select: none;
  -webkit-user-select: none;
}

.action-bar-left,
.action-bar-center,
.action-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-bar-center {
  flex: 1;
  justify-content: center;
}

/* ========================================
   对比框样式
   ======================================== */

.form-tip {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 12px;
}

/* ========================================
   滚动条样式
   ======================================== */

.history-list::-webkit-scrollbar {
  width: 8px;
}

.history-list::-webkit-scrollbar-track {
  background: transparent;
}

.history-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

.history-list::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ========================================
   文件树和时间线样式
   ======================================== */

/* 区域头部 */
.section-header {
  display: flex;
  justify-items: space-between;
  align-items: center;
  padding: 8px 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
}

.timeline-count {
  font-size: 11px;
  color: var(--text-secondary);
  margin-left: auto;
}

/* 文件树区域 */
.file-tree-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-color);
  min-height: 200px;
  max-height: 50%;
}

.file-tree-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
/* 拖拽导入态 */
.file-tree-container.dragover {
  outline: 2px dashed var(--el-color-primary);
  outline-offset: -6px;
  background-color: rgba(64,158,255,0.06);
}

.file-tree {
  display: flex;
  flex-direction: column;
}

.file-tree-node {
  user-select: none;
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s, opacity 0.2s;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}

.tree-node:hover {
  background-color: var(--bg-hover);
}

.tree-node.active {
  background-color: var(--bg-active);
  color: var(--el-color-primary);
  font-weight: 500;
}

.tree-node.selected {
  background-color: rgba(64, 158, 255, 0.15);
  border-left: 2px solid var(--el-color-primary);
}

.file-node[draggable="true"] {
  cursor: grab;
}

.file-node[draggable="true"]:active {
  cursor: grabbing;
  opacity: 0.5;
}

.folder-icon {
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

.folder-icon.expanded {
  transform: rotate(90deg);
}

.node-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.folder-node .node-icon {
  color: var(--el-color-primary);
}

.file-icon {
  color: var(--text-secondary);
}

.node-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 时间线区域 */
.timeline-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.timeline-section.full-height {
  max-height: 100%;
}

.timeline-container {
  flex: 1;
  overflow-y: auto;
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-item {
  padding: 12px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.timeline-item:hover {
  background-color: var(--bg-hover);
  border-color: var(--el-color-primary);
  transform: translateX(2px);
}

.timeline-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.timeline-icon {
  font-size: 14px;
  color: var(--el-color-primary);
}

.timeline-type {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.timeline-item-summary {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-item-time {
  font-size: 11px;
  color: var(--text-secondary);
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--text-secondary);
  text-align: center;
  min-height: 100px;
}

.empty-state p {
  margin: 8px 0;
  font-size: 13px;
}

/* 滚动条样式 */
.file-tree-container::-webkit-scrollbar,
.timeline-container::-webkit-scrollbar {
  width: 6px;
}

.file-tree-container::-webkit-scrollbar-track,
.timeline-container::-webkit-scrollbar-track {
  background: transparent;
}

.file-tree-container::-webkit-scrollbar-thumb,
.timeline-container::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

.file-tree-container::-webkit-scrollbar-thumb:hover,
.timeline-container::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ========================================
   Monaco Editor 错误标记样式
   ======================================== */

/* 红色波浪线 */
.squiggly-error {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 3' enable-background='new 0 0 6 3' height='3' width='6'%3E%3Cg fill='%23ff0000'%3E%3Cpolygon points='5.5,0 2.5,3 1.1,3 4.1,0'/%3E%3Cpolygon points='4,0 6,2 6,0.6 5.4,0'/%3E%3Cpolygon points='0,2 1,3 2.4,3 0,0.6'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left;
  padding-bottom: 2px;
}

/* 左侧错误图标 */
.error-glyph {
  background: #f48771;
  width: 4px !important;
  margin-left: 3px;
}

/* 差异高亮 */
.diff-highlight {
  background-color: rgba(255, 200, 0, 0.2);
}

/* Agent diff标记（绿色背景表示修改） */
.agent-diff-line-modified {
  background: rgba(103, 194, 58, 0.12) !important;
}

.agent-diff-glyph {
  background: #67c23a !important;
  width: 4px !important;
  margin-left: 3px;
}
/* Agent pending提示条 */
.agent-pending-banner {
  background: rgba(230, 162, 60, 0.15);
  border-bottom: 2px solid rgba(230, 162, 60, 0.5);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.agent-pending-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-pending-text strong {
  font-weight: 600;
  color: #e6a23c;
}

.agent-pending-text kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: monospace;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

.agent-pending-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-pending-file {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 11px;
  color: var(--vscode-textLink-foreground);
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 6px;
  border-radius: 3px;
}

.diff-inline {
  background-color: rgba(255, 200, 0, 0.3);
}

/* ========================================
   对比对比框样式（自定义模态框）
   ======================================== */

/* 遮罩层 */
.compare-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--modal-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

/* ========================================
   时间线对照（大模态）样式 —— 自定义覆盖层
   ======================================== */
.timeline-compare-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--modal-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

.timeline-compare-modal {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 90%;
  max-width: 1400px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px var(--modal-shadow);
  animation: slideDown 0.3s ease-out;
}

.timeline-compare-modal > .timeline-compare-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
}

.timeline-compare-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.timeline-compare-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 20px;
  transition: all 0.2s;
  border-radius: 4px;
}

.timeline-compare-close:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.timeline-compare-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  background-color: var(--bg-primary);
  overflow-x: hidden; /* 防止横向溢出导致右侧空白补偿 */
  width: 100%;
  box-sizing: border-box;
}

.timeline-compare-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 24px;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
}

.timeline-compare-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.timeline-compare-container {
  display: flex;
  gap: 12px;
  height: 60vh;
  width: 100%;
  min-width: 0; /* 避免子项撑破导致横向滚动 */
}

.timeline-compare-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0; /* 允许收缩 */
  flex: 1 1 0; /* 两侧面板等宽 */
}

.timeline-compare-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.timeline-compare-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px;
  overflow: auto;
  flex: 1 1 auto;
}

.timeline-compare-text-box {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.8;
}

.timeline-compare-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.timeline-compare-legend {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 对比框容器 */
.compare-modal {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 90%;
  max-width: 1400px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px var(--modal-shadow);
  animation: slideDown 0.3s ease-out;
}

/* Ensure custom compare modal is horizontally centered */
.compare-modal {
  margin-left: auto;
  margin-right: auto;
}

@keyframes slideDown {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 对比框头部 */
.compare-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
}

.compare-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.compare-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 20px;
  transition: all 0.2s;
  border-radius: 4px;
}

.compare-modal-close:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* 对比框主体 */
.compare-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  background-color: var(--bg-primary);
}
/* Prevent horizontal overflow and right gap in compare modal body */
.compare-modal-body {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  display: flow-root; /* establish BFC to avoid unexpected shrink-wrap */
  scrollbar-gutter: stable both-edges;
}

/* Ensure compare blocks fill container and center */
.compare-modal-body .compare-container,
.compare-modal-body .diff-legend {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 对比框底部 */
.compare-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
}

.compare-container {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.compare-panel {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0; /* To prevent flex overflow */
}

.compare-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-color);
}

.compare-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.compare-content {
  flex: 1;
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}

.compare-text-box {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  padding: 15px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  min-height: 500px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text-primary);
}

/* 句子级高亮样式 */
.diff-removed-sentence {
  background-color: var(--diff-removed-bg);
  padding: 3px 4px;
  margin: 0 1px;
  display: inline;
}

.diff-added-sentence {
  background-color: var(--diff-added-bg);
  padding: 3px 4px;
  margin: 0 1px;
  display: inline;
}

/* 富文本diff容器样式 */
.diff-original-container {
  background-color: var(--diff-removed-bg);
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  border-left: 3px solid #ff6b6b;
}

.diff-optimized-container {
  background-color: var(--diff-added-bg);
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  border-left: 3px solid #51cf66;
}

.diff-text-comparison {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  margin-top: 8px;
}

.diff-text-comparison strong {
  color: var(--text-primary);
}

/* 上下文样式 */
.text-context {
  color: var(--text-secondary);
  background-color: var(--context-inline-bg);
  border-radius: 2px;
}

/* 图例样式 */
.diff-legend {
  display: flex;
  gap: 15px;
  margin-top: 15px;
  padding: 10px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  justify-content: center;
  align-items: center;
}

.legend-box {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}


.legend-removed {
  background-color: var(--diff-removed-bg);
}

.legend-added {
  background-color: var(--diff-added-bg);
}


.compare-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  color: var(--primary-color);
  font-size: 24px;
}

.compare-divider .divider-arrow {
  display: inline-block;
}

.compare-stats {
  display: flex;
  gap: 10px;
  align-items: center;
}

.compare-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Tip box replacing Element alert */
.compare-tip {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary-color);
  border-radius: 4px;
}
.compare-tip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.compare-tip-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Tag styles (replacement for el-tag) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--tag-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.4;
}
.tag-small { font-size: 12px; padding: 1px 6px; }
.tag-plain { background: transparent; }
.tag-success { border-color: rgba(78, 201, 176, 0.5); color: var(--success-color); }
.tag-info { border-color: rgba(0, 122, 204, 0.5); color: var(--primary-color); }

/* Button styles (replacement for el-button) */
.btn {
  appearance: none;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { background: var(--bg-hover); border-color: var(--primary-color); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.btn-primary:hover { filter: brightness(1.05); }

/* 滚动条样式 */
.compare-content::-webkit-scrollbar {
  width: 8px;
}

.compare-content::-webkit-scrollbar-track {
  background: transparent;
}

.compare-content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

.compare-content::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ========================================
   响应式
   ======================================== */

@media (max-width: 1200px) {
  .sidebar {
    width: 240px;
  }
  
  .compare-container {
    flex-direction: column;
  }
  
  .compare-divider {
    width: 100%;
    height: 40px;
    transform: rotate(90deg);
  }
}


/* Reasoning block styles */
.chat-messages .msg .msg-bubble .msg-reasoning {
  margin-bottom: 8px;
  padding: 8px;
  background: rgba(94, 94, 94, 0.05);
  border-left: 3px solid rgba(64, 158, 255, 0.3);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.chat-messages .msg .msg-bubble .msg-reasoning .reasoning-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-messages .msg .msg-bubble .msg-reasoning .reasoning-toggle {
  font-weight: 500;
}
.chat-messages .msg .msg-bubble .msg-reasoning .reasoning-length {
  opacity: 0.6;
  font-size: 11px;
}
.chat-messages .msg .msg-bubble .msg-reasoning .reasoning-body {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(64, 158, 255, 0.1);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Agent历史面板 */
.agent-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
}

.agent-history-item {
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: border-color 0.2s;
}

.agent-history-item:hover {
  border-color: var(--primary-color);
}

.agent-history-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.agent-history-time {
  font-size: 12px;
  color: var(--text-secondary);
}

.agent-history-summary {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.agent-history-actions {
  display: flex;
  justify-content: flex-end;
}

/* ==================== 自定义消息提示样式 ==================== */
.el-message{
  top: 40px !important;
}
.el-notification{
  top: 40px !important;
}

/* ==================== 自动更新通知 ==================== */
.update-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 400px;
  z-index: 9999;
  animation: slideUp 0.3s ease-out;
}

.update-notification-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--primary-color);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.update-notification-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-center;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  font-size: 20px;
}

.update-notification-body {
  flex: 1;
  min-width: 0;
}

.update-notification-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.update-notification-message {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.update-notification-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.update-notification-actions .btn {
  white-space: nowrap;
  min-width: 90px;
}

/* 滑入动画 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up-enter-active {
  animation: slideUp 0.3s ease-out;
}

.slide-up-leave-active {
  animation: slideUp 0.3s ease-out reverse;
}

/* ========================================
   Markdown预览样式
   ======================================== */

.markdown-preview {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 40px 60px;
  background: var(--vscode-editor-background);
  color: var(--text-primary);
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 标题 */
.markdown-preview h1 {
  font-size: 2em;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.markdown-preview h2 {
  font-size: 1.5em;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.markdown-preview h3 {
  font-size: 1.25em;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.markdown-preview h4,
.markdown-preview h5,
.markdown-preview h6 {
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

/* 段落 */
.markdown-preview p {
  margin-bottom: 16px;
  color: var(--text-primary);
}

/* 列表 */
.markdown-preview ul,
.markdown-preview ol {
  margin-bottom: 16px;
  padding-left: 32px;
}

.markdown-preview li {
  margin-bottom: 4px;
}

/* 代码块 */
.markdown-preview pre {
  background: var(--vscode-textCodeBlock-background);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin-bottom: 16px;
}

.markdown-preview code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
}

.markdown-preview pre code {
  background: transparent;
  padding: 0;
  border: none;
}

.markdown-preview :not(pre) > code {
  background: var(--vscode-textCodeBlock-background);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.9em;
}

/* 引用 */
.markdown-preview blockquote {
  border-left: 4px solid var(--vscode-textBlockQuote-border);
  background: var(--vscode-textBlockQuote-background);
  padding: 8px 16px;
  margin: 16px 0;
  color: var(--text-secondary);
}

.markdown-preview blockquote p {
  margin: 0;
}

/* 链接 */
.markdown-preview a {
  color: var(--vscode-textLink-foreground);
  text-decoration: none;
}

.markdown-preview a:hover {
  color: var(--vscode-textLink-activeForeground);
  text-decoration: underline;
}

/* 表格 */
.markdown-preview table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 16px;
  display: block;
  overflow-x: auto;
}

.markdown-preview th,
.markdown-preview td {
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  text-align: left;
}

.markdown-preview th {
  background: var(--vscode-editor-inactiveSelectionBackground);
  font-weight: 600;
}

/* 分隔线 */
.markdown-preview hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 24px 0;
}

/* 图片 */
.markdown-preview img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 16px 0;
}

/* 任务列表 */
.markdown-preview input[type="checkbox"] {
  margin-right: 8px;
}

/* 下划线样式 - 支持自定义颜色 */
.markdown-preview u {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* 文字颜色 - 保留内联样式的颜色 */
.markdown-preview span[style*="color"] {
  /* 颜色由内联样式定义 */
}

/* 下划线和颜色组合 */
.markdown-preview u[style*="color"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  /* 颜色和下划线颜色由内联样式定义 */
}

/* 滚动条样式 */
.markdown-preview::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.markdown-preview::-webkit-scrollbar-track {
  background: var(--vscode-scrollbarSlider-background);
}

.markdown-preview::-webkit-scrollbar-thumb {
  background: var(--vscode-scrollbarSlider-background);
  border-radius: 6px;
}

.markdown-preview::-webkit-scrollbar-thumb:hover {
  background: var(--vscode-scrollbarSlider-hoverBackground);
}

/* ========================================
   增强的聊天等待动画
   ======================================== */

/* 普通等待动画（0-5秒） */
.chat-waiting-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  min-height: 80px;
}

.chat-waiting-spinner {
  position: relative;
  width: 50px;
  height: 50px;
}

.chat-waiting-spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: var(--el-color-primary);
  border-radius: 50%;
  animation: chatSpinnerRotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.chat-waiting-spinner-ring:nth-child(1) {
  animation-delay: -0.45s;
  opacity: 0.8;
}

.chat-waiting-spinner-ring:nth-child(2) {
  animation-delay: -0.3s;
  opacity: 0.6;
}

.chat-waiting-spinner-ring:nth-child(3) {
  animation-delay: -0.15s;
  opacity: 0.4;
}

@keyframes chatSpinnerRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.chat-waiting-text {
  font-size: 13px;
  color: var(--text-secondary);
  animation: chatTextPulse 1.5s ease-in-out infinite;
}

@keyframes chatTextPulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* 长时间等待动画（5秒后） */
.chat-waiting-animation.long-wait .chat-waiting-spinner {
  width: 60px;
  height: 60px;
}

.chat-waiting-animation.long-wait .chat-waiting-spinner-ring {
  border-width: 4px;
  animation: chatSpinnerRotateLong 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.chat-waiting-animation.long-wait .chat-waiting-spinner-ring:nth-child(1) {
  border-top-color: var(--el-color-primary);
  border-right-color: var(--el-color-primary);
  animation-delay: -0.6s;
}

.chat-waiting-animation.long-wait .chat-waiting-spinner-ring:nth-child(2) {
  border-top-color: var(--el-color-success);
  border-right-color: var(--el-color-success);
  animation-delay: -0.4s;
}

.chat-waiting-animation.long-wait .chat-waiting-spinner-ring:nth-child(3) {
  border-top-color: var(--el-color-warning);
  border-right-color: var(--el-color-warning);
  animation-delay: -0.2s;
}

@keyframes chatSpinnerRotateLong {
  0% {
    transform: rotate(0deg) scale(0.9);
  }
  25% {
    transform: rotate(90deg) scale(1.1);
  }
  50% {
    transform: rotate(180deg) scale(0.9);
  }
  75% {
    transform: rotate(270deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(0.9);
  }
}

.chat-waiting-animation.long-wait .chat-waiting-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-color-warning);
  animation: chatTextBlink 1s ease-in-out infinite;
}

@keyframes chatTextBlink {
  0%, 100% {
    opacity: 0.7;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}