/* ============================================================
 * Chat widget — floating bottom-right
 * ============================================================ */
#vtds-chat-root {
  position: fixed;
  /* Closed launcher stays below the cookie FAB. When the panel opens, JS adds
     `.chat-is-open` so the panel can cover the cookie controls. */
  bottom: var(--vtds-chat-fab-bottom, 1.25rem);
  right: var(--vtds-fab-right, 1.2rem);
  z-index: 2147483644; /* sotto .jbz-reopen (2147483645) */
}

#vtds-chat-root.chat-is-open {
  z-index: 2147483646; /* sopra il cookie FAB solo a pannello aperto */
}

/* FAB stack: il cookie Justbitz resta sopra il launcher chat anche prima che
   `sprint-spettacolo.css` async venga applicato dalla pagina cacheata. */
body {
  --vtds-fab-right: max(1.2rem, env(safe-area-inset-right, 0px));
  --vtds-chat-fab-bottom: 1.25rem;
  --vtds-cookie-fab-bottom: 5.5rem;
}

.jbz-reopen.jbz-reopen-pos-bottom-right {
  right: var(--vtds-fab-right) !important;
  bottom: var(--vtds-cookie-fab-bottom) !important;
}

@media (max-width: 540px) {
  body { --vtds-cookie-fab-bottom: 5rem; }
  .chat-launcher {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
  }
  .jbz-reopen.jbz-reopen-pos-bottom-right {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 720px) {
  body.has-sticky-cta {
    --vtds-chat-fab-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0) + 0.75rem);
    --vtds-cookie-fab-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0) + 5rem);
  }
}

body.vtds-footer-fab-clear {
  --vtds-chat-fab-bottom: 6rem;
  --vtds-cookie-fab-bottom: 10.5rem;
}

@media (max-width: 540px) {
  body.vtds-footer-fab-clear {
    --vtds-chat-fab-bottom: 5.5rem;
    --vtds-cookie-fab-bottom: 9.75rem;
  }
}

@media (max-width: 720px) {
  body.has-sticky-cta.vtds-footer-fab-clear {
    --vtds-chat-fab-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0) + 5.5rem);
    --vtds-cookie-fab-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0) + 9.75rem);
  }
}

/* Fix: `<button hidden>` viene sovrascritto da `.chat-panel { display: flex }`.
   Senza questa rule il pulsante X non chiude il pannello (l'attribute c'è ma
   non ha effetto perché flex vince per specificity). */
.chat-panel[hidden] { display: none !important; }

