/* Site-wide chat widget. Uses the same design tokens as style.css. */

.hp-chat{ position: fixed; right: 20px; bottom: 20px; z-index: 1400; font-family: var(--font-body); }

.hp-chat-launcher{
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow); position:relative; transition: transform .2s var(--ease), background .2s var(--ease);
}
.hp-chat-launcher:hover{ transform: translateY(-2px); background: var(--navy-deep); }
.hp-chat-launcher svg{ width:26px; height:26px; }
.hp-chat-launcher-icon-close{ display:none; }
.hp-chat.open .hp-chat-launcher-icon-open{ display:none; }
.hp-chat.open .hp-chat-launcher-icon-close{ display:flex; }
.hp-chat-dot{ position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%; background: var(--coral); border:2px solid #fff; }
.hp-chat-dot:empty{ display:none; }
.hp-chat.open .hp-chat-dot, .hp-chat.dot-seen .hp-chat-dot{ display:none; }

.hp-chat-panel{
  position:absolute; right:0; bottom:74px; width:368px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 120px);
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform: translateY(16px) scale(.98); pointer-events:none; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.hp-chat.open .hp-chat-panel{ opacity:1; transform:none; pointer-events:auto; }

.hp-chat-head{ display:flex; align-items:center; gap:11px; padding:16px 16px; background: var(--ink); color:#fff; flex-shrink:0; }
.hp-chat-head-avatar{ width:36px; height:36px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.hp-chat-head-avatar img{ width:100%; height:100%; object-fit:contain; padding:4px; }
.hp-chat-head-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.hp-chat-head-text b{ font-size:.92rem; }
.hp-chat-head-text span{ font-size:.76rem; color:rgba(255,255,255,.65); display:flex; align-items:center; gap:5px; }
.hp-chat-status-dot{ width:7px; height:7px; border-radius:50%; background:#3ddc97; flex-shrink:0; }
.hp-chat-close{ background:none; border:none; color:rgba(255,255,255,.75); cursor:pointer; padding:4px; flex-shrink:0; }
.hp-chat-close:hover{ color:#fff; }
.hp-chat-close svg{ width:18px; height:18px; }

.hp-chat-body{ flex:1; min-height:0; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background: var(--paper); }
.hp-chat-msg{ max-width:84%; padding:9px 13px; border-radius:14px; font-size:.87rem; line-height:1.5; white-space:pre-wrap; }
.hp-chat-msg.bot{ align-self:flex-start; background:#fff; border:1px solid var(--line); color: var(--ink); border-bottom-left-radius:4px; }
.hp-chat-msg.user{ align-self:flex-end; background: var(--navy); color:#fff; border-bottom-right-radius:4px; }
.hp-chat-msg.error{ align-self:flex-start; background:#FDECEA; color:var(--coral-deep); border:1px solid #F5C2BD; }
.hp-chat-typing{ align-self:flex-start; display:flex; gap:4px; padding:11px 14px; background:#fff; border:1px solid var(--line); border-radius:14px; border-bottom-left-radius:4px; }
.hp-chat-typing span{ width:6px; height:6px; border-radius:50%; background: var(--muted-2); animation: hpTypingBounce 1.2s infinite ease-in-out; }
.hp-chat-typing span:nth-child(2){ animation-delay:.15s; } .hp-chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes hpTypingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-4px); opacity:1 } }

.hp-chat-quick{ display:flex; flex-wrap:wrap; align-content:flex-start; gap:7px; padding:0 14px 12px; max-height:150px; overflow-y:auto; flex-shrink:0; background: var(--paper); }
.hp-chat-quick:empty{ display:none; }
.hp-chat-chip{
  border:1.5px solid var(--navy); color: var(--navy); background:#fff; border-radius:20px; padding:6px 13px;
  font-size:.79rem; font-weight:600; cursor:pointer; transition:.15s ease; text-align:left;
}
.hp-chat-chip:hover{ background: var(--navy); color:#fff; }
.hp-chat-chip.alt{ border-color: var(--line); color: var(--muted); }
.hp-chat-chip.alt:hover{ background: var(--paper-alt); color: var(--ink); }

.hp-chat-lead{ display:flex; flex-direction:column; gap:7px; padding:12px 14px; border-top:1px solid var(--line); background:#fff; flex-shrink:0; position:relative; }
.hp-chat-lead[hidden]{ display:none; }
.hp-chat-lead input, .hp-chat-lead textarea{ border:1.5px solid var(--line); border-radius:9px; padding:8px 11px; font-size:.85rem; font-family:inherit; resize:vertical; }
.hp-chat-lead input:focus, .hp-chat-lead textarea:focus{ outline:none; border-color: var(--navy); }
.hp-chat-send-lead{ align-self:flex-end; background: var(--navy); color:#fff; border:none; border-radius:20px; padding:7px 18px; font-weight:700; font-size:.82rem; cursor:pointer; }
.hp-chat-send-lead:hover{ background: var(--navy-deep); }
.hp-chat-send-lead:disabled{ opacity:.6; cursor:not-allowed; }

.hp-chat-input-row{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--line); flex-shrink:0; background:#fff; }
.hp-chat-input-row[hidden]{ display:none; }
.hp-chat-input-row input{ flex:1; border:1.5px solid var(--line); border-radius:22px; padding:9px 16px; font-size:.87rem; font-family:inherit; }
.hp-chat-input-row input:focus{ outline:none; border-color: var(--navy); }
.hp-chat-input-row button{ width:36px; height:36px; border-radius:50%; border:none; background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.hp-chat-input-row button:hover{ background: var(--navy-deep); }
.hp-chat-input-row button svg{ width:17px; height:17px; }

.hp-chat-foot{ padding:8px 14px; text-align:center; font-size:.74rem; color: var(--muted-2); border-top:1px solid var(--line); flex-shrink:0; }
.hp-chat-foot a{ color: var(--muted); font-weight:600; }
.hp-chat-foot a:hover{ color: var(--navy); }
.hp-chat-foot span{ margin:0 6px; }

@media (max-width:480px){
  .hp-chat{ right:12px; bottom:12px; }
  .hp-chat-panel{ width: calc(100vw - 24px); height: calc(100vh - 100px); bottom:70px; right:-6px; }
  .hp-chat-foot{ font-size:.7rem; }
  .hp-chat-foot span{ margin:0 4px; }
}