style.css

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

@keyframes rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.message {
  animation: fadeIn 0.3s ease-out;
}

.bot {
  position: relative;
}

.bot:not(:last-child) {
  margin-bottom: 1.5rem;
}

.user:not(:last-child) {
  margin-bottom: 1.5rem;
}
.bot::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  width: 8px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M8 12V0H0l8 12z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat;
  background-size: contain;
  filter: drop-shadow(1px 0 1px rgba(0,0,0,0.1));
}

.dark .bot::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M8 12V0H0l8 12z' fill='%231e293b'/%3E%3C/svg%3E");
  filter: drop-shadow(1px 0 1px rgba(0,0,0,0.2));
}
.user::before {
  content: "";
  position: absolute;
  right: -8px;
  top: 0;
  width: 8px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M0 0v12h8L0 0z' fill='%23a855f7'/%3E%3C/svg%3E") no-repeat;
  background-size: contain;
  filter: drop-shadow(-1px 0 1px rgba(0,0,0,0.1));
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.thinking {
  position: relative;
  display: inline-block;
}

.thinking::after {
  content: "...";
  position: absolute;
  animation: pulse 1.5s infinite;
}
textarea {
  min-height: 60px;
  max-height: 200px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.empty i {
  animation: rainbowPulse 2s infinite;
}

@keyframes rainbowPulse {
  0% { filter: drop-shadow(0 0 5px rgba(168,85,247,0.5)); }
  25% { filter: drop-shadow(0 0 5px rgba(236,72,153,0.5)); }
  50% { filter: drop-shadow(0 0 5px rgba(59,130,246,0.5)); }
  75% { filter: drop-shadow(0 0 5px rgba(16,185,129,0.5)); }
  100% { filter: drop-shadow(0 0 5px rgba(168,85,247,0.5)); }
}
/* Smooth scrolling */
main {
  scroll-behavior: smooth;
}