/**
 * ClevrBot Chat Widget Mockup Styles
 * Pixel-perfect recreation based on Chatwoot widget source code
 *
 * CSS values from Chatwoot source:
 * - Widget: 344px wide
 * - Header: p-5 = 20px padding, avatar 32x32px rounded-full
 * - Messages: py-3 px-4 = 12px 16px padding, rounded-[1.25rem] = 20px
 * - User bubble: rounded-br-[0.25rem] = 4px bottom-right
 * - Bot bubble: rounded-bl-[0.25rem] = 4px bottom-left, bg-n-background
 * - Shadow: 0 0.25rem 6px rgba(50,50,93,0.08), 0 1px 3px rgba(0,0,0,0.05)
 */

/* ========================================
   CSS Variables - Chatwoot color tokens
   ======================================== */
:root {
	--cw-slate-2: rgb(249, 249, 251);
	--cw-slate-4: rgb(232, 232, 236);
	--cw-slate-11: rgb(96, 100, 108);
	--cw-slate-12: rgb(28, 32, 36);
	--cw-teal-10: rgb(13, 155, 138);
	--cw-background: rgb(253, 253, 253);
	--cw-widget-color: #0B4F6C;
}

/* ========================================
   Chat Widget Container
   Fixed height with scrollable messages
   ======================================== */
.chat-mockup {
	max-width: 344px;
	height: 580px;
	display: flex;
	flex-direction: column;
	background: var(--cw-slate-2);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

/* ========================================
   Header - matches ChatHeader.vue
   p-5 = 20px padding
   ======================================== */
.chat-mockup__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	background: var(--cw-background);
	flex-shrink: 0;
}

.chat-mockup__header-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.chat-mockup__back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--cw-slate-12);
	margin-left: -8px;
}

.chat-mockup__back svg {
	width: 20px;
	height: 20px;
}

.chat-mockup__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cw-widget-color);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 9px;
	letter-spacing: 0.02em;
	flex-shrink: 0;
	text-transform: uppercase;
}

.chat-mockup__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.chat-mockup__name {
	font-weight: 500;
	font-size: 16px;
	line-height: 16px;
	color: var(--cw-slate-12);
	display: flex;
	align-items: center;
	gap: 6px;
}

.chat-mockup__status {
	width: 8px;
	height: 8px;
	background: var(--cw-teal-10);
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

.chat-mockup__subtitle {
	font-size: 12px;
	line-height: 12px;
	color: var(--cw-slate-11);
}

.chat-mockup__header-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.chat-mockup__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--cw-slate-12);
}

.chat-mockup__icon svg {
	width: 18px;
	height: 18px;
}

/* ========================================
   Messages Container
   Conversation wrap: px-2 pt-8 pb-2
   ======================================== */
.chat-mockup__messages {
	padding: 8px 8px 8px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	background: var(--cw-slate-2);
	flex: 1;
	overflow-y: auto;
}

/* ========================================
   Date Separator - matches DateSeparator.vue
   h-[50px] leading-[50px] text-sm text-n-slate-11
   ======================================== */
.chat-mockup__date {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	font-size: 14px;
	color: var(--cw-slate-11);
	position: relative;
}

.chat-mockup__date::before,
.chat-mockup__date::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--cw-slate-4);
	max-width: calc((100% - 120px) / 2);
}

.chat-mockup__date::before {
	margin-right: 12px;
}

.chat-mockup__date::after {
	margin-left: 12px;
}

/* ========================================
   Message Row Layout
   Agent: items-end flex justify-start ml-2 max-w-[88%]
   User: items-end flex justify-end mr-1 max-w-[85%]
   ======================================== */
.chat-mockup__message-row {
	display: flex;
	margin: 2px 0;
}

.chat-mockup__message-row--user {
	justify-content: flex-end;
	margin-right: 4px;
}

.chat-mockup__message-row--bot {
	justify-content: flex-start;
	margin-left: 8px;
}

/* ========================================
   Message Bubbles - matches _conversation.scss
   shadow: 0 0.25rem 6px rgba(50,50,93,0.08), 0 1px 3px rgba(0,0,0,0.05)
   rounded-[1.25rem] = 20px, py-3 px-4 = 12px 16px
   text-sm = 14px, leading-[1.5]
   ======================================== */
.chat-mockup__message {
	max-width: 88%;
	padding: 12px 16px;
	border-radius: 20px;
	word-wrap: break-word;
	font-size: 14px;
	line-height: 1.5;
	box-shadow: 0 4px 6px rgba(50, 50, 93, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* User message: widget color background, rounded-br-[0.25rem] = 4px */
.chat-mockup__message--user {
	background: var(--cw-widget-color);
	color: #FFFFFF;
	border-bottom-right-radius: 4px;
}

/* Bot message: bg-n-background = #FDFDFD, rounded-bl-[0.25rem] = 4px */
.chat-mockup__message--bot {
	background: var(--cw-background);
	color: var(--cw-slate-12);
	border-bottom-left-radius: 4px;
}

/* Consecutive user messages get smaller top-right radius */
.chat-mockup__message--user-continued {
	border-top-right-radius: 4px;
}

/* Consecutive bot messages get smaller top-left radius */
.chat-mockup__message--bot-continued {
	border-top-left-radius: 4px;
}

/* ========================================
   Input Field - matches ChatInputWrap.vue
   rounded-[7px], shadow on focus
   ======================================== */
.chat-mockup__input-wrap {
	padding: 0 8px 8px;
	background: var(--cw-slate-2);
	flex-shrink: 0;
}

.chat-mockup__input {
	display: flex;
	align-items: center;
	padding: 8px 8px 8px 12px;
	background: var(--cw-background);
	border-radius: 7px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 2px 3px rgba(0, 0, 0, 0.04);
}

.chat-mockup__input-field {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 14px;
	color: var(--cw-slate-11);
	outline: none;
	padding: 4px 0;
}

.chat-mockup__input-icons {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-left: 8px;
}

.chat-mockup__input-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cw-slate-12);
}

/* ========================================
   Footer/Branding - matches Branding.vue
   px-0 py-3, text-xs text-n-slate-11
   ======================================== */
.chat-mockup__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 0;
	background: var(--cw-slate-2);
	flex-shrink: 0;
}

.chat-mockup__footer-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--cw-slate-11);
	text-decoration: none;
	opacity: 0.9;
}

.chat-mockup__footer-logo {
	width: 12px;
	height: 12px;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 480px) {
	.chat-mockup {
		max-width: 100%;
		border-radius: 12px;
	}
}

/* ========================================
   Chat Launcher Bubble
   The "Chat with us" button before opening
   ======================================== */
.chat-launcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: var(--cw-widget-color);
	color: #FFFFFF;
	border-radius: 40px;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

.chat-launcher__icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.chat-launcher__icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ========================================
   Close Bubble Button
   The circular X button when widget is open
   ======================================== */
.chat-close-bubble {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--cw-widget-color);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.chat-close-bubble svg {
	width: 24px;
	height: 24px;
}

/* ========================================
   WordPress Block Editor Compatibility
   ======================================== */
.wp-block-group.chat-mockup {
	padding: 0;
}

.wp-block-group.chat-mockup__header,
.wp-block-group.chat-mockup__messages,
.wp-block-group.chat-mockup__input-wrap,
.wp-block-group.chat-mockup__footer {
	margin: 0;
}