/* SlideForge Pro - Styles v5.1 */

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

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

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

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

@keyframes slideInDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes zoomIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes zoomOut {
  from { transform: scale(1.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes rotateIn {
  from { transform: rotate(-180deg) scale(0); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}

@keyframes flipX {
  from { transform: perspective(400px) rotateX(90deg); opacity: 0; }
  to { transform: perspective(400px) rotateX(0); opacity: 1; }
}

@keyframes flipY {
  from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
  to { transform: perspective(400px) rotateY(0); opacity: 1; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.animation-fade { animation: fadeIn 0.8s ease-out; }
.animation-slide-left { animation: slideInLeft 0.6s ease-out; }
.animation-slide-right { animation: slideInRight 0.6s ease-out; }
.animation-slide-up { animation: slideInUp 0.6s ease-out; }
.animation-slide-down { animation: slideInDown 0.6s ease-out; }
.animation-zoom { animation: zoomIn 0.5s ease-out; }
.animation-zoom-out { animation: zoomOut 0.5s ease-out; }
.animation-rotate { animation: rotateIn 0.6s ease-out; }
.animation-flip-x { animation: flipX 0.6s ease-out; }
.animation-flip-y { animation: flipY 0.6s ease-out; }
.animation-bounce { animation: bounce 1s ease; }

/* Slide Preview Styles */
.slide-preview { aspect-ratio: 16 / 9; }
.slide-list-item .slide-preview { aspect-ratio: 16 / 9; min-height: 60px; }
.thumbnail-active { border-color: #a855f7 !important; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3); }

/* Loading animations */
.loading-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Sortable */
.sortable-ghost { opacity: 0.4; background: rgba(168, 85, 247, 0.2); }

/* Tab styles */
.tab-active { border-bottom: 2px solid #a855f7; color: #a855f7; }
.edit-tab-active { border-bottom: 2px solid #a855f7; color: #a855f7 !important; }

/* Modal backdrop */
.modal-backdrop { backdrop-filter: blur(4px); }

/* Chat animations */
.chat-message { animation: slideIn 0.3s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Device preview frames */
.device-frame-mobile { width: 375px; max-width: 100%; }
.device-frame-tablet { width: 768px; max-width: 100%; }
.device-frame-desktop { width: 100%; }

/* Glass effect */
.glass-effect { background: rgba(17, 24, 39, 0.8); backdrop-filter: blur(10px); }

/* Typing indicator */
.typing-indicator span { animation: typing 1.4s infinite; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

/* Version history */
.version-history-item { transition: all 0.2s; }
.version-history-item:hover { background: rgba(168, 85, 247, 0.1); }

/* Timeline marker */
.timeline-marker { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #a855f7, #ec4899); }

/* Install prompt */
#install-prompt {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 400px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border-radius: 16px;
  padding: 16px;
  z-index: 100;
  box-shadow: 0 10px 40px rgba(124, 58, 237, 0.3);
}

/* Score colors */
.score-high { color: #10b981; }
.score-medium { color: #f59e0b; }
.score-low { color: #ef4444; }

/* Recording indicator */
.recording-active {
  animation: recordingPulse 1s infinite;
}

@keyframes recordingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1f2937;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Focus states */
input:focus, textarea:focus, select:focus {
  outline: none;
  ring: 2px;
  ring-color: #7c3aed;
}

/* Transitions */
.transition-all {
  transition: all 0.2s ease;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card hover effects */
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(124, 58, 237, 0.2);
}