/**
 * INDYKA — Chatbot widget styles.
 * Palette : vert #4A1225 · or #E39A1C · ivoire #FAF8F2 · anthracite #1F1D1A.
 * Position : fixed bottom-right, z-index élevé pour passer au-dessus de tout.
 */

/* ════════ BOUTON FLOTTANT ════════ */
/* ════════════════════════════════════════════════════════════════════
   BOUTON FLOTTANT — Logo Indyka vivant
   Animations :
     - Idle : respiration douce (bobbing vertical + scale subtil)
     - Halo : pulse doré derrière le logo
     - Hover : grossit + s'élève + halo plus intense
     - Click/active : compression douce
     - Open : logo rétrécit en spin, croix de fermeture apparaît
     - Onload : entrée fluide depuis le bas
   ════════════════════════════════════════════════════════════════════ */
.indyka-bot__fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 68px;
	height: 68px;
	border-radius: 0;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	animation: indyka-bot-onload 700ms cubic-bezier(.22,.61,.36,1) both;
}
.indyka-bot__fab:hover .indyka-bot__fab-icon {
	transform: translateY( -4px ) scale( 1.10 ) rotate( -3deg );
	filter: drop-shadow( 0 12px 22px rgba( 0, 0, 0, 0.35 ) ) brightness( 1.05 );
}
.indyka-bot__fab:hover .indyka-bot__fab-pulse {
	animation-duration: 1.5s;
	transform: scale( 1.4 );
	opacity: 1;
}
.indyka-bot__fab:active .indyka-bot__fab-icon {
	transform: scale( 0.92 );
	transition-duration: 100ms;
}
.indyka-bot__fab:focus-visible {
	outline: 2px dashed #E39A1C;
	outline-offset: 6px;
	border-radius: 8px;
}

.indyka-bot__fab-icon {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 220ms ease, transform 380ms cubic-bezier(.22,.61,.36,1), filter 380ms ease;
	filter: drop-shadow( 0 6px 14px rgba( 0, 0, 0, 0.25 ) );
	animation: indyka-bot-breathe 4.5s ease-in-out infinite;
	transform-origin: 50% 60%;
}

.indyka-bot__fab-close {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 38px;
	line-height: 1;
	color: #4A1225;
	background: #FAF8F2;
	border-radius: 50%;
	border: 2px solid #E39A1C;
	opacity: 0;
	transform: scale( 0.5 ) rotate( -180deg );
	transition: opacity 220ms ease, transform 380ms cubic-bezier(.22,.61,.36,1);
	box-shadow: 0 6px 14px rgba( 0, 0, 0, 0.18 );
}
.indyka-bot__fab.is-open .indyka-bot__fab-icon {
	opacity: 0;
	transform: scale( 0.5 ) rotate( 180deg );
	animation: none;
}
.indyka-bot__fab.is-open .indyka-bot__fab-close {
	opacity: 1;
	transform: scale( 1 ) rotate( 0 );
}

/* Halo doré qui pulse derrière le logo */
.indyka-bot__fab-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient( circle at center, rgba( 184, 148, 90, 0.32 ) 0%, rgba( 184, 148, 90, 0.15 ) 35%, transparent 70% );
	animation: indyka-bot-pulse 2.6s ease-in-out infinite;
	pointer-events: none;
	z-index: -1;
	transition: transform 220ms ease, opacity 220ms ease, animation-duration 220ms ease;
}
.indyka-bot__fab.is-open .indyka-bot__fab-pulse { display: none; }

/* Petit pulse rougeoyant secondaire (effet braise) */
.indyka-bot__fab-pulse::after {
	content: "";
	position: absolute;
	inset: 18%;
	border-radius: 50%;
	background: radial-gradient( circle at 50% 60%, rgba( 216, 90, 48, 0.35 ) 0%, transparent 60% );
	animation: indyka-bot-glow 3.2s ease-in-out infinite;
	animation-delay: 0.6s;
}

