/* ==========================================================================
   Intilaqa AI — Chat v5
   Design cloned from user-provided reference.
   Font: Tajawal (site font) · Brand: #E69605 orange
   ========================================================================== */

:root {
	--intq-orange:      #E69605;
	--intq-orange-hov:  #c47e00;
	--intq-orange-glow: rgba(230,150,5,0.25);
	--intq-text:        #1f2937;
	--intq-text-soft:   #4b5563;
	--intq-glass:       rgba(255,255,255,0.85);
	--intq-z-fab:       9000;
	--intq-z-overlay:   999999;
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.intq-hidden { display: none !important; }

/* ── FAB ─────────────────────────────────────────────────────────────────── */
.intq-ai-fab {
	position: fixed;
	bottom: 32px;
	right: 32px;              /* ← moved to right */
	z-index: var(--intq-z-fab);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 28px;
	border-radius: 50px;
	
	background: transparent !important; /* White bg is moved to ::after */
	border: none !important;
	color: #E69605 !important; /* Orange text and icon */
	
	cursor: pointer;
	font-family: 'Tajawal', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	white-space: nowrap;
	direction: rtl;
	box-shadow: 0 4px 14px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
	transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s;
	
	/* Magic for spinning border */
	position: fixed; /* Keep fixed */
	overflow: hidden; /* Clips the spinning gradient to the pill shape */
}

/* Ensure content stays above the spinning background */
.intq-ai-fab svg,
.intq-ai-fab span {
	position: relative;
	z-index: 1;
}

/* The Border Gradient Layer */
.intq-ai-fab::before {
	content: '';
	position: absolute;
	top: -50%; left: -50%;
	width: 200%; height: 200%;
	/* Conic gradient with sharp stops to keep colors vibrant */
	background: conic-gradient(
		from 90deg, 
		#E69605 0%, 
		#E69605 35%, 
		#ffffff 45%, 
		#2D63A6 55%, 
		#2D63A6 85%, 
		#ffffff 95%, 
		#E69605 100%
	);
	z-index: -2;
	transition: opacity 0.3s;
}

/* The White Pill Layer */
.intq-ai-fab::after {
	content: '';
	position: absolute;
	inset: 2px; /* This creates the 2px border thickness */
	background: #ffffff;
	border-radius: 50px;
	z-index: -1;
}

@keyframes intqFabBorderSpin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.intq-ai-fab:hover  { 
	transform: translateY(-2px) scale(1.02); 
	box-shadow: 0 8px 24px var(--intq-orange-glow) !important; 
}
.intq-ai-fab:hover::before {
	animation: intqFabBorderSpin 2.5s linear infinite;
}
.intq-ai-fab:active { 
	transform: scale(0.97); 
}

/* ── Overlay / Backdrop ──────────────────────────────────────────────── */
.intq-ai-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.35);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: var(--intq-z-overlay) !important;
	display: flex !important; /* always flex, visibility via opacity */
	justify-content: flex-start; /* rtl: flex-start aligns to RIGHT edge */
	align-items: stretch;
	font-family: 'Tajawal', sans-serif;
	direction: rtl;
	/* fade backdrop */
	opacity: 1;
	pointer-events: all;
	transition: opacity 0.25s ease;
}
.intq-ai-overlay.intq-hidden {
	opacity: 0;
	pointer-events: none;
}

