:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;font-weight:400;--color-primary: #667eea;--color-primary-light: #8b9cf5;--color-secondary: #764ba2;--color-accent: #f093fb;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-subtle: linear-gradient(135deg, rgba(102, 126, 234, .15) 0%, rgba(118, 75, 162, .15) 100%);--gradient-glow: linear-gradient(135deg, rgba(102, 126, 234, .4) 0%, rgba(118, 75, 162, .4) 100%);--bg-dark: #0a0a14;--bg-body: #0a0a14;--bg-card: rgba(20, 20, 35, .8);--bg-glass: rgba(255, 255, 255, .03);--bg-input: rgba(0, 0, 0, .3);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .7);--text-muted: rgba(255, 255, 255, .4);--border-subtle: rgba(255, 255, 255, .08);--border-active: rgba(102, 126, 234, .5);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 20px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .5);--shadow-glow: 0 0 30px rgba(102, 126, 234, .3);--transition-fast: .15s ease-out;--transition-normal: .25s ease-out;--transition-slow: .4s ease-out;--blur-sm: blur(8px);--blur-md: blur(16px);--blur-lg: blur(24px);--bg-gradient-1: rgba(102, 126, 234, .15);--bg-gradient-2: rgba(118, 75, 162, .15);--scrollbar-track: rgba(0, 0, 0, .2);--scrollbar-thumb: rgba(102, 126, 234, .4);--scrollbar-thumb-hover: rgba(102, 126, 234, .6);color-scheme:dark;color:var(--text-primary);background-color:var(--bg-body);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=light]{--bg-body: #f5f7fb;--bg-card: rgba(255, 255, 255, .9);--bg-glass: rgba(255, 255, 255, .7);--bg-input: rgba(0, 0, 0, .05);--text-primary: rgba(20, 20, 35, .95);--text-secondary: rgba(20, 20, 35, .7);--text-muted: rgba(20, 20, 35, .45);--border-subtle: rgba(0, 0, 0, .08);--border-active: rgba(102, 126, 234, .6);--shadow-sm: 0 2px 8px rgba(102, 126, 234, .08);--shadow-md: 0 4px 20px rgba(102, 126, 234, .12);--shadow-lg: 0 8px 40px rgba(102, 126, 234, .15);--shadow-glow: 0 0 30px rgba(102, 126, 234, .15);--bg-gradient-1: rgba(102, 126, 234, .08);--bg-gradient-2: rgba(118, 75, 162, .08);--scrollbar-track: rgba(0, 0, 0, .05);--scrollbar-thumb: rgba(102, 126, 234, .3);--scrollbar-thumb-hover: rgba(102, 126, 234, .5);color-scheme:light;color:var(--text-primary);background-color:var(--bg-body)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 20% 0%,var(--bg-gradient-1) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,var(--bg-gradient-2) 0%,transparent 50%),var(--bg-body);transition:background-color var(--transition-slow),color var(--transition-slow)}a{font-weight:500;color:var(--color-primary);text-decoration:none;transition:color var(--transition-normal)}a:hover{color:var(--color-primary-light)}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3}h1{font-size:1.75rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}::selection{background:#667eea66;color:#fff}[data-theme=light] ::selection{color:#1a1a2e}#root{width:100%;height:100vh;margin:0;padding:0}.app-container{display:flex;height:100vh;overflow:hidden}.sidebar{width:380px;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;flex-shrink:0;position:relative;background:var(--bg-card);-webkit-backdrop-filter:var(--blur-md);backdrop-filter:var(--blur-md);border-right:1px solid var(--border-subtle)}.sidebar:after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent 0%,rgba(102,126,234,.5) 30%,rgba(118,75,162,.5) 70%,transparent 100%)}.sidebar-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.sidebar-header h1{font-size:1.5rem;margin:0;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-actions{display:flex;align-items:center;gap:.5rem}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:10px;background:var(--bg-glass);border:1px solid var(--border-subtle);color:var(--text-muted);cursor:pointer;transition:all var(--transition-normal)}.theme-toggle:hover{color:var(--color-primary);background:var(--gradient-subtle);border-color:var(--border-active);transform:scale(1.05)}.theme-toggle svg{transition:transform var(--transition-normal)}.theme-toggle:hover svg{transform:rotate(15deg)}.github-link{color:var(--text-muted);display:flex;align-items:center;transition:all var(--transition-normal);text-decoration:none;flex-shrink:0;padding:.5rem;border-radius:8px}.github-link:hover{color:var(--color-primary);background:var(--bg-glass);transform:scale(1.1)}.github-link svg{width:24px;height:24px}.image-preview-container{flex-grow:1;background:var(--bg-glass);border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);position:relative;transition:all var(--transition-normal)}.image-preview-container:before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(135deg,rgba(102,126,234,.3) 0%,transparent 50%,rgba(118,75,162,.3) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.image-preview-container:hover{border-color:var(--border-active);box-shadow:var(--shadow-glow)}.preview-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}.placeholder{color:var(--text-muted);font-size:.95rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}.placeholder:before{content:"🖼️";font-size:2rem;opacity:.5}.controls{display:flex;flex-direction:column;gap:.75rem}button,.btn{border-radius:12px;border:1px solid var(--border-subtle);padding:.75rem 1.25rem;font-size:.95rem;font-weight:500;font-family:inherit;background:var(--bg-glass);color:var(--text-primary);cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}button:before{content:"";position:absolute;inset:0;background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-normal)}button:hover:not(:disabled){border-color:var(--border-active);transform:translateY(-2px);box-shadow:var(--shadow-md),0 0 20px #667eea33}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.4;cursor:not-allowed;transform:none}button span,button{position:relative;z-index:1}.btn.primary{background:var(--gradient-primary);border:none;color:#fff;font-weight:600;box-shadow:var(--shadow-sm)}.btn.primary:hover:not(:disabled){box-shadow:var(--shadow-md),var(--shadow-glow);filter:brightness(1.1)}.btn.secondary{background:#6c757d33;border-color:#6c757d4d}.btn.secondary:hover:not(:disabled){background:#6c757d4d;border-color:#6c757d80}.btn.small{font-size:.85rem;padding:.5rem 1rem;border-radius:8px;background:var(--gradient-subtle);border-color:var(--border-subtle)}.btn.small:hover:not(:disabled){background:var(--gradient-glow)}.draw-input-area{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);padding:1rem;border-radius:12px;display:flex;flex-direction:column;gap:.75rem;border:1px solid var(--border-subtle);animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.draw-input-area textarea{width:100%;min-height:80px;padding:.75rem;border:1px solid var(--border-subtle);border-radius:8px;font-size:.9rem;resize:vertical;background:#0000004d;color:var(--text-primary);font-family:inherit;transition:all var(--transition-normal)}.draw-input-area textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #667eea1a}.draw-input-area textarea::placeholder{color:var(--text-muted)}.chat-container{flex-grow:1;display:flex;flex-direction:column;background:transparent;position:relative}.messages-list{flex-grow:1;overflow-y:auto;padding:3rem 2rem 2rem;display:flex;flex-direction:column;gap:1.25rem}.message{display:flex;flex-direction:column;max-width:75%;animation:messageSlide .3s ease-out}@keyframes messageSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.user{align-self:flex-end;align-items:flex-end}.message.model,.message.system{align-self:flex-start;align-items:flex-start}.message.audio{align-self:flex-start;align-items:flex-start;max-width:100%;width:100%}.message.audio .message-content{width:100%;max-width:800px}.message-content{padding:1rem 1.25rem;border-radius:16px;box-shadow:var(--shadow-sm);position:relative}.message-content p{margin:0;line-height:1.5}.message.user .message-content{background:var(--gradient-primary);color:#fff;border-bottom-right-radius:4px}.message.model .message-content{background:var(--bg-card);-webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);border:1px solid var(--border-subtle);border-bottom-left-radius:4px}.message.system .message-content{background:transparent;border:1px dashed var(--border-subtle);color:var(--text-muted);font-style:italic;font-size:.9rem}.comic-text-block{margin-top:1rem;background:#0006;padding:1rem;border-radius:10px;border:1px solid var(--border-subtle);position:relative}.comic-text-block:before{content:"📝 漫画文本";position:absolute;top:-.7rem;left:1rem;background:var(--bg-card);padding:0 .5rem;font-size:.75rem;color:var(--text-muted);border-radius:4px}.comic-text-block pre{white-space:pre-wrap;font-family:SF Mono,Menlo,Monaco,monospace;font-size:.85rem;color:var(--text-secondary);margin:.5rem 0 1rem;line-height:1.6}.audio-player-v2{margin-top:1rem;background:#0000004d;padding:1.25rem;border-radius:12px;display:flex;flex-direction:column;gap:1rem;border:1px solid var(--border-subtle);width:100%;position:relative;box-shadow:inset 0 0 10px #0003}.audio-info{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-muted)}.audio-icon{font-size:1.1rem}.audio-player-v2 audio{width:100%;height:44px;border-radius:8px;filter:invert(1) hue-rotate(180deg) brightness(1.5)}[data-theme=light] .audio-player-v2 audio{filter:none}.download-link{position:absolute;top:.75rem;right:.75rem;color:var(--text-muted);transition:all var(--transition-normal);padding:.4rem;border-radius:6px;display:flex;align-items:center;justify-content:center}.download-link:hover{color:var(--color-primary);background:var(--bg-glass);transform:translateY(-2px)}.voice-settings-panel{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);padding:1.25rem;border-radius:12px;border:1px solid var(--border-subtle);animation:slideDown .3s ease-out;display:flex;flex-direction:column;gap:1rem}.voice-settings-panel h3{margin:0;font-size:1rem;color:var(--text-primary);opacity:.9}.voice-setting-item{display:flex;flex-direction:column;gap:.5rem}.voice-setting-item label{font-size:.85rem;color:var(--text-secondary)}.voice-setting-item select{background:#0006;color:var(--text-primary);border:1px solid var(--border-subtle);padding:.6rem;border-radius:8px;font-family:inherit;font-size:.9rem;cursor:pointer;transition:all var(--transition-normal)}[data-theme=light] .voice-setting-item select{background:#fffc}.voice-setting-item select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #667eea1a}.input-area{padding:1.25rem 2rem;background:var(--bg-card);-webkit-backdrop-filter:var(--blur-md);backdrop-filter:var(--blur-md);border-top:1px solid var(--border-subtle);display:flex;gap:1rem;position:relative}.input-area:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent 0%,rgba(102,126,234,.5) 20%,rgba(118,75,162,.5) 80%,transparent 100%)}.input-area input{flex-grow:1;padding:.9rem 1.25rem;border-radius:12px;border:1px solid var(--border-subtle);background:#0000004d;color:var(--text-primary);font-size:.95rem;font-family:inherit;transition:all var(--transition-normal)}.input-area input::placeholder{color:var(--text-muted)}.input-area input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #667eea26,var(--shadow-sm)}.input-area input:disabled{opacity:.5}.input-area button{background:var(--gradient-primary);border:none;color:#fff;font-weight:600;padding:.75rem 1.5rem;min-width:80px}.input-area button:hover:not(:disabled){filter:brightness(1.1);box-shadow:var(--shadow-md),var(--shadow-glow)}.message.system p{display:flex;align-items:center;gap:.5rem}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}@media(max-width:900px){.app-container{flex-direction:column}.sidebar{width:100%;height:auto;max-height:50vh;border-right:none;border-bottom:1px solid var(--border-subtle);overflow-y:auto;padding:1.25rem}.sidebar:after{display:none}.chat-container{height:50vh}.message{max-width:90%}.sidebar-header h1{font-size:1.25rem}}@media(max-width:600px){.sidebar{max-height:60vh}.chat-container{height:40vh}.input-area{padding:1rem;gap:.5rem}.input-area input{padding:.75rem 1rem}.input-area button{padding:.75rem 1rem;min-width:60px}}@media(max-width:480px){.sidebar{padding:1rem;gap:1rem}.sidebar-header{flex-wrap:wrap;gap:.5rem}.header-actions{width:100%;justify-content:flex-end}.messages-list{padding:1rem;gap:1rem}.btn{padding:.85rem 1.25rem;font-size:1rem}.voice-settings-panel,.draw-input-area{padding:.75rem}.audio-player-v2{padding:1rem}.audio-player-v2 audio{height:36px}}[data-theme=light] .sidebar{background:#ffffffd9;border-right-color:#667eea1a;box-shadow:4px 0 20px #667eea0d}[data-theme=light] .sidebar:after{background:linear-gradient(to bottom,transparent 0%,rgba(102,126,234,.3) 30%,rgba(118,75,162,.3) 70%,transparent 100%)}[data-theme=light] .image-preview-container{background:#ffffff80;border-color:#667eea26}[data-theme=light] button,[data-theme=light] .btn{background:#fff;border-color:#667eea33;color:var(--text-primary);box-shadow:0 2px 6px #0000000d}[data-theme=light] .btn.primary,[data-theme=light] .input-area button{background:var(--gradient-primary);color:#fff;border:none;box-shadow:0 4px 14px #667eea4d}[data-theme=light] button:hover:not(:disabled),[data-theme=light] .btn:hover:not(:disabled){background:#f8f9fa;box-shadow:0 4px 12px #0000001a;color:var(--color-primary)}[data-theme=light] .btn.primary:hover:not(:disabled),[data-theme=light] .input-area button:hover:not(:disabled){background:var(--gradient-primary);color:#fff;box-shadow:0 6px 20px #667eea66;filter:brightness(1.05)}[data-theme=light] .message.user .message-content{box-shadow:0 4px 15px #667eea40}[data-theme=light] .message.model .message-content{background:#ffffffe6;border-color:#667eea26;box-shadow:0 2px 10px #0000000d}[data-theme=light] .comic-text-block{background:#667eea0d;border-color:#667eea26}[data-theme=light] .comic-text-block:before{background:#ffffffe6}[data-theme=light] .input-area{background:#ffffffe6;border-top-color:#667eea1a}[data-theme=light] .input-area input{background:#fffc;border-color:#667eea33}[data-theme=light] .input-area input:focus{background:#fff;border-color:var(--color-primary)}[data-theme=light] .draw-input-area{background:#ffffffb3;border-color:#667eea26}[data-theme=light] .draw-input-area textarea{background:#ffffffe6;border-color:#667eea33}.app-container,.sidebar,.chat-container,.message-content,.input-area,.input-area input,button,.btn,.image-preview-container,.draw-input-area,.draw-input-area textarea,.comic-text-block{transition:background-color var(--transition-slow),border-color var(--transition-slow),box-shadow var(--transition-slow),color var(--transition-slow)}