/* O VIDEO NO CANTO (25/10), da pagina de ajuste do cliente e da tela "Who speaks" do painel. Do dono: "a janela do
   video fica fixa ocupando espaco precioso na janela de ajustes, seria bom um quadrado menor no canto com tamanho
   ajustavel e com botao de reduzir ou expandir para voltar ao tamanho definido pelo cliente."
   O video saiu do topo preso e virou um quadro solto (16:9) no canto de baixo do fim da linha -- a direita, e a
   esquerda numa pagina da direita para a esquerda (`inset-inline-end`) --, logo acima da barra fixa de baixo e nunca
   por cima dela (`--vc-barra`, a altura da barra, medida por video-canto.js). Fora do fluxo: as pessoas e as linhas
   usam a altura toda. A largura e a que o cliente deixou (`--vc-w`, video-canto.js); sem ela, 360 px no computador e
   55% da tela no celular. Reduzido, vira uma aba "Video" no mesmo canto, e o video continua tocando, so escondido.
   Carregado depois do quem-fala.css, que ele completa.
   O MESMO QUADRO NA LOJA (30/10): o video "How it works", em 9:16 (`data-proporcao="9/16"`), fechado ate a loja o abrir
   (`hidden`), com tres botoes que a pagina de ajuste nao tem -- fechar, tela cheia e o grande "ligar o som" (`data-fechar`,
   `data-tela-cheia`, `data-som`, video-canto.js). As cores da aba vem com reserva: a loja tem os nomes dela (style.css). */
.vcanto{position:fixed;z-index:6;bottom:calc(var(--vc-barra, 60px) + 12px);inset-inline-end:16px;
  width:var(--vc-w, 360px);aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.35)}
@media (max-width:600px){.vcanto{width:var(--vc-w, 55vw);inset-inline-end:12px}}
.vcanto[data-proporcao="9/16"]{aspect-ratio:9/16}
.vcanto video{width:100%;height:100%;max-height:none;border-radius:0;object-fit:contain}
/* O fim da pagina ganha a altura que o quadro ocupa embaixo (`--vcanto-ocupa`, video-canto.js): a ultima linha sobe
   acima dele, em vez de ficar escondida atras. So com o quadro na tela (`html.vcanto-aberto`): o da loja comeca fechado,
   e fechado nao empurra nada. O minimo e o pe que a pagina ja tinha (`--vcanto-pe-min`: 140 px na de ajuste). */
html.vcanto-aberto main{padding-bottom:max(var(--vcanto-pe-min, 140px), calc(var(--vcanto-ocupa, 0px) + 24px))}

/* A alca no canto de dentro (em cima, do lado do comeco da linha) e o "Reduzir" no outro canto de cima, por cima da
   imagem: escuros e transparentes, do tamanho do dedo no celular. */
