/* ============================================
 * CHAT WIDGET - CSS Condiviso
 * ============================================
 * Unico file CSS per il chat widget su tutte le pagine.
 *
 * --------------------------------------------------------------------------
 * DUE COSE DA SAPERE PRIMA DI TOCCARE QUESTO FILE
 * --------------------------------------------------------------------------
 *
 * 1) GLI `!important` SU `.chat-widget-container.fullscreen` NON SONO RUMORE.
 *
 *    Questo CSS e' duplicato inline in 54 pagine su 180, e li' lo <style>
 *    viene DOPO il <link> a questo file. A parita' di specificita' vincerebbe
 *    l'inline: 49 pagine ridichiarano `.chat-widget-container.fullscreen` con
 *    `height:100%`. Il file condiviso vince SOLO grazie a quegli `!important`.
 *    Toglierli durante un riordino rimanda 49 pagine rotte, in silenzio.
 *
 *    Regola pratica: una proprieta' che l'inline NON ridichiara (min-height,
 *    flex-shrink, overscroll-behavior) si scrive normale; una che ridichiara
 *    (height, max-height, e `padding` in forma abbreviata) ha bisogno di
 *    `!important` o di una specificita' superiore.
 *
 * 2) L'ALTEZZA DELLA CHAT LA DECIDE IL JAVASCRIPT, VIA `--chat-altezza`.
 *
 *    La chat e' `position: fixed`, e li' `height: 100%` si misura sul LAYOUT
 *    viewport — che con la tastiera del telefono aperta NON si accorcia (dal
 *    Chrome 108 il default e' `interactive-widget: resizes-visual`). Risultato:
 *    la chat restava alta quanto lo schermo e la barra di input finiva DIETRO
 *    la tastiera. Le due schermate del difetto — input a meta' schermo con il
 *    resto bianco, oppure header visibile e input sparito — erano lo stesso
 *    problema in due momenti dello scorrimento del visual viewport.
 *
 *    `sincronizzaAltezzaChat()` in js/chat.js legge `window.visualViewport` e
 *    scrive `--chat-altezza` / `--chat-scostamento` sul contenitore. Il ripiego
 *    dichiarato qui e' `100%`: se il JS non parte, o il browser non ha
 *    visualViewport, si torna al comportamento di prima senza peggiorare.
 *    Sorvegliato da `npm run check:tastiera`.
 */

.chat-widget-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #047857;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(4,120,87,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 1000;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.chat-widget-trigger:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(4,120,87,0.4);
}
.chat-widget-trigger:focus:not(:focus-visible) {
  outline: none;
}
.chat-widget-trigger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 4px 20px rgba(4,120,87,0.3);
}
.chat-widget-trigger svg {
  width: 24px;
  height: 24px;
  color: #fff;
  pointer-events: none;
}
/* Online indicator dot */
.chat-widget-trigger::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #34D399;
  border: 2px solid var(--bg-main, #fff);
  border-radius: 50%;
  animation: online-pulse 2s ease-in-out infinite;
}
@keyframes online-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(52,211,153,0); }
}

/* Pulse animation */
.chat-widget-trigger.pulse {
  animation: pulse-glow 1.5s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(4,120,87,0.3); }
  50% { box-shadow: 0 0 0 12px rgba(4,120,87,0.15), 0 4px 20px rgba(4,120,87,0.3); }
}

/* Trigger label */
.chat-trigger-label {
  position: fixed;
  bottom: 34px;
  right: 92px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 1000;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  display: none;
}
.chat-trigger-label.visible {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Container */
.chat-widget-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--bg-card);
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
}
.chat-widget-container.open {
  display: flex;
}

