/* G6M_BUNDLE_20 — 3 feuilles, ordre du document preserve */
/* ==== g6m-inline-32-v700.css ==== */
/* Externalise depuis la modification #56, bloc inline #32 — position et ordre de cascade inchanges */

/* G6M_CHAT_PREMIUM_V307
   Siropu Chat 2 — Rockstar / GTA VI premium messenger redesign.
   CSS overlay only. No plugin core / template changes.
   Layout rebuild: restore Siropu float columns (users float:right + messages
   margin-right). DOM order is users THEN messages — CSS grid auto-placement
   previously swapped columns and width:auto collapsed the sidebar to ~1ch.
   Sidebar: 320px (min 280). Editor min-height 70px. Theme on top of structure.
*/

:root {
	--g6m-chat: V307;
	--g6m-chat-pink: #ff0b8b;
	--g6m-chat-violet: #8d38ff;
	--g6m-chat-green: #35e07b;
	--g6m-chat-ink: #f4f1fb;
	--g6m-chat-muted: rgba(210, 205, 230, 0.7);
	--g6m-chat-line: rgba(255, 255, 255, 0.06);
	--g6m-chat-border: rgba(141, 56, 255, 0.38);
	--g6m-chat-surface: #18141f;
	--g6m-chat-deep: #0c0a12;
	--g6m-chat-panel: #12101a;
	--g6m-chat-radius: 20px;
	--g6m-chat-msg-radius: 16px;
	--g6m-chat-ease: 250ms ease;
	--g6m-chat-sidebar: 320px;
	--g6m-chat-sidebar-min: 280px;
}

/* ═══════════ 1) SHELL ═══════════ */
html body #siropuChat,
html body .siropuChat,
html body .siropuChatAboveForumList,
html body .block.siropuChatAboveForumList,
html body .block[data-widget-key="siropu_chat"],
html body .block[data-widget-definition="siropu_chat"] {
	box-sizing: border-box !important;
	margin: 0 0 1.25rem !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--g6m-chat-radius) !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: hidden !important;
	isolation: isolate !important;
	width: 100% !important;
	max-width: 100% !important;
}

html body #siropuChat > .block-container,
html body .siropuChat > .block-container,
html body .siropuChatAboveForumList > .block-container,
html body .block[data-widget-key="siropu_chat"] > .block-container {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: var(--g6m-chat-radius) !important;
	border: 1px solid var(--g6m-chat-border) !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 30%),
		linear-gradient(160deg, #1a1428 0%, #12101a 45%, #0c0a12 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 16px 40px rgba(0, 0, 0, 0.42),
		0 0 28px rgba(141, 56, 255, 0.12) !important;
	backdrop-filter: blur(14px) saturate(1.15) !important;
	-webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
	overflow: hidden !important;
}

/* ═══════════ 2) HEADER + VICE CITY BAND ═══════════ */
html body #siropuChat #siropuChatHeader,
html body #siropuChat .siropuChatHeader,
html body #siropuChat .block-header {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	min-height: 58px !important;
	margin: 0 !important;
	padding: 12px 18px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--g6m-chat-line) !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	z-index: 1 !important;
	background-color: #08080e !important;
	background-image:
		linear-gradient(rgba(8, 8, 14, 0.20), rgba(8, 8, 14, 0.35)),
		url("/forum/styles/g6m/g6m-chat-header-bg-v311.webp?v=311") !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	color: var(--g6m-chat-ink) !important;
	font-family: Rajdhani, Inter, "Segoe UI", sans-serif !important;
	font-size: 1.08rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
}

html body #siropuChat #siropuChatHeader::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	pointer-events: none !important;
	background: linear-gradient(90deg, rgba(255, 11, 139, 0.12), transparent 40%, transparent 60%, rgba(141, 56, 255, 0.14)) !important;
	opacity: 0.85 !important;
	z-index: 0 !important;
}

html body #siropuChat #siropuChatHeader > *,
html body #siropuChat .siropuChatHeader > * {
	position: relative !important;
	z-index: 1 !important;
}

html body #siropuChat #siropuChatHeader .block-title,
html body #siropuChatHeader .block-title {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	color: #fff !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45) !important;
}

html body #siropuChat .g6m-chat-online {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-right: 6px !important;
	padding: 0.28rem 0.7rem !important;
	border-radius: 999px !important;
	border: 1px solid rgba(53, 224, 123, 0.28) !important;
	background: rgba(53, 224, 123, 0.08) !important;
	color: var(--g6m-chat-green) !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
}

html body #siropuChat .g6m-chat-online::before {
	content: "" !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: var(--g6m-chat-green) !important;
	box-shadow: 0 0 8px rgba(53, 224, 123, 0.7) !important;
}

html body #siropuChat #siropuChatOptions,
html body #siropuChat #siropuChatSettings,
html body #siropuChat #siropuChatToggleUsers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 11px !important;
	color: rgba(235, 230, 255, 0.9) !important;
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	transition:
		background var(--g6m-chat-ease),
		color var(--g6m-chat-ease),
		box-shadow var(--g6m-chat-ease),
		transform var(--g6m-chat-ease) !important;
}

html body #siropuChat #siropuChatOptions:hover,
html body #siropuChat #siropuChatSettings:hover,
html body #siropuChat #siropuChatToggleUsers:hover {
	color: #fff !important;
	background: rgba(141, 56, 255, 0.28) !important;
	box-shadow: 0 0 14px rgba(141, 56, 255, 0.3) !important;
	transform: translateY(-2px) !important;
	text-decoration: none !important;
}

/* ═══════════ 3) TABS ═══════════ */
html body #siropuChat #siropuChatTabs,
html body #siropuChat .siropuChatTabs {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--g6m-chat-line) !important;
	background: rgba(8, 6, 14, 0.72) !important;
	min-height: 50px !important;
}

