/* ===========================================================
 * CGMP Chat — frontend styles
 * Marketplace-grade UI: floating panel, message bubbles, inbox.
 * =========================================================== */

/* ----- Triggers (buttons on product page / storefront) ----- */
.cgmp-chat-trigger {
	display: inline-flex; align-items: center; gap: 8px;
	background: #fff; color: #1E73BE;
	border: 1.5px solid #1E73BE; border-radius: 8px;
	padding: 10px 18px;
	font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	cursor: pointer;
	transition: background .15s, color .15s, transform .1s;
	margin-top: 10px;
}
.cgmp-chat-trigger:hover { background: #1E73BE; color: #fff; }
.cgmp-chat-trigger:active { transform: scale(.98); }
.cgmp-chat-trigger--storefront {
	background: linear-gradient(135deg, #1E73BE, #0F4C8C);
	color: #fff; border-color: transparent;
}
.cgmp-chat-trigger--storefront:hover { filter: brightness(1.1); }

/* ----- Floating chat panel ----- */
.cgmp-chat-panel {
	position: fixed;
	right: 18px; bottom: 18px;
	width: 360px; max-width: calc(100vw - 36px);
	height: 540px; max-height: calc(100vh - 80px);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25), 0 4px 10px rgba(15, 23, 42, 0.08);
	display: flex; flex-direction: column;
	z-index: 99998;
	overflow: hidden;
	font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #1F2937;
}
.cgmp-chat-panel[hidden] { display: none !important; }

@media (max-width: 480px) {
	.cgmp-chat-panel {
		right: 0; bottom: 0; left: 0;
		width: 100%; height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
}

/* head */
.cgmp-chat-head {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px;
	background: linear-gradient(135deg, #1E73BE, #0F4C8C);
	color: #fff;
	flex-shrink: 0;
}
.cgmp-chat-head-avatar {
	width: 38px; height: 38px; border-radius: 50%;
	background: #fff; object-fit: cover;
	border: 2px solid rgba(255,255,255,.35);
	flex-shrink: 0;
}
.cgmp-chat-head-body { flex: 1; min-width: 0; }
.cgmp-chat-head-body strong { display: block; font-size: 14px; font-weight: 700; }
.cgmp-chat-head-body small { display: block; font-size: 12px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgmp-chat-close {
	background: rgba(255,255,255,.15); color: #fff;
	border: 0; width: 30px; height: 30px;
	border-radius: 50%; font-size: 20px; line-height: 1;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cgmp-chat-close:hover { background: rgba(255,255,255,.3); }

/* body / message list */
.cgmp-chat-body {
	flex: 1; min-height: 0;
	overflow-y: auto;
	padding: 14px;
	background: #F8FAFC;
	display: flex; flex-direction: column; gap: 8px;
}
.cgmp-chat-status { text-align: center; color: #94A3B8; font-size: 12px; margin: auto 0; }

.cgmp-chat-msg {
	display: flex; flex-direction: column;
	max-width: 78%;
	padding: 9px 13px; border-radius: 16px;
	word-wrap: break-word; word-break: break-word;
	box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.cgmp-chat-msg--mine {
	align-self: flex-end;
	background: linear-gradient(135deg, #1E73BE, #2563EB);
	color: #fff; border-bottom-right-radius: 4px;
}
.cgmp-chat-msg--theirs {
	align-self: flex-start;
	background: #fff; color: #1F2937;
	border: 1px solid #E5E7EB;
	border-bottom-left-radius: 4px;
}
.cgmp-chat-msg-body { white-space: pre-wrap; }
.cgmp-chat-msg-meta { font-size: 10.5px; opacity: 0.7; margin-top: 3px; }
.cgmp-chat-msg--mine .cgmp-chat-msg-meta { text-align: right; }
.cgmp-chat-msg-img {
	margin-top: 4px; border-radius: 8px; max-width: 220px; max-height: 220px;
	display: block; cursor: pointer;
}
.cgmp-chat-day {
	align-self: center;
	font-size: 11px; color: #94A3B8;
	background: rgba(148,163,184,.12); padding: 3px 10px;
	border-radius: 999px; margin: 6px 0;
}

/* composer */
.cgmp-chat-composer {
	display: flex; align-items: flex-end; gap: 6px;
	padding: 8px 10px;
	border-top: 1px solid #E5E7EB;
	background: #fff;
	flex-shrink: 0;
}
.cgmp-chat-attach {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: 18px;
	color: #64748B; border-radius: 8px;
}
.cgmp-chat-attach:hover { background: #F1F5F9; color: #1E73BE; }
.cgmp-chat-composer textarea {
	flex: 1; resize: none;
	border: 1px solid #E5E7EB; border-radius: 18px;
	padding: 8px 14px;
	font: inherit; min-height: 36px; max-height: 120px;
	outline: none; transition: border-color .15s;
}
.cgmp-chat-composer textarea:focus { border-color: #1E73BE; }
.cgmp-chat-send {
	background: #1E73BE; color: #fff;
	border: 0; border-radius: 18px;
	padding: 8px 18px; font-weight: 700; cursor: pointer;
	transition: background .15s;
	height: 36px;
}
.cgmp-chat-send:hover:not(:disabled) { background: #0F4C8C; }
.cgmp-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Customer inbox (My account → Mis conversaciones) ----- */
.cgmp-chat-inbox h2 { margin: 0 0 16px; }
.cgmp-chat-inbox-list { list-style: none; padding: 0; margin: 0; }
.cgmp-chat-inbox-item { margin: 0 0 8px; }
.cgmp-chat-inbox-row {
	width: 100%; display: flex; align-items: center; gap: 12px;
	padding: 12px 14px;
	background: #fff; border: 1px solid #E5E7EB; border-radius: 10px;
	cursor: pointer; text-align: left;
	transition: border-color .15s, box-shadow .15s;
	font: inherit; color: inherit;
}
.cgmp-chat-inbox-row:hover { border-color: #1E73BE; box-shadow: 0 2px 6px rgba(30,115,190,.08); }
.cgmp-chat-inbox-item.is-unread .cgmp-chat-inbox-row { background: #EFF6FF; border-color: #BFDBFE; }
.cgmp-chat-inbox-avatar {
	width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
	background: #DBEAFE; color: #1E40AF;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
}
.cgmp-chat-inbox-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cgmp-chat-inbox-meta strong { color: #0F172A; }
.cgmp-chat-inbox-product { font-size: 12px; color: #64748B; }
.cgmp-chat-inbox-preview {
	font-size: 13px; color: #475569;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cgmp-chat-inbox-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.cgmp-chat-inbox-side small { color: #94A3B8; font-size: 11px; }
.cgmp-chat-inbox-badge {
	background: #DC2626; color: #fff;
	font-size: 11px; font-weight: 700;
	padding: 2px 8px; border-radius: 999px; min-width: 22px; text-align: center;
}

/* badge inside the WC account menu label */
.cgmp-chat-badge {
	display: inline-block;
	background: #DC2626; color: #fff;
	font-size: 11px; font-weight: 700;
	padding: 1px 7px; border-radius: 999px;
	margin-left: 5px;
}

/* ----- Empty state ----- */
.cgmp-chat-empty {
	padding: 32px 16px; text-align: center; color: #64748B;
	background: #F8FAFC; border: 1px dashed #E5E7EB; border-radius: 10px;
}

/* ----- Vendor inbox (/mi-tienda/chat/) ----- */
.cgmp-chat-vinbox-head h2 { margin: 0 0 4px; }
.cgmp-chat-vinbox-head p { color: #64748B; margin: 0 0 18px; font-size: 13px; }
.cgmp-chat-vinbox-list { list-style: none; padding: 0; margin: 0; }
.cgmp-chat-vinbox-item { margin: 0 0 8px; }
.cgmp-chat-vinbox-row {
	width: 100%; display: flex; align-items: center; gap: 12px;
	padding: 12px 14px; background: #fff;
	border: 1px solid #E5E7EB; border-radius: 10px;
	cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.cgmp-chat-vinbox-row:hover { border-color: #1E73BE; box-shadow: 0 2px 6px rgba(30,115,190,.08); }
.cgmp-chat-vinbox-item.is-unread .cgmp-chat-vinbox-row { background: #FEF3C7; border-color: #FDE68A; }
.cgmp-chat-vinbox-avatar {
	width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
	background: #DBEAFE; color: #1E40AF;
	display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.cgmp-chat-vinbox-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cgmp-chat-vinbox-product { font-size: 12px; color: #64748B; }
.cgmp-chat-vinbox-preview {
	font-size: 13px; color: #475569;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cgmp-chat-vinbox-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.cgmp-chat-vinbox-side small { color: #94A3B8; font-size: 11px; }
.cgmp-chat-vinbox-badge {
	background: #DC2626; color: #fff;
	font-size: 11px; font-weight: 700;
	padding: 2px 8px; border-radius: 999px; min-width: 22px; text-align: center;
}