/*
 * File: assets/css/mc-messaging.css
 *
 * Contact Seller MVP — Phase 10: Messaging & Inbox UI
 *
 * Covers:
 *   1. Contact Seller modal (inquiry form on listing pages)
 *   2. Full inbox view ([mc_inbox] shortcode)
 *   3. Messaging / privacy settings form ([mc_messaging_settings] shortcode)
 *
 * Conventions:
 *   - BEM-ish: .mc-{component}__element--modifier
 *   - No global overrides — all selectors scoped to component classes
 *   - Mobile-first, desktop refinements at ≥640px / ≥900px
 *   - Colour tokens reuse existing MC red (#e03131) and neutral palette
 *
 * @package MappCanada
 * @since   1.5.0
 */

/* ==========================================================================
   1. Contact Modal overlay + panel
   ========================================================================== */

.mc-contact-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
	z-index: 10000;
	display: flex;
	align-items: flex-end;        /* sheet-style on mobile */
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	padding: 0;
}

.mc-contact-modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.mc-contact-modal {
	background: #fff;
	border-radius: 12px 12px 0 0;
	width: 100%;
	max-width: 100%;
	max-height: 95vh;
	overflow-y: auto;
	padding: 1.5rem 1.25rem 2rem;
	box-shadow: 0 -4px 24px rgba( 0, 0, 0, 0.18 );
	transform: translateY( 100% );
	transition: transform 0.25s cubic-bezier( 0.4, 0, 0.2, 1 );
	position: relative;
}

.mc-contact-modal-overlay.is-open .mc-contact-modal {
	transform: translateY( 0 );
}

@media ( min-width: 640px ) {
	.mc-contact-modal-overlay {
		align-items: center;
	}
	.mc-contact-modal {
		border-radius: 12px;
		max-width: 480px;
		width: 100%;
		transform: translateY( 0 ) scale( 0.96 );
		transition: transform 0.2s ease, opacity 0.2s ease;
		opacity: 0;
	}
	.mc-contact-modal-overlay.is-open .mc-contact-modal {
		transform: translateY( 0 ) scale( 1 );
		opacity: 1;
	}
}

/* Close button */
.mc-contact-modal__close {
	position: absolute;
	top: 0.875rem;
	right: 1rem;
	background: none;
	border: none;
	cursor: pointer;
	color: #555;
	padding: 0.25rem;
	line-height: 1;
	font-size: 1.25rem;
	transition: color 0.15s;
}
.mc-contact-modal__close:hover,
.mc-contact-modal__close:focus-visible {
	color: #111;
}
.mc-contact-modal__close:focus-visible {
	outline: 2px solid #e03131;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Heading */
.mc-contact-modal__heading {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
	color: #111;
	padding-right: 2rem; /* avoid overlap with close btn */
}

/* Listing context chip */
.mc-contact-modal__listing-ref {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	color: #555;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 20px;
	padding: 0.2rem 0.65rem;
	margin-bottom: 1rem;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Login prompt */
.mc-contact-modal__login-prompt {
	text-align: center;
	padding: 1rem 0;
}
.mc-contact-modal__login-prompt p {
	color: #444;
	margin-bottom: 1rem;
}
.mc-contact-modal__login-btn {
	display: inline-block;
}

/* Textarea */
.mc-contact-modal__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 0.4rem;
}

.mc-contact-modal__textarea {
	width: 100%;
	min-height: 120px;
	padding: 0.75rem;
	border: 1.5px solid #d0d0d0;
	border-radius: 8px;
	font-size: 0.9rem;
	font-family: inherit;
	color: #111;
	resize: vertical;
	transition: border-color 0.15s;
	box-sizing: border-box;
}
.mc-contact-modal__textarea:focus {
	border-color: #e03131;
	outline: none;
}

/* Char counter */
.mc-contact-modal__char-count {
	font-size: 0.78rem;
	color: #888;
	text-align: right;
	margin-top: 0.25rem;
}
.mc-contact-modal__char-count.is-near-limit {
	color: #e03131;
}

/* Submit button */
.mc-contact-modal__submit {
	width: 100%;
	margin-top: 1rem;
}

/* Status message */
.mc-contact-modal__status {
	margin-top: 0.75rem;
	padding: 0.6rem 0.875rem;
	border-radius: 6px;
	font-size: 0.875rem;
	display: none;
}
.mc-contact-modal__status--success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}
.mc-contact-modal__status--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fca5a5;
}

/* Success state — shows after send */
.mc-contact-modal__success-state {
	text-align: center;
	padding: 1.5rem 0;
}
.mc-contact-modal__success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #ecfdf5;
	color: #059669;
	margin-bottom: 0.75rem;
}
.mc-contact-modal__success-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 0.5rem;
}
.mc-contact-modal__success-body {
	font-size: 0.875rem;
	color: #555;
	margin: 0;
}

