body { margin: 0; padding: 0; }
label { display: block; margin-top: 15px; font-weight: bold; }
input, select, textarea {
  width: 100%; padding: 10px; margin-top: 5px;
  border: 1px solid #ccc; border-radius: 5px; font-size: 16px;
}
/* Bottoni dei form (esclusi header/menu pubblici) */
.contact-container button:not(.theme-toggle):not(.menu-toggle):not(.drawer-close) {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #5CBF74;
  background-image: none;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.contact-container button:not(.theme-toggle):not(.menu-toggle):not(.drawer-close):hover {
  background-color: #469C5A;
  background-image: none;
}

button.is-loading {
  opacity: .7;
  cursor: not-allowed;
}

.success { color: green; margin-top: 20px; }
.error   { color: red;   margin-top: 20px; }
.info    { color: #1E90FF; margin-top: 20px; }
#responseMsg { display: none !important; }

/* Puntini animati accanto al bottone */
.dot-spinner { display:inline-flex; gap:6px; margin-left:10px; vertical-align:middle; align-items:center; }
.dot-spinner .dot { width:6px; height:6px; border-radius:50%; background:#5CBF74; opacity:.2; animation: dotBlink 1s infinite ease-in-out; }
.dot-spinner .dot:nth-child(2){ animation-delay:.15s; }
.dot-spinner .dot:nth-child(3){ animation-delay:.30s; }
.dot-spinner .dot:nth-child(4){ animation-delay:.45s; }
@keyframes dotBlink { 0%,100%{opacity:.2; transform:scale(1);} 50%{opacity:1; transform:scale(1.35);} }

.consenso-row { margin: 12px 0 8px; }
.consenso-label { display:flex; align-items:center; gap:8px; line-height:1.3; }
.consenso-label input[type="checkbox"] { width:18px; height:18px; margin:0; flex:0 0 auto; }
.consenso-label span { display:inline; white-space:normal; }

/* === [ADD] Migliorie responsive per contatta-fisio === */
:root {
  --gap: 12px;
  --family-thread-shell-height: calc(100dvh - 150px);
  --chat-send-btn-size: 40px;
  --chat-send-btn-icon-size: 18px;
  --chat-send-btn-shift-y: -3px;
}

body { margin: 0; padding: 0; }

form#contactForm {
  display: grid;
  gap: var(--gap);
}

label { font-weight: 600; }

input,
select,
textarea,
.contact-container button:not(.theme-toggle):not(.menu-toggle):not(.drawer-close) {
  font-size: 16px;    /* evita zoom iOS */
  padding: 10px 12px;
}

button#submitBtn {
  padding: 12px;
  border-radius: 8px;
}

.dot-spinner { gap: 4px; }
.button-inline-spinner .dot{
  background:#ffffff;
  opacity:.45;
}
.button-inline-spinner .dot:nth-child(1),
.button-inline-spinner .dot:nth-child(2),
.button-inline-spinner .dot:nth-child(3),
.button-inline-spinner .dot:nth-child(4){
  box-shadow:0 0 0 1px rgba(255,255,255,.2);
}
.hidden { display: none !important; }

.button-inline-spinner {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 20px;
}

button#submitBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.field-helper {
  min-height: 18px;
  margin-top: -4px;
  font-size: 13px;
  line-height: 1.35;
  color: transparent;
}

.field-helper.is-error {
  color: #d93025;
}

@media (max-width: 480px) {
  .app { padding: 12px; }
  h2 { font-size: 1.25rem; }
}

/* === Contatta Fisio: contenitore centrato e fluido === */
.contact-container{
  max-width: clamp(320px, 92vw, 760px);
  margin-inline: auto;
}

.contact-container.is-family-thread{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:var(--family-thread-shell-height);
  min-height:var(--family-thread-shell-height);
  max-height:var(--family-thread-shell-height);
  overflow:hidden;
  box-sizing:border-box;
}

.contact-page-title{
  margin:0 0 18px;
  white-space:normal;
  overflow:visible;
  text-overflow:initial;
  line-height:1.06;
}

.contact-page-title-thread{
  display:none;
}

html.family-thread-boot,
html.family-thread-open,
body.family-thread-open{
  overflow:hidden;
}

body.family-thread-open{
  height:100dvh;
}

html.family-thread-boot .app,
html.family-thread-open .app{
  min-height:calc(100dvh - 112px);
  max-height:calc(100dvh - 112px);
  overflow:hidden;
}

html.family-thread-boot .contact-page-title-default,
html.family-thread-open .contact-page-title-default{
  display:none;
}

html.family-thread-boot .contact-page-title-thread,
html.family-thread-open .contact-page-title-thread{
  display:inline;
}

