/* Tailwind CSS 配置 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Tailwind 自定义配置 - 注意：在独立CSS文件中，Tailwind配置应在HTML文件中通过JavaScript设置 */

/* 自定义工具类 */
@layer utilities {
  .transition-custom {
    @apply transition-all duration-300 ease-in-out;
  }
  
  .tab-active {
    @apply text-amber-700 border-b-2 border-amber-600;
  }
  
  .tab-inactive {
    @apply text-gray-500 border-b-2 border-transparent hover:text-amber-600/80 hover:border-amber-600/40;
  }
  
  /* 中国风的渐变背景 */
  .gradient-bg {
    @apply bg-gradient-to-br from-amber-50 via-white to-amber-50;
  }
  
  /* 中国风的卡片阴影 */
  .card-shadow {
    @apply shadow-lg hover:shadow-xl transition-custom border border-amber-100;
  }
  
  /* 中国风的按钮效果 */
  .btn-chinese {
    @apply relative overflow-hidden group border border-amber-200;
  }
  
  .btn-chinese::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: all 0.5s ease;
  }
  
  .btn-chinese:hover::before {
    left: 100%;
  }
  
  /* 自定义滚动条样式 */
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    @apply bg-amber-50;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    @apply bg-amber-600/50 rounded-full hover:bg-amber-600/70 transition-custom;
  }
  
  /* 中国风动画效果 */
  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 5px rgba(180, 83, 9, 0.3);
    }
    50% {
      box-shadow: 0 0 20px rgba(180, 83, 9, 0.6);
    }
  }
  
  .animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }
  
  /* 中国风渐变背景 */
  .bg-chinese-gradient {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 25%, #fcd34d 50%, #f59e0b 75%, #d97706 100%);
    background-size: 200% 200%;
    animation: gradient-shift 10s ease infinite;
  }
  
  @keyframes gradient-shift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  /* 中国风卷轴效果 */
  .scroll-effect {
    position: relative;
    background-color: #fffbeb;
    box-shadow: 0 0 15px rgba(180, 83, 9, 0.1);
  }
  
  .scroll-effect::before,
  .scroll-effect::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 15px;
    background: repeating-linear-gradient(
      90deg,
      #d97706,
      #d97706 2px,
      #b45309 2px,
      #b45309 4px
    );
    z-index: 1;
  }
  
  .scroll-effect::before {
    top: 0;
    border-top: 2px solid #92400e;
  }
  
  .scroll-effect::after {
    bottom: 0;
    border-bottom: 2px solid #92400e;
  }
}

/* 全局响应式调整 */
@media (max-width: 768px) {
  body {
    @apply text-sm;
  }
  
  .container {
    @apply px-4;
  }
}

/* 主容器样式优化 */
#app {
  @apply min-h-screen bg-gradient-to-br from-amber-50 via-white to-amber-50;
  background-attachment: fixed;
}

/* 中国风背景装饰 */
#app::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    url('https://www.transparenttextures.com/patterns/chinese-paper.png'),
    radial-gradient(circle at 20% 30%, rgba(180, 83, 9, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(180, 83, 9, 0.05) 0%, transparent 50%);
  z-index: -1;
  animation: float 20s ease-in-out infinite;
}

/* 浮动动画 */
@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-20px, -20px) rotate(1deg);
  }
  50% {
    transform: translate(0, 20px) rotate(0deg);
  }
  75% {
    transform: translate(20px, -20px) rotate(-1deg);
  }
}

/* 卡片和表单元素优化 */
.card {
  @apply bg-white/90 backdrop-blur-sm rounded-xl shadow-md transition-custom hover:shadow-lg border border-amber-200;
  position: relative;
  overflow: hidden;
}

/* 卡片装饰效果 */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  @apply bg-gradient-to-r from-amber-600 to-amber-700;
}

/* 导航栏背景优化 */
.navbar {
  @apply bg-gradient-to-r from-amber-900 to-amber-800 text-white shadow-md;
}

/* 页脚背景优化 */
footer {
  @apply bg-gradient-to-r from-amber-900 to-amber-800 text-white shadow-lg;
  position: relative;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  @apply bg-gradient-to-r from-amber-600 to-amber-700;
}

/* 结果区域背景优化 */
#result-area {
  @apply bg-gradient-to-br from-white/90 to-amber-50 border border-amber-200;
}

/* 标签页容器背景 */
.tabs-container {
  @apply bg-white/90 backdrop-blur-sm rounded-t-xl shadow-sm border border-amber-100;
}

/* 输入区域背景优化 */
.input-section {
  @apply bg-white/95 backdrop-blur-sm rounded-lg shadow-sm border border-amber-100;
}

/* 按钮样式优化 */
button {
  @apply transition-custom;
}

/* 主要操作按钮样式 */
.btn-primary {
  @apply bg-gradient-to-r from-amber-600 to-amber-700 text-white px-6 py-3 rounded-lg font-medium shadow-md transition-custom hover:shadow-lg hover:from-amber-600/90 hover:to-amber-700/90 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 btn-chinese;
}

