/*
 * Vidro na barra superior · Módulo Componentes (15)
 *
 * A barra do app (Notificações + Lembretes + balão do usuário) ganha o efeito de vidro fosco (glassmorphism): fundo translúcido, desfoque do que passa
 * por trás, fio de luz na borda e sombra bem leve. A barra fica presa no topo; o conteúdo rola por baixo dela e aparece borrado através do vidro.
 * Os dois cartões de dentro (.bx, .lemb) ficam translúcidos também, como pastilhas de vidro sobre o vidro. Os painéis que abrem da barra (notificações, lembretes, usuário) ficam sólidos, sem vidro.
 * Sem cores novas: o vidro usa a tinta e o papel de cada modo (claro, escuro, leitura); só o brilho de fundo usa o Berry e o Bronze da marca, bem suave.
 *
 * Cada tela ganha uma linha de link, DEPOIS do identidade-quati.css:
 *
 *     <link rel="stylesheet" href="../../geral/componentes/vidro-barra.css">
 *
 * Ajuste do efeito: só os tokens --vidro-* logo abaixo (opacidade, desfoque, brilho). Navegador sem backdrop-filter: o fundo fica quase opaco (legível do mesmo jeito).
 */

/* ---------- Modo claro ---------- */
html:root {
  --vidro-fundo: rgb(253 251 247 / .58);
  --vidro-fio: rgb(255 255 255 / .75);
  --vidro-base: rgb(74 40 16 / .10);
  --vidro-card: rgb(255 255 255 / .46);
  --vidro-card-fio: rgb(255 255 255 / .8);
  --vidro-sombra: 0 8px 28px rgb(74 40 16 / .08), 0 1px 0 rgb(255 255 255 / .6) inset;
  --vidro-desfoque: 18px;
  --vidro-aura-1: rgb(170 68 101 / .16);   /* Berry */
  --vidro-aura-2: rgb(214 166 123 / .30);  /* Bronze */
}

/* ---------- Modo escuro (o fundo do vidro é a página do escuro do Claude, #262624) ---------- */
html:root[data-theme="dark"] {
  --vidro-fundo: rgb(38 38 36 / .55);
  --vidro-fio: rgb(255 255 255 / .12);
  --vidro-base: rgb(0 0 0 / .45);
  --vidro-card: rgb(255 255 255 / .06);
  --vidro-card-fio: rgb(255 255 255 / .14);
  --vidro-sombra: 0 8px 28px rgb(0 0 0 / .35), 0 1px 0 rgb(255 255 255 / .07) inset;
  --vidro-aura-1: rgb(244 169 190 / .14);
  --vidro-aura-2: rgb(214 166 123 / .14);
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]):not([data-theme="leitura"]):not([data-theme="quati"]):not([data-theme="game"]) {
    --vidro-fundo: rgb(38 38 36 / .55);
    --vidro-fio: rgb(255 255 255 / .12);
    --vidro-base: rgb(0 0 0 / .45);
    --vidro-card: rgb(255 255 255 / .06);
    --vidro-card-fio: rgb(255 255 255 / .14);
    --vidro-sombra: 0 8px 28px rgb(0 0 0 / .35), 0 1px 0 rgb(255 255 255 / .07) inset;
    --vidro-aura-1: rgb(244 169 190 / .14);
    --vidro-aura-2: rgb(214 166 123 / .14);
  }
}

/* ---------- Modo Quati (base #120C0A) ---------- */
html:root[data-theme="quati"] {
  --vidro-fundo: rgb(27 19 17 / .55);
  --vidro-fio: rgb(255 255 255 / .12);
  --vidro-base: rgb(0 0 0 / .45);
  --vidro-card: rgb(255 255 255 / .06);
  --vidro-card-fio: rgb(255 255 255 / .14);
  --vidro-sombra: 0 8px 28px rgb(0 0 0 / .35), 0 1px 0 rgb(255 255 255 / .07) inset;
  --vidro-aura-1: rgb(244 169 190 / .14);
  --vidro-aura-2: rgb(214 166 123 / .14);
}

/* ---------- Modo Game (o visor de fósforo verde): o vidro fica quase preto, com o fio e a aura em verde ---------- */
html:root[data-theme="game"] {
  --vidro-fundo: rgb(8 10 2 / .62);
  --vidro-fio: rgb(214 242 60 / .18);
  --vidro-base: rgb(0 0 0 / .55);
  --vidro-card: rgb(214 242 60 / .05);
  --vidro-card-fio: rgb(214 242 60 / .16);
  --vidro-sombra: 0 8px 28px rgb(0 0 0 / .5), 0 1px 0 rgb(214 242 60 / .10) inset;
  --vidro-aura-1: rgb(214 242 60 / .12);
  --vidro-aura-2: rgb(255 211 74 / .10);
}

/* ---------- Modo leitura ---------- */
html:root[data-theme="leitura"] {
  --vidro-fundo: rgb(247 245 238 / .6);
  --vidro-card: rgb(255 255 255 / .4);
  --vidro-aura-1: rgb(142 52 83 / .10);
  --vidro-aura-2: rgb(207 164 122 / .22);
}

/* ---------- O brilho de fundo: dá cor ao que o vidro borra (fixo no topo da janela, então está sempre por trás da barra) ---------- */
html:root .app {
  background-image:
    radial-gradient(520px 170px at 10% 0, var(--vidro-aura-2), transparent 72%),
    radial-gradient(620px 190px at 62% 0, var(--vidro-aura-1), transparent 72%),
    radial-gradient(460px 170px at 100% 0, var(--vidro-aura-2), transparent 72%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ---------- A barra de vidro ---------- */
html:root .topbar {
  position: sticky;
  top: 8px;
  z-index: 40;
  margin: 8px 10px 0;
  padding: 5px 8px;
  border: 1px solid var(--vidro-fio);
  border-radius: 16px;
  background: var(--vidro-fundo);
  -webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(165%);
  backdrop-filter: blur(var(--vidro-desfoque)) saturate(165%);
  box-shadow: var(--vidro-sombra);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:root .topbar { background: color-mix(in srgb, var(--surface) 94%, transparent); }
}

/* ---------- As pastilhas de dentro (Notificações e Lembretes) ---------- */
html:root .topbar .bx,
html:root .topbar .lemb {
  background: var(--vidro-card);
  border-color: var(--vidro-card-fio);
  box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset;
}
/* Os painéis que abrem a partir da barra (Notificações, Lembretes, cartão do usuário) NÃO são de vidro: ficam sólidos */
html:root .topbar .bx-painel,
html:root .topbar .usr-card {
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--line);
}
html:root .topbar .usr-bal { border-color: var(--vidro-card-fio); }

/* Quem prefere menos transparência no sistema recebe o vidro sem desfoque (quase opaco) */
@media (prefers-reduced-transparency: reduce) {
  html:root .topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }
}