/**
 * Ringo Chatbot — widget visiteur.
 *
 * Le widget est posé sur le site d'un client : il doit avoir l'air soigné sans
 * imposer une identité. Une seule variable de marque, --ringo-chatbot-color,
 * pilotée par le réglage « Couleur » ; tout le reste est une échelle de gris
 * neutre.
 *
 * DÉFENSE CONTRE LE THÈME HÔTE — ne pas « nettoyer » ce qui suit.
 *
 * Chaque sélecteur est ancré sur #ringo-chatbot-root et chaque déclaration porte
 * !important. Ce n'est pas de la négligence : le widget s'injecte dans des thèmes
 * inconnus qui remettent à zéro button, textarea, svg, a, ul et p, parfois avec
 * leur propre !important. Les deux barrières ne font pas le même travail :
 *
 *   - !important bat une déclaration normale, quelle que soit sa spécificité ;
 *   - la spécificité départage quand les deux côtés sont !important, et un
 *     identifiant (100) l'emporte sur n'importe quel empilement de classes.
 *
 * L'une sans l'autre laisse passer un thème agressif.
 *
 * L'ancrage n'apparaît qu'UNE fois par sélecteur, en tête : les classes plus
 * profondes sont déjà dans le conteneur. Le dupliquer exigerait un conteneur
 * dans le conteneur et la règle ne s'appliquerait jamais.
 *
 * Les blocs @keyframes en sont exempts : la spécification y ignore !important.
 *
 * Une isolation définitive passerait par un shadow DOM, où aucune règle du thème
 * ne peut entrer. C'est la piste si un site résiste malgré tout.
 */

#ringo-chatbot-root {
	--ringo-chatbot-color: #2563eb;
	--rc-ink: #101828;
	--rc-ink-soft: #667085;
	--rc-line: #e4e7ec;
	--rc-surface: #fff;
	--rc-surface-alt: #f7f8fa;
	--rc-scrollbar: #d0d5dd;
	--rc-code-bg: rgba(16, 24, 40, 0.07);
	--rc-hover-bg: rgba(16, 24, 40, 0.06);
	--rc-radius: 16px;
	--rc-shadow: 0 16px 48px rgba(16, 24, 40, 0.18), 0 2px 8px rgba(16, 24, 40, 0.08);

	/* Palette dérivée de la marque. Ces trois valeurs sont des replis pour la
	 * couleur par défaut ; le bloc @supports plus bas les recalcule depuis
	 * --ringo-chatbot-color dès que color-mix() existe (tous les navigateurs
	 * depuis 2023). Une propriété personnalisée ne peut pas se replier seule :
	 * une valeur invalide la rend inutilisable, d'où le bloc conditionnel. */
	--rc-brand-deep: #1d4ed8;
	--rc-brand-tint: #eef3fd;
	--rc-brand-glow: rgba(37, 99, 235, 0.35);
	/* Marque utilisée comme couleur de TEXTE (puces, liens, pouce actif). En
	 * clair c'est la marque telle quelle ; en sombre elle est éclaircie, sinon
	 * une marque foncée — fréquente sur un site sombre — devient illisible. */
	--rc-accent: var(--ringo-chatbot-color);
	/* Liseré discret pour que lanceur et bouton d'envoi se détachent d'un fond
	 * de la même teinte que la marque. Invisible en clair. */
	--rc-ring: transparent;

	position: fixed !important;
	bottom: 20px !important;
	z-index: 99999 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--rc-ink) !important;
}

#ringo-chatbot-root *,
#ringo-chatbot-root *::before,
#ringo-chatbot-root *::after { box-sizing: border-box !important; }

@supports (color: color-mix(in srgb, red 50%, blue)) {
	#ringo-chatbot-root {
		--rc-brand-deep: color-mix(in srgb, var(--ringo-chatbot-color) 82%, #000);
		--rc-brand-tint: color-mix(in srgb, var(--ringo-chatbot-color) 8%, var(--rc-surface));
		--rc-brand-glow: color-mix(in srgb, var(--ringo-chatbot-color) 35%, transparent);
	}
}

/* Thème sombre. La classe est posée par le JS, jamais déduite ici : « auto »
 * lit le fond réel derrière le widget, ce que le CSS ne sait pas faire. Seuls
 * les jetons changent ; la bulle du visiteur reste sur la marque. */
