/* ============== DESKTOP (>=901px) ============== */
@media (min-width: 901px){

  /* Wrapper */
  .goon-wrapper{
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 20px !important;
  }

  /* Layout 2 colonne, 50/50 preciso */
  .goon-layout{
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    min-height: calc(var(--appvh, 100vh) - 80px) !important;
    box-sizing: border-box !important;
  }

  /* Chat (sinistra) 50% */
  .goon-chat{
    width: 50% !important;
    flex: 0 0 50% !important;
    box-sizing: border-box !important;

    /* Neon + rounded */
    background: rgba(25,25,35,.85) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow:
      0 0 0 1px rgba(0,233,255,.18),
      0 10px 28px rgba(138,78,255,.18),
      inset 0 0 0 1px rgba(255,255,255,.04) !important;
  }

  /* Sidebar (destra) 50% */
  .goon-sidebar{
    width: 50% !important;
    flex: 0 0 50% !important;
    box-sizing: border-box !important;

    /* Neon + rounded coerenti */
    background: rgba(20,20,30,.80) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow:
      0 0 0 1px rgba(0,233,255,.18),
      0 10px 28px rgba(138,78,255,.18),
      inset 0 0 0 1px rgba(255,255,255,.04) !important;
  }

  .sidebar-title{
    font-size: 1rem !important;
    opacity: .85 !important;
    margin: 0 0 6px !important;
  }
  .model-name{
    font-size: 1.35rem !important;
    margin: 0 0 12px !important;
    color: #fff !important;
  }

  /* === Gallery 3x2 (6 per pagina) === */
  .model-gallery-wrap{
    position: relative !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 16px !important;
    padding: 12px 44px !important;   /* spazio frecce */
    overflow: hidden !important;
    box-shadow:
      0 0 0 1px rgba(0,233,255,.18),
      0 8px 24px rgba(0,233,255,.10) !important;
  }

  .model-gallery{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 colonne */
    grid-auto-rows: 1fr !important;                   /* 2 righe -> 6 elementi */
    gap: 12px !important;
  }

  .gal-item{
    position: relative !important;
    display: none;         /* visibilità gestita dallo script (pagine da 6) */
    border-radius: 14px !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;   /* anteprime quadrate grandi */
    background: rgba(255,255,255,.03) !important;
  }

  .gal-item img,
  .gal-item video{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .gp-play{
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    background: rgba(0,0,0,.45) !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    color: #fff !important;
    pointer-events: none !important;
  }

  /* Frecce */
  .gal-nav{
    position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 34px !important; height: 34px !important; border-radius: 50% !important;
    border: none !important; cursor: pointer !important; color: #fff !important;
    background: rgba(0,0,0,.45) !important;
    box-shadow: 0 0 12px rgba(0,0,0,.25) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  .gal-prev{ left: 8px !important; }
  .gal-next{ right: 8px !important; }

  /* ------- Bio & Links ------- */
  .model-bio{
    margin-top: 16px !important;
    padding: 12px !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 12px !important;
  }
  .model-bio h4{ margin: 0 0 8px !important; }
  .model-bio .bio-text{
    font-size: .95rem !important;
    line-height: 1.6 !important;
    opacity: .95 !important;
  }
  .gp-sep{
    border: 0 !important; height: 1px !important;
    background: rgba(255,255,255,0.10) !important; margin: 12px 0 !important;
  }
  .bio-links-icons{
    display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 8px !important;
  }
  .bio-ico{
    width: 40px !important; height: 40px !important; border-radius: 10px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    background: rgba(255,255,255,0.06) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06) !important;
    text-decoration: none !important;
  }
  .bio-ico img{ width: 22px !important; height: 22px !important; display: block !important; }

  .ad-spot{
    margin-top: 16px !important;
    padding: 15px !important;
    border: 2px dashed #666 !important;
    text-align: center !important;
    border-radius: 12px !important;
    opacity: .7 !important;
  }

  /* ------- “Users are also gooning on...” ------- */
  .goon-more{
    text-align: center !important;
    margin-top: 28px !important;
  }
  .goon-more h2{
    margin-bottom: 20px !important;
    color: #fff !important;
  }
  .model-grid{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
  .model-card{
    background: rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
    padding: 15px !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
  }
  .model-card:hover{
    transform: translateY(-4px) !important;
    box-shadow: 0 0 15px rgba(255,0,255,0.2) !important;
  }
  .model-card img{
    width: 100% !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    display: block !important;
  }
  .model-card h3{
    font-size: 1rem !important;
    margin: 5px 0 !important;
    color: #fff !important;
  }
  .model-card a{
    color: #00eaff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

  /* Nascondi i placeholder mobile su desktop */
  .mobile-prechat, .mobile-postchat{ display: none !important; }
}

/* ============== BASE (comuni, non rompono desktop) ============== */
body{
  background-color: #0b0b12;
  color: #f2f2f7;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
}

/* Chat plugin: safe defaults */
.gc-stream{ max-height: 54vh; overflow:auto; background: transparent; }
.gc-row{ background: rgba(255,255,255,0.04); border-radius:12px; }

/* Lightbox base */
#gp-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
#gp-lightbox img, #gp-lightbox video{ max-width:90vw; max-height:90vh; border-radius:12px; }
#gp-lightbox .lb-close{
  position:absolute; top:20px; right:20px; background:transparent; border:none;
  font-size:28px; color:#fff; cursor:pointer;
}


/* ============== MOBILE (<=768px) – struttura richiesta ============== */
@media (max-width: 768px){

  /* Stack verticale */
  .goon-layout{
    display:block !important;
    max-width:none !important;
    gap:0 !important;
  }
  .goon-chat,
  .goon-sidebar{
    width:100% !important;
    flex:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }

  /* --- Intestazione: "You are now gooning on..." + nome sulla stessa riga --- */
  .mobile-prechat{ margin:10px 0 6px !important; }
  .mobile-prechat .sidebar-title,
  .mobile-prechat .model-name{
    display:inline !important;
    vertical-align:baseline !important;
    line-height:1.2 !important;
  }
  .mobile-prechat .sidebar-title{
    opacity:.85 !important;
    font-size:.95rem !important;
    margin-right:6px !important;
  }
  .mobile-prechat .model-name{
    font-size:1.08rem !important;  /* leggermente più grande */
    font-weight:700 !important;
    color:#fff !important;
  }

  /* --- Gallery: UNA sola riga orizzontale scrollabile --- */
  .mobile-prechat .model-gallery-wrap{
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:6px 0 !important;
    margin:8px 0 12px !important;
    overflow:visible !important;
    position:relative !important;
  }
  /* nascondi frecce su mobile */
  .mobile-prechat .gal-nav,
  .mobile-prechat .gal-prev,
  .mobile-prechat .gal-next{ display:none !important; }

  .mobile-prechat .model-gallery{
    display:flex !important;
    flex-wrap:nowrap !important;      /* singola riga */
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
    padding:4px 0 !important;
    max-height:none !important;
    grid-template-columns:none !important; /* spegne la grid desktop */
  }

  /* IMPORTANTISSIMO: su mobile mostriamo SEMPRE gli item (desktop li pagina con display:none) */
  .mobile-prechat .model-gallery .gal-item{
    display:block !important;         /* batte il display:none della paginazione desktop */
    flex:0 0 auto !important;
    width:42vw !important;            /* card comoda; 2 visibili circa */
    height:42vw !important;
    max-width:200px !important;
    max-height:200px !important;
    border-radius:14px !important;
    overflow:hidden !important;
    background:rgba(255,255,255,.06) !important;
    scroll-snap-align:start !important;
  }
  .mobile-prechat .model-gallery .gal-item img,
  .mobile-prechat .model-gallery .gal-item video{
    width:100% !important; height:100% !important; object-fit:cover !important; display:block !important;
    border-radius:14px !important;
  }
  .mobile-prechat .model-gallery .gp-play{
    position:absolute !important; right:8px !important; bottom:8px !important;
    background:rgba(0,0,0,.45) !important; padding:4px 6px !important; border-radius:8px !important; font-size:12px !important;
  }

  /* --- Chat: area messaggi scorrevole + composer sempre in vista --- */
  .gc-box{
    display:flex !important; flex-direction:column !important; gap:10px !important;
    /* usa var(--appvh) che già imposti con lo script; fallback 100dvh */
    max-height:calc(var(--appvh, 100dvh) - 240px) !important;
  }
  .gc-stickybar{
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    gap:8px !important; padding:6px 0 !important;
  }
  .gc-stream{
    flex:1 1 auto !important; overflow-y:auto !important;
    background:transparent !important; border:0 !important; padding:0 0 6px 0 !important;
  }
  .gc-row{
    display:grid !important; grid-template-columns:1fr auto !important; align-items:center !important;
    gap:10px !important; background:rgba(255,255,255,.06) !important; border-radius:12px !important;
    padding:12px 14px !important; margin:10px 0 !important;
  }
  .gc-row .gc-text{ grid-column:1 / 2 !important; overflow-wrap:anywhere !important; }
  .gc-row .gc-time{ grid-column:2 / 3 !important; opacity:.75 !important; font-size:.85em !important; white-space:nowrap !important; }

  .gc-composer{
    position:sticky !important; bottom:0 !important; z-index:5 !important;
    display:grid !important; grid-template-columns:1fr auto !important; gap:10px !important;
    padding:8px 0 12px !important;
    background:linear-gradient(180deg, transparent, rgba(11,11,18,.85)) !important;
    backdrop-filter:blur(2px) !important;
  }
  .gc-input{ min-height:44px !important; }
  .gc-send{  min-height:44px !important; }

  /* --- Blocchi post-chat (bio + link + ad) --- */
  .mobile-postchat .model-bio{
    margin-top:12px !important; padding:12px !important; border-radius:12px !important; background:rgba(255,255,255,.05) !important;
  }
  .mobile-postchat .ad-spot{
    margin-top:12px !important; padding:14px !important; border-radius:12px !important; opacity:.8 !important;
  }

  /* --- Users are also gooning on... -> card singola per riga --- */
  .goon-more{ margin-top:18px !important; }
  .goon-more h2{
    font-size:1.4rem !important; line-height:1.2 !important; text-align:center !important; margin:0 0 12px !important;
  }
  .model-grid{
    display:grid !important; grid-template-columns:1fr !important; gap:16px !important;
  }
  .model-card{
    width:100% !important; border-radius:16px !important; overflow:hidden !important; background:rgba(255,255,255,.05) !important;
  }
  .model-card img{ width:100% !important; height:auto !important; display:block !important; }
}

/* --- Mobile: riduci le icone premium --- */
@media (max-width: 900px){
  .bio-links-icons .bio-ico{
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
  }
  .bio-links-icons .bio-ico img{
    width: 18px !important;
    height: 18px !important;
  }
}


/* --- Mobile: evita sovrapposizione composer vs. contenuti dopo la chat --- */
@media (max-width: 900px){
  .gc-box{
    /* lascia spazio ai contenuti che vengono dopo (es. login/register) */
    padding-bottom: 90px !important;
  }
  .gc-composer{
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20 !important; /* sopra la lista, ma non copre il resto */
  }
  /* aggiungi margine al primo elemento subito dopo la chat-box (login/register) */
  .goon-chat > .gc-box + *{
    margin-top: 14px !important;
  }
}


/* MOBILE – Bio icons come su desktop */
@media (max-width: 768px){
  .mobile-postchat .bio-links-icons{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin-top:8px !important;
  }
  .mobile-postchat .bio-ico{
    width:44px !important;
    height:44px !important;
    border-radius:12px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,0.06) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06) !important;
  }
  .mobile-postchat .bio-ico img{
    width:22px !important;
    height:22px !important;
    display:block !important;
  }
}

