/* Ask Hexa: the marketing chat on the landing page (web/assist.js). Tokens and components only, plus the two brand colours
   sampled from assets/hexa-icon.png (blue roof, orange nut), defined once below. Look: see web/DESIGN.md. */
.hx-m,.ax-launch,.ax-greet,.ax-panel{--hx-blue:#2672B1;--hx-orange:#F3901F;--hx-face:#FFF3DF;--hx-eye:#1C2B33}

/* ---- the mascot: an inline SVG; state by classes on the wrapper (.is-think, .is-happy, .is-wave); transform and opacity only.
   Three faces are stacked and cross-faded (180 ms); the eyes blink like an eyelid; the launcher and header mascots breathe. */
.hx-m{display:inline-block;flex:none;line-height:0}
.hx-m svg{display:block;width:100%;height:100%;overflow:visible}
.hx-roof{fill:none;stroke:var(--hx-blue);stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round;transform-box:view-box;transform-origin:24px 15px;
  transition:transform 260ms ease-out;will-change:transform}
.hx-nut{fill:var(--hx-face);stroke:var(--hx-orange);stroke-width:5.6;stroke-linejoin:round}
.hx-eye{fill:var(--hx-eye)}
.hx-hl{fill:#fff}
.hx-line{fill:none;stroke:var(--hx-eye);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hx-all{transform-box:view-box;transform-origin:24px 43px}
.hx-eyes{transform-box:fill-box;transform-origin:center;animation:hx-blink 19.8s var(--hx-d,0s) infinite;will-change:transform}
.hx-look{transform-box:view-box;will-change:transform}

/* expressions: only the active face is visible; changes fade and settle by 0.6 px */
.hx-f{opacity:0;transform:translateY(.6px);transition:opacity 180ms ease,transform 180ms ease}
.hx-idle{opacity:1;transform:none}
.is-think .hx-idle,.is-happy .hx-idle{opacity:0;transform:translateY(.6px)}
.is-think .hx-think{opacity:1;transform:none}
.is-happy .hx-think{opacity:0;transform:translateY(.6px)}
.is-happy .hx-happy{opacity:1;transform:none}

.is-wave .hx-all{animation:hx-wave .9s linear}
.is-think .hx-look{animation:hx-glance 3.2s infinite}
.ax-launch .hx-m svg,.ax-head .hx-m svg{transform-origin:50% 92%;animation:hx-breathe 4.8s ease-in-out infinite;will-change:transform}
.ax-launch:hover .hx-roof,.ax-launch:focus-visible .hx-roof{transform:translateY(-2.5px) rotate(-7deg);transition:transform 320ms cubic-bezier(.34,1.56,.64,1)}

/* blink: 1 > .08 > 1 in 220 ms (110 ms ease-in closing, 110 ms ease-out opening); a double blink closes every third 6.6 s cycle */
@keyframes hx-blink{
  0%,28%{transform:scaleY(1);animation-timing-function:ease-in}
  28.56%{transform:scaleY(.08);animation-timing-function:ease-out}
  29.11%,61%{transform:scaleY(1);animation-timing-function:ease-in}
  61.56%{transform:scaleY(.08);animation-timing-function:ease-out}
  62.11%,89%{transform:scaleY(1);animation-timing-function:ease-in}
  89.56%{transform:scaleY(.08);animation-timing-function:ease-out}
  90.11%,91.1%{transform:scaleY(1);animation-timing-function:ease-in}
  91.66%{transform:scaleY(.08);animation-timing-function:ease-out}
  92.22%,100%{transform:scaleY(1)}
}
@keyframes hx-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-.6px) scale(1.012)}}
/* damped swing, pivot at the bottom centre of the hexagon */
@keyframes hx-wave{
  0%{transform:rotate(0);animation-timing-function:ease-in-out}
  22%{transform:rotate(9deg);animation-timing-function:ease-in-out}
  44%{transform:rotate(-6deg);animation-timing-function:ease-in-out}
  64%{transform:rotate(3.5deg);animation-timing-function:ease-in-out}
  82%{transform:rotate(-1.5deg);animation-timing-function:ease-in-out}
  100%{transform:rotate(0)}
}
/* thinking: the eyes glide between up-right and up-left, resting 1.2 s on each side (the mouth stays flat) */
@keyframes hx-glance{
  0%,37.5%{transform:translateX(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  50%,87.5%{transform:translateX(-1.8px);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%{transform:translateX(0)}
}

/* ---- launcher (bottom right) */
.ax-launch{position:fixed;right:var(--sp-4);bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px));z-index:var(--z-fab);display:flex;align-items:center;gap:var(--sp-3);
  height:56px;padding:0 var(--sp-5) 0 var(--sp-2);border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--card);color:var(--ink);
  font:inherit;text-align:left;cursor:pointer;box-shadow:var(--shadow-pop);transition:transform var(--dur) var(--ease),border-color var(--dur-fast)}
