/* Deep Student Design - 简洁优雅的侧边栏布局 */

/* 紧急修复：彻底禁用所有旧tooltip相关的伪元素 */
.tooltip-container,
.tooltip-container::before,
.tooltip-container::after,
.tooltip-container.tooltip-right::before,
.tooltip-container.tooltip-right::after,
.tooltip-container.tooltip-left::before, 
.tooltip-container.tooltip-left::after,
.tooltip-container.tooltip-bottom::before,
.tooltip-container.tooltip-bottom::after,
.tooltip-container.tooltip-success::before,
.tooltip-container.tooltip-success::after,
.tooltip-container.tooltip-warning::before,
.tooltip-container.tooltip-warning::after,
.tooltip-container.tooltip-info::before,
.tooltip-container.tooltip-info::after,
/* 增强清理：清除任何可能的选择器 */
*[class*="tooltip-container"]::before,
*[class*="tooltip-container"]::after,
*[data-tooltip]:not(.tooltip-test)::before,
*[data-tooltip]:not(.tooltip-test)::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: static !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 自定义标题栏样式 */
.custom-titlebar {
  height: 32px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  user-select: none;
  position: relative;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.titlebar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  flex: 1;
}

.app-icon {
  font-size: 16px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-title {
  font-size: 13px;
  font-weight: 500;
  color: #2d3748;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.titlebar-controls {
  display: flex;
  height: 100%;
}

.titlebar-button {
  width: 48px;
  height: 32px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #4a5568;
}

.titlebar-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.titlebar-button.close:hover {
  background: #e53e3e;
  color: white;
}

.titlebar-button svg {
  flex-shrink: 0;
}

/* 窗口控制按钮样式 - 强制显示 */
.window-controls {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  display: flex !important;
  z-index: 999999 !important; /* 🎯 修复：使用最高z-index确保窗口控制按钮始终可见 */
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom-left-radius: 8px !important;
  /* 🎯 修复：强制确保窗口控制按钮不被隐藏 */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  clip: none !important;
  overflow: visible !important;
}

.window-button {
  width: 46px;
  height: 32px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #4a5568;
  border-radius: 0;
  /* 🎯 修复：确保窗口按钮始终可见 */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 10001;
}

.window-button:hover {
  background: rgba(0, 0, 0, 0.08);
}

.window-button.close:hover {
  background: #e53e3e;
  color: white;
}

.window-button:first-child {
  border-bottom-left-radius: 8px;
}

.window-button:last-child {
  border-top-right-radius: 0;
}

.window-button svg {
  flex-shrink: 0;
  /* 🎯 修复：确保SVG图标正常显示 */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
}

/* 确保header可拖拽 */
.sidebar-header {
  cursor: grab;
  user-select: none;
}

.sidebar-header:active {
  cursor: grabbing;
}

.content-header {
  cursor: grab;
  user-select: none;
}

.content-header:active {
  cursor: grabbing;
}

/* 确保按钮不受拖拽影响 */
.sidebar-toggle {
  pointer-events: auto;
  z-index: 10;
}

.window-controls {
  pointer-events: auto;
  z-index: 10000; /* 🎯 修复：确保窗口控制按钮在最上层 */
}

.window-button {
  pointer-events: auto;
  z-index: 10001; /* 🎯 修复：确保窗口按钮在最上层 */
  position: relative;
}

.sidebar-toggle {
  pointer-events: auto;
  z-index: 11;
  position: relative;
}

/* 隐藏调试信息和开发者工具覆盖层 */
[data-tauri-debug],
[data-debug],
.debug-overlay,
.size-indicator,
.resize-indicator,
.window-size-indicator,
.dimension-overlay,
*[class*="debug"],
*[id*="debug"],
*[class*="dev-tools"],
*[class*="devtools"],
*[class*="resize-info"],
*[class*="size-info"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 特别针对右上角的调试信息 - 排除窗口控制按钮 */
body::after,
html::after,
*:not(.window-controls):not(.window-button)::after,
*:not(.window-controls):not(.window-button)::before {
  content: none !important;
}

/* 隐藏任何可能的固定定位调试元素 - 更精确的选择器 */
div[style*="position: fixed"][style*="top: 0"][style*="right: 0"][class*="debug"]:not(.window-controls),
div[style*="position: absolute"][style*="top: 0"][style*="right: 0"][class*="debug"]:not(.window-controls),
div[style*="position: fixed"][style*="top: 0"][style*="right: 0"][id*="debug"]:not(.window-controls),
div[style*="position: absolute"][style*="top: 0"][style*="right: 0"][id*="debug"]:not(.window-controls) {
  display: none !important;
}

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主应用容器 */
.app {
  display: flex !important;
  flex-direction: row !important;
  height: 100vh !important;
  background-color: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  color: #2d3748;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* CSS变量用于动态设置侧边栏宽度 */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 60px;
  
  /* 确保CSS变量变化时也有过渡效果 */
  --transition-timing: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 应用主体区域（整个应用内容） */
.app-body {
  display: flex;
  height: 100vh;
  /* 🎯 修复：确保主体内容区域从窗口顶部开始，适配自定义标题栏 */
  padding-top: 0; 
  /* 🎯 修复：移除最小宽度限制，解决响应式布局在小窗口下的突变问题 */
  flex-direction: row !important;
  flex: 1 !important;
  overflow: auto !important; /* MODIFIED: Allow scrolling if content overflows */
}


/* 侧边栏 */
.app-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  /* overflow: visible !important; -- This was part of the problematic block, sidebar itself should not scroll */
}

.app-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  min-width: var(--sidebar-collapsed-width);
}

/* 侧边栏头部 */
.sidebar-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff !important;
  height: 48px;
  box-sizing: border-box;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
}

