/**
 * PAT Better Messages — clean, modern, accessible shell.
 * Brand: primary #24478f, gold #d4af35 (accent only).
 */

:root {
	--primary: #24478f;
	--pat-bm-primary: #24478f;
	--pat-bm-primary-soft: rgba(36, 71, 143, 0.1);
	--pat-bm-gold: #d4af35;
	--pat-bm-text: #1e293b;
	--pat-bm-muted: #64748b;
	--pat-bm-border: #e2e8f0;
	--pat-bm-surface: #ffffff;
	--pat-bm-surface-soft: #f8fafc;
	--pat-bm-radius: 5px;
	--pat-bm-radius-lg: 12px;
	--pat-bm-focus: 0 0 0 3px rgba(36, 71, 143, 0.18);
	/* Message bubble washes — BM modern uses .bm-left-side / .bm-right-side */
	--pat-bm-bubble-left: linear-gradient(160deg, #eef2f7 0%, #e2e8f0 55%, #d5dde8 100%);
	--pat-bm-bubble-right: linear-gradient(160deg, #eaf2fc 0%, #d9e6f8 50%, #c8daf3 100%);
	--pat-bm-bubble-left-text: #1e293b;
	--pat-bm-bubble-right-text: #1e3a6e;
	/* BM native tokens (RGB triplets for rgba(var(--…), a)) */
	--main-bm-color: 36, 71, 143;
	--left-message-text-color: 30, 41, 59;
	--right-message-text-color: 30, 58, 110;
	--bm-border-radius: 5px;
	--bm-message-font-size: 15px;
	--bm-message-line-height: 22px;
}

/* —— Stacking —— */
/* BM default is 800; sticky footers / chrome often sit at 900–1000. */
.bp-better-messages-list {
	z-index: 1001 !important;
}

/* —— Typography & base —— */
.bp-messages-wrap,
.bp-messages-wrap *,
.bp-better-messages-list,
.better-messages-mini {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.bp-messages-wrap {
	color: var(--pat-bm-text);
	background: var(--pat-bm-surface);
	border: 1px solid var(--pat-bm-border);
	border-radius: var(--pat-bm-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

/* —— Accent / interactive —— */
.bp-messages-wrap a,
.bp-messages-wrap .bm-link,
.bp-messages-wrap button.bm-button-primary,
.bp-messages-wrap .bpbm-btn-primary {
	color: var(--pat-bm-primary);
}

.bp-messages-wrap button:focus-visible,
.bp-messages-wrap a:focus-visible,
.bp-messages-wrap input:focus-visible,
.bp-messages-wrap textarea:focus-visible,
.bp-messages-wrap select:focus-visible,
.better-messages-mini button:focus-visible,
.better-messages-mini a:focus-visible {
	outline: none;
	box-shadow: var(--pat-bm-focus);
}

/* —— Thread list —— */
.bp-messages-wrap .threads-list .thread {
	border-bottom: 1px solid var(--pat-bm-border);
	transition: background 0.15s ease;
}

.bp-messages-wrap .threads-list .thread:hover,
.bp-messages-wrap .threads-list .thread:focus-within {
	background: var(--pat-bm-surface-soft);
}

.bp-messages-wrap .threads-list .thread .bm-info .name {
	font-size: 14px;
	font-weight: 600;
	color: var(--pat-bm-text);
	line-height: 1.3;
}

.bp-messages-wrap .threads-list .thread .bm-info .last-message {
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: var(--pat-bm-muted) !important;
}

.bp-messages-wrap .threads-list .thread .bm-info .name + h4,
.bp-messages-wrap .threads-list .thread .bm-info h4 {
	font-size: 12px !important;
	font-weight: 500;
	color: var(--pat-bm-muted) !important;
}

.bp-messages-wrap .threads-list .thread .pic,
.bp-messages-wrap .threads-list .thread .pic img {
	border-radius: var(--pat-bm-radius) !important;
}

/* Unread badge */
.bp-messages-wrap .bm-unread-count,
.bp-messages-wrap .unread-count,
.bp-messages-wrap .bpbm-unread-count {
	background: var(--pat-bm-primary) !important;
	color: #fff !important;
	border-radius: 9px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	min-width: 18px;
	padding: 2px 6px !important;
}

/* —— Message bubbles (BM modern: .bm-left-side / .bm-right-side) —— */
.bp-messages-wrap .bm-messages-list .bm-message .bm-message-content,
.bp-messages-wrap .messages-list .message .content,
.bp-messages-wrap .bp-message-content {
	border-radius: 14px !important;
	font-size: var(--bm-message-font-size);
	line-height: var(--bm-message-line-height);
	box-shadow: none !important;
}

/*
 * Received (left) — visible gray + dark text.
 * Selectors match BM's chain so we beat rgba(var(--left-message-text-color)).
 */
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack.bm-left-side .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background),
.bp-messages-wrap .bm-messages-list .bm-messages-stack.bm-left-side .bm-message-content:not(.bm-hide-background),
.bp-messages-wrap .bm-messages-list .their-message .bm-message-content,
.bp-messages-wrap .messages-list .message:not(.my-message) .content {
	background: var(--pat-bm-bubble-left) !important;
	color: var(--pat-bm-bubble-left-text) !important;
	border: 1px solid #cbd5e1 !important;
}

.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack.bm-left-side .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) *,
.bp-messages-wrap .bm-messages-list .bm-messages-stack.bm-left-side .bm-message-content:not(.bm-hide-background) *,
.bp-messages-wrap .bm-messages-list .their-message .bm-message-content * {
	color: var(--pat-bm-bubble-left-text) !important;
}

/* Sent (right) — light navy wash + dark text */
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack.bm-right-side .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background),
.bp-messages-wrap .bm-messages-list .bm-messages-stack.bm-right-side .bm-message-content:not(.bm-hide-background),
.bp-messages-wrap .bm-messages-list .my-message .bm-message-content,
.bp-messages-wrap .messages-list .message.my-message .content {
	background: var(--pat-bm-bubble-right) !important;
	color: var(--pat-bm-bubble-right-text) !important;
	border: 1px solid #bfdbfe !important;
}

.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack.bm-right-side .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) *,
.bp-messages-wrap .bm-messages-list .bm-messages-stack.bm-right-side .bm-message-content:not(.bm-hide-background) *,
.bp-messages-wrap .bm-messages-list .my-message .bm-message-content * {
	color: var(--pat-bm-bubble-right-text) !important;
}

.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack.bm-left-side .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) .bm-time,
.bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack.bm-right-side .bm-content .bm-messages-listing .bm-message .bm-message-content:not(.bm-hide-background) .bm-time {
	color: var(--pat-bm-muted) !important;
}

