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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
body {
  background-color: #f9fafb; /* Light background */
}

body.dark {
  background-color: #111827; /* Dark background */
}

.grid-pattern {
  position: relative;
  background-image:
    linear-gradient(to right, rgba(0, 0, 255, 0.2) 1px, transparent 1px), /* Vertical grid lines */
    linear-gradient(to bottom, rgba(0, 0, 255, 0.2) 1px, transparent 1px); /* Horizontal grid lines */
  background-size: 40px 40px; /* Adjust grid size here */
}

.dark .grid-pattern {
  background-image:
    linear-gradient(to right, rgba(59, 130, 246, 0.3) 1px, transparent 1px), /* Vertical grid lines - darker blue for dark mode */
    linear-gradient(to bottom, rgba(59, 130, 246, 0.3) 1px, transparent 1px); /* Horizontal grid lines */
}

.bold-red-line {
  width: 4px; /* Thickness of the bold red line */
  background-color: red; /* Color of the line */
}

.torn-edge {
  /* background: url('https://via.placeholder.com/800x50/FFFFFF/EFEFEF?text=Torn+Edge') no-repeat center top; */
  background-size: cover;
}

/* Message styling */
.user-message {
  background-color: #dbeafe; /* bg-blue-100 */
  border-color: #93c5fd; /* border-blue-300 */
}

.dark .user-message {
  background-color: #1e3a8a; /* dark:bg-blue-900 */
  border-color: #3b82f6; /* dark:border-blue-500 */
}

.ai-message {
  background-color: #f3f4f6; /* bg-gray-100 */
  border-color: #d1d5db; /* border-gray-300 */
}

.dark .ai-message {
  background-color: #374151; /* dark:bg-gray-700 */
  border-color: #6b7280; /* dark:border-gray-500 */
}