.ax-launch:hover{border-color:var(--oak);transform:translateY(-2px)}
.ax-launch:focus-visible{outline:none;box-shadow:var(--shadow-pop),var(--ring);border-color:var(--slate)}
.ax-launch .hx-m{width:40px;height:40px}
.ax-lt{display:flex;flex-direction:column;gap:2px}
.ax-lt b{font-size:var(--fs-ui);font-weight:var(--fw-semi);line-height:1.1}
.ax-lt small{font-size:var(--fs-label);color:var(--muted);line-height:1.1}
.ax-chev{display:none}
/* open on a desktop: the pill becomes a round "minimize" button in the same corner */
.ax-launch.is-open{width:56px;padding:0;justify-content:center}
.ax-launch.is-open .ax-lt,.ax-launch.is-open .hx-m{display:none}
.ax-launch.is-open .ax-chev{display:block}

/* ---- the greeting bubble above the launcher */
.ax-greet{position:fixed;right:var(--sp-4);bottom:calc(var(--sp-4) + 56px + var(--sp-3) + env(safe-area-inset-bottom,0px));z-index:var(--z-fab);max-width:min(280px,calc(100vw - 32px));
  display:flex;align-items:flex-start;background:var(--card);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-panel) var(--r-panel) 4px var(--r-panel);
  box-shadow:var(--shadow-pop);transform-origin:bottom right;animation:ax-pop var(--dur) var(--ease)}
.ax-greet[hidden]{display:none}
.ax-greet-open{flex:1;min-height:var(--tap);padding:var(--sp-3) 0 var(--sp-3) var(--sp-4);border:0;background:none;color:inherit;font:inherit;font-size:var(--fs-small);line-height:1.4;text-align:left;cursor:pointer;border-radius:var(--r-panel)}
.ax-greet-x{flex:none;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:var(--r-pill)}
.ax-greet-x:hover{color:var(--ink)}
.ax-greet button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* ---- panel */
.ax-panel{position:fixed;right:var(--sp-4);bottom:calc(var(--sp-4) + 56px + var(--sp-3) + env(safe-area-inset-bottom,0px));z-index:var(--z-drawer);width:384px;max-width:calc(100vw - 32px);height:min(620px,calc(100vh - 120px));
  display:flex;flex-direction:column;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--shadow-pop);overflow:hidden;
  transform-origin:bottom right;animation:ax-pop 180ms var(--ease)}
.ax-panel[hidden]{display:none}
.ax-panel:focus{outline:none}
@keyframes ax-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes ax-sheet{from{transform:translateY(100%)}to{transform:none}}

.ax-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);min-height:64px;border-bottom:1px solid var(--line);flex:none}
.ax-head .hx-m{width:32px;height:32px}
.ax-head-t{flex:1;min-width:0}
.ax-head h2{margin:0;font-size:var(--fs-body);font-weight:var(--fw-semi);line-height:1.2}
.ax-head p{margin:2px 0 0;font-size:var(--fs-label);color:var(--muted);line-height:1.3}

.ax-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-4) var(--sp-3) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);background:var(--paper)}
.ax-row{display:flex;align-items:flex-end;gap:var(--sp-2);max-width:100%}
.ax-row.me{justify-content:flex-end}
.ax-av{flex:none;width:24px;height:24px;align-self:flex-start;margin-top:2px}
.ax-av .hx-m{width:24px;height:24px}
.ax-b{max-width:84%;padding:var(--sp-2) var(--sp-3);border-radius:14px;font-size:var(--fs-small);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.ax-row.bot .ax-b{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.ax-row.me .ax-b{background:var(--ink);color:var(--on-ink);border-bottom-right-radius:4px}
.ax-row.gap{margin-top:var(--sp-2)}
.ax-b a,.ax-note a{white-space:nowrap}
.ax-b a{color:var(--oak-ink);font-weight:var(--fw-medium)}
.ax-row.me .ax-b a,.ax-note a{white-space:nowrap}
.ax-b a{color:inherit}
.ax-dots{display:inline-flex;gap:4px;align-items:center;height:18px}
.ax-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:ax-dot 1.1s ease-in-out infinite}
.ax-dots i:nth-child(2){animation-delay:.15s}
.ax-dots i:nth-child(3){animation-delay:.3s}
@keyframes ax-dot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.ax-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-1) 0 0 32px}
.ax-chips .chip{min-height:var(--tap);font-size:var(--fs-small);padding:0 var(--sp-3)}
.ax-chips .chip:hover{border-color:var(--oak)}
.ax-note{display:flex;align-items:flex-start;gap:var(--sp-2);margin:var(--sp-1) 0 0 32px;padding:var(--sp-3);border-radius:var(--r-card);font-size:var(--fs-small);line-height:1.45}
.ax-note.err{background:var(--err-soft);color:var(--err);flex-wrap:wrap}
.ax-note.err a{color:inherit;font-weight:var(--fw-semi)}
.ax-note.err>span{flex:1 1 calc(100% - 30px);min-width:0}
.ax-note.err .btn{color:var(--err);min-height:var(--tap-sm);margin-left:auto}
.ax-note.ok{align-items:center;gap:6px;margin-top:0;padding:0 var(--sp-1);background:none;color:var(--ok);font-size:var(--fs-xs);line-height:1.3}
.ax-note.ok svg,.ax-note.err svg{flex:none;margin-top:2px}
.ax-note.ok svg{width:14px;height:14px;margin-top:0}
.ax-note.calm{background:var(--sunk);color:var(--ink);margin-left:0}

