/* ==========================================================================
   HTH chat assistant
   ========================================================================== */
.hchat{--hc-w:384px;--hc-h:min(640px,calc(100vh - 128px));position:fixed;z-index:885;inset-inline-end:22px;bottom:22px;font-family:var(--f-body)}
.hchat [hidden]{display:none!important}

/* ---------------------------------------------------------------- launcher */
.hchat__fab{position:relative;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--gold-lite),var(--gold) 45%,var(--gold-dim));color:var(--navy);
  box-shadow:0 18px 40px -14px rgba(169,133,63,.75),0 0 0 6px rgba(200,164,93,.12);transition:transform .45s var(--ease-out),box-shadow .45s}
.hchat__fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 22px 46px -14px rgba(169,133,63,.85),0 0 0 8px rgba(200,164,93,.16)}
.hchat__fab svg{width:26px;height:26px;transition:transform .45s var(--ease-out),opacity .3s}
.hchat__fab .hchat__fx{position:absolute;opacity:0;transform:rotate(-90deg) scale(.6)}
.hchat.is-open .hchat__fab .hchat__fi{opacity:0;transform:rotate(90deg) scale(.6)}
.hchat.is-open .hchat__fab .hchat__fx{opacity:1;transform:none}
.hchat__badge{position:absolute;top:-2px;inset-inline-end:-2px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#E5484D;color:#fff;
  font-size:.72rem;font-weight:800;display:grid;place-items:center;border:2px solid #fff;animation:hcPop .4s var(--ease-out)}
.hchat__pulse{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);opacity:0;animation:hcPulse 2.8s var(--ease) infinite}
.hchat.is-open .hchat__pulse,.hchat.was-opened .hchat__pulse{display:none}
.hchat__hint{position:absolute;bottom:72px;inset-inline-end:0;width:max-content;max-width:250px;padding:12px 16px;border-radius:16px 16px 4px 16px;
  background:#fff;color:var(--navy);font-size:.88rem;line-height:1.45;box-shadow:0 20px 50px -18px rgba(11,29,51,.4);cursor:pointer;
  animation:hcRise .5s var(--ease-out)}
