/* =========================================================
   LS FEED SKIN — restyling feed PeepSo in stile Nova
   Card pulita + media verticali 9:16 cover.
   Nessun file PeepSo/Gecko toccato.
   ========================================================= */

:root {
  --lsfs-card-bg: #ffffff;
  --lsfs-card-radius: 16px;
  --lsfs-card-border: #ececf0;
  --lsfs-card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05);
  --lsfs-text: #15161a;
  --lsfs-text-dim: #6b7280;
  --lsfs-accent: #e8002d;       /* rosso Nova, lo stesso del bottone reel */
  --lsfs-gap: 18px;
  --lsfs-media-radius: 12px;
  /* altezza max del media verticale: ~schermo ma con tetto, così non diventa gigante su desktop */
  --lsfs-media-vh: 78vh;
  --lsfs-media-max: 620px;
}

/* ---------- Contenitore feed: più aria tra le card ---------- */
#ps-activitystream,
.ps-activity .ps-posts {
  display: flex;
  flex-direction: column;
  gap: var(--lsfs-gap);
  background: transparent !important;
}

/* ---------- LA CARD ---------- */
.ps-post.ps-js-activity {
  background: var(--lsfs-card-bg) !important;
  border: 1px solid #ececf0 !important;
  border-radius: var(--lsfs-card-radius) !important;
  box-shadow: var(--lsfs-card-shadow) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ps-post.ps-js-activity:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 10px 28px rgba(0,0,0,.08) !important;
}

/* ---------- HEADER (avatar + nome + meta) ---------- */
.ps-post__header {
  padding: 14px 16px 8px !important;
  align-items: center !important;
}
.ps-avatar--post img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.ps-post__title {
  font-size: 15px !important;
  line-height: 1.25 !important;
}
.ps-post__title .ps-tag__link {
  font-weight: 700 !important;
  color: var(--lsfs-text) !important;
}
.ps-post__subtitle,
.ps-post__date .ps-js-autotime {
  color: var(--lsfs-text-dim) !important;
  font-size: 12.5px !important;
}
.ps-post__info { margin-top: 2px !important; }

/* ---------- TESTO POST ---------- */
.ps-post__content {
  padding: 0 16px 12px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--lsfs-text) !important;
  word-break: break-word;
}
/* clamp a 2 righe quando il JS marca un post "lungo" */
.ps-post__content.lsfs-clamp .peepso-markdown,
.ps-post__content.lsfs-clamp > span:first-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ps-post__content.lsfs-expanded .peepso-markdown,
.ps-post__content.lsfs-expanded > span:first-child {
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* il nostro toggle "altro/meno" */
.lsfs-toggle {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lsfs-accent);
  cursor: pointer;
  user-select: none;
}
/* nascondi il "Leggi altro" nativo di PeepSo: gestiamo noi l'espansione */
/* "Leggi altro" nativo di PeepSo: lo lasciamo visibile e lo stilizziamo */
.ps-read-more {
  display: inline !important;
  color: var(--lsfs-accent) !important;
  font-weight: 600;
  cursor: pointer;
}

/* gli hashtag un po' più discreti */
.ps-stream-hashtag { color: var(--lsfs-accent) !important; font-weight: 600; }

/* ---------- MEDIA: container ---------- */
.ps-post__attachments {
  margin: 0 !important;
  padding: 0 16px 12px !important;
}

/* --- FOTO --- */
.ps-post__gallery {
  border-radius: var(--lsfs-media-radius) !important;
  overflow: hidden !important;
  background: #000 !important;
  /* annulla i limiti inline di PeepSo che bloccano a 600px e impongono ratio strani */
  max-width: 100% !important;
  width: 100% !important;
  max-height: none !important;
}
.ps-media-grid-item,
.ps-media-grid-padding,
.ps-media-grid-fitwidth {
  width: 100% !important;
  height: 100% !important;
}
/* foto verticali: 9:16 COVER (riempie e taglia, stile reel) */
.ps-post__gallery--single .ps-media-grid-item img {
  width: 100% !important;
  height: auto !important;
  max-height: var(--lsfs-media-vh) !important;
  display: block;
  object-fit: cover !important;
}
/* quando il JS rileva un'immagine verticale, forziamo il box 9:16 cover */
.ps-post__gallery.lsfs-vertical {
  aspect-ratio: 9 / 16;
  max-height: var(--lsfs-media-vh);
  max-width: calc(var(--lsfs-media-vh) * 9 / 16);
  margin-inline: auto;
}
.ps-post__gallery.lsfs-vertical img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-height: none !important;
}

