/* Override colori tema Nexsas (demo "AI Chatbot") con la palette ufficiale Thinkly.
   Il tema definisce i colori come custom properties CSS in main.css — qui li
   ridefiniamo senza toccare il file generato dal tema (12k+ righe), così restano
   facili da aggiornare e da confrontare con l'originale. */
:root, :host {
  /* Accento primario del brand: verde lime chiaro */
  --color-primary-400: #f8ffe2;
  --color-primary-500: #f1fec8;
  --color-primary-600: #d3e59e;

  /* Sfondi scuri (usati dalle classi dark:bg-background-N, attive perché
     la pagina è forzata in dark mode): derivati dal blu-antracite del brand */
  --color-background-5: #23212c;
  --color-background-6: #191822;
  --color-background-7: #2c2a37;
  --color-background-8: #16151b;
  --color-background-9: #363340;

  /* Bordi/stroke in dark mode, stessa famiglia del brand */
  --color-stroke-5: #363340;
  --color-stroke-6: #3f3c4a;
  --color-stroke-7: #454250;
  --color-stroke-8: #4d4a58;
}

/* .btn-primary nel tema usa testo/icona bianchi pensati per lo sfondo viola
   originale: col nostro accento lime chiaro il bianco sparirebbe. Testo e
   freccina passano al blu-antracite del brand per restare leggibili. */
.btn-primary {
  color: #23212c;
}
.btn-primary:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%2323212c' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
}

/* Sezione FAQ: <details>/<summary>, non presenti nel tema originale.
   Il "+" nel badge ruota in "x" quando la voce è aperta; la classe Tailwind
   group-open:rotate-45 non è nel main.css compilato (mai usata dal tema
   originale), quindi la implementiamo qui in CSS puro. */
details > summary {
  transition: color 0.2s ease;
}
details[open] > summary span {
  transform: rotate(45deg);
}
details > summary::-webkit-details-marker {
  display: none;
}

/* Le sezioni con id (raggiunte dai link #ancora della nav) non devono finire
   nascoste sotto l'header fisso quando si fa lo scroll verso di loro. */
section[id] {
  scroll-margin-top: 96px;
}

/* La chat demo ha il proprio scroll interno: senza questo, muovendo la
   rotella sopra la lista messaggi si scrolla la pagina (Lenis intercetta
   lo scroll globale) invece di scorrere la conversazione. */
#thinkly-demo-log {
  overscroll-behavior: contain;
}

/* Mini prompt bar flottante (porting dal demo "Automation SaaS" dello stesso
   tema). Alcune utility Tailwind usate nel markup originale (translate-y-full,
   bottom-6, left-1/2, -translate-x-1/2, min-w-9, min-w-fit, max-w-[700px],
   gap-x-1.5/2.5) non sono nel main.css compilato di QUESTO demo (il tema
   include solo le classi effettivamente usate nel demo "AI Chatbot"), quindi
   le replichiamo qui in CSS puro invece che via classi. */
#thinkly-mini-prompt {
  left: 50%;
  bottom: 24px;
  width: 100%;
  max-width: 350px;
  border-radius: 9999px;
  box-shadow: 0 8px 12px 0 rgba(16, 24, 40, 0.16);
  /* Stato iniziale identico al componente originale (visto nel main.css del
     demo Automation SaaS, regola dedicata a [data-mini-prompt-form]): nascosto
     del tutto — non solo spostato — finché lo script non lo rivela scrollando.
     translateY 200% (non 100%) serve a "sganciarlo" completamente dal fondo
     dello schermo, dato che è già ancorato con bottom:24px. */
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 200%);
}
@media (min-width: 1024px) {
  #thinkly-mini-prompt {
    max-width: 700px;
  }
}
#thinkly-mini-prompt .mini-prompt-gap {
  gap: 6px;
}
@media (min-width: 640px) {
  #thinkly-mini-prompt .mini-prompt-gap {
    gap: 10px;
  }
}
#thinkly-mini-prompt input::placeholder {
  color: rgba(26, 26, 28, 0.5);
}
#thinkly-mini-prompt input:focus-visible {
  outline: none;
}
#thinkly-mini-prompt-submit:hover {
  transform: scale(1.02);
}
#thinkly-mini-prompt-submit span svg:first-child {
  transform: translateX(0);
}
#thinkly-mini-prompt-submit:hover span svg:first-child {
  transform: translateX(100%);
}
#thinkly-mini-prompt-submit span svg:last-child {
  transform: translateX(-100%);
}
#thinkly-mini-prompt-submit:hover span svg:last-child {
  transform: translateX(0);
}

/* Footer con sfondo vaniglia (vedi index.html): il tema imposta i link del
   footer (.footer-link-v2) su colore chiaro quando la dark mode è attiva
   (regola :where(.dark, .dark *) in main.css) — sul nostro sito la dark mode
   è sempre attiva, quindi su sfondo vaniglia i link risultavano illeggibili.
   Qui riportiamo il colore al nero/blu scuro del brand, solo dentro il
   footer, senza toccare main.css né gli altri usi di .footer-link-v2. */
footer .footer-link-v2:where(.dark, .dark *) {
  color: var(--color-secondary);
}
footer .footer-link-v2:where(.dark, .dark *):before {
  background-color: var(--color-secondary);
}

/* Decorazioni di sfondo per rompere la piattezza delle sezioni scure a tinta
   unita (il body è bg-background-5 su tutta la pagina, quindi molte sezioni
   senza classi bg-* proprie sono un unico blocco di colore identico).
   Tre elementi, pensati per essere leggeri e non competere con i contenuti:
   - .bg-dot-pattern: puntini vaniglia molto tenui, come texture di sfondo
   - .decor-glow: macchia di colore sfumata e sfocata, negli angoli vuoti
   - .decor-dot: piccola bollicina piena, eco delle bollicine della hero */
.bg-dot-pattern {
  background-image: radial-gradient(rgba(241, 254, 200, 0.18) 1.6px, transparent 1.8px);
  background-size: 26px 26px;
}
.decor-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.decor-dot {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 0;
}