/* WA Chat Hub – frontend */
.wach{
  --wach-color:#25D366;--wach-head:#075E54;--wach-x:16px;--wach-y:16px;
  --wach-bg:#efeae2;--wach-ink:#111b21;--wach-sub:#667781;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.4;color:var(--wach-ink);
  -webkit-tap-highlight-color:transparent;
}
.wach,.wach *,.wach *::before,.wach *::after{box-sizing:border-box}
.wach button,.wach input{font-family:inherit}
.wach a{text-decoration:none}

/* ---------- Nút nổi ---------- */
.wach__fab{
  position:fixed;z-index:99990;
  bottom:calc(var(--wach-y) + env(safe-area-inset-bottom,0px));
  width:60px;height:60px;padding:0;border:0;border-radius:50%;
  background:var(--wach-color);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .2s ease,opacity .2s ease;
}
.wach--right .wach__fab{right:calc(var(--wach-x) + env(safe-area-inset-right,0px))}
.wach--left  .wach__fab{left:calc(var(--wach-x) + env(safe-area-inset-left,0px))}
.wach__fab:hover{transform:scale(1.06)}
.wach__fab:focus-visible,.wach a:focus-visible,.wach__x:focus-visible,.wach__form button:focus-visible{outline:3px solid #fff;outline-offset:-3px;box-shadow:0 0 0 3px var(--wach-head)}
.wach__fab-ico svg{width:34px;height:34px;display:block}
.wach__badge{
  position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:#ff3b30;color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;
  border:2px solid #fff;
}
.wach.is-seen .wach__badge{display:none}
.wach:not(.is-seen) .wach__fab{animation:wach-pulse 2.4s ease-out 1.2s 3}
@keyframes wach-pulse{0%{box-shadow:0 6px 18px rgba(0,0,0,.25),0 0 0 0 rgba(37,211,102,.55)}70%,100%{box-shadow:0 6px 18px rgba(0,0,0,.25),0 0 0 18px rgba(37,211,102,0)}}

/* ---------- Bong bóng gợi ý ---------- */
.wach__tip{
  position:fixed;z-index:99989;
  bottom:calc(var(--wach-y) + 12px + env(safe-area-inset-bottom,0px));
  max-width:min(240px,calc(100vw - 120px));padding:10px 14px;border-radius:12px;
  background:#fff;color:var(--wach-ink);font-size:14px;font-weight:500;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.wach--right .wach__tip{right:calc(var(--wach-x) + 72px + env(safe-area-inset-right,0px))}
.wach--left  .wach__tip{left:calc(var(--wach-x) + 72px + env(safe-area-inset-left,0px))}
.wach__tip.is-on{opacity:1;visibility:visible;transform:none}
.wach.is-open .wach__tip{opacity:0;visibility:hidden}

/* ---------- Backdrop (chỉ mobile) ---------- */
.wach__backdrop{
  position:fixed;inset:0;z-index:99991;background:rgba(0,0,0,.45);
  opacity:0;visibility:hidden;pointer-events:none;display:none;
  transition:opacity .25s ease,visibility .25s;
}

/* ---------- Khung chat ---------- */
.wach__panel{
  position:fixed;z-index:99992;
  bottom:calc(var(--wach-y) + 72px + env(safe-area-inset-bottom,0px));
  width:360px;max-width:calc(100vw - 24px);
  max-height:min(640px,calc(100vh - var(--wach-y) - 96px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--wach-bg);border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transform-origin:bottom right;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.wach--right .wach__panel{right:calc(var(--wach-x) + env(safe-area-inset-right,0px))}
.wach--left  .wach__panel{left:calc(var(--wach-x) + env(safe-area-inset-left,0px));transform-origin:bottom left}
.wach.is-open .wach__panel{opacity:1;visibility:visible;transform:none}

.wach__head{
  flex:none;display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;
  background:var(--wach-head);color:#fff;
}
.wach__avatar{
  flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;
  background:var(--wach-color);display:flex;align-items:center;justify-content:center;
}
.wach__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.wach__avatar svg{width:30px;height:30px}
.wach__who{flex:1;min-width:0;display:flex;flex-direction:column}
.wach__who strong{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wach__who small{font-size:12.5px;opacity:.85;display:flex;align-items:center;gap:6px}
.wach__dot{width:8px;height:8px;border-radius:50%;background:#5bf08a;display:inline-block;flex:none}
.wach__x{
  flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.wach__x:hover{background:rgba(255,255,255,.14)}

.wach__body{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:16px 14px 14px;display:flex;flex-direction:column;gap:10px;
}

/* Tin nhắn */
.wach__msg{
  position:relative;align-self:flex-start;max-width:86%;
  padding:9px 12px 8px;border-radius:0 12px 12px 12px;background:#fff;
  box-shadow:0 1px 1px rgba(11,20,26,.13);word-wrap:break-word;overflow-wrap:anywhere;
}
.wach__msg::before{
  content:"";position:absolute;top:0;left:-7px;width:0;height:0;
  border-top:8px solid #fff;border-left:8px solid transparent;
}
.wach__time{display:block;margin-top:2px;text-align:right;font-size:11px;color:var(--wach-sub)}
.wach__msg--typing{display:none;gap:4px;padding:13px 14px}
.wach.is-typing .wach__msg--typing{display:inline-flex}
.wach__msg--typing i{width:7px;height:7px;border-radius:50%;background:#9aa6ad;animation:wach-dot 1s infinite ease-in-out}
.wach__msg--typing i:nth-child(2){animation-delay:.15s}
.wach__msg--typing i:nth-child(3){animation-delay:.3s}
@keyframes wach-dot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}

/* Trạng thái chờ gõ (chỉ khi JS hoạt động) */
.wach.js .wach__msg--in,.wach.js .wach__cta,.wach.js .wach__more{opacity:0;transform:translateY(8px);display:none}
.wach.js.is-shown .wach__msg--in,.wach.js.is-shown .wach__cta,.wach.js.is-shown .wach__more{display:block;animation:wach-in .3s ease forwards}
.wach.js.is-shown .wach__cta{display:flex;animation-delay:.1s}
.wach.js.is-shown .wach__more{animation-delay:.2s}
@keyframes wach-in{to{opacity:1;transform:none}}

/* Nút CTA */
.wach__cta{
  align-self:stretch;min-height:48px;padding:10px 16px;border-radius:24px;
  background:var(--wach-color);color:#fff;font-size:15px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.wach__cta svg{width:20px;height:20px}
.wach__cta:active{filter:brightness(.92)}

/* Danh sách kênh khác */
.wach__more{background:#fff;border-radius:12px;box-shadow:0 1px 1px rgba(11,20,26,.13);overflow:hidden}
.wach__more-title{margin:0;padding:12px 14px 6px;font-size:13px;font-weight:600;color:var(--wach-sub)}
.wach__more ul{list-style:none;margin:0;padding:0}
.wach__more li{margin:0;padding:0;border-top:1px solid #eef0f1}
.wach__more li:first-child{border-top:0}
.wach__ch{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px 8px 14px;
  color:var(--wach-ink);background:#fff;transition:background .15s;
}
.wach__ch:hover,.wach__ch:active{background:#f5f6f6}
.wach__ico{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.wach__lbl{flex:1;min-width:0;display:flex;flex-direction:column}
.wach__lbl strong{font-size:15px;font-weight:600}
.wach__lbl small{font-size:13px;color:var(--wach-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wach__chev{flex:none;color:#aab4ba}

/* Ô nhập */
.wach__form{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px) * 0);background:#f0f2f5;
}
.wach__form input{
  flex:1;min-width:0;height:44px;padding:0 16px;border:0;border-radius:22px;background:#fff;
  font-size:16px; /* >=16px để iOS không tự phóng to */
  color:var(--wach-ink);outline:0;box-shadow:none;
}
.wach__form input:focus{box-shadow:0 0 0 2px var(--wach-color)}
.wach__form button{
  flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--wach-color);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.wach__form button svg{width:22px;height:22px;margin-left:2px}

/* ---------- Ẩn theo thiết bị ---------- */
@media (max-width:768px){.wach--no-m{display:none!important}}
@media (min-width:769px){.wach--no-d{display:none!important}}

/* ---------- MOBILE: bottom sheet ---------- */
@media (max-width:600px){
  .wach__backdrop{display:block}
  .wach.is-open .wach__backdrop{opacity:1;visibility:visible;pointer-events:auto}

  .wach__panel,.wach--right .wach__panel,.wach--left .wach__panel{
    left:0;right:0;bottom:0;width:100%;max-width:none;
    height:auto;max-height:88vh;max-height:88dvh;
    border-radius:18px 18px 0 0;transform:translateY(100%);transform-origin:bottom center;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s;opacity:1;
  }
  .wach.is-open .wach__panel{transform:translateY(0)}
  /* thanh kéo nhỏ ở đầu sheet */
  .wach__head{padding-top:18px;position:relative}
  .wach__head::before{content:"";position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:rgba(255,255,255,.4)}
  .wach__form{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .wach__body{padding-bottom:16px}

  .wach.is-open .wach__fab{opacity:0;pointer-events:none;transform:scale(.8)}
  .wach__fab{width:56px;height:56px}
  .wach__fab-ico svg{width:32px;height:32px}
}

/* Khóa cuộn trang khi sheet mở trên mobile */
html.wach-lock,html.wach-lock body{overflow:hidden!important;overscroll-behavior:none}

/* Màn hình thấp (xoay ngang) */
@media (max-height:480px) and (max-width:900px){
  .wach__panel{max-height:calc(100vh - 16px)!important}
  .wach__msg{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .wach *,.wach *::before,.wach *::after{animation:none!important;transition-duration:.01ms!important}
}