.message { max-width: 85%; padding: 12px 16px; border-radius: 16px; animation: fadeIn 0.6s ease-out; line-height: 1.5; }
.user { align-self: flex-end; background: rgba(0,255,255,0.15); border-left: 4px solid #00ffff; color: #ccffff; }
.bot { align-self: flex-start; background: rgba(139,0,255,0.15); border-right: 4px solid #ff00ff; color: #e0ccff; white-space: pre-line; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
#chat-messages { display: flex; flex-direction: column; padding: 24px; gap: 20px; }
.message { padding: 18px 24px; max-width: 88%; line-height: 1.7; }
.typing { animation: typing 1.5s steps(20) infinite; }
@keyframes typing { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes pulse-slow {
  0%, 100% { box-shadow: 0 0 30px rgba(0,255,255,0.6); }
  50% { box-shadow: 0 0 50px rgba(0,255,255,0.9); }
}
#summon-btn {
  animation: pulse-slow 4s ease-in-out infinite;
}
#summon-btn:hover {
  animation: pulse-slow 2s ease-in-out infinite;
}
#summon-btn > div {
  transition: transform 0.3s ease;
}
#summon-btn:hover > div {
  transform: scale(1.05);
}