/* ==========================================================================
   MAIS TUNER 24.20.0 — Linha do tempo, Últimas tocadas e movimento
   Mesma linguagem do Modo Cinema 2026: vidro escuro, trilho com pontos,
   destaque menta para o que está no ar. Fontes (família e peso) continuam as
   originais; só layout, cores de superfície, espaçamento e movimento mudam.
   ========================================================================== */

:root{
  --mt-ease-out:cubic-bezier(.22,1,.36,1);
  --mt-ease-in-out:cubic-bezier(.65,0,.35,1);
  --mt-ease-spring:cubic-bezier(.34,1.4,.64,1);
  --mt-mint:#5fffc0;
}

/* =========================== Linha do tempo =========================== */
html body .replay-queue-inner{
  background:linear-gradient(168deg,rgba(22,44,78,.94) 0%,rgba(9,20,42,.97) 55%,rgba(6,14,30,.98) 100%)!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:26px!important;
  box-shadow:0 44px 100px -34px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.08)!important;
  backdrop-filter:blur(26px) saturate(1.35);-webkit-backdrop-filter:blur(26px) saturate(1.35);
  padding:18px 16px 18px!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent
}
@media (min-width:701px){
  html body .replay-queue-modal{padding:84px 24px 120px 0!important}
  html body .replay-queue-inner{width:420px!important;max-width:420px!important;max-height:min(700px,calc(100vh - 210px))!important}
}
/* cabeçalho e abas fixos; só a lista rola */
html body .replay-queue-inner{display:flex!important;flex-direction:column;overflow:hidden!important}
html body .replay-queue-head{position:static!important;flex:none;margin:0 0 12px!important;padding:0 2px!important;background:none!important}
html body .replay-queue-tabs{flex:none}
html body .replay-queue-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px 6px!important;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 18px),transparent)}
html body .replay-queue-head h3{display:flex;flex-direction:column;gap:4px}
html body .replay-queue-head h3::before{content:"Replay";font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mt-mint);font-weight:800}
html body .replay-queue-close{border-radius:999px!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important;transition:background .2s ease,transform .3s var(--mt-ease-out)}
html body .replay-queue-close:hover{background:rgba(255,255,255,.16)!important;transform:rotate(90deg)}