html body #siropuChat #siropuChatTabs a,
html body #siropuChat #siropuChatTabs .siropuChatRoomTab,
html body #siropuChat #siropuChatTabs [role="button"],
html body #siropuChat #siropuChatTabs .tabs-tab {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 36px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border-radius: 12px !important;
	border: 1px solid transparent !important;
	background: transparent !important;
	color: var(--g6m-chat-muted) !important;
	font-family: Rajdhani, Inter, "Segoe UI", sans-serif !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	line-height: 1 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition:
		color var(--g6m-chat-ease),
		background var(--g6m-chat-ease),
		border-color var(--g6m-chat-ease),
		box-shadow var(--g6m-chat-ease),
		transform var(--g6m-chat-ease) !important;
}

html body #siropuChat #siropuChatTabs a:hover,
html body #siropuChat #siropuChatTabs [role="button"]:hover,
html body #siropuChat #siropuChatTabs .tabs-tab:hover {
	color: #fff !important;
	background: rgba(141, 56, 255, 0.16) !important;
	border-color: rgba(141, 56, 255, 0.28) !important;
	transform: translateY(-1px) !important;
	text-decoration: none !important;
}

html body #siropuChat #siropuChatTabs a.siropuChatActiveTab,
html body #siropuChat #siropuChatTabs .siropuChatActiveTab,
html body #siropuChat #siropuChatTabs .tabs-tab.is-active,
html body #siropuChat #siropuChatTabs a.is-active {
	color: #fff !important;
	background: linear-gradient(135deg, rgba(255, 11, 139, 0.42), rgba(141, 56, 255, 0.5)) !important;
	border-color: rgba(255, 11, 139, 0.45) !important;
	box-shadow: 0 0 18px rgba(255, 11, 139, 0.22) !important;
}

html body #siropuChat .siropuChatTabCount,
html body #siropuChat .siropuChatTabCountActive,
html body #siropuChat .badge,
html body #siropuChat #siropuChatTabs .badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 18px !important;
	height: 18px !important;
	padding: 0 5px !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, var(--g6m-chat-pink), var(--g6m-chat-violet)) !important;
	color: #fff !important;
	font-size: 0.68rem !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	box-shadow: 0 0 10px rgba(255, 11, 139, 0.35) !important;
}

/* ═══════════ 4) TWO-COLUMN CONTENT (Siropu float structure) ═══════════
   Plugin DOM order inside #siropuChatContent:
     .siropuChatUsers (room) → .siropuChatMessages (room) → polls/rooms
     → .siropuChatConversation.siropuChatUsers → conv messages → start form
   Native CSS: users { width:250px; float:right } + messages { margin-right:300px }
   We keep that model at 320px. Do NOT use display:grid on #siropuChatContent. */
html body #siropuChat #siropuChatContent,
html body #siropuChatContent {
	display: block !important;
	position: relative !important;
	box-sizing: border-box !important;
	min-height: 0 !important;
	/* height stays from Siropu LESS (@xf-siropuChatContentHeight) */
	background: transparent !important;
	border: 0 !important;
	overflow: hidden !important;
}

/* Kill any leftover grid / flex layout experiments on content children */
html body #siropuChat #siropuChatContent > .siropuChatRoom,
html body #siropuChat #siropuChatContent > .siropuChatConversation,
html body #siropuChat #siropuChatContent > ul {
	grid-template-columns: none !important;
	grid-column: auto !important;
	grid-row: auto !important;
}

/* Right column: online users OR private conversations list
   CRITICAL: do NOT force display — Siropu uses
   #siropuChatContent > * { display:none } + inline style="display:block"
   to toggle room vs conversation panes. Forcing display:block shows ALL
   sidebars at once and collapses the float layout. */
html body #siropuChat .siropuChatUsers,
html body #siropuChat .siropuChatRoom.siropuChatUsers,
html body #siropuChat .siropuChatConversation.siropuChatUsers {
	float: right !important;
	clear: none !important;
	box-sizing: border-box !important;
	width: var(--g6m-chat-sidebar) !important;
	min-width: var(--g6m-chat-sidebar-min) !important;
	max-width: var(--g6m-chat-sidebar) !important;
	flex: none !important;
	flex-basis: auto !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 12px 12px 14px !important;
	height: 100% !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	border: 0 !important;
	border-left: 1px solid var(--g6m-chat-line) !important;
	background: rgba(12, 10, 20, 0.78) !important;
	writing-mode: horizontal-tb !important;
	direction: ltr !important;
	scrollbar-width: thin !important;
	scrollbar-color: rgba(141, 56, 255, 0.45) rgba(255, 255, 255, 0.04) !important;
}

/* Main messages column — fills remaining width via margin-right
   Do NOT force display here either (same Siropu toggle). */
html body #siropuChat .siropuChatMessages,
html body #siropuChat .siropuChatRoom.siropuChatMessages,
html body #siropuChat .siropuChatConversation.siropuChatMessages {
	float: none !important;
	clear: none !important;
	box-sizing: border-box !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	margin-right: var(--g6m-chat-sidebar) !important;
	padding: 14px !important;
	height: 100% !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	background: rgba(10, 8, 16, 0.45) !important;
	border: 0 !important;
	scrollbar-width: thin !important;
	scrollbar-color: rgba(141, 56, 255, 0.45) rgba(255, 255, 255, 0.04) !important;
}

/* Pack visible message lists toward the editor (only when Siropu shows them) */
html body #siropuChat .siropuChatMessages[style*="display: block"],
html body #siropuChat .siropuChatMessages[style*="display:block"],
html body #siropuChat .siropuChatRoom.siropuChatMessages[style*="display: block"],
html body #siropuChat .siropuChatRoom.siropuChatMessages[style*="display:block"],
html body #siropuChat .siropuChatConversation.siropuChatMessages[style*="display: block"],
html body #siropuChat .siropuChatConversation.siropuChatMessages[style*="display:block"] {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	gap: 12px !important;
}

html body #siropuChat .siropuChatMessages > li {
	flex: 0 0 auto !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Rooms / polls panes: full width when shown (plugin toggles display) */
