/* =====================================================================
   IMQ Assistant — pannello "Good morning! How can I help you?"
   Font Fustat (caricato dal tema) + colori brand IMQ Gulf.
   Variabili d'istanza: --imq-top (offset sotto al menu), --imq-inner
   (larghezza max del contenuto in modalità full).
   ===================================================================== */
.imq-assistant{
	--imq-navy:    #00305b;
	--imq-green:   #00a75d;
	--imq-btn:       #00305b; /* colore pulsanti pieni (invio + launcher) */
	--imq-btn-hover: #00182e; /* hover pulsanti pieni */
	--imq-ink:     #00182e;
	--imq-muted:   #5d6b7a;
	--imq-border:  #cecece;
	--imq-bubble:  #e7eaee;
	--imq-z:       1040;
	--imq-top:     170px;
	--imq-inner:   1600px;
	font-family: "Fustat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--imq-ink);
}

/* ---- superficie ---- */
.imq-assistant__panel{
	background: #fff;
	border-radius: 28px;
	box-shadow: 0 24px 70px rgba(0, 24, 46, .16);
	overflow: hidden;
}
/* il padding e l'allineamento del contenuto stanno sull'inner */
.imq-assistant__inner{ padding: 30px clamp(20px, 3vw, 40px) 26px; display: flex; flex-direction: column; min-height: 0; }

/* ---- header ---- */
.imq-assistant__head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.imq-assistant__title{
	margin: 0; font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 400; line-height: 1.15; letter-spacing: -.02em; color: var(--imq-navy);
}
.imq-assistant__title strong{ font-weight: 700; }
.imq-assistant__title span{ opacity: .85; }

