/* F24nT AI Chat V10.8 — complete visual refresh */
:root{
  --c8-bg:#f7efe6;--c8-paper:#fffaf5;--c8-paper2:#fff4e9;--c8-ink:#17120f;
  --c8-muted:#8d7668;--c8-line:rgba(74,45,29,.11);--c8-accent:#ef6a18;--c8-accent2:#ff9d55;
  --c8-dark:#17130f;--c8-dark2:#221a15;--c8-shadow:0 24px 80px rgba(64,35,18,.10);
}
html,body{background:var(--c8-bg)!important}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:
 radial-gradient(circle at 72% -8%,rgba(239,106,24,.12),transparent 31%),
 radial-gradient(circle at 40% 105%,rgba(255,189,135,.16),transparent 34%),
 linear-gradient(rgba(129,91,63,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(129,91,63,.035) 1px,transparent 1px);background-size:auto,auto,32px 32px,32px 32px}
#app{position:relative;z-index:1;background:transparent!important}

/* Sidebar */
#sb{width:286px!important;background:linear-gradient(180deg,#17130f 0%,#1d1712 46%,#120f0c 100%)!important;border-right:1px solid rgba(255,255,255,.07)!important;box-shadow:22px 0 75px rgba(33,20,12,.10)!important}
#sb::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 35% 0,rgba(239,106,24,.17),transparent 24%),linear-gradient(135deg,rgba(255,255,255,.025),transparent 40%)}
#sb-top{height:66px!important;padding:12px 14px!important;border-bottom:0!important;gap:8px!important}
#sb-logo{border-radius:16px!important;padding:7px 9px!important;transition:.25s cubic-bezier(.2,.8,.2,1)!important}
#sb-logo:hover{background:rgba(255,255,255,.055)!important;transform:translateY(-1px)}
#sb-logo .lx-brand-img{filter:drop-shadow(0 5px 14px rgba(239,106,24,.38));animation:c8LogoFloat 4s ease-in-out infinite}
.sb-wm{font-weight:820!important;letter-spacing:-.025em!important;color:#fff6ef!important}
#sb-sw{margin:5px 14px 14px!important;border-radius:14px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.07)!important;transition:.2s!important}
#sb-sw:focus-within{border-color:rgba(239,106,24,.5)!important;background:rgba(255,255,255,.07)!important;box-shadow:0 0 0 3px rgba(239,106,24,.08)!important}
#sb-si{color:#fff!important}
.ni,.sb-btn{margin:2px 10px!important;padding:10px 12px!important;border-radius:13px!important;color:rgba(255,245,236,.72)!important;transition:.22s cubic-bezier(.2,.8,.2,1)!important;position:relative;overflow:hidden}
.ni::after,.sb-btn::after{content:"";position:absolute;inset:auto 12px 0 12px;height:1px;background:linear-gradient(90deg,transparent,rgba(239,106,24,.7),transparent);transform:scaleX(0);transition:.25s}
.ni:hover,.sb-btn:hover{background:rgba(255,255,255,.055)!important;color:#fff!important;transform:translateX(3px)}
.ni:hover::after,.sb-btn:hover::after{transform:scaleX(1)}
.ni.act{background:linear-gradient(90deg,rgba(239,106,24,.18),rgba(239,106,24,.055))!important;color:#ffb27c!important;border:1px solid rgba(239,106,24,.16)!important;box-shadow:inset 3px 0 0 var(--c8-accent)}
.ni svg,.sb-btn svg{transition:.28s cubic-bezier(.2,.8,.2,1)}
.ni:hover svg,.sb-btn:hover svg{transform:scale(1.13) rotate(-4deg);color:#ff9a54}
#sb-bot{padding:12px!important;border-top:1px solid rgba(255,255,255,.06)!important;background:rgba(0,0,0,.08)}
#ub{border-radius:16px!important;padding:9px!important;transition:.2s!important}
#ub:hover{background:rgba(255,255,255,.06)!important;transform:translateY(-1px)}

/* Main/top bar */
#main{background:transparent!important}
#tb{height:72px!important;margin:10px 14px 0!important;border:1px solid var(--c8-line)!important;border-radius:21px!important;background:rgba(255,250,245,.78)!important;backdrop-filter:blur(26px) saturate(1.25)!important;box-shadow:0 12px 38px rgba(61,36,22,.06)!important;padding:0 14px!important}
.tbtn,#theme-tb-btn,#mob-tog{border-radius:13px!important;min-height:38px!important;border:1px solid rgba(75,43,26,.10)!important;background:rgba(255,255,255,.72)!important;box-shadow:0 5px 16px rgba(68,40,24,.045)!important;transition:.22s cubic-bezier(.2,.8,.2,1)!important;position:relative;overflow:hidden}
.tbtn:hover,#theme-tb-btn:hover,#mob-tog:hover{transform:translateY(-2px)!important;box-shadow:0 10px 24px rgba(68,40,24,.09)!important;border-color:rgba(239,106,24,.22)!important}
.tbtn svg,#theme-tb-btn svg{transition:.3s cubic-bezier(.2,.8,.2,1)}
.tbtn:hover svg,#theme-tb-btn:hover svg{transform:rotate(-8deg) scale(1.12)}
#usage-pill,#incog-tb-pill{border-radius:12px!important;border:1px solid var(--c8-line)!important;background:rgba(255,255,255,.58)!important}

/* Welcome stage */
#ca{position:relative!important}
#wlc{min-height:calc(100vh - 245px)!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;padding:48px 24px 135px!important;position:relative!important;overflow:hidden}
#wlc::before,#wlc::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px)}
#wlc::before{width:360px;height:360px;right:4%;top:8%;background:radial-gradient(circle,rgba(255,169,102,.16),rgba(255,169,102,0) 68%);animation:c8Orb 8s ease-in-out infinite}
#wlc::after{width:260px;height:260px;left:10%;bottom:8%;background:radial-gradient(circle,rgba(239,106,24,.10),rgba(239,106,24,0) 68%);animation:c8Orb 10s ease-in-out infinite reverse}
#wt{position:relative;text-align:center;z-index:1}
#wlogo{width:78px!important;height:78px!important;padding:12px;border-radius:25px;background:rgba(255,255,255,.74);border:1px solid rgba(239,106,24,.14);box-shadow:0 24px 55px rgba(239,106,24,.16),inset 0 1px 0 #fff;animation:c8LogoHero 5s ease-in-out infinite!important}
#wh{font-size:clamp(34px,4.2vw,58px)!important;line-height:1.02!important;letter-spacing:-.052em!important;margin-top:22px!important;color:var(--c8-ink)!important;font-weight:850!important;background:linear-gradient(95deg,#17120f 8%,#4a2d1b 62%,#e85f14 105%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
#wt::after{content:"F24nT AI siap membantu menulis, menganalisis, membuat kode, dan bekerja dengan file.";display:block;max-width:630px;margin:14px auto 0;font-size:14px;line-height:1.7;color:var(--c8-muted);letter-spacing:.005em}
#pills{max-width:760px!important;margin-top:28px!important;gap:10px!important;justify-content:center!important;z-index:1}
.pill{border-radius:16px!important;padding:11px 15px!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(73,43,27,.10)!important;color:#5c4437!important;box-shadow:0 7px 22px rgba(65,38,22,.045)!important;transition:.22s cubic-bezier(.2,.8,.2,1)!important;position:relative!important;overflow:hidden!important}
.pill::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.9) 48%,transparent 72%);transform:translateX(-130%);transition:.55s}
.pill:hover{transform:translateY(-4px) rotate(-.7deg)!important;border-color:rgba(239,106,24,.26)!important;box-shadow:0 14px 34px rgba(82,43,19,.10)!important;color:#d85a11!important}
.pill:hover::before{transform:translateX(130%)}
.pill svg{transition:.28s cubic-bezier(.2,.8,.2,1)}
.pill:hover svg{transform:scale(1.16) rotate(-7deg)}

/* Messages */
#msgs{max-width:980px!important;padding:26px 24px 185px!important}
.mg{animation:c8MsgIn .38s cubic-bezier(.18,.82,.24,1) both!important}
.ma{border-radius:25px!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(73,43,27,.085)!important;box-shadow:0 18px 50px rgba(59,34,20,.055)!important;padding:20px 22px!important;backdrop-filter:blur(15px)}
.mu-b{border-radius:22px 22px 7px 22px!important;background:linear-gradient(145deg,#ffe5cc,#fff1e3)!important;border:1px solid rgba(239,106,24,.13)!important;box-shadow:0 14px 38px rgba(87,45,18,.065)!important}

/* Composer = command deck */
#io{background:linear-gradient(to top,rgba(247,239,230,.995) 62%,rgba(247,239,230,.88) 78%,rgba(247,239,230,0))!important;padding-bottom:12px!important}
#iw{max-width:980px!important;padding:0 18px!important}
#ibox{border-radius:30px!important;background:rgba(255,253,250,.91)!important;border:1px solid rgba(79,47,28,.12)!important;box-shadow:0 28px 80px rgba(70,38,18,.14),inset 0 1px 0 #fff!important;backdrop-filter:blur(26px) saturate(1.24)!important;padding:11px 12px 10px!important;transition:.28s cubic-bezier(.2,.8,.2,1)!important;position:relative!important;overflow:visible!important}
#ibox::before{content:"";position:absolute;inset:-1px;border-radius:30px;padding:1px;background:linear-gradient(105deg,rgba(239,106,24,.35),transparent 26%,transparent 72%,rgba(255,174,111,.28));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.45;transition:.25s}
#ibox:focus-within{transform:translateY(-5px)!important;box-shadow:0 35px 90px rgba(70,38,18,.18),0 0 0 4px rgba(239,106,24,.07),inset 0 1px 0 #fff!important;border-color:rgba(239,106,24,.30)!important}
#ibox:focus-within::before{opacity:1}
#ita{font-size:15.5px!important;line-height:1.55!important;min-height:48px!important;padding:13px 11px 8px!important;color:#221711!important}
#ita::placeholder{color:#aa9182!important}
#ibar{gap:7px!important;padding-top:6px!important}
.ibb,#mb{border-radius:13px!important;border:1px solid rgba(71,42,25,.09)!important;background:#fffaf6!important;color:#6b5142!important;min-height:36px!important;box-shadow:0 4px 12px rgba(67,38,22,.035)!important;transition:.20s cubic-bezier(.2,.8,.2,1)!important;position:relative!important;overflow:hidden!important}
.ibb:hover,#mb:hover{background:#fff!important;color:#d85b12!important;transform:translateY(-2px)!important;border-color:rgba(239,106,24,.21)!important;box-shadow:0 9px 21px rgba(78,40,17,.08)!important}
.ibb svg,#mb svg{transition:.28s cubic-bezier(.2,.8,.2,1)}
.ibb:hover svg,#mb:hover svg{transform:translateY(-1px) scale(1.12) rotate(-5deg)}
#send{width:46px!important;height:46px!important;border-radius:16px!important;background:linear-gradient(145deg,#ff812d,#df560b 72%)!important;box-shadow:0 10px 28px rgba(239,106,24,.34),inset 0 1px 0 rgba(255,255,255,.42)!important;transition:.2s cubic-bezier(.2,.8,.2,1)!important;overflow:hidden!important;position:relative!important}
#send::before{content:"";position:absolute;width:120%;height:120%;left:-130%;top:-10%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);transition:.45s}
#send:hover:not(:disabled){transform:translateY(-3px) scale(1.045)!important;box-shadow:0 16px 36px rgba(239,106,24,.39)!important}
#send:hover:not(:disabled)::before{left:120%}
#send svg{transition:.28s cubic-bezier(.2,.8,.2,1)}
#send:hover:not(:disabled) svg{transform:translateY(-2px) scale(1.12)}
#hint{font-size:10.5px!important;color:#a38a7b!important;margin-top:9px!important;letter-spacing:.01em}

/* Dropdowns, modal, artifacts */
.dd{border-radius:22px!important;background:rgba(255,252,249,.97)!important;border:1px solid rgba(68,41,25,.10)!important;box-shadow:0 28px 85px rgba(40,25,15,.18)!important;backdrop-filter:blur(25px)!important;padding:7px!important}
.mo{border-radius:14px!important;transition:.18s cubic-bezier(.2,.8,.2,1)!important;border:1px solid transparent!important}
.mo:hover{transform:translateX(4px)!important;background:#fff3e8!important;border-color:rgba(239,106,24,.12)!important}
.mo svg,.moic{transition:.25s cubic-bezier(.2,.8,.2,1)}
.mo:hover .moic{transform:rotate(-5deg) scale(1.06)}
#art-panel{background:rgba(255,250,245,.96)!important;backdrop-filter:blur(25px)!important;border-left:1px solid var(--c8-line)!important;box-shadow:-28px 0 90px rgba(50,30,18,.15)!important}
.art-card{border-radius:22px!important;transition:.24s cubic-bezier(.2,.8,.2,1)!important}.art-card:hover{transform:translateY(-4px) scale(1.01)!important}

/* Universal click feedback injected by JS */
.c8-clickable{isolation:isolate}
.c8-clickable::after{content:"";position:absolute;left:var(--c8-x,50%);top:var(--c8-y,50%);width:8px;height:8px;border-radius:999px;background:rgba(239,106,24,.20);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;z-index:-1}
.c8-clickable.c8-pressed::after{animation:c8Ripple .48s ease-out}
.c8-clickable.c8-pressed svg,.c8-clickable.c8-pressed img{animation:c8IconPress .42s cubic-bezier(.2,.8,.2,1)}
.c8-clickable.c8-pressed{animation:c8ButtonPress .26s cubic-bezier(.2,.8,.2,1)}

/* New ambient assistant badge injected by JS */
#c8-ai-orbit{position:absolute;right:clamp(28px,8vw,120px);top:22%;width:92px;height:92px;z-index:0;pointer-events:none;opacity:.88}
#c8-ai-orbit .ring{position:absolute;inset:0;border:1px dashed rgba(239,106,24,.28);border-radius:50%;animation:c8Spin 14s linear infinite}
#c8-ai-orbit .ring::before,#c8-ai-orbit .ring::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#ef6a18;box-shadow:0 0 18px rgba(239,106,24,.5)}
#c8-ai-orbit .ring::before{left:5px;top:16px}#c8-ai-orbit .ring::after{right:3px;bottom:22px}
#c8-ai-orbit img{position:absolute;inset:22px;width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(239,106,24,.26));animation:c8LogoFloat 4.5s ease-in-out infinite}

@keyframes c8LogoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes c8LogoHero{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes c8Orb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,-18px) scale(1.08)}}
@keyframes c8Spin{to{transform:rotate(360deg)}}
@keyframes c8MsgIn{from{opacity:0;transform:translateY(12px) scale(.988);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes c8Ripple{0%{opacity:.75;transform:translate(-50%,-50%) scale(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(17)}}
@keyframes c8IconPress{0%{transform:scale(1) rotate(0)}42%{transform:scale(.76) rotate(-10deg)}75%{transform:scale(1.18) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes c8ButtonPress{0%{transform:scale(1)}45%{transform:scale(.965)}100%{transform:scale(1)}}

@media(max-width:900px){
 #sb{width:286px!important}#tb{margin:8px 8px 0!important;height:62px!important;border-radius:18px!important}
 #wlc{min-height:calc(100vh - 215px)!important;padding:34px 16px 125px!important}#wlogo{width:66px!important;height:66px!important}#wh{font-size:clamp(32px,9vw,46px)!important}#wt::after{font-size:13px!important;max-width:520px}
 #pills{max-width:560px!important}.pill{padding:10px 12px!important;font-size:12px!important}
 #iw{padding:0 8px!important}#ibox{border-radius:23px!important;padding:9px!important}#ibox::before{border-radius:23px}
 #ita{font-size:16px!important}.ibb{font-size:0!important;width:36px!important;padding:0!important;justify-content:center!important}.ibb svg{margin:0!important}#composer-new-chat-btn{font-size:0!important}
 #c8-ai-orbit{display:none}
}
@media(max-width:640px){
 #tacts .out{padding-inline:10px!important;font-size:0!important}#usage-pill{display:none!important}
 #wlc{justify-content:flex-start!important;padding-top:11vh!important}#pills{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;max-width:390px!important}.pill{justify-content:flex-start!important;text-align:left!important}
 #msgs{padding:18px 10px 180px!important}.ma{padding:16px!important;border-radius:21px!important}.mu-b{border-radius:20px 20px 6px 20px!important}
 #ibar{gap:5px!important}#mb{max-width:136px!important}.isp{min-width:0!important}#send{width:44px!important;height:44px!important;border-radius:15px!important}
 #bnav-wrap{bottom:8px!important;padding:0 8px!important}#bnav{border-radius:22px!important;background:rgba(23,19,15,.92)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 18px 50px rgba(28,18,12,.28)!important;backdrop-filter:blur(22px)!important}.bn-item{border-radius:15px!important;transition:.2s!important}.bn-item.act{background:linear-gradient(145deg,rgba(239,106,24,.27),rgba(239,106,24,.12))!important}.bn-item svg{transition:.28s!important}.bn-item:active svg,.bn-item.act svg{transform:translateY(-2px) scale(1.12)!important;color:#ff9a54!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

/* V10.9 — cleaned device-aware chat */
#sb-logo::before{display:none!important} .lx-sb-code-logo{width:29px;height:29px;flex:0 0 auto}#mob-tog-logo{width:22px;height:22px}#wlogo{width:78px!important;height:78px!important;filter:drop-shadow(0 18px 28px rgba(239,106,24,.18))}
.lx-v109-intro{overflow:hidden!important;isolation:isolate}.lx-v109-intro-logo{width:94px;height:94px;z-index:3;animation:v109LogoIn 3.2s cubic-bezier(.16,.8,.24,1) infinite}.lx-v109-particles{position:absolute;inset:0}.lx-v109-particles i{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#ef6a18;opacity:.2;transform:translate(calc(var(--dx)*7px),calc(var(--dy)*7px));animation:v109Gather 3.2s cubic-bezier(.18,.8,.25,1) infinite;animation-delay:calc(var(--n)*-61ms)}
@keyframes v109Gather{0%,14%{opacity:.12;transform:translate(calc(var(--dx)*7px),calc(var(--dy)*7px)) scale(.5)}52%,72%{opacity:.86;transform:translate(calc(var(--dx)*.15px),calc(var(--dy)*.15px)) scale(1)}100%{opacity:.08;transform:translate(calc(var(--dx)*6px),calc(var(--dy)*6px)) scale(.45)}}@keyframes v109LogoIn{0%,18%{opacity:.08;transform:scale(.5) rotate(-14deg);filter:blur(8px)}52%,76%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:.08;transform:scale(.72) rotate(10deg);filter:blur(7px)}}
/* One navigation surface per device: desktop sidebar, mobile compact bottom bar. */
@media(min-width:761px){#bnav-wrap{display:none!important}}
@media(max-width:760px){#sb-bot>.sb-btn{display:none!important}#bnav{grid-template-columns:repeat(5,1fr)!important}.bn-lbl{font-size:9px!important}#tacts #theme-tb-btn{display:none!important}#upgrade-topbtn{display:none!important}}
/* prevent accidental duplicate visual controls injected by legacy skins */
#c8-ai-orbit{display:none!important}#ub{display:none!important}
/* cleaner top bar */
#tb{box-shadow:none!important}.tbtn:active,.ibb:active,.pill:active,.bn-item:active,.sb-btn:active{transform:scale(.94)!important}.tbtn svg,.ibb svg,.pill svg,.bn-item svg,.sb-btn svg{transform-origin:center}.c8-clickable.c8-pressed svg,.c8-clickable.c8-pressed lianix-code-logo{animation:c8IconPress .42s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){.lx-v109-intro-logo,.lx-v109-particles i{animation:none!important}.lx-v109-intro-logo{opacity:1;filter:none}}