/* ── Modal — right-side slide panel (420px, full height) ───────────── */
.intq-ai-modal {
	background: #ffffff;
	border: none;
	border-radius: 24px 0 0 24px;
	width: 420px;
	max-width: 100vw;
	height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: -10px 0 50px rgba(0,0,0,0.18);
	position: relative;
	overflow: hidden;
	/* slide in from right */
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.intq-ai-overlay:not(.intq-hidden) .intq-ai-modal {
	transform: translateX(0);
}

/* ── Header policy link ──────────────────────────────────────────── */
.intq-ai-policy-link {
	background: transparent;
	border: none;
	padding: 0;
	font-family: 'Tajawal', sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	color: #9ca3af;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.2s;
}
.intq-ai-policy-link:hover {
	color: var(--intq-orange);
}


/* ── Close button ────────────────────────────────────────────────────────── */
.intq-ai-close-btn {
	background: transparent;
	border: none;
	padding: 4px;
	color: var(--intq-text-soft);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	transition: color 0.2s, transform 0.2s;
	line-height: 0;
	outline: none;
}
.intq-ai-close-btn:hover,
.intq-ai-close-btn:focus { 
	color: var(--intq-orange); 
	transform: scale(1.15); 
	background: transparent;
	outline: none;
	box-shadow: none;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.intq-ai-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	flex-shrink: 0;
}
.intq-ai-title {
	font-weight: 700;
	color: var(--intq-orange);
	font-size: 1.08rem;
	font-family: 'Tajawal', sans-serif;
	display: flex;
	align-items: center;
}
/* Policy link — below welcome card */
.intq-ai-policy-link {
	background: transparent;
	border: none;
	padding: 0;
	font-family: 'Tajawal', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	color: #9ca3af;
	cursor: pointer;
	transition: color 0.2s;
	text-decoration: none;
	outline: none;
	box-shadow: none;
}
.intq-ai-policy-link:hover,
.intq-ai-policy-link:focus,
.intq-ai-policy-link:active {
	color: var(--intq-orange);
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

/* ── Response area ───────────────────────────────────────────────────────── */
#intq-ai-response-area {
	flex-grow: 1;
	padding: 22px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	scroll-behavior: smooth;
}
#intq-ai-response-area::-webkit-scrollbar       { width: 4px; }
#intq-ai-response-area::-webkit-scrollbar-track { background: transparent; }
#intq-ai-response-area::-webkit-scrollbar-thumb { background: rgba(230,150,5,0.3); border-radius: 4px; }

/* ── Welcome card ────────────────────────────────────────────────────────── */
.intq-ai-welcome-card {
	background: #ffffff;
	padding: 40px 22px;
	border-radius: 18px;
	border: 1px solid var(--intq-orange);
	box-shadow: none;
	color: var(--intq-text);
	line-height: 1.8;
	font-family: 'Tajawal', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.intq-ai-welcome-card svg {
	margin-bottom: 12px;
	animation: intq-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes intq-pop { 
	0% { transform: scale(0.5); opacity: 0; } 
	100% { transform: scale(1); opacity: 1; } 
}
.intq-ai-welcome-card h3 {
	margin: 0;
	color: #2D63A6;
	font-size: 1.15rem;
	font-weight: 700;
}

/* ── Status stages ───────────────────────────────────────────────────────── */
.intq-ai-status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: 'Tajawal', sans-serif;
	font-size: 0.85rem;
	color: var(--intq-text-soft);
	font-weight: 600;
	margin-bottom: 12px;
	direction: ltr;
}
.intq-ai-spinner {
	width: 16px; height: 16px;
	color: var(--intq-orange);
	flex-shrink: 0;
	animation: intq-spin 0.7s linear infinite;
}
@keyframes intq-spin { to{transform:rotate(360deg)} }

/* ── AI answer card ──────────────────────────────────────────────────────── */
.intq-ai-answer-card {
	background: transparent;
	padding: 4px;
	box-shadow: none;
	font-family: 'Tajawal', sans-serif;
	font-size: 0.97rem;
	line-height: 1.9;
	color: var(--intq-text);
	animation: intq-card-in 0.3s ease;
}
@keyframes intq-card-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.intq-ai-answer-card strong { color: #2D63A6; }

/* Removed streaming cursor per user request */

/* ── Chat history bubbles ─────────────────────────────────────────────────── */
/* User message — right-aligned orange pill */
.intq-user-bubble {
	display: flex;
	justify-content: flex-end;
	animation: intq-card-in 0.25s ease;
}
.intq-user-bubble__text {
	max-width: 78%;
	background: var(--intq-orange);
	color: #fff;
	padding: 10px 16px;
	border-radius: 18px 18px 4px 18px;
	font-family: 'Tajawal', sans-serif;
	font-size: 0.95rem;
	line-height: 1.6;
	box-shadow: 0 3px 10px var(--intq-orange-glow);
}

/* AI response — left-aligned floating text */
.intq-ai-bubble {
	background: transparent;
	padding: 4px;
	box-shadow: none;
	font-family: 'Tajawal', sans-serif;
	font-size: 0.97rem;
	line-height: 1.9;
	color: var(--intq-text);
	animation: intq-card-in 0.3s ease;
}
.intq-ai-bubble strong { color: #2D63A6; font-weight: 700; }
.intq-ai-bubble p { margin-bottom: 8px; font-size: inherit; line-height: inherit; }
.intq-ai-bubble h1, .intq-ai-bubble h2, .intq-ai-bubble h3 { font-weight: bold; color: var(--intq-orange); margin-top: 14px; margin-bottom: 8px; }
/* Removed streaming cursor on AI bubble per user request */

/* Smart search button inside answer */
.intq-ai-answer-card .intq-open-search {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding: 9px 20px;
	border-radius: 50px;
	border: none;
	background: var(--intq-orange);
	color: #fff;
	font-family: 'Tajawal', sans-serif;
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px var(--intq-orange-glow);
	transition: background 0.2s, transform 0.25s;
}
.intq-ai-answer-card .intq-open-search:hover { background:var(--intq-orange-hov); transform:scale(1.03); }

/* ── Input bar ───────────────────────────────────────────────────────────── */
.intq-ai-input-wrapper {
	padding: 16px 20px 20px;
	background: rgba(255,255,255,0.55);
	border-top: 1px solid rgba(0,0,0,0.05);
	flex-shrink: 0;
}
.intq-ai-input-container {
	position: relative;
	background: #ffffff;
	border-radius: 25px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	border: 1.5px solid #e5e7eb;
	transition: border-color 0.25s, box-shadow 0.25s;
	display: block;
	overflow: hidden; /* Prevent textarea scrollbar track from breaking border radius */
}
.intq-ai-input-container:focus-within {
	border-color: var(--intq-orange);
	box-shadow: 0 4px 16px rgba(230,150,5,0.20);
}
#intq-ai-input {
	width: 100%;
	min-height: 110px;
	max-height: 250px;
	border: none;
	background: transparent;
	padding: 15px 20px 15px 90px; /* Padding left 90px prevents overlap with icons in RTL */
	font-size: 0.95rem;
	font-family: 'Tajawal', sans-serif;
	color: var(--intq-text);
	outline: none;
	direction: rtl;
	resize: none;
	overflow-y: auto; /* Allow scrolling if it gets too long, but hide the visual bar */
	box-sizing: border-box;
	line-height: 1.5;
	display: block;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
	scrollbar-width: none; /* Firefox: hide scrollbar */
}
#intq-ai-input::-webkit-scrollbar {
	display: none; /* Chrome/Edge/Safari: entirely hide scrollbar */
	width: 0;
}
#intq-ai-input::placeholder { color: rgba(31,41,55,0.32); }

.intq-ai-input-actions {
	position: absolute;
	bottom: 11px;
	left: 11px;
	display: flex;
	align-items: center;
	gap: 6px;
}

#intq-ai-send {
	background: var(--intq-orange);
	color: #fff;
	border: none;
	width: 38px; height: 38px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	flex-shrink: 0;
	overflow: visible;
	transition: background 0.25s, transform 0.25s;
}
#intq-ai-send:hover  { background: var(--intq-orange-hov); transform: scale(1.08); }
#intq-ai-send:active { transform: scale(0.94); }
#intq-ai-send:disabled { background: #d1d5db; cursor: not-allowed; transform: none; }
#intq-ai-send svg { display: block; width: 18px; height: 18px; flex-shrink: 0; }

/* New question */
.intq-ai-new-wrap { text-align: center; margin-top: 10px; }
.intq-ai-new-btn {
	background: none;
	border: none;
	color: var(--intq-text-soft);
	font-family: 'Tajawal', sans-serif;
	font-size: 0.82rem;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 20px;
	transition: color 0.2s, background 0.2s;
}
.intq-ai-new-btn:hover { color: var(--intq-orange); background: rgba(230,150,5,0.07); }

/* ── Profile Toggle Button ─────────────────────────────────────────────────── */
.intq-ai-profile-toggle-btn {
	background: transparent;
	border: none;
	color: var(--intq-text-soft);
	width: 32px; height: 32px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s, background 0.2s, transform 0.2s;
	flex-shrink: 0;
	padding: 0;
}
.intq-ai-profile-toggle-btn:hover {
	color: var(--intq-orange);
	background: rgba(230,150,5,0.08);
	transform: rotate(30deg);
}

/* ── Profile Settings Panel ──────────────────────────────────────────────── */
.intq-ai-profile-panel {
	background: #ffffff;
	border: 1px solid rgba(45,99,166,0.1);
	border-radius: 20px;
	padding: 20px;
	margin-bottom: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	font-family: 'Tajawal', sans-serif;
	animation: intq-panel-up 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes intq-panel-up {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
.intq-ai-profile-panel__header h4 {
	margin: 0 0 6px;
	font-size: 1.05rem;
	color: #2D63A6;
	font-weight: 700;
	direction: rtl;
	text-align: right;
}
.intq-ai-profile-panel__header p {
	margin: 0 0 18px;
	font-size: 0.84rem;
	color: var(--intq-text-soft);
	direction: rtl;
	text-align: right;
}
.intq-ai-profile-group {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}
.intq-ai-profile-group input,
.intq-ai-profile-group select {
	flex: 1;
	min-width: 0;
	padding: 12px 18px !important;
	border: 1.5px solid #e5e7eb !important;
	border-radius: 50px !important;
	font-family: 'Tajawal', sans-serif !important;
	font-size: 0.9rem !important;
	color: var(--intq-text) !important;
	background: #ffffff !important;
	direction: rtl;
	text-align: right;
	box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
	transition: border-color 0.25s, box-shadow 0.25s;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
}
.intq-ai-profile-group input::placeholder {
	color: rgba(31,41,55,0.35);
}
.intq-ai-profile-group input:focus,
.intq-ai-profile-group select:focus {
	outline: none !important;
	border-color: var(--intq-orange) !important;
	box-shadow: 0 0 0 3px rgba(230,150,5,0.12) !important;
	background: #ffffff !important;
}
.intq-ai-profile-panel__footer {
	margin-top: 16px;
	display: flex;
	justify-content: flex-end;
}
.intq-ai-profile-save-btn {
	background: var(--intq-orange);
	color: #fff;
	border: none;
	padding: 8px 20px;
	border-radius: 50px;
	font-family: 'Tajawal', sans-serif;
	font-weight: 700;
	font-size: 0.88rem;
	cursor: pointer;
	box-shadow: 0 4px 12px var(--intq-orange-glow);
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.intq-ai-profile-save-btn:hover {
	background: var(--intq-orange-hov);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(230,150,5,0.35);
}
.intq-ai-profile-save-btn:active {
	transform: translateY(1px);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.intq-ai-drawer {
		width: 100%;
	}
	.intq-ai-modal {
		width: 100%;
		height: 100%;
		max-height: 100vh;
		border-radius: 0;
		border-left: none;
	}
	.intq-ai-policies-tab {
		display: none; /* Hide tab on mobile to avoid overlapping content */
	}
	.intq-ai-input-wrapper { padding-bottom: 28px; }
	.intq-ai-fab { display: none !important; }
}

/* Status Animations */
.intq-ai-status-label-anim { display: inline-block; position: absolute; left: 0; white-space: nowrap; }
.intq-pulse-text { animation: intq-pulse 1.2s infinite ease-in-out; display: inline-block; }
@keyframes intq-pulse { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }
.intq-slide-in-right { animation: intq-slide-in-right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes intq-slide-in-right { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.intq-slide-out-left { animation: intq-slide-out-left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes intq-slide-out-left { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-100%); opacity: 0; } }

/* ── Feedback buttons ─────────────────────────────────────────────────────── */
.intq-feedback-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
	margin-bottom: 2px;
	animation: intq-card-in 0.3s ease;
}
.intq-feedback-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;
	color: #6b7280;
	cursor: pointer;
	transition: color 0.2s, transform 0.2s;
	line-height: 0;
}
.intq-feedback-btn:hover,
.intq-feedback-btn:focus,
.intq-feedback-btn:active { background: transparent !important; box-shadow: none !important; outline: none !important; transform: scale(1.2); }
.intq-feedback-btn.intq-feedback-like:hover    { color: #16a34a; }
.intq-feedback-btn.intq-feedback-dislike:hover { color: #dc2626; }
.intq-feedback-btn.intq-feedback-copy:hover    { color: var(--intq-orange); }
.intq-feedback-btn.intq-feedback-active.intq-feedback-like    { color: #16a34a; transform: scale(1.25); }
.intq-feedback-btn.intq-feedback-active.intq-feedback-dislike { color: #dc2626; transform: scale(1.25); }
.intq-feedback-voted .intq-feedback-btn:not(.intq-feedback-active) { opacity: 0.25; pointer-events: none; }


/* -- Inline Policy Panel (inside chat modal) --------------------------------*/
.intq-policy-panel {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: intq-card-in 0.25s ease;
}
.intq-policy-panel.intq-hidden { display: none !important; }
.intq-policy-panel__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	border-bottom: 1px solid rgba(230,150,5,0.15);
	flex-shrink: 0;
	direction: rtl;
}
.intq-policy-panel__title {
	font-family: 'Tajawal', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--intq-orange);
}
.intq-policy-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: transparent;
	border: none;
	padding: 0;
	color: var(--intq-text-soft);
	font-family: 'Tajawal', sans-serif;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.2s;
	outline: none;
	box-shadow: none;
}
.intq-policy-back-btn:hover,
.intq-policy-back-btn:focus,
.intq-policy-back-btn:active {
	color: var(--intq-orange);
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}
.intq-policy-panel__body {
	flex-grow: 1;
	padding: 22px;
	overflow-y: auto;
	font-family: 'Tajawal', sans-serif;
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--intq-text);
	direction: rtl;
	text-align: right;
	white-space: pre-wrap;
}
.intq-policy-panel__body::-webkit-scrollbar       { width: 4px; }
.intq-policy-panel__body::-webkit-scrollbar-track { background: transparent; }
.intq-policy-panel__body::-webkit-scrollbar-thumb { background: rgba(230,150,5,0.3); border-radius: 4px; }
.intq-policy-empty { text-align: center; color: #9ca3af; padding: 60px 0; font-size: 0.9rem; }

/* ── English LTR Styles ──────────────────────────────────────────────────────── */
.intq-is-en {
	direction: ltr !important;
	font-family: 'Inter', 'Segoe UI', sans-serif !important;
}
.intq-ai-overlay.intq-is-en {
	justify-content: flex-end !important;
}
.intq-is-en * {
	font-family: 'Inter', 'Segoe UI', sans-serif !important;
}
.intq-is-en .intq-ai-header {
	flex-direction: row-reverse;
}
.intq-is-en .intq-ai-input-container #intq-ai-input {
	padding: 15px 90px 15px 20px;
	text-align: left;
	direction: ltr;
}
.intq-is-en .intq-ai-input-actions {
	right: 11px;
	left: auto;
}
.intq-is-en .intq-ai-profile-panel__header h4,
.intq-is-en .intq-ai-profile-panel__header p {
	text-align: left;
	direction: ltr;
}
.intq-is-en .intq-ai-profile-group input,
.intq-is-en .intq-ai-profile-group select {
	text-align: left !important;
	direction: ltr !important;
}
.intq-is-en .intq-policy-panel__body {
	text-align: left;
	direction: ltr;
}
.intq-is-en .intq-ai-fab svg {
	margin-right: 0;
	margin-left: -4px;
}
.intq-is-en .intq-ai-status-label-anim {
	left: auto;
	right: 0;
}
.intq-is-en .intq-slide-in-right { animation: intq-slide-in-left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes intq-slide-in-left { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.intq-is-en .intq-slide-out-left { animation: intq-slide-out-right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes intq-slide-out-right { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }