/* Rex — shared guide-avatar engine (data-driven by window.REX_STEPS).
   Hertz-box variant: the Hertz demo pages do NOT load demo.css, so the tokens rex.css
   depends on are declared here, scoped to the Rex elements only (they inherit to children).
   Values are copied verbatim from general/assets/demo.css so Rex looks identical everywhere. */
#av-spot,#av-wrap{--panel:#111a29;--panel2:#0d1522;--line:#1f2b40;--ink:#e8edf5;
  --muted:#93a4bd;--blue:#2f7dfb;--blue2:#4da3e6}
#av-spot{position:absolute;z-index:2147482000;border:2px solid var(--blue2);border-radius:12px;
  box-shadow:0 0 0 4px rgba(47,125,251,.25),0 0 0 9999px rgba(4,8,18,.55);pointer-events:none;
  transition:all .35s cubic-bezier(.4,.1,.2,1);display:none}
#av-wrap{position:fixed;right:20px;bottom:20px;z-index:2147483000;font:14px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
#av-launch{display:flex;align-items:center;gap:10px;cursor:pointer;background:var(--panel);
  border:1px solid var(--line);border-radius:40px;padding:8px 16px 8px 8px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
#av-launch .face{width:44px;height:44px;flex:none}
#av-launch .cta{font-weight:800;font-size:13px;color:var(--ink)}
#av-launch .cta span{display:block;font-weight:600;font-size:11px;color:var(--muted)}
#av-launch .ping{position:absolute;top:2px;left:2px;width:48px;height:48px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(47,125,251,.5);animation:avping 2.2s infinite}
@keyframes avping{0%{box-shadow:0 0 0 0 rgba(47,125,251,.5)}70%{box-shadow:0 0 0 16px rgba(47,125,251,0)}100%{box-shadow:0 0 0 0 rgba(47,125,251,0)}}

#av-panel{display:none;width:340px;max-width:calc(100vw - 40px);background:var(--panel);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden}
#av-panel .hd{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(47,125,251,.12),transparent)}
#av-panel .face{width:46px;height:46px;flex:none}
#av-panel .who b{font-size:13.5px;color:var(--ink)}
#av-panel .who span{display:block;font-size:11px;color:var(--muted)}
#av-panel .x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;padding:4px}
#av-panel .x:hover{color:var(--ink)}
#av-bubble{padding:15px 15px 6px;font-size:13.5px;color:var(--ink);min-height:74px}
#av-step{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:800;margin-bottom:5px}
#av-panel .ctl{display:flex;align-items:center;gap:7px;padding:10px 14px 14px}
#av-panel .ctl button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:9px;
  padding:8px 12px;font:700 12.5px inherit;cursor:pointer}
#av-panel .ctl button:hover{border-color:var(--blue)}
#av-panel .ctl button.pri{background:var(--blue);border-color:var(--blue);color:#fff}
#av-panel .ctl .sp{margin-left:auto}
#av-panel .ctl .ic{padding:8px 11px}
#av-panel .prog{height:3px;background:var(--panel2)}
#av-panel .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue2));width:0;transition:width .3s}

.av-face .av-eyes{transform-box:fill-box;transform-origin:center;animation:avblink 5s infinite}
@keyframes avblink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.av-mouth{transform-box:fill-box;transform-origin:center}
.av-speaking .av-mouth{animation:avtalk .26s infinite}
@keyframes avtalk{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.7)}}
@media(max-width:560px){#av-wrap{right:12px;bottom:12px}}