/* Host Líder Stream — recursos laterais: visitantes online, aba do WhatsApp e chat pop-up lateral.
 * Carregado só quando algum deles está ativo (Painel > Configurações > WhatsApp, visitantes e chat). */
.hls-widgets { --hw-c: var(--hls-primary, #a80c0c); --hw-top: 76px; font-family: inherit; }
.hls-widgets, .hls-widgets *, .hls-widgets *:before, .hls-widgets *:after { box-sizing: border-box; }
.hls-widgets [hidden] { display: none !important; }

/* ---------- Contador de visitantes: Online + Visitou, flutuante, logo abaixo da logo (posição ajustada pelo JS) ---------- */
.hls-online {
    position: fixed; z-index: 1029; left: 12px; top: var(--hw-top);
    display: inline-flex; align-items: stretch; max-width: calc(100vw - 24px);
    border-radius: 12px; overflow: hidden; border: 2px solid var(--hw-c);
    background: rgba(18, 18, 18, .94); color: #fff; line-height: 1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4); white-space: nowrap; pointer-events: none;
}
.ho-box { display: flex; flex-direction: column; justify-content: center; min-width: 96px; padding: 9px 16px 10px; text-align: center; }
.ho-box + .ho-box { border-left: 1px solid rgba(255, 255, 255, .22); background: var(--hw-c); }
.ho-label { display: flex; align-items: center; justify-content: center; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #e6e6e6; }
.ho-box + .ho-box .ho-label { color: #fff; }
.ho-dot { flex: 0 0 auto; margin-right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46, 204, 113, .7); animation: ho-pulse 1.8s ease-out infinite; }
.ho-num { font-weight: 800; font-size: 32px; line-height: 1.05; letter-spacing: .01em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.ho-box-online .ho-num { color: #5dff9a; }
@keyframes ho-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, .7); } 70% { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); } }

/* ---------- Abas quadradas na lateral direita ---------- */
.hls-tabs { position: fixed; z-index: 1031; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.hls-widgets .hls-tab {
    display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0; padding: 0;
    border: 0; border-radius: 6px 0 0 6px; color: #fff; font-size: 28px; line-height: 1; text-decoration: none; cursor: pointer;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, .28); transition: width .15s ease, filter .15s ease;
}
.hls-widgets .hls-tab:hover, .hls-widgets .hls-tab:focus { width: 58px; color: #fff; text-decoration: none; filter: brightness(1.08); }
.hls-tab-wa { background: #25d366; }
.hls-tab-chat { background: var(--hw-c); }
.hls-tab .fa { line-height: 1; }

/* ---------- Chat: pop-up lateral ---------- */
.hls-chat {
    position: fixed; z-index: 1036; right: 64px; top: 50%; width: 360px; max-width: calc(100vw - 80px);
    height: min(540px, calc(100vh - 150px)); display: flex; flex-direction: column;
    background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, .38);
    opacity: 0; visibility: hidden; transform: translate(24px, -50%);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.hls-chat.open { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity .18s ease, transform .18s ease; }
.hc-head { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 6px 0 14px; background: var(--hw-c); color: #fff; }
.hc-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.hls-widgets .hc-head a, .hls-widgets .hc-head button {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0;
    border: 0; border-radius: 4px; background: transparent; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; text-decoration: none;
}
.hls-widgets .hc-head a:hover, .hls-widgets .hc-head button:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.hc-body { flex: 1 1 auto; min-height: 0; background: #fff; }
.hc-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

/* O player fixo no rodapé fica livre */
body.hls-has-dock .hls-chat { max-height: calc(100vh - 210px); }

@media (max-width: 767px) {
    .hls-online { border-radius: 10px; }
    .ho-box { min-width: 78px; padding: 7px 11px 8px; }
    .ho-label { margin-bottom: 5px; font-size: 11px; }
    .ho-num { font-size: 25px; }
}
@media (max-width: 380px) {
    .ho-box { min-width: 68px; padding: 6px 9px 7px; }
    .ho-num { font-size: 22px; }
}
@media (max-width: 575px) {
    .hls-widgets .hls-tab { width: 44px; height: 44px; font-size: 24px; }
    .hls-widgets .hls-tab:hover, .hls-widgets .hls-tab:focus { width: 48px; }
    .hls-chat { left: 8px; right: 8px; top: var(--hw-top); bottom: 8px; width: auto; max-width: none; height: auto; max-height: none; transform: translateY(24px); }
    .hls-chat.open { transform: none; }
    body.hls-has-dock .hls-chat { bottom: 76px; max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ho-dot { animation: none; }
    .hls-chat, .hls-chat.open, .hls-widgets .hls-tab { transition: none; }
}
@media print { .hls-widgets { display: none !important; } }