.ai-button:hover .ai-label {
  opacity: 1;
  animation: typing 1s steps(20) forwards,
    blink 0.7s infinite step-end alternate;
  border-right: 2px solid #fff;
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 190px;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

#ai-overlay.open .sidebar {
  transform: translateX(0);
  opacity: 1;
}

#ai-overlay.open .chat-area {
  transform: translateX(0);
  opacity: 1;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBlink {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

textarea.ai-textarea:focus {
  --tw-ring-color: transparent !important;
  border-color: transparent !important;
  outline: none !important;
}

.prose pre {
  white-space: pre-wrap;
}

.prose code:not(pre code)::before,
.prose code:not(pre code)::after {
  content: '' !important;
}

.prose code:not(pre code) {
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 0.25rem;
  padding: 0.125rem 0.3rem;
  font-size: 0.875em;
}