/*
  IMPORTANT: This application MUST be placed in the /ai folder.
  Server access URL will be ip/ai
  DO NOT change this path structure under any circumstances.
*/
/* 
  Base Styles: Variables, Resets, Fonts, Basic Elements
*/

/* 引入更适合屏幕显示的字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

/* 全局变量 */
:root {
  --sjtu-blue: #2563eb; /* 核心蓝 */
  --sjtu-blue-dark: #1d4ed8; /* 深蓝 (Hover) */
  --sjtu-purple: #7c3aed; /* 核心紫 */
  --sjtu-purple-dark: #6d28d9; /* 深紫 (Hover) */
  --sjtu-gradient: linear-gradient(135deg, var(--sjtu-blue) 0%, var(--sjtu-purple) 100%);
  --sjtu-hover-gradient: linear-gradient(135deg, var(--sjtu-blue-dark) 0%, var(--sjtu-purple-dark) 100%);

  --text-primary: #1f2937; /* 更深的黑色，提高对比度 */
  --text-secondary: #4b5563; /* 次要文本 */
  --text-tertiary: #9ca3af; /* 更浅的灰色 */
  --text-on-color: #ffffff; /* 用于彩色背景上的文字 */

  --bg-main: #f8fafc; /* 主背景 (非常浅的灰蓝) */
  --bg-subtle: #f1f5f9; /* 微妙的背景色差 */
  --bg-card: #ffffff; /* 卡片背景 */
  --bg-hover: #f9fafb; /* 悬停背景 */
  --bg-selected: #eff6ff; /* 选中背景 (蓝色系) */

  --border-color: #e5e7eb; /* 标准边框 */
  --border-color-strong: #d1d5db; /* 强调边框 */
  --border-color-focus: var(--sjtu-blue); /* 聚焦边框 */

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);

  --radius-sm: 6px; /* 小圆角 */
  --radius-md: 10px; /* 中圆角 */
  --radius-lg: 16px; /* 大圆角 */
  --radius-full: 9999px; /* 全圆角 (用于按钮等) */

  --spacing-unit: 4px;
  --spacing-xs: var(--spacing-unit);   /* 4px */
  --spacing-sm: calc(var(--spacing-unit) * 2);   /* 8px */
  --spacing-md: calc(var(--spacing-unit) * 4);   /* 16px */
  --spacing-lg: calc(var(--spacing-unit) * 6);   /* 24px */
  --spacing-xl: calc(var(--spacing-unit) * 8);   /* 32px */
  --spacing-2xl: calc(var(--spacing-unit) * 12); /* 48px */

  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.25s ease-out;
  --transition-slow: 0.4s ease-out;

  --font-sans: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max-content-width: 1200px;
}

/* 基础样式重置 & 默认字体 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth; /* 平滑滚动 */
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6; /* 增加行高 */
  color: var(--text-primary);
  background-color: var(--bg-main);
  overflow-x: hidden; /* 防止意外横向滚动 */
}

a {
  color: var(--sjtu-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--sjtu-blue-dark);
  text-decoration: underline; /* 悬停时加下划线 */
}

ul, ol { list-style: none; }
button { background: none; border: none; cursor: pointer; font-family: inherit; }
textarea { font-family: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* 动画 */
@keyframes fadeInAnimation {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
}

@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}