/* Player de vídeo do Cadence (js/components/player.js).
   Fonte do visual: sketches/player-abc/bc.html (aprovado — B + C).
   Só tokens --cf-*; cores soltas só sobre o vídeo (preto/branco translúcido). */

.cf-player {
  --cf-player-painel: 62px;
  position: relative;
  width: 100%;
  max-width: min(100%, var(--cf-player-max, 360px));
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cf-player:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 3px; border-radius: 12px; }
/* Contorno único por cima de vídeo + painel: a borda não corta na emenda */
.cf-player::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--cf-border); border-radius: 12px; pointer-events: none; z-index: 8; }

.cf-player-tela { position: relative; aspect-ratio: var(--cf-player-ar, 9 / 16); background: #000; border-radius: 12px 12px 0 0; overflow: hidden; }
/* Especificidade alta de propósito: anula width/borda/max-height que cada tela dava ao <video> nativo */
.cf-player > .cf-player-tela > video {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none; min-width: 0;
  margin: 0; border: 0; border-radius: 0; aspect-ratio: auto; object-fit: contain; background: #000;
}
.cf-player button, .cf-player a { all: unset; cursor: pointer; display: inline-grid; place-items: center; border-radius: 8px; box-sizing: border-box; }
.cf-player button:focus-visible, .cf-player a:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 1px; }
.cf-player svg { width: 20px; height: 20px; fill: currentColor; }