/* —— Composer —— */
.bp-messages-wrap .bm-reply-area,
.bp-messages-wrap .reply,
.bp-messages-wrap .bp-messages-reply {
	border-top: 1px solid var(--pat-bm-border);
	background: var(--pat-bm-surface);
	padding: 12px 16px;
}

.bp-messages-wrap textarea,
.bp-messages-wrap input[type="text"],
.bp-messages-wrap input[type="search"],
.bp-messages-wrap .emojionearea,
.bp-messages-wrap .bm-input {
	border: 1px solid #d1d5db !important;
	border-radius: var(--pat-bm-radius) !important;
	font-size: 14px !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bp-messages-wrap textarea:focus,
.bp-messages-wrap input[type="text"]:focus,
.bp-messages-wrap input[type="search"]:focus,
.bp-messages-wrap .emojionearea.focused {
	border-color: var(--pat-bm-primary) !important;
	box-shadow: var(--pat-bm-focus) !important;
	outline: none !important;
}

.bp-messages-wrap .bm-send-button,
.bp-messages-wrap button.send-button,
.bp-messages-wrap .reply button[type="submit"] {
	background: var(--pat-bm-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--pat-bm-radius) !important;
	font-weight: 500 !important;
	min-height: 34px;
	padding: 7px 14px !important;
	transition: background 0.15s ease, transform 0.15s ease;
}

.bp-messages-wrap .bm-send-button:hover,
.bp-messages-wrap button.send-button:hover,
.bp-messages-wrap .reply button[type="submit"]:hover {
	background: #1d3a75 !important;
}

.bp-messages-wrap .bm-send-button:disabled,
.bp-messages-wrap button.send-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* —— Tabs / sidebar headers —— */
.bp-messages-wrap .bm-tabs,
.bp-messages-wrap .bpbm-tabs,
.bp-messages-wrap .chats-tabs {
	background: #f1f5f9;
	border-radius: var(--pat-bm-radius);
	padding: 3px;
	gap: 2px;
}

.bp-messages-wrap .bm-tabs .bm-tab,
.bp-messages-wrap .bpbm-tabs button,
.bp-messages-wrap .chats-tabs > * {
	border-radius: 4px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--pat-bm-muted) !important;
}

.bp-messages-wrap .bm-tabs .bm-tab.active,
.bp-messages-wrap .bpbm-tabs button.active,
.bp-messages-wrap .chats-tabs > *.active {
	background: #fff !important;
	color: var(--pat-bm-text) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* —— Headers —— */
.bp-messages-wrap .bm-chat-header,
.bp-messages-wrap .chat-header,
.bp-messages-wrap .bp-messages-header {
	border-bottom: 1px solid var(--pat-bm-border);
	background: var(--pat-bm-surface);
}

.bp-messages-wrap .bm-chat-header .name,
.bp-messages-wrap .chat-header .name {
	font-size: 15px;
	font-weight: 600;
	color: var(--pat-bm-text);
}

/* —— Empty / loading —— */
.bp-messages-wrap .bm-empty,
.bp-messages-wrap .empty-thread {
	color: var(--pat-bm-muted);
	font-size: 13px;
	padding: 48px 20px;
	text-align: center;
}

/* —— Mini widgets / floating —— */
.bm-bubble-button {
	margin-bottom: 15px;
}

.better-messages-mini,
#bp-better-messages-mini {
	border-radius: var(--pat-bm-radius-lg) !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
	border: 1px solid var(--pat-bm-border) !important;
	overflow: hidden;
	bottom: 24px !important;
}

#bp-better-messages-mini-mobile-open,
.bp-better-messages-mini-mobile-open,
.bm-mobile-open,
button.bp-better-messages-mini-mobile-open {
	background: var(--pat-bm-primary) !important;
	background-color: #24478f !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 12px rgba(36, 71, 143, 0.35) !important;
	bottom: 24px !important;
	right: 24px !important;
	margin: 0 !important;
}

#bp-better-messages-mini-mobile-open:hover,
.bp-better-messages-mini-mobile-open:hover,
.bm-mobile-open:hover {
	background: #1d3a75 !important;
	background-color: #1d3a75 !important;
}

/* —— Live chat buttons —— */
.bm-lc-button-styled,
a.bm-lc-button-styled,
button.bm-lc-button-styled {
	background: var(--pat-bm-primary) !important;
	color: #fff !important;
	border-radius: var(--pat-bm-radius) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	padding: 7px 14px !important;
	border: none !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	transition: background 0.15s ease, transform 0.15s ease;
}

.bm-lc-button-styled:hover {
	background: #1d3a75 !important;
	transform: translateY(-1px);
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
	.bp-messages-wrap *,
	.better-messages-mini *,
	.bm-lc-button-styled {
		transition: none !important;
		animation: none !important;
	}
}