/* Externalise depuis la modification #56, bloc inline #54 — position et ordre de cascade inchanges */

/* G6M_CHAT_EDITOR_COMPACT_V388
   Compact Siropu Chat message editor — kill phantom height under toolbar.
   Presentation only; does not modify Siropu/XF plugin files.
   Preserves Discord message scroll model (v377). */

html body #siropuChat,
html body .siropuChatAboveForumList {
	--g6m388: V388;
	--g6m388-r: 15px;
	--g6m388-input-h: 52px;
	--g6m388-icon: 34px;
	--g6m388-pink: #ff0b8b;
	--g6m388-violet: #8d38ff;
	--g6m388-ease: 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* —— Editor shell: no stretch, no phantom min-height —— */
html body #siropuChat #siropuChatEditor,
html body #siropuChat .siropuChatEditor,
html[data-logged-in="true"] #siropuChat #siropuChatEditor,
html[data-logged-in="true"] #siropuChat .block-footer {
	display: block !important;
	flex: 0 0 auto !important;
	align-self: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0.45rem 0.65rem 0.55rem !important;
	box-sizing: border-box !important;
	overflow: visible !important;
	z-index: 4 !important;
}

/* Kill XF formRow spacing that pushes editor open */
html body #siropuChat #siropuChatEditor .formRow,
html body #siropuChat #siropuChatEditor .inputRow,
html body #siropuChat #siropuChatEditor dl.formRow,
html body #siropuChat #siropuChatEditor .formRow > dt,
html body #siropuChat #siropuChatEditor .formRow > dd,
html body #siropuChat #siropuChatEditor .message-editorWrapper,
html body #siropuChat #siropuChatEditor .editor {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Form: compact column; send sits under/beside without stretching input */
html body #siropuChat #siropuChatEditor form,
html body #siropuChat #siropuChatEditor .siropuChatForm {
	display: flex !important;
	flex-flow: row wrap !important;
	align-items: flex-end !important;
	gap: 0.45rem !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	height: auto !important;
}

html body #siropuChat #siropuChatEditor form > .fr-box,
html body #siropuChat #siropuChatEditor form > .editor,
html body #siropuChat #siropuChatEditor .message-editorWrapper,
html body #siropuChat #siropuChatEditor form .fr-box {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: 100% !important;
}

/* —— Toolbar: compact, flush to input —— */
html body #siropuChat #siropuChatEditor .fr-toolbar,
html body #siropuChat #siropuChatEditor .fr-toolbar.fr-top,
html body #siropuChat #siropuChatEditor .editorToolbar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0.25rem !important;
	row-gap: 0.25rem !important;
	column-gap: 0.25rem !important;
	min-height: 0 !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0.3rem 0.35rem !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 0 !important;
	background: rgba(16, 13, 26, 0.92) !important;
	box-shadow: none !important;
	overflow: visible !important;
}

html body #siropuChat #siropuChatEditor .fr-btn-grp {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-wrap: nowrap !important;
	gap: 0.2rem !important;
	margin: 0 0.35rem 0 0 !important;
	padding: 0 0.35rem 0 0 !important;
	border: 0 !important;
	border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 0 !important;
	min-height: 0 !important;
	height: auto !important;
}

html body #siropuChat #siropuChatEditor .fr-btn-grp:last-child {
	border-right: 0 !important;
	margin-right: 0 !important;
	padding-right: 0 !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,
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: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--g6m388-icon) !important;
	height: var(--g6m388-icon) !important;
	min-width: var(--g6m388-icon) !important;
	min-height: var(--g6m388-icon) !important;
	max-width: var(--g6m388-icon) !important;
	max-height: var(--g6m388-icon) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	border-radius: 9px !important;
	border: 1px solid transparent !important;
	background: transparent !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
	float: none !important;
	transform: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !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 {
	background: rgba(141, 56, 255, 0.22) !important;
	border-color: rgba(255, 11, 139, 0.35) !important;
	color: #fff !important;
}

html body #siropuChat #siropuChatEditor .fr-toolbar .fr-btn > svg,
html body #siropuChat #siropuChatEditor .fr-toolbar .fr-btn > i,
html body #siropuChat #siropuChatEditor .fr-toolbar .fr-btn > span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	margin: 0 !important;
}

/* —— Froala box: neon frame, compact radius —— */
html body #siropuChat #siropuChatEditor .fr-box,
html body #siropuChat #siropuChatEditor .fr-box.fr-basic {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: var(--g6m388-r) !important;
	border: 1px solid rgba(141, 56, 255, 0.38) !important;
	background: rgba(12, 10, 18, 0.92) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 0 16px rgba(141, 56, 255, 0.1) !important;
	overflow: hidden !important;
	box-sizing: border-box !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(141, 56, 255, 0.3),
		0 0 20px rgba(255, 11, 139, 0.2) !important;
}