/* Header */
.chat-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-main);
}
.chat-header-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
@supports not (gap: 0.75rem) {
  .chat-header-info > * + * { margin-left: 0.75rem; }
}
.chat-header-icon {
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1.5px solid #1a1915;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-header-icon svg {
  width: 17px;
  height: 17px;
  color: #1a1915;
  animation: icon-pulse 2.5s ease-in-out infinite;
}
@keyframes icon-pulse {
  0%, 100% { transform: scale(1); stroke-width: 1.5; opacity: 0.8; }
  50% { transform: scale(1.1); stroke-width: 2.5; opacity: 1; }
}
.chat-header-title {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2;
}
/* La scritta che dichiara l'AI: nel chiaro il verde scuro del sito (#047857),
   al buio il verde della home (#10b981). Dal 3 ottobre 2026 la chat non usa
   piu' il teal #047857 da nessuna parte: e' il verde del sito ovunque. */
.dark .chat-header-status {
  color: #10b981;
}
.chat-header-status {
  font-size: 0.8125rem;
  color: #047857;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}
.chat-header-status::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #34D399;
  border-radius: 50%;
  flex-shrink: 0;
  animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(52,211,153,0); }
}

/* Close button */
.chat-close {
  background: #1a1915;
  border: none;
  cursor: pointer;
  color: #fff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: all 0.2s;
}
.chat-close:hover {
  background: #333;
  color: #fff;
}
.chat-close:focus:not(:focus-visible) {
  outline: none;
}
.chat-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.chat-close svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* Messages */
.chat-messages {
  flex: 1;
  /* Senza `min-height: 0` un figlio flex in colonna non scende sotto la
     dimensione del suo contenuto (min-height vale `auto`): la lista dei
     messaggi spingerebbe la barra di input fuori dal contenitore anche con
     l'altezza del contenitore corretta. Nessuna pagina lo ridichiara inline,
     quindi qui non serve `!important`. */
  min-height: 0;
  overflow-y: auto;
  /* Arrivati a fondo lista, lo scorrimento non trascina la pagina sotto. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Fallback per Safari iOS < 14.5 che non supporta gap in flex */
@supports not (gap: 1rem) {
  .chat-messages > * + * { margin-top: 1rem; }
}
.chat-message {
  max-width: 88%;
  padding: 0.75rem 0.875rem;
  border-radius: 16px;
  /* 16px: la regola del progetto per il testo che si legge. Le pagine con la
     chat ripetuta inline lo ridichiarano a 14px; li' lo rimette a 16px il
     blocco che chat.js inserisce dopo il loro <style> (injectCardStyles). */
  font-size: 16px;
  line-height: 1.55;
  animation: messageReveal 0.5s cubic-bezier(0.21, 0.98, 0.35, 1) forwards;
  opacity: 0;
}
.chat-message.assistant {
  background: #fff;
  color: #374151;
  border: 1px solid #E8E6E1;
  align-self: flex-start;
}
.chat-message.assistant.plain {
  background: none;
  border: none;
  padding: 0.25rem 0;
  color: var(--text-muted, #4a4945);
}
.chat-message.user {
  background: #1a1915;
  color: #F8F7F5;
  align-self: flex-end;
}
@keyframes messageReveal {
  0% { opacity: 0; transform: scale(0.92) translateY(12px); }
  60% { opacity: 1; transform: scale(1.01) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Message photos */
.chat-message-photos {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.chat-message.user .chat-message-photos {
  justify-content: flex-end;
}
.chat-message-photos img {
  width: 180px;
  max-width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  transition: transform 0.2s, box-shadow 0.2s;
}
.chat-message-photos img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 20px rgba(0,0,0,0.28);
}
.chat-message-photos img:focus-visible {
  outline: 2px solid #047857;
  outline-offset: 2px;
  transform: scale(1.03);
  box-shadow: 0 4px 20px rgba(0,0,0,0.28);
}
.chat-message.user.photo-only {
  background: transparent;
  box-shadow: none;
  padding: 0.25rem 0;
}
.chat-message.user.photo-only .chat-message-photos img {
  border: 2px solid var(--text-main);
}

/* Typing indicator */
.chat-typing {
  display: flex;
  gap: 4px;
  padding: 0.875rem 1rem;
  background: #F4F4F4;
  border-radius: 20px;
  align-self: flex-start;
  max-width: 60px;
}
@supports not (gap: 4px) {
  .chat-typing > * + * { margin-left: 4px; }
}
.chat-typing span {
  width: 6px;
  height: 6px;
  background: #047857;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Input area */
.chat-input-container {
  /* Non si comprime mai: e' l'unico modo per scrivere. */
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-main);
}
.chat-input-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  max-width: 100%;
}
@supports not (gap: 0.5rem) {
  .chat-input-wrapper > * + * { margin-left: 0.5rem; }
}
.chat-input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 0.75rem;
  border: 1.5px solid #E8E6E1;
  border-radius: 999px;
  background: #FAFAF9;
  color: var(--text-main);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  animation: input-nudge 2.5s ease-in-out infinite;
  -webkit-appearance: none;
}
.chat-input:focus {
  border-color: #047857;
  box-shadow: 0 0 0 2px rgba(4,120,87,0.08);
  outline: 2px solid #047857;
  outline-offset: -2px;
  animation: none;
}
@keyframes input-nudge {
  0%, 100% { border-color: #E8E6E1; box-shadow: none; }
  50% { border-color: rgba(4,120,87,0.45); box-shadow: 0 0 0 3px rgba(4,120,87,0.06); }
}
.chat-input::placeholder {
  color: #b5b3ad;
}
.chat-send {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: #047857;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(4,120,87,0.25);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.chat-send:hover,
.chat-send:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(4,120,87,0.35);
  background: #0E9170;
}
.chat-send:focus-visible {
  outline: 2px solid #047857;
  outline-offset: 2px;
}
.chat-send:active {
  transform: scale(0.93);
  box-shadow: 0 1px 3px rgba(4,120,87,0.2);
}
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.chat-send svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

/* Photo button — stessa altezza del bottone invio */
.chat-photo-btn {
  flex-shrink: 0;
  min-width: 42px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1.5px solid #1a1915;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1915;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.chat-photo-btn:active { transform: scale(0.95); }
.chat-photo-btn:hover,
.chat-photo-btn:focus-visible {
  background: #1a1915;
}
.chat-photo-btn:focus-visible {
  outline: 2px solid #1a1915;
  outline-offset: 2px;
}
.chat-photo-btn svg { width: 20px; height: 20px; }
.chat-photo-btn svg path,
.chat-photo-btn svg circle { stroke: #1a1915 !important; fill: none !important; stroke-width: 1.5 !important; }
.chat-photo-btn:hover svg path,
.chat-photo-btn:hover svg circle { stroke: #fff !important; }

/* Photo preview */
.chat-photo-preview {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  flex-wrap: wrap;
}
.chat-photo-preview img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: opacity 0.2s;
}
.chat-photo-preview img:hover {
  opacity: 0.8;
}
.chat-photo-item {
  position: relative;
  display: inline-block;
}
.chat-photo-preview .remove-photo {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: var(--text-main);
  color: var(--bg-main);
  border: none;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-photo-preview .remove-photo:focus-visible {
  outline: 2px solid #047857;
  outline-offset: 2px;
}

/* Fullscreen mode */
.chat-widget-container.fullscreen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important; max-width: 100% !important;
  /* `--chat-altezza` la scrive js/chat.js da window.visualViewport: e' lo
     spazio che resta VISIBILE con la tastiera aperta. Ripiego `100%` = il
     comportamento di prima. Vedi l'intestazione del file. */
  height: var(--chat-altezza, 100%) !important;
  max-height: var(--chat-altezza, 100%) !important;
  /* Su iOS la tastiera non accorcia soltanto il visual viewport: lo sposta
     anche verso l'alto. `--chat-scostamento` riporta la chat sopra di esso. */
  transform: translateY(var(--chat-scostamento, 0px));
  border-radius: 0;
  z-index: 9999;
  border: none;
}
/* La barra di input sopra la barra dei gesti dell'iPhone. Serve la specificita'
   0,2,0 E l'`!important`: 49 pagine dichiarano inline, dopo il <link>,
   `.chat-widget-container.fullscreen .chat-input-container{padding:0.75rem 1rem}`
   — una forma abbreviata, che cancellerebbe un `padding-bottom` scritto prima. */
.chat-widget-container.fullscreen .chat-input-container {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
}
.chat-widget-container.fullscreen .chat-header {
  border-radius: 0;
  padding: 1rem 1.5rem;
  background: var(--bg-main);
}
.chat-widget-container.fullscreen .chat-messages {
  padding: 1.5rem 2rem;
}
.chat-widget-container.fullscreen .chat-message { max-width: 90%; font-size: 1rem; }
.chat-widget-container.fullscreen .chat-input-container {
  padding: 1rem 1.5rem;
  background: var(--bg-main);
}
.chat-widget-container.fullscreen .chat-input-wrapper {
  max-width: 100%;
  margin: 0;
}
@media (min-width: 768px) {
  .chat-widget-container.fullscreen .chat-header {
    padding-left: max(1.5rem, calc(50vw - 400px));
    padding-right: max(1.5rem, calc(50vw - 400px));
  }
  .chat-widget-container.fullscreen .chat-messages {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .chat-widget-container.fullscreen .chat-message { max-width: 100%; }
  .chat-widget-container.fullscreen .chat-input-wrapper {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.chat-widget-container.fullscreen .chat-input {
  font-size: 1rem;
  padding: 0.875rem 1rem;
}

@media (max-width: 640px) {
  .chat-widget-container.fullscreen .chat-messages { padding: 0.75rem; gap: 0.625rem; }
  .chat-widget-container.fullscreen .chat-message { max-width: 95%; padding: 0.625rem 0.75rem; border-radius: 12px; font-size: 16px; }
  .chat-widget-container.fullscreen .chat-message.assistant { max-width: 100%; }
  .chat-card { padding: 8px 10px !important; margin: 2px 0 !important; }
  .chat-card-list li { padding: 2px 0 2px 16px; }
  .chat-widget-container.fullscreen .chat-input-container { padding: 0.5rem 0.75rem; }
  .chat-widget-container.fullscreen .chat-input-wrapper { gap: 0.375rem; }
  .chat-widget-container.fullscreen .chat-send { width: 44px; height: 44px; border-radius: 10px; }
  .chat-widget-container.fullscreen .chat-photo-btn { width: 44px; height: 44px; border-radius: 10px; }
  .chat-widget-container.fullscreen .chat-input { font-size: 16px; padding: 0.625rem 0.75rem; border-radius: 10px; height: 44px; }
}
/* Very small screens (Flip, narrow phones) */
@media (max-width: 380px) {
  .chat-input-container { padding: 0.5rem 0.5rem; }
  .chat-input-wrapper { gap: 0.25rem; }
  .chat-input { padding: 0.625rem 0.5rem; font-size: 16px; }
  .chat-send { width: 36px; height: 36px; border-radius: 8px; }
  .chat-photo-btn { width: 36px; height: 36px; border-radius: 8px; min-width: 36px; }
  .chat-photo-btn svg { width: 16px; height: 16px; }
  .chat-send svg { width: 16px; height: 16px; }
  .chat-widget-container.fullscreen .chat-send { width: 40px; height: 40px; }
  .chat-widget-container.fullscreen .chat-photo-btn { width: 40px; height: 40px; }
  .chat-widget-container.fullscreen .chat-input { height: 40px; padding: 0.5rem 0.625rem; }
  .chat-widget-container.fullscreen .chat-input-container { padding: 0.375rem 0.5rem; }
}

/* Mobile menu sidebar — prevent FOUC on all pages */
.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: translateX(-100%) !important;
  visibility: hidden !important;
  overflow-y: auto !important;
  z-index: 100 !important;
  border: none !important;
  box-shadow: none !important;
  background: var(--bg-main) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s !important;
}
.mobile-menu.open {
  transform: translateX(0) !important;
  visibility: visible !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.12) !important;
}

/* Qui c'era una regola «Desktop: taller chat window» che dava alla chat
   640px di altezza da 768px in su. Non si e' mai applicata: `openChat()`
   aggiunge SEMPRE la classe `fullscreen`, e `.chat-widget-container.fullscreen`
   ha specificita' superiore (0,2,0 contro 0,1,0). Rimossa perche' lasciava
   credere che su desktop la chat fosse un pannello: e' a schermo intero
   ovunque. Se un giorno si vuole davvero il pannello su desktop, va tolta la
   classe `fullscreen` in js/chat.js, non riscritta questa regola. */

/* Dark mode overrides */
.dark .chat-message.assistant { background: #2A2A2A; color: #E8E8EC; border-color: #3d3c38; }
.dark .chat-message.assistant.plain { background: none; border: none; color: #b5b3ad; }
.dark .chat-message.user { background: #F8F7F5; color: #1a1915; }
/* Risposta come nella web app: scheda bianca con bordo, non grigia. Vince sulle
   regole delle pagine che dipingono il fondo di grigio (#chatWidget = piu' specifico). */
#chatWidget .chat-message.assistant:not(.plain) { background: #fff; border: 1px solid #E8E6E1; }
.dark #chatWidget .chat-message.assistant:not(.plain) { background: #1c1b18; border-color: #3a3833; color: #E8E8EC; }
.dark .chat-typing { background: #2F2F45; }
.dark .chat-typing span { background: #047857; }
.dark .chat-input { background: #2d2c28; border-color: #3d3c38; color: #E8E8EC; }
.dark .chat-input:focus { border-color: #10B981; }
.dark .chat-input::placeholder { color: #918f89; }

/* Lightbox */
.chat-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 10000 !important;
  display: none !important;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.chat-lightbox.open { display: flex !important; }
.chat-lightbox img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 8px;
}
.chat-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Back button mobile */
.back-btn {
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-right: 0.25rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
}
.back-btn svg { width: 18px; height: 18px; }
@media (max-width: 767px) {
  .back-btn { display: flex; align-items: center; justify-content: center; }
}

/* Reduced motion: disable all animations for users who prefer it.
   `.chat-close` e `.chat-header-status::before` mancavano, e le loro due
   animazioni sono INFINITE: misurato il 27 settembre 2026, con «riduci il
   movimento» attivo il pulsante di chiusura continuava a pulsare esattamente
   come senza (3,2px di oscillazione in tutti e due i casi). Il tondino dello
   stato e' uno pseudo-elemento: va nominato a parte, perche' una regola sul
   genitore non lo tocca.
   `animation: none !important` basta anche sulle 54 pagine che ripetono questo
   CSS inline DOPO il <link>: quelle copie non hanno l'`!important`. */
@media (prefers-reduced-motion: reduce) {
  .chat-widget-trigger,
  .chat-widget-trigger::after,
  .chat-widget-trigger.pulse,
  .chat-message,
  .chat-typing span,
  .chat-input,
  .chat-header-icon svg,
  .chat-close,
  .chat-header-status::before,
  .chat-trigger-label {
    animation: none !important;
    transition: none !important;
  }
}

/* Campo di scrittura (12 ottobre 2026, come la chat dentro /account): una pillola
   unica con il «+» per la foto a sinistra, il campo al centro e il tasto di invio
   tondo dentro la pillola a destra. Solo CSS: il markup non cambia. */
.chat-input-wrapper {
  gap: 4px;
  background: var(--bg-card, #F7F5F2);
  border: 1px solid var(--border, #d8d6d0);
  border-radius: 28px;
  padding: 4px;
}
.chat-input-wrapper:focus-within {
  border-color: var(--border, #d8d6d0);
  box-shadow: none;
}
.chat-input-wrapper .chat-input {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 10px 6px;
  animation: none;
  box-shadow: none;
}
.chat-input-wrapper .chat-input:focus {
  border: none;
  box-shadow: none;
  outline: none;
  animation: none;
}
.chat-input-wrapper .chat-photo-btn {
  background: transparent !important;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border: none;
  border-radius: 50%;
  color: var(--text-muted, #4a4945);
}
.chat-input-wrapper .chat-photo-btn:hover {
  background: var(--bg-alt, #E8E6E1);
}
.chat-input-wrapper .chat-send {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--text-main, #1a1915);
  color: var(--bg-main, #F5F4F1);
  box-shadow: none;
}
.chat-input-wrapper .chat-send:hover,
.chat-input-wrapper .chat-send:focus-visible {
  background: var(--text-muted, #4a4945);
  box-shadow: none;
}
.chat-input-wrapper .chat-send:disabled {
  opacity: 0.4;
}

/* Icona della fotocamera nel campo: la regola generale la tinge sempre di scuro
   (con !important), quindi nel tema scuro spariva. Qui segue il colore del testo. */
.chat-input-wrapper .chat-photo-btn svg path,
.chat-input-wrapper .chat-photo-btn svg circle {
  stroke: var(--text-main, #1a1915) !important;
}
.chat-input-wrapper .chat-photo-btn:hover svg path,
.chat-input-wrapper .chat-photo-btn:hover svg circle,
.chat-input-wrapper .chat-photo-btn:focus-visible svg path,
.chat-input-wrapper .chat-photo-btn:focus-visible svg circle {
  stroke: var(--bg-main, #F5F4F1) !important;
}

/* Il «+» al posto della fotocamera (come nel mockup della chat in /account):
   l'icona resta nel markup, ma nel campo si vede un +. */
.chat-input-wrapper .chat-photo-btn svg { display: none !important; }
.chat-input-wrapper .chat-photo-btn::before {
  content: "+";
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  color: var(--text-muted, #4a4945);
}
.chat-input-wrapper .chat-photo-btn:hover::before,
.chat-input-wrapper .chat-photo-btn:focus-visible::before {
  color: var(--bg-main, #F5F4F1);
}

/* La freccia del tasto di invio prende il colore del fondo del tema: scura sul chiaro,
   chiara sul scuro (il tasto è del colore del testo). */
.chat-input-wrapper .chat-send svg,
.chat-input-wrapper .chat-send svg path,
.chat-input-wrapper .chat-send svg line,
.chat-input-wrapper .chat-send svg polyline {
  stroke: var(--bg-main, #F5F4F1) !important;
  color: var(--bg-main, #F5F4F1);
}

/* Come nel mockup (12 ottobre 2026): freccia piena al posto dell'icona a contorno,
   «+» più grande, fondo bianco del campo. */
.chat-input-wrapper { background: #FFFFFF; }
.chat-input-wrapper .chat-send svg { display: none !important; }
.chat-input-wrapper .chat-send::before {
  content: "➤";
  font-size: 17px;
  line-height: 1;
}
.chat-input-wrapper .chat-photo-btn::before {
  font-size: 26px;
  color: var(--text-main, #1a1915);
}

/* Misure larghe (tablet, pieghevole aperto, computer): messaggi e campo nella stessa
   colonna centrata di 640px, come nel mockup. Sotto i 600px non cambia nulla. */
@media (min-width: 600px) {
  .chat-widget-container.fullscreen #chatMessages,
  .chat-widget-container.fullscreen .chat-input-wrapper {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .chat-widget-container.fullscreen .chat-input-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Testi e contenitore come nel mockup (12 ottobre 2026): il testo si legge come in
   Gemini e Claude (16px, interlinea 1,6), e sui 600px in su la chat è una card
   centrata di 640px con bordo. */

/* LA BARRA DI SCRITTURA, UNA SOLA PER LE DUE CHAT (18 ottobre 2026, Marco: nella
   chat della web app «stesso input e invio della chat del sito»).
   Questo blocco disegna la barra della chat del sito (#chatWidget) E quella della
   chat del profilo in /account (#tab-chat, js/chat-profilo.js): chi cambia una
   misura qui la cambia a tutte e due. Prima erano due barre scritte a mano, ognuna
   copiata a occhio dall'altra in giorni diversi, e non sono mai state uguali.
   La web app ha classi sue (cp-pillola, cp-piu, cp-campo, cp-invia) e non quelle
   del sito: `js/common.js` aggancia OGNI `.chat-send` all'invio della chat del
   sito, e con la stessa classe il messaggio della web app partirebbe verso l'altra
   chat. Gli id iniziali tengono questo blocco sopra gli strati di prima (base,
   pagina intera, telefono stretto, 12 ottobre).
   I valori sono quelli misurati sulla chat del sito a 390 px il 18 ottobre 2026.
   Corregge due difetti del sito: nel tema scuro la pillola restava bianca con il
   testo quasi bianco (non si leggeva niente, e il «+» spariva), e dopo un tocco il
   «+» prendeva il colore del fondo. Guardiano: `npm run check:chat-gemelle`. */
#chatWidget, #tab-chat {
  --cw-pillola: #FFFFFF;
  --cw-bordo: #d8d6d0;
  --cw-testo: #1a1915;
  --cw-segnaposto: #b5b3ad;
  --cw-invio-fondo: #1a1915;
  --cw-invio-tocco: #4a4945;
  --cw-invio-segno: #F5F4F1;
}
.dark #chatWidget, .dark #tab-chat {
  --cw-pillola: #2d2c28;
  --cw-bordo: #3d3c38;
  --cw-testo: #F8F7F5;
  --cw-segnaposto: #918f89;
  --cw-invio-fondo: #F8F7F5;
  --cw-invio-tocco: #b5b3ad;
  --cw-invio-segno: #0f0e0c;
}
#chatWidget .chat-input-wrapper,
#tab-chat .cp-pillola {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 4px;
  background: var(--cw-pillola);
  border: 1px solid var(--cw-bordo);
  border-radius: 28px;
  box-shadow: none;
}
#chatWidget .chat-input-wrapper:focus-within,
#tab-chat .cp-pillola:focus-within {
  border-color: var(--cw-bordo);
  box-shadow: none;
}
#chatWidget .chat-input-wrapper .chat-input,
#tab-chat .cp-pillola .cp-campo {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cw-testo);
  font-family: inherit;
  font-size: 16px;
  line-height: normal;
  outline: none;
  box-shadow: none;
  animation: none;
  -webkit-appearance: none;
  appearance: none;
}
#chatWidget .chat-input-wrapper .chat-input:focus,
#tab-chat .cp-pillola .cp-campo:focus {
  border: 0;
  outline: none;
  box-shadow: none;
  animation: none;
}
#chatWidget .chat-input-wrapper .chat-input::placeholder,
#tab-chat .cp-pillola .cp-campo::placeholder {
  color: var(--cw-segnaposto);
  opacity: 1;
}
/* Il «+»: manda una foto (nel sito apre la scheda della foto, nella web app fa
   quello che fa «Invia una foto»). L'icona della fotocamera resta nel markup del
   sito ma non si vede. */
#chatWidget .chat-input-wrapper .chat-photo-btn,
#tab-chat .cp-pillola .cp-piu {
  flex: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent !important;
  color: var(--cw-testo);
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}
#chatWidget .chat-input-wrapper .chat-photo-btn svg,
#tab-chat .cp-pillola .cp-piu svg { display: none !important; }
#chatWidget .chat-input-wrapper .chat-photo-btn::before,
#tab-chat .cp-pillola .cp-piu::before {
  content: "+";
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  color: var(--cw-testo);
}
#chatWidget .chat-input-wrapper .chat-photo-btn:focus-visible,
#tab-chat .cp-pillola .cp-piu:focus-visible {
  outline: 2px solid #047857;
  outline-offset: 2px;
}
/* L'invio: tondo, del colore del testo, con la freccia piena. */
#chatWidget .chat-input-wrapper .chat-send,
#tab-chat .cp-pillola .cp-invia {
  flex: none;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50% !important;
  background: var(--cw-invio-fondo);
  color: var(--cw-invio-segno);
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}
#chatWidget .chat-input-wrapper .chat-send:hover,
#tab-chat .cp-pillola .cp-invia:hover {
  background: var(--cw-invio-tocco);
  box-shadow: none;
  transform: none;
}
#chatWidget .chat-input-wrapper .chat-send:focus-visible,
#tab-chat .cp-pillola .cp-invia:focus-visible {
  background: var(--cw-invio-tocco);
  outline: 2px solid #047857;
  outline-offset: 2px;
}
.dark #chatWidget .chat-input-wrapper .chat-send:focus-visible,
.dark #tab-chat .cp-pillola .cp-invia:focus-visible,
.dark #chatWidget .chat-input-wrapper .chat-photo-btn:focus-visible,
.dark #tab-chat .cp-pillola .cp-piu:focus-visible { outline-color: #34d399; }
#chatWidget .chat-input-wrapper .chat-send:disabled,
#tab-chat .cp-pillola .cp-invia:disabled { opacity: 0.4; cursor: not-allowed; }
#chatWidget .chat-input-wrapper .chat-send svg,
#tab-chat .cp-pillola .cp-invia svg { display: none !important; }
#chatWidget .chat-input-wrapper .chat-send::before,
#tab-chat .cp-pillola .cp-invia::before {
  content: "➤";
  font-size: 17px;
  line-height: 1;
  color: var(--cw-invio-segno);
}

/* «SEGNALA» ALLINEATO ALLA BARRA (18 ottobre 2026). js/chat.js scrive nel pulsante
   `margin: 10px 0`, che cancellava i 12 px ai lati della sua regola: con la
   larghezza «tutto meno 24 px» la card toccava il bordo sinistro e lasciava 24 px
   vuoti a destra, al telefono e al computer (dove arrivava quasi a tutta finestra).
   Si corregge qui e non in js/chat.js (lo stile nell'elemento perde contro
   `!important`): la card sta nella colonna della barra di scrittura, 12 px ai lati
   sul telefono e la stessa colonna di 640 px centrata da 600 px in su. */
#chatWidget .chat-segnala {
  margin-left: 12px !important;
  margin-right: 12px !important;
}
@media (min-width: 600px) {
  #chatWidget.fullscreen .chat-segnala {
    width: calc(100% - 32px);
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* Sotto i 380 px la fascia della barra ha 8 px ai lati (regola «Very small screens»
   sopra): «Segnala» la segue, o resta 4 px piu' stretto per lato (misurato a 320 e
   344 px, 18 ottobre 2026). */
@media (max-width: 380px) {
  #chatWidget .chat-segnala {
    width: calc(100% - 16px);
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

/* Scrivendo nel campo di una scheda si nascondono campo di testo e invio della barra: un posto solo dove scrivere.
   La fotocamera resta (regola del 5 ottobre 2026: porta al passo aperto, check:scheda-foto, W). */
#chatWidget.campo-scheda-attivo .chat-input-wrapper .chat-input,
#chatWidget.campo-scheda-attivo .chat-input-wrapper .chat-send{display:none}

/* Scrivendo nel campo di una scheda il riquadro «Segnala» si toglie: con la tastiera su l'area dei messaggi e' bassa e
   il campo finiva sotto il pulsante fisso (25 ottobre 2026). */
#chatWidget.campo-scheda-attivo .chat-segnala{display:none}
/* L'ombra piena sotto il pulsante fisso della scheda foto spuntava sotto la card come un rettangolo bianco: la card la
   taglia al suo bordo arrotondato. `clip` e non `hidden`: non crea un contenitore di scorrimento, e il pulsante resta fisso. */
#chatWidget .chat-message.scheda-foto .chat-card{overflow:clip}

/* Chat della web app: scrivendo nel campo di una scheda si nascondono campo di testo e invio della barra. */
#tab-chat.cp-campo-attivo .cp-input-row .cp-campo,
#tab-chat.cp-campo-attivo .cp-input-row .cp-invia{display:none}