@keyframes indyka-bot-pulse {
	0%, 100% { transform: scale( 0.75 ); opacity: 0.55; }
	50%      { transform: scale( 1.45 ); opacity: 1.00; }
}
@keyframes indyka-bot-glow {
	0%, 100% { transform: scale( 0.85 ); opacity: 0.45; }
	50%      { transform: scale( 1.25 ); opacity: 0.95; }
}
@keyframes indyka-bot-breathe {
	0%, 100% { transform: translateY( 0    ) scale( 1.00 ) rotate( 0deg ); }
	20%      { transform: translateY( -5px ) scale( 1.06 ) rotate( 2deg ); }
	50%      { transform: translateY( 2px  ) scale( 0.96 ) rotate( -2deg ); }
	75%      { transform: translateY( -2px ) scale( 1.03 ) rotate( 1deg ); }
}
@keyframes indyka-bot-onload {
	0%   { opacity: 0; transform: translateY( 80px ) scale( 0.2 ) rotate( -30deg ); }
	40%  { opacity: 1; transform: translateY( -20px ) scale( 1.25 ) rotate( 10deg ); }
	60%  { opacity: 1; transform: translateY( 6px ) scale( 0.92 ) rotate( -6deg ); }
	80%  { opacity: 1; transform: translateY( -3px ) scale( 1.06 ) rotate( 3deg ); }
	100% { opacity: 1; transform: translateY( 0   ) scale( 1.00 ) rotate( 0 ); }
}

/* Mini-bounce périodique pour rappeler la présence (toutes les 8 secondes) */
@keyframes indyka-bot-tap-tap {
	0%, 88%, 100% { transform: translateY( 0 ) rotate( 0 ); }
	90%           { transform: translateY( -10px ) rotate( -4deg ); }
	93%           { transform: translateY( 0 ) rotate( 2deg ); }
	96%           { transform: translateY( -6px ) rotate( -2deg ); }
	99%           { transform: translateY( 0 ) rotate( 0 ); }
}

/* Wake-up : déclenché par JS si l'utilisateur n'a pas ouvert le chatbot après 45s */
.indyka-bot__fab.is-wake .indyka-bot__fab-icon {
	animation: indyka-bot-wakeup 2.2s cubic-bezier(.36,.07,.19,.97);
}
@keyframes indyka-bot-wakeup {
	0%, 100% { transform: translateY( 0 ) rotate( 0deg ) scale( 1 ); }
	8%       { transform: translateY( -8px ) rotate( -8deg ) scale( 1.08 ); }
	18%      { transform: translateY( -4px ) rotate( 8deg ) scale( 1.05 ); }
	28%      { transform: translateY( -6px ) rotate( -5deg ) scale( 1.06 ); }
	40%      { transform: translateY( -3px ) rotate( 4deg ) scale( 1.04 ); }
	60%      { transform: translateY( -1px ) rotate( -1deg ) scale( 1.02 ); }
}

/* Respect des préférences accessibilité : pas d'animation si l'utilisateur préfère */
@media ( prefers-reduced-motion: reduce ) {
	.indyka-bot__fab,
	.indyka-bot__fab-icon,
	.indyka-bot__fab-pulse,
	.indyka-bot__fab-pulse::after {
		animation: none !important;
	}
}

/* ════════ TOOLTIP ════════ */
.indyka-bot__tooltip {
	position: fixed;
	right: 96px;
	bottom: 32px;
	max-width: 240px;
	padding: 12px 16px;
	background: #4A1225;
	color: #F4EFE2;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	border-radius: 12px 12px 4px 12px;
	border: 1.5px solid #E39A1C;
	box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.30 );
	opacity: 0;
	transform: translateX( 20px ) scale( 0.9 );
	transition: opacity 320ms cubic-bezier(.22,.61,.36,1), transform 320ms cubic-bezier(.22,.61,.36,1);
	pointer-events: none;
	z-index: 9997;
}
.indyka-bot__tooltip.is-visible {
	opacity: 1;
	transform: translateX( 0 ) scale( 1 );
	animation: indyka-bot-tooltip-bounce 0.6s cubic-bezier(.22,.61,.36,1) 0.1s;
}
.indyka-bot__tooltip::after {
	content: "";
	position: absolute;
	bottom: 12px;
	right: -8px;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid #4A1225;
}
.indyka-bot__tooltip::before {
	content: "";
	position: absolute;
	bottom: 12px;
	right: -10px;
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 9px solid #E39A1C;
}
@keyframes indyka-bot-tooltip-bounce {
	0%   { transform: translateX( 0 ) scale( 1 ); }
	30%  { transform: translateX( -8px ) scale( 1.06 ); }
	60%  { transform: translateX( 3px ) scale( 0.98 ); }
	100% { transform: translateX( 0 ) scale( 1 ); }
}

