/* PathoHub engineer who walks around the page (js/ph-guide.js) */
.phwMan{ position:fixed; left:0; top:0; z-index:470; border:0; background:none; padding:0; cursor:pointer; will-change:transform; filter:drop-shadow(0 10px 14px rgba(19,35,47,.25)); }
.phwMan img{ display:block; height:126px; width:auto; transform-origin:50% 100%; transition:transform .25s ease; }
.phwMan.flip img{ transform:scaleX(-1); }
.phwMan:not(.walking):not(.wave):not(.point) img{ animation:phwIdle 3.4s ease-in-out infinite; }
.phwMan.flip:not(.walking):not(.wave):not(.point) img{ animation-name:phwIdleF; }
.phwMan.wave img{ animation:phwWave 1.1s ease-in-out 3; }
.phwMan.flip.wave img{ animation-name:phwWaveF; }
.phwMan.point img{ animation:phwPoint 1.6s ease-in-out infinite; }
.phwMan.flip.point img{ animation-name:phwPointF; }
.phwMan.hop img{ animation:phwHop .5s ease-out 2; }
.phwMan.flip.hop img{ animation-name:phwHopF; }
@keyframes phwHop{ 0%, 100%{ transform:translateY(0) scale(1); } 40%{ transform:translateY(-22px) scale(1.06); } 70%{ transform:translateY(0) scale(1.04,.95); } }
@keyframes phwHopF{ 0%, 100%{ transform:scaleX(-1) translateY(0); } 40%{ transform:scaleX(-1.06) scaleY(1.06) translateY(-22px); } 70%{ transform:scaleX(-1.04) scaleY(.95); } }
.phwPressed{ animation:phwPress .6s ease-out; box-shadow:0 0 0 4px rgba(14,91,120,.35) !important; }
@keyframes phwPress{ 0%{ transform:scale(1); } 30%{ transform:scale(.96); } 100%{ transform:scale(1); } }
@keyframes phwIdle{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes phwIdleF{ 0%, 100%{ transform:scaleX(-1) translateY(0); } 50%{ transform:scaleX(-1) translateY(-4px); } }
@keyframes phwWave{ 0%, 100%{ transform:rotate(0); } 25%{ transform:rotate(-7deg) translateY(-6px); } 60%{ transform:rotate(5deg); } }
@keyframes phwWaveF{ 0%, 100%{ transform:scaleX(-1) rotate(0); } 25%{ transform:scaleX(-1) rotate(-7deg) translateY(-6px); } 60%{ transform:scaleX(-1) rotate(5deg); } }
@keyframes phwPoint{ 0%, 100%{ transform:rotate(0); } 50%{ transform:rotate(-4deg) translateX(-3px); } }
@keyframes phwPointF{ 0%, 100%{ transform:scaleX(-1) rotate(0); } 50%{ transform:scaleX(-1) rotate(-4deg) translateX(-3px); } }
.phwBub{ position:fixed; z-index:530; display:none; width:min(320px, calc(100vw - 24px)); background:#fff; border-radius:18px; padding:13px 14px 12px; color:#13232f;
  box-shadow:0 10px 30px rgba(19,35,47,.18), 0 2px 6px rgba(19,35,47,.1); font-family:Inter, "Google Sans Flex", "Noto Sans Gujarati", system-ui, sans-serif; }
.phwBub.on{ display:block; } .phwBub.pop{ animation:phwPop .35s cubic-bezier(.34,1.3,.64,1); }
@keyframes phwPop{ from{ transform:scale(.92); opacity:.3; } to{ transform:none; opacity:1; } }
.phwBub small{ display:block; color:#0e5b78; font-weight:700; font-size:11.5px; margin-bottom:2px; }
.phwBub p{ margin:0 26px 0 0; font-size:14px; line-height:1.55; }
.phwX{ position:absolute; top:6px; right:6px; width:28px; height:28px; border:0; border-radius:50%; background:#eef4f7; cursor:pointer; font-size:12px; }
.phwSay{ position:absolute; bottom:8px; right:8px; width:32px; height:32px; border:0; border-radius:50%; background:#eef4f7; cursor:pointer; }
.phwActs{ display:flex; flex-direction:column; gap:6px; margin:10px 36px 0 0; }
.phwActs a, .phwActs button{ text-align:left; border:1px solid #dbe5eb; background:#fff; color:#0e5b78; border-radius:12px; padding:8px 12px; font:600 13.5px Inter, "Noto Sans Gujarati", system-ui, sans-serif; cursor:pointer; text-decoration:none; }
.phwActs a:hover, .phwActs button:hover{ background:#f3f9fc; } .phwActs .main{ background:#0e5b78; color:#fff; border-color:#0e5b78; }
body.lock .phwMan, body.lock .phwBub{ display:none !important; }
@media (max-width:768px){ .phwMan img{ height:96px; } }
@media (prefers-reduced-motion: reduce){ .phwMan img, .phwBub.pop{ animation:none !important; } }
/* engineer switched off: a small face chip brings him back */
.phwChip{ display:none; position:fixed; right:12px; bottom:96px; z-index:470; align-items:center; gap:8px; border:1px solid #dbe5eb; background:#fff; color:#0e5b78; border-radius:999px; padding:4px 12px 4px 4px; font:600 13px Inter, "Noto Sans Gujarati", system-ui, sans-serif; cursor:pointer; box-shadow:0 6px 18px rgba(19,35,47,.16); }
.phwChip img{ width:34px; height:34px; border-radius:50%; object-fit:cover; background:#eef4f7; }
body.phwOff .phwChip{ display:flex; } body.phwOff .phwMan, body.phwOff .phwBub{ display:none !important; }
.phwActs .phwOffB{ color:#7a8a94; border-style:dashed; font-weight:500; }
@media (max-width:768px){ .phwChip{ bottom:136px; } }
/* the button he is explaining lights up (colour ring that pulses) */
.phwLit{ outline:3px solid #f5b301 !important; outline-offset:4px; animation:phwLit 1.1s ease-in-out infinite !important; }
@keyframes phwLit{ 0%, 100%{ outline-color:#f5b301; box-shadow:0 0 0 0 rgba(245,179,1,.45); } 50%{ outline-color:#ff7a00; box-shadow:0 0 0 12px rgba(245,179,1,0); } }
/* speaker waits for the first tap (browsers allow sound only after one) */
.phwSay.wait{ background:#ffe9a8; animation:phwBeat 1s ease-in-out infinite; }
@keyframes phwBeat{ 50%{ transform:scale(1.15); box-shadow:0 0 0 6px rgba(245,179,1,.3); } }
@media (prefers-reduced-motion: reduce){ .phwLit, .phwSay.wait{ animation:none !important; } }
.phwMan.phwTop{ z-index:520; }   /* in front of the header while he points at a header button */
/* the browser wants one tap before any sound: a clear button to start his voice */
.phwTap{ display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 36px); margin:10px 0 0; padding:10px 14px; border:0; border-radius:999px;
  background:#0e5b78; color:#fff; font:700 14.5px Inter, "Noto Sans Gujarati", system-ui, sans-serif; cursor:pointer; animation:phwTapGlow 1.4s ease-in-out infinite; }
.phwTap:hover{ background:#0b4a62; }
@keyframes phwTapGlow{ 0%, 100%{ box-shadow:0 0 0 0 rgba(14,91,120,.45); } 50%{ box-shadow:0 0 0 9px rgba(14,91,120,0); } }
@media (prefers-reduced-motion: reduce){ .phwTap{ animation:none; } }