/* /www/modules/social/comments.css — WHITE MINIMAL PRO */

/* ===================== TOKENS (neutrali) ===================== */
:root{
  --bg:#ffffff;
  --text:#111827;            /* quasi nero */
  --muted:#6b7280;           /* grigio medio */
  --border:#e5e7eb;          /* linea sottile */
  --soft:#f9fafb;            /* soft fill */
  --ring:0 0 0 3px rgba(17,24,39,.08);

  --r-sm:10px;
  --r:14px;
  --r-lg:18px;

  --sh-sm:0 6px 14px rgba(17,24,39,.06);
  --sh:0 14px 36px rgba(17,24,39,.10);

  --icon-size:18px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* ===================== WRAPPER ===================== */
.soc-comments{
  max-width: 920px; margin: 0 auto; padding: 0 12px;
  color: var(--text); background: var(--bg); font-family: var(--font);
  max-width: min(920px, 100%); overflow-x: clip;  /* no overflow in mobile */
}

/* ===================== COMPOSER ===================== */
.soc-form-sticky{
  position: sticky; top: env(safe-area-inset-top,0); z-index: 20;
  background: var(--bg); padding: 12px;
  border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start;
}
.soc-userpic img{
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border:1px solid var(--border); box-shadow: var(--sh-sm);
}
.soc-userline{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.soc-username{ font-weight:700; color:var(--text); text-decoration:none; }
.soc-username:hover{ text-decoration: underline; }
.soc-user-stats{ display:flex; gap:12px; color:var(--muted); font-size:13px; }
.soc-user-stats b{ font-weight:700; color:var(--text); }

/* campi: quasi bianchi, testo scuro */
.soc-form-main textarea{
  width:100%; min-height:92px; padding:12px 14px;
  border:1px solid var(--border); border-radius: var(--r);
  background: linear-gradient(180deg, #fff, #fff);
  color: var(--text); line-height:1.55; resize: vertical;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.soc-form-main textarea::placeholder{ color:var(--muted); }
.soc-form-main textarea:focus{ outline:0; box-shadow: var(--ring); border-color: transparent; }

.soc-row{ display:flex; gap:10px; align-items:center; margin-top:10px; }
.soc-emoji{
  padding:8px 10px; border-radius: var(--r-sm);
  border:1px solid var(--border);
  background:#fff; color: var(--text);
  cursor:pointer; transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
}
.soc-emoji:hover{ background: var(--soft); box-shadow: var(--sh-sm); }
.soc-emoji:active{ transform: translateY(1px); }

.soc-nick{
  flex:1; padding:8px 10px; border:1px solid var(--border);
  border-radius: var(--r-sm); background:#fff; color:var(--text);
}
.soc-nick::placeholder{ color:var(--muted); }
.soc-nick:focus{ outline:0; box-shadow: var(--ring); border-color: transparent; }

.soc-btn, .soc-submit{
  padding:10px 14px; border:1px solid var(--border); border-radius:999px;
  background:#fff; color:var(--text); font-weight:700; letter-spacing:.2px; cursor:pointer;
  box-shadow: var(--sh-sm);
  transition: transform .06s ease, box-shadow .15s ease, background .12s ease;
}
.soc-btn:hover, .soc-submit:hover{ background: var(--soft); box-shadow: var(--sh); }
.soc-btn:active, .soc-submit:active{ transform: translateY(1px); }
.soc-submit{ margin-left:auto; }
.soc-btn:disabled, .soc-submit:disabled{ opacity:.6; cursor:not-allowed; }

.soc-miniimg{
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 12px; border:1px solid var(--border); background:#fff; box-shadow: var(--sh-sm);
}

/* ===================== LISTA & ITEM ===================== */
.soc-list{ padding: 16px 0 28px; }

.soc-item{
  display:grid; grid-template-columns: 48px 1fr; gap: 12px; align-items:start;
  margin: 16px 0; min-width:0;
}
@media (min-width:480px){ .soc-item{ grid-template-columns: 52px 1fr; gap:14px; } }

.soc-item .avatar{
  width:28px; height:28px; border-radius:50%; object-fit:cover;
  border:1px solid var(--border); background:#fff; box-shadow: var(--sh-sm);
}

/* bolla: bianca, bordo sottile, ombra soft */
.soc-bubble{
  position: relative; background:#fff; border:1px solid var(--border);
  padding: 12px 14px; border-radius: var(--r); box-shadow: var(--sh-sm);
  max-width:100%; min-width:0; transition: box-shadow .15s ease, transform .06s ease;
}
.soc-bubble:hover{ box-shadow: var(--sh); transform: translateY(-1px); }

/* triangolino */
.soc-bubble::before{
  content:""; position:absolute; left:-7px; top:16px; width:8px; height:12px;
  background: #fff; border-left:1px solid var(--border); border-top:1px solid var(--border);
  transform: rotate(-45deg); border-top-left-radius: 3px;
}

.soc-meta{ font-size:12px; color:var(--muted); display:flex; gap:10px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.soc-name{ font-weight:700; color:var(--text); text-decoration:none; }
.soc-name:hover{ text-decoration: underline; }

.soc-text{ white-space: pre-wrap; overflow-wrap:anywhere; word-break: break-word; margin:6px 0; line-height:1.65; color:var(--text); }

/* evidenzia ancoraggio */
.soc-item:target .soc-bubble{ box-shadow: 0 0 0 3px rgba(17,24,39,.07), var(--sh); }

/* ===================== AZIONI (icone sottili FA) ===================== */
.soc-actions{ display:flex; flex-wrap: wrap; gap:10px; align-items:center; margin-top:10px; }

/* pill trasparente, linea sottile */
.soc-act{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text);
  background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:8px 12px 8px 40px; cursor:pointer;
  transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
}
.soc-act:hover{ background: var(--soft); box-shadow: var(--sh-sm); }
.soc-act:active{ transform: translateY(1px); }

/* sostituisco le emoji di voto con icone FA, numeri visibili nello span */
.soc-act[data-act="vote"]{ color: transparent; }
.soc-act[data-act="vote"] span{ color:var(--text); font-weight:700; font-size:13px; }

/* icone FA sottili (regular) */
.soc-act::before{
  content:""; position:absolute; left:14px; top:50%; transform: translateY(-50%);
  width: var(--icon-size); height: var(--icon-size);
  font-family:"Font Awesome 6 Free"; font-weight:400;  /* Regular */
  font-size: var(--icon-size); line-height:1; color: var(--text);
  display:inline-block;
}

/* like/dislike regular; se non disponibile il regular, ricade sul solid (700) */
.soc-act[data-act="vote"][data-val="1"]::before{ content:"\f164"; } /* thumbs-up */
.soc-act[data-act="vote"][data-val="-1"]::before{ content:"\f165"; } /* thumbs-down */

/* REPLY: testuale + icona sottile */
.soc-act[data-act="reply"]{ padding-left: 42px; color:var(--text); font-weight:700; letter-spacing:.2px; }
.soc-act[data-act="reply"]::before{ content:"\f3e5"; } /* reply */

/* ===================== SHARE (brand originali) ===================== */
.soc-share{
  display:flex; flex-wrap: wrap; gap:10px; margin-left:auto; max-width:100%;
}
.soc-share a{
  width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--border); text-decoration:none;
  box-shadow: var(--sh-sm); transition: transform .06s, box-shadow .12s ease, background .12s ease;
  color: var(--text); font-size:0; position:relative;
}
.soc-share a:hover{ transform: translateY(-1px); background: var(--soft); box-shadow: var(--sh); }

/* icone brand FA (originali, a colore) */
.soc-share a::before{
  font-family:"Font Awesome 6 Brands"; font-weight:400; font-size:16px; line-height:1;
}
.soc-share a[href*="facebook"]::before{ content:"\f39e"; color:#1877F2; }
.soc-share a[href*="wa.me"]::before{ content:"\f232"; color:#25D366; }
.soc-share a[href*="t.me"]::before{ content:"\f3fe"; color:#229ED9; }
.soc-share a[href*="instagram"]::before{ content:"\f16d"; color:#C13584; }

/* Icona di default per il pulsante "copia link/permalink"
   (tutti i link che NON sono WhatsApp/Facebook/Telegram/Instagram) */
/* Icona di default per il pulsante "copia link/permalink"
   (tutti i link che NON sono WhatsApp/Facebook/Telegram/Instagram) */
.soc-share a:not([href*="wa.me"]):not([href*="facebook"]):not([href*="t.me"]):not([href*="instagram"])::before{
  content: "\f0c1";                         /* fa-link */
  font-family: "Font Awesome 6 Free";       /* set corretto */
  font-weight: 900;                         /* Solid */
  font-size: 16px;
  line-height: 1;
  color: var(--text);
}


/* ===================== THREAD / FIGLI ===================== */
.soc-children{
  border-left:1px dashed var(--border);
  margin-left: 18px; padding-left: 12px; margin-top: 8px; max-width:100%;
}
.soc-children .soc-item{ margin:10px 0; }

/* gate collapsed */
.soc-collapsed{
  background:#fff; border:1px dashed var(--border); border-radius: var(--r-sm);
  padding:7px 10px; font-size:13px; color:var(--muted);
  cursor:pointer; display:inline-flex; gap:8px; align-items:center;
  transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
}
.soc-collapsed:hover{ background: var(--soft); box-shadow: var(--sh-sm); transform: translateY(-1px); }
.soc-hidden{ display:none; }

/* ===================== MODALE GALLERIA ===================== */
.soc-gallery[hidden]{ display:none; }
.soc-gallery{
  position: fixed; inset: 0; background: rgba(17,24,39,.35);
  display:flex; align-items:center; justify-content:center; z-index: 2000; padding: 16px;
}
@supports(backdrop-filter: blur(12px)){ .soc-gallery{ backdrop-filter: blur(12px); } }

.soc-gallery-inner{
  width:min(900px, 94vw); max-height: 82vh;
  background:#fff; color:var(--text); border:1px solid var(--border); border-radius: var(--r-lg);
  display:flex; flex-direction:column; box-shadow: var(--sh);
  overflow:hidden; transform: scale(.98); opacity:0; animation: socModalIn .18s ease forwards;
}
@keyframes socModalIn{ to{ transform: scale(1); opacity: 1; } }

.soc-gallery-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 12px; border-bottom:1px solid var(--border);
}
.soc-close{
  border:1px solid var(--border); background:#fff; color:var(--text);
  border-radius: var(--r-sm); padding: 8px 12px; cursor:pointer; box-shadow: var(--sh-sm);
  transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
}
.soc-close:hover{ background: var(--soft); box-shadow: var(--sh); }
.soc-close:active{ transform: translateY(1px); }

.soc-gallery-grid{
  padding: 12px; display:grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
  gap: 12px; overflow:auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.soc-gallery-grid::-webkit-scrollbar{ height:10px; width:10px; }
.soc-gallery-grid::-webkit-scrollbar-thumb{ background: #cbd5e1; border-radius: 8px; }
.soc-gallery-grid::-webkit-scrollbar-track{ background: transparent; }
.soc-gallery-grid img{
  width:100%; height:110px; object-fit:cover; border-radius: var(--r); border:1px solid var(--border);
  background:#fff; box-shadow: var(--sh-sm);
  cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.soc-gallery-grid img:hover{ transform: translateY(-1px); background: var(--soft); box-shadow: var(--sh); }

/* ===================== ACCESSIBILITÀ & RESPONSIVE ===================== */
.soc-btn:focus-visible,
.soc-submit:focus-visible,
.soc-emoji:focus-visible,
.soc-nick:focus-visible,
.soc-act:focus-visible,
.soc-close:focus-visible,
.soc-form-main textarea:focus-visible{
  outline:0; box-shadow: var(--ring);
}

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ========= MOBILE FIX: indent controllata & share wrap ========= */
@media (max-width:480px){
  .soc-form-sticky{ grid-template-columns: 48px 1fr; padding: 10px; gap: 10px; }
  .soc-userpic img{ width: 44px; height: 44px; }
  .soc-form-main textarea{ min-height: 80px; }

  .soc-item{ grid-template-columns: 44px 1fr; gap: 10px; min-width: 0; }
  .soc-item .avatar{ width: 24px; height: 24px; }
  .soc-bubble{ max-width: 100%; min-width: 0; }

  /* azioni e share mandano a capo quando serve */
  .soc-actions{ gap:8px; }
  .soc-share{ width:100%; margin-left:0; justify-content:flex-start; }
  .soc-share a{ width:34px; height:34px; }

  /* indent uniforme per qualsiasi profondità, senza allargare */
  .soc-children{ margin-left: 12px; padding-left: 10px; }
  .soc-children .soc-children{ margin-left: 12px; }
  .soc-children .soc-children .soc-children{ margin-left: 12px; }
  .soc-children .soc-children .soc-children .soc-children{ margin-left: 12px; }
  .soc-children .soc-children .soc-children .soc-children .soc-children{ margin-left: 12px; }

  .soc-text{ overflow-wrap:anywhere; word-break: break-word; }
  .soc-comments{ overflow-x: clip; }
}

/* ===== Thread Modal (bianco minimal) ===== */
.soc-thread-modal[hidden]{ display:none; }
.soc-thread-modal{
  position: fixed; inset: 0;
  background: rgba(17,24,39,.35);
  display:flex; align-items:center; justify-content:center;
  z-index: 2100; padding: 16px;
}
@supports(backdrop-filter: blur(12px)){
  .soc-thread-modal{ backdrop-filter: blur(12px); }
}
.soc-thread-modal .inner{
  width:min(900px, 95vw); max-height: 85vh;
  background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius: var(--r-lg,18px);
  display:flex; flex-direction:column; box-shadow: var(--sh,0 14px 36px rgba(17,24,39,.10));
  overflow:hidden;
}
.soc-thread-modal .head{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-bottom:1px solid var(--border);
}
.soc-thread-close{
  border:1px solid var(--border); background:#fff; color:var(--text);
  border-radius: var(--r-sm,10px); padding:6px 10px; cursor:pointer;
  box-shadow: var(--sh-sm,0 6px 14px rgba(17,24,39,.06));
}
.soc-thread-modal .body{
  padding: 12px;
  overflow:auto; /* scroll verticale del thread */
  /* Previene che elementi lunghi allarghino la modale */
  max-width: 100%;
}
.soc-thread-modal .body .soc-bubble{ max-width: 100%; min-width: 0; }
.soc-thread-modal .body .soc-item{ min-width: 0; }

@media (max-width:480px){
  .soc-thread-modal .inner{ width:96vw; max-height: 88vh; }
}

/* Bottone "Apri thread" come pill semplice (senza icona a sinistra) */
.soc-act.soc-open-thread{ padding-left: 12px; }

/* Avatar del composer (facoltativo) */
.soc-userpic img{ width: 40px; height: 40px; }

/* ======== COMPACT LEFT — recupero spazio a sinistra ======== */

/* Lista più compatta */
.soc-list{ padding-left: 0; }

/* Colonna avatar più stretta e gap ridotto */
.soc-item{ grid-template-columns: 30px 1fr; gap: 6px; margin: 10px 0; }
.soc-item .avatar{ width: 30px; height: 30px; }

/* Bolla: padding più contenuto e “triangolo” riallineato vicino al bordo */
.soc-bubble{ padding: 10px 12px; }
.soc-bubble::before{ left:-5px; top:12px; width:8px; height:8px; }

/* Metadati e testo più serrati */
.soc-meta{ margin-bottom: 4px; gap: 6px; }
.soc-text{ margin: 4px 0; }

/* Indent dei figli più piccolo (linea guida sottile) */
.soc-children{
  border-left: 1px dashed var(--border);
  margin-left: 10px;
  padding-left: 8px;
}

/* ===== Mobile: massima densità e niente sprechi di bordo ===== */
@media (max-width:480px){
  /* riduco padding globale laterale del wrapper */
  .soc-comments{ padding-left: 8px; padding-right: 8px; }

  /* composer più stretto a sinistra */
  .soc-form-sticky{ grid-template-columns: 40px 1fr; padding: 8px 10px; }
  .soc-userpic img{ width: 38px; height: 38px; }
  .soc-form-main textarea{ padding: 10px 12px; min-height: 76px; }

  /* avatar e colonna ancora più compatti */
  .soc-item{ grid-template-columns: 28px 1fr; gap: 6px; margin: 8px 0; }
  .soc-item .avatar{ width: 28px; height: 28px; }

  /* bolla e triangolo mini */
  .soc-bubble{ padding: 8px 10px; }
  .soc-bubble::before{ left:-5px; top:10px; width:7px; height:7px; }

  /* indent figli minimo e costante, senza “spingere” la pagina verso destra */
  .soc-children{ margin-left: 8px; padding-left: 8px; border-left-width: 1px; }
  .soc-children .soc-children{ margin-left: 8px; } /* mantiene indent fisso */

  /* azioni e icone più piccole ma leggibili */
  .soc-actions{ gap: 8px; }
  .soc-act{ padding: 6px 10px 6px 34px; font-size: 12px; }
  .soc-act::before{ left: 10px; width: 16px; height: 16px; font-size: 16px; }
  .soc-share a{ width: 32px; height: 32px; }
}