/* ════════ MODALE ════════ */
.indyka-bot__modal {
	position: fixed;
	right: 20px;
	bottom: 96px;
	width: 380px;
	max-width: calc( 100vw - 24px );
	height: 600px;
	max-height: calc( 100vh - 120px );
	background: #FAF8F2;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.25 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 9999;
	opacity: 0;
	transform: translateY( 18px ) scale( 0.96 );
	pointer-events: none;
	transition: opacity 220ms ease, transform 220ms ease;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.indyka-bot__modal.is-open {
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
	pointer-events: auto;
}

@media ( max-width: 460px ) {
	.indyka-bot__modal {
		right: 12px;
		left: 12px;
		bottom: 88px;
		width: auto;
		max-width: none;
	}
}

/* ════════ HEADER ════════ */
.indyka-bot__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: #4A1225;
	color: #F4EFE2;
	flex-shrink: 0;
}
.indyka-bot__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #FAF8F2;
	border: 1.5px solid #E39A1C;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.indyka-bot__avatar img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	display: block;
}
.indyka-bot__header-text { flex: 1; min-width: 0; }
.indyka-bot__name {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 18px;
	font-weight: 500;
	margin: 0 0 2px;
	color: #F4EFE2;
}
.indyka-bot__status {
	font-size: 11px;
	margin: 0;
	color: #d8d3c2;
	display: flex;
	align-items: center;
	gap: 5px;
}
.indyka-bot__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #5ABF77;
	box-shadow: 0 0 0 2px rgba( 90, 191, 119, 0.3 );
	animation: indyka-bot-blink 2s ease-in-out infinite;
}
@keyframes indyka-bot-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}
.indyka-bot__close {
	background: transparent;
	border: 0;
	color: #F4EFE2;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	opacity: 0.8;
	transition: opacity 150ms ease;
}
.indyka-bot__close:hover { opacity: 1; }