/* ==========================================================================
   3. Full inbox view ([mc_inbox] shortcode)
   ========================================================================== */

.mc-inbox {
	max-width: 720px;
	margin: 0 auto;
}

.mc-inbox__header {
	display: flex;
	align-items: center;
	margin-bottom: 1.25rem;
}

.mc-inbox__title {
	font-size: 1.35rem;
	font-weight: 700;
	color: #111;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mc-inbox__unread-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	background: #e03131;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 11px;
}

.mc-inbox__empty {
	color: #666;
	font-size: 0.95rem;
	padding: 2rem;
	text-align: center;
	background: #fafafa;
	border: 1px dashed #ddd;
	border-radius: 8px;
}

.mc-inbox__login-notice {
	color: #555;
	text-align: center;
	padding: 1.5rem;
}

.mc-inbox__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mc-inbox__item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1rem 0;
	border-bottom: 1px solid #eee;
}
.mc-inbox__item:last-child {
	border-bottom: none;
}
.mc-inbox__item--unread {
	background: #fefaf5;
	margin: 0 -0.75rem;
	padding: 1rem 0.75rem;
	border-radius: 8px;
}

.mc-inbox__item-avatar img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
}

.mc-inbox__item-body {
	flex: 1;
	min-width: 0;
}

.mc-inbox__item-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.2rem;
}

.mc-inbox__sender {
	font-size: 0.9rem;
	font-weight: 700;
	color: #111;
}

.mc-inbox__unread-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #e03131;
	border-radius: 50%;
	flex-shrink: 0;
}

.mc-inbox__time {
	font-size: 0.78rem;
	color: #aaa;
	margin-left: auto;
}

.mc-inbox__listing-link {
	font-size: 0.82rem;
	color: #e03131;
	text-decoration: none;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 0.25rem;
}
.mc-inbox__listing-link:hover {
	text-decoration: underline;
}

.mc-inbox__preview {
	font-size: 0.875rem;
	color: #444;
	margin: 0 0 0.6rem;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Reply toggle button */
.mc-inbox__reply-toggle {
	font-size: 0.78rem;
	padding: 0.3rem 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

/* Reply form */
.mc-inbox__reply-wrap {
	margin-top: 0.65rem;
}

.mc-inbox__reply-textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1.5px solid #d0d0d0;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.875rem;
	color: #111;
	resize: vertical;
	min-height: 80px;
	box-sizing: border-box;
	transition: border-color 0.15s;
}
.mc-inbox__reply-textarea:focus {
	border-color: #e03131;
	outline: none;
}

.mc-inbox__reply-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.mc-inbox__reply-status {
	font-size: 0.8rem;
	margin-top: 0.4rem;
	min-height: 1.2em;
}

/* ==========================================================================
   4. Messaging / Privacy Settings ([mc_messaging_settings] shortcode)
   ========================================================================== */

.mc-msg-settings {
	max-width: 540px;
}

.mc-msg-settings__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 0.35rem;
}

.mc-msg-settings__desc {
	font-size: 0.875rem;
	color: #555;
	margin: 0 0 1.25rem;
}

.mc-msg-settings__status {
	padding: 0.6rem 0.875rem;
	border-radius: 6px;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}
.mc-msg-settings__status--success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}
.mc-msg-settings__status--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fca5a5;
}

.mc-msg-settings__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mc-msg-settings__row {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	cursor: pointer;
}

/* Toggle switch */
.mc-msg-settings__toggle-wrap {
	position: relative;
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.mc-msg-settings__checkbox {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.mc-msg-settings__toggle {
	display: block;
	width: 42px;
	height: 24px;
	background: #ccc;
	border-radius: 12px;
	position: relative;
	transition: background 0.2s;
}
.mc-msg-settings__toggle::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.2 );
}

.mc-msg-settings__checkbox:checked + .mc-msg-settings__toggle {
	background: #e03131;
}
.mc-msg-settings__checkbox:checked + .mc-msg-settings__toggle::after {
	transform: translateX( 18px );
}
.mc-msg-settings__checkbox:focus-visible + .mc-msg-settings__toggle {
	outline: 2px solid #e03131;
	outline-offset: 2px;
}

.mc-msg-settings__label-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.mc-msg-settings__label-text strong {
	font-size: 0.9rem;
	color: #111;
}

.mc-msg-settings__hint {
	font-size: 0.8rem;
	color: #666;
}

.mc-msg-settings__save {
	align-self: flex-start;
	margin-top: 0.5rem;
}

.mc-msg-settings__login-notice {
	color: #555;
}

/* Future note box */
.mc-msg-settings__future-note {
	margin-top: 1.5rem;
	padding: 0.75rem 1rem;
	background: #f5f5f5;
	border-left: 3px solid #d0d0d0;
	border-radius: 0 6px 6px 0;
	font-size: 0.8rem;
	color: #555;
}
.mc-msg-settings__future-note strong {
	color: #333;
	display: block;
	margin-bottom: 0.25rem;
}