html body #siropuChat #siropuChatRooms,
html body #siropuChat #siropuChatPolls {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	height: 100% !important;
	overflow: auto !important;
	padding: 10px 14px !important;
	box-sizing: border-box !important;
}

/* Start-conversation form host — do not shrink the users column */
html body #siropuChat #siropuChatStartConversation {
	float: none !important;
	clear: both !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	max-width: none !important;
	overflow: visible !important;
}

html body #siropuChat #siropuChatStartConversation form {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 10px 12px !important;
	border: 0 !important;
}

/* Private empty state must stay horizontal full-width text */
html body #siropuChat #siropuChatNoConversations,
html body #siropuChat li#siropuChatNoConversations {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 16px 12px !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	writing-mode: horizontal-tb !important;
	text-align: center !important;
	color: var(--g6m-chat-muted) !important;
	font-size: 0.85rem !important;
	line-height: 1.4 !important;
	list-style: none !important;
}

html body #siropuChat #siropuChatContent::after {
	content: "" !important;
	display: table !important;
	clear: both !important;
}

/* Sidebar section titles (JS-injected) */
html body #siropuChat .g6m-chat-users-title {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 0 10px !important;
	padding: 0 2px 8px !important;
	border-bottom: 1px solid var(--g6m-chat-line) !important;
	color: rgba(255, 255, 255, 0.78) !important;
	font-family: Rajdhani, Inter, sans-serif !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	writing-mode: horizontal-tb !important;
}

/* ═══════════ 5) MESSAGE CARDS ═══════════ */
html body #siropuChat .siropuChatMessages > li,
html body #siropuChat li.siropuChatMessageRow,
html body #siropuChat .siropuChatMessages li[data-id],
html body #siropuChat .siropuChatMessages li[data-user-id] {
	display: block !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 18px !important;
	border-radius: var(--g6m-chat-msg-radius) !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	background: #18141f !important;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) !important;
	color: var(--g6m-chat-ink) !important;
	line-height: 1.45 !important;
	transition:
		transform var(--g6m-chat-ease),
		box-shadow var(--g6m-chat-ease),
		border-color var(--g6m-chat-ease) !important;
}

html body #siropuChat .siropuChatMessages > li:hover,
html body #siropuChat li.siropuChatMessageRow:hover {
	transform: translateY(-2px) !important;
	border-color: rgba(141, 56, 255, 0.28) !important;
	box-shadow:
		0 12px 24px rgba(0, 0, 0, 0.3),
		0 0 16px rgba(141, 56, 255, 0.12) !important;
}

html body #siropuChat .siropuChatMessages > li.siropuChatBotMessage,
html body #siropuChat .siropuChatMessages > li[class*="bot"],
html body #siropuChat .siropuChatMessages > li[class*="system"] {
	background: rgba(24, 20, 36, 0.92) !important;
	border-color: rgba(53, 224, 123, 0.18) !important;
	color: var(--g6m-chat-green) !important;
}

html body #siropuChat .siropuChatMessageContentLeft,
html body #siropuChat .siropuChatMessageContentRight {
	vertical-align: top !important;
}

html body #siropuChat .siropuChatMessageText,
html body #siropuChat .siropuChatMessageText .bbWrapper {
	color: rgba(244, 241, 251, 0.94) !important;
	font-size: 0.94rem !important;
	line-height: 1.5 !important;
}

html body #siropuChat .siropuChatDateTime {
	color: rgba(190, 185, 210, 0.58) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.03em !important;
}

/* Rank badges inside chat */
html body #siropuChat .userBanner,
html body #siropuChat .userTitle,
html body #siropuChat .message-userTitle,
html body #siropuChat [class*="userBanner"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 0 0 6px !important;
	padding: 0.18rem 0.55rem !important;
	border-radius: 999px !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	background: linear-gradient(135deg, rgba(255, 11, 139, 0.75), rgba(141, 56, 255, 0.8)) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-family: Rajdhani, Inter, sans-serif !important;
	font-size: 0.58rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	box-shadow: 0 0 10px rgba(141, 56, 255, 0.28) !important;
}

/* ═══════════ 6) AVATARS 60px ═══════════ */
html body #siropuChat .avatar,
html body #siropuChat .avatar img {
	border-radius: 50% !important;
	border: 1px solid rgba(141, 56, 255, 0.4) !important;
	box-shadow: 0 0 12px rgba(141, 56, 255, 0.2) !important;
	overflow: hidden !important;
}

html body #siropuChat .siropuChatMessages .avatar,
html body #siropuChat .siropuChatMessages .avatar img {
	width: 60px !important;
	height: 60px !important;
	min-width: 60px !important;
	min-height: 60px !important;
	max-width: 60px !important;
	max-height: 60px !important;
}

html body #siropuChat .siropuChatUsers .avatar,
html body #siropuChat .siropuChatUsers .avatar img {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
}

html body #siropuChat .siropuChatActivityStatus,
html body #siropuChat [class*="activityStatus"],
html body #siropuChat .siropuChatUsers .fa-circle {
	color: var(--g6m-chat-green) !important;
	filter: drop-shadow(0 0 4px rgba(53, 224, 123, 0.55)) !important;
}

/* ═══════════ 7) SIDEBAR USERS ═══════════ */
html body #siropuChat .siropuChatNoRoomUsers,
html body #siropuChat li.siropuChatNoRoomUsers {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 8px 0 !important;
	padding: 16px 12px !important;
	border-radius: 14px !important;
	border: 1px dashed rgba(255, 255, 255, 0.1) !important;
	background: rgba(255, 255, 255, 0.03) !important;
	color: var(--g6m-chat-muted) !important;
	font-size: 0.82rem !important;
	line-height: 1.35 !important;
	text-align: center !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	writing-mode: horizontal-tb !important;
	list-style: none !important;
}

html body #siropuChat .siropuChatUsers > li:not(.siropuChatNoRoomUsers):not(.g6m-chat-users-title) {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 0 8px !important;
	padding: 9px 10px !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.04) !important;
	list-style: none !important;
	transition:
		background var(--g6m-chat-ease),
		border-color var(--g6m-chat-ease),
		transform var(--g6m-chat-ease) !important;
}