/* —— Input surface: compact, no stacked min-heights —— */
html body #siropuChat #siropuChatEditor .fr-wrapper,
html body #siropuChat #siropuChatEditor .fr-box.fr-basic.fr-top .fr-wrapper {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: var(--g6m388-input-h) !important;
	height: auto !important;
	max-height: 7.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
}

/* Froala often injects an empty second toolbar that adds phantom height */
html body #siropuChat #siropuChatEditor .fr-second-toolbar {
	display: none !important;
	min-height: 0 !important;
	height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
}

/* Beat repair-v373 min-height:70px on the editor shell */
html[data-logged-in="true"] #siropuChat #siropuChatEditor,
html[data-logged-in="true"] #siropuChat .block-footer {
	min-height: 0 !important;
	height: auto !important;
}

/* Froala contenteditable only — NEVER force the source textarea/.input visible
   (that caused a ghost duplicate placeholder under the editor). */
html body #siropuChat #siropuChatEditor .fr-element,
html body #siropuChat #siropuChatEditor .fr-view,
html body #siropuChat #siropuChatEditor .fr-element.fr-view {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: var(--g6m388-input-h) !important;
	height: auto !important;
	max-height: 7.5rem !important;
	margin: 0 !important;
	padding: 0.7rem 0.9rem !important;
	border: 0 !important;
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: rgba(244, 241, 251, 0.96) !important;
	font-size: 0.95rem !important;
	line-height: 1.35 !important;
	box-sizing: border-box !important;
	overflow-wrap: anywhere !important;
}

/* Source XF textarea stays hidden once Froala (.fr-box) has mounted */
html body #siropuChat #siropuChatEditor .fr-box ~ textarea.input.js-editor,
html body #siropuChat #siropuChatEditor .fr-box ~ textarea.u-jsOnly,
html body #siropuChat #siropuChatEditor textarea.input.js-editor.u-jsOnly {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	position: absolute !important;
	width: 1px !important;
	clip: rect(0, 0, 0, 0) !important;
}

/* Placeholder vertically centered in compact input */
html body #siropuChat #siropuChatEditor .fr-placeholder {
	display: flex !important;
	align-items: center !important;
	top: 0 !important;
	bottom: auto !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	min-height: var(--g6m388-input-h) !important;
	height: var(--g6m388-input-h) !important;
	margin: 0 !important;
	padding: 0 0.9rem !important;
	box-sizing: border-box !important;
	color: rgba(180, 174, 205, 0.55) !important;
	font-size: 0.92rem !important;
	font-style: normal !important;
	line-height: 1.35 !important;
	opacity: 1 !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

/* Kill XF/Froala twin placeholder (::before) — only .fr-placeholder may show */
html body #siropuChat #siropuChatEditor .fr-element[data-placeholder]::before,
html body #siropuChat #siropuChatEditor .fr-element[data-placeholder]:empty::before,
html body #siropuChat #siropuChatEditor .fr-element.fr-view[data-placeholder]::before {
	content: none !important;
	display: none !important;
}

/* Send button — compact square beside/below, never force editor height */
html body #siropuChat #siropuChatEditor .g6m-chat-send,
html body #siropuChat #siropuChatEditor button[type="submit"],
html body #siropuChat #siropuChatEditor .button--primary {
	align-self: flex-end !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 48px !important;
	min-height: 48px !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 0.85rem !important;
	border-radius: 12px !important;
	border: 0 !important;
	background: linear-gradient(135deg, var(--g6m388-pink), var(--g6m388-violet)) !important;
	box-shadow: 0 8px 20px rgba(255, 11, 139, 0.28) !important;
}

/* —— Responsive —— */
@media (max-width: 900px) {
	html body #siropuChat {
		--g6m388-input-h: 50px;
		--g6m388-icon: 36px;
		--g6m388-r: 14px;
	}
	html body #siropuChat #siropuChatEditor {
		padding: 0.4rem 0.5rem 0.5rem !important;
	}
}

@media (max-width: 480px) {
	html body #siropuChat {
		--g6m388-input-h: 48px;
		--g6m388-icon: 34px;
	}
	html body #siropuChat #siropuChatEditor .fr-toolbar {
		gap: 0.2rem !important;
		padding: 0.25rem 0.2rem !important;
	}
	html body #siropuChat #siropuChatEditor .fr-element {
		padding: 0.6rem 0.75rem !important;
		font-size: 0.92rem !important;
	}
}

/* END G6M_CHAT_EDITOR_COMPACT_V388 */