/* Frontend Colombo: chat proattiva sopra Intercom (launcher, teaser, thread). */

.tbp-colombo-chat {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: inherit;
  /* Il contenitore e' piu' largo di quello che si vede: se prende lui i
     tocchi, chi sta sotto (orari del calendario, pulsanti) non li riceve.
     Rispondono solo le parti vere di Colombo (12/9). */
  pointer-events: none;
}

.tbp-colombo-chat > *,
.tbp-colombo-chat__teaser,
.tbp-colombo-chat__launcher,
.tbp-colombo-chat__panel {
  pointer-events: auto;
}

@media (max-width: 849px) {
  .tbp-colombo-chat {
    bottom: 152px;
  }
}

.tbp-colombo-chat__avatar {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 7px;
  border: 1px solid rgba(8, 72, 40, 0.35);
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
  object-fit: contain;
}

/* ── Launcher ── */

.tbp-colombo-chat__launcher {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 84px;
  padding: 10px 6px 8px !important;
  border: 1px solid var(--tbp-line, rgba(8, 72, 40, 0.14)) !important;
  border-radius: 22px !important;
  background: #fff !important;
  color: var(--tbp-green, #084828) !important;
  box-shadow: 0 10px 28px rgba(8, 72, 40, 0.24);
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms ease;
  min-height: 0 !important;
}

.tbp-colombo-chat__launcher-name {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tbp-green, #084828);
  line-height: 1;
  white-space: nowrap;
}

.tbp-colombo-chat__launcher .tbp-colombo-chat__avatar {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: none;
}

@media (min-width: 850px) {
  .tbp-colombo-chat__launcher {
    width: 96px;
  }

  .tbp-colombo-chat__launcher .tbp-colombo-chat__avatar {
    width: 62px;
    height: 62px;
  }

  .tbp-colombo-chat__launcher-name {
    font-size: 0.74rem;
  }
}

/* Colombo non sta mai fermo: fluttuazione continua quando e' in vista. */
.tbp-colombo-chat.is-arrived .tbp-colombo-chat__launcher:not(.is-pinging) {
  animation: tbp-colombo-float 5.2s ease-in-out infinite;
}

@keyframes tbp-colombo-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  22% { transform: translateY(-4px) rotate(-1.6deg); }
  50% { transform: translateY(0) rotate(0deg); }
  72% { transform: translateY(-3px) rotate(1.4deg); }
}

/* Before arrival, the invisible wrapper must not intercept page gestures.
   An explicitly opened conversation remains available. */
.tbp-colombo-chat:not(.is-arrived):not(.is-open) {
  visibility: hidden;
  pointer-events: none;
}

/* La palla resta invisibile finche' il "messaggio" non arriva. */
.tbp-colombo-chat:not(.is-arrived) .tbp-colombo-chat__launcher {
  opacity: 0;
  transform: translateY(24px) scale(0.5);
  pointer-events: none;
}

.tbp-colombo-chat.is-arrived .tbp-colombo-chat__launcher {
  animation: tbp-colombo-arrive 620ms cubic-bezier(0.28, 1.6, 0.36, 1), tbp-colombo-float 5.2s ease-in-out 700ms infinite;
}

@keyframes tbp-colombo-arrive {
  0% { opacity: 0; transform: translateY(28px) scale(0.4); }
  70% { opacity: 1; transform: translateY(-4px) scale(1.06); }
  100% { opacity: 1; transform: none; }
}