/* MOBILE – separa chiaramente TIP e bottoni auth */
@media (max-width: 768px){
  .gc-tip{
    display:block !important;
    margin:10px 0 12px !important;
    padding:0 !important;
    position:relative !important;
    z-index:1 !important;
  }
  .goon-auth-buttons{
    display:flex !important;
    gap:12px !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    margin:10px 0 0 !important;
    position:relative !important;   /* niente absolute/fixed */
    z-index:2 !important;           /* sopra eventuali gradienti sticky */
  }
  /* Un po' d'aria sotto tutto il blocco chat */
  .gc-box{ margin-bottom:14px !important; }
}

@media (max-width: 768px){
  .gc-tip{ margin:10px 0 8px !important; position:relative !important; z-index:1 !important; }
  .goon-auth-buttons{ display:flex !important; gap:12px !important; flex-wrap:wrap !important; margin:6px 0 10px !important; position:relative !important; z-index:1 !important; }
}

/* === PATCH ANTI-SOVRAPPOSIZIONE (solo mobile) === */
@media (max-width: 768px){

  /* 1) i placeholder DEVONO essere blocchi a flusso, separati e sopra/sotto la chat */
  .mobile-prechat,
  .mobile-postchat{
    display:block !important;
    width:100% !important;
    clear:both !important;
    position:relative !important;
    z-index:0 !important;
  }

  /* 2) distanzia chiaramente la chat da ciò che viene dopo (postchat) 
        ed evita il collasso margini fra i due blocchi */
  .goon-chat{
    padding-bottom: 12px !important;   /* un filo di cuscinetto nel contenitore col neon */
  }
  .gc-box{
    margin-bottom: 18px !important;    /* spazio sotto TUTTA la chat (tip + auth + composer) */
  }

  /* 3) assicura che il blocco post-chat parta DAVVERO sotto (anti-collasso)
        border-top trasparente è un trucco per bloccare il collasso vertical-margin */
  .mobile-postchat{
    margin-top: 14px !important;
    border-top: 1px solid transparent !important;
  }

  /* 4) tip + auth: restano nel flusso, niente overlay */
  .gc-tip{
    display:block !important;
    margin:10px 0 10px !important;
    position:relative !important;
    z-index:1 !important;
  }
  .goon-auth-buttons{
    display:flex !important;
    gap:12px !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    margin:8px 0 0 !important;
    position:relative !important;  /* importante: no absolute/fixed */
    z-index:1 !important;
  }

  /* 5) il composer sticky non deve “coprire” i blocchi dopo la chat */
  .gc-composer{
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;                 /* sopra alla lista, non sopra ai blocchi fuori chat */
    background: linear-gradient(180deg,transparent, rgba(11,11,18,.85)) !important;
  }

  /* 6) clearfix difensivo sulla chat nel dubbio */
  .goon-chat::after{
    content:''; display:block; clear:both;
  }
}

