/* Havin — floating Telegram bot button */
.htgb{
  --htgb-bg:#0E1726; --htgb-bg2:#17304F; --htgb-fg:#F4F6FA; --htgb-sub:#9FB0C8;
  --htgb-accent:#F5A524; --htgb-icon-fg:#0E1726; --htgb-ring:rgba(245,165,36,.55);
  --htgb-border:rgba(255,255,255,.10);
  position:fixed; bottom:var(--htgb-bottom,24px); z-index:99990;
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 10px 8px 20px; border-radius:999px;
  background:linear-gradient(135deg,var(--htgb-bg2),var(--htgb-bg));
  color:var(--htgb-fg)!important; text-decoration:none!important;
  border:1px solid var(--htgb-border);
  box-shadow:0 10px 30px rgba(8,14,24,.35),0 2px 6px rgba(8,14,24,.25);
  font-family:inherit; direction:rtl; line-height:1.25;
  transition:transform .25s ease,box-shadow .25s ease;
  animation:htgb-in .6s cubic-bezier(.2,.9,.3,1.2) .8s both;
  -webkit-tap-highlight-color:transparent;
}
.htgb--left{left:var(--htgb-side,24px)}
.htgb--right{right:var(--htgb-side,24px)}
.htgb:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(8,14,24,.42),0 3px 8px rgba(8,14,24,.25)}
.htgb:focus-visible{outline:3px solid var(--htgb-accent);outline-offset:3px}

.htgb__icon{position:relative;flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--htgb-accent);color:var(--htgb-icon-fg)}
.htgb__icon svg{width:24px;height:24px;margin-left:-2px}
.htgb--pulse .htgb__icon::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 var(--htgb-ring);animation:htgb-pulse 2.4s ease-out infinite}

.htgb__txt{display:flex;flex-direction:column}
.htgb__title{font-size:15px;font-weight:700;white-space:nowrap}
.htgb__title-m{display:none;font-size:14px;font-weight:700;white-space:nowrap}
.htgb__sub{font-size:12px;color:var(--htgb-sub);margin-top:2px;white-space:nowrap}

/* order: icon on the outer edge of the screen */
.htgb--left{flex-direction:row-reverse;padding:8px 20px 8px 10px}

/* themes */
.htgb--telegram{--htgb-bg:#1B8FD1;--htgb-bg2:#2AABEE;--htgb-sub:#DDF1FD;--htgb-accent:#FFFFFF;--htgb-icon-fg:#229ED9;--htgb-ring:rgba(255,255,255,.6);--htgb-border:rgba(255,255,255,.25)}
.htgb--light{--htgb-bg:#FFFFFF;--htgb-bg2:#F4F6FA;--htgb-fg:#0E1726;--htgb-sub:#5A6B84;--htgb-accent:#0E1726;--htgb-icon-fg:#F5A524;--htgb-ring:rgba(14,23,38,.35);--htgb-border:rgba(14,23,38,.12)}

@keyframes htgb-in{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}
@keyframes htgb-pulse{0%{box-shadow:0 0 0 0 var(--htgb-ring)}70%{box-shadow:0 0 0 14px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}

@media (max-width:767px){
  .htgb{gap:8px;padding:6px 6px 6px 14px}
  .htgb--left{padding:6px 14px 6px 6px}
  .htgb__icon{width:40px;height:40px}
  .htgb__title,.htgb__sub{display:none}
  .htgb__title-m{display:block}
  .htgb--no-mobile{display:none!important}
}
@media (min-width:768px){ .htgb--no-desktop{display:none!important} }
@media (prefers-reduced-motion:reduce){ .htgb,.htgb--pulse .htgb__icon::after{animation:none} .htgb:hover{transform:none} }
@media print{ .htgb{display:none!important} }

/* preview inside admin */
.htgb--preview{position:absolute;animation:none}

/* inline shortcode button */
.htgb-inline{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;
  background:linear-gradient(135deg,#17304F,#0E1726);color:#F4F6FA!important;text-decoration:none!important;font-weight:700;
  box-shadow:0 6px 18px rgba(8,14,24,.25);transition:transform .2s}
.htgb-inline:hover{transform:translateY(-2px)}
.htgb-inline .htgb__icon{width:34px;height:34px}
.htgb-inline .htgb__icon svg{width:19px;height:19px}
.htgb-inline.htgb--telegram{background:linear-gradient(135deg,#2AABEE,#1B8FD1)}
.htgb-inline.htgb--telegram .htgb__icon{background:#fff;color:#229ED9}
.htgb-inline.htgb--light{background:#fff;color:#0E1726!important;border:1px solid rgba(14,23,38,.12)}
.htgb-inline.htgb--light .htgb__icon{background:#0E1726;color:#F5A524}
.htgb-inline .htgb__icon{background:#F5A524;color:#0E1726;border-radius:50%;display:grid;place-items:center}