/* ==========================================================================
   GTA6. — Lista de downloads (usa os tokens de ../assets/css/style.css)
   ========================================================================== */

/* "+" no canto da miniatura */
.item__add { position: absolute; top: 8px; right: 8px; z-index: 6; width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); background: rgba(10, 8, 24, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; display: grid; place-items: center; transition: transform .15s, background .2s, border-color .2s; }
.item__add::before { content: "+"; color: #fff; font: 700 24px/1 var(--font-body); margin-top: -2px; }
.item__add:hover { transform: scale(1.08); }
.item__add:active { transform: scale(.92); }
.item__add.is-on { background: var(--pink); border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 45, 149, .35); }
.item__add.is-on::before { content: "✓"; font-size: 19px; margin-top: 0; }
.item.is-picked { border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink), 0 20px 50px -20px rgba(255, 45, 149, .7); }

/* modo seleção: o card todo vira alvo de toque e o play some */
.grid.is-selecting .item__play { display: none; }
.grid.is-selecting .item__thumb { cursor: copy; }
.grid.is-selecting .item:not(.is-picked) .item__thumb::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(10, 8, 24, .35); }
.grid.is-selecting .item.is-picked .item__thumb::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(255, 45, 149, .18); }

/* ferramentas acima dos filtros */
.seltools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.seltools .ib { padding: 9px 13px; font-size: 12.5px; }
.seltools__toggle.is-on { background: var(--pink); border-color: var(--pink); }
.seltools__hint { font-size: 13px; color: var(--pink-soft); }

/* barra flutuante */
.dldock { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 44; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(20, 14, 44, .96); border: 1px solid var(--line-pink); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .9), 0 0 40px -12px rgba(255, 45, 149, .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: dockIn .35s cubic-bezier(.2, .8, .2, 1); width: max-content; max-width: calc(100vw - 24px); }
.dldock__info { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; color: #fff; cursor: pointer; font-family: var(--font-cond); font-weight: 600; font-size: 15px; letter-spacing: .04em; white-space: nowrap; padding: 0; }
.dldock__info b { font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--pink-2); vertical-align: -2px; }
.dldock__ico { font-size: 20px; }
.dldock .btn { border-radius: 999px; }
.dldock.is-busy .btn { background: var(--card-2); box-shadow: none; }
@keyframes dockIn { from { opacity: 0; transform: translate(-50%, 16px); } }
body.has-dock .fabs { bottom: 150px; }
body.has-dock .toast { bottom: 150px; }
body.has-dock .app__main { padding-bottom: 170px; }

/* painel (gaveta lateral no PC, sobe de baixo no celular) */
.drawer { position: fixed; inset: 0; z-index: 105; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(3, 1, 8, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column; gap: 14px; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(170deg, #1d1342, #0c0820 60%); border-left: 1px solid var(--line-pink); box-shadow: -30px 0 80px -20px rgba(0, 0, 0, .9); overflow-y: auto; animation: drawerIn .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0; } }
.drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer__head .eyebrow { margin-bottom: 4px; }
.drawer__head h3 { font-size: 34px; margin: 0; }
.drawer__close { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; font-size: 14px; }
.drawer__actions { display: grid; gap: 8px; }
.drawer__actions .btn { white-space: normal; font-size: 21px; padding: 13px 16px 11px; }
.drawer__actions .btn small { font-size: 11px; letter-spacing: .08em; }
.drawer__actions .btn:disabled, .drawer__clear:disabled, .dlrow__x:disabled { opacity: .45; pointer-events: none; }
.drawer__hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.drawer__progress { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.drawer__bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.drawer__bar i { display: block; height: 100%; width: 0; background: var(--grad-cta); transition: width .3s; }
.drawer__progress-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--font-cond); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.drawer__outputs { display: grid; gap: 8px; }
.drawer__outputs #dlOutputs { display: grid; gap: 6px; }
.drawer__outputs .ib { justify-content: flex-start; padding: 11px 12px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.drawer__retry { justify-self: start; border-color: rgba(255, 77, 109, .5); color: #ffb3c1; }
.drawer__list { display: grid; gap: 8px; margin: 0; padding: 0; }
.dlrow { display: grid; grid-template-columns: 46px 1fr 34px; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.dlrow__thumb { position: relative; width: 46px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #3a1a5a, #ff2d95 70%, #ff7a1a); }
.dlrow.is-h .dlrow__thumb { aspect-ratio: 1; }
.dlrow__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dlrow__meta { display: grid; gap: 3px; min-width: 0; }
.dlrow__meta b { font-family: var(--font-cond); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlrow__meta em { font-style: normal; color: var(--muted-2); }
.dlrow__meta span { font-size: 12px; color: var(--muted); }
.dlrow__bar { height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.dlrow__bar i { display: block; height: 100%; background: var(--grad-cta); transition: width .25s; }
.dlrow.is-ok .dlrow__meta span, .dlrow.is-enviado .dlrow__meta span { color: var(--green); }
.dlrow.is-ok .dlrow__bar i, .dlrow.is-enviado .dlrow__bar i { background: var(--green); }
.dlrow.is-falhou { border-color: rgba(255, 77, 109, .45); }
.dlrow.is-falhou .dlrow__meta span { color: #ffb3c1; }
.dlrow__x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.dlrow__x:hover { color: #fff; border-color: var(--line-pink); }
.dlempty { list-style: none; padding: 28px 12px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; border: 1px dashed var(--line); border-radius: 14px; }
.drawer__foot { margin-top: auto; display: flex; justify-content: center; padding-top: 6px; }
.drawer__clear { border: 0; background: none; color: var(--muted-2); text-decoration: underline; cursor: pointer; font-size: 13px; }

/* celular: barra acima das abas de baixo; painel sobe de baixo */
@keyframes sheetIn { from { transform: translateY(60px); opacity: 0; } }
@media (max-width: 760px) {
  .dldock { bottom: calc(78px + env(safe-area-inset-bottom)); }
  body.has-dock .fabs { bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.has-dock .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .drawer__panel { top: auto; left: 0; width: 100vw; max-height: 88svh; border-left: 0; border-top: 1px solid var(--line-pink); border-radius: 22px 22px 0 0; animation-name: sheetIn; }
  .item__add { width: 34px; height: 34px; top: 6px; right: 6px; }
}