@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background:linear-gradient(135deg,#f0fdfa,#ecfdf5 30%,#f0f9ff 70%,#fef3c7);color:#0f172a;min-height:100vh;min-height:100dvh;overflow:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 20%,rgba(16,185,129,.06) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(59,130,246,.05) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(251,191,36,.04) 0%,transparent 50%);pointer-events:none;z-index:-1}.app-container{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100%;padding:20px 32px;gap:20px}.header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#ffffffe6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(16,185,129,.12);border-radius:16px;flex-shrink:0}.logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;background:linear-gradient(135deg,#059669,#0891b2);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.app-icon{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#10b981,#06b6d4);background-image:url(/assets/nester-icon-AGcZuK4Q.png);background-size:contain;background-repeat:no-repeat;background-position:center;box-shadow:0 4px 12px #10b98140}.header-status{display:flex;align-items:center}.status-indicator{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#f8fafccc;border-radius:20px;border:1px solid rgba(226,232,240,.8)}.status-dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1;transition:all .3s ease}.status-dot.connected{background:#10b981;box-shadow:0 0 8px #10b98199}.status-text{font-size:12px;font-weight:500;color:#64748b}.hero-section{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;padding:40px;background:#fff9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(16,185,129,.1);border-radius:24px}.avatar-area{display:flex;flex-direction:column;align-items:center;gap:24px}.avatar-circle{position:relative;width:160px;height:160px;display:flex;align-items:center;justify-content:center}.avatar-pulse{position:absolute;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#10b98126,#06b6d41a);animation:avatarPulse 3s ease-in-out infinite}.avatar-inner{position:relative;width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,#10b981,#06b6d4);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 12px 40px #10b9814d,0 6px 16px #06b6d433;z-index:2}.avatar-inner svg{width:56px;height:56px;position:absolute;transition:opacity .3s ease,transform .3s ease}.avatar-icon-voice{opacity:1}.avatar-icon-video,.avatar-area.video-mode .avatar-icon-voice{opacity:0}.avatar-area.video-mode .avatar-icon-video{opacity:1}.avatar-area.connected .avatar-inner svg{opacity:0;transform:scale(.5)}.avatar-area.connected .avatar-inner{animation:avatarConnected 2s ease-in-out infinite}.avatar-area.video-mode .avatar-pulse{background:linear-gradient(135deg,#8b5cf626,#7c3aed1a)}.avatar-area.video-mode .avatar-inner{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 12px 40px #8b5cf64d,0 6px 16px #7c3aed33}.voice-bars{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:6px;height:40px;opacity:0;transition:opacity .3s ease;z-index:10}.avatar-area.connected .voice-bars{opacity:1}.voice-bar{width:6px;background:#fff;border-radius:3px;height:12px;animation:voiceBar .5s ease-in-out infinite;animation-delay:calc(var(--delay) * .1s)}.avatar-area.video-mode .voice-bar{background:#fff}.hero-title{font-size:32px;font-weight:700;color:#1e293b;text-align:center;letter-spacing:-.02em}.hero-subtitle{font-size:16px;color:#64748b;text-align:center;max-width:400px;line-height:1.5}.mode-selector{display:flex;justify-content:center}.mode-options{display:flex;background:#fffffff2;border-radius:16px;padding:6px;border:1px solid rgba(226,232,240,.8);box-shadow:0 4px 16px #0000000f}.mode-option{display:flex;align-items:center;gap:10px;padding:14px 28px;background:transparent;border:none;border-radius:12px;cursor:pointer;transition:all .25s ease;font-family:Inter,sans-serif}.mode-option:hover{background:#10b98114}.mode-option.active{background:linear-gradient(135deg,#10b981,#06b6d4);box-shadow:0 6px 20px #10b9814d}.mode-option.active.video{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 6px 20px #8b5cf64d}.mode-icon{display:flex;align-items:center;justify-content:center;color:#64748b;transition:color .25s ease}.mode-option.active .mode-icon{color:#fff}.mode-title{font-size:16px;font-weight:600;color:#475569;transition:color .25s ease}.mode-option.active .mode-title{color:#fff}.connect-button{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 48px;background:linear-gradient(135deg,#10b981,#06b6d4);border:none;border-radius:60px;color:#fff;font-family:Inter,sans-serif;font-size:18px;font-weight:600;cursor:pointer;transition:background .3s ease,box-shadow .3s ease,transform .3s ease;box-shadow:0 10px 32px #10b98159,0 4px 12px #06b6d433;width:280px}.connect-button:hover{transform:translateY(-2px);box-shadow:0 12px 32px #10b98159,0 6px 12px #06b6d433}.connect-button:active{transform:translateY(0)}.connect-button.video-mode{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 8px 24px #8b5cf64d,0 4px 8px #7c3aed26}.connect-button.video-mode:hover{box-shadow:0 12px 32px #8b5cf659,0 6px 12px #7c3aed33}.connect-button.connected{background:linear-gradient(135deg,#ef4444,#f97316);box-shadow:0 8px 24px #ef44444d,0 4px 8px #f9731626}.connect-button.connected:hover{box-shadow:0 12px 32px #ef444459,0 6px 12px #f9731633}.connect-button.connecting{pointer-events:none;opacity:.85;cursor:not-allowed}.connect-button.connecting .button-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.button-icon{display:flex;align-items:center;justify-content:center}.button-text{white-space:nowrap}.activity-drawer{background:#ffffffe6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(226,232,240,.8);border-radius:16px;overflow:hidden;flex-shrink:0;transition:all .3s ease}.drawer-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 20px;background:transparent;border:none;cursor:pointer;font-family:Inter,sans-serif}.drawer-title{font-size:13px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.drawer-chevron{color:#94a3b8;transition:transform .3s ease}.activity-drawer.expanded .drawer-chevron{transform:rotate(180deg)}.drawer-content{max-height:0;overflow-y:auto;padding:0 20px;font-size:13px;line-height:1.5;transition:all .3s ease;background:#f8fafc80}.activity-drawer.expanded .drawer-content{max-height:220px;padding:16px 20px;border-top:1px solid rgba(226,232,240,.8)}.drawer-content div{margin-bottom:8px;padding:8px 12px;color:#475569;border-radius:8px;background:#ffffffb3;border:1px solid rgba(226,232,240,.5);font-size:12px}.drawer-content::-webkit-scrollbar{width:4px}.drawer-content::-webkit-scrollbar-track{background:transparent}.drawer-content::-webkit-scrollbar-thumb{background:#10b9814d;border-radius:2px}.auth-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;justify-content:center;align-items:center;padding:20px}.auth-modal.active{display:flex}.auth-form{background:#fffffffa;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:20px;padding:32px;width:100%;max-width:380px;box-shadow:0 20px 60px #00000026;border:1px solid rgba(16,185,129,.15)}.auth-form h2{text-align:center;margin-bottom:24px;background:linear-gradient(135deg,#059669,#0891b2);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:22px}.auth-input{width:100%;padding:12px 16px;margin-bottom:12px;border:1px solid rgba(226,232,240,.8);border-radius:10px;font-size:14px;font-family:Inter,sans-serif;background:#f8fafccc;transition:all .3s ease}.auth-input:focus{outline:none;border-color:#10b981;box-shadow:0 0 0 3px #10b9811a}.auth-button{width:100%;padding:12px;background:linear-gradient(135deg,#10b981,#06b6d4);border:none;border-radius:10px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif}.auth-button:hover{transform:translateY(-1px);box-shadow:0 6px 20px #10b9814d}.auth-switch{text-align:center;margin-top:16px;color:#64748b;font-size:13px}.auth-switch a{color:#0891b2;text-decoration:none;font-weight:600}.auth-switch a:hover{text-decoration:underline}.auth-error{color:#dc2626;text-align:center;margin-top:12px;font-size:13px;min-height:18px}.video-container{display:none;position:relative;width:100%;max-width:480px;margin:0 auto;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid rgba(139,92,246,.3);box-shadow:0 12px 40px #8b5cf633,0 4px 16px #0000001a}.video-container video{width:100%;aspect-ratio:4/3;display:block;object-fit:cover}.video-active .avatar-area,.video-active .mode-selector{display:none}.video-active .hero-section{gap:32px}.video-active .video-container{display:block!important}.video-active .connect-button{position:relative;z-index:10}@keyframes avatarPulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.1);opacity:.3}}@keyframes avatarConnected{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes voiceBar{0%,to{height:12px}50%{height:36px}}@media(max-width:768px){.app-container{padding:16px;gap:16px}.header{padding:12px 16px}.hero-section{gap:32px;padding:32px 24px}.video-container{max-width:100%;border-radius:16px}.avatar-circle{width:140px;height:140px}.avatar-inner{width:90px;height:90px}.avatar-inner svg{width:48px;height:48px}.hero-title{font-size:26px}.hero-subtitle{font-size:15px}.mode-option{padding:12px 24px}.connect-button{padding:16px 40px;font-size:16px;width:260px}}@media(max-width:480px){.app-container{padding:12px;gap:12px}.header{padding:10px 14px}.logo{font-size:16px}.app-icon{width:28px;height:28px}.hero-section{gap:24px;padding:24px 16px;border-radius:20px}.avatar-circle{width:120px;height:120px}.avatar-inner{width:80px;height:80px}.avatar-inner svg{width:40px;height:40px}.hero-title{font-size:22px}.hero-subtitle{font-size:14px;max-width:280px}.mode-options{padding:4px}.mode-option{padding:10px 18px;gap:8px}.mode-title{font-size:14px}.connect-button{padding:14px 32px;font-size:15px;width:240px}.auth-form{padding:24px}.auth-form h2{font-size:20px}.drawer-toggle{padding:12px 16px}}@media(max-height:700px){.app-container{gap:12px}.hero-section{gap:24px;padding:24px}.avatar-area{gap:16px}.avatar-circle{width:100px;height:100px}.avatar-inner{width:70px;height:70px}.avatar-inner svg{width:36px;height:36px}.hero-title{font-size:24px}.hero-subtitle{font-size:14px}}@media(max-height:600px){.hero-section{gap:16px;padding:16px}.avatar-circle{width:80px;height:80px}.avatar-inner{width:56px;height:56px}.avatar-inner svg{width:28px;height:28px}.hero-title{font-size:20px}.hero-subtitle{display:none}.mode-option{padding:10px 20px}.connect-button{padding:12px 28px;font-size:15px;width:240px}}