/* ════════ TABS ════════ */
.indyka-bot__tabs {
	display: flex;
	background: #fff;
	border-bottom: 1px solid #e8dfc9;
	flex-shrink: 0;
}
.indyka-bot__tab {
	flex: 1;
	background: transparent;
	border: 0;
	padding: 12px 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: #6a6a6a;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-bottom: 2px solid transparent;
	transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.indyka-bot__tab:hover { background: #FAF8F2; }
.indyka-bot__tab.is-active {
	color: #4A1225;
	border-bottom-color: #E39A1C;
}

/* ════════ PANELS ════════ */
.indyka-bot__panel {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: none;
	flex-direction: column;
}
.indyka-bot__panel.is-active { display: flex; }

/* Messages */
.indyka-bot__msg {
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0 0 10px;
	max-width: 85%;
	word-wrap: break-word;
}
.indyka-bot__msg--bot {
	background: #fff;
	border: 1px solid #e8dfc9;
	color: #1F1D1A;
	border-top-left-radius: 4px;
	align-self: flex-start;
}
.indyka-bot__msg--user {
	background: #4A1225;
	color: #F4EFE2;
	border-top-right-radius: 4px;
	margin-left: auto;
	align-self: flex-end;
}
.indyka-bot__msg--small {
	font-size: 12px;
	color: #6a6a6a;
	font-style: italic;
}

/* ════════ QUIZ ════════ */
.indyka-bot__finder-intro,
.indyka-bot__finder-question,
.indyka-bot__finder-result {
	display: flex;
	flex-direction: column;
}
.indyka-bot__progress {
	height: 4px;
	background: #e8dfc9;
	border-radius: 999px;
	margin: 0 0 14px;
	overflow: hidden;
}
.indyka-bot__progress-bar {
	display: block;
	height: 100%;
	background: #E39A1C;
	transition: width 280ms ease;
}
.indyka-bot__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px 0 12px;
}
.indyka-bot__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #e8dfc9;
	border-radius: 12px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	color: #1F1D1A;
	text-align: left;
	transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.indyka-bot__option:hover {
	border-color: #E39A1C;
	background: #FFFCF5;
	transform: translateX( 2px );
}
.indyka-bot__option-emoji { font-size: 18px; }
.indyka-bot__option-label { flex: 1; }

.indyka-bot__back-mini {
	background: transparent;
	border: 0;
	color: #6a6a6a;
	font-size: 12px;
	cursor: pointer;
	padding: 4px 0;
	align-self: flex-start;
	margin-top: auto;
}
.indyka-bot__back-mini:hover { color: #4A1225; }

/* CTA Quiz */
.indyka-bot__btn {
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	align-self: flex-start;
	transition: background 180ms ease, transform 180ms ease;
}
.indyka-bot__btn--primary {
	background: #4A1225;
	color: #F4EFE2;
}
.indyka-bot__btn--primary:hover {
	background: #E39A1C;
	transform: translateY( -1px );
}
.indyka-bot__btn--ghost {
	background: transparent;
	border: 1px solid #E39A1C;
	color: #4A1225;
	margin-top: 8px;
}
.indyka-bot__btn--ghost:hover { background: #FFFCF5; }

/* Résultats produits */
.indyka-bot__products {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 8px 0 12px;
}
.indyka-bot__product {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	background: #fff;
	border: 1px solid #e8dfc9;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.indyka-bot__product:hover {
	border-color: #E39A1C;
	transform: translateY( -1px );
	box-shadow: 0 6px 16px rgba( 27, 58, 45, 0.08 );
}
.indyka-bot__product-img {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
	background: #F4EFE2;
	flex-shrink: 0;
}
.indyka-bot__product-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.indyka-bot__product-body {
	flex: 1;
	min-width: 0;
}
.indyka-bot__product-name {
	display: block;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 18px;
	color: #1F1D1A;
	line-height: 1.15;
	margin-bottom: 2px;
}
.indyka-bot__product-sub {
	display: block;
	font-size: 11px;
	color: #6a6a6a;
	letter-spacing: 0.04em;
}
.indyka-bot__product-reason {
	display: block;
	font-size: 11.5px;
	color: #E39A1C;
	margin-top: 3px;
	font-style: italic;
}
.indyka-bot__product-cta {
	font-size: 18px;
	color: #E39A1C;
	font-weight: 700;
}

/* Loading */
.indyka-bot__loading {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #6a6a6a;
	padding: 20px 0;
}
.indyka-bot__spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid #e8dfc9;
	border-top-color: #E39A1C;
	border-radius: 50%;
	animation: indyka-bot-spin 0.8s linear infinite;
}
@keyframes indyka-bot-spin {
	to { transform: rotate( 360deg ); }
}

/* ════════ CHAT ════════ */
.indyka-bot__chat {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	padding-bottom: 8px;
}
.indyka-bot__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 12px;
}
.indyka-bot__quick-btn {
	background: #fff;
	border: 1px solid #e8dfc9;
	border-radius: 999px;
	padding: 7px 12px;
	font-family: inherit;
	font-size: 12px;
	color: #4A1225;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.indyka-bot__quick-btn:hover {
	background: #4A1225;
	color: #F4EFE2;
	border-color: #4A1225;
	transform: translateY( -1px );
}

.indyka-bot__form {
	display: flex;
	gap: 6px;
	padding-top: 8px;
	border-top: 1px solid #e8dfc9;
	margin-top: auto;
}
.indyka-bot__input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid #e8dfc9;
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	color: #1F1D1A;
}
.indyka-bot__input:disabled {
	background: #FAF8F2;
	color: #999;
	cursor: not-allowed;
}
.indyka-bot__input:focus {
	outline: none;
	border-color: #E39A1C;
}
.indyka-bot__send {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #4A1225;
	color: #F4EFE2;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 180ms ease;
}
.indyka-bot__send:disabled { background: #c8c0a8; cursor: not-allowed; }
.indyka-bot__send:not(:disabled):hover { background: #E39A1C; }

/* ════════ FOOTER WHATSAPP ════════ */
.indyka-bot__footer {
	border-top: 1px solid #e8dfc9;
	background: #FAF8F2;
	padding: 10px 16px;
	flex-shrink: 0;
}
.indyka-bot__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	background: #25D366;
	color: #fff;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background 180ms ease, transform 180ms ease;
}
.indyka-bot__wa:hover {
	background: #1DA851;
	transform: translateY( -1px );
}

/* ════════ TYPING INDICATOR (V2 — IA Claude) ════════ */
.indyka-bot__msg--typing {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 1px solid #e8dfc9;
	color: #6a6a6a;
	font-size: 12.5px;
	padding: 10px 14px;
	border-radius: 14px;
	border-top-left-radius: 4px;
	align-self: flex-start;
	max-width: 70%;
	margin: 0 0 10px;
}
.indyka-bot__typing-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #E39A1C;
	animation: indyka-bot-typing-bounce 1.2s ease-in-out infinite;
}
.indyka-bot__typing-dot:nth-child(2) { animation-delay: 0.15s; }
.indyka-bot__typing-dot:nth-child(3) { animation-delay: 0.30s; }
.indyka-bot__typing-label {
	margin-left: 6px;
	font-style: italic;
	font-size: 12px;
	color: #888;
}
@keyframes indyka-bot-typing-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
	30%           { transform: translateY(-4px); opacity: 1; }
}

/* Input disabled pendant que Claude répond */
.indyka-bot__input:disabled {
	background: #FAF8F2 !important;
	color: #999 !important;
	cursor: wait !important;
}

/* Cache si écran ultra-petit (< 320px) — au cas où */
@media ( max-width: 319px ) {
	.indyka-bot__fab,
	.indyka-bot__modal,
	.indyka-bot__tooltip { display: none !important; }
}