/* ===== CHAT ISTITUZIONALE COMUNE ===== */

:root{
  --dc-bordeaux: #7b1e2b;
  --dc-blue: #1e3a8a;
  --dc-bg: #ffffff;
  --dc-panel: #f4f6f9;
  --dc-border: #e5e7eb;
  --dc-text: #1f2937;
  --dc-muted: #6b7280;
  --dc-radius: 18px;
}

.diffchat-wrap{
  max-width: 880px;
  margin: 40px auto;
  background: var(--dc-bg);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,.08);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  border: 1px solid var(--dc-border);
}

/* HEADER ISTITUZIONALE */
.diffchat-head{
  background: linear-gradient(90deg, var(--dc-bordeaux), var(--dc-blue));
  padding: 22px;
  color: white;
  text-align: center;
  position: relative;
}

.diffchat-head::before{
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 12px auto;
  background: url("logo-comune.png") center/contain no-repeat;
}

.diffchat-title{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .3px;
}

.diffchat-sub{
  margin-top: 6px;
  font-size: 14px;
  opacity: 0.9;
}

/* AREA MESSAGGI */
.diffchat-messages{
  padding: 20px;
  height: 480px;
  overflow-y: auto;
  background: var(--dc-panel);
}

.diffchat-msg{
  max-width: 75%;
  padding: 12px 15px;
  border-radius: var(--dc-radius);
  margin: 10px 0;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-wrap;
  border: 1px solid var(--dc-border);
}

.diffchat-msg.bot{
  background: #ffffff;
  border-left: 4px solid var(--dc-blue);
}

.diffchat-msg.user{
  background: #fde8ec;
  margin-left: auto;
  border-right: 4px solid var(--dc-bordeaux);
}

/* FORM */
.diffchat-form{
  display: flex;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--dc-border);
  background: white;
}

.diffchat-text{
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--dc-border);
  font-size: 15px;
}

.diffchat-text:focus{
  outline: none;
  border-color: var(--dc-blue);
  box-shadow: 0 0 0 3px rgba(30,58,138,.1);
}

.diffchat-file{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--dc-border);
  cursor: pointer;
}

.diffchat-file:hover{
  background: #f3f4f6;
}

.diffchat-file input{
  display: none;
}

.diffchat-send{
  background: var(--dc-blue);
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}

.diffchat-send:hover{
  background: #162e6e;
}

/* FOOTER */
.diffchat-footnote{
  padding: 12px 16px;
  font-size: 12px;
  color: var(--dc-muted);
  background: #ffffff;
  border-top: 1px solid var(--dc-border);
}

/* MOBILE */
@media (max-width: 520px){
  .diffchat-messages{
    height: 60vh;
  }
}
/* ===== MOBILE FIX (iPhone/Android) ===== */

/* altezza corretta su mobile (evita bug 100vh su Safari) */
.diffchat-wrap{
  height: 100dvh; /* fallback moderno */
}

/* se il browser non supporta dvh, resta il 100vh già impostato altrove */

/* area messaggi: lascia spazio all'input */
.diffchat-messages{
  padding-bottom: 140px; /* spazio per input + nota */
}

/* barra input sempre visibile in basso */
.diffchat-form{
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: #fff;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0,0,0,.06);
}

