:root {

    --live-fundo:
        #f4f6f8;

    --live-card:
        #ffffff;

    --live-texto:
        #24364b;

    --live-secundaria:
        #687787;

    --live-destaque:
        #2f80ed;

    --live-destaque-claro:
        #edf4ff;

    --live-borda:
        #dfe5eb;

    --live-verde:
        #26a269;

    --live-amarelo:
        #e0a126;

    --live-vermelho:
        #d64545;

    --live-sombra:
        0 5px 22px rgba(0, 0, 0, .07);

}


/* =========================================================
   PÁGINA
========================================================= */

.ao-vivo-page {

    min-height:
        100vh;

    padding:
        38px
        30px
        70px;

    box-sizing:
        border-box;

 /* =====================================================
       FUNDO COM IDENTIDADE VISUAL
    ====================================================== */

    background-image:

        linear-gradient(
            rgba(244, 246, 248, 0.88),
            rgba(244, 246, 248, 0.88)
        ),

        url("../../img/Login.png");


    background-size:
        cover;


    background-position:
        center;


    background-repeat:
        no-repeat;


    background-attachment:
        fixed;


    color:
        var(--min-principal);

}

/* =========================================================
   TOPO
========================================================= */

.ao-vivo-topo {

    width:
        100%;

    max-width:
        1400px;

    margin:
        0 auto 22px;

}


.ao-vivo-subtitulo {

    color:
        var(--live-destaque);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.ao-vivo-topo h1 {

    margin:
        4px 0;

    font-size:
        32px;
    color: #000000;

}


.ao-vivo-topo p {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--live-secundaria);

    font-size:
        12px;

}


/* =========================================================
   ADMIN
========================================================= */

.admin-ao-vivo {

    width:
        100%;

    max-width:
        1400px;

    margin:
        0 auto 16px;

    padding:
        13px 16px;

    box-sizing:
        border-box;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    border:
        1px solid var(--live-borda);

    border-radius:
        9px;

    background:
        white;

    box-shadow:
        var(--live-sombra);

}


.admin-ao-vivo-info {

    display:
        flex;

    flex-direction:
        column;

}


.admin-ao-vivo-info > span {

    color:
        var(--live-destaque);

    font-size:
        8px;

    font-weight:
        700;

    text-transform:
        uppercase;

}


.admin-ao-vivo-info strong {

    margin-top:
        2px;

    font-size:
        11px;
    color: #000000;

}


.admin-ao-vivo-info small {

    margin-top:
        2px;

    color:
        var(--live-secundaria);

    font-size:
        9px;

}


/* =========================================================
   CONTROLES ADMIN
========================================================= */