html body #siropuChat .siropuChatUsers > li:not(.siropuChatNoRoomUsers):hover {
	background: rgba(141, 56, 255, 0.12) !important;
	border-color: rgba(141, 56, 255, 0.25) !important;
	transform: translateY(-1px) !important;
}

/* ═══════════ 8) EDITOR + TOOLBAR ═══════════ */
html body #siropuChat #siropuChatEditor,
html body #siropuChat .siropuChatEditor {
	margin: 0 !important;
	padding: 12px 14px 14px !important;
	border: 0 !important;
	border-top: 1px solid var(--g6m-chat-line) !important;
	background: linear-gradient(180deg, rgba(18, 14, 28, 0.94), rgba(10, 8, 16, 0.98)) !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	clear: both !important;
	float: none !important;
}

html body #siropuChat #siropuChatEditor .formRow,
html body #siropuChat #siropuChatEditor .inputRow,
html body #siropuChat #siropuChatEditor dl.formRow {
	margin: 0 !important;
	padding: 0 !important;
}

html body #siropuChat #siropuChatEditor .fr-box,
html body #siropuChat #siropuChatEditor .fr-box.fr-basic {
	border-radius: 16px !important;
	border: 1px solid rgba(141, 56, 255, 0.35) !important;
	background: #0f0d16 !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 0 18px rgba(141, 56, 255, 0.08) !important;
	overflow: hidden !important;
	transition: border-color var(--g6m-chat-ease), box-shadow var(--g6m-chat-ease) !important;
}

html body #siropuChat #siropuChatEditor .fr-box.fr-basic.fr-top .fr-wrapper,
html body #siropuChat #siropuChatEditor .fr-wrapper,
html body #siropuChat #siropuChatEditor .fr-element,
html body #siropuChat #siropuChatEditor textarea,
html body #siropuChat #siropuChatEditor .input {
	min-height: 70px !important;
	max-height: 180px !important;
	padding: 14px 16px !important;
	background: #0f0d16 !important;
	color: var(--g6m-chat-ink) !important;
	font-size: 0.95rem !important;
	line-height: 1.45 !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body #siropuChat #siropuChatEditor .fr-placeholder,
html body #siropuChat #siropuChatEditor [data-placeholder]:empty::before {
	color: rgba(190, 185, 210, 0.52) !important;
	font-size: 0.92rem !important;
}

html body #siropuChat #siropuChatEditor .fr-box.fr-basic.fr-focus,
html body #siropuChat #siropuChatEditor .fr-box:focus-within {
	border-color: rgba(255, 11, 139, 0.55) !important;
	box-shadow:
		0 0 0 1px rgba(255, 11, 139, 0.22),
		0 0 20px rgba(141, 56, 255, 0.22) !important;
}

html body #siropuChat #siropuChatEditor .fr-toolbar,
html body #siropuChat #siropuChatEditor .editorToolbar,
html body #siropuChat #siropuChatEditor .fr-toolbar.fr-top {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 6px !important;
	min-height: 44px !important;
	padding: 8px 10px !important;
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--g6m-chat-line) !important;
	border-radius: 0 !important;
	background: rgba(20, 16, 32, 0.96) !important;
	box-shadow: none !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
}

html body #siropuChat #siropuChatEditor .fr-toolbar .fr-btn,
html body #siropuChat #siropuChatEditor .fr-command.fr-btn,
html body #siropuChat #siropuChatEditor .editorToolbar .button,
html body #siropuChat #siropuChatEditor .fr-btn-grp > button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 10px !important;
	border: 1px solid transparent !important;
	background: transparent !important;
	color: rgba(220, 215, 240, 0.85) !important;
	opacity: 1 !important;
	transition:
		background var(--g6m-chat-ease),
		color var(--g6m-chat-ease),
		box-shadow var(--g6m-chat-ease),
		border-color var(--g6m-chat-ease),
		transform var(--g6m-chat-ease) !important;
}

html body #siropuChat #siropuChatEditor .fr-toolbar .fr-btn:hover,
html body #siropuChat #siropuChatEditor .fr-command.fr-btn:hover,
html body #siropuChat #siropuChatEditor .editorToolbar .button:hover {
	color: #fff !important;
	background: rgba(141, 56, 255, 0.22) !important;
	border-color: rgba(141, 56, 255, 0.35) !important;
	box-shadow: 0 0 12px rgba(141, 56, 255, 0.25) !important;
	transform: translateY(-1px) !important;
}

/* Hide excess Froala tools (JS also marks keepers) */
html body #siropuChat #siropuChatEditor .fr-toolbar .fr-btn.g6m-chat-tool-hide,
html body #siropuChat #siropuChatEditor .fr-command.fr-btn.g6m-chat-tool-hide {
	display: none !important;
}

/* ENVOYER button */
html body #siropuChat #siropuChatEditor .button--primary,
html body #siropuChat #siropuChatEditor .button--link,
html body #siropuChat #siropuChatEditor button[type="submit"],
html body #siropuChat #siropuChatEditor .g6m-chat-send {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 44px !important;
	margin-top: 12px !important;
	padding: 0 22px !important;
	border-radius: 14px !important;
	border: 0 !important;
	background: linear-gradient(115deg, var(--g6m-chat-pink) 0%, #c23bff 48%, var(--g6m-chat-violet) 100%) !important;
	color: #fff !important;
	font-family: Rajdhani, Inter, sans-serif !important;
	font-size: 0.95rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	box-shadow:
		0 10px 24px rgba(255, 11, 139, 0.28),
		0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
	transition:
		transform var(--g6m-chat-ease),
		box-shadow var(--g6m-chat-ease),
		filter var(--g6m-chat-ease) !important;
}

html body #siropuChat #siropuChatEditor .button--primary:hover,
html body #siropuChat #siropuChatEditor button[type="submit"]:hover,
html body #siropuChat #siropuChatEditor .g6m-chat-send:hover {
	transform: translateY(-2px) !important;
	filter: brightness(1.05) !important;
	box-shadow:
		0 14px 30px rgba(255, 11, 139, 0.36),
		0 0 24px rgba(141, 56, 255, 0.28) !important;
}

