/*
 * Better Messages voice/audio UI repair.
 * ponytail: keep the plugin's own player and recorder; only restore geometry
 * and contrast damaged by the site's generic compact-bubble CSS.
 */

/* Both sides use the same player width; only the surrounding bubble colour differs. */
body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
.bm-messages-listing .bm-message .bm-message-content.voice-message,
body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
.bm-messages-listing .bm-message .bm-message-content.has-iframe:has(> .bpbm-voice-message),
body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
.bm-messages-listing .bm-message .bm-message-content:has(.bm-attachments .bm-audios) {
	box-sizing: border-box !important;
	display: block !important;
	flex: 0 1 340px !important;
	width: 340px !important;
	min-width: 220px !important;
	max-width: calc(100% - 44px) !important;
	min-height: 0 !important;
	padding: 7px 8px 21px !important;
	overflow: visible !important;
}

/*
 * Keep the message time/status out of normal flow. The site's global
 * line-height:2 otherwise adds an empty line below every audio control.
 */
body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
.bm-messages-listing .bm-message .bm-message-content.voice-message .bm-message-info,
body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
.bm-messages-listing .bm-message .bm-message-content.has-iframe:has(> .bpbm-voice-message) .bm-message-info,
body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
.bm-messages-listing .bm-message .bm-message-content:has(.bm-attachments .bm-audios) .bm-message-info {
	bottom: 3px !important;
	float: none !important;
	height: 14px !important;
	line-height: 14px !important;
	margin: 0 !important;
	position: absolute !important;
	right: 8px !important;
	z-index: 2 !important;
}

body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
.bm-messages-listing .bm-message .bm-message-content.voice-message .bm-message-info .bm-time,
body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
.bm-messages-listing .bm-message .bm-message-content.has-iframe:has(> .bpbm-voice-message) .bm-message-info .bm-time,
body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
.bm-messages-listing .bm-message .bm-message-content:has(.bm-attachments .bm-audios) .bm-message-info .bm-time {
	line-height: 14px !important;
}

/* Polished common player shell for current and legacy voice-message markup. */
body .bp-messages-wrap .bm-message-content .bm-voice-message,
body .bp-messages-wrap .bm-message-content .bpbm-voice-message {
	align-items: center !important;
	background: rgba(245, 247, 249, .96) !important;
	border: 1px solid rgba(80, 99, 116, .20) !important;
	border-radius: 999px !important;
	box-sizing: border-box !important;
	color: #245f78 !important;
	display: flex !important;
	flex-flow: row nowrap !important;
	gap: 8px !important;
	height: 48px !important;
	margin: 0 !important;
	min-height: 48px !important;
	min-width: 0 !important;
	padding: 6px 10px !important;
	position: static !important;
	width: 100% !important;
}

body .bp-messages-wrap .bm-message-content .bm-voice-message .bm-voice-message-play,
body .bp-messages-wrap .bm-message-content .bpbm-voice-message .bpbm-voice-message-play {
	align-items: center !important;
	color: #247c9d !important;
	display: flex !important;
	flex: 0 0 34px !important;
	font-size: 28px !important;
	height: 34px !important;
	justify-content: center !important;
	line-height: 34px !important;
	margin: 0 !important;
	min-width: 34px !important;
	text-align: center !important;
	width: 34px !important;
}

body .bp-messages-wrap .bm-message-content .bm-voice-message .bm-waveform,
body .bp-messages-wrap .bm-message-content .bpbm-voice-message .bpbm-waveform {
	display: block !important;
	flex: 1 1 auto !important;
	height: 32px !important;
	min-width: 120px !important;
	overflow: hidden !important;
	width: auto !important;
}

body .bp-messages-wrap .bm-message-content .bm-voice-message .bm-waveform wave,
body .bp-messages-wrap .bm-message-content .bpbm-voice-message .bpbm-waveform wave {
	height: 32px !important;
	max-width: 100% !important;
	overflow: hidden !important;
}

body .bp-messages-wrap .bm-message-content .bm-voice-message .bm-voice-message-duration {
	bottom: 3px !important;
	font-variant-numeric: tabular-nums !important;
	left: 8px !important;
	line-height: 14px !important;
	margin: 0 !important;
	position: absolute !important;
}

/* Uploaded MP3/audio: expose the browser's real timeline, duration, volume and menu. */
body .bp-messages-wrap .bm-message-content .bm-attachments .bm-audios,
body .bp-messages-wrap .bm-message-content .bm-attachments .bm-audios .bm-audio {
	box-sizing: border-box !important;
	display: block !important;
	max-width: 100% !important;
	min-width: 0 !important;
	width: 100% !important;
}

/* MP3/audio attachments use the player itself as the visual shell. */
body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
.bm-messages-listing .bm-message .bm-message-content:has(.bm-attachments .bm-audios) {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 0 18px !important;
}

body .bp-messages-wrap .bm-message-content .bm-attachments .bm-audios audio,
body .bp-messages-wrap .bm-message-content audio.bm-audio {
	background: #f1f3f4 !important;
	border: 1px solid rgba(80, 99, 116, .18) !important;
	border-radius: 999px !important;
	box-sizing: border-box !important;
	color-scheme: light !important;
	display: block !important;
	height: 46px !important;
	max-width: 100% !important;
	min-width: 210px !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 100% !important;
}

/* Recorder overlay: stop/delete, retry/play and send must not disappear on white. */
body .bp-messages-wrap .bm-reply .bm-record-voice {
	background: rgba(var(--bm-bg-color), 1) !important;
	color: rgba(var(--bm-text-color), 1) !important;
}

