/* ==========================================================
   VivaMee V8.6.4 — Responsive Intelligent Layout
   Corrige header e torna páginas responsivas/inteligentes.
   Filosofia:
   - Desktop grande: header em 2 zonas limpas, conteúdo centralizado.
   - Notebook/tablet: menu vira trilho horizontal rolável.
   - Mobile: header compacto, busca/menu em linhas próprias.
   ========================================================== */

:root{
  --vm-header-pad-x: clamp(12px, 1.4vw, 24px);
  --vm-page-max: 1240px;
  --vm-gap: clamp(12px, 1.4vw, 22px);
  --vm-radius-responsive: 22px;
}

/* ==========================================================
   HEADER: zera conflitos dos patches anteriores
   ========================================================== */
html[data-vivamee-theme="viva-aurora"] header,
html[data-vivamee-theme="social-dark"] header,
html[data-vivamee-theme="neon-pro"] header,
html[data-vivamee-theme="viva-aurora"] .topbar,
html[data-vivamee-theme="social-dark"] .topbar,
html[data-vivamee-theme="neon-pro"] .topbar,
html[data-vivamee-theme="viva-aurora"] .site-header,
html[data-vivamee-theme="social-dark"] .site-header,
html[data-vivamee-theme="neon-pro"] .site-header{
  width:100%!important;
  min-height:unset!important;
  height:auto!important;
  padding:12px var(--vm-header-pad-x)!important;
  display:grid!important;
  grid-template-columns:minmax(180px, 250px) minmax(250px, 430px) minmax(460px, 1fr) auto!important;
  grid-template-areas:
    "brand search nav account"!important;
  align-items:center!important;
  gap:12px 18px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* Remove pseudo quebra do V3 */
html[data-vivamee-theme="viva-aurora"] header::after,
html[data-vivamee-theme="social-dark"] header::after,
html[data-vivamee-theme="neon-pro"] header::after,
html[data-vivamee-theme="viva-aurora"] .topbar::after,
html[data-vivamee-theme="social-dark"] .topbar::after,
html[data-vivamee-theme="neon-pro"] .topbar::after,
html[data-vivamee-theme="viva-aurora"] .site-header::after,
html[data-vivamee-theme="social-dark"] .site-header::after,
html[data-vivamee-theme="neon-pro"] .site-header::after{
  content:none!important;
  display:none!important;
}

/* Marca: logo + selo devem ficar juntos e alinhados */
html[data-vivamee-theme="viva-aurora"] header .logo,
html[data-vivamee-theme="social-dark"] header .logo,
html[data-vivamee-theme="neon-pro"] header .logo,
html[data-vivamee-theme="viva-aurora"] header .brand,
html[data-vivamee-theme="social-dark"] header .brand,
html[data-vivamee-theme="neon-pro"] header .brand{
  grid-area:brand!important;
  order:initial!important;
  width:auto!important;
  max-width:250px!important;
  min-width:0!important;
  flex:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  overflow:visible!important;
  white-space:nowrap!important;
  margin:0!important;
}

/* Se o selo estiver fora do bloco brand, posiciona logo após a marca sem empurrar tudo */
html[data-vivamee-theme="viva-aurora"] header > [class*="living"],
html[data-vivamee-theme="social-dark"] header > [class*="living"],
html[data-vivamee-theme="neon-pro"] header > [class*="living"],
html[data-vivamee-theme="viva-aurora"] header > [class*="badge"],
html[data-vivamee-theme="social-dark"] header > [class*="badge"],
html[data-vivamee-theme="neon-pro"] header > [class*="badge"]{
  grid-area:brand!important;
  justify-self:end!important;
  align-self:center!important;
  order:initial!important;
  height:30px!important;
  max-width:138px!important;
  padding:0 10px!important;
  font-size:10.5px!important;
  line-height:1!important;
  white-space:nowrap!important;
  margin-left:auto!important;
  transform:none!important;
}

/* Busca e dica: dica fica acima da busca quando existir */
html[data-vivamee-theme="viva-aurora"] header form,
html[data-vivamee-theme="social-dark"] header form,
html[data-vivamee-theme="neon-pro"] header form,
html[data-vivamee-theme="viva-aurora"] header .search,
html[data-vivamee-theme="social-dark"] header .search,
html[data-vivamee-theme="neon-pro"] header .search,
html[data-vivamee-theme="viva-aurora"] header .search-box,
html[data-vivamee-theme="social-dark"] header .search-box,
html[data-vivamee-theme="neon-pro"] header .search-box{
  grid-area:search!important;
  order:initial!important;
  width:100%!important;
  min-width:0!important;
  max-width:430px!important;
  flex:none!important;
  margin:0!important;
  justify-self:stretch!important;
}

html[data-vivamee-theme="viva-aurora"] header input[type="search"],
html[data-vivamee-theme="social-dark"] header input[type="search"],
html[data-vivamee-theme="neon-pro"] header input[type="search"],
html[data-vivamee-theme="viva-aurora"] header input[placeholder*="Pesquisar"],
html[data-vivamee-theme="social-dark"] header input[placeholder*="Pesquisar"],
html[data-vivamee-theme="neon-pro"] header input[placeholder*="Pesquisar"]{
  width:100%!important;
  height:44px!important;
  padding:0 18px!important;
  border-radius:18px!important;
  font-size:14px!important;
}

/* Dica discreta: não quebra layout */
html[data-vivamee-theme="viva-aurora"] header .hint,
html[data-vivamee-theme="social-dark"] header .hint,
html[data-vivamee-theme="neon-pro"] header .hint,
html[data-vivamee-theme="viva-aurora"] header .tip,
html[data-vivamee-theme="social-dark"] header .tip,
html[data-vivamee-theme="neon-pro"] header .tip,
html[data-vivamee-theme="viva-aurora"] header [class*="hint"],
html[data-vivamee-theme="social-dark"] header [class*="hint"],
html[data-vivamee-theme="neon-pro"] header [class*="hint"],
html[data-vivamee-theme="viva-aurora"] header [class*="tip"],
html[data-vivamee-theme="social-dark"] header [class*="tip"],
html[data-vivamee-theme="neon-pro"] header [class*="tip"]{
  grid-area:search!important;
  align-self:start!important;
  justify-self:start!important;
  transform:translateY(-38px)!important;
  max-width:min(330px, 100%)!important;
  min-width:0!important;
  height:auto!important;
  min-height:30px!important;
  padding:5px 10px!important;
  font-size:11px!important;
  line-height:1.15!important;
  margin:0!important;
  pointer-events:none!important;
  z-index:2!important;
}

/* Menu principal */
html[data-vivamee-theme="viva-aurora"] header nav,
html[data-vivamee-theme="social-dark"] header nav,
html[data-vivamee-theme="neon-pro"] header nav,
html[data-vivamee-theme="viva-aurora"] header .nav,
html[data-vivamee-theme="social-dark"] header .nav,
html[data-vivamee-theme="neon-pro"] header .nav,
html[data-vivamee-theme="viva-aurora"] header .menu,
html[data-vivamee-theme="social-dark"] header .menu,
html[data-vivamee-theme="neon-pro"] header .menu{
  grid-area:nav!important;
  order:initial!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  flex:none!important;
  height:52px!important;
  min-height:52px!important;
  padding:6px 8px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  box-sizing:border-box!important;
}

html[data-vivamee-theme="viva-aurora"] header nav::-webkit-scrollbar,
html[data-vivamee-theme="social-dark"] header nav::-webkit-scrollbar,
html[data-vivamee-theme="neon-pro"] header nav::-webkit-scrollbar,
html[data-vivamee-theme="viva-aurora"] header .nav::-webkit-scrollbar,
html[data-vivamee-theme="social-dark"] header .nav::-webkit-scrollbar,
html[data-vivamee-theme="neon-pro"] header .nav::-webkit-scrollbar,
html[data-vivamee-theme="viva-aurora"] header .menu::-webkit-scrollbar,
html[data-vivamee-theme="social-dark"] header .menu::-webkit-scrollbar,
html[data-vivamee-theme="neon-pro"] header .menu::-webkit-scrollbar{ display:none!important; }

html[data-vivamee-theme="viva-aurora"] header nav a,
html[data-vivamee-theme="social-dark"] header nav a,
html[data-vivamee-theme="neon-pro"] header nav a,
html[data-vivamee-theme="viva-aurora"] header .nav a,
html[data-vivamee-theme="social-dark"] header .nav a,
html[data-vivamee-theme="neon-pro"] header .nav a,
html[data-vivamee-theme="viva-aurora"] header .menu a,
html[data-vivamee-theme="social-dark"] header .menu a,
html[data-vivamee-theme="neon-pro"] header .menu a{
  flex:0 0 auto!important;
  min-width:max-content!important;
  height:40px!important;
  padding:0 13px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:14px!important;
  font-weight:900!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}

/* Ações da conta */
html[data-vivamee-theme="viva-aurora"] header .actions,
html[data-vivamee-theme="social-dark"] header .actions,
html[data-vivamee-theme="neon-pro"] header .actions,
html[data-vivamee-theme="viva-aurora"] header .user-actions,
html[data-vivamee-theme="social-dark"] header .user-actions,
html[data-vivamee-theme="neon-pro"] header .user-actions,
html[data-vivamee-theme="viva-aurora"] header .account-area,
html[data-vivamee-theme="social-dark"] header .account-area,
html[data-vivamee-theme="neon-pro"] header .account-area{
  grid-area:account!important;
  order:initial!important;
  flex:none!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  white-space:nowrap!important;
}

/* Se botões/usuário estiverem soltos, manda para direita */
html[data-vivamee-theme="viva-aurora"] header > a[href*="publicar"],
html[data-vivamee-theme="social-dark"] header > a[href*="publicar"],
html[data-vivamee-theme="neon-pro"] header > a[href*="publicar"],
html[data-vivamee-theme="viva-aurora"] header > a[href*="admin"],
html[data-vivamee-theme="social-dark"] header > a[href*="admin"],
html[data-vivamee-theme="neon-pro"] header > a[href*="admin"],
html[data-vivamee-theme="viva-aurora"] header > a[href*="login"],
html[data-vivamee-theme="social-dark"] header > a[href*="login"],
html[data-vivamee-theme="neon-pro"] header > a[href*="login"]{
  grid-area:account!important;
  order:initial!important;
  flex:none!important;
  height:42px!important;
  padding:0 15px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  white-space:nowrap!important;
}

/* Avatar */
html[data-vivamee-theme="viva-aurora"] header [class*="avatar"],
html[data-vivamee-theme="social-dark"] header [class*="avatar"],
html[data-vivamee-theme="neon-pro"] header [class*="avatar"]{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
}

/* Dropdown legível */
html[data-vivamee-theme="viva-aurora"] .dropdown-menu,
html[data-vivamee-theme="social-dark"] .dropdown-menu,
html[data-vivamee-theme="neon-pro"] .dropdown-menu,
html[data-vivamee-theme="viva-aurora"] .menu-dropdown,
html[data-vivamee-theme="social-dark"] .menu-dropdown,
html[data-vivamee-theme="neon-pro"] .menu-dropdown{
  min-width:230px!important;
  padding:14px!important;
  border-radius:22px!important;
  overflow:visible!important;
}

html[data-vivamee-theme="viva-aurora"] .dropdown-menu a,
html[data-vivamee-theme="social-dark"] .dropdown-menu a,
html[data-vivamee-theme="neon-pro"] .dropdown-menu a,
html[data-vivamee-theme="viva-aurora"] .menu-dropdown a,
html[data-vivamee-theme="social-dark"] .menu-dropdown a,
html[data-vivamee-theme="neon-pro"] .menu-dropdown a{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#eaf8ff!important;
  opacity:1!important;
}

/* ==========================================================
   PÁGINAS RESPONSIVAS
   ========================================================== */

/* Containers principais centralizados */
main,
.page-shell,
.main-shell,
.content-shell,
.feed-layout,
.explore-layout,
.profile-layout,
.marketplace-layout,
.communities-layout,
.meecam-layout,
.aurummind-layout{
  width:min(100%, var(--vm-page-max))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:clamp(14px, 2vw, 28px)!important;
  padding-right:clamp(14px, 2vw, 28px)!important;
  box-sizing:border-box!important;
}

/* Grids de conteúdo adaptáveis */
.feed-grid,
.explore-grid,
.marketplace-grid,
.communities-grid,
.cards-grid,
.theme-grid,
.camera-grid,
.album-grid,
.profile-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr))!important;
  gap:var(--vm-gap)!important;
  width:100%!important;
}