/* ==========================================================================
   5. Listing page — Contact Seller button states
   ========================================================================== */

/* Ensure the inquiry-trigger button looks and behaves like the existing primary btn */
.mc-listing-contact-card__btn--inquiry,
.mc-listing-sticky-bar__btn--inquiry {
	cursor: pointer;
}

/* ==========================================================================
   6. Utility button size variant (--sm)
   ========================================================================== */

.mappcanada-btn--sm {
	font-size: 0.8rem;
	padding: 0.35rem 0.875rem;
}

.mappcanada-btn--ghost {
	background: transparent;
	border: 1.5px solid #d0d0d0;
	color: #444;
}
.mappcanada-btn--ghost:hover {
	border-color: #aaa;
	color: #111;
}

/* ==========================================================================
   7. Hub modal — Saved Listings section
   ========================================================================== */

.mc-hub-saved {
margin-top: 0.5rem;
}

.mc-hub-saved__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}

.mc-hub-saved__title {
font-size: 0.85rem;
font-weight: 700;
color: #111;
margin: 0;
display: flex;
align-items: center;
gap: 0.4rem;
}

.mc-hub-saved__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
background: #e03131;
color: #fff;
font-size: 0.7rem;
font-weight: 700;
border-radius: 9px;
line-height: 1;
}

.mc-hub-saved__badge--link {
margin-left: 4px;
}

.mc-hub-saved__view-all {
font-size: 0.75rem;
color: #e03131;
text-decoration: none;
}
.mc-hub-saved__view-all:hover {
text-decoration: underline;
}

.mc-hub-saved__empty {
font-size: 0.8rem;
color: #888;
padding: 0.5rem 0;
margin: 0;
}

.mc-hub-saved__list {
list-style: none;
padding: 0;
margin: 0;
}

.mc-hub-saved__item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0;
border-bottom: 1px solid #f0f0f0;
}
.mc-hub-saved__item:last-child {
border-bottom: none;
}

.mc-hub-saved__item-thumb-link {
flex-shrink: 0;
}
.mc-hub-saved__item-thumb {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 6px;
display: block;
}
.mc-hub-saved__item-thumb-placeholder {
width: 40px;
height: 40px;
border-radius: 6px;
background: #f0f0f0;
flex-shrink: 0;
}

.mc-hub-saved__item-body {
flex: 1;
min-width: 0;
}

.mc-hub-saved__item-title {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: #111;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mc-hub-saved__item-title:hover {
color: #e03131;
}

.mc-hub-saved__item-price {
font-size: 0.73rem;
color: #e03131;
font-weight: 700;
}

/* ==========================================================================
   8. Full Saved Listings view ([mc_saved_listings] shortcode)
   ========================================================================== */

.mc-saved-listings {
max-width: 860px;
margin: 0 auto;
padding: 1.5rem 1rem;
}

.mc-saved-listings__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #f0f0f0;
}

.mc-saved-listings__title {
font-size: 1.25rem;
font-weight: 700;
color: #111;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}

.mc-saved-listings__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 5px;
background: #e03131;
color: #fff;
font-size: 0.75rem;
font-weight: 700;
border-radius: 11px;
line-height: 1;
}

/* Empty state */
.mc-saved-listings__empty {
text-align: center;
padding: 3rem 1.5rem;
}
.mc-saved-listings--guest .mc-saved-listings__empty {
max-width: 360px;
margin: 2rem auto;
padding: 2.5rem 1.5rem;
background: #fff;
border: 1px solid #eee;
border-radius: 12px;
}

.mc-saved-listings__empty-icon {
margin-bottom: 1rem;
opacity: 0.6;
}

.mc-saved-listings__empty-title {
font-size: 1.1rem;
font-weight: 700;
color: #222;
margin: 0 0 0.5rem;
}

.mc-saved-listings__empty-text {
font-size: 0.92rem;
color: #666;
margin: 0 0 1.25rem;
}

.mc-saved-listings__login-btn {
display: inline-block;
padding: 0.6rem 1.5rem;
background: #e03131;
color: #fff;
border-radius: 6px;
font-weight: 700;
text-decoration: none;
font-size: 0.9rem;
transition: background 0.15s;
}
.mc-saved-listings__login-btn:hover {
background: #c92a2a;
}

/* Grid */
.mc-saved-listings__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.25rem;
}

/* Card */
.mc-saved-listings__card {
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.15s, transform 0.15s;
}
.mc-saved-listings__card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}

.mc-saved-listings__card-thumb-link {
display: block;
flex-shrink: 0;
overflow: hidden;
line-height: 0;
}
.mc-saved-listings__card-thumb {
width: 100%;
height: 160px;
object-fit: cover;
transition: transform 0.2s;
}
.mc-saved-listings__card:hover .mc-saved-listings__card-thumb {
transform: scale(1.03);
}

