/*
  Wortic macOS UI Kit — Media Player
  wm-player — áudio e vídeo com variações: com/sem artwork, com/sem
  acelerador de velocidade, ações (baixar, transcrever), mensagem de
  voz e video preview. Cobre Audio Player, Media Controls, Timeline,
  Scrubber, Volume Control, Video Preview do checklist.
*/

@layer components {
  /* ============ Base (áudio) ============ */
  .wm-player {
    display: flex;
    align-items: center;
    gap: var(--wm-space-5);
    padding: var(--wm-space-4) var(--wm-space-5);
    border-radius: var(--wm-radius-xl);
    background: var(--wm-surface-elevated);
    box-shadow:
      0 0 0 0.5px var(--wm-separator),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 6px 18px -8px rgba(0, 0, 0, 0.1);
    max-width: 480px;
  }
  :root[data-theme="dark"] .wm-player {
    box-shadow:
      0 0 0 0.5px var(--wm-separator),
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 2px 6px rgba(0, 0, 0, 0.28),
      0 10px 26px -10px rgba(0, 0, 0, 0.5);
  }

  /* botão play/pause principal */
  .wm-player__play {
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--wm-accent-gradient);
    color: #fff;
    cursor: pointer;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 2px 6px -1px color-mix(in srgb, var(--wm-accent) 45%, transparent);
    transition: transform var(--wm-duration-fast) var(--wm-ease-spring);
  }
  .wm-player__play:hover { filter: brightness(1.06); }
  .wm-player__play:active { transform: scale(0.92); }
  .wm-player__play .wm-icon { width: 15px; height: 15px; }
  .wm-player__play .wm-icon--pause { display: none; }
  /* A troca play→pause vale para as DUAS raízes. Só .wm-player aqui era
     defeito real: o play da barra do vídeo (.wm-vplayer__controls)
     continuava mostrando ▶ com o vídeo tocando — visto em print, nunca
     em grep. */
  .wm-player.is-playing .wm-player__play .wm-icon--play,
  .wm-vplayer.is-playing .wm-player__play .wm-icon--play { display: none; }
  .wm-player.is-playing .wm-player__play .wm-icon--pause,
  .wm-vplayer.is-playing .wm-player__play .wm-icon--pause { display: inline-block; }

  .wm-player--sm .wm-player__play { width: 28px; height: 28px; }
  .wm-player--sm .wm-player__play .wm-icon { width: 12px; height: 12px; }

  /* artwork */
  .wm-player__art {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--wm-radius-md);
    background: var(--wm-brand-gradient, linear-gradient(135deg, var(--wm-brand-blue), var(--wm-brand-cyan)));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 3px 8px -2px rgba(0, 68, 238, 0.35);
    overflow: hidden;
  }
  .wm-player__art img { width: 100%; height: 100%; object-fit: cover; }

  .wm-player__body { flex: 1; min-width: 0; }
  .wm-player__title {
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-tight);
    color: var(--wm-label-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wm-player__subtitle {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ============ Scrubber / timeline ============ */
  .wm-player__timeline {
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
    margin-top: var(--wm-space-3);
  }
  .wm-player__time {
    flex: none;
    font-size: var(--wm-font-size-caption);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-tertiary);
    min-width: 4ch;
  }
  .wm-player__time--end { text-align: end; }

  .wm-scrubber {
    position: relative;
    flex: 1;
    height: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: var(--wm-radius-pill);
  }

  /* ============ Scrubber de verdade: <input type="range"> ============
     A barra é um range NATIVO: Tab foca, setas avançam/recuam, leitor de
     tela anuncia o valor — um <div onclick> não faz nada disso. O
     preenchimento é o próprio background do input (gradiente cortado em
     --wm-scrub, que o JS atualiza); o polegar é o pseudo-elemento.
     As classes __track/__fill/__handle abaixo seguem valendo para
     markup antigo já publicado, mas o snippet oficial usa o input. */
  .wm-scrubber__input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    margin: 0;
    border: none;
    border-radius: var(--wm-radius-pill);
    background:
      linear-gradient(90deg, var(--wm-accent), var(--wm-brand-cyan) var(--wm-scrub, 0%),
        var(--wm-fill-primary) var(--wm-scrub, 0%), var(--wm-fill-primary) 100%);
    cursor: pointer;
  }
  .wm-scrubber__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    /* 11px: o mesmo diâmetro do __handle legado logo abaixo */
    width: 11px;
    height: 11px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
    transform: scale(0);
    transition: transform var(--wm-duration-fast) var(--wm-ease-spring);
  }
  .wm-scrubber:hover .wm-scrubber__input::-webkit-slider-thumb,
  .wm-scrubber__input:focus-visible::-webkit-slider-thumb,
  .wm-player.is-playing .wm-scrubber__input::-webkit-slider-thumb,
  .wm-vplayer.is-playing .wm-scrubber__input::-webkit-slider-thumb {
    transform: scale(1);
  }
  /* Firefox não anima transform no polegar: fica sempre visível, que é
     melhor do que nunca aparecer. */
  .wm-scrubber__input::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  /* O anel de foco é do ENVELOPE, não do input: a fundação (focus.css)
     desliga o anel de input filho direto de bloco wm- de propósito —
     quem conhece o raio e o desenho é o scrubber. */
  .wm-scrubber:has(.wm-scrubber__input:focus-visible) {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  /* No compacto a linha do tempo é a única linha: sem respiro em cima */
  .wm-player--sm .wm-player__timeline {
    margin-block-start: 0;
  }

  .wm-scrubber__track {
    width: 100%;
    height: 4px;
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-primary);
    overflow: hidden;
  }
  .wm-scrubber__fill {
    height: 100%;
    width: var(--wm-scrub, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--wm-accent), var(--wm-brand-cyan));
  }
  .wm-scrubber__handle {
    position: absolute;
    left: var(--wm-scrub, 0%);
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform var(--wm-duration-fast) var(--wm-ease-spring);
    pointer-events: none;
  }
  .wm-scrubber:hover .wm-scrubber__handle,
  .wm-player.is-playing .wm-scrubber__handle { transform: translate(-50%, -50%) scale(1); }

  /* ============ Ações (acelerador, baixar, transcrever, volume) ===== */
  .wm-player__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--wm-space-2);
  }
  .wm-player__rate {
    flex: none;
    min-width: 34px;
    height: 22px;
    padding-inline: var(--wm-space-3);
    border: none;
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-secondary);
    /* 10.5px é proposital: entre --wm-font-size-caption (10px, achatava
       "1.5x" numa pílula de 22px) e --wm-font-size-subheadline (11px,
       estourava a altura). Nenhum dos dois tokens serve aqui. */
    font-size: 10.5px;
    font-weight: var(--wm-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-secondary);
    cursor: pointer;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-player__rate:hover { background: var(--wm-fill-primary); }
  .wm-player__rate.is-active {
    background: var(--wm-accent-fill);
    color: var(--wm-accent);
  }
  .wm-player__action {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--wm-label-secondary);
    cursor: pointer;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-player__action:hover { background: var(--wm-fill-secondary); color: var(--wm-label-primary); }
  .wm-player__action:active { transform: scale(0.9); }
  .wm-player__action .wm-icon { width: 14px; height: 14px; }
  .wm-player__action.is-busy .wm-icon { animation: wm-spin 0.9s linear infinite; }

  /* volume */
  .wm-player__volume {
    display: flex;
    align-items: center;
    gap: var(--wm-space-2);
    width: 74px;
  }
  .wm-player__volume .wm-scrubber { height: 12px; }

  /* ============ Voice message (waveform) ============ */
  .wm-player--voice { max-width: 300px; border-radius: var(--wm-radius-pill); }
  /* Composição omnichannel (WhatsApp Business etc.): quando o canal manda
     foto de contato de verdade, ela entra aqui — nunca um avatar de app
     genérico por cima de uma mensagem que já tem foto real. Modificador
     próprio porque a pílula de 300px fica apertada com mais um elemento;
     --with-avatar dá a folga sem mexer no tamanho padrão de quem não usa. */
  .wm-player--voice.wm-player--with-avatar { max-width: 340px; }
  .wm-player__avatar {
    flex: none;
    width: var(--wm-icon-xl);
    height: var(--wm-icon-xl);
    border-radius: var(--wm-radius-pill);
    object-fit: cover;
    background: var(--wm-fill-secondary);
  }
  .wm-player__wave {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 26px;
    cursor: pointer;
    border-radius: var(--wm-radius-pill);
  }
  /* A onda também é um range de verdade: o input fica invisível por
     cima das barras (opacity, nunca display:none — sairia do foco) e dá
     à mensagem de voz o mesmo teclado e leitor de tela da timeline. */
  .wm-player__wave .wm-scrubber__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
  }
  .wm-player__wave:has(.wm-scrubber__input:focus-visible) {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }
  .wm-player__wave i {
    flex: 1;
    min-width: 2px;
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-primary);
    height: calc(var(--h, 40) * 1%);
    transition: background var(--wm-duration-instant) linear;
  }
  .wm-player__wave i.is-played {
    background: linear-gradient(180deg, var(--wm-accent-hover), var(--wm-accent));
  }

  /* ============ Video preview / player ============ */
  .wm-vplayer {
    position: relative;
    min-inline-size: 280px;
    max-width: 480px;
    aspect-ratio: 16 / 9;
    border-radius: var(--wm-radius-panel);
    overflow: hidden;
    background: var(--wm-media-canvas-bg);
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
      0 0 0 0.5px rgba(0, 0, 0, 0.4),
      0 14px 36px -12px rgba(0, 0, 0, 0.45);
    isolation: isolate;
  }
  .wm-vplayer__poster {
    position: absolute;
    inset: 0;
    background: radial-gradient(90% 120% at 20% 0%, rgba(42, 194, 243, 0.35), transparent 60%),
      linear-gradient(135deg, var(--wm-media-poster-start), var(--wm-media-poster-end));
  }
  .wm-vplayer__poster img, .wm-vplayer video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .wm-vplayer__duration {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: var(--wm-radius-pill);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    color: #fff;
    /* 10.5px: mesmo meio-termo do .wm-player__rate acima — entre
       caption (10px) e subheadline (11px), numa pílula pequena demais
       para o segundo e apertada demais para o primeiro. */
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
  }
  /* play central grande */
  .wm-vplayer__bigplay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  .wm-vplayer__bigplay span {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.4), 0 8px 24px -6px rgba(0, 0, 0, 0.4);
    color: #fff;
    transition: transform var(--wm-duration-fast) var(--wm-ease-spring);
  }
  .wm-vplayer__bigplay:hover span { transform: scale(1.08); }
  .wm-vplayer__bigplay:active span { transform: scale(0.95); }
  .wm-vplayer__bigplay .wm-icon { width: 22px; height: 22px; margin-inline-start: 2px; }
  .wm-vplayer.is-playing .wm-vplayer__bigplay { display: none; }

  /* barra de controles inferior em vidro */
  .wm-vplayer__controls {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--wm-space-4);
    height: 40px;
    padding-inline: var(--wm-space-4);
    border-radius: var(--wm-radius-lg);
    background: rgba(20, 22, 30, 0.55);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #fff;
    color-scheme: dark;
  }
  .wm-vplayer__controls .wm-player__play {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
  }
  .wm-vplayer__controls .wm-player__time { color: rgba(255, 255, 255, 0.65); }
  .wm-vplayer__controls .wm-scrubber__track { background: rgba(255, 255, 255, 0.22); }
  .wm-vplayer__controls .wm-scrubber__input {
    background:
      linear-gradient(90deg, var(--wm-accent), var(--wm-brand-cyan) var(--wm-scrub, 0%),
        rgba(255, 255, 255, 0.22) var(--wm-scrub, 0%), rgba(255, 255, 255, 0.22) 100%);
  }
  .wm-vplayer__controls .wm-player__action { color: rgba(255, 255, 255, 0.8); }
  .wm-vplayer__controls .wm-player__action:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
  .wm-vplayer__controls .wm-player__rate {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
  }

  /* ============ [hidden] vence display ============
     Toda classe daqui que define display precisa deste par, senão o
     atributo hidden é ignorado (display de classe ganha da regra de UA)
     — foi o bug do ícone duplicado no kit inteiro. O par do troca-troca
     play/pause via .is-playing vem por último e com a MESMA cadeia de
     seletores para ganhar no empate. */
  .wm-player[hidden],
  .wm-player__play[hidden],
  .wm-player__actions[hidden],
  .wm-player__action[hidden],
  .wm-player__rate[hidden],
  .wm-player__timeline[hidden],
  .wm-player__time[hidden],
  .wm-player__volume[hidden],
  .wm-player__wave[hidden],
  .wm-player__art[hidden],
  .wm-scrubber[hidden],
  .wm-scrubber__input[hidden],
  .wm-vplayer[hidden],
  .wm-vplayer__bigplay[hidden],
  .wm-vplayer__controls[hidden],
  .wm-vplayer__duration[hidden],
  .wm-player.is-playing .wm-player__play .wm-icon--pause[hidden],
  .wm-vplayer.is-playing .wm-player__play .wm-icon--pause[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-player__play,
    .wm-scrubber__handle,
    .wm-scrubber__input::-webkit-slider-thumb,
    .wm-vplayer__bigplay span {
      transition: none;
    }
    .wm-player__action.is-busy .wm-icon { animation: none; }
  }
}