:root{--color-bg-primary: #0B1020;--color-bg-surface: #111827;--color-accent-violet: #7C3AED;--color-accent-cyan: #22D3EE;--color-text-primary: #E5E7EB;--color-text-secondary: #9CA3AF;--color-text-muted: #6B7280;--color-status-listening: #22D3EE;--color-status-thinking: #7C3AED;--color-status-speaking: #10B981;--color-status-error: #EF4444;--font-family-base: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-family-mono: "JetBrains Mono", monospace;--transition-smooth: .3s ease;--animation-pulse: pulse 2s ease-in-out infinite;--color-border-subtle: rgba(124, 58, 237, .15);--color-border-violet-dim: rgba(124, 58, 237, .1);--color-border-white-subtle: rgba(255, 255, 255, .05);--color-border-white-dim: rgba(255, 255, 255, .1);--color-overlay-white-subtle: rgba(255, 255, 255, .02);--color-overlay-white-hover: rgba(255, 255, 255, .04);--color-overlay-cyan-subtle: rgba(34, 211, 238, .05);--color-overlay-cyan-hover: rgba(34, 211, 238, .08);--color-overlay-violet-subtle: rgba(124, 58, 237, .05);--color-overlay-violet-hover: rgba(124, 58, 237, .08);--color-overlay-violet-active: rgba(124, 58, 237, .2);--color-overlay-black: rgba(0, 0, 0, .3);--color-overlay-black-dim: rgba(0, 0, 0, .2);--shadow-default: 0 2px 6px rgba(0, 0, 0, .3);--shadow-violet-hover: 0 4px 12px rgba(124, 58, 237, .4);--shadow-violet-active: 0 2px 6px rgba(124, 58, 237, .3);--shadow-cyan-hover: 0 4px 12px rgba(34, 211, 238, .5);--shadow-cyan-glow-start: 0 2px 8px rgba(34, 211, 238, .4), 0 0 20px rgba(34, 211, 238, .2);--shadow-cyan-glow-mid: 0 4px 16px rgba(34, 211, 238, .6), 0 0 30px rgba(34, 211, 238, .3)}@keyframes soft-pulse{0%,to{opacity:1}50%{opacity:.7}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.App{min-height:100vh;display:flex;flex-direction:column;max-width:1200px;margin:0 auto;padding:0;background-color:var(--color-bg-primary)}.logo{display:inline-flex;align-items:center}.logo-full{gap:2px}.logo-text{font-family:var(--font-family-base);font-weight:700;font-size:32px;color:var(--color-text-primary);line-height:1}.logo-text-vox,.logo-text-duck{color:var(--color-text-primary)}.app-header{text-align:center;padding:40px 20px 20px;background-color:var(--color-bg-primary);border-bottom:1px solid var(--color-border-subtle)}.app-header h1{font-size:28px;font-weight:600;color:var(--color-text-primary);margin-bottom:8px}.app-header .logo-container{display:flex;justify-content:center;margin-bottom:8px}.app-header .tagline{font-size:14px;color:var(--color-text-secondary);font-weight:400;margin-top:8px}.app-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:40px 20px;background-color:var(--color-bg-primary)}.status-section{width:100%;max-width:600px;margin-bottom:30px}.recorder-section{width:100%;max-width:600px;display:flex;justify-content:center;margin-bottom:40px}.conversation-section{width:100%;max-width:800px;flex:1;display:flex;flex-direction:column;min-height:300px}.player-section{width:100%;max-width:600px;margin-top:20px}.app-footer{text-align:center;padding:20px;background-color:var(--color-bg-primary);border-top:1px solid var(--color-border-subtle);font-size:12px;color:var(--color-text-muted)}.app-footer p{margin:0;color:var(--color-text-muted)}@media (max-width: 768px){.app-header h1{font-size:24px}.app-header .tagline{font-size:13px}.app-main{padding:30px 20px}.conversation-section{min-height:200px}.status-section{margin-bottom:24px}.recorder-section{margin-bottom:32px}}@media (max-width: 480px){.app-header{padding:30px 16px 16px}.app-header h1{font-size:20px}.app-header .logo-text{font-size:28px}.app-main{padding:24px 16px}.status-section{margin-bottom:20px}.recorder-section{margin-bottom:28px}.player-section{margin-top:16px}}.conversation-display{width:100%;flex:1;overflow-y:auto;padding:24px;background-color:var(--color-bg-surface);border-radius:12px;box-shadow:var(--shadow-default);border:1px solid var(--color-border-white-subtle)}.conversation-display.empty{display:flex;align-items:center;justify-content:center;min-height:300px;background-color:var(--color-bg-surface)}.empty-message{color:var(--color-text-muted);font-style:italic;font-size:15px;text-align:center}.conversation-turn{margin-bottom:28px}.conversation-turn:last-child{margin-bottom:0}.message{margin-bottom:14px;padding:16px 20px;border-radius:10px;background-color:var(--color-overlay-white-subtle);border-left:4px solid var(--color-text-muted);transition:var(--transition-smooth);font-family:var(--font-family-base)}.message:hover{background-color:var(--color-overlay-white-hover)}.user-message{border-left-color:var(--color-accent-cyan);background-color:var(--color-overlay-cyan-subtle)}.user-message:hover{background-color:var(--color-overlay-cyan-hover)}.ai-message{border-left-color:var(--color-accent-violet);background-color:var(--color-overlay-violet-subtle)}.ai-message:hover{background-color:var(--color-overlay-violet-hover)}.message-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;color:var(--color-text-secondary)}.message-icon{font-size:18px}.message-label{font-weight:600;color:var(--color-text-primary);font-size:14px}.message-timestamp{margin-left:auto;font-size:11px;color:var(--color-text-muted)}.message-content{font-size:15px;line-height:1.7;color:var(--color-text-primary);white-space:pre-wrap;word-wrap:break-word;font-family:var(--font-family-base)}.message-content code{font-family:var(--font-family-mono);background-color:var(--color-overlay-black);padding:2px 6px;border-radius:4px;font-size:14px;color:var(--color-accent-cyan)}.message-content pre{font-family:var(--font-family-mono);background-color:var(--color-overlay-black);padding:12px;border-radius:6px;overflow-x:auto;margin:8px 0;border:1px solid var(--color-border-white-dim)}.message-content pre code{background-color:transparent;padding:0;border-radius:0;color:var(--color-text-primary)}.conversation-display::-webkit-scrollbar{width:8px}.conversation-display::-webkit-scrollbar-track{background:var(--color-overlay-black-dim);border-radius:4px}.conversation-display::-webkit-scrollbar-thumb{background:var(--color-text-muted);border-radius:4px}.conversation-display::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}@media (max-width: 768px){.conversation-display{padding:20px}.message{padding:14px 16px}.message-content{font-size:14px}.conversation-turn{margin-bottom:24px}}@media (max-width: 480px){.conversation-display{padding:16px;border-radius:10px}.conversation-display.empty{min-height:200px}.empty-message{font-size:14px;padding:0 20px}.conversation-turn{margin-bottom:20px}.message{padding:12px 14px;border-radius:8px}.message-header{gap:8px;margin-bottom:8px}.message-icon{font-size:16px}.message-label{font-size:13px}.message-content{font-size:14px;line-height:1.6}.message-content code{font-size:13px;padding:2px 5px}.message-content pre{padding:10px;margin:6px 0;font-size:13px}}.audio-recorder{display:flex;justify-content:center;align-items:center}.record-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px 40px;background-color:var(--color-bg-surface);border:2px solid var(--color-accent-violet);border-radius:16px;cursor:pointer;transition:var(--transition-smooth);box-shadow:var(--shadow-default);min-width:200px}.record-button:hover{border-color:var(--color-accent-violet);box-shadow:var(--shadow-violet-hover);transform:translateY(-2px)}.record-button:active{transform:translateY(0);box-shadow:var(--shadow-violet-active)}.record-button.recording{background-color:var(--color-bg-surface);border-color:var(--color-accent-cyan);animation:recording-glow 2s ease-in-out infinite}.record-button.recording:hover{border-color:var(--color-accent-cyan);box-shadow:var(--shadow-cyan-hover)}@keyframes recording-glow{0%,to{box-shadow:var(--shadow-cyan-glow-start)}50%{box-shadow:var(--shadow-cyan-glow-mid)}}.microphone-icon{font-size:48px;line-height:1}.button-label{font-size:16px;font-weight:600;color:var(--color-text-primary);letter-spacing:.3px}.record-button.recording .button-label{color:var(--color-accent-cyan)}@media (max-width: 480px){.record-button{padding:25px 35px;min-width:180px;gap:10px}.microphone-icon{font-size:40px}.button-label{font-size:15px}}.status-display{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 24px;background-color:var(--color-bg-surface);border-radius:12px;box-shadow:var(--shadow-default);border-left:4px solid var(--color-text-muted);transition:var(--transition-smooth)}.status-icon{font-size:24px;line-height:1}.status-message{font-size:15px;font-weight:500;color:var(--color-text-primary)}.spinner{font-size:20px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.status-listening{border-left-color:var(--color-status-listening);animation:soft-pulse 2s ease-in-out infinite}.status-thinking{border-left-color:var(--color-status-thinking);animation:soft-pulse 2s ease-in-out infinite}.status-playing{border-left-color:var(--color-status-speaking)}.status-ready{border-left-color:var(--color-text-muted)}.status-error{border-left-color:var(--color-status-error)}.status-error .status-message{color:var(--color-status-error)}@media (max-width: 480px){.status-display{padding:14px 20px;gap:10px;border-radius:10px}.status-icon{font-size:20px}.status-message{font-size:14px}.spinner{font-size:18px}}.audio-player{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px;background-color:var(--color-bg-surface);border-radius:12px;border:1px solid var(--color-border-violet-dim)}.audio-player audio{width:100%;max-width:500px;height:40px;outline:none}.audio-controls{display:flex;gap:12px;align-items:center}.control-button{padding:10px 20px;background-color:transparent;border:1px solid var(--color-accent-violet);border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;color:var(--color-text-primary);transition:var(--transition-smooth);font-family:var(--font-family-base)}.control-button:hover{background-color:var(--color-overlay-violet-subtle);border-color:var(--color-accent-violet)}.control-button:active{background-color:var(--color-overlay-violet-active)}@media (max-width: 480px){.audio-player{padding:16px;gap:14px}.audio-player audio{height:36px}.audio-controls{gap:10px;flex-wrap:wrap;justify-content:center}.control-button{padding:10px 18px;font-size:13px;min-width:80px}}