:root{--color-primary-dark: #00112A;--color-primary: #00275B;--color-primary-light: #003B8C;--color-accent: #0099D8;--color-accent-hover: #33ADDF;--color-text: #F3F4F6;--color-text-muted: #9CA3AF;--color-bg: #000814;--color-panel-bg: rgba(0, 39, 91, .4);--color-panel-border: rgba(255, 255, 255, .1);--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--color-supervisor: #D97706;--color-supervisor-light: #F59E0B;--color-supervisor-glow: rgba(217, 119, 6, .5);font-family:Outfit,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--color-text);background-color:var(--color-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background:radial-gradient(circle at top,var(--color-primary-dark) 0%,var(--color-bg) 100%)}#root{max-width:1280px;margin:0 auto;padding:2rem;width:100%;box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;letter-spacing:-.025em}p{margin-top:0}.glass-panel{background:var(--color-panel-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-panel-border);border-radius:20px;padding:2rem;box-shadow:0 25px 50px -12px #00000080}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:500;border-radius:9999px;cursor:pointer;transition:all .2s ease;font-family:inherit;font-size:1rem;border:none}.btn-primary{background:var(--color-accent);color:#fff;box-shadow:0 4px 14px #0099d863}.btn-primary:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px #0099d83b}.btn-primary:active{transform:translateY(0)}.btn-danger{background:#ef44441a;color:var(--color-error);border:1px solid rgba(239,68,68,.2)}.btn-danger:hover{background:#ef444433}.btn-icon{width:3rem;height:3rem;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center}.pulse-animation{animation:pulse-ring 2s cubic-bezier(.215,.61,.355,1) infinite}@keyframes pulse-ring{0%{box-shadow:0 0 #0099d8b3}70%{box-shadow:0 0 0 20px #0099d800}to{box-shadow:0 0 #0099d800}}.app-container{display:grid;grid-template-columns:1fr 350px;gap:2rem;height:calc(100vh - 4rem)}@media(max-width:900px){.app-container{grid-template-columns:1fr;grid-template-rows:auto 1fr}}.main-column{display:flex;flex-direction:column;align-items:center;position:relative;padding-top:4rem;gap:1rem;overflow-y:auto}header{position:absolute;top:0;left:0;width:100%;display:flex;align-items:baseline;gap:1rem}.logo-text{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.05em;color:var(--color-text);margin:0}.logo-text span{color:var(--color-accent)}.header-subtitle{font-size:.8rem;color:var(--color-text-muted);font-weight:400;margin:0}.agent-interface{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:500px}.status-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;background:var(--color-panel-bg);border:1px solid var(--color-panel-border);font-size:.875rem;font-weight:500;color:var(--color-text-muted)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--color-text-muted)}.status-dot.connected{background:var(--color-success)}.status-dot.connecting{background:var(--color-warning);animation:pulse 1.5s infinite}.status-dot.disconnected{background:var(--color-error)}.controls-wrapper{display:flex;gap:1rem;justify-content:center;align-items:center}.status-label-it{font-size:.8rem;color:var(--color-accent);font-weight:500;margin:0;animation:fadeIn .3s ease-out}.error-banner{margin-top:.5rem;padding:1rem;background:#ef44441a;border:1px solid var(--color-error);border-radius:8px;color:var(--color-error);max-width:400px;text-align:center;font-size:.9rem}.error-hint{font-size:.8rem;margin-top:.5rem;display:block;opacity:.8}.visualizer-container{width:160px;height:160px;display:flex;align-items:center;justify-content:center;position:relative}.orb{width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--color-accent),var(--color-primary-light));box-shadow:0 0 40px #0099d866,inset 0 0 20px #fff3;transition:all .1s ease-out}.orb.speaking{box-shadow:0 0 60px #0099d8cc,inset 0 0 20px #fff6}.orb.supervisor{box-shadow:0 0 40px var(--color-supervisor-glow),inset 0 0 20px #fff3}.orb.supervisor.speaking{box-shadow:0 0 60px var(--color-supervisor-glow),inset 0 0 20px #fff6}.context-panel{display:flex;flex-direction:column;gap:1.5rem;height:100%}.panel-header{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--color-panel-border);padding-bottom:1rem;margin-bottom:1rem}.panel-title{font-size:1.125rem;font-weight:600;color:var(--color-text);margin:0}.info-group{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem}.info-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.info-value{font-size:1rem;font-weight:500;color:var(--color-text)}.info-value.highlight{color:var(--color-accent)}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.btn-reconnect{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.85rem;font-weight:500;font-family:inherit;border-radius:9999px;cursor:pointer;border:1px solid var(--color-accent);background:#0099d81a;color:var(--color-accent);transition:all .2s ease}.btn-reconnect:hover{background:#0099d833;transform:translateY(-1px)}@media(max-width:768px){#root{padding:1rem}.app-container{grid-template-columns:1fr;gap:1rem;height:auto;min-height:100vh}.main-column{padding-top:3rem}.context-column{display:none}header{position:relative;justify-content:center;flex-wrap:wrap}.logo-text{font-size:1.2rem}.header-subtitle{display:none}.visualizer-container{width:120px;height:120px}.orb{width:70px;height:70px}.agent-interface{gap:1rem;padding:1.25rem}.transcript-panel{max-height:300px}.transcript-bubble{max-width:95%}.btn-icon{width:3.5rem;height:3.5rem}.error-banner{max-width:100%;font-size:.8rem}}@media(max-width:480px){.logo-text{font-size:1rem}.visualizer-container{width:100px;height:100px}.orb{width:60px;height:60px}.glass-panel{padding:1rem;border-radius:14px}}.transcript-panel{display:flex;flex-direction:column;max-height:400px;overflow:hidden}.transcript-title{font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;color:var(--color-text);margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--color-panel-border)}.transcript-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding-right:.25rem}.transcript-messages::-webkit-scrollbar{width:4px}.transcript-messages::-webkit-scrollbar-thumb{background:var(--color-panel-border);border-radius:2px}.transcript-empty{color:var(--color-text-muted);font-style:italic;font-size:.85rem;text-align:center;margin:2rem 0}.transcript-bubble{padding:.6rem .8rem;border-radius:12px;max-width:90%;animation:bubbleIn .3s ease-out}.transcript-bubble.user{align-self:flex-end;background:#6366f126;border:1px solid rgba(99,102,241,.3);border-bottom-right-radius:4px}.transcript-bubble.agent{align-self:flex-start;background:#0ea5e91a;border:1px solid rgba(14,165,233,.25);border-bottom-left-radius:4px}.transcript-bubble.agent.supervisor{background:#d977061a;border:1px solid rgba(245,158,11,.25)}.transcript-bubble.agent.supervisor .transcript-role{color:var(--color-supervisor-light)}.transcript-role{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-accent);display:block;margin-bottom:.2rem}.transcript-bubble.user .transcript-role{color:#818cf8;text-align:right}.transcript-text{font-size:.85rem;line-height:1.4;color:var(--color-text);margin:0}.transcript-time{font-size:.65rem;color:var(--color-text-muted);display:block;margin-top:.25rem}.transcript-bubble.user .transcript-time{text-align:right}.thinking-dots:after{content:"";animation:dots 1.5s steps(4,end) infinite}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.transcript-bubble.thinking{opacity:.7}@keyframes bubbleIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.mic-indicator{display:flex;align-items:flex-end;gap:.4rem;padding:.4rem .6rem;border-radius:12px;background:#ffffff08;border:1px solid var(--color-panel-border)}.mic-indicator-icon{font-size:.9rem;line-height:1}.mic-bars{display:flex;align-items:flex-end;gap:2px;height:18px}.mic-bar{width:4px;min-height:3px;border-radius:2px;background:#ffffff26;transition:background .1s ease}.mic-bar.active{background:var(--color-success);box-shadow:0 0 4px #10b98166}.mic-off-label{font-size:.65rem;color:var(--color-text-muted);margin-left:.2rem}.transfer-banner{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:#d977061a;border:1px solid rgba(245,158,11,.3);border-radius:12px;width:100%;max-width:500px;box-sizing:border-box;animation:slideBannerIn .4s cubic-bezier(.16,1,.3,1) forwards}.transfer-icon{font-size:1.5rem;flex-shrink:0}.transfer-text{display:flex;flex-direction:column;gap:.15rem}.transfer-text strong{color:var(--color-supervisor-light);font-size:.9rem;font-weight:600}.transfer-text span{color:var(--color-text-muted);font-size:.75rem}@keyframes slideBannerIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.transfer-banner{max-width:100%;padding:.6rem 1rem}.transfer-text strong{font-size:.8rem}.transfer-text span{font-size:.7rem}}