/* ZALVIQ AI Agent widget — ZALVIQ brand theme (deep navy panel + teal accent). */
#zalviq-ai-root {
	--zlq-accent: #2dd4bf;          /* teal — overridable from settings */
	--zlq-accent-2: #14b8a6;        /* deeper teal for gradients */
	--zlq-ink: #06253a;             /* dark navy — text on teal */
	--zlq-panel-1: #0a2137;         /* panel gradient top (navy) */
	--zlq-panel-2: #0c2b42;         /* panel gradient bottom */
	--zlq-fg: #e8f1f5;              /* light text on dark panel */
	--zlq-bot-bg: #143247;          /* assistant bubble */
	--zlq-border: rgba(255,255,255,.10);
	--zlq-field: #0e2c44;
	position: fixed;
	bottom: 22px;
	z-index: 999999;
	font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
}
#zalviq-ai-root[data-position="right"] { right: 22px; }
#zalviq-ai-root[data-position="left"]  { left: 22px; }

/* --- Floating launcher button (closed state) ----------------------------- */
.zlq-launcher {
	width: 60px; height: 60px;
	border: none; border-radius: 50%;
	background: linear-gradient( 145deg, var( --zlq-accent ), var( --zlq-accent-2 ) );
	color: var( --zlq-ink );
	box-shadow: 0 10px 28px rgba( 45, 212, 191, .35 ), 0 4px 12px rgba( 0, 0, 0, .25 );
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: transform .15s ease, box-shadow .15s ease;
}
.zlq-launcher:hover { transform: translateY( -2px ) scale( 1.05 ); }

/* --- Panel (open state) --------------------------------------------------- */
.zlq-panel {
	display: none;                 /* hidden by default — shown via .zlq-open */
	width: 380px; max-width: calc( 100vw - 36px );
	height: 580px; max-height: calc( 100vh - 120px );
	background: linear-gradient( 180deg, var( --zlq-panel-1 ), var( --zlq-panel-2 ) );
	color: var( --zlq-fg );
	border: 1px solid var( --zlq-border );
	border-radius: 18px; overflow: hidden;
	flex-direction: column;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, .45 );
}

/* Toggle: when the root is open, show the panel and hide the launcher. */
#zalviq-ai-root.zlq-open .zlq-panel    { display: flex; }
#zalviq-ai-root.zlq-open .zlq-launcher { display: none; }

.zlq-header {
	background: linear-gradient( 135deg, #0b2c46, #0e4d55 );
	border-bottom: 1px solid var( --zlq-border );
	padding: 15px 16px; font-weight: 600; font-size: 15px; color: #fff;
	display: flex; align-items: center; justify-content: space-between;
}
.zlq-title { display: flex; align-items: center; gap: 8px; }
.zlq-title::before {
	content: ""; width: 9px; height: 9px; border-radius: 50%;
	background: var( --zlq-accent ); box-shadow: 0 0 10px var( --zlq-accent );
}
.zlq-close { background: none; border: none; color: #cfe9ec; font-size: 24px; line-height: 1; cursor: pointer; opacity: .8; }
.zlq-close:hover { opacity: 1; }

.zlq-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.zlq-messages::-webkit-scrollbar { width: 8px; }
.zlq-messages::-webkit-scrollbar-thumb { background: rgba( 255, 255, 255, .12 ); border-radius: 8px; }

.zlq-bubble {
	max-width: 82%; padding: 10px 13px; border-radius: 14px;
	line-height: 1.55; font-size: 14.5px; white-space: pre-wrap; word-wrap: break-word;
}
.zlq-bubble[dir="rtl"] { text-align: right; }
.zlq-user {
	align-self: flex-end;
	background: linear-gradient( 145deg, var( --zlq-accent ), var( --zlq-accent-2 ) );
	color: var( --zlq-ink ); font-weight: 500;
	border-bottom-right-radius: 4px;
}
.zlq-user[dir="rtl"] { border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; }
.zlq-assistant { align-self: flex-start; background: var( --zlq-bot-bg ); border-bottom-left-radius: 4px; }
.zlq-error { background: #4a1f24; color: #ffb4b4; }

.zlq-typing { min-width: 42px; color: var( --zlq-accent ); }
.zlq-typing::after { content: "•••"; letter-spacing: 2px; animation: zlq-blink 1.2s infinite; }
@keyframes zlq-blink { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }

.zlq-input { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var( --zlq-border ); background: rgba( 0, 0, 0, .12 ); }
.zlq-input textarea {
	flex: 1; resize: none; border: 1px solid var( --zlq-border ); border-radius: 12px;
	padding: 10px 12px; font: inherit; font-size: 14.5px; max-height: 120px;
	background: var( --zlq-field ); color: var( --zlq-fg ); outline: none;
}
.zlq-input textarea::placeholder { color: rgba( 232, 241, 245, .45 ); }
.zlq-input textarea:focus { border-color: var( --zlq-accent ); }
.zlq-input button {
	width: 42px; height: 42px; flex: none; border: none; border-radius: 50%;
	background: linear-gradient( 145deg, var( --zlq-accent ), var( --zlq-accent-2 ) );
	color: var( --zlq-ink ); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.zlq-input button:hover { filter: brightness( 1.08 ); }