/* ── IdeaWall Custom Styles ───────────────────────────────────────────────── */

/* Masonry grid using CSS columns */
.masonry-grid {
  columns: 1;
  column-gap: 1.25rem;
}

@media (min-width: 640px) {
  .masonry-grid { columns: 2; }
}

@media (min-width: 1024px) {
  .masonry-grid { columns: 3; }
}

@media (min-width: 1280px) {
  .masonry-grid { columns: 4; }
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

/* Idea card */
.idea-card {
  border-radius: 1rem;
  background: white;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: block;
}

.dark .idea-card {
  background: #1e293b;
  border-color: #334155;
}

.idea-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(100, 87, 249, 0.12);
  border-color: #a3a0ff;
}

.dark .idea-card:hover {
  box-shadow: 0 12px 40px rgba(100, 87, 249, 0.25);
  border-color: #6457f9;
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Toast notifications */
.toast {
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  animation: slideIn 0.25s ease;
  max-width: 320px;
}

.toast-success { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.toast-error   { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.toast-info    { background: #e0e7ff; color: #4338ca; border: 1px solid #c7d2fe; }

.dark .toast-success { background: #14532d; color: #86efac; border-color: #166534; }
.dark .toast-error   { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
.dark .toast-info    { background: #1e1b4b; color: #a5b4fc; border-color: #312e81; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

.toast.hiding {
  animation: fadeOut 0.3s ease forwards;
}

/* Smooth transitions */
* { transition-property: color, background-color, border-color, box-shadow; }
img, svg { transition-property: transform, opacity; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* Focus ring */
:focus-visible {
  outline: 2px solid #6457f9;
  outline-offset: 2px;
}

/* Avatar fallback */
img[src=""] { display: none; }

/* ── Markdown / Prose rendering ─────────────────────────────────────────── */
#ideaDescription h1,#ideaDescription h2,#ideaDescription h3 {
  font-weight: 800;
  margin: 1rem 0 0.5rem;
}
#ideaDescription h1 { font-size: 1.25rem; }
#ideaDescription h2 { font-size: 1.1rem; }
#ideaDescription h3 { font-size: 1rem; }
#ideaDescription p  { margin-bottom: 0.75rem; }
#ideaDescription ul,#ideaDescription ol { padding-left: 1.5rem; margin-bottom: 0.75rem; }
#ideaDescription ul { list-style-type: disc; }
#ideaDescription ol { list-style-type: decimal; }
#ideaDescription li { margin-bottom: 0.25rem; }
#ideaDescription a  { color: #5038e8; text-decoration: underline; }
#ideaDescription code {
  background: #f1f5f9;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.875em;
}
#ideaDescription pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 0.75rem;
  overflow-x: auto;
  margin-bottom: 0.75rem;
}
#ideaDescription blockquote {
  border-left: 3px solid #a3a0ff;
  padding-left: 1rem;
  color: #64748b;
  margin: 0.75rem 0;
}
.dark #ideaDescription code { background: #334155; }
.dark #ideaDescription a    { color: #a3a0ff; }

/* ── EasyMDE editor dark mode ─────────────────────────────────────────────── */
.dark .EasyMDEContainer .CodeMirror {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #475569;
}
.dark .editor-toolbar { background: #1e293b; border-color: #475569; }
.dark .editor-toolbar a { color: #94a3b8 !important; }
.dark .editor-toolbar a:hover, .dark .editor-toolbar a.active { background: #334155 !important; }
.dark .editor-preview { background: #1e293b; color: #e2e8f0; }