/* abas em pílula segmentada */
html body .replay-queue-tabs{position:relative;gap:4px!important;padding:4px;margin-bottom:12px!important;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
html body .replay-queue-tab{border-radius:999px!important;background:transparent!important;color:rgba(235,244,255,.72)!important;min-height:38px;transition:background .3s var(--mt-ease-out),color .3s ease}
html body .replay-queue-tab:hover{color:#fff!important;background:rgba(255,255,255,.06)!important}
html body .replay-queue-tab.active{background:#f2f8ff!important;color:#06213a!important;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}

/* resumo e divisores por hora */
html body .replay-queue-list{border-top:0!important;position:relative}
html body .rq-summary{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 4px 6px;color:#9fb4d1;font-size:12px}
html body .rq-summary b{color:#f2f8ff;font-weight:800}
html body .rq-since::before{content:"◷ ";color:var(--mt-mint)}
html body .rq-hour{position:relative;display:flex;align-items:center;gap:10px;margin:14px 0 4px;padding-left:44px;color:#9fb4d1;font-size:11px;font-weight:800;letter-spacing:.12em}
html body .rq-hour span{padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
html body .rq-hour::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.14),transparent)}

/* itens no trilho: horário · ponto · capa · texto */
html body .replay-queue-inner .replay-queue-item{position:relative;border:0!important;background:transparent!important;margin:2px 0!important;
  padding:9px 10px 9px 4px!important;border-radius:16px!important;gap:12px!important;
  transition:background .25s ease,transform .35s var(--mt-ease-out)}
html body .replay-queue-inner .replay-queue-item::before{content:"";position:absolute;left:54px;top:-4px;bottom:-4px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.16),rgba(255,255,255,.06))}
html body .replay-queue-inner .replay-queue-item .rqi-time{position:relative;flex:0 0 42px!important;font-variant-numeric:tabular-nums;color:#c9d8ec!important;font-size:13px!important}
html body .replay-queue-inner .replay-queue-item .rqi-time::after{content:"";position:absolute;right:-13px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:#0b1830;border:2px solid rgba(255,255,255,.4);box-sizing:border-box;transition:transform .3s var(--mt-ease-spring),background .3s ease,border-color .3s ease}
html body .replay-queue-inner .replay-queue-item .rqi-cover{margin-left:12px;width:48px!important;height:48px!important;border-radius:12px!important;box-shadow:0 10px 22px -12px rgba(0,0,0,.8)}
html body .replay-queue-inner .replay-queue-item:hover{background:rgba(255,255,255,.06)!important;transform:translateX(3px)}
html body .replay-queue-inner .replay-queue-item:hover .rqi-time::after{transform:scale(1.35);border-color:#fff}
html body .replay-queue-inner .replay-queue-item .rqi-play{width:30px!important;height:30px!important;padding:8px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.06);
  fill:rgba(255,255,255,.55)!important;transition:background .25s ease,fill .25s ease,transform .35s var(--mt-ease-spring)}
html body .replay-queue-inner .replay-queue-item:hover .rqi-play{background:#ff4d5e;fill:#fff!important;transform:scale(1.08)}

/* faixa no ar */
html body .replay-queue-inner .replay-queue-item.is-now{background:linear-gradient(90deg,rgba(95,255,192,.14),rgba(95,255,192,.03))!important;box-shadow:inset 0 0 0 1px rgba(95,255,192,.35)}
html body .replay-queue-inner .replay-queue-item.is-now .rqi-time{color:var(--mt-mint)!important}
html body .replay-queue-inner .replay-queue-item.is-now .rqi-time::after{background:var(--mt-mint);border-color:var(--mt-mint);box-shadow:0 0 0 0 rgba(95,255,192,.55);animation:mtNowPulse 1.8s ease-in-out infinite}
html body .replay-queue-inner .replay-queue-item.is-now .rqi-title{color:#fff!important}
html body .rqi-now{display:inline-flex;align-items:center;gap:6px;margin-bottom:3px;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-mint)}
html body .rqi-now i{width:6px;height:6px;border-radius:50%;background:currentColor}

/* fila (próximas) no mesmo trilho */
html body .replay-queue-inner .replay-queue-item.replay-queue-next{background:linear-gradient(90deg,rgba(125,233,255,.14),rgba(125,233,255,.03))!important;box-shadow:inset 0 0 0 1px rgba(125,233,255,.35)}
html body .replay-queue-inner .replay-queue-item.replay-queue-next .rqi-time{color:#7de9ff!important;flex-basis:58px!important}
html body .replay-queue-inner .replay-queue-next-preview .rqi-time{flex-basis:58px!important;font-size:11px!important;line-height:1.2}
html body .replay-queue-inner .replay-queue-next-preview::before{left:70px}
html body .replay-queue-inner .replay-queue-next-preview .rqi-time::after{right:-14px}
html body .replay-queue-inner .replay-queue-item.replay-queue-next .rqi-cover{border:0!important}
html body .replay-queue-inner .replay-queue-item.replay-queue-next .rqi-title{color:#e9fbff!important}
html body .replay-queue-inner .replay-queue-empty{border-radius:14px;background:rgba(255,255,255,.04);color:#a8bcd6!important;padding:14px!important;font-size:12.5px}

/* celular: folha que sobe */
@media (max-width:700px){
  html body .replay-queue-inner{border-radius:26px 26px 0 0!important;padding:12px 14px calc(18px + env(safe-area-inset-bottom,0px))!important}
  html body .replay-queue-head{top:auto!important;margin:0 0 10px!important;padding:2px 0 0!important}
  html body .replay-queue-inner::before{content:"";display:block;width:42px;height:4px;margin:0 auto 6px;border-radius:999px;background:rgba(255,255,255,.25)}
}

/* ============================ Últimas tocadas ============================ */
html body .history-inner{
  background:linear-gradient(160deg,color-mix(in srgb,var(--ui81-surface) 88%,#ffffff 6%),var(--ui81-surface))!important;
  border-radius:26px!important;padding:22px 22px 18px!important;
  box-shadow:0 30px 70px -44px rgba(0,0,0,.8),inset 0 1px rgba(255,255,255,.07)!important}
html body .history-inner h2{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px!important}
html body .history-inner h2::before{content:"";width:6px;height:1em;border-radius:3px;background:var(--ui81-accent);flex:none}
html body .history-inner h2 span{padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--ui81-accent) 14%,transparent);color:var(--ui81-accent)!important}
html body .history-list{gap:16px!important;padding:4px 2px 10px!important;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
html body .history-item{position:relative;width:136px!important;gap:5px!important;scroll-snap-align:start;transition:transform .4s var(--mt-ease-out)}
html body .history-cover{width:136px!important;height:136px!important;border-radius:18px!important;border:0!important;
  box-shadow:0 18px 34px -22px rgba(0,0,0,.85),0 0 0 1px color-mix(in srgb,var(--ui81-text) 10%,transparent);
  transition:transform .45s var(--mt-ease-out),box-shadow .45s var(--mt-ease-out)}
html body .history-item .history-title{font-size:12.5px!important;line-height:1.25;margin-top:6px;-webkit-line-clamp:1!important}
html body .history-artist{display:block;max-width:100%;font-size:11.5px;color:var(--ui81-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .history-time{font-variant-numeric:tabular-nums;font-size:10.5px!important;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--ui81-text) 7%,transparent)}
/* passar o mouse: capa sobe e mostra o "ouvir de novo" */
html body .history-item[data-replay-jump]::after{content:"";position:absolute;left:50px;top:50px;width:36px;height:36px;border-radius:50%;
  background:#ff4d5e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:0 10px 24px -8px rgba(255,77,94,.7);opacity:0;transform:scale(.6);transition:opacity .3s ease,transform .4s var(--mt-ease-spring);pointer-events:none}
html body .history-item:not(.is-readonly):hover{transform:translateY(-4px)}
html body .history-item:not(.is-readonly):hover .history-cover{transform:scale(1.03);box-shadow:0 26px 44px -22px rgba(0,0,0,.9),0 0 0 2px var(--ui81-accent)}
html body .history-item[data-replay-jump]:hover::after,html body .history-item[data-replay-jump]:focus-visible::after{opacity:1;transform:none}
/* a seguir */
html body .history-item-next{width:136px!important}
html body .history-cover-next{width:136px!important;height:136px!important;border-radius:18px!important;border:0!important;
  box-shadow:0 0 0 2px #7de9ff,0 22px 40px -24px rgba(125,233,255,.6)!important}
html body .history-item-next .history-title{color:#7de9ff!important}
html body .history-item-next .history-time{color:#06213a!important;background:#7de9ff;font-weight:800}
html body .history-next-badge{border-radius:999px!important;padding:4px 9px!important;font-size:8.5px!important;letter-spacing:.1em;background:rgba(4,14,30,.72)!important;color:#7de9ff!important;backdrop-filter:blur(8px)}
html body .history-next-play{left:68px!important;top:68px!important}
@media (max-width:700px){
  html body .history-inner{padding:18px 16px 14px!important;border-radius:22px!important}
  html body .history-item,html body .history-item-next{width:118px!important}
  html body .history-cover,html body .history-cover-next{width:118px!important;height:118px!important;border-radius:16px!important}
  html body .history-item[data-replay-jump]::after{left:41px;top:41px}
  html body .history-next-play{left:59px!important;top:59px!important}
}

/* ============================ Movimento ============================ */
/* Entradas: mais longas e suaves, com desaceleração natural; nada pula.  */
html:not(.anim-none) .replay-queue-modal.show .replay-queue-inner{animation:mtPanelIn .55s var(--mt-ease-out) both}
html:not(.anim-none) .replay-queue-modal.is-opening .replay-queue-item,
html:not(.anim-none) .replay-queue-modal.is-opening .rq-hour,
html:not(.anim-none) .replay-queue-modal.is-opening .rq-summary{animation:mtItemIn .55s var(--mt-ease-out) both;animation-delay:calc(80ms + var(--i,0) * 32ms)}
html:not(.anim-none) .track-info-modal.show .track-info-inner,
html:not(.anim-none) .station-modal.show .station-modal-inner{animation:mtSheetIn .5s var(--mt-ease-out) both}
html:not(.anim-none) .sr-weather-modal.show .sr-weather-card{animation:mtSheetIn .55s var(--mt-ease-out) both}
html:not(.anim-none) .anim-mode,html:not(.anim-none) .settings-row{transition:background .25s ease,border-color .25s ease,transform .35s var(--mt-ease-out)}
html:not(.anim-none) .anim-mode:hover{transform:translateY(-2px)}

/* Modo Cinema (estilos Completo e Essencial): a capa entra com profundidade e
   as informações em cascata. Com "Movimento no Modo Cinema" ligado, valem as
   entradas próprias do Cinema. */
html:not(.anim-none):not(.cinema-motion-on) #cinemaModal.show:not([data-cine-style="classic"]) .cinema-art-wrap{animation:mtCoverIn .8s var(--mt-ease-out) both}
html:not(.anim-none):not(.cinema-motion-on) #cinemaModal.show:not([data-cine-style="classic"]) .cinema-info > *{animation:mtItemIn .6s var(--mt-ease-out) both}
html:not(.anim-none):not(.cinema-motion-on) #cinemaModal.show:not([data-cine-style="classic"]) .cinema-info > :nth-child(1){animation-delay:.12s}
html:not(.anim-none):not(.cinema-motion-on) #cinemaModal.show:not([data-cine-style="classic"]) .cinema-info > :nth-child(2){animation-delay:.18s}
html:not(.anim-none):not(.cinema-motion-on) #cinemaModal.show:not([data-cine-style="classic"]) .cinema-info > :nth-child(3){animation-delay:.24s}
html:not(.anim-none):not(.cinema-motion-on) #cinemaModal.show:not([data-cine-style="classic"]) .cinema-info > :nth-child(4){animation-delay:.30s}
html:not(.anim-none):not(.cinema-motion-on) #cinemaModal.show:not([data-cine-style="classic"]) .cinema-info > :nth-child(n+5){animation-delay:.36s}
html:not(.anim-none):not(.cinema-motion-on) #cinemaModal.show:not([data-cine-style="classic"]) .cinema-bottombar{animation:mtBarIn .7s var(--mt-ease-out) .1s both}
html:not(.anim-none) #cinemaModal .mt-cw.is-loading .mt-cw-temp{animation:mtBreath 1s ease-in-out infinite}

/* toque: resposta física nos botões principais */
html:not(.anim-none) :is(.hero-play,.card-play-row,.mini-play,.mini-icon-btn,.mini-skip,.anim-mode,.replay-queue-tab,.sr-weather-city,.mt-cw-cities button,.mt-cw-now,.history-item,.request-catalog-action,.circle-btn):active{transform:scale(.96)!important;transition-duration:.08s!important}

/* modo leve: mesmos movimentos, mais curtos e sem cascata */
html.anim-light .replay-queue-modal.is-opening .replay-queue-item,html.anim-light .replay-queue-modal.is-opening .rq-hour{animation-delay:0s!important;animation-duration:.3s!important}
html.anim-light #cinemaModal.show .cinema-info > *{animation-delay:0s!important}

@keyframes mtPanelIn{from{opacity:0;transform:translate3d(24px,0,0) scale(.98);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes mtSheetIn{from{opacity:0;transform:translate3d(0,22px,0) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes mtItemIn{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes mtCoverIn{from{opacity:0;transform:scale(.9) translate3d(0,18px,0);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes mtBarIn{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@keyframes mtNowPulse{0%,100%{box-shadow:0 0 0 0 rgba(95,255,192,.55)}60%{box-shadow:0 0 0 7px rgba(95,255,192,0)}}
@keyframes mtBreath{0%,100%{opacity:1}50%{opacity:.45}}
@media (max-width:700px){
  @keyframes mtPanelIn{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion:reduce){
  .replay-queue-inner,.replay-queue-item,.rq-hour,.rq-summary,.track-info-inner,.station-modal-inner,.sr-weather-card,
  #cinemaModal .cinema-art-wrap,#cinemaModal .cinema-info > *,#cinemaModal .cinema-bottombar,.rqi-time::after{animation:none!important}
  .history-item,.history-cover,.replay-queue-item{transition:none!important}
}

/* tema claro: "a seguir" com contraste */
html[data-site-theme="light"] body .history-item-next .history-title{color:#0a6f93!important}
html[data-site-theme="light"] body .history-cover-next{box-shadow:0 0 0 2px #19a9d4,0 22px 40px -24px rgba(25,169,212,.5)!important}
html[data-site-theme="light"] body .history-item-next .history-time{background:#19a9d4;color:#fff!important}

/* 24.33: rádio do ouvinte sem capa no mini player */
.mini-art.is-user-tile{background:var(--user-tile)!important;color:#fff!important;font-weight:900;letter-spacing:-.02em;text-shadow:0 2px 6px rgba(0,0,0,.25)}