/* ----------------------------------------------------------------------------
   chat-widget.css
   Styles du widget de chat SOFOLK - fichier autonome, a charger une seule fois
   par page via <link rel="stylesheet" href=".../chat-widget.css">. Utilise
   conjointement avec chat-widget.js (qui injecte le HTML du widget) - voir ce
   fichier pour les commentaires d'integration.

   Palette alignee sur la charte www.renovation-du-cuir.fr (releve le
   05/08/2026 sur le site en production) :
   - #c39f68 (accent tan/dore, couleur des CTA du site, ex. "DIAGNOSTIC
     EN LIGNE") / #9e8867 en variante foncee (bordure/hover du meme CTA)
   - #444444 texte courant, #373737 gris fonce (boutons .btn du site)
   - police Arial/Helvetica (le site utilise Roboto/Raleway, mais tester avec
     ces polices sur une page ou elles ne sont pas chargees produit un rendu
     plus "epais" sur certains systemes, donnant une fausse impression de
     texte tout en gras - constate le 05/08/2026). Sur le site en production,
     ou Roboto/Raleway SONT chargees, ce risque ne s'applique pas - garder
     Arial/Helvetica reste toutefois un choix sur et neutre pour ce widget.
   ---------------------------------------------------------------------------- */
#sofolk-chat-bulle {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #c39f68;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,0.22);
	font-size: 26px;
	z-index: 9999;
	border: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#sofolk-chat-bulle:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
#sofolk-chat-bulle:active { transform: scale(0.96); }

#sofolk-chat-panneau {
	position: fixed;
	bottom: 90px;
	right: 20px;
	width: 370px;
	max-width: calc(100vw - 24px);
	height: 520px;
	max-height: calc(100vh - 120px);
	max-height: calc(100dvh - 120px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.22);
	display: none;
	flex-direction: column;
	overflow: hidden;
	z-index: 9999;
	font-family: Arial, Helvetica, sans-serif;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
#sofolk-chat-panneau.ouvert { display: flex; opacity: 1; transform: translateY(0); }

/* Plein ecran sous ~480px (mobile) - plus ergonomique qu'une petite
   fenetre flottante sur un petit smartphone. */
@media (max-width: 480px) {
	#sofolk-chat-panneau {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		max-height: 100dvh;
		border-radius: 0;
	}
	#sofolk-chat-bulle { bottom: 16px; right: 16px; }
	body.sofolk-chat-ouvert { overflow: hidden; }
}

#sofolk-chat-entete {
	background: #c39f68;
	color: #fff;
	padding: 16px 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
}
#sofolk-chat-entete strong {
	font-size: 15px;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0.3px;
}
#sofolk-chat-entete div { display: flex; gap: 6px; }
#sofolk-chat-entete button {
	background: rgba(255,255,255,0.2);
	border: none;
	color: #fff;
	font-size: 16px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
#sofolk-chat-entete button:hover { background: rgba(255,255,255,0.32); }

#sofolk-chat-messages {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 14px;
	background: #faf7f2;
}
.sofolk-msg {
	max-width: 85%;
	margin-bottom: 10px;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.sofolk-msg-user {
	background: #c39f68;
	color: #fff;
	margin-left: auto;
	border-bottom-right-radius: 4px;
}
.sofolk-msg-assistant {
	background: #fff;
	color: #444;
	border: 1px solid #ece3d4;
	margin-right: auto;
	border-bottom-left-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.sofolk-msg-erreur {
	background: #fdeceb;
	color: #a33;
	border: 1px solid #f3c6c2;
	margin-right: auto;
	border-radius: 14px;
}
#sofolk-chat-zone-saisie {
	display: flex;
	align-items: flex-end;
	border-top: 1px solid #ece3d4;
	padding: 10px;
	gap: 8px;
	flex-shrink: 0;
	background: #fff;
}
#sofolk-chat-saisie {
	flex: 1;
	border: 1px solid #ddd2c0;
	border-radius: 20px;
	padding: 10px 14px;
	font-size: 16px; /* >=16px : evite le zoom automatique au focus sur iOS */
	line-height: 1.3;
	resize: none;
	font-family: inherit;
	max-height: 96px;
	overflow-y: auto;
}
#sofolk-chat-saisie:focus { outline: none; border-color: #c39f68; }
#sofolk-chat-envoyer {
	background: #c39f68;
	color: #fff;
	border: none;
	border-radius: 20px;
	padding: 0 18px;
	height: 40px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
	transition: background 0.15s ease;
}
#sofolk-chat-envoyer:hover { background: #a8865a; }
#sofolk-chat-envoyer:disabled { opacity: 0.5; cursor: default; }
.sofolk-upload-bloc {
	max-width: 85%;
	margin-bottom: 10px;
	padding: 12px 14px;
	border-radius: 14px;
	font-size: 14px;
	background: #fff;
	border: 1px solid #ece3d4;
	margin-right: auto;
	border-bottom-left-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.sofolk-upload-titre {
	background: #c39f68;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 10px 14px;
	margin: -12px -14px 10px -14px;
	border-radius: 14px 14px 0 0;
}
.sofolk-upload-bloc input[type="file"] {
	display: block;
	width: 100%;
	font-size: 13px;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #f0ebe1;
}
.sofolk-upload-bloc input[type="file"]:last-of-type {
	border-bottom: none;
	margin-bottom: 10px;
}
.sofolk-upload-actions {
	display: flex;
	gap: 8px;
}
.sofolk-upload-actions button {
	border: none;
	border-radius: 20px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.sofolk-upload-envoyer {
	background: #c39f68;
	color: #fff;
}
.sofolk-upload-envoyer:hover { background: #a8865a; }
.sofolk-upload-annuler {
	background: #f4efe6;
	color: #8a6d40;
}
.sofolk-upload-actions button:disabled { opacity: 0.5; cursor: default; }
.sofolk-upload-statut {
	margin-top: 8px;
	font-size: 12px;
	color: #a33;
}
.sofolk-menu-bloc {
	max-width: 92%;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sofolk-menu-option {
	background: #fff;
	color: #8a6d40;
	border: 1px solid #c39f68;
	border-radius: 16px;
	padding: 9px 14px;
	font-size: 13px;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.sofolk-menu-option:hover { background: #c39f68; color: #fff; }
.sofolk-menu-option:disabled { opacity: 0.5; cursor: default; }
.sofolk-typing {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 0;
}
.sofolk-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c39f68;
	animation: sofolk-typing-bounce 1.2s infinite ease-in-out;
}
.sofolk-typing span:nth-child(2) { animation-delay: 0.2s; }
.sofolk-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sofolk-typing-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
	30% { transform: translateY(-5px); opacity: 1; }
}