#page-ai{
  --ai-x:50%;
  --ai-y:42%;
  position:relative;
  min-height:calc(100dvh - 96px);
}

#page-ai::before,
#page-ai::after{
  content:'';
  position:absolute;
  inset:-32px;
  pointer-events:none;
  z-index:0;
}

#page-ai::before{
  background:
    radial-gradient(circle at var(--ai-x) var(--ai-y),rgba(6,182,212,.18),transparent 26%),
    radial-gradient(circle at 72% 18%,rgba(124,58,237,.16),transparent 30%),
    linear-gradient(135deg,rgba(6,182,212,.04),transparent 38%,rgba(124,58,237,.06));
  filter:blur(2px);
  animation:fxaiAtmosphere 12s ease-in-out infinite alternate;
}

#page-ai::after{
  opacity:.28;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(0deg,rgba(6,182,212,.035) 0 1px,transparent 1px 72px);
  mask-image:radial-gradient(circle at 50% 42%,#000,transparent 72%);
}

@keyframes fxaiAtmosphere{
  from{transform:translate3d(-10px,-8px,0) scale(1);}
  to{transform:translate3d(12px,10px,0) scale(1.03);}
}

#page-ai > *{position:relative;z-index:1;}

#page-ai .pg-head{
  animation:fxaiReveal .65s ease both;
}

#page-ai .pg-title{
  letter-spacing:-1px;
  text-shadow:0 0 28px rgba(6,182,212,.18);
}

#page-ai .pg-sub{
  color:rgba(205,218,255,.62);
}

#page-ai .ai-wrap{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:1px;
  background:
    linear-gradient(135deg,rgba(6,182,212,.36),rgba(124,58,237,.28),rgba(255,255,255,.06));
  box-shadow:0 32px 120px rgba(0,0,0,.42),0 0 70px rgba(6,182,212,.07);
  animation:fxaiReveal .75s .08s ease both;
}

#page-ai .ai-wrap::before{
  content:'';
  position:absolute;
  inset:-60%;
  background:conic-gradient(from 180deg,transparent,rgba(6,182,212,.16),transparent,rgba(124,58,237,.18),transparent);
  animation:fxaiBorderSpin 12s linear infinite;
  opacity:.72;
}

#page-ai .ai-wrap::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:17px;
  background:linear-gradient(180deg,rgba(4,7,17,.88),rgba(3,4,12,.94));
}

#page-ai .fxai-bar,
#page-ai .chat-box,
#page-ai .chat-in-row{
  position:relative;
  z-index:1;
}

#page-ai .fxai-bar{
  margin:1px 1px 0;
  border-radius:17px 17px 0 0;
  padding:11px 16px;
  background:linear-gradient(90deg,rgba(6,182,212,.1),rgba(124,58,237,.08),rgba(255,255,255,.02));
  border-bottom:1px solid rgba(130,210,255,.13);
  color:rgba(225,238,255,.72);
  backdrop-filter:blur(18px);
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.7px;
  text-transform:uppercase;
}

#page-ai .fxai-bar::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,#06b6d4,#7c3aed,transparent);
  animation:fxaiSweep 4.8s ease-in-out infinite;
}

#page-ai .fxai-bar-dot{
  width:8px;
  height:8px;
  background:#6ff7ff;
  box-shadow:0 0 12px #06b6d4,0 0 26px rgba(124,58,237,.55);
}

#page-ai .chat-box{
  margin:0 1px;
  border:0;
  border-radius:0;
  min-height:0;
  background:
    radial-gradient(circle at var(--ai-x) var(--ai-y),rgba(6,182,212,.09),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:inset 0 0 55px rgba(6,182,212,.06),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px);
}

#page-ai .chat-box::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 0 44%,rgba(255,255,255,.08) 50%,transparent 58%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px);
  mix-blend-mode:screen;
  opacity:.34;
  animation:fxaiReflection 8s ease-in-out infinite;
}

#page-ai .chat-box.has-messages .fxai-os-idle{
  opacity:.16;
  transform:translate(-50%,-50%) scale(.78);
  filter:blur(1px);
}

