/* ==========================================================================
   MR — wiadomosci jak na X.com (okienko czatu i strona /messages)
   --------------------------------------------------------------------------
   - czcionka jak na X (systemowa: SF na iPhonie, Roboto na Androidzie,
     Segoe UI na Windowsie), tekst 15/20 - odrobine mniejszy niz dotad,
   - dymki: zaokraglone 20 px, "ogonek" 4 px, wlasne w kolorze strony,
     cudze #2f3336, godzina w dymku w prawym dolnym rogu (mr-messages.js),
   - miedzy dniami pastylka z data ("Dziś o 21:17", "pon., 31 sie o 21:17"),
   - okienko 370 px szerokosci, lista wiadomosci 340 px wysokosci,
   - okienko: naglowek 53 px, nazwa 17 px, okragle przyciski, zaokraglone
     rogi i cienka ramka jak na X, bez awatara przy kazdej wiadomosci.
   ========================================================================== */

.chat-widget,
.panel-messages {
	--dm-font: "TwitterChirp", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--dm-text: #e7e9ea;
	--dm-dim: #71767b;
	--dm-line: #2f3336;
	--dm-other: #2f3336;
	--dm-mine: #0053cb;
	--dm-btn: #202327;
	--dm-bg: #000;
}
html[data-mr-theme="light"] .chat-widget,
html[data-mr-theme="light"] .panel-messages {
	--dm-text: #0f1419;
	--dm-dim: #536471;
	--dm-line: #eff3f4;
	--dm-other: #eff3f4;
	--dm-btn: #eff3f4;
	--dm-bg: #fff;
}

/* ── czcionka ──────────────────────────────────────────────────────── */
.chat-widget,
.chat-widget div,
.chat-widget span,
.chat-widget a,
.chat-widget p,
.chat-widget b,
.chat-widget strong,
.chat-widget small,
.chat-widget li,
.chat-widget button,
.chat-widget textarea,
.chat-widget input,
.chat-widget h1,
.chat-widget h2,
.chat-widget h3,
.chat-widget h4,
.chat-widget h5,
.chat-widget h6,
.panel-messages,
.panel-messages div,
.panel-messages span,
.panel-messages a,
.panel-messages p,
.panel-messages b,
.panel-messages strong,
.panel-messages small,
.panel-messages li,
.panel-messages button,
.panel-messages textarea,
.panel-messages input,
.panel-messages h1,
.panel-messages h2,
.panel-messages h3,
.panel-messages h4,
.panel-messages h5,
.panel-messages h6 {
	font-family: var(--dm-font) !important;
	letter-spacing: normal;
}

/* ── okienko (komputer) ────────────────────────────────────────────── */
@media (min-width: 992px) {
	body .chat-widget.chat-box {
		width: 370px;
		border: 1px solid var(--dm-line);
		border-bottom: 0;
		border-radius: 16px 16px 0 0;
		background: var(--dm-bg);
		box-shadow: rgba(255, 255, 255, .2) 0 0 15px, rgba(255, 255, 255, .15) 0 0 3px 1px;
		overflow: hidden;
	}
	html[data-mr-theme="light"] body .chat-widget.chat-box {
		box-shadow: rgba(101, 119, 134, .2) 0 0 15px, rgba(101, 119, 134, .15) 0 0 3px 1px;
	}
}
body .chat-widget .chat-widget-head {
	min-height: 53px !important;
	height: 53px;
	padding: 0 8px 0 16px !important;
	background: var(--dm-bg) !important;
	border-radius: 16px 16px 0 0;
}
body .chat-widget .chat-user-card {
	gap: 10px !important;
}
body .chat-widget .chat-user-card .avatar {
	width: 32px !important;
	height: 32px !important;
}
body .chat-widget .chat-user-card .name,
body .chat-widget .chat-user-card .name span {
	color: var(--dm-text) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 20px !important;
}
body .chat-widget .chat-head-btns {
	gap: 8px !important;
}
body .chat-widget .chat-head-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9999px;
	background: var(--dm-btn);
	color: var(--dm-text);
	opacity: 1 !important;
	transition: background-color .15s ease;
}
body .chat-widget .chat-head-btn:hover {
	background: #2f3336;
}
html[data-mr-theme="light"] body .chat-widget .chat-head-btn:hover {
	background: #d7dbdc;
}
body .chat-widget .chat-head-btn svg {
	width: 18px !important;
	height: 18px !important;
}
body .chat-widget .chat-widget-content,
body .chat-widget .chat-conversations {
	background: var(--dm-bg) !important;
}
body .chat-widget .chat-conversations {
	padding: 0 16px !important;
}
/* okienko odrobine wyzsze: lista wiadomosci 340 px (skrypt ustawia 280 px) */
@media (min-width: 992px) {
	body .chat-widget.chat-box .chat-conversations {
		height: 340px !important;
	}
}

