:root{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Helvetica Neue,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#1c1917;background-color:#fdfcfb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}html{height:100%;overflow:hidden;-webkit-text-size-adjust:100%}body{margin:0;min-width:320px;min-height:100vh;height:100%;overflow:hidden;background:#fdfcfb}#root{min-height:100vh;height:100%}:root{--primary: #7C3AED;--primary-dark: #5B21B6;--primary-light: #8B5CF6;--accent: #CA8A04;--accent-light: #EAB308;--bg: #FDFCFB;--bg-card: #FFFFFF;--text: #1C1917;--text-secondary: #78716C;--text-muted: #D6D3D1;--separator: #E7E5E4;--surface: #F5F5F4;--shadow-sm: 0 1px 2px rgba(124, 58, 237, .08);--shadow-md: 0 4px 6px rgba(124, 58, 237, .1);--shadow-lg: 0 10px 15px rgba(124, 58, 237, .12);--shadow-xl: 0 20px 25px rgba(124, 58, 237, .15);--blur: blur(20px);--radius: 12px;--radius-lg: 16px;--radius-sm: 8px}.app-container[data-theme=blue]{--primary: #1E40AF;--primary-dark: #1E3A8A;--primary-light: #3B82F6;--accent: #CA8A04;--bg: #F8FAFC;--text: #0F172A;--text-secondary: #475569;--shadow-sm: 0 1px 2px rgba(30, 64, 175, .08);--shadow-md: 0 4px 6px rgba(30, 64, 175, .1);--shadow-lg: 0 10px 15px rgba(30, 64, 175, .12);--shadow-xl: 0 20px 25px rgba(30, 64, 175, .15)}.app-container[data-theme=green]{--primary: #059669;--primary-dark: #047857;--primary-light: #10B981;--accent: #0D9488;--bg: #F6FDF9;--text: #064E3B;--text-secondary: #34785C;--shadow-sm: 0 1px 2px rgba(5, 150, 105, .08);--shadow-md: 0 4px 6px rgba(5, 150, 105, .1);--shadow-lg: 0 10px 15px rgba(5, 150, 105, .12);--shadow-xl: 0 20px 25px rgba(5, 150, 105, .15)}.app-container[data-theme=rose]{--primary: #DB2777;--primary-dark: #BE185D;--primary-light: #EC4899;--accent: #F472B6;--bg: #FDF2F8;--text: #831843;--text-secondary: #9D174D;--shadow-sm: 0 1px 2px rgba(219, 39, 119, .08);--shadow-md: 0 4px 6px rgba(219, 39, 119, .1);--shadow-lg: 0 10px 15px rgba(219, 39, 119, .12);--shadow-xl: 0 20px 25px rgba(219, 39, 119, .15)}.app-container[data-theme=amber]{--primary: #D97706;--primary-dark: #B45309;--primary-light: #F59E0B;--accent: #92400E;--bg: #FFFBEB;--text: #78350F;--text-secondary: #92400E;--shadow-sm: 0 1px 2px rgba(217, 119, 6, .08);--shadow-md: 0 4px 6px rgba(217, 119, 6, .1);--shadow-lg: 0 10px 15px rgba(217, 119, 6, .12);--shadow-xl: 0 20px 25px rgba(217, 119, 6, .15)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-size:17px;line-height:1.4}.app-container{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bg);position:relative;overflow:hidden}.app-header{flex-shrink:0;padding:max(20px,env(safe-area-inset-top)) 20px 12px;background:transparent;z-index:10}.header-title{text-align:center}.header-title h1{font-size:24px;font-weight:600;letter-spacing:-.3px;color:var(--text)}.header-title p{font-size:13px;color:var(--text-muted);margin-top:6px;font-weight:400}.chat-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 16px 16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.chat-container::-webkit-scrollbar{display:none}.message{display:flex;flex-direction:column;max-width:85%;animation:messageSlideIn .25s ease}.message.system{align-self:center;max-width:90%}.message.user{align-self:flex-end}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.message-bubble{padding:14px 18px;border-radius:var(--radius-lg);background:var(--bg-card);box-shadow:0 2px 8px #7c3aed0f;border:1px solid var(--separator)}.message.user .message-bubble{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-bottom-right-radius:4px}.message.system .message-bubble{border-bottom-left-radius:4px}.message-text{font-size:16px;line-height:1.5;word-break:break-word;font-weight:400}.message.user .message-text{color:#fff}.message-time{font-size:11px;margin-top:6px;text-align:right}.message.user .message-time{color:#fff9}.message.system .message-time{color:var(--text-muted);text-align:left;padding-left:2px}.message.realtime .message-bubble{background:var(--surface);border-color:var(--accent);border-width:1.5px}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:var(--text-muted)}.empty-state-icon{width:64px;height:64px;margin-bottom:16px;background:linear-gradient(135deg,var(--primary-light),var(--primary));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff}.empty-state-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px}.empty-state-desc{font-size:14px;line-height:1.6;color:var(--text-muted)}.chat-controls{flex-shrink:0;padding:12px 20px max(20px,env(safe-area-inset-bottom));background:transparent;display:flex;flex-direction:column;align-items:center;gap:10px}.status-bar{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;background:var(--bg-card);border:1px solid var(--separator);border-radius:20px;font-size:12px;color:var(--text-secondary);align-self:center;box-shadow:0 2px 8px #7c3aed14}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);transition:all .2s ease}.status-dot.ready{background:#10b981;box-shadow:0 0 0 3px #10b98126}.status-dot.connecting{background:var(--accent);box-shadow:0 0 0 3px #ca8a0426;animation:pulse 1s ease-in-out infinite}.status-dot.recording{background:#dc2626;box-shadow:0 0 0 3px #dc262626;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.waveform-container{display:flex;align-items:center;justify-content:center;gap:2px;height:20px;margin:0 4px}.waveform-bar{width:2px;background:var(--accent);border-radius:1px;min-height:4px;transition:height 80ms ease}.record-container{display:flex;align-items:center;justify-content:center;gap:16px}.record-btn{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;box-shadow:var(--shadow-md);position:relative;overflow:hidden}.record-btn:hover:not(:disabled){transform:scale(1.02);background:linear-gradient(135deg,var(--primary-dark),var(--primary))}.record-btn:active:not(:disabled){transform:scale(.96)}.record-btn.recording{background:#dc2626;animation:recordPulse 1.5s ease-in-out infinite}.record-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;animation:none}.record-btn svg{color:#fff}@keyframes recordPulse{0%,to{box-shadow:0 0 #dc262666}50%{box-shadow:0 0 0 10px #dc262600}}.aux-btn{width:44px;height:44px;border-radius:50%;background:var(--bg-card);border:1px solid var(--separator);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;font-size:18px;box-shadow:0 2px 6px #0000000a}.aux-btn:hover{background:var(--surface);border-color:var(--primary);color:var(--primary)}.aux-btn:active{transform:scale(.95)}.aux-btn:disabled{opacity:.4;cursor:not-allowed}.hint-text{font-size:12px;color:var(--text-muted);text-align:center;font-weight:400}.modal-overlay{position:fixed;inset:0;background:#00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:flex-end;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all .3s ease;padding-bottom:env(safe-area-inset-bottom)}.modal-overlay.active{opacity:1;visibility:visible}.modal{background:var(--bg-card);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));width:100%;max-width:600px;border-top:1px solid var(--separator);box-shadow:0 -10px 40px #00000026;transform:translateY(100%);transition:transform .3s cubic-bezier(.16,1,.3,1)}.modal-overlay.active .modal{transform:translateY(0)}.modal-handle{width:36px;height:5px;background:var(--text-muted);border-radius:3px;margin:0 auto 20px;opacity:.5}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-title{font-size:18px;font-weight:600;color:var(--text)}.modal-close{background:transparent;border:none;color:var(--accent);font-size:15px;font-weight:500;cursor:pointer;padding:8px;transition:opacity .2s ease}.modal-close:hover{opacity:.7}.input-group{margin-bottom:16px}.input-label{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.theme-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.theme-swatch{position:relative;width:100%;padding-top:100%;border-radius:var(--radius);cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a;border:2px solid transparent;overflow:hidden}.theme-swatch-inner{position:absolute;inset:0;border-radius:var(--radius)}.theme-swatch:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026}.theme-swatch.active{border-color:var(--text);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--text)}.theme-swatch-label{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:11px;font-weight:500;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);z-index:1}.input{width:100%;padding:14px 16px;background:var(--surface);border:1px solid var(--separator);border-radius:var(--radius);color:var(--text);font-size:16px;font-family:inherit;transition:all .2s ease}.input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #7c3aed26}.input::placeholder{color:var(--text-muted)}.btn-primary{width:100%;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;padding:16px;border-radius:var(--radius);font-weight:600;font-size:16px;border:none;cursor:pointer;transition:all .15s ease;font-family:inherit}.btn-primary:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary))}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}.info-box{background:var(--surface);border-radius:var(--radius);padding:14px 16px;margin-top:16px;border:1px solid var(--separator)}.info-text{font-size:13px;line-height:1.5;color:var(--text-secondary)}.info-text a{color:var(--accent);text-decoration:none;font-weight:500}.info-text a:hover{text-decoration:underline}@media(max-width:375px){.record-btn{width:56px;height:56px}.header-title h1{font-size:20px}}@media(min-width:768px){.app-container{max-width:500px;margin:0 auto;box-shadow:var(--shadow-xl)}.modal{border-radius:var(--radius-lg);margin:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}