/* BOGS AI Chat — floating widget styles. Scoped under #bogs-ai-chat-root
   and the .bogs-ai-chat-* classes the JS creates, so it can't leak into or
   be overridden by the host theme's own styles either direction. Brand
   color is applied inline by the JS from the admin setting (see
   assets/js/bogs-ai-chat.js), so this file only defines structure/layout,
   not the color itself. */

#bogs-ai-chat-root,
#bogs-ai-chat-root * {
	box-sizing: border-box;
}

.bogs-ai-chat-bubble {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.25 );
	z-index: 999999;
	transition: transform 0.15s ease;
	color: #fff;
}

.bogs-ai-chat-bubble:hover {
	transform: scale( 1.06 );
}

.bogs-ai-chat-bubble svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.bogs-ai-chat-panel {
	position: fixed;
	right: 20px;
	bottom: 92px;
	width: 350px;
	max-width: calc( 100vw - 32px );
	height: 480px;
	max-height: calc( 100vh - 140px );
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.25 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #222;
}

.bogs-ai-chat-panel[hidden],
.bogs-ai-chat-bubble[hidden] {
	display: none !important;
}

.bogs-ai-chat-header {
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}

.bogs-ai-chat-header-title {
	font-weight: 600;
	font-size: 15px;
}

.bogs-ai-chat-close {
	background: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 4px;
	opacity: 0.85;
}

.bogs-ai-chat-close:hover {
	opacity: 1;
}

.bogs-ai-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #f7f7f8;
}

.bogs-ai-chat-msg {
	max-width: 85%;
	padding: 9px 12px;
	border-radius: 12px;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.bogs-ai-chat-msg-assistant {
	align-self: flex-start;
	background: #fff;
	border: 1px solid #e4e4e7;
	border-bottom-left-radius: 4px;
}

.bogs-ai-chat-msg-user {
	align-self: flex-end;
	background: #e9edf5;
	border-bottom-right-radius: 4px;
}

.bogs-ai-chat-msg-system {
	align-self: center;
	background: transparent;
	color: #888;
	font-size: 12px;
	text-align: center;
	max-width: 100%;
}

.bogs-ai-chat-typing {
	align-self: flex-start;
	color: #888;
	font-size: 13px;
	padding: 4px 12px;
}

.bogs-ai-chat-footer {
	border-top: 1px solid #e4e4e7;
	padding: 10px;
	flex-shrink: 0;
	background: #fff;
}

.bogs-ai-chat-input-row {
	display: flex;
	gap: 8px;
}

.bogs-ai-chat-input-row textarea,
.bogs-ai-chat-input-row input[type="email"],
.bogs-ai-chat-input-row input[type="text"] {
	flex: 1;
	resize: none;
	border: 1px solid #d5d5da;
	border-radius: 8px;
	padding: 8px 10px;
	font-family: inherit;
	font-size: 14px;
	max-height: 90px;
}

.bogs-ai-chat-input-row textarea:focus,
.bogs-ai-chat-input-row input:focus {
	outline: 2px solid rgba( 0, 0, 0, 0.15 );
}

.bogs-ai-chat-send {
	border: none;
	color: #fff;
	border-radius: 8px;
	padding: 0 16px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	flex-shrink: 0;
}

.bogs-ai-chat-send:disabled {
	opacity: 0.5;
	cursor: default;
}

.bogs-ai-chat-email-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bogs-ai-chat-email-form-title {
	font-weight: 600;
	margin-bottom: 2px;
}

.bogs-ai-chat-error {
	color: #b3261e;
	font-size: 12px;
	margin-top: 2px;
}

@media ( max-width: 420px ) {
	.bogs-ai-chat-panel {
		right: 16px;
		left: 16px;
		width: auto;
		bottom: 88px;
	}
	.bogs-ai-chat-bubble {
		right: 16px;
		bottom: 16px;
	}
}