/* Custom animations and utilities */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.suggestion-card {
  animation: slideIn 0.3s ease-out;
}

.fade-in {
  animation: fadeIn 0.2s ease-in;
}

/* Custom scrollbar for code view */
.code-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.code-container::-webkit-scrollbar-track {
  background: #374151;
}

.code-container::-webkit-scrollbar-thumb {
  background: #6B7280;
  border-radius: 4px;
}

.code-container::-webkit-scrollbar-thumb:hover {
  background: #9CA3AF;
}

/* SVG preview styling */
.svg-preview svg {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
}

/* History thumbnails */
.history-thumbnail svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Loading spinner */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Focus states */
textarea:focus,
input:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Button hover effects */
button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
  
  .flex-wrap .flex-1 {
    min-width: 100%;
  }
}

/* Enhanced visual feedback */
.border-blue-300 {
  border-color: #93c5fd;
}

.bg-blue-50:hover {
  background-color: #dbeafe;
}

/* Code syntax highlighting simulation */
.code-highlight {
  color: #10b981;
}

.code-tag {
  color: #f59e0b;
}

.code-attr {
  color: #8b5cf6;
}