/* ============================================================
   HWB AI Assistant – Chat Widget Styles
   All rules scoped under #hwb-ai-widget or the fixed-position
   elements (#hwb-ai-bubble, #hwb-ai-dialog) to prevent theme
   CSS (Elementor, etc.) from overriding our styles.
   ============================================================ */

:root {
	--hwb-primary:       #4CAF50;
	--hwb-primary-dark:  #388E3C;
	--hwb-primary-light: #C8E6C9;
	--hwb-bg:            #ffffff;
	--hwb-text:          #212121;
	--hwb-text-light:    #757575;
	--hwb-border:        #d0d0d0;
	--hwb-shadow:        0 6px 28px rgba(0, 0, 0, 0.18);
	--hwb-radius:        18px;
	--hwb-radius-sm:     6px;
	--hwb-z:             99999;
}

/* ---- Scoped reset — prevent theme styles leaking in ---- */
#hwb-ai-bubble,
#hwb-ai-dialog,
#hwb-ai-dialog * {
	box-sizing: border-box !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	line-height: normal;
}

/* ============================================================
   Floating Trigger Bubble
   ============================================================ */
#hwb-ai-bubble {
	position: fixed !important;
	bottom: 24px !important;
	right: 24px !important;
	left: auto !important;
	z-index: var(--hwb-z) !important;
	width: 60px !important;
	height: 60px !important;
	border-radius: 50% !important;
	background: var(--hwb-primary) !important;
	border: none !important;
	cursor: pointer !important;
	box-shadow: var(--hwb-shadow) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.2s ease, background 0.2s ease;
	outline: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

#hwb-ai-bubble:hover {
	background: var(--hwb-primary-dark) !important;
	transform: scale(1.08) !important;
}

#hwb-ai-bubble:focus-visible {
	outline: 3px solid var(--hwb-primary-dark) !important;
	outline-offset: 3px !important;
}

/* Position: bottom-left variant */
.hwb-position-bottom-left #hwb-ai-bubble {
	right: auto !important;
	left: 24px !important;
}

.hwb-position-bottom-left #hwb-ai-dialog {
	right: auto !important;
	left: 24px !important;
}

/* SVG icon inside bubble */
#hwb-ai-bubble svg {
	width: 28px !important;
	height: 28px !important;
	fill: #ffffff !important;
}

#hwb-ai-bubble .hwb-icon-open  { display: block !important; }
#hwb-ai-bubble .hwb-icon-close { display: none !important; }

#hwb-ai-bubble.hwb-open .hwb-icon-open  { display: none !important; }
#hwb-ai-bubble.hwb-open .hwb-icon-close { display: block !important; }

/* Unread badge */
#hwb-ai-badge {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	background: #e53935 !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	min-width: 18px !important;
	height: 18px !important;
	border-radius: 9px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 4px !important;
	transform: scale(0);
	transition: transform 0.2s ease;
}

#hwb-ai-badge.hwb-badge-visible {
	transform: scale(1) !important;
}

/* ============================================================
   Chat Dialog
   ============================================================ */
#hwb-ai-dialog {
	position: fixed !important;
	bottom: 96px !important;
	right: 24px !important;
	left: auto !important;
	z-index: var(--hwb-z) !important;
	width: 360px !important;
	height: 520px !important;
	background: #ffffff !important;
	border-radius: var(--hwb-radius) !important;
	box-shadow: var(--hwb-shadow) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	border: 1px solid #ddd !important;

	opacity: 0;
	transform: translateY(16px) scale(0.97);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

#hwb-ai-dialog.hwb-dialog-open {
	opacity: 1 !important;
	transform: translateY(0) scale(1) !important;
	pointer-events: all !important;
}

/* ---- Dialog Header ---- */
#hwb-ai-header {
	background: var(--hwb-primary) !important;
	color: #ffffff !important;
	padding: 12px 14px !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-shrink: 0 !important;
}

#hwb-ai-header .hwb-header-avatar {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: rgba(255,255,255,0.25) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 18px !important;
	flex-shrink: 0 !important;
}

#hwb-ai-header .hwb-header-info {
	flex: 1 !important;
	min-width: 0 !important;
}

#hwb-ai-header .hwb-header-name {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	margin: 0 !important;
	padding: 0 !important;
}

#hwb-ai-header .hwb-header-status {
	font-size: 11px !important;
	color: rgba(255,255,255,0.85) !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
}

#hwb-ai-close-btn {
	background: none !important;
	border: none !important;
	color: #ffffff !important;
	cursor: pointer !important;
	padding: 4px !important;
	border-radius: 4px !important;
	display: flex !important;
	align-items: center !important;
	opacity: 0.85;
	transition: opacity 0.15s;
	flex-shrink: 0 !important;
}

#hwb-ai-close-btn:hover { opacity: 1; }

#hwb-ai-close-btn svg {
	width: 20px !important;
	height: 20px !important;
	fill: #ffffff !important;
}

/* ---- Messages Container ---- */
#hwb-ai-messages {
	flex: 1 !important;
	overflow-y: auto !important;
	padding: 14px 12px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	background: #ffffff !important;
	scroll-behavior: smooth;
}

#hwb-ai-messages::-webkit-scrollbar { width: 4px; }
#hwb-ai-messages::-webkit-scrollbar-track { background: transparent; }
#hwb-ai-messages::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

/* ---- Message row ---- */
#hwb-ai-messages .hwb-msg {
	display: flex !important;
	align-items: flex-end !important;
	gap: 6px !important;
	max-width: 100% !important;
	animation: hwbFadeIn 0.2s ease;
}

@keyframes hwbFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

#hwb-ai-messages .hwb-msg-user {
	flex-direction: row-reverse !important;
}