.imq-assistant__close{
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: #9aa6b2; cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.imq-assistant__close:hover{ background: #f1f3f5; color: var(--imq-navy); }
.imq-assistant__close:focus-visible{ outline: 2px solid var(--imq-green); outline-offset: 2px; }

/* ---- thread ---- */
.imq-assistant__thread{ margin-top: 18px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
.imq-assistant__head, .imq-assistant__form{ flex: 0 0 auto; }
.imq-assistant__msg{ max-width: 70%; padding: 13px 20px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.imq-assistant__msg--user{ margin-left: auto; background: #fff; border: 1px solid var(--imq-bubble); color: var(--imq-muted); border-bottom-right-radius: 6px; }
.imq-assistant__msg--bot{ margin-right: auto; margin-top: 12px; background: #f5f7f9; color: var(--imq-ink); border-bottom-left-radius: 6px; }
.imq-assistant__intro{ margin: 18px 0 0; max-width: 760px; font-size: 16px; line-height: 1.55; color: var(--imq-muted); }
.imq-assistant__suggestion{ display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; font-size: 16px; color: var(--imq-navy); text-decoration: none; }
.imq-assistant__suggestion:hover{ color: var(--imq-green); }
.imq-assistant__suggestion svg{ color: var(--imq-navy); }

/* ---- form ---- */
.imq-assistant__form{
	display: flex; align-items: center; gap: 12px; margin-top: 22px;
	border: 1px solid var(--imq-border); border-radius: 12px; padding: 0px 8px 0px 22px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.imq-assistant__form:focus-within{ border-color: var(--imq-green); box-shadow: 0 0 0 3px rgba(0, 167, 93, .12); }
.imq-assistant__input{ flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--imq-ink); padding: 0px 0; }
.imq-assistant__input::placeholder{ color: #8a97a3; }
.imq-assistant__send{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 35%;
    background: var(--imq-green);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
	margin-top: 3px;
    margin-bottom: 3px;
	margin-right: -3px;
}
.imq-assistant__send:hover{ background: #008f50; }
.imq-assistant__send:active{ transform: scale(.95); }
.imq-assistant__send:focus-visible{ outline: 2px solid var(--imq-navy); outline-offset: 2px; }

/* =====================================================================
   STATO CHIUSO + launcher "AI"
   ===================================================================== */
.imq-assistant.is-closed .imq-assistant__panel{ display: none; }
.imq-assistant__launcher{
	display: none; align-items: center; gap: 8px; height: 52px; padding: 0 22px;
	border: 0; border-radius: 999px; background: var(--imq-btn); color: #fff; cursor: pointer;
	font-family: inherit; font-weight: 700; font-size: 16px; letter-spacing: .02em;
	box-shadow: 0 14px 34px rgba(0, 48, 91, .38);
	transition: transform .12s ease, background-color .15s ease;
}
.imq-assistant.is-closed .imq-assistant__launcher{ display: inline-flex; }
.imq-assistant__launcher:hover{ background: var(--imq-btn-hover); transform: translateY(-1px); }
.imq-assistant__launcher:focus-visible{ outline: 2px solid var(--imq-navy); outline-offset: 2px; }

/* =====================================================================
   MODE INLINE
   ===================================================================== */
.imq-assistant--inline.is-closed{ display: flex; justify-content: flex-end; }

/* =====================================================================
   MODE FIXED — overlay
   ===================================================================== */
.imq-assistant--fixed .imq-assistant__panel,
.imq-assistant--fixed .imq-assistant__launcher{ position: fixed; z-index: var(--imq-z); }

/* --- anchor FULL: banda a tutta larghezza, ancorata SOTTO il menu --- */
.imq-assistant--full .imq-assistant__panel{
	top: var(--imq-top); left: 0; right: 0; width: 100%;
	border-radius: 0 0 clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px);
	height: min(calc(100vh - var(--imq-top) - 12px), 640px);
	display: flex; flex-direction: column; overflow: hidden;
	z-index:100;
}
.imq-assistant--full .imq-assistant__inner{
	max-width: var(--imq-inner); margin-inline: auto; width: 100%;
	flex: 1 1 auto; min-height: 0;
	padding-left: clamp(20px, 5vw, 80px); padding-right: clamp(20px, 5vw, 80px);
	padding-top: 26px; padding-bottom: 28px;
}
.imq-assistant--full .imq-assistant__launcher{
	top: calc(var(--imq-top) + 14px); right: clamp(20px, 5vw, 80px);
}

/* --- anchor TOP: card centrata in alto --- */
.imq-assistant--top .imq-assistant__panel{
	top: clamp(16px, 3vh, 40px); left: 50%; transform: translateX(-50%);
	width: min(1180px, calc(100vw - 32px)); height: min(calc(100vh - 64px), 640px);
	display: flex; flex-direction: column; overflow: hidden;
}
.imq-assistant--top .imq-assistant__launcher{ top: clamp(16px, 3vh, 40px); right: clamp(16px, 3vw, 40px); }

/* --- anchor BOTTOM-RIGHT: widget compatto --- */
.imq-assistant--bottom-right .imq-assistant__panel{
	right: clamp(12px, 3vw, 32px); bottom: clamp(12px, 3vw, 32px);
	width: min(560px, calc(100vw - 32px)); height: min(calc(100vh - 64px), 620px);
	display: flex; flex-direction: column; overflow: hidden;
}
.imq-assistant--bottom-right .imq-assistant__launcher{ right: clamp(12px, 3vw, 32px); bottom: clamp(12px, 3vw, 32px); }

/* ---- a11y ---- */
.imq-assistant .screen-reader-text{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- responsive ---- */
@media (max-width: 640px){
	.imq-assistant__inner{ padding: 22px 18px; }
	.imq-assistant__msg{ max-width: 88%; }
	.imq-assistant__intro{ font-size: 15px; }
	.imq-assistant--top .imq-assistant__panel{ top: 10px; width: calc(100vw - 20px); }
	.imq-assistant--full .imq-assistant__inner{ padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce){ .imq-assistant *{ transition: none !important; } }

/* Domande-esempio (chip) + outro — welcome screen */
.imq-assistant__qtitle{
	margin: 14px 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--imq-assistant-muted, #5a6b7a);
}
.imq-assistant__questions{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
}
.imq-assistant__q{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--imq-assistant-border, #e2e6ea);
	background: #fff;
	color: var(--imq-assistant-navy, #00305b);
	font: 600 14px/1.3 inherit;
	text-align: left;
	cursor: pointer;
	border-radius: 12px;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.imq-assistant__q:hover{
	background: var(--imq-assistant-navy, #00305b);
	border-color: var(--imq-assistant-navy, #00305b);
	color: #fff;
}
.imq-assistant__q svg{ flex: 0 0 auto; opacity: .8; }
.imq-assistant__outro{
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--imq-assistant-muted, #5a6b7a);
}

/* Link ed email nelle risposte del bot */
.imq-assistant__links{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}
.imq-assistant__link{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	background: var(--imq-assistant-navy, #00305b);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	border-radius: 10px;
	transition: opacity .15s ease;
}
.imq-assistant__link:hover{ opacity: .88; color: #fff; }
.imq-assistant__email{
	display: inline-block;
	margin: 12px 0 0;
	color: var(--imq-assistant-green, #00a75d) !important;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--imq-assistant-green, #00a75d);
	text-underline-offset: 3px;
}
.imq-assistant__email:hover,
.imq-assistant__email:focus{
	color: #008f50 !important;
	text-decoration-color: #008f50;
}

/* =====================================================================
   Restyle moderno — bolle messaggi, avatar bot, input
   ===================================================================== */
.imq-assistant__thread{ scrollbar-width: thin; scrollbar-color: #c7d0da transparent; }
.imq-assistant__thread::-webkit-scrollbar{ width: 8px; }
.imq-assistant__thread::-webkit-scrollbar-thumb{ background: #cfd8e2; border-radius: 8px; }

.imq-assistant__msg{
	max-width: 74%;
	padding: 13px 17px;
	border-radius: 16px;
	font-size: 15px;
	line-height: 1.5;
	position: relative;
	word-wrap: break-word;
}
.imq-assistant__msg + .imq-assistant__msg{ margin-top: 10px; }

/* utente: bolla piena navy, testo bianco, a destra */
.imq-assistant__msg--user{
	margin-left: auto;
	background: var(--imq-navy);
	border: 0;
	color: #fff;
	border-bottom-right-radius: 5px;
}
/* bot: bolla chiara, testo scuro, a sinistra, filetto verde */
.imq-assistant__msg--bot{
	margin-right: auto;
	margin-top: 12px;
	background: #f2f5f8;
	color: var(--imq-ink);
	border-left: 3px solid var(--imq-green);
	border-bottom-left-radius: 5px;
}

/* input più moderno */
.imq-assistant__form{
	border-radius: 14px;
	background: #fff;
	padding: 6px 8px 6px 20px;
}
.imq-assistant__send{
	width: 40px; height: 40px; border-radius: 11px;
	background: var(--imq-green); color: #fff;
}
.imq-assistant__send:hover{ background: #008f50; }

/* chip domande: verde brand su hover, angoli coerenti */
.imq-assistant__q{ border-radius: 11px; }
.imq-assistant__q:hover{ background: var(--imq-green); border-color: var(--imq-green); }

/* variabili usate dai blocchi link/chip (allineate al brand) */
.imq-assistant{
	--imq-assistant-navy: #00305b;
	--imq-assistant-green: #00a75d;
	--imq-assistant-border: #e2e6ea;
	--imq-assistant-muted: #5d6b7a;
}

/* Email come bottone (icona busta) */
.imq-assistant__email-row{ margin-top: 10px; }
.imq-assistant__email-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 10px;
	background: var(--imq-assistant-green, #00a75d);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 14px;
	transition: background .15s ease;
}
.imq-assistant__email-btn:hover,
.imq-assistant__email-btn:focus{ background: #008f50; color: #fff !important; }
.imq-assistant__email-btn svg{ flex: 0 0 auto; }

/* Honeypot: fuori schermo, non focusabile */
.imq-assistant__hp{
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}
