/* ========================================================================
   07-transmissao-ao-vivo.css — TRANSMISSÃO AO VIVO (DAILY.CO)
   ------------------------------------------------------------------------
   Selo "AO VIVO" piscando, tela cheia do vídeo e player de gravações.
   HTML relacionado: #videoOverlay e #recModalOverlay no index.html.
   JS relacionado: js/secoes/video-daily.js e js/secoes/conexao.js
   ======================================================================== */

/* ---- Selo vermelho "AO VIVO" com a bolinha piscando. ---- */
.live-badge{display:inline-flex;align-items:center;gap:6px;background:#E43D3D;color:#fff;font-weight:800;font-size:11px;letter-spacing:.03em;padding:4px 10px;border-radius:20px;}
.live-badge .dot{width:7px;height:7px;background:#fff;border-radius:50%;animation:live-pulse 1.4s infinite;}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---- Tela cheia da transmissão (barra superior + vídeo). ---- */
.video-overlay{display:none;position:fixed;inset:0;background:#06201C;z-index:80;flex-direction:column;}
.video-overlay.show{display:flex;}
.video-overlay-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--blue-deep);color:#fff;}
.video-overlay-title{font-weight:800;font-size:14px;}
.video-overlay-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.video-overlay-frame{flex:1;background:#000;}
.video-overlay-frame iframe{width:100%;height:100%;border:0;display:block;}

/* ---- Vídeo da gravação dentro da janela modal. ---- */
.rec-modal video{width:100%;border-radius:14px;background:#000;display:block;}