/* Mural: as janelinhas das transmissões que você está assistindo.
   Usado pela web (public/app.html) e pelo app desktop (desktop/index.html) —
   um arquivo só, para os dois não divergirem como já aconteceu antes. */

.mural {
  display: grid;
  gap: 6px;
  padding: 6px;
  background: #05060a;
  min-height: 0;
  overflow: auto;
  grid-auto-rows: 1fr;
}
.mural[data-n="0"] { display: none; }
.mural[data-n="1"] { grid-template-columns: 1fr; }
.mural[data-n="2"],
.mural[data-n="3"],
.mural[data-n="4"] { grid-template-columns: repeat(2, 1fr); }
.mural[data-n="5"],
.mural[data-n="6"],
.mural[data-n="7"],
.mural[data-n="8"] { grid-template-columns: repeat(3, 1fr); }

/* Destacar uma: ela ocupa a faixa de cima e as outras viram miniaturas
   embaixo — continuam tocando, é só o tamanho que muda. */
.mural.com-foco {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  grid-template-rows: 1fr 84px;   /* a destacada em cima, as miniaturas embaixo */
  grid-auto-rows: 84px;
}
.mural.com-foco .mural-item.focado { grid-column: 1 / -1; grid-row: 1; order: -1; }

.mural-item {
  position: relative;
  display: flex;
  min-height: 0;
  background: #000;
  border-radius: var(--raio, 10px);
  overflow: hidden;
  border: 1px solid transparent;
}
.mural-item.focado { border-color: var(--roxo, #7c5cff); }
.mural-item video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #000;
  display: block;
}

.mural-barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: .82rem;
  background: linear-gradient(to top, rgba(5, 6, 10, .92), rgba(5, 6, 10, 0));
}
.mural-barra .espaco { flex: 1; }
.mural-barra .icone-btn { flex: none; }
.mural-titulo {
  color: #e8eaf2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* As duas nascem com as classes da barra do palco (`.palco-status`,
   `.palco-volume`), que cada app estiliza à sua maneira: aqui o seletor é mais
   específico de propósito, senão a largura do slider do desktop vence e o
   controle estoura a janelinha. */
.mural-barra .mural-status { flex: none; }
.mural-barra .mural-volume { flex: 0 1 62px; width: auto; min-width: 0; }

/* Miniatura (modo destaque): só o essencial cabe. */
.mural.com-foco .mural-item:not(.focado) .mural-volume,
.mural.com-foco .mural-item:not(.focado) .mural-status,
.mural.com-foco .mural-item:not(.focado) .ao-vivo { display: none; }
.mural.com-foco .mural-item:not(.focado) .mural-barra { padding: 2px 4px; gap: 2px; font-size: .74rem; }

/* Grade apertada: o selo "ao vivo" some antes do nome de quem transmite. */
.mural[data-n="5"] .ao-vivo,
.mural[data-n="6"] .ao-vivo,
.mural[data-n="7"] .ao-vivo,
.mural[data-n="8"] .ao-vivo { display: none; }

@media (max-width: 720px) {
  .mural[data-n] { grid-template-columns: 1fr; }
  .mural:not(.com-foco) { grid-auto-rows: minmax(150px, 1fr); }
}