.chat-container{display:flex;flex-direction:column;height:100vh;background:#f0f4f8;padding:10px;overflow:hidden}.chat-history{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:10px}.message{max-width:70%;padding:10px 15px;border-radius:16px;font-size:1rem;line-height:1.4;animation:fadeIn .4s ease}.message.system{align-self:flex-start;background:#e0e0e0}.message.user{align-self:flex-end;color:#fff}.message.user.correct{background:#4caf50}.message.user.wrong{background:#f44336}.message.typing{display:flex;gap:4px}.message.typing span{width:8px;height:8px;background:#888;border-radius:50%;animation:bounce 1.2s infinite}.message.typing span:nth-child(2){animation-delay:.2s}.message.typing span:nth-child(3){animation-delay:.4s}.message.recording{display:flex;align-items:center;gap:6px}.record-dot{width:10px;height:10px;background:red;border-radius:50%;animation:blink 1s infinite}.spinner{width:14px;height:14px;border:2px solid rgba(0,0,0,.2);border-top:2px solid rgba(0,0,0,.6);border-radius:50%;animation:spin 1s linear infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes bounce{0%,80%,to{transform:scale(.6)}40%{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}