.admin-ao-vivo-acoes,
.admin-ao-vivo-controles {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


/* O atributo hidden precisa vencer o display:flex acima. */
.admin-ao-vivo-acoes[hidden],
.admin-ao-vivo-controles[hidden] {

    display:
        none !important;

}


.admin-status-campo {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

}


.admin-status-campo select,
.admin-status-campo input {

    height:
        36px;

    box-sizing:
        border-box;

    border:
        1px solid var(--live-borda);

    border-radius:
        5px;

    background:
        white;

    outline:
        none;

}


.admin-status-campo select {

    padding:
        0 8px;

    font-size:
        10px;

}


.admin-status-campo input {

    width:
        260px;

    padding:
        0 10px;

    font-size:
        10px;

}


.btn-live-principal,
.btn-live-secundario,
.btn-live-perigo {

    height:
        36px;

    padding:
        0 12px;

    border-radius:
        5px;

    cursor:
        pointer;

    font-size:
        10px;

    font-weight:
        600;

    touch-action:
        manipulation;

}


.btn-live-principal:disabled,
.btn-live-secundario:disabled,
.btn-live-perigo:disabled {

    opacity:
        .58;

    cursor:
        not-allowed;

}


.btn-live-principal {

    border:
        1px solid var(--live-destaque);

    background:
        var(--live-destaque);

    color:
        white;

}


.btn-live-secundario {

    border:
        1px solid var(--live-borda);

    background:
        white;

    color:
        var(--live-texto);

}


.btn-live-perigo {

    border:
        1px solid #efcccc;

    background:
        #fff6f6;

    color:
        var(--live-vermelho);

}


.admin-confirmacao-inicio {

    max-width:
        360px;

    padding:
        10px;

    border:
        1px solid #d9e3ef;

    border-radius:
        7px;

    background:
        #f8fbff;

}


.admin-confirmacao-inicio[hidden] {

    display:
        none !important;

}


.admin-confirmacao-inicio > span {

    display:
        block;

    color:
        var(--live-texto);

    font-size:
        9px;

    line-height:
        1.45;

}


.admin-confirmacao-inicio-acoes {

    margin-top:
        8px;

    display:
        flex;

    gap:
        6px;

}


/* =========================================================
   LAYOUT
========================================================= */

.ao-vivo-layout {

    width:
        100%;

    max-width:
        1400px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        370px;

    gap:
        14px;

    align-items:
        stretch;

}


/* =========================================================
   PLAYER
========================================================= */

.transmissao-card {

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid var(--live-borda);

    border-radius:
        12px;

    background:
        white;

    box-shadow:
        var(--live-sombra);

}


.transmissao-player {

    width:
        100%;

    aspect-ratio:
        16 / 9;

    background:
        #0d1117;

}


.transmissao-player iframe {

    width:
        100%;

    height:
        100%;

    display:
        block;

    border:
        none;

}


.transmissao-info {

    padding:
        16px 18px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        15px;

}


.transmissao-info > div {

    display:
        flex;

    flex-direction:
        column;

}


.transmissao-info > div > span {

    color:
        var(--live-secundaria);

    font-size:
        8px;

    text-transform:
        uppercase;

}


.transmissao-info h2 {

    margin:
        3px 0 0;

    font-size:
        17px;

}


.transmissao-indicador {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--live-vermelho);

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

}


.ponto-ao-vivo {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--live-vermelho);

}


/* =========================================================
   COMUNICAÇÃO
========================================================= */

.comunicacao-card {

    min-width:
        0;

    min-height:
        540px;

    max-height:
        650px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid var(--live-borda);

    border-radius:
        12px;

    background:
        white;

    box-shadow:
        var(--live-sombra);

}


/* =========================================================
   CABEÇALHO CHAT
========================================================= */

.comunicacao-topo {

    padding:
        15px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    border-bottom:
        1px solid var(--live-borda);

}


.comunicacao-topo > div:first-child {

    display:
        flex;

    flex-direction:
        column;

}


.comunicacao-topo > div:first-child span {

    color:
        var(--live-secundaria);

    font-size:
        8px;

    text-transform:
        uppercase;

}


.comunicacao-topo h2 {

    margin:
        3px 0 0;

    font-size:
        15px;
    color: #000000;

}


/* =========================================================
   STATUS
========================================================= */

.status-transmissao {

    min-height:
        32px;

    padding:
        7px 9px;

    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    border-radius:
        6px;

    font-size:
        9px;

}


.btn-som-chat {

    min-height:
        30px;

    padding:
        6px 9px;

    align-self:
        flex-start;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    border:
        1px solid var(--live-borda);

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        var(--live-texto);

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        8px;

    font-weight:
        600;

    touch-action:
        manipulation;

}


.btn-som-chat:hover {

    background:
        #f6f9fc;

}


.btn-som-chat.desligado {

    color:
        var(--live-secundaria);

    background:
        #f7f8fa;

}


.btn-som-chat:disabled {

    opacity:
        .55;

    cursor:
        not-allowed;

}


.btn-som-chat-icone {

    font-size:
        10px;

    line-height:
        1;

}