#ringo-chatbot-root.ringo-chatbot--dark {
	--rc-ink: #f2f4f7;
	--rc-ink-soft: #98a2b3;
	--rc-line: #2b3441;
	--rc-surface: #161c26;
	--rc-surface-alt: #0f141b;
	--rc-scrollbar: #3a4453;
	--rc-code-bg: rgba(255, 255, 255, 0.1);
	--rc-hover-bg: rgba(255, 255, 255, 0.08);
	--rc-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
	--rc-accent: #dfe6f5;
	--rc-ring: rgba(255, 255, 255, 0.16);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	#ringo-chatbot-root.ringo-chatbot--dark {
		--rc-accent: color-mix(in srgb, var(--ringo-chatbot-color) 45%, #fff);
	}
}

/* -------------------------------------------------------------------------
 * Animations. Sans !important : la spécification l'ignore dans @keyframes.
 * Toutes neutralisées par le bloc prefers-reduced-motion en fin de fichier.
 * ---------------------------------------------------------------------- */
@keyframes ringo-chatbot-rise {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes ringo-chatbot-pop {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ringo-chatbot-fade-up {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes ringo-chatbot-blink {
	to { visibility: hidden; }
}

/* L'élément porte l'ID ringo-chatbot-root ET la classe de position : un
 * sélecteur « #ringo-chatbot-root--right » visait un identifiant qui n'existe
 * pas, et le widget réglé « à droite » s'affichait collé au bord gauche. */
#ringo-chatbot-root.ringo-chatbot--right { right: 20px !important; }
#ringo-chatbot-root.ringo-chatbot--left { left: 20px !important; }

/* -------------------------------------------------------------------------
 * Lanceur
 * ---------------------------------------------------------------------- */
#ringo-chatbot-root .ringo-chatbot__bubble {
	width: 56px !important;
	height: 56px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	background: linear-gradient(135deg, var(--ringo-chatbot-color), var(--rc-brand-deep)) !important;
	color: #fff !important;
	box-shadow: 0 0 0 1px var(--rc-ring), 0 8px 24px rgba(16, 24, 40, 0.18), 0 10px 28px -6px var(--rc-brand-glow) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, width 0.2s ease, padding 0.2s ease !important;
	animation: ringo-chatbot-rise 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) 0.6s both !important;
}
#ringo-chatbot-root .ringo-chatbot__bubble:hover {
	transform: translateY(-2px) scale(1.03) !important;
	box-shadow: 0 0 0 1px var(--rc-ring), 0 12px 28px rgba(16, 24, 40, 0.22), 0 14px 32px -6px var(--rc-brand-glow) !important;
}
#ringo-chatbot-root .ringo-chatbot__bubble:focus-visible {
	outline: 3px solid var(--ringo-chatbot-color) !important;
	outline-offset: 3px !important;
}
/* Pilule : icône + libellé, redevient ronde quand le panneau est ouvert. */
#ringo-chatbot-root .ringo-chatbot__bubble--labelled {
	width: auto !important;
	padding: 0 20px 0 16px !important;
}
#ringo-chatbot-root .ringo-chatbot__bubble-label {
	font: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.01em !important;
	white-space: nowrap !important;
	color: inherit !important;
}
#ringo-chatbot-root .ringo-chatbot__bubble-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
#ringo-chatbot-root .ringo-chatbot__bubble-icon svg { display: block !important; }
#ringo-chatbot-root .ringo-chatbot__bubble-icon--close { display: none !important; }
#ringo-chatbot-root .ringo-chatbot__bubble-icon--close svg { width: 22px !important; height: 22px !important; }
#ringo-chatbot-root.is-open .ringo-chatbot__bubble-icon--chat { display: none !important; }
#ringo-chatbot-root.is-open .ringo-chatbot__bubble-icon--close { display: flex !important; }
#ringo-chatbot-root.is-open .ringo-chatbot__bubble--labelled { width: 56px !important; padding: 0 !important; }
#ringo-chatbot-root.is-open .ringo-chatbot__bubble-label { display: none !important; }

/* -------------------------------------------------------------------------
 * Panneau
 * ---------------------------------------------------------------------- */
#ringo-chatbot-root .ringo-chatbot__panel {
	position: absolute !important;
	bottom: 74px !important;
	width: 380px !important;
	max-width: calc(100vw - 40px) !important;
	height: 560px !important;
	max-height: calc(100vh - 130px) !important;
	background: var(--rc-surface) !important;
	border-radius: var(--rc-radius) !important;
	box-shadow: var(--rc-shadow), 0 24px 56px -24px var(--rc-brand-glow) !important;
	display: none !important;
	flex-direction: column !important;
	overflow: hidden !important;
}
#ringo-chatbot-root.ringo-chatbot--right .ringo-chatbot__panel { right: 0 !important; transform-origin: 100% 100% !important; }
#ringo-chatbot-root.ringo-chatbot--left .ringo-chatbot__panel { left: 0 !important; transform-origin: 0 100% !important; }