#page-ai .fxai-os-idle{
  position:absolute;
  left:50%;
  top:50%;
  width:min(520px,82%);
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:opacity .55s ease,transform .55s ease,filter .55s ease;
  z-index:0;
}

#page-ai .fxai-orb-field{
  position:relative;
  width:min(340px,64vw);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  transform:translate3d(calc((var(--ai-x) - 50%) / 40),calc((var(--ai-y) - 50%) / 40),0);
}

#page-ai .fxai-core-rings,
#page-ai .fxai-core-rings span,
#page-ai .fxai-crystal-core,
#page-ai .fxai-scanline{
  position:absolute;
  inset:0;
}

#page-ai .fxai-core-rings span{
  border:1px solid rgba(120,224,255,.24);
  border-radius:50%;
  box-shadow:0 0 34px rgba(6,182,212,.12);
  animation:fxaiRing 9s linear infinite;
}

#page-ai .fxai-core-rings span:nth-child(1){inset:8%;transform:rotateX(62deg);}
#page-ai .fxai-core-rings span:nth-child(2){inset:18%;border-color:rgba(124,58,237,.34);animation-duration:12s;animation-direction:reverse;transform:rotateY(58deg);}
#page-ai .fxai-core-rings span:nth-child(3){inset:29%;border-color:rgba(255,255,255,.18);animation-duration:7s;transform:rotateX(28deg) rotateY(44deg);}

#page-ai .fxai-crystal-core{
  inset:30%;
  display:grid;
  place-items:center;
  clip-path:polygon(50% 0,86% 20%,100% 62%,50% 100%,0 62%,14% 20%);
  background:
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(108,241,255,.42) 32%,rgba(124,58,237,.82) 76%,rgba(255,255,255,.72)),
    radial-gradient(circle at 38% 26%,#fff,transparent 28%);
  box-shadow:0 0 46px rgba(6,182,212,.46),0 0 96px rgba(124,58,237,.38);
  animation:fxaiCrystalBreath 3.6s ease-in-out infinite;
}

#page-ai .fxai-crystal-face{
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:clamp(2rem,5vw,3.8rem);
  color:#fff;
  letter-spacing:2px;
  text-shadow:0 0 18px rgba(255,255,255,.7),0 0 32px rgba(6,182,212,.8);
}

#page-ai .fxai-scanline{
  inset:16%;
  border-radius:50%;
  overflow:hidden;
  opacity:.52;
  mask-image:radial-gradient(circle,#000 42%,transparent 72%);
}

#page-ai .fxai-scanline::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:34%;
  background:linear-gradient(180deg,transparent,rgba(125,236,255,.18),transparent);
  animation:fxaiScan 3.4s ease-in-out infinite;
}

#page-ai .fxai-neuron{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#9ff6ff;
  box-shadow:0 0 18px #06b6d4;
  animation:fxaiNeuron 6s ease-in-out infinite alternate;
}

#page-ai .fxai-neuron::after{
  content:'';
  position:absolute;
  width:90px;
  height:1px;
  left:50%;
  top:50%;
  background:linear-gradient(90deg,rgba(6,182,212,.38),transparent);
  transform-origin:left center;
}

#page-ai .fxai-neuron.n1{left:12%;top:34%;}
#page-ai .fxai-neuron.n2{right:14%;top:28%;animation-delay:-1.4s;}
#page-ai .fxai-neuron.n3{left:22%;bottom:18%;animation-delay:-2.2s;}
#page-ai .fxai-neuron.n4{right:20%;bottom:24%;animation-delay:-3.3s;}

#page-ai .fxai-core-caption{
  margin-top:18px;
  text-align:center;
  color:rgba(221,235,255,.82);
  text-shadow:0 0 24px rgba(6,182,212,.22);
}

#page-ai .fxai-core-caption span{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;
  letter-spacing:4px;
  color:#7de8ff;
}

#page-ai .fxai-core-caption strong{
  display:block;
  margin-top:8px;
  font-family:'Syne',sans-serif;
  font-size:clamp(1.25rem,3vw,2.1rem);
}

