*{box-sizing:border-box}body{color:#fff;margin:0;font-family:Inter,Arial,sans-serif;overflow:hidden}.voice-agent-page{background:linear-gradient(-45deg,#07111f,#0f2027,#203a43,#16222a,#0b132b) 0 0/400% 400%;justify-content:center;align-items:center;width:100vw;height:100vh;animation:15s infinite gradientAnimation;display:flex;position:relative;overflow:hidden}@keyframes gradientAnimation{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.background-animation{filter:blur(100px);background:linear-gradient(135deg,#5865f259,#00ffc826);border-radius:50%;width:500px;height:500px;animation:10s ease-in-out infinite floating;position:absolute}@keyframes floating{0%{transform:translate(-100px,-100px)}50%{transform:translate(150px,100px)}to{transform:translate(-100px,-100px)}}.voice-agent-container{z-index:2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0c1423bf;border:1px solid #ffffff1a;border-radius:24px;flex-direction:column;width:min(900px,95vw);height:min(850px,92vh);display:flex;position:relative;overflow:hidden;box-shadow:0 25px 80px #0006}.header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:24px 30px;display:flex}.header h1{margin:0;font-size:24px;font-weight:700}.header p{color:#fff9;margin:6px 0 0}.conversation{flex-direction:column;flex:1;gap:20px;padding:30px;display:flex;overflow-y:auto}.conversation::-webkit-scrollbar{width:6px}.conversation::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.empty-chat{text-align:center;color:#ffffffb3;margin:auto}.empty-icon{margin-bottom:15px;font-size:60px;animation:3s ease-in-out infinite floatIcon}@keyframes floatIcon{0%{transform:translateY(0)}50%{transform:translateY(-12px)}to{transform:translateY(0)}}.empty-chat h2{color:#fff}.message-row{display:flex}.message-row.user{justify-content:flex-end}.message-row.assistant{justify-content:flex-start}.message{border-radius:18px;max-width:80%;padding:16px 18px;animation:.3s messageAppear}@keyframes messageAppear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.user{background:linear-gradient(135deg,#2563eb,#4f46e5);border-bottom-right-radius:4px;box-shadow:0 10px 30px #2563eb40}.message.assistant{background:#ffffff14;border:1px solid #ffffff14;border-bottom-left-radius:4px;box-shadow:0 10px 30px #00000026}.message-header{color:#ffffffa6;margin-bottom:10px;font-size:13px}.message-content{word-break:break-word;line-height:1.7}.message-content p{margin:10px 0}.message-content pre{text-align:left;background:#080d17;border:1px solid #ffffff14;border-radius:10px;max-width:100%;padding:16px;overflow-x:auto}.message-content code{font-family:Fira Code,monospace;font-size:14px}.message-content pre code{white-space:pre}.copy-button{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:8px;margin-top:14px;padding:7px 12px;font-size:13px;transition:all .2s}.copy-button:hover{background:#fff3;transform:translateY(-1px)}.chat-process-status{color:#ffffffa6;justify-content:center;align-items:center;gap:8px;min-height:38px;margin:0 20px;font-size:14px;display:flex}.status-text-icon{font-size:16px}.changing-status-text{animation:.4s statusTextAppear}@keyframes statusTextAppear{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.chat-input-container{background:#ffffff14;border:1px solid #ffffff1a;border-radius:16px;align-items:center;gap:10px;margin:0 20px 20px;padding:8px 10px;transition:all .2s;display:flex}.chat-input-container:focus-within{border-color:#6366f1b3;box-shadow:0 0 20px #4f46e526}.input-status-container{flex-shrink:0;justify-content:center;align-items:center;width:28px;height:42px;display:flex}.live-status-icon{background:#22c55e;border-radius:50%;width:11px;height:11px;animation:1.5s ease-out infinite livePulse;display:block}@keyframes livePulse{0%{opacity:1;transform:scale(1);box-shadow:0 0 #22c55eb3}50%{opacity:.5;transform:scale(.85);box-shadow:0 0 0 8px #22c55e00}to{opacity:1;transform:scale(1);box-shadow:0 0 #22c55e00}}.input-listening-indicator{align-items:center;gap:3px;height:22px;display:flex}.input-listening-indicator span{background:#22c55e;border-radius:5px;width:3px;height:10px;animation:.7s ease-in-out infinite alternate inputSoundWave}.input-listening-indicator span:nth-child(2){animation-delay:.15s}.input-listening-indicator span:nth-child(3){animation-delay:.3s}.input-listening-indicator span:nth-child(4){animation-delay:.45s}@keyframes inputSoundWave{0%{transform:scaleY(.5)}to{transform:scaleY(1.8)}}.input-thinking-icon{font-size:17px;animation:1s ease-in-out infinite thinkingPulse}@keyframes thinkingPulse{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}.input-speaking-icon{font-size:17px;animation:.8s ease-in-out infinite speakingPulse}@keyframes speakingPulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.chat-input-container input{color:#fff;background:0 0;border:none;outline:none;flex:1;min-width:0;padding:10px 4px;font-size:15px}.chat-input-container input::placeholder{color:#ffffff73}.chat-input-container input:disabled{opacity:.6}.mic-button,.send-button,.stop-voice-button{cursor:pointer;border:none;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:17px;transition:all .2s;display:flex}.mic-button{color:#fff;background:#ffffff1a}.mic-button:hover{background:#fff3;transform:scale(1.05)}.mic-button.active{background:#22c55e33;border:1px solid #22c55e99;animation:1s infinite micActive}@keyframes micActive{0%{box-shadow:0 0 #22c55e80}70%{box-shadow:0 0 0 8px #22c55e00}to{box-shadow:0 0 #22c55e00}}.stop-voice-button{color:#f87171;background:#ef44442e;border:1px solid #ef444466}.stop-voice-button:hover{background:#ef44444d;transform:scale(1.05)}.send-button{color:#fff;background:linear-gradient(135deg,#2563eb,#4f46e5)}.send-button:hover{transform:scale(1.05)}.send-button:disabled{opacity:.4;cursor:not-allowed;transform:none}@media (width<=600px){.voice-agent-container{border-radius:0;width:100vw;height:100vh}.header{padding:18px}.header h1{font-size:20px}.header p{display:none}.conversation{padding:18px}.message{max-width:90%}.chat-input-container{gap:6px;margin:0 10px 15px}.chat-process-status{margin:0 10px;font-size:13px}.mic-button,.send-button,.stop-voice-button{width:38px;height:38px}}