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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.75rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer components {
  /* Glass morphism effect */
  .glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .glass-dark {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Gradient backgrounds */
  .gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  .gradient-bg-light {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }

  /* Custom scrollbar */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    background-color: hsl(var(--muted));
    border-radius: 9999px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: hsla(var(--muted-foreground), 0.3);
    border-radius: 9999px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: hsla(var(--muted-foreground), 0.5);
  }

  /* Animation classes */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }
  
  .animate-scale-in {
    animation: scaleIn 0.2s ease-out;
  }

  /* Text gradient */
  .text-gradient {
    background: linear-gradient(to right, hsl(var(--primary)), #9333ea);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  /* Card styles */
  .card {
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border));
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  
  /* Tailwind CSS compatibility classes */
  .bg-background {
    background-color: hsl(var(--background));
  }
  
  .text-foreground {
    color: hsl(var(--foreground));
  }
  
  .bg-card {
    background-color: hsl(var(--card));
  }
  
  .text-card-foreground {
    color: hsl(var(--card-foreground));
  }
  
  .bg-primary {
    background-color: hsl(var(--primary));
  }
  
  .text-primary {
    color: hsl(var(--primary));
  }
  
  .text-primary-foreground {
    color: hsl(var(--primary-foreground));
  }
  
  .bg-secondary {
    background-color: hsl(var(--secondary));
  }
  
  .text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
  }
  
  .text-muted-foreground {
    color: hsl(var(--muted-foreground));
  }
  
  .bg-muted {
    background-color: hsl(var(--muted));
  }
  
  .text-destructive {
    color: hsl(var(--destructive));
  }
  
  .bg-destructive {
    background-color: hsl(var(--destructive));
  }
  
  .text-destructive-foreground {
    color: hsl(var(--destructive-foreground));
  }
  
  .border-input {
    border-color: hsl(var(--input));
  }
  
  .border-border {
    border-color: hsl(var(--border));
  }
  
  .border-destructive {
    border-color: hsl(var(--destructive));
  }
  
  .bg-accent {
    background-color: hsl(var(--accent));
  }
  
  .text-accent-foreground {
    color: hsl(var(--accent-foreground));
  }
  
  .ring-ring {
    --tw-ring-color: hsl(var(--ring));
  }
  
  .ring-offset-background {
    --tw-ring-offset-color: hsl(var(--background));
  }
  
  .card-hover {
    transition: all 0.3s ease;
  }
  
  .card-hover:hover {
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: scale(1.02);
  }

  /* Line clamp utilities */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Markdown Editor Dark Theme Styles */
  .w-md-editor {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 1px solid #374151 !important;
    border-radius: 0.5rem !important;
  }

  .w-md-editor-toolbar {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border-bottom: 1px solid #374151 !important;
  }

  .w-md-editor-toolbar-item button {
    color: #e2e8f0 !important;
    background: transparent !important;
    border: none !important;
  }

  .w-md-editor-toolbar-item button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
  }

  .w-md-editor-text-container,
  .w-md-editor-text-input,
  .w-md-editor-text-textarea {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    color: #e2e8f0 !important;
    border: none !important;
  }

  .w-md-editor-text-textarea::placeholder {
    color: #9ca3af !important;
  }

  /* 重要：为编辑器文本区域添加选中效果 */
  .w-md-editor-text-textarea::selection {
    background: #3b82f6 !important;
    color: #ffffff !important;
  }

  .w-md-editor-text-textarea::-moz-selection {
    background: #3b82f6 !important;
    color: #ffffff !important;
  }

  /* 为整个编辑器容器添加选中效果 */
  .w-md-editor ::selection {
    background: #3b82f6 !important;
    color: #ffffff !important;
  }

  .w-md-editor ::-moz-selection {
    background: #3b82f6 !important;
    color: #ffffff !important;
  }

  /* 更强的选择器确保覆盖默认样式 */
  .custom-md-editor .w-md-editor-text-textarea::selection,
  .custom-md-editor textarea::selection {
    background: #3b82f6 !important;
    color: #ffffff !important;
  }

  .custom-md-editor .w-md-editor-text-textarea::-moz-selection,
  .custom-md-editor textarea::-moz-selection {
    background: #3b82f6 !important;
    color: #ffffff !important;
  }

  /* 确保所有文本输入区域都有选中效果 */
  .custom-md-editor textarea,
  .custom-md-editor .w-md-editor-text-input,
  .custom-md-editor .w-md-editor-text-container textarea {
    caret-color: #60a5fa !important;
  }

  .custom-md-editor textarea::selection,
  .custom-md-editor .w-md-editor-text-input::selection,
  .custom-md-editor .w-md-editor-text-container textarea::selection {
    background: #3b82f6 !important;
    color: #ffffff !important;
  }

  .custom-md-editor textarea::-moz-selection,
  .custom-md-editor .w-md-editor-text-input::-moz-selection,
  .custom-md-editor .w-md-editor-text-container textarea::-moz-selection {
    background: #3b82f6 !important;
    color: #ffffff !important;
  }

  /* 根据文档，使用正确的类名选择器 */
  .w-md-editor-text-pre::selection,
  .w-md-editor-text-input::selection,
  .w-md-editor-text::selection {
    background: #3b82f6 !important;
    color: #ffffff !important;
  }

  .w-md-editor-text-pre::-moz-selection,
  .w-md-editor-text-input::-moz-selection,
  .w-md-editor-text::-moz-selection {
    background: #3b82f6 !important;
    color: #ffffff !important;
  }

  /* 更具体的选择器 */
  .custom-md-editor .w-md-editor-text-pre::selection,
  .custom-md-editor .w-md-editor-text-input::selection,
  .custom-md-editor .w-md-editor-text::selection {
    background: #3b82f6 !important;
    color: #ffffff !important;
  }

  .custom-md-editor .w-md-editor-text-pre::-moz-selection,
  .custom-md-editor .w-md-editor-text-input::-moz-selection,
  .custom-md-editor .w-md-editor-text::-moz-selection {
    background: #3b82f6 !important;
    color: #ffffff !important;
  }

  .w-md-editor-preview {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    color: #e2e8f0 !important;
    border-left: 1px solid #374151 !important;
  }

  .w-md-editor-preview h1,
  .w-md-editor-preview h2,
  .w-md-editor-preview h3,
  .w-md-editor-preview h4,
  .w-md-editor-preview h5,
  .w-md-editor-preview h6 {
    color: #f8fafc !important;
  }

  .w-md-editor-preview code {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fbbf24 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
  }

  .w-md-editor-preview pre {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #374151 !important;
    border-radius: 0.375rem !important;
  }

  .w-md-editor-preview blockquote {
    border-left: 4px solid #6366f1 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #d1d5db !important;
  }

  .w-md-editor-preview a {
    color: #60a5fa !important;
  }

  .w-md-editor-preview a:hover {
    color: #93c5fd !important;
  }
}

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

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Loading spinner */
.spinner {
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Focus styles for accessibility */
.focus-ring {
  outline: none;
}

.focus-ring:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Text selection - 全局文本选中样式更新 */
::selection {
  background-color: #3b82f6;
  color: #ffffff;
}

::-moz-selection {
  background-color: #3b82f6;
  color: #ffffff;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Toast 样式优化 */
.react-hot-toast {
  z-index: 9999 !important;
}

/* Toast 容器样式 */
.react-hot-toast > div {
  animation: slideInDown 0.3s ease-out !important;
}

.react-hot-toast > div[data-visible="false"] {
  animation: slideOutUp 0.2s ease-in !important;
}

/* 针对深色模式的 toast 样式调整 */
.dark .react-hot-toast div[role="status"] {
  background: rgba(15, 23, 42, 0.9) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid rgba(71, 85, 105, 0.5) !important;
  backdrop-filter: blur(16px) !important;
}

/* 深色模式下的错误 toast */
.dark .react-hot-toast div[role="status"][data-type="error"] {
  background: rgba(127, 29, 29, 0.2) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #fecaca !important;
}

/* 深色模式下的成功 toast */
.dark .react-hot-toast div[role="status"][data-type="success"] {
  background: rgba(20, 83, 45, 0.2) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  color: #bbf7d0 !important;
}

/* 深色模式下的加载 toast */
.dark .react-hot-toast div[role="status"][data-type="loading"] {
  background: rgba(30, 58, 138, 0.2) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  color: #bfdbfe !important;
}

/* 确保 toast 在移动设备上的显示效果 */
@media (max-width: 640px) {
  .react-hot-toast div[role="status"] {
    max-width: calc(100vw - 32px) !important;
    margin: 0 16px !important;
    font-size: 13px !important;
    padding: 14px 16px !important;
  }
}

/* Toast 动画 */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

/* Mobile optimizations */
@media (max-width: 768px) {
  .mobile-padding {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .mobile-text {
    font-size: 0.875rem;
  }
} 