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

/* 原始CSS变量 */
:root {
  --tech-blue: #4A90E2;
  --warm-orange: #F5A623;
  --white: #FFFFFF;
  --light-gray: #F7F8FA;
  --text-dark: #333333;
  --text-medium: #888888;
}

/* 全局样式 */
@layer base {
  html {
    font-family: 'Noto Sans SC', system-ui, sans-serif;
  }
  
  body {
    @apply text-gray-900 bg-gray-50;
    font-family: 'Noto Sans SC', sans-serif;
  }
}

@layer components {
  /* 自定义组件样式 */
  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
  }
  
  .input-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
  }

  /* 原始样式类 */
  .bg-tech-blue { background-color: var(--tech-blue); }
  .bg-warm-orange { background-color: var(--warm-orange); }
  .bg-light-gray { background-color: var(--light-gray); }
  .text-tech-blue { color: var(--tech-blue); }
  .text-text-dark { color: var(--text-dark); }
  .text-text-medium { color: var(--text-medium); }
  .border-tech-blue { border-color: var(--tech-blue); }

  /* Header滚动样式 */
  #main-header.scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border-bottom-color: #e5e7eb;
  }

  /* 功能卡片样式 */
  .feature-card-bg {
    background-color: var(--white);
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .feature-card-bg:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  .feature-card-image-container {
    background-color: #eef5fe;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M-10 10 C 20 20, 40 0, 60 10 S 100 0, 120 10" stroke="%234A90E2" fill="none" stroke-width="2" stroke-opacity="0.2"/></svg>');
    background-size: 50px;
    background-repeat: repeat;
  }

  /* 动画样式 */
  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
    opacity: 0;
  }

  .scroll-target {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .scroll-target.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* 波浪动画 */
  .wave {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTQ0MCAxNDciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHRpdGxlPmdyb3VwPC90aXRsZT48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBpZD0iQ29tcG9uZW50LS0tV2F2ZS1Cb3R0b20iIGZpbGw9IiM0QTkwRTIiPjxwYXRoIGQ9Ik0wLDc0LjgzMjk0MTIgQzM2MCw3NC44MzI5NDEyIDM2MCwxNDcgNzIwLDE0NyBDMTA4MCwxNDcgMTA4MCw3NC44MzI5NDEyIDE0NDAsNzQuODMyOTQxMiBMMTQ0MCwxNDcgTDAsMTQ3IEwwLDc0LjgzMjk0MTIgWiIgaWQ9IldhdmUiIG9wYWNpdHk9IjAuMSI+PC9wYXRoPjwvZz48L2c+PC9zdmc+);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 147px;
    animation: wave 15s linear infinite;
  }

  .wave:nth-of-type(2) {
    animation-direction: reverse;
    animation-duration: 20s;
    opacity: 0.8;
  }

  .wave:nth-of-type(3) {
    animation-duration: 25s;
    opacity: 0.5;
  }

  /* 聊天消息样式 */
  #chat-messages {
    scrollbar-width: thin;
    scrollbar-color: var(--tech-blue) var(--light-gray);
  }

  #chat-messages::-webkit-scrollbar {
    width: 6px;
  }

  #chat-messages::-webkit-scrollbar-track {
    background: var(--light-gray);
  }

  #chat-messages::-webkit-scrollbar-thumb {
    background-color: var(--tech-blue);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  .message-animate {
    animation: message-fade-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    transform: translateY(10px);
  }

  /* 模态框样式 */
  #login-modal:not(.hidden) {
    animation: modal-fade-in 0.2s ease-out forwards;
  }

  #login-modal:not(.hidden) > div {
    animation: modal-scale-up 0.2s ease-out forwards;
  }

  #topic-detail-modal.hidden {
    display: none;
  }
}

@layer utilities {
  /* 自定义工具类 */
  .text-gradient {
    @apply bg-gradient-to-r from-primary-600 to-purple-600 bg-clip-text text-transparent;
  }
  
  .shadow-soft {
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
  }
}

/* 关键帧动画 */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wave {
  0% { transform: translateX(0); }
  50% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes message-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-scale-up {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
} 