/* Sofa Hoàng Phát — chatbot tư vấn (kịch bản cố định, không gọi API).
   Dùng biến màu sẵn có của site khi tồn tại (--gold,--ink,--paper,--line,--radius),
   có giá trị dự phòng để chạy độc lập nếu styles.css chưa nạp. */
:root{
  --hp-chat-gold:var(--gold,#b8902f);
  --hp-chat-ink:var(--ink,#181818);
  --hp-chat-paper:var(--paper,#fafaf8);
  --hp-chat-white:#ffffff;
  --hp-chat-line:var(--line,#e4e3df);
  --hp-chat-muted:var(--muted,#6e6e6b);
  --hp-chat-radius:var(--radius,10px);
  --hp-chat-offset-desktop:190px; /* dự phòng, JS sẽ đo lại nếu có #hp-contact-dock */
  --hp-chat-offset-mobile:90px;
}

#hp-chat-root{font-family:var(--sans,Arial,Helvetica,sans-serif);}
#hp-chat-root *{box-sizing:border-box}

/* --- Nút mở chat --- */
.hp-chat-toggle{
  position:fixed;right:20px;bottom:var(--hp-chat-offset-desktop);
  z-index:39; /* dưới dock (40) 1 bậc khi cả hai cùng hiện, nhưng dock sẽ tự ẩn khi chat mở */
  display:flex;align-items:center;gap:8px;
  min-height:48px;padding:11px 18px 11px 14px;
  border:1px solid var(--hp-chat-gold);border-radius:30px;
  background:var(--hp-chat-gold);color:#211a08;
  font-size:14px;font-weight:700;line-height:1.2;
  box-shadow:0 4px 18px rgba(0,0,0,.16);cursor:pointer;
  transition:transform .15s,box-shadow .15s,opacity .2s;
}
.hp-chat-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.22)}
.hp-chat-toggle:focus-visible{outline:3px solid var(--hp-chat-ink);outline-offset:3px}
.hp-chat-toggle svg{width:20px;height:20px;flex:none;stroke:#211a08;fill:none;stroke-width:1.8}
.hp-chat-toggle .hp-chat-toggle-label{white-space:nowrap}
.hp-chat-toggle[hidden]{display:none}

/* Chấm báo tin nhắn mới trên nút (dùng khi có bubble tự chào) */
.hp-chat-ping{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:#c0392b;border:2px solid var(--hp-chat-white)}

/* --- Bubble tự chào --- */
.hp-chat-greet{
  position:fixed;right:20px;bottom:calc(var(--hp-chat-offset-desktop) + 58px);
  z-index:39;max-width:240px;background:var(--hp-chat-white);color:var(--hp-chat-ink);
  border:1px solid var(--hp-chat-line);border-radius:14px 14px 4px 14px;
  padding:12px 14px;font-size:13px;line-height:1.5;box-shadow:0 6px 20px rgba(0,0,0,.14);
  animation:hpChatFade .25s ease-out;
}
.hp-chat-greet button{
  position:absolute;top:4px;right:6px;border:0;background:transparent;color:var(--hp-chat-muted);
  font-size:14px;line-height:1;cursor:pointer;padding:4px;
}
.hp-chat-greet[hidden]{display:none}

/* --- Cửa sổ chat --- */
.hp-chat-window{
  position:fixed;right:20px;bottom:calc(var(--hp-chat-offset-desktop) + 60px);
  z-index:41;width:360px;max-width:calc(100vw - 32px);
  height:min(560px,calc(100vh - var(--hp-chat-offset-desktop) - 100px));
  max-height:70vh;
  background:var(--hp-chat-white);border:1px solid var(--hp-chat-line);
  border-radius:var(--hp-chat-radius);box-shadow:0 12px 40px rgba(0,0,0,.22);
  display:flex;flex-direction:column;overflow:hidden;
  transform-origin:bottom right;
  animation:hpChatOpen .18s ease-out;
}
.hp-chat-window[hidden]{display:none}

@keyframes hpChatOpen{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
@keyframes hpChatFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hp-chat-window,.hp-chat-greet{animation:none}}

.hp-chat-header{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 16px;background:var(--hp-chat-ink);color:#fff;
}
.hp-chat-header-text b{display:block;font-size:14px;font-weight:700}
.hp-chat-header-text span{display:block;font-size:12px;color:#cfcfcc;margin-top:2px}
.hp-chat-close{
  border:0;background:transparent;color:#fff;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
}
.hp-chat-close:hover{background:rgba(255,255,255,.12)}
.hp-chat-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hp-chat-close svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}

.hp-chat-body{
  flex:1 1 auto;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;
  background:var(--hp-chat-paper);
}
.hp-msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-line}
.hp-msg-bot{align-self:flex-start;background:var(--hp-chat-white);border:1px solid var(--hp-chat-line);color:var(--hp-chat-ink);border-bottom-left-radius:4px}
.hp-msg-user{align-self:flex-end;background:var(--hp-chat-ink);color:#fff;border-bottom-right-radius:4px}

.hp-chat-choices{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 4px}
.hp-chip{
  border:1px solid var(--hp-chat-gold);background:#fff;color:var(--hp-chat-ink);
  border-radius:20px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s;
}
.hp-chip:hover{background:#fbf3e2}
.hp-chip:focus-visible{outline:2px solid var(--hp-chat-gold);outline-offset:2px}
.hp-chip.hp-chip-cta{background:var(--hp-chat-gold);border-color:var(--hp-chat-gold);color:#211a08}
.hp-chip.hp-chip-cta:hover{background:#a37e29}
.hp-chip.hp-chip-outline{border-color:var(--hp-chat-line);color:var(--hp-chat-muted)}

.hp-chat-footer{flex:none;border-top:1px solid var(--hp-chat-line);padding:10px;display:flex;gap:8px;background:#fff}
.hp-chat-input{
  flex:1;border:1px solid var(--hp-chat-line);border-radius:20px;padding:9px 14px;
  font-size:13.5px;font-family:inherit;
}
.hp-chat-input:focus-visible{outline:2px solid var(--hp-chat-gold);outline-offset:1px}
.hp-chat-send{
  border:0;background:var(--hp-chat-ink);color:#fff;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
}
.hp-chat-send:hover{background:#333}
.hp-chat-send svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2}
.hp-chat-footer-note{font-size:10.5px;color:var(--hp-chat-muted);text-align:center;padding:0 10px 8px;background:#fff}

/* --- Mobile --- */
@media (max-width:780px){
  .hp-chat-toggle{right:14px;bottom:var(--hp-chat-offset-mobile)}
  .hp-chat-greet{right:14px;left:14px;max-width:none;bottom:calc(var(--hp-chat-offset-mobile) + 58px)}
  .hp-chat-window{
    right:10px;left:10px;bottom:calc(var(--hp-chat-offset-mobile) + 8px);
    width:auto;max-width:none;height:min(72vh,520px);max-height:72vh;
  }
  .hp-chat-toggle .hp-chat-toggle-label{display:none} /* icon tròn gọn trên mobile để không chiếm ngang */
  .hp-chat-toggle{padding:0;width:52px;height:52px;justify-content:center;border-radius:50%}
}