.chat-launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  background: var(--adriatico);
  color: white;
  border: 1px solid var(--adriatico-deep);
  font: 500 0.95rem/1 'Inter', sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(31,24,19,0.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.chat-launcher:hover { background: var(--adriatico-deep); transform: translateY(-2px); }
.chat-launcher:active { transform: translateY(0); }
.chat-launcher__label { white-space: nowrap; }

@media (max-width: 540px) {
  .chat-launcher__label { display: none; }
  .chat-launcher { padding: 0.85rem; }
}

.chat-panel {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  right: 0;
  width: min(380px, calc(100vw - 2.4rem));
  height: min(560px, calc(100vh - 6rem));
  background: white;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(31,24,19,0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(31,24,19,0.08);
}

.chat-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  background: var(--adriatico);
  color: white;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  position: relative; /* popover hints è figlio dell'header */
}
.chat-panel__title { display: inline-flex; align-items: center; gap: 0.4rem; }
.chat-panel__title-text { font-weight: 600; }
.chat-panel__ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.13rem 0.4rem 0.13rem 0.32rem;
  background: linear-gradient(135deg, var(--ocra, #c89968) 0%, var(--ocra-light, #e4c89e) 100%);
  color: var(--adriatico-deep);
  border-radius: 999px;
  font: 700 0.62rem/1 'Inter', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.chat-panel__ai-badge svg { display: block; }
.chat-panel__head-actions { display: inline-flex; gap: 0.3rem; align-items: center; }
.chat-panel__close,
.chat-panel__clear {
  background: transparent;
  color: white;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 50%;
  transition: background .12s ease, color .12s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-panel__clear { font-size: 1rem; opacity: 0.75; }
.chat-panel__clear:hover { background: rgba(214,54,56,0.25); opacity: 1; color: #ffe0e0; }
.chat-panel__close:hover { background: rgba(255,255,255,0.15); }

/* Badge "N conversazioni salvate" sul launcher */
.chat-launcher { position: relative; }
.chat-launcher__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--ocra, #c89968);
  color: var(--adriatico-deep, #0f2638);
  border-radius: 999px;
  font: 600 0.65rem/18px 'Inter', sans-serif;
  text-align: center;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  pointer-events: none;
}

.chat-panel__messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--bianco);
}

.chat-msg {
  max-width: 88%;
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  font: 400 0.93rem/1.45 'Inter', sans-serif;
  word-wrap: break-word;
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--terra);
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-msg--bot {
  align-self: flex-start;
  background: var(--crema);
  color: var(--seppia);
  border-bottom-left-radius: 4px;
}
.chat-msg--welcome { font-style: italic; }
.chat-msg--thinking { opacity: 0.6; font-style: italic; }
.chat-msg a { color: var(--adriatico); text-decoration: underline; }
.chat-msg--user a { color: white; }
.chat-msg__sources {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  opacity: 0.85;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(31,24,19,0.08);
}
.chat-msg__sources a { margin-right: 0.3rem; }

.chat-panel__form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem 0.4rem;
  background: white;
  border-top: 1px solid rgba(31,24,19,0.08);
  position: relative;
}
.chat-panel__form input {
  flex: 1;
  border: 1px solid rgba(31,24,19,0.2);
  background: white;
  border-radius: 999px;
  padding: 0.65rem 0.95rem;
  font: 400 0.93rem/1 'Inter', sans-serif;
}
.chat-panel__form input:focus { outline: 2px solid var(--terra); outline-offset: 1px; }
.chat-panel__form button[type="submit"] {
  border: none;
  background: var(--adriatico);
  color: white;
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, transform .12s ease;
}
.chat-panel__form button[type="submit"]:hover { background: var(--adriatico-deep); }
.chat-panel__form button[type="submit"]:active { transform: scale(0.92); }

/* Bottoni utility nell'header (📍 geolocation, ⋯ hints) — sopra l'adriatico */
.chat-panel__head-icon {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.85);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
  padding: 0;
}
.chat-panel__head-icon:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.5);
  color: white;
}
.chat-panel__head-icon:active { transform: scale(0.92); }

/* Stato attivo del bottone 📍 (posizione condivisa) */
.chat-panel__geo-btn.is-active {
  background: var(--lecceta);
  color: white;
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}
.chat-panel__geo-btn.is-active:hover {
  background: var(--lecceta-light);
  border-color: white;
}

/* Stato aperto del popover hints (⋯) */
.chat-panel__hints-btn[aria-expanded="true"] {
  background: white;
  color: var(--adriatico);
  border-color: white;
}

/* (vecchie regole input-row riservate al fallback se mai si tornasse al
   layout pre-header — non più usate dal markup corrente) */
.chat-panel__form .chat-panel__hints-btn,
.chat-panel__form .chat-panel__geo-btn {
  border: 1px solid rgba(31,24,19,0.15);
  background: white;
  color: var(--adriatico);
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
  flex-shrink: 0;
}
.chat-panel__hints-btn:hover {
  background: var(--crema);
  border-color: var(--adriatico);
}
.chat-panel__hints-btn:active { transform: scale(0.92); }
.chat-panel__hints-btn[aria-expanded="true"] {
  background: var(--adriatico);
  color: white;
  border-color: var(--adriatico);
}

