/* ============================================================
   GALERIA DO CANAL — REDESIGN (v2)
   ------------------------------------------------------------
   Carregado DEPOIS de gallery-channel.css, seguindo o mesmo padrão
   de override já usado no projeto (ver override-gallery-buttons.css).
   Nada aqui inventa cor nova: usa os tokens de base/variables.css.
   Para reverter, basta remover o <link> em canal_galeria.html.

   Contrato de DOM preservado: todas as classes/IDs que o
   gallery_channel.js usa (.gallery-item, .btn-like-channel,
   #gallery-search, #type-filter .filter-btn, #sort-by, .filtered-out…)
   continuam existindo. Aqui só muda a apresentação.
   ============================================================ */

:root {
    --gal-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- 1. Banner do canal ---------------------------------
   Era um retângulo com cantos arredondados atrás do cartão de perfil.
   Vira uma faixa que dissolve no fundo da página, para o banner de
   cada streamer integrar em vez de virar um bloco colado.          */
/* O channel-theme.css pinta .streamer-profile com um gradiente do tema do
   canal (#3c85c7 → #42b883) mais padding e cantos arredondados, o que
   emoldurava o banner num retângulo azul-esverdeado. Aqui isso é desfeito
   para o banner sangrar de ponta a ponta, como no protótipo aprovado. */
.gallery-channel-page .streamer-profile {
    min-height: 0;
    margin-bottom: 1.5rem;
    background: none;
    padding: 0;
    border-radius: 0;
    color: inherit;
}

/* Banner full-bleed: escapa do .container para ocupar a largura da janela.
   O 100vw + margem negativa é o truque padrão; overflow-x fica travado no
   body pelo layout, então não gera barra horizontal. */
.gallery-channel-page .streamer-banner {
    position: relative;
    inset: auto;
    height: 320px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Sobe até encostar na navbar: o layout reserva --header-height de espaço
       para a barra fixa, e esse respiro deixava uma faixa preta acima do banner. */
    margin-top: calc(var(--header-height, 70px) * -1);
    border-radius: 0;
    overflow: hidden;
    background: var(--bg-darker);
}

.gallery-channel-page .streamer-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: none;
    opacity: 1;
}


/* ---------- 2. Cabeçalho do canal -------------------------------
   O cartão sólido flutuando sobre o banner some; o conteúdo sobe e
   encosta no banner, com o avatar quebrando a borda.               */
/* O cartão sólido que flutuava sobre o banner é dispensado: o conteúdo
   sobe e encosta no banner, com o avatar quebrando a borda.
   ⚠️ O seletor precisa casar a especificidade de
   `body:not(.light-mode) .streamer-banner + .streamer-header`, que pinta
   o painel rgba(30,31,38,.95) — daí o `body:not(.light-mode)` aqui em vez
   de um !important. */