.mc-saved-listings__card-thumb-placeholder {
height: 160px;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
}

.mc-saved-listings__card-body {
padding: 0.75rem 0.875rem 0.5rem;
flex: 1;
}

.mc-saved-listings__card-title {
display: block;
font-size: 0.92rem;
font-weight: 700;
color: #111;
text-decoration: none;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 0.4rem;
line-height: 1.35;
}
.mc-saved-listings__card-title:hover {
color: #e03131;
}

.mc-saved-listings__card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}

.mc-saved-listings__card-price {
font-size: 0.9rem;
font-weight: 700;
color: #e03131;
}

.mc-saved-listings__card-location {
font-size: 0.78rem;
color: #888;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}

/* Card actions row */
.mc-saved-listings__card-actions {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.875rem 0.75rem;
border-top: 1px solid #f5f5f5;
margin-top: 0.25rem;
}

.mc-saved-listings__card-view-btn {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.875rem;
background: #e03131;
color: #fff;
border-radius: 5px;
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
transition: background 0.15s;
}
.mc-saved-listings__card-view-btn:hover {
background: #c92a2a;
}

.mc-saved-listings__card-unsave {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.75rem;
background: transparent;
border: 1px solid #f0a0a0;
border-radius: 5px;
color: #e03131;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.mc-saved-listings__card-unsave:hover {
background: #fff0f0;
border-color: #e03131;
}
.mc-saved-listings__card-unsave svg path {
fill: #e03131;
}

/* Mobile */
@media (max-width: 600px) {
.mc-saved-listings__grid {
grid-template-columns: 1fr;
}

.mc-saved-listings__card-thumb,
.mc-saved-listings__card-thumb-placeholder {
height: 180px;
}
}

/* ==========================================================================
   9. Inbox actions row — View Thread + Reply toggle (Phase 11)
   ========================================================================== */

.mc-inbox__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

/* Load More button */
.mc-inbox__load-more-wrap {
	text-align: center;
	padding: 1.25rem 0 0.5rem;
}

.mc-inbox__load-more {
	min-width: 140px;
}

/* ==========================================================================
   10. Thread Panel — full conversation view (Phase 11)
   ========================================================================== */

.mc-thread-panel {
	background: #fff;
	border: 1.5px solid #e8e8e8;
	border-radius: 10px;
	margin-bottom: 1.25rem;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.07 );
}

.mc-thread-panel__inner {
	display: flex;
	flex-direction: column;
	max-height: 70vh;
}

/* Header */
.mc-thread-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #f0f0f0;
	background: #fafafa;
	flex-shrink: 0;
}

.mc-thread-panel__listing {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.82rem;
	color: #555;
	overflow: hidden;
}

.mc-thread-panel__listing-link {
	color: #e03131;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mc-thread-panel__listing-link:hover {
	text-decoration: underline;
}