.status-ponto {

    width:
        7px;

    height:
        7px;

    flex-shrink:
        0;

    border-radius:
        50%;

}


.status-inativo {

    background:
        #f1f3f5;

    color:
        var(--live-secundaria);

}


.status-inativo
.status-ponto {

    background:
        #a6afb8;

}


.status-normal {

    background:
        #edf8f2;

    color:
        #187a4c;

}


.status-normal
.status-ponto {

    background:
        var(--live-verde);

}


.status-alerta {

    background:
        #fff8e8;

    color:
        #936917;

}


.status-alerta
.status-ponto {

    background:
        var(--live-amarelo);

}


.status-problema {

    background:
        #fff0f0;

    color:
        #a93131;

}


.status-problema
.status-ponto {

    background:
        var(--live-vermelho);

}


/* =========================================================
   INATIVO
========================================================= */

.chat-inativo {

    flex:
        1;

    padding:
        35px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    color:
        var(--live-secundaria);

    text-align:
        center;

}

.chat-inativo.oculto {

    display:
        none;

}

.chat-inativo-icone {

    width:
        52px;

    height:
        52px;

    margin-bottom:
        11px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        50%;

    background:
        var(--live-destaque-claro);

    font-size:
        20px;

}


.chat-inativo strong {

    color:
        var(--live-texto);

    font-size:
        12px;

}


.chat-inativo p {

    max-width:
        230px;

    margin:
        5px 0 0;

    font-size:
        9px;

    line-height:
        1.5;

}


/* =========================================================
   CHAT ATIVO
========================================================= */

.chat-ativo {

    min-height:
        0;

    flex:
        1;

    display:
        none;

    flex-direction:
        column;

}


/* Comunicação ativa */

.chat-ativo.ativo {

    display:
        flex;

}

.chat-inativo.oculto {

    display:
        none;

}


/* =========================================================
   MENSAGENS
========================================================= */

.chat-mensagens {

    min-height:
        240px;

    flex:
        1;

    padding:
        12px;

    overflow-y:
        auto;

    background:
        #fafbfc;

}


.chat-sem-mensagens {

    min-height:
        180px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    color:
        var(--live-secundaria);

    text-align:
        center;

}


.chat-sem-mensagens strong {

    color:
        var(--live-texto);

    font-size:
        10px;

}


.chat-sem-mensagens span {

    margin-top:
        3px;

    font-size:
        8px;

}


/* =========================================================
   MENSAGEM
========================================================= */

.chat-mensagem {

    margin-bottom:
        9px;

    padding:
        9px 10px;

    border:
        1px solid #e7ebef;

    border-radius:
        8px;

    background:
        white;

}


.chat-mensagem.minha {

    border-color:
        #d5e6fc;

    background:
        #f7fbff;

}


.chat-mensagem.admin {

    border-color:
        #bdd8fa;

    background:
        var(--live-destaque-claro);

}


.chat-mensagem-topo {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        8px;

}


.chat-mensagem-autor {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

}


.chat-mensagem-autor strong {

    overflow:
        hidden;

    font-size:
        9px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
    color: #000000;

}


.chat-admin-badge {

    padding:
        2px 5px;

    border-radius:
        10px;

    background:
        var(--live-destaque);

    color:
        white;

    font-size:
        6px;

    font-weight:
        700;

}


.chat-mensagem-hora {

    flex-shrink:
        0;

    color:
        var(--live-secundaria);

    font-size:
        7px;

}


.chat-mensagem-corpo {

    margin-top:
        5px;

    color:
        #354456;

    font-size:
        10px;

    line-height:
        1.45;

    white-space:
        pre-wrap;

    word-break:
        break-word;

}


.btn-excluir-chat {

    margin-top:
        6px;

    padding:
        0;

    border:
        none;

    background:
        transparent;

    color:
        var(--live-vermelho);

    cursor:
        pointer;

    font-size:
        7px;

}


