@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap);:root{--background-color:#fafbfc;--card-background:#fff;--card-border:#e1e5e9;--text-color:#2d3748;--text-secondary:#718096;--primary-color:#3182ce;--primary-hover:#2c5aa0;--secondary-color:#718096;--accent-color:#38a169;--accent-hover:#2f855a;--button-hover-color:#2c5aa0;--send-button-color:#38a169;--send-button-hover-color:#2f855a;--error-color:#e53e3e;--warning-color:#dd6b20;--success-color:#38a169;--info-color:#3182ce;--shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--shadow-xl:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;--inset-light:inset 0 2px 4px 0 #0000000f;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;--font-mono:"JetBrains Mono","Fira Code",Consolas,monospace;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-normal:250ms cubic-bezier(0.4,0,0.2,1);--transition-slow:350ms cubic-bezier(0.4,0,0.2,1)}.dark-mode{--background-color:#0f1419;--card-background:#1a202c;--card-border:#2d3748;--text-color:#f7fafc;--text-secondary:#a0aec0;--primary-color:#63b3ed;--primary-hover:#4299e1;--secondary-color:#a0aec0;--accent-color:#68d391;--accent-hover:#48bb78;--button-hover-color:#4299e1;--send-button-color:#68d391;--send-button-hover-color:#48bb78;--error-color:#fc8181;--warning-color:#f6ad55;--success-color:#68d391;--info-color:#63b3ed;--shadow-sm:0 1px 3px 0 #0000004d,0 1px 2px 0 #0003;--shadow-md:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003;--shadow-lg:0 10px 15px -3px #0000004d,0 4px 6px -2px #0003;--shadow-xl:0 20px 25px -5px #0006,0 10px 10px -5px #0000004d;--inset-light:inset 0 2px 4px 0 #0000004d}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#fafbfc,color-mix(in srgb,#fafbfc 95%,#3182ce 5%));background:linear-gradient(135deg,var(--background-color) 0,color-mix(in srgb,var(--background-color) 95%,var(--primary-color) 5%) 100%);color:#2d3748;color:var(--text-color);flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-family:var(--font-family);line-height:1.6;overflow-x:hidden;transition:background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);transition:background var(--transition-normal),color var(--transition-normal)}.container,body{display:flex;margin:0;min-height:100vh;padding:0}.container{background:inherit;flex:1 1;flex-direction:column;min-width:100vw}.hiddenContainer{height:0;overflow:hidden;width:0}.header-bar{align-items:center;background:#fffc;border-bottom:1px solid #e1e5e9;border-bottom:1px solid var(--card-border);box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow-sm);display:flex;justify-content:space-between;margin-bottom:1rem;margin-bottom:var(--space-4);padding:1rem 1.5rem;padding:var(--space-4) var(--space-6);position:-webkit-sticky;position:sticky;top:0;z-index:100}.dark-mode .header-bar,.header-bar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.dark-mode .header-bar{background:#1a202ce6}.header-left{flex-grow:1;min-width:0}.header-left h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#3182ce,#38a169);background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700;letter-spacing:-.025em;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-right{align-items:center;display:flex;gap:1rem;gap:var(--space-4)}.status-indicator{align-items:center;background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow-sm);display:flex;font-size:.875rem;font-weight:500;gap:.5rem;gap:var(--space-2);padding:.5rem .75rem;padding:var(--space-2) var(--space-3)}.status-dot{background:#e53e3e;background:var(--error-color);border-radius:50%;height:8px;position:relative;width:8px}.status-dot.connected{background:#38a169;background:var(--success-color);box-shadow:0 0 0 2px #38a16933}.status-dot.connected:before{animation:pulse 2s infinite;background:#38a169;background:var(--success-color);border-radius:50%;bottom:-2px;content:"";left:-2px;opacity:.3;position:absolute;right:-2px;top:-2px}@keyframes pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:0;transform:scale(1.5)}}.status-dot.disconnected{background:#e53e3e;background:var(--error-color)}.status-text.active{color:#38a169;color:var(--success-color)}.status-text.inactive{color:#e53e3e;color:var(--error-color)}.source-selector{background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.5rem;border-radius:var(--radius-md);box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow-sm);color:#2d3748;color:var(--text-color);font-size:.875rem;padding:.5rem .75rem;padding:var(--space-2) var(--space-3);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.source-selector:focus{border-color:#3182ce;border-color:var(--primary-color);box-shadow:0 0 0 3px #3182ce1a;outline:none}.darkModeToggle{background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow-sm);color:#2d3748;color:var(--text-color);cursor:pointer;font-size:1.125rem;overflow:hidden;padding:.75rem;padding:var(--space-3);position:relative;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.darkModeToggle:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .35s cubic-bezier(.4,0,.2,1);transition:left var(--transition-slow);width:100%}.darkModeToggle:hover{background:#3182ce;background:var(--primary-color);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);color:#fff;transform:translateY(-1px)}.darkModeToggle:hover:before{left:100%}.content{flex:1 1;flex-wrap:wrap;margin:0 auto;max-width:1400px;padding:0 1.5rem;padding:0 var(--space-6);width:100%}.content,.leftColumn,.rightColumn{display:flex;gap:1.5rem;gap:var(--space-6)}.leftColumn,.rightColumn{flex:1 1;flex-direction:column;margin-bottom:3rem;margin-bottom:var(--space-12);min-width:320px}.audioCard,.chatCard,.statusCard,.videoCard{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffb3;border:1px solid #fff3;border-radius:1rem;border-radius:var(--radius-xl);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);box-sizing:border-box;flex:1 1;max-width:100%;min-width:280px;overflow:hidden;padding:1.5rem;padding:var(--space-6);position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);transition:all var(--transition-normal)}.dark-mode .audioCard,.dark-mode .chatCard,.dark-mode .statusCard,.dark-mode .videoCard{background:#1a202ccc;border:1px solid #ffffff1a}.audioCard:before,.chatCard:before,.statusCard:before,.videoCard:before{background:linear-gradient(90deg,#3182ce,#38a169);background:linear-gradient(90deg,var(--primary-color),var(--accent-color));content:"";height:2px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .25s cubic-bezier(.4,0,.2,1);transition:opacity var(--transition-normal)}.audioCard:hover,.chatCard:hover,.statusCard:hover,.videoCard:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl);transform:translateY(-2px)}.audioCard:hover:before,.chatCard:hover:before,.statusCard:hover:before,.videoCard:hover:before{opacity:1}.audioCard h2,.chatCard h2,.statusCard h3,.videoCard h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#3182ce,#38a169);background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-background-clip:text;background-clip:text;font-size:1.25rem;font-weight:600;letter-spacing:-.025em;margin-bottom:.75rem;margin-bottom:var(--space-3);margin-top:0}.audioCard p,.chatCard p,.statusCard p,.videoCard p{color:#718096;color:var(--text-secondary);font-size:.875rem;line-height:1.6;margin:.75rem 0;margin:var(--space-3) 0}.video{align-self:center;border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);justify-self:center;margin-bottom:.75rem;margin-bottom:var(--space-3);max-height:500px;max-width:700px;object-fit:cover;width:100%}.detectedObjects{background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.5rem;border-radius:var(--radius-md);font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-family:var(--font-mono);padding:1rem;padding:var(--space-4)}.detectedObjects h3{color:#2d3748;color:var(--text-color);font-size:1rem;font-weight:600;margin:0 0 .75rem;margin:0 0 var(--space-3) 0}.detectedObjects ul{list-style-type:none;margin:0;padding:0}.detectedObjects li{background:linear-gradient(135deg,#38a1691a,#38a1690d);border:1px solid #38a16933;border-radius:.5rem;border-radius:var(--radius-md);color:#2d3748;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.5rem;margin-bottom:var(--space-2);padding:.75rem;padding:var(--space-3);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.detectedObjects li:hover{background:linear-gradient(135deg,#38a16926,#38a16914);transform:translateX(4px)}.transcriptBox{background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:inset 0 2px 4px 0 #0000000f;box-shadow:var(--inset-light);color:#2d3748;color:var(--text-color);font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-family:var(--font-mono);font-size:.875rem;line-height:1.6;max-height:200px;overflow-y:auto;padding:1rem;padding:var(--space-4);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.transcriptBox:hover{border-color:#3182ce;border-color:var(--primary-color)}.transcriptBox::-webkit-scrollbar{width:6px}.transcriptBox::-webkit-scrollbar-track{background:#fafbfc;background:var(--background-color);border-radius:.375rem;border-radius:var(--radius-sm)}.transcriptBox::-webkit-scrollbar-thumb{background:#718096;background:var(--secondary-color);border-radius:.375rem;border-radius:var(--radius-sm)}.transcriptBox::-webkit-scrollbar-thumb:hover{background:#3182ce;background:var(--primary-color)}.chatCard h2{font-size:1.25rem;margin-bottom:1rem;margin-bottom:var(--space-4)}.chatMessage{word-wrap:break-word;border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow-sm);font-size:.875rem;line-height:1.5;margin-bottom:.75rem;margin-bottom:var(--space-3);max-width:85%;padding:.75rem 1rem;padding:var(--space-3) var(--space-4);position:relative;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.chatMessage:before{border-radius:50%;content:"";height:8px;position:absolute;top:.75rem;top:var(--space-3);width:8px}.chatMessage.user{align-self:flex-end;background:linear-gradient(135deg,#3182ce,#2c5aa0);background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));border-bottom-right-radius:.375rem;border-bottom-right-radius:var(--radius-sm);color:#fff;margin-left:auto}.chatMessage.user:before{background:#3182ce;background:var(--primary-color);right:-4px}.chatMessage.agent{align-self:flex-start;background:linear-gradient(135deg,#718096,color-mix(in srgb,#718096 90%,#000 10%));background:linear-gradient(135deg,var(--secondary-color),color-mix(in srgb,var(--secondary-color) 90%,#000 10%));border-bottom-left-radius:.375rem;border-bottom-left-radius:var(--radius-sm);color:#fff}.chatMessage.agent:before{background:#718096;background:var(--secondary-color);left:-4px}.chatMessage.system{align-self:center;background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);color:#718096;color:var(--text-secondary);font-style:italic;max-width:90%;text-align:center}.chatMessage:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);transform:translateY(-1px)}.chatBox{background:#fafbfc;background:var(--background-color);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:inset 0 2px 4px 0 #0000000f;box-shadow:var(--inset-light);color:#2d3748;color:var(--text-color);display:flex;flex-direction:column;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-family:var(--font-mono);font-size:.875rem;gap:.5rem;gap:var(--space-2);line-height:1.5;margin-bottom:1rem;margin-bottom:var(--space-4);max-height:400px;min-height:200px;overflow-y:auto;padding:1rem;padding:var(--space-4)}.chatBox::-webkit-scrollbar{width:8px}.chatBox::-webkit-scrollbar-track{background:#fff;background:var(--card-background);border-radius:.375rem;border-radius:var(--radius-sm)}.chatBox::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3182ce,#38a169);background:linear-gradient(180deg,var(--primary-color),var(--accent-color));border-radius:.375rem;border-radius:var(--radius-sm)}.chatBox::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#2c5aa0,#2f855a);background:linear-gradient(180deg,var(--primary-hover),var(--accent-hover))}.chatInputContainer{align-items:flex-end;display:flex;gap:.5rem;gap:var(--space-2)}.chatInput{background:#fff;background:var(--card-background);border:2px solid #e1e5e9;border:2px solid var(--card-border);border-radius:.75rem;border-radius:var(--radius-lg);color:#2d3748;color:var(--text-color);flex:1 1;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-family:var(--font-mono);font-size:.875rem;min-height:44px;padding:.75rem 1rem;padding:var(--space-3) var(--space-4);resize:none;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.chatInput:focus{background:#fff;border-color:#3182ce;border-color:var(--primary-color);box-shadow:0 0 0 3px #3182ce1a;outline:none}.dark-mode .chatInput:focus{background:#fff;background:var(--card-background)}.sendButton{align-items:center;background:linear-gradient(135deg,#38a169,#2f855a);background:linear-gradient(135deg,var(--send-button-color),var(--accent-hover));border:none;border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:600;height:44px;justify-content:center;min-width:44px;padding:.75rem 1rem;padding:var(--space-3) var(--space-4);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.sendButton:hover{background:linear-gradient(135deg,#2f855a,#38a169);background:linear-gradient(135deg,var(--send-button-hover-color),var(--accent-color));box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);transform:translateY(-1px)}.sendButton:active{transform:translateY(0)}.iconButton{align-items:center;background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow-sm);color:#2d3748;color:var(--text-color);cursor:pointer;display:flex;font-size:1.25rem;height:48px;justify-content:center;min-width:48px;overflow:hidden;padding:.75rem;padding:var(--space-3);position:relative;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.iconButton:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .25s cubic-bezier(.4,0,.2,1);transition:left var(--transition-normal);width:100%}.iconButton:hover:not(:disabled){background:linear-gradient(135deg,#3182ce,#2c5aa0);background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);color:#fff;transform:translateY(-2px)}.iconButton:hover:not(:disabled):before{left:100%}.iconButton:active:not(:disabled){transform:translateY(-1px)}.iconButton.active{background:linear-gradient(135deg,#38a169,#2f855a);background:linear-gradient(135deg,var(--accent-color),var(--accent-hover));box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);color:#fff}.iconButton.inactive{color:#718096;color:var(--secondary-color)}.iconButton:disabled{cursor:not-allowed;opacity:.5;transform:none}.captureButton{background:linear-gradient(135deg,#3182ce,#38a169);background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border:none;color:#fff;font-size:1.5rem;height:56px;min-width:56px}.captureButton:hover:not(:disabled){background:linear-gradient(135deg,#2c5aa0,#2f855a);background:linear-gradient(135deg,var(--primary-hover),var(--accent-hover));box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl);transform:translateY(-3px)}.captureButton:disabled{background:#718096;background:var(--secondary-color);opacity:.6}.bottomBar{align-items:center;background:#ffffffe6;border-radius:1rem 1rem 0 0;border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-top:1px solid #e1e5e9;border-top:1px solid var(--card-border);bottom:0;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl);display:flex;gap:1rem;gap:var(--space-4);justify-content:center;left:50%;margin:0 1rem;max-width:800px;padding:1rem 1.5rem;padding:var(--space-4) var(--space-6);position:fixed;transform:translateX(-50%);width:calc(100% - 2rem);z-index:999}.bottomBar,.dark-mode .bottomBar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.dark-mode .bottomBar{background:#1a202cf2}.modelSelectionBar-container{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffb3;border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:1rem;border-radius:var(--radius-xl);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);margin:0 1.5rem 1rem;margin:0 var(--space-6) var(--space-4) var(--space-6);margin-left:auto;margin-right:auto;max-width:1400px;overflow:hidden}.dark-mode .modelSelectionBar-container{background:#1a202ccc}.modelSelectionBar-header{align-items:center;background:linear-gradient(135deg,#fff,color-mix(in srgb,#fff 95%,#3182ce 5%));background:linear-gradient(135deg,var(--card-background),color-mix(in srgb,var(--card-background) 95%,var(--primary-color) 5%));border-bottom:1px solid #e1e5e9;border-bottom:1px solid var(--card-border);display:flex;justify-content:space-between;padding:1rem 1.5rem;padding:var(--space-4) var(--space-6)}.modelSelectionBar-header h3{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#3182ce,#38a169);background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-background-clip:text;background-clip:text;font-size:1rem;font-weight:600;margin:0}.collapseButton{background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.5rem;border-radius:var(--radius-md);color:#3182ce;color:var(--primary-color);cursor:pointer;font-size:.75rem;font-weight:500;padding:.5rem .75rem;padding:var(--space-2) var(--space-3);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.collapseButton:hover{background:#3182ce;background:var(--primary-color);box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow-sm);color:#fff;transform:translateY(-1px)}.modelSelectionBar{grid-gap:1rem;grid-gap:var(--space-4);display:grid;gap:1rem;gap:var(--space-4);grid-template-columns:repeat(6,1fr);padding:1.5rem;padding:var(--space-6)}.modelSelectionBar>div{display:flex;flex-direction:column;gap:.5rem;gap:var(--space-2)}.modelSelectionBar label{color:#2d3748;color:var(--text-color);font-size:.75rem;font-weight:600;letter-spacing:.025em;margin-bottom:.25rem;margin-bottom:var(--space-1);text-transform:uppercase}.modelSelectionBar select{background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.5rem;border-radius:var(--radius-md);color:#2d3748;color:var(--text-color);cursor:pointer;font-size:.875rem;padding:.75rem;padding:var(--space-3);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.modelSelectionBar select:focus{box-shadow:0 0 0 3px #3182ce1a;outline:none}.modelSelectionBar select:focus,.modelSelectionBar select:hover{border-color:#3182ce;border-color:var(--primary-color)}#toast-container{display:flex;flex-direction:column;gap:.75rem;gap:var(--space-3);max-width:400px;position:fixed;right:1.5rem;right:var(--space-6);top:1.5rem;top:var(--space-6);z-index:9999}.toast{animation:slideInRight .3s ease-out,fadeOut .3s ease-in 4.7s forwards;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff2;border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl);color:#2d3748;color:var(--text-color);font-size:.875rem;overflow:hidden;padding:1rem 1.25rem;padding:var(--space-4) var(--space-5);position:relative}.dark-mode .toast{background:#1a202cf2}.toast:before{background:#3182ce;background:var(--info-color);content:"";height:100%;left:0;position:absolute;top:0;width:4px}.toast.error:before{background:#e53e3e;background:var(--error-color)}.toast.success:before{background:#38a169;background:var(--success-color)}.toast.info:before{background:#3182ce;background:var(--info-color)}.toast.error{background:#fef2f2f2;border-color:#e53e3e;border-color:var(--error-color);color:#e53e3e;color:var(--error-color)}.toast.success{background:#f0fdf4f2;border-color:#38a169;border-color:var(--success-color);color:#38a169;color:var(--success-color)}.toast.info{background:#ebf8fff2;border-color:#3182ce;border-color:var(--info-color);color:#3182ce;color:var(--info-color)}.dark-mode .toast.error{background:#2d3748f2;color:#fc8181}.dark-mode .toast.success{background:#2d3748f2;color:#68d391}.dark-mode .toast.info{background:#2d3748f2;color:#63b3ed}.cam-controls{align-items:center;background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow-sm);display:flex;gap:.5rem;gap:var(--space-2);padding:.5rem .75rem;padding:var(--space-2) var(--space-3)}.cam-controls label{font-weight:500}.cam-controls label,.cam-controls select{color:#2d3748;color:var(--text-color);font-size:.875rem}.cam-controls select{background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.5rem;border-radius:var(--radius-md);min-width:120px;padding:.5rem .75rem;padding:var(--space-2) var(--space-3);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.cam-controls select:focus{border-color:#3182ce;border-color:var(--primary-color);box-shadow:0 0 0 2px #3182ce1a;outline:none}.toggle-cam-btn{align-items:center;background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow-sm);color:#2d3748;color:var(--text-color);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;gap:var(--space-2);padding:.5rem .75rem;padding:var(--space-2) var(--space-3);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.toggle-cam-btn:hover{background:#3182ce;background:var(--primary-color);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);color:#fff;transform:translateY(-1px)}.demo-alert-container{animation:fadeInScale .3s ease-out;left:50%;max-height:85vh;max-width:90vw;min-width:320px;overflow-y:auto;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:10002}@keyframes fadeInScale{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.demo-alert-container .alert{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffffa;border:1px solid #dd6b20;border-left:4px solid #dd6b20;border:1px solid var(--warning-color);border-left-width:4px;border-radius:1rem;border-radius:var(--radius-xl);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl);padding:1.5rem;padding:var(--space-6);position:relative}.dark-mode .demo-alert-container .alert{background:#1a202cfa}.demo-alert-container .alert span{color:#2d3748;color:var(--text-color);display:block;font-size:.875rem;line-height:1.6}.demo-alert-container .btn-dismiss-alert{background:none;border:none;border-radius:.5rem;border-radius:var(--radius-md);color:#e53e3e;color:var(--error-color);cursor:pointer;font-size:1.25rem;padding:.5rem;padding:var(--space-2);position:absolute;right:1rem;right:var(--space-4);top:1rem;top:var(--space-4);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.demo-alert-container .btn-dismiss-alert:hover{background:#e53e3e1a;transform:scale(1.1)}.loader{color:#2d3748;color:var(--text-color);font-size:1.5rem;font-weight:600;margin-top:100px;position:relative;text-align:center}.loader:after{animation:loading 1.5s ease-in-out infinite;background:linear-gradient(90deg,#3182ce,#38a169);background:linear-gradient(90deg,var(--primary-color),var(--accent-color));border-radius:2px;bottom:-20px;content:"";height:4px;left:50%;position:absolute;transform:translateX(-50%);width:40px}@keyframes loading{0%,to{transform:translateX(-50%) scaleX(1)}50%{transform:translateX(-50%) scaleX(1.5)}}.tour-container{position:fixed;right:25px;top:75px;z-index:9999}.tour-button,.tour-container{align-items:center;display:flex}.tour-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(135deg,#3091a9e6,#66dbedcc);border:none;border-radius:1rem;border-radius:var(--radius-xl);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);color:#fff;cursor:pointer;font-size:.75rem;font-weight:600;gap:.5rem;gap:var(--space-2);padding:.75rem 1rem;padding:var(--space-3) var(--space-4);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.tour-button:hover{background:linear-gradient(135deg,#66dbedf2,#3091a9e6);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl);transform:translateY(-2px)}.tour-running{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(135deg,#3091a9e6,#66dbedcc);border-radius:1rem;border-radius:var(--radius-xl);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);color:#fff;display:flex;gap:.5rem;gap:var(--space-2);padding:.75rem 1rem;padding:var(--space-3) var(--space-4)}.tour-label{font-size:.75rem;font-weight:600}.tour-dismiss-button{background:#0000;border:none;border-radius:.375rem;border-radius:var(--radius-sm);color:#fb2a2a;cursor:pointer;font-size:.875rem;padding:.25rem;padding:var(--space-1);transition:transform .15s cubic-bezier(.4,0,.2,1);transition:transform var(--transition-fast)}.tour-dismiss-button:hover{background:#fb2a2a1a;transform:scale(1.2)}.modal-overlays{align-items:center;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0006;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:10000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modals{animation:slideInUp .3s ease-out;background:#fff;background:var(--card-background);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:1rem;border-radius:var(--radius-xl);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl);max-height:90vh;max-width:90vw;overflow:hidden;padding:0}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-headers{align-items:center;background:linear-gradient(135deg,#fff,color-mix(in srgb,#fff 95%,#3182ce 5%));background:linear-gradient(135deg,var(--card-background),color-mix(in srgb,var(--card-background) 95%,var(--primary-color) 5%));border-bottom:1px solid #e1e5e9;border-bottom:1px solid var(--card-border);display:flex;justify-content:space-between;padding:1.5rem;padding:var(--space-6)}.modal-headers h3,.modal-headers h4{color:#3182ce;color:var(--primary-color);font-weight:600;margin:0}.modal-close-button{background:none;border:none;border-radius:.5rem;border-radius:var(--radius-md);color:#718096;color:var(--secondary-color);cursor:pointer;font-size:1.25rem;padding:.5rem;padding:var(--space-2);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.modal-close-button:hover{background:#e53e3e1a;color:#e53e3e;color:var(--error-color);transform:scale(1.1)}.modal-bodys{max-height:60vh;overflow-y:auto;padding:1.5rem;padding:var(--space-6)}.service-config-form{display:flex;flex-direction:column;gap:1.5rem;gap:var(--space-6)}.config-section{background:#fafbfc;background:var(--background-color);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow-sm);padding:1.5rem;padding:var(--space-6)}.config-section h4{color:#3182ce;color:var(--primary-color);font-size:1.125rem;font-weight:600;margin:0 0 1rem;margin:0 0 var(--space-4) 0}.form-field{margin-bottom:1rem;margin-bottom:var(--space-4)}.form-field label{display:block;font-weight:600;letter-spacing:.025em;margin-bottom:.5rem;margin-bottom:var(--space-2);text-transform:uppercase}.form-field input,.form-field label,.form-field select{color:#2d3748;color:var(--text-color);font-size:.875rem}.form-field input,.form-field select{background:#fff;background:var(--card-background);border:2px solid #e1e5e9;border:2px solid var(--card-border);border-radius:.5rem;border-radius:var(--radius-md);padding:.75rem;padding:var(--space-3);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:100%}.form-field input:focus,.form-field select:focus{border-color:#3182ce;border-color:var(--primary-color);box-shadow:0 0 0 3px #3182ce1a;outline:none}.form-field input[type=range]{background:#e1e5e9;background:var(--card-border);border-radius:.375rem;border-radius:var(--radius-sm);height:6px;padding:0}.form-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:linear-gradient(135deg,#3182ce,#38a169);background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border-radius:50%;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);cursor:pointer;height:20px;width:20px}.configure-button,.save-config-button{background:linear-gradient(135deg,#3182ce,#2c5aa0);background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));border:none;border-radius:.5rem;border-radius:var(--radius-md);box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow-sm);color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:.5rem 1rem;padding:var(--space-2) var(--space-4);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.configure-button:hover,.save-config-button:hover{background:linear-gradient(135deg,#2c5aa0,#3182ce);background:linear-gradient(135deg,var(--primary-hover),var(--primary-color));box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);transform:translateY(-1px)}.config-preview{background:#fafbfc;background:var(--background-color);border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:.5rem;border-radius:var(--radius-md);font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-family:var(--font-mono);font-size:.75rem;line-height:1.4;margin:1rem 0;margin:var(--space-4) 0;max-height:300px;overflow-y:auto;padding:1rem;padding:var(--space-4)}.copy-config-button{background:#3182ce;background:var(--primary-color);border:none;border-radius:.5rem;border-radius:var(--radius-md);color:#fff;cursor:pointer;padding:.75rem 1rem;padding:var(--space-3) var(--space-4);transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.copy-config-button:hover{background:#2c5aa0;background:var(--primary-hover)}@media (max-width:1200px){.content{padding:0 1rem;padding:0 var(--space-4)}.modelSelectionBar-container{margin:0 1rem 1rem;margin:0 var(--space-4) var(--space-4) var(--space-4)}}@media (max-width:1000px){.leftColumn,.rightColumn{flex:1 1 100%;margin-bottom:2rem;margin-bottom:var(--space-8)}.content{flex-direction:column;gap:1rem;gap:var(--space-4)}.modelSelectionBar{gap:1rem;gap:var(--space-4);grid-template-columns:repeat(3,1fr);padding:1rem;padding:var(--space-4)}}@media (max-width:768px){.header-bar{padding:.75rem 1rem;padding:var(--space-3) var(--space-4)}.header-left h1{font-size:1.25rem}.header-right{gap:.5rem;gap:var(--space-2)}.status-indicator{font-size:.75rem;padding:.25rem .5rem;padding:var(--space-1) var(--space-2)}.chatBox{max-height:200px;min-height:150px}.bottomBar{gap:.75rem;gap:var(--space-3);margin:0 .5rem;padding:.75rem 1rem;padding:var(--space-3) var(--space-4);width:calc(100% - 1rem)}.iconButton{font-size:1rem;height:40px;min-width:40px;padding:.5rem;padding:var(--space-2)}.captureButton{height:48px;min-width:48px}.modelSelectionBar{gap:.75rem;gap:var(--space-3);grid-template-columns:repeat(2,1fr);padding:.75rem;padding:var(--space-3)}.content{padding:0 .75rem;padding:0 var(--space-3)}.modelSelectionBar-container{margin:0 .75rem .75rem;margin:0 var(--space-3) var(--space-3) var(--space-3)}#toast-container{left:.75rem;left:var(--space-3);max-width:none;right:.75rem;right:var(--space-3);top:1rem;top:var(--space-4)}}@media (max-width:480px){.content{gap:.75rem;gap:var(--space-3);padding:0 .5rem;padding:0 var(--space-2)}.chatBox{max-height:150px;min-height:120px}.transcriptBox{max-height:120px}.bottomBar{gap:.5rem;gap:var(--space-2);padding:.5rem .75rem;padding:var(--space-2) var(--space-3)}.demo-alert-container{max-width:95vw;top:10%;transform:translate(-50%)}.modelSelectionBar-container{margin:0 .5rem .5rem;margin:0 var(--space-2) var(--space-2) var(--space-2)}}.audio-visualizer{background:linear-gradient(135deg,#fff,color-mix(in srgb,#fff 90%,#3182ce 10%));background:linear-gradient(135deg,var(--card-background),color-mix(in srgb,var(--card-background) 90%,var(--primary-color) 10%));border:1px solid #e1e5e9;border:1px solid var(--card-border);border-radius:1rem;border-radius:var(--radius-xl);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);overflow:hidden;padding:1.5rem;padding:var(--space-6);position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);transition:all var(--transition-normal)}.audio-visualizer:before{background:linear-gradient(90deg,#3182ce,#38a169);background:linear-gradient(90deg,var(--primary-color),var(--accent-color));content:"";height:2px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .25s cubic-bezier(.4,0,.2,1);transition:opacity var(--transition-normal)}.audio-visualizer:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl);transform:translateY(-2px)}.audio-visualizer:hover:before{opacity:1}.text-gradient{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#3182ce,#38a169);background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-background-clip:text;background-clip:text}.card-hover{transition:all .25s cubic-bezier(.4,0,.2,1);transition:all var(--transition-normal)}.card-hover:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl);transform:translateY(-2px)}*{scrollbar-color:#718096 #fafbfc;scrollbar-color:var(--secondary-color) var(--background-color);scrollbar-width:thin}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:#fafbfc;background:var(--background-color)}::-webkit-scrollbar-thumb,::-webkit-scrollbar-track{border-radius:.375rem;border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb{background:#718096;background:var(--secondary-color);-webkit-transition:background .15s cubic-bezier(.4,0,.2,1);transition:background .15s cubic-bezier(.4,0,.2,1);-webkit-transition:background var(--transition-fast);transition:background var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:#3182ce;background:var(--primary-color)}@keyframes slideInRight{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0;transform:translateX(100px)}}:focus-visible{outline:2px solid #3182ce;outline:2px solid var(--primary-color);outline-offset:2px}@media (prefers-contrast:high){:root{--card-border:#000;--text-color:#000;--background-color:#fff}.dark-mode{--card-border:#fff;--text-color:#fff;--background-color:#000}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.audio-visualizer-card{align-items:center;background-color:var(--card-background);border:1px solid var(--card-border);border-radius:12px;box-shadow:0 2px 4px var(--inset-light),0 4px 8px #0000000d;display:flex;flex-direction:column;overflow:hidden;padding:16px;position:relative;transition:transform .2s ease-out,box-shadow .2s ease-out,border-color .2s ease-out}.audio-visualizer-card:before{background:linear-gradient(90deg,var(--primary-color),var(--background-color));border-radius:2px 2px 0 0;content:"";height:4px;left:16px;opacity:.6;position:absolute;right:16px;top:0;transition:opacity .2s ease-out}.audio-visualizer-card:hover{border-color:var(--primary-color);box-shadow:0 4px 8px var(--inset-light),0 8px 16px #0000001a;transform:translateY(-4px)}.audio-visualizer-card:hover:before{opacity:1}.audio-visualizer-card h3{color:var(--primary-color);font-size:1.1rem;font-weight:600;letter-spacing:.5px;margin:0 0 8px;position:relative;text-transform:uppercase}.audio-visualizer-card h3:after{background:var(--primary-color);border-radius:1px;bottom:-4px;content:"";height:2px;left:0;position:absolute;width:32px}.audio-visualizer-card canvas{background-color:var(--background-color);border-radius:8px;box-shadow:inset 0 1px 3px #0000001a;height:auto;max-height:200px;transition:box-shadow .2s ease-out;width:100%}.audio-visualizer-card.animate canvas{box-shadow:inset 0 1px 3px #0000001a,0 0 12px var(--primary-color)}.modal-overlay{height:100%;left:0;pointer-events:none;position:fixed;top:0;width:100%}.modal-content{background:var(--card-background);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--inset-light);cursor:grab;display:flex;flex-direction:column;max-height:90vh;padding:0;position:relative;transform:none;width:clamp(300px,90vw,800px)}.modal-content.draggable{cursor:move}.modal-header{display:flex;justify-content:flex-end;width:100%}.modal-close-btn{background:none;border:none;color:red;cursor:pointer;font-size:1.2em}.placeholder-video{align-content:center;align-items:center;background-color:#f0f0f0;border-radius:60px;color:#777;display:flex;font-size:.9em;height:100%;justify-content:center;text-align:center;width:100%}.self-video.hidden{display:none}.self-video{border-radius:50px;display:block;height:75%;object-fit:cover;width:100%}.audio-bars-container{align-items:flex-end;display:flex;height:20%;justify-content:space-between;width:100%}.audio-bar{background-color:#ccc;height:100%;transition:height .2s ease;width:8%}.audio-bar.filled{background-color:#00c800}