/* ---- Bubble base ---- */
#hwb-ai-messages .hwb-bubble {
	max-width: 82% !important;
	padding: 10px 13px !important;
	border-radius: var(--hwb-radius) !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
	margin: 0 !important;
}

/* User bubble — green */
#hwb-ai-messages .hwb-msg-user .hwb-bubble {
	background: var(--hwb-primary) !important;
	color: #ffffff !important;
	border-bottom-right-radius: var(--hwb-radius-sm) !important;
}

/* Assistant bubble — clearly off-white with visible border */
#hwb-ai-messages .hwb-msg-assistant .hwb-bubble {
	background: #f0f4f0 !important;
	color: #1a1a1a !important;
	border: 1px solid #c8d8c8 !important;
	border-bottom-left-radius: var(--hwb-radius-sm) !important;
}

/* Links inside bubbles */
#hwb-ai-messages .hwb-bubble a {
	color: #2e7d32 !important;
	text-decoration: underline !important;
	font-weight: 500 !important;
	word-break: break-all !important;
}

#hwb-ai-messages .hwb-bubble a:hover {
	color: var(--hwb-primary) !important;
}

/* Markdown elements */
#hwb-ai-messages .hwb-bubble strong { font-weight: 700 !important; }
#hwb-ai-messages .hwb-bubble em     { font-style: italic !important; }

#hwb-ai-messages .hwb-bubble ul,
#hwb-ai-messages .hwb-bubble ol {
	padding-left: 18px !important;
	margin: 6px 0 !important;
}

#hwb-ai-messages .hwb-bubble li {
	margin-bottom: 3px !important;
	padding: 0 !important;
}

#hwb-ai-messages .hwb-bubble p {
	margin: 0 0 6px !important;
	padding: 0 !important;
}

#hwb-ai-messages .hwb-bubble p:last-child { margin-bottom: 0 !important; }

/* Error bubble */
#hwb-ai-messages .hwb-msg-error .hwb-bubble {
	background: #ffebee !important;
	color: #c62828 !important;
	border-color: #ef9a9a !important;
	font-size: 13px !important;
}

/* ---- Typing indicator ---- */
#hwb-ai-typing {
	display: none;
	align-items: flex-end !important;
	gap: 6px !important;
}

#hwb-ai-typing.hwb-typing-visible {
	display: flex !important;
}

.hwb-typing-dots {
	background: #f0f4f0 !important;
	border: 1px solid #c8d8c8 !important;
	border-radius: var(--hwb-radius) !important;
	border-bottom-left-radius: var(--hwb-radius-sm) !important;
	padding: 12px 16px !important;
	display: flex !important;
	gap: 5px !important;
	align-items: center !important;
}

.hwb-typing-dots span {
	display: block !important;
	width: 7px !important;
	height: 7px !important;
	background: #888 !important;
	border-radius: 50% !important;
	animation: hwbDot 1.2s infinite ease-in-out;
}

.hwb-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.hwb-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes hwbDot {
	0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
	40%           { transform: scale(1);   opacity: 1; }
}

/* ---- Input Area ---- */
#hwb-ai-input-area {
	padding: 10px 12px !important;
	border-top: 1px solid var(--hwb-border) !important;
	display: flex !important;
	gap: 8px !important;
	align-items: center !important;
	flex-shrink: 0 !important;
	background: #ffffff !important;
}

#hwb-ai-input {
	flex: 1 !important;
	border: 1px solid #ccc !important;
	border-radius: 22px !important;
	padding: 9px 14px !important;
	font-size: 13.5px !important;
	color: #212121 !important;
	background: #f8f8f8 !important;
	outline: none !important;
	resize: none !important;
	transition: border-color 0.2s;
	max-height: 100px;
	overflow-y: auto;
	line-height: 1.4 !important;
	box-shadow: none !important;
}

#hwb-ai-input:focus {
	border-color: var(--hwb-primary) !important;
	background: #fff !important;
}

#hwb-ai-send-btn {
	flex-shrink: 0 !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	background: var(--hwb-primary) !important;
	border: none !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.2s, transform 0.1s;
	padding: 0 !important;
	margin: 0 !important;
}

#hwb-ai-send-btn:hover  { background: var(--hwb-primary-dark) !important; }
#hwb-ai-send-btn:active { transform: scale(0.92); }

#hwb-ai-send-btn:disabled {
	background: #ccc !important;
	cursor: not-allowed !important;
}

#hwb-ai-send-btn svg {
	width: 17px !important;
	height: 17px !important;
	fill: #ffffff !important;
}

/* ============================================================
   Mobile – full-width slide-up dialog
   Breakpoint at 600px catches all phone sizes including
   iPhone Pro Max (430px logical) and Android flagships.
   ============================================================ */
@media (max-width: 600px) {
	#hwb-ai-dialog {
		/* width: auto + left/right: 0 is more reliable than width:100%
		   for position:fixed on mobile browsers */
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		height: 75vh !important;
		border-radius: 20px 20px 0 0 !important;
		transform: translateY(40px) !important;
	}

	#hwb-ai-dialog.hwb-dialog-open {
		transform: translateY(0) !important;
	}

	/* Ensure input row never overflows on mobile */
	#hwb-ai-input-area {
		padding: 10px 10px !important;
	}

	#hwb-ai-bubble {
		bottom: 16px !important;
		right: 16px !important;
	}

	/* Hide bubble behind open dialog on mobile */
	#hwb-ai-bubble.hwb-open {
		opacity: 0 !important;
		pointer-events: none !important;
		transform: scale(0.5) !important;
	}

	.hwb-position-bottom-left #hwb-ai-bubble {
		right: auto !important;
		left: 16px !important;
	}
}