/* Une transition sur display:none → flex ne joue jamais ; l'ouverture est une
 * animation, avec un léger dépassement pour l'effet ressort. */
#ringo-chatbot-root.is-open .ringo-chatbot__panel {
	display: flex !important;
	animation: ringo-chatbot-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15) both !important;
}

/* -------------------------------------------------------------------------
 * En-tête
 * ---------------------------------------------------------------------- */
#ringo-chatbot-root .ringo-chatbot__header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 14px 12px 14px 18px !important;
	background: linear-gradient(135deg, var(--ringo-chatbot-color), var(--rc-brand-deep)) !important;
	color: #fff !important;
}
#ringo-chatbot-root .ringo-chatbot__heading {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
}
#ringo-chatbot-root .ringo-chatbot__title {
	font-weight: 600 !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
#ringo-chatbot-root .ringo-chatbot__status {
	font-size: 12px !important;
	line-height: 1.4 !important;
	opacity: 0.8 !important;
}
#ringo-chatbot-root .ringo-chatbot__actions { display: flex !important; gap: 2px !important; flex: none !important; }
#ringo-chatbot-root .ringo-chatbot__action {
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: currentColor !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0.85 !important;
	transition: background-color 0.15s ease, opacity 0.15s ease !important;
}
#ringo-chatbot-root .ringo-chatbot__action:hover { background: rgba(255, 255, 255, 0.18) !important; opacity: 1 !important; }
#ringo-chatbot-root .ringo-chatbot__action:focus-visible { outline: 2px solid #fff !important; outline-offset: -2px !important; }

/* -------------------------------------------------------------------------
 * Fil de conversation
 * ---------------------------------------------------------------------- */
#ringo-chatbot-root .ringo-chatbot__log {
	flex: 1 !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	padding: 18px 16px 8px !important;
	background: var(--rc-surface-alt) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	scrollbar-width: thin !important;
	scrollbar-color: var(--rc-scrollbar) transparent !important;
}
#ringo-chatbot-root .ringo-chatbot__log::-webkit-scrollbar { width: 8px !important; }
#ringo-chatbot-root .ringo-chatbot__log::-webkit-scrollbar-thumb {
	background: var(--rc-scrollbar) !important;
	border-radius: 4px !important;
	border: 2px solid var(--rc-surface-alt) !important;
}

/* Colonne, pas ligne : la bulle et sa barre de notation s'empilent. En ligne,
   la notation se posait à côté de la bulle et disparaissait de la vue. */
#ringo-chatbot-root .ringo-chatbot__msg {
	display: flex !important;
	flex-direction: column !important;
	animation: ringo-chatbot-fade-up 0.22s ease both !important;
}
#ringo-chatbot-root .ringo-chatbot__sources,
#ringo-chatbot-root .ringo-chatbot__suggestions { animation: ringo-chatbot-fade-up 0.22s ease both !important; }
/* Conversation restaurée : rien ne bouge, tout est déjà là. */
#ringo-chatbot-root.is-restoring .ringo-chatbot__msg,
#ringo-chatbot-root.is-restoring .ringo-chatbot__sources { animation: none !important; }
/* Curseur pendant le streaming, posé par le JS sur la bulle en cours. */
#ringo-chatbot-root .ringo-chatbot__bubbletext.is-streaming::after {
	content: "\258D" !important;
	display: inline-block !important;
	margin-left: 2px !important;
	color: var(--rc-accent) !important;
	animation: ringo-chatbot-blink 1s steps(2, start) infinite !important;
}
#ringo-chatbot-root .ringo-chatbot__msg--user { align-items: flex-end !important; }
#ringo-chatbot-root .ringo-chatbot__msg--assistant { align-items: flex-start !important; }

#ringo-chatbot-root .ringo-chatbot__bubbletext {
	max-width: 86% !important;
	padding: 10px 14px !important;
	border-radius: 14px !important;
	font-size: 14.5px !important;
	line-height: 1.55 !important;
	word-wrap: break-word !important;
	overflow-wrap: anywhere !important;
}
#ringo-chatbot-root .ringo-chatbot__msg--assistant .ringo-chatbot__bubbletext {
	background: var(--rc-surface) !important;
	border: 1px solid var(--rc-line) !important;
	border-bottom-left-radius: 5px !important;
	color: var(--rc-ink) !important;
}
#ringo-chatbot-root .ringo-chatbot__msg--user .ringo-chatbot__bubbletext {
	background: var(--ringo-chatbot-color) !important;
	border-bottom-right-radius: 5px !important;
	color: #fff !important;
}

