/* ========================================== */
/* CHAT OVERLAY (fixed)                       */
/* ========================================== */

/* Pulsante per aprire/chiudere la chat */
#muza-advisor-chat-button {
  position: fixed;
  background-color: transparent;
  color: #fff;
  border: none;
  border-radius: 50%;
  padding: 0.75rem;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 9999;
  transition: background-color 0.3s ease;
}
#muza-advisor-chat-button:hover {
  background-color: #005b8a;
}
#muza-advisor-chat-button:focus {
  outline: none;
}

/* Container principale overlay */
#muza-advisor-chat-container {
  position: fixed;
  width: 300px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  z-index: 9999;
}

/* Wrapper interno della chat overlay */
#muza-advisor-chat-window {
  display: flex;
  flex-direction: column;
  height: 450px; /* Altezza fissa per l’overlay */
}

#muza-advisor-chat-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

#muza-advisor-chat-input {
  padding: 10px;
  border: none;
  width: 100%;
  height: 3.2rem;
  resize: none;
  background-color: rgba(249, 249, 249, 0.45);
}
#muza-advisor-chat-input:focus {
  outline: none;
}

#muza-advisor-chat-send {
  display: flex;
  justify-content: center;
  padding: 10px;
  background: #0073aa;
  color: #fff;
  border: none;
  width: 100%;
  cursor: pointer;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  transition: 0.3s;
}

/* ========================================== */
/* CHAT INLINE (estesa)                       */
/* ========================================== */

.muza-advisor-chat-inline {
  position: relative;
  width: 100%;
  max-width: 1000px; /* Puoi regolare la larghezza massima */
  margin: 2rem auto;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  box-shadow: none; /* Niente ombra, se preferisci */
  display: flex;
  flex-direction: column;
  z-index: 0;
  padding: 1rem;
}

/* Wrapper interno della chat inline */
.muza-advisor-chat-inline .muza-advisor-chat-window {
  display: flex;
  flex-direction: column;
  height: auto; /* Cresce in base al contenuto */
}

.muza-advisor-chat-inline .muza-advisor-chat-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  max-height: 400px; /* Scroll verticale oltre i 400px */
  margin-bottom: 2rem;
}

/* Input di testo inline */
.muza-advisor-chat-inline .muza-advisor-chat-input {
  padding: 10px;
  border: none;
  width: 100%;
  height: 3.2rem;
  resize: none;
  background-color: rgba(249, 249, 249, 0.45);
  margin-bottom: 1rem;
}
.muza-advisor-chat-inline .muza-advisor-chat-input:focus {
  outline: none;
}

/* Pulsante “Invia” inline */
.muza-advisor-chat-inline .muza-advisor-chat-send {
  display: flex;
  justify-content: center;
  padding: 10px 15px;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: 0.3s;
}

/* Contenitore “sticky” per input e bottone (opzionale) */
.muza-advisor-chat-input-container {
  position: sticky;
  bottom: 9rem; /* distanza dal fondo */
  display: flex;
  justify-content: center;
  height: 3.1rem;
}
.muza-advisor-chat-input-container .muza-advisor-chat-input {
  max-width: 600px;
  border-radius: 50px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding-left: 1.2rem;
  padding-top: 0.8rem;
}
.muza-advisor-chat-input-container .muza-advisor-chat-send {
  width: 64px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-left: 0.75rem;
  border-radius: 50px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .muza-advisor-chat-inline img {
    max-width: 300px;
  }
  .muza-advisor-chat-input-container {
    bottom: 3rem; /* Regola se serve meno spazio dal fondo */
  }
}

/* ========================================== */
/* STILI CONDIVISI DEI MESSAGGI              */
/* ========================================== */

.message {
  padding: 0.75rem;
  border-radius: 1rem;
  background: #f9f9f9;
  color: black;
  line-height: 1.3;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
              0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Messaggi nell’overlay: font e spacing */
#muza-advisor-chat-container .message {
  margin-top: 0.5rem;
  font-size: 15px;
}

/* Messaggi nell'inline: font e spacing più grandi */
.muza-advisor-chat-inline .message {
  margin-top: 1rem;
  font-size: 18px;
}

/* Messaggi dell’utente */
.message.user {
  margin-left: 2rem;
  border-bottom-right-radius: 0;
  color: white; /* Testo in bianco */
}

/* Messaggi del bot (o assistente) */
.message.bot {
  margin-right: 1rem;
  padding-top: 0.1rem;
  border-bottom-left-radius: 0;
}

/* Tag di base (p, ul, ol, ecc.) */
.message p {
  margin: 0;
  margin-top: 0.5rem;
}
.message ul {
  list-style-type: disc;
  margin-left: 1.25rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.message li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.message ol {
  margin-top: 0.5rem;
  margin-left: 1rem;
}
.message.bot ol > * {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Immagini nei messaggi */
.message img {
  margin-top: 0.5rem;
  border-radius: 1rem;
  width: 100%;
}
.message a img:hover {
  transition: 0.2s;
  filter: saturate(0.8) brightness(95%);
}

/* Link nel bot: es. sottolineati e in grassetto */
.message.bot a {
  font-weight: bold;
  font-size: 17px;
  color: black;
  text-decoration: underline;
}

/* Tabelle */
.message table {
  border-collapse: collapse;
  margin: 1rem 0;
  text-align: left;
}
.message th,
.message td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #0000001f;
}
.message.user th,
.message.user td {
  border: 1px solid #4b5563; /* bordi più scuri nei messaggi utente */
}

/* Titoli */
.message h1,
.message h2,
.message h3,
.message h4,
.message h5,
.message h6 {
  font-weight: bold;
  font-size: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

/* Linee orizzontali */
.message hr {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Blocchi di codice */
.message pre {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin: 0.75rem 0;
  overflow-x: auto;
}
.message.user pre {
  background-color: #1f2937; /* sfondo scuro */
  color: #9ca3af;           /* testo grigio chiaro */
}

/* Ogni messaggio sta dentro una .chat-line */
.chat-line {
  display: flex;       /* Layout flex */
  width: 100%;
  margin: 0.5rem 0;    /* Spaziatura verticale tra un messaggio e l’altro */
}

/* Di base i messaggi occupano solo lo spazio necessario, fino a un max dell’80% */
.chat-line .message {
  display: inline-block;
  max-width: 700px;
  box-sizing: border-box; /* Buona prassi se aggiungi padding */
}

/* Se vuoi differenziare: allinea i messaggi dell’utente a destra */
.chat-line .message.user {
  align-self: flex-end; /* Li spinge in alto a destra nella .chat-line */
  margin-left: auto;    /* Li allinea a destra */
}

/* Allinea i messaggi dell’assistente (bot) a sinistra */
.chat-line .message.assistant,
.chat-line .message.bot {
  align-self: flex-start;
}


.chat-welcome-message {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 14px;
  padding: 0 10px;
  line-height: 1.5;
  opacity: 0.8;
}

.chat-examples-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  font-size: 13px;
  margin-top: 0.5rem;
  padding: 0 10px;
  margin-left: auto;
  margin-right: auto;
  color: #000;
}

/* Migliora la leggibilità da desktop */
@media (min-width: 768px) {
  .chat-welcome-message {
    font-size: 16px;
  }
  .chat-examples-grid {
    font-size: 14px;
  }
}

.chat-examples-grid .chat-example {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 10px;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.chat-examples-grid .chat-example:hover {
  opacity: 1;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}