.mc-thread-panel__close {
	flex-shrink: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: #888;
	padding: 0.25rem;
	line-height: 1;
	transition: color 0.15s;
	margin-left: 0.75rem;
}
.mc-thread-panel__close:hover,
.mc-thread-panel__close:focus-visible {
	color: #111;
}
.mc-thread-panel__close:focus-visible {
	outline: 2px solid #e03131;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Message list */
.mc-thread-panel__messages {
	list-style: none;
	padding: 1rem;
	margin: 0;
	overflow-y: auto;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	min-height: 80px;
}

/* Loading / error states */
.mc-thread-panel__loading,
.mc-thread-panel__error {
	padding: 1.5rem;
	text-align: center;
	color: #888;
	font-size: 0.875rem;
}
.mc-thread-panel__error {
	color: #c0392b;
}

/* Message bubbles */
.mc-thread-msg {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	max-width: 85%;
}

.mc-thread-msg--mine {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.mc-thread-msg--theirs {
	align-self: flex-start;
}

.mc-thread-msg--system {
	align-self: center;
	max-width: 100%;
}
.mc-thread-msg--system span {
	font-size: 0.78rem;
	color: #aaa;
}

.mc-thread-msg__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-bottom: 2px;
}

.mc-thread-msg__bubble {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.mc-thread-msg__text {
	margin: 0;
	padding: 0.6rem 0.875rem;
	border-radius: 14px;
	font-size: 0.875rem;
	line-height: 1.5;
	word-break: break-word;
	white-space: pre-wrap;
}

.mc-thread-msg__link {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mc-thread-msg--mine .mc-thread-msg__text {
	background: #e03131;
	color: #fff;
	border-bottom-right-radius: 4px;
}

.mc-thread-msg--theirs .mc-thread-msg__text {
	background: #f3f4f6;
	color: #222;
	border-bottom-left-radius: 4px;
}

.mc-thread-msg__meta {
	font-size: 0.72rem;
	color: #aaa;
}

.mc-thread-msg--mine .mc-thread-msg__meta {
	text-align: right;
}

/* Reply form */
.mc-thread-panel__reply {
	border-top: 1px solid #f0f0f0;
	padding: 0.75rem 1rem;
	flex-shrink: 0;
}

.mc-thread-panel__reply-textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1.5px solid #d0d0d0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.875rem;
	color: #111;
	resize: vertical;
	min-height: 72px;
	box-sizing: border-box;
	transition: border-color 0.15s;
}
.mc-thread-panel__reply-textarea:focus {
	border-color: #e03131;
	outline: none;
}

.mc-thread-panel__reply-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.mc-thread-panel__reply-status {
	font-size: 0.8rem;
	margin-top: 0.35rem;
	min-height: 1.2em;
	color: #555;
}

/* ==========================================================================
   11. My Messages — buyer conversation surface ([mc_my_messages]) (Phase 11)
   ========================================================================== */

.mc-my-messages {
	max-width: 720px;
	margin: 0 auto;
}

.mc-my-messages__header {
	display: flex;
	align-items: center;
	margin-bottom: 1.25rem;
}

.mc-my-messages__title {
	font-size: 1.35rem;
	font-weight: 700;
	color: #111;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mc-my-messages__login-notice {
	color: #555;
	text-align: center;
	padding: 1.5rem;
}

.mc-my-messages__empty {
	color: #666;
	font-size: 0.95rem;
	padding: 2rem;
	text-align: center;
	background: #fafafa;
	border: 1px dashed #ddd;
	border-radius: 8px;
}

.mc-my-messages__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mc-my-messages__item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1rem 0;
	border-bottom: 1px solid #eee;
}
.mc-my-messages__item:last-child {
	border-bottom: none;
}
.mc-my-messages__item--unread {
	background: #fefaf5;
	margin: 0 -0.75rem;
	padding: 1rem 0.75rem;
	border-radius: 8px;
}

.mc-my-messages__item-avatar img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
}

.mc-my-messages__item-body {
	flex: 1;
	min-width: 0;
}

.mc-my-messages__item-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.2rem;
}

.mc-my-messages__recipient {
	font-size: 0.9rem;
	font-weight: 700;
	color: #111;
}

.mc-my-messages__unread-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #e03131;
	border-radius: 50%;
	flex-shrink: 0;
}

.mc-my-messages__time {
	font-size: 0.78rem;
	color: #aaa;
	margin-left: auto;
}

.mc-my-messages__listing-link {
	font-size: 0.82rem;
	color: #e03131;
	text-decoration: none;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 0.25rem;
}
.mc-my-messages__listing-link:hover {
	text-decoration: underline;
}

.mc-my-messages__preview {
	font-size: 0.875rem;
	color: #444;
	margin: 0 0 0.6rem;
	white-space: pre-wrap;
	word-break: break-word;
}

.mc-my-messages__view-thread {
	font-size: 0.78rem;
	padding: 0.3rem 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

/* Load More button */
.mc-my-messages__load-more-wrap {
	text-align: center;
	padding: 1.25rem 0 0.5rem;
}

.mc-my-messages__load-more {
	min-width: 140px;
}

/* ==========================================================================
   Phase 12 — Inbox / Archived tabs
   ========================================================================== */

/* Shared tab bar for [mc_inbox] and [mc_my_messages] */
.mc-inbox__tabs,
.mc-my-messages__tabs,
.mc-messages-center__tabs {
display: flex;
gap: 0;
border-bottom: 2px solid #e5e7eb;
margin: 0.75rem 0 1rem;
}

.mc-inbox__tab,
.mc-my-messages__tab,
.mc-messages-center__tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: #6b7280;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}

.mc-inbox__tab:hover,
.mc-my-messages__tab:hover,
.mc-messages-center__tab:hover {
color: #111827;
}

.mc-inbox__tab--active,
.mc-my-messages__tab--active,
.mc-messages-center__tab--active {
color: #c0392b;
border-bottom-color: #c0392b;
}

/* Tab panels */
.mc-inbox__tab-panel,
.mc-my-messages__tab-panel,
.mc-messages-center__tab-panel {
min-height: 2rem;
}

/* ==========================================================================
   Phase 12 — Archive and Delete (Remove) action buttons
   ========================================================================== */

.mc-inbox__archive-btn,
.mc-inbox__delete-btn,
.mc-my-messages__archive-btn,
.mc-my-messages__delete-btn,
.mc-messages-center__archive-btn,
.mc-messages-center__delete-btn {
font-size: 0.75rem;
padding: 0.25rem 0.6rem;
color: #6b7280;
border-color: #d1d5db;
background: transparent;
}

.mc-inbox__archive-btn:hover,
.mc-my-messages__archive-btn:hover,
.mc-messages-center__archive-btn:hover {
color: #374151;
border-color: #6b7280;
background: #f9fafb;
}

.mc-inbox__delete-btn:hover,
.mc-my-messages__delete-btn:hover,
.mc-messages-center__delete-btn:hover {
color: #b91c1c;
border-color: #fca5a5;
background: #fef2f2;
}

/* Actions row — allow wrapping on narrow screens */
.mc-inbox__actions,
.mc-my-messages__actions,
.mc-messages-center__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
}