/* il form mantiene solo la griglia (niente max-width qui) */
.contact-container form#contactForm{
  display: grid;
  gap: var(--gap, 12px);
  margin: 0;
}

/* tutti i campi stessa larghezza */
.contact-container input[type="text"],
.contact-container input[type="email"],
.contact-container select,
.contact-container textarea{
  width: 100%;
  box-sizing: border-box;
}

/* bottone coerente e piena larghezza */
.contact-container button#submitBtn{
  width: 100%;
  padding: 12px;
  border-radius: 8px;
}

/* titolo leggermente più compatto su telefoni piccoli */
@media (max-width: 375px){
  .contact-container h2{ font-size: clamp(18px, 6vw, 22px); }
}

/* === [FIX] Contatta-fisio: i titoli dei campi NON sono cliccabili === */
form#contactForm > label{
  pointer-events: none;
  cursor: default;
}
/* Il label del consenso resta cliccabile (testo + checkbox) */
label.consenso-label{
  pointer-events: auto;
}
/* Se mai ci fossero link dentro label, mantieni cliccabili i link */
form#contactForm > label a{
  pointer-events: auto;
}

/* === [FIX] Assistenza: i titoli dei campi NON sono cliccabili === */
form#supportForm > label{
  pointer-events: none;
  cursor: default;
}
form#supportForm > label a{
  pointer-events: auto;
}

.privacy-inline summary { cursor: pointer; color:#2b6cb0; }
.privacy-inline div { color:#222; }

.family-thread-view{
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1 1 auto;
  min-height:0;
  height:100%;
  max-height:100%;
  overflow:hidden;
}

.family-thread-view.hidden{
  display:none !important;
}

.family-thread-header h3{
  margin:0;
}

.family-thread-header,
.family-thread-status,
.family-thread-composer{
  flex:0 0 auto;
}

.family-thread-header p{
  margin:4px 0 0;
  color:#64748b;
}

.family-thread-status{
  padding:10px 12px;
  border-radius:12px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:14px;
}

.family-thread-messages{
  border:1px solid #dbe2ea;
  border-radius:16px;
  background:#f8fafc;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:10px;
  flex:1 1 auto;
  min-height:140px;
  height:auto;
  max-height:none;
  overflow:auto;
  overscroll-behavior:contain;
}

.family-chat-row{
  display:flex;
}

.family-chat-row--left{
  justify-content:flex-start;
}

.family-chat-row--right{
  justify-content:flex-end;
}

.family-chat-bubble{
  max-width:min(82%, 620px);
  border:1px solid #dbe2ea;
  border-radius:18px;
  padding:12px 14px;
  font-size:14px;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.family-chat-bubble--left{
  background:#ffffff;
}

.family-chat-bubble--right{
  background:#dcfce7;
  border-color:#86efac;
}

.family-chat-bubble-head{
  display:flex;
  gap:8px;
  align-items:center;
}

.family-chat-bubble-head span{
  margin-left:auto;
  font-size:12px;
  color:#64748b;
  white-space:nowrap;
}

.family-chat-bubble-text{
  margin-top:4px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.family-thread-composer{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  margin-top:4px;
  padding-top:8px;
  border-top:1px solid #dbe2ea;
  background:inherit;
  min-height:0;
  flex:0 0 auto;
  position:relative;
  z-index:1;
}

.family-thread-composer textarea{
  min-height:72px;
  max-height:132px;
  margin:0;
}

.family-thread-composer.is-readonly{
  opacity:.82;
}

#familyThreadReplyBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:var(--chat-send-btn-size);
  min-width:var(--chat-send-btn-size);
  height:calc(var(--chat-send-btn-size) + 4px);
  padding:0;
  margin-top:0;
  border-radius:12px;
  align-self:center;
  transform:translateY(var(--chat-send-btn-shift-y));
}

#familyThreadReplyBtn .btn-icon{
  font-size:var(--chat-send-btn-icon-size);
  line-height:1;
  font-weight:700;
}

.mini-menu-spinner{
  width:12px;
  height:12px;
  border:2px solid rgba(148, 163, 184, 0.35);
  border-top-color:#2563eb;
  border-radius:50%;
  flex:0 0 12px;
  animation: miniMenuSpin .7s linear infinite;
}

@keyframes miniMenuSpin {
  to { transform: rotate(360deg); }
}

html.family-thread-boot #contactForm{
  display:none !important;
}

html.family-thread-boot .contact-container{
  display:flex;
  flex-direction:column;
  height:var(--family-thread-shell-height);
  min-height:var(--family-thread-shell-height);
  max-height:var(--family-thread-shell-height);
  overflow:hidden;
  box-sizing:border-box;
}

html.family-thread-boot #familyThreadView{
  display:grid !important;
  visibility:visible;
  flex:1 1 auto;
  min-height:0;
}

