/* ═══════════════════════════════════════════════════════════════════════
   lc-vidro.css — o material de vidro líquido, no site inteiro
   ═══════════════════════════════════════════════════════════════════════
   O dono: *"deixa todo o site no tema de vidro líquido parecido com o da
   Apple e com o que você fez anteriormente"*, e *"faça vidro líquido mas
   deixa bonito também"*.

   ⚠️ O QUE FAZ UM VIDRO PARECER VIDRO — e não um retângulo desbotado. São
   quatro coisas, e faltar UMA já estraga:

   1. DESFOQUE COM SATURAÇÃO E BRILHO ACIMA DE 100%. Vidro concentra a luz
      que atravessa. Só desfocar dá plástico fosco; é a saturação que dá
      vida ao que está atrás.
   2. UM FIO DE LUZ NA BORDA (inset de meio pixel). É a borda que diz "isto
      tem espessura". Sem ela, translúcido lê como "apagado".
   3. UM REALCE NO ALTO. A luz bate em cima; é o que dá volume.
   4. SOMBRA POR BAIXO. Vidro flutua sobre o conteúdo, não é pintado nele.

   ⚠️ E O QUE **NÃO** LEVA VIDRO: o conteúdo. Texto de documento, célula de
   planilha, post-it — nada disso é cromo. Desfocar o que a pessoa está
   lendo é o erro clássico de quem aplica esse material no site todo: fica
   bonito na captura de tela e insuportável de usar. Aqui o vidro é só a
   MOLDURA: barra, menu, janela, chip, cartão.

   ⚠️ TUDO DENTRO DE `@supports`. Sem `backdrop-filter` o navegador não
   desfoca nada — e aí "translúcido" vira só um retângulo lavado com o
   conteúdo aparecendo cru por trás. Quem não tem o recurso fica com o
   fundo sólido de sempre, que é o certo.

   ⚠️ SAÍDA DE EMERGÊNCIA: `<html class="sem-vidro">` desliga tudo numa
   página só. Tema global sem interruptor local é uma decisão que não dá
   pra voltar atrás sem edição em massa.

   ⚠️ NADA AQUI USA `!important` À TOA. Cada página tem a sua paleta, e a
   ideia é que o vidro se pinte COM a cor de cada uma (via color-mix nas
   variáveis que já existem), não que ele imponha a mesma cor a todas.
   ═══════════════════════════════════════════════════════════════════════ */

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html:not(.sem-vidro) {
    /* a receita, num lugar só — mexer aqui muda o site inteiro */
    --vd-desfoque: blur(18px) saturate(190%) brightness(1.08);
    --vd-desfoque-leve: blur(12px) saturate(160%) brightness(1.05);
    --vd-borda: inset 0 0 0 .5px rgba(255, 255, 255, .16);
    --vd-realce: inset 0 1px 0 rgba(255, 255, 255, .22);
    --vd-sombra: 0 10px 34px rgba(0, 0, 0, .34);
    --vd-sombra-leve: 0 4px 16px rgba(0, 0, 0, .22);
  }

  /* ── 1. as JANELAS (modais) ───────────────────────────────────────────
     ⚠️ O véu por trás fica MAIS ESCURO, não mais claro. Vidro sobre vidro
     não separa nada: é o contraste com o fundo escurecido que faz a janela
     parecer estar na frente. */
  html:not(.sem-vidro) .ov {
    background: rgba(6, 8, 14, .62);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
  }
  /* ⚠️⚠️ `:not(table)` NO `.sheet` — E ELE NÃO É DETALHE.
     O dono: *"corrige o AI Sheets, que as células ficam pretas com o fundo
     branco"*. Fui eu que causei: escrevi `.sheet` pensando no painel que
     desliza de baixo, e a GRADE DA PLANILHA é `table.sheet`. A regra pintava
     a tabela inteira com o vidro escuro (`--bg2` a 72%) por cima do
     `background:#fff` dela — e o texto, que é escuro de propósito, sumia.
     Nome de classe curto e genérico é o jeito mais rápido de um tema global
     invadir uma tela que não tinha nada a ver com ele. */
  html:not(.sem-vidro) .modal,
  html:not(.sem-vidro) .sheet:not(table),
  html:not(.sem-vidro) .modal-box {
    background: color-mix(in srgb, var(--bg2, #0e1322) 72%, transparent);
    -webkit-backdrop-filter: var(--vd-desfoque);
    backdrop-filter: var(--vd-desfoque);
    border-color: color-mix(in srgb, #fff 14%, transparent);
    box-shadow: var(--vd-borda), var(--vd-realce), var(--vd-sombra);
  }

  /* ── 1b. AS TELAS DOS MÓDULOS ────────────────────────────────────────
     O dono: *"deixa também a tela do Brushes neste estilo vidro líquido, e
     as outras telas também"*.

     ⚠️ POR QUE ELAS FICARAM DE FORA ATÉ AGORA: a regra acima casa `.ov` e
     `.modal`, que são as classes dos cinco apps. Mas cada módulo compartilhado
     nasceu com o SEU próprio id — `#lcb-ov` no Brushes, `#lcbu-ov` na busca de
     fotos, `#lclinha-ov` na linha do tempo, e por aí. Nenhum deles usa as
     classes, então o vidro passou ao largo de todos: o site ficou com metade
     das janelas em vidro e metade em bloco opaco, e a diferença aparece
     justamente quando se abre uma depois da outra.

     ⚠️ SÃO DOIS PAPÉIS DIFERENTES, e a lista precisa separá-los: o `-ov` é o
     VÉU (o fundo escurecido que cobre a página) e o `-cx`/`.cx` é a JANELA.
     Dar desfoque forte ao véu apagaria a página inteira; dar véu à janela
     tiraria dela o contraste que a faz parecer estar na frente. */
  html:not(.sem-vidro) #lcb-ov,
  html:not(.sem-vidro) #lcbu-ov,
  html:not(.sem-vidro) #lclinha-ov,
  html:not(.sem-vidro) #lcm-ov,
  html:not(.sem-vidro) #lcselo-ov,
  html:not(.sem-vidro) #lcshare-ov,
  html:not(.sem-vidro) #lc-cofre-ov,
  html:not(.sem-vidro) #lc-perfil-ov,
  html:not(.sem-vidro) #lc-cerebro,
  html:not(.sem-vidro) #lc-bv,
  html:not(.sem-vidro) .lcup-fundo {
    background: rgba(6, 8, 14, .62);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
  }

  /* as janelas de dentro desses véus */
  html:not(.sem-vidro) #lcb-cx,
  html:not(.sem-vidro) #lcbu-cx,
  html:not(.sem-vidro) #lclinha-cx,
  html:not(.sem-vidro) #lcm-cx,
  html:not(.sem-vidro) #lcselo-cx,
  html:not(.sem-vidro) #lc-cofre-cx,
  html:not(.sem-vidro) #lc-perfil-cx,
  html:not(.sem-vidro) #lc-bv .cx,
  html:not(.sem-vidro) .lcup,
  html:not(.sem-vidro) #lc-cerebro .lcc-caixa {
    background: color-mix(in srgb, var(--bg2, #0e1322) 72%, transparent);
    -webkit-backdrop-filter: var(--vd-desfoque);
    backdrop-filter: var(--vd-desfoque);
    border-color: color-mix(in srgb, #fff 14%, transparent);
    box-shadow: var(--vd-borda), var(--vd-realce), var(--vd-sombra);
  }

  /* ── 2. os MENUS ─────────────────────────────────────────────────── */
  html:not(.sem-vidro) #me-menu,
  html:not(.sem-vidro) #ctx-menu,
  html:not(.sem-vidro) #lc-dock-painel,
  html:not(.sem-vidro) .menu-flutuante,
  html:not(.sem-vidro) #export-menu {
    background: color-mix(in srgb, var(--bg2, #0e1322) 70%, transparent);
    -webkit-backdrop-filter: var(--vd-desfoque);
    backdrop-filter: var(--vd-desfoque);
    border-color: color-mix(in srgb, #fff 14%, transparent);
    box-shadow: var(--vd-borda), var(--vd-realce), var(--vd-sombra);
  }

  /* ── 3. a BARRA DE CIMA ───────────────────────────────────────────────
     ⚠️ É AQUI QUE O MATERIAL MAIS APARECE: o conteúdo rola POR BAIXO da
     barra e some desfocado. É o gesto que faz a tela parecer um aplicativo
     em vez de uma página. */
  html:not(.sem-vidro) .top,
  html:not(.sem-vidro) #topbar,
  html:not(.sem-vidro) .topbar,
  html:not(.sem-vidro) .rc-head {
    /* ⚠️ 74%, e não 62%. Olhando a tela de verdade: com o grid de documentos
       rolando por baixo, as MINIATURAS SÃO PAPEL BRANCO — e a 62% a barra
       clareava tanto que os chips perdiam contraste justamente quando passa
       um documento atrás. O desfoque continua visível; o que subiu foi só o
       piso de opacidade, que é o que garante que a barra funcione sobre
       QUALQUER conteúdo, não só sobre o fundo escuro. */
    background: color-mix(in srgb, var(--bg1, #070a12) 74%, transparent);
    -webkit-backdrop-filter: var(--vd-desfoque);
    backdrop-filter: var(--vd-desfoque);
    border-bottom-color: color-mix(in srgb, #fff 10%, transparent);
    box-shadow: var(--vd-realce), 0 1px 20px rgba(0, 0, 0, .22);
  }

  /* ── 4. os CHIPS e os botões de moldura ──────────────────────────── */
  html:not(.sem-vidro) .chip,
  html:not(.sem-vidro) .fbtn,
  html:not(.sem-vidro) .btn.ghost,
  html:not(.sem-vidro) .filterbar .fbtn {
    background: color-mix(in srgb, var(--bg3, #182031) 52%, transparent);
    -webkit-backdrop-filter: var(--vd-desfoque-leve);
    backdrop-filter: var(--vd-desfoque-leve);
    border-color: color-mix(in srgb, #fff 13%, transparent);
    box-shadow: var(--vd-borda);
  }
  /* ⚠️ O BOTÃO LIGADO NÃO VIRA VIDRO. Ele é o estado escolhido: precisa de
     cor cheia pra se separar dos outros. Vidro em tudo apaga a hierarquia,
     e aí a tela fica bonita e ilegível. */
  html:not(.sem-vidro) .fbtn.on,
  html:not(.sem-vidro) .chip.on {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* ── 5. os CARTÕES da lista ───────────────────────────────────────────
     ⚠️ AQUI NÃO ENTRA DESFOQUE, e a razão é o que se vê na tela: atrás dos
     cartões existe um FUNDO LISO. Desfocar um degradê uniforme não muda um
     pixel — o efeito é invisível — e mesmo assim custa GPU em VINTE
     elementos ao mesmo tempo, que é onde a rolagem do celular morre.
     Desfoque só se paga quando há CONTEÚDO variado atrás: barra, menu,
     janela. Nos cartões, quem faz o material é a translucidez, o fio de luz
     e a sombra — e esses são de graça.
     ⚠️ E a translucidez fica DISCRETA (86%): cartão muito transparente
     deixa o degradê da página vazar por baixo do texto do documento, que é
     o conteúdo que a pessoa veio ler. */
  html:not(.sem-vidro) .doc,
  html:not(.sem-vidro) .deck,
  html:not(.sem-vidro) .sh,
  html:not(.sem-vidro) .fm,
  html:not(.sem-vidro) .fr,
  html:not(.sem-vidro) .newcard,
  html:not(.sem-vidro) .card {
    background: color-mix(in srgb, var(--bg2, #0e1322) 86%, transparent);
    border-color: color-mix(in srgb, #fff 11%, transparent);
    box-shadow: var(--vd-borda), var(--vd-sombra-leve);
  }

  /* ── 6. O CONTEÚDO CONTINUA SÓLIDO ───────────────────────────────────
     ⚠️ ESTA É A REGRA MAIS IMPORTANTE DO ARQUIVO. Papel de documento,
     grade de planilha, quadro e slide são o TRABALHO da pessoa — vidro ali
     é ruído sobre o que ela está tentando ler. E como as regras acima
     pegam por classe, um `.card` dentro do papel herdaria vidro sem
     ninguém pedir. Aqui a herança para. */
  html:not(.sem-vidro) .paper,
  html:not(.sem-vidro) #page,
  html:not(.sem-vidro) .stage,
  html:not(.sem-vidro) #grid,
  html:not(.sem-vidro) .grid,
  html:not(.sem-vidro) .gridwrap,
  html:not(.sem-vidro) table.sheet,
  html:not(.sem-vidro) table.sheet td,
  html:not(.sem-vidro) table.sheet th,
  html:not(.sem-vidro) #board,
  html:not(.sem-vidro) #canvas,
  html:not(.sem-vidro) .paper *,
  html:not(.sem-vidro) #page *,
  html:not(.sem-vidro) #board .it {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* ⚠️ E O FUNDO DA GRADE VOLTA AO BRANCO, explicitamente. Tirar o desfoque
     não desfaz a COR que a regra do vidro já tinha aplicado — foi por isso
     que a planilha ficou escura mesmo com o reset acima existindo: ele só
     mexia no `backdrop-filter`. O `#grid` do reset também não pegava nada,
     porque no AI Sheets a grade é `.grid`, com ponto. */
  html:not(.sem-vidro) table.sheet {
    background: #fff;
    color: #1a1d26;
  }

  /* ── 7. quem pediu menos movimento/efeito ────────────────────────────
     ⚠️ Desfoque de fundo é trabalho de GPU contínuo. Em aparelho fraco ou
     com bateria no fim, o navegador liga o modo de economia — e aí o certo
     é entregar a versão sólida em vez de uma tela travando bonito. */
  @media (prefers-reduced-transparency: reduce) {
    html .modal, html .sheet, html .modal-box,
    html #me-menu, html #ctx-menu, html .top, html #topbar,
    html .chip, html .fbtn, html .btn.ghost,
    html .doc, html .deck, html .sh, html .fm, html .fr, html .newcard, html .card {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}