/* ═══════════ 9) SCROLLBAR ═══════════ */
html body #siropuChat .siropuChatMessages::-webkit-scrollbar,
html body #siropuChat .siropuChatUsers::-webkit-scrollbar,
html body #siropuChat #siropuChatEditor .fr-element::-webkit-scrollbar {
	width: 8px !important;
	height: 8px !important;
}
html body #siropuChat .siropuChatMessages::-webkit-scrollbar-thumb,
html body #siropuChat .siropuChatUsers::-webkit-scrollbar-thumb {
	background: rgba(141, 56, 255, 0.45) !important;
	border-radius: 999px !important;
}
html body #siropuChat .siropuChatMessages::-webkit-scrollbar-track,
html body #siropuChat .siropuChatUsers::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.03) !important;
}

/* ═══════════ 10) RESPONSIVE ═══════════
   Desktop: messages | 320px sidebar
   Mobile: stack — messages then private/users column */
@media (max-width: 900px) {
	html body #siropuChat .siropuChatUsers,
	html body #siropuChat .siropuChatRoom.siropuChatUsers,
	html body #siropuChat .siropuChatConversation.siropuChatUsers {
		float: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: auto !important;
		max-height: 200px !important;
		border-left: 0 !important;
		border-top: 1px solid var(--g6m-chat-line) !important;
	}

	html body #siropuChat .siropuChatMessages,
	html body #siropuChat .siropuChatRoom.siropuChatMessages,
	html body #siropuChat .siropuChatConversation.siropuChatMessages {
		float: none !important;
		width: 100% !important;
		margin-right: 0 !important;
		height: auto !important;
		max-height: min(320px, 45vh) !important;
	}

	html body #siropuChat #siropuChatContent {
		overflow: visible !important;
	}

	html body #siropuChat .siropuChatMessages .avatar,
	html body #siropuChat .siropuChatMessages .avatar img {
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		min-height: 48px !important;
		max-width: 48px !important;
		max-height: 48px !important;
	}

	html body #siropuChat .g6m-chat-online {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body #siropuChat * {
		animation: none !important;
		transition: none !important;
	}
}

/* Guest: members-only CSS hides shell; keep rules harmless if shell shows */
html[data-logged-in="false"] body #siropuChat .siropuChatUsers {
	display: none !important;
}
html[data-logged-in="false"] body #siropuChat .siropuChatMessages {
	margin-right: 0 !important;
}

/* END G6M_CHAT_PREMIUM_V307 */

/* ==== g6m-inline-33-v700.css ==== */
/* Externalise depuis la modification #56, bloc inline #33 — position et ordre de cascade inchanges */

/* G6M_CHAT_THEME_V310
   Clean Siropu Chat 2 theme layer for GTA6Modding.
   - No plugin core / template edits
   - Preserves native float layout (users float:right + messages margin-right)
   - Does NOT force display on #siropuChatContent children (plugin toggles panes)
   - Does NOT style #siropuChatOptions / #siropuChatSettings as icon buttons
     (#siropuChatOptions is a WRAPPER; #siropuChatSettings is a FORM in a menu)
*/

:root {
	--g6m-chat: V310;
	--g6m-chat-pink: #ff0b8b;
	--g6m-chat-violet: #8d38ff;
	--g6m-chat-green: #35e07b;
	--g6m-chat-ink: #f4f1fb;
	--g6m-chat-muted: rgba(210, 205, 230, 0.7);
	--g6m-chat-line: rgba(255, 255, 255, 0.08);
	--g6m-chat-border: rgba(141, 56, 255, 0.38);
	--g6m-chat-sidebar: 320px;
	--g6m-chat-sidebar-min: 280px;
	--g6m-chat-radius: 18px;
	--g6m-chat-ease: 200ms ease;
}

/* ─── Neutralize broken theme height clamps (critical CSS legacy) ─── */
html body #siropuChat .siropuChatMessages,
html body #siropuChat .siropuChatUsers,
html body #siropuChat .siropuChatRoom,
html body #siropuChat .siropuChatConversation {
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
}

/* ─── Shell ─── */
html body #siropuChat,
html body .siropuChat,
html body .siropuChatAboveForumList,
html body .block[data-widget-key="siropu_chat"],
html body .block[data-widget-definition="siropu_chat"] {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 1.25rem !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--g6m-chat-radius) !important;
	background: transparent !important;
	box-shadow: none !important;
	/* visible so header menus / overlays are not clipped */
	overflow: visible !important;
	isolation: isolate !important;
}

html body #siropuChat > .block-container,
html body .siropuChat > .block-container,
html body .siropuChatAboveForumList > .block-container,
html body .block[data-widget-key="siropu_chat"] > .block-container {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: var(--g6m-chat-radius) !important;
	border: 1px solid var(--g6m-chat-border) !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 28%),
		linear-gradient(160deg, #1a1428 0%, #12101a 45%, #0c0a12 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 16px 40px rgba(0, 0, 0, 0.42),
		0 0 24px rgba(141, 56, 255, 0.1) !important;
	overflow: visible !important;
}

/* ─── Header ─── */
html body #siropuChat #siropuChatHeader,
html body #siropuChat .block-header {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 10px 14px !important;
	min-height: 56px !important;
	margin: 0 !important;
	padding: 12px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--g6m-chat-line) !important;
	border-radius: var(--g6m-chat-radius) var(--g6m-chat-radius) 0 0 !important;
	overflow: visible !important;
	z-index: 5 !important;
	/* Official GTA VI panoramic header bg (v311) — cover, skyline-centered, light veil */
	background-color: #08080e !important;
	background-image:
		linear-gradient(rgba(8, 8, 14, 0.20), rgba(8, 8, 14, 0.35)),
		image-set(
			url("/forum/styles/g6m/g6m-chat-header-bg-v311.webp?v=311") 1x,
			url("/forum/styles/g6m/g6m-chat-header-bg-v311@2x.webp?v=311") 2x
		) !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	color: var(--g6m-chat-ink) !important;
	font-family: Rajdhani, "Segoe UI", sans-serif !important;
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

