/* ─── Fade-in animation (matches original) ─────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* ─── Loading spinner ───────────────────────────────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

/* ─── Prose-style whitespace for AI output ─────────────────────────── */
.prose-output {
  white-space: pre-wrap;
  line-height: 1.7;
  font-size: 0.875rem;
  color: #404040;
}

/* ─── Active nav item ───────────────────────────────────────────────── */
.nav-item-active {
  background-color: #eff6ff;
  color: #1d4ed8;
}
.nav-item-active svg {
  color: #1d4ed8;
}

/* ─── Sidebar nav item base ─────────────────────────────────────────── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #525252;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
  cursor: pointer;
}
.nav-item:hover:not(.nav-item-active) {
  background-color: #f5f5f5;
  color: #171717;
}

/* ─── Result copy button ────────────────────────────────────────────── */
.copy-btn {
  font-size: 0.875rem;
  font-weight: 500;
  color: #2563eb;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.copy-btn:hover { text-decoration: underline; }

/* ─── Dashed upload area ────────────────────────────────────────────── */
.upload-area {
  border: 2px dashed #d4d4d4;
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s;
}
.upload-area:hover { background-color: #fafafa; }