*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background-color:#0f0a1a;color:#fff;min-height:100vh;display:flex;justify-content:center;align-items:center}.container{max-width:600px;width:100%;padding:20px}.header{text-align:center;margin-bottom:32px}.header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#6c3aed,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:#a78bfa;font-size:1.1rem;margin-top:4px}.subtitle-big{font-size:1.25rem;font-weight:600;color:#a78bfa;margin-top:2px}.main-content{background:#6c3aed14;border:1px solid rgba(108,58,237,.2);border-radius:16px;padding:32px;margin-bottom:20px}.bot-container{display:flex;flex-direction:column;align-items:center;gap:24px}#blob-container{width:100%;max-width:400px;height:300px;margin:0 auto;border-radius:12px;overflow:hidden}#blob-container canvas{display:block}.session-timer{display:none;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;color:#a78bfa;text-align:center}.session-timer.active{display:block}.session-timer.warning{color:#f59e0b}.session-timer.critical{color:#ef4444;animation:timerPulse 1s infinite}@keyframes timerPulse{0%,to{opacity:1}50%{opacity:.5}}.busy-banner{display:none;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;padding:20px;text-align:center;animation:ctaAppear .5s ease-out}.busy-banner.visible{display:block}.busy-banner p{margin-bottom:10px;line-height:1.5;font-size:.95rem}.busy-banner p:first-child{color:#f87171;font-weight:600}.busy-banner .cta-btn{display:inline-block;margin-top:6px}.status-text{color:#a78bfa;font-size:1rem;text-align:center;min-height:24px}.controls{display:flex;gap:12px;justify-content:center}.btn{padding:14px 32px;border:none;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px}.btn-connect{background:linear-gradient(135deg,#6c3aed,#7c4dff);color:#fff;box-shadow:0 4px 20px #6c3aed66}.btn-connect:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 28px #6c3aed99}.btn-disconnect{background:#ef4444;color:#fff;border:1px solid #ef4444}.btn-disconnect:hover:not(:disabled){background:#dc2626;border-color:#dc2626}.btn:disabled{opacity:.3;cursor:not-allowed;transform:none}.mic-icon{width:20px;height:20px}.cta-banner{display:none;background:linear-gradient(135deg,#6c3aed26,#a78bfa1a);border:1px solid rgba(108,58,237,.4);border-radius:12px;padding:24px;margin-bottom:20px;text-align:center;animation:ctaAppear .5s ease-out}.cta-banner.visible{display:block}@keyframes ctaAppear{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cta-text{font-size:1.1rem;font-weight:600;margin-bottom:16px;line-height:1.4}.cta-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.cta-btn{padding:12px 24px;border-radius:50px;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .3s ease;background:linear-gradient(135deg,#6c3aed,#7c4dff);color:#fff}.cta-btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px #6c3aed80}.cta-btn-outline{background:transparent;border:1px solid rgba(167,139,250,.5);color:#a78bfa}.cta-btn-outline:hover{background:#6c3aed26;box-shadow:none}.transcript-panel{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px;margin-bottom:20px}.transcript-panel h3{font-size:.85rem;font-weight:600;color:#a78bfa;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}#debug-log{max-height:200px;overflow-y:auto;font-size:.9rem;line-height:1.6}#debug-log::-webkit-scrollbar{width:4px}#debug-log::-webkit-scrollbar-track{background:transparent}#debug-log::-webkit-scrollbar-thumb{background:#a78bfa4d;border-radius:2px}#debug-log .entry{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04)}#debug-log .entry.user{color:#60a5fa}#debug-log .entry.bot{color:#a78bfa}#debug-log .entry.system{color:#fff6;font-size:.8rem}.footer{text-align:center;padding:16px 0;font-size:.85rem}.footer a{color:#a78bfa;text-decoration:none;transition:color .2s}.footer a:hover{color:#6c3aed}.separator{color:#fff3;margin:0 12px}@keyframes pulse{0%,to{box-shadow:0 0 #6c3aed66}50%{box-shadow:0 0 0 12px #6c3aed00}}.btn-connect.active{animation:pulse 2s infinite}@media (max-width: 640px){.header h1{font-size:2rem}.main-content{padding:24px 16px}.btn{padding:12px 24px;font-size:.9rem}}