html body #siropuChat #siropuChatHeader > .fa,
html body #siropuChat #siropuChatHeader > .fas,
html body #siropuChat #siropuChatHeader > .far,
html body #siropuChat #siropuChatHeader > .fal,
html body #siropuChat #siropuChatHeader > span {
	position: relative !important;
	z-index: 1 !important;
}

/* Options WRAPPER — never size the container as a 36px button */
html body #siropuChat #siropuChatOptions {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	flex-wrap: nowrap !important;
	gap: 6px !important;
	margin-left: auto !important;
	padding: 4px 6px !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	float: none !important;
	position: relative !important;
	z-index: 6 !important;
	overflow: visible !important;
}

html body #siropuChat #siropuChatOptions > a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 10px !important;
	color: rgba(235, 230, 255, 0.92) !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	transition: background var(--g6m-chat-ease), color var(--g6m-chat-ease), box-shadow var(--g6m-chat-ease) !important;
}

html body #siropuChat #siropuChatOptions > a:hover,
html body #siropuChat #siropuChatOptions > a:focus {
	color: #fff !important;
	background: rgba(141, 56, 255, 0.3) !important;
	box-shadow: 0 0 12px rgba(141, 56, 255, 0.28) !important;
	text-decoration: none !important;
}

/* Keep native icon-only look (Siropu hides text spans) */
html body #siropuChat #siropuChatOptions > a > span {
	display: none !important;
}

html body #siropuChat #siropuChatOptions > a > .fa,
html body #siropuChat #siropuChatOptions > a > .fas,
html body #siropuChat #siropuChatOptions > a > .far,
html body #siropuChat #siropuChatOptions > a > .fal,
html body #siropuChat #siropuChatOptions > a > svg {
	pointer-events: none !important;
	font-size: 1rem !important;
	line-height: 1 !important;
}

/* Settings is a FORM inside the menu — never treat as icon */
html body #siropuChat #siropuChatSettings {
	display: block !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Desktop: users toggle is mobile-oriented in Siropu */
html body #siropuChat #siropuChatToggleUsers {
	/* keep clickable; theme shows it as part of options cluster */
}

html body #siropuChat #siropuChatWhosTyping {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	font-style: italic !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	color: var(--g6m-chat-muted) !important;
	font-size: 0.82rem !important;
}

/* Header menus must escape overflow traps */
html body #siropuChat .menu,
html body #siropuChat .menu--siropuChat,
html body #siropuChat [data-menu] {
	z-index: 9000 !important;
}

/* ─── Tabs ─── */
html body #siropuChat #siropuChatTabs,
html body #siropuChat .siropuChatTabs {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--g6m-chat-line) !important;
	background: rgba(8, 6, 14, 0.72) !important;
	min-height: 48px !important;
	overflow: visible !important;
}

html body #siropuChat #siropuChatTabs a,
html body #siropuChat #siropuChatTabs .tabs-tab,
html body #siropuChat #siropuChatTabs [role="button"] {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 0.4rem 0.85rem !important;
	border-radius: 999px !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	background: rgba(255, 255, 255, 0.04) !important;
	color: rgba(230, 225, 245, 0.88) !important;
	font-family: Rajdhani, "Segoe UI", sans-serif !important;
	font-size: 0.86rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}

html body #siropuChat #siropuChatTabs a:hover,
html body #siropuChat #siropuChatTabs .tabs-tab:hover {
	background: rgba(141, 56, 255, 0.18) !important;
	color: #fff !important;
}

html body #siropuChat #siropuChatTabs a.siropuChatActiveTab,
html body #siropuChat #siropuChatTabs .siropuChatActiveTab,
html body #siropuChat #siropuChatTabs .tabs-tab.is-active,
html body #siropuChat #siropuChatTabs a.is-active {
	background: linear-gradient(115deg, rgba(255, 11, 139, 0.85), rgba(141, 56, 255, 0.9)) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 0 16px rgba(255, 11, 139, 0.28) !important;
}

html body #siropuChat .siropuChatTabCount,
html body #siropuChat .siropuChatTabCountActive,
html body #siropuChat #siropuChatTabs .badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 1.25rem !important;
	height: 1.25rem !important;
	padding: 0 0.35rem !important;
	border-radius: 999px !important;
	background: rgba(255, 11, 139, 0.9) !important;
	color: #fff !important;
	font-size: 0.68rem !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}

/* ─── Content: official float model @ 320px ─── */
html body #siropuChat #siropuChatContent {
	display: block !important;
	position: relative !important;
	box-sizing: border-box !important;
	/* height comes from Siropu style property */
	overflow: hidden !important; /* BFC for floats */
	background: transparent !important;
	border: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

html body #siropuChat #siropuChatContent > .siropuChatRoom,
html body #siropuChat #siropuChatContent > .siropuChatConversation,
html body #siropuChat #siropuChatContent > ul {
	grid-template-columns: none !important;
	grid-column: auto !important;
	grid-row: auto !important;
}

/* Sidebar — do NOT force display (plugin toggles) */
html body #siropuChat .siropuChatUsers,
html body #siropuChat .siropuChatRoom.siropuChatUsers,
html body #siropuChat .siropuChatConversation.siropuChatUsers {
	float: right !important;
	clear: none !important;
	box-sizing: border-box !important;
	width: var(--g6m-chat-sidebar) !important;
	min-width: var(--g6m-chat-sidebar-min) !important;
	max-width: var(--g6m-chat-sidebar) !important;
	margin: 0 !important;
	padding: 12px !important;
	height: 100% !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	border: 0 !important;
	border-left: 1px solid var(--g6m-chat-line) !important;
	background: rgba(12, 10, 20, 0.78) !important;
	list-style: none !important;
	writing-mode: horizontal-tb !important;
	direction: ltr !important;
	scrollbar-width: thin !important;
}

