/* NED Chat — tema beige chiaro, layout mobile-first con adattamento desktop */

:root {
	--ned-bg: #f5ead9;
	--ned-bg-bubble-assistant: #ffffff;
	--ned-bg-bubble-user: #e8c88f;
	--ned-text: #3a2a1a;
	--ned-accent: #8a5a2b;
	--ned-radius: 18px;
}

.ned-chat-app {
	display: flex;
	flex-direction: column;
	background: var(--ned-bg);
	color: var(--ned-text);
	border-radius: var(--ned-radius);
	max-width: 480px;
	margin: 0 auto;
	/* vh classico come fallback per browser molto vecchi; dvh (dynamic
	   viewport height) si adatta allo spazio davvero visibile anche quando
	   la barra degli indirizzi del browser mobile è a schermo, evitando che
	   il fondo della chat (casella di scrittura) finisca sotto al bordo. */
	min-height: 70vh;
	min-height: 70dvh;
	max-height: 90vh;
	max-height: 90dvh;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 4px 24px rgba(0,0,0,0.08);
	/* Impedisce che lo scroll dentro la chat "rimbalzi" sulla pagina intera e
	   scateni il gesto nativo di pull-to-refresh del browser mobile quando si
	   scorre verso il basso partendo dalla cima della chat. */
	overscroll-behavior: contain;
}

.ned-chat-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--ned-bg);
	border-bottom: 1px solid rgba(0,0,0,0.06);
}

.ned-sidebar-toggle {
	background: none;
	border: none;
	font-size: 1.2rem;
	cursor: pointer;
	color: var(--ned-text);
	padding: 0 4px;
}