/* Popover hints: ancora sotto l'header (con offset per la freccia stilistica) */
.chat-panel__hints {
  position: absolute;
  top: calc(100% + 4px);
  left: 0.6rem;
  right: 0.6rem;
  background: white;
  border: 1px solid rgba(31,24,19,0.12);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(31,24,19,0.18), 0 4px 8px rgba(31,24,19,0.08);
  padding: 0.55rem 0.6rem 0.7rem;
  max-height: 380px;
  overflow-y: auto;
  z-index: 5;
  animation: vtds-hints-in .14s ease-out;
  color: var(--seppia);
  font-family: 'Inter', sans-serif;
}
@keyframes vtds-hints-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-panel__hints-title {
  margin: 0.25rem 0.4rem 0.55rem;
  font: 500 0.72rem/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grigio);
}
.chat-panel__hints-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-panel__hint {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font: 400 0.88rem/1.3 'Inter', sans-serif;
  color: var(--seppia);
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  transition: background .12s ease, color .12s ease;
}
.chat-panel__hint:hover,
.chat-panel__hint:focus-visible {
  background: var(--crema);
  color: var(--adriatico);
  outline: none;
}
.chat-panel__hint:active { background: var(--crema-warm); }

.chat-panel__disclaimer {
  margin: 0;
  padding: 0.5rem 0.9rem 0.7rem;
  font-size: 0.7rem;
  color: var(--grigio);
  text-align: center;
  background: white;
  border-top: 1px solid rgba(31,24,19,0.05);
}

/* ============================================================
 * MOBILE: chat panel quasi-fullscreen + touch targets generosi
 * (sotto 600px il design 380px desktop si vede stretto/sovrapposto)
 * ============================================================ */
@media (max-width: 600px) {
  /* Posizione del root: fissa, niente offset laterali da launcher */
  #vtds-chat-root.chat-is-open {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
  }
  .chat-panel {
    /* fullscreen quasi totale, lascia un filo per sentire i bordi */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh; /* dvh: rispetta la chrome browser su iOS */
    border-radius: 0;
    border: none;
    box-shadow: none;
    overflow: hidden;
  }
  .chat-panel__head {
    padding: 1rem 1.1rem;
    font-size: 1.15rem;
    /* safe area iOS notch */
    padding-top: max(1rem, env(safe-area-inset-top, 0));
  }
  .chat-panel__close,
  .chat-panel__clear {
    width: 40px; height: 40px;
    font-size: 1.9rem;
  }
  .chat-panel__messages {
    padding: 1rem 1rem 0.8rem;
    font-size: 0.96rem;
  }
  .chat-msg {
    max-width: 92%;
    padding: 0.85rem 1.05rem;
    font-size: 0.96rem;
    line-height: 1.5;
  }
  /* Form mobile: touch targets 44px, input più alto, gap leggibili */
  .chat-panel__form {
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0));
  }
  .chat-panel__form input {
    padding: 0.85rem 1rem;
    font-size: 1rem; /* >= 16px previene autozoom iOS */
    min-height: 44px;
  }
  .chat-panel__form button[type="submit"],
  .chat-panel__hints-btn,
  .chat-panel__geo-btn {
    width: 44px;
    height: 44px;
  }
  .chat-panel__hints-btn svg,
  .chat-panel__geo-btn svg {
    width: 22px;
    height: 22px;
  }
  /* Popover hints (ora sotto header) — full-width con scroll comodo */
  .chat-panel__hints {
    left: 0.5rem;
    right: 0.5rem;
    top: calc(100% + 4px);
    max-height: 55vh;
    border-radius: 16px;
  }
  .chat-panel__head-icon {
    width: 36px; height: 36px;
  }
  .chat-panel__head-icon svg { width: 18px; height: 18px; }
  .chat-panel__hint {
    padding: 0.85rem 0.8rem;
    font-size: 1rem;
    line-height: 1.35;
  }
  .chat-panel__disclaimer {
    padding: 0.55rem 1rem 0.65rem;
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0));
    font-size: 0.72rem;
  }
}

/* Tablet small: leggera variante (compromesso) */
@media (max-width: 480px) {
  /* già coperto da .chat-panel mobile fullscreen sopra */
}

/* CTA call-to-action dentro un messaggio bot (es. "Apri nel builder →") */
.chat-msg__cta {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.55rem 0.9rem;
  background: var(--terra);
  color: white !important;
  border-radius: 999px;
  font: 500 0.82rem/1 'Inter', sans-serif;
  text-decoration: none;
  transition: background .12s ease, transform .12s ease;
}
.chat-msg__cta:hover { background: var(--terra-light, #c8624a); transform: translateY(-1px); }
.chat-msg__cta:active { transform: translateY(0); }