/* 次要按钮样式 */
.btn-secondary {
  @apply bg-white text-amber-700 border border-amber-600/30 px-5 py-2 rounded-lg font-medium shadow-sm transition-custom hover:shadow-md hover:bg-amber-50 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2;
}

/* 标签样式 */
.tag {
  @apply px-3 py-1 bg-gradient-to-r from-amber-100 to-amber-200 text-amber-800 rounded-full text-sm mr-2 mb-2 transition-custom hover:from-amber-200 hover:to-amber-300 cursor-pointer transform hover:scale-105;
}

/* 标签页样式 */
.tab-inactive {
  @apply px-4 py-2 border-b-2 border-transparent text-gray-500 hover:text-amber-600/80 hover:border-amber-600/40 transition-custom cursor-pointer;
}

.tab-active {
  @apply px-4 py-2 border-b-2 border-amber-600 text-amber-700 font-medium transition-custom cursor-pointer;
}

/* 输入框样式优化 */
input[type="text"],
textarea {
  @apply border border-amber-200 focus:border-amber-600 focus:ring-2 focus:ring-amber-600/20 transition-custom rounded-lg px-4 py-2 bg-white/90;
}

/* 上传区域样式优化 */
.upload-area {
  @apply border-2 border-dashed border-amber-600/30 bg-gradient-to-br from-white to-amber-50 rounded-lg p-6 text-center transition-custom hover:border-amber-600/60 hover:from-amber-50 hover:to-amber-100;
  position: relative;
  overflow: hidden;
}

.upload-area::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(245, 158, 11, 0.1) 50%, transparent 60%);
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
}

.upload-area:hover::before {
  opacity: 1;
  transform: rotate(45deg) translate(20px, 20px);
}

/* 中国风背景装饰 */
.decorative-shape {
  position: absolute;
  z-index: -1;
  opacity: 0.3;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 中国传统云纹装饰 */
.shape-1 {
  top: 10%;
  right: 5%;
  width: 150px;
  height: 100px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" fill="%23b45309" opacity="0.1"><path d="M10,50 Q30,20 50,50 T90,50 T130,50 T170,50 T190,50 Q170,80 150,50 T110,50 T70,50 T30,50 T10,50"/></svg>');
  animation: float 15s ease-in-out infinite;
}

/* 中国传统花纹装饰 */
.shape-2 {
  bottom: 10%;
  left: 5%;
  width: 180px;
  height: 180px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="%23b45309" opacity="0.1"><path d="M100,20 Q140,20 160,60 T180,100 T160,140 T100,180 T40,140 T20,100 T40,60 T100,20 Z M100,50 Q120,50 130,70 T140,100 T130,130 T100,150 T70,130 T60,100 T70,70 T100,50 Z"/></svg>');
  animation: float 18s ease-in-out infinite reverse;
}

/* 中国传统墨点装饰 */
.shape-3 {
  top: 30%;
  left: 8%;
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="%23b45309" stroke-width="2" opacity="0.1"/><circle cx="30" cy="30" r="10" fill="%23b45309" opacity="0.05"/><circle cx="70" cy="40" r="15" fill="%23b45309" opacity="0.05"/><circle cx="40" cy="70" r="12" fill="%23b45309" opacity="0.05"/></svg>');
  animation: float 12s ease-in-out infinite;
}

@keyframes morph {
  0%, 100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
  }
}

/* 图片预览样式优化 */
.preview-item {
  @apply relative m-2 inline-block rounded-lg overflow-hidden shadow-md transition-custom hover:shadow-lg hover:scale-[1.02] bg-white/90 backdrop-blur-sm;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

/* 按钮背景增强 */
.btn-primary {
  background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.btn-secondary {
  background: linear-gradient(135deg, white 0%, rgba(249, 115, 22, 0.05) 100%);
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.1);
}

/* 预览图片样式优化 */
.preview-item {
  @apply transition-custom hover:shadow-lg hover:scale-[1.02];
}

/* Markdown 样式优化 */
.markdown-content {
  @apply text-gray-700 space-y-6 leading-relaxed tracking-wide;
}

/* 标题样式优化 */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  @apply font-bold text-amber-800 mt-10 mb-6 transition-custom;
}

.markdown-content h1 {
  @apply text-3xl md:text-3.5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-amber-700 mb-7;
}

/* 修改后的作文模块中的标题居中 */
#modified-content h1 {
  @apply text-center text-3xl md:text-3.5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-amber-700 mb-7;
}

.markdown-content h2 {
  @apply text-2xl md:text-2.5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-700 to-amber-600 mb-7 pl-4;
}

/* 重点优化H3标题，因为评价结果主要使用这个层级 */
.markdown-content h3 {
  @apply text-xl md:text-2xl text-white bg-gradient-to-r from-amber-600 to-amber-700 px-5 py-3 rounded-lg mb-6 shadow-md transition-custom hover:shadow-xl;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.markdown-content h3::after {
  content: '';
  position: absolute;
  right: -20px;
  top: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.2), transparent);
  transform: skewX(-15deg);
  transition: right 0.3s ease;
}

