:root {
	--chat--color-primary: #202020;
	--chat--color-primary-shade-50:  #202020;
	--chat--color-primary-shade-100:  #202020;
	--chat--color-secondary: #20b69e;
	--chat--color-secondary-shade-50: #1ca08a;
	--chat--color-white: #ffffff;
	--chat--color-light: #ffffff;
	--chat--color-grey: #cbc9c7;
	--chat--color-light-shade-100: #c2c5cc;
	--chat--color-medium: #f2f4f8;
	--chat--color-dark: #202020;
	--chat--color-disabled: #798D98;
	--chat--color-typing: #798D98;

	--chat--spacing: 1rem;
	--chat--border-radius: 0.8rem;
	--chat--transition-duration: 0.15s;
	--chat--window--width: 400px;
	--chat--window--height: 600px;
  --chat--body--background: var(--chat--color-medium);
	--chat--header-height: 80px;
	--chat--header--padding: var(--chat--spacing);
	--chat--header--background: var(--chat--color-primary);
	--chat--header--color: var(--chat--color-typing);
	--chat--header--border-top: none;
	--chat--header--border-bottom: none;
	--chat--header--border-bottom: none;
	--chat--header--border-bottom: none;
	--chat--heading--font-size: 2rem;
	--chat--header--color: var(--chat--color-light);
	--chat--subtitle--font-size: inherit;
	--chat--subtitle--line-height: 1.8;
  --chat--window--border: var(--chat--color-primary);
	--chat--textarea--height: 50px;
  --chat--footer--background: var(--chat--color-medium);
	--chat--message--font-size: 1rem;
	--chat--message--padding: var(--chat--spacing);
	--chat--message--border-radius: var(--chat--border-radius);
	--chat--message-line-height: 1.8;
	--chat--message--bot--background: var(--chat--color-white);
	--chat--message--bot--color: var(--chat--color-primary);
	--chat--message--bot--border: none;
	--chat--message--user--background: var(--chat--color-grey);
	--chat--message--user--color: var(--chat--color-primary);
	--chat--message--user--border: none;
	--chat--message--pre--background: rgba(0, 0, 0, 0.05);
  --chat--input--send--button--color: var(--chat--color-primary);
	--chat--toggle--background: var(--chat--color-primary);
	--chat--toggle--hover--background: var(--chat--color-disabled);
	--chat--toggle--active--background: var(--chat--color-primary);
	--chat--toggle--color: var(--chat--color-white);
	--chat--toggle--size: 64px;
}

/* ----------------------------------------------------------
   CHAT HEADER  –  una sola immagine “Alice  AI”
   ---------------------------------------------------------- */
.chat-header {
  position: relative;          /* base per il pseudo-elemento   */
  height: 40px;                /* = altezza del logo            */
  padding: 0 1rem;             /* aria orizzontale facoltativa  */
}

/* 1️⃣  Nascondi titolo e sottotitolo (restano per i reader) */
.chat-header h1,
.chat-header p {
  margin: 0;
  padding: 0;
  text-indent: -9999px;        /* spinge fuori il testo          */
  overflow: hidden;
}

/* 2️⃣  Inserisci il logo composito come unico elemento */
.chat-header::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 17%;
  transform: translate(-50%, -50%);   /* centra il logo */
  width: 250px;          /* = larghezza reale dell’immagine */
  height: 40px;          /* = altezza reale                  */
  background: url('/logo alice ai 2.png') center/contain no-repeat;
  pointer-events: none;          /* il logo non intercetta click */
}
.chat-header p::after {
  content: '';
  position: absolute;
  top: 60%;
  left: 92%;
  transform: translate(-50%, -50%);   /* centra il logo */
  width: 50px;          /* = larghezza reale dell’immagine */
  height: 30px;          /* = altezza reale                  */
  background: url('/ai 2.png') center/contain no-repeat;
  pointer-events: none;          /* il logo non intercetta click */
}
/* ----------------------------------------------------------
   ---------------------------------------------------------- */
/* Messaggi provenienti dal bot (tutte le varianti note) */
.n8n-chat__message--bot,
.chat-message--bot,
.chat-message-from-bot {
    position: relative;
    margin-left: 16px;          /* corsia per l’avatar (24px icona + 24 aria) */
    flex: 0 0 auto !important;  /* disattiva la “stretch” a 100 % di n8n      */
    width: fit-content !important;
    max-width: 340px;           
    box-sizing: border-box;     /* padding incluso nel limite dei 340 px      */
}

.n8n-chat__message--bot .chat-message-markdown,
.chat-message--bot        .chat-message-markdown,
.chat-message-from-bot    .chat-message-markdown {
    max-width: 100%;
    padding: 8px 12px;         /* poco grigio ai lati del testo               */
}
 /* LOGO Alice Ceramica accanto ai messaggi dell’assistente */
/* Pseudo-elemento che visualizza l’icona */
.n8n-chat__message--bot::before,
.chat-message--bot::before,
.chat-message-from-bot::before {  
    content: '';
    position: absolute;
    left: -28px;                  
	bottom: -12px;                   
    width: 28px;
    height: 28px;
    display: inline-block;        /* fondamentale per rispettare le dimensioni */
    background: url("/favicon.png") center/contain no-repeat;
	background-size: 60% 60%;	
    border-radius: 40%;           
    pointer-events: none;         /* l’icona non è cliccabile */
	z-index: 10;
}
/* chat-layout footer */
.chat-layout .chat-footer {
  padding-bottom: 20px !important;   /* spazio per la dicitura */
  position: relative;
}

/* dicitura */
.chat-layout .chat-footer::after {
  content: "Powered by Envision";
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%);
  font-size: 13px;
  color: var(--chat--color-primary);
  user-select: none;
  pointer-events: none;
}