*{margin:0;padding:0;box-sizing:border-box}body,html,#root{margin:0;padding:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f8f9fa;color:#212529}.app-container{width:100%;height:100vh;background:#fff;display:flex;flex-direction:column;position:relative}.avatar-section{flex:0 0 35%;background:linear-gradient(180deg,#f8f9fa,#e9ecef);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #dee2e6}.main-avatar{width:40vw;height:auto;border-radius:50%;background:#fff;border:6px solid #e9ecef;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 12px 32px #0000001a;transition:all .3s ease}.main-avatar.speaking{box-shadow:0 12px 32px #00000026;transform:scale(1.02)}.main-avatar img,.main-avatar video{width:100%;height:100%;border-radius:50%;object-fit:cover}.avatar-placeholder{font-size:80px;color:#6c757d;font-weight:300}.speaking-indicator{position:absolute;bottom:45px;right:45px;width:28px;height:28px;background:linear-gradient(135deg,#34d058,#28a745,#20c997);border-radius:50%;border:3px solid #ffffff;box-shadow:0 3px 8px #28a7454d;opacity:1;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1);box-shadow:0 3px 8px #28a7454d}50%{transform:scale(1.1);box-shadow:0 4px 12px #28a74580}to{transform:scale(1);box-shadow:0 3px 8px #28a7454d}}.avatar-name{margin-top:20px;font-size:24px;font-weight:600;color:#212529;letter-spacing:-.5px}.avatar-status{margin-top:8px;font-size:14px;color:#6c757d;text-align:center;max-width:280px}.language-selector{position:absolute;top:20px;right:20px;display:flex;gap:6px;align-items:center}.top-left-controls{position:absolute;top:20px;left:20px;display:flex;gap:8px;align-items:center}.refresh-button,.fullscreen-button{width:36px;height:36px;border:1px solid #dee2e6;border-radius:8px;background:#fff;color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.refresh-button:hover{background:#f8f9fa;border-color:#adb5bd;transform:rotate(90deg)}.fullscreen-button:hover{background:#f8f9fa;border-color:#adb5bd;transform:scale(1.05)}.refresh-button.spinning{animation:spin 1s linear}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lang-btn{width:36px;height:36px;border:1px solid #dee2e6;border-radius:8px;background:#fff;color:#6c757d;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.lang-btn.active{background:#212529;color:#fff;border-color:#212529}.brand-logo{margin-bottom:20px;display:flex;justify-content:center;align-items:center}.brand-logo img{height:40px;width:auto;opacity:.8;transition:opacity .3s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.brand-logo img:hover{opacity:1}.chat-section{flex:1;display:flex;flex-direction:column;background:#fff}.chat-messages{flex:1;padding:24px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.message{display:flex;align-items:flex-start}.message.user{justify-content:flex-end}.message-content{max-width:85%;padding:14px 16px;border-radius:16px;font-size:24px;line-height:normal}.ai-message{background:#3b82f614;color:#212529;border:1px solid rgba(59,130,246,.1);border-radius:18px 18px 18px 4px}.user-message{background:#212529;color:#fff;border-radius:18px 18px 4px}.suggestions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.suggestion-chip{padding:6px 12px;background:#fff;border:1px solid #dee2e6;border-radius:16px;font-size:12px;color:#6c757d;cursor:pointer;transition:all .2s ease}.suggestion-chip:hover{background:#f8f9fa;border-color:#adb5bd}.product-card{background:#fff;border:1px solid #dee2e6;border-radius:12px;padding:12px;margin-top:12px;display:flex;align-items:center;gap:12px}.product-icon{width:36px;height:36px;background:#f8f9fa;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;border:1px solid #e9ecef}.product-name{font-weight:500;color:#212529;font-size:13px}.product-suggestions{background:linear-gradient(135deg,#c5a5571a,#c5a5570d);border:1px solid rgba(197,165,87,.3);border-radius:12px;padding:16px 20px;margin:12px 0;box-shadow:0 4px 12px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden;animation:slideInUp .4s ease-out}.product-suggestions:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent-color),#d4af37,var(--accent-color));opacity:.8}.product-suggestions h4{color:var(--accent-color);font-size:22px;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:8px}.product-suggestions h4:before{content:"✨";font-size:22px}.product-suggestions ul{list-style:none;padding:0;margin:0}.product-suggestions li{background:#ffffff08;border:1px solid rgba(197,165,87,.2);border-radius:8px;padding:10px 14px;margin:8px 0;color:var(--text-primary);font-size:20px;font-weight:500;transition:all .3s ease;position:relative;cursor:pointer;overflow:hidden}.product-suggestions li:before{content:"🌟";margin-right:8px;font-size:12px;opacity:.8}.product-suggestions li:hover{background:#c5a5571a;border-color:var(--accent-color);transform:translate(4px);box-shadow:0 2px 8px #c5a55733}.product-suggestions li:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-color);transform:scaleY(0);transition:transform .3s ease}.product-suggestions li:hover:after{transform:scaleY(1)}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.product-suggestions{margin:8px 0;padding:12px 16px}.product-suggestions h4{font-size:22px}.product-suggestions li{padding:8px 12px;font-size:13px}}.input-area{padding:20px;border-top:1px solid #e9ecef;background:#fff}.input-container{display:flex;gap:8px;align-items:center;background:#f8f9fa;border:1px solid #dee2e6;border-radius:12px;padding:12px 16px;transition:all .2s ease}.input-container:focus-within{border-color:#6c757d;background:#fff}.message-input{flex:1;border:none;outline:none;font-size:24px;color:#212529;background:transparent}.message-input::placeholder{color:#adb5bd}.chat-input-area{display:flex;align-items:center;padding:15px;border-top:1px solid #e9ecef;background:#fff;flex-shrink:0}.chat-input-area input{flex-grow:1;border:none;background:#f8f9fa;color:#212529;padding:15px;border-radius:12px;margin-right:10px;font-size:14px;outline:none;transition:background-color .3s;border:1px solid #dee2e6}.chat-input-area input::placeholder{color:#adb5bd}.chat-input-area input:focus{background:#fff;border-color:#6c757d}.mic-button{width:62px;height:62px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;color:#6c757d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.mic-button:hover{background:#e9ecef;border-color:#adb5bd}.mic-button.recording{background:#dc3545;border-color:#dc3545;color:#fff;animation:recording-pulse 1.5s infinite}@keyframes recording-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.send-button{width:62px;height:62px;background:#212529;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.send-button:hover{background:#495057}.send-button:disabled{background:#e9ecef;color:#adb5bd;cursor:not-allowed}.visualizer-container{display:flex;align-items:center;justify-content:center;width:130px;height:50px;margin-right:5px}.chat-input-area button{width:32px;height:32px;background:#212529;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.chat-input-area button:hover{background:#495057}.chat-input-area button:disabled{background:#e9ecef;color:#adb5bd;cursor:not-allowed}.typing-indicator{display:flex;align-items:center;gap:6px;padding:12px 16px;background:#f8f9fa;border-radius:16px;margin-top:8px;border:1px solid #e9ecef}.dot{width:4px;height:4px;background:#6c757d;border-radius:50%;animation:typing 1.4s infinite}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes typing{0%,60%,to{opacity:.3}30%{opacity:1}}.message.typing{background:#f8f9fa;width:fit-content;padding:15px;border-radius:16px;border:1px solid #e9ecef}.message.typing span{height:4px;width:4px;border-radius:50%;background-color:#6c757d;display:inline-block;margin:0 2px;animation:typing 1.4s infinite}.message.typing span:nth-of-type(1){animation-delay:0s}.message.typing span:nth-of-type(2){animation-delay:.2s}.message.typing span:nth-of-type(3){animation-delay:.4s}.chat-messages::-webkit-scrollbar{width:4px}.chat-messages::-webkit-scrollbar-track{background:transparent}.chat-messages::-webkit-scrollbar-thumb{background:#dee2e6;border-radius:2px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#adb5bd}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#dee2e6;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#adb5bd}.unsupported-browser{display:flex;justify-content:center;align-items:center;height:100vh;text-align:center}@media (max-width: 768px){.main-avatar{width:200px;height:200px}.avatar-placeholder{font-size:50px}.avatar-section{flex:0 0 35%}.avatar-name{font-size:20px}.avatar-status{font-size:12px}.brand-logo{margin-bottom:15px}.brand-logo img{height:32px}}@media (max-width: 480px){.main-avatar{width:150px;height:150px}.avatar-placeholder{font-size:40px}.avatar-section{flex:0 0 30%}.avatar-name{font-size:18px}.chat-messages,.input-area{padding:16px 12px}.language-selector{top:12px;right:12px}.refresh-section{top:12px;left:12px}.brand-logo{margin-bottom:10px}.brand-logo img{height:28px}}.streaming-video-container{width:100%;display:flex;flex-direction:column;align-items:center}.streaming-debug{display:none}.voice-settings-btn{background:var(--primary-gradient);border:none;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:16px;transition:all .3s ease;margin-left:10px}.voice-settings-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.voice-settings-panel{background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:12px;margin:15px 20px;padding:20px;box-shadow:0 4px 20px #0000001a}.voice-settings-panel h3{margin:0 0 15px;color:var(--text-primary);font-size:18px;font-weight:600}.voice-config{display:flex;gap:20px;flex-wrap:wrap}.voice-section{flex:1;min-width:250px}.voice-section h4{margin:0 0 10px;color:var(--text-primary);font-size:14px;font-weight:500}.voice-options{display:flex;flex-direction:column;gap:8px}.voice-option{background:var(--tertiary-bg);border:1px solid transparent;border-radius:8px;padding:10px 12px;cursor:pointer;transition:all .3s ease;color:var(--text-primary);font-size:13px;text-align:left}.voice-option:hover{background:var(--hover-bg);border-color:var(--border-color)}.voice-option.active{background:var(--primary-gradient);color:#fff;border-color:var(--primary-color)}.voice-option:has-text("😘"){background:linear-gradient(135deg,#ff6b9d,#ff8e8e)}.voice-option:has-text("😘"):hover{background:linear-gradient(135deg,#ff5a8c,#ff7d7d)}.voice-note{margin:15px 0 0;color:var(--text-secondary);font-size:12px;font-style:italic;text-align:center}@media (max-width: 768px){.voice-config{flex-direction:column}.voice-settings-panel{margin:10px;padding:15px}}