/* ── wiadomosci ────────────────────────────────────────────────────── */
/* bez awatara przy kazdej wiadomosci w okienku (jak na X) */
body .chat-widget .conversation-user {
	display: none !important;
}
body .chat-widget .conversation-body {
	max-width: 80% !important;
}
body .chat-widget .conversation.right .conversation-body {
	margin-left: 0 !important;
}
body .chat-widget .conversation,
body .panel-messages .conversation {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}
body .chat-widget .conversation-body .text,
body .panel-messages .conversation-body .text {
	padding: 8px 12px !important;
	border-radius: 20px !important;
	background: var(--dm-other);
	color: var(--dm-text);
	font-size: 15px !important;
	line-height: 20px !important;
	font-weight: 400 !important;
	overflow-wrap: anywhere;
}
body .chat-widget .conversation:not(.right) .conversation-body .text,
body .panel-messages .conversation:not(.right) .conversation-body .text {
	border-bottom-left-radius: 4px !important;
}
body .chat-widget .conversation.right .conversation-body .text,
body .panel-messages .conversation.right .conversation-body .text {
	background: var(--dm-mine);
	color: #fff;
	border-bottom-right-radius: 4px !important;
}
/* godzina w dymku (mr-messages.js) */
body .chat-widget .conversation-body.mr-dmt-in > .time,
body .panel-messages .conversation-body.mr-dmt-in > .time {
	display: none !important;
}
.mr-dmt {
	float: right;
	margin: 6px -2px -4px 10px;
	color: var(--dm-dim);
	font-size: 11px;
	line-height: 14px;
	font-weight: 400;
	white-space: nowrap;
	user-select: none;
}
.conversation.right .mr-dmt {
	color: rgba(255, 255, 255, .72);
}
.mr-dmt.mr-dmt-out {
	float: none;
	margin: 4px 4px 0;
	color: var(--dm-dim) !important;
}
/* pastylka z data miedzy dniami */
body .chat-widget li.mr-dmd,
body .panel-messages li.mr-dmd {
	display: flex;
	justify-content: center;
	margin: 12px 0 8px;
	list-style: none;
}
body .chat-widget li.mr-dmd > span,
body .panel-messages li.mr-dmd > span {
	padding: 2px 10px;
	border: 1px solid var(--dm-line);
	border-radius: 9999px;
	color: var(--dm-dim);
	font-size: 12px;
	line-height: 18px;
}

/* ── pole pisania ──────────────────────────────────────────────────── */
body .chat-widget .chat-form.mr-cf,
body .panel-messages .chat-form.mr-cf {
	background: var(--dm-bg) !important;
	border-top: 0 !important;
	padding: 8px 12px 12px !important;
}
body .chat-widget .mr-cf .chat-form-message,
body .panel-messages .mr-cf .chat-form-message {
	background: var(--dm-btn) !important;
	border-radius: 9999px !important;
}
body .chat-widget .mr-cf .chat-form-message textarea,
body .panel-messages .mr-cf .chat-form-message textarea {
	font-size: 15px !important;
	line-height: 20px !important;
	color: var(--dm-text) !important;
}
body .chat-widget .mr-cf .chat-form-message textarea::placeholder,
body .panel-messages .mr-cf .chat-form-message textarea::placeholder {
	color: var(--dm-dim) !important;
}
body .chat-widget .mr-cf-plus,
body .panel-messages .mr-cf-plus {
	background: var(--dm-btn) !important;
	color: var(--dm-text) !important;
}

/* klawiatura otwarta w Wiadomosciach (mr-messages.js): dolny pasek nawigacji
   znika, zeby pole pisania stalo tuz nad klawiatura (jak w X) */
@media (max-width: 991.98px) {
	html.mr-kb-open .x_sidebar_links,
	html.mr-kb-open .footer-bottom-bar { display: none !important; }
}

/* klawiatura otwarta: pole pisania tuz nad klawiatura - bez zapasu na
   dolny pasek, "bezpieczny obszar" iPhone'a i marginesow pod polem */
