.app{min-height:100vh;flex-direction:column;justify-content:center;padding:2rem;position:relative;overflow:hidden}.app,.top-navigation{display:flex;align-items:center}.top-navigation{position:absolute;top:0;left:0;right:0;justify-content:space-between;padding:1rem 2rem;z-index:100;background:hsla(0,0%,100%,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(229,231,235,.5)}.top-navigation h1{font-size:1.25rem;font-weight:600;color:#1f2937;margin:0}.sparkle-icon{width:1.5rem;height:1.5rem;color:#10b981;animation:sparkle 2s ease-in-out infinite}@keyframes sparkle{0%,to{transform:scale(1) rotate(0deg)}50%{transform:scale(1.2) rotate(180deg)}}.main-content{display:flex;flex-direction:column;align-items:center;gap:2rem;max-width:500px;width:100%;margin-top:2rem}.character-avatar{position:relative}.avatar-container{flex-direction:column;gap:1rem}.avatar,.avatar-container{display:flex;align-items:center}.avatar{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#10b981,#059669);justify-content:center;box-shadow:0 10px 30px rgba(16,185,129,.2);position:relative;overflow:hidden}.avatar:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,hsla(0,0%,100%,.1),transparent);animation:shimmer 3s infinite}@keyframes shimmer{0%{transform:translateX(-100%) translateY(-100%) rotate(45deg)}to{transform:translateX(100%) translateY(100%) rotate(45deg)}}.avatar-face{width:80px;height:80px;background:hsla(0,0%,100%,.9);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.eyes{display:flex;gap:1rem;margin-bottom:.5rem}.eye{width:12px;height:12px;background:#333;border-radius:50%;animation:blink 4s infinite}@keyframes blink{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}.mouth{width:20px;height:8px;border:2px solid #333;border-top:none;border-radius:0 0 20px 20px;animation:smile 3s ease-in-out infinite}@keyframes smile{0%,to{transform:scaleX(1)}50%{transform:scaleX(1.2)}}.status-indicator{display:flex;align-items:center;gap:.5rem;background:rgba(16,185,129,.1);padding:.5rem 1rem;border-radius:20px;border:1px solid rgba(16,185,129,.2)}.status-dot{width:8px;height:8px;border-radius:50%}.status-dot.loading{background:#f59e0b;animation:pulse 1s infinite}.status-dot.online{background:#10b981;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.status-text{color:#374151;font-size:.875rem;font-weight:500}.message-container{width:100%;max-width:400px}.loading-container{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;background:#fff;border-radius:20px;border:1px solid #e5e7eb;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.loading-spinner{position:relative;width:60px;height:60px}.spinner-ring{position:absolute;width:100%;height:100%;border:3px solid transparent;border-top-color:#10b981;border-radius:50%;animation:spin 1s linear infinite}.spinner-ring:nth-child(2){animation-delay:.2s;border-top-color:#059669}.spinner-ring:nth-child(3){animation-delay:.4s;border-top-color:#047857}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading-text{color:#374151;font-size:1rem;font-weight:500}.message-box{background:#fff;border-radius:20px;border:1px solid #e5e7eb;overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.message-header{display:flex;align-items:center;gap:.5rem;padding:1rem 1.5rem;background:#f9fafb;border-bottom:1px solid #e5e7eb}.message-icon{width:1.25rem;height:1.25rem;color:#10b981}.message-header span{color:#374151;font-weight:600;font-size:.875rem}.message-content{padding:1.5rem;min-height:80px;display:flex;align-items:center}.message-text{color:#1f2937;font-size:1rem;line-height:1.6;margin:0}.cursor{animation:blink-cursor 1s infinite;color:#10b981}@keyframes blink-cursor{0%,50%{opacity:1}51%,to{opacity:0}}.action-button-container{margin-top:2rem;z-index:10}.action-button{display:flex;align-items:center;gap:.5rem;padding:1rem 2rem;background:#10b981;border:none;border-radius:50px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 4px 6px -1px rgba(16,185,129,.3);transition:all .3s ease}.action-button:hover{background:#059669;box-shadow:0 6px 8px -1px rgba(16,185,129,.4);transform:translateY(-1px)}.play-icon{width:1.25rem;height:1.25rem}.background-decoration{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.floating-particle{position:absolute;width:4px;height:4px;background:rgba(16,185,129,.3);border-radius:50%;animation:float 6s ease-in-out infinite}.particle-1{top:20%;left:10%;animation-delay:0s}.particle-2{top:60%;left:80%;animation-delay:1s}.particle-3{top:80%;left:20%;animation-delay:2s}.particle-4{top:30%;left:70%;animation-delay:3s}.particle-5{top:70%;left:60%;animation-delay:4s}@keyframes float{0%,to{transform:translateY(0) rotate(0deg);opacity:.3}50%{transform:translateY(-20px) rotate(180deg);opacity:.6}}@media (max-width:768px){.app{padding:1rem}.top-navigation{padding:.75rem 1rem}.top-navigation h1{font-size:1rem}.avatar{width:100px;height:100px}.avatar-face{width:70px;height:70px}.message-container{max-width:100%}.action-button{padding:.875rem 1.5rem;font-size:.875rem}}