@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* 极简主义中性色调 */
  --color-background: #fafafa;
  --color-surface: #ffffff;
  --color-border: #e5e5e5;
  --color-divider: #f5f5f5;
  
  /* 文本颜色 */
  --color-text: #171717;
  --color-text-light: #525252;
  --color-text-muted: #737373;
  
  /* 功能色 */
  --color-primary: #262626;
  --color-primary-light: #404040;
  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-error: #ef4444;
  
  /* 间距 */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

body {
  font-family: 'Inter', sans-serif;
  @apply bg-neutral-50 text-neutral-900 overflow-hidden;
  height: 100vh;
}

#root {
  height: 100vh;
  overflow: hidden;
}

.system-node {
  @apply bg-white;
  min-width: 400px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.user-message {
  background: linear-gradient(to bottom, #ffffff, #f9fafb);
  border: 1px solid rgba(226, 232, 240, 0.8);
  font-size: 20px;
}

.assistant-message {
  background: linear-gradient(to bottom, #fafafa, #f5f5f5);
  border: 1px solid rgba(229, 229, 229, 0.7);
  overflow-y: auto;
  max-height: 400px;
  scroll-behavior: smooth;
}

.react-flow__node {
  @apply rounded-lg;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s;
}

.react-flow__node:hover {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.react-flow__handle {
  background: #a3a3a3;
  border: 2px solid white;
}

.node-toolbar {
  @apply opacity-0 transition-opacity duration-200;
}

.react-flow__node:hover .node-toolbar {
  @apply opacity-100;
}

.node-content {
  min-width: 400px;
  max-width: 500px;
  max-height: 600px;
  scroll-behavior: smooth;
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
  border-radius: 0.75rem;
}

/* 头部样式 */
.chat-node-header {
  background: #f5f5f5;
  border-bottom: 1px solid rgba(229, 229, 229, 0.8);
}

.system-node-header {
  background: #f5f5f5;
  border-bottom: 1px solid rgba(229, 229, 229, 0.8);
}

/* 设置面板背景 */
.settings-panel {
  background: #fafafa;
  border-bottom: 1px solid rgba(229, 229, 229, 0.8);
}

/* 按钮样式 */
.gradient-button {
  background: #262626;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.gradient-button:hover {
  background: #404040;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* 发送按钮 */
.send-button {
  @apply text-neutral-600 hover:text-neutral-800;
  transition: all 0.2s;
}

.send-button:hover {
  background-color: rgba(229, 229, 229, 0.5);
}

.send-button:disabled {
  @apply text-neutral-400;
  background-color: transparent;
}

.sidebar-session {
  @apply hover:bg-neutral-100 transition-colors duration-200 cursor-pointer rounded-md;
}

.sidebar-session.active {
  @apply bg-neutral-100 text-neutral-900;
}

.md-editor-preview-wrapper {
  @apply rounded-md overflow-hidden;
}

.md-preview {
  @apply prose prose-blue max-w-none;
  max-width: 100% !important;
  overflow-wrap: break-word;
  word-break: break-word;
}

.md-preview pre, .md-preview code {
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
}

.md-preview table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Prevent scrollbar from taking space */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Gradient text */
.gradient-text {
  @apply text-neutral-800;
}

.sidebar {
  background-color: white;
  opacity: 1 !important;
  backdrop-filter: none !important;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(147, 147, 153, 0.5);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/* 主要按钮 */
.gradient-primary-button {
  background: #262626;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.gradient-primary-button:hover {
  background: #404040;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* 强调按钮 */
.gradient-accent-button {
  background: #262626;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.gradient-accent-button:hover {
  background: #404040;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* 轮廓按钮 - 用于文件上传等次要按钮 */
.gradient-outline-button {
  background: white;
  border: 1px solid #e5e5e5;
  transition: all 0.2s;
}

.gradient-outline-button:hover {
  background: #f5f5f5;
}
