/* IAs ao vivo (F58 e F60): o visor da live da IA. Modo podcast (página /ia-ao-vivo, aba Ao vivo do painel dev): estúdio escuro, a janela
   do Blender no palco, o terço inferior com quem constrói, os capítulos, a pauta e o letreiro. Modo compacto (Concordison): só o palco,
   o topo e a etapa. Cores e letras da casa (roxo, ouro, Bangers nos títulos, Barlow no texto); sem fonte de fora, cai nas do sistema. */
.iav { --f: #07050f; --f2: #120b24; --carta: rgba(28, 18, 52, .78); --linha: rgba(255, 255, 255, .09); --ouro: #ffc43d; --ouro2: #ffe28a; --verm: #ff3b5c; --txt: #f3ecff; --fraco: #a99bc6; --ok: #42d17f; --ciano: #36d6e7;
  --disp: "Bangers", "Impact", "Arial Black", sans-serif; --corpo: "Barlow", "Segoe UI", system-ui, sans-serif; --rot: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0; width: 100%; box-sizing: border-box; overflow: hidden; color: var(--txt); font: 15px/1.45 var(--corpo);
  background: radial-gradient(80% 60% at 70% -10%, rgba(120, 60, 230, .28), transparent 60%), radial-gradient(60% 50% at 0% 110%, rgba(230, 140, 30, .14), transparent 60%), var(--f); }
.iav *, .iav *::before, .iav *::after { box-sizing: border-box; }
.iav [hidden] { display: none !important; }
.iav button { font: inherit; color: inherit; cursor: pointer; }

