/* Player do Início (516). Uma hierarquia só: o que toca → controles →
   buscar → biblioteca → ajustes. Parado, mostra só a busca; tocando, o palco,
   o progresso e o transporte aparecem. Cores do tema; nada de vidro desfocado. */
.cartao.midia{position:relative;margin:20px 0;padding:20px;scroll-margin-top:100px;color:var(--tinta);overflow:hidden;border:1px solid rgba(var(--ouro-rgb),.42);border-radius:var(--raio-g);background:var(--vidro-grad,var(--superficie));box-shadow:inset 0 1px 0 rgba(var(--ouro-rgb),.16),var(--vidro-sombra);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Moldura de ouro sobre o vidro: a máscara deixa o centro transparente e
   não intercepta os controles, inclusive no mini player e em tela cheia. */
html:root[data-tema] .cartao.midia::after {
  content: ''; position: absolute; inset: 0; z-index: 5;
  border-radius: inherit; padding: 2px; pointer-events: none;
  background: var(--imperial-metal, var(--acao-metal));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.midia .botao{display:inline-flex;align-items:center;justify-content:center;gap:8px}.midia .botao>svg{flex-shrink:0}
.midia-descobrir { margin-top: 12px; }
.midia-descobrir > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; color: var(--tinta-2); list-style: none; }
.midia-descobrir > summary::-webkit-details-marker { display: none; }
.midia-descobrir > summary > svg:last-child { margin-left: auto; }
.midia-descobrir[open] > summary > svg:last-child { transform: rotate(180deg); }
.midia input[type=range]{width:100%;margin:0;accent-color:var(--acento-claro);cursor:pointer}
.midia select{width:auto;margin:0;min-height:40px}
.midia .botao[aria-pressed=true]{color:var(--acento-claro);background:rgba(var(--ouro-rgb),.14);border-color:rgba(var(--ouro-rgb),.5)}

/* Botões só com ícone: o nome fica para leitores de tela e na dica. */
.midia-icone{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;color:var(--tinta)}
.midia .midia-icone.botao-fantasma{background:transparent;border-color:transparent;box-shadow:none}
.midia-icone .midia-botao-rotulo,.midia-play .midia-botao-rotulo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.midia .midia-icone[aria-pressed=true]{color:var(--acento-claro);background:rgba(var(--ouro-rgb),.14)}

/* Cabeçalho: capa, o que toca, onde toca e voz. */
.midia-cab{display:flex;align-items:center;gap:14px}
.midia-capa{flex:none;display:grid;place-items:center;width:56px;height:56px;overflow:hidden;border-radius:14px;color:var(--acento-claro);background:rgba(var(--ouro-rgb),.12);border:1px solid rgba(var(--ouro-rgb),.28)}
.midia-capa img{width:100%;height:100%;object-fit:cover}
.midia-titulos{flex:1;min-width:0}
.midia-kicker{margin:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acento-claro)}
.midia-ao-vivo .midia-kicker,.midia-ao-vivo .midia-tempo{color:#ff6b6b}
.midia-cab h3{margin:2px 0 0;text-transform:none;font-family:inherit;font-size:clamp(17px,2.2vw,21px);line-height:1.25;letter-spacing:-.02em;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.midia-status{min-height:1.3em;margin:2px 0 0;font-size:12.5px;color:var(--tinta-mudo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.midia-segmento{display:inline-flex;flex:none;padding:3px;border-radius:999px;background:rgb(var(--veu) / .06);border:1px solid var(--borda)}
.midia-segmento[hidden]{display:none}
.midia-segmento button{min-height:32px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--tinta-mudo);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.midia-segmento button[aria-pressed=true]{color:var(--tinta);background:rgba(var(--ouro-rgb),.22)}
.midia-voz{flex:none;min-height:40px;padding:0 16px;border-radius:999px}

/* Tocando: palco, progresso, transporte e barra secundária. */
.midia-palco,.midia-progresso,.midia-transporte,.midia-apresentacao{display:none}
.midia-tocando .midia-palco{display:block}.midia-tocando .midia-progresso,.midia-tocando .midia-transporte,.midia-tocando .midia-apresentacao{display:flex}
.midia-palco{position:relative;aspect-ratio:16/9;margin:18px 0 14px;overflow:hidden;border-radius:18px;background:#000;border:1px solid rgba(var(--ouro-rgb),.32);isolation:isolate}
.midia-palco canvas{width:100%;height:100%;object-fit:contain}
.midia-palco.ativo{pointer-events:none}.midia-palco.ativo.interativa{pointer-events:auto}.midia-palco.ativo .midia-vazio{display:none}
.midia-vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;padding:20px;text-align:center;font-size:13px;color:#cfc6b2}
.midia-vazio strong{font-size:15px;color:#f3ecdc}
.midia-emblema{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;color:var(--acento-claro);background:rgba(var(--ouro-rgb),.16)}
/* Tocando na janela própria do Mac: o vídeo está lá, não aqui. */
.midia-janela .midia-palco{display:none!important}
.midia-progresso{align-items:center;gap:12px}.midia-progresso input{flex:1;min-width:0}
.midia-tempo{font-size:11.5px;white-space:nowrap;color:var(--tinta-mudo);font-variant-numeric:tabular-nums}
.midia-ao-vivo .midia-tempo{font-weight:800;letter-spacing:.06em;text-transform:uppercase}
/* Live: sem posição nem volume pelo iframe (Twitch/Kick não aceitam comandos). */
.midia-ao-vivo .midia-progresso input,.midia-ao-vivo .midia-volume-grupo>*{visibility:hidden}
.midia-ao-vivo .midia-tempo::before{content:'';display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:currentColor;vertical-align:1px}
.midia-transporte{align-items:center;justify-content:center;gap:20px;margin:10px 0 2px}
.midia .midia-play{width:64px;height:64px;min-width:64px;padding:0;border:0;border-radius:50%;color:#1b1407;background:var(--acento);box-shadow:0 10px 24px -12px rgba(var(--ouro-rgb),.95)}
.midia-play svg{width:28px;height:28px}.midia-play svg path{fill:currentColor}
.midia-apresentacao{align-items:center;gap:4px;margin-top:6px}
.midia-volume-grupo{display:flex;flex:1;align-items:center;gap:10px;min-width:0;color:var(--tinta-mudo)}
.midia-volume{max-width:220px}

/* Buscar: um campo, três tipos e atalhos. */
.midia-tipos{display:inline-flex;gap:0;margin-top:12px;padding:3px;border-radius:999px;background:rgb(var(--veu) / .06);border:1px solid var(--borda)}
.midia-tipos .midia-pilula{min-height:32px;border:0;background:none;color:var(--tinta-mudo)}
.midia-tipos .midia-pilula[aria-pressed=true]{color:var(--tinta);background:rgba(var(--ouro-rgb),.22)}
.midia:not(.midia-tocando) .midia-fila-modos{display:none}
.midia-explorar{margin-top:18px}
.midia-tocando .midia-explorar{padding-top:18px;border-top:1px solid var(--hairline)}
.midia-busca{position:relative;display:flex;align-items:center;gap:8px}
.midia-busca-icone{position:absolute;left:16px;top:50%;display:flex;transform:translateY(-50%);color:var(--tinta-mudo);pointer-events:none}
.midia .midia-busca input{flex:1;min-width:0;height:48px;margin:0;padding:0 16px 0 46px;border-radius:999px;border:1px solid rgba(var(--ouro-rgb),.38);background:rgb(var(--veu) / .05);color:var(--tinta);font-size:15px;box-shadow:none}
.midia .midia-busca input:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px rgba(var(--ouro-rgb),.22)}
.midia .midia-buscar{width:48px;height:48px;min-width:48px;padding:0;border-radius:50%}
.midia-pilula{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--borda-forte);background:transparent;color:var(--tinta-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.midia-pilula[aria-pressed=true]{color:var(--superficie);background:var(--tinta);border-color:var(--tinta)}
.midia-prontas{display:flex;gap:8px;margin:10px -20px 0;padding:2px 20px 6px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.midia-prontas::-webkit-scrollbar{display:none}
.midia-atalho{flex:none;scroll-snap-align:start;color:var(--tinta);background:rgba(var(--ouro-rgb),.1);border-color:rgba(var(--ouro-rgb),.3)}
.midia-dica-chave{margin:12px 0 0;padding:10px 12px;border-radius:12px;font-size:12.5px;color:var(--tinta-2);background:rgba(var(--ouro-rgb),.1)}
.midia-resultados:not(:empty){margin-top:14px}

/* Listas com capa: resultados, fila e favoritos. */
.midia-lista{display:grid;gap:2px}
.midia-item{display:flex;align-items:center;gap:6px;padding:6px;border-radius:14px}
.midia-item-atual{background:rgba(var(--ouro-rgb),.12)}
.midia-item-tocar{display:flex;flex:1;align-items:center;gap:12px;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.midia-item-capa{position:relative;display:grid;flex:none;place-items:center;width:96px;aspect-ratio:16/9;overflow:hidden;border-radius:10px;color:var(--acento-claro);background:rgba(var(--ouro-rgb),.12)}
.midia-item-capa img{width:100%;height:100%;object-fit:cover}
.midia-item-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.45);opacity:0;transition:opacity .15s}
.midia-item-play svg path{fill:currentColor}
.midia-item-tocar:focus-visible .midia-item-play,.midia-item-atual .midia-item-play{opacity:1}
.midia-item-tocar:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:10px}
.midia-item-texto{display:grid;gap:3px;min-width:0}
.midia-item-texto strong{display:-webkit-box;overflow:hidden;font-size:14px;font-weight:600;line-height:1.3;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.midia-item-texto small{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;color:var(--tinta-mudo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.midia-selo-vivo{flex:none;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:.06em;color:#fff;background:#e5484d}
.midia-item-acoes{display:flex;flex:none}
.midia-vazio-lista{margin:8px 4px;font-size:13px;color:var(--tinta-mudo)}

/* Biblioteca em abas. */
.midia-biblioteca{margin-top:20px;padding-top:14px;border-top:1px solid var(--hairline)}
.midia-abas{display:flex;gap:4px;margin-bottom:8px}
.midia-aba{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--tinta-mudo);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.midia-aba[aria-selected=true]{color:var(--tinta);background:rgb(var(--veu) / .08)}
.midia-aba-painel[hidden]{display:none}
.midia-fila-modos{display:flex;align-items:center;gap:8px;margin:0 0 6px}

/* Ajustes: tudo o que é configuração fica aqui, em grupos. */
.midia-ajustes{margin-top:14px;padding-top:4px;border-top:1px solid var(--hairline)}
.midia-ajustes>summary{display:flex;align-items:center;gap:10px;min-height:46px;list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--tinta-2)}
.midia-ajustes>summary::-webkit-details-marker{display:none}
.midia-ajustes>summary>span{flex:1}.midia-ajustes>summary>svg:last-child{transition:transform .2s}
.midia-ajustes[open]>summary>svg:last-child{transform:rotate(180deg)}
.midia-grupo{padding:14px 0;border-top:1px solid var(--hairline)}
.midia-grupo h4{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-mudo)}
.midia-grupo .mudo{margin:0 0 10px;font-size:12.5px}
.midia-campo{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;font-size:14px}
.midia-campo[hidden]{display:none}
.midia-campo select{max-width:62%}
.midia-botoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.midia-chave{display:flex;gap:8px}.midia-chave input{flex:1;min-width:0;margin:0}
.midia-fino>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--acento-claro)}
.midia-eq{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0}
.midia-audio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.midia-ajuste{display:grid;grid-template-columns:1fr auto;gap:6px;min-width:0;padding:10px 12px;font-size:12px;color:var(--tinta-2);border:1px solid var(--borda);border-radius:12px;background:rgb(var(--veu) / .04)}
.midia-ajuste input{grid-column:1/-1}.midia-ajuste output{font-weight:650;color:var(--acento-claro);font-variant-numeric:tabular-nums}
.midia-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13.5px;color:var(--tinta)}.midia-check input{accent-color:var(--acento-claro)}
.midia-gestos{margin:10px 0;font-size:12px;color:var(--tinta-mudo)}
.midia-nota{font-size:12px;color:var(--tinta-mudo)}
.midia-config{margin-top:4px}
.midia-aqui [data-so-mac],.midia-aqui .midia-gestos{display:none}
.midia-arrastar{display:none!important}

/* Player neste aparelho: iframe fixo posicionado sobre o palco. */
.midia-local{position:fixed;overflow:hidden;border-radius:18px;background:#000}.midia-local iframe{display:block;width:100%;height:100%;border:0}
.midia-local-lugar{width:100%;height:100%}
/* Chat da live por cima do vídeo, à direita. O fundo escuro do chat some por
   mistura de cores (screen): fica só o texto; uma sombra leve garante a leitura. */
.midia-local .midia-chat{position:absolute;top:0;right:0;bottom:0;width:min(40%,360px);min-width:200px;overflow:hidden;background:linear-gradient(to left,rgba(0,0,0,.62),rgba(0,0,0,.28) 70%,transparent)}
.midia-local .midia-chat iframe{position:absolute;left:0;width:100%;border:0;background:transparent;mix-blend-mode:screen}
.midia-chat-entrar{position:absolute;left:10px;right:10px;bottom:10px;min-height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:600 12.5px/1 var(--fonte,system-ui);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.midia .midia-botao-chat,.midia .midia-botao-conta{display:none}.midia.midia-com-chat .midia-botao-chat,.midia.midia-tem-conta .midia-botao-conta{display:inline-flex}
.voz-midia-cartao{padding:10px 14px}

/* Tela cheia: só o que toca e os controles. */
.midia-tela-overlay{position:fixed;inset:0;z-index:1100;display:flex;box-sizing:border-box;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:var(--plano)}
html.midia-ampliada{overflow:hidden}
.cartao.midia.midia-em-tela-cheia{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;min-height:0;margin:0;padding:14px;overflow:auto;border:0;border-radius:0;background:var(--plano);box-shadow:none}
.midia-em-tela-cheia>.midia-explorar,.midia-em-tela-cheia>.midia-biblioteca,.midia-em-tela-cheia>.midia-ajustes,.midia-em-tela-cheia .midia-segmento{display:none}
.midia-em-tela-cheia .midia-palco{display:block;flex:1 1 0;min-height:120px;aspect-ratio:auto;margin:10px 0}
.midia-em-tela-cheia .midia-progresso,.midia-em-tela-cheia .midia-transporte,.midia-em-tela-cheia .midia-apresentacao{display:flex}

/* Mini player (fixo no Início ou flutuante). */
.midia.midia-mini{padding:12px}
.midia.midia-mini>.midia-palco,.midia.midia-mini>.midia-explorar,.midia.midia-mini>.midia-biblioteca,.midia.midia-mini>.midia-ajustes,.midia-mini .midia-segmento,.midia-mini .midia-voz,.midia-mini .midia-volume-grupo{display:none!important}
.midia-mini .midia-cab{gap:10px}.midia-mini .midia-capa{width:44px;height:44px;border-radius:10px}
.midia-mini .midia-cab h3{font-size:15px}
.midia-mini .midia-cab>.midia-arrastar{display:inline-flex!important;touch-action:none;cursor:grab}.midia-arrastar:active{cursor:grabbing}
.midia-mini .midia-transporte{gap:12px;margin:6px 0 0}
.midia.midia-mini .midia-play{width:48px;height:48px;min-width:48px}
.midia-mini .midia-apresentacao{justify-content:flex-end;margin-top:0}
.midia-mini-dock{position:fixed;z-index:220;right:max(12px,env(safe-area-inset-right));bottom:calc(96px + env(safe-area-inset-bottom));width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 140px);overflow:auto;overscroll-behavior:contain}
.midia-mini-dock>.cartao.midia{margin:0;background:var(--superficie);box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}

@media (any-hover:hover){
  .midia .midia-icone:hover{background:rgba(var(--ouro-rgb),.12)}
  .midia-item:hover{background:rgb(var(--veu) / .05)}.midia-item-tocar:hover .midia-item-play{opacity:1}
  .midia-atalho:hover,.midia-pilula:not([aria-pressed=true]):hover{border-color:rgba(var(--ouro-rgb),.6)}
}
@media (max-width:600px){
  .cartao.midia{padding:16px}
  .midia-cab{flex-wrap:wrap;gap:12px}
  .midia-titulos{flex:1 1 calc(100% - 128px)}
  .midia-voz{order:2;width:44px;min-width:44px;padding:0}.midia-voz .midia-botao-rotulo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .midia-segmento{order:3;flex:1 1 100%}.midia-segmento button{flex:1}
  .midia-prontas{margin:10px -16px 0;padding:2px 16px 6px}
  .midia-item-capa{width:84px}
  .midia-transporte{gap:14px}
  .midia-eq{grid-template-columns:repeat(2,minmax(0,1fr))}.midia-audio{grid-template-columns:1fr}
  .midia-campo select{max-width:58%}
}
@media (max-height:500px){.midia-em-tela-cheia .midia-cab,.midia-em-tela-cheia .midia-progresso{display:none}}
@media (prefers-reduced-motion:reduce){.midia-item-play,.midia-ajustes>summary>svg:last-child{transition:none}}