/* === FIX DEFINITIVO STACK MOBILE (sostituisce top:80px) === */
@media (max-width: 768px){

  /* Lascia aria sotto la chat per lo sticky composer */
  .gc-box{
    margin-bottom:16px !important;
    padding-bottom:88px !important;   /* ~altezza composer */
  }

  .gc-composer{
    position:sticky !important;
    bottom:0 !important;
    z-index:5 !important;
    background:linear-gradient(180deg,transparent, rgba(11,11,18,.85)) !important;
  }

  /* Fai partire DAVVERO il blocco dopo la chat sotto, senza overlay */
  .mobile-postchat{
    position:relative !important;
    top:auto !important;              /* <-- elimina l’hack */
    margin-top:14px !important;
    clear:both !important;
    border-top:1px solid transparent !important; /* anti margin-collapse */
    z-index:0 !important;
  }

  /* Un piccolo cuscinetto nel contenitore della chat col neon */
  .goon-chat{ padding-bottom:12px !important; }

  /* Difensivo: nessun assoluto sugli auth; restano nel flusso */
  .goon-auth-buttons{
    position:relative !important;
    margin-top:8px !important;
    z-index:1 !important;
  }
}


/* === MOBILE: fixa impilamento Bio/Info (niente overlay, niente sovrapposizioni) === */
@media (max-width: 768px){

  /* Il contenitore che segue la chat DEVE stare nel flusso, sotto, con un cuscinetto
     per evitare il margin-collapsing col blocco precedente */
  .mobile-postchat{
    display:block !important;
    position:relative !important;
    clear:both !important;
    margin-top:14px !important;
    padding-top:8px !important;                 /* rompe il collapse con gc-tip/auth */
    border-top:1px solid transparent !important;
    z-index:0 !important;
  }

  /* Bio box: nessun posizionamento “strano”, resta nel flusso */
  .mobile-postchat .model-bio{
    position:relative !important;
    z-index:0 !important;
    margin:0 0 12px 0 !important;
  }

  /* Ad spot idem */
  .mobile-postchat .ad-spot{
    position:relative !important;
    z-index:0 !important;
  }

  /* I blocchi SOPRA (tip + auth) restano nel flusso ma stanno “sopra”
     graficamente, così Bio/Info non li attraversa. Nessun absolute. */
  .gc-tip,
  .goon-auth-buttons{
    position:relative !important;
    z-index:1 !important;
    margin:10px 0 0 !important;                 /* un filo d’aria sopra Bio/Info */
  }

  /* Difensivo: niente overflow che taglia o fa impilare male */
  .goon-chat .gc-box{
    overflow:visible !important;
  }
}