.tbp-colombo-chat__launcher.is-pinging {
  animation: tbp-colombo-ping 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tbp-colombo-ping {
  0% { transform: none; }
  30% { transform: scale(1.28) rotate(-5deg); }
  55% { transform: scale(1.12) rotate(4deg); }
  75% { transform: scale(1.2); }
  100% { transform: none; }
}

.tbp-colombo-chat__launcher:hover {
  background: #F1F7F3;
}

.tbp-colombo-chat__launcher:active {
  transform: translateY(1px) scale(0.97);
}

.tbp-colombo-chat__launcher:focus-visible {
  outline: 3px solid var(--tbp-green, #084828);
  outline-offset: 2px;
}

.tbp-colombo-chat__badge {
  position: absolute;
  top: -8px;
  left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 5px;
  border-radius: 999px;
  background: #D0161A;
  border: 2px solid #fff;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tbp-colombo-chat__launcher.has-unread {
  animation: tbp-colombo-nudge 4.2s ease-in-out infinite;
}

@keyframes tbp-colombo-nudge {
  0%, 88%, 100% { transform: none; }
  90% { transform: rotate(-2.5deg) scale(1.04); }
  94% { transform: rotate(2deg) scale(1.04); }
  98% { transform: none; }
}

/* ── Teaser: il messaggio che "arriva" ── */

.tbp-colombo-chat__teaser {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 18px 18px 4px 18px;
  background: #fff;
  border: 1px solid var(--tbp-line, rgba(8, 72, 40, 0.14));
  box-shadow: 0 14px 36px rgba(8, 72, 40, 0.25);
  animation: tbp-colombo-pop 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tbp-colombo-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.tbp-colombo-chat__teaser-body {
  display: block !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left !important;
  box-shadow: none !important;
  cursor: pointer;
}

.tbp-colombo-chat__teaser-name {
  display: flex !important;
  align-items: baseline;
  gap: 6px;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  color: var(--tbp-green, #084828) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tbp-colombo-chat__teaser-name em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--tbp-muted, #5D786B);
}

.tbp-colombo-chat__teaser-text {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--tbp-ink, #123326) !important;
  background: transparent !important;
  line-height: 1.35 !important;
  padding: 0 !important;
  margin: 2px 0 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.tbp-colombo-chat__teaser-close {
  flex: 0 0 auto;
  width: 28px !important;
  height: 28px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--tbp-sage, #F4F7F5) !important;
  color: var(--tbp-green, #084828) !important;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

/* ── Pannello chat ── */

.tbp-colombo-chat__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  display: flex;
  flex-direction: column;
  width: min(370px, calc(100vw - 24px));
  height: min(600px, calc(100vh - 160px));
  border-radius: 22px;
  background: #ffffff;
  color: var(--tbp-ink, #123326);
  box-shadow: 0 18px 48px rgba(8, 72, 40, 0.3);
  border: 1px solid var(--tbp-line, rgba(8, 72, 40, 0.14));
  overflow: hidden;
  animation: tbp-colombo-pop 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 850px) {
  .tbp-colombo-chat__panel {
    width: min(460px, calc(100vw - 48px));
    height: min(700px, calc(100vh - 140px));
  }

  .tbp-colombo-chat__bubble {
    font-size: 0.98rem;
  }

  .tbp-colombo-chat__chip {
    font-size: 0.92rem !important;
  }
}

.tbp-colombo-chat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #E9F3EC;
  border-bottom: 1px solid rgba(8, 72, 40, 0.12);
  color: var(--tbp-green, #084828);
}

.tbp-colombo-chat__head .tbp-colombo-chat__avatar {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.tbp-colombo-chat__title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.tbp-colombo-chat__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--tbp-green, #084828);
}

.tbp-colombo-chat__subtitle {
  margin: 0;
  font-size: 0.76rem;
  color: var(--tbp-muted, #5D786B);
}

.tbp-colombo-chat__close {
  flex: 0 0 auto;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #D0161A !important;
  color: #ffffff !important;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  margin-left: auto;
}

.tbp-colombo-chat__close:focus-visible,
.tbp-colombo-chat__chip:focus-visible,
.tbp-colombo-chat__write:focus-visible,
.tbp-colombo-chat__teaser-body:focus-visible,
.tbp-colombo-chat__teaser-close:focus-visible {
  outline: 3px solid var(--tbp-green, #084828);
  outline-offset: 2px;
}

.tbp-colombo-chat__thread {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(rgba(18, 51, 38, 0.03) 1px, transparent 1.4px) 0 0 / 18px 18px,
    #ffffff;
}

.tbp-colombo-chat__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.tbp-colombo-chat__row--colombo .tbp-colombo-chat__avatar {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 0;
}

.tbp-colombo-chat__row--user {
  justify-content: flex-end;
}

.tbp-colombo-chat__bubble {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 16px 16px 16px 5px;
  background: #F1F4F2;
  color: var(--tbp-ink, #123326);
  font-size: 0.9rem;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(8, 72, 40, 0.08);
  animation: tbp-colombo-pop 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tbp-colombo-chat__bubble--user {
  border-radius: 16px 16px 5px 16px;
  background: #D9FDD3;
  color: #0B3D2E;
}

.tbp-colombo-chat__typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 1em;
}

.tbp-colombo-chat__typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tbp-muted, #5D786B);
  animation: tbp-colombo-typing 1s ease-in-out infinite;
}

.tbp-colombo-chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.tbp-colombo-chat__typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes tbp-colombo-typing {
  0%, 60%, 100% { transform: none; opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Risposte suggerite ── */

.tbp-colombo-chat__replies {
  display: flex;
  flex: 0 1 auto;
  max-height: 25vh;
  overflow-y: auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  padding: 4px 14px 10px;
}

.tbp-colombo-chat__chip {
  display: block !important;
  max-width: 88%;
  padding: 9px 14px !important;
  border: 1.5px solid var(--tbp-green, #084828) !important;
  border-radius: 16px 16px 5px 16px !important;
  background: #fff !important;
  color: var(--tbp-green, #084828) !important;
  font-weight: 650;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
  text-align: right;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
  animation: tbp-colombo-pop 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tbp-colombo-chat__chip:hover {
  background: var(--tbp-green, #084828) !important;
  color: #fff !important;
}

.tbp-colombo-chat__chip:active {
  transform: translateY(1px) scale(0.99);
}

.tbp-colombo-chat__write {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin: 0 14px 14px;
  border: 1.5px solid var(--tbp-green, #084828) !important;
  border-radius: 14px !important;
  background: #E9F3EC !important;
  color: var(--tbp-green, #084828) !important;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease;
}

.tbp-colombo-chat__write:hover {
  background: #DCEDE2 !important;
}

.tbp-colombo-chat__write:active {
  transform: translateY(1px) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .tbp-colombo-chat__launcher,
  .tbp-colombo-chat.is-arrived .tbp-colombo-chat__launcher,
  .tbp-colombo-chat__launcher.has-unread,
  .tbp-colombo-chat__teaser,
  .tbp-colombo-chat__panel,
  .tbp-colombo-chat__bubble,
  .tbp-colombo-chat__chip,
  .tbp-colombo-chat__typing i {
    animation: none !important;
    transition: none !important;
  }
}


/* ── Dettagli stile WhatsApp ── */

.tbp-colombo-chat__time {
  float: right;
  margin: 8px 0 0 10px;
  font-size: 0.66rem;
  line-height: 1;
  color: rgba(18, 51, 38, 0.45);
  white-space: nowrap;
}

.tbp-colombo-chat__bubble--user .tbp-colombo-chat__time {
  color: rgba(8, 72, 40, 0.5);
}

.tbp-colombo-chat__time svg {
  vertical-align: -1px;
  color: #34B7F1;
}

.tbp-colombo-chat__bubble a {
  color: #056162;
  text-decoration: underline;
  word-break: break-all;
}

/* Barra di scrittura */

.tbp-colombo-chat__inputbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  background: #E9F3EC;
  border-top: 1px solid rgba(8, 72, 40, 0.1);
}

.tbp-colombo-chat__inputbar[hidden] {
  display: none;
}

/* 12/10: la barra di scrittura e' un <form>, e style.css ferma tutti i form a 550 px
   (form:not(#adminbarsearch) { max-width: 550px }). Con il pannello a tutto schermo in una
   finestra larga da 551 a 768 px (iPad in verticale, Chrome a mezzo schermo) la riga del
   campo e del microfono si fermava a 550 px e a destra restava una fascia vuota. */
html body .tbp-colombo-chat form.tbp-colombo-chat__inputbar {
  max-width: none !important;
}

.tbp-colombo-chat__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 10px 16px !important;
  border: 1px solid rgba(8, 72, 40, 0.12) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--tbp-ink, #123326) !important;
  font-size: 0.92rem !important;
  outline: none;
  box-shadow: none !important;
}

.tbp-colombo-chat__input:focus-visible {
  border-color: #6B7280 !important;
}

.tbp-colombo-chat__send {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 42px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--tbp-green, #084828) !important;
  color: #fff !important;
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease;
}

.tbp-colombo-chat__send:hover {
  background: var(--tbp-green-dark, #06381F) !important;
}

.tbp-colombo-chat__send:active {
  transform: scale(0.92);
}

.tbp-colombo-chat__send svg {
  margin-left: 2px;
}

@media (max-width: 849px) {
  .tbp-colombo-chat__panel {
    position: fixed;
    right: 12px;
    left: 12px;
    bottom: 96px;
    width: auto;
    height: min(72vh, 620px);
  }
}


/* ── Card esperienza dentro la chat (allegati, non link) ── */

.tbp-colombo-chat__row--cards {
  padding-left: 36px;
}

.tbp-colombo-chat__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 86%;
}

.tbp-colombo-chat__card {
  display: flex !important;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(8, 72, 40, 0.14) !important;
  border-radius: 16px !important;
  background: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(8, 72, 40, 0.12);
  transition: transform 140ms ease, box-shadow 140ms ease;
  animation: tbp-colombo-pop 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tbp-colombo-chat__card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(8, 72, 40, 0.18);
}

.tbp-colombo-chat__card:active {
  transform: scale(0.98);
}

.tbp-colombo-chat__card-media {
  flex: 0 0 84px;
  min-height: 84px;
  background-size: cover;
  background-position: center;
  background-color: #E9F3EC;
}

.tbp-colombo-chat__card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  min-width: 0;
}

.tbp-colombo-chat__card-body strong {
  color: var(--tbp-green, #084828);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.tbp-colombo-chat__card-place {
  color: var(--tbp-muted, #5D786B);
  font-size: 0.76rem;
}

.tbp-colombo-chat__card-price {
  margin-top: auto;
  color: var(--tbp-green, #084828);
  font-size: 0.82rem;
  font-weight: 800;
}

.tbp-colombo-chat__search-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px !important;
  border: 1.5px solid var(--tbp-green, #084828) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--tbp-green, #084828) !important;
  font-weight: 700;
  font-size: 0.86rem !important;
  text-decoration: none !important;
  transition: background-color 140ms ease;
}

.tbp-colombo-chat__search-btn:hover {
  background: #E9F3EC !important;
}

/* 13/10 sera: i due contatti del team (email e WhatsApp) quando la chat col team non si apre.
   Stesso bottone di «Sfoglia tutte le esperienze», uno accanto all'altro, a capo se non ci stanno. */
.tbp-colombo-chat__contatti {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}


/* Il volto Colombo è trasparente, senza riquadro o ombra della vecchia maschera. */
html body .tbp-colombo-chat .tbp-colombo-chat__avatar {
  background: transparent;
  filter: none;
}

/* Il rebrand pinge OGNI <button> di verde con !important: qui si vince per
   specificità, così la chat resta bianca/verde chiaro come deciso da Elind. */
html body .tbp-colombo-chat button.tbp-colombo-chat__launcher {
  background: #fff !important;
  border: 1px solid var(--tbp-line, rgba(8, 72, 40, 0.14)) !important;
  color: var(--tbp-green, #084828) !important;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__launcher:hover {
  background: #F1F7F3 !important;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__teaser-body {
  background: transparent !important;
  border: 0 !important;
  color: var(--tbp-ink, #123326) !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__teaser-close {
  background: #E5E7EB !important;
  border: 0 !important;
  color: #374151 !important;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__close,
html body .tbp-colombo-chat button.tbp-colombo-chat__dismiss {
  background: #E5E7EB !important;
  border: 0 !important;
  color: #374151 !important;
}

.tbp-colombo-chat[hidden],
.tbp-colombo-chat__badge[hidden],
.tbp-colombo-chat:not(.is-arrived) .tbp-colombo-chat__dismiss,
.tbp-colombo-chat.is-open .tbp-colombo-chat__dismiss {
  display: none !important;
}

.tbp-colombo-chat__launcher-wrap {
  position: relative;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__dismiss {
  position: absolute;
  top: -12px;
  right: -8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px #0002;
  transition: transform 140ms ease, background-color 140ms ease;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__dismiss:hover {
  background: #D1D5DB !important;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__dismiss:active {
  transform: scale(.94);
}

html body .tbp-colombo-chat button.tbp-colombo-chat__dismiss:focus-visible {
  outline: 3px solid #084828;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html body .tbp-colombo-chat button.tbp-colombo-chat__dismiss {
    transition: none;
  }
}

html body .tbp-colombo-chat button.tbp-colombo-chat__chip {
  background: #fff !important;
  border: 1.5px solid var(--tbp-green, #084828) !important;
  color: var(--tbp-green, #084828) !important;
  text-shadow: none !important;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__chip:hover {
  background: var(--tbp-green, #084828) !important;
  color: #fff !important;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__write {
  background: #E9F3EC !important;
  border: 1.5px solid var(--tbp-green, #084828) !important;
  color: var(--tbp-green, #084828) !important;
  text-shadow: none !important;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__write:hover {
  background: #DCEDE2 !important;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__send {
  background: var(--tbp-green, #084828) !important;
  border: 0 !important;
  color: #fff !important;
}

html body .tbp-colombo-chat .tbp-colombo-chat__launcher-name {
  color: var(--tbp-green, #084828) !important;
  text-shadow: none !important;
}


/* Drag di Colombo: niente transizioni durante il volo, fumetto di commento. */
.tbp-colombo-chat.is-dragging {
  transition: none !important;
}

.tbp-colombo-chat.is-dragging .tbp-colombo-chat__launcher {
  animation: none !important;
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 18px 40px rgba(8, 72, 40, 0.35);
  cursor: grabbing;
}

.tbp-colombo-chat__quip {
  max-width: 210px;
  padding: 8px 12px;
  border: 1px solid rgba(8, 72, 40, 0.15);
  border-radius: 14px 14px 4px 14px;
  background: #fff;
  color: var(--tbp-ink, #123326);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 10px 26px rgba(8, 72, 40, 0.22);
  animation: tbp-colombo-pop 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tbp-colombo-chat__quip[hidden] {
  display: none;
}


/* ── Niente bordi nella chat: solo riempimenti morbidi e ombre (Elind 7/9) ── */

html body .tbp-colombo-chat button.tbp-colombo-chat__launcher,
.tbp-colombo-chat__launcher {
  border: 0 !important;
  box-shadow: 0 10px 28px rgba(8, 72, 40, 0.22) !important;
}

.tbp-colombo-chat__panel,
.tbp-colombo-chat__teaser,
.tbp-colombo-chat__quip,
.tbp-colombo-chat__card {
  border: 0 !important;
}

html body .tbp-colombo-chat .tbp-colombo-chat__avatar {
  border: 0 !important;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__chip {
  border: 0 !important;
  background: #EDF3EF !important;
  box-shadow: 0 2px 8px rgba(8, 72, 40, 0.08) !important;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__chip:hover {
  background: var(--tbp-green, #084828) !important;
  color: #fff !important;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__write {
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(8, 72, 40, 0.08) !important;
}

.tbp-colombo-chat__input,
html body .tbp-colombo-chat .tbp-colombo-chat__input {
  border: 0 !important;
  background: #F1F4F2 !important;
  box-shadow: none !important;
}


/* ── Il messaggio che arriva è una nuvoletta di chat (Elind 11/9) ──
   Angoli tondi pieni, codina che scende verso Colombo, ora in fondo a
   destra come in WhatsApp. L'ombra è un drop-shadow, così avvolge anche
   la codina senza cuciture. */

html body .tbp-colombo-chat {
  gap: 18px;
}

html body .tbp-colombo-chat .tbp-colombo-chat__teaser {
  position: relative;
  display: block;
  max-width: min(292px, calc(100vw - 48px));
  padding: 11px 16px 9px;
  border: 0 !important;
  border-radius: 22px !important;
  background: #fff;
  box-shadow: none;
  filter: drop-shadow(0 10px 20px rgba(8, 72, 40, 0.18)) drop-shadow(0 1px 2px rgba(8, 72, 40, 0.14));
  transform-origin: calc(100% - 48px) calc(100% + 16px);
  animation: tbp-colombo-nuvola 480ms cubic-bezier(0.34, 1.45, 0.5, 1);
}

/* Preserve the bubble geometry while a control needs the same space. */
html body .tbp-colombo-chat .tbp-colombo-chat__teaser.has-control-overlap {
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .tbp-colombo-chat .tbp-colombo-chat__teaser[hidden] {
  display: none !important;
}

/* La codina: punta al centro di Colombo, tra il pallino rosso e la sua ×. */
html body .tbp-colombo-chat .tbp-colombo-chat__teaser::after {
  content: "";
  position: absolute;
  right: 47px;
  bottom: -15px;
  width: 24px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath fill='%23fff' d='M0 0h24c-1.8 5-2.3 10.2-1.1 16C15.8 13.6 8.6 8.6 0 0z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

@keyframes tbp-colombo-nuvola {
  0% { opacity: 0; transform: translateY(8px) scale(0.55); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

html body .tbp-colombo-chat button.tbp-colombo-chat__teaser-body {
  display: block !important;
  width: 100%;
}

html body .tbp-colombo-chat .tbp-colombo-chat__teaser-name {
  display: block !important;
  margin: 0 0 3px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--tbp-green, #084828) !important;
}

html body .tbp-colombo-chat .tbp-colombo-chat__teaser-text {
  margin: 0 !important;
  font-size: 0.93rem !important;
  line-height: 1.4 !important;
  color: var(--tbp-ink, #123326) !important;
}

/* L'ora si accoda all'ultima riga se c'è posto, altrimenti va sotto a destra. */
html body .tbp-colombo-chat .tbp-colombo-chat__teaser-time {
  float: right;
  margin: 7px -4px -3px 12px;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1;
  color: rgba(18, 51, 38, 0.45);
  white-space: nowrap;
}

/* La × esce dall'angolo in alto a sinistra, come nelle notifiche del Mac:
   la nuvoletta resta tutta testo e non si impila sulla × di Colombo. */
html body .tbp-colombo-chat button.tbp-colombo-chat__teaser-close {
  position: absolute;
  top: -9px;
  left: -9px;
  z-index: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 26px !important;
  height: 26px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #E5E7EB !important;
  color: #374151 !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

html body .tbp-colombo-chat button.tbp-colombo-chat__teaser-close:hover {
  background: #D1D5DB !important;
}

/* Colombo trascinato a sinistra resta comunque sotto l'estremità destra
   della nuvoletta: la codina non cambia lato. */
html body .tbp-colombo-chat.is-left .tbp-colombo-chat__teaser {
  border-radius: 22px !important;
}

@media (max-width: 849px) {
  html body .tbp-colombo-chat .tbp-colombo-chat__teaser::after {
    right: 41px;
  }

  html body .tbp-colombo-chat .tbp-colombo-chat__teaser {
    transform-origin: calc(100% - 42px) calc(100% + 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .tbp-colombo-chat .tbp-colombo-chat__teaser {
    animation: none !important;
  }
}

html body .tbp-colombo-chat .tbp-colombo-chat__input:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #6B7280 !important;
}

.tbp-colombo-chat__head,
.tbp-colombo-chat__languages,
.tbp-colombo-chat__inputbar {
  flex-shrink: 0;
}

.tbp-colombo-chat__languages {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid #E5E7EB;
}

html body .tbp-colombo-chat .tbp-colombo-chat__languages button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid #D1D5DB !important;
  border-radius: 12px;
  background: #fff !important;
  color: #374151 !important;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  box-shadow: none !important;
  transition: background-color 140ms ease, transform 140ms ease;
}

html body .tbp-colombo-chat .tbp-colombo-chat__languages button[aria-pressed="true"],
html body .tbp-colombo-chat .tbp-colombo-chat__languages button:hover {
  background: #F3F4F6 !important;
}

html body .tbp-colombo-chat .tbp-colombo-chat__languages button:active {
  transform: scale(.97);
}

html body .tbp-colombo-chat .tbp-colombo-chat__languages button:focus-visible {
  outline: 2px solid #6B7280 !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html body .tbp-colombo-chat .tbp-colombo-chat__languages button { transition: none; }
}

.tbp-colombo-chat__search-btn {
  border: 0 !important;
  background: #EDF3EF !important;
}

/* Mobile: chat aperta = schermo intero SOPRA la navbar (che finiva sopra il
   composer impedendo di scrivere). La bottom bar sparisce finché si chatta. */
@media (max-width: 768px) {
	.tbp-colombo-chat.is-open .tbp-colombo-chat__panel {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
		border: 0;
		z-index: 100010;
	}

	.tbp-colombo-chat.is-open .tbp-colombo-chat__inputbar {
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
	}

	html body.tbp-has-app-bar:has(.tbp-colombo-chat.is-open) .tbp-app-bar,
	html body:has(.tbp-colombo-chat.is-open) .tbp-app-bar,
	html body:has(.tbp-colombo-chat.is-open) .tbp-app-bar__backdrop,
	html body:has(.tbp-colombo-chat.is-open) .tbp-app-bar-veil {
		display: none !important;
	}
}

/* iOS: il long-press deve trascinare la palla, non aprire "salva immagine". */
.tbp-colombo-chat__launcher,
.tbp-colombo-chat__launcher * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.tbp-colombo-chat__launcher {
	touch-action: none;
}

.tbp-colombo-chat__launcher img {
	pointer-events: none;
	-webkit-user-drag: none;
}

/* Pagine concentrate (registrazione, checkout): launcher mini, non copre i form. */
.tbp-colombo-chat.is-quiet-page .tbp-colombo-chat__launcher {
  width: 56px;
  height: 56px;
  padding: 6px;
  border-radius: 18px;
}

.tbp-colombo-chat.is-quiet-page .tbp-colombo-chat__launcher .tbp-colombo-chat__avatar {
  width: 44px;
  height: 44px;
}

.tbp-colombo-chat.is-quiet-page .tbp-colombo-chat__launcher-name {
  display: none;
}

/* The native navigation owns the foreground while open. Preserve the chat
   state and draft; hiding its controls also removes them from keyboard focus. */
html body:has(.mfp-wrap.off-canvas-center) .tbp-colombo-chat {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Mappa sul telefono: con una scheda del pin aperta Colombo si fa da parte
   (copriva Acquista); torna quando la scheda si chiude. */
@media (max-width: 849px) {
	html body:has(.leaflet-popup.tbp-map-preview) .tbp-colombo-chat:not(.is-open) {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	/* Stessa cosa mentre si sceglie l'orario: la nuvoletta stava sopra gli
	   orari e il primo tocco chiudeva lei invece di scegliere (12/9). */
	html body:has(.jet-apb-calendar-slots--active) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__teaser {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}
}

/* -------------------------------------------------------------------- */
/* Colombo nella scrivania del professionista (12/9)                      */
/*                                                                        */
/* Sulle pagine di lavoro — prenotazioni, calendario, recensioni — la      */
/* bolla si sovrapponeva al contenuto: copriva i giorni del calendario e   */
/* le righe in fondo alle tabelle. Qui passa a sinistra, dove sotto il     */
/* menu lo spazio è libero, e resta piccola: è un aiuto, non un ospite.    */
/* -------------------------------------------------------------------- */
body.wcfm-dashboard-page .tbp-colombo-chat,
body.wcfm-store-setup .tbp-colombo-chat {
	right: auto;
	left: 16px;
	bottom: 16px;
	align-items: flex-start;
}

/* Il fumetto di invito non serve a chi sta lavorando: resta il pulsante. */
body.wcfm-dashboard-page .tbp-colombo-chat__teaser,
body.wcfm-store-setup .tbp-colombo-chat__teaser {
	display: none !important;
}

body.wcfm-dashboard-page .tbp-colombo-chat__launcher,
body.wcfm-store-setup .tbp-colombo-chat__launcher {
	transform: scale(0.82);
	transform-origin: bottom left;
}

/* Il pannello aperto si apre verso destra, non fuori dallo schermo. */
body.wcfm-dashboard-page .tbp-colombo-chat__panel,
body.wcfm-store-setup .tbp-colombo-chat__panel {
	right: auto;
	left: 0;
}

/* Sul telefono la scrivania è a tutta larghezza: la bolla resta in basso a
   sinistra, sopra la barra di navigazione. */
@media (max-width: 849px) {
	body.wcfm-dashboard-page .tbp-colombo-chat,
	body.wcfm-store-setup .tbp-colombo-chat {
		left: 12px;
		bottom: 152px;
	}
}

/* E comunque, sotto le tabelle lunghe resta aria: niente righe coperte. */
body.wcfm-dashboard-page #wcfm-main-contentainer,
body.wcfm-dashboard-page .wcfm-content {
	padding-bottom: 96px;
}

/* Open dialog geometry comes from the actual launcher and visible viewport. */
.tbp-colombo-chat.is-open .tbp-colombo-chat__panel {
	position: fixed;
	box-sizing: border-box;
	left: var(--tbp-chat-left, 12px);
	top: var(--tbp-chat-top, 12px);
	right: auto;
	bottom: auto;
	width: var(--tbp-chat-width, calc(100vw - 24px));
	height: var(--tbp-chat-height, calc(100dvh - 24px));
	min-height: 0;
	max-height: none;
}

/* Tema scuro della barra delle lingue (23/9): era rimasta bianca dentro il
   pannello scuro. Nello strato, cosi' vince sugli !important qui sopra. */
@layer tbp-appearance {
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__languages {
    background: #141414 !important;
    border-bottom-color: #333333 !important;
  }
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__languages button {
    background: #1e1e1e !important;
    border-color: #3a3a3a !important;
    color: #ededed !important;
  }
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__languages button[aria-pressed="true"],
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__languages button:hover {
    background: #2a2a2a !important;
    border-color: #4a4a4a !important;
  }
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__languages button:focus-visible {
    outline-color: #9BDBB5 !important;
  }
}

/* La striscia dell'AI (23/9, Apple 5.1.2(i)): sta sopra la barra di scrittura,
   fuori dai fumetti, cosi' Colombo parla con la sua voce. Un tocco e sparisce. */
html body .tbp-colombo-chat .tbp-colombo-chat__patto {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin: 0;
  padding: 10px 12px;
  background: #EDF3EF;
  border-top: 1px solid rgba(8, 72, 40, 0.10);
  /* 8/10 (colombo-consenso-8-10): 160 px tagliava il testo in EN/FR/DE a 390 px
     (fino a 238 px con la striscia dei vocali). Il tetto serve solo alla chiusura animata. */
  max-height: 320px;
  overflow: hidden;
  transition: max-height 240ms ease, opacity 200ms ease, padding 240ms ease;
}
html body .tbp-colombo-chat .tbp-colombo-chat__patto[hidden] { display: none !important; }
html body .tbp-colombo-chat .tbp-colombo-chat__patto.is-chiuso {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
html body .tbp-colombo-chat .tbp-colombo-chat__patto-testo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  color: #10261B;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
html body .tbp-colombo-chat .tbp-colombo-chat__patto-testo strong { font-weight: 800; }
html body .tbp-colombo-chat .tbp-colombo-chat__patto-testo a {
  color: #084828 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}
html body .tbp-colombo-chat button.tbp-colombo-chat__patto-ok {
  flex: 0 0 auto;
  min-height: 44px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #084828 !important;
  color: #fff !important;
  font-family: Manrope, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  box-shadow: none !important;
}
html body .tbp-colombo-chat button.tbp-colombo-chat__patto-ok:focus-visible {
  outline: 2px solid #084828 !important;
  outline-offset: 2px;
}
html body .tbp-colombo-chat .tbp-colombo-chat__patto.is-richiamo {
  animation: tbp-colombo-patto 700ms ease;
}
@keyframes tbp-colombo-patto {
  0%, 100% { background: #EDF3EF; }
  35% { background: #D2E8DA; }
}
@media (prefers-reduced-motion: reduce) {
  html body .tbp-colombo-chat .tbp-colombo-chat__patto { transition: none; }
  html body .tbp-colombo-chat .tbp-colombo-chat__patto.is-richiamo { animation: none; }
}
@layer tbp-appearance {
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__patto {
    background: #1b1b1b !important;
    border-top-color: #333333 !important;
  }
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__patto-testo { color: #d9d9d9 !important; }
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__patto-testo strong { color: #ffffff !important; }
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__patto-testo a { color: #9BDBB5 !important; }
  html[data-tbp-theme="dark"] body .tbp-colombo-chat button.tbp-colombo-chat__patto-ok {
    border: 1px solid #2f6b4c !important;
  }
}

/* Il saluto dei 30 secondi (23/9): Colombo si rimpicciolisce e sale verso il
   menu in alto a destra prima di sparire. */
html body .tbp-colombo-chat.is-leaving .tbp-colombo-chat__launcher-wrap,
html body .tbp-colombo-chat.is-leaving .tbp-colombo-chat__launcher {
  transition: transform 420ms cubic-bezier(.4, 0, .2, 1), opacity 420ms ease !important;
  transform: translate(8px, -60px) scale(.4) !important;
  opacity: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  html body .tbp-colombo-chat.is-leaving .tbp-colombo-chat__launcher-wrap,
  html body .tbp-colombo-chat.is-leaving .tbp-colombo-chat__launcher { transition: none !important; }
}

/* 23/9 (CEO): Colombo sopra la barra in basso, non sotto il suo alone opaco
   (la barra sta a 100001–100002). Il saluto di congedo si legge sempre. */
html body .tbp-colombo-chat { z-index: 100003 !important; }
html body .tbp-colombo-chat.is-addio .tbp-colombo-chat__teaser { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

/* -------------------------------------------------------------------- */
/* Solo il volto dopo il saluto (Elind, 24/9)                             */
/*                                                                        */
/* Finito il primo saluto (o dalla seconda pagina della sessione) Colombo */
/* diventa un tondo col volto, senza nome ne' riquadro: la mattonella da  */
/* 84-96 px copriva il bottone di /cerca/, i crediti della mappa, le      */
/* schede del Mio account e dell'Ufficio. Stesso angolo, stessa apertura. */
/* Bianco anche in Space Gray: il volto ha bisogno del suo fondo chiaro.  */
/* -------------------------------------------------------------------- */
html body .tbp-colombo-chat.is-mini:not(.is-open) button.tbp-colombo-chat__launcher,
html body .tbp-colombo-chat.is-mini:not(.is-open) .tbp-colombo-chat__launcher {
  box-sizing: border-box;
  width: 46px !important;
  height: 46px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(8, 72, 40, 0.2), 0 0 0 1px rgba(8, 72, 40, 0.08) !important;
}

html body .tbp-colombo-chat.is-mini:not(.is-open) button.tbp-colombo-chat__launcher:hover {
  background: #F1F7F3 !important;
}

html body .tbp-colombo-chat.is-mini:not(.is-open) .tbp-colombo-chat__launcher .tbp-colombo-chat__avatar {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
}

html body .tbp-colombo-chat.is-mini .tbp-colombo-chat__launcher-name,
html body .tbp-colombo-chat.is-mini button.tbp-colombo-chat__dismiss {
  display: none !important;
}

/* Il contatore diventa un puntino rosso, senza numero. */
html body .tbp-colombo-chat.is-mini .tbp-colombo-chat__badge {
  top: 0;
  right: 0;
  left: auto;
  min-width: 0;
  width: 12px;
  height: 12px;
  padding: 0;
  border-width: 2px;
  font-size: 0;
  line-height: 0;
  box-shadow: none;
}

@media (min-width: 850px) {
  html body .tbp-colombo-chat.is-mini:not(.is-open) button.tbp-colombo-chat__launcher,
  html body .tbp-colombo-chat.is-mini:not(.is-open) .tbp-colombo-chat__launcher {
    width: 48px !important;
    height: 48px !important;
  }
  html body .tbp-colombo-chat.is-mini:not(.is-open) .tbp-colombo-chat__launcher .tbp-colombo-chat__avatar {
    width: 42px !important;
    height: 42px !important;
  }
}

/* Il passaggio da mattonella a volto e' una piccola contrazione, non un salto. */
html body .tbp-colombo-chat.is-mini .tbp-colombo-chat__launcher {
  transition: width 220ms ease, height 220ms ease, padding 220ms ease, border-radius 220ms ease, background-color 160ms ease;
}

/* Nell'Ufficio il launcher era rimpicciolito con scale(.82): col volto no. */
body.wcfm-dashboard-page .tbp-colombo-chat.is-mini .tbp-colombo-chat__launcher,
body.wcfm-store-setup .tbp-colombo-chat.is-mini .tbp-colombo-chat__launcher {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html body .tbp-colombo-chat.is-mini .tbp-colombo-chat__launcher {
    transition: none !important;
    animation: none !important;
  }
}

/* Desktop: nell'Ufficio il volto in basso a sinistra copriva «Esci», l'ultima
   voce della colonna; in basso a destra resta sopra lo spazio vuoto che il
   contenuto lascia apposta (padding-bottom 96px). Nella Home sale sopra il
   nastro dei partner e i crediti di OpenStreetMap. */
@media (min-width: 850px) {
  body.wcfm-dashboard-page .tbp-colombo-chat.is-mini,
  body.wcfm-store-setup .tbp-colombo-chat.is-mini {
    left: auto;
    right: 24px;
    bottom: 24px;
    align-items: flex-end;
  }
  html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat.is-mini {
    bottom: 124px;
  }
}

/* Invito per chi non ha fatto l'accesso (29/9, CEO: Colombo solo con un
   account). Il volto, due righe e i due percorsi; niente chat, niente voce. */
html body .tbp-colombo-chat .tbp-colombo-chat__invito {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 22px 28px;
  text-align: center;
  overflow-y: auto;
}
html body .tbp-colombo-chat .tbp-colombo-chat__invito-volto {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #EDF3EF;
  object-fit: cover;
}
html body .tbp-colombo-chat .tbp-colombo-chat__invito-testo {
  margin: 0 !important;
  max-width: 32ch;
  color: #10261B;
  font-size: 15px !important;
  line-height: 1.5 !important;
  text-wrap: pretty;
}
html body .tbp-colombo-chat .tbp-colombo-chat__invito-azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
html body .tbp-colombo-chat .tbp-colombo-chat__invito-azioni a {
  flex: 1 1 130px;
  max-width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none !important;
}
html body .tbp-colombo-chat a.tbp-colombo-chat__invito-accedi {
  background: #084828;
  color: #ffffff !important;
}
html body .tbp-colombo-chat a.tbp-colombo-chat__invito-registrati {
  background: #EDF3EF;
  color: #084828 !important;
}
html body .tbp-colombo-chat .tbp-colombo-chat__invito-azioni a:focus-visible {
  outline: 2px solid #084828;
  outline-offset: 2px;
}
html body .tbp-colombo-chat .tbp-colombo-chat__invito-nota {
  margin: 0 !important;
  color: #4E6457;
  font-size: 12.5px !important;
}
@layer tbp-appearance {
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__invito-testo { color: #e6e6e6 !important; }
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__invito-nota { color: #b5b5b5 !important; }
  html[data-tbp-theme="dark"] body .tbp-colombo-chat a.tbp-colombo-chat__invito-registrati {
    background: #1f2a24 !important;
    color: #9BDBB5 !important;
  }
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__invito-volto { background: #1f2a24; }
}

/* -------------------------------------------------------------------- */
/* Mio account sul telefono (CEO, 29/9 sera)                              */
/*                                                                        */
/* La mattonella col contatore, a 152 px dal fondo, copriva l'etichetta   */
/* «In revisione dal team» di «Pagamenti» e meta' di «Documento           */
/* d'identita'» nel pannello «La tua iscrizione». Ora in Mio account       */
/* Colombo parte gia' come volto piccolo (tbp-colombo-chat.js: pagina     */
/* concentrata, come registrazione e cassa: niente saluto ne' contatore)  */
/* e sta giu' nell'angolo, 8 px sopra la fascia della barra, allineato    */
/* alla capsula: non piu' a meta' schermo sopra etichette e bottoni.      */
/* Il volto va da 16 a 62 px dal bordo (senza il margine di Flatsome,    */
/* blocco «si fa da parte» qui sotto), fuori dalla colonna dove stanno    */
/* etichette di stato e bottoni del pannello (finiscono a 65 px).         */
/* In fondo alla pagina il contenuto gli lascia lo spazio (riserva della  */
/* barra + volto + 8 px), come nell'Ufficio: l'ultima riga e «Esci»       */
/* restano sopra di lui. Se l'angolo e' occupato si fa da parte (blocco  */
/* qui sotto, vale per tutto il sito). Chi lo trascina altrove resta dove */
/* l'ha messo (la posizione trascinata e' scritta nell'elemento e vince). */
/* -------------------------------------------------------------------- */
/* 30/9 pomeriggio: posto e spazio in fondo ora valgono per tutto il sito (blocco D125.3 in fondo). */

/* 29/9 sera – 30/9: «Colombo si fa da parte» (is-scostato, linguetta di 12 px sul bordo)
   tolto il 30/9 pomeriggio: al telefono ora e' un tasto fisso sopra la barra (blocco D125.3
   in fondo al file). */

/* -------------------------------------------------------------------- */
/* Senza salto di pagina (30/9, CEO: Colombo resta in movimento come oggi, */
/* galleggia e il numero si scuote; si toglie solo il salto)              */
/*                                                                        */
/* Era l'unico salto di pagina del sito (CLS 0,04 al telefono su 7 pagine */
/* su 10, 0,008 al computer): quando arrivava la nuvoletta, che stava nel */
/* flusso di Colombo, il suo riquadro si allargava; quando la mattonella  */
/* diventava volto (width, height, padding e angoli per 220 ms) si        */
/* stringeva e cambiava posto.                                            */
/* - La nuvoletta sta fuori flusso, nello stesso punto di prima (18 px    */
/*   sopra Colombo; sulla mappa della Home, al telefono, alla sua destra).*/
/* - Da mattonella a volto il riquadro resta fermo e grande quanto la     */
/*   mattonella (tiene-posto, misure da tbp-colombo-chat.js) e il volto   */
/*   ci sta dentro traslato, nel punto esatto dove starebbe da solo. La   */
/*   mattonella si stringe verso il volto e sparisce in 110 ms, il volto  */
/*   compare in 110 ms: solo scale e opacity. Aspetto finale uguale.      */
/* - Il riquadro vuoto non prende i tocchi: solo il volto.                */
/* -------------------------------------------------------------------- */
html body .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__teaser {
  position: absolute;
  right: 0;
  bottom: calc(100% + 18px);
  width: max-content;
}
html body .tbp-colombo-chat.is-left:not(.is-open) .tbp-colombo-chat__teaser {
  right: auto;
  left: 0;
}
@media (max-width: 849px) {
  html body.tbp-home-map:not(.tbp-map-fullscreen) .tbp-colombo-chat:not(.is-open) .tbp-colombo-chat__teaser {
    right: auto;
    bottom: auto;
    left: calc(100% + 16px);
    top: 50%;
    translate: 0 -50%;
  }
}

html body:not(#tbp-niente) .tbp-colombo-chat.tiene-posto {
  left: auto !important;
  top: auto !important;
  right: var(--tbp-posto-destra) !important;
  bottom: var(--tbp-posto-sotto) !important;
}
html body .tbp-colombo-chat.tiene-posto .tbp-colombo-chat__launcher-wrap {
  box-sizing: border-box;
  width: var(--tbp-posto-w);
  height: var(--tbp-posto-h);
}
html body .tbp-colombo-chat.tiene-posto.is-mini:not(.is-open) .tbp-colombo-chat__launcher-wrap {
  pointer-events: none;
}
html body .tbp-colombo-chat.tiene-posto.is-mini:not(.is-open) .tbp-colombo-chat__launcher {
  pointer-events: auto;
  translate: var(--tbp-volto-dx) var(--tbp-volto-dy);
  transition: background-color 160ms ease !important;
}
html body .tbp-colombo-chat.senza-transizioni,
html body .tbp-colombo-chat.senza-transizioni * {
  transition: none !important;
}
html body .tbp-colombo-chat.va-in-volto .tbp-colombo-chat__launcher-wrap,
html body .tbp-colombo-chat.entra-volto .tbp-colombo-chat__launcher-wrap {
  transform-origin: var(--tbp-volto-cx) var(--tbp-volto-cy);
}
html body .tbp-colombo-chat.va-in-volto .tbp-colombo-chat__launcher-wrap {
  animation: tbp-colombo-mattonella-esce 110ms cubic-bezier(.4, 0, 1, 1) both;
}
html body .tbp-colombo-chat.entra-volto .tbp-colombo-chat__launcher-wrap {
  animation: tbp-colombo-volto-entra 110ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes tbp-colombo-mattonella-esce {
  to { scale: .55; opacity: 0; }
}
@keyframes tbp-colombo-volto-entra {
  from { scale: .7; opacity: 0; }
}
/* Con «riduci movimento» restano solo le dissolvenze. */
@media (prefers-reduced-motion: reduce) {
  html body .tbp-colombo-chat.va-in-volto .tbp-colombo-chat__launcher-wrap {
    animation-name: tbp-colombo-sfuma-via;
  }
  html body .tbp-colombo-chat.entra-volto .tbp-colombo-chat__launcher-wrap {
    animation-name: tbp-colombo-sfuma-dentro;
  }
}
@keyframes tbp-colombo-sfuma-via {
  to { opacity: 0; }
}
@keyframes tbp-colombo-sfuma-dentro {
  from { opacity: 0; }
}

/* 30/9 (CEO): chi ha gia' accettato le condizioni di AI Colombo (casella
   dell'iscrizione, o la striscia una volta sola) non vede piu' la striscia ne'
   «Attiva Colombo»: sotto il campo resta una riga piccola, «AI Colombo e'
   un'intelligenza artificiale · Condizioni d'uso». Stesso fondo della barra
   di scrittura, testo secondario; sul telefono tiene conto della barra di
   sistema in basso. */
html body .tbp-colombo-chat p.tbp-colombo-chat__nota {
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 12px 8px !important;
  background: #fff;
  color: #4E6457 !important;
  font: 500 11px/1.35 Manrope, "DM Sans", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-align: center;
}
html body .tbp-colombo-chat p.tbp-colombo-chat__nota[hidden] { display: none !important; }
html body .tbp-colombo-chat p.tbp-colombo-chat__nota a {
  color: #084828 !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
html body .tbp-colombo-chat p.tbp-colombo-chat__nota a:focus-visible {
  outline: 2px solid #084828 !important;
  outline-offset: 2px;
  border-radius: 2px;
}
@media (max-width: 768px) {
  html body .tbp-colombo-chat.is-open p.tbp-colombo-chat__nota {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@layer tbp-appearance {
  html[data-tbp-theme="dark"] body .tbp-colombo-chat p.tbp-colombo-chat__nota {
    background: #1b1b1b !important;
    color: #b5b5b5 !important;
    -webkit-text-fill-color: #b5b5b5 !important;
  }
  html[data-tbp-theme="dark"] body .tbp-colombo-chat p.tbp-colombo-chat__nota a {
    color: #9BDBB5 !important;
    -webkit-text-fill-color: #9BDBB5 !important;
  }
  html[data-tbp-theme="dark"] body .tbp-colombo-chat p.tbp-colombo-chat__nota a:focus-visible {
    outline-color: #9BDBB5 !important;
  }
}

/* -------------------------------------------------------------------- */
/* AI Colombo al telefono: un tasto fisso sopra la barra (CEO, D125.3,    */
/* 30/9 pomeriggio). Vale in tutto il sito, gestione compresa.            */
/*                                                                        */
/* - Un tondo di 48 px col volto, 8 px sopra la capsula della barra in    */
/*   basso, allineato al suo bordo destro. Niente mattonella col nome,    */
/*   niente linguetta sul bordo, niente trascinamento.                    */
/* - Ogni pagina gli lascia lo spazio in fondo (56 px in piu' della       */
/*   riserva della barra): arrivati in fondo, niente resta sotto di lui.  */
/* - Se sopra la barra c'e' una striscia fissa (Prenota, menu della        */
/*   gestione, cookie) sale sopra di lei: --tbp-colombo-su, misurato da   */
/*   tbp-colombo-chat.js, con una traslazione.                            */
/* - Il saluto sta sopra il tondo, dentro lo schermo (16 px dai bordi),   */
/*   una volta per sessione, e si chiude da solo dopo 6 s.                */
/* Nello strato tbp-appearance e con l'id: vince sulle posizioni vecchie  */
/* (Home, gestione, Mio account), che sono anche loro nello strato.       */
/* -------------------------------------------------------------------- */
@layer tbp-appearance {
  @media (max-width: 849px) {
    html body {
      --tbp-colombo-tasto: 48px;
      --tbp-colombo-corsia: calc(var(--tbp-colombo-tasto) + 8px);
    }
    html body #tbp-colombo.tbp-colombo-chat:not(.is-open) {
      position: fixed !important;
      top: auto !important;
      left: auto !important;
      right: var(--tbp-app-bar-side, 16px) !important;
      bottom: calc(var(--tbp-app-bar-h, 82px) + var(--tbp-app-bar-inset, 0px) + env(safe-area-inset-bottom, 0px)) !important;
      flex-direction: column !important;
      align-items: flex-end !important;
      gap: 12px !important;
    }
    /* Pagine senza barra (accesso, iscrizione, cassa): in basso a destra, sopra l'area sicura. */
    html body:not(.tbp-has-app-bar) #tbp-colombo.tbp-colombo-chat:not(.is-open) {
      bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Si sale sopra le strisce con una traslazione del tondo e del saluto, non del contenitore:
       una trasformazione sul contenitore sposterebbe anche il pannello della chat (fisso). */
    html body #tbp-colombo:not(.is-open) :is(.tbp-colombo-chat__launcher-wrap, .tbp-colombo-chat__teaser) {
      translate: 0 calc(-1 * var(--tbp-colombo-su, 0px)) !important;
      transition: translate var(--tbp-moto-medio, 240ms) var(--tbp-moto-curva, cubic-bezier(.22, 1, .36, 1)) !important;
    }
    html body #tbp-colombo:not(.is-open) .tbp-colombo-chat__launcher-wrap {
      position: relative !important;
      transform: none !important;
    }
    html body #tbp-colombo:not(.is-open) button.tbp-colombo-chat__launcher,
    html body #tbp-colombo:not(.is-open) .tbp-colombo-chat__launcher {
      box-sizing: border-box !important;
      width: var(--tbp-colombo-tasto) !important;
      height: var(--tbp-colombo-tasto) !important;
      min-width: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 3px !important;
      gap: 0 !important;
      border: 0 !important;
      border-radius: 50% !important;
      /* Bianco in tutti e tre i temi: il volto ha bisogno del suo fondo chiaro. */
      background: #fff !important;
      /* L'unica ombra delle cose che galleggiano (02_STILE §5), piu' la linea da 1 px. */
      box-shadow: 0 10px 28px -12px rgba(8, 72, 40, .22), 0 0 0 1px var(--tbp-line, rgba(8, 72, 40, .14)) !important;
    }
    html[data-tbp-theme="dark"] body #tbp-colombo:not(.is-open) .tbp-colombo-chat__launcher {
      box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .6), 0 0 0 1px #333 !important;
    }
    html body #tbp-colombo:not(.is-open) .tbp-colombo-chat__launcher .tbp-colombo-chat__avatar {
      width: 42px !important;
      height: 42px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 50% !important;
    }
    html body #tbp-colombo:not(.is-open) :is(.tbp-colombo-chat__launcher-name, button.tbp-colombo-chat__dismiss) {
      display: none !important;
    }
    /* Il numero sta dentro lo schermo: sull'angolo in alto a destra del tondo, non a sinistra fuori. */
    html body #tbp-colombo:not(.is-open) .tbp-colombo-chat__badge {
      top: -4px !important;
      right: -4px !important;
      left: auto !important;
      min-width: 20px !important;
      width: auto !important;
      height: 20px !important;
      padding: 0 5px !important;
      border: 2px solid #fff !important;
      font-size: 12px !important;
      line-height: 16px !important;
      box-shadow: none !important;
    }
    /* Dopo il saluto: un puntino, senza numero. */
    html body #tbp-colombo.is-mini:not(.is-open) .tbp-colombo-chat__badge {
      top: 0 !important;
      right: 0 !important;
      min-width: 0 !important;
      width: 12px !important;
      height: 12px !important;
      padding: 0 !important;
      font-size: 0 !important;
      line-height: 0 !important;
    }
    /* Il saluto: sopra il tondo, allineato a destra, mai oltre il bordo. La codina indica il volto. */
    html body #tbp-colombo:not(.is-open) .tbp-colombo-chat__teaser {
      /* Nella colonna, sopra il tondo (la Home lo metteva di lato, sulla mappa). */
      position: relative !important;
      inset: auto !important;
      max-width: calc(100vw - 2 * var(--tbp-app-bar-side, 16px) - 8px) !important;
      margin: 0 !important;
      transform-origin: calc(100% - 24px) calc(100% + 16px) !important;
    }
    html body #tbp-colombo:not(.is-open) .tbp-colombo-chat__teaser::after {
      top: auto !important;
      right: 12px !important;
      left: auto !important;
      bottom: -15px !important;
      transform: none !important;
    }
    /* Tema scuro: la codina del colore della nuvoletta (#141414), non bianca. */
    html[data-tbp-theme="dark"] body #tbp-colombo:not(.is-open) .tbp-colombo-chat__teaser::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath fill='%23141414' d='M0 0h24c-1.8 5-2.3 10.2-1.1 16C15.8 13.6 8.6 8.6 0 0z'/%3E%3C/svg%3E") !important;
    }
    /* Home: il nastro dei territori sta proprio sopra la barra. Sfuma prima del tondo, cosi'
       i nomi che scorrono non gli passano sotto. */
    html body.tbp-home-map:has(> #tbp-colombo:not([hidden])) .tbp-partner-nastro {
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 96px), transparent calc(100% - var(--tbp-colombo-corsia) - 8px)) !important;
      mask-image: linear-gradient(to right, #000 calc(100% - 96px), transparent calc(100% - var(--tbp-colombo-corsia) - 8px)) !important;
    }
    /* La × del saluto dentro lo schermo anche col saluto largo quanto lo schermo. */
    html body #tbp-colombo:not(.is-open) button.tbp-colombo-chat__teaser-close {
      top: -9px !important;
      left: -4px !important;
    }
  }

  /* Lo spazio in fondo alle pagine: riserva della barra + tondo + 8 px (piede, oppure corpo
     delle pagine senza piede). Solo quando Colombo c'e'.
     Piede verde (CEO 1/10: «blocco verde vuoto» sotto il piede, nell'app ~380 px di schermo):
     il piede tiene solo la riserva della barra; il tondo sta accanto all'ultima riga
     («Dati cartografici»), che si stringe ai due lati della sua corsia e resta centrata. */
  @media (max-width: 849px) {
    html body.tbp-has-app-bar:has(> #tbp-colombo:not([hidden])) footer#footer,
    html body.tbp-has-app-bar:has(> #tbp-colombo:not([hidden])) .footer-wrapper {
      padding-bottom: var(--tbp-app-bar-reserve, 98px) !important;
    }
    html body.tbp-has-app-bar:has(> #tbp-colombo:not([hidden])) #footer .tbp-mega-footer__chiusura > p:last-child {
      padding-inline: calc(var(--tbp-colombo-corsia) + 8px) !important;
    }
    html body.tbp-has-app-bar:not(.tbp-has-mega-footer):has(> #tbp-colombo:not([hidden])) {
      padding-bottom: calc(var(--tbp-app-bar-reserve, 98px) + var(--tbp-colombo-corsia)) !important;
    }
  }
}

@media (max-width: 849px) and (prefers-reduced-motion: reduce) {
  html body #tbp-colombo :is(.tbp-colombo-chat__launcher-wrap, .tbp-colombo-chat__teaser) {
    transition: none !important;
  }
}

/* -------------------------------------------------------------------- */
/* Gestione al computer (1/10, richiesta di colombo-demo-30-9): Colombo   */
/* sta dove sta nel resto del sito, in basso a destra, e il pannello      */
/* aperto si apre lì (la posizione la calcola fitPanel dal contenitore).  */
/* Prima la mattonella stava in basso a sinistra sopra il menu (copriva   */
/* «Clienti», «Movimenti», «Impostazioni», «Esci») e il pannello si apriva */
/* sopra il menu. Il volto piccolo (is-mini) era già a destra (regola     */
/* sopra). Nella procedura «Crea» al computer Colombo chiuso resta        */
/* nascosto (assets/wcfm/wcfm-wizard-flow.css); aperto, per esempio con   */
/* window.tbpOpenColombo() nella demo dal vivo, ora si vede.              */
/* -------------------------------------------------------------------- */
@media (min-width: 850px) {
  html body:is(.wcfm-dashboard-page, .wcfm-store-setup) #tbp-colombo.tbp-colombo-chat:not(.is-mini) {
    left: auto;
    right: 16px;
    bottom: 20px;
    align-items: flex-end;
  }
  html body:is(.wcfm-dashboard-page, .wcfm-store-setup) #tbp-colombo .tbp-colombo-chat__launcher {
    transform-origin: bottom right;
  }
  html body.tbp-wizard-view-pc #tbp-colombo.tbp-colombo-chat.is-open:not([hidden]) {
    display: flex !important;
  }
}

/* 13/10/2026 (CEO: «in dark Colombo è ancora un non cerchio»). Nel tema scuro ogni volto di Colombo prende una piastra
   bianca con gli angoli al 24 % (css/tbp-linguaggio.css, dentro «@layer tbp-appearance»: serve dove il volto sta su un
   fondo scuro). Dentro il bottone che apre la chat il fondo è già bianco e tondo: lì la piastra sporgeva dal cerchio.
   La regola sta nello STESSO strato: un «!important» fuori dagli strati perde contro uno dentro uno strato. */
@layer tbp-appearance {
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__launcher img.tbp-colombo-chat__avatar,
  html[data-tbp-theme="dark"] body .tbp-colombo-chat .tbp-colombo-chat__launcher img[src*="colombo-face-transparent"] {
    background: transparent !important;
    border-radius: 50% !important;
  }
}