.gallery-channel-page .streamer-header,
body:not(.light-mode) .gallery-channel-page .streamer-banner+.streamer-header,
body.light-mode .gallery-channel-page .streamer-banner+.streamer-header {
    background: transparent;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 0 .25rem;
    margin-top: -62px;
    align-items: flex-end;
    gap: 1.25rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

/* Barra gradiente de 4px no topo do cartão — sem cartão, ela não faz sentido */
.gallery-channel-page .streamer-header::before {
    content: none;
    display: none;
}

/* O overlay já existe como elemento (.banner-overlay); evita degradê duplicado */
.gallery-channel-page .streamer-banner::after {
    content: none;
}

/* O degradê precisa ser agressivo: o nome e a descrição ficam sobre o terço
   inferior do banner, e cada streamer usa uma imagem diferente (rostos, texto,
   alto contraste). Fica quase sólido antes de chegar ao texto, para a
   legibilidade não depender da arte que o canal escolheu. */
.gallery-channel-page .streamer-banner .banner-overlay {
    position: absolute;
    /* A regra original fixa height:80% + bottom:0, então o degradê cobria só
       os 256px de cima de um banner de 320px e o nome/descrição caíam FORA
       dele, ilegíveis sobre a foto. Zerar as quatro âncoras e a altura. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    background: linear-gradient(180deg,
            rgba(18, 18, 18, 0) 0%,
            rgba(18, 18, 18, .18) 34%,
            rgba(18, 18, 18, .72) 62%,
            rgba(18, 18, 18, .95) 80%,
            var(--bg-color) 96%);
}

.gallery-channel-page .streamer-avatar img {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    border: 3px solid var(--bg-color);
    background: var(--bg-secondary);
}

.gallery-channel-page .streamer-info {
    flex: 1 1 320px;
    min-width: 0;
    padding-bottom: .25rem;
}

/* O CSS original aplica gradiente recortado no texto do h1, o que deixava
   o nome do canal roxo/verde e de baixo contraste sobre o banner. Volta a
   ser texto sólido. */
.gallery-channel-page .streamer-info h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.12;
    margin: 0 0 .3rem;
    text-wrap: balance;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.gallery-channel-page .streamer-description {
    color: var(--text-secondary);
    font-size: .92rem;
    max-width: 62ch;
    margin: 0 0 .85rem;
}

/* ---------- 3. Régua de estatísticas ----------------------------
   Três cartões grandes viram uma régua única e compacta: o acervo é
   contexto, não manchete.                                          */
.gallery-channel-page .stats-cards-row {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    overflow: hidden;
    margin-bottom: 1.75rem;
}

.gallery-channel-page .stat-card {
    flex: 1;
    display: block;
    padding: .85rem 1.1rem;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--border-color);
    border-radius: 0;
    min-width: 0;
}

.gallery-channel-page .stat-card:last-child {
    border-right: 0;
}

.gallery-channel-page .stat-card::after {
    display: none;
}

.gallery-channel-page .stat-card-icon {
    display: none;
}

.gallery-channel-page .stat-card-info {
    display: flex;
    flex-direction: column-reverse;
    gap: 1px;
}

.gallery-channel-page .stat-card-value {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--text-color);
}

.gallery-channel-page .stat-card-label {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.gallery-channel-page .stat-card-likes .stat-card-value {
    color: var(--danger-color);
}

.gallery-channel-page .stat-card-top .stat-card-value {
    color: var(--primary-light);
}

/* Nome de usuário pode ser longo: encolhe e corta em vez de estourar a régua */
.gallery-channel-page .stat-card-name {
    font-size: 1.05rem;
    letter-spacing: -.01em;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 4. Última criação (destaque) ------------------------
   Bloco novo: mostra o mecanismo do produto logo de cara — um
   comando do chat que virou imagem.                                */
/* Faixa horizontal compacta. Era um bloco 16:9 de largura total (~640px de
   altura), que empurrava a grade para fora da primeira tela — o destaque
   roubava o lugar do conteúdo que a pessoa veio ver. */
.latest-creation {
    margin-bottom: 1.5rem;
}

/* Rótulo com filete, como no protótipo */
.latest-creation>.latest-eyebrow {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 .75rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.latest-creation>.latest-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* Faixa larga com o texto SOBRE a imagem. A altura é travada (não é 16:9
   cheio, que daria ~650px e empurraria a grade para fora da tela) — a arte
   é cortada numa tira panorâmica e o prompt fica legível sobre o degradê. */
.latest-strip {
    position: relative;
    display: block;
    height: 290px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--bg-darker);
    cursor: pointer;
    transition: border-color var(--transition-speed);
}

.latest-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    display: block;
}

.latest-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
            rgba(13, 13, 13, .10) 0%,
            rgba(13, 13, 13, .25) 42%,
            rgba(13, 13, 13, .85) 74%,
            rgba(13, 13, 13, .96) 100%);
}

.latest-strip:hover,
.latest-strip:focus-visible {
    border-color: var(--primary-color);
    background: var(--card-bg-hover);
}

.latest-thumb {
    line-height: 0;
    background: var(--bg-darker);
    overflow: hidden;
}

.latest-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.latest-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.4rem 1.7rem;
}

.latest-prompt {
    font-family: var(--gal-mono);
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0 0 .6rem;
    color: var(--text-color);
    word-break: break-word;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .75);
    max-width: 86ch;
    /* Reserva 2 linhas para a digitação não empurrar o texto de baixo */
    min-height: 3.1em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.latest-caret {
    display: inline-block;
    width: .5ch;
    height: 1em;
    vertical-align: -.14em;
    margin-left: 2px;
    background: var(--primary-light);
    animation: latest-blink 1.05s steps(1) infinite;
}