.vcanto-alca,.vcanto-reduz{position:absolute;top:0;z-index:1;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:rgba(0,0,0,.55);color:#fff}
.vcanto-alca{inset-inline-start:0;border-end-end-radius:10px;cursor:nwse-resize;touch-action:none;
  -webkit-user-select:none;user-select:none}
[dir=rtl] .vcanto-alca{cursor:nesw-resize}
[dir=rtl] .vcanto-alca svg{transform:scaleX(-1)}
.vcanto-reduz{inset-inline-end:0;border-end-start-radius:10px;cursor:pointer}
.vcanto-alca:hover,.vcanto-reduz:hover,.vcanto.mudando .vcanto-alca{background:rgba(0,0,0,.8)}
.vcanto-alca:focus-visible,.vcanto-reduz:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.vcanto-alca svg,.vcanto-reduz svg{display:block}
@media (pointer:coarse){.vcanto-alca,.vcanto-reduz{width:40px;height:40px}}
/* Mudando o tamanho: nada de selecionar o texto da pagina no caminho do mouse. */
body.vcanto-mudando{-webkit-user-select:none;user-select:none}

/* FLUTUANDO (30/10, noite): o video na janela flutuante do navegador (picture-in-picture). O quadro sai da vista sem
   sair da pagina (`visibility`, e nao `display:none`: o <video> continua desenhado para a janela), e nao recebe o toque
   nem empurra o pe da pagina (video-canto.js). */
.vcanto.flutuando{visibility:hidden;pointer-events:none}

/* REDUZIDO: uma aba "▶ Video" no mesmo canto; o video fica na pagina (o som continua), sem ocupar lugar nem receber
   o toque. */
.vcanto.reduzido{width:auto;aspect-ratio:auto;background:none;box-shadow:none;overflow:visible;border-radius:999px}
.vcanto.reduzido video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.vcanto-abre{display:inline-flex;align-items:center;gap:6px;width:auto;min-height:40px;margin:0;padding:6px 12px;
  border-radius:999px;background:var(--card, #fff);border:1px solid var(--linha, #e2e0d8);color:var(--tinta, #1d1d1b);
  font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.vcanto-abre:focus-visible{outline:2px solid var(--foco, #2f6f4f);outline-offset:2px}
.vcanto-abre svg{display:block;flex:none}
/* O ▶ da aba na cor da marca enquanto o video toca. */
.vcanto-play{color:var(--fraco, #6b6a64);font-size:12px;line-height:1}
.vcanto.tocando .vcanto-play{color:var(--acento, #2f6f4f)}

/* A lista de vozes aberta no celular (16/10, a revisao: "entre ele e a barra de baixo sobravam 410 px"): o quadro
   encolhe para 12% da altura da tela enquanto ela esta aberta, e volta ao tamanho do cliente quando ela fecha. */
@media (max-width:620px){body.vozes-abertas .vcanto:not(.reduzido){width:min(var(--vc-w, 55vw), calc(12vh * 16 / 9))}}

/* OS BOTOES DA LOJA (30/10, `data-fechar`), em duas linhas: em cima a alca e o fechar, nos dois cantos; embaixo deles o
   reduzir (do lado da alca) e a tela cheia (do lado do fechar). O quadro em pe e estreito -- quatro botoes numa linha
   nao cabem nos 110 px do celular --, e assim o meio fica livre para o "ligar o som". Um pouco menores que os da pagina
   de ajuste no celular (36 px), pelo mesmo motivo. */
.vcanto[data-fechar]{--vc-b:32px}
@media (pointer:coarse){.vcanto[data-fechar]{--vc-b:36px}}
.vcanto-fecha,.vcanto-cheia{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;
  inset-inline-end:0;width:32px;height:32px;min-height:0;padding:0;margin:0;border:0;border-radius:0;
  background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
.vcanto[data-fechar] :is(.vcanto-alca,.vcanto-reduz,.vcanto-fecha,.vcanto-cheia){width:var(--vc-b);height:var(--vc-b)}
.vcanto[data-fechar] .vcanto-alca{border-end-end-radius:0}
.vcanto[data-fechar] .vcanto-fecha{top:0}
.vcanto[data-fechar] .vcanto-reduz{top:var(--vc-b);inset-inline-start:0;inset-inline-end:auto;border-end-start-radius:0;
  border-end-end-radius:10px}
.vcanto[data-fechar] .vcanto-cheia{top:var(--vc-b);border-end-start-radius:10px}
.vcanto-fecha:hover,.vcanto-cheia:hover{background:rgba(0,0,0,.8)}
.vcanto-fecha:focus-visible,.vcanto-cheia:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.vcanto-fecha svg,.vcanto-cheia svg{display:block}
/* O "LIGAR O SOM", grande e no meio da imagem, enquanto o video toca mudo: o navegador so deixa um video comecar
   sozinho sem som, e quem chega precisa ver que o som existe. No meio: abaixo dos botoes de cima e acima da legenda. */
.vcanto-som{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;
  align-items:center;justify-content:center;gap:6px;width:max-content;max-width:calc(100% - 12px);min-height:40px;
  margin:0;padding:8px 14px;border:2px solid #fff;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;
  font:inherit;font-size:14px;font-weight:700;line-height:1.2;text-align:center;white-space:normal;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35)}
.vcanto-som:hover{background:rgba(0,0,0,.85)}
.vcanto-som:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vcanto-som svg{display:block;flex:none}
/* No celular o quadro tem uns 110 px de largura: o botao mais compacto, e a legenda do video um pouco maior que a do
   navegador (5% da altura do video, uns 9 px aqui) -- so no canto: na tela cheia, a do navegador, do tamanho da tela. */
@media (max-width:600px){
  .vcanto-som{gap:4px;min-height:32px;padding:5px 8px;border-width:1.5px;font-size:12px}
  .vcanto-som svg{width:16px;height:16px}
  .vcanto video:not(:fullscreen)::cue{font-size:11px;line-height:1.25}
}
.vcanto.reduzido .vcanto-som,.vcanto.reduzido .vcanto-fecha,.vcanto.reduzido .vcanto-cheia{display:none}