*{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}.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}#bot-video-container{width:100%;max-width:480px;aspect-ratio:16/9;background:#6c3aed1f;border-radius:12px;overflow:hidden;display:none;align-items:center;justify-content:center}#bot-video-container.active{display:flex}#bot-video-container video{width:100%;height:100%;object-fit:cover}.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:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.btn-disconnect:hover:not(:disabled){background:#ef444433;border-color:#ef444466}.btn:disabled{opacity:.3;cursor:not-allowed;transform:none}.mic-icon{width:20px;height:20px}.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}}