/* ---- topo: marca do programa, episódio, AO VIVO e os números ---- */
.iav-topo { display: flex; align-items: center; gap: 12px; min-width: 0; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); border-bottom: 1px solid var(--linha); background: linear-gradient(180deg, rgba(18, 11, 36, .92), rgba(7, 5, 15, .6)); }
.iav-marca { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.iav-logo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font: 400 21px/1 var(--disp); letter-spacing: .04em; color: #2a1600; background: linear-gradient(145deg, var(--ouro2), var(--ouro) 55%, #e08a00); box-shadow: 0 0 0 1px rgba(255, 226, 138, .5), 0 6px 20px rgba(255, 170, 40, .35); }
.iav-marca-tx { display: grid; min-width: 0; overflow: hidden; }
.iav-marca-tx b { font: 400 22px/1 var(--disp); letter-spacing: .05em; text-transform: uppercase; color: var(--ouro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iav-lema { font: 600 12px/1.25 var(--rot); letter-spacing: .06em; color: var(--fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: iav-entra .6s both; }
.iav-ep { flex: none; font: 400 17px/1 var(--disp); letter-spacing: .06em; color: var(--txt); padding: 6px 10px 5px; border-radius: 9px; background: rgba(255, 255, 255, .06); border: 1px solid var(--linha); }
.iav-vivo { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; font: 700 12.5px/1 var(--rot); letter-spacing: .14em; color: var(--fraco); background: rgba(255, 255, 255, .05); border: 1px solid var(--linha); }
.iav-vivo i { width: 9px; height: 9px; border-radius: 50%; background: #5b5277; }
.iav-vivo.on { color: #fff; background: linear-gradient(135deg, #ff5470, #c8102e); border-color: #ffb3c0; box-shadow: 0 0 22px rgba(255, 59, 92, .45); }
.iav-vivo.on i { background: #fff; animation: iav-pulso 1.4s ease-out infinite; }
.iav-numeros { display: flex; gap: 6px; min-width: 0; margin-left: auto; overflow: hidden; }
.iav-n { flex: none; font: 600 13px/1 var(--rot); letter-spacing: .04em; color: var(--fraco); padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, .04); white-space: nowrap; }
.iav-n:empty { display: none; }
.iav-q { color: var(--ouro2); border: 1px solid rgba(255, 196, 61, .35); }
.iav-abas { display: flex; gap: 6px; flex-wrap: wrap; }
.iav-aba { padding: 6px 10px; min-height: 36px; border-radius: 10px; border: 1px solid var(--linha); background: rgba(255, 255, 255, .05); font: 700 13px/1 var(--rot); letter-spacing: .05em; }
.iav-aba.ativa { border-color: var(--ouro); color: var(--ouro); }
.iav-cheia { flex: none; min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--linha); background: rgba(255, 255, 255, .05); font-size: 19px; }
.iav-cheia:hover { border-color: var(--ouro); }

/* ---- corpo: o palco (vídeo) e a pauta ao lado ---- */
.iav-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 360px); gap: 14px; min-height: 0; padding: 14px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)); }
.iav-palco { position: relative; min-height: 0; min-width: 0; display: grid; place-items: center; border-radius: 20px; overflow: hidden; background: radial-gradient(70% 70% at 50% 40%, #151030, #05040b); border: 1px solid rgba(255, 196, 61, .28); box-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .03); }
.iav.no-ar .iav-palco { border-color: rgba(255, 59, 92, .45); box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 59, 92, .15), 0 0 40px rgba(255, 59, 92, .12); }
.iav-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #04030a; }
.iav-fonte { position: absolute; z-index: 2; left: 14px; top: 14px; font: 700 12px/1 var(--rot); letter-spacing: .1em; text-transform: uppercase; color: var(--txt); padding: 7px 10px; border-radius: 9px; background: rgba(7, 5, 15, .72); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); }
/* terço inferior: quem constrói e o capítulo */
.iav-terco { position: absolute; z-index: 2; left: 16px; bottom: 22px; display: flex; align-items: center; gap: 12px; max-width: min(78%, 640px); padding: 10px 16px 10px 10px; border-radius: 16px;
  background: linear-gradient(100deg, rgba(10, 6, 22, .92) 0%, rgba(30, 16, 58, .86) 70%, rgba(30, 16, 58, .55)); border: 1px solid rgba(255, 196, 61, .35); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: iav-terco .7s cubic-bezier(.2, 1, .3, 1) both; }
.iav-terco::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(var(--ouro2), var(--ouro)); box-shadow: 0 0 12px var(--ouro); }
.iav-avatar { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font: 400 18px/1 var(--disp); letter-spacing: .04em; color: #2a1600; background: conic-gradient(from 210deg, var(--ouro2), var(--ouro), #ff8a3d, #b04dff, var(--ouro2)); box-shadow: 0 0 0 3px rgba(7, 5, 15, .9), 0 0 18px rgba(255, 196, 61, .5); }
.iav-terco-tx { display: grid; min-width: 0; }
.iav-terco-tx b { font: 400 24px/1 var(--disp); letter-spacing: .04em; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iav-terco-tx small { font: 600 12.5px/1.3 var(--rot); letter-spacing: .06em; color: var(--fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iav-cap { font: 700 14px/1.25 var(--rot); letter-spacing: .03em; color: var(--ouro2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iav-segs { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 8px; display: flex; gap: 4px; }
.iav-segs i { flex: 1; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.iav-segs i.feito { background: var(--ouro); }
.iav-segs i.agora { background: linear-gradient(90deg, var(--ouro), #fff3c4, var(--ouro)); background-size: 200% 100%; animation: iav-brilho 1.6s linear infinite; box-shadow: 0 0 10px var(--ouro); }
.iav-aviso { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 86%; padding: 10px 16px; border-radius: 12px; background: rgba(7, 5, 15, .82); border: 1px solid var(--linha); font: 700 14px/1.3 var(--rot); letter-spacing: .05em; text-align: center; }
.iav-vazio { position: relative; z-index: 1; display: grid; gap: 10px; place-items: center; text-align: center; padding: 28px; max-width: 560px; color: var(--fraco); }
.iav-vazio b { font: 400 clamp(26px, 3.4vw, 40px)/1 var(--disp); letter-spacing: .04em; text-transform: uppercase; color: var(--txt); }
.iav-mic { font-size: 54px; filter: drop-shadow(0 8px 24px rgba(255, 196, 61, .4)); animation: iav-flutua 4s ease-in-out infinite; }
.iav-ult { font: 700 13px/1.3 var(--rot); letter-spacing: .06em; color: var(--ouro2); }

/* ---- pauta (podcast): no ar agora, tema, capítulos, diário de bordo e próximo passo ---- */
.iav-pauta { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: thin; scrollbar-color: #4a3580 transparent; padding-right: 2px; }
.iav-pauta > * { flex: none; }
.iav-bloco { display: grid; gap: 7px; padding: 12px 14px; border-radius: 16px; background: var(--carta); border: 1px solid var(--linha); backdrop-filter: blur(8px); }
.iav-bloco h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 11.5px/1 var(--rot); letter-spacing: .18em; text-transform: uppercase; color: var(--fraco); }
.iav-bloco.agora { border-color: rgba(255, 196, 61, .4); background: linear-gradient(160deg, rgba(58, 34, 6, .55), rgba(28, 18, 52, .85) 55%); }
.iav-bloco.agora h3 { color: var(--ouro); }
.iav-agora { margin: 0; font: 400 clamp(22px, 2.2vw, 30px)/1.05 var(--disp); letter-spacing: .03em; color: var(--txt); min-height: 1.05em; }
.iav-agora-sub { margin: 0; font: 600 13px/1.35 var(--rot); letter-spacing: .03em; color: var(--fraco); }
.iav-onda { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.iav-onda i { width: 3px; height: 100%; border-radius: 2px; background: var(--ouro); transform-origin: 50% 50%; transform: scaleY(.3); }
.iav.no-ar .iav-onda i { animation: iav-onda 1.1s ease-in-out infinite; }
.iav-onda i:nth-child(2) { animation-delay: -.2s !important; } .iav-onda i:nth-child(3) { animation-delay: -.5s !important; } .iav-onda i:nth-child(4) { animation-delay: -.8s !important; } .iav-onda i:nth-child(5) { animation-delay: -.35s !important; }
.iav-onda i:nth-child(6) { animation-delay: -.65s !important; } .iav-onda i:nth-child(7) { animation-delay: -.1s !important; } .iav-onda i:nth-child(8) { animation-delay: -.9s !important; } .iav-onda i:nth-child(9) { animation-delay: -.45s !important; }
.iav-tema { margin: 0; font: 700 16px/1.3 var(--corpo); color: var(--txt); }
.iav-tema-ex { margin: 0; font-size: 14px; color: var(--fraco); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.iav-plano { margin: 0; font: 700 12.5px/1.3 var(--rot); letter-spacing: .05em; color: var(--ouro2); }
.iav-plano:empty { display: none; }
.iav-tema-ex:empty, .iav-traz:empty, .iav-agora-sub:empty { display: none; }
.iav-traz { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; color: #c9f5da; background: rgba(66, 209, 127, .1); border: 1px solid rgba(66, 209, 127, .3); }
.iav-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: cap; }
.iav-caps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; font: 600 14px/1.25 var(--rot); letter-spacing: .02em; color: var(--fraco); }
.iav-cap-n { font: 400 16px/1 var(--disp); letter-spacing: .04em; color: rgba(255, 255, 255, .35); text-align: center; }
.iav-caps li.feito { color: var(--txt); } .iav-caps li.feito .iav-cap-n { color: var(--ok); }
.iav-caps li.agora { color: #fff; background: linear-gradient(90deg, rgba(255, 196, 61, .2), rgba(255, 196, 61, .04)); box-shadow: inset 2px 0 0 var(--ouro); }
.iav-caps li.agora .iav-cap-n { color: var(--ouro); }
.iav-diario { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.iav-diario li { display: grid; gap: 3px; }
.iav-diario blockquote { margin: 0; padding: 2px 0 2px 12px; border-left: 2px solid rgba(255, 196, 61, .55); font: italic 500 14px/1.4 var(--corpo); color: var(--txt); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.iav-diario small { padding-left: 14px; font: 600 11.5px/1 var(--rot); letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); }
.iav-prox { margin: 0; padding: 9px 11px; border-radius: 11px; font: 600 14px/1.35 var(--corpo); color: var(--txt); background: rgba(255, 196, 61, .08); border: 1px solid rgba(255, 196, 61, .3); }

/* ---- letreiro: as manchetes do estúdio passando ---- */
.iav-letreiro { position: relative; overflow: hidden; height: 38px; display: flex; align-items: center; border-top: 1px solid var(--linha); background: linear-gradient(90deg, #2a0a1e, #150818 30%, #150818 70%, #2a0a1e); padding-bottom: env(safe-area-inset-bottom); }
.iav-letreiro::before { content: "AO VIVO DO ESTÚDIO"; position: relative; z-index: 1; flex: none; height: 100%; display: grid; place-items: center; padding: 0 14px 0 max(14px, env(safe-area-inset-left)); font: 400 16px/1 var(--disp); letter-spacing: .06em; color: #2a1600; background: linear-gradient(135deg, var(--ouro2), var(--ouro)); box-shadow: 8px 0 18px rgba(0, 0, 0, .5); }
.iav-rolo { display: flex; white-space: nowrap; animation: iav-rolo 40s linear infinite; will-change: transform; }
.iav-rolo span { flex: none; padding: 0 22px; font: 700 14px/38px var(--rot); letter-spacing: .06em; text-transform: uppercase; color: var(--txt); }
.iav-rolo span::after { content: "◆"; margin-left: 22px; color: var(--ouro); }

/* ---- tela cheia: só o palco, sem bordas ---- */
.iav.cheia { position: fixed; inset: 0; z-index: 60; }
.iav:fullscreen, .iav.cheia { grid-template-rows: auto minmax(0, 1fr); }
.iav:fullscreen .iav-letreiro, .iav.cheia .iav-letreiro, .iav:fullscreen .iav-pauta, .iav.cheia .iav-pauta { display: none; }
.iav:fullscreen .iav-corpo, .iav.cheia .iav-corpo { grid-template-columns: minmax(0, 1fr); padding: 0; }
.iav:fullscreen .iav-palco, .iav.cheia .iav-palco { border-radius: 0; border: 0; }

/* ---- modo compacto (dentro do Concordison) ---- */
.iav[data-modo="compacto"] { border-radius: 16px; border: 1px solid var(--linha); }
.iav[data-modo="compacto"] .iav-pauta, .iav[data-modo="compacto"] .iav-letreiro, .iav[data-modo="compacto"] .iav-lema, .iav[data-modo="compacto"] .iav-ep { display: none; }
.iav[data-modo="compacto"] .iav-corpo { grid-template-columns: minmax(0, 1fr); padding: 8px; }
.iav[data-modo="compacto"] .iav-topo { padding: 8px 10px; gap: 8px; }
.iav[data-modo="compacto"] .iav-logo { width: 32px; height: 32px; font-size: 17px; }
.iav[data-modo="compacto"] .iav-marca-tx b { font-size: 18px; }
.iav[data-modo="compacto"] .iav-terco { left: 10px; bottom: 16px; padding: 7px 12px 7px 7px; gap: 9px; }
.iav[data-modo="compacto"] .iav-avatar { width: 36px; height: 36px; font-size: 14px; }
.iav[data-modo="compacto"] .iav-terco-tx b { font-size: 18px; }

/* ---- dentro do Concordison: o visor ocupa a largura do centro, o palco em 16:9; o cartão da IA em Ao vivo agora ---- */
#c-corpo.ia-visor { padding: 12px; display: flex; flex-direction: column; }
.iav[data-modo="compacto"] { height: auto; flex: none; grid-template-rows: auto auto; }
.iav[data-modo="compacto"] .iav-palco { aspect-ratio: 16 / 9; }
.avatar.ia-av { display: inline-grid; place-items: center; font-size: 20px; background: conic-gradient(from 210deg, #ffe28a, #ffc43d, #ff8a3d, #b04dff, #ffe28a); box-shadow: 0 0 12px rgba(255, 196, 61, .45); }
.cartao-linha.ia-viva { border-color: rgba(255, 196, 61, .45); background: linear-gradient(100deg, rgba(58, 34, 6, .35), rgba(255, 255, 255, .04) 60%); }

/* ---- telas estreitas e baixas ---- */
@media (max-width: 900px) {
  .iav[data-modo="podcast"] { overflow-y: auto; overscroll-behavior-y: auto; grid-template-rows: auto auto auto; }
  .iav[data-modo="podcast"] .iav-topo { position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
  .iav[data-modo="podcast"] .iav-corpo { grid-template-columns: minmax(0, 1fr); }
  .iav[data-modo="podcast"] .iav-palco { aspect-ratio: 16 / 9; }
  .iav[data-modo="podcast"] .iav-pauta { overflow: visible; }
  .iav-numeros { order: 5; flex: 1 1 auto; width: auto; margin-left: 0; } .iav-cheia { order: 6; } .iav-abas { order: 7; width: 100%; }
  .iav-terco { left: 10px; bottom: 16px; padding: 7px 12px 7px 7px; gap: 9px; max-width: calc(100% - 20px); }
  .iav-avatar { width: 38px; height: 38px; font-size: 15px; } .iav-terco-tx b { font-size: 19px; } .iav-cap { font-size: 13px; }
  .iav-fonte { left: 10px; top: 10px; font-size: 10.5px; padding: 5px 8px; }
}
@media (max-width: 520px) { .iav-lema { display: none; } .iav-marca-tx b { font-size: 18px; } .iav-terco-tx small { display: none; }
  .iav-terco { padding: 5px 10px 5px 5px; gap: 7px; bottom: 14px; } .iav-avatar { width: 30px; height: 30px; font-size: 12px; } .iav-terco-tx b { font-size: 16px; } .iav-cap { font-size: 12px; }
  .iav-ep { font-size: 15px; padding: 5px 8px 4px; } .iav-vivo { padding: 5px 9px; font-size: 11.5px; } .iav-n { font-size: 12px; padding: 5px 7px; } }
@media (max-height: 520px) and (min-width: 600px) {
  .iav[data-modo="podcast"] { overflow: hidden; grid-template-rows: auto minmax(0, 1fr) auto; }
  .iav[data-modo="podcast"] .iav-topo { position: static; flex-wrap: nowrap; }
  .iav[data-modo="podcast"] .iav-corpo { grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 10px; padding: 8px; }
  .iav[data-modo="podcast"] .iav-palco { aspect-ratio: auto; }
  .iav[data-modo="podcast"] .iav-pauta { overflow-y: auto; }
  .iav-topo { padding-block: max(5px, env(safe-area-inset-top)) 5px; } .iav-marca-tx { display: none; } .iav-logo { width: 32px; height: 32px; font-size: 17px; } .iav-marca-tx b { font-size: 18px; } .iav-lema { display: none; }
  .iav-numeros { order: 0; width: auto; margin-left: auto; } .iav-cheia { min-width: 38px; min-height: 38px; }
  .iav-letreiro { height: 30px; } .iav-rolo span { line-height: 30px; font-size: 12.5px; } .iav-letreiro::before { font-size: 13px; }
  .iav-terco-tx small { display: none; }
}

/* ---- estúdio do PC (?transmitir=1): só a linha de estado e a prévia ---- */
.iav-estudio-caixa { display: none; }
body.iav-estudio #iav-raiz { display: none; }
body.iav-estudio .iav-estudio-caixa { display: grid; gap: 10px; padding: 14px; color: #f3ecff; font: 600 14px/1.4 "Segoe UI", system-ui, sans-serif; }
body.iav-estudio #iavPrevia { width: min(100%, 640px); aspect-ratio: 16 / 9; background: #000; border-radius: 10px; }

/* ---- a página sozinha ocupa a janela ---- */
body.iav-pagina { margin: 0; height: 100vh; height: 100dvh; background: #07050f; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body.iav-pagina #iav-raiz { height: 100%; }

@keyframes iav-pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .85); } 80%, 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
@keyframes iav-onda { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes iav-brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes iav-rolo { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes iav-terco { from { opacity: 0; transform: translateX(-30px); } }
@keyframes iav-entra { from { opacity: 0; transform: translateY(4px); } }
@keyframes iav-flutua { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .iav *, .iav *::before { animation: none !important; } .iav-rolo { transform: none; } }