/* nota sotto input, ma sempre leggibile */
.diffchat-footnote{
  position: sticky;
  bottom: 0;
  z-index: 49;
  background: #fff;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* input più comodo su mobile */
@media (max-width: 520px){
  .diffchat-wrap{
    border-radius: 0 !important;
  }

  .diffchat-messages{
    padding: 14px;
    padding-bottom: 160px; /* più spazio su mobile */
  }

  .diffchat-text{
    font-size: 16px; /* evita zoom iOS */
    padding: 14px 12px;
    border-radius: 14px;
  }

  .diffchat-send{
    padding: 12px 14px;
    border-radius: 14px;
    min-width: 72px;
  }

  .diffchat-file{
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }
}
/* ===== ULTRA UX PACK ===== */

/* Messaggi: animazione ingresso */
.diffchat-msg{
  animation: dcPop .18s ease-out;
  transform-origin: 50% 100%;
}

@keyframes dcPop{
  from{ transform: translateY(6px) scale(.98); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

/* Typing indicator (tre pallini) */
.diffchat-typing{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  max-width: 60%;
  margin: 10px 0;
}

.diffchat-typing .dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #9ca3af;
  animation: dcBounce 1s infinite ease-in-out;
}

.diffchat-typing .dot:nth-child(2){ animation-delay: .12s; }
.diffchat-typing .dot:nth-child(3){ animation-delay: .24s; }

@keyframes dcBounce{
  0%, 80%, 100%{ transform: translateY(0); opacity: .55; }
  40%{ transform: translateY(-5px); opacity: 1; }
}

/* Input: textarea che sembra app + focus più bello */
.diffchat-text{
  resize: none;
  min-height: 46px;
  max-height: 140px;
  line-height: 1.25;
}

/* Bottone invio più “app” */
.diffchat-send{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.diffchat-send .send-icon{
  width: 18px;
  height: 18px;
  display: inline-block;
}

/* Se vuoi la versione solo icona su mobile */
@media (max-width: 520px){
  .diffchat-send{
    min-width: 52px;
    padding: 12px 12px;
  }
  .diffchat-send span.label{
    display: none;
  }
}

/* ===== Mobile: input sempre visibile + safe-area ===== */
.diffchat-messages{
  padding-bottom: 160px;
}

.diffchat-form{
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: #fff;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0,0,0,.06);
}

.diffchat-footnote{
  position: sticky;
  bottom: 0;
  z-index: 49;
  background: #fff;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* Altezza corretta su Safari mobile */
.diffchat-wrap{
  height: 100dvh;
}
/* ===== FIX iOS: chat deve riempire e "salire" ===== */

/* contenitore principale: flex + altezza corretta */
.diffchat-wrap{
  height: 100dvh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* header fisso sopra */
.diffchat-head{
  flex: 0 0 auto !important;
}

/* messaggi: prendono TUTTO lo spazio disponibile */
.diffchat-messages{
  flex: 1 1 auto !important;
  min-height: 0 !important;   /* CRUCIALE su iOS */
  height: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 120px !important; /* spazio input */
}

/* input sempre in basso, senza spingere fuori il layout */
.diffchat-form{
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 100 !important;
  background: #fff !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
}

/* la footnote NON deve essere sticky (sennò ruba spazio e crea buchi) */
.diffchat-footnote{
  position: static !important;
}

/* su iOS: evita scroll della pagina, scroll solo nei messaggi */
html, body{
  height: 100%;
}

/* ===== FIX HARD: FULLSCREEN SU TEMA A BLOCCHI (TT5) ===== */

/* SOLO pagina chat (slug) */
body.page-slug-chat-raccolta-differenziata,
body.page-slug-chat-raccolta-differenziata html{
  height: 100%;
}

/* azzera i contenitori del tema */
body.page-slug-chat-raccolta-differenziata .wp-site-blocks,
body.page-slug-chat-raccolta-differenziata main,
body.page-slug-chat-raccolta-differenziata .wp-block-post-content,
body.page-slug-chat-raccolta-differenziata .wp-block-group,
body.page-slug-chat-raccolta-differenziata .wp-block-cover,
body.page-slug-chat-raccolta-differenziata .wp-block-template-part{
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* il wrapper del sito deve occupare il viewport */
body.page-slug-chat-raccolta-differenziata .wp-site-blocks{
  min-height: 100dvh !important;
  height: 100dvh !important;
  overflow: hidden !important; /* niente scroll pagina */
}

/* la chat diventa una "app" assoluta */
body.page-slug-chat-raccolta-differenziata .diffchat-wrap{
  position: fixed !important;
  inset: 0 !important;            /* top/right/bottom/left = 0 */
  height: 100dvh !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f4f6f9;
  z-index: 9999 !important;
}

/* header non deve crescere */
body.page-slug-chat-raccolta-differenziata .diffchat-head{
  flex: 0 0 auto !important;
}

/* messaggi = area scrollabile */
body.page-slug-chat-raccolta-differenziata .diffchat-messages{
  flex: 1 1 auto !important;
  min-height: 0 !important; /* fondamentale */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
}

/* input sempre visibile in basso */
body.page-slug-chat-raccolta-differenziata .diffchat-form{
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10000 !important;
  background: #fff !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
}

/* la nota non deve rubare spazio */
body.page-slug-chat-raccolta-differenziata .diffchat-footnote{
  display: none !important; /* su mobile meglio togliere, se vuoi la rimettiamo dentro header */
}

/* iOS: evita zoom e migliora */
@media (max-width: 520px){
  body.page-slug-chat-raccolta-differenziata .diffchat-text{ font-size:16px; }
}
/* ===== FULLSCREEN HARD FIX (slug reale) ===== */
body.page-slug-chat-raccolta-differenziata,
body.page-slug-chat-raccolta-differenziata html{
  height: 100%;
}

/* azzera padding/margini del tema (TT5) */
body.page-slug-chat-raccolta-differenziata .wp-site-blocks,
body.page-slug-chat-raccolta-differenziata main,
body.page-slug-chat-raccolta-differenziata .wp-block-post-content{
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* niente scroll pagina: scroll solo chat */
body.page-slug-chat-raccolta-differenziata .wp-site-blocks{
  min-height: 100dvh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

/* la chat è un layer fisso a schermo intero */
body.page-slug-chat-raccolta-differenziata .diffchat-wrap{
  position: fixed !important;
  inset: 0 !important;
  height: 100dvh !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 99999 !important;
}

/* header NON cresce */
body.page-slug-chat-raccolta-differenziata .diffchat-head{
  flex: 0 0 auto !important;
}

/* messaggi = unica area scrollabile */
body.page-slug-chat-raccolta-differenziata .diffchat-messages{
  flex: 1 1 auto !important;
  min-height: 0 !important;              /* chiave su iOS */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
}

/* input sempre visibile in basso */
body.page-slug-chat-raccolta-differenziata .diffchat-form{
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 100000 !important;
  background: #fff !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
}

/* la nota sotto l'input crea "buco": su mobile la nascondiamo */
@media (max-width: 520px){
  body.page-slug-chat-raccolta-differenziata .diffchat-footnote{
    display: none !important;
  }
  body.page-slug-chat-raccolta-differenziata .diffchat-text{
    font-size: 16px;
  }
}
/* ===== FIX DEFINITIVO iPhone/TT5: chat sempre "su" ===== */

body.page-slug-chat-raccolta-differenziata{
  overflow: hidden !important;
}

/* azzera layout del tema */
body.page-slug-chat-raccolta-differenziata .wp-site-blocks,
body.page-slug-chat-raccolta-differenziata main,
body.page-slug-chat-raccolta-differenziata .wp-block-post-content{
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* blocca scroll pagina */
body.page-slug-chat-raccolta-differenziata .wp-site-blocks{
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

/* la chat diventa una web-app fullscreen */
body.page-slug-chat-raccolta-differenziata .diffchat-wrap{
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 99999 !important;
}

/* header fisso */
body.page-slug-chat-raccolta-differenziata .diffchat-head{
  flex: 0 0 auto !important;
}

/* solo i messaggi scrollano */
body.page-slug-chat-raccolta-differenziata .diffchat-messages{
  flex: 1 1 auto !important;
  min-height: 0 !important; /* CHIAVE iOS */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
}

/* input sempre visibile */
body.page-slug-chat-raccolta-differenziata .diffchat-form{
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 100000 !important;
  background: #fff !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
}

/* su mobile nascondi la nota (crea spazio inutile) */
@media (max-width: 520px){
  body.page-slug-chat-raccolta-differenziata .diffchat-footnote{
    display: none !important;
  }
  body.page-slug-chat-raccolta-differenziata .diffchat-text{
    font-size: 16px;
  }
}
/* ===== iOS keyboard fix via VisualViewport ===== */

/* usa altezza reale del viewport (settata via JS) */
body.page-slug-chat-raccolta-differenziata .diffchat-wrap{
  height: var(--vvh, 100dvh) !important;
}