.markdown-content h3:hover::after {
  right: 100%;
}

.markdown-content h4 {
  @apply text-lg md:text-xl text-dark/90 bg-gradient-to-r from-primary/10 to-secondary/10 px-4 py-2 rounded-lg;
}

.markdown-content h5 {
  @apply text-base md:text-lg text-dark/80 text-primary/90;
}

.markdown-content h6 {
  @apply text-sm md:text-base text-dark/70 font-medium text-secondary/90;
}

/* 段落样式优化 */
.markdown-content p {
  @apply text-gray-700 leading-relaxed mb-6 transition-custom;
  text-indent: 2em; /* 首行缩进 */
  line-height: 1.8; /* 增加行高提高可读性 */
  position: relative;
}

.markdown-content p::first-letter {
  @apply text-amber-600 font-bold text-xl;
}

/* 列表样式优化 */
.markdown-content ul,
.markdown-content ol {
  @apply pl-10 mb-8 space-y-4;
  padding-left: clamp(2rem, 5vw, 3rem); /* 响应式缩进 */
}

.markdown-content ul {
  @apply list-disc;
}

.markdown-content ul ul {
  @apply list-circle;
}

.markdown-content ul ul ul {
  @apply list-square;
}

.markdown-content ol {
  @apply list-decimal;
}

/* 优化列表项样式 */
.markdown-content li {
  @apply leading-relaxed text-gray-700 relative pl-2 transition-custom hover:text-amber-600/90;
  line-height: 1.7;
}

.markdown-content li::marker {
  @apply text-amber-600 font-semibold text-lg; /* 增大列表标记 */
}

/* 为列表项添加额外的视觉效果 */
.markdown-content > ul > li,
.markdown-content > ol > li {
  position: relative;
}

.markdown-content > ul > li::before,
.markdown-content > ol > li::before {
  content: '✦';
  position: absolute;
  left: -2rem;
  top: 0.5rem;
  width: 0.8rem;
  height: 0.8rem;
  opacity: 0;
  transition: all 0.3s ease;
  font-size: 0.8rem;
  color: #d97706;
}

.markdown-content > ul > li:hover::before,
.markdown-content > ol > li:hover::before {
  opacity: 1;
  left: -1.8rem;
}

/* 引用样式优化 */
.markdown-content blockquote {
  @apply border-l-4 border-amber-600 pl-5 italic text-gray-600 my-6 py-3 bg-gradient-to-r from-amber-100 to-transparent rounded-r-lg shadow-sm transition-custom hover:shadow-md;
}

.markdown-content blockquote p {
  @apply text-indent-0;
}

/* 代码块样式优化 */
.markdown-content pre {
  @apply text-gray-800 bg-gradient-to-br from-amber-50 to-white border border-amber-200 rounded-lg p-4 mb-6 overflow-x-auto shadow-sm transition-custom hover:shadow-md;
}

.markdown-content code {
  @apply font-mono text-sm;
}

.markdown-content pre code {
  @apply text-gray-800/90;
}

/* 行内代码样式 */
.markdown-content p code,
.markdown-content li code {
  @apply bg-gradient-to-r from-amber-100 to-amber-200 text-amber-800 px-1.5 py-0.5 rounded-md text-sm transition-custom hover:from-amber-200 hover:to-amber-300;
}

/* 加粗和斜体 */
.markdown-content strong {
  @apply font-semibold text-gray-800;
}

.markdown-content em {
  @apply italic text-gray-600;
}

/* 分隔线 */
.markdown-content hr {
  @apply border-amber-200 my-8;
}

/* 表格样式 */
.markdown-content table {
  @apply w-full border-collapse my-6 text-sm;
}

.markdown-content th,
.markdown-content td {
  @apply border border-amber-200 px-4 py-3 text-left;
}

.markdown-content th {
  @apply bg-amber-100 font-semibold text-amber-800;
}

.markdown-content tr:nth-child(even) {
  @apply bg-amber-50;
}

.markdown-content tr:hover {
  @apply bg-amber-100/50 transition-custom;
}

/* 链接样式 */
.markdown-content a {
  @apply text-amber-700 hover:text-amber-600 underline decoration-amber-600/50 underline-offset-2 transition-custom;
  position: relative;
}

.markdown-content a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  transition: width 0.3s ease;
}

.markdown-content a:hover::after {
  width: 100%;
}

/* 图片样式 */
.markdown-content img {
  @apply rounded-lg shadow-md my-6 transition-custom hover:shadow-lg max-w-full mx-auto block;
}

/* 强调元素 */
.markdown-content strong {
  @apply font-semibold text-dark;
}

.markdown-content .highlight {
  @apply bg-yellow-100 px-1 py-0.5 rounded;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .markdown-content {
    @apply space-y-4;
  }
  
  .markdown-content h1 {
    @apply text-2.5xl;
  }
  
  .markdown-content h2 {
    @apply text-2xl;
  }
  
  .markdown-content h3 {
    @apply text-xl;
  }
  
  .markdown-content p {
    @apply text-indent-0; /* 在移动设备上移除首行缩进 */
  }
}