/* Netcomm Academy Assistente — widget chat.
   Stili scoped sotto .naa-root. Token allineati al design system della
   piattaforma (na-frontend.css / na-theme.css): TENERLI ALLINEATI. */

.naa-root{
	--naa-bg:#15181f; --naa-card:#1b1f28; --naa-card2:#222734;
	--naa-text:#f2f4f8; --naa-muted:#9aa3b2; --naa-line:#2a2f3a;
	--naa-accent:#1a7d3c; --naa-accent2:#37b85f; --naa-accent-ink:#fff;
	--naa-radius:12px; --naa-radius-pill:999px;
	--naa-shadow:0 16px 40px rgba(0,0,0,.5);
	--naa-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--naa-focus:0 0 0 3px rgba(55,184,95,.55);
	position:fixed; right:22px; bottom:22px; z-index:99990;
	font-family:var(--naa-font); color:var(--naa-text);
	display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.naa-root *{box-sizing:border-box}
.naa-root :focus-visible{outline:none;box-shadow:var(--naa-focus);border-radius:8px}

/* ---------- Pulsante flottante ---------- */
.naa-launcher{
	width:58px; height:58px; border-radius:50%;
	background:linear-gradient(135deg,var(--naa-accent),var(--naa-accent2));
	color:var(--naa-accent-ink); border:0; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 8px 24px rgba(0,0,0,.45);
	transition:transform .15s ease, box-shadow .15s ease;
}
.naa-launcher:hover{transform:scale(1.06)}
.naa-launcher-open svg{transform:rotate(-8deg)}

/* ---------- Pannello ---------- */
.naa-panel{
	width:min(370px, calc(100vw - 32px));
	height:min(540px, calc(100vh - 120px));
	background:var(--naa-bg); border:1px solid var(--naa-line);
	border-radius:var(--naa-radius); box-shadow:var(--naa-shadow);
	display:flex; flex-direction:column; overflow:hidden;
	animation:naa-panel-in .22s ease;
}
@keyframes naa-panel-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.naa-header{
	display:flex; align-items:center; justify-content:space-between;
	padding:14px 16px; background:var(--naa-card);
	border-bottom:1px solid var(--naa-line);
}
.naa-header-title{display:flex; align-items:center; gap:9px; font-weight:600; font-size:15px}
.naa-dot{
	width:9px; height:9px; border-radius:50%;
	background:var(--naa-accent2); box-shadow:0 0 0 3px rgba(55,184,95,.25);
}
.naa-close{
	background:none; border:0; color:var(--naa-muted); cursor:pointer;
	font-size:24px; line-height:1; padding:2px 6px; border-radius:6px;
}
.naa-close:hover{color:var(--naa-text)}

/* ---------- Corpo (messaggi) ---------- */
.naa-body{
	flex:1; overflow-y:auto; padding:16px;
	display:flex; flex-direction:column; gap:10px;
}
.naa-msg{
	max-width:85%; padding:10px 13px; border-radius:14px;
	font-size:14px; line-height:1.45; white-space:pre-wrap; word-wrap:break-word;
	animation:naa-msg-in .18s ease;
}
@keyframes naa-msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Indicatore "sta scrivendo". */
.naa-typing{display:flex; gap:5px; align-items:center; padding:14px 15px}
.naa-typing span{
	width:7px; height:7px; border-radius:50%; background:var(--naa-muted);
	animation:naa-blink 1.1s infinite ease-in-out;
}
.naa-typing span:nth-child(2){animation-delay:.18s}
.naa-typing span:nth-child(3){animation-delay:.36s}
@keyframes naa-blink{0%,70%,100%{opacity:.25;transform:none}35%{opacity:1;transform:translateY(-2px)}}
.naa-msg-bot{
	align-self:flex-start; background:var(--naa-card2);
	border:1px solid var(--naa-line); border-bottom-left-radius:4px;
}
.naa-msg-user{
	align-self:flex-end; background:var(--naa-accent);
	color:var(--naa-accent-ink); border-bottom-right-radius:4px;
}
.naa-msg-pending{color:var(--naa-muted); font-style:italic}
.naa-msg-bot a{color:var(--naa-accent2); text-decoration:underline !important}
.naa-msg-bot a:hover{color:var(--naa-text)}

/* ---------- Pulsanti azione ---------- */
.naa-actions{display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start}
.naa-btn{
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--naa-card2); border:1px solid var(--naa-line);
	color:var(--naa-text); border-radius:var(--naa-radius-pill);
	padding:8px 16px; font-size:13px; font-family:inherit; cursor:pointer;
	text-decoration:none !important; transition:border-color .15s ease, background .15s ease;
}
.naa-btn:hover{border-color:var(--naa-accent2); color:var(--naa-text)}
.naa-btn-primary{
	background:var(--naa-accent); border-color:var(--naa-accent);
	color:var(--naa-accent-ink);
}
.naa-btn-primary:hover{background:var(--naa-accent2); border-color:var(--naa-accent2); color:var(--naa-accent-ink)}