/* Layout de 3 colunas vira inteligente */
.three-col,
.layout-3,
.feed-columns,
.dashboard-grid{
  display:grid!important;
  grid-template-columns:minmax(190px, 250px) minmax(0, 1fr) minmax(240px, 320px)!important;
  gap:var(--vm-gap)!important;
  align-items:start!important;
}

/* Cards nunca estouram */
.card,.post,article,aside,.panel,.widget,.box,.module{
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Mídia responsiva */
img,video,iframe,canvas{
  max-width:100%!important;
}
.post img,
.post-media img,
.feed-card img,
.profile-photo img,
.album-photo img{
  height:auto!important;
  object-fit:cover!important;
}

/* Textos grandes responsivos */
h1,.hero-title,.page-title{
  font-size:clamp(34px, 5.4vw, 74px)!important;
  line-height:.98!important;
}
h2{font-size:clamp(26px, 3.2vw, 42px)!important}
h3{font-size:clamp(20px, 2vw, 28px)!important}

/* Tabelas e painéis admin com rolagem */
.table-wrap,
.table-shell,
.admin-table,
.data-table{
  overflow-x:auto!important;
  max-width:100%!important;
}

/* ==========================================================
   BREAKPOINTS INTELIGENTES
   ========================================================== */

@media(max-width:1320px){
  html[data-vivamee-theme="viva-aurora"] header,
  html[data-vivamee-theme="social-dark"] header,
  html[data-vivamee-theme="neon-pro"] header{
    grid-template-columns:minmax(170px, 240px) minmax(260px, 420px) 1fr auto!important;
  }

  html[data-vivamee-theme="viva-aurora"] header nav,
  html[data-vivamee-theme="social-dark"] header nav,
  html[data-vivamee-theme="neon-pro"] header nav,
  html[data-vivamee-theme="viva-aurora"] header .nav,
  html[data-vivamee-theme="social-dark"] header .nav,
  html[data-vivamee-theme="neon-pro"] header .nav{
    min-width:0!important;
  }
}

@media(max-width:1100px){
  html[data-vivamee-theme="viva-aurora"] header,
  html[data-vivamee-theme="social-dark"] header,
  html[data-vivamee-theme="neon-pro"] header,
  html[data-vivamee-theme="viva-aurora"] .topbar,
  html[data-vivamee-theme="social-dark"] .topbar,
  html[data-vivamee-theme="neon-pro"] .topbar,
  html[data-vivamee-theme="viva-aurora"] .site-header,
  html[data-vivamee-theme="social-dark"] .site-header,
  html[data-vivamee-theme="neon-pro"] .site-header{
    grid-template-columns:minmax(170px, 240px) 1fr auto!important;
    grid-template-areas:
      "brand search account"
      "nav nav nav"!important;
    min-height:118px!important;
  }

  html[data-vivamee-theme="viva-aurora"] header nav,
  html[data-vivamee-theme="social-dark"] header nav,
  html[data-vivamee-theme="neon-pro"] header nav,
  html[data-vivamee-theme="viva-aurora"] header .nav,
  html[data-vivamee-theme="social-dark"] header .nav,
  html[data-vivamee-theme="neon-pro"] header .nav,
  html[data-vivamee-theme="viva-aurora"] header .menu,
  html[data-vivamee-theme="social-dark"] header .menu,
  html[data-vivamee-theme="neon-pro"] header .menu{
    width:100%!important;
  }

  html[data-vivamee-theme="viva-aurora"] header .hint,
  html[data-vivamee-theme="social-dark"] header .hint,
  html[data-vivamee-theme="neon-pro"] header .hint,
  html[data-vivamee-theme="viva-aurora"] header .tip,
  html[data-vivamee-theme="social-dark"] header .tip,
  html[data-vivamee-theme="neon-pro"] header .tip,
  html[data-vivamee-theme="viva-aurora"] header [class*="hint"],
  html[data-vivamee-theme="social-dark"] header [class*="hint"],
  html[data-vivamee-theme="neon-pro"] header [class*="hint"]{
    display:none!important;
  }

  .three-col,.layout-3,.feed-columns,.dashboard-grid{
    grid-template-columns:minmax(190px, 240px) minmax(0, 1fr)!important;
  }
  .three-col > :last-child,
  .layout-3 > :last-child,
  .feed-columns > :last-child{
    grid-column:1 / -1!important;
  }
}

@media(max-width:820px){
  html[data-vivamee-theme="viva-aurora"] header,
  html[data-vivamee-theme="social-dark"] header,
  html[data-vivamee-theme="neon-pro"] header,
  html[data-vivamee-theme="viva-aurora"] .topbar,
  html[data-vivamee-theme="social-dark"] .topbar,
  html[data-vivamee-theme="neon-pro"] .topbar,
  html[data-vivamee-theme="viva-aurora"] .site-header,
  html[data-vivamee-theme="social-dark"] .site-header,
  html[data-vivamee-theme="neon-pro"] .site-header{
    grid-template-columns:1fr auto!important;
    grid-template-areas:
      "brand account"
      "search search"
      "nav nav"!important;
    gap:9px!important;
    min-height:auto!important;
    padding:10px 12px!important;
  }

  html[data-vivamee-theme="viva-aurora"] header > [class*="living"],
  html[data-vivamee-theme="social-dark"] header > [class*="living"],
  html[data-vivamee-theme="neon-pro"] header > [class*="living"],
  html[data-vivamee-theme="viva-aurora"] header > [class*="badge"],
  html[data-vivamee-theme="social-dark"] header > [class*="badge"],
  html[data-vivamee-theme="neon-pro"] header > [class*="badge"]{
    display:none!important;
  }

  html[data-vivamee-theme="viva-aurora"] header form,
  html[data-vivamee-theme="social-dark"] header form,
  html[data-vivamee-theme="neon-pro"] header form,
  html[data-vivamee-theme="viva-aurora"] header .search,
  html[data-vivamee-theme="social-dark"] header .search,
  html[data-vivamee-theme="neon-pro"] header .search,
  html[data-vivamee-theme="viva-aurora"] header .search-box,
  html[data-vivamee-theme="social-dark"] header .search-box,
  html[data-vivamee-theme="neon-pro"] header .search-box{
    max-width:none!important;
  }

  .three-col,.layout-3,.feed-columns,.dashboard-grid{
    grid-template-columns:1fr!important;
  }

  aside,.sidebar,.left-sidebar,.right-sidebar{
    position:static!important;
    width:100%!important;
  }
}

@media(max-width:560px){
  html[data-vivamee-theme="viva-aurora"] header .logo,
  html[data-vivamee-theme="social-dark"] header .logo,
  html[data-vivamee-theme="neon-pro"] header .logo,
  html[data-vivamee-theme="viva-aurora"] header .brand,
  html[data-vivamee-theme="social-dark"] header .brand,
  html[data-vivamee-theme="neon-pro"] header .brand{
    max-width:170px!important;
  }

  html[data-vivamee-theme="viva-aurora"] header nav a,
  html[data-vivamee-theme="social-dark"] header nav a,
  html[data-vivamee-theme="neon-pro"] header nav a,
  html[data-vivamee-theme="viva-aurora"] header .nav a,
  html[data-vivamee-theme="social-dark"] header .nav a,
  html[data-vivamee-theme="neon-pro"] header .nav a{
    height:38px!important;
    padding:0 11px!important;
    font-size:13px!important;
  }

  html[data-vivamee-theme="viva-aurora"] header [class*="avatar"],
  html[data-vivamee-theme="social-dark"] header [class*="avatar"],
  html[data-vivamee-theme="neon-pro"] header [class*="avatar"]{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
  }

  main,.page-shell,.main-shell,.content-shell{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}