*{box-sizing:border-box;margin:0;padding:0}:root{--green:#1b5e20;--green-hover:#2e7d32;--green-gradient:linear-gradient(135deg, #1b5e20, #43a047);--green-light:#2ba04714;--green-border:#2ba0472e;--white:#fff;--bg-chat:#f8fafd;--gray-sidebar:#f0f4f9;--gray-hover:#e1e6eb;--gray-border:#dadce0;--text-dark:#1f1f1f;--text-mid:#444746;--text-muted:#757575;--font:"Outfit","Noto Sans Thai",sans-serif;--shadow-sm:0 1px 3px #0000001a;--shadow-md:0 4px 12px #00000014}body{font-family:var(--font);color:#e8f5e9;background:#080b16;overflow-x:hidden}.hidden{display:none!important}canvas{z-index:-1;pointer-events:none;position:fixed;top:0;left:0}#land{z-index:1;background:linear-gradient(#080b16e8,#080b16e8),url(bg.png) 50%/cover no-repeat;flex-direction:column;min-height:100vh;display:flex;position:relative}nav{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;background:#080b1673;border:1px solid #ffffff14;border-radius:40px;justify-content:space-between;align-items:center;width:90%;max-width:1200px;padding:.6rem 2.2rem;display:flex;position:fixed;top:1.5rem;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0006}.nav-logo{color:#fff;letter-spacing:.5px;align-items:center;gap:.6rem;font-size:1.3rem;font-weight:700;display:flex}.nav-logo span{background:linear-gradient(135deg,#a5d6a7,#38bd8a);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem}.nav-menu-toggle{cursor:pointer;color:#fff;z-index:1001;background:0 0;border:none;padding:4px;display:none}.nav-menu-toggle svg{fill:#fff;width:28px;height:28px}nav .nav-links{align-items:center;gap:2.2rem;display:flex}nav a{color:#ffffffb3;font-size:.92rem;font-weight:500;text-decoration:none;transition:color .2s}nav a:hover{color:#38bd8a}.nav-try-btn{background:linear-gradient(#080b16,#080b16) padding-box padding-box,linear-gradient(135deg,#a5d6a7,#38bd8a) border-box;border:2px solid #0000;border-radius:24px;align-items:center;padding:.55rem 1.5rem;font-weight:600;text-decoration:none;transition:all .25s;display:inline-flex;color:#fff!important}.nav-try-btn:hover{background:linear-gradient(135deg,#1b5e20,#43a047) padding-box padding-box,linear-gradient(135deg,#a5d6a7,#38bd8a) border-box;transform:translateY(-1px);box-shadow:0 0 15px #38bd8a66;color:#fff!important}.hero{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;max-width:900px;margin:0 auto;padding:11rem 2rem 5rem;display:flex}.hero-tag{color:#38bd8a;letter-spacing:.15em;text-transform:uppercase;background:#38bd8a14;border:1px solid #38bd8a2e;border-radius:24px;margin-bottom:2rem;padding:.5rem 1.2rem;font-size:.8rem;font-weight:600}.hero h1{color:#fff;letter-spacing:-.5px;margin-bottom:1.8rem;font-size:clamp(2.4rem,6.5vw,4.4rem);font-weight:700;line-height:1.15}.hero h1 span.gradient-text{background:linear-gradient(135deg,#a5d6a7,#38bd8a 45%,#d4a843);-webkit-text-fill-color:transparent;-webkit-background-clip:text;display:inline-block}.hero p{color:#ffffffb3;max-width:620px;margin-bottom:3rem;font-size:1.12rem;line-height:1.75}.hero-btns{flex-wrap:wrap;justify-content:center;gap:1.2rem;display:flex}.btn-primary{color:#fff;font-family:var(--font);cursor:pointer;background:linear-gradient(135deg,#1b5e20,#43a047);border:none;border-radius:30px;padding:.9rem 2.4rem;font-size:1.02rem;font-weight:600;transition:all .25s;box-shadow:0 4px 24px #2ba0474d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px #2ba04773}.btn-outline{color:#fff;font-family:var(--font);cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:30px;padding:.9rem 2.2rem;font-size:1.02rem;font-weight:500;transition:all .25s}.btn-outline:hover{background:#ffffff0f;border-color:#38bd8a}.features-carousel-container{z-index:1;width:100%;max-width:900px;margin:0 auto;padding:0 2rem 8rem;position:relative}.carousel-view{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:none;border-radius:24px;padding:1.5rem 0 .5rem;position:relative;overflow:hidden}.carousel-slides{transition:transform .6s cubic-bezier(.16,1,.3,1);display:flex}.carousel-slide{opacity:.15;text-align:center;flex-direction:column;justify-content:center;align-items:center;min-width:100%;padding-top:2rem;transition:opacity .6s,transform .6s;display:flex;transform:scale(.95)}.carousel-slide.active{opacity:1;transform:scale(1)}.slide-icon-box{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:22px;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:2rem;transition:transform .3s;display:flex;position:relative}.slide-icon-box.green-theme{background:#38bd8a1f;border:1.5px solid #38bd8a47;box-shadow:0 0 25px #38bd8a38,inset 0 1px 4px #ffffff1a}.slide-icon-box.purple-theme{background:#bb86fc1f;border:1.5px solid #bb86fc47;box-shadow:0 0 25px #bb86fc38,inset 0 1px 4px #ffffff1a}.slide-icon-box.blue-theme{background:#29b6f61f;border:1.5px solid #29b6f647;box-shadow:0 0 25px #29b6f638,inset 0 1px 4px #ffffff1a}.slide-icon-box.gold-theme{background:#f1c40f1f;border:1.5px solid #f1c40f47;box-shadow:0 0 25px #f1c40f38,inset 0 1px 4px #ffffff1a}.carousel-slide.active .slide-icon-box{animation:3s ease-in-out infinite alternate floatIcon}@keyframes floatIcon{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.carousel-slide h3{color:#fff;letter-spacing:-.5px;margin-bottom:1.2rem;font-size:clamp(2rem,5vw,3rem);font-weight:700;line-height:1.2}.carousel-slide p{color:#ffffffa6;max-width:680px;margin-bottom:2.2rem;font-size:1.15rem;line-height:1.8}.slide-action-btn{color:#fff;font-family:var(--font);cursor:pointer;background:linear-gradient(135deg,#1b5e20,#43a047);border:none;border-radius:30px;align-items:center;gap:8px;padding:.9rem 2.4rem;font-size:1.05rem;font-weight:600;transition:all .25s;display:inline-flex;box-shadow:0 4px 20px #38bd8a4d}.slide-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px #38bd8a8c}.carousel-indicators{justify-content:center;gap:1.2rem;width:100%;margin-top:3.5rem;display:flex}.indicator-bar{cursor:pointer;background:#ffffff1f;border-radius:3px;flex:1;height:6px;transition:background-color .3s;position:relative;overflow:hidden}.indicator-bar.active{background:#ffffff38}.indicator-progress{background:linear-gradient(90deg,#38bd8a,#a5d6a7);border-radius:3px;width:0%;height:100%;position:absolute;top:0;left:0;box-shadow:0 0 10px #38bd8ab3}.google-btn-container{align-items:center;display:flex}.google-login-btn{color:#1f1f1f;font-family:var(--font);cursor:pointer;box-shadow:var(--shadow-sm);background:#fff;border:1px solid #dadce0;border-radius:20px;align-items:center;gap:8px;padding:8px 16px;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.google-login-btn:hover{background:#f7f9fa;border-color:#d2d4d7;transform:translateY(-1px);box-shadow:0 2px 6px #00000014}.google-login-btn svg{width:18px;height:18px}.user-avatar-img{object-fit:cover;border:1.5px solid var(--green);border-radius:50%;flex-shrink:0;width:34px;height:34px}.logout-btn-side{cursor:pointer;color:var(--text-muted);font-family:var(--font);text-align:left;background:0 0;border:none;padding:2px 0;font-size:.72rem;font-weight:500;transition:color .15s}.logout-btn-side:hover{color:#c62828}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2000;opacity:0;pointer-events:none;background:#080b16d9;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-card{color:#1f1f1f;text-align:center;background:#fff;border-radius:24px;flex-direction:column;align-items:center;width:90%;max-width:440px;padding:2.2rem;transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;transform:scale(.9);box-shadow:0 12px 36px #00000059}.modal-overlay.active .modal-card{transform:scale(1)}.modal-icon{margin-bottom:1rem;font-size:3.5rem}.modal-card h3{color:#1b5e20;font-size:1.4rem;font-weight:700;font-family:var(--font);margin-bottom:.8rem}.modal-card p{color:#444746;margin-bottom:1.8rem;font-size:.95rem;line-height:1.6}.modal-google-btn-wrap{justify-content:center;width:100%;display:flex}.acc-list{flex-direction:column;gap:.75rem;width:100%;margin-top:1rem;display:flex}.acc-item{cursor:pointer;text-align:left;background:#f8fafc;border:1px solid #dadce0;border-radius:12px;align-items:center;gap:12px;width:100%;padding:10px 14px;transition:all .2s;display:flex}.acc-item:hover{background:#f1f5f9;border-color:#38bd8a;transform:translateY(-1px)}.acc-avatar{color:#fff;background:#1b5e20;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-weight:700;display:flex}.acc-info{flex-direction:column;line-height:1.2;display:flex}.acc-name{color:#1f1f1f;font-size:.88rem;font-weight:600}.acc-email{color:#64748b;font-size:.75rem}#chat-app{background:var(--white);height:100vh;color:var(--text-dark);display:flex;position:relative;overflow:hidden}.sidebar{background:var(--gray-sidebar);border-right:1px solid var(--gray-border);z-index:20;flex-direction:column;width:260px;padding:.75rem;transition:width .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.sidebar.collapsed{width:68px;padding:.75rem .5rem}.side-header{justify-content:space-between;align-items:center;height:52px;padding:.5rem .5rem 1.2rem;display:flex}.sidebar.collapsed .side-header{justify-content:center;padding:.5rem 0 1.2rem}.side-logo-wrap{color:var(--text-dark);align-items:center;gap:.65rem;font-size:1.15rem;font-weight:600;text-decoration:none;display:flex}.side-logo-spark{background:linear-gradient(135deg, var(--green), var(--green-hover));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:1rem;display:flex}.toggle-btn{cursor:pointer;color:var(--text-mid);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.5rem;transition:background .15s;display:flex}.toggle-btn:hover{background:var(--gray-hover)}.toggle-btn svg{fill:var(--text-mid);width:20px;height:20px}.sidebar.collapsed .side-brand,.sidebar.collapsed .toggle-btn{display:none}.new-chat-btn{background:var(--gray-hover);cursor:pointer;width:100%;font-family:var(--font);color:var(--text-dark);text-align:left;border:none;border-radius:24px;align-items:center;gap:.75rem;margin-bottom:1.2rem;padding:.8rem 1rem;font-size:.88rem;font-weight:500;transition:background .15s;display:flex}.new-chat-btn:hover{background:var(--gray-border)}.new-chat-btn svg{width:18px;height:18px;fill:var(--text-mid)}.sidebar.collapsed .new-chat-btn{border-radius:50%;justify-content:center;align-self:center;width:44px;height:44px;padding:0}.sidebar.collapsed .new-chat-btn span{display:none}.side-menu{flex-direction:column;gap:.25rem;display:flex}.side-item{cursor:pointer;width:100%;font-family:var(--font);color:var(--text-mid);text-align:left;background:0 0;border:none;border-radius:20px;align-items:center;gap:.75rem;padding:.65rem 1rem;font-size:.88rem;font-weight:500;transition:background .15s;display:flex}.side-item:hover{background:var(--gray-hover)}.side-item svg{width:18px;height:18px;fill:var(--text-muted)}.sidebar.collapsed .side-item{border-radius:50%;justify-content:center;align-self:center;width:44px;height:44px;padding:0}.sidebar.collapsed .side-item span{display:none}.history-item{cursor:pointer;width:100%;font-family:var(--font);color:var(--text-mid);background:0 0;border:none;border-radius:16px;justify-content:space-between;align-items:center;margin-bottom:2px;padding:.55rem .85rem;font-size:.83rem;font-weight:500;transition:background .15s;display:flex}.history-item:hover{background:var(--gray-hover)}.history-item.active{background:var(--gray-hover);color:var(--green);font-weight:600}.history-item.active svg{fill:var(--green)}.history-content{text-overflow:ellipsis;white-space:nowrap;text-align:left;flex:1;align-items:center;gap:.6rem;display:flex;overflow:hidden}.history-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.history-del-btn{cursor:pointer;color:var(--text-muted);opacity:0;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;transition:opacity .15s,background-color .15s;display:flex}.history-item:hover .history-del-btn{opacity:1}.history-del-btn:hover{color:#c62828;background:#0000000f}.sidebar.collapsed .history-item{border-radius:50%;justify-content:center;width:44px;height:44px;padding:0}.sidebar.collapsed .history-item .history-del-btn,.sidebar.collapsed .history-item span{display:none!important}.side-section{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;padding:1.2rem 1rem .4rem;font-size:.75rem;font-weight:600}.sidebar.collapsed .side-section{display:none}.recent-list{flex-direction:column;flex:1;gap:.15rem;display:flex;overflow-y:auto}.sidebar.collapsed .recent-list{display:none}.side-footer{border-top:1px solid var(--gray-border);flex-direction:column;gap:.4rem;margin-top:auto;padding-top:.75rem;display:flex}.user-profile{cursor:pointer;border-radius:12px;align-items:center;gap:.75rem;padding:.5rem .75rem;transition:background .15s;display:flex}.user-profile:hover{background:var(--gray-hover)}.user-avatar{color:#fff;background:#7b1fa2;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:1rem;font-weight:700;display:flex}.user-details{flex-direction:column;line-height:1.2;display:flex}.user-name{color:var(--text-dark);font-size:.83rem;font-weight:600}.user-role{color:var(--text-muted);font-size:.72rem}.sidebar.collapsed .user-details{display:none}.sidebar.collapsed .user-profile{justify-content:center;align-self:center;width:44px;height:44px;padding:0}.main-chat{background:radial-gradient(circle,#fff 0%,#edf3ed 100%);flex-direction:column;flex:1;min-width:0;display:flex;position:relative}.chat-header{border-bottom:1px solid var(--gray-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:5;background:#ffffffb3;justify-content:space-between;align-items:center;height:56px;padding:.75rem 1.5rem;display:flex;position:relative}.header-left{align-items:center;gap:.5rem;display:flex}.collapsed-menu-btn{display:none}.sidebar.collapsed+.main-chat .collapsed-menu-btn{display:flex}.chat-model{color:var(--text-dark);align-items:center;gap:.5rem;font-size:.95rem;font-weight:600;display:flex}.model-dot{background:#38bd8a;border-radius:50%;width:8px;height:8px;animation:2s infinite pulse}.chat-area{flex:1;padding:2rem 0;overflow-y:auto}.chat-area::-webkit-scrollbar{width:8px}.chat-area::-webkit-scrollbar-thumb{background:var(--gray-border);border-radius:4px}.welcome-container{text-align:center;flex-direction:column;align-items:center;max-width:640px;margin:6vh auto;padding:0 1.5rem;display:flex}.welcome-heading{letter-spacing:-.5px;margin-bottom:2rem;font-size:clamp(2rem,5.5vw,3rem);font-weight:500;line-height:1.2}.welcome-heading span.gradient-name{background:linear-gradient(135deg, var(--green-hover), #38bd8a, #d4a843);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:700}.welcome-container .input-box{width:100%;box-shadow:var(--shadow-md);background:var(--white);border:1px solid var(--gray-border)}.welcome-container .input-box:focus-within{border-color:#38bd8a}.welcome-container .chips{flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:2.2rem;display:flex}.chip{border:1px solid var(--gray-border);color:var(--text-mid);font-family:var(--font);cursor:pointer;background:#ffffffb3;border-radius:20px;padding:.65rem 1.2rem;font-size:.83rem;font-weight:500;transition:all .15s}.chip:hover{background:var(--gray-sidebar);color:var(--green);border-color:#38bd8a;transform:translateY(-1px)}.msg{max-width:768px;margin:0 auto;padding:.75rem 1.5rem}.msg-user{justify-content:flex-end;display:flex}.msg-user .bubble{background:var(--gray-sidebar);color:var(--text-dark);max-width:80%;box-shadow:var(--shadow-sm);border-radius:20px;padding:.8rem 1.2rem;font-size:.95rem;line-height:1.6}.msg-ai-wrap{align-items:flex-start;gap:1rem;display:flex}.ai-avatar{background:linear-gradient(135deg, var(--green), var(--green-hover));color:#fff;width:32px;height:32px;box-shadow:var(--shadow-sm);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;font-size:.75rem;font-weight:700;display:flex}.msg-ai-content{color:var(--text-dark);flex:1;font-size:.95rem;line-height:1.75}.msg-ai-content ul{margin:.5rem 0;padding-left:1.4rem}.msg-ai-content li{margin:.35rem 0}.msg-ai-content strong{color:var(--green)}.msg-ai-content a{color:var(--green-hover);border-bottom:1px dashed var(--green-hover);text-decoration:none}.input-zone{z-index:5;background:0 0;padding:.75rem 1.5rem 1.2rem;position:relative}.input-box{background:var(--white);border:1px solid var(--gray-border);max-width:768px;box-shadow:var(--shadow-sm);border-radius:28px;align-items:flex-end;gap:.6rem;margin:0 auto;padding:.5rem .6rem .5rem 1.2rem;transition:border .2s,box-shadow .2s;display:flex}.input-box:focus-within{border-color:#38bd8a;box-shadow:0 0 0 3px #38bd8a1f}.input-box textarea{font-family:var(--font);color:var(--text-dark);resize:none;background:0 0;border:none;outline:none;flex:1;max-height:120px;padding:.5rem 0;font-size:.95rem;line-height:1.5}.input-box textarea::placeholder{color:var(--text-muted)}.input-right-controls{align-items:center;gap:.3rem;margin-bottom:2px;display:flex}.input-btn{cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:background .15s;display:flex}.input-btn:hover{background:var(--gray-sidebar)}.input-btn svg{fill:var(--text-mid);width:20px;height:20px}.model-dropdown{background:var(--gray-sidebar);color:var(--text-mid);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:16px;align-items:center;gap:2px;padding:.3rem .75rem;font-size:.8rem;font-weight:600;transition:background .15s;display:flex}.model-dropdown:hover{background:var(--gray-hover)}.model-dropdown svg{width:14px;height:14px;fill:var(--text-muted)}.send-btn{background:var(--green);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.send-btn:hover{background:var(--green-hover);transform:scale(1.05)}.send-btn:disabled{background:var(--gray-border);cursor:not-allowed;transform:none}.send-btn svg{fill:#fff;width:16px;height:16px}.input-hint{max-width:768px;color:var(--text-muted);text-align:center;margin:.5rem auto 0;font-size:.72rem}.typing-dots{gap:4px;padding:4px 0;display:flex}.typing-dots span{background:var(--green-hover);border-radius:50%;width:7px;height:7px;animation:.6s infinite alternate tdot}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}#chat-app.welcome-active .bottom-input-zone,#chat-app:not(.welcome-active) .welcome-container{display:none}@keyframes tdot{to{opacity:.3;transform:translateY(-5px)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}@media (width>=901px){.sidebar:not(.collapsed)+.main-chat .collapsed-menu-btn{display:none}.sidebar.collapsed+.main-chat .collapsed-menu-btn{display:flex}}@media (width<=900px){.sidebar{z-index:50;transition:left .3s cubic-bezier(.4,0,.2,1);position:fixed;top:0;bottom:0;left:-260px;box-shadow:4px 0 15px #0000001a}.sidebar.collapsed{left:-260px}.sidebar.mobile-open{width:260px;left:0}.collapsed-menu-btn{display:flex!important}.features{padding:1.5rem 1rem 4rem}.nav-menu-toggle{display:block}nav{width:95%;padding:.6rem 1.4rem;top:1rem}nav .nav-links{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);z-index:999;background:#080b16f5;border:1px solid #ffffff1a;border-radius:24px;flex-direction:column;align-items:center;gap:1.2rem;margin-top:10px;padding:1.5rem;display:none;position:absolute;top:100%;left:0;right:0;box-shadow:0 10px 30px #0009}nav .nav-links.active{display:flex}}