/* RTB Assistant — widget de chat. Utilise les tokens du thème (clair & sombre). */

.rtb-bot { position: fixed; right: 20px; bottom: 20px; z-index: 9999; font-family: var( --font-body, system-ui, sans-serif ); }

/* Bouton flottant */
.rtb-bot-toggle {
	width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
	background: var( --rtb-red, #E70C2F ); color: #fff; font-size: 24px;
	box-shadow: 0 10px 30px rgba( 231, 12, 47, .42 );
	display: flex; align-items: center; justify-content: center;
	transition: transform .18s ease, box-shadow .18s ease;
}
.rtb-bot-toggle:hover { transform: translateY( -2px ) scale( 1.04 ); }
/* Spécificité renforcée (.rtb-bot-toggle …) pour battre le « display:inline-block » de Font Awesome */
.rtb-bot-toggle .rtb-bot-toggle-open { display: inline-block; }
.rtb-bot-toggle .rtb-bot-toggle-close { display: none; }
.rtb-bot[data-open="true"] .rtb-bot-toggle .rtb-bot-toggle-open { display: none; }
.rtb-bot[data-open="true"] .rtb-bot-toggle .rtb-bot-toggle-close { display: inline-block; }

/* Panneau */
.rtb-bot-panel {
	position: absolute; right: 0; bottom: 74px; width: 380px; max-width: calc( 100vw - 32px );
	height: 560px; max-height: calc( 100vh - 120px );
	background: var( --surface, #fff ); border: 1px solid var( --border, rgba(0,0,0,.12) );
	border-radius: 18px; box-shadow: 0 28px 70px rgba( 0, 0, 0, .28 );
	display: flex; flex-direction: column; overflow: hidden;
	opacity: 0; transform: translateY( 14px ) scale( .98 ); pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.rtb-bot[data-open="true"] .rtb-bot-panel { opacity: 1; transform: none; pointer-events: auto; }

/* En-tête */
.rtb-bot-header {
	display: flex; align-items: center; gap: 11px; padding: 14px 16px; color: #fff;
	background: linear-gradient( 120deg, #E70C2F, #b00a25 );
}
.rtb-bot-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.rtb-bot-head-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.rtb-bot-head-txt strong { font-size: 15px; }
.rtb-bot-head-txt small { font-size: 11.5px; opacity: .85; }
.rtb-bot-expand { color: #fff; font-size: 15px; opacity: .85; margin-right: 2px; }
.rtb-bot-expand:hover { opacity: 1; }
.rtb-bot-clear { background: none; border: 0; color: #fff; font-size: 14px; opacity: .85; cursor: pointer; margin-right: 2px; }
.rtb-bot-clear:hover { opacity: 1; }
.rtb-bot-min { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; opacity: .85; }
.rtb-bot-min:hover { opacity: 1; }

/* Journal des messages */
.rtb-bot-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var( --bg, #F7F4ED ); }
.rtb-bot-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.rtb-bot-msg--user { justify-content: flex-end; }
.rtb-bot-ava { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var( --rtb-red, #E70C2F ); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.rtb-bot-bubble {
	background: var( --surface, #fff ); border: 1px solid var( --border, rgba(0,0,0,.08) );
	border-radius: 14px; padding: 10px 13px; font-size: 14.5px; line-height: 1.55;
	color: var( --text, #161310 ); max-width: 84%;
}
.rtb-bot-msg--user .rtb-bot-bubble { background: var( --rtb-red, #E70C2F ); color: #fff; border-color: transparent; border-bottom-right-radius: 4px; }
.rtb-bot-msg--bot .rtb-bot-bubble { border-bottom-left-radius: 4px; }
.rtb-bot-bubble p { margin: 0 0 8px; }
.rtb-bot-bubble p:last-child { margin-bottom: 0; }
.rtb-bot-h { margin: 0 0 6px; font-family: var( --font-head, sans-serif ); font-size: 15px; font-weight: 800; color: var( --text, #161310 ); }
.rtb-bot-ul { margin: 4px 0 0; padding-left: 18px; }
.rtb-bot-ul li { margin: 3px 0; }

/* Cartes (articles & émissions) — rangée HORIZONTALE scrollable */
.rtb-bot-cards { display: flex; gap: 10px; margin-top: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.rtb-bot-cards::-webkit-scrollbar { height: 6px; }
.rtb-bot-cards::-webkit-scrollbar-thumb { background: var( --border, rgba(0,0,0,.18) ); border-radius: 999px; }
.rtb-bot-card { flex: 0 0 196px; width: 196px; display: flex; flex-direction: column; background: var( --surface-2, #F4F1EA ); border: 1px solid var( --border, rgba(0,0,0,.08) ); border-radius: 12px; overflow: hidden; scroll-snap-align: start; transition: transform .12s, border-color .12s; cursor: pointer; font-family: inherit; text-align: left; padding: 0; }
.rtb-bot-card:hover { transform: translateY( -2px ); border-color: var( --rtb-red, #E70C2F ); }
.rtb-bot-card-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var( --surface, #eee ) center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var( --text-soft, #8A8175 ); font-size: 22px; }
.rtb-bot-card-play { position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); width: 40px; height: 40px; border-radius: 50%; background: rgba( 231, 12, 47, .94 ); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 12px rgba( 0, 0, 0, .4 ); }
.rtb-bot-card-play i { margin-left: 3px; }
.rtb-bot-card--video:hover .rtb-bot-card-play { transform: translate( -50%, -50% ) scale( 1.1 ); }
.rtb-bot-card-body { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px 11px; min-width: 0; }
.rtb-bot-card-kind { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var( --rtb-red, #E70C2F ); }
.rtb-bot-card-kind--emission { color: var( --rtb-green, #10A653 ); }
.rtb-bot-card-title { font-family: var( --font-head, sans-serif ); font-weight: 700; font-size: 13.5px; line-height: 1.32; color: var( --text, #161310 ); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rtb-bot-card-meta { font-size: 11.5px; color: var( --text-muted, #5E574C ); }

/* Lecteur vidéo intégré (sous la rangée, plein largeur) */
.rtb-bot-embed { margin-top: 8px; }
.rtb-bot-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; display: block; background: #000; }
.rtb-bot-embed-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12.5px; font-weight: 700; color: var( --rtb-red, #E70C2F ); }

/* Boutons d'action + chips suggérés */
.rtb-bot-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.rtb-bot-btn { display: inline-flex; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var( --rtb-red, #E70C2F ); color: #fff; }
.rtb-bot-btn:hover { filter: brightness( 1.08 ); }
.rtb-bot-suggest { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.rtb-bot-chip { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; background: transparent; color: var( --text, #161310 ); border: 1px solid var( --border, rgba(0,0,0,.16) ); transition: all .14s; font-family: inherit; }
.rtb-bot-chip:hover { background: var( --rtb-red, #E70C2F ); color: #fff; border-color: transparent; }

/* Saisie */
.rtb-bot-form { display: flex; gap: 8px; padding: 11px; border-top: 1px solid var( --border, rgba(0,0,0,.1) ); background: var( --surface, #fff ); }
.rtb-bot-form input { flex: 1; border: 1px solid var( --border, rgba(0,0,0,.16) ); border-radius: 999px; padding: 11px 15px; font-size: 14px; font-family: inherit; background: var( --bg, #F7F4ED ); color: var( --text, #161310 ); outline: none; }
.rtb-bot-form input:focus { border-color: var( --rtb-red, #E70C2F ); }
.rtb-bot-form button { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var( --rtb-red, #E70C2F ); color: #fff; cursor: pointer; font-size: 15px; }
.rtb-bot-form button:hover { filter: brightness( 1.08 ); }

/* Indicateur de frappe */
.rtb-bot-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.rtb-bot-dots i { width: 7px; height: 7px; border-radius: 50%; background: var( --text-soft, #8A8175 ); display: inline-block; animation: rtb-bot-bounce 1.2s infinite; }
.rtb-bot-dots i:nth-child( 2 ) { animation-delay: .15s; }
.rtb-bot-dots i:nth-child( 3 ) { animation-delay: .3s; }
@keyframes rtb-bot-bounce { 0%, 60%, 100% { transform: translateY( 0 ); opacity: .5; } 30% { transform: translateY( -4px ); opacity: 1; } }
@media ( prefers-reduced-motion: reduce ) { .rtb-bot-dots i { animation: none; } }

@media ( max-width: 480px ) {
	.rtb-bot { right: 14px; bottom: 14px; }
	.rtb-bot-panel { width: calc( 100vw - 28px ); height: calc( 100vh - 100px ); }
}

/* ============================================================
   Page dédiée /assistant (UI plein écran + sidebar conseils)
   ============================================================ */
.rtb-assist-page { padding: 24px 0 56px; background: var( --bg, #F7F4ED ); }
.rtb-assist-layout { display: grid; grid-template-columns: minmax( 0, 1fr ) 320px; gap: 22px; align-items: stretch; }

/* Colonne chat */
.rtb-assist {
	position: relative;
	display: flex; flex-direction: column;
	height: calc( 100vh - 230px ); min-height: 480px;
	background: var( --surface, #fff );
	border-radius: 18px; overflow: hidden;
}
.rtb-assist-clear { position: absolute; top: 10px; right: 10px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var( --border, rgba(0,0,0,.12) ); background: var( --surface, #fff ); color: var( --text-muted, #5E574C ); cursor: pointer; font-size: 13px; transition: color .15s, border-color .15s; }
.rtb-assist-clear:hover { color: var( --rtb-red, #E70C2F ); border-color: var( --rtb-red, #E70C2F ); }
.rtb-assist-log { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; background: var( --bg, #F7F4ED ); }
.rtb-assist-form { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var( --border, rgba(0,0,0,.1) ); background: var( --surface, #fff ); }
.rtb-assist-form .rtb-bot-input { flex: 1; border: 1px solid var( --border, rgba(0,0,0,.16) ); border-radius: 999px; padding: 13px 18px; font-size: 15px; font-family: inherit; background: var( --bg, #F7F4ED ); color: var( --text, #161310 ); outline: none; }
.rtb-assist-form .rtb-bot-input:focus { border-color: var( --rtb-red, #E70C2F ); }
.rtb-assist-form button { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var( --rtb-red, #E70C2F ); color: #fff; cursor: pointer; font-size: 16px; }
.rtb-assist-form button:hover { filter: brightness( 1.08 ); }
.rtb-assist .rtb-bot-bubble { max-width: 88%; font-size: 15px; }

/* État initial (intro centrée + prompts) */
.rtb-assist-intro { margin: auto; text-align: center; max-width: 560px; padding: 16px 4px; }
.rtb-assist-mark { display: inline-flex; width: 66px; height: 66px; border-radius: 50%; align-items: center; justify-content: center; font-size: 27px; color: #fff; background: linear-gradient( 135deg, #E70C2F, #b00a25 ); box-shadow: 0 12px 28px rgba( 231, 12, 47, .35 ); }
.rtb-assist-intro h1 { font-family: var( --font-head, sans-serif ); font-size: 26px; font-weight: 800; margin: 16px 0 8px; color: var( --text, #161310 ); }
.rtb-assist-intro p { color: var( --text-muted, #5E574C ); font-size: 14.5px; line-height: 1.6; margin: 0 auto 22px; }
.rtb-assist-prompts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.rtb-assist-prompt { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 12px; border: 1px solid var( --border, rgba(0,0,0,.12) ); background: var( --surface, #fff ); color: var( --text, #161310 ); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s; }
.rtb-assist-prompt:hover { border-color: var( --rtb-red, #E70C2F ); transform: translateY( -2px ); box-shadow: 0 8px 20px rgba( 0, 0, 0, .08 ); }
.rtb-assist-prompt i { color: var( --rtb-red, #E70C2F ); font-size: 15px; flex: 0 0 auto; }

/* Sidebar conseils */
.rtb-assist-side { display: flex; flex-direction: column; gap: 16px; }
.rtb-assist-side-card { background: var( --surface, #fff ); border: 1px solid var( --border, rgba(0,0,0,.12) ); border-radius: 16px; padding: 18px; }
.rtb-assist-side-h { display: flex; align-items: center; gap: 8px; font-family: var( --font-head, sans-serif ); font-size: 15px; font-weight: 800; margin: 0 0 14px; color: var( --text, #161310 ); }
.rtb-assist-side-h i { color: var( --rtb-red, #E70C2F ); }
.rtb-assist-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rtb-assist-tips li { display: flex; gap: 11px; font-size: 12.5px; line-height: 1.5; color: var( --text-muted, #5E574C ); }
.rtb-assist-tips strong { color: var( --text, #161310 ); font-size: 13px; }
.rtb-assist-tip-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var( --surface-2, #F4F1EA ); color: var( --rtb-red, #E70C2F ); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.rtb-assist-can { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rtb-assist-can li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var( --text, #161310 ); }
.rtb-assist-can li i { color: var( --rtb-green, #10A653 ); width: 18px; text-align: center; }

@media ( max-width: 980px ) {
	.rtb-assist-layout { grid-template-columns: 1fr; }
	.rtb-assist { height: calc( 100vh - 300px ); }
	.rtb-assist-side { flex-direction: row; flex-wrap: wrap; }
	.rtb-assist-side-card { flex: 1 1 260px; }
}
@media ( max-width: 600px ) {
	.rtb-assist { height: calc( 100vh - 240px ); border-radius: 14px; }
	.rtb-assist-prompts { grid-template-columns: 1fr; }
	.rtb-assist-side { flex-direction: column; }
}