/* 侧边栏展开时，logo靠左1/3 */
.app-sidebar:not(.collapsed) .app-logo {
  justify-content: flex-start;
  padding-left: 1.5rem;
}

.logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
}

.logo-full {
  height: 32px;
  max-width: 200px;
  object-fit: contain;
  object-position: left center;
  margin-left: 0;
}

.logo-text {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
  white-space: nowrap;
}

.sidebar-toggle {
  width: 28px;
  height: 28px;
  border: none;
  background: #f7fafc;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #718096;
  font-size: 0.875rem;
}

.sidebar-toggle:hover {
  background: #edf2f7;
  color: #4a5568;
}

/* 导航区域 */
.sidebar-nav {
  flex: 1;
  padding: 1rem 0.75rem;
  overflow-y: auto !important; /* MODIFIED: Ensure this scrolls */
  min-height: 0; /* ADDED: Good practice for flex children that scroll */
}

.nav-section {
  margin-bottom: 1.5rem;
  /* overflow: visible !important; -- This was part of the problematic block */
}

.nav-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #000000 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  padding-left: 0.75rem;
}

.nav-item {
  width: 100%;
  padding: 0.75rem;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #000000 !important;
  text-align: left;
  transition: all 0.2s ease;
  margin-bottom: 0.25rem;
  position: relative;
  /* overflow: visible !important; -- This was part of the problematic block */
}

.nav-item:hover {
  background: #f7fafc;
  color: #000000 !important;
}

.nav-item.active {
  background: #ebf8ff;
  color: #000000 !important;
  font-weight: 600;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: #3182ce;
  border-radius: 0 2px 2px 0;
}

.nav-icon {
  font-size: 1.125rem;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-text {
  white-space: nowrap;
  overflow: hidden;
}

/* 侧边栏底部 */
.sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid #e2e8f0;
  background: #ffffff !important;
}

.sidebar-footer .nav-item {
  background: transparent !important;
  color: #000000 !important;
}

/* 主内容区域 */
.app-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: auto !important; /* MODIFIED: Allow scrolling */
  background: #ffffff;
  min-width: 0; /* ADDED: Prevent flexbox overflow */
}

/* 内容头部 */
.content-header {
  padding: 0.75rem 2rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  height: 48px;
  box-sizing: border-box;
}

.content-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}

.content-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.content-header .sidebar-toggle {
  width: 32px;
  height: 32px;
  border: none;
  background: #f7fafc;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #718096;
  margin-right: 0.5rem;
}

.content-header .sidebar-toggle svg {
  flex-shrink: 0;
}

.content-header .sidebar-toggle:hover {
  background: #edf2f7;
  color: #4a5568;
  transform: scale(1.05);
}

/* 返回按钮 */
.back-button {
  padding: 0.5rem 1rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #4a5568;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.back-button svg {
  flex-shrink: 0;
}