/* === Tema scuro: pagine contatto pubblico === */
html.theme-dark body {
  background: #111827;
  color: #f9fafb;
}

html.theme-dark .card.contact-container {
  background: #1f2937;
  border: 1px solid #111827;
}

html.theme-dark input,
html.theme-dark select,
html.theme-dark textarea {
  background: #111827;
  color: #f9fafb;
  border-color: #4b5563;
}

html.theme-dark .privacy-inline div {
  color: #e5e7eb;
}

html.theme-dark .family-thread-header p{
  color:#94a3b8;
}

html.theme-dark .family-thread-status{
  background:#172554;
  color:#bfdbfe;
}

html.theme-dark .family-thread-messages{
  background:#020617;
  border-color:#334155;
}

html.theme-dark .family-thread-composer{
  border-top-color:#334155;
}

html.theme-dark .family-chat-bubble{
  border-color:#475569;
  color:#f8fafc;
}

html.theme-dark .family-chat-bubble--left{
  background:#111827;
}

html.theme-dark .family-chat-bubble--right{
  background:#14532d;
  border-color:#22c55e;
}

html.theme-dark .family-chat-bubble-head span{
  color:#94a3b8;
}

html.theme-dark .mini-menu-spinner{
  border-color:rgba(148, 163, 184, 0.35);
  border-top-color:#93c5fd;
}

@media (max-width: 640px) {
  .contact-container.is-family-thread,
  html.family-thread-boot .contact-container{
    height:var(--family-thread-shell-height, calc(100dvh - 108px));
    min-height:var(--family-thread-shell-height, calc(100dvh - 108px));
    max-height:var(--family-thread-shell-height, calc(100dvh - 108px));
  }

  html.family-thread-boot .app,
  html.family-thread-open .app{
    min-height:calc(100dvh - 92px);
    max-height:calc(100dvh - 92px);
  }

  .contact-page-title{
    margin-bottom:14px;
  }

  html.family-thread-boot .contact-page-title,
  html.family-thread-open .contact-page-title{
    font-size:clamp(1rem, 4.8vw, 1.85rem);
    line-height:1.05;
  }

  .family-thread-view{
    gap:10px;
  }

  .family-thread-messages{
    min-height:120px;
  }

  .family-chat-bubble{
    max-width:92%;
    font-size:12px;
    padding:10px 12px;
  }

  .family-chat-bubble-head strong{
    font-size:12px;
  }

  .family-chat-bubble-head span{
    font-size:10px;
  }

  .family-thread-composer textarea{
    min-height:68px;
    max-height:96px;
  }

  html.family-thread-keyboard-open .brand-header{
    display:none;
  }

  html.family-thread-keyboard-open .app{
    margin-top:0;
    margin-bottom:0;
    min-height:auto;
    max-height:none;
    padding-top:max(8px, env(safe-area-inset-top, 0px));
    padding-bottom:max(8px, env(safe-area-inset-bottom, 0px));
  }

  html.family-thread-keyboard-open .contact-page-title{
    margin-bottom:6px;
    font-size:clamp(.72rem, 3.2vw, 1rem);
    line-height:1;
  }

  html.family-thread-keyboard-open .contact-container.is-family-thread,
  html.family-thread-keyboard-open .family-thread-view{
    gap:8px;
  }

  html.family-thread-keyboard-open .family-thread-header h3{
    font-size:clamp(1.15rem, 6vw, 1.5rem);
    line-height:1;
  }

  html.family-thread-keyboard-open .family-thread-header p{
    margin-top:2px;
    font-size:clamp(.78rem, 3.7vw, .95rem);
    line-height:1.08;
  }

  html.family-thread-keyboard-open .family-thread-messages{
    padding:10px;
  }

  html.family-thread-keyboard-open .family-thread-composer{
    gap:8px;
    margin-top:0;
    padding-top:6px;
  }

  html.family-thread-keyboard-open .family-thread-composer textarea{
    min-height:56px;
    max-height:72px;
  }

  html.family-thread-keyboard-open #familyThreadReplyBtn{
    width:36px;
    min-width:36px;
    height:40px;
    border-radius:10px;
  }

  html.family-thread-keyboard-open #familyThreadReplyBtn .btn-icon{
    font-size:16px;
  }
}

/* Allinea correttamente il pulsante tema nell'header delle pagine pubbliche */
.brand-header .brand-container {
  justify-content: space-between;
  align-items: center;
}

.brand-header .theme-toggle {
  align-self: center;
}