/**
 * Irozon AI Assistant — frontend widget.
 *
 * Every selector is scoped under the `.irozon-ai-assistant` prefix (BEM-ish
 * `__element` naming) so nothing here can leak into the host theme, and
 * `!important` is used only on the small set of properties a hostile theme
 * (broad `button`/`input`/`textarea` resets, WooCommerce, page builders)
 * is likely to fight over — layout/spacing/color decisions stay unforced.
 */

.irozon-ai-assistant,
.irozon-ai-assistant *,
.irozon-ai-assistant *::before,
.irozon-ai-assistant *::after {
	box-sizing: border-box;
}

.irozon-ai-assistant {
	--iaa-accent: #171717;
	--iaa-accent-foreground: #ffffff;
	--iaa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	position: fixed;
	z-index: 999999;
	right: calc(20px + env(safe-area-inset-right, 0px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	font-family: var(--iaa-font);
	line-height: 1.4;
	text-align: left;
}

.irozon-ai-assistant[data-position="bottom-left"] {
	right: auto;
	left: calc(20px + env(safe-area-inset-left, 0px));
}

/* -- Visually-hidden utility (our own, never relies on the host theme) -- */

.irozon-ai-assistant__visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* -- Launcher ------------------------------------------------------------ */

.irozon-ai-assistant__launcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	appearance: none !important;
	-webkit-appearance: none !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--iaa-accent) !important;
	color: var(--iaa-accent-foreground) !important;
	font-family: var(--iaa-font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	padding: 14px 20px !important;
	min-height: 48px;
	max-width: 60vw;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08);
	cursor: pointer !important;
	white-space: nowrap;
}

.irozon-ai-assistant__launcher-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.irozon-ai-assistant__launcher-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.irozon-ai-assistant__launcher:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: no-preference) {
	.irozon-ai-assistant__launcher {
		transition: box-shadow 160ms ease, transform 160ms ease;
	}

	.irozon-ai-assistant__launcher:hover {
		transform: translateY(-1px);
	}

	.irozon-ai-assistant__launcher:active {
		transform: translateY(0);
	}
}

/* -- Shared focus ring (double ring: visible on light AND dark pages) ---- */

.irozon-ai-assistant__launcher:focus-visible,
.irozon-ai-assistant__icon-button:focus-visible,
.irozon-ai-assistant__send:focus-visible,
.irozon-ai-assistant__textarea:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--iaa-accent) !important;
}

/* -- Panel ----------------------------------------------------------------- */

.irozon-ai-assistant__panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 12px);
	width: 380px;
	max-width: calc(100vw - 40px);
	height: min(600px, 70vh);
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	color: #171717;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
}

.irozon-ai-assistant[data-position="bottom-left"] .irozon-ai-assistant__panel {
	right: auto;
	left: 0;
}

.irozon-ai-assistant__panel.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
	.irozon-ai-assistant__panel {
		transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
	}
}

/* -- Header ----------------------------------------------------------------- */

.irozon-ai-assistant__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	flex-shrink: 0;
}

.irozon-ai-assistant__title {
	margin: 0 !important;
	font-family: var(--iaa-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #171717 !important;
}

.irozon-ai-assistant__header-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	/* Compensates for the trailing icon button's own padding, so it stays
	   visually flush with the panel's edge exactly as the lone Close button
	   did before New Chat was added alongside it. */
	margin-right: -8px;
}

.irozon-ai-assistant__icon-button {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: none !important;
	background: transparent !important;
	color: #6b7280 !important;
	padding: 8px !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	flex-shrink: 0;
}

.irozon-ai-assistant__icon-button:hover {
	background: rgba(0, 0, 0, 0.05) !important;
	color: #171717 !important;
}

@media (prefers-reduced-motion: no-preference) {
	.irozon-ai-assistant__icon-button {
		transition: background-color 120ms ease, color 120ms ease;
	}
}

/* -- Conversation area -------------------------------------------------- */

.irozon-ai-assistant__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.irozon-ai-assistant__message {
	max-width: 88%;
	margin: 0 !important;
	padding: 10px 14px !important;
	border-radius: 14px !important;
	font-family: var(--iaa-font) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	white-space: pre-wrap;
	word-break: break-word;
}

.irozon-ai-assistant__message--assistant {
	align-self: flex-start;
	background: #f3f4f6 !important;
	color: #171717 !important;
	border-bottom-left-radius: 4px !important;
}

.irozon-ai-assistant__message--user {
	align-self: flex-end;
	background: var(--iaa-accent) !important;
	color: var(--iaa-accent-foreground) !important;
	border-bottom-right-radius: 4px !important;
}

/* -- Loading indicator: three restrained dots, no spinner/typed text ----- */

.irozon-ai-assistant__message--loading {
	padding: 14px !important;
}

.irozon-ai-assistant__typing {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.irozon-ai-assistant__typing-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9ca3af;
	opacity: 0.4;
}

@media (prefers-reduced-motion: no-preference) {
	.irozon-ai-assistant__typing-dot {
		animation: irozon-ai-assistant-typing 1200ms ease-in-out infinite;
	}

	.irozon-ai-assistant__typing-dot:nth-child(2) {
		animation-delay: 160ms;
	}

	.irozon-ai-assistant__typing-dot:nth-child(3) {
		animation-delay: 320ms;
	}

	@keyframes irozon-ai-assistant-typing {
		0%, 60%, 100% {
			opacity: 0.4;
		}

		30% {
			opacity: 1;
		}
	}
}

