*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#fff;color:#000;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center}#app{width:100%;max-width:390px;height:100vh;position:relative;background:#fff;overflow:hidden;border-radius:0;margin:0 auto;box-shadow:none}.close-button{position:absolute;top:20px;right:20px;width:48px;height:48px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:100;padding:0}.close-button:hover{transform:scale(1.1)}.close-button:active{transform:scale(.95)}.close-button img{pointer-events:none;width:48px;height:48px}.pink-lights{position:absolute;width:100%;height:100%;pointer-events:none;z-index:1}.pink-light{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,192,230,.8) 0%,rgba(255,150,210,.5) 30%,rgba(255,100,190,.2) 50%,transparent 70%);filter:blur(40px);animation:pulsate 5s ease-in-out infinite}.light-1{width:200px;height:200px;top:50%;left:20%;animation-delay:0s}.light-2{width:180px;height:180px;bottom:100px;right:15%;animation-delay:1.5s;background:radial-gradient(circle,rgba(255,255,255,.6) 0%,rgba(255,255,255,.4) 30%,rgba(255,255,255,.2) 50%,transparent 70%)}@keyframes pulsate{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.15)}}.main-content{width:100%;height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px}.greeting{text-align:left;opacity:1;transition:opacity .3s ease,background-color .5s ease;padding:8px;border-radius:12px;max-width:360px;margin:-210px 5px 80px}.greeting.hidden{opacity:0}.greeting-text{color:#000;font-size:16px;font-weight:300;margin-bottom:8px;line-height:1.4;white-space:pre-line;word-wrap:break-word;max-width:100%;text-align:left}.greeting-text strong,.greeting-question strong,strong,.greeting strong,b,em{font-weight:700!important;color:#d60b52!important;font-size:1.1em!important}.greeting-question{color:#000;font-size:18px;font-weight:700;line-height:1.4}.wave-container{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s ease;z-index:10;width:100%;max-width:390px;height:48px;overflow:visible;pointer-events:none}.wave-container.active{opacity:1}.wave-container-new{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);opacity:1;z-index:10;width:100%;max-width:390px;overflow:visible;pointer-events:none}.voice-wave{width:100%;height:48px;display:block;overflow:visible}.voice-wave path{transition:all 2.5s cubic-bezier(.23,1,.32,1);transform-origin:center}@keyframes waveRestingAnimation1{0%,to{transform:translateY(0) scaleY(.3);opacity:.4}25%{transform:translateY(-1.2px) scaleY(.4);opacity:.5}50%{transform:translateY(.6px) scaleY(.2);opacity:.45}75%{transform:translateY(-.9px) scaleY(.35);opacity:.48}}@keyframes waveRestingAnimation2{0%,to{transform:translateY(0) scaleY(.3);opacity:.35}33%{transform:translateY(.9px) scaleY(.25);opacity:.4}66%{transform:translateY(-1.5px) scaleY(.45);opacity:.45}}@keyframes waveRestingAnimation3{0%,to{transform:translateY(0) scaleY(.3);opacity:.35}20%{transform:translateY(-.6px) scaleY(.35);opacity:.4}40%{transform:translateY(1.2px) scaleY(.2);opacity:.38}60%{transform:translateY(-.3px) scaleY(.4);opacity:.42}80%{transform:translateY(.6px) scaleY(.28);opacity:.36}}@keyframes waveIdleAnimation1{0%,to{transform:translateY(0) scaleY(.3);opacity:.7}50%{transform:translateY(-1px) scaleY(.35);opacity:.8}}@keyframes waveIdleAnimation2{0%,to{transform:translateY(0) scaleY(.25);opacity:.6}50%{transform:translateY(.5px) scaleY(.3);opacity:.7}}@keyframes waveIdleAnimation3{0%,to{transform:translateY(0) scaleY(.2);opacity:.5}50%{transform:translateY(-.5px) scaleY(.25);opacity:.6}}@keyframes waveActiveAnimation1{0%,to{transform:translateY(0) scaleY(.8);opacity:.9}25%{transform:translateY(-2.5px) scaleY(1.1);opacity:1}50%{transform:translateY(1.5px) scaleY(.6);opacity:.95}75%{transform:translateY(-2px) scaleY(1);opacity:.98}}@keyframes waveActiveAnimation2{0%,to{transform:translateY(0) scaleY(.8);opacity:.8}33%{transform:translateY(2px) scaleY(.7);opacity:.9}66%{transform:translateY(-3px) scaleY(1.2);opacity:1}}@keyframes waveActiveAnimation3{0%,to{transform:translateY(0) scaleY(.8);opacity:.85}20%{transform:translateY(-1.5px) scaleY(.9);opacity:.95}40%{transform:translateY(2.5px) scaleY(.5);opacity:.9}60%{transform:translateY(-.8px) scaleY(1.1);opacity:.93}80%{transform:translateY(1.2px) scaleY(.7);opacity:.88}}.voice-wave.resting #wavePath1{animation:waveRestingAnimation1 2.4s ease-in-out infinite;transform-origin:center;opacity:.4!important}.voice-wave.resting #wavePath2{animation:waveRestingAnimation2 3s ease-in-out infinite;transform-origin:center;opacity:.35!important}.voice-wave.resting #wavePath3{animation:waveRestingAnimation3 2s ease-in-out infinite;transform-origin:center;opacity:.3!important}.voice-wave.resting #darkWave{animation:waveRestingAnimation2 2.8s ease-in-out infinite;transform-origin:center;opacity:.7!important}.voice-wave.idle #wavePath1{animation:waveIdleAnimation1 4s ease-in-out infinite;transform-origin:center;opacity:.7!important}.voice-wave.idle #wavePath2{animation:waveIdleAnimation2 5s ease-in-out infinite;transform-origin:center;opacity:.6!important}.voice-wave.idle #wavePath3{animation:waveIdleAnimation3 6s ease-in-out infinite;transform-origin:center;opacity:.5!important}.voice-wave.idle #darkWave{animation:waveIdleAnimation1 4.5s ease-in-out infinite;transform-origin:center;opacity:1!important}.voice-wave.animating #wavePath1{animation:waveActiveAnimation1 1.8s ease-in-out infinite;transform-origin:center;opacity:1!important}.voice-wave.animating #wavePath2{animation:waveActiveAnimation2 2.2s ease-in-out infinite;transform-origin:center;opacity:1!important}.voice-wave.animating #wavePath3{animation:waveActiveAnimation3 1.5s ease-in-out infinite;transform-origin:center;opacity:1!important}.voice-wave.animating #darkWave{animation:waveActiveAnimation2 2s ease-in-out infinite;transform-origin:center;opacity:1!important}.wave-container svg{overflow:visible!important}.wave-container.active{opacity:1!important}.push-to-talk-container{position:absolute;bottom:120px;left:50%;transform:translate(-50%)}.outer-ring{width:121px;height:121px;border-radius:50%;background:#d60b521a;display:flex;align-items:center;justify-content:center;transition:all .3s ease;position:relative}.outer-ring.active{background:linear-gradient(234deg,#70062b24,#a3083e24,#d60b5224 52%,#d60b5203);border:1px solid #D60B52;box-shadow:0 0 20px #d60b524d}.outer-ring.listening{background:linear-gradient(234deg,#70062b33,#a3083e4d,#d60b5266 52%,#d60b520d);border:2px solid #D60B52;animation:micGlow 1.5s ease-in-out infinite}@keyframes micGlow{0%,to{box-shadow:0 0 20px #d60b5266,0 0 40px #d60b5233;border-color:#d60b52}50%{box-shadow:0 0 35px #d60b52cc,0 0 60px #d60b5266,0 0 80px #d60b5233;border-color:#ff0059}}.push-to-talk-btn.listening{transform:scale(1.05)}.middle-ring{width:78.39px;height:78.39px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.push-to-talk-btn{width:49.92px;height:49.92px;border-radius:8px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;position:relative}.push-to-talk-btn:active{transform:scale(.95)}.push-to-talk-btn.recording .middle-ring{background:#d60b52}.push-to-talk-btn.audio-disabled .middle-ring{background:#f0f0f0;border:2px solid #D60B52}.outer-ring.audio-disabled{background:#d60b520d;border:1px solid rgba(214,11,82,.3)}@keyframes buttonPulse{0%,to{box-shadow:0 0 #d60b52b3}70%{box-shadow:0 0 0 10px #d60b5200}}.outer-ring.recording{animation:buttonPulse 2s infinite}@media(min-width:769px){.greeting{max-width:400px;padding:20px}.greeting-text{font-size:20px}.greeting-question{font-size:24px}}@media(max-width:428px){.main-content{padding:60px 20px 40px}}@media(max-height:700px){.push-to-talk-container{bottom:80px}.control-buttons{bottom:20px;gap:60px}.greeting{margin-bottom:40px}}.debug-border{border:2px solid red!important}.debug-info{position:fixed;top:10px;left:10px;background:#000c;color:#fff;padding:10px;font-family:monospace;font-size:12px;border-radius:4px;z-index:1000}
