@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease;
}

@keyframes aiGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 oklch(0.79 0.13 195.49 / 0.25);
  }

  50% {
    box-shadow: 0 0 24px 4px oklch(0.79 0.13 195.49 / 0.4);
  }
}

.ai-suggestion {
  border-color: oklch(0.79 0.13 195.49);
  background: oklch(0.94 0.04 195.49 / 0.35);
  animation: aiGlow 3s ease-in-out infinite;
}

@keyframes amberGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.1);
  }

  50% {
    box-shadow: 0 0 12px 2px rgba(245, 158, 11, 0.2);
  }
}

.unsaved-indicator {
  animation: amberGlow 3s ease-in-out infinite;
}

/* Gradient fades for messaging interface - subtle 5px fades */
.messaging-gradient-top {
  background: linear-gradient(to bottom, 
    hsl(var(--color-background)) 0%,
    transparent 100%);
}

.messaging-gradient-top-desktop {
  background: linear-gradient(to bottom, 
    hsl(var(--color-background) / 0.4) 0%,
    transparent 100%);
}

.messaging-gradient-bottom {
  background: linear-gradient(to top, 
    hsl(var(--color-background)) 0%,
    transparent 100%);
}

.messaging-gradient-bottom-desktop {
  background: linear-gradient(to top, 
    hsl(var(--color-background) / 0.4) 0%,
    transparent 100%);
}

.messaging-gradient-header {
  background: linear-gradient(to bottom, 
    hsl(var(--color-background)) 0%,
    transparent 100%);
}

.messaging-gradient-header-desktop {
  background: linear-gradient(to bottom, 
    hsl(var(--color-background) / 0.6) 0%,
    transparent 100%);
}