.back-button:hover {
  background: #f7fafc;
  border-color: #cbd5e0;
  color: #2d3748;
  transform: translateX(-2px);
}

/* 全屏切换按钮 */
.fullscreen-toggle {
  padding: 0.5rem 1rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  color: #4a5568;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fullscreen-toggle:hover {
  background: #f7fafc;
  border-color: #cbd5e0;
  color: #2d3748;
}

/* 内容主体 */
.content-body {
  flex: 1;
  padding: 2rem;
  overflow-y: auto; /* MODIFIED */
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  min-height: 0; /* ADDED */
}

/* 分析视图特殊布局 */
.content-body .analysis-layout {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 !important;
  min-height: 0 !important; /* ADDED */
}


/* 聊天区域全屏增强 */
.chat-container {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  transition: 
    all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    position 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    right 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    bottom 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* 设置变换原点为右下角，实现自然缩放 */
  transform-origin: bottom right;
}

/* 聊天容器全屏样式 - 直接过渡无动画 */
.chat-container.chat-fullscreen {
  position: fixed !important;
  top: 48px !important; /* content-header高度 */
  /* 动态计算left值，根据侧边栏是否收缩调整 */
  left: var(--sidebar-width, 240px) !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999 !important; /* 低于窗口控制按钮 */
  border-radius: 0 !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
  /* 保持变换原点为右下角 */
  transform-origin: bottom right !important;
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 48px) !important; /* 减去content-header高度 */
  min-height: unset !important;
  max-height: unset !important;
  width: auto !important;
  flex: none !important;
  /* 使用统一的transition，不使用动画 */
}


/* Removed chat-header styles since chat-header is no longer used */

.chat-fullscreen-toggle {
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  color: #4a5568;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
}

.chat-fullscreen-toggle:hover {
  background: #f7fafc;
  border-color: #cbd5e0;
  color: #2d3748;
  transform: scale(1.05);
}

.chat-history {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  min-height: 0;
  border-radius: 0; /* 移除圆角 */
}

.chat-container.chat-fullscreen .chat-history {
  padding: 2rem !important;
  flex: 1 !important;
  overflow-y: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 0 !important; /* 全屏时移除圆角 */
}

.chat-input {
  padding: 0.75rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 0;
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: nowrap;
}

/* Removed duplicate chat-history definition */

.chat-container.chat-fullscreen .chat-input {
  border-radius: 0 !important;
  padding: 1rem 2rem !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05) !important;
  flex-shrink: 0 !important;
}

.chat-input input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.chat-input input:focus {
  border-color: #3182ce;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.send-button {
  padding: 0.75rem 1rem;
  background: #3182ce;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
}

.send-button:hover:not(:disabled) {
  background: #2c5aa0;
  transform: translateY(-1px);
}

.send-button:disabled {
  background: #a0aec0;
  cursor: not-allowed;
  transform: none;
}



/* 分析界面布局 */
.analysis-layout {
  display: flex !important;
  flex-direction: row !important;
  gap: 1.5rem !important;
  flex: 1 !important;
  min-height: 0 !important;
  align-items: stretch !important;
  padding: 1.5rem;
  background: #f8fafc;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible; /* Allow content to be visible */
}

.left-panel {
  flex: 0 0 450px; /* 🎯 修复：固定宽度，防止突然收缩 */
  min-width: 400px; /* 🎯 修复：提高最小宽度，确保稳定显示 */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: transparent;
  max-width: 450px; /* 🎯 修复：限制最大宽度 */
  box-sizing: border-box;
}

.right-panel {
  flex: 1 1 auto; /* 🎯 修复：改为更稳定的flex设置，占据剩余空间 */
  display: flex;
  flex-direction: column;
  min-width: 300px; /* 🎯 修复：设置合理的最小宽度 */
  overflow: hidden; /* Keep hidden here to manage its own content */
  height: 100%;
}