/* Toque no vídeo = tocar/pausar; ícone grande só com o vídeo parado */
.cf-player-clique { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.cf-player-grande { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.cf-player-grande span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff; backdrop-filter: blur(6px); transition: opacity .2s, transform .2s; }
.cf-player-grande svg { width: 30px; height: 30px; margin-left: 3px; }
.cf-player.is-tocando .cf-player-grande span { opacity: 0; transform: scale(.9); }
.cf-player.is-carregando .cf-player-grande, .cf-player.is-erro .cf-player-grande { display: none; } /* só o spinner, no mesmo centro */
.cf-player-aviso { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .72); color: #fff; font: 600 12px/1 Roboto, sans-serif; padding: 7px 11px; border-radius: 999px; opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 7; white-space: nowrap; }
.cf-player-aviso.is-on { opacity: 1; }
.cf-player-carregando, .cf-player-erro { position: absolute; inset: 0; display: none; place-items: center; text-align: center; color: #fff; z-index: 6; }
.cf-player.is-carregando .cf-player-carregando { display: grid; }
.cf-player-carregando span { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: cf-player-gira .8s linear infinite; }
@keyframes cf-player-gira { to { transform: rotate(360deg); } }
.cf-player.is-erro .cf-player-erro { display: grid; background: rgba(0, 0, 0, .82); }
.cf-player-erro div { display: grid; gap: 10px; justify-items: center; padding: 20px; font-size: 13px; }
.cf-player .cf-player-erro button { background: #fff; color: #111; padding: 7px 14px; font-weight: 600; font-size: 12.5px; }

/* Painel fixo abaixo do vídeo: nunca cobre legenda nem hook */
.cf-player-painel { position: relative; height: var(--cf-player-painel); box-sizing: border-box; background: var(--cf-bg-elevated, var(--cf-bg-card)); border-radius: 0 0 12px 12px; padding: 2px 8px 8px; color: var(--cf-text); }
.cf-player-trilho { position: relative; height: 18px; display: flex; align-items: center; cursor: pointer; touch-action: none; margin: 0 4px; }
.cf-player-trilho i { position: absolute; left: 0; height: 4px; border-radius: 2px; pointer-events: none; transition: height .12s; }
.cf-player-trilho .t-fundo { right: 0; background: var(--cf-border-strong, var(--cf-border)); }
.cf-player-trilho .t-buffer { background: var(--cf-text-subtle); opacity: .45; width: 0; }
.cf-player-trilho .t-prog { background: var(--cf-accent); width: 0; }
.cf-player-trilho .t-bola { width: 12px; height: 12px; border-radius: 50%; background: var(--cf-accent); margin-left: -6px; transform: scale(0); transition: transform .12s; }
.cf-player-trilho:hover i:not(.t-bola), .cf-player-trilho.is-arrastando i:not(.t-bola) { height: 6px; }
.cf-player-trilho:hover .t-bola, .cf-player-trilho.is-arrastando .t-bola, .cf-player-trilho:focus-visible .t-bola { transform: scale(1); }
.cf-player-trilho:focus-visible { outline: none; }
.cf-player-trilho:focus-visible .t-fundo { box-shadow: 0 0 0 2px var(--cf-accent); }
.cf-player-trilho .t-dica { position: absolute; bottom: 20px; transform: translateX(-50%); background: rgba(0, 0, 0, .85); color: #fff; font: 600 11px/1 Roboto, sans-serif; padding: 5px 7px; border-radius: 5px; opacity: 0; pointer-events: none; transition: opacity .1s; font-variant-numeric: tabular-nums; }
.cf-player-trilho:hover .t-dica, .cf-player-trilho.is-arrastando .t-dica { opacity: 1; }

.cf-player-linha { display: flex; align-items: center; gap: 2px; }
.cf-player-linha > button, .cf-player-linha > a { width: 34px; height: 34px; color: var(--cf-text-secondary); flex-shrink: 0; }
.cf-player-linha > button:hover, .cf-player-linha > a:hover, .cf-player-vol button:hover { background: var(--cf-bg-hover, var(--cf-accent-bg)); color: var(--cf-text); }
.cf-player-linha > .cf-player-play { width: 30px; height: 30px; background: var(--cf-accent); color: #fff; border-radius: 50%; margin: 0 6px 0 2px; }
.cf-player-linha > .cf-player-play svg { width: 15px; height: 15px; }
.cf-player-linha > .cf-player-play:hover { background: var(--cf-accent-hover); color: #fff; }
.cf-player-linha > [aria-expanded="true"] { background: var(--cf-accent-bg); color: var(--cf-accent-text, var(--cf-accent)); }
.cf-player-tempo { font: 500 12px/1 Roboto, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cf-text-muted); }
.cf-player-tempo b { color: var(--cf-text); font-weight: 600; }
.cf-player-esp { flex: 1; min-width: 4px; }

/* Volume: o ícone silencia; a barra flutua acima dele no hover (não mexe na linha).
   Fecha ao tirar o mouse, mesmo depois de arrastar; teclado abre só com foco de teclado. No toque, só mudo. */
.cf-player-vol { position: relative; flex-shrink: 0; }
.cf-player-vol button { width: 34px; height: 34px; color: var(--cf-text-secondary); }
.cf-player-vs {
  position: absolute; left: 50%; bottom: calc(100% - 2px); z-index: 9; width: 34px; height: 108px; box-sizing: border-box; padding: 14px 0;
  display: flex; justify-content: center; cursor: pointer; touch-action: none; outline: none;
  background: var(--cf-bg-elevated, var(--cf-bg-card)); border: 1px solid var(--cf-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .14s, transform .14s, visibility 0s .14s;
}
.cf-player-vol:hover .cf-player-vs, .cf-player-vol:has(:focus-visible) .cf-player-vs, .cf-player-vs.is-arrastando { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.cf-player-vs .vs-trilho { position: relative; width: 4px; height: 100%; border-radius: 2px; background: var(--cf-border-strong, var(--cf-border)); }
.cf-player-vs .vs-cheio { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px; background: var(--cf-accent); }
.cf-player-vs .vs-bola { position: absolute; left: 50%; width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%; background: var(--cf-accent); box-shadow: 0 0 0 3px var(--cf-bg-elevated, var(--cf-bg-card)); }
.cf-player-vs:focus-visible { border-color: var(--cf-accent); }
@media (hover: none) { .cf-player-vs { display: none; } }

/* Menu ⋯: velocidade e copiar referência */
.cf-player-menu { position: absolute; right: 6px; bottom: calc(100% + 6px); z-index: 9; width: 236px; max-width: calc(100% - 12px); box-sizing: border-box; background: var(--cf-bg-elevated, var(--cf-bg-card)); color: var(--cf-text); border: 1px solid var(--cf-border); border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); display: none; }
.cf-player-menu.is-aberto { display: block; }
.cf-player-menu .m-rot { padding: 6px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--cf-text-subtle); text-transform: uppercase; }
.cf-player-menu .m-vel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 0 4px 6px; }
.cf-player .m-vel button { padding: 6px 0; font-size: 12px; font-weight: 600; color: var(--cf-text-secondary); border-radius: 6px; }
.cf-player .m-vel button:hover { background: var(--cf-bg-hover, var(--cf-accent-bg)); }
.cf-player .m-vel button[aria-pressed="true"] { background: var(--cf-accent); color: #fff; }
.cf-player-menu .m-sep { height: 1px; background: var(--cf-border); margin: 2px 4px 4px; }
.cf-player .m-item { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; justify-items: start; width: 100%; padding: 8px; border-radius: 7px; font-size: 13px; color: var(--cf-text); }
.cf-player .m-item:hover { background: var(--cf-bg-hover, var(--cf-accent-bg)); }
.cf-player .m-item svg { width: 17px; height: 17px; color: var(--cf-text-secondary); }
.cf-player .m-item small { display: block; font-size: 11.5px; color: var(--cf-text-muted); margin-top: 1px; }

/* Player estreito (cards, listas): Baixar vai para o ⋯ */
.cf-player .so-estreito { display: none; }
.cf-player.is-estreito .so-largo { display: none; }
.cf-player.is-estreito .so-estreito { display: grid; }
.cf-player.is-estreito .cf-player-linha > .cf-player-play { margin-right: 4px; }

/* Tela cheia */
.cf-player:fullscreen { width: 100vw; max-width: none; height: 100vh; display: flex; flex-direction: column; background: #000; }
.cf-player:fullscreen .cf-player-tela { flex: 1; aspect-ratio: auto; border-radius: 0; }
.cf-player:fullscreen .cf-player-painel { border-radius: 0; }
.cf-player:fullscreen::after { display: none; }

/* ---- Encaixe nas telas ---- */
/* Editar vídeo: mesmo tamanho do player antigo; a zona segura cobre só o vídeo */
.cf-ev-player > .cf-player { width: 220px; max-width: min(220px, calc(100vw - 48px)); }
.cf-ev-player:has(> .cf-player) .cf-ev-overlay-rede { bottom: var(--cf-player-painel, 62px); border-radius: 10px 10px 0 0; }
/* Mesa (clipe, vídeo final, publicação): o quadro 9:16 vira o player; a barra fica embaixo */
.cf-mesa-vp:has(> .cf-player) { height: auto; aspect-ratio: auto; width: calc(min(600px, calc(86vh - 230px)) * 9 / 16); overflow: visible; border: 0; border-radius: 0; background: none; }
.cf-mesa-vp > .cf-player { max-width: none; }
.cf-mesa-vp:has(> .cf-player) .pb-ov { bottom: var(--cf-player-painel, 62px); }
/* UGC V2: vídeo final ao lado do texto */
.ugc-v2-room-final > .cf-player { width: min(220px, 42%); flex-shrink: 0; }
@media (max-width: 640px) { .ugc-v2-room-final > .cf-player { width: min(220px, 100%); } }
.cf-timeline-media > .cf-player { margin: 0 auto; }