*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#f6f6f6;color:#111}
.top-live-bar{background:#fff;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e5e5e5;position:sticky;top:0;z-index:10}
.brand-area{display:flex;align-items:center;gap:10px}
.brand-mark{width:38px;height:38px;border-radius:50%;background:#ff0000;color:#fff;display:flex;align-items:center;justify-content:center}
.brand-area small{display:block;color:#777}
.live-status{display:flex;align-items:center;gap:15px}
.live-badge{color:#e60000;font-weight:bold}
.online-counter{background:#f3f3f3;padding:8px 12px;border-radius:999px;font-size:14px}
.main-container{display:flex;gap:22px;padding:22px;max-width:1500px;margin:auto}
.video-section{flex:1;min-width:0}
.video-wrapper{position:relative;width:100%;padding-bottom:56.25%;background:#000;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.video-wrapper iframe{position:absolute;width:100%;height:100%;left:0;top:0}
.video-info{margin-top:22px;background:#fff;border-radius:18px;padding:22px;border:1px solid #eee}
.video-meta{display:flex;gap:8px;margin-bottom:12px}
.pill{background:#fee2e2;color:#991b1b;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:bold}
.pill.muted{background:#f0f0f0;color:#555}
.video-info h1{font-size:56px;line-height:1.05;font-weight:800;letter-spacing:-2px;margin-bottom:18px;max-width:520px;word-break:keep-all}
.subtitle{font-size:17px;color:#555;margin-bottom:8px}
.description{color:#777;line-height:1.5}

.chat-section{width:390px;background:#fff;border:1px solid #e8e8e8;border-radius:18px;height:calc(100vh - 110px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.chat-header{padding:18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee}
.chat-header h2{margin:0;font-size:0;line-height:1}
.chat-title-pill{display:inline-flex;align-items:center;justify-content:center;background:#078c32;color:#fff;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:800;line-height:1;box-shadow:0 8px 18px rgba(7,140,50,.18)}
.chat-header small{display:block;margin-top:8px;color:#777}
.chat-dot{width:10px;height:10px;background:#16a34a;border-radius:50%;box-shadow:0 0 0 5px rgba(22,163,74,.12)}
.pinned-comment{margin:14px;padding:14px;background:#fff7ed;border:1px solid #fed7aa;border-radius:14px}
.pinned-comment p{font-size:14px;margin-top:5px;color:#7c2d12}
.chat-messages{flex:1;overflow-y:auto;padding:14px}
.message{display:flex;gap:10px;margin-bottom:14px;animation:fadeIn .35s ease}
.message-avatar{
width:34px;
height:34px;
background:#f1f1f1;
border:1px solid #e1e1e1;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
position:relative;
}
.message-content{background:#f7f7f7;border-radius:14px;padding:10px 12px;line-height:1.35}
.message-content strong{font-size:14px}
.message-content p{font-size:14px;color:#333;margin-top:4px}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.top-live-bar{flex-direction:column;gap:10px}.main-container{flex-direction:column;padding:12px}.chat-section{width:100%;height:520px}.video-info h1{font-size:24px}.cta-area{flex-direction:column;align-items:stretch}.cta-button{text-align:center}}

.live-info-box{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:20px;
    background:#fff;
    padding:18px;
    border-radius:18px;
    border:1px solid #eee;
}
.live-info-box strong{
    font-size:17px;
}
.live-info-box span{
    color:#666;
    line-height:1.45;
}
.chat-form-area{
    border-top:1px solid #eee;
    padding:12px;
    background:#fff;
}
.chat-form{
    display:flex;
    gap:8px;
}
.chat-form input{
    flex:1;
    border:1px solid #ddd;
    border-radius:999px;
    padding:12px 14px;
    font-size:14px;
    outline:none;
}
.chat-form input:focus{
    border-color:#aaa;
}
.chat-form button{
    border:0;
    background:#111;
    color:#fff;
    padding:0 16px;
    border-radius:999px;
    cursor:pointer;
    font-weight:bold;
}
.chat-form-area small{
    display:block;
    margin-top:8px;
    color:#777;
    font-size:12px;
}
.system-message{
    text-align:center;
    color:#777;
    font-size:13px;
    margin:10px 0;
}
@media(max-width:900px){
    .live-info-box{margin-bottom:10px}
    .chat-form{align-items:center}
}








.main-title{
    margin-top:12px;
    font-size:34px;
    line-height:1.2;
    margin-bottom:20px;
}










.description-box{
    background:#f2f2f2;
    border-radius:18px;
    padding:18px;
    line-height:1.55;
}

.description-box strong{
    display:block;
    margin-bottom:8px;
    font-size:16px;
}

.description-box p{
    color:#555;
}



.message-avatar:before{
    content:"";
    width:12px;
    height:12px;
    border-radius:50%;
    background:#9ca3af;
    position:absolute;
    top:7px;
}

.message-avatar:after{
    content:"";
    width:18px;
    height:9px;
    border-radius:12px 12px 5px 5px;
    background:#9ca3af;
    position:absolute;
    bottom:7px;
}

.site-footer{
    max-width:1500px;
    margin:8px auto 0;
    padding:18px 24px 28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    color:#888;
    font-size:13px;
}

.site-footer a{
    color:#777;
    text-decoration:none;
    background:#eeeeee;
    padding:7px 12px;
    border-radius:999px;
}

.site-footer a:hover{
    background:#e1e1e1;
    color:#111;
}

@media(max-width:900px){
    .site-footer{
        flex-direction:column;
        text-align:center;
        padding-bottom:24px;
    }
}


.description-html{
    color:#555;
    line-height:1.65;
}

.description-html a{
    color:#0f766e;
    font-weight:bold;
    text-decoration:none;
}

.description-html a:hover{
    text-decoration:underline;
}

.description-html ul,
.description-html ol{
    margin:10px 0 10px 22px;
}

.description-html p{
    margin-bottom:8px;
}

.description-html strong,
.description-html b{
    color:#222;
}

/* Melhorias finais do chat humano */
.typing-indicator{
    display:flex;
    align-items:center;
    gap:5px;
    color:#777;
    font-size:13px;
    margin:4px 0 12px 44px;
    background:#f8f8f8;
    border:1px solid #eeeeee;
    border-radius:999px;
    width:max-content;
    max-width:86%;
    padding:7px 10px;
    animation:fadeIn .25s ease;
}
.typing-indicator span{margin-right:2px}
.typing-indicator i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#999;
    display:block;
    animation:typingDot 1s infinite ease-in-out;
}
.typing-indicator i:nth-child(3){animation-delay:.15s}
.typing-indicator i:nth-child(4){animation-delay:.3s}
@keyframes typingDot{
    0%,80%,100%{opacity:.25;transform:translateY(0)}
    40%{opacity:1;transform:translateY(-3px)}
}
.message-content{
    box-shadow:0 4px 10px rgba(0,0,0,.035);
}
.message:nth-child(odd) .message-content{
    background:#fafafa;
}
@media(max-width:900px){
    .chat-messages{padding:12px}
    .message{gap:8px;margin-bottom:12px}
    .message-avatar{width:30px;height:30px}
    .message-content{padding:9px 10px}
    .message-content strong,.message-content p{font-size:13px}
    .typing-indicator{margin-left:38px;font-size:12px}
}


/* Camada de proteção do vídeo
   Bloqueia cliques no iframe do YouTube para evitar abertura de menus, logo, pausa e saída para o YouTube. */
.video-click-shield{
    position:absolute;
    inset:0;
    z-index:3;
    background:transparent;
    cursor:default;
}
.video-wrapper iframe{
    z-index:1;
}

/* Contagem regressiva sobre a miniatura antes da live iniciar */
.video-countdown-badge{
    position:absolute;
    left:20px;
    bottom:22px;
    z-index:8;
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:46px;
    padding:0 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.20);
    background:rgba(0,0,0,.78);
    color:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    backdrop-filter:blur(12px);
    pointer-events:none;
}
.video-countdown-badge strong{
    font-size:12px;
    font-weight:800;
    opacity:.86;
    white-space:nowrap;
}
.video-countdown-badge span{
    font-size:14px;
    font-weight:900;
    letter-spacing:.2px;
    white-space:nowrap;
}
@media(max-width:640px){
    .video-countdown-badge{
        left:14px;
        bottom:14px;
        min-height:42px;
        padding:0 13px;
    }
    .video-countdown-badge strong{display:none;}
}

/* Botão próprio para liberar áudio sem permitir clique nos menus do YouTube */
.video-audio-overlay{
    position:absolute;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    z-index:6;
    border:0;
    background:rgba(255,255,255,.96);
    color:#111;
    border-radius:999px;
    padding:12px 20px;
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(0,0,0,.26);
    transition:.25s ease;
    font-family:Arial,sans-serif;
}
.video-audio-overlay span{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#16a34a;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:20px;
}
.video-audio-overlay strong{
    display:block;
    font-size:15px;
    line-height:1.1;
    white-space:nowrap;
}
.video-audio-overlay small{
    display:block;
    color:#666;
    font-size:12px;
    margin-top:2px;
    white-space:nowrap;
}
.video-audio-overlay:hover{
    transform:translateX(-50%) translateY(-2px);
    box-shadow:0 16px 34px rgba(0,0,0,.3);
}
.video-audio-overlay.is-hidden{
    opacity:0;
    transform:translateX(-50%) translateY(8px);
    pointer-events:none;
}
@media(max-width:900px){
    .video-audio-overlay{
        bottom:14px;
        padding:10px 14px;
    }
    .video-audio-overlay span{
        width:32px;
        height:32px;
        font-size:17px;
    }
    .video-audio-overlay strong{
        font-size:13px;
    }
    .video-audio-overlay small{
        display:none;
    }
}


/* Miniatura da live antes do vídeo iniciar */
.video-thumbnail-cover{
    position:absolute;
    inset:0;
    z-index:5;
    background:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.video-thumbnail-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.video-thumbnail-cover:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.22));
    pointer-events:none;
}
.video-thumbnail-cover + .video-audio-overlay{
    z-index:7;
}

/* Atualização: blocos dinâmicos da index */
.right-column{width:390px;display:flex;flex-direction:column;gap:18px;flex-shrink:0}
.right-column .chat-section{width:100%;height:640px;max-height:calc(100vh - 110px)}
.content-card-premium{background:linear-gradient(135deg,#f7fff9,#f3fffb);border:1px solid #e1f4ea;box-shadow:0 12px 28px rgba(15,118,110,.06)}
.content-card-premium>strong{font-size:20px;margin-bottom:14px;color:#111827}
.action-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.action-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;display:flex;align-items:center;gap:14px;text-decoration:none;color:#111;box-shadow:0 8px 18px rgba(0,0,0,.05);transition:.25s ease}
.action-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.08)}
.action-card span{font-size:24px}
.action-card strong{display:block;font-size:14px;margin-bottom:4px}
.action-card small{display:block;color:#475569;font-size:14px}
.side-info-card{background:#fff;border:1px solid #e8e8e8;border-radius:18px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.side-info-card h3{font-size:18px;margin-bottom:14px;color:#111827}
.side-line{padding:8px 0;color:#333;font-size:14px;line-height:1.45}
.agenda-line{border-left:3px solid #16a34a;padding:8px 0 8px 12px;margin-bottom:8px}
.agenda-line strong{display:block;font-size:14px;color:#111827}
.agenda-line small{display:block;margin-top:3px;color:#6b7280;font-size:13px}
.agenda-link{display:inline-block;margin-top:12px;color:#067a2f;text-decoration:none;font-weight:bold;font-size:14px}
.footer-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.footer-links a{background:transparent;padding:0;border-radius:0;color:#777}
.footer-links a:last-child{background:#eeeeee;padding:7px 12px;border-radius:999px}
@media(max-width:900px){.right-column{width:100%}.right-column .chat-section{height:520px;max-height:none}.action-cards{grid-template-columns:1fr}.footer-links{justify-content:center}}