/* Nascondi i bottoni auth dentro la CHAT su mobile */
@media (max-width: 768px){
  .goon-chat .goon-auth-buttons,
  .goon-chat .goon-auth-hello{
    display: none !important;
  }
}


/* Mobile: related in 2 colonne + bottone Load more */
@media (max-width: 768px){
  .goon-more{ margin-top: 22px !important; }
  .goon-more h2{ margin-bottom: 14px !important; }

  .model-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .model-card{
    background: rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
    padding: 12px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset !important;
  }
  .model-card img{
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;   /* mantiene proporzioni gradevoli */
    object-fit: cover !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
  }
  .model-card h3{
    font-size: .98rem !important;
    margin: 4px 0 6px !important;
  }
  .goon-link{
    display: inline-block !important;
    font-weight: 700 !important;
    color: #00eaff !important;
    text-decoration: none !important;
  }

  .more-btn{
    display: inline-block;
    margin: 14px auto 0;
    padding: 10px 16px;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg,#5b8cff,#b66dff);
    box-shadow: 0 0 10px rgba(120,100,255,.35);
  }
}

.gp-create-blur{
  min-height: calc(100vh - 120px);
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(140,120,255,.15), transparent),
              rgba(11,11,18,.85);
  backdrop-filter: blur(4px);
  padding: 24px;
}
.gp-create-card{
  width: 100%; max-width: 560px;
  background: rgba(25,25,35,.9);
  border-radius: 16px; padding: 22px;
  box-shadow: 0 0 0 1px rgba(0,233,255,.12), 0 18px 40px rgba(0,0,0,.35);
}
.gp-label{ display:block; margin:12px 0 6px; font-weight:600; opacity:.9 }
.gp-input,.gp-textarea,.gp-file{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:#fff; }
.gp-textarea{ resize:vertical }
.gp-slug-preview{ margin:6px 0 12px; font-family:ui-monospace,monospace; opacity:.85 }
.gp-btn{ display:inline-block; padding:.65em 1.2em; border-radius:10px; background:linear-gradient(90deg,#5b8cff,#b66dff); color:#fff; font-weight:700; text-decoration:none; border:0; cursor:pointer }
.gp-btn.gp-secondary{ background:rgba(255,255,255,.08) }
.gp-cta{ display:flex; gap:10px; margin-top:10px }
.gp-help{ opacity:.7; margin-top:10px }