body{margin:0;padding:0;font-family:Poppins,sans-serif;background:linear-gradient(135deg,#f9f9f9,#f0f2f5);color:#333;line-height:1.6;min-height:100vh}.container{width:100%;max-width:900px;margin:0 auto;padding:20px;display:flex;flex-direction:column;height:100vh}.app-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0;margin-bottom:20px}.logo{display:flex;align-items:center;gap:12px;color:#2563eb}.logo i{font-size:24px}.logo h1{font-size:1.5rem;font-weight:600;margin:0}.connection-status{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;padding:8px 15px;background-color:#fffc;border-radius:30px;box-shadow:0 2px 8px #0000000d}.status-indicator{width:12px;height:12px;border-radius:50%;background-color:#e74c3c;transition:all .3s ease}.status-indicator.connected{background-color:#2ecc71;box-shadow:0 0 10px #2ecc7199}.main-panel{flex:1;display:flex;justify-content:center;align-items:center}.assistant-card{background-color:#fff;border-radius:20px;padding:30px;box-shadow:0 10px 30px #0000000d;width:100%;max-width:800px;display:flex;flex-direction:column;align-items:center;gap:30px}.visualization-container{width:100%;height:180px;display:flex;justify-content:center;align-items:center;position:relative}.bot-speaking{display:none;position:relative;width:200px;height:200px;justify-content:center;align-items:center}.bot-speaking.active{display:flex}.speaking-ring{position:absolute;border-radius:50%;border:2px solid #2563eb;opacity:0}.ring-1{width:80px;height:80px;animation:pulse-ring 2s cubic-bezier(.215,.61,.355,1) infinite}.ring-2{width:120px;height:120px;animation:pulse-ring 2s cubic-bezier(.215,.61,.355,1) infinite .6s}.ring-3{width:160px;height:160px;animation:pulse-ring 2s cubic-bezier(.215,.61,.355,1) infinite 1.2s}@keyframes pulse-ring{0%{transform:scale(.5);opacity:0}50%{opacity:.5}to{transform:scale(1);opacity:0}}.user-speaking{display:none;position:relative;width:200px;height:200px;justify-content:center;align-items:center}.user-speaking.active{display:flex}.wave-container{display:flex;align-items:center;gap:6px;height:80px}.wave{width:6px;height:30px;background-color:#10b981;border-radius:3px}.user-speaking.active .wave:nth-child(1){animation:wave .8s infinite ease-in-out 0s}.user-speaking.active .wave:nth-child(2){animation:wave .8s infinite ease-in-out .2s}.user-speaking.active .wave:nth-child(3){animation:wave .8s infinite ease-in-out .4s}.user-speaking.active .wave:nth-child(4){animation:wave .8s infinite ease-in-out .2s}.user-speaking.active .wave:nth-child(5){animation:wave .8s infinite ease-in-out 0s}@keyframes wave{0%,to{height:20px}50%{height:80px}}.idle-state{display:none;position:relative;width:200px;height:200px;justify-content:center;align-items:center}.idle-state.active{display:flex}.pulse-dot{width:20px;height:20px;background-color:#a855f7;border-radius:50%;animation:pulse-dot 2s infinite cubic-bezier(.455,.03,.515,.955)}@keyframes pulse-dot{0%,to{transform:scale(.8);background-color:#a855f799}50%{transform:scale(1.2);background-color:#a855f7}}.status-text{position:absolute;bottom:20px;font-size:1rem;font-weight:500;color:#6b7280;letter-spacing:.5px}.transcript-area{width:100%;background-color:#f9fafb;border-radius:12px;padding:20px;max-height:200px;overflow-y:auto;box-shadow:inset 0 2px 4px #0000000d}.transcript-content{font-size:.95rem;line-height:1.7}.transcript-content .user-message{color:#2563eb;font-weight:500;margin-bottom:8px}.transcript-content .bot-message{color:#10b981;margin-bottom:16px}.controls{display:flex;gap:20px;width:100%;justify-content:center;margin-top:10px}.btn{padding:14px 28px;border:none;border-radius:50px;cursor:pointer;font-weight:600;font-size:1rem;display:flex;align-items:center;gap:10px;transition:all .3s ease;box-shadow:0 4px 12px #0000001a;flex:1;justify-content:center;max-width:220px}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px #00000026}.btn:active{transform:translateY(0)}.connect-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.connect-btn:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8)}.disconnect-btn{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.disconnect-btn:hover{background:linear-gradient(135deg,#dc2626,#b91c1c)}button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 4px 6px #0000001a}#debug-log{display:none}@media (max-width: 768px){.container{padding:15px}.app-header{flex-direction:column;gap:15px;align-items:flex-start}.assistant-card{padding:20px}.visualization-container{height:150px}.controls{flex-direction:column;align-items:center}.btn{max-width:100%}}@media (max-width: 480px){.logo h1{font-size:1.2rem}.visualization-container{height:120px}.btn{padding:12px 20px;font-size:.9rem}}