.glassmorphism-sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0!important;z-index:var(--z-sidebar)!important;background:rgba(255,255,255,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid rgba(255,255,255,.2);background-image:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.1) 100%);transition:all .3s ease;box-shadow:8px 0 32px #0000004d;width:var(--sidebar-width);padding:var(--spacing-2xl) 0}.glassmorphism-sidebar:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(123,67,151,.1) 0%,rgba(220,66,37,.1) 25%,rgba(74,144,226,.1) 50%,rgba(80,227,194,.1) 75%,rgba(245,101,101,.1) 100%);opacity:.6;z-index:-1;border-radius:inherit}.sidebar-content{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%}.sidebar-top,.sidebar-center,.sidebar-bottom{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.sidebar-center{flex:1;justify-content:center}.sidebar-bottom{justify-content:flex-end}.x-logo-link{display:flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);border-radius:calc(12px * var(--responsive-scale));background:linear-gradient(135deg,#ff6b9d,#ff8fab);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);text-decoration:none;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.x-logo-link:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.x-logo-link:hover:before{left:100%}.x-logo-link:hover{background:linear-gradient(135deg,#ff5722,#ff9800);border-color:#ffffff4d;transform:translateY(calc(-2px * var(--responsive-scale)));box-shadow:0 calc(8px * var(--responsive-scale)) calc(32px * var(--responsive-scale)) #0000001a,0 calc(4px * var(--responsive-scale)) calc(16px * var(--responsive-scale)) #ff6b9d66}.x-logo-link:active{transform:translateY(0);transition-duration:.1s}.x-logo{width:calc(20px * var(--responsive-scale));height:calc(20px * var(--responsive-scale));transition:all .3s ease;filter:drop-shadow(0 calc(2px * var(--responsive-scale)) calc(4px * var(--responsive-scale)) rgba(0,0,0,.1))}.x-logo-link img.x-logo{width:calc(26px * var(--responsive-scale));height:calc(26px * var(--responsive-scale));mix-blend-mode:screen;filter:drop-shadow(0 calc(2px * var(--responsive-scale)) calc(4px * var(--responsive-scale)) rgba(0,0,0,.1))}.x-logo-link:hover .x-logo{transform:scale(1.1);filter:drop-shadow(0 calc(4px * var(--responsive-scale)) calc(8px * var(--responsive-scale)) rgba(0,0,0,.2))}.x-logo-link:hover img.x-logo{transform:scale(1.1);mix-blend-mode:screen;filter:drop-shadow(0 calc(4px * var(--responsive-scale)) calc(8px * var(--responsive-scale)) rgba(0,0,0,.2))}@media (max-width: 1366px){.glassmorphism-sidebar{width:calc(70px * var(--responsive-scale));padding:calc(1.5rem * var(--responsive-scale)) 0}.sidebar-bottom{gap:calc(10px * var(--responsive-scale))}.x-logo-link{width:calc(44px * var(--responsive-scale));height:calc(44px * var(--responsive-scale))}.x-logo{width:calc(18px * var(--responsive-scale));height:calc(18px * var(--responsive-scale))}}@media (max-width: 1024px){.glassmorphism-sidebar{width:calc(65px * var(--responsive-scale));padding:calc(1.2rem * var(--responsive-scale)) 0}.x-logo-link{width:calc(40px * var(--responsive-scale));height:calc(40px * var(--responsive-scale))}.x-logo{width:calc(16px * var(--responsive-scale));height:calc(16px * var(--responsive-scale))}}@media (max-width: 768px){.glassmorphism-sidebar{width:calc(60px * var(--responsive-scale));padding:calc(1rem * var(--responsive-scale)) 0}.sidebar-bottom{gap:calc(8px * var(--responsive-scale))}.x-logo-link{width:calc(36px * var(--responsive-scale));height:calc(36px * var(--responsive-scale))}.x-logo{width:calc(14px * var(--responsive-scale));height:calc(14px * var(--responsive-scale))}}@media (max-width: 480px){.glassmorphism-sidebar{width:calc(55px * var(--responsive-scale));padding:calc(.8rem * var(--responsive-scale)) 0}.sidebar-bottom{gap:calc(6px * var(--responsive-scale))}.x-logo-link{width:calc(32px * var(--responsive-scale));height:calc(32px * var(--responsive-scale))}.x-logo{width:calc(12px * var(--responsive-scale));height:calc(12px * var(--responsive-scale))}}@media (min-width: 2560px){.glassmorphism-sidebar{width:calc(90px * var(--responsive-scale));padding:calc(2.5rem * var(--responsive-scale)) 0}.x-logo-link{width:calc(56px * var(--responsive-scale));height:calc(56px * var(--responsive-scale))}.x-logo{width:calc(24px * var(--responsive-scale));height:calc(24px * var(--responsive-scale))}}@media (prefers-reduced-motion: reduce){.glassmorphism-sidebar,.x-logo-link,.x-logo,.x-logo-link:before{transition:none}.x-logo-link:hover:before{left:0;opacity:.2}}.grow-button-header{display:flex;align-items:center;justify-content:center;width:auto;height:var(--button-height);padding:0 calc(16px * var(--responsive-scale));background:linear-gradient(135deg,#ff6b9d,#ff8fab);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:calc(12px * var(--responsive-scale));text-decoration:none;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;cursor:pointer}.grow-button-header:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.grow-button-header:hover:before{left:100%}.grow-button-header:hover{background:linear-gradient(135deg,#ff5722,#ff9800);border-color:#ffffff4d;transform:translateY(calc(-2px * var(--responsive-scale)));box-shadow:0 calc(8px * var(--responsive-scale)) calc(32px * var(--responsive-scale)) #0000001a,0 calc(4px * var(--responsive-scale)) calc(16px * var(--responsive-scale)) #ff6b9d66}.grow-button-header:active{transform:translateY(0);transition-duration:.1s}.grow-text-header{font-size:calc(12px * var(--responsive-scale));font-weight:700;letter-spacing:calc(.5px * var(--responsive-scale));text-shadow:0 calc(1px * var(--responsive-scale)) calc(2px * var(--responsive-scale)) rgba(0,0,0,.3)}.x-logo-link:focus-visible,.grow-button-header:focus-visible{outline:calc(2px * var(--responsive-scale)) solid rgba(255,255,255,.8);outline-offset:calc(2px * var(--responsive-scale))}.chat-interface{position:fixed;top:0;left:var(--sidebar-width);width:var(--chat-width);height:100vh;background:linear-gradient(135deg,#ff6b9d,#ff8fab);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:0 calc(20px * var(--responsive-scale)) calc(20px * var(--responsive-scale)) 0;border:1px solid rgba(255,255,255,.2);border-left:none;box-shadow:calc(8px * var(--responsive-scale)) 0 calc(32px * var(--responsive-scale)) #0000001a,calc(4px * var(--responsive-scale)) 0 calc(16px * var(--responsive-scale)) #ff6b9d66;display:flex;flex-direction:column;z-index:var(--z-chat);overflow:hidden;transform:translate(calc(-340px * var(--responsive-scale)));transition:transform .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.chat-interface.open{transform:translate(0)}.chat-interface:after{content:"CHAT";position:absolute;right:calc(2px * var(--responsive-scale));top:50%;transform:translateY(-50%) rotate(90deg);font-family:Gilroy,Arial,sans-serif;font-size:calc(24px * var(--responsive-scale));font-weight:900;color:#fff;letter-spacing:calc(.1em * var(--responsive-scale));text-shadow:0 calc(2px * var(--responsive-scale)) calc(4px * var(--responsive-scale)) rgba(0,0,0,.3);pointer-events:none;opacity:.9}.chat-messages{flex:1;overflow-y:auto;padding:var(--spacing-xl);display:flex;flex-direction:column;gap:calc(12px * var(--responsive-scale))}.chat-messages::-webkit-scrollbar{width:calc(6px * var(--responsive-scale))}.chat-messages::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:calc(3px * var(--responsive-scale))}.chat-messages::-webkit-scrollbar-thumb{background:rgba(255,192,203,.5);border-radius:calc(3px * var(--responsive-scale))}.welcome-message{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-xl);background:rgba(255,255,255,.2);border-radius:calc(15px * var(--responsive-scale));border:1px solid rgba(255,255,255,.3);margin-bottom:calc(10px * var(--responsive-scale));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.waifu-avatar{font-size:calc(40px * var(--responsive-scale));animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(calc(-10px * var(--responsive-scale)))}60%{transform:translateY(calc(-5px * var(--responsive-scale)))}}.welcome-text{color:#fff;font-size:calc(14px * var(--responsive-scale));line-height:1.4;text-shadow:0 calc(1px * var(--responsive-scale)) calc(2px * var(--responsive-scale)) rgba(0,0,0,.8)}.welcome-text p{margin:calc(5px * var(--responsive-scale)) 0}.message{display:flex;margin-bottom:calc(8px * var(--responsive-scale))}.user-message{justify-content:flex-end}.waifu-message{justify-content:flex-start}.message-content{max-width:70%;padding:calc(12px * var(--responsive-scale)) calc(16px * var(--responsive-scale));border-radius:calc(18px * var(--responsive-scale));position:relative}.user-message .message-content{background:linear-gradient(135deg,#ff6b9d,#ff8fab);color:#fff;border-bottom-right-radius:calc(6px * var(--responsive-scale))}.waifu-message .message-content{background:rgba(255,255,255,.25);color:#fff;border:1px solid rgba(255,255,255,.4);border-bottom-left-radius:calc(6px * var(--responsive-scale));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.message-text{font-size:calc(14px * var(--responsive-scale));line-height:1.4;word-wrap:break-word;text-shadow:0 calc(1px * var(--responsive-scale)) calc(2px * var(--responsive-scale)) rgba(0,0,0,.6)}.message-time{font-size:calc(10px * var(--responsive-scale));opacity:.7;margin-top:calc(4px * var(--responsive-scale));text-align:right}.typing-indicator{display:flex;gap:calc(8px * var(--responsive-scale));align-items:center;padding:calc(8px * var(--responsive-scale)) 0}.typing-indicator span{font-size:calc(16px * var(--responsive-scale));animation:pulse 1.5s infinite}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.chat-input-container{display:flex;padding:calc(15px * var(--responsive-scale)) var(--spacing-xl);gap:calc(10px * var(--responsive-scale));border-top:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.chat-input{flex:1;padding:calc(12px * var(--responsive-scale)) calc(16px * var(--responsive-scale));border:none;border-radius:calc(25px * var(--responsive-scale));background:rgba(255,255,255,.2);color:#fff;font-size:calc(14px * var(--responsive-scale));outline:none;transition:all .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.chat-input::placeholder{color:#fff9}.chat-input:focus{background:rgba(255,255,255,.3);box-shadow:0 0 0 calc(2px * var(--responsive-scale)) #ffffff80}.chat-input:disabled{opacity:.5;cursor:not-allowed}.send-button{width:calc(45px * var(--responsive-scale));height:calc(45px * var(--responsive-scale));border:none;border-radius:50%;background:linear-gradient(135deg,#ff6b9d,#ff8fab);color:#fff;font-size:calc(18px * var(--responsive-scale));cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.send-button:hover:not(:disabled){transform:scale(1.1);box-shadow:0 calc(4px * var(--responsive-scale)) calc(15px * var(--responsive-scale)) #ff6b9d66}.send-button:disabled{opacity:.5;cursor:not-allowed;transform:none}@media (max-width: 1366px){.chat-interface{left:calc(70px * var(--responsive-scale));width:calc(350px * var(--responsive-scale));transform:translate(calc(-290px * var(--responsive-scale)))}.chat-interface:after{font-size:calc(20px * var(--responsive-scale));right:calc(1px * var(--responsive-scale))}.chat-messages{padding:calc(15px * var(--responsive-scale))}.message-content{max-width:80%}.welcome-message{padding:calc(15px * var(--responsive-scale))}.waifu-avatar{font-size:calc(30px * var(--responsive-scale))}.welcome-text{font-size:calc(13px * var(--responsive-scale))}}@media (max-width: 1024px){.chat-interface{left:calc(65px * var(--responsive-scale));width:calc(320px * var(--responsive-scale));transform:translate(calc(-260px * var(--responsive-scale)))}.chat-interface:after{font-size:calc(18px * var(--responsive-scale));right:calc(1px * var(--responsive-scale))}}@media (max-width: 768px){.chat-interface{left:calc(60px * var(--responsive-scale));width:calc(300px * var(--responsive-scale));transform:translate(calc(-240px * var(--responsive-scale)))}.chat-interface:after{font-size:calc(16px * var(--responsive-scale));right:calc(1px * var(--responsive-scale))}}@media (max-width: 480px){.chat-interface{left:calc(55px * var(--responsive-scale));width:calc(280px * var(--responsive-scale));transform:translate(calc(-225px * var(--responsive-scale)))}.chat-interface:after{font-size:calc(14px * var(--responsive-scale));right:calc(1px * var(--responsive-scale))}}@media (min-width: 2560px){.chat-interface{left:calc(90px * var(--responsive-scale));width:calc(450px * var(--responsive-scale));transform:translate(calc(-380px * var(--responsive-scale)))}.chat-interface:after{font-size:calc(28px * var(--responsive-scale));right:calc(3px * var(--responsive-scale))}}.session-setup{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:calc(15px * var(--responsive-scale));text-align:center;overflow:hidden}.welcome-header{margin-bottom:var(--spacing-xl)}.welcome-header h2{color:#fff;font-size:calc(20px * var(--responsive-scale));font-weight:700;margin-bottom:calc(8px * var(--responsive-scale));text-shadow:0 calc(2px * var(--responsive-scale)) calc(4px * var(--responsive-scale)) rgba(0,0,0,.3)}.ani-brand{font-family:Gilroy,sans-serif;font-weight:900;font-style:normal}.welcome-header p{color:#fff;font-size:calc(14px * var(--responsive-scale));margin:calc(3px * var(--responsive-scale)) 0;opacity:.9}.access-note{font-size:calc(12px * var(--responsive-scale))!important;opacity:.7!important;font-style:italic}.username-input-container{display:flex;flex-direction:column;gap:calc(12px * var(--responsive-scale));width:100%;max-width:calc(280px * var(--responsive-scale))}.username-input{padding:calc(12px * var(--responsive-scale)) calc(16px * var(--responsive-scale));border:none;border-radius:calc(25px * var(--responsive-scale));background:rgba(255,255,255,.2);color:#fff;font-size:calc(14px * var(--responsive-scale));outline:none;transition:all .3s ease;text-align:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.username-input::placeholder{color:#fff9}.username-input:focus{background:rgba(255,255,255,.3);box-shadow:0 0 0 calc(2px * var(--responsive-scale)) #ffffff80}.start-session-button{padding:calc(12px * var(--responsive-scale)) calc(24px * var(--responsive-scale));border:none;border-radius:calc(25px * var(--responsive-scale));background:linear-gradient(135deg,#ff6b9d,#ff8fab);color:#fff;font-size:calc(14px * var(--responsive-scale));font-weight:700;cursor:pointer;transition:all .3s ease}.start-session-button:hover:not(:disabled){background:linear-gradient(135deg,#ff5722,#ff9800);transform:translateY(calc(-2px * var(--responsive-scale)));box-shadow:0 calc(4px * var(--responsive-scale)) calc(15px * var(--responsive-scale)) #ff6b9d66}.start-session-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.message{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(calc(10px * var(--responsive-scale)))}to{opacity:1;transform:translateY(0)}}@font-face{font-family:Gilroy;src:url(/fonts/Gilroy-Heavy.woff2) format("woff2"),url(/fonts/Gilroy-Heavy.woff) format("woff");font-weight:900;font-style:normal;font-display:swap}:root{--base-width: 1920px;--base-height: 1080px;--scale-factor: min(1vw / 19.2, 1vh / 10.8);--scale-factor-min: .8;--scale-factor-max: 1.2;--responsive-scale: clamp(var(--scale-factor-min), var(--scale-factor), var(--scale-factor-max));--device-pixel-ratio: 1;--os-scale-adjustment: 1;--spacing-xs: calc(4px * var(--responsive-scale) * var(--os-scale-adjustment));--spacing-sm: calc(8px * var(--responsive-scale) * var(--os-scale-adjustment));--spacing-md: calc(16px * var(--responsive-scale) * var(--os-scale-adjustment));--spacing-lg: calc(24px * var(--responsive-scale) * var(--os-scale-adjustment));--spacing-xl: calc(32px * var(--responsive-scale) * var(--os-scale-adjustment));--spacing-2xl: calc(48px * var(--responsive-scale) * var(--os-scale-adjustment));--spacing-3xl: calc(64px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-xs: calc(12px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-sm: calc(14px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-base: calc(16px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-lg: calc(18px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-xl: calc(20px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-2xl: calc(24px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-3xl: calc(32px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-4xl: calc(48px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-5xl: calc(64px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-6xl: calc(96px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-7xl: calc(128px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-8xl: calc(192px * var(--responsive-scale) * var(--os-scale-adjustment));--font-size-9xl: calc(256px * var(--responsive-scale) * var(--os-scale-adjustment));--sidebar-width: calc(80px * var(--responsive-scale) * var(--os-scale-adjustment));--chat-width: calc(400px * var(--responsive-scale) * var(--os-scale-adjustment));--chat-height: calc(250px * var(--responsive-scale) * var(--os-scale-adjustment));--button-height: calc(48px * var(--responsive-scale) * var(--os-scale-adjustment));--icon-size: calc(48px * var(--responsive-scale) * var(--os-scale-adjustment));--z-background: 1;--z-canvas: 10;--z-text: 5;--z-chat: 9998;--z-sidebar: 9999;--z-button: 15}*{box-sizing:border-box}html{font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}.App{position:relative;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.main-content{width:100%;height:100vh;position:relative;padding-left:var(--sidebar-width);z-index:var(--z-background)}canvas{display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:var(--z-canvas);pointer-events:auto}@media (max-width: 1366px){:root{--scale-factor-min: .75;--scale-factor-max: 1.1}}@media (max-width: 1024px){:root{--scale-factor-min: .7;--scale-factor-max: 1}}@media (max-width: 768px){:root{--scale-factor-min: .65;--scale-factor-max: .9}}@media (max-width: 480px){:root{--scale-factor-min: .6;--scale-factor-max: .8}}@media (min-width: 2560px){:root{--scale-factor-min: 1.1;--scale-factor-max: 1.4}}@media (min-width: 3840px){:root{--scale-factor-min: 1.2;--scale-factor-max: 1.6}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){:root{--scale-factor: clamp(.8, min(1vw / 19.2, 1vh / 10.8), 1.1)}}@media (orientation: landscape) and (max-height: 600px){:root{--scale-factor-min: .6;--scale-factor-max: .8}}@media (orientation: portrait) and (max-width: 768px){:root{--scale-factor-min: .5;--scale-factor-max: .7}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast: high){:root{--spacing-xs: calc(6px * var(--responsive-scale));--spacing-sm: calc(12px * var(--responsive-scale));--spacing-md: calc(20px * var(--responsive-scale))}}@media print{.App{background:white!important}canvas,.glassmorphism-sidebar,.chat-interface{display:none!important}}