/* --- VIDEO R2 (wp-video) --- */
.ps-media--iframe.ps-js-video .wp-video,
.ps-media--iframe.ps-js-video .wp-video video,
.ps-post__attachments video.wp-video-shortcode {
  width: 100% !important;
  border-radius: var(--lsfs-media-radius) !important;
  background: #000 !important;
}
/* video verticali R2: box 9:16 cover */
.ps-post__attachments video.wp-video-shortcode {
  max-height: var(--lsfs-media-vh) !important;
  object-fit: cover !important;
}
.ls-vertical-video {
  aspect-ratio: 9 / 16;
  max-height: var(--lsfs-media-vh);
  max-width: calc(var(--lsfs-media-vh) * 9 / 16);
  margin-inline: auto;
  border-radius: var(--lsfs-media-radius);
  overflow: hidden;
  background: #000;
}
.ls-vertical-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-height: none !important;
}

/* --- VIDEO thumbnail (preview con play) R2 --- */
.ps-media__video-thumb {
  border-radius: var(--lsfs-media-radius) !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
}

/* --- IFRAME YouTube/embed: 16:9 pulito --- */
.ps-media-iframe iframe {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
  border-radius: var(--lsfs-media-radius) !important;
  display: block;
}
/* la "scheda descrizione" sotto i video embed: più compatta e discreta */
.ps-media--video.ps-media-video {
  margin-top: 8px !important;
}
.ps-media__body {
  background: #f6f7f9 !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
}
.ps-media__title { font-weight: 600 !important; font-size: 13px !important; }
.ps-media__subtitle { color: var(--lsfs-text-dim) !important; font-size: 11px !important; }
.ps-media__desc {
  font-size: 12px !important;
  color: var(--lsfs-text-dim) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- BOX PRODOTTO MARKET (da preservare, solo allineato) ---------- */
.ls-market-buy-box {
  margin: 0 16px 12px !important;
  border-radius: 12px !important;
}

/* ---------- BARRA AZIONI (reactions/commenti/share) ---------- */
.ps-post__footer { padding: 0 !important; }
.ps-post__actions-inner {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px !important;
  padding: 8px 12px 12px !important;
  border-top: 1px solid #f0f1f3 !important;
}
.ps-post__action {
  border-radius: 10px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  color: var(--lsfs-text-dim) !important;
  transition: background .15s ease;
}
.ps-post__action:hover { background: #f3f4f6 !important; }
.ps-post__action i { font-size: 15px !important; }

/* nascondi azioni meno utili nel feed per pulizia (restano cliccabili da menu …) */
.ps-post__action--save.ps-js-follow-toggle { display: none !important; }

/* ---------- COMMENTI: input più morbido ---------- */
.ps-comments__inner { padding: 10px 14px !important; }
.ps-comments__input,
.pso-postbox__input textarea {
  border-radius: 20px !important;
  background: #f4f5f7 !important;
}

/* ---------- POSTBOX in cima: arrotondato come una card ---------- */
.pso-postbox {
  border-radius: var(--lsfs-card-radius) !important;
  box-shadow: var(--lsfs-card-shadow) !important;
  border: 1px solid #ececf0 !important;
  margin-bottom: var(--lsfs-gap) !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  :root { --lsfs-media-vh: 70vh; }
  .ps-post.ps-js-activity { border-radius: 14px !important; }
  .ps-activity.ps-activity--narrow { padding-inline: 8px !important; }
}

/* =========================================================
   LS FEED SKIN — OVERLAY MEDIA (v1.1)
   Testo sopra il media + comandi video custom.
   ========================================================= */

/* wrapper che il JS crea attorno a media + testo overlay */
.lsfs-media-stage {
  position: relative;
  border-radius: var(--lsfs-media-radius);
  overflow: hidden;
  background: #000;
  margin: 0 16px 12px;
}
/* verticale: box 9:16, il media riempie tutto (testo sopra, niente schiacciamento) */
.lsfs-media-stage.lsfs-vert {
  aspect-ratio: 9 / 16;
  max-height: var(--lsfs-media-vh);
  max-width: calc(var(--lsfs-media-vh) * 9 / 16);
  margin-inline: auto;
}
.lsfs-media-stage.lsfs-horiz { aspect-ratio: 16 / 9; }

/* il media dentro lo stage riempie sempre */
.lsfs-media-stage img,
.lsfs-media-stage video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  max-height: none !important;
  border-radius: 0 !important;
  background: #000;
}

/* --- TESTO IN OVERLAY (in basso, su gradiente) --- */
.lsfs-overlay-text {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 38px 14px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 100%);
  color: #fff;
  font-size: 14.5px; line-height: 1.45;
  pointer-events: none; /* i tap passano al video sotto... */
}
.lsfs-overlay-text .lsfs-otxt { pointer-events: auto; } /* ...ma testo e link restano cliccabili */
.lsfs-overlay-text a { color: #fff; text-decoration: underline; }
.lsfs-overlay-text .ps-stream-hashtag { color: #fff !important; opacity: .92; }

.lsfs-overlay-text.lsfs-clamp .lsfs-otxt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lsfs-overlay-text .lsfs-toggle {
  pointer-events: auto;
  display: inline; margin-left: 6px;
  font-weight: 700; color: #fff; opacity: .95;
  cursor: pointer; text-decoration: underline;
}

/* --- COMANDI VIDEO CUSTOM --- */
/* zona centrale tap = play/pausa */
.lsfs-tap-center {
  position: absolute; inset: 0; z-index: 2;
  cursor: pointer; background: transparent;
}
/* icona play/pausa al centro, appare brevemente */
.lsfs-bigicon {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.9);
  z-index: 4; pointer-events: none;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.lsfs-bigicon.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.lsfs-bigicon svg { width: 30px; height: 30px; fill: #fff; }

/* comandi alto-destra: audio + fullscreen */
.lsfs-controls-tr {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; gap: 8px;
}
.lsfs-ctrl-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; padding: 0;
  transition: background .15s ease;
}
.lsfs-ctrl-btn:hover { background: rgba(0,0,0,.7); }
.lsfs-ctrl-btn svg { width: 19px; height: 19px; fill: #fff; }

/* badge "tocca per audio" quando parte muto */
.lsfs-muted-badge {
  position: absolute; bottom: 12px; right: 12px; z-index: 5;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 20px;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; pointer-events: auto;
}
.lsfs-muted-badge svg { width: 15px; height: 15px; fill: #fff; }
.lsfs-media-stage.lsfs-has-text .lsfs-muted-badge { bottom: auto; top: 56px; }

/* progress bar sottile in basso */
.lsfs-progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  height: 3px; background: rgba(255,255,255,.25);
  pointer-events: none;
}
.lsfs-progress-fill { height: 100%; width: 0; background: var(--lsfs-accent); }

/* quando lo stage è attivo (in viewport e in play) */
.lsfs-media-stage.lsfs-playing .lsfs-bigicon:not(.show) { opacity: 0; }

/* =========================================================
   LS FEED SKIN — FIX FOTO (v1.3)
   Foto: orientamento corretto + contain su fondo nero
   (niente tagli, niente sfondo del post che affiora)
   ========================================================= */
.lsfs-media-stage.lsfs-square { aspect-ratio: 1 / 1; }

/* le FOTO mostrano tutta l'immagine, fondo nero pulito */
.lsfs-media-stage.lsfs-photo { background: #000 !important; }
.lsfs-media-stage.lsfs-photo img {
  object-fit: contain !important;   /* mostra l'intera foto, niente ritaglio */
  background: #000 !important;
}
/* foto orizzontali: niente box altissimo, segue il 16:9 */
.lsfs-media-stage.lsfs-photo.lsfs-horiz { aspect-ratio: 16 / 9; max-width: 100%; }
.lsfs-media-stage.lsfs-photo.lsfs-vert  { aspect-ratio: 9 / 16; }

/* VIDEO verticali (reel): cover che riempie */
.lsfs-media-stage:not(.lsfs-photo).lsfs-vert video { object-fit: cover !important; }
/* VIDEO orizzontali/quadrati: contain, mostra tutto su fondo nero (niente taglio ai lati) */
.lsfs-media-stage:not(.lsfs-photo).lsfs-horiz video,
.lsfs-media-stage:not(.lsfs-photo).lsfs-square video { object-fit: contain !important; background: #000 !important; }

/* =========================================================
   LS FEED SKIN — FIX COMANDI VIDEO (v1.4)
   Comandi sempre visibili anche durante autoplay.
   ========================================================= */
/* forza i comandi sopra al video in qualsiasi stato */
.lsfs-media-stage .lsfs-controls-tr { z-index: 20 !important; opacity: 1 !important; visibility: visible !important; }
.lsfs-media-stage .lsfs-muted-badge { z-index: 20 !important; }
.lsfs-media-stage .lsfs-tap-center  { z-index: 10 !important; }
.lsfs-media-stage .lsfs-progress    { z-index: 15 !important; }
.lsfs-media-stage video             { z-index: 1 !important; }

/* i bottoni comando: sfondo permanente così si vedono sempre su qualsiasi frame */
.lsfs-ctrl-btn {
  background: rgba(0,0,0,.55) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* NON nascondere mai i comandi quando il video è in play (rimuove regressione) */
.lsfs-media-stage.lsfs-playing .lsfs-controls-tr,
.lsfs-media-stage.lsfs-playing .lsfs-muted-badge { opacity: 1 !important; }