/* Empty/loading states inside tab panels */
.mc-inbox__loading,
.mc-my-messages__loading,
.mc-messages-center__loading {
list-style: none;
padding: 1rem;
color: #6b7280;
font-size: 0.875rem;
}

.mc-inbox__error,
.mc-my-messages__error,
.mc-messages-center__error {
list-style: none;
padding: 1rem;
color: #b91c1c;
font-size: 0.875rem;
}

/* ==========================================================================
   Messages Center — unified [mc_messages_center] shortcode
   ========================================================================== */

.mc-messages-center {
max-width: 860px;
margin: 0 auto;
padding: 1.5rem 1rem;
}

.mc-messages-center__header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 0;
padding-bottom: 0.75rem;
border-bottom: 2px solid #f0f0f0;
}

.mc-messages-center__title {
font-size: 1.25rem;
font-weight: 700;
color: #111;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}

.mc-messages-center__unread-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 5px;
background: #e03131;
color: #fff;
font-size: 0.75rem;
font-weight: 700;
border-radius: 11px;
line-height: 1;
}

.mc-messages-center__login-notice {
padding: 1.5rem;
color: #555;
}

.mc-messages-center__empty {
padding: 3rem 1rem;
color: #6b7280;
font-size: 0.95rem;
text-align: center;
}

.mc-messages-center__list {
list-style: none;
padding: 0;
margin: 0;
}

.mc-messages-center__item {
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 1rem 0.25rem;
border-bottom: 1px solid #f0f0f0;
transition: background 0.1s;
}

.mc-messages-center__item:last-child {
border-bottom: none;
}

.mc-messages-center__item--unread {
background: #fef9f9;
border-left: 3px solid #e03131;
padding-left: calc( 0.25rem - 3px );
}

.mc-messages-center__item-avatar img,
.mc-messages-center__avatar-img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}

.mc-messages-center__item-body {
flex: 1;
min-width: 0;
}

.mc-messages-center__item-meta {
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
margin-bottom: 0.25rem;
}

.mc-messages-center__other-user {
font-weight: 600;
font-size: 0.9rem;
color: #111;
}

.mc-messages-center__unread-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #e03131;
flex-shrink: 0;
}

.mc-messages-center__time {
font-size: 0.78rem;
color: #9ca3af;
margin-left: auto;
}

/* Listing row: link + context label side by side */
.mc-messages-center__listing-row {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.3rem;
}

.mc-messages-center__listing-link {
font-size: 0.875rem;
color: #e03131;
text-decoration: none;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 60%;
}

.mc-messages-center__listing-link:hover {
text-decoration: underline;
color: #c92a2a;
}

/* Subtle role context label (e.g. "On your listing" / "Inquiry you sent") */
.mc-messages-center__context-label {
display: inline-block;
font-size: 0.72rem;
font-weight: 500;
color: #6b7280;
background: #f3f4f6;
border-radius: 4px;
padding: 0.1rem 0.45rem;
white-space: nowrap;
}

.mc-messages-center__preview {
font-size: 0.875rem;
color: #555;
margin: 0 0 0.25rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.mc-messages-center__load-more-wrap {
text-align: center;
padding: 1.25rem 0 0.5rem;
}

.mc-messages-center__load-more {
min-width: 140px;
}

/* ==========================================================================
   Phase 3 — Live-feeling updates, polish, and production-ready states
   ========================================================================== */

/* ── Spinner / loading animation ──────────────────────────────────────────── */

@keyframes mc-spin {
to { transform: rotate( 360deg ); }
}

.mc-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #e0e0e0;
border-top-color: #e03131;
border-radius: 50%;
animation: mc-spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 0.5rem;
flex-shrink: 0;
}

/* ── Thread panel loading / error ─────────────────────────────────────────── */

.mc-thread-panel__loading {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
color: #6b7280;
font-size: 0.9rem;
gap: 0.5rem;
}

.mc-thread-panel__error {
padding: 2rem 1.5rem;
color: #b91c1c;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
margin: 1rem;
font-size: 0.9rem;
text-align: center;
}

/* ── Messages Center empty / error states ─────────────────────────────────── */

.mc-messages-center__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 4rem 1.5rem 3rem;
color: #6b7280;
font-size: 0.9375rem;
text-align: center;
line-height: 1.6;
}

.mc-messages-center__empty::before {
content: '💬';
font-size: 2.5rem;
opacity: 0.45;
display: block;
}

