/* Player de mídia do menu Redes sociais: painel escuro no espírito do Spotify,
   com capa grande, abas entre podcast e vídeo, capítulos clicáveis, transcrição
   e retomada de posição. A página hospedeira define os tokens de identidade
   (--ll, --ll-ink, --ll-surface, --ll-line, --neutral-ink); este asset consome.

   Sem JavaScript o <audio>/<video> mantém o atributo controls e a peça continua
   inteira: a consola é construída pelo redes-player.js e só substitui os
   controles nativos quando o script roda. */

.rsp {
  --rsp-fundo: #101827;
  --rsp-fundo-2: #182135;
  --rsp-tinta: #F4F6FB;
  --rsp-tinta-fraca: #A9B4CC;
  --rsp-linha: rgba(255, 255, 255, 0.14);
  --rsp-acento: #F2799C;
  margin: 1.6rem 0;
  border-radius: 16px;
  /* A cor sólida vem declarada junto do gradiente: sem ela o background-color
     fica transparente e, se o gradiente não pintar, a tinta clara do painel cai
     sobre o fundo branco da página no tema claro. */
  background-color: var(--rsp-fundo);
  background-image: radial-gradient(120% 90% at 12% 0%, var(--rsp-fundo-2) 0%, var(--rsp-fundo) 62%);
  border: 1px solid var(--rsp-linha);
  overflow: hidden;
  color: var(--rsp-tinta);
}

