/* V156 isolated guest chat — does not alter existing page flow */
#hph-chat-launcher{
  position:fixed;
  right:14px;
  bottom:calc(78px + env(safe-area-inset-bottom,0px));
  width:54px;height:54px;border:0;border-radius:50%;
  background:#171717;color:#fff;z-index:9997;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  font-size:23px;
}
#hph-chat-panel{
  position:fixed;right:14px;
  bottom:calc(142px + env(safe-area-inset-bottom,0px));
  z-index:9997;width:min(390px,calc(100vw - 28px));
  height:min(600px,calc(100vh - 180px));
  display:none;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid #e4dccd;border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#171717;
}
#hph-chat-panel.open{display:flex}
.hph-chat-head{padding:15px 16px;background:#171717;color:#fff;display:flex;justify-content:space-between;gap:12px}
.hph-chat-head strong{display:block;font-size:16px}
.hph-chat-head small{display:block;opacity:.72;margin-top:3px}
.hph-chat-close{border:0;background:transparent;color:#fff;font-size:25px;cursor:pointer}
.hph-chat-start{padding:14px;display:grid;gap:9px;overflow:auto}
.hph-chat-start input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #ddd5c6;border-radius:12px;font:inherit}
.hph-chat-note{font-size:12px;color:#777;line-height:1.4}
.hph-chat-btn{border:0;border-radius:12px;padding:12px 14px;background:#caa651;color:#111;font-weight:800;cursor:pointer}
.hph-chat-messages{flex:1;overflow:auto;background:#f8f6f1;padding:13px;display:flex;flex-direction:column;gap:8px}
.hph-chat-message{max-width:82%;padding:9px 11px;border-radius:14px;font-size:14px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.hph-chat-message.guest{align-self:flex-end;background:#171717;color:#fff}
.hph-chat-message.admin,.hph-chat-message.system{align-self:flex-start;background:#fff;border:1px solid #e5ded1}
.hph-chat-compose{display:none;gap:8px;padding:10px;background:#fff;border-top:1px solid #eee7dc}
.hph-chat-compose.active{display:flex}
.hph-chat-compose input{flex:1;min-width:0;border:1px solid #ddd5c6;border-radius:12px;padding:11px;font:inherit}
.hph-chat-compose button{border:0;border-radius:12px;background:#caa651;font-weight:800;padding:0 14px}
.hph-chat-status{font-size:11px;color:#777;padding:0 14px 9px;background:#fff}
@media(max-width:640px){
  #hph-chat-panel{right:10px;width:calc(100vw - 20px);height:68vh}
  #hph-chat-launcher{right:14px}
}
\n\n/* V191 — chat inquiry clarification only */\n.hph-chat-info{\n  display:grid;gap:4px;padding:10px 11px;border-radius:12px;\n  background:#fff8df;border:1px solid #ead79d;color:#4e4228;\n  font-size:12px;line-height:1.45;\n}\n.hph-chat-info strong{font-size:12px;color:#171717}\n.hph-chat-info span{display:block}\n.hph-chat-note strong{color:#343434}\n#hph-chat-start-btn:disabled,.hph-chat-compose button:disabled{opacity:.65;cursor:wait}\n

/* V193 — responsive chat layout fix (isolated to HPH guest chat only)
   Critical fix: author display rules must not override the HTML hidden attribute. */
#hph-chat-panel .hph-chat-start[hidden],
#hph-chat-panel .hph-chat-messages[hidden]{
  display:none!important;
}

/* Stable flex sizing so conversation owns the available middle area. */
#hph-chat-panel{
  --hph-chat-safe-bottom: env(safe-area-inset-bottom, 0px);
  min-height:0;
}
#hph-chat-panel .hph-chat-head{
  flex:0 0 auto;
  align-items:center;
}
#hph-chat-panel .hph-chat-start{
  flex:1 1 auto;
  min-height:0;
  max-height:100%;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#hph-chat-panel .hph-chat-messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
#hph-chat-panel .hph-chat-compose{
  flex:0 0 auto;
  align-items:stretch;
  padding-bottom:calc(10px + var(--hph-chat-safe-bottom));
}
#hph-chat-panel .hph-chat-compose input{
  min-height:46px;
  font-size:16px; /* prevents iOS Safari input zoom */
}
#hph-chat-panel .hph-chat-compose button{
  min-width:74px;
  min-height:46px;
  cursor:pointer;
  touch-action:manipulation;
}
#hph-chat-panel .hph-chat-status{
  flex:0 0 auto;
}
#hph-chat-panel .hph-chat-close,
#hph-chat-panel .hph-chat-btn{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* After chat starts, maximize the conversation area. */
#hph-chat-panel.hph-chat-active .hph-chat-messages{
  display:flex;
}
#hph-chat-panel.hph-chat-active .hph-chat-head small{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:min(260px,60vw);
}

/* Phones — use nearly the full usable viewport without covering browser safe areas. */
@media(max-width:640px){
  #hph-chat-panel{
    left:10px;
    right:10px;
    width:auto;
    bottom:calc(84px + env(safe-area-inset-bottom,0px));
    height:min(74dvh, calc(100dvh - 112px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)));
    max-height:760px;
    border-radius:20px;
  }
  #hph-chat-panel .hph-chat-head{
    padding:12px 14px;
  }
  #hph-chat-panel .hph-chat-head strong{
    font-size:15px;
  }
  #hph-chat-panel .hph-chat-head small{
    font-size:12px;
  }
  #hph-chat-panel .hph-chat-start{
    padding:12px;
    gap:8px;
  }
  #hph-chat-panel .hph-chat-start input{
    min-height:46px;
    padding:10px 12px;
    font-size:16px;
  }
  #hph-chat-panel .hph-chat-info,
  #hph-chat-panel .hph-chat-note{
    font-size:11.5px;
  }
  #hph-chat-panel .hph-chat-messages{
    padding:12px;
    gap:8px;
  }
  #hph-chat-panel .hph-chat-message{
    max-width:88%;
    font-size:14px;
  }
  #hph-chat-panel .hph-chat-compose{
    padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px));
  }
}

/* Short phone screens / landscape. */
@media(max-height:620px) and (max-width:900px){
  #hph-chat-panel{
    top:calc(8px + env(safe-area-inset-top,0px));
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
    height:auto;
    max-height:none;
  }
  #hph-chat-panel .hph-chat-info{
    padding:7px 9px;
  }
  #hph-chat-panel .hph-chat-note{
    line-height:1.25;
  }
}

/* Tablets. */
@media(min-width:641px) and (max-width:1024px){
  #hph-chat-panel{
    width:min(440px,calc(100vw - 36px));
    height:min(680px,72dvh);
  }
}

/* Desktop: slightly larger conversation panel, still unobtrusive. */
@media(min-width:1025px){
  #hph-chat-panel{
    width:420px;
    height:min(680px,72vh);
  }
}