/* 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; }

/* ---------- Visitantes online: 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: center; gap: 8px; max-width: calc(100vw - 24px);
    padding: 7px 14px 7px 12px; border-radius: 20px;
    background: rgba(24, 24, 24, .92); color: #fff; font-size: 13px; line-height: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3); white-space: nowrap; pointer-events: none;
}
.ho-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; animation: ho-pulse 1.8s ease-in-out infinite; }
.ho-num { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.ho-label { overflow: hidden; text-overflow: ellipsis; color: #d4d4d4; }
@keyframes ho-pulse { 50% { opacity: .35; } }

/* ---------- 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 { font-size: 12px; padding: 6px 12px 6px 10px; }
    .ho-num { font-size: 14px; }
}
@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; } }