#ringo-chatbot-root .ringo-chatbot__bubbletext p:first-child { margin-top: 0 !important; }
#ringo-chatbot-root .ringo-chatbot__bubbletext p:last-child { margin-bottom: 0 !important; }
#ringo-chatbot-root .ringo-chatbot__bubbletext ul { margin: 6px 0 !important; padding-left: 20px !important; }
#ringo-chatbot-root .ringo-chatbot__bubbletext li { margin: 2px 0 !important; }
#ringo-chatbot-root .ringo-chatbot__bubbletext a { color: inherit !important; text-decoration: underline !important; }
#ringo-chatbot-root .ringo-chatbot__msg--assistant .ringo-chatbot__bubbletext a { color: var(--rc-accent) !important; }
#ringo-chatbot-root .ringo-chatbot__bubbletext code {
	padding: 1px 5px !important;
	border-radius: 5px !important;
	background: var(--rc-code-bg) !important;
	font-size: 0.9em !important;
}

/* Indicateur de saisie */
#ringo-chatbot-root .ringo-chatbot__dots { display: flex !important; gap: 4px !important; align-items: center !important; padding: 14px !important; }
#ringo-chatbot-root .ringo-chatbot__dots i {
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: var(--rc-ink-soft) !important;
	opacity: 0.4 !important;
	animation: ringo-chatbot-dot 1.2s infinite ease-in-out !important;
}
#ringo-chatbot-root .ringo-chatbot__dots i:nth-child(2) { animation-delay: 0.18s !important; }
#ringo-chatbot-root .ringo-chatbot__dots i:nth-child(3) { animation-delay: 0.36s !important; }
@keyframes ringo-chatbot-dot {
	0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
	30% { opacity: 0.9; transform: translateY(-3px); }
}

/* Sources */
#ringo-chatbot-root .ringo-chatbot__sources {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	padding-left: 2px !important;
}
#ringo-chatbot-root .ringo-chatbot__source {
	display: inline-block !important;
	max-width: 100% !important;
	padding: 4px 10px !important;
	border: 1px solid var(--rc-line) !important;
	border-radius: 999px !important;
	background: var(--rc-surface) !important;
	color: var(--rc-ink-soft) !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	transition: border-color 0.15s ease, color 0.15s ease !important;
}
#ringo-chatbot-root .ringo-chatbot__source:hover {
	border-color: var(--ringo-chatbot-color) !important;
	color: var(--ringo-chatbot-color) !important;
}

/* -------------------------------------------------------------------------
 * Questions suggérées
 * ---------------------------------------------------------------------- */
#ringo-chatbot-root .ringo-chatbot__suggestions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin-top: 2px !important;
}
#ringo-chatbot-root .ringo-chatbot__suggestions-label {
	width: 100% !important;
	margin-bottom: 2px !important;
	color: var(--rc-ink-soft) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
}
#ringo-chatbot-root .ringo-chatbot__chip {
	max-width: 100% !important;
	padding: 8px 14px !important;
	border: 1px solid var(--rc-line) !important;
	border-radius: 999px !important;
	background: var(--rc-surface) !important;
	color: var(--rc-accent) !important;
	font: inherit !important;
	font-size: 13.5px !important;
	line-height: 1.4 !important;
	text-align: left !important;
	cursor: pointer !important;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease !important;
}
#ringo-chatbot-root .ringo-chatbot__chip:hover {
	border-color: var(--rc-accent) !important;
	background: var(--rc-brand-tint) !important;
	transform: translateY(-1px) !important;
}
/* Les puces arrivent en escalier (le premier enfant est le libellé). */
#ringo-chatbot-root .ringo-chatbot__chip { animation: ringo-chatbot-fade-up 0.25s ease both !important; }
#ringo-chatbot-root .ringo-chatbot__chip:nth-child(2) { animation-delay: 0.05s !important; }
#ringo-chatbot-root .ringo-chatbot__chip:nth-child(3) { animation-delay: 0.1s !important; }
#ringo-chatbot-root .ringo-chatbot__chip:nth-child(4) { animation-delay: 0.15s !important; }
#ringo-chatbot-root .ringo-chatbot__chip:nth-child(5) { animation-delay: 0.2s !important; }
#ringo-chatbot-root .ringo-chatbot__chip:focus-visible {
	outline: 2px solid var(--ringo-chatbot-color) !important;
	outline-offset: 2px !important;
}