/* =========================================================
   ATALHOS
========================================================= */

.chat-atalhos {

    padding:
        9px 11px;

    border-top:
        1px solid var(--live-borda);

}


.chat-atalhos > span {

    color:
        var(--live-secundaria);

    font-size:
        7px;

    text-transform:
        uppercase;

}


.chat-atalhos > div {

    margin-top:
        5px;

    display:
        flex;

    gap:
        5px;

    overflow-x:
        auto;

}


.atalho-chat {

    padding:
        6px 8px;

    flex-shrink:
        0;

    border:
        1px solid var(--live-borda);

    border-radius:
        20px;

    background:
        white;

    color:
        var(--live-texto);

    cursor:
        pointer;

    font-size:
        8px;

}


/* =========================================================
   FORM
========================================================= */

.chat-form {

    padding:
        10px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        7px;

    align-items:
        end;

    border-top:
        1px solid var(--live-borda);

}


.chat-campo {

    position:
        relative;

}


#chatMensagem {

    width:
        100%;

    min-height:
        55px;

    max-height:
        100px;

    padding:
        9px
        9px
        19px;

    box-sizing:
        border-box;

    resize:
        vertical;

    border:
        1px solid var(--live-borda);

    border-radius:
        6px;

    font-family:
        inherit;

    font-size:
        10px;

    outline:
        none;

}


#chatMensagem:focus {

    border-color:
        var(--live-destaque);

}


.contador-mensagem {

    position:
        absolute;

    right:
        7px;

    bottom:
        5px;

    color:
        var(--live-secundaria);

    font-size:
        7px;

}


#btnEnviarMensagem {

    height:
        39px;

    padding:
        0 12px;

    border:
        none;

    border-radius:
        6px;

    background:
        var(--live-destaque);

    color:
        white;

    cursor:
        pointer;

    font-size:
        9px;

    font-weight:
        600;

}


#btnEnviarMensagem:disabled {

    opacity:
        .55;

    cursor:
        not-allowed;

}


.status-envio-chat {

    min-height:
        13px;

    padding:
        0 11px 7px;

    color:
        var(--live-vermelho);

    font-size:
        7px;

}


/* =========================================================
   PROTEÇÃO CONTRA ESTOURO HORIZONTAL DO PAINEL ADMIN
========================================================= */

.ao-vivo-page,
.admin-ao-vivo,
.admin-ao-vivo-info,
.admin-ao-vivo-acoes,
.admin-ao-vivo-controles,
.admin-status-campo {

    min-width:
        0;

}


.admin-ao-vivo {

    flex-wrap:
        wrap;

}


.admin-ao-vivo-info {

    flex:
        1 1 180px;

}


.admin-ao-vivo-acoes,
.admin-ao-vivo-controles {

    max-width:
        100%;

    flex-wrap:
        wrap;

}


.admin-status-campo {

    flex:
        1 1 470px;

}


.admin-status-campo input {

    flex:
        1 1 210px;

    min-width:
        0;

    max-width:
        100%;

}


@media (
    max-width: 1150px
) {

    .admin-ao-vivo {

        align-items:
            stretch;

    }


    .admin-ao-vivo-info {

        flex-basis:
            100%;

    }


    .admin-ao-vivo-acoes,
    .admin-ao-vivo-controles {

        width:
            100%;

        justify-content:
            flex-start;

    }


    .admin-confirmacao-inicio {

        flex:
            1 1 320px;

        max-width:
            520px;

    }

}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (
    max-width: 1050px
) {

    .ao-vivo-layout {

        grid-template-columns:
            1fr;

    }


    .comunicacao-card {

        min-height:
            500px;

        max-height:
            650px;

    }

}