.upload-section {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  /* 🎯 美化修复：让上传区域始终填满左侧面板，确保与右侧面板下边缘对齐 */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* 🎯 修复：确保上传区域不超出容器 */
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.upload-section h3 {
  margin: 0 0 1.5rem 0;
  color: #2d3748;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  /* 🎯 美化：添加底部边框和更好的间距 */
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f0f4f8;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
  /* 🎯 修复：确保表单组件不超出容器 */
  max-width: 100%;
  box-sizing: border-box;
}

.form-group label {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: #2d3748;
  font-size: 0.9rem;
  /* 🎯 美化：添加更好的标签样式 */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group select,
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  /* 🎯 美化：添加更好的输入框样式 */
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1);
  /* 🎯 美化：添加轻微的向上移动效果 */
  transform: translateY(-1px);
}

.image-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.preview-image {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.analyze-button {
  width: 100%;
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
  flex-shrink: 0;
  /* 🎯 美化：添加更好的视觉效果 */
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.analyze-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.analyze-button:disabled {
  background: #a0aec0;
  cursor: not-allowed;
  transform: none;
}

.action-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  /* 🎯 美化：添加顶部边框分隔 */
  padding-top: 1.5rem;
  border-top: 1px solid #f0f4f8;
}

.save-button,
.reset-button {
  flex: 1;
  padding: 0.875rem 1rem;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  /* 🎯 美化：添加阴影和更好的视觉效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.save-button {
  background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
  color: white;
}

.save-button:hover {
  background: linear-gradient(135deg, #2f855a 0%, #276749 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.reset-button {
  background: #f7fafc;
  color: #4a5568;
  border: 2px solid #e2e8f0;
}

.reset-button:hover {
  background: #edf2f7;
  border-color: #cbd5e0;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.empty-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #718096;
  /* 🎯 美化：添加背景和边框，与左侧面板保持一致 */
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 2rem;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.empty-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 0.6;
  border-radius: 12px;
}

.analysis-result {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.result-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.result-header h3 {
  margin: 0;
  color: #2d3748;
  font-size: 1.125rem;
  font-weight: 600;
}

.analyzing-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #667eea;
  font-size: 0.875rem;
}

.spinner {
  animation: spin 1s linear infinite;
}

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

.result-info {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.info-item {
  margin-bottom: 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.info-item strong {
  color: #4a5568;
  min-width: 80px;
  font-weight: 600;
}

.info-value {
  color: #2d3748;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background: #ebf8ff;
  color: #3182ce;
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 500;
}

.ocr-text {
  background: #f7fafc;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #2d3748;
  max-height: 120px;
  overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .analysis-layout {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }

  .left-panel {
    flex: 0 0 auto; /* 🎯 修复：在小屏幕上也保持固定尺寸 */
    min-width: 350px; /* 🎯 修复：在小屏幕上适当减小但保持稳定 */
    max-width: 100%; /* 🎯 修复：确保不超出容器 */
  }

  .right-panel {
    flex: 1 1 auto; /* 🎯 修复：占据剩余空间，但不会过度扩展 */
    min-width: 250px; /* 🎯 修复：设置合理的最小宽度 */
  }
}

/* 渐进式响应式断点设计 - 谨慎优化 */

/* 中等窗口尺寸：适度缩小侧边栏宽度 */
@media (max-width: 1200px) {
  :root {
    --sidebar-width: 200px; /* 从240px减少到200px */
  }
  
  /* 确保聊天容器全屏模式适应新的侧边栏宽度 */
  .chat-container.chat-fullscreen {
    left: 200px !important;
  }
}

/* 较小窗口尺寸：进一步缩小侧边栏 */
@media (max-width: 900px) {
  :root {
    --sidebar-width: 180px; /* 进一步减少到180px */
  }
  
  .chat-container.chat-fullscreen {
    left: 180px !important;
  }
}

/* 小窗口尺寸：显著缩小但保持可读性 */
@media (max-width: 700px) {
  :root {
    --sidebar-width: 160px; /* 减少到160px */
  }
  
  .chat-container.chat-fullscreen {
    left: 160px !important;
  }
}

/* 极小窗口尺寸：切换到收缩模式（移动设备） */
@media (max-width: 500px) {
  .app-sidebar {
    width: 60px;
    /* 确保过渡动画仍然有效 */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .app-sidebar:not(.collapsed) {
    position: absolute;
    width: 240px;
    z-index: 100;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .content-header {
    padding: 0.5rem 1rem;
  }

  .content-body {
    padding: 1rem;
  }
  
  /* 确保聊天容器在移动设备上正确调整 */
  .chat-container.chat-fullscreen {
    left: 60px !important;
  }
}

/* 动画效果 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.nav-item {
  animation: slideIn 0.3s ease;
}

/* 主题色彩优化 */
:root {
  --cherry-primary: #3182ce;
  --cherry-primary-light: #ebf8ff;
  --cherry-secondary: #667eea;
  --cherry-gray-50: #f8f9fa;
  --cherry-gray-100: #f7fafc;
  --cherry-gray-200: #edf2f7;
  --cherry-gray-300: #e2e8f0;
  --cherry-gray-400: #cbd5e0;
  --cherry-gray-500: #a0aec0;
  --cherry-gray-600: #718096;
  --cherry-gray-700: #4a5568;
  --cherry-gray-800: #2d3748;
  --cherry-gray-900: #1a202c;
}

/* 滚动条美化 */
.sidebar-nav::-webkit-scrollbar,
.content-body::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track,
.content-body::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb,
.content-body::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover,
.content-body::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* 美化文件上传区域 */
.file-upload-area {
  position: relative;
  border: 2px dashed var(--primary-color, #8b5cf6) !important;
  border-radius: 8px !important;
  padding: 2rem;
  text-align: center;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%) !important;
  transition: all 0.25s ease !important;
  cursor: pointer;
  /* 🎯 修复：确保上传区域不超出容器 */
  max-width: 100%;
  box-sizing: border-box;
}

.file-upload-area:hover {
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.10) 0%, rgba(59, 130, 246, 0.10) 100%) !important;
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.15) !important;
  transform: translateY(-2px) !important;
  border-color: var(--primary-color, #7c3aed) !important;
}

.file-upload-area.drag-over {
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.12) 0%, rgba(59, 130, 246, 0.12) 100%) !important;
  border-color: var(--primary-color, #7c3aed) !important;
  animation: pulseBorder 1.2s infinite ease-in-out !important;
}

@keyframes pulseBorder {
  0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
  70%  { box-shadow: 0 0 0 6px rgba(139, 92, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  /* 🎯 修复：确保上传内容不超出容器 */
  max-width: 100%;
  box-sizing: border-box;
}

.upload-icon {
  font-size: 2.5rem !important;
  color: var(--primary-color, #6d28d9) !important;
}

.upload-text {
  font-size: 0.95rem !important;
  color: #4b5563 !important;
}

.file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.image-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* 新的图片画廊样式 */
.image-gallery {
  margin-top: 1rem;
}

.image-list {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  scroll-behavior: smooth;
}

.image-list::-webkit-scrollbar {
  height: 6px;
}

.image-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.image-list::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

.image-list::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

.image-item {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  transition: all 0.2s ease;
}

.image-item:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.gallery-image:hover {
  transform: scale(1.05);
}

.remove-image {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.remove-image:hover {
  background: rgba(239, 68, 68, 1);
  transform: scale(1.1);
}

.add-image-btn {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border: 2px dashed #cbd5e0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background: #f8f9fa;
}

.add-image-btn:hover {
  border-color: #667eea;
  background: #f0f8ff;
  transform: translateY(-2px);
}

.add-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #718096;
}

.add-icon {
  font-size: 2rem;
  font-weight: 300;
}

.add-text {
  font-size: 0.875rem;
  font-weight: 500;
}

.preview-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  transition: transform 0.2s ease;
}

.preview-image:hover {
  transform: scale(1.05);
}

/* 图片错误显示优化 */
.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: #f8f9fa;
  border: 2px dashed #cbd5e0;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  color: #6c757d;
  font-size: 0.9rem;
}

.error-path {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #a0aec0;
  word-break: break-all;
  max-width: 100%;
}

/* 🎯 现代化简约按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  gap: 0.5rem;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.btn-primary {
  background: #f8fafc;
  color: #1e293b;
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-primary:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-success {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-success:hover:not(:disabled) {
  background: #dcfce7;
  border-color: #86efac;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
  background: #f8fafc;
  color: #64748b;
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-danger {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-danger:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 标签页按钮美化 */
.tab {
  padding: 0.75rem 1.5rem;
  background: #f7fafc;
  color: #4a5568;
  border: 1px solid #e2e8f0;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  border-bottom: none;
}

.tab:hover {
  background: #edf2f7;
  color: #2d3748;
}

.tab.active {
  background: #ffffff;
  color: #3182ce;
  border-color: #3182ce;
  border-bottom: 2px solid #3182ce;
  font-weight: 600;
}

/* 返回按钮美化 */
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #f7fafc;
  color: #4a5568;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
}

.back-button:hover {
  background: #edf2f7;
  color: #2d3748;
  border-color: #cbd5e0;
  transform: translateX(-2px);
}

/* 多图片网格显示样式 */
.image-grid-container {
  margin-top: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8f9fa;
  padding: 0.75rem;
  /* 🎯 修复：确保图片网格容器不超出父容器 */
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.image-grid-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem;
  scroll-behavior: smooth;
  /* 🎯 修复：确保水平滚动正常工作 */
  width: 100%;
  min-width: 0;
}

.image-grid-scroll::-webkit-scrollbar {
  height: 6px;
}

.image-grid-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.image-grid-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.image-grid-scroll::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.image-thumbnail-container {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.image-thumbnail-container:hover {
  border-color: #4299e1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.image-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.image-thumbnail-container:hover .image-thumbnail {
  transform: scale(1.05) !important;
}

.remove-image-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.2s ease;
  opacity: 0;
}

.image-thumbnail-container:hover .remove-image-btn {
  opacity: 1;
}

.remove-image-btn:hover {
  background: rgba(220, 38, 38, 1);
  transform: scale(1.1);
}

.add-image-placeholder {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border: 2px dashed #cbd5e0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f8f9fa;
}

.add-image-placeholder:hover {
  border-color: #4299e1;
  background: #f0f8ff;
}

.add-image-input {
  display: none;
}

.add-image-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  color: #718096;
  transition: color 0.2s ease;
}

.add-image-placeholder:hover .add-image-label {
  color: #4299e1;
}

.add-image-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.add-image-text {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

/* 拖拽状态样式 */
.file-upload-area.drag-over {
  border-color: #4299e1;
  background: #f0f8ff;
  transform: scale(1.02);
}

.file-upload-area.drag-over .upload-icon {
  transform: scale(1.1);
  color: #4299e1;
}

.file-upload-area.drag-over .upload-text {
  color: #4299e1;
  font-weight: 600;
}

.image-grid-container.drag-over {
  border-color: #4299e1;
  background: #f0f8ff;
  transform: scale(1.01);
  box-shadow: 0 0 10px rgba(66, 153, 225, 0.3);
}

/* Cherry Studio 风格的现代化 Tooltip */
/* 自定义 tooltip 容器 */
.tooltip-container {
  position: relative;
  display: inline-block;
}

/* 已禁用 - 这些选择器被替换为tooltip-test */

/* 已禁用 - 旧的tooltip-container选择器
.tooltip-container[data-tooltip]:not([data-tooltip=""])::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 
    0 8px 32px rgba(102, 126, 234, 0.25),
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 0.025em;
}
已禁用 */

/* 已禁用 - 继续注释旧代码
.tooltip-container[data-tooltip]:not([data-tooltip=""])::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top: 6px solid #667eea;
  z-index: 999;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
已禁用 */

/* 已禁用 - 全部旧tooltip代码开始
.tooltip-container[data-tooltip]:not([data-tooltip=""]):hover::before,
.tooltip-container[data-tooltip]:not([data-tooltip=""]):hover::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* 不同位置的 tooltip */
.tooltip-container.tooltip-right[data-tooltip]:not([data-tooltip=""])::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 8px);
  transform: translate(0, -50%) scale(0.8);
  transform-origin: left center;
}

