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

/*

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

*/
body {
  background-color: #f7f4ff;
}

body.dark, html.dark body {
  background-color: #0b1220;
}

.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;
}

.bg-grid-light {
  background-image:
    linear-gradient(90deg, rgba(139, 92, 246, 0.15) 1px, transparent 1px),
    linear-gradient(0deg, rgba(139, 92, 246, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 72, 153, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(236, 72, 153, 0.08) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 40px 40px, 40px 40px;
  background-color: #f7f4ff;
  background-position: 0 0, 0 0, 0 0, 0 0;
}

.bg-grid-dark {
  background-image:
    linear-gradient(90deg, rgba(139, 92, 246, 0.25) 1px, transparent 1px),
    linear-gradient(0deg, rgba(139, 92, 246, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.15) 1px, transparent 1px),
    linear-gradient(0deg, rgba(167, 139, 250, 0.15) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 40px 40px, 40px 40px;
  background-color: #0b1220;
  background-position: 0 0, 0 0, 0 0, 0 0;
}

.retro-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9));
  border: 2px solid #0f172a;
  box-shadow: 6px 6px 0 #0f172a, 0 0 0 2px #e5e7eb;
  border-radius: 18px;
}

.dark .retro-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.95));
  border: 2px solid #a5b4fc;
  box-shadow: 6px 6px 0 #1e293b, 0 0 0 2px #334155;
}

.retro-chip {
  border: 2px solid #0f172a;
  border-radius: 9999px;
  box-shadow: 3px 3px 0 #0f172a;
}

.dark .retro-chip {
  border-color: #a5b4fc;
  box-shadow: 3px 3px 0 #1e293b;
}

.retro-button {
  border: 2px solid #0f172a;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #0f172a;
  background: linear-gradient(90deg, #fef3c7, #fbcfe8, #bfdbfe);
  color: #0f172a;
}

.retro-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 #0f172a;
}

.dark .retro-button {
  background: linear-gradient(90deg, #f472b6, #818cf8, #60a5fa);
  color: #0b1220;
  border-color: #a5b4fc;
}

.dark .retro-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 #1e293b;
}

.retro-pill {
  border: 2px solid #0f172a;
  border-radius: 9999px;
  background: #fef3c7;
  box-shadow: 3px 3px 0 #0f172a;
}

.dark .retro-pill {
  background: #4338ca;
  border-color: #a5b4fc;
  box-shadow: 3px 3px 0 #1e293b;
  color: #e0e7ff;
}

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

.dark .user-message {
  background-color: #1e40af;
  border-color: #60a5fa;
}

.ai-message {
  background-color: #f3f4f6;
  border-color: #d1d5db;
}

.dark .ai-message {
  background-color: #334155;
  border-color: #64748b;
}