/* Help assistant widget (website + dashboard). Own tokens so it looks the same on every page. */
.hd-root { --hd-navy: #0A1A45; --hd-navy2: #12266B; --hd-ink: #0E1B2C; --hd-ink2: #44506A; --hd-ink3: #6B7690; --hd-line: #E3E7EE; --hd-soft: #F3F5F9;
  --hd-mint: #2EE6A6; --hd-mint-ink: #053B29; --hd-accent: #3D5AFE; --hd-bad: #C7362F;
  position: fixed; right: 20px; bottom: 20px; z-index: 900; font: 400 14px/1.5 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--hd-ink); }
.hd-root *, .hd-root *::before, .hd-root *::after { box-sizing: border-box; }
.hd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hd-launch { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; position: relative; margin-left: auto;
  background: linear-gradient(145deg, var(--hd-mint), #1FC98F); color: var(--hd-mint-ink); box-shadow: 0 12px 30px -8px rgba(6,16,43,.55), 0 0 0 0 rgba(46,230,166,.5); transition: transform .15s ease; }
.hd-launch:hover { transform: translateY(-2px) scale(1.03); }
.hd-launch:focus-visible { outline: 3px solid var(--hd-accent); outline-offset: 3px; }
.hd-launch svg { width: 27px; height: 27px; }
.hd-root.open .hd-launch svg { opacity: .85; }
.hd-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--hd-bad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.hd-badge[hidden] { display: none; }
.hd-app .hd-launch { width: 52px; height: 52px; }

.hd-nudge { position: absolute; right: 0; bottom: 72px; width: 250px; padding: 12px 34px 12px 14px; background: #fff; color: var(--hd-ink2); border-radius: 14px; box-shadow: 0 16px 40px -14px rgba(6,16,43,.45); cursor: pointer; font-size: 13.5px; animation: hdIn .35s ease both; }
.hd-nudge b { color: var(--hd-ink); display: block; }
.hd-nudge[hidden] { display: none; }
.hd-nudge-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; background: none; color: var(--hd-ink3); cursor: pointer; display: grid; place-items: center; border-radius: 6px; }
.hd-nudge-x svg { width: 14px; height: 14px; }

.hd-panel { position: absolute; right: 0; bottom: 74px; width: 390px; height: min(640px, calc(100vh - 110px)); display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px -24px rgba(6,16,43,.55), 0 0 0 1px rgba(14,27,44,.06); animation: hdIn .22s ease both; }
.hd-panel[hidden] { display: none; }
@keyframes hdIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.hd-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; background: radial-gradient(120% 160% at 0% 0%, var(--hd-navy2), var(--hd-navy) 60%, #06102B); color: #fff; }
.hd-av { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(46,230,166,.16); color: var(--hd-mint); flex: none; }
.hd-av svg { width: 22px; height: 22px; }
.hd-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--hd-mint); border: 2px solid var(--hd-navy); }
.hd-panel.is-live .hd-av { background: rgba(125,147,255,.2); color: #C9D3FF; }
.hd-ttl { flex: 1; min-width: 0; }
.hd-ttl h2 { margin: 0; font-size: 16px; line-height: 1.25; color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-ttl p { margin: 2px 0 0; font-size: 12.5px; color: #AFBBE0; }
.hd-x { width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.hd-x:hover { background: rgba(255,255,255,.16); }
.hd-x svg { width: 17px; height: 17px; }

.hd-log { flex: 1; overflow-y: auto; padding: 16px 14px 8px; background: linear-gradient(#F7F8FC, #fff 140px); display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.hd-msg { display: flex; gap: 8px; max-width: 100%; animation: hdIn .2s ease both; }
.hd-msg.me { justify-content: flex-end; }
.hd-mav { width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--hd-navy); color: var(--hd-mint); margin-top: 2px; }
.hd-msg.staff .hd-mav { background: #E8ECFF; color: var(--hd-accent); }
.hd-mav svg { width: 15px; height: 15px; }
.hd-col { min-width: 0; max-width: calc(100% - 36px); display: flex; flex-direction: column; gap: 4px; }
.hd-who { font-size: 11.5px; color: var(--hd-ink3); font-weight: 600; }
.hd-b { padding: 9px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--hd-line); color: var(--hd-ink); overflow-wrap: anywhere; font-size: 14px; }
.hd-msg.bot .hd-b, .hd-msg.staff .hd-b { border-top-left-radius: 4px; }
.hd-msg.me .hd-b { background: var(--hd-navy); color: #fff; border-color: var(--hd-navy); border-top-right-radius: 4px; max-width: 85%; }
.hd-msg.me.tmp .hd-b { opacity: .75; }
.hd-b p { margin: 0 0 6px; } .hd-b p:last-child { margin-bottom: 0; }
.hd-b ul, .hd-b ol { margin: 4px 0 6px; padding-inline-start: 20px; } .hd-b li { margin: 2px 0; }
.hd-b code { background: var(--hd-soft); padding: 0 4px; border-radius: 4px; font-size: 12.5px; }
.hd-b a { color: var(--hd-accent); }
.hd-msg.me .hd-b a { color: var(--hd-mint); }
.hd-src { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--hd-ink3); }
.hd-src svg { width: 13px; height: 13px; flex: none; }
.hd-acts { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--hd-ink3); }
.hd-fb { width: 28px; height: 26px; border: 1px solid var(--hd-line); border-radius: 8px; background: #fff; color: var(--hd-ink3); cursor: pointer; display: grid; place-items: center; }
.hd-fb:hover { color: var(--hd-ink); border-color: #C8CEDA; }
.hd-fb svg { width: 14px; height: 14px; }
.hd-help, .hd-thx { margin-right: 4px; }
.hd-human { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--hd-line); background: #fff; color: var(--hd-ink2); font: 600 12.5px/1.2 inherit; cursor: pointer; }
.hd-human svg { width: 14px; height: 14px; }
.hd-human.strong { background: var(--hd-navy); border-color: var(--hd-navy); color: #fff; }
.hd-human:disabled { opacity: .5; cursor: default; }
.hd-sys { text-align: center; font-size: 12px; color: var(--hd-ink3); padding: 2px 10px; }
.hd-sys span { display: inline-block; background: var(--hd-soft); padding: 5px 10px; border-radius: 999px; }
.hd-sys.err span { background: #FDECEB; color: var(--hd-bad); }
.hd-typing .hd-b { display: flex; gap: 4px; padding: 12px 14px; }
.hd-typing .hd-b i { width: 6px; height: 6px; border-radius: 50%; background: var(--hd-ink3); animation: hdDot 1.1s infinite; }
.hd-typing .hd-b i:nth-child(2) { animation-delay: .15s; } .hd-typing .hd-b i:nth-child(3) { animation-delay: .3s; }
@keyframes hdDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.hd-sugg { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px; background: #fff; }
.hd-sugg[hidden] { display: none; }
.hd-sugg button { border: 1px solid #CBD3FF; background: #F4F6FF; color: #2A43D6; border-radius: 999px; padding: 6px 11px; font: 500 12.5px/1.3 inherit; cursor: pointer; text-align: left; }
.hd-sugg button:hover { background: #EAEEFF; }

.hd-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--hd-line); background: #fff; }
.hd-form textarea { flex: 1; resize: none; border: 1px solid var(--hd-line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--hd-ink); max-height: 120px; outline: none; background: #fff; }
.hd-form textarea:focus { border-color: var(--hd-accent); box-shadow: 0 0 0 3px rgba(61,90,254,.15); }
.hd-send { width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; background: var(--hd-navy); color: #fff; cursor: pointer; display: grid; place-items: center; }
.hd-send:disabled { opacity: .5; }
.hd-send svg { width: 18px; height: 18px; }
.hd-foot { padding: 0 14px 10px; font-size: 11px; color: var(--hd-ink3); text-align: center; background: #fff; }
.hd-foot:empty { display: none; }

.hd-ticket { background: #fff; border: 1px solid var(--hd-line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 8px 20px -14px rgba(6,16,43,.3); animation: hdIn .2s ease both; }
.hd-tk-h { display: flex; align-items: center; gap: 8px; color: var(--hd-ink); }
.hd-tk-h svg { width: 18px; height: 18px; color: var(--hd-accent); }
.hd-ticket p { margin: 0; font-size: 13px; color: var(--hd-ink2); }
.hd-ticket label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--hd-ink3); font-weight: 600; }
.hd-ticket input, .hd-ticket textarea { border: 1px solid var(--hd-line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--hd-ink); font-weight: 400; }
.hd-ticket input:focus, .hd-ticket textarea:focus { outline: none; border-color: var(--hd-accent); box-shadow: 0 0 0 3px rgba(61,90,254,.15); }
.hd-tk-send { border: 0; border-radius: 10px; padding: 10px; background: var(--hd-mint); color: var(--hd-mint-ink); font: 700 14px/1.2 inherit; cursor: pointer; }
.hd-tk-send:disabled { opacity: .6; }
.hd-rate { text-align: center; font-size: 12.5px; color: var(--hd-ink2); padding: 8px; background: var(--hd-soft); border-radius: 12px; }
.hd-rate button { border: 0; background: none; font-size: 22px; color: #C9CFDB; cursor: pointer; padding: 0 2px; }
.hd-rate button:hover, .hd-rate button:hover ~ button { color: #C9CFDB; }
.hd-rate div:hover button { color: #F5A524; } .hd-rate div button:hover ~ button { color: #C9CFDB; }

@media (max-width: 520px) {
  .hd-root { right: 14px; bottom: 14px; }
  .hd-panel { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; bottom: 0; }
  .hd-root.open .hd-launch { display: none; }
  .hd-nudge { width: min(250px, calc(100vw - 40px)); }
}
@media (prefers-reduced-motion: reduce) { .hd-root * { animation: none !important; transition: none !important; } }
@media print { .hd-root { display: none; } }
.hd-root[hidden] { display: none; }
/* v22.3: ticket created → this chat ends, a new one can start */
.hd-ended { display: flex; gap: 10px; align-items: flex-start; margin: 10px 4px; padding: 12px 14px; border-radius: 14px; background: rgba(18,128,92,.08); border: 1px solid rgba(18,128,92,.25); font-size: 13.5px; line-height: 1.45; }
.hd-ended > svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #12805C; }
.hd-ended b { display: block; margin-bottom: 2px; }
.hd-ended span { display: block; opacity: .85; }
.hd-ended .hd-tk-send { margin-top: 10px; padding: 8px 14px; }
/* v22.9: End chat, and a chat that works well on phones */
.hd-end { flex: none; height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: transparent; color: #fff; font: 600 12.5px/1 inherit; cursor: pointer; }
.hd-end:hover { background: rgba(255,255,255,.12); }
.hd-end[hidden] { display: none; }
.hd-ended .hd-rate.in { margin-top: 10px; background: #fff; }
@media (max-width: 520px) {
  .hd-root { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .hd-launch, .hd-app .hd-launch { width: 50px; height: 50px; }
  .hd-launch svg { width: 24px; height: 24px; }
  .hd-panel { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-height: none; border-radius: 0; bottom: 0; right: 0; animation: none; }
  .hd-head { padding: calc(12px + env(safe-area-inset-top)) 12px 12px; gap: 10px; }
  .hd-av { width: 36px; height: 36px; }
  .hd-ttl h2 { font-size: 15px; } .hd-ttl p { font-size: 12px; }
  .hd-x { width: 40px; height: 40px; }
  .hd-log { padding: 12px 10px 8px; }
  .hd-b { font-size: 15px; }
  .hd-msg.me .hd-b { max-width: 88%; }
  .hd-form { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .hd-form textarea, .hd-ticket input, .hd-ticket textarea { font-size: 16px; }      /* 16px: iPhone does not zoom into the field */
  .hd-send { width: 46px; height: 46px; }
  .hd-sugg { flex-wrap: nowrap; overflow-x: auto; padding: 4px 10px 8px; scrollbar-width: none; }
  .hd-sugg::-webkit-scrollbar { display: none; }
  .hd-sugg button { flex: none; white-space: nowrap; }
  .hd-human, .hd-fb { min-height: 34px; }
  .hd-foot { display: none; }
  html.hd-lock, html.hd-lock body { overflow: hidden; }
}