/* Messages column — fill remaining width */
html body #siropuChat .siropuChatMessages,
html body #siropuChat .siropuChatRoom.siropuChatMessages,
html body #siropuChat .siropuChatConversation.siropuChatMessages {
	float: none !important;
	clear: none !important;
	box-sizing: border-box !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 var(--g6m-chat-sidebar) 0 0 !important;
	padding: 12px 14px !important;
	height: 100% !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	background: rgba(10, 8, 16, 0.4) !important;
	border: 0 !important;
	list-style: none !important;
	scrollbar-width: thin !important;
}

html body #siropuChat #siropuChatRooms,
html body #siropuChat #siropuChatPolls {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	height: 100% !important;
	overflow: auto !important;
	padding: 10px 14px !important;
	box-sizing: border-box !important;
}

html body #siropuChat #siropuChatStartConversation {
	float: none !important;
	clear: both !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

html body #siropuChat #siropuChatContent::after {
	content: "" !important;
	display: table !important;
	clear: both !important;
}

/* Sidebar title (JS injects as <li>) */
html body #siropuChat .g6m-chat-users-title {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 0 10px !important;
	padding: 0 2px 8px !important;
	border-bottom: 1px solid var(--g6m-chat-line) !important;
	color: rgba(255, 255, 255, 0.78) !important;
	font-family: Rajdhani, "Segoe UI", sans-serif !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	list-style: none !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

html body #siropuChat .siropuChatNoRoomUsers,
html body #siropuChat li.siropuChatNoRoomUsers,
html body #siropuChat #siropuChatNoConversations,
html body #siropuChat li#siropuChatNoConversations {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 14px 12px !important;
	margin: 8px 0 !important;
	border-radius: 12px !important;
	border: 1px dashed rgba(255, 255, 255, 0.12) !important;
	background: rgba(255, 255, 255, 0.03) !important;
	color: var(--g6m-chat-muted) !important;
	text-align: center !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	writing-mode: horizontal-tb !important;
	list-style: none !important;
	font-size: 0.85rem !important;
	line-height: 1.4 !important;
}

html body #siropuChat .siropuChatUsers > li:not(.siropuChatNoRoomUsers):not(.g6m-chat-users-title) {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 0 8px !important;
	padding: 8px 10px !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.04) !important;
	list-style: none !important;
}

html body #siropuChat .siropuChatUsers > li:not(.siropuChatNoRoomUsers):hover {
	background: rgba(141, 56, 255, 0.12) !important;
	border-color: rgba(141, 56, 255, 0.25) !important;
}

/* Messages — keep Siropu table row model */
html body #siropuChat .siropuChatMessages > li {
	display: table !important;
	table-layout: fixed !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 0 8px !important;
	padding: 12px 14px !important;
	border-radius: 14px !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	background: #18141f !important;
	color: var(--g6m-chat-ink) !important;
	list-style: none !important;
	position: relative !important;
}

html body #siropuChat .siropuChatMessages > li > div {
	display: table-cell !important;
	vertical-align: top !important;
}

html body #siropuChat .siropuChatMessageText,
html body #siropuChat .siropuChatMessageText .bbWrapper {
	color: rgba(244, 241, 251, 0.94) !important;
	font-size: 0.94rem !important;
	line-height: 1.5 !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}

html body #siropuChat .siropuChatDateTime {
	color: rgba(190, 185, 210, 0.58) !important;
	font-size: 0.72rem !important;
}

html body #siropuChat .avatar,
html body #siropuChat .avatar img {
	border-radius: 50% !important;
	border: 1px solid rgba(141, 56, 255, 0.4) !important;
}

html body #siropuChat .siropuChatMessages .avatar,
html body #siropuChat .siropuChatMessages .avatar img {
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
}

html body #siropuChat .siropuChatUsers .avatar,
html body #siropuChat .siropuChatUsers .avatar img {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
}

html body #siropuChat .siropuChatActivityStatus,
html body #siropuChat .siropuChatUsers .fa-circle {
	color: var(--g6m-chat-green) !important;
}

/* ─── Editor (full width under both columns) ─── */
html body #siropuChat #siropuChatEditor,
html body #siropuChat .siropuChatEditor {
	clear: both !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 12px 14px 14px !important;
	border: 0 !important;
	border-top: 1px solid var(--g6m-chat-line) !important;
	background: linear-gradient(180deg, rgba(18, 14, 28, 0.94), rgba(10, 8, 16, 0.98)) !important;
	border-radius: 0 0 var(--g6m-chat-radius) var(--g6m-chat-radius) !important;
}

html body #siropuChat #siropuChatEditor .formRow,
html body #siropuChat #siropuChatEditor .inputRow,
html body #siropuChat #siropuChatEditor dl.formRow,
html body #siropuChat #siropuChatEditor dd {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

html body #siropuChat #siropuChatEditor .fr-box,
html body #siropuChat #siropuChatEditor .fr-box.fr-basic {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border-radius: 14px !important;
	border: 1px solid rgba(141, 56, 255, 0.35) !important;
	background: #0f0d16 !important;
	overflow: hidden !important;
}

html body #siropuChat #siropuChatEditor .fr-toolbar,
html body #siropuChat #siropuChatEditor .fr-toolbar.fr-top {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 4px !important;
	min-height: 42px !important;
	padding: 6px 8px !important;
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--g6m-chat-line) !important;
	background: rgba(20, 16, 32, 0.96) !important;
	box-shadow: none !important;
}

html body #siropuChat #siropuChatEditor .fr-toolbar .fr-btn-grp {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	margin: 0 !important;
	float: none !important;
}

html body #siropuChat #siropuChatEditor .fr-toolbar .fr-btn,
html body #siropuChat #siropuChatEditor .fr-command.fr-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 8px !important;
	border: 1px solid transparent !important;
	background: transparent !important;
	color: rgba(220, 215, 240, 0.88) !important;
	opacity: 1 !important;
	float: none !important;
}

