*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color:#ffa200;--primary-dark:#e59200;--accent-color:#ffa2fb;--bg-color:#1a1a2e;--bg-secondary:#16213e;--text-color:#fff;--text-muted:#a0a0a0;--success-color:#4ade80;--listening-color:#60a5fa;--speaking-color:#f472b6;--thinking-color:#a78bfa;--connected-color:#10b981;--error-color:#ef4444}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,var(--bg-color) 0,var(--bg-secondary) 100%);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;overflow-x:hidden}.container{max-width:600px;gap:24px}.catbot-wrapper,.container{width:100%;display:flex;flex-direction:column;align-items:center}.catbot-wrapper{position:relative;max-width:500px}.ambient-glow{position:absolute;width:80%;height:60%;top:20%;left:10%;background:radial-gradient(ellipse,var(--primary-color) 0,transparent 70%);opacity:.3;filter:blur(40px);animation:ambientPulse 4s ease-in-out infinite;pointer-events:none;z-index:0}@keyframes ambientPulse{0%,to{opacity:.2;transform:scale(1)}50%{opacity:.4;transform:scale(1.05)}}.face-container{position:relative;width:100%;z-index:1;animation:floatIdle 6s ease-in-out infinite}@keyframes floatIdle{0%,to{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-5px) rotate(.5deg)}50%{transform:translateY(-8px) rotate(0deg)}75%{transform:translateY(-5px) rotate(-.5deg)}}.cat-face{width:100%;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.3));transition:filter .3s ease}.cat-face:hover{filter:drop-shadow(0 15px 40px rgba(255,162,0,.3))}.ear{transition:all .3s ease;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.ear:hover{fill:#ffb020;filter:drop-shadow(0 6px 12px rgba(255,162,0,.4))}.ear.scratching{fill:#ffb020;animation:earWiggle .2s ease-in-out infinite}@keyframes earWiggle{0%,to{transform:rotate(0deg)}50%{transform:rotate(3deg)}}.face-bg{transition:fill .5s ease}.eye-white{transition:transform .1s ease-out}.pupil{transition:transform .15s ease-out;transform-origin:center}.eye-shine{animation:shineSparkle 3s ease-in-out infinite}@keyframes shineSparkle{0%,to{opacity:.7;transform:scale(1)}50%{opacity:.9;transform:scale(1.1)}}.eyelid{transition:ry .1s ease-in-out;transform-origin:center}.blinking .left-eyelid,.blinking .right-eyelid{animation:blink .15s ease-in-out}@keyframes blink{0%{ry:0}50%{ry:85}to{ry:0}}.nose{animation:noseWiggle 8s ease-in-out infinite;transform-origin:center}@keyframes noseWiggle{0%,to{transform:scale(1) rotate(0deg)}25%{transform:scale(1.02) rotate(1deg)}75%{transform:scale(1.02) rotate(-1deg)}}.mouth{transition:opacity .12s ease-out,transform .15s cubic-bezier(.34,1.56,.64,1);transform-origin:center 300px}.mouth-inner{transition:d .2s ease-in-out,transform .15s ease-out}.mouth-group,.tongue{transform-origin:center}.tongue{animation:tongueWiggle .4s ease-in-out infinite}@keyframes tongueWiggle{0%,to{transform:translateY(0) scaleX(1)}25%{transform:translateY(1px) scaleX(1.02)}50%{transform:translateY(2px) scaleX(.98)}75%{transform:translateY(1px) scaleX(1.02)}}.mouth.speaking-active{animation:mouthBounce .15s ease-out}@keyframes mouthBounce{0%{transform:scale(.95)}50%{transform:scale(1.02)}to{transform:scale(1)}}.mouth-happy,.mouth-talking,.mouth-wide{will-change:opacity,transform}.mouth-entering{animation:mouthEnter .12s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes mouthEnter{0%{opacity:0;transform:scaleY(.7) scaleX(1.1)}60%{opacity:1;transform:scaleY(1.05) scaleX(.98)}to{opacity:1;transform:scaleY(1) scaleX(1)}}.particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.particle{position:absolute;font-size:24px;animation:particleFloat 2s ease-out forwards;opacity:0}@keyframes particleFloat{0%{opacity:1;transform:translateY(0) scale(.5) rotate(0deg)}50%{opacity:1;transform:translateY(-50px) scale(1) rotate(180deg)}to{opacity:0;transform:translateY(-100px) scale(.8) rotate(1turn)}}.status-indicator{display:flex;align-items:center;gap:8px;padding:8px 16px;background:hsla(0,0%,100%,.1);border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--success-color);animation:statusPulse 2s ease-in-out infinite}@keyframes statusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}.status-indicator.connecting .status-dot{background:var(--thinking-color);animation:statusPulse .8s ease-in-out infinite}.status-indicator.connected .status-dot{background:var(--connected-color)}.status-indicator.listening .status-dot{background:var(--listening-color);animation:statusPulse .5s ease-in-out infinite}.status-indicator.speaking .status-dot{background:var(--speaking-color);animation:statusPulse .3s ease-in-out infinite}.status-indicator.thinking .status-dot{background:var(--thinking-color);animation:statusPulse 1s ease-in-out infinite}.status-indicator.error .status-dot{background:var(--error-color)}.status-text{color:var(--text-color);font-size:14px;font-weight:500}.voice-visualizer{display:flex;align-items:center;justify-content:center;gap:4px;height:40px;opacity:0;transition:opacity .3s ease}.voice-visualizer.active{opacity:1}.voice-visualizer .bar{width:6px;height:10px;background:var(--primary-color);border-radius:3px;transition:height .05s ease}.voice-visualizer.listening .bar{background:var(--listening-color)}.voice-visualizer.speaking .bar{background:var(--speaking-color)}.controls{flex-direction:column;gap:16px}.controls,.mic-button{display:flex;align-items:center}.mic-button{width:80px;height:80px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-dark) 100%);color:#fff;cursor:pointer;justify-content:center;transition:all .3s ease;box-shadow:0 4px 20px rgba(255,162,0,.4)}.mic-button:hover{transform:scale(1.05);box-shadow:0 6px 30px rgba(255,162,0,.5)}.mic-button:active{transform:scale(.95)}.mic-button.connected{background:linear-gradient(135deg,var(--connected-color) 0,#059669 100%);box-shadow:0 4px 20px rgba(16,185,129,.5)}.mic-button.listening{background:linear-gradient(135deg,var(--listening-color) 0,#3b82f6 100%);box-shadow:0 4px 20px rgba(96,165,250,.5);animation:micPulse 1s ease-in-out infinite}.mic-button.speaking{background:linear-gradient(135deg,var(--speaking-color) 0,#ec4899 100%);box-shadow:0 4px 20px rgba(244,114,182,.5)}.mic-button:disabled{opacity:.5;cursor:not-allowed;transform:none}@keyframes micPulse{0%,to{box-shadow:0 4px 20px rgba(96,165,250,.5)}50%{box-shadow:0 4px 40px rgba(96,165,250,.8)}}.mic-icon,.mic-off-icon,.phone-icon{width:36px;height:36px}.mic-icon.muted{stroke:#ef4444;color:#ef4444}.mic-icon.active{stroke:#22c55e;color:#22c55e}.emotion-buttons{display:flex;gap:12px}.emotion-btn{width:48px;height:48px;border-radius:12px;border:2px solid hsla(0,0%,100%,.2);background:hsla(0,0%,100%,.1);font-size:24px;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.emotion-btn:hover{transform:scale(1.1);border-color:var(--primary-color);background:rgba(255,162,0,.2)}.emotion-btn:active{transform:scale(.95)}.transcript{width:100%;max-height:200px;overflow-y:auto;background:hsla(0,0%,100%,.05);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.transcript::-webkit-scrollbar{width:6px}.transcript::-webkit-scrollbar-track{background:transparent}.transcript::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.2);border-radius:3px}.message{padding:12px 16px;border-radius:12px;max-width:85%;animation:messageSlide .3s ease-out}@keyframes messageSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.bot{background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-dark) 100%);color:#fff;align-self:flex-start;border-bottom-left-radius:4px}.message.user{background:hsla(0,0%,100%,.15);color:var(--text-color);align-self:flex-end;border-bottom-right-radius:4px}.face-container.happy .ambient-glow{background:radial-gradient(ellipse,#ffeb3b 0,transparent 70%)}.face-container.excited .ambient-glow{background:radial-gradient(ellipse,#ff4081 0,transparent 70%);animation:ambientPulse 1s ease-in-out infinite}.face-container.thinking .ambient-glow{background:radial-gradient(ellipse,var(--thinking-color) 0,transparent 70%)}.face-container.surprised{animation:surpriseBounce .5s ease-out}@keyframes surpriseBounce{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.face-container.sleepy{animation:sleepyFloat 3s ease-in-out infinite}@keyframes sleepyFloat{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}.face-group{animation:breathe 4s ease-in-out infinite;transform-origin:center}@keyframes breathe{0%,to{transform:translate(350.33934px,154.33332px) scale(1)}50%{transform:translate(350.33934px,154.33332px) scale(1.01)}}.face-container.speaking .mouth-group{animation:mouthTalk .15s ease-in-out infinite alternate}@media (max-width:600px){.container{padding:10px}.mic-button{width:70px;height:70px}.emotion-btn{width:42px;height:42px;font-size:20px}.transcript{max-height:150px}}.loading .face-container{animation:loadingPulse 1.5s ease-in-out infinite}@keyframes loadingPulse{0%,to{opacity:1}50%{opacity:.6}}.container.disconnected .mic-button{background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-dark) 100%)}.container.connecting .mic-button{background:linear-gradient(135deg,var(--thinking-color) 0,#7c3aed 100%);animation:micPulse 1s ease-in-out infinite}.footer{width:100%;text-align:center;padding:16px;margin-top:12px;border-top:1px solid hsla(0,0%,100%,.1)}.footer p{color:var(--text-muted);font-size:13px;letter-spacing:.5px;font-weight:500}