/* ==========================================================================
   hanko-x.com site layer for the HankoX LiveChat mascot launcher.
   Loads AFTER hankox-livechat-mascot.css. Never edit the package file itself
   so Djordje's drop-in can be replaced wholesale on the next version.

   Two site facts the package cannot know:
     1. hanko-x.com is a pure black page (#000000), not the CRM's #F2F3F8.
     2. The marketing site has no bottom tab bar, but it does have two
        dismissible bottom overlays - the cookie banner and the Discord strip -
        that the launcher has to sit clear of. --hx-lift is driven by
        hankox-chat-hanko-x.js.
   ========================================================================== */

:root {
  --hx-page-bg: #000000;   /* body background, for the status-dot / badge ring */
  --hx-tabbar: 0px;        /* marketing site has no bottom tab bar */
  --hx-lift: 0px;          /* set at runtime to clear bottom overlays */
}

.hx-chat {
  bottom: calc(28px + var(--hx-lift));
  transition: bottom .22s ease;
}

@media (max-width: 640px) {
  .hx-chat {
    bottom: calc(28px + var(--hx-tabbar) + var(--hx-lift));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-chat { transition: none; }
}

/* --------------------------------------------------------------------------
   Package bug fix - report upstream so the next version drops this block.
   hankox-livechat-mascot.css sets `font: 700 12px/20px inherit` on .hx-badge.
   `inherit` is not a legal family inside the font shorthand, so the browser
   throws the whole declaration away and the badge renders at the inherited
   16px / weight 400 instead of the spec's 12px bold. Longhands, same values.
   -------------------------------------------------------------------------- */
.hx-badge {
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;   /* Tailwind's border-box makes the 22px badge 18px inside */
}

@media (max-width: 640px) {
  .hx-badge {
    font-size: 11px;
    line-height: 16px;
  }
}