:root {
  --accent-color: oklch(0.6201 0.156454 53.4649);
}

/* Drag and Drop Upload Styles */
.drag-over {
  border-color: #3b82f6 !important;
  background-color: #dbeafe !important;
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  transition: all 0.2s ease-in-out;
}

.drag-over.border-purple-300 {
  border-color: #9333ea !important;
  background-color: #e9d5ff !important;
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
}

/* Upload error animations */
.upload-error {
  animation: slideIn 0.3s ease-out;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* File preview styles */
.file-preview img,
.file-preview video {
  transition: transform 0.2s ease-in-out;
}

.file-preview img:hover,
.file-preview video:hover {
  transform: scale(1.05);
}

/* Comment Markdown Styles */
.comment-content {
  line-height: 1.5;
}

.comment-content strong {
  font-weight: 600;
  color: #374151;
}

.comment-content em {
  font-style: italic;
  color: #4b5563;
}

.comment-content code {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
  font-size: 0.875em;
  color: #dc2626;
}

.hashtag,
.user-mention {
  color: var(--accent-color);
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.spoiler {
  background-color: #374151;
  color: #374151;
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease-in-out;
}

.spoiler:hover {
  background-color: #4b5563;
  color: #f9fafb;
}

.spoiler.revealed {
  background-color: #f3f4f6;
  color: #374151;
  cursor: default;
}