/**
 * MuzeGirl composer visual contract
 *
 * Required structural classes/data hooks:
 * .msp-composer[data-msp-composer]
 *   .msp-composer-card with [data-msp-composer-open]
 *   .msp-composer-modal[data-msp-composer-modal][hidden]
 *     .msp-composer-backdrop[data-msp-composer-close]
 *     .msp-composer-dialog[data-msp-composer-dialog]
 *       form.msp-composer-form[data-msp-composer-form]
 *
 * Optional styled regions include .msp-composer-author,
 * .msp-composer-kind-grid, .msp-composer-panel, .msp-composer-dropzone,
 * .msp-composer-media-preview, .msp-composer-settings,
 * .msp-composer-progress, .msp-composer-status, and
 * .msp-composer-footer. JavaScript behavior is attached only through data-msp-*
 * attributes so markup can be rearranged without changing the controller.
 */

.msp-composer {
	--msp-composer-pink: var(--msp-pink, #ff2f70);
	--msp-composer-pink-dark: var(--msp-pink-2, #d4238c);
	--msp-composer-purple: var(--msp-purple, #7c3cff);
	--msp-composer-panel: var(--msp-panel, #17171c);
	--msp-composer-panel-2: var(--msp-panel-2, #202027);
	--msp-composer-canvas: #0d0d11;
	--msp-composer-line: var(--msp-line, rgba(255, 255, 255, .1));
	--msp-composer-text: var(--msp-text, #fff);
	--msp-composer-muted: var(--msp-muted, #aaaab7);
	--msp-composer-danger: #ff526f;
	--msp-composer-success: #2bd68f;
	--msp-composer-radius: 18px;
	width: 100%;
	min-width: 0;
	color: var(--msp-composer-text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.msp-composer,
.msp-composer * {
	box-sizing: border-box;
}

.msp-composer button,
.msp-composer input,
.msp-composer textarea,
.msp-composer select {
	font: inherit;
}

.msp-composer button {
	touch-action: manipulation;
}

.msp-composer [hidden] {
	display: none !important;
}

html.msp-composer-open,
body.msp-composer-open {
	overflow: hidden !important;
	overscroll-behavior: none;
}

/* Compact Facebook-style owner card shown directly above the feed. */
.msp-composer-card {
	overflow: hidden;
	border: 1px solid var(--msp-composer-line);
	border-radius: var(--msp-composer-radius);
	background:
		radial-gradient(circle at 96% -20%, rgba(124, 60, 255, .13), transparent 38%),
		linear-gradient(145deg, rgba(29, 29, 35, .98), var(--msp-composer-panel));
	box-shadow: 0 12px 38px rgba(0, 0, 0, .22);
}

.msp-composer-card-main {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 15px 16px 12px;
}

.msp-composer-avatar {
	display: block;
	width: 48px;
	height: 48px;
	border: 2px solid rgba(255, 47, 112, .72);
	border-radius: 50%;
	object-fit: cover;
	background: #292931;
	box-shadow: 0 5px 16px rgba(0, 0, 0, .28);
}

.msp-composer-prompt {
	display: flex;
	width: 100%;
	min-height: 46px;
	align-items: center;
	padding: 10px 16px;
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 999px;
	color: #d8d8df;
	background: rgba(255, 255, 255, .055);
	font-weight: 650;
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.msp-composer-prompt:hover {
	border-color: rgba(255, 47, 112, .46);
	background: rgba(255, 255, 255, .085);
	transform: translateY(-1px);
}

.msp-composer-prompt:focus-visible,
.msp-composer button:focus-visible,
.msp-composer input:focus-visible,
.msp-composer textarea:focus-visible,
.msp-composer select:focus-visible {
	outline: 3px solid rgba(255, 47, 112, .28);
	outline-offset: 2px;
}

.msp-composer-quick {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 4px;
	padding: 0 10px 10px;
	border-top: 1px solid rgba(255, 255, 255, .055);
}

.msp-composer-quick button {
	display: inline-flex;
	min-height: 43px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px 10px;
	border: 0;
	border-radius: 10px;
	color: #d9d9e0;
	background: transparent;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}

.msp-composer-quick button:hover {
	color: #fff;
	background: rgba(255, 47, 112, .1);
}

.msp-composer-quick-icon {
	display: grid;
	width: 27px;
	height: 27px;
	place-items: center;
	border-radius: 9px;
	color: #fff;
	background: linear-gradient(135deg, var(--msp-composer-pink), var(--msp-composer-purple));
	font-size: 14px;
}

/* Modal on desktop, full-screen creator sheet on phones. */
.msp-composer-modal {
	position: fixed;
	z-index: 1000000;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 18px;
	overflow: hidden;
	overscroll-behavior: contain;
}

.msp-composer-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: rgba(0, 0, 0, .78);
	cursor: default;
}

@supports (backdrop-filter: blur(6px)) {
	.msp-composer-backdrop {
		backdrop-filter: blur(6px);
	}
}

.msp-composer-dialog {
	position: relative;
	display: flex;
	width: min(760px, 100%);
	height: min(920px, calc(100vh - 36px));
	height: min(920px, calc(100dvh - 36px));
	max-height: calc(100vh - 36px);
	max-height: calc(100dvh - 36px);
	min-height: min(420px, calc(100vh - 36px));
	min-height: min(420px, calc(100dvh - 36px));
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(255, 47, 112, .48);
	border-radius: 22px;
	color: var(--msp-composer-text);
	background: var(--msp-composer-panel);
	box-shadow: 0 30px 110px rgba(0, 0, 0, .72), 0 0 0 1px rgba(255, 255, 255, .025) inset;
	animation: msp-composer-enter .2s ease-out both;
}

@keyframes msp-composer-enter {
	from { opacity: 0; transform: translateY(12px) scale(.985); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.msp-composer-header {
	display: flex;
	min-height: 66px;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	gap: 16px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--msp-composer-line);
	background: rgba(20, 20, 25, .98);
}

.msp-composer-heading {
	min-width: 0;
	margin: 0;
	color: #fff;
	font-size: 20px;
	font-weight: 900;
	line-height: 1.15;
}

.msp-composer-heading small {
	display: block;
	overflow: hidden;
	margin-top: 4px;
	color: var(--msp-composer-muted);
	font-size: 11px;
	font-weight: 650;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msp-composer-close {
	display: grid;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	place-items: center;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: #303039;
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
}

.msp-composer-close:hover {
	background: #42424d;
}

.msp-composer-form {
	display: flex;
	min-height: 0;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
}

.msp-composer-scroll {
	min-height: 0;
	flex: 1;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 17px 19px 24px;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-color: var(--msp-composer-pink) #26262e;
	scrollbar-gutter: stable;
	scrollbar-width: auto;
	touch-action: pan-y;
}

.msp-composer-scroll:focus-visible {
	outline: 2px solid rgba(255, 47, 112, .55);
	outline-offset: -2px;
}

.msp-composer-scroll::-webkit-scrollbar {
	width: 12px;
}

.msp-composer-scroll::-webkit-scrollbar-track {
	background: #26262e;
}

.msp-composer-scroll::-webkit-scrollbar-thumb {
	border: 3px solid #26262e;
	border-radius: 999px;
	background: linear-gradient(var(--msp-composer-pink), var(--msp-composer-purple));
}

.msp-composer-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--msp-composer-pink);
}

.msp-composer-author {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	margin-bottom: 12px;
}

.msp-composer-author .msp-composer-avatar {
	width: 44px;
	height: 44px;
}

.msp-composer-author-copy {
	display: flex;
	min-width: 0;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px 8px;
}

.msp-composer-author-copy strong {
	max-width: 100%;
	overflow: hidden;
	color: #fff;
	font-size: 14px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msp-composer-audience-wrap {
	position: relative;
	display: inline-flex;
	min-width: 0;
	align-items: center;
}

.msp-composer-audience {
	min-height: 31px;
	max-width: 210px;
	padding: 5px 28px 5px 9px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	color: #ededf2;
	background: #292930;
	font-size: 11px;
	font-weight: 800;
	cursor: pointer;
}

.msp-composer-label {
	display: grid;
	gap: 7px;
	margin: 0 0 13px;
	color: #ececf1;
	font-size: 13px;
	font-weight: 800;
}

.msp-composer-label > small,
.msp-composer-help {
	color: var(--msp-composer-muted);
	font-size: 11px;
	font-weight: 550;
	line-height: 1.45;
}

.msp-composer input[type="text"],
.msp-composer input[type="number"],
.msp-composer input[type="datetime-local"],
.msp-composer input[type="url"],
.msp-composer textarea,
.msp-composer select:not(.msp-composer-audience) {
	width: 100%;
	min-height: 45px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 10px;
	outline: none;
	color: #fff;
	background: var(--msp-composer-canvas);
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.msp-composer textarea {
	min-height: 116px;
	resize: vertical;
	line-height: 1.55;
}

.msp-composer-caption {
	min-height: 126px !important;
	padding: 10px 2px 12px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-size: clamp(17px, 2.5vw, 21px) !important;
	font-weight: 500;
	box-shadow: none !important;
}

.msp-composer-caption::placeholder {
	color: #8d8d99;
}

.msp-composer input:focus,
.msp-composer textarea:focus,
.msp-composer select:focus {
	border-color: var(--msp-composer-pink);
	box-shadow: 0 0 0 3px rgba(255, 47, 112, .12);
}

.msp-composer-caption:focus {
	box-shadow: 0 2px 0 rgba(255, 47, 112, .45) !important;
}

.msp-composer-title-row {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 11px;
}

.msp-composer-title-row input {
	min-height: 39px !important;
	font-size: 13px;
}

.msp-composer-optional {
	color: var(--msp-composer-muted);
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
}

.msp-composer-kind-box {
	padding: 12px;
	border: 1px solid var(--msp-composer-line);
	border-radius: 14px;
	background: rgba(255, 255, 255, .026);
}

.msp-composer-section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
	color: #f6f6f8;
	font-size: 13px;
	font-weight: 850;
}

.msp-composer-section-heading small {
	color: var(--msp-composer-muted);
	font-size: 10px;
	font-weight: 600;
}

.msp-composer-kind-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 7px;
}

.msp-composer-kind {
	position: relative;
	display: grid;
	min-height: 72px;
	place-items: center;
	align-content: center;
	gap: 5px;
	padding: 8px 6px;
	border: 1px solid transparent;
	border-radius: 11px;
	color: #d7d7de;
	background: rgba(255, 255, 255, .04);
	font-size: 10px;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.msp-composer-kind:hover {
	border-color: rgba(255, 47, 112, .38);
	background: rgba(255, 47, 112, .08);
	transform: translateY(-1px);
}

.msp-composer-kind.is-active {
	border-color: rgba(255, 47, 112, .7);
	color: #fff;
	background: linear-gradient(145deg, rgba(255, 47, 112, .2), rgba(124, 60, 255, .13));
	box-shadow: 0 7px 18px rgba(255, 47, 112, .09);
}

.msp-composer-kind-icon {
	display: grid;
	width: 29px;
	height: 29px;
	place-items: center;
	border-radius: 9px;
	color: #fff;
	background: #3a3a44;
	font-size: 15px;
}

.msp-composer-kind.is-active .msp-composer-kind-icon {
	background: linear-gradient(135deg, var(--msp-composer-pink), var(--msp-composer-purple));
}

.msp-composer-panel {
	margin-top: 13px;
	padding: 14px;
	border: 1px solid rgba(255, 47, 112, .2);
	border-radius: 13px;
	background: linear-gradient(145deg, rgba(255, 47, 112, .055), rgba(124, 60, 255, .035));
}

.msp-composer-panel > :last-child {
	margin-bottom: 0;
}

.msp-composer-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 12px;
}

.msp-composer-field-wide {
	grid-column: 1 / -1;
}

.msp-composer-dropzone {
	position: relative;
	display: grid;
	min-height: 102px;
	place-items: center;
	align-content: center;
	gap: 7px;
	margin-top: 12px;
	padding: 17px;
	border: 1px dashed rgba(255, 255, 255, .2);
	border-radius: 13px;
	color: #d9d9e0;
	background: rgba(8, 8, 11, .45);
	text-align: center;
	transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.msp-composer-dropzone.is-dragover {
	border-color: var(--msp-composer-pink);
	background: rgba(255, 47, 112, .11);
	transform: scale(.995);
}

.msp-composer-dropzone > strong {
	font-size: 13px;
}

.msp-composer-dropzone > small {
	color: var(--msp-composer-muted);
	font-size: 10px;
}

.msp-composer-media-button,
.msp-composer-secondary-button {
	display: inline-flex;
	min-height: 39px;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 13px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 9px;
	color: #fff;
	background: #33333c;
	font-size: 12px;
	font-weight: 850;
	cursor: pointer;
}

.msp-composer-media-button:hover,
.msp-composer-secondary-button:hover {
	border-color: rgba(255, 47, 112, .5);
	background: #41414c;
}

.msp-composer-media-preview {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 9px;
	margin-top: 11px;
}

.msp-composer-media-item {
	position: relative;
	min-width: 0;
	overflow: hidden;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	background: #0b0b0e;
	content-visibility: auto;
}

.msp-composer-media-item > img,
.msp-composer-media-item > video {
	display: block;
	width: 100%;
	height: 135px;
	object-fit: cover;
	background: #08080a;
}

.msp-composer-media-item figcaption {
	display: grid;
	min-width: 0;
	gap: 2px;
	padding: 8px 9px 9px;
}

.msp-composer-media-name {
	overflow: hidden;
	color: #ededf2;
	font-size: 10px;
	font-weight: 750;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msp-composer-media-item figcaption small {
	color: var(--msp-composer-muted);
	font-size: 9px;
}

.msp-composer-media-actions {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	gap: 4px;
}

.msp-composer-media-actions button {
	display: grid;
	width: 31px;
	height: 31px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 8px;
	color: #fff;
	background: rgba(13, 13, 17, .86);
	font-size: 16px;
	font-weight: 850;
	cursor: pointer;
}

.msp-composer-media-actions button:hover {
	background: var(--msp-composer-pink);
}

.msp-composer-media-actions button:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.msp-composer-poll-options {
	display: grid;
	gap: 8px;
}

.msp-composer-poll-option {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 42px;
	gap: 7px;
}

.msp-composer-poll-option button {
	display: grid;
	width: 42px;
	height: 45px;
	place-items: center;
	border: 1px solid rgba(255, 82, 111, .25);
	border-radius: 10px;
	color: #ffb6c4;
	background: rgba(255, 82, 111, .08);
	font-size: 21px;
	cursor: pointer;
}

.msp-composer-poll-option button:hover {
	color: #fff;
	background: rgba(255, 82, 111, .25);
}

.msp-composer-settings {
	display: grid;
	gap: 8px;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid var(--msp-composer-line);
}

.msp-composer-setting-row {
	display: flex;
	min-height: 46px;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 11px;
	border: 1px solid rgba(255, 255, 255, .075);
	border-radius: 11px;
	background: rgba(255, 255, 255, .025);
}

.msp-composer-setting-copy {
	min-width: 0;
}

.msp-composer-setting-copy strong,
.msp-composer-setting-copy small {
	display: block;
}

.msp-composer-setting-copy strong {
	color: #ededf2;
	font-size: 12px;
}

.msp-composer-setting-copy small {
	margin-top: 3px;
	color: var(--msp-composer-muted);
	font-size: 9px;
}

.msp-composer-check {
	position: relative;
	display: inline-flex;
	width: 45px;
	height: 25px;
	flex: 0 0 45px;
	align-items: center;
	cursor: pointer;
}

.msp-composer-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.msp-composer-check span {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 999px;
	background: #35353f;
	transition: background .16s ease, border-color .16s ease;
}

.msp-composer-check span::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .28);
	transition: transform .16s ease;
}

.msp-composer-check input:checked + span {
	border-color: var(--msp-composer-pink);
	background: linear-gradient(135deg, var(--msp-composer-pink), var(--msp-composer-pink-dark));
}

.msp-composer-check input:checked + span::after {
	transform: translateX(20px);
}

.msp-composer-check input:focus-visible + span {
	outline: 3px solid rgba(255, 47, 112, .28);
	outline-offset: 2px;
}

.msp-composer-consent {
	display: grid;
	grid-template-columns: 19px minmax(0, 1fr);
	gap: 9px;
	align-items: start;
	margin-top: 13px;
	padding: 11px;
	border: 1px solid rgba(43, 214, 143, .22);
	border-radius: 11px;
	color: #d8efe5;
	background: rgba(43, 214, 143, .055);
	font-size: 10px;
	font-weight: 650;
	line-height: 1.45;
}

.msp-composer-consent input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--msp-composer-pink);
}

.msp-composer-progress {
	margin: 12px 0 0;
	padding: 10px 11px;
	border: 1px solid rgba(255, 47, 112, .18);
	border-radius: 10px;
	background: rgba(255, 47, 112, .045);
}

.msp-composer-progress-track {
	position: relative;
	height: 7px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, .09);
}

.msp-composer-progress-bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--msp-progress, 0%);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--msp-composer-pink), var(--msp-composer-purple));
	box-shadow: 0 0 14px rgba(255, 47, 112, .38);
	transition: width .18s ease;
}

.msp-composer-progress-bar.is-indeterminate {
	width: 35%;
	animation: msp-composer-progress 1.15s ease-in-out infinite;
}

@keyframes msp-composer-progress {
	0% { transform: translateX(-120%); }
	100% { transform: translateX(385%); }
}

.msp-composer-progress-text {
	display: block;
	margin-top: 7px;
	color: #d8d8e0;
	font-size: 10px;
	font-weight: 750;
}

.msp-composer-status {
	min-height: 0;
	margin: 0;
	color: var(--msp-composer-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
}

.msp-composer-status:empty {
	display: none;
}

.msp-composer-status.is-error {
	color: #ffbcc9;
}

.msp-composer-status.is-success {
	color: #b8f5d9;
}

.msp-composer-footer {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	gap: 12px;
	padding: 12px 17px;
	border-top: 1px solid var(--msp-composer-line);
	background: rgba(20, 20, 25, .985);
	box-shadow: 0 -8px 22px rgba(0, 0, 0, .16);
}

.msp-composer-footer-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 7px;
}

.msp-composer-submit,
.msp-composer-draft,
.msp-composer-schedule,
.msp-composer-reset {
	display: inline-flex;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 15px;
	border-radius: 10px;
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
	transition: filter .16s ease, transform .16s ease, opacity .16s ease;
}

.msp-composer-submit {
	border: 0;
	background: linear-gradient(135deg, var(--msp-composer-pink), #f3065a);
	box-shadow: 0 8px 22px rgba(255, 47, 112, .22);
}

.msp-composer-draft,
.msp-composer-schedule,
.msp-composer-reset {
	border: 1px solid rgba(255, 255, 255, .13);
	background: #303039;
}

.msp-composer-reset {
	padding-inline: 11px;
	color: #d5d5dd;
	background: transparent;
}

.msp-composer-submit:hover,
.msp-composer-draft:hover,
.msp-composer-schedule:hover,
.msp-composer-reset:hover {
	filter: brightness(1.11);
	transform: translateY(-1px);
}

.msp-composer button:disabled,
.msp-composer.is-busy button {
	opacity: .5;
	cursor: wait;
	transform: none;
}

.msp-post-is-new {
	animation: msp-post-arrive .42s ease-out both;
}

@keyframes msp-post-arrive {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
	.msp-composer-kind-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.msp-composer-media-preview {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.msp-composer-footer {
		align-items: stretch;
		flex-direction: column;
	}

	.msp-composer-footer-actions {
		width: 100%;
	}

	.msp-composer-submit,
	.msp-composer-draft,
	.msp-composer-schedule {
		flex: 1;
	}
}

@media (max-width: 580px) {
	.msp-composer-card-main {
		grid-template-columns: 42px minmax(0, 1fr);
		padding: 12px;
	}

	.msp-composer-card-main .msp-composer-avatar {
		width: 42px;
		height: 42px;
	}

	.msp-composer-prompt {
		min-height: 42px;
		padding-inline: 13px;
		font-size: 13px;
	}

	.msp-composer-quick {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.msp-composer-modal {
		align-items: end;
		padding: 0;
	}

	.msp-composer-backdrop {
		backdrop-filter: none;
	}

	.msp-composer-dialog {
		width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		min-height: 100dvh;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		animation-name: msp-composer-mobile-enter;
	}

	@keyframes msp-composer-mobile-enter {
		from { opacity: .92; transform: translateY(28px); }
		to { opacity: 1; transform: translateY(0); }
	}

	.msp-composer-header {
		min-height: 58px;
		padding: max(9px, env(safe-area-inset-top)) 12px 9px;
	}

	.msp-composer-heading {
		font-size: 17px;
	}

	.msp-composer-scroll {
		padding: 14px 12px 24px;
	}

	.msp-composer-caption {
		min-height: 108px !important;
		font-size: 17px !important;
	}

	.msp-composer-kind-box {
		padding: 10px;
	}

	.msp-composer-kind-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}

	.msp-composer-kind {
		min-height: 67px;
	}

	.msp-composer-field-grid {
		grid-template-columns: 1fr;
	}

	.msp-composer-field-wide {
		grid-column: auto;
	}

	.msp-composer-dropzone {
		min-height: 88px;
		padding: 13px;
	}

	.msp-composer-media-item > img,
	.msp-composer-media-item > video {
		height: 125px;
	}

	.msp-composer-media-actions button {
		width: 35px;
		height: 35px;
	}

	.msp-composer-setting-row {
		min-height: 50px;
	}

	.msp-composer-footer {
		padding: 10px 10px max(10px, env(safe-area-inset-bottom));
	}

	.msp-composer-footer-actions {
		gap: 5px;
	}

	.msp-composer-submit,
	.msp-composer-draft,
	.msp-composer-schedule,
	.msp-composer-reset {
		min-height: 44px;
		padding-inline: 10px;
		font-size: 11px;
	}
}

@media (max-width: 370px) {
	.msp-composer-kind-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.msp-composer-media-preview {
		grid-template-columns: 1fr;
	}

	.msp-composer-footer-actions {
		flex-wrap: wrap;
	}

	.msp-composer-submit {
		flex-basis: 100%;
		order: -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msp-composer *,
	.msp-composer *::before,
	.msp-composer *::after,
	.msp-post-is-new {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}

@media (forced-colors: active) {
	.msp-composer-card,
	.msp-composer-dialog,
	.msp-composer-panel,
	.msp-composer-dropzone,
	.msp-composer-setting-row {
		border: 1px solid CanvasText;
	}

	.msp-composer-kind.is-active,
	.msp-composer-submit {
		border: 2px solid Highlight;
	}
}

/* Text-background picker. Values map to a strict server-side allow list. */
.msp-composer-backgrounds{margin:0 0 13px;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025)}
.msp-background-palette{display:grid;grid-template-columns:repeat(8,minmax(34px,1fr));gap:7px}.msp-background-swatch{position:relative;display:grid;aspect-ratio:1;min-height:38px;place-items:center;padding:0;border:2px solid transparent;border-radius:10px;cursor:pointer;overflow:hidden}.msp-background-swatch:hover{transform:translateY(-1px)}.msp-background-swatch.is-active{border-color:#fff;box-shadow:0 0 0 3px rgba(255,47,112,.34)}.msp-background-swatch span{color:#fff;font-size:19px;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.5)}.msp-background-swatch.msp-text-bg--none{background:repeating-linear-gradient(45deg,#2d2d35,#2d2d35 6px,#202027 6px,#202027 12px)!important}
.msp-composer-caption.msp-text-bg--velvet,.msp-composer-caption.msp-text-bg--sunset,.msp-composer-caption.msp-text-bg--neon,.msp-composer-caption.msp-text-bg--ocean,.msp-composer-caption.msp-text-bg--violet,.msp-composer-caption.msp-text-bg--gold,.msp-composer-caption.msp-text-bg--midnight{min-height:210px!important;padding:28px!important;border-radius:15px!important;color:#fff!important;font-size:clamp(19px,3vw,27px)!important;font-weight:800!important;line-height:1.38!important;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)!important}.msp-composer-caption.msp-text-bg--velvet::placeholder,.msp-composer-caption.msp-text-bg--sunset::placeholder,.msp-composer-caption.msp-text-bg--neon::placeholder,.msp-composer-caption.msp-text-bg--ocean::placeholder,.msp-composer-caption.msp-text-bg--violet::placeholder,.msp-composer-caption.msp-text-bg--gold::placeholder,.msp-composer-caption.msp-text-bg--midnight::placeholder{color:rgba(255,255,255,.74)}
.msp-text-bg--velvet{background:radial-gradient(circle at 20% 12%,rgba(255,91,154,.58),transparent 34%),linear-gradient(145deg,#6d113e,#250b2b 68%,#140a1d)!important}.msp-text-bg--sunset{background:linear-gradient(145deg,#ff335f,#ff6d42 52%,#8338ec)!important}.msp-text-bg--neon{background:radial-gradient(circle at 72% 18%,rgba(0,255,229,.48),transparent 35%),linear-gradient(145deg,#171126,#7b1eff 55%,#ff2f70)!important}.msp-text-bg--ocean{background:radial-gradient(circle at 24% 18%,rgba(71,231,255,.56),transparent 33%),linear-gradient(145deg,#062c4e,#0f6a83 58%,#1b205c)!important}.msp-text-bg--violet{background:radial-gradient(circle at 70% 15%,rgba(255,100,217,.5),transparent 34%),linear-gradient(145deg,#25105d,#6c29d9 55%,#c1248f)!important}.msp-text-bg--gold{background:radial-gradient(circle at 26% 12%,rgba(255,239,164,.74),transparent 32%),linear-gradient(145deg,#8b4513,#d58a20 55%,#6d290d)!important}.msp-text-bg--midnight{background:radial-gradient(circle at 78% 16%,rgba(255,47,112,.3),transparent 30%),linear-gradient(145deg,#070711,#11172e 60%,#240d2a)!important}

@media(max-width:580px){.msp-background-palette{grid-template-columns:repeat(4,minmax(42px,1fr))}.msp-composer-caption.msp-text-bg--velvet,.msp-composer-caption.msp-text-bg--sunset,.msp-composer-caption.msp-text-bg--neon,.msp-composer-caption.msp-text-bg--ocean,.msp-composer-caption.msp-text-bg--violet,.msp-composer-caption.msp-text-bg--gold,.msp-composer-caption.msp-text-bg--midnight{min-height:180px!important;padding:22px 16px!important}}

/* Caption emoji controls share the same local picker as comments. */
.msp-composer-caption-wrap{margin-bottom:13px}.msp-composer-caption-wrap>.msp-composer-label{margin-bottom:4px}.msp-composer-caption-tools{display:flex;align-items:center;justify-content:space-between;gap:10px}.msp-composer-caption-tools>span{color:var(--msp-composer-muted);font-size:11px}.msp-composer .msp-emoji-toggle{min-height:38px;padding:7px 11px;border:1px solid rgba(255,255,255,.14);border-radius:11px;color:#fff;background:linear-gradient(135deg,rgba(255,47,112,.22),rgba(124,60,255,.2));font-size:12px;font-weight:850}.msp-composer .msp-emoji-toggle:hover,.msp-composer .msp-emoji-toggle[aria-expanded=true]{border-color:rgba(255,47,112,.62);background:linear-gradient(135deg,rgba(255,47,112,.34),rgba(124,60,255,.3))}.msp-composer-emoji-slot{min-width:0}.msp-composer .msp-emoji-picker{width:100%;margin-bottom:4px}.msp-composer .msp-emoji-picker button{color:#fff;box-shadow:none}.msp-composer .msp-emoji-tabs button{min-height:34px;padding:7px 10px;border:0;border-radius:999px;background:rgba(255,255,255,.045);font-size:12px}.msp-composer .msp-emoji-tabs button.is-active{background:linear-gradient(135deg,var(--msp-composer-pink),var(--msp-composer-purple))}.msp-composer .msp-emoji-close{width:34px;height:34px;min-height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.075);font-size:23px}.msp-composer .msp-emoji-option{min-width:42px;height:44px;min-height:44px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.035);font-size:25px}
@media(max-width:580px){.msp-composer-caption-tools{align-items:flex-start;flex-direction:column}.msp-composer-caption-tools>span{padding-left:2px}.msp-composer .msp-emoji-grid{grid-template-columns:repeat(6,minmax(40px,1fr))}}
.msp-composer .msp-emoji-option{width:100%;min-width:0}
@media(max-width:580px){.msp-composer .msp-emoji-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}