.tooltip-container.tooltip-right[data-tooltip]:not([data-tooltip=""])::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 2px);
  border: 6px solid transparent;
  border-right: 6px solid #667eea;
  border-top: 6px solid transparent;
  transform: translate(0, -50%) scale(0.8);
  transform-origin: left center;
}

.tooltip-container.tooltip-right[data-tooltip]:not([data-tooltip=""]):hover::before,
.tooltip-container.tooltip-right[data-tooltip]:not([data-tooltip=""]):hover::after {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

.tooltip-container.tooltip-left[data-tooltip]:not([data-tooltip=""])::before {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 8px);
  transform: translate(0, -50%) scale(0.8);
  transform-origin: right center;
}

.tooltip-container.tooltip-left[data-tooltip]:not([data-tooltip=""])::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 2px);
  border: 6px solid transparent;
  border-left: 6px solid #667eea;
  border-top: 6px solid transparent;
  transform: translate(0, -50%) scale(0.8);
  transform-origin: right center;
}

.tooltip-container.tooltip-left[data-tooltip]:not([data-tooltip=""]):hover::before,
.tooltip-container.tooltip-left[data-tooltip]:not([data-tooltip=""]):hover::after {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

.tooltip-container.tooltip-bottom[data-tooltip]:not([data-tooltip=""])::before {
  bottom: auto;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 0) scale(0.8);
  transform-origin: bottom center;
}

.tooltip-container.tooltip-bottom[data-tooltip]:not([data-tooltip=""])::after {
  bottom: auto;
  top: calc(100% + 2px);
  left: 50%;
  border: 6px solid transparent;
  border-bottom: 6px solid #667eea;
  border-top: 6px solid transparent;
  transform: translate(-50%, 0) scale(0.8);
  transform-origin: bottom center;
}

.tooltip-container.tooltip-bottom[data-tooltip]:not([data-tooltip=""]):hover::before,
.tooltip-container.tooltip-bottom[data-tooltip]:not([data-tooltip=""]):hover::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* 特殊主题的 tooltip */
.tooltip-container.tooltip-success[data-tooltip]:not([data-tooltip=""])::before {
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
}

.tooltip-container.tooltip-success[data-tooltip]:not([data-tooltip=""])::after {
  border-top-color: #4ecdc4;
}

.tooltip-container.tooltip-warning[data-tooltip]:not([data-tooltip=""])::before {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.tooltip-container.tooltip-warning[data-tooltip]:not([data-tooltip=""])::after {
  border-top-color: #f093fb;
}

.tooltip-container.tooltip-info[data-tooltip]:not([data-tooltip=""])::before {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.tooltip-container.tooltip-info[data-tooltip]:not([data-tooltip=""])::after {
  border-top-color: #4facfe;
}

/* 动画关键帧 */
@keyframes tooltipFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .tooltip-container[data-tooltip]:not([data-tooltip=""])::before {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 10px;
  }
  
  .tooltip-container[data-tooltip]:not([data-tooltip=""])::after {
    border-width: 5px;
  }
}
*/

/* 简化的tooltip功能 - 为侧边栏导航设计 */
.tooltip-test {
  position: relative !important;
  display: block !important;
}

/* 清理所有不需要的伪元素 */
.tooltip-test:not(:hover)::before,
.tooltip-test:not(:hover)::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 清理空的data-tooltip的伪元素 */
.tooltip-test[data-tooltip=""]::before,
.tooltip-test[data-tooltip=""]::after,
.tooltip-test:not([data-tooltip])::before,
.tooltip-test:not([data-tooltip])::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 默认tooltip (上方显示) - 动画优化 */
.tooltip-test[data-tooltip]:not([data-tooltip=""]):hover::before {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) scale(1) !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  z-index: 10000 !important;
  box-shadow: 
    0 8px 32px rgba(102, 126, 234, 0.25),
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  animation: tooltipFadeIn 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.tooltip-test[data-tooltip]:not([data-tooltip=""]):hover::after {
  content: '' !important;
  position: absolute !important;
  bottom: calc(100% + 4px) !important;
  left: 50% !important;
  transform: translateX(-50%) scale(1) !important;
  border: 6px solid transparent !important;
  border-top: 6px solid #667eea !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
  animation: tooltipFadeIn 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}



/* 侧边栏收起时的右侧tooltip - 相对于按钮定位 */
.app-sidebar.collapsed .tooltip-test[data-tooltip]:not([data-tooltip=""]):hover::before {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  top: 50% !important;
  left: calc(100% + 12px) !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateY(-50%) scale(1) !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  z-index: 999999 !important;
  box-shadow: 
    0 4px 20px rgba(102, 126, 234, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  animation: tooltipFadeIn 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.app-sidebar.collapsed .tooltip-test[data-tooltip]:not([data-tooltip=""]):hover::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: calc(100% + 6px) !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateY(-50%) scale(1) !important;
  border: 5px solid transparent !important;
  border-right: 5px solid #667eea !important;
  border-left: none !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  z-index: 999998 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1)) !important;
  animation: tooltipFadeIn 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* 全局清理：防止不明黑框 - 排除窗口控制按钮 */
/* 清理所有可能的伪元素黑框 */
*:not(.tooltip-test):not(.window-controls):not(.window-button)::before,
*:not(.tooltip-test):not(.window-controls):not(.window-button)::after {
  /* 确保非tooltip元素的伪元素不会意外显示 */
  display: none !important;
  content: none !important;
}

/* 特别清理：确保没有遗留的tooltip相关伪元素 */
.tooltip-container:not(.tooltip-test)::before,
.tooltip-container:not(.tooltip-test)::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: static !important;
}

/* 清理旧的tooltip-container样式 */
.tooltip-container:not(.tooltip-test) {
  position: static !important;
}

/* 清理任何可能的复杂选择器的伪元素 */
.tooltip-container.tooltip-right:not(.tooltip-test)::before,
.tooltip-container.tooltip-right:not(.tooltip-test)::after,
.tooltip-container.tooltip-left:not(.tooltip-test)::before,
.tooltip-container.tooltip-left:not(.tooltip-test)::after,
.tooltip-container.tooltip-bottom:not(.tooltip-test)::before,
.tooltip-container.tooltip-bottom:not(.tooltip-test)::after,
.tooltip-container.tooltip-success:not(.tooltip-test)::before,
.tooltip-container.tooltip-success:not(.tooltip-test)::after,
.tooltip-container.tooltip-warning:not(.tooltip-test)::before,
.tooltip-container.tooltip-warning:not(.tooltip-test)::after,
.tooltip-container.tooltip-info:not(.tooltip-test)::before,
.tooltip-container.tooltip-info:not(.tooltip-test)::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: static !important;
}

/* 确保只有hover时才显示tooltip */
.tooltip-test:not(:hover)::before,
.tooltip-test:not(:hover)::after {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(0) !important;
  display: none !important;
}

/* 精确清理：只针对可能出现问题的元素 */

