*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f172a;color:#fff}#root{width:100vw;height:100vh}.app{width:100%;height:100%;display:flex;flex-direction:column}.header{padding:.75rem 2rem;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.header h1{font-size:1.25rem;font-weight:600}.badge{font-size:.75rem;padding:.25rem .75rem;border-radius:9999px;background:#8b5cf633;color:#a78bfa}.panels-container{flex:1;display:flex;min-height:0}.panel-divider{width:1px;background:#ffffff1a;flex-shrink:0}.comparison-panel{flex:1;position:relative;overflow:hidden;background:#0f172a}.panel-badge{position:absolute;top:.75rem;left:.75rem;z-index:10;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;color:#fff;letter-spacing:.025em}.panel-state-pill{position:absolute;top:.75rem;right:.75rem;z-index:10;display:flex;align-items:center;gap:.375rem;padding:.25rem .625rem;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:9999px;font-size:.7rem;text-transform:capitalize}.state-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.state-dot.pulsing{animation:pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}.state-label{color:#fffc}.panel-agent-indicator{position:absolute;top:2.5rem;right:.75rem;z-index:10;padding:.2rem .5rem;background:#8b5cf64d;border:1px solid rgba(139,92,246,.4);border-radius:.375rem;font-size:.65rem;font-weight:500;color:#c4b5fd;letter-spacing:.05em;text-transform:capitalize}.panel-video{width:100%;height:100%;object-fit:cover}.panel-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:linear-gradient(135deg,#1e293b,#0f172a);color:#ffffff80;font-size:.875rem}.panel-spinner{width:2rem;height:2rem;border:2px solid rgba(139,92,246,.3);border-top-color:#8b5cf6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.panel-error-text{color:#f87171}.panel-overlays{position:absolute;inset:0;pointer-events:none;z-index:5}.panel-overlay-item{pointer-events:auto}.panel-overlay-item.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:24rem}.panel-overlay-item.card{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);width:90%;max-width:24rem}.panel-speaker{position:absolute;bottom:.75rem;right:.75rem;z-index:10;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;cursor:pointer;transition:background .2s;color:#fff}.panel-speaker.on{background:#ffffff26}.panel-speaker.off{background:#ef44444d}.panel-speaker:hover{background:#ffffff40}.shared-input-bar{flex-shrink:0;padding:1rem 2rem 1.25rem;border-top:1px solid rgba(255,255,255,.1);background:#0f172af2}.shared-input-form{display:flex;gap:.5rem;max-width:48rem;margin:0 auto}.shared-input{flex:1;padding:.75rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);border-radius:.5rem;color:#fff;font-size:.875rem;outline:none;transition:border-color .2s}.shared-input:focus{border-color:#8b5cf680}.shared-input::placeholder{color:#ffffff59}.send-button{padding:.75rem 1.5rem;background:linear-gradient(135deg,#8b5cf6,#6366f1);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:opacity .2s}.send-button:hover{opacity:.9}.suggested-prompts{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;max-width:48rem;margin-left:auto;margin-right:auto;flex-wrap:wrap}.prompt-label{font-size:.75rem;color:#fff6;flex-shrink:0}.prompt-chip{padding:.375rem .75rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:9999px;color:#fff9;font-size:.75rem;cursor:pointer;transition:all .2s;white-space:nowrap}.prompt-chip:hover{background:#8b5cf626;border-color:#8b5cf64d;color:#ffffffd9}.setup-screen{display:flex;align-items:center;justify-content:center;flex:1;padding:2rem}.setup-card{max-width:480px;width:100%;padding:2rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:1rem}.setup-card h2{font-size:1.5rem;margin-bottom:.5rem}.setup-card p{color:#ffffff80;font-size:.875rem;margin-bottom:1.5rem}.setup-card code{background:#8b5cf626;padding:.125rem .375rem;border-radius:.25rem;font-size:.8rem}.setup-card label{display:block;font-size:.875rem;color:#fff9;margin-bottom:.5rem}.setup-card input{width:100%;padding:.75rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;color:#fff;font-size:.875rem;font-family:monospace;outline:none;margin-bottom:1rem}.setup-card input:focus{border-color:#8b5cf6}.setup-card button{width:100%;padding:.75rem;background:linear-gradient(135deg,#8b5cf6,#3b82f6);border:none;border-radius:.5rem;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:opacity .2s}.setup-card button:hover{opacity:.9}@media(max-width:768px){.panels-container{flex-direction:column}.panel-divider{width:100%;height:1px}.header{padding:.75rem 1rem}.shared-input-bar{padding:.75rem 1rem 1rem}.suggested-prompts{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:.25rem}}