:root{
  --bg:#0b1220;           /* LabQ dark */
  --card:#121a2b;
  --card-alt:#0e1626;
  --border:#243049;
  --accent:#49a7ff;
  --text:#e8eef9;
  --muted:#9fb3d1;
  --chip:#19233a;
  --radius:18px;
  --gap:12px;
  --scroll-damping: 0.07;
  --scroll-duration: 8000ms;
}

*{box-sizing:border-box}

html, body {
  height: 100%;
  /* não use overflow:hidden aqui */
}

#app, main {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;   /* ou 100svh (mais estável no iOS) */
}

header {                /* se tiver um header fixo no topo */
  flex: 0 0 auto;
}

/* 👉 o scroller de fato */
#feedViewport {
  flex: 1 1 auto;
  min-height: 0;                     /* ESSENCIAL em flex */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /*	contain: content;*/
  /* remova por ora: contain: size layout paint; */
}


body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  overscroll-behavior: none;
}

header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(11,18,32,.9), rgba(11,18,32,.6));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex; align-items:center; gap:10px;
  max-width:900px; margin:0 auto; padding:10px 12px;
}
.brand{font-weight:700; letter-spacing:.3px}
.badge{background:var(--chip); border:1px solid var(--border); padding:2px 8px; border-radius:999px; font-size:12px; color:var(--muted)}

main{
  overflow-y: auto;
  height: 100vh;
  max-width:900px; margin:0 auto; padding:12px;
}

#mainScroll {
  position: relative;
  overflow-y: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
}


/* Garante que o banner role junto com o conteúdo */




.banner {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 16px 0;
}

/* Drawer (filtros) */
/* Drawer (filtros) */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(92vw, 420px);
  background: var(--card);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform 0.4s ease-in-out,
    opacity 0.35s ease-in-out;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  will-change: transform, opacity;
}
.drawer.open {
  transform: translateX(0);
  opacity: 1;
}

.dropdown-list {
  display: none;
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 4px;
  width: calc(100% - 4px);
  z-index: 100;
  list-style: none;
  padding: 4px 0;
}

.dropdown-list li {
  padding: 6px 10px;
  cursor: pointer;
}

.dropdown-list li:hover {
  background: var(--card-alt);
}

.dropdown-list {
  overscroll-behavior: contain; /* impede o scroll "vazar" pro pai */
  -webkit-overflow-scrolling: touch; /* mantém scroll suave no iOS */
  max-height: 50vh; /* exemplo, limite de altura */
  overflow-y: auto;
  touch-action: pan-y;              /* permite rolagem vertical por touch */
}

.check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}




/* cabeçalho fixo dentro da gaveta */
.drawer header {
  position: sticky;
  top: 0;
  background: var(--card);
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

/* corpo interno */
.drawer .content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}