.mc-messages-center__empty--archived::before {
content: '📂';
}

.mc-messages-center__loading {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 2.5rem 1rem;
color: #9ca3af;
font-size: 0.875rem;
}

.mc-messages-center__error {
padding: 2rem 1rem;
color: #b91c1c;
font-size: 0.9rem;
text-align: center;
}

/* ── Selected / open conversation row ─────────────────────────────────────── */

.mc-messages-center__item--open {
background: #fff5f5;
border-left: 3px solid #e03131;
padding-left: calc( 0.25rem - 3px );
border-radius: 0 6px 6px 0;
}

.mc-inbox__item--open,
.mc-my-messages__item--open {
background: #fff5f5;
border-left: 3px solid #e03131;
}

/* ── Conversation list row hover ─────────────────────────────────────────── */

.mc-messages-center__item {
cursor: pointer;
border-radius: 4px;
transition: background 0.12s ease;
}

.mc-messages-center__item:hover {
background: #fafafa;
}

.mc-messages-center__item--open:hover,
.mc-messages-center__item--unread:hover {
background: inherit;
}

/* ── Unread row — stronger signal ─────────────────────────────────────────── */

.mc-messages-center__item--unread .mc-messages-center__other-user {
color: #111;
font-weight: 700;
}

.mc-messages-center__item--unread .mc-messages-center__preview {
color: #374151;
font-weight: 500;
}

/* ── Conversation action buttons ─────────────────────────────────────────── */

.mc-messages-center__actions {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-top: 0.5rem;
}

.mc-messages-center__view-thread svg {
vertical-align: middle;
margin-right: 3px;
}

/* ── Thread message bubble states ────────────────────────────────────────── */

/* Sending (optimistic) — dimmed until confirmed */
.mc-thread-msg--sending {
opacity: 0.55;
}

.mc-thread-msg--sending .mc-thread-msg__bubble::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
border: 1.5px solid #e0e0e0;
border-top-color: #e03131;
border-radius: 50%;
animation: mc-spin 0.7s linear infinite;
margin-left: 0.5rem;
vertical-align: middle;
}

/* Failed to send — red tint with warning indicator */
.mc-thread-msg--failed .mc-thread-msg__bubble {
background: #fef2f2;
border: 1px solid #fca5a5;
}

.mc-thread-msg--failed .mc-thread-msg__meta {
color: #ef4444;
}

/* ── Thread panel refinements ────────────────────────────────────────────── */

.mc-thread-panel__inner {
display: flex;
flex-direction: column;
max-height: 75vh;
}

.mc-thread-panel__messages {
flex: 1;
overflow-y: auto;
padding: 1rem 1.25rem;
scroll-behavior: smooth;
}

.mc-thread-panel__reply {
border-top: 1px solid #f0f0f0;
padding: 0.875rem 1.25rem 1rem;
background: #fafafa;
flex-shrink: 0;
}

.mc-thread-panel__reply-textarea {
width: 100%;
resize: none;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 0.625rem 0.875rem;
font-size: 0.9rem;
line-height: 1.5;
color: #111;
transition: border-color 0.15s;
box-sizing: border-box;
}

.mc-thread-panel__reply-textarea:focus {
border-color: #e03131;
outline: none;
box-shadow: 0 0 0 3px rgba( 224, 49, 49, 0.12 );
}

.mc-thread-panel__reply-actions {
display: flex;
justify-content: flex-end;
margin-top: 0.5rem;
gap: 0.5rem;
}

.mc-thread-panel__reply-send {
min-width: 100px;
}

.mc-thread-panel__reply-send:disabled {
opacity: 0.6;
cursor: not-allowed;
}

.mc-thread-panel__reply-status {
min-height: 1.25rem;
font-size: 0.8rem;
color: #6b7280;
margin-top: 0.25rem;
}

.mc-thread-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.875rem 1.25rem;
border-bottom: 1px solid #f0f0f0;
background: #fff;
position: sticky;
top: 0;
z-index: 2;
}

.mc-thread-panel__listing {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
color: #555;
min-width: 0;
}

.mc-thread-panel__listing-link {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #e03131;
text-decoration: none;
font-weight: 500;
}

.mc-thread-panel__listing-link:hover {
text-decoration: underline;
}

.mc-thread-panel__close {
background: none;
border: none;
cursor: pointer;
color: #6b7280;
padding: 0.375rem;
border-radius: 4px;
line-height: 1;
transition: color 0.15s, background 0.15s;
flex-shrink: 0;
}

.mc-thread-panel__close:hover {
color: #111;
background: #f3f4f6;
}

/* ── Messages Center — improved spacing & hierarchy ──────────────────────── */

.mc-messages-center {
max-width: 900px;
}

.mc-messages-center__header {
padding-bottom: 1rem;
border-bottom-width: 1px;
border-bottom-color: #e5e7eb;
}