@media (max-width: 991.98px) {
	html.mr-kb-open .mr-msg-page .chat-form,
	html.mr-kb-open .mr-msg-page .mr-cf {
		margin-bottom: 0 !important;
		padding-bottom: 4px !important;
	}
	html.mr-kb-open .mr-msg-page .panel-messages,
	html.mr-kb-open .mr-msg-page .x_menu_sidebar_content {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
	html.mr-kb-open body { padding-bottom: 0 !important; }
}

/* pole pisania: surowy uklad Sngine nie mignie, zanim mr-messages.js nalozy
   nowy wyglad (klasa mr-cf). Bezpiecznik: gdyby skrypt sie nie wczytal,
   pole i tak pokaze sie po 1,5 s. */
@keyframes mr-cf-show { to { visibility: visible; } }
.panel-messages .chat-form:not(.mr-cf):not(.mr-cf-skip),
.chat-widget .chat-form:not(.mr-cf):not(.mr-cf-skip) {
	visibility: hidden;
	animation: mr-cf-show 0s linear 1.5s forwards;
}

/* ==========================================================================
   Okienko czatu na komputerze 1:1 jak na X (mr-messages.js dokleja przyciski)
   - okienko "plywa" 16 px nad dolna krawedzia, zaokraglone ze wszystkich
     stron, cienka ramka i ciemny cien (bez jasnej poswiaty),
   - naglowek 64 px: awatar + nazwa, po prawej okragle przyciski:
     [polaczenia], powieksz (cala rozmowa), zwin; X zamykajacy tylko po zwinieciu,
   - godzina i znaczek "wyslano" w dymku,
   - pole: [+] i "Wiadomosc", po prawej glosowka, po wpisaniu strzalka.
   ========================================================================== */
@media (min-width: 992px) {
	body .chat-widget.chat-box {
		width: 400px !important;
		bottom: 16px !important;
		border: 1px solid var(--dm-line) !important;
		border-radius: 16px !important;
		box-shadow: 0 12px 32px rgba(0, 0, 0, .55) !important;
		overflow: hidden;
	}
	html[data-mr-theme="light"] body .chat-widget.chat-box {
		box-shadow: 0 12px 32px rgba(101, 119, 134, .25) !important;
	}
	body .chat-widget .chat-widget-head.mr-xh {
		height: 64px !important;
		min-height: 64px !important;
		padding: 0 12px 0 16px !important;
		border-radius: 16px 16px 0 0;
	}
	body .chat-widget:not(.opened) .chat-widget-head.mr-xh {
		border-radius: 16px;
	}
	body .chat-widget .mr-xh .chat-user-card .avatar {
		width: 36px !important;
		height: 36px !important;
	}
	body .chat-widget .mr-xh .chat-head-btns {
		gap: 8px !important;
	}
	body .chat-widget .mr-xh .chat-head-btn {
		width: 40px !important;
		height: 40px !important;
		background: #16181c !important;
		color: var(--dm-text) !important;
		text-decoration: none !important;
	}
	html[data-mr-theme="light"] body .chat-widget .mr-xh .chat-head-btn {
		background: #eff3f4 !important;
	}
	body .chat-widget .mr-xh .chat-head-btn:hover {
		background: #2f3336 !important;
	}
	html[data-mr-theme="light"] body .chat-widget .mr-xh .chat-head-btn:hover {
		background: #d7dbdc !important;
	}
	body .chat-widget .mr-xh .chat-head-btn svg {
		width: 18px !important;
		height: 18px !important;
	}
	/* otwarte: zamiast X jest "zwin"; zwiniete: X widoczny, "zwin" obrocone */
	body .chat-widget.opened .mr-xh .chat-head-btns .js_chat-box-close {
		display: none !important;
	}
	body .chat-widget .mr-xh-min svg {
		transition: transform .2s ease;
	}
	body .chat-widget:not(.opened) .mr-xh-min svg {
		transform: rotate(180deg);
	}
	body .chat-widget.chat-box .chat-conversations {
		height: 380px !important;
	}
}
/* znaczek "wyslano" przy godzinie wlasnej wiadomosci */
.mr-dmt .mr-dmt-ok {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 2px;
	vertical-align: -2px;
}
/* pole pisania: glosowka, a po wpisaniu tekstu strzalka */
.mr-cf-voice {
	position: absolute;
	right: 4px;
	bottom: 4px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dm-text, #e7e9ea);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.mr-cf-voice:hover {
	background: rgba(231, 233, 234, .08);
}
.mr-cf.mr-has-voice:not(.mr-can-send) .mr-cf-send {
	display: none !important;
}
.mr-cf.mr-can-send .mr-cf-voice {
	display: none !important;
}