@media (
    max-width: 750px
) {

    .ao-vivo-page {

        padding:
            25px
            12px
            50px;

    }


    .admin-ao-vivo {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .admin-ao-vivo-controles {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .admin-ao-vivo-acoes {

        width:
            100%;

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .admin-confirmacao-inicio {

        max-width:
            none;

    }


    .admin-confirmacao-inicio-acoes {

        flex-direction:
            column;

    }


    .admin-confirmacao-inicio-acoes button {

        width:
            100%;

    }


    .admin-status-campo {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .admin-status-campo input {

        width:
            100%;

    }


    .ao-vivo-topo h1 {

        font-size:
            26px;

    }


    .transmissao-info {

        padding:
            13px;

    }


    .comunicacao-card {

        max-height:
            none;

    }


    .chat-mensagens {

        height:
            340px;

        flex:
            none;

    }

}


/* =========================================================
   E7.2B — PLAYER CLOUDFLARE / FALLBACK
========================================================= */

.admin-origem-player {

    color:
        var(--live-secundaria);

}


.transmissao-indicador.aguardando {

    color:
        var(--live-amarelo);

}


.transmissao-indicador.aguardando .ponto-ao-vivo {

    background:
        var(--live-amarelo);

    animation:
        none;

}


.transmissao-indicador.indefinido {

    color:
        var(--live-secundaria);

}


.transmissao-indicador.indefinido .ponto-ao-vivo {

    background:
        var(--live-secundaria);

    animation:
        none;

}


/* =========================================================
   E7.4C2 — FAMÍLIA VISUAL AO VIVO / DIGITAL
========================================================= */

html.iecjs-contexto-interno .ao-vivo-page {
    --live-fundo: var(--iecjs-fundo, #F8FBFD);
    --live-card: var(--iecjs-superficie, #FEFEFE);
    --live-texto: var(--iecjs-texto, #17324A);
    --live-secundaria: var(--iecjs-texto-secundario, #79869F);
    --live-destaque: var(--iecjs-azul, #22B8EF);
    --live-destaque-claro: color-mix(in srgb, var(--iecjs-azul, #22B8EF) 12%, transparent);
    --live-borda: var(--iecjs-borda, rgba(23, 50, 74, .12));
    --live-verde: var(--iecjs-sucesso, #2FBF71);
    --live-amarelo: var(--iecjs-atencao, #F5A623);
    --live-vermelho: var(--iecjs-erro, #E5484D);
    --live-sombra: var(--iecjs-card-sombra, 0 12px 30px rgba(23, 50, 74, .10));

    background: transparent !important;
    color: var(--live-texto);
}

html.iecjs-contexto-interno .ao-vivo-topo h1 {
    color: var(--live-texto) !important;
}

html.iecjs-contexto-interno :is(.admin-ao-vivo, .comunicacao-card) {
    background: linear-gradient(145deg, var(--live-card) 0%, color-mix(in srgb, var(--live-card) 94%, var(--live-destaque) 6%) 100%);
    border-color: var(--live-borda);
}

html[data-theme="dark"].iecjs-contexto-interno :is(.admin-ao-vivo, .comunicacao-card) {
    background: linear-gradient(145deg, #102536 0%, #17354A 100%);
}

html.iecjs-contexto-interno .btn-live-principal {
    border-color: transparent !important;
    background: linear-gradient(135deg, #22B8EF 0%, #46C3F1 100%) !important;
    color: #FEFEFE !important;
    box-shadow: 0 8px 22px rgba(34, 184, 239, .22);
    transition: transform .16s ease, box-shadow .16s ease;
}

html[data-theme="dark"].iecjs-contexto-interno .btn-live-principal {
    background: linear-gradient(135deg, #17354A 0%, #38C7FA 100%) !important;
}

html.iecjs-contexto-interno .btn-live-principal:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(34, 184, 239, .28);
}

html.iecjs-contexto-interno .transmissao-card {
    overflow: hidden;
    border-color: color-mix(in srgb, var(--live-destaque) 24%, var(--live-borda));
    box-shadow: 0 18px 42px rgba(9, 19, 29, .16);
}

html[data-theme="dark"].iecjs-contexto-interno .transmissao-card {
    border-color: rgba(56, 199, 250, .24);
    box-shadow: 0 20px 52px rgba(0, 0, 0, .34), 0 0 36px rgba(56, 199, 250, .05);
}

html.iecjs-contexto-interno .transmissao-indicador:not(.aguardando):not(.indefinido) .ponto-ao-vivo {
    box-shadow: 0 0 0 0 rgba(237, 50, 55, .48);
    animation: iecjs-live-pulse 1.8s ease-out infinite;
}

@keyframes iecjs-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(237, 50, 55, .48); }
    70% { box-shadow: 0 0 0 9px rgba(237, 50, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(237, 50, 55, 0); }
}

@media (max-width: 760px) {
    html.iecjs-contexto-interno .ao-vivo-page {
        padding-left: 16px;
        padding-right: 16px;
    }

    html.iecjs-contexto-interno .ao-vivo-topo h1 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }
}

/* =========================================================
   E7.4C3 — AO VIVO MOBILE / CONTROLES ADMIN COMPACTOS
========================================================= */
html.iecjs-contexto-interno :is(
    .admin-ao-vivo-info strong,
    .comunicacao-topo h2,
    .chat-sem-mensagens strong
) {
    color: var(--live-texto) !important;
}

html.iecjs-contexto-interno :is(
    .admin-status-campo select,
    .admin-status-campo input
) {
    background: var(--live-card) !important;
    color: var(--live-texto) !important;
    border-color: var(--live-borda) !important;
}

html[data-theme="dark"].iecjs-contexto-interno .chat-mensagens {
    background: #102536 !important;
    color: #F8F6F0 !important;
}

html[data-theme="dark"].iecjs-contexto-interno .admin-confirmacao-inicio {
    background: #102536 !important;
    color: #F8F6F0 !important;
    border-color: rgba(171, 184, 196, .18) !important;
}

html[data-theme="dark"].iecjs-contexto-interno .btn-live-secundario {
    background: #17354A !important;
    color: #F8F6F0 !important;
    border-color: rgba(171, 184, 196, .22) !important;
}

@media (max-width: 750px) {
    .admin-ao-vivo {
        padding: 18px 16px !important;
        gap: 14px !important;
    }

    .admin-ao-vivo-info {
        flex: 0 0 auto !important;
    }

    .admin-ao-vivo-controles,
    .admin-ao-vivo-acoes {
        flex: 0 0 auto !important;
        gap: 10px !important;
    }

    .admin-status-campo {
        flex: 0 0 auto !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .admin-status-campo select,
    .admin-status-campo input {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 48px !important;
        height: 48px !important;
        padding: 0 14px !important;
        font-size: 15px !important;
    }

    .admin-status-campo .btn-live-secundario,
    .admin-ao-vivo-controles > .btn-live-perigo,
    .admin-ao-vivo-acoes > .btn-live-principal {
        width: 100% !important;
        min-height: 48px !important;
        height: 48px !important;
        font-size: 15px !important;
    }

    .admin-confirmacao-inicio {
        flex: 0 0 auto !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 14px !important;
    }

    .admin-confirmacao-inicio > span {
        font-size: 13px !important;
    }

    .chat-mensagens {
        height: auto !important;
        min-height: 260px !important;
        max-height: 430px !important;
    }
}

/* =========================================================
   E7.4C4 — AO VIVO / PAINEL ADMIN + CHAT RESPONSIVOS
========================================================= */

html.iecjs-contexto-interno .admin-ao-vivo {
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
}

html.iecjs-contexto-interno .admin-ao-vivo-controles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    flex: 1 1 720px;
}

html.iecjs-contexto-interno .admin-status-campo {
    display: grid !important;
    grid-template-columns: minmax(170px, .8fr) minmax(220px, 1.4fr) auto;
    align-items: center;
    gap: 8px;
    flex: none !important;
    width: 100%;
}

html.iecjs-contexto-interno .admin-status-campo select,
html.iecjs-contexto-interno .admin-status-campo input {
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
}

html.iecjs-contexto-interno .admin-status-campo .btn-live-secundario,
html.iecjs-contexto-interno .admin-ao-vivo-controles > .btn-live-perigo {
    min-height: 42px;
    height: 42px;
    white-space: nowrap;
}

html[data-theme="dark"] .ao-vivo-page .admin-status-campo select,
html[data-theme="dark"] .ao-vivo-page .admin-status-campo input,
html[data-theme="dark"] .ao-vivo-page .chat-form textarea {
    background: #09131D !important;
    color: #F8F6F0 !important;
    border-color: rgba(56, 199, 250, .34) !important;
}

html[data-theme="dark"] .ao-vivo-page .chat-mensagens {
    background: #0D1C29 !important;
    color: #F8F6F0 !important;
    border-color: rgba(171, 184, 196, .12) !important;
}

html[data-theme="dark"] .ao-vivo-page :is(
    .chat-mensagem,
    .chat-sem-mensagens
) {
    color: #F8F6F0 !important;
}

html[data-theme="dark"] .ao-vivo-page :is(
    .chat-mensagem p,
    .chat-sem-mensagens p,
    .comunicacao-topo > span,
    .comunicacao-status-texto
) {
    color: #ABB8C4 !important;
}

html.iecjs-contexto-interno .admin-confirmacao-inicio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    max-width: 650px;
    padding: 12px 14px;
    border-radius: 11px;
}

html.iecjs-contexto-interno .admin-confirmacao-inicio[hidden] {
    display: none !important;
}

html.iecjs-contexto-interno .admin-confirmacao-inicio-acoes {
    display: flex;
    gap: 8px;
}

@media (max-width: 760px) {
    html.iecjs-contexto-interno .admin-ao-vivo {
        padding: 16px !important;
        border-radius: 14px;
    }

    html.iecjs-contexto-interno .admin-ao-vivo-controles,
    html.iecjs-contexto-interno .admin-ao-vivo-acoes {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100% !important;
        flex: none !important;
        gap: 10px !important;
    }

    html.iecjs-contexto-interno .admin-status-campo {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        flex: none !important;
        gap: 9px !important;
    }

    html.iecjs-contexto-interno .admin-status-campo select,
    html.iecjs-contexto-interno .admin-status-campo input,
    html.iecjs-contexto-interno .admin-status-campo .btn-live-secundario,
    html.iecjs-contexto-interno .admin-ao-vivo-controles > .btn-live-perigo,
    html.iecjs-contexto-interno .admin-ao-vivo-acoes > .btn-live-principal {
        width: 100% !important;
        min-height: 48px !important;
        height: 48px !important;
        max-height: 48px !important;
        flex: none !important;
        box-sizing: border-box !important;
    }

    html.iecjs-contexto-interno .admin-confirmacao-inicio {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        flex: none !important;
        padding: 14px !important;
    }

    html.iecjs-contexto-interno .admin-confirmacao-inicio-acoes {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    html.iecjs-contexto-interno .admin-confirmacao-inicio-acoes button {
        width: 100%;
        min-height: 46px;
    }

    html.iecjs-contexto-interno .comunicacao-card {
        min-height: 0 !important;
        max-height: none !important;
    }

    html.iecjs-contexto-interno .chat-mensagens {
        min-height: 240px !important;
        height: auto !important;
        max-height: 420px !important;
    }

    html.iecjs-contexto-interno .chat-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px;
    }

    html.iecjs-contexto-interno .chat-form textarea {
        width: 100% !important;
        min-height: 100px !important;
        max-height: 160px !important;
        box-sizing: border-box;
    }

    html.iecjs-contexto-interno #btnEnviarMensagem {
        width: 100% !important;
        min-height: 48px;
    }
}

/* =========================================================
   E7.4C5 — HARDENING VISUAL AO VIVO / DARK
   Mantém estados semânticos, mas elimina brancos estruturais.
========================================================= */

html[data-theme="dark"] .ao-vivo-page :is(
    .transmissao-info,
    .chat-atalhos,
    .chat-form
) {
    background: #102536 !important;
    color: #F8F6F0 !important;
    border-color: rgba(171, 184, 196, .14) !important;
}

html[data-theme="dark"] .ao-vivo-page .transmissao-info h2,
html[data-theme="dark"] .ao-vivo-page .comunicacao-topo h2,
html[data-theme="dark"] .ao-vivo-page .chat-mensagem-autor strong,
html[data-theme="dark"] .ao-vivo-page .admin-ao-vivo-info strong {
    color: #F8F6F0 !important;
}

html[data-theme="dark"] .ao-vivo-page .transmissao-info > div > span,
html[data-theme="dark"] .ao-vivo-page .chat-mensagem-hora,
html[data-theme="dark"] .ao-vivo-page .chat-atalhos > span {
    color: #ABB8C4 !important;
}

html[data-theme="dark"] .ao-vivo-page .chat-mensagem {
    background: #102536 !important;
    color: #F8F6F0 !important;
    border-color: rgba(171, 184, 196, .14) !important;
}

html[data-theme="dark"] .ao-vivo-page .chat-mensagem.minha {
    background: #123047 !important;
    border-color: rgba(56, 199, 250, .28) !important;
}

html[data-theme="dark"] .ao-vivo-page .chat-mensagem.admin {
    background: linear-gradient(145deg, #123047 0%, #17354A 100%) !important;
    border-color: rgba(56, 199, 250, .40) !important;
}

html[data-theme="dark"] .ao-vivo-page .chat-mensagem-corpo {
    color: #D8E0E7 !important;
}

html[data-theme="dark"] .ao-vivo-page :is(.btn-som-chat, .atalho-chat) {
    background: #17354A !important;
    color: #F8F6F0 !important;
    border-color: rgba(171, 184, 196, .18) !important;
}

html[data-theme="dark"] .ao-vivo-page :is(.btn-som-chat, .atalho-chat):hover {
    background: color-mix(in srgb, #17354A 78%, #38C7FA 22%) !important;
    border-color: rgba(56, 199, 250, .34) !important;
}

html[data-theme="dark"] .ao-vivo-page .btn-som-chat.desligado {
    background: #0D1C29 !important;
    color: #ABB8C4 !important;
}

html[data-theme="dark"] .ao-vivo-page .status-normal {
    background: rgba(47, 191, 113, .12) !important;
    color: #66D79A !important;
    border: 1px solid rgba(47, 191, 113, .20);
}

html[data-theme="dark"] .ao-vivo-page .status-alerta {
    background: rgba(245, 166, 35, .12) !important;
    color: #FFD275 !important;
    border: 1px solid rgba(245, 166, 35, .20);
}

html[data-theme="dark"] .ao-vivo-page .status-problema {
    background: rgba(229, 72, 77, .12) !important;
    color: #FF7A80 !important;
    border: 1px solid rgba(229, 72, 77, .20);
}

html[data-theme="dark"] .ao-vivo-page .status-inativo {
    background: #0D1C29 !important;
    color: #ABB8C4 !important;
    border: 1px solid rgba(171, 184, 196, .12);
}

html[data-theme="dark"] .ao-vivo-page .chat-form textarea::placeholder {
    color: rgba(171, 184, 196, .72) !important;
}

/* Light: a área digital continua clara, mas com superfície azulada em vez de branco puro. */
html:not([data-theme="dark"]) .ao-vivo-page :is(
    .admin-ao-vivo,
    .comunicacao-card,
    .transmissao-info
) {
    background: linear-gradient(145deg, #FEFEFE 0%, #F2F9FC 100%);
}