/* ---------- Messaggio proattivo (nudge) ---------- */
.naa-nudge{
	display:flex; align-items:center; gap:4px;
	background:var(--naa-card); border:1px solid var(--naa-line);
	border-radius:var(--naa-radius-pill); box-shadow:var(--naa-shadow);
	padding:4px 6px 4px 4px;
	animation:naa-nudge-in .25s ease;
}
@keyframes naa-nudge-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.naa-nudge-text{
	background:none; border:0; color:var(--naa-text); cursor:pointer;
	font-family:inherit; font-size:13.5px; font-weight:600; padding:6px 8px;
}
.naa-nudge-text:hover{color:var(--naa-accent2)}
.naa-nudge-close{
	background:none; border:0; color:var(--naa-muted); cursor:pointer;
	font-size:18px; line-height:1; padding:4px 8px; border-radius:50%;
}
.naa-nudge-close:hover{color:var(--naa-text)}

/* ---------- Varianti pulsanti ---------- */
.naa-btn-faq{border-style:dashed; color:var(--naa-muted)}
.naa-btn-faq:hover{color:var(--naa-text)}
.naa-btn-ghost{
	background:none; border-color:transparent; color:var(--naa-muted);
	padding-left:8px; padding-right:8px;
}
.naa-btn-ghost:hover{border-color:transparent; color:var(--naa-text)}

/* ---------- Footer (input) ---------- */
.naa-footer{
	display:flex; flex-direction:column; gap:8px;
	padding:12px; background:var(--naa-card); border-top:1px solid var(--naa-line);
}
.naa-input-row{display:flex; gap:8px; align-items:flex-end}

/* Riga allegato (solo segnalazioni). */
.naa-attach{display:flex; align-items:center; gap:8px; min-height:20px}
.naa-attach-btn{
	display:inline-flex; align-items:center; gap:6px;
	background:none; border:0; color:var(--naa-muted); cursor:pointer;
	font-family:inherit; font-size:12.5px; padding:2px 0;
}
.naa-attach-btn:hover{color:var(--naa-accent2)}
.naa-file-chip{
	display:inline-flex; align-items:center; gap:6px;
	background:var(--naa-card2); border:1px solid var(--naa-line);
	border-radius:var(--naa-radius-pill); padding:3px 6px 3px 10px;
	font-size:12px; color:var(--naa-text); max-width:100%;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.naa-file-remove{
	background:none; border:0; color:var(--naa-muted); cursor:pointer;
	font-size:15px; line-height:1; padding:2px 4px;
}
.naa-file-remove:hover{color:var(--naa-text)}
.naa-input{
	flex:1; resize:none; background:var(--naa-card2);
	border:1px solid var(--naa-line); border-radius:10px;
	color:var(--naa-text); font-family:inherit; font-size:14px;
	padding:9px 11px; line-height:1.4; min-height:40px; max-height:110px;
}
.naa-input::placeholder{color:var(--naa-muted)}
.naa-send{
	display:flex; align-items:center; justify-content:center;
	width:40px; height:40px; flex:0 0 auto;
	background:var(--naa-accent); color:var(--naa-accent-ink);
	border:0; border-radius:50%; font-size:14px;
	font-family:inherit; cursor:pointer; transition:background .15s ease;
}
.naa-send:hover{background:var(--naa-accent2)}
.naa-send:disabled{opacity:.6; cursor:default}

/* ---------- Mobile ---------- */
@media (max-width:480px){
	.naa-root{right:14px; bottom:14px}
	.naa-launcher{width:52px; height:52px}
	.naa-panel{height:min(520px, calc(100vh - 100px))}
}