[dir="rtl"] .hchat__hint{border-radius:16px 16px 16px 4px}
.hchat__hint b{display:block;color:var(--gold-dim);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
@keyframes hcPulse{0%{opacity:.6;transform:scale(.92)}100%{opacity:0;transform:scale(1.32)}}
@keyframes hcPop{from{transform:scale(.3)}to{transform:none}}
@keyframes hcRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the WhatsApp / top buttons sit above the launcher */
.floats{bottom:96px}

/* ------------------------------------------------------------------ window */
.hchat__win{position:absolute;bottom:76px;inset-inline-end:0;width:var(--hc-w);height:var(--hc-h);display:flex;flex-direction:column;
  background:#F6F4EF;border-radius:24px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(6,18,34,.55),0 0 0 1px rgba(11,29,51,.06);
  transform-origin:bottom right;animation:hcOpen .5s var(--ease-out)}
[dir="rtl"] .hchat__win{transform-origin:bottom left}
.hchat.is-closing .hchat__win{animation:hcClose .28s var(--ease) forwards}
.hchat.is-open{z-index:960}
.hchat.is-wide{--hc-w:min(620px,calc(100vw - 44px));--hc-h:min(820px,calc(100vh - 128px))}
.hchat__win{transition:width .45s var(--ease-out),height .45s var(--ease-out)}
@keyframes hcOpen{from{opacity:0;transform:translateY(18px) scale(.86);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes hcClose{to{opacity:0;transform:translateY(14px) scale(.9)}}

/* header */
.hchat__head{position:relative;display:flex;align-items:center;gap:12px;padding:16px 14px 16px 18px;color:#fff;
  background:radial-gradient(120% 140% at 0% 0%,#1B3E66 0%,#0B1D33 55%,#061222 100%)}
.hchat__head::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(200,164,93,.55),transparent)}
.hchat__ava{position:relative;flex:0 0 44px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--gold-lite),var(--gold-dim));color:var(--navy);font:700 1rem/1 var(--f-display)}
.hchat__ava i{position:absolute;bottom:-2px;inset-inline-end:-2px;width:12px;height:12px;border-radius:50%;background:#3ECF8E;border:2px solid #0B1D33}
.hchat__ttl{min-width:0;flex:1}
.hchat__ttl b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.06rem;letter-spacing:.01em}
.hchat__ttl span{display:block;font-size:.74rem;color:rgba(235,221,194,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hchat__tools{display:flex;gap:2px}
.hchat__tb{width:34px;height:34px;border-radius:10px;border:0;background:transparent;color:rgba(235,221,194,.85);display:grid;place-items:center;cursor:pointer;transition:.25s}
.hchat__tb:hover,.hchat__tb[aria-expanded="true"]{background:rgba(255,255,255,.1);color:#fff}
.hchat__tb svg{width:18px;height:18px}
.hchat__tb.is-on{color:var(--gold-lite)}

/* menu */
.hchat__menu{position:absolute;top:64px;inset-inline-end:12px;z-index:5;min-width:236px;padding:6px;border-radius:16px;background:#fff;
  box-shadow:0 26px 60px -20px rgba(6,18,34,.5);animation:hcMenu .22s var(--ease-out);transform-origin:top right}
[dir="rtl"] .hchat__menu{transform-origin:top left}
.hchat__menu button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:10px;background:none;cursor:pointer;
  font:500 .9rem/1.2 var(--f-body);color:var(--navy);text-align:start}
.hchat__menu button:hover{background:#F6F1E6}
.hchat__menu button svg{width:18px;height:18px;color:var(--gold-dim);flex:0 0 18px}
.hchat__menu hr{border:0;border-top:1px solid #EEE9DD;margin:4px 6px}
.hchat__menu .is-danger{color:#C4535F}.hchat__menu .is-danger svg{color:#C4535F}
@keyframes hcMenu{from{opacity:0;transform:scale(.92) translateY(-6px)}to{opacity:1;transform:none}}

/* body */
.hchat__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 10px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;
  background:radial-gradient(100% 60% at 100% 0%,rgba(200,164,93,.07),transparent 70%)}
.hchat__body::-webkit-scrollbar{width:6px}.hchat__body::-webkit-scrollbar-thumb{background:rgba(11,29,51,.15);border-radius:3px}
.hchat__day{align-self:center;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#9AA5B1;margin:4px 0}
.hchat__row{display:flex;flex-direction:column;gap:6px;max-width:88%;animation:hcMsg .42s var(--ease-out)}
.hchat__row--me{align-self:flex-end;align-items:flex-end}
.hchat__row--them{align-self:flex-start}
@keyframes hcMsg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hchat__who{font-size:.68rem;color:#8A95A1;letter-spacing:.04em;padding:0 6px}
.hchat__b{padding:11px 14px;border-radius:18px 18px 18px 6px;background:#fff;color:#22303d;font-size:.9rem;line-height:1.55;
  box-shadow:0 6px 18px -12px rgba(11,29,51,.35);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
[dir="rtl"] .hchat__b{border-radius:18px 18px 6px 18px}
.hchat__row--me .hchat__b{background:linear-gradient(140deg,#16365C,#0B1D33);color:#fff;border-radius:18px 18px 6px 18px}
[dir="rtl"] .hchat__row--me .hchat__b{border-radius:18px 18px 18px 6px}
.hchat__row--agent .hchat__b{background:#fff;border:1px solid rgba(200,164,93,.45)}
.hchat__b a{color:var(--gold-dim);text-decoration:underline;text-underline-offset:2px}
.hchat__row--me .hchat__b a{color:var(--gold-lite)}
.hchat__sys{align-self:center;font-size:.76rem;color:#6E7B88;background:rgba(11,29,51,.05);padding:6px 12px;border-radius:99px}

/* options */
.hchat__opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.hchat__opt{padding:8px 13px;border-radius:99px;border:1px solid rgba(169,133,63,.55);background:#fff;color:var(--navy);cursor:pointer;
  font:600 .82rem/1.2 var(--f-body);transition:.25s var(--ease);text-align:start}
.hchat__opt:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-1px)}
.hchat__opt--agent{background:var(--navy);color:var(--gold-lite);border-color:var(--navy)}
.hchat__opt--agent:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.hchat__opts.is-used .hchat__opt{opacity:.38;pointer-events:none}
.hchat__opts.is-used .hchat__opt.is-picked{opacity:1;background:#F6F1E6}

/* cards */
.hchat__cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;max-width:100%;scrollbar-width:thin}
.hchat__card{flex:0 0 200px;scroll-snap-align:start;border-radius:16px;overflow:hidden;background:#fff;color:inherit;text-decoration:none;
  box-shadow:0 10px 26px -16px rgba(11,29,51,.45);transition:transform .35s var(--ease-out)}
.hchat__card:hover{transform:translateY(-3px)}
.hchat__card img{display:block;width:100%;height:112px;object-fit:cover;background:#E9E4D8}
.hchat__card div{padding:10px 12px 12px}
.hchat__card b{display:block;font-size:.86rem;color:var(--navy);line-height:1.3}
.hchat__card small{display:block;font-size:.72rem;color:#7A8794;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hchat__card em{display:block;font-style:normal;font-weight:700;font-size:.8rem;color:var(--gold-dim);margin-top:6px}
.hchat__img{display:block;max-width:100%;border-radius:14px;overflow:hidden;box-shadow:0 10px 26px -16px rgba(11,29,51,.45)}
.hchat__img img{display:block;width:100%;max-height:220px;object-fit:contain;background:#fff}
.hchat__img span{display:block;font-size:.76rem;color:#6E7B88;padding:6px 10px;background:#fff}
.hchat__link{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:#fff;color:var(--navy);text-decoration:none;
  font-weight:600;font-size:.84rem;box-shadow:0 6px 18px -12px rgba(11,29,51,.35);transition:.25s}
.hchat__link:hover{background:var(--navy);color:#fff}
.hchat__link svg{width:16px;height:16px;color:var(--gold-dim)}
.hchat__link--wa{background:#25D366;color:#fff}.hchat__link--wa svg{color:#fff}.hchat__link--wa:hover{background:#1DA851}

/* inline forms (agent hand-over, transcript) */
.hchat__form{display:grid;gap:8px;padding:14px;border-radius:18px;background:#fff;box-shadow:0 10px 26px -16px rgba(11,29,51,.45);width:100%;min-width:250px}
.hchat__form input,.hchat__form textarea{width:100%;padding:11px 13px;border-radius:12px;border:1px solid #E3DDD0;background:#FBFAF7;font:inherit;font-size:.88rem;color:var(--navy)}
.hchat__form input:focus,.hchat__form textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,164,93,.18);background:#fff}
.hchat__form .is-bad{border-color:#E5484D}
.hchat__form small{font-size:.74rem;color:#C4535F;line-height:1.4}
.hchat__form small.ok{color:#3E8C6A}
.hchat__form button{padding:11px;border-radius:12px;border:0;cursor:pointer;font:700 .82rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(100deg,var(--gold-dim),var(--gold),var(--gold-lite));color:var(--navy)}
.hchat__form button[disabled]{opacity:.6;cursor:wait}
.hchat__hp{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%)}
.hchat__stars{display:flex;gap:4px;justify-content:center}
.hchat__stars button{background:none!important;padding:2px!important;font-size:1.7rem!important;color:#D9D2C2;transition:transform .2s,color .2s;text-transform:none!important}
.hchat__stars button.is-on{color:var(--gold)}
.hchat__stars button:hover{transform:scale(1.15)}

/* typing */
.hchat__typing{display:inline-flex;gap:4px;padding:14px 16px;border-radius:18px 18px 18px 6px;background:#fff;box-shadow:0 6px 18px -12px rgba(11,29,51,.35)}
.hchat__typing i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:hcDot 1.1s infinite}
.hchat__typing i:nth-child(2){animation-delay:.15s}.hchat__typing i:nth-child(3){animation-delay:.3s}
@keyframes hcDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* footer */
.hchat__foot{position:relative;display:flex;align-items:flex-end;gap:8px;padding:10px 12px 12px;background:#fff;border-top:1px solid #EEE9DD}
.hchat__in{flex:1;min-height:42px;max-height:120px;resize:none;padding:11px 14px;border-radius:14px;border:1px solid #E7E1D4;background:#FBFAF7;
  font:inherit;font-size:.9rem;line-height:1.4;color:var(--navy)}
.hchat__in:focus{outline:0;border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(200,164,93,.16)}
.hchat__ib{flex:0 0 42px;width:42px;height:42px;border-radius:14px;border:0;display:grid;place-items:center;cursor:pointer;background:#F3EFE6;color:var(--gold-dim);transition:.25s}
.hchat__ib:hover{background:#EBE3D0;color:var(--navy)}
.hchat__ib svg{width:20px;height:20px}
.hchat__send{background:linear-gradient(140deg,var(--gold-lite),var(--gold-dim));color:var(--navy)}
.hchat__send:hover{background:var(--navy);color:var(--gold-lite)}
.hchat__send svg{transition:transform .35s var(--ease-out)}
.hchat__send:hover svg{transform:translate(2px,-2px) rotate(-8deg)}
[dir="rtl"] .hchat__send svg{transform:scaleX(-1)}
.hchat__send:disabled{opacity:.5;cursor:default}
.hchat__note{font-size:.66rem;color:#9AA5B1;text-align:center;padding:0 12px 8px;background:#fff}

/* emoji panel */
.hchat__emo{position:absolute;bottom:calc(100% + 8px);inset-inline-start:10px;width:min(300px,calc(100% - 20px));max-height:240px;overflow:auto;padding:10px;border-radius:18px;
  background:#fff;box-shadow:0 26px 60px -20px rgba(6,18,34,.5);animation:hcMenu .22s var(--ease-out);transform-origin:bottom left}
.hchat__emo b{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#9AA5B1;margin:6px 4px}
.hchat__emo div{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.hchat__emo button{border:0;background:none;font-size:1.3rem;line-height:1;padding:5px;border-radius:8px;cursor:pointer;transition:transform .15s}
.hchat__emo button:hover{background:#F6F1E6;transform:scale(1.2)}

/* closed state */
.hchat__ended{display:grid;gap:10px;justify-items:center;text-align:center;padding:14px;color:#6E7B88;font-size:.84rem}
.hchat__ended button{padding:10px 18px;border-radius:99px;border:1px solid var(--gold);background:#fff;color:var(--navy);font-weight:700;cursor:pointer}

/* ------------------------------------------------------------------ mobile */
@media (max-width:560px){
  .hchat{inset-inline-end:14px;bottom:14px}
  .floats{bottom:86px;inset-inline-end:16px}
  .hchat.is-open .hchat__win{position:fixed;inset:0;width:auto;height:auto;border-radius:0;bottom:0}
  .hchat.is-open .hchat__fab{display:none}
  .hchat__tb[data-wide]{display:none}
}
@media (prefers-reduced-motion:reduce){.hchat *{animation:none!important;transition:none!important}}
[dir="rtl"] .hchat__send svg{transform:scaleX(-1)}