/* NeoGrow AI Chat Widget — frontend styles.
 * Visibility model: the `.ngcw-open` class on `.ngcw-root` is the single source
 * of truth. Closed = only the avatar launcher shows; open = only the window
 * shows. This avoids the classic `display:flex` vs `[hidden]` conflict. */

.ngcw-root,
.ngcw-root * { box-sizing: border-box; }

.ngcw-root {
	--ngcw-primary: #4f46e5;
	--ngcw-secondary: #7c3aed;
	--ngcw-text: #0f172a;
	--ngcw-user-bubble: #4f46e5;
	--ngcw-bot-bubble: #f1f5f9;
	--ngcw-radius: 18px;
	--ngcw-shadow: 0 12px 40px rgba(15, 23, 42, .18);
	position: fixed;
	bottom: 22px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Kufi Arabic", "Tajawal", sans-serif;
	line-height: 1.5;
}
.ngcw-root.ngcw-pos-right { right: 22px; }
.ngcw-root.ngcw-pos-left { left: 22px; }
.ngcw-root[dir="rtl"].ngcw-pos-right { right: 22px; left: auto; }

/* ------------------------------------------------------------------ *
 * Launcher = avatar bubble
 * ------------------------------------------------------------------ */
.ngcw-launcher {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 64px;
	height: 64px;
	padding: 4px;
	border: 2px solid rgba(255, 255, 255, .22);
	cursor: pointer;
	color: #fff;
	background: linear-gradient(135deg, var(--ngcw-primary), var(--ngcw-secondary));
	border-radius: 999px;
	box-shadow: var(--ngcw-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}
.ngcw-launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(79, 70, 229, .35); }
.ngcw-launcher:focus-visible { outline: 3px solid var(--ngcw-secondary); outline-offset: 3px; }

.ngcw-launcher-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, .18);
}
.ngcw-launcher-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ngcw-launcher-text { display: none; }

/* Launcher hidden while the window is open. */
.ngcw-root.ngcw-open .ngcw-launcher { display: none; }

/* ------------------------------------------------------------------ *
 * Window — hidden until opened (class-driven, no reliance on [hidden])
 * ------------------------------------------------------------------ */