@keyframes latest-blink {
    50% {
        opacity: 0;
    }
}

.latest-by {
    display: flex;
    align-items: center;
    gap: .55rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--text-secondary);
}

.latest-by strong {
    color: var(--text-color);
    font-weight: 600;
}

.latest-by .sep {
    color: var(--border-color);
}

@media (max-width: 860px) {
    .latest-strip {
        height: 240px;
    }

    .latest-text {
        padding: 1.1rem 1.2rem;
    }

    .latest-prompt {
        font-size: .92rem;
    }
}

@media (max-width: 560px) {
    .latest-strip {
        height: 210px;
    }

    .latest-text {
        padding: .9rem 1rem;
    }

    .latest-prompt {
        font-size: .84rem;
        min-height: 2.7em;
    }
}

/* ---------- Aviso de imagem nova em tempo real ----------------
   O canal gera imagem o tempo todo durante a live; quem está na galeria
   ficava com uma página estática. Reaproveita o endpoint que o overlay já
   consulta (/canais/<canal>/ultima-imagem) — sem backend novo. */
.novidade-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 140%);
    z-index: 60;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: .85rem;
    width: min(460px, calc(100vw - 32px));
    padding: .6rem .7rem;
    background: var(--card-bg);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--primary-rgb), .12);
    cursor: pointer;
    opacity: 0;
    transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
}

.novidade-toast.visivel {
    transform: translate(-50%, 0);
    opacity: 1;
}

.novidade-toast img {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 7px;
    display: block;
    background: var(--bg-darker);
}

.novidade-texto {
    min-width: 0;
}

.novidade-titulo {
    display: block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary-light);
    margin-bottom: 2px;
}