.ned-chat-logo {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.ned-chat-title {
	font-weight: 600;
	font-size: 1.1rem;
}

.ned-chat-user {
	margin-left: auto;
	font-size: 0.8rem;
	opacity: 0.7;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ned-chat-logout {
	font-size: 0.8rem;
	color: var(--ned-accent);
	text-decoration: none;
	margin-left: 8px;
}

.ned-chat-banner img {
	width: 100%;
	display: block;
}

.ned-chat-body {
	display: flex;
	flex: 1;
	min-height: 0;
	position: relative;
}

.ned-sidebar {
	width: 220px;
	flex-shrink: 0;
	background: #efe1ca;
	border-right: 1px solid rgba(0,0,0,0.06);
	padding: 12px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.ned-sidebar-head {
	display: none; /* visibile solo su mobile, vedi media query sotto */
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.ned-sidebar-title {
	font-weight: 600;
	font-size: 0.95rem;
}

.ned-sidebar-close {
	background: none;
	border: none;
	font-size: 1.1rem;
	cursor: pointer;
	color: var(--ned-text);
	padding: 4px 8px;
	border-radius: 6px;
}
.ned-sidebar-close:hover { background: rgba(0,0,0,0.08); }

.ned-sidebar-backdrop {
	display: none;
}

.ned-new-chat {
	width: 100%;
	margin-bottom: 10px;
}

.ned-conv-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ned-conv-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 6px 8px 10px;
	border-radius: 10px;
	font-size: 0.85rem;
}

.ned-conv-item:hover { background: rgba(0,0,0,0.05); }
.ned-conv-item.active { background: var(--ned-bg-bubble-user); font-weight: 600; }

.ned-conv-item-label {
	flex: 1;
	min-width: 0;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ned-conv-item-delete {
	flex-shrink: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(0,0,0,0.35);
	font-size: 0.8rem;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 6px;
}
.ned-conv-item-delete:hover { background: rgba(0,0,0,0.08); color: #8a2a2a; }

.ned-chat-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ned-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.ned-msg {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: var(--ned-radius);
	line-height: 1.4;
	font-size: 0.95rem;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.ned-msg a {
	color: var(--ned-accent);
	text-decoration: underline;
}

.ned-msg-assistant {
	background: var(--ned-bg-bubble-assistant);
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}

.ned-msg-user {
	background: var(--ned-bg-bubble-user);
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}

.ned-chat-form {
	display: flex;
	gap: 8px;
	padding: 12px;
	background: var(--ned-bg);
	border-top: 1px solid rgba(0,0,0,0.06);
}

.ned-chat-form textarea {
	flex: 1;
	resize: none;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 20px;
	padding: 10px 14px;
	font-size: 0.95rem;
	max-height: 100px;
}

.ned-chat-form button {
	background: var(--ned-accent);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 42px;
	height: 42px;
	font-size: 1.1rem;
	cursor: pointer;
}

.ned-btn {
	background: var(--ned-accent);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 10px 16px;
	font-size: 0.9rem;
	cursor: pointer;
}

/* ---------------------------------------------------------------
 * Schermata di accesso (login / registrazione / Google)
 * --------------------------------------------------------------- */

.ned-auth-gate {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 24px 20px;
	overflow-y: auto;
}

.ned-auth-intro {
	text-align: center;
	font-size: 0.9rem;
	opacity: 0.8;
	margin: 0;
}

.ned-auth-error {
	background: #fbe3e3;
	color: #8a2a2a;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 0.85rem;
	width: 100%;
	max-width: 300px;
	text-align: center;
}

.ned-auth-divider {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 300px;
	color: rgba(0,0,0,0.4);
	font-size: 0.8rem;
}
.ned-auth-divider::before, .ned-auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(0,0,0,0.15);
}
.ned-auth-divider span { padding: 0 10px; }

.ned-auth-tabs {
	display: flex;
	gap: 6px;
	background: #efe1ca;
	border-radius: 10px;
	padding: 4px;
}

.ned-auth-tab {
	border: none;
	background: transparent;
	padding: 6px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.85rem;
	color: var(--ned-text);
}
.ned-auth-tab.active { background: #fff; font-weight: 600; }

.ned-auth-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 300px;
}

.ned-auth-form label {
	font-size: 0.8rem;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ned-auth-form input {
	padding: 9px 12px;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.15);
	font-size: 0.9rem;
}

/* Smartphone: a tutto schermo, sidebar a scomparsa sopra il contenuto */
@media (max-width: 600px) {
	.ned-chat-app {
		max-width: 100%;
		/* Altezza fissa pari allo spazio davvero visibile (non 100vh, che su
		   mobile può essere più alto dello schermo quando la barra degli
		   indirizzi è mostrata): così l'intero riquadro, form di scrittura
		   incluso, resta sempre visibile senza dover scorrere la pagina. */
		height: 100vh;
		height: 100dvh;
		min-height: 100vh;
		min-height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		border-radius: 0;
	}
	.ned-sidebar {
		position: absolute;
		left: 0; top: 0; bottom: 0;
		z-index: 20;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
		box-shadow: 4px 0 16px rgba(0,0,0,0.15);
	}
	.ned-sidebar.ned-sidebar-open { transform: translateX(0); }
	.ned-sidebar-head { display: flex; }
	.ned-chat-user { display: none; }

	/* Velo semi-trasparente dietro al menu: toccarlo lo chiude, come ci si
	   aspetta su mobile, senza dover usare il tasto "indietro" del telefono
	   (che su un'app installata può chiudere l'intera app invece del menu). */
	.ned-sidebar-backdrop {
		display: none;
		position: absolute;
		inset: 0;
		z-index: 15;
		background: rgba(0,0,0,0.25);
	}
	.ned-sidebar-backdrop.ned-sidebar-backdrop-visible {
		display: block;
	}
}

@media (min-width: 601px) {
	.ned-sidebar-toggle { display: none; }
}

/* Desktop: card centrata con margini */
@media (min-width: 900px) {
	.ned-chat-app {
		max-width: 760px;
		min-height: 640px;
		margin: 40px auto;
	}
}