@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}
@keyframes glow{0%{box-shadow:0 0 5px rgba(0,87,255,0.3)}50%{box-shadow:0 0 20px rgba(0,87,255,0.6)}100%{box-shadow:0 0 5px rgba(0,87,255,0.3)}}
@keyframes typing{0%,60%,100%{opacity:0.4}30%{opacity:1}}

.fade-in-up{animation:fadeInUp 0.6s ease-out}
.slide-in-left{animation:slideInLeft 0.6s ease-out}
.slide-in-right{animation:slideInRight 0.6s ease-out}
.scale-in{animation:scaleIn 0.5s ease-out}
.pulse-effect{animation:pulse 2s ease-in-out infinite}
.glow-effect{animation:glow 3s ease-in-out infinite}

.card-hover{transition:all 0.3s ease;cursor:pointer}
.card-hover:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,87,255,0.15)}

.btn-ripple{position:relative;overflow:hidden}
.btn-ripple::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.5);transform:translate(-50%,-50%);animation:ripple 0.6s ease-out}
@keyframes ripple{to{width:300px;height:300px;opacity:0}}

.fade-in-observer{opacity:0}
.fade-in-observer.visible{animation:fadeInUp 0.6s ease-out forwards}

.typing-indicator{display:flex;gap:4px;align-items:center}
.typing-indicator span{width:8px;height:8px;background:#0057FF;border-radius:50%;animation:typing 1.4s infinite}
.typing-indicator span:nth-child(2){animation-delay:0.2s}
.typing-indicator span:nth-child(3){animation-delay:0.4s}

.bot-avatar,.user-avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:14px}
.msg-content{word-wrap:break-word;white-space:pre-wrap}