.chat-item {
       @apply flex items-center gap-2 p-3 hover:bg-primary-50 hover:text-primary-700 rounded-lg cursor-pointer transition-all duration-200;
   }
.chat-item.selected {
    @apply bg-primary-50 text-primary-700 border-l-4 border-primary-500;
}
.chat-item-content {
       @apply flex-1 truncate;
   }
.chat-actions {
       @apply flex items-center justify-end opacity-0 transition-opacity duration-200 w-auto gap-1;
   }
.chat-item:hover .chat-actions {
       @apply opacity-100;
   }
.context-menu {
       @apply absolute bg-white border border-gray-100 rounded-lg shadow-lg py-1 z-50 overflow-hidden;
       min-width: 160px;
       animation: fadeIn 0.2s ease-out;
   }
.context-menu-item {
       @apply px-4 py-2 hover:bg-primary-50 hover:text-primary-700 text-sm flex items-center gap-2 transition-colors duration-200;
   }

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

.markdown-body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
      font-size: 16px;
      line-height: 1.6;
      word-wrap: break-word;
      color: #374151;
  }
.markdown-body pre {
      background-color: #f9fafb;
      border-radius: 8px;
      padding: 16px;
      overflow-x: auto;
      border: 1px solid #e5e7eb;
      margin: 16px 0;
  }
.markdown-body code {
      background-color: rgba(175,184,193,0.2);
      border-radius: 4px;
      padding: 0.2em 0.4em;
      font-size: 85%;
      font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  }
.markdown-body pre code {
      background-color: transparent;
      padding: 0;
      font-size: 100%;
      color: #1f2937;
  }
.markdown-body h1,.markdown-body h2,.markdown-body h3,
.markdown-body h4,.markdown-body h5,.markdown-body h6 {
      margin-top: 24px;
      margin-bottom: 16px;
      font-weight: 600;
      line-height: 1.25;
      color: #111827;
  }
.markdown-body h1 { font-size: 2em; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3em; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body ul,.markdown-body ol {
      padding-left: 2em;
      margin: 16px 0;
  }
.markdown-body ul { list-style-type: disc; }
.markdown-body ol { list-style-type: decimal; }
.markdown-body li + li {
      margin-top: 0.25em;
  }
.markdown-body p {
      margin: 16px 0;
  }
.markdown-body a {
      color: #0284c7;
      text-decoration: none;
  }
.markdown-body a:hover {
      text-decoration: underline;
  }
.markdown-body table {
      border-spacing: 0;
      border-collapse: collapse;
      margin: 16px 0;
      width: 100%;
      overflow: auto;
  }
.markdown-body table th,.markdown-body table td {
      padding: 8px 16px;
      border: 1px solid #e5e7eb;
  }
.markdown-body table th {
      font-weight: 600;
      background-color: #f9fafb;
  }
.markdown-body table tr:nth-child(2n) {
      background-color: #f9fafb;
  }
.markdown-body blockquote {
      padding: 0 1em;
      color: #6b7280;
      border-left: 0.25em solid #d1d5db;
      margin: 16px 0;
  }
.chat-actions button {
      @apply p-1.5 rounded transition-colors duration-200 text-sm;
  }
  
  /* 消息样式优化 */
  #chatArea .markdown-body {
      @apply rounded-xl shadow-sm border border-gray-100;
      transition: all 0.2s ease-out;
  }
  
  #chatArea .markdown-body:hover {
      @apply shadow-md;
  }
  
  /* 用户消息和AI消息样式区分 */
  #chatArea .markdown-body:not(.bg-gray-100) {
      @apply bg-primary-50 border-primary-100;
  }
  
  /* 复制按钮样式优化 */
  #chatArea .markdown-body button {
      @apply bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-md px-2 py-1 text-xs shadow-sm opacity-0 transition-opacity duration-200;
  }
  
  #chatArea .markdown-body:hover button {
      @apply opacity-100;
  }
  
  /* 下拉菜单过渡动画 */
  #uploadMenu {
      transition: all 0.2s ease-out;
      transform-origin: top right;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }

  #uploadMenu a {
      transition: all 0.2s ease;
  }
  
  /* 响应式设计优化 */
  @media (max-width: 768px) {
      #sidebar {
          @apply fixed z-50 h-full;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      }
      
      .chat-actions {
          @apply opacity-100;
      }
  }