.drawer .row {
  position: relative;                 /* <-- para ancorar dropdowns na gaveta */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* campos */
select,
button,
input {
  background: var(--card-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}


button.primary{
  background: linear-gradient(180deg, #63b3ff, #4898e9);
  color:#081120; border:none; font-weight:700;
}
button.ghost{
  background: linear-gradient(180deg, #63b3ff, #4898e9);
  color:#081120; border:none; font-weight:700;
}

/* FAB */
.fab{
  position:fixed; right:14px; bottom:14px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background: linear-gradient(180deg, #63b3ff, #4898e9);
  color:#081120; border:none; font-weight:900;
  box-shadow: 0 10px 30px rgba(73,167,255,.35);
}

/* Feed/Virtualização */
#feedViewport {
  position: relative;
  flex: 1 1 auto;
  overflow: visible;   /* não cria camada sobre o banner */
  z-index: 0;
}
#spacer{ height:0px; }
#pool{ position:absolute; left:0; top:0; width:100%; }

.card{
  width:100%;
  background: linear-gradient(180deg, var(--card), var(--card-alt));
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:10px;
  margin: 0 0 var(--gap) 0;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

.card .top{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}

.logo {
  width: 20%;
  aspect-ratio: 1 / 1; /* Garante que altura = largura */
  border-radius: 50%; /* Torna circular */
  object-fit: cover; /* ou 'contain' dependendo do efeito desejado */
  background: white;
  border: 1px solid var(--border);
}

.inst{ font-weight:700; font-size:14px; color:#def }

/* usa o mesmo layout do topo da frente */
.top2{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.logo_back{
  width:50px; height:50px; border-radius:8px; object-fit:contain;
  background:#0b1220; border:1px solid var(--border);
}
.inst_back{ font-weight:700; font-size:14px; color:#def }

.hero{
  width:100%;
  aspect-ratio: 800/340; /* garante 800x340 */
  border-radius:12px; border:1px solid var(--border);
  object-fit:cover; display:block; background:#0b1220; margin:8px 0;
}

.title{
  font-size:16px; font-weight:800; margin:6px 0 2px;
}

.meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; margin-bottom:8px;
  color: var(--muted); font-size:13px;
}
.meta .chip{ background:var(--chip); padding:4px 8px; border-radius:999px; border:1px solid var(--border); }

.caption{ font-size:11px; color:var(--muted); margin:2px 0 2px }
.value{ font-size:14px; font-weight:700 }

.actions{ display:flex; justify-content:space-between; gap:8px; margin-top:8px; }
.link{ color:#9bd1ff; text-decoration:underline; word-break:break-all }

/* Flip — compatível com .card atual */
.flip{
  position: relative;
  perspective: 1200px;
  padding:10px;
  /* usa a altura do conteúdo do .card; não force height aqui */
}

.flip-inner{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(0.25,1,0.5,1);
  width: 100%;
  /* Garante que exista “corpo” pro verso ocupar.
     Se algum card ficar muito baixo, aumente este mínimo. */
  min-height: 260px;
}

.flip-inner.flipped{ transform: rotateY(180deg); }

.face{
  /* ESSENCIAL: esconde o “lado de trás” de cada face (sem espelhar imagem) */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* Mantém a frente no fluxo e o verso sobreposto sem colapsar altura */
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, var(--card), var(--card-alt));
}

/* Verso sobrepõe a frente e aparece “de pé” quando flipado */
.face.back{
  position: absolute;
  inset: 0;                   /* cobre exatamente a área da frente */
  transform: rotateY(180deg);
  background: var(--card);
  padding: 12px;
  overflow-y: auto;
}

/* Evita artefatos em alguns navegadores: fade de reforço */
.flip-inner .back{ opacity: 0; transition: opacity .2s ease; }
.flip-inner.flipped .back{ opacity: 1; }
.flip-inner.flipped .front{ opacity: 0; }


/* util */
.hidden{ display:none !important; }


/* === FEED VIRTUALIZADO === */
#feedViewport {
  position: relative;
  height: 100dvh;                 /* o feed ocupa a viewport toda */
  overflow-y: auto;               /* QUEM ROLA É O FEED */
  -webkit-overflow-scrolling: touch;
  animation: smooth;
}

#spacer {
  position: relative;             /* recebe a altura virtual via JS */
  min-height: 1px;
}

#pool {
	  will-change: transform;
  position: absolute;             /* fica “por cima” do spacer */
  top: 0; left: 0; right: 0;
  overflow: visible;              /* o pool não deve rolar */
  will-change: transform;         /* performance para translateY */
}


/* o card de banner tem altura fixa dada pelo JS (inline) */
.banner-card{
  padding: 0 !important;      /* evita que padding reduza o espaço interno */
  overflow: hidden;            /* nada vaza para fora */
}

/* wrapper ocupa 100% da área útil do card */
.banner-card .contem_banner{
  width: 100%;
  height: 100%;                /* <<< aqui é 100%, não auto */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* a imagem preenche o card, mantendo proporção, sem cortar */
.banner-card .contem_banner img.banner-img{
  width: 100%;
  height: 100%;
  object-fit: contain;         /* use cover se quiser preencher cortando */
  display: block;
}

.banner-card{
  overflow: hidden;
}
.banner-card .contem_banner{
  width: 100%;
  height: 100%;
  display:flex; align-items:center; justify-content:center;
}
.banner-card .contem_banner .banner-img{
  width:100%; height:100%; object-fit:contain; display:block;
}

/* card de banner: nada de paddings para não “cortar” a imagem */
.card.banner-card { padding: 0 !important; }

/* wrapper do banner ocupa 100% do card */
.card.banner-card .contem_banner{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;   /* centra vertical */
  justify-content: center; /* centra horizontal */
}

/* imagem adapta ao card sem estourar */
.card.banner-card .banner-img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* mantém proporção, sem crop */
  display: block;
}


.card.banner-card { padding: 0 !important; }
.card.banner-card .contem_banner{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.card.banner-card .banner-img{
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}


//-------------------




/* ==== Banner in-stream (mesma caixa do card) ==== */
/* JS define a altura inline (igual ao ESTIMATED_CARD_H) */
.card.banner-card{
  padding: 0 !important;        /* evita cortar a imagem */
  overflow: hidden;
}

.card.banner-card .contem_banner{
  width: 100%;
  height: 100%;                 /* ocupa 100% do card */
  display: flex;
  align-items: center;
  justify-content: center;
}

.card.banner-card .banner-img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* use 'cover' se preferir preencher cortando */
  display: block;
}

/* ——— desliga otimização que faz o DevTools dizer “descendants are skipped…” ——— */
#pool, #pool > article, .card, .banner-card {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* ——— estabiliza a altura do card antes das imagens carregarem ——— */
:root { --card-virt-h: 380px; }            /* ajuste fino se necessário */
.card { min-height: var(--card-virt-h); }

/* a imagem já reserva espaço (evita cards com 20px no 1º paint) */
.card .hero {
  width: 100%;
  aspect-ratio: 16 / 9;                    /* pode usar 3/2 se preferir */
  display: block;
  object-fit: cover;
}


.banner-card {
  content-visibility: visible;   /* evita "descendants skipped" */
  padding: 0 !important;
  overflow: hidden;
}
.banner-card .contem_banner{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.banner-card .banner-img{
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}


#pool > .card { content-visibility: visible; contain-intrinsic-size: auto; }



#feedViewport {
  overflow-y: auto;
  scroll-behavior: smooth;
  
  /* Fallbacks para Android */
  -webkit-overflow-scrolling: touch; /* iOS */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #c1c1c1 #000000; /* Firefox */
}

/* Webkit scrollbars (Chrome/Edge/Safari) */
#feedViewport::-webkit-scrollbar {
  width: 6px;
}

#feedViewport::-webkit-scrollbar-track {
  background: #000000;
}

#feedViewport::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

/* Melhorar performance */
#feedViewport {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: scroll-position;
}