:root{--color-primary: #FF6B35;--color-primary-dark: #E55A2B;--color-primary-light: #FF8F66;--color-recording: #FF4757;--color-speaking: #FF6B35;--color-bg: #0a0a0a;--color-surface: #141414;--color-surface-light: #1e1e1e;--color-border: #2a2a2a;--color-text: #ffffff;--color-text-secondary: #888888;--color-text-muted: #555555;--color-success: #4CAF50;--color-warning: #FFA500;--color-error: #FF4757;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px;--shadow: 0 4px 24px rgba(0, 0, 0, .4);--transition: .3s ease}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;user-select:none;-webkit-user-select:none}.app{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto;position:relative}.header{flex-shrink:0;padding:16px 20px;border-bottom:1px solid var(--color-border);background:var(--color-surface);z-index:10}.header-content{display:flex;align-items:center;justify-content:space-between}.header-actions{display:flex;align-items:center;gap:8px}.lang-switcher{display:flex;background:var(--color-surface-light);border-radius:var(--radius-full);padding:2px;border:1px solid var(--color-border)}.lang-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;font-size:16px;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;opacity:.5}.lang-btn:hover{opacity:.8}.lang-btn.active{background:var(--color-primary);opacity:1;box-shadow:0 2px 8px #ff6b354d}.logo{display:flex;align-items:center;gap:12px}.logo-icon{font-size:28px;line-height:1}.logo-text h1{font-size:18px;font-weight:700;line-height:1.2;color:var(--color-primary)}.logo-subtitle{font-size:12px;color:var(--color-text-secondary);font-weight:400}.status-lamp{width:40px;height:40px;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface-light);cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center}.status-lamp:hover{border-color:var(--color-primary)}.status-lamp:disabled{cursor:default}.status-lamp-dot{width:10px;height:10px;border-radius:50%;display:block;background:var(--color-text-muted)}.status-lamp-disconnected .status-lamp-dot{background:var(--color-text-muted)}.status-lamp-connecting .status-lamp-dot{background:var(--color-warning);box-shadow:0 0 12px #ffa50080;animation:status-pulse 1s ease-in-out infinite}.status-lamp-connected .status-lamp-dot{background:var(--color-success);box-shadow:0 0 12px #4caf5080}.status-lamp-error .status-lamp-dot{background:var(--color-error);box-shadow:0 0 12px #ff475780}@keyframes status-pulse{0%,to{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}.status-error-banner{flex-shrink:0;padding:10px 20px;border-bottom:1px solid rgba(255,71,87,.2);background:#ff475714;color:var(--color-error);font-size:12px;line-height:1.4;text-align:center}.main{flex:1;overflow:hidden;display:flex;flex-direction:column}.voice-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:28px}.visualizer{width:100%;height:120px;display:flex;align-items:center;justify-content:center;position:relative}.visualizer canvas{width:100%;height:100%}.transcript-preview{text-align:center;padding:12px 20px;min-height:48px}.transcript-preview p{font-size:15px;color:var(--color-text-secondary);font-style:italic}.voice-button-container{position:relative;display:flex;align-items:center;justify-content:center}.voice-button{width:96px;height:96px;border-radius:50%;border:none;cursor:pointer;position:relative;transition:all var(--transition);display:flex;align-items:center;justify-content:center;outline:none;-webkit-tap-highlight-color:transparent}.voice-button-inner{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all var(--transition);position:relative;z-index:2}.voice-button.idle .voice-button-inner{background:var(--color-primary);color:#fff;box-shadow:0 0 30px #ff6b354d}.voice-button.idle:hover .voice-button-inner{background:var(--color-primary-dark);box-shadow:0 0 40px #ff6b3580;transform:scale(1.05)}.voice-button.recording .voice-button-inner{background:var(--color-recording);color:#fff;box-shadow:0 0 30px #ff475766}.voice-button.speaking .voice-button-inner{background:var(--color-speaking);color:#fff;box-shadow:0 0 30px #ff6b354d}.voice-button.disabled{opacity:.4;cursor:not-allowed}.voice-button.disabled .voice-button-inner{background:var(--color-surface-light);color:var(--color-text-muted);box-shadow:none}.pulse-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--color-recording);opacity:0;z-index:1}.ring-1{width:96px;height:96px;animation:pulse-ring 2s ease-out infinite}.ring-2{width:96px;height:96px;animation:pulse-ring 2s ease-out infinite .5s}.ring-3{width:96px;height:96px;animation:pulse-ring 2s ease-out infinite 1s}@keyframes pulse-ring{0%{transform:translate(-50%,-50%) scale(1);opacity:.6}to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}.speaking-bars{position:absolute;bottom:-12px;left:50%;transform:translate(-50%);display:flex;gap:3px;align-items:flex-end;height:16px}.speaking-bars span{width:3px;background:var(--color-speaking);border-radius:2px;animation:speaking-bar .8s ease-in-out infinite}.speaking-bars span:nth-child(1){height:4px;animation-delay:0s}.speaking-bars span:nth-child(2){height:8px;animation-delay:.1s}.speaking-bars span:nth-child(3){height:12px;animation-delay:.2s}.speaking-bars span:nth-child(4){height:6px;animation-delay:.3s}.speaking-bars span:nth-child(5){height:10px;animation-delay:.15s}@keyframes speaking-bar{0%,to{transform:scaleY(1)}50%{transform:scaleY(.3)}}.hint{font-size:13px;color:var(--color-text-muted);text-align:center;margin-top:8px}.chat-history{flex:1;overflow:hidden;display:flex;flex-direction:column}.chat-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:16px;-webkit-overflow-scrolling:touch}.chat-messages::-webkit-scrollbar{width:4px}.chat-messages::-webkit-scrollbar-track{background:transparent}.chat-messages::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:40px 20px}.chat-empty-icon{font-size:48px;opacity:.5}.chat-empty p{color:var(--color-text-secondary);font-size:15px}.chat-empty-hint{font-size:13px!important;color:var(--color-text-muted)!important;max-width:300px;line-height:1.5}.chat-message{display:flex;gap:12px;align-items:flex-start;animation:message-in .3s ease}@keyframes message-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.chat-message.user{flex-direction:row-reverse}.chat-message-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;background:var(--color-surface-light)}.chat-message.user .chat-message-avatar{background:#ff6b3526}.chat-message-content{max-width:75%;padding:10px 14px;border-radius:var(--radius-md);position:relative}.chat-message.assistant .chat-message-content{background:var(--color-surface);border:1px solid var(--color-border);border-top-left-radius:4px}.chat-message.user .chat-message-content{background:var(--color-primary);border-top-right-radius:4px}.chat-message-content p{font-size:14px;line-height:1.5;word-wrap:break-word}.chat-message-time{font-size:10px;color:var(--color-text-muted);margin-top:4px;display:block}.chat-message.user .chat-message-time{text-align:right;color:#ffffff80}.streaming-cursor{display:inline-block;animation:blink 1s step-end infinite;color:var(--color-primary);font-size:12px;margin-left:2px}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.footer{flex-shrink:0;padding:12px 20px;text-align:center;border-top:1px solid var(--color-border);background:var(--color-surface)}.footer p{font-size:11px;color:var(--color-text-muted);line-height:1.5}.footer-contacts{margin-top:4px;font-size:10px!important}@media (max-width: 380px){.voice-button{width:80px;height:80px}.voice-button svg{width:28px;height:28px}.logo-text h1{font-size:16px}}@supports (padding: env(safe-area-inset-bottom)){.header{padding-top:calc(16px + env(safe-area-inset-top))}.footer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}