/* -- Error state ------------------------------------------------------------ */

.irozon-ai-assistant__message--error {
	align-self: flex-start;
	background: #fff4f1 !important;
	color: #9a3412 !important;
	border: 1px solid #fde1d6;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.irozon-ai-assistant__retry {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: none !important;
	background: none !important;
	color: inherit !important;
	font-family: var(--iaa-font) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 0 !important;
	margin: 0 !important;
	text-decoration: underline;
	cursor: pointer !important;
}

/* -- Interrupted/partial response (Stop, or a failure mid-stream) -------- */

.irozon-ai-assistant__message--partial {
	opacity: 0.85;
	border: 1px dashed rgba(0, 0, 0, 0.16);
}

.irozon-ai-assistant__partial-note {
	display: block;
	margin-top: 4px !important;
	font-family: var(--iaa-font) !important;
	font-size: 11px !important;
	font-style: italic;
	color: #6b7280 !important;
}

/* -- Product cards (Phase 6: WooCommerce product knowledge) --------------
 * Generated entirely from the server's `products` field — never parsed
 * from assistant text — so this section is purely presentational; the
 * data-safety story lives in PHP (Product_Normalizer/Chat_Response).
 * A compact stacked list, not a grid/carousel, so it never introduces
 * horizontal scrolling at any width this widget supports. */

.irozon-ai-assistant__products {
	align-self: flex-start;
	max-width: 88%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.irozon-ai-assistant__product-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px !important;
	border-radius: 12px !important;
	border: 1px solid #e5e7eb;
	background: #ffffff !important;
	text-decoration: none !important;
	color: inherit !important;
	font-family: var(--iaa-font) !important;
	transition: border-color 0.15s ease;
}

.irozon-ai-assistant__product-card:hover,
.irozon-ai-assistant__product-card:focus-visible {
	border-color: var(--iaa-accent);
	outline: none;
}

.irozon-ai-assistant__product-image,
.irozon-ai-assistant__product-image--placeholder {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 auto;
	background: #f3f4f6;
}

.irozon-ai-assistant__product-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.irozon-ai-assistant__product-name {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #171717 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.irozon-ai-assistant__product-meta {
	font-size: 12px !important;
	color: #6b7280 !important;
}

/* -- Composer ------------------------------------------------------------- */

.irozon-ai-assistant__composer {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 14px 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	flex-shrink: 0;
}

.irozon-ai-assistant__textarea {
	flex: 1 1 auto;
	appearance: none !important;
	-webkit-appearance: none !important;
	resize: none !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 14px !important;
	background: #f9fafb !important;
	color: #171717 !important;
	font-family: var(--iaa-font) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	padding: 10px 12px !important;
	min-height: 40px;
	max-height: 120px;
	overflow-y: auto;
}

.irozon-ai-assistant__textarea::placeholder {
	color: #9ca3af;
	opacity: 1;
}

.irozon-ai-assistant__send {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--iaa-accent) !important;
	color: var(--iaa-accent-foreground) !important;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer !important;
}

.irozon-ai-assistant__send:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

.irozon-ai-assistant__send.is-stop {
	background: #4b5563 !important;
	color: #ffffff !important;
}

@media (prefers-reduced-motion: no-preference) {
	.irozon-ai-assistant__send {
		transition: opacity 120ms ease, transform 120ms ease;
	}

	.irozon-ai-assistant__send:not(:disabled):hover {
		transform: translateY(-1px);
	}
}

/* -- Mobile: sparkle-only circular launcher; the panel becomes a
 * near-full-width bottom sheet, but the configured position still governs
 * which side the launcher (and the sheet) hug. -- */

@media (max-width: 480px) {
	/* Position stays authoritative on mobile: only the configured side's
	 * inset is set, never both — setting both `left` and `right` on this
	 * fixed-position container (as a prior version of this rule did) makes
	 * a non-replaced fixed box stretch to fill the space between them per
	 * the CSS2.1 sizing rule, which put the launcher (a normal-flow child
	 * with no alignment of its own) at the box's left edge regardless of
	 * `data-position` — see tests-js/widget-css-position.test.js for the
 * regression coverage. */
	.irozon-ai-assistant {
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.irozon-ai-assistant:not([data-position="bottom-left"]) {
		right: calc(12px + env(safe-area-inset-right, 0px));
		left: auto;
	}

	.irozon-ai-assistant[data-position="bottom-left"] {
		left: calc(12px + env(safe-area-inset-left, 0px));
		right: auto;
	}

	/* -- Launcher collapses to a sparkle-only circle on mobile — no label,
	 * no chat-bubble, matching the React product's mobile launcher. -- */
	.irozon-ai-assistant__launcher {
		width: 48px;
		height: 48px;
		min-height: 48px;
		max-width: none;
		padding: 0 !important;
		justify-content: center;
	}

	.irozon-ai-assistant__launcher-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	.irozon-ai-assistant__panel,
	.irozon-ai-assistant[data-position="bottom-left"] .irozon-ai-assistant__panel {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: calc(8px + env(safe-area-inset-bottom, 0px));
		width: auto;
		max-width: none;
		height: min(75vh, 640px);
		height: min(75dvh, 640px);
		max-height: 75vh;
		max-height: 75dvh;
		border-radius: 20px;
	}
}