/*
 * Estilização do widget de chat de suporte (Tallos/MegaSAC) para ficar idêntico ao antigo botão
 * flutuante do suporte (o FAB laranja que abria o formulário de chamado no Fluig).
 *
 * Só mexe no BOTÃO flutuante (#megasac-button) e esconde o BALÃO de saudação (#megasac-info).
 * A janela do chat em si (#megasac-chat / #megasac-chat-iframe) é um iframe isolado da Tallos e
 * não é estilizada aqui (não dá, e não foi pedido).
 *
 * O loader da Tallos seta background/backgroundSize/backgroundPosition INLINE no #megasac-button
 * (a foto do atendente) no onload — por isso precisamos de !important para sobrescrever.
 *
 * O ícone de headset é um SVG embutido (data URI) para ficar pixel-idêntico em qualquer template,
 * sem depender da versão do Font Awesome carregada (o login/site usam FA diferente do interno).
 */

/* Remove o balão "Como posso te ajudar?" — clicar no botão já abre o chat, então nada se perde. */
#megasac-info {
    display: none !important;
}

/* Botão flutuante idêntico ao antigo .fab-suporte__btn: laranja #f48140, 56x56, redondo, ícone headset. */
#megasac-button {
    /* laranja sólido no lugar da foto do atendente (sobrescreve o background inline do loader) */
    background: #f48140 !important;
    background-image: none !important;

    /* ícone de headset branco, centralizado (SVG embutido) */
    background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ffffff'%3E%3Cpath d='M256 48C141.1 48 48 141.1 48 256l0 40c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-40C0 114.6 114.6 0 256 0S512 114.6 512 256l0 144.1c0 48.6-39.4 88-88.1 88L313.6 488c-8.3 14.3-23.8 24-41.6 24l-32 0c-26.5 0-48-21.5-48-48s21.5-48 48-48l32 0c17.8 0 33.3 9.7 41.6 24l110.4 .1c22.1 0 40-17.9 40-40L464 256c0-114.9-93.1-208-208-208zM144 208l16 0c17.7 0 32 14.3 32 32l0 112c0 17.7-14.3 32-32 32l-16 0c-35.3 0-64-28.7-64-64l0-48c0-35.3 28.7-64 64-64zm224 0c35.3 0 64 28.7 64 64l0 48c0 35.3-28.7 64-64 64l-16 0c-17.7 0-32-14.3-32-32l0-112c0-17.7 14.3-32 32-32l16 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 48% 48% !important;

    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
    cursor: pointer;
}

#megasac-button:hover,
#megasac-button:focus {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45) !important;
    outline: none;
}

#megasac-button:focus-visible {
    outline: 3px solid #913623 !important;
    outline-offset: 2px;
}

/*
 * Tooltip "Chat de suporte" — idêntico ao .fab-suporte__dica do antigo FAB: balão escuro à esquerda
 * do botão, com setinha, aparecendo no hover/foco. É um ::after no próprio #megasac-button (o botão
 * está no DOM aberto, então dá). O texto é fixo no CSS (não dá para ler o title aqui de forma confiável;
 * o title nativo "Tallos Chat" é limpo por JS no partial para não aparecerem dois tooltips).
 */
#megasac-button::after {
    content: "Chat de suporte";
    position: absolute;
    right: 68px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: #1a2540;
    color: #fff;
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.2;
    padding: .4rem .7rem;
    border-radius: .4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 2147483647;
}

/* setinha do balão, apontando para o botão */
#megasac-button::before {
    content: "";
    position: absolute;
    right: 62px;
    top: 50%;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left-color: #1a2540;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 2147483647;
}

#megasac-button:hover::after,
#megasac-button:focus-visible::after,
#megasac-button:hover::before,
#megasac-button:focus-visible::before {
    opacity: 1;
}

/* O loader da Tallos aplica a animação "pulse" no botão; mantemos, mas respeitamos reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    #megasac-button {
        transition: none !important;
        animation: none !important;
    }
    #megasac-button::after,
    #megasac-button::before {
        transition: none !important;
    }
}