.mc-messages-center__item {
gap: 0.875rem;
padding: 1rem 0.75rem;
border-bottom-color: #f3f4f6;
}

.mc-messages-center__item:last-child {
border-bottom: none;
}

.mc-messages-center__tabs {
gap: 0.375rem;
}

.mc-messages-center__tab {
padding: 0.375rem 1rem;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
border: 1px solid transparent;
background: none;
cursor: pointer;
color: #6b7280;
transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.mc-messages-center__tab:hover {
color: #111;
background: #f3f4f6;
}

.mc-messages-center__tab--active {
color: #e03131;
background: #fff5f5;
border-color: #fca5a5;
}

/* ── Mobile layout ───────────────────────────────────────────────────────── */

@media ( max-width: 639px ) {
.mc-messages-center {
padding: 1rem 0.75rem;
}

.mc-messages-center__item {
padding: 0.875rem 0.5rem;
}

/* Keep action buttons compact and horizontal on mobile — avoid tall stacked rows */
.mc-messages-center__actions {
gap: 0.25rem;
flex-wrap: wrap;
}

.mc-messages-center__actions .mappcanada-btn {
padding: 5px 9px;
font-size: 0.8125rem;
line-height: 1.2;
}

.mc-thread-panel__inner {
max-height: 80vh;
}

.mc-thread-panel__reply-textarea {
font-size: 1rem; /* prevent auto-zoom on iOS */
}

.mc-thread-panel__messages {
padding: 0.875rem 1rem;
}

.mc-thread-panel__header {
padding: 0.75rem 1rem;
}

/* Hidden section: more readable on small screens (Phase 5) */
.mc-messages-center__hidden-section {
margin-top: 1.5rem;
padding-top: 1rem;
}

.mc-messages-center__hidden-label {
font-size: 0.875rem;
}
}

@media ( min-width: 640px ) {
.mc-messages-center__item {
padding: 1.125rem 1rem;
}

.mc-thread-panel__reply-actions {
gap: 0.75rem;
}
}

/* ── Prevent body scroll while modal open on mobile ─────────────────────── */
body.mc-thread-panel-open {
overflow: hidden;
}

/* ==========================================================================
   Phase 4 — Hidden conversations section (inside Archived tab)
   ========================================================================== */

.mc-messages-center__hidden-section {
margin-top: 1.75rem;
border-top: 2px dashed #e0e0e0;
padding-top: 1.25rem;
}

.mc-messages-center__hidden-header {
margin-bottom: 0.75rem;
}

.mc-messages-center__hidden-label {
font-size: 0.95rem;
font-weight: 700;
color: #555;
margin: 0 0 0.25rem;
padding-left: 0.85rem;
border-left: 3px solid #bbb;
}

.mc-messages-center__hidden-help {
font-size: 0.82rem;
color: #888;
margin: 0;
}

.mc-messages-center__restore-btn {
/* Inherits .mappcanada-btn .mappcanada-btn--ghost .mappcanada-btn--sm */
/* Extra: green tint to signal a positive/recovery action */
color: #15803d !important;
border-color: #15803d !important;
}

.mc-messages-center__restore-btn:hover,
.mc-messages-center__restore-btn:focus-visible {
background: #f0fdf4 !important;
}

/* ==========================================================================
   Phase 5 — Unread-row trust, hidden-thread hardening, mobile polish
   ========================================================================== */

/*
 * Unread indicators work the same in Inbox, Archived, and Hidden sections —
 * they use the shared .mc-messages-center__item--unread modifier and the
 * .mc-messages-center__unread-dot element. No extra rule needed; this comment
 * documents that hidden-section items are intentionally included.
 *
 * Mailbox rule (documented in PHP mc_upsert_conversation):
 *   - Hidden threads (buyer_deleted / seller_deleted = 1) stay hidden when
 *     new messages arrive. Only an explicit Restore clears _deleted.
 *   - Unread flags and badge count include hidden conversations so the user
 *     still knows something arrived.
 */

/* Unread indicator inside hidden section — same appearance as inbox (inherited).
   Explicit rule here for clarity and future style overrides. */
.mc-messages-center__list--hidden .mc-messages-center__item--unread .mc-messages-center__other-user {
color: #111;
font-weight: 700;
}

.mc-messages-center__list--hidden .mc-messages-center__item--unread .mc-messages-center__preview {
color: #374151;
font-weight: 500;
}

/* Mobile: keep restore button compact inline */
@media ( max-width: 639px ) {
.mc-messages-center__restore-btn {
padding: 5px 9px;
font-size: 0.8125rem;
line-height: 1.2;
}
}

/* Avatar link — wraps avatar img in conversation list rows */
.mc-messages-center__avatar-link {
display: block;
border-radius: 50%;
line-height: 0;
text-decoration: none;
color: inherit;
}

.mc-messages-center__avatar-link:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}