/* Ask AXIS · Ahmad's assistant, ported as is */
.ax-fab,.ax-panel,#axGlow{--fog:#93A7AE;--paper:#E8EEF0;--steel:#7C949D;--cyan:#1ECCD5}
.ax-fab,.ax-panel{color:var(--paper);font-family:inherit}
.ax-fab button,.ax-panel button{font:inherit;color:inherit;cursor:pointer}
body.app-open .ax-fab{display:none}
/* Ahmad's page hides every [hidden] element globally; the panel needs the same rule here */
.ax-panel[hidden],.ax-mic[hidden]{display:none!important}
@property --axa{syntax:"<angle>";inherits:false;initial-value:0deg}
.ax-fab{position:fixed;z-index:70;bottom:calc(20px + env(safe-area-inset-bottom,0px));inset-inline-end:calc(20px + env(safe-area-inset-right,0px));display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.14);background:rgba(10,18,20,.62);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-radius:999px;padding:7px 18px 7px 7px;font-size:15px;box-shadow:0 14px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .25s ease,border-color .25s}
.ax-fab:hover{transform:translateY(-2px);border-color:rgba(30,204,213,.55)}
html[dir="rtl"] .ax-fab{padding:7px 7px 7px 18px}
.ax-orb{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;isolation:isolate;flex:none;background:#03181b;box-shadow:0 0 22px rgba(30,204,213,.45)}
.ax-orb::before{content:"";position:absolute;inset:-30%;background:conic-gradient(from var(--axa),#1ECCD5,#0A3E45,#7FF0F5,#1E5560,#00B3BD,#C8FBFD,#0B6E76,#1ECCD5);filter:blur(4px);animation:axspin 5s linear infinite}
.ax-orb::after{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.7),rgba(180,250,252,.18) 26%,rgba(30,204,213,0) 55%);mix-blend-mode:screen;animation:axbreath 3.4s ease-in-out infinite}
@keyframes axspin{to{--axa:360deg}}
@keyframes axbreath{0%,100%{transform:scale(.86);opacity:.75}50%{transform:scale(1.08);opacity:1}}
.ax-panel{position:fixed;z-index:80;bottom:calc(86px + env(safe-area-inset-bottom,0px));inset-inline-end:calc(20px + env(safe-area-inset-right,0px));width:min(420px,calc(100vw - 32px));height:min(640px,calc(100dvh - 120px));background:linear-gradient(180deg,rgba(14,26,29,.88),rgba(5,10,12,.94));backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);border:1px solid rgba(255,255,255,.12);border-radius:30px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);animation:axin .45s cubic-bezier(.2,.9,.25,1.15);transform-origin:bottom right}
html[dir="rtl"] .ax-panel{transform-origin:bottom left}
@keyframes axin{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.ax-head{display:flex;align-items:center;gap:10px;padding:14px 14px 0}
.ax-head b{font-weight:500;font-size:14px;letter-spacing:.04em}
.ax-head small{color:var(--fog);font-size:12px;display:block}
.ax-head .sp{margin-inline-start:auto;display:flex;gap:6px}
.ib{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);display:grid;place-items:center;transition:background-color .2s,border-color .2s,color .2s}
.ib:hover{background:rgba(255,255,255,.1)}
.ib[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan);background:rgba(30,204,213,.12)}
.ax-stage{display:grid;justify-items:center;gap:12px;padding:14px 16px 6px;transition:padding .4s ease}
.ax-big{width:104px;height:104px;transition:width .45s ease,height .45s ease,box-shadow .45s ease;box-shadow:0 0 50px rgba(30,204,213,.4),0 0 0 1px rgba(255,255,255,.08)}
.ax-big::before{filter:blur(9px)}
.ax-status{font-size:15px;color:var(--fog);min-height:1.5em;text-align:center;transition:color .3s}
.ax-panel.chatting .ax-stage{padding:6px 16px 2px}
.ax-panel.chatting .ax-big{width:56px;height:56px}
.ax-panel[data-state="listening"] .ax-orb::before{animation-duration:1.8s}
.ax-panel[data-state="listening"] .ax-orb::after{animation-duration:1.1s}
.ax-panel[data-state="thinking"] .ax-orb::before{animation-duration:.9s}
.ax-panel[data-state="speaking"] .ax-orb::after{animation:axtalk .55s ease-in-out infinite alternate}
.ax-panel[data-state="speaking"] .ax-big,.ax-panel[data-state="listening"] .ax-big{box-shadow:0 0 70px rgba(30,204,213,.7),0 0 0 1px rgba(255,255,255,.14)}
.ax-panel:not([data-state="idle"]) .ax-status{color:var(--cyan)}
@keyframes axtalk{from{transform:scale(.8)}to{transform:scale(1.18)}}
.ax-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 20px 14px;display:flex;flex-direction:column;gap:14px;mask-image:linear-gradient(transparent,#000 18px)}
.msg{max-width:90%;font-size:15.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;animation:axmsg .35s ease}
@keyframes axmsg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.bot{align-self:flex-start;color:var(--paper)}
.msg.me{align-self:flex-end;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:9px 15px;color:var(--paper)}
.msg.typing{color:transparent;width:46px;height:20px;background:radial-gradient(circle,var(--cyan) 3px,transparent 4px) 0 50%/15px 100% repeat-x;animation:axdots 1s steps(3) infinite;opacity:.8}
@keyframes axdots{0%{width:16px}100%{width:46px}}
.ax-sugg{display:flex;gap:8px;padding:0 16px 12px;overflow-x:auto;scrollbar-width:none}
.ax-sugg::-webkit-scrollbar{display:none}
.ax-sugg button{flex:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:999px;padding:8px 14px;font-size:13px;color:var(--paper);transition:background-color .2s,border-color .2s}
.ax-sugg button:hover{border-color:var(--cyan);background:rgba(30,204,213,.12)}
.ax-in{display:flex;gap:6px;margin:0 12px 10px;padding:6px;border-radius:999px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:border-color .2s,box-shadow .2s}
.ax-in:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(30,204,213,.15)}
.ax-in input{flex:1;min-width:0;background:transparent;border:0;padding:9px 8px;color:var(--paper);font:inherit;font-size:15px}
.ax-in input:focus{outline:0}
.ax-in .ib{border:0;background:transparent}
.ax-send{width:38px;height:38px;border-radius:50%;border:0;background:var(--cyan);color:#021214;display:grid;place-items:center;flex:none;transition:transform .2s}
.ax-send:hover{transform:scale(1.06)}
html[dir="rtl"] .ax-send svg{transform:scaleX(-1)}
.ax-mic.live{color:#fff;background:rgba(30,204,213,.25)!important}
.ax-note{font-size:11.5px;color:var(--steel);padding:0 18px 12px;text-align:center}
#axGlow{position:fixed;inset:0;pointer-events:none;z-index:79;opacity:0;transition:opacity .5s ease}
#axGlow::before{content:"";position:absolute;inset:0;padding:8px;background:conic-gradient(from var(--axa),#1ECCD5,#E6FEFF,#58727C,#0B8F96,#7C949D,#1ECCD5);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);filter:blur(12px);animation:axspin 3.5s linear infinite}
html.ax-live #axGlow{opacity:1}
html.still .ax-orb::before,html.still .ax-orb::after,html.still #axGlow::before{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.ax-orb::before,.ax-orb::after,#axGlow::before,.ax-panel,.msg{animation:none!important}}
@media (max-width:520px){.ax-panel{inset-inline:12px;width:auto;bottom:calc(92px + env(safe-area-inset-bottom,0px));height:min(600px,calc(100dvh - 120px))}.ax-big{width:88px;height:88px}}
/* Site fit: sit above the fixed header (z-index 100), stay below the film, login and application overlays, and open below the header */
.ax-fab{z-index:960}
#axGlow{z-index:965}
.ax-panel{z-index:970;height:min(640px,calc(100dvh - 190px))}
@media (max-width:520px){.ax-panel{height:min(600px,calc(100dvh - 180px))}}
/* Wave Axis: the assistant's face is the AXIS avatar wearing the Wave Axis badge */
.ax-orb{background:#E9EEF0 url("platform_assets/ax-avatar.svg") center/cover no-repeat}
.ax-orb::before{display:none}
/* No ring drawn over the photo; the cyan edge sits outside it */
.ax-orb::after{display:none}
.ax-orb{box-shadow:0 0 0 2px rgba(30,204,213,.75),0 0 18px rgba(30,204,213,.35)}
.ax-big{box-shadow:0 0 0 3px rgba(30,204,213,.35),0 0 40px rgba(30,204,213,.35)}