:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-tertiary:#1a1a25;--bg-card:rgba(20,20,30,.8);--accent-primary:#6366f1;--accent-secondary:#8b5cf6;--accent-gradient:linear-gradient(135deg,#6366f1,#8b5cf6 50%,#a855f7);--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--furina-primary:#4a9eff;--furina-secondary:#87ceeb;--raiden-primary:#9945ff;--raiden-secondary:#c77dff;--kafka-primary:#ff4d6d;--kafka-secondary:#ff758c;--nahida-primary:#50c878;--nahida-secondary:#90ee90;--hutao-primary:coral;--hutao-secondary:#ffa07a;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--radius-sm:0.375rem;--radius-md:0.75rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-md:0 4px 6px rgba(0,0,0,.4);--shadow-lg:0 10px 15px rgba(0,0,0,.5);--shadow-glow:0 0 20px rgba(99,102,241,.3);--transition-fast:150ms ease;--transition-normal:250ms ease;--transition-slow:350ms ease}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}.app-container{display:flex;min-height:100vh;position:relative}.sidebar{width:280px;background:var(--bg-secondary);border-right:1px solid hsla(0,0%,100%,.05);display:flex;flex-direction:column;padding:var(--spacing-lg);position:fixed;left:0;top:0;bottom:0;z-index:100;transition:transform var(--transition-normal)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-xl)}.sidebar-header h1{font-size:1.5rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar-exit{display:none;cursor:pointer;font-size:1.25rem;color:var(--text-secondary);transition:color var(--transition-fast)}.sidebar-exit:hover{color:var(--text-primary)}.character-profile{text-align:center;margin-bottom:var(--spacing-xl)}.character-profile img{width:120px;height:120px;border-radius:var(--radius-full);object-fit:cover;border:3px solid var(--accent-primary);box-shadow:var(--shadow-glow);margin-bottom:var(--spacing-md);transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.character-profile img:hover{transform:scale(1.05);box-shadow:0 0 30px rgba(99,102,241,.5)}.selector{margin-bottom:var(--spacing-lg)}.selector label{display:block;font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.selector select{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-tertiary);border:1px solid hsla(0,0%,100%,.1);border-radius:var(--radius-md);color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.selector select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(99,102,241,.2)}.selector select option{background:var(--bg-secondary);color:var(--text-primary)}.sidebar footer{margin-top:auto;padding-top:var(--spacing-lg);border-top:1px solid hsla(0,0%,100%,.05);text-align:center}.sidebar footer p{font-size:.75rem;color:var(--text-muted);margin-bottom:var(--spacing-sm)}.social-links{display:flex;justify-content:center;gap:var(--spacing-md)}.social-links a{color:var(--text-secondary);font-size:1.25rem;transition:color var(--transition-fast),transform var(--transition-fast)}.social-links a:hover{color:var(--accent-primary);transform:translateY(-2px)}.main-content{flex:1 1;margin-left:280px;display:flex;flex-direction:column;min-height:100vh;position:relative}.mobile-header{display:none;position:-webkit-sticky;position:sticky;top:0;z-index:50;padding:var(--spacing-md) var(--spacing-lg);background:var(--bg-secondary);border-bottom:1px solid hsla(0,0%,100%,.05)}.mobile-header .site-title{font-size:1.25rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.menu-toggle{background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;padding:var(--spacing-sm)}.aurora-bg{position:relative;overflow:hidden}.aurora-container{position:absolute;inset:0;pointer-events:none;overflow:hidden}.aurora{position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(80px);opacity:.3;animation:aurora-float 10s ease-in-out infinite}.aurora:first-child{background:var(--accent-primary);top:-100px;left:20%;animation-delay:0s}.aurora:nth-child(2){background:var(--accent-secondary);top:50%;right:10%;animation-delay:-3s}.aurora:nth-child(3){background:#a855f7;bottom:-100px;left:40%;animation-delay:-6s}@keyframes aurora-float{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-30px) scale(1.1)}50%{transform:translate(-20px,20px) scale(.9)}75%{transform:translate(-30px,-10px) scale(1.05)}}.conversation{flex:1 1;padding:var(--spacing-lg);overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-lg)}.message{max-width:80%;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-lg);animation:message-appear .3s ease-out}@keyframes message-appear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.user{background:var(--accent-gradient);color:#fff;margin-left:auto;border-bottom-right-radius:var(--spacing-xs)}.character-response,.multi-character-response{display:flex;flex-direction:column;gap:var(--spacing-md)}.character-side{display:flex;gap:var(--spacing-md)}.character-side.left{flex-direction:row}.character-bubble{background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.1);border-radius:var(--radius-lg);padding:var(--spacing-md);max-width:80%;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.character-bubble:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.character-bubble[data-character=furina]{border-left:3px solid var(--furina-primary)}.character-bubble[data-character=raiden_shogun]{border-left:3px solid var(--raiden-primary)}.character-bubble[data-character=kafka]{border-left:3px solid var(--kafka-primary)}.character-bubble[data-character=nahida]{border-left:3px solid var(--nahida-primary)}.character-bubble[data-character=hu_tao]{border-left:3px solid var(--hutao-primary)}.character-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.character-bubble-avatar{width:32px;height:32px;border-radius:var(--radius-full);object-fit:cover}.character-name{font-weight:600;font-size:.875rem;color:var(--text-secondary)}.character-text-container{line-height:1.7}.character-action{color:#a78bfa;font-style:italic;font-size:.95em;opacity:.85;background:linear-gradient(90deg,rgba(167,139,250,.1),rgba(167,139,250,.02));padding:.2rem .6rem;margin:.15rem 0;border-radius:6px;border-left:2px solid rgba(167,139,250,.5);display:inline-block;line-height:1.7;transition:all var(--transition-fast)}.character-dialogue{color:#fff;font-weight:500;text-shadow:0 0 8px hsla(0,0%,100%,.12),0 0 20px rgba(99,102,241,.08);letter-spacing:.01em;line-height:1.75;display:inline}.character-text-container{color:var(--text-primary);line-height:1.8;font-size:.95rem;padding:.5rem 0}.audio-controls{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md);padding-top:var(--spacing-sm);border-top:1px solid hsla(0,0%,100%,.05)}.audio-controls button{background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.25);border-radius:var(--radius-md);color:var(--text-secondary);padding:var(--spacing-xs) var(--spacing-sm);font-size:.75rem;cursor:pointer;display:flex;align-items:center;gap:var(--spacing-xs);transition:all var(--transition-fast);font-family:inherit}.audio-controls button:hover{background:rgba(99,102,241,.3);border-color:rgba(99,102,241,.5);color:var(--text-primary);transform:translateY(-1px)}.audio-controls button:active{transform:translateY(0)}.audio-controls button i{font-size:.7rem}.audio-enable-banner{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--accent-gradient);border-radius:var(--radius-full);padding:var(--spacing-sm) var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;box-shadow:var(--shadow-glow);animation:banner-pulse 2s ease-in-out infinite;z-index:100;color:#fff;font-size:.875rem;font-weight:500}.audio-enable-banner:hover{transform:translateX(-50%) scale(1.05);box-shadow:0 0 30px rgba(99,102,241,.5)}.audio-enable-banner i{font-size:1rem}@keyframes banner-pulse{0%,to{box-shadow:var(--shadow-glow)}50%{box-shadow:0 0 30px rgba(99,102,241,.5)}}.input-container{position:-webkit-sticky;position:sticky;bottom:0;padding:var(--spacing-lg);background:linear-gradient(transparent,var(--bg-primary) 20%)}.input-wrapper{display:flex;align-items:flex-end;gap:var(--spacing-sm);background:var(--bg-secondary);border:1px solid hsla(0,0%,100%,.1);border-radius:var(--radius-xl);padding:var(--spacing-sm) var(--spacing-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input-wrapper:focus-within{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(99,102,241,.2)}.prompt{flex:1 1;background:transparent;border:none;color:var(--text-primary);font-size:1rem;resize:none;max-height:150px;padding:var(--spacing-sm);font-family:inherit}.prompt:focus{outline:none}.prompt::placeholder{color:var(--text-muted)}.generate-btn{background:var(--accent-gradient);border:none;border-radius:var(--radius-full);width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);flex-shrink:0}.generate-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-glow)}.generate-btn:active{transform:scale(.95)}.generate-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.loading-container{gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--bg-card);border-radius:var(--radius-lg);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.loading-container img{width:48px;height:48px;border-radius:var(--radius-full);object-fit:cover}.loading-container p{color:var(--text-secondary);font-size:.875rem}.typing-dots{display:flex;gap:4px;padding:var(--spacing-sm)}.typing-dots span{width:8px;height:8px;background:var(--accent-primary);border-radius:var(--radius-full);animation:typing-bounce 1.4s ease-in-out infinite}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-10px)}}.notification{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);background:var(--bg-secondary);border:1px solid hsla(0,0%,100%,.1);border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-sm);z-index:1000;transform:translateX(calc(100% + var(--spacing-lg)));opacity:0;transition:transform var(--transition-normal),opacity var(--transition-normal)}.notification.show{transform:translateX(0);opacity:1}.notification.info{border-left:3px solid var(--accent-primary)}.notification.error{border-left:3px solid #ef4444}.notification.warning{border-left:3px solid #f59e0b}.notification-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:var(--spacing-xs);margin-left:var(--spacing-sm)}.model-notification{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-secondary);border:1px solid hsla(0,0%,100%,.1);border-radius:var(--radius-full);padding:var(--spacing-sm) var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-sm);opacity:0;transition:opacity var(--transition-normal),transform var(--transition-normal);z-index:100}.model-notification.show{opacity:1;transform:translateX(-50%) translateY(0)}.model-notification .model-name{font-size:.875rem;color:var(--text-secondary)}.context-menu{position:fixed;background:var(--bg-secondary);border:1px solid hsla(0,0%,100%,.1);border-radius:var(--radius-md);padding:var(--spacing-sm);min-width:180px;box-shadow:var(--shadow-lg);z-index:1000;display:none}.context-menu .menu-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);background:none;border:none;color:var(--text-primary);font-size:.875rem;cursor:pointer;border-radius:var(--radius-sm);transition:background var(--transition-fast)}.context-menu .menu-item:hover{background:var(--bg-tertiary)}.context-menu .menu-item i{color:var(--text-muted);width:16px}@media (max-width:768px){.sidebar{transform:translateX(-100%);width:100%;max-width:320px}.sidebar.active{transform:translateX(0)}.sidebar-exit{display:block}.main-content{margin-left:0}.mobile-header{display:flex;align-items:center;justify-content:space-between}.message{max-width:90%}.character-bubble{max-width:100%}.conversation,.input-container{padding:var(--spacing-md)}}@media (max-width:480px){.character-profile img{width:80px;height:80px}.sidebar-header h1{font-size:1.25rem}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}.loading-container{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-primary);display:flex;justify-content:center;align-items:center;z-index:9999}.loading-spinner{text-align:center;color:var(--text-primary)}.spinner{width:60px;height:60px;border-top:4px solid var(--bg-tertiary);border:4px solid var(--bg-tertiary);border-top-color:var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading-spinner p{font-size:1.1rem;margin:0;color:var(--text-secondary)}@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");