* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background: linear-gradient(135deg, #6e8efb, #a777e3); display:flex; justify-content:center; align-items:center; min-height:100vh; color:#fff; }
.container { background: rgba(0,0,0,0.6); padding:30px; border-radius:20px; width:450px; box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
.typing-text { font-size:1.3rem; margin-bottom:20px; overflow:hidden; border-right:.15em solid orange; white-space:nowrap; animation: typing 4s steps(50,end), blink-caret .75s step-end infinite; }
@keyframes typing { from { width:0; } to { width:100%; } }
@keyframes blink-caret { 50% { border-color:transparent; } }
.avatar-section { position: relative; width: 100%; height: 100px; margin-bottom: 20px; }
.avatar-circle { position: absolute; top: 0; left: 50%; transform: rotate(calc(var(--i)*90deg)) translateX(140px) rotate(calc(var(--i)*-90deg)); animation: rotate-circle 8s linear infinite; }
.avatar-circle img { width: 60px; height: 60px; border-radius:50%; border:2px solid #fff; object-fit:cover; }
@keyframes rotate-circle { 0% { transform: rotate(calc(var(--i)*90deg)) translateX(140px) rotate(calc(var(--i)*-90deg)); } 100% { transform: rotate(calc(var(--i)*90deg + 360deg)) translateX(140px) rotate(calc(var(--i)*-90deg - 360deg)); } }
.chat-container { background: rgba(255,255,255,0.1); border-radius:15px; padding:15px; }
#chat-box { height:250px; overflow-y:auto; border:1px solid rgba(255,255,255,0.3); border-radius:10px; padding:10px; margin-bottom:10px; background: rgba(0,0,0,0.2); }
#user-input { width:70%; padding:10px; border-radius:10px; border:none; outline:none; }
#send-btn { width:28%; padding:10px; border-radius:10px; border:none; background:orange; color:#000; font-weight:bold; cursor:pointer; transition:0.3s; }
#send-btn:hover { background:#ffd700; }
img { margin-top:10px; border-radius:10px; border:2px solid #fff; }
p { margin:5px 0; }