/* JoltBot Host v1 — opt-in talking guide with a restrained walking illusion.
 * The character lives inside the map briefing, never over site navigation.
 * All dialogue is captioned; system voice is optional and OFF by default.
 */
.jh-host{
 width:100%;min-width:0;margin:10px 0 4px;overflow:hidden;
 border:1px solid #577994;border-radius:15px 5px 15px 5px;
 background:radial-gradient(ellipse at 6% 55%,#2b6b9344,transparent 57%),linear-gradient(112deg,#081c31,#1a2035);
 box-shadow:0 13px 23px #0005;
}
.jh-host-top{
 min-height:37px;padding:8px 11px;display:flex;align-items:center;flex-wrap:wrap;
 gap:7px 11px;border-bottom:1px solid #486d84;background:#0c1b2c;
}
.jh-host-top>span:first-child{display:flex;align-items:center;gap:7px;flex:1 1 155px;color:#8eedff;font:950 9px/1.5 var(--font);letter-spacing:.75px}
.jh-led{display:block;flex:none;width:7px;height:7px;border-radius:50%;background:#ffac71;box-shadow:0 0 10px #ff965e}
.jh-status{color:#ffbc8b;font:850 8px/1.4 var(--font);letter-spacing:.4px}
.jh-host-top>button{
 display:inline-flex;align-items:center;justify-content:center;min-height:34px;
 padding:7px 10px;border:1px solid #4e7894;border-radius:7px;background:#15263c;
 color:#b8eafb;font:900 9px/1.45 var(--font);cursor:pointer;
}
.jh-host-body{display:grid;grid-template-columns:116px minmax(0,1fr);gap:10px;padding:11px;align-items:center;min-width:0}
.jh-host-body[hidden]{display:none!important}
.jh-sprite-button{
 width:111px;height:142px;position:relative;isolation:isolate;display:flex;
 flex-direction:column;align-items:center;justify-content:center;
 background:transparent;border:0;padding:2px;cursor:pointer;
 transform-origin:50% 90%;
}
.jh-sprite-glow{
 position:absolute;z-index:-1;inset:15px 1px 6px;border-radius:50%;
 background:radial-gradient(ellipse,#24d5ff7f,transparent 70%);filter:blur(7px);
 pointer-events:none;
}
.jh-sprite{
 display:block;width:111px;height:120px;object-fit:contain;object-position:center 15%;
 border-radius:20px;filter:drop-shadow(0 6px 10px #08ccff5c);
 mask-image:radial-gradient(ellipse at center,#000 46%,transparent 80%);
}
.jh-sprite-floor{
 position:absolute;z-index:-1;left:17px;right:17px;bottom:0;height:15px;
 border:1px solid #64d9fd8a;border-radius:50%;
 background:#2b8dbe33;box-shadow:0 0 18px #28bfff52;
}
.jh-dialogue{min-width:0;display:grid;gap:9px;align-content:center}
.jh-dialogue-kicker{color:#ffb383;font:950 8px/1.45 var(--font);letter-spacing:.75px}
.jh-dialogue p{
 margin:0;min-height:40px;padding:10px 12px;border-radius:5px 11px 11px 11px;
 background:#0a2a40;border:1px solid #4d8da8;border-left:3px solid #ff9865;
 color:#eff9ff;font:750 12px/1.6 var(--font);
 white-space:normal;overflow-wrap:anywhere;
}
.jh-controls{display:flex;flex-wrap:wrap;gap:6px}
.jh-controls button{
 flex:1 1 110px;min-height:44px;min-width:0;padding:9px 11px;border:1px solid #538da8;
 border-radius:8px 3px 8px 3px;background:#12334a;
 color:#a8eaff;font:950 9px/1.4 var(--font);letter-spacing:.15px;cursor:pointer;
}
.jh-controls button:hover,.jh-host-top>button:hover{border-color:#ffb580;background:#224055;color:#fff}
.jh-controls button[aria-pressed=true]{
 border-color:#ffbd86;background:linear-gradient(120deg,#ffbf88,#ff9d71);color:#16131c;
}
.jh-controls button:disabled{opacity:.48;cursor:not-allowed}
.jh-dialogue small{color:#9db6c8;font:650 10px/1.55 var(--font)}
.jh-sprite-button:focus-visible,.jh-controls button:focus-visible,.jh-host-top>button:focus-visible{outline:3px solid #b4f5ff;outline-offset:3px}
.jh-host.is-walking .jh-sprite-button{animation:jh-walk 1.2s ease-in-out both}
.jh-host.is-walking .jh-sprite-floor{animation:jh-steps .22s linear infinite alternate}
.jh-host.is-speaking .jh-sprite-glow{animation:jh-glow .5s ease-in-out infinite alternate}
.jh-host.is-speaking .jh-dialogue p{border-color:#ffb880;box-shadow:inset 0 0 25px #f7a6681c}
.jh-host.is-speaking .jh-led{background:#8dffb5;box-shadow:0 0 13px #8dffb5}
@keyframes jh-walk{
  0%{transform:translateX(-29px) rotate(-7deg) scale(.92)}
  18%{transform:translateX(-18px) translateY(-5px) rotate(5deg) scale(.95)}
  35%{transform:translateX(-5px) rotate(-6deg)}
  54%{transform:translateX(10px) translateY(-7px) rotate(5deg)}
  75%{transform:translateX(19px) rotate(-4deg)}
  100%{transform:translateX(0) rotate(0)}
}
@keyframes jh-steps{from{transform:scaleX(.75);opacity:.5}to{transform:scaleX(1.04);opacity:1}}
@keyframes jh-glow{from{opacity:.5;transform:scale(.95)}to{opacity:1;transform:scale(1.13)}}
@media(max-width:1050px){
 .jh-host-top>span:first-child{flex-basis:100%}
 .jh-host-top{gap:5px 10px}
 .jh-host-body{grid-template-columns:92px minmax(0,1fr);padding:9px;gap:7px}
 .jh-sprite-button{width:89px;height:121px}
 .jh-sprite{width:89px;height:97px}
 .jh-dialogue p{font-size:11px}
}
@media(max-width:650px){
 .jh-host{margin:7px 0}
 .jh-host-top{padding:9px 10px}
 .jh-host-top>span:first-child{flex:1 1 180px}
 .jh-status{display:none}
 .jh-host-body{grid-template-columns:96px minmax(0,1fr);gap:9px;padding:10px}
 .jh-sprite-button{width:93px;height:130px}
 .jh-sprite{width:92px;height:103px}
 .jh-dialogue p{min-height:0;font-size:12px;padding:10px}
 .jh-dialogue-kicker{font-size:8px}
 .jh-controls button{flex-basis:100%;font-size:10px}
 .jh-dialogue small{font-size:9px}
}
@media(max-width:365px){
 .jh-host-body{grid-template-columns:73px minmax(0,1fr);gap:6px}
 .jh-sprite-button{width:71px;height:103px}
 .jh-sprite{width:70px;height:84px}
 .jh-dialogue p{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 .jh-host.is-walking .jh-sprite-button,
 .jh-host.is-walking .jh-sprite-floor,
 .jh-host.is-speaking .jh-sprite-glow{animation:none}
}

/* The official pre-recorded ElevenLabs voice is an explicit tap-to-play action.
   Live speech remains optional; no floating audio controls or autoplay. */
.jh-controls #jh-sample{
  flex-basis:100%;min-height:46px;
  border-color:#ffb485;
  background:linear-gradient(110deg,#ffc48f,#fca16f);
  color:#1d1720;
  box-shadow:0 7px 22px #fa905b24;
}
.jh-controls #jh-sample:hover{background:#ffd3a7;color:#17141a}
.jh-controls #jh-sample[aria-pressed=true]{background:#172f45;color:#baf0ff;border-color:#65d9ee}
.jh-dialogue audio{display:none}