/* O palco: video full-bleed, vinheta, pilula superior e o chat no centro. */

/* ---------- moldura: barra de titulo + palco full-bleed ---------- */
.app{display:grid;grid-template-rows:40px minmax(0,1fr);height:100vh}
.stage{position:relative;min-height:0;background:var(--chao);overflow:hidden}
#remote{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;
        border-radius:0;aspect-ratio:auto;display:block}
/* clicar no meio devolve para a grade, como no Discord */
.stage.podeGrade #remote{cursor:zoom-out}
/* A vinheta e o que garante legibilidade dos paineis sobre qualquer video. */
.vinheta{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,hsl(var(--vinhetaRaw)/.86) 0 26%,hsl(var(--vinhetaRaw)/0) 42% 60%,hsl(var(--vinhetaRaw)/.86) 78% 100%),
             linear-gradient(180deg,hsl(var(--vinhetaRaw)/.7) 0,hsl(var(--vinhetaRaw)/0) 18% 72%,hsl(var(--vinhetaRaw)/.75) 100%)}

/* paineis de vidro */

/* pilula superior */
.pilula{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;
        display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;border-radius:var(--r);
        background:hsl(var(--vidroBRaw)/calc(var(--opq) + .06));backdrop-filter:blur(calc(var(--vidro) * .7));-webkit-backdrop-filter:blur(calc(var(--vidro) * .7));
        box-shadow:var(--anel);max-width:min(70vw,760px)}
.pstats{font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums;white-space:nowrap;
        overflow:hidden;text-overflow:ellipsis}
.pdiv{width:1px;height:14px;background:hsl(var(--veuRaw)/.14);flex:none}
.msgFlut{position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:6;
         max-width:min(560px,86%);margin-top:0}

/* dock inferior */
/* Centralizada no espaco LIVRE entre os paineis, nao na tela inteira: com
   left:50% ela ficava puxada para o lado que tem o painel mais largo, e o
   pause caia debaixo da lateral. Os ponteiros passam pelo vao. */

/* chat no centro quando o palco esta vazio */
.centroChat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
            width:min(560px,calc(100% - 620px));height:min(560px,calc(100% - 120px));
            display:flex;flex-direction:column;padding:14px;border-radius:var(--rlg);
            background:hsl(var(--vidroPRaw)/var(--opq));backdrop-filter:blur(var(--vidro)) saturate(1.15);
            -webkit-backdrop-filter:blur(var(--vidro)) saturate(1.15);
            box-shadow:var(--vidroSombra)}
.centroSlot{flex:1;min-height:0;display:flex;flex-direction:column}
.centroSlot .corpoDir{flex:1;min-height:0}

/* no preview da PROPRIA tela a vinheta quase some: ali ela so atrapalha */
.stage.propria .vinheta{opacity:.22}
.vinheta{transition:opacity .2s}
/* pilula e dock somem com o mouse parado; os paineis laterais ficam */
.pilula,.dock{transition:opacity .16s ease-out,transform .16s ease-out}
.stage.quieto .pilula{opacity:0;transform:translate(-50%,-6px);pointer-events:none}
.stage.quieto .dock{opacity:0;transform:translateY(6px);pointer-events:none}