:root {
  --vv-maxw: 1200px;
  --vv-pad: 18px;
  --vv-top: 72px;
  --vv-radius: 18px;
  --vv-container-alpha: .86;
  --vv-container-blur: 6px;
}

.vv-container {
  box-sizing: border-box;
  width: min(92vw, var(--vv-maxw));
  max-width: var(--vv-maxw);
  margin: calc(var(--vv-top) + 8px) auto 24px;
  padding: var(--vv-pad);
  border-radius: var(--vv-radius);
  background: rgba(255, 255, 255, var(--vv-container-alpha));
  backdrop-filter: blur(var(--vv-container-blur));
}

.vv-container--list {
  min-height: calc(100vh - var(--vv-top) - var(--vv-bottom) - 24px);
  overflow: auto;
}

.vv-container--edit {
  min-height: calc(100vh - var(--vv-top) - 32px);
}

.vv-post-container {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.vv-container img,
.vv-container video,
.vv-container iframe,
.vv-post-container img,
.vv-post-container video,
.vv-post-container iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

body.page-diario-lista #pjax-root.vv-container {
  position: static !important;
  left: auto;
  right: auto;
  top: auto;
  width: min(92vw, var(--vv-maxw, 1200px));
  max-width: var(--vv-maxw, 1200px);
  margin: calc(var(--vv-top, 72px) + 8px) auto var(--vv-bottom, 24px);
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  overflow: auto;
  max-height: calc(100vh - var(--vv-top, 72px) - var(--vv-bottom, 24px) - 24px);
  box-sizing: border-box;
}

/* =========================================================
   VRV VIEW RESET
   Nuovo guscio per visualizza_post.php
   ========================================================= */
:root {
  --vrv-view-zoom: 0.85;
}

.vrv-view-shell {
  box-sizing: border-box;
  width: min(92vw, 1200px);
  margin: calc(var(--vv-top, 72px) + 8px) auto 24px;
  padding: 14px;
  /* guscio esterno SPENTO (era una scatola bianca/blur/angoli): solo centratura+respiro.
     L'unica CORNICE e' il passepartout .vv-postbg; il fondo-pagina lo da' .vrv-view-article. */
  background: transparent;
  /* contenitore FERMO ancorato alla finestra: non cresce col contenuto, il post scorre DENTRO.
     (-40px = respiro per il footer in fondo; si tara dal vivo) */
  height: calc(100dvh - var(--vv-top, 56px) - var(--vv-bottom, 42px) - 40px);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* contenitore articolo visualizza */
.vrv-view-article {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0.1rem 1.25rem;
  /* fondo-PAGINA del post (sotto titolo+intestazione+accordion): velo piatto per leggibilita'
     sul wallpaper. NON e' una cornice: niente ombra/bordo, angoli appena arrotondati.
     La cornice vera e' il passepartout .vv-postbg dentro il contenuto. */
  background-color: rgba(255, 255, 255, 0.90);
  border-radius: 10px;
  box-shadow: none;
  /* riempie il guscio fermo e CLIPpa: titolo in cima, accordion che riempie, scroll interno. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.55;
  font-size: 1.05rem;
}

/* intestazione (titolo) fissa in cima alla card; il resto scorre nell'accordion */
.vrv-view-article > .vv-post-header { flex: 0 0 auto; }

/* =========================================================
   ADATTIVO — schermo piccolo o basso (telefono, landscape corto)
   La "card ferma con scroll interno" e' un lusso da desktop: su mobile
   da' fastidio (scroll annidato al tocco, cornici che mangiano spazio,
   100vh dietro la barra URL). Qui si torna al FLUSSO NATURALE: niente
   altezza fissa, scorre tutta la pagina come ci si aspetta sul telefono.
   ========================================================= */
@media (max-width: 820px), (max-height: 600px) {
  .vrv-view-shell {
    height: auto;          /* niente card ferma: cresce col contenuto */
    display: block;
    padding: 8px;
  }
  .vrv-view-article {
    display: block;        /* via il flex/clip: flusso normale */
    overflow: visible;
    min-height: 0;
  }

  /* post SENZA mappa: scorre tutta la pagina, niente scroll interno */
  .vrv-postmap[data-nomap] { height: auto; }
  body.page-visualizza-post .vrv-postmap[data-nomap] #vv-post-body {
    max-height: none !important;
    overflow: visible !important;
  }

  /* post CON mappa: l'iframe ha bisogno d'altezza → accordion limitato, ma in dvh */
  .vrv-postmap:not([data-nomap]) { height: 72dvh; }
}

/* body scrollabile vero del post */
body.page-visualizza-post #vv-post-body {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 85vh !important;
  display: flow-root !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  resize: none !important;
  background-color: var(--post-fill, transparent) !important; /* sfondo del CONTENUTO = colore scelto (--post-fill, ereditato da .vrv-view-article); fallback trasparente. Prima 'transparent' fisso vinceva sul sistema nuovo e lasciava trasparire la tinta-pagina. */
  /* testo staccato dal bordo come nell'editor (zoom 0.85 → valori un filo più larghi) */
  padding: 14px 20px !important;
  zoom: var(--vrv-view-zoom);
}

/* ultimo elemento del contenuto: niente margine finale */
#vv-post-body>*:last-child {
  margin-bottom: 0 !important;
}

/* ancora finale tecnica: non deve creare spazio visivo */
#vv-post-bottom {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* firma compatta */
.vv-view-signature {
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.1;
  font-size: 0.85rem;
  opacity: 0.85;
}

#vv-post-bottom {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}