/* ═══ AI AGENT STAGE: robot + chat ═══ */
.agx{position:relative;height:330vh;background:var(--bg)}
.agx-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(70% 60% at 50% 38%,rgba(120,170,10,.22),transparent 70%),#040506}
#agGl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1s ease}
.agx-stick.ready #agGl{opacity:1}
.agx-vig{position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55))}

/* heading (fades as you scroll in) */
.agx-top{position:absolute;left:0;right:0;top:calc(var(--nav-h) + clamp(6px,2vh,22px));text-align:center;z-index:5;pointer-events:none;padding:0 var(--pad);will-change:transform,opacity}
.agx-h1{margin:14px 0 8px;font-family:var(--f-d);font-weight:600;font-size:clamp(42px,7.2vw,112px);line-height:.92;letter-spacing:-.04em;text-shadow:0 8px 50px rgba(0,0,0,.6)}
.agx-h1 em{font-style:italic;font-weight:500;color:var(--lime)}
.agx-sub{margin:0 auto;max-width:54ch;color:var(--ink-2);font-size:clamp(13.5px,1.15vw,17px);line-height:1.6}
.agx-hint{position:absolute;left:0;right:0;bottom:calc(clamp(10px,2.5vh,26px) + 6px);text-align:center;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);z-index:6;pointer-events:none;transition:opacity .4s;display:none}
.agx-stick.no3d{background:radial-gradient(60% 50% at 50% 38%,rgba(120,170,10,.28),transparent 70%),#040506}

/* CHAT — one element, two looks (panel → floating) driven by --f (0..1) */
.ag-chat{--f:0;position:absolute;left:50%;bottom:clamp(10px,2.5vh,26px);width:min(94vw,660px);transform:translateX(-50%);z-index:8;display:flex;flex-direction:column;gap:10px}
.ag-panel{position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;
  background:linear-gradient(160deg,rgba(18,19,21,calc(.9 - var(--f) * .9)),rgba(9,9,11,calc(.94 - var(--f) * .94)));
  border:1px solid rgba(255,255,255,calc(.1 - var(--f) * .1));
  backdrop-filter:blur(calc(20px - var(--f) * 20px));-webkit-backdrop-filter:blur(calc(20px - var(--f) * 20px));
  box-shadow:0 30px 80px -30px rgba(0,0,0,calc(.9 - var(--f) * .9))}
.ag-head{display:flex;align-items:center;gap:12px;padding:calc(14px * (1 - var(--f))) 16px calc(12px * (1 - var(--f)));max-height:calc(64px * (1 - var(--f)));opacity:calc(1 - var(--f) * 1.6);overflow:hidden;border-bottom:1px solid rgba(255,255,255,calc(.08 * (1 - var(--f))))}
.ag-av{width:34px;height:34px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#eaff86,var(--lime) 46%,#7ea800);box-shadow:0 0 20px rgba(200,255,0,.34)}
.ag-who{flex:1;min-width:0}.ag-who b{display:block;font-family:var(--f-d);font-weight:600;font-size:15px;line-height:1.1}
.ag-who em{display:block;font-style:normal;font-size:11px;color:var(--lime);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-mode{display:inline-flex;padding:3px;border-radius:99px;border:1px solid var(--brd-2);background:rgba(255,255,255,.04);flex:none}
.ag-mode button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:99px;border:0;background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:600;cursor:pointer;transition:background .3s,color .3s}
.ag-mode button svg{width:14px;height:14px}
.ag-mode button.on{background:var(--lime);color:#080808}

/* messages: the popup bubbles; older ones drift up and fade */
.ag-msgs{display:flex;flex-direction:column;gap:9px;justify-content:flex-end;min-height:calc(54px * (1 - var(--f)));max-height:clamp(120px,22vh,200px);overflow:hidden;padding:12px 16px 4px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%)}
.ag-msgs:empty{padding-top:0;min-height:0;max-height:0}
.ag-m{max-width:84%;padding:10px 15px;border-radius:18px;font-size:14.5px;line-height:1.5;opacity:calc(1 - var(--age,0) * .26);
  transform:translateY(calc(var(--age,0) * var(--f) * -8px));transform-origin:100% 100%;animation:agPop .6s cubic-bezier(.34,1.56,.64,1) both;transition:opacity .5s,transform .6s var(--ease)}
.ag-m.me{align-self:flex-end;background:var(--lime);color:#080808;font-weight:500;border-bottom-right-radius:5px;box-shadow:0 8px 30px -10px rgba(200,255,0,.5)}
.ag-m.bot{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid var(--brd-2);border-bottom-left-radius:5px;transform-origin:0 100%}
@keyframes agPop{0%{transform:translateY(28px) scale(.55);opacity:0}60%{opacity:1}100%{transform:none}}
.ag-status{margin:0;padding:0 18px;height:0;overflow:hidden;font-size:12px;letter-spacing:.04em;color:var(--lime);opacity:0;transition:height .3s,opacity .3s,padding .3s}
.ag-status.on{height:22px;opacity:1;padding:2px 18px}
.ag-chips{display:flex;gap:8px;padding:6px 16px 12px;overflow-x:auto;scrollbar-width:none;max-height:calc(60px * (1 - var(--f)) + 0px);opacity:calc(1 - var(--f) * .7)}
.ag-chips::-webkit-scrollbar{display:none}.ag-chips.empty{display:none}
.ag-chip{flex:none;padding:8px 14px;border-radius:99px;border:1px solid rgba(200,255,0,.35);background:rgba(200,255,0,.07);color:var(--lime);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .3s,color .3s,transform .3s var(--ease)}
.ag-chip:hover{background:var(--lime);color:#080808;transform:translateY(-2px)}
.ag-chat.float .ag-chips{pointer-events:none}

/* input bar (always a floating glass pill) */
.ag-bar{display:flex;align-items:center;gap:8px;padding:7px;border-radius:99px;background:rgba(14,15,17,.78);border:1px solid rgba(200,255,0,.32);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 14px 50px -16px rgba(0,0,0,.9),0 0 40px -18px var(--lime-glow);transition:box-shadow .4s,border-color .4s}
.ag-bar:focus-within{border-color:var(--lime);box-shadow:0 14px 50px -16px rgba(0,0,0,.9),0 0 46px -10px var(--lime-glow)}
.ag-bar input{flex:1;min-width:0;height:42px;padding:0 6px;background:transparent;border:0;outline:0;color:var(--ink);font-size:15px}
.ag-bar input::placeholder{color:var(--faint)}
.ag-send,.ag-mic{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;border:0;cursor:pointer;transition:transform .4s var(--ease),background .3s}
.ag-send{background:var(--lime);color:#080808}.ag-send:hover{transform:scale(1.08) rotate(-8deg)}
.ag-mic{background:rgba(255,255,255,.07);color:var(--ink)}.ag-mic:hover{background:var(--lime-soft);color:var(--lime)}
.ag-send svg,.ag-mic svg{width:19px;height:19px}

/* talk mode: a big mic orb instead of the text bar */
.ag-orb{display:none;align-self:center;position:relative;width:74px;height:74px;border-radius:50%;border:0;cursor:pointer;color:#080808;place-items:center;
  background:radial-gradient(circle at 34% 30%,#eaff86,var(--lime) 50%,#7ea800);box-shadow:0 0 40px var(--lime-glow)}
.ag-orb svg{position:relative;width:30px;height:30px}
.ag-orb i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);opacity:0}
.ag-orb.on i{animation:orbRing 1.6s ease-out infinite}.ag-orb.on i:nth-child(2){animation-delay:.5s}
.ag-orb.on{transform:scale(1.08)}
@keyframes orbRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.2);opacity:0}}
.ag-chat.talk .ag-bar{display:none}.ag-chat.talk .ag-orb{display:grid}

/* close-up state: no heading/hint, face fits the upper part */
.agx-stick.close .agx-hint{display:none}

/* phones */
@media(max-width:700px){
  .ag-chat{width:calc(100vw - 20px);bottom:max(10px,env(safe-area-inset-bottom))}
  .ag-who em{display:none}
  .ag-mode button{padding:0 10px}
  .ag-msgs{max-height:clamp(110px,20vh,170px)}
  .agx-h1{font-size:clamp(40px,12.5vw,64px)}
  .agx-sub{font-size:12.5px;max-width:34ch}
}
@media(max-height:620px){.agx-sub{display:none}}
@media(prefers-reduced-motion:reduce){.ag-m{animation:none}.ag-orb.on i{animation:none}}

@media(min-aspect-ratio:6/5){.agx-sub{display:none}.agx-h1{font-size:clamp(40px,6vw,92px);margin-bottom:0}}

/* Text / Talk switch lives on the stage (stays reachable after the panel has turned into floating bubbles) */
.ag-mode{position:absolute;z-index:9;right:clamp(12px,3vw,40px);top:calc(var(--nav-h) + 12px);background:rgba(10,10,12,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ag-head{padding-right:16px}
@media(max-width:700px){.ag-mode{right:10px;top:calc(var(--nav-h) + 6px)}}