/* 特别针对可能出现在底部的框 */
body::before,
body::after,
html::before,
html::after,
#root::before,
#root::after,
.app::before,
.app::after,
.app-body::before,
.app-body::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* =============================================================
   ⚡ FINAL OVERRIDES – ensure new upload page style wins   
   ============================================================= */
.upload-section {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.upload-section h3 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
}

.file-upload-area {
  border: 2px dashed var(--primary-color, #8b5cf6) !important;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%) !important;
  transition: all 0.25s ease !important;
}

.file-upload-area:hover {
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.10) 0%, rgba(59, 130, 246, 0.10) 100%) !important;
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.15) !important;
  transform: translateY(-2px) !important;
  border-color: var(--primary-color, #7c3aed) !important;
}

.file-upload-area.drag-over {
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.12) 0%, rgba(59, 130, 246, 0.12) 100%) !important;
  border-color: var(--primary-color, #7c3aed) !important;
  animation: pulseBorder 1.2s infinite ease-in-out !important;
}

.upload-icon {
  font-size: 2.5rem !important;
  color: var(--primary-color, #6d28d9) !important;
}

.upload-text {
  font-size: 0.95rem !important;
  color: #4b5563 !important;
}

.image-thumbnail-container {
  border-radius: 10px !important;
  overflow: hidden !important;
}

.image-thumbnail-container:hover .image-thumbnail {
  transform: scale(1.05) !important;
}

.analyze-button,
.save-button,
.reset-button {
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.analyze-button:hover:not(:disabled),
.save-button:hover:not(:disabled),
.reset-button:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================= */

/* =============================================================
   🎛️ Modern Select (Subject Picker) – improved native look
   ============================================================= */
.form-group select {
  /* Remove default OS / browser styling */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  /* Modern colors */
  background-color: #f9fafb !important;

  /* Custom arrow icon */
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23667eea' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 1rem !important;

  padding-right: 3rem !important; /* space for arrow */
  cursor: pointer !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

/* Hover & focus states */
.form-group select:hover {
  border-color: #667eea !important;
}

.form-group select:focus {
  outline: none !important;
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
}

/* Remove legacy IE arrow */
.form-group select::-ms-expand {
  display: none !important;
}

/* Disabled state keeping modern look */
.form-group select:disabled {
  background-color: #edf2f7 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* ============================================================= */
