/* G6M_MESSAGE_ACTIONS_RESPONSIVE_V833
   Fix post action bar + similar threads overflow on mobile.
   No horizontal scrollbar — flex-wrap layout.
*/

/* ——— Parents: allow shrinking ——— */
html body .message,
html body .message-inner,
html body .message-cell,
html body .message-cell--main,
html body .message-main,
html body .message-content,
html body .message-footer,
html body .message-actionBar,
html body .actionBar {
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

/* ——— Action bar: wrap, never scroll ——— */
html body .message-actionBar,
html body .message-footer .actionBar,
html body .actionBar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	align-content: flex-start !important;
	gap: 0.45rem 0.55rem !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: visible !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

html body .message-actionBar::-webkit-scrollbar,
html body .actionBar::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

html body .message-actionBar .actionBar-set--external,
html body .message-actionBar .actionBar-set--internal,
html body .message-footer .actionBar-set--external,
html body .message-footer .actionBar-set--internal,
html body .actionBar-set--external,
html body .actionBar-set--internal {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.35rem 0.45rem !important;
	min-width: 0 !important;
	max-width: 100% !important;
	white-space: normal !important;
	overflow: visible !important;
}

/* Reaction pill slot */
html body .g6m-rp-bar-slot,
html body .g6m-rp-bar-slot--actionBar,
html body .js-g6mRpBarSlot {
	display: flex !important;
	flex: 1 1 auto !important;
	align-items: center !important;
	min-width: 0 !important;
	max-width: 100% !important;
	width: auto !important;
	margin: 0 !important;
	overflow: visible !important;
}

html body .g6m-rp-bar {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.4rem !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 2.4rem !important;
	padding: 0.35rem 0.85rem !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

html body .g6m-rp-bar__track {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.4rem !important;
	max-width: 100% !important;
	overflow: visible !important;
	overflow-x: visible !important;
}

/* Actions remain tappable */
html body .message-actionBar .actionBar-action,
html body .message-footer .actionBar-action,
html body .actionBar-action {
	flex: 0 1 auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

html body .actionBar-action--reply {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.4rem !important;
	min-height: 2.4rem !important;
	padding: 0.4rem 0.9rem !important;
	flex: 0 0 auto !important;
}

/* ——— Tablet ——— */
@media (max-width: 1024px) {
	html body .g6m-rp-bar-slot,
	html body .g6m-rp-bar-slot--actionBar {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	html body .g6m-rp-bar {
		width: 100% !important;
		justify-content: flex-start !important;
	}

	html body .message-actionBar .actionBar-set--external,
	html body .message-footer .actionBar-set--external {
		flex: 1 1 100% !important;
		width: 100% !important;
	}
}

/* ——— Mobile ——— */
@media (max-width: 767px) {
	html body .message-actionBar,
	html body .message-footer .actionBar,
	html body .actionBar {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.55rem !important;
		overflow: visible !important;
		overflow-x: visible !important;
	}

	html body .g6m-rp-bar-slot,
	html body .g6m-rp-bar-slot--actionBar {
		flex: 0 0 auto !important;
		width: 100% !important;
	}

	html body .g6m-rp-bar {
		width: 100% !important;
		justify-content: center !important;
		padding: 0.4rem 0.65rem !important;
		--g6m-rpe-btn: 30px !important;
		--g6m-rpe-h: auto !important;
		min-height: 2.75rem !important;
	}

	html body .g6m-rp-bar__track {
		justify-content: center !important;
		width: 100% !important;
	}

	html body .message-actionBar .actionBar-set--external,
	html body .message-footer .actionBar-set--external,
	html body .message-actionBar .actionBar-set--internal,
	html body .message-footer .actionBar-set--internal {
		width: 100% !important;
		justify-content: flex-start !important;
		gap: 0.4rem !important;
	}

	html body .actionBar-action--reply {
		min-height: 2.75rem !important;
		padding: 0.5rem 1rem !important;
		font-size: 0.95rem !important;
		font-weight: 700 !important;
	}

	html body .actionBar-action--reply:active {
		transform: scale(0.98) !important;
	}

	html body .message-actionBar .actionBar-action,
	html body .message-footer .actionBar-action {
		min-height: 2.4rem !important;
		padding: 0.35rem 0.65rem !important;
	}
}

/* ——— Small phones ——— */
@media (max-width: 479px) {
	html body .g6m-rp-bar {
		--g6m-rpe-btn: 28px !important;
		padding: 0.35rem 0.5rem !important;
		gap: 0.3rem !important;
		justify-content: flex-start !important;
	}

	html body .g6m-rp-bar__track {
		justify-content: flex-start !important;
		gap: 0.3rem !important;
	}

	html body .actionBar-action--reply {
		flex: 1 1 auto !important;
		min-width: 7.5rem !important;
	}

	/* Compact secondary labels on very small screens */
	html body .actionBar-action--report .actionBar-action-label,
	html body .actionBar-action--edit .actionBar-action-label,
	html body .actionBar-action--history .actionBar-action-label,
	html body .actionBar-action--delete .actionBar-action-label {
		/* keep text; wrapping handles density */
	}
}

/* ——— Similar threads: never overflow viewport ——— */
html body .g6m-similar-threads,
html body .block.g6m-similar-threads,
html body .similarthreads-container,
html body #similarthreads-result {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

html body .g6m-similar-threads .block-container,
html body .g6m-similar-threads .block-body,
html body .g6m-similar-threads .structItemContainer {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

html body .g6m-similar-threads .structItem,
html body .g6m-similar-threads .contentRow {
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

html body .g6m-similar-threads .structItem-title,
html body .g6m-similar-threads .structItem-title a {
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
	max-width: 100% !important;
}

@media (max-width: 767px) {
	html body .g6m-similar-threads .structItem,
	html body .g6m-similar-threads .structItemContainer-group > .structItem {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.35rem !important;
		padding: 0.65rem 0.7rem !important;
	}

	html body .g6m-similar-threads .structItem-cell,
	html body .g6m-similar-threads .structItem-cell--main,
	html body .g6m-similar-threads .structItem-cell--meta,
	html body .g6m-similar-threads .structItem-cell--latest {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		white-space: normal !important;
	}

	html body .g6m-similar-threads .structItem-cell--meta,
	html body .g6m-similar-threads .structItem-cell--latest {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 0.35rem 0.85rem !important;
		align-items: center !important;
	}

	html body .g6m-similar-threads .structItem-minor,
	html body .g6m-similar-threads .contentRow-minor {
		white-space: normal !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body .actionBar-action--reply:active {
		transform: none !important;
	}
}