.novidade-prompt {
    display: block;
    font-family: var(--gal-mono);
    font-size: .78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.novidade-fechar {
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-size: 1.3rem;
    line-height: 1;
    padding: .3rem .5rem;
    border-radius: 6px;
    cursor: pointer;
}

.novidade-fechar:hover {
    color: var(--text-color);
    background: var(--card-bg-hover);
}

@media (prefers-reduced-motion: reduce) {
    .novidade-toast {
        transition: opacity .2s ease;
        transform: translate(-50%, 0);
    }

    .latest-text .latest-eyebrow::before {
        animation: none;
    }
}

/* Sem animação de digitação para quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
    .latest-caret {
        display: none;
    }
}

/* ---------- 5. Barra de controles -------------------------------
   Busca + filtros + ordenação numa faixa fixa ao rolar.            */
.gallery-channel-page .gallery-controls-wrapper {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(18, 18, 18, .92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin: 0 0 1.5rem;
    padding: .7rem 0;
}

.gallery-channel-page .gallery-filters-row {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}

.gallery-channel-page .search-box {
    flex: 1 1 240px;
    min-width: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: .5rem .75rem;
}

.gallery-channel-page .search-box:focus-within {
    border-color: var(--primary-color);
}

.gallery-channel-page .filter-buttons {
    display: flex;
    gap: 2px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 3px;
}

.gallery-channel-page .filter-btn {
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 600;
    padding: .4rem .8rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.gallery-channel-page .filter-btn:hover {
    color: var(--text-color);
}

.gallery-channel-page .filter-btn.active {
    background: var(--primary-color);
    color: #fff;
}

.gallery-channel-page .filter-select {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: .84rem;
    font-weight: 600;
    padding: .5rem .7rem;
    cursor: pointer;
}

/* ---------- 6. Grade e cartões ----------------------------------
   Antes: 3 colunas fixas acima de 768px, o que dava cartões de ~380px
   num container de 1200px — imagem grande demais e pouca densidade.
   Agora a grade preenche sozinha, chegando a 4 colunas no desktop.  */
/* O container tem max-width 1200px, o que dá ~1136px úteis. Com gap de 1.1rem
   (17.6px), 4 colunas = ~271px cada; 3 colunas davam 367px, imagem grande
   demais e pouca densidade. Os minmax precisam caber nessa largura real —
   um minmax(280px) aqui resulta em 3 colunas, não 4. */
.gallery-channel-page .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.1rem;
}

@media (min-width: 1024px) {
    .gallery-channel-page .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.gallery-channel-page .gallery-image-card {
    border-radius: var(--border-radius);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), border-color var(--transition-speed), background var(--transition-speed);
}

.gallery-channel-page .gallery-image-card:hover {
    transform: translateY(-4px);
    background: var(--card-bg-hover);
    border-color: var(--primary-color);
    box-shadow: var(--card-shadow-hover);
}

.gallery-channel-page .image-thumbnail-container {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bg-darker);
}

.gallery-channel-page .image-thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* O prompt é a graça da imagem: vira o texto principal do cartão,
   em monoespaçada, porque cada imagem nasceu de um comando do chat. */
.gallery-channel-page .image-info {
    padding: .8rem .85rem .7rem;
    gap: .55rem;
}

.gallery-channel-page .image-info .image-prompt {
    font-family: var(--gal-mono);
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    min-height: 3.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-channel-page .image-prompt .cmd-token {
    color: var(--primary-light);
    font-weight: 700;
}

.gallery-channel-page .image-meta-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .74rem;
    color: var(--text-secondary);
}

/* A regra original faz de .image-requester um flex container, e nesse caso o
   text-overflow não se aplica ao texto — nomes longos eram cortados no meio,
   sem reticências ("pirocossaurosem"). Voltando a bloco, o ellipsis funciona. */
.gallery-channel-page .image-meta-row .image-requester {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-channel-page .image-meta-row .image-requester i {
    vertical-align: -1px;
    margin-right: .2rem;
}

.gallery-channel-page .image-meta-row .image-date {
    flex: none;
}

.gallery-channel-page .image-type-badge {
    font-family: var(--gal-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(13, 13, 13, .8);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 3px 7px;
    border-radius: 4px;
}

/* Curtir: precisa ser visível para ser usado (o acervo é enorme e as
   curtidas são quase nenhuma justamente por falta de affordance). */
.gallery-channel-page .btn-like-channel {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    background: none;
    border: 0;
    padding: .25rem .4rem;
    border-radius: 5px;
    cursor: pointer;
    transition: color var(--transition-speed), background var(--transition-speed);
}

.gallery-channel-page .btn-like-channel:hover {
    color: var(--danger-color);
    background: rgba(255, 71, 87, .1);
}

.gallery-channel-page .btn-like-channel.liked {
    color: var(--danger-color);
}

/* Estado de filtro: o JS aplica .filtered-out */
.gallery-channel-page .gallery-item.filtered-out {
    display: none;
}

@media (max-width: 768px) {
    .gallery-channel-page .streamer-banner {
        height: 180px;
    }

    /* No mobile a regra original vira flex-direction:column. O
       align-items:flex-end herdado do desktop empurrava TUDO para a direita
       (avatar solto no canto), e o gap de 1.5rem + padding somavam ~180px de
       vão morto entre os botões e a régua de estatísticas. */
    .gallery-channel-page .streamer-header,
    body:not(.light-mode) .gallery-channel-page .streamer-banner+.streamer-header,
    body.light-mode .gallery-channel-page .streamer-banner+.streamer-header {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: .85rem;
        padding: 0 .25rem;
        margin-top: -46px;
    }

    .gallery-channel-page .streamer-avatar img {
        width: 84px;
        height: 84px;
    }

    .gallery-channel-page .streamer-info {
        flex: 1 1 auto;
        padding-bottom: 0;
    }

    .gallery-channel-page .streamer-info h1 {
        font-size: 1.45rem;
    }

    .gallery-channel-page .streamer-actions {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
    }

    .gallery-channel-page .stats-cards-row {
        flex-wrap: wrap;
    }

    .gallery-channel-page .stat-card {
        flex: 1 1 50%;
        border-bottom: 1px solid var(--border-color);
    }
}

@media (prefers-reduced-motion: reduce) {

    .gallery-channel-page .gallery-image-card,
    .gallery-channel-page .btn-like-channel {
        transition: none;
    }
}