/* -------------------------------------------------------------------------
 * Saisie
 * ---------------------------------------------------------------------- */
#ringo-chatbot-root .ringo-chatbot__form {
	padding: 12px 14px 14px !important;
	background: var(--rc-surface) !important;
	border-top: 1px solid var(--rc-line) !important;
}
#ringo-chatbot-root .ringo-chatbot__field {
	display: flex !important;
	align-items: flex-end !important;
	gap: 6px !important;
	padding: 6px 6px 6px 14px !important;
	border: 1px solid var(--rc-line) !important;
	border-radius: 24px !important;
	background: var(--rc-surface-alt) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
#ringo-chatbot-root .ringo-chatbot__field:focus-within {
	border-color: var(--ringo-chatbot-color) !important;
	box-shadow: 0 0 0 3px var(--rc-brand-glow) !important;
	background: var(--rc-surface) !important;
}
#ringo-chatbot-root .ringo-chatbot__input {
	flex: 1 !important;
	min-height: 24px !important;
	max-height: 120px !important;
	padding: 6px 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--rc-ink) !important;
	font: inherit !important;
	font-size: 14.5px !important;
	line-height: 1.5 !important;
	resize: none !important;
	outline: none !important;
}
#ringo-chatbot-root .ringo-chatbot__input::placeholder { color: var(--rc-ink-soft) !important; }

#ringo-chatbot-root .ringo-chatbot__send {
	flex: none !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--ringo-chatbot-color) !important;
	color: #fff !important;
	box-shadow: 0 0 0 1px var(--rc-ring) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: opacity 0.15s ease, transform 0.15s ease !important;
}
#ringo-chatbot-root .ringo-chatbot__send:hover:not(:disabled) { transform: scale(1.06) !important; }
#ringo-chatbot-root .ringo-chatbot__send:active:not(:disabled) { transform: scale(0.94) !important; }
#ringo-chatbot-root .ringo-chatbot__send:disabled { opacity: 0.45 !important; cursor: default !important; }
#ringo-chatbot-root .ringo-chatbot__send:focus-visible { outline: 2px solid var(--ringo-chatbot-color) !important; outline-offset: 2px !important; }

/* -------------------------------------------------------------------------
 * Mobile : le panneau prend l'écran, un demi-panneau flottant y est illisible
 * ---------------------------------------------------------------------- */
@media (max-width: 520px) {
	#ringo-chatbot-root { bottom: 16px !important; }
	#ringo-chatbot-root.ringo-chatbot--right { right: 16px !important; }
	#ringo-chatbot-root.ringo-chatbot--left { left: 16px !important; }
	/* Le rond suffit sur mobile : la pilule mangerait la barre du pouce. */
	#ringo-chatbot-root .ringo-chatbot__bubble--labelled { width: 56px !important; padding: 0 !important; }
	#ringo-chatbot-root .ringo-chatbot__bubble-label { display: none !important; }

	#ringo-chatbot-root .ringo-chatbot__panel {
		position: fixed !important;
		inset: 0 !important;
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		max-height: none !important;
		border-radius: 0 !important;
	}
	#ringo-chatbot-root .ringo-chatbot__bubbletext { max-width: 92% !important; }
}

@media (prefers-reduced-motion: reduce) {
	#ringo-chatbot-root *,
	#ringo-chatbot-root *::before,
	#ringo-chatbot-root *::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* -------------------------------------------------------------------------
 * Notation d'une réponse
 * ---------------------------------------------------------------------- */
#ringo-chatbot-root .ringo-chatbot__rating {
	display: flex !important;
	gap: 2px !important;
	margin: 2px 0 0 2px !important;
}
#ringo-chatbot-root .ringo-chatbot__rate {
	width: 26px !important;
	height: 26px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var(--rc-ink-soft) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0.55 !important;
	transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease !important;
}
#ringo-chatbot-root .ringo-chatbot__rate:hover { opacity: 1 !important; background: var(--rc-hover-bg) !important; }
#ringo-chatbot-root .ringo-chatbot__rate.is-active {
	opacity: 1 !important;
	color: var(--rc-accent) !important;
	background: var(--rc-hover-bg) !important;
}
#ringo-chatbot-root .ringo-chatbot__rate:focus-visible {
	outline: 2px solid var(--ringo-chatbot-color) !important;
	outline-offset: 1px !important;
	opacity: 1 !important;
}