body .bp-messages-wrap .bm-reply .bm-voice-btn,
body .bp-messages-wrap .bm-reply .bm-record-voice-delete,
body .bp-messages-wrap .bm-reply .bm-record-voice-send,
body .bp-messages-wrap .reply .bpbm-record-voice-timer .bpbm-record-voice-delete,
body .bp-messages-wrap .reply .bpbm-record-voice-timer .bpbm-record-voice-send {
	align-items: center !important;
	background: #fff !important;
	border: 1px solid rgba(52, 65, 77, .24) !important;
	border-radius: 50% !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	height: 34px !important;
	justify-content: center !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 34px !important;
}

body .bp-messages-wrap .bm-reply .bm-voice-btn {
	color: #354a56 !important;
}

body .bp-messages-wrap .bm-reply .bm-record-voice-delete,
body .bp-messages-wrap .reply .bpbm-record-voice-timer .bpbm-record-voice-delete {
	color: #d9363e !important;
}

body .bp-messages-wrap .bm-reply .bm-record-voice-send,
body .bp-messages-wrap .reply .bpbm-record-voice-timer .bpbm-record-voice-send {
	color: #17885b !important;
}

body .bp-messages-wrap .bm-reply .bm-voice-btn svg,
body .bp-messages-wrap .bm-reply .bm-record-voice-delete svg,
body .bp-messages-wrap .bm-reply .bm-record-voice-send svg,
body .bp-messages-wrap .reply .bpbm-record-voice-timer svg,
body .bp-messages-wrap .reply .bpbm-record-voice-timer i {
	color: currentColor !important;
	display: block !important;
	font-size: 18px !important;
	height: 18px !important;
	line-height: 18px !important;
	max-height: 18px !important;
	max-width: 18px !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 18px !important;
}

@media (max-width: 420px) {
	body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
	.bm-messages-listing .bm-message .bm-message-content.voice-message,
	body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
	.bm-messages-listing .bm-message .bm-message-content.has-iframe:has(> .bpbm-voice-message),
	body .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content
	.bm-messages-listing .bm-message .bm-message-content:has(.bm-attachments .bm-audios) {
		flex-basis: 300px !important;
		width: 300px !important;
	}
}

/*
 * Replace only Better Messages' built-in square sticky-note glyph. The native
 * button remains the click target; the inline SVG mask adds no font or request.
 */
body.tianchao-bm-sticker-icon .bp-messages-wrap .bm-reply .bm-stickers {
	color: rgba(var(--bm-text-color), .36) !important;
}

body.tianchao-bm-sticker-icon .bp-messages-wrap .bm-reply .bm-stickers > svg {
	opacity: 0 !important;
}

body.tianchao-bm-sticker-icon .bp-messages-wrap .bm-reply .bm-stickers::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12A10 10 0 1 1 12 2c0 5.523 4.477 10 10 10Z'/%3E%3Cpath d='M12 2a10 10 0 0 1 10 10'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	background: currentColor;
	bottom: 15.1px;
	content: "";
	height: 21.1px;
	left: 50%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12A10 10 0 1 1 12 2c0 5.523 4.477 10 10 10Z'/%3E%3Cpath d='M12 2a10 10 0 0 1 10 10'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
	position: absolute;
	transform: translateX(-50%);
	width: 21.1px;
}

/*
 * The thread list uses the same BsSticky SVG for the “贴纸” summary. Match
 * that glyph by its own path so attachment, audio and other rich summaries
 * keep their native icons. :has() is supported by the site's iOS/Chrome floor.
 */
body.tianchao-bm-sticker-icon .bp-messages-wrap .threads-list .last-message-rich:has(> svg > path[d^="M2.5 1A1.5"]) > svg {
	margin: 0 !important;
	max-width: 0 !important;
	min-width: 0 !important;
	opacity: 0 !important;
	width: 0 !important;
}

body.tianchao-bm-sticker-icon .bp-messages-wrap .threads-list .last-message-rich:has(> svg > path[d^="M2.5 1A1.5"])::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12A7 7 0 1 1 12 5c0 3.866 3.134 7 7 7Z'/%3E%3Cpath d='M12 5a7 7 0 0 1 7 7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	background: currentColor;
	content: "";
	flex: 0 0 24px;
	height: 24px;
	margin-right: 4px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12A7 7 0 1 1 12 5c0 3.866 3.134 7 7 7Z'/%3E%3Cpath d='M12 5a7 7 0 0 1 7 7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
	width: 24px;
}

/*
 * Preserve the natural aspect ratio of a single uploaded chat image. Better
 * Messages normally paints a cropped thumbnail as a cover background inside
 * a max-height container. Multi-image grids are intentionally left native.
 */
body .bp-messages-wrap .bm-attachments .bm-images:has(> a:only-child) {
	max-height: none !important;
	max-width: 100% !important;
	overflow: visible !important;
	width: 100% !important;
}

body .bp-messages-wrap .bm-attachments .bm-images > a:only-child {
	background-image: none !important;
	display: block !important;
	height: auto !important;
	max-height: none !important;
	max-width: 100% !important;
	overflow: visible !important;
	width: 100% !important;
}

body .bp-messages-wrap .bm-attachments .bm-images > a:only-child > img {
	display: block !important;
	height: auto !important;
	max-height: none !important;
	max-width: 100% !important;
	object-fit: contain !important;
	opacity: 1 !important;
	width: 100% !important;
}

/* The list renderer strips the server-side .bpbm-call span on some builds.
 * The Signal-status DOM enhancer marks the containing thread after checking
 * the actual call text, so move the complete icon/text row together. */
@media (min-width: 769px) {
	body .bp-messages-wrap .threads-list .thread.tc-bm-call-summary
	.bm-info .last-message {
		transform: translateY(-2px) !important;
	}
}