.ngcw-window {
	position: absolute;
	bottom: 0;
	width: 370px;
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: calc(100vh - 60px);
	background: #fff;
	border-radius: var(--ngcw-radius);
	box-shadow: var(--ngcw-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: ngcw-pop .18s ease;
}
/* When closed, hide the window. Specificity (0,3,0) beats base (0,1,0). */
.ngcw-root:not(.ngcw-open) .ngcw-window { display: none; }
/* Accessibility / no-JS fallback. */
.ngcw-window[hidden] { display: none; }

.ngcw-pos-right .ngcw-window { right: 0; }
.ngcw-pos-left .ngcw-window { left: 0; }
@keyframes ngcw-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Header */
.ngcw-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	color: #fff;
	background: linear-gradient(135deg, var(--ngcw-primary), var(--ngcw-secondary));
	flex: none;
}
.ngcw-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ngcw-avatar { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.25); flex: none; }
.ngcw-avatar-fallback { display: inline-block; }
.ngcw-titles { display: flex; flex-direction: column; min-width: 0; }
.ngcw-bot-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ngcw-subtitle { font-size: 12px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ngcw-close {
	background: rgba(255,255,255,.16);
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	transition: background .15s ease;
}
.ngcw-close:hover { background: rgba(255,255,255,.32); }
.ngcw-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Messages */
.ngcw-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #fff;
	color: var(--ngcw-text);
}
.ngcw-msg { max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: 14px; word-wrap: break-word; white-space: pre-wrap; }
.ngcw-msg-visitor { align-self: flex-end; background: var(--ngcw-user-bubble); color: #fff; border-bottom-right-radius: 4px; }
.ngcw-root[dir="rtl"] .ngcw-msg-visitor { border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; }
.ngcw-msg-ai,
.ngcw-msg-agent { align-self: flex-start; background: var(--ngcw-bot-bubble); color: var(--ngcw-text); border-bottom-left-radius: 4px; }
.ngcw-root[dir="rtl"] .ngcw-msg-ai,
.ngcw-root[dir="rtl"] .ngcw-msg-agent { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.ngcw-msg-system { align-self: center; background: transparent; color: #64748b; font-size: 12px; text-align: center; }
.ngcw-msg-agent { border: 1px solid #e2e8f0; }

/* Quick questions */
.ngcw-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 6px; }
.ngcw-quick button {
	border: 1px solid var(--ngcw-primary);
	color: var(--ngcw-primary);
	background: #fff;
	border-radius: 999px;
	padding: 7px 12px;
	font-size: 13px;
	cursor: pointer;
}
.ngcw-quick button:hover { background: var(--ngcw-bot-bubble); }

/* Typing */
.ngcw-typing { display: flex; gap: 4px; padding: 6px 18px 0; flex: none; }
.ngcw-typing[hidden] { display: none; }
.ngcw-typing span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: ngcw-bounce 1.2s infinite; }
.ngcw-typing span:nth-child(2) { animation-delay: .2s; }
.ngcw-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ngcw-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Actions */
.ngcw-actions { padding: 6px 16px; flex: none; }
.ngcw-human-btn {
	width: 100%;
	border: 1px dashed var(--ngcw-secondary);
	color: var(--ngcw-secondary);
	background: #fff;
	border-radius: 12px;
	padding: 9px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.ngcw-human-btn:hover { background: var(--ngcw-bot-bubble); }
.ngcw-human-btn[disabled] { opacity: .5; cursor: default; }

/* Input — high-contrast so the field and the typed text are clearly visible */
.ngcw-input-row {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 12px;
	border-top: 1px solid #e2e8f0;
	background: #ffffff;
	flex: none;
}
.ngcw-input {
	flex: 1;
	resize: none;
	min-height: 44px;
	max-height: 110px;
	border: 1px solid #cbd5e1;
	border-radius: 12px;
	padding: 11px 12px;
	font-size: 14px;
	font-family: inherit;
	color: #0f172a;
	background: #f8fafc;
	caret-color: var(--ngcw-primary);
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
	outline: none;
}
.ngcw-input::placeholder { color: #64748b; opacity: 1; }
.ngcw-input:focus { border-color: var(--ngcw-primary); background: #fff; box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.ngcw-send {
	flex: none;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: var(--ngcw-primary);
	border-radius: 999px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 28px rgba(79, 70, 229, .25);
}
.ngcw-send:hover { background: var(--ngcw-secondary); }
.ngcw-send:focus-visible { outline: 2px solid var(--ngcw-secondary); outline-offset: 2px; }
.ngcw-root[dir="rtl"] .ngcw-send svg { transform: scaleX(-1); }

/* Footer */
.ngcw-footer { text-align: center; padding: 8px; font-size: 11px; background: #fafbfc; border-top: 1px solid #eef2f7; flex: none; }
.ngcw-footer a { color: #94a3b8; text-decoration: none; }
.ngcw-footer a:hover { color: var(--ngcw-primary); }

/* SR-only */
.ngcw-root .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ *
 * Mobile — a comfortable panel, NOT a full-screen takeover
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {
	.ngcw-root { bottom: 16px; }
	.ngcw-root.ngcw-pos-right { right: 14px; }
	.ngcw-root.ngcw-pos-left { left: 14px; }

	.ngcw-launcher { width: 58px; height: 58px; }
	.ngcw-launcher-icon { width: 48px; height: 48px; }

	.ngcw-window {
		width: min(92vw, 380px);
		height: min(72vh, 560px);
		max-height: calc(100dvh - 110px);
		border-radius: 20px;
	}
	.ngcw-pos-right .ngcw-window { right: 0; }
	.ngcw-pos-left .ngcw-window { left: 0; }

	.ngcw-header { padding: 12px 14px; }
	.ngcw-avatar { width: 38px; height: 38px; min-width: 38px; }
	.ngcw-bot-name { font-size: 14px; }
	.ngcw-subtitle { font-size: 11px; }
	.ngcw-messages { padding: 14px; }
	.ngcw-msg { font-size: 14px; max-width: 86%; }
}

@media (max-width: 360px) {
	.ngcw-window {
		width: calc(100vw - 24px);
		height: min(70vh, 520px);
	}
}