/* ==========================================================================
   FILE        assets/aes-assistant.css
   UPLOAD TO   public_html/assets/aes-assistant.css
   WHAT IT IS  The AES assistant's look (assets/aes-assistant.js): laid out
               as the Claude.ai chat is (a clean column, your messages in a
               soft bubble, answers as flowing text, the composer at the
               foot), in AES's own colours and type (aes.css: the wall, the
               panels, the steel text, AES red; Rajdhani, Orbitron and Share
               Tech Mono). Every rule starts .aas or html.aas-open, so
               nothing here reaches the rest of the page.
   VERSION     REV86  (2026-10-31)
   CHANGES     REV86: new.
   ========================================================================== */
.aas,.aas-launch{--aas-wall:var(--wall,#0F1E2E);--aas-ink:var(--ink,#0A1622);--aas-panel:var(--panel,#152838);--aas-panel2:var(--panel-2,#1B3145);
  --aas-line:var(--line,rgba(201,212,224,.14));--aas-steel:var(--steel,#C9D4E0);--aas-mute:var(--mute,#8FA3B8);--aas-white:var(--white,#F4F8FC);
  --aas-red:var(--red,#D10000);--aas-blue:var(--blue,#2E7FC2);--aas-halo:var(--halo,#FFE3BC);
  font-family:"Rajdhani",system-ui,-apple-system,"Segoe UI",sans-serif;box-sizing:border-box}
.aas *,.aas *::before,.aas *::after{box-sizing:border-box}
.aas svg,.aas-launch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.aas [hidden],.aas-launch[hidden],.aas[hidden]{display:none!important}

/* ---- the round button: bottom right, above the player (aes.css .player sits 14px from the foot, about 64px tall,
   at z-index 150) and below the header (300) ---- */
.aas-launch{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom));z-index:290;
  width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.18);cursor:pointer;color:#fff;
  background:radial-gradient(circle at 32% 28%,#FF4A4A 0,var(--aas-red) 52%,#7A0000 100%);
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 4px rgba(209,0,0,.16);display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease,box-shadow .18s ease}
.aas-launch svg{width:26px;height:26px;fill:#fff;stroke:#fff;stroke-width:1}
.aas-launch:hover,.aas-launch:focus-visible{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 6px rgba(209,0,0,.22)}
.aas-launch:focus-visible{outline:2px solid var(--aas-white);outline-offset:3px}
.aas-launch-tip{position:absolute;right:66px;white-space:nowrap;padding:6px 10px;border-radius:8px;background:rgba(10,22,34,.94);border:1px solid var(--aas-line);
  font:600 13px/1 "Rajdhani",sans-serif;letter-spacing:.04em;color:var(--aas-white);opacity:0;pointer-events:none;transform:translateX(6px);transition:opacity .18s,transform .18s}
.aas-launch:hover .aas-launch-tip,.aas-launch:focus-visible .aas-launch-tip{opacity:1;transform:none}
html.aas-open .aas-launch{display:none}

/* ---- the panel: down the right on a computer, the whole screen on a phone. Above AES's sticky header (300) and its
   splash (400), below the mouseover atom's own layer (aes-atom.css, 500), which draws nothing over the panel. ---- */
.aas{position:fixed;top:0;right:0;bottom:0;z-index:450;width:min(460px,100vw);display:flex;flex-direction:column;
  background:var(--aas-wall);color:var(--aas-steel);border-left:1px solid var(--aas-line);box-shadow:-24px 0 60px rgba(0,0,0,.45);
  animation:aas-in .22s ease-out}
@keyframes aas-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.aas{animation:none}.aas-thinking svg,.aas-mic.is-rec::after{animation:none!important}}
@media (max-width:720px){
  .aas{width:100vw;height:100dvh;border-left:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  html.aas-open,html.aas-open body{overflow:hidden}
}

.aas-top{display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 10px 8px 16px;border-bottom:1px solid var(--aas-line)}
.aas-mark{display:inline-flex;color:var(--aas-red)}
.aas-mark svg{fill:var(--aas-red);stroke:var(--aas-red);stroke-width:1;width:18px;height:18px}
.aas-title{margin:0;font:700 14px/1.2 "Orbitron",sans-serif;letter-spacing:.06em;color:var(--aas-white);text-transform:uppercase;white-space:nowrap;flex:none}
.aas-who{font:400 11px/1.2 "Share Tech Mono",monospace;letter-spacing:.06em;color:var(--aas-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto;margin-left:4px}
.aas-gap{flex:1 1 auto}
.aas-ibtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:0;background:transparent;
  color:var(--aas-mute);cursor:pointer;transition:background .15s,color .15s;flex:none}
.aas-ibtn:hover{background:rgba(201,212,224,.08);color:var(--aas-white)}
.aas-ibtn:focus-visible,.aas-send:focus-visible,.aas-act:focus-visible,.aas-cbtn:focus-visible,.aas-chip:focus-visible{outline:2px solid var(--aas-blue);outline-offset:2px}

/* ---- the conversation ---- */
.aas-scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.aas-col{max-width:720px;margin:0 auto;padding:20px 18px 8px;display:flex;flex-direction:column;gap:22px}
.aas-msg{display:flex;flex-direction:column;min-width:0}
.aas-u{align-items:flex-end}
.aas-bubble{max-width:85%;padding:10px 14px;border-radius:18px 18px 6px 18px;background:var(--aas-panel2);color:var(--aas-white);
  font:500 16.5px/1.5 "Rajdhani",sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}

.aas-md{font:500 16.5px/1.62 "Rajdhani",sans-serif;color:var(--aas-steel);overflow-wrap:anywhere}
.aas-md > *{margin:0 0 .7em}
.aas-md > *:last-child{margin-bottom:0}
.aas-md h3,.aas-md h4{font-family:"Orbitron",sans-serif;color:var(--aas-white);letter-spacing:.02em;line-height:1.3;margin:1.1em 0 .45em}
.aas-md h3{font-size:15px}
.aas-md h4{font-size:13.5px}
.aas-md > h3:first-child,.aas-md > h4:first-child{margin-top:0}
.aas-md strong{color:var(--aas-white);font-weight:700}
.aas-md a{color:#8EC5F2;text-decoration:underline;text-underline-offset:3px}
.aas-md a:hover{color:var(--aas-white)}
.aas-md ul,.aas-md ol{padding-left:1.35em}
.aas-md li{margin:.22em 0}
.aas-md li > ul,.aas-md li > ol{margin:.2em 0 .1em}
.aas-md code{font:400 .86em/1.4 "Share Tech Mono",ui-monospace,monospace;background:rgba(201,212,224,.09);border:1px solid rgba(201,212,224,.08);
  border-radius:5px;padding:.08em .35em;color:var(--aas-halo)}
.aas-md blockquote{margin-left:0;padding:.1em 0 .1em 14px;border-left:3px solid rgba(209,0,0,.7);color:var(--aas-white)}
.aas-md hr{border:0;border-top:1px solid var(--aas-line);margin:1.1em 0}
.aas-code{border:1px solid var(--aas-line);border-radius:12px;background:var(--aas-ink);overflow:hidden}
.aas-code-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 4px 12px;border-bottom:1px solid var(--aas-line);
  font:400 11.5px/1 "Share Tech Mono",monospace;letter-spacing:.06em;color:var(--aas-mute);background:rgba(201,212,224,.03)}
.aas-code pre{margin:0;padding:12px 14px;overflow-x:auto}
.aas-code pre code{display:block;background:none;border:0;padding:0;font-size:13px;line-height:1.55;color:#E3EAF2;white-space:pre}
.aas-table{overflow-x:auto;border:1px solid var(--aas-line);border-radius:10px}
.aas-table table{border-collapse:collapse;width:100%;font-size:15px}
.aas-table th,.aas-table td{padding:8px 12px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(201,212,224,.08)}
.aas-table th{font:600 12px/1.3 "Share Tech Mono",monospace;letter-spacing:.06em;color:var(--aas-mute);background:rgba(201,212,224,.04)}
.aas-table tr:last-child td{border-bottom:0}

.aas-acts{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:8px;min-height:30px}
.aas-act,.aas-cbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px;border-radius:8px;border:0;background:transparent;
  color:var(--aas-mute);font:500 13px/1 "Rajdhani",sans-serif;cursor:pointer}
.aas-act svg,.aas-cbtn svg{width:16px;height:16px}
.aas-act:hover,.aas-cbtn:hover{background:rgba(201,212,224,.08);color:var(--aas-white)}
.aas-act.is-done,.aas-cbtn.is-done{color:#8FE3B0}
.aas-by{font:400 11px/1.2 "Share Tech Mono",monospace;letter-spacing:.04em;color:var(--aas-mute)}
.aas-flag{font:600 11px/1 "Share Tech Mono",monospace;letter-spacing:.06em;color:var(--aas-halo);border:1px solid rgba(255,227,188,.3);border-radius:999px;padding:4px 8px}
.aas-srcs{margin-top:10px;font-size:15px}
.aas-srcs summary{cursor:pointer;color:var(--aas-mute);font:600 13px/1.4 "Rajdhani",sans-serif}
.aas-src{margin:6px 0 0;padding-left:1.4em}
.aas-src a{color:#8EC5F2}
.aas-suggest{width:100%;height:76px;margin-top:10px;border:1px solid var(--aas-line);border-radius:10px;background:#fff}

/* Thinking: the AES spark, breathing, until the first words arrive */
.aas-thinking{display:flex;align-items:center;gap:10px;color:var(--aas-mute);font:600 15px/1 "Rajdhani",sans-serif;letter-spacing:.02em}
.aas-thinking svg{width:22px;height:22px;fill:var(--aas-red);stroke:var(--aas-red);stroke-width:1;animation:aas-breathe 1.4s ease-in-out infinite}
@keyframes aas-breathe{0%,100%{transform:scale(.82) rotate(0);opacity:.6}50%{transform:scale(1.08) rotate(45deg);opacity:1}}
.aas-a.is-live .aas-md:empty{display:none}

/* The empty conversation */
.aas-hello{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:12vh 8px 0}
.aas-hello-mark svg{width:38px;height:38px;fill:var(--aas-red);stroke:var(--aas-red);stroke-width:.8}
.aas-hello-h{margin:0;font:700 22px/1.2 "Orbitron",sans-serif;color:var(--aas-white);letter-spacing:.01em}
.aas-hello-p{margin:0;font:500 16px/1.5 "Rajdhani",sans-serif;color:var(--aas-mute);max-width:32ch}
.aas-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.aas-chip{border:1px solid var(--aas-line);background:var(--aas-panel);color:var(--aas-steel);border-radius:999px;padding:9px 14px;
  font:600 14.5px/1 "Rajdhani",sans-serif;cursor:pointer;transition:border-color .15s,color .15s}
.aas-chip:hover{border-color:rgba(201,212,224,.4);color:var(--aas-white)}

/* ---- the composer ---- */
.aas-composer{padding:8px 14px 10px;max-width:748px;width:100%;margin:0 auto}
.aas-note{margin:0 4px 8px;padding:8px 12px;border-radius:10px;background:rgba(209,0,0,.1);border:1px solid rgba(209,0,0,.35);color:#FFD6D6;
  font:500 14.5px/1.4 "Rajdhani",sans-serif}
.aas-note.is-info{background:rgba(46,127,194,.12);border-color:rgba(46,127,194,.45);color:#D6E9FA}
.aas-box{border:1px solid rgba(201,212,224,.2);border-radius:20px;background:var(--aas-panel);padding:10px 10px 8px 14px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);transition:border-color .15s,box-shadow .15s}
.aas-box:focus-within{border-color:rgba(46,127,194,.7);box-shadow:0 0 0 3px rgba(46,127,194,.18),0 6px 24px rgba(0,0,0,.25)}
.aas-text{display:block;width:100%;min-height:26px;max-height:220px;resize:none;border:0;outline:0;background:transparent;color:var(--aas-white);
  font:500 16.5px/1.5 "Rajdhani",sans-serif;padding:2px 0;margin:0}
.aas-text::placeholder{color:var(--aas-mute);opacity:1}
/* The whole box shows focus (.aas-box:focus-within), as Claude.ai's does: AES's own ring for every field (aes.css,
   textarea:focus-visible) would draw a second box inside it. */
.aas .aas-text:focus,.aas .aas-text:focus-visible{outline:0;box-shadow:none;border:0}
.aas-row{display:flex;align-items:center;gap:6px;margin-top:6px}
.aas-model-wrap{position:relative;display:inline-flex;align-items:center;min-width:0;border-radius:10px}
.aas-model-wrap:hover{background:rgba(201,212,224,.07)}
.aas-model{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--aas-steel);cursor:pointer;max-width:210px;
  font:600 14px/1 "Rajdhani",sans-serif;letter-spacing:.02em;padding:9px 26px 9px 8px;text-overflow:ellipsis}
.aas-model option,.aas-model optgroup{background:var(--aas-panel);color:var(--aas-white)}
.aas-model:focus-visible{outline:2px solid var(--aas-blue);outline-offset:1px;border-radius:8px}
.aas-chev{position:absolute;right:6px;width:14px!important;height:14px!important;pointer-events:none;color:var(--aas-mute)}
.aas-rec-time{font:400 12.5px/1 "Share Tech Mono",monospace;color:#FF8A8A;letter-spacing:.06em;min-width:3.4ch;text-align:right}
.aas-mic{position:relative;border-radius:50%}
.aas-mic .aas-i-stop,.aas-send .aas-i-stop{display:none}
.aas-mic.is-rec{background:var(--aas-red);color:#fff}
.aas-mic.is-rec .aas-i-mic{display:none}
.aas-mic.is-rec .aas-i-stop{display:block;fill:#fff;stroke:#fff}
.aas-mic.is-rec::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(209,0,0,.55);animation:aas-pulse 1.2s ease-out infinite}
@keyframes aas-pulse{from{transform:scale(.9);opacity:1}to{transform:scale(1.35);opacity:0}}
.aas-mic.is-wait{opacity:.7;cursor:progress}
.aas-mic.is-wait .aas-i-mic{animation:aas-breathe 1.2s ease-in-out infinite}
.aas-send{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;flex:none;
  background:var(--aas-red);color:#fff;transition:background .15s,opacity .15s}
.aas-send svg{stroke-width:2.2}
.aas-send:hover:not(:disabled){background:#E5303A}
.aas-send:disabled{background:rgba(201,212,224,.14);color:rgba(201,212,224,.45);cursor:default}
.aas.is-busy .aas-send{background:var(--aas-white);color:var(--aas-ink)}
.aas.is-busy .aas-send .aas-i-send{display:none}
.aas.is-busy .aas-send .aas-i-stop{display:block;fill:currentColor;stroke:currentColor;width:14px;height:14px}
.aas-fine{margin:7px 0 0;text-align:center;font:500 12.5px/1.3 "Rajdhani",sans-serif;color:var(--aas-mute)}
.aas-offscreen{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0}