#page-ai .fxai-msg,
#page-ai .chat-welcome{
  position:relative;
  z-index:2;
}

#page-ai .fxai-bubble{
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 45px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(18px);
}

#page-ai .fxai-msg--ai .fxai-bubble{
  background:linear-gradient(135deg,rgba(6,182,212,.09),rgba(255,255,255,.045));
  border-color:rgba(6,182,212,.18);
}

#page-ai .fxai-msg--user .fxai-bubble{
  background:linear-gradient(135deg,rgba(124,58,237,.92),rgba(6,182,212,.44));
  box-shadow:0 18px 48px rgba(124,58,237,.28);
}

#page-ai .chat-in-row{
  margin:0 1px 1px;
  border:0;
  border-radius:0 0 17px 17px;
  padding:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}

#page-ai .chat-in{
  border-color:rgba(6,182,212,.15);
  background:rgba(1,4,12,.58);
  border-radius:12px;
  box-shadow:inset 0 0 24px rgba(6,182,212,.04);
}

#page-ai .chat-in:focus{
  border-color:rgba(6,182,212,.7);
  box-shadow:0 0 0 3px rgba(6,182,212,.12),0 0 28px rgba(124,58,237,.18);
}

#page-ai .send-btn{
  border-radius:12px;
  box-shadow:0 0 22px rgba(6,182,212,.26),0 10px 30px rgba(124,58,237,.22);
}

.sidebar{
  background:linear-gradient(180deg,rgba(8,10,24,.86),rgba(4,5,14,.92)) !important;
  border-right:1px solid rgba(6,182,212,.13) !important;
  box-shadow:18px 0 70px rgba(0,0,0,.32),inset -1px 0 0 rgba(255,255,255,.04);
  backdrop-filter:blur(24px) saturate(140%);
}

.sidebar::before{
  background:
    radial-gradient(circle at 18% 10%,rgba(6,182,212,.16),transparent 28%),
    linear-gradient(180deg,rgba(124,58,237,.08),transparent 42%) !important;
}

.sb-li{
  border:1px solid transparent;
}

.sb-li:hover{
  border-color:rgba(6,182,212,.16);
  box-shadow:0 0 24px rgba(6,182,212,.07);
}

.sb-li.on{
  border-color:rgba(124,58,237,.32);
  box-shadow:0 0 28px rgba(124,58,237,.16),inset 0 0 24px rgba(6,182,212,.04);
}

@keyframes fxaiReveal{from{opacity:0;transform:translateY(18px);filter:blur(8px);}to{opacity:1;transform:none;filter:none;}}
@keyframes fxaiBorderSpin{to{transform:rotate(360deg);}}
@keyframes fxaiSweep{0%,100%{transform:translateX(-70%);opacity:.25;}50%{transform:translateX(70%);opacity:1;}}
@keyframes fxaiReflection{0%,100%{transform:translateX(-18%);opacity:.18;}50%{transform:translateX(18%);opacity:.36;}}
@keyframes fxaiRing{to{transform:rotate(360deg) rotateX(62deg);}}
@keyframes fxaiCrystalBreath{0%,100%{transform:scale(.96) rotateZ(-2deg);filter:brightness(1);}50%{transform:scale(1.06) rotateZ(2deg);filter:brightness(1.32);}}
@keyframes fxaiScan{from{transform:translateY(-80%);}to{transform:translateY(260%);}}
@keyframes fxaiNeuron{to{transform:translate3d(18px,-18px,0) scale(1.25);opacity:.68;}}

@media(max-width:760px){
  #page-ai .ai-wrap{height:calc(100dvh - 170px);min-height:520px;}
  #page-ai .fxai-orb-field{width:min(280px,72vw);}
  #page-ai .fxai-core-caption strong{font-size:1.25rem;}
}

@media(prefers-reduced-motion:reduce){
  #page-ai *,
  #page-ai::before,
  #page-ai .ai-wrap::before,
  .sb-li{animation:none !important;transition:none !important;}
}