style.css

/* Custom styles for enhanced UI */
* {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}

*::-webkit-scrollbar {
width: 8px;
}

*::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
background-color: #cbd5e1;
border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
background-color: #94a3b8;
}

/* Smooth transitions */
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

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

#messagesArea > div {
animation: fadeIn 0.3s ease-out;
}

/* Typing indicator animation */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}

.animate-pulse {
animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Enhanced button styles */
button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

/* Textarea styles */
textarea:focus {
box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

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

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

/* Responsive adjustments */
@media (max-width: 640px) {
.max-w-md {
max-width: calc(100% - 3rem);
}
}

/* Gradient text effect */
.gradient-text {
background: linear-gradient(to right, #a855f7, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}