html body #siropuChat #siropuChatEditor .fr-toolbar .fr-btn:hover,
html body #siropuChat #siropuChatEditor .fr-command.fr-btn:hover {
	color: #fff !important;
	background: rgba(141, 56, 255, 0.22) !important;
	border-color: rgba(141, 56, 255, 0.35) !important;
}

html body #siropuChat #siropuChatEditor .fr-wrapper,
html body #siropuChat #siropuChatEditor .fr-element,
html body #siropuChat #siropuChatEditor textarea,
html body #siropuChat #siropuChatEditor .input {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	min-height: 72px !important;
	max-height: 200px !important;
	padding: 12px 14px !important;
	background: #0f0d16 !important;
	color: var(--g6m-chat-ink) !important;
	font-size: 0.95rem !important;
	line-height: 1.45 !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body #siropuChat #siropuChatEditor .fr-placeholder {
	color: rgba(190, 185, 210, 0.52) !important;
}

html body #siropuChat #siropuChatEditor .fr-box.fr-basic.fr-focus,
html body #siropuChat #siropuChatEditor .fr-box:focus-within {
	border-color: rgba(255, 11, 139, 0.55) !important;
	box-shadow: 0 0 0 1px rgba(255, 11, 139, 0.2) !important;
}

html body #siropuChat #siropuChatEditor .button--primary,
html body #siropuChat #siropuChatEditor button[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 42px !important;
	margin-top: 10px !important;
	padding: 0 20px !important;
	border-radius: 12px !important;
	border: 0 !important;
	background: linear-gradient(115deg, var(--g6m-chat-pink) 0%, #c23bff 48%, var(--g6m-chat-violet) 100%) !important;
	color: #fff !important;
	font-family: Rajdhani, "Segoe UI", sans-serif !important;
	font-size: 0.92rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
	html body #siropuChat .siropuChatUsers,
	html body #siropuChat .siropuChatRoom.siropuChatUsers,
	html body #siropuChat .siropuChatConversation.siropuChatUsers {
		float: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: auto !important;
		max-height: 200px !important;
		border-left: 0 !important;
		border-top: 1px solid var(--g6m-chat-line) !important;
	}

	html body #siropuChat .siropuChatMessages,
	html body #siropuChat .siropuChatRoom.siropuChatMessages,
	html body #siropuChat .siropuChatConversation.siropuChatMessages {
		float: none !important;
		width: 100% !important;
		margin-right: 0 !important;
		height: auto !important;
		max-height: min(360px, 50vh) !important;
	}

	html body #siropuChat #siropuChatContent {
		overflow: visible !important;
	}

	html body #siropuChat #siropuChatOptions {
		width: 100% !important;
		justify-content: flex-end !important;
	}
}

@media (max-width: 900px) {
	html body #siropuChat #siropuChatHeader,
	html body #siropuChat .block-header {
		/* Keep skyline / main buildings in frame on tablet */
		background-position: center center !important;
		background-size: cover !important;
	}
}

@media (max-width: 480px) {
	html body #siropuChat #siropuChatHeader {
		padding: 10px 12px !important;
		background-position: center center !important;
		background-size: cover !important;
	}

	html body #siropuChat #siropuChatOptions > a {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		min-height: 34px !important;
	}

	html body #siropuChat #siropuChatEditor .fr-toolbar .fr-btn,
	html body #siropuChat #siropuChatEditor .fr-command.fr-btn {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		min-height: 32px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body #siropuChat * {
		animation: none !important;
		transition: none !important;
	}
}

/* END G6M_CHAT_THEME_V310 */

/* ==== g6m-inline-p2-27-v701.css ==== */
/* Externalise (passe 2) — bloc inline #27 — position inchangee */

/* G6M_CHAT_REPAIR_V373
   Force Siropu Chat visible for members; never collapse shell.
   Complements premium theme. No PHP/addon core changes.
*/

:root {
	--g6m-chat-repair: V373;
}

html[data-logged-in="true"] #siropuChat,
html[data-logged-in="true"] .siropuChat,
html[data-logged-in="true"] .siropuChatAboveForumList,
html[data-logged-in="true"] .siropuChatAllPages,
html[data-logged-in="true"] .block.siropuChatAboveForumList,
html[data-logged-in="true"] .block[data-widget-key="siropu_chat"],
html[data-logged-in="true"] .block[data-widget-definition="siropu_chat"],
html#XF body[data-logged-in="true"] #siropuChat,
html body[data-template] #siropuChat.siropuChatAboveForumList {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	position: relative !important;
	z-index: 2 !important;
	overflow: visible !important;
	margin: 0 0 1.25rem !important;
}

/* Kill stale 230px canyon from older critical rules — keep usable pane */
html[data-logged-in="true"] #siropuChat .siropuChatMessages,
html[data-logged-in="true"] #siropuChat .siropuChatUsers,
html[data-logged-in="true"] #siropuChat .siropuChatRoom {
	height: auto !important;
	min-height: 140px !important;
	max-height: min(320px, 46vh) !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

html[data-logged-in="true"] #siropuChat #siropuChatEditor,
html[data-logged-in="true"] #siropuChat .block-footer {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	min-height: 70px !important;
}

/* Guests: keep hidden (members-only product rule) */
html[data-logged-in="false"] #siropuChat,
html[data-logged-in="false"] .siropuChatAboveForumList,
html[data-logged-in="false"] .block[data-widget-key="siropu_chat"] {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Responsive */
@media (max-width: 900px) {
	html[data-logged-in="true"] #siropuChat .siropuChatUsers {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: 120px !important;
	}
	html[data-logged-in="true"] #siropuChat .siropuChatMessages {
		margin-right: 0 !important;
		max-height: min(260px, 40vh) !important;
	}
}

@media (max-width: 480px) {
	html[data-logged-in="true"] #siropuChat .siropuChatMessages,
	html[data-logged-in="true"] #siropuChat .siropuChatUsers {
		min-height: 110px !important;
		max-height: min(220px, 38vh) !important;
	}
}

/* END G6M_CHAT_REPAIR_V373 */