/* Notificacoes de venda no canto superior direito, estilo macOS.
   Estrutura:  #gbtoasts  >  .gbt-top (botao "Apagar todas")  +  .gbt-list (a pilha, rolavel)
   O botao fica FORA da area rolavel, entao ele nao some quando a pilha cresce. */
#gbtoasts{
  position:fixed; top:76px; right:18px; z-index:9000;
  width:352px; max-width:calc(100vw - 28px);
  display:flex; flex-direction:column; gap:9px;
  max-height:calc(100vh - 96px);
  pointer-events:none;
}
#gbtoasts .gbt-top{ flex:none; display:flex; justify-content:flex-end; pointer-events:auto }
#gbtoasts .gbt-clear{
  cursor:pointer; font-size:12px; font-weight:600; letter-spacing:.01em;
  color:var(--muted); background:rgba(28,28,30,.72); border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  border-radius:999px; padding:6px 14px;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
}
#gbtoasts .gbt-clear:hover{ color:var(--text); border-color:var(--accent) }
:root[data-theme="light"] #gbtoasts .gbt-clear{
  background:rgba(255,255,255,.82); border-color:rgba(20,26,38,.12);
  box-shadow:0 6px 18px -10px rgba(20,26,38,.35);
}

/* a pilha: rola sozinha quando passa da altura da tela, com a barra escondida */
#gbtoasts .gbt-list{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; gap:10px;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:2px 2px 6px 2px;
}
#gbtoasts .gbt-list::-webkit-scrollbar{ width:0; height:0 }

#gbtoasts .gbt{
  flex:none; pointer-events:auto; position:relative;
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 14px; border-radius:17px;
  /* VIDRO FOSCO — e isto que da a cara de notificacao do macOS */
  background:rgba(28,28,30,.72);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 2px rgba(0,0,0,.22), 0 18px 40px -16px rgba(0,0,0,.60);
  transition:opacity .2s ease, transform .2s ease;
}
/* so a RECEM-CHEGADA anima. As que voltaram depois de trocar de pagina aparecem paradas,
   senao a tela inteira "pisca" a cada clique no menu. */
#gbtoasts .gbt-novo{ animation:gbtIn .34s cubic-bezier(.16,1,.3,1) }
@keyframes gbtIn{ from{ opacity:0; transform:translateX(26px) scale(.96) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ #gbtoasts .gbt-novo{ animation:none } }
#gbtoasts .gbt.out{ opacity:0; transform:translateX(18px) scale(.97) }

:root[data-theme="light"] #gbtoasts .gbt{
  background:rgba(255,255,255,.80); border-color:rgba(20,26,38,.11);
  box-shadow:0 1px 2px rgba(20,26,38,.07), 0 16px 36px -18px rgba(20,26,38,.32);
}
/* navegador sem vidro fosco: volta pro fundo solido do tema, pra nunca ficar
   um retangulo semitransparente ilegivel por cima do painel */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #gbtoasts .gbt, #gbtoasts .gbt-clear{ background:var(--surface); border-color:var(--line) }
  :root[data-theme="light"] #gbtoasts .gbt,
  :root[data-theme="light"] #gbtoasts .gbt-clear{ background:var(--surface) }
}

#gbtoasts .gbt-ic{ flex:none; width:38px; height:38px; border-radius:11px; overflow:hidden; background:var(--surface2) }
#gbtoasts .gbt-ic img{ width:100%; height:100%; object-fit:cover; display:block }
#gbtoasts .gbt-txt{ flex:1; min-width:0; padding-right:44px }
#gbtoasts .gbt-t{ font-size:13.5px; font-weight:700; line-height:1.32; color:var(--text) }
#gbtoasts .gbt-src{ font-size:12.5px; color:var(--muted); line-height:1.3 }
#gbtoasts .gbt-b{ font-size:13px; color:var(--text); line-height:1.38; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#gbtoasts .gbt-when{ position:absolute; top:13px; right:14px; font-size:11.5px; color:var(--muted); white-space:nowrap }
#gbtoasts .gbt-x{
  position:absolute; top:32px; right:10px; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface2); color:var(--muted);
  font-size:13px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s;
  display:grid; place-items:center; padding:0;
}
#gbtoasts .gbt:hover .gbt-x, #gbtoasts .gbt:focus-within .gbt-x{ opacity:1 }
#gbtoasts .gbt-x:hover{ color:var(--text); border-color:var(--accent) }

/* celular: ocupa a largura e nao encosta no menu de baixo */
@media (max-width:720px){
  #gbtoasts{ top:66px; right:10px; left:10px; width:auto; max-height:calc(100vh - 150px) }
  #gbtoasts .gbt-when{ top:12px }
}

/* ---- correcoes vindas da revisao adversarial ---- */

/* ACHADO: no celular a gaveta do menu abre por cima da tela e o aviso (z-index alto)
   tapava os itens, roubando o toque. Enquanto a gaveta estiver aberta, o aviso some. */
#gbtoasts.gbt-oculto{ display:none !important }

/* ACHADO: o x nascia com opacity:0 e so aparecia no :hover. Em celular nao existe hover,
   entao nao havia jeito de fechar um aviso. Em aparelho sem hover ele fica sempre visivel. */
@media (hover: none){
  #gbtoasts .gbt-x{ opacity:1 }
  #gbtoasts .gbt-txt{ padding-right:46px }
}