/* welcome + consent */
.ax-welcome{flex:1;overflow-y:auto;padding:var(--sp-6) var(--sp-5) var(--sp-4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);background:var(--paper)}
.ax-welcome[hidden],.ax-log[hidden],.ax-actions[hidden],.ax-form[hidden],.ax-count[hidden]{display:none}
.ax-welcome .hx-m{width:48px;height:48px}
.ax-welcome h3{margin:var(--sp-1) 0 0;font-size:var(--fs-q);font-weight:var(--fw-heavy);letter-spacing:var(--track-title);line-height:1.15}
.ax-welcome p{margin:0;font-size:var(--fs-ui);line-height:1.5;color:var(--muted)}
.ax-welcome .check{align-items:flex-start;margin-top:var(--sp-3);font-size:var(--fs-small);line-height:1.45;font-weight:var(--fw-regular);color:var(--ink)}
.ax-welcome .check input{flex:none;margin-top:2px}
.ax-welcome .check a{color:var(--oak-ink);font-weight:var(--fw-medium)}
.ax-welcome .btn{width:100%}

/* action row and composer */
.ax-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:0 var(--sp-4);border-top:1px solid var(--line);background:var(--card);flex:none}
.ax-actions a{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--tap);font-size:var(--fs-xs);text-decoration:none;border-radius:var(--r-sm)}
.ax-actions a:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.ax-actions .go{color:var(--oak-ink);font-weight:var(--fw-semi)}
.ax-actions .go:hover{text-decoration:underline}
.ax-actions .tel{color:var(--muted);font-weight:var(--fw-medium)}
.ax-actions .tel:hover{color:var(--ink)}
.ax-form{display:flex;align-items:flex-end;gap:var(--sp-2);margin:0 var(--sp-3) var(--sp-2);padding:4px 4px 4px var(--sp-4);border:1px solid var(--line-strong);border-radius:26px;background:var(--card);position:relative;flex:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.ax-form:focus-within{border-color:var(--slate);box-shadow:var(--ring)}
.ax-form textarea{flex:1;min-width:0;resize:none;border:0;outline:none;background:none;color:var(--ink);font:inherit;font-size:var(--fs-ui);line-height:22px;padding:11px 0;max-height:132px;overflow-y:auto}
.ax-form textarea::placeholder{color:var(--muted)}
.ax-send{flex:none;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);cursor:pointer;transition:opacity var(--dur-fast)}
.ax-send:hover:not(:disabled){opacity:.88}
.ax-send:disabled{opacity:.35;cursor:default}
.ax-send:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ax-count{flex:none;align-self:flex-end;padding:0 0 15px;font-size:var(--fs-label);line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}
.ax-foot{margin:0;padding:0 var(--sp-4) var(--sp-3);font-size:var(--fs-label);line-height:1.4;color:var(--muted);flex:none}
.ax-actions+.ax-form,.ax-welcome~.ax-form{margin-top:0}
.ax-panel button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---- phone: round launcher, full-height sheet */
@media (max-width:599px){
  .ax-launch{width:56px;padding:0;justify-content:center}
  .ax-lt{display:none}
  .ax-launch.is-open{display:none}
  .ax-panel{right:0;left:0;bottom:0;top:8px;width:auto;max-width:none;height:auto;border-radius:var(--r-sheet) var(--r-sheet) 0 0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px);transform-origin:bottom center;animation:ax-sheet 220ms var(--ease);height:calc(100dvh - 8px)}
  .ax-greet{max-width:calc(100vw - 32px)}
  .ax-welcome{padding-top:var(--sp-5)}
  html.ax-lock,html.ax-lock body{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .hx-m,.hx-m *,.ax-panel,.ax-greet,.ax-dots i,.ax-launch{animation:none!important;transition:none!important}
}