/* Upgrades on top of the artifact's own styles (loaded after them). */

/* ---- Alex's face: chat header avatar + the big one in the Ask section ---- */
.alex-av{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#1d1d27,#0a0a0e);border:1px solid rgba(255,255,255,.18);
  box-shadow:-6px 0 18px -10px #ff1f3d,6px 0 18px -10px #1fff6a}
.alex-face{width:34px;height:34px;display:block;overflow:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.alex-face *{transform-box:fill-box;transform-origin:center}
.alex-face .ax-skull{fill:#ece8df}
.alex-face .ax-eye ellipse,.alex-face .ax-nose{fill:#0b0b10}
.alex-face .ax-teeth{stroke:#0b0b10;stroke-width:1.6;fill:none}
.alex-face .ax-l .ax-glow{fill:#ff1f3d;filter:drop-shadow(0 0 2.5px #ff1f3d)}
.alex-face .ax-r .ax-glow{fill:#1fff6a;filter:drop-shadow(0 0 2.5px #1fff6a)}
.alex-face .ax-glow{animation:axPulse 2.4s ease-in-out infinite;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .3s}
.alex-face .ax-eye ellipse,.alex-face .ax-jaw{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@keyframes axPulse{50%{opacity:.55}}
@keyframes axTalk{to{transform:translateY(2.6px)}}
@keyframes axShake{25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.mood-talk .ax-jaw{animation:axTalk .2s ease-in-out infinite alternate}
.mood-happy .ax-glow{animation-duration:1.1s}
.mood-laugh .alex-face{animation:axShake .32s ease-in-out 5}
.mood-laugh .ax-jaw{animation:axTalk .13s ease-in-out infinite alternate}
.mood-laugh .ax-eye ellipse{transform:scaleY(.3)}
.mood-wink .ax-r ellipse,.mood-wink .ax-r .ax-glow{transform:scaleY(.12)}
.mood-wink .alex-face{transform:rotate(-6deg)}
.mood-think .alex-face{transform:rotate(-9deg)}
.mood-think .ax-glow{transform:translate(-1.6px,-2.2px)}
.mood-sad .alex-face{transform:rotate(7deg) translateY(1.5px)}
.mood-sad .ax-glow{opacity:.3;animation:none}
.mood-shock .ax-eye ellipse{transform:scale(1.18)}
.mood-shock .ax-jaw{transform:translateY(4px)}
.ai-hd .alex-av + div b{line-height:1.1}

/* ---- Ask Alex section ---- */
.ask{padding-block:clamp(60px,9vw,140px) clamp(70px,9vw,140px)}
.ask-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.ask .h2{font-size:clamp(34px,4.8vw,92px)}
.ask .h2 em{background:linear-gradient(90deg,#ff1f3d,#ffb000 50%,#1fff6a);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.ask-intro{display:flex;align-items:center;gap:clamp(16px,2vw,26px);margin-bottom:26px}
.ask-face{flex:none;width:clamp(96px,10vw,140px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(circle at 50% 38%,#1d1d27,#08080b 70%);border:1px solid rgba(255,255,255,.14);
  box-shadow:-14px 0 40px -18px #ff1f3d,14px 0 40px -18px #1fff6a;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ask-face:hover{transform:rotate(-6deg) scale(1.04)}
.ask-face:focus-visible{outline:2px solid #1fff6a;outline-offset:4px}
.ask-face .alex-face{width:72%;height:72%}
.ask-face .ax-glow{transition:transform .12s linear}
.ask-face.blink .ax-eye ellipse{transform:scaleY(.1)}
.ask-face.blink .ax-glow{opacity:0}
.ask-face:hover .ax-jaw{transform:translateY(3px)}
.ask-lead{font-family:var(--mono);font-size:13px;line-height:1.65;color:rgba(255,255,255,.75);max-width:44ch}
.ask-form{display:flex;gap:8px;padding:6px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);transition:border-color .3s,box-shadow .3s}
.ask-form:focus-within{border-color:rgba(31,255,106,.7);box-shadow:0 0 0 4px rgba(31,255,106,.08)}
.ask-form input{flex:1;min-width:0;height:50px;padding:0 18px;background:none;border:0;outline:0;color:var(--ink);font:16px var(--mono)}
.ask-form input::placeholder{color:var(--dim)}
.ask-form .pill{height:50px;padding:0 26px;flex:none}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ask-chips button{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font:500 12px var(--mono);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);transition:background .25s,border-color .25s,color .25s,transform .25s}
.ask-chips button:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-2px)}
@media (max-width:900px){.ask-grid{grid-template-columns:minmax(0,1fr)}.ask .h2{font-size:9vw}.nav-ask{display:none}}

/* ---- live week strip in Visit ---- */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:-10px 0 30px}
.wk{border:1px solid var(--line);border-radius:14px;padding:10px 8px 9px;display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--dim);min-width:0}
.wk b{font-weight:500;color:var(--ink)}
.wk span{white-space:nowrap}
.wk .m{display:none}
.wk.on{border-color:rgba(31,255,106,.55);color:var(--ink);
  background:linear-gradient(90deg,rgba(31,255,106,.18) calc(var(--p,0) * 100%),rgba(31,255,106,.04) 0)}
.wk i{font-style:normal;font-size:10px;line-height:1.2;color:#4dff88}
@media (max-width:520px){.week{gap:4px}.wk{padding:8px 5px;font-size:10px;letter-spacing:0;border-radius:10px}.wk i{font-size:9px}.wk .d{display:none}.wk .m{display:inline}}
@media (prefers-reduced-motion:reduce){.alex-face,.alex-face *{animation:none!important}}
@media (max-width:520px){.nav-r{gap:14px}}