/* ---- abas de faixa (podcast / vídeo) ---- */
.rsp-abas { display: flex; gap: 0.4rem; padding: 0.8rem 1rem 0; }
.rsp-aba {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  padding: 0.4rem 1rem; border-radius: 999px; border: 1px solid var(--rsp-linha);
  background: transparent; color: var(--rsp-tinta-fraca);
  font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.rsp-aba svg { width: 18px; height: 18px; }
.rsp-aba:hover { color: var(--rsp-tinta); border-color: var(--rsp-tinta-fraca); }
.rsp-aba[aria-selected="true"] { background: var(--rsp-acento); border-color: var(--rsp-acento); color: #101827; }
.rsp-aba:focus-visible { outline: 3px solid var(--rsp-acento); outline-offset: 2px; }

/* ---- corpo: capa + informação ---- */
.rsp-faixa { padding: 1rem; }
.rsp-faixa[hidden] { display: none; }
.rsp-topo { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1rem; align-items: end; }
.rsp-capa {
  width: 132px; height: 132px; border-radius: 10px; overflow: hidden; flex: none;
  background: #0B1120; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.rsp-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rsp-rotulo { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--rsp-tinta-fraca); }
/* A cor entra explícita: a página define h2 e h3 na tinta escura da marca, e a
   herança do painel perde para essa regra de elemento. */
.rsp .rsp-titulo, .rsp h3, .rsp h4 { color: var(--rsp-tinta); }
.rsp-titulo { margin: 0.2rem 0 0.25rem; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.rsp .rsp-capitulos h4 { color: var(--rsp-tinta-fraca); }
.rsp-sub { margin: 0; font-size: 0.9rem; color: var(--rsp-tinta-fraca); }

/* ---- vídeo ---- */
.rsp-video { width: 100%; height: auto; display: block; border-radius: 12px; background: #05080f; margin-bottom: 0.9rem; }

/* ---- linha do tempo ---- */
.rsp-linha { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; }
.rsp-tempo { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--rsp-tinta-fraca); min-width: 3.1rem; flex: none; }
.rsp-tempo--fim { text-align: right; }
.rsp-barra {
  flex: 1; appearance: none; -webkit-appearance: none; height: 6px; border-radius: 999px; cursor: pointer;
  background:
    linear-gradient(var(--rsp-acento) 0 0) 0 / calc(var(--rsp-prog, 0) * 100%) 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.28) 0 0) 0 / calc(var(--rsp-buf, 0) * 100%) 100% no-repeat,
    rgba(255, 255, 255, 0.16);
}
.rsp-barra::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #ffffff; border: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.rsp-barra::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #ffffff; border: 0; }
.rsp-barra:focus-visible { outline: 3px solid var(--rsp-acento); outline-offset: 3px; }

/* ---- controles ---- */
.rsp-controles { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.7rem; flex-wrap: wrap; }
.rsp-bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  min-width: 44px; min-height: 44px; padding: 0 0.7rem; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--rsp-tinta);
  font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.rsp-bt svg { width: 20px; height: 20px; }
.rsp-bt:hover { background: rgba(255, 255, 255, 0.10); }
.rsp-bt:focus-visible { outline: 3px solid var(--rsp-acento); outline-offset: 2px; }
.rsp-bt--tocar {
  width: 58px; height: 58px; min-width: 58px; padding: 0; border-radius: 50%;
  background: var(--rsp-acento); color: #101827;
}
.rsp-bt--tocar svg { width: 26px; height: 26px; }
.rsp-bt--tocar:hover { background: #ffffff; }
.rsp-vel { font-variant-numeric: tabular-nums; }
.rsp-volume { display: flex; align-items: center; gap: 0.4rem; margin-left: 0.2rem; }
.rsp-volume input {
  appearance: none; -webkit-appearance: none; width: 88px; height: 5px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(#ffffff 0 0) 0 / calc(var(--rsp-vol, 1) * 100%) 100% no-repeat, rgba(255, 255, 255, 0.2);
}
.rsp-volume input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #ffffff; }
.rsp-volume input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #ffffff; border: 0; }

/* ---- capítulos ---- */
.rsp-capitulos { margin-top: 1rem; border-top: 1px solid var(--rsp-linha); padding-top: 0.7rem; }
.rsp-capitulos h4 { margin: 0 0 0.5rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rsp-tinta-fraca); }
.rsp-capitulos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.rsp-cap {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: center; gap: 0.6rem;
  width: 100%; min-height: 44px; padding: 0.35rem 0.55rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--rsp-tinta); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer;
}
.rsp-cap span:first-child { font-variant-numeric: tabular-nums; color: var(--rsp-tinta-fraca); font-size: 0.8rem; }
.rsp-cap:hover { background: rgba(255, 255, 255, 0.09); }
.rsp-cap[aria-current="true"] { background: rgba(242, 121, 156, 0.18); }
.rsp-cap[aria-current="true"] span:last-child { color: var(--rsp-acento); font-weight: 700; }
.rsp-cap:focus-visible { outline: 3px solid var(--rsp-acento); outline-offset: 2px; }

/* ---- ações e transcrição ---- */
.rsp-acoes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; border-top: 1px solid var(--rsp-linha); padding-top: 0.8rem; }
.rsp-acao {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.4rem 0.9rem;
  border-radius: 999px; border: 1px solid var(--rsp-linha); background: transparent;
  color: var(--rsp-tinta); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.rsp-acao svg { width: 17px; height: 17px; }
.rsp-acao:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--rsp-tinta-fraca); }
.rsp-acao:focus-visible { outline: 3px solid var(--rsp-acento); outline-offset: 2px; }

.rsp-transcricao { margin-top: 0.8rem; border: 1px solid var(--rsp-linha); border-radius: 10px; background-color: #0B1120; }
.rsp-transcricao[hidden] { display: none; }
.rsp-transcricao-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rsp-linha); font-size: 0.85rem; font-weight: 700; }
.rsp-transcricao-texto { max-height: 320px; overflow-y: auto; padding: 0.8rem 0.9rem; font-size: 0.9rem; line-height: 1.6; color: var(--rsp-tinta); }
.rsp-transcricao-texto p { margin: 0 0 0.7rem; }
.rsp-transcricao-texto .llp-transcricao-fala { color: var(--rsp-tinta); }
.rsp-nota { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--rsp-tinta-fraca); }

.rsp-legenda { font-size: 0.86rem; color: var(--neutral-ink); margin-top: 0.6rem; }

@media (max-width: 640px) {
  .rsp-topo { grid-template-columns: 84px minmax(0, 1fr); gap: 0.8rem; }
  .rsp-capa { width: 84px; height: 84px; }
  .rsp-titulo { font-size: 1.1rem; }
  .rsp-volume { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-llx-motion="reduce"]) .rsp-bt, html:not([data-llx-motion="reduce"]) .rsp-aba { transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
  html:not([data-llx-motion="reduce"]) .rsp-bt--tocar:hover { transform: scale(1.05); }
}