/* ==========================================================================
   MR — okno odpowiedzi na telefonie w ukladzie X.com
   --------------------------------------------------------------------------
   Dotyczy KAZDEJ odpowiedzi (post, komentarz, zdjecie, rolka, film), czyli
   pelnego publishera w trybie comment-new. Szablon oznacza go klasa
   .mr-reply-x (ajax.publisher.full.tpl).

   Uklad jak na X:
     Anuluj ............................. [Opublikuj]
     (o) autor @nick · czas            [miniatura]
      |  tekst wpisu (max 8 linijek)
      |  W odpowiedzi do @nick
     (o) Napisz odpowiedz
     ...
     ─────────────────────────────────────────────
     ikony narzedzi (plasko, bez ramki)

   Plik ladowany jako OSTATNI (_head.tpl), stad pojedyncze "important" —
   w mr-publisher-full.css na te same elementy poluje wiele regul z
   "important" dla stanow standalone / expanded / keyboard-open.
   Na komputerze nic sie nie zmienia (wszystko w @media do 767.98px).
   ========================================================================== */

/* miniatura istnieje tylko dla telefonu — na komputerze uklad bez zmian */
.mr-publisher-full-modal .mr-x-context-media {
	display: none;
}

@media (max-width: 767.98px) {

	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x {
		--mr-rx-line: #2f3336;
		--mr-rx-muted: #71767b;
		--mr-rx-text: #e7e9ea;
		--mr-rx-gutter: 16px;
		--mr-rx-avatar: 40px;
		background: #000;
	}

	/* ── Naglowek: Anuluj / Opublikuj ─────────────────────────────── */
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-standalone-reply-nav {
		display: none !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-compose-header {
		position: relative;
		width: 100%;
		height: calc(53px + env(safe-area-inset-top));
		min-height: calc(53px + env(safe-area-inset-top));
		flex: 0 0 auto;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0;
		padding: env(safe-area-inset-top) var(--mr-rx-gutter) 0;
		border: 0 !important;
		background: #000;
		box-shadow: none;
	}
	#modal.mr-publisher-android .mr-publisher-full-modal.mr-reply-x .mr-x-compose-header {
		height: calc(53px + var(--mr-android-top-inset, 32px));
		min-height: calc(53px + var(--mr-android-top-inset, 32px));
		padding-top: var(--mr-android-top-inset, 32px);
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-compose-collapse,
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-compose-title {
		display: none !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-compose-cancel {
		display: inline-flex !important;
		align-items: center;
		height: 36px;
		margin: 0 0 0 -2px;
		padding: 0 2px;
		border: 0;
		background: transparent;
		color: var(--mr-rx-text);
		font-size: 17px;
		font-weight: 400;
		line-height: 20px;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-compose-submit {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		height: 34px;
		min-width: 0;
		margin: 0 0 0 auto;
		padding: 0 16px;
		border: 0;
		border-radius: 999px;
		background: var(--mr-publisher-accent, #1d9bf0);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		line-height: 1;
		box-shadow: none;
		transition: opacity .15s ease;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}
	/* Jak na X: przycisk przygaszony, dopoki nie ma tresci ani zalacznika.
	   Tylko wyglad — klikniecie nadal obsluguje post.js (on pokaze blad). */
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x:has(#js_publisher-textarea:placeholder-shown):not(:has(.publisher-attachments:not(.x-hidden) > *)):not(:has(.publisher-scraper > *)):not(:has(.publisher-meta[style*="block"])) .mr-x-compose-submit {
		opacity: .5;
	}
	/* Drugi "Opublikuj" w stopce jest zbedny — na X jest tylko ten u gory. */
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .publisher-footer-buttons {
		display: none !important;
	}

	/* ── Wpis, na ktory odpowiadasz ───────────────────────────────── */
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-publisher-context-section {
		min-height: 0 !important;
		max-height: none !important;
		flex: 0 1 auto !important;
		display: block !important;
		margin: 0 !important;
		padding: 12px var(--mr-rx-gutter) 0 !important;
		border: 0 !important;
		background: #000 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		scrollbar-width: none;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-publisher-context-section::-webkit-scrollbar {
		display: none;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-publisher-context-section::after {
		display: none !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-native-context {
		min-height: 0 !important;
		max-height: none !important;
		flex: 0 0 auto !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-native-context-label,
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-native-context-viewport,
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-publisher-context-divider,
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-standalone-reply-meta {
		display: none !important;
	}

	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context {
		position: relative;
		display: grid !important;
		grid-template-columns: var(--mr-rx-avatar) minmax(0, 1fr) auto;
		column-gap: 12px;
		align-items: start;
		padding: 0 0 12px;
		color: var(--mr-rx-text);
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-avatar {
		position: relative;
		z-index: 1;
		width: var(--mr-rx-avatar);
		height: var(--mr-rx-avatar);
		border-radius: 50%;
		overflow: hidden;
		background: #16181c;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-avatar img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-avatar span {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--mr-rx-muted);
	}
	/* pionowa kreska watku: od awatara wpisu do awatara odpowiedzi */
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-thread {
		position: absolute;
		top: calc(var(--mr-rx-avatar) + 4px);
		bottom: -4px;
		left: calc(var(--mr-rx-avatar) / 2 - 1px);
		width: 2px;
		display: block !important;
		border-radius: 1px;
		background: var(--mr-rx-line);
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-copy {
		min-width: 0;
		padding: 0;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-author {
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 4px;
		margin: 0;
		font-size: 15px;
		line-height: 20px;
		white-space: nowrap;
		overflow: hidden;
	}
	/* kolejnosc skracania jak na X: najpierw @nick, potem nazwa; czas zostaje */
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-author strong {
		min-width: 0;
		max-width: 65%;
		flex: 0 0 auto;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var(--mr-rx-text);
		font-weight: 700;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-author > span {
		min-width: 0;
		flex: 0 1 auto;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var(--mr-rx-muted);
		font-weight: 400;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-author .mr-x-desktop-context-time {
		flex: 0 0 auto;
		overflow: visible;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-time small,
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-time .js_moment {
		color: var(--mr-rx-muted);
		font-size: 15px;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-verified {
		flex: 0 0 auto;
		color: var(--mr-publisher-accent, #1d9bf0);
		font-size: 15px;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 8;
		margin: 2px 0 0;
		overflow: hidden;
		color: var(--mr-rx-text);
		font-size: 15px;
		line-height: 20px;
		overflow-wrap: anywhere;
		white-space: normal;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-text p {
		margin: 0;
	}
	/* media w tekscie pokazuje miniatura z prawej, nie tresc */
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-text img:not(.emoji),
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-text video,
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-text iframe {
		display: none !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-text a {
		color: var(--mr-publisher-accent, #1d9bf0);
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-replying {
		margin: 12px 0 0;
		color: var(--mr-rx-muted);
		font-size: 15px;
		line-height: 20px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-desktop-context-replying span {
		color: var(--mr-publisher-accent, #1d9bf0);
	}

	/* miniatura zdjecia / filmu po prawej */
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-context-media {
		position: relative;
		width: 88px;
		height: 88px;
		display: block;
		margin: 2px 0 0;
		border: 1px solid var(--mr-rx-line);
		border-radius: 12px;
		overflow: hidden;
		background: #16181c;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-context-media img,
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-context-media video {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		pointer-events: none;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x .mr-x-context-media-play {
		position: absolute;
		left: 6px;
		bottom: 6px;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 2px;
		border-radius: 50%;
		background: rgba(0, 0, 0, .66);
		color: #fff;
	}

	/* ── Wiersz odpowiedzi: awatar + pole ─────────────────────────── */
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		flex: 1 1 0 !important;
		display: flex !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #000 !important;
		box-shadow: none !important;
		overflow: hidden !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .publisher {
		height: 100% !important;
		min-height: 0 !important;
		max-height: none !important;
		display: flex !important;
		flex-direction: column !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #000 !important;
		box-shadow: none !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .side_item_list39.px-3.pt-3 {
		min-height: 0 !important;
		flex: 1 1 0 !important;
		display: flex !important;
		flex-direction: column !important;
		padding: 4px var(--mr-rx-gutter) 0 !important;
		overflow: hidden !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .x_user_info {
		height: 100% !important;
		min-height: 0 !important;
		flex: 1 1 0 !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 12px !important;
		overflow: hidden !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .publisher-avatar {
		width: var(--mr-rx-avatar) !important;
		height: var(--mr-rx-avatar) !important;
		min-width: var(--mr-rx-avatar) !important;
		max-width: var(--mr-rx-avatar) !important;
		flex: 0 0 var(--mr-rx-avatar) !important;
		display: block !important;
		margin: 0 !important;
		border-radius: 50% !important;
		object-fit: cover;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .x_user_info > .flex-1 {
		height: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		flex: 1 1 0 !important;
		display: flex !important;
		flex-direction: column !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		scrollbar-width: none;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .x_user_info > .flex-1::-webkit-scrollbar {
		display: none;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .mr-publisher-privacy-row {
		display: none !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .publisher-message,
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .colored-text-wrapper {
		height: auto !important;
		min-height: 40px !important;
		max-height: none !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		overflow: visible !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal #js_publisher-textarea {
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		min-height: 40px !important;
		margin: 0 !important;
		padding: 7px 0 8px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		outline: 0 !important;
		color: var(--mr-rx-text) !important;
		font-size: 17px !important;
		line-height: 24px !important;
		resize: none !important;
	}
	/* waska wersja (przed rozwinieciem) nie ma JS-owego rosniecia pola —
	   dajemy mu rozsadna wysokosc zamiast pigulki 46 px */
	#modal.mr-publisher-modal-open.mr-publisher-standalone-reply .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal #js_publisher-textarea {
		height: 120px !important;
		max-height: 100% !important;
		overflow-y: auto !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal #js_publisher-textarea::placeholder {
		color: var(--mr-rx-muted) !important;
		opacity: 1;
	}
	/* zalaczniki (zdjecia, GIF, ankieta...) pod polem — jak na X */
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .mr-publisher-attachment-stage {
		display: block !important;
		max-height: none !important;
		flex: 0 0 auto !important;
		overflow: visible !important;
	}

	/* ── Pasek narzedzi: plasko, kreska u gory ────────────────────── */
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .mr-publisher-advanced-tools {
		display: none !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .mr-publisher-controls {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		flex: 0 0 auto !important;
		display: block !important;
		overflow: visible !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .mr-publisher-controls > .flex-1 {
		display: block !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .publisher-footer {
		position: static !important;
		width: 100% !important;
		height: 48px !important;
		min-height: 48px !important;
		max-height: 48px !important;
		flex: 0 0 48px !important;
		display: flex !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 8px !important;
		border: 0 !important;
		border-top: 1px solid var(--mr-rx-line) !important;
		border-radius: 0 !important;
		background: #000 !important;
		box-shadow: none !important;
		overflow: hidden !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .publisher-footer > .publisher-tools-tabs {
		width: 100% !important;
		min-width: 0 !important;
		flex: 1 1 auto !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		flex-wrap: nowrap !important;
		gap: 2px !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scrollbar-width: none;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .publisher-footer > .publisher-tools-tabs::-webkit-scrollbar {
		display: none;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .publisher-footer > .publisher-tools-tabs > * {
		width: 40px !important;
		min-width: 40px !important;
		flex: 0 0 40px !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .publisher-tools-tab {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: transparent !important;
		color: var(--mr-publisher-accent, #1d9bf0) !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .publisher-tools-tab:active {
		background: rgba(29, 155, 240, .1) !important;
	}
	#modal.mr-publisher-modal-open .mr-publisher-full-modal.mr-reply-x #publisher-wapper-modal .publisher-tools-tab svg {
		width: 20px !important;
		height: 20px !important;
	}
}

/* ==========================================================================
   MR — zdjecie / film / rolka z posta na telefonie: odpowiedzi jak na X
   --------------------------------------------------------------------------
   Przegladarka z js/mr-media.js. Ikonka komentarza albo przeciagniecie
   w gore wysuwa ARKUSZ: zdjecie / film zostaje u gory, pod nim wpis
   z odpowiedziami (ten sam widok "Post" co w oknie posta), na dole pasek
   "Napisz odpowiedz". Film ma przyciski dzwiek / pauza i pasek postepu.
   ========================================================================== */
.mr-mv-sheet,
.mr-mv-vctl,
.mr-mv-prog {
	display: none;
}

@media (max-width: 767.98px) {
	.mr-mv {
		--mr-mv-sheet-h: 62dvh;
		/* czarny jak reszta strony - wiersze odpowiedzi maja wlasne czarne tlo */
		--mr-mv-sheet-bg: #141414;
		--mr-mv-sheet-line: #2f3336;
		--mr-mv-sheet-field: #202327;
		--mr-mv-sheet-text: #e7e9ea;
	}
	html[data-mr-theme="light"] .mr-mv {
		--mr-mv-sheet-bg: #fff;
		--mr-mv-sheet-line: #eff3f4;
		--mr-mv-sheet-field: #eff3f4;
		--mr-mv-sheet-text: #0f1419;
	}

	/* ── film ───────────────────────────────────────────────────────── */
	.mr-mv .mr-mv-slide.mr-mv-slide-video {
		padding: 0;
	}
	.mr-mv-vid {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: contain;
		background: #000;
	}
	.mr-mv-vctl {
		position: absolute;
		z-index: 3;
		right: 12px;
		bottom: calc(82px + env(safe-area-inset-bottom, 0px));
		display: flex;
		gap: 10px;
		transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s;
		will-change: transform;
	}
	.mr-mv-vbtn {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(39, 44, 48, .85);
		color: #fff;
		-webkit-tap-highlight-color: transparent;
	}
	.mr-mv-prog {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		bottom: calc(64px + env(safe-area-inset-bottom, 0px));
		height: 16px;
		display: block;
		transition: opacity .2s;
	}
	.mr-mv-prog::before,
	.mr-mv-prog span {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
	}
	.mr-mv-prog::before {
		background: rgba(255, 255, 255, .25);
	}
	.mr-mv-prog span {
		background: #1d9bf0;
		transform: scaleX(0);
		transform-origin: 0 50%;
	}
	.mr-mv-bare .mr-mv-vctl,
	.mr-mv-bare .mr-mv-prog {
		opacity: 0;
		pointer-events: none;
	}

	/* ── pasek ikon pod zdjeciem / filmem ──────────────────────────────
	   .post-actions dziedziczy z feedu wciecie 40 px z lewej (miejsce na
	   awatar) - przez to ikonki byly przesuniete w prawo. Tu: rowno na
	   srodku, troche wyzej od dolu, ikonki 22 px zamiast 20 px. */
	.mr-mv .mr-mv-bar {
		padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	}
	.mr-mv .mr-mv-bar .mr-mv-post {
		width: 100%;
		max-width: 520px;
	}
	.mr-mv .mr-mv-bar .post-actions {
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		justify-content: space-between !important;
	}
	.mr-mv .mr-mv-bar .post-actions svg,
	.mr-mv .mr-mv-bar .post-actions .action-icon {
		width: 22px !important;
		height: 22px !important;
	}

	/* ── arkusz odpowiedzi ──────────────────────────────────────────── */
	/* Zdjecie / film przy wysuwaniu arkusza: TYLKO transform (przesuniecie
	   + zmniejszenie), liczony przez karte graficzna, w tym samym tempie co
	   arkusz. Wczesniej zmienialo sie "bottom" i "padding" - przegladarka
	   przeliczala caly uklad w kazdej klatce i obraz lekko przycinal.
	   Wartosci --mr-mv-fit-y / --mr-mv-fit-s liczy mr-media.js. */
	.mr-mv .mr-mv-stage {
		transform-origin: 50% 0;
		transition: transform .3s cubic-bezier(.2, .8, .2, 1);
		will-change: transform;
		backface-visibility: hidden;
	}
	.mr-mv-sheet-on .mr-mv-stage {
		transform: translate3d(0, var(--mr-mv-fit-y, 0px), 0) scale(var(--mr-mv-fit-s, 1));
	}
	.mr-mv-sheet-on .mr-mv-close,
	.mr-mv-sheet-on .mr-mv-count,
	.mr-mv-sheet-on .mr-mv-bar,
	.mr-mv-sheet-on .mr-mv-prog {
		opacity: 0;
		pointer-events: none;
	}
	/* pasek akcji pod zdjeciem ma w mr-comments.css "pointer-events: auto"
	   na dzieciach - bez tego przechwytywal dotyk w polu "Napisz odpowiedz" */
	.mr-mv-sheet-on .mr-mv-bar,
	.mr-mv-sheet-on .mr-mv-bar * {
		visibility: hidden;
		pointer-events: none !important;
	}
	.mr-mv-sheet-on .mr-mv-vctl {
		/* tez przez transform: z dolu ekranu tuz nad krawedz arkusza */
		transform: translate3d(0, calc(82px + env(safe-area-inset-bottom, 0px) - var(--mr-mv-sheet-h) + 6px), 0);
	}

	.mr-mv-sheet {
		position: absolute;
		z-index: 5;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--mr-mv-sheet-h);
		display: flex;
		flex-direction: column;
		border-radius: 18px 18px 0 0;
		background: var(--mr-mv-sheet-bg);
		box-shadow: inset 0 1px 0 var(--mr-mv-sheet-line), 0 -8px 24px rgba(0, 0, 0, .5);
		color: var(--mr-mv-sheet-text);
		text-align: left;
		transform: translate3d(0, 100%, 0);
		transition: transform .3s cubic-bezier(.2, .8, .2, 1);
		will-change: transform;
		contain: layout paint;
		-webkit-user-select: text;
		user-select: text;
		overflow: hidden;
	}
	.mr-mv-sheet-on .mr-mv-sheet {
		transform: none;
	}
	.mr-mv-grab {
		flex: 0 0 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		touch-action: none;
		cursor: grab;
	}
	.mr-mv-grab span {
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: #3e4144;
	}
	html[data-mr-theme="light"] .mr-mv-grab span {
		background: #cfd9de;
	}
	.mr-mv-sheet-in {
		min-height: 0;
		flex: 1 1 auto;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* widok "Post" w arkuszu: bez naglowka i bez zdjec / filmu (sa u gory) */
	.mr-mv-sheet .modal-body {
		position: static !important;
		height: auto !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		overflow: visible !important;
	}
	.mr-mv-sheet .mr-post-thread-header {
		display: none !important;
	}
	.mr-mv-sheet .mr-post-thread-scroll {
		height: auto !important;
		max-height: none !important;
		padding: 0 0 8px !important;
		background: transparent !important;
		overflow: visible !important;
	}
	.mr-mv-sheet .pg_wrapper,
	.mr-mv-sheet .post-media,
	.mr-mv-sheet .post-video-reel,
	.mr-mv-sheet .mr-thread-repliers {
		display: none !important;
	}
	.mr-mv-sheet .mr-post-thread-native,
	.mr-mv-sheet .post,
	.mr-mv-sheet .x_comms_list,
	.mr-mv-sheet .comment {
		background: transparent !important;
	}
	.mr-mv-sheet .post {
		border: 0 !important;
		box-shadow: none !important;
	}

	/* "Napisz odpowiedz" przyklejone na dole arkusza */
	.mr-mv-sheet > .mr-post-thread-compose-wrap {
		position: static !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: auto !important;
		flex: 0 0 auto;
		display: flex !important;
		align-items: center;
		gap: 12px;
		margin: 0 !important;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
		border: 0 !important;
		border-top: 1px solid var(--mr-mv-sheet-line) !important;
		background: var(--mr-mv-sheet-bg) !important;
		box-shadow: none !important;
		transform: none !important;
	}
	.mr-mv-sheet > .mr-post-thread-compose-wrap .mr-post-thread-compose-avatar {
		width: 36px !important;
		height: 36px !important;
		flex: 0 0 36px;
		margin: 0 !important;
		border-radius: 50%;
		object-fit: cover;
	}
	.mr-mv-sheet > .mr-post-thread-compose-wrap .mr-post-thread-compose {
		min-width: 0;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		flex: 1 1 auto;
		margin: 0 !important;
		padding: 9px 16px !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: var(--mr-mv-sheet-field) !important;
		color: var(--mr-mv-sheet-text) !important;
		font-size: 16px !important;
		line-height: 22px !important;
		overflow: hidden !important;
		resize: none !important;
		cursor: text;
	}
	.mr-mv-sheet > .mr-post-thread-compose-wrap .mr-post-thread-compose::placeholder {
		color: #71767b !important;
	}
	.mr-mv-sheet > .mr-reply-locked-note {
		color: #71767b;
		font-size: 14px;
	}
}

/* ==========================================================================
   Przegladarka zdjec / filmow na komputerze: panel z wpisem i odpowiedziami
   po prawej ma 420 px (bylo 350 w mr-comments.css). Razem z nim przesuwaja
   sie zdjecie, pasek na dole, strzalki i licznik - nic nie wchodzi pod panel.
   ========================================================================== */
.mr-mv-has-panel.mr-mv-panel-on .mr-mv-panel {
	width: 420px;
}
.mr-mv-has-panel.mr-mv-panel-on .mr-mv-stage,
.mr-mv-has-panel.mr-mv-panel-on .mr-mv-bar {
	right: 420px;
}
.mr-mv-has-panel.mr-mv-panel-on .mr-mv-side,
.mr-mv-has-panel.mr-mv-panel-on .mr-mv-next {
	right: 432px;
}
.mr-mv-has-panel.mr-mv-panel-on .mr-mv-count {
	left: calc((100% - 420px) / 2);
}

/* arkusz pod filmem/zdjeciem: rozmowa komentarza otwarta w arkuszu -
   pasek "← Odpowiedzi" przyklejony u gory (film nad arkuszem gra dalej) */
@media (max-width: 767.98px) {
	.mr-mv-sheet .mr-mv-sheet-nav {
		position: sticky;
		top: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		gap: 20px;
		height: 48px;
		padding: 0 12px;
		background: var(--mr-mv-sheet-bg);
		border-bottom: 1px solid var(--mr-mv-sheet-line);
		color: var(--mr-mv-sheet-text);
		font-size: 17px;
	}
	.mr-mv-sheet .mr-mv-sheet-nav button {
		width: 36px;
		height: 36px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: inherit;
	}
	.mr-mv-sheet .mr-mv-sheet-nav button:active { background: rgba(231, 233, 234, .1); }
	/* rozmowa komentarza w arkuszu: bez wlasnego naglowka okna */
	.mr-mv-sheet .mr-comment-thread-header,
	.mr-mv-sheet .mr-comment-thread-modal > .modal-header {
		display: none !important;
	}
	.mr-mv-sheet .mr-comment-thread-scroll,
	.mr-mv-sheet .mr-comment-thread-modal {
		position: static !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		background: transparent !important;
		transform: none !important;
	}
}

/* Arkusz odpowiedzi pod filmem / rolka: szare tlo jak na X (#141414).
   Wpis, filtr "Ostatnio dodane" i wiersze odpowiedzi mialy wlasne czarne
   tlo - teraz przezroczyste, linie w odcieniu dopasowanym do szarego. */
@media (max-width: 767.98px) {
	html body #mr-mv.mr-mv .mr-mv-sheet {
		--x-line: #262626;
		--fx-line: #262626;
		--border-divider: #262626;
	}
	html body #mr-mv.mr-mv .mr-mv-sheet .post,
	html body #mr-mv.mr-mv .mr-mv-sheet .standalone-post,
	html body #mr-mv.mr-mv .mr-mv-sheet .post-comments,
	html body #mr-mv.mr-mv .mr-mv-sheet .comments-filter,
	html body #mr-mv.mr-mv .mr-mv-sheet .x_comms_list,
	html body #mr-mv.mr-mv .mr-mv-sheet .x_comms_list > li,
	html body #mr-mv.mr-mv .mr-mv-sheet .comment,
	html body #mr-mv.mr-mv .mr-mv-sheet .mr-post-thread-native,
	html body #mr-mv.mr-mv .mr-mv-sheet .mr-comment-thread-modal,
	html body #mr-mv.mr-mv .mr-mv-sheet .mr-thread-parent {
		background: transparent !important;
		background-color: transparent !important;
	}
	html body #mr-mv.mr-mv .mr-mv-sheet .post,
	html body #mr-mv.mr-mv .mr-mv-sheet .post-actions,
	html body #mr-mv.mr-mv .mr-mv-sheet .post-stats,
	html body #mr-mv.mr-mv .mr-mv-sheet .comments-filter,
	html body #mr-mv.mr-mv .mr-mv-sheet .x_comms_list > li,
	html body #mr-mv.mr-mv .mr-mv-sheet .comment,
	html body #mr-mv.mr-mv .mr-mv-sheet .mr-thread-parent {
		border-color: #262626 !important;
	}
	html body #mr-mv.mr-mv .mr-mv-sheet > .mr-post-thread-compose-wrap {
		border-top-color: #262626 !important;
	}
	html body #mr-mv.mr-mv .mr-mv-grab span { background: #3a3a3a; }
	html body #mr-mv.mr-mv .mr-mv-sheet .mr-mv-sheet-nav { background: #141414; }
}

/* rolki: zamykanie odpowiedzi - arkusz plynnie zjezdza, film wraca na
   miejsce, bez wyskakujacych na chwile przyciskow podgladu */
.mr-mv.mr-mv-sheet-closing { pointer-events: none; }
.mr-mv.mr-mv-sheet-closing .mr-mv-close,
.mr-mv.mr-mv-sheet-closing .mr-mv-bar,
.mr-mv.mr-mv-sheet-closing .mr-mv-vctl,
.mr-mv.mr-mv-sheet-closing .mr-mv-prog,
.mr-mv.mr-mv-sheet-closing .mr-mv-side {
	opacity: 0 !important;
	visibility: hidden !important;
	transition: none !important;
}

/* Keep film controls available after rotating a fullscreen phone. */
@media (min-width: 768px) {
	/* ── film ───────────────────────────────────────────────────────── */
	.mr-mv.mr-mv-video .mr-mv-slide.mr-mv-slide-video {
		padding: 0;
	}
	.mr-mv-video .mr-mv-vid {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: contain;
		background: #000;
	}
	.mr-mv-video .mr-mv-vctl {
		position: absolute;
		z-index: 3;
		right: 12px;
		bottom: calc(82px + env(safe-area-inset-bottom, 0px));
		display: flex;
		gap: 10px;
		transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s;
		will-change: transform;
	}
	.mr-mv-video .mr-mv-vbtn {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(39, 44, 48, .85);
		color: #fff;
		-webkit-tap-highlight-color: transparent;
	}
	.mr-mv-video .mr-mv-prog {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		bottom: calc(64px + env(safe-area-inset-bottom, 0px));
		height: 16px;
		display: block;
		transition: opacity .2s;
	}
	.mr-mv-video .mr-mv-prog::before,
	.mr-mv-video .mr-mv-prog span {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
	}
	.mr-mv-video .mr-mv-prog::before {
		background: rgba(255, 255, 255, .25);
	}
	.mr-mv-video .mr-mv-prog span {
		background: #1d9bf0;
		transform: scaleX(0);
		transform-origin: 0 50%;
	}
	.mr-mv-video.mr-mv-bare .mr-mv-vctl,
	.mr-mv-video.mr-mv-bare .mr-mv-prog {
		opacity: 0;
		pointer-events: none;
	}

}

/* WebView 83 ignores inset; the film and its fullscreen button still need a viewport. */
@supports not (inset: 0) {
  .mr-mv, .mr-mv-bg, .mr-mv-stage { top: 0; right: 0; bottom: 0; left: 0; }
}

/* rolki: odpowiedz pisana na zywo pod filmem (mr-media.js liveCompose) -
   pole rosnie do 5 linii, wysyla klawisz Enter/"Wyslij", nad klawiatura */
html body .mr-mv-sheet > .mr-post-thread-compose-wrap.mr-mv-live {
	flex-wrap: wrap;
	align-items: flex-end;
	transform: translate3d(0, calc(-1 * var(--mr-mv-kb, 0px)), 0) !important;
	transition: transform .15s ease-out;
}
html body .mr-mv-sheet > .mr-post-thread-compose-wrap.mr-mv-live .mr-post-thread-compose {
	flex: 1 1 0 !important;
	width: 0 !important;
	/* wysokosc liczy mr-media.js (rosnie do 5 linii) */
	height: var(--mr-mv-live-h, 40px) !important;
	max-height: 120px !important;
	overflow-y: auto !important;
	border-radius: 20px !important;
}
.mr-mv-live .mr-mv-live-to {
	flex: 1 0 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #71767b;
	font-size: 14px;
	line-height: 18px;
}
.mr-mv-live .mr-mv-live-to[hidden] { display: none !important; }
.mr-mv-live .mr-mv-live-x {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: transparent;
	color: #71767b;
	font-size: 20px;
	line-height: 1;
	padding: 0 4px;
}
/* wysylanie w toku - pole przygaszone */
.mr-mv-live.mr-mv-live-busy .mr-post-thread-compose { opacity: .6; }

/* rolki / zdjecia: rozmowa komentarza ("Odpowiedzi") w arkuszu pod filmem -
   szablon watku ma czarne tlo (pod okno na caly ekran), w szarym arkuszu
   dawalo czarne pola pod kazdym komentarzem */
#mr-mv .mr-mv-sheet .mr-comment-thread-modal,
#mr-mv .mr-mv-sheet .mr-comment-thread-modal .comment,
#mr-mv .mr-mv-sheet .mr-comment-thread-modal .comment-data,
#mr-mv .mr-mv-sheet .mr-comment-thread-modal .comment-inner-wrapper,
#mr-mv .mr-mv-sheet .mr-comment-thread-modal .comment-inner,
#mr-mv .mr-mv-sheet .mr-comment-thread-modal .comment-replace,
#mr-mv .mr-mv-sheet .mr-comment-thread-modal .mr-comment-thread-scroll,
#mr-mv .mr-mv-sheet .mr-comment-thread-modal .mr-thread-parent {
	background: transparent !important;
}