.audioPulse{display:flex;width:24px;justify-content:space-evenly;align-items:center;transition:all .5s;height:24px;opacity:.4;transition:opacity .333s}.audioPulse>div{background-color:var(--text-tertiary);border-radius:1000px;width:4px;min-height:4px;transition:height .1s}.audioPulse.hover>div{animation:hover 1.4s infinite alternate ease-in-out}.audioPulse.active{opacity:1}.audioPulse.active>div{background-color:var(--brand-primary)}@keyframes hover{0%{transform:translateY(0)}to{transform:translateY(-3.5px)}}@keyframes pulse{0%{scale:1 1}to{scale:1.2 1.2}}:root{--brand-primary: #A373F8;--brand-primary-dark: #5628A1;--brand-secondary: #6C4EB3;--bg-deep: #000000;--bg-surface: #000000;--bg-surface-glass: rgba(0, 0, 0, .8);--bg-gradient-main: linear-gradient(180deg, #000000 0%, #000000 100%);--text-primary: #FFFFFF;--text-secondary: #BBBDC5;--text-tertiary: #6B7280;--border-subtle: rgba(255, 255, 255, .18);--border-highlight: rgba(163, 115, 248, .3);--status-error: #EF4444;--status-success: #10B981;--status-warning: #F59E0B;--glass-blur: 16px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-glow: 0 0 32px rgba(163, 115, 248, .15);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 24px;--radius-full: 9999px;--font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-heading: "Panchang", "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:auto;min-height:100%}body{font-family:var(--font-sans);background:transparent;color:var(--text-primary)}.kadence-webapp{width:100%;max-width:640px;margin:0 auto;height:auto;display:flex;flex-direction:column;background:transparent}.webapp-main{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;padding:0;gap:0}.webapp-main.loading{align-items:center;justify-content:center}.webapp-main.loading .spinner{width:32px;height:32px;border:3px solid var(--border-subtle);border-top-color:var(--brand-primary);border-radius:50%;animation:spin .8s linear infinite}.webapp-main.compact{position:relative;height:auto;min-height:0;max-height:none;padding:0;gap:0;align-items:center;justify-content:center;background:transparent}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-glow{0%,to{box-shadow:var(--shadow-glow),0 0 20px #a373f866,0 0 40px #a373f833}50%{box-shadow:var(--shadow-glow),0 0 30px #a373f899,0 0 60px #a373f84d}}.top-section{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-shrink:0}.top-section .header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.info-panel{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:auto;padding:12px 16px;background:var(--bg-surface-glass);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all .3s ease}.info-panel:hover{border-color:var(--brand-primary);box-shadow:var(--shadow-glow)}.info-panel .avatar-container{margin-right:16px;flex-shrink:0}.info-panel .avatar-container .avatar-circle{width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid var(--brand-primary);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;background:var(--bg-surface)}.info-panel .avatar-container .avatar-circle .avatar-image{width:100%;height:100%;object-fit:cover;object-position:center center;transform:scale(1.15)}.info-panel .avatar-container .avatar-circle .avatar-fallback{font-size:1.5rem;font-weight:700;color:var(--brand-primary)}.info-panel .info-text{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1}.info-panel .info-text h2{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;margin:0;line-height:1.1;color:var(--text-primary);letter-spacing:.02em;display:flex;align-items:center;gap:8px}.info-panel .info-text h2 .version{font-family:var(--font-mono);font-size:.6rem;font-weight:400;color:var(--text-tertiary);letter-spacing:0;background:#ffffff0d;padding:2px 4px;border-radius:4px;vertical-align:middle}.info-panel .info-text .subtitle{font-family:var(--font-sans);font-size:.8rem;margin:0;color:var(--text-secondary);font-weight:400;line-height:1.2}.info-panel .info-text .feedback-link{font-family:var(--font-sans);font-size:.7rem;margin-top:2px;color:var(--brand-primary);text-decoration:none;cursor:pointer;font-weight:500;transition:all .2s ease}.info-panel .info-text .feedback-link:hover{color:var(--brand-secondary);text-decoration:underline}.messages-section{flex:1;display:flex;flex-direction:column;min-height:0;gap:12px}.system-messages{position:relative;display:flex;flex-direction:column;flex-grow:1;min-height:0;max-height:300px;width:100%;pointer-events:none}.system-messages-container{display:flex;flex-direction:column;gap:0;overflow-y:auto;height:100%;padding:12px 20px;background:var(--bg-surface-glass);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);pointer-events:auto;mask-image:linear-gradient(to bottom,transparent 0px,black 20px,black calc(100% - 20px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black 20px,black calc(100% - 20px),transparent 100%)}.system-messages-container::-webkit-scrollbar{width:4px}.system-messages-container::-webkit-scrollbar-track{background:transparent;margin:20px 0}.system-messages-container::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:var(--radius-full)}.system-messages-container::-webkit-scrollbar-thumb:hover{background:#4a4a4a}.system-message{color:var(--text-secondary);font-family:var(--font-sans);font-size:.8rem;line-height:1.4;padding:4px 0;background:transparent;border:none;transition:all .2s ease;flex-shrink:0;font-style:italic;animation:fadeSlideIn .3s cubic-bezier(.16,1,.3,1)}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.status-message{font-size:14px;color:var(--text-secondary);text-align:center;padding:8px 16px}.status-message.reconnecting{color:var(--status-warning)}.status-message.idle{color:var(--text-tertiary)}.login-button{background:none;border:1px solid var(--border-subtle);color:var(--text-primary);padding:6px 14px;border-radius:var(--radius-full);font-size:13px;cursor:pointer;transition:background .15s ease,border-color .15s ease;white-space:nowrap}.login-button:hover{background:#ffffff0d;border-color:var(--text-secondary)}.login-button.authenticated{display:flex;align-items:center;gap:8px;border:none;padding:0}.login-button.authenticated .username{font-size:13px;color:var(--text-secondary)}.login-button.authenticated .logout-link{background:none;border:none;color:var(--text-tertiary);font-size:12px;cursor:pointer;text-decoration:underline;padding:0}.login-button.authenticated .logout-link:hover{color:var(--text-secondary)}.join-cta{font-size:12px;color:var(--brand-primary);text-decoration:none;white-space:nowrap}.join-cta:hover{color:var(--brand-secondary);text-decoration:underline}.session-limit-warning{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:13px;color:var(--text-secondary);background:#ffffff08;border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.session-limit-warning .material-symbols-outlined{font-size:18px;color:var(--status-warning)}.session-limit-warning.limit-reached{background:var(--brand-primary-dim);color:var(--text-primary)}.session-limit-warning.limit-reached .material-symbols-outlined{color:var(--status-error)}.session-limit-warning.limit-reached p{margin:0;line-height:1.4}.session-limit-warning.limit-reached .sub{font-size:12px;color:var(--text-secondary)}.compact .session-limit-warning{padding:4px 12px;font-size:11px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.control-bar{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 20px;min-height:72px;background:var(--bg-surface-glass);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:none;border-radius:28px;box-shadow:var(--shadow-md),0 0 20px #a373f81f,0 0 48px #a373f80f;margin:0 auto;width:100%;max-width:640px}.control-bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:28px;padding:1px;background:linear-gradient(135deg,#a373f899,#a373f814,#a373f866);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.control-bar .control-bar-row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.control-bar .control-bar-buttons{display:flex;align-items:center;gap:16px}.control-bar .control-bar-subtitle{font-size:12px;color:var(--text-secondary);font-style:italic;opacity:.6;white-space:nowrap;-webkit-user-select:none;user-select:none}.control-bar .control-bar-label{font-size:1.1rem;font-weight:600;color:var(--text-primary);white-space:nowrap;-webkit-user-select:none;user-select:none;letter-spacing:.01em}.control-bar .action-button{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid var(--border-subtle);border-radius:50%;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;-webkit-tap-highlight-color:transparent;background:var(--bg-surface);color:var(--text-secondary)}.control-bar .action-button .material-symbols-outlined{font-size:22px;-webkit-user-select:none;user-select:none}.control-bar .action-button:hover:not(:disabled){background:var(--bg-surface-glass);color:var(--text-primary);border-color:var(--brand-primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.control-bar .action-button:active:not(:disabled){transform:translateY(0)}.control-bar .action-button:disabled{opacity:.4;cursor:not-allowed;transform:none}.control-bar .mic-button{position:relative}.control-bar .mic-button.muted{color:var(--status-error);border-color:#ef444480}.control-bar .mic-button .mic-level-ring{position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;border:2px solid var(--brand-primary);opacity:0;transition:opacity .15s ease,transform .1s ease;pointer-events:none}.control-bar .connect-toggle{background:var(--brand-primary);color:#fff;border:none;box-shadow:var(--shadow-glow);animation:pulse-glow 2s ease-in-out infinite}.control-bar .connect-toggle .material-symbols-outlined{font-size:26px}.control-bar .connect-toggle:hover:not(:disabled){background:var(--brand-primary-dark);border-color:transparent;box-shadow:0 0 20px #a373f866}.control-bar .connect-toggle.connected{background:var(--bg-surface);color:var(--status-error);border:1px solid var(--status-error)}.control-bar .connect-toggle.connected:hover:not(:disabled){background:#ef44441a;box-shadow:0 0 20px #ef444433}.control-bar .connect-toggle.connecting{background:var(--bg-surface);color:var(--text-secondary)}.control-bar .connect-toggle.connecting .material-symbols-outlined{animation:spin 1s linear infinite}.control-bar .avatar-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px}.control-bar .avatar-wrapper .kadence-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--brand-primary);box-shadow:var(--shadow-sm);transition:opacity .2s ease}.control-bar .avatar-wrapper .avatar-pulse-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#00000080;opacity:0;transition:opacity .2s ease;pointer-events:none}.control-bar .avatar-wrapper.speaking .avatar-pulse-overlay{opacity:1}.audioPulse{display:flex;align-items:center;justify-content:center;gap:3px;height:24px}.audioPulse>div{width:4px;border-radius:2px;background:#fff;transition:height .1s ease}.control-bar.layout-vertical{max-width:200px;min-height:280px;padding:20px 16px;flex-direction:column;gap:16px;border-radius:20px}.control-bar.layout-vertical .control-bar-row{flex-direction:column;align-items:center;gap:20px}.control-bar.layout-vertical .control-bar-label{font-size:1rem;text-align:center}.control-bar.layout-vertical .control-bar-buttons{flex-direction:column;gap:20px}.control-bar.layout-vertical .avatar-wrapper{width:80px;height:80px;order:2}.control-bar.layout-vertical .avatar-wrapper .kadence-avatar{width:76px;height:76px}.control-bar.layout-vertical .action-button{width:50px;height:50px}.control-bar.layout-vertical .action-button .material-symbols-outlined{font-size:26px}.control-bar.layout-vertical .control-bar-label{order:1}.control-bar.layout-vertical .avatar-wrapper{order:2}.control-bar.layout-vertical .mic-button{order:3}.control-bar.layout-vertical .connect-toggle{order:4}