/* =========================================================================
   SpinesTech Chatbot — assets/css/components/chatbot.css
   يعتمد بالكامل على design tokens الموجودة في assets/css/main.css
   يستخدم Logical Properties عشان يشتغل تلقائي مع RTL/LTR
   ========================================================================= */

.st-chatbot {
	--stc-radius-lg: var(--radius-card, 1rem);
	--stc-radius-md: calc(var(--radius-card, 1rem) * 0.65);
	--stc-radius-sm: calc(var(--radius-card, 1rem) * 0.4);
	--stc-surface: var(--color-surface, #ffffff);
	--stc-on-surface: var(--color-on-surface, #0c1c14);
	--stc-on-surface-variant: var(--color-on-surface-variant, #56655a);
	--stc-outline: var(--color-outline-variant, #d9d2bf);
	--stc-primary: var(--color-primary, #0a130e);
	--stc-secondary: var(--color-secondary, #036d36);
	--stc-secondary-soft: color-mix(in srgb, var(--stc-secondary) 12%, transparent);
	--stc-secondary-softer: color-mix(in srgb, var(--stc-secondary) 6%, transparent);
	--stc-ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
	--stc-shadow-float: 0 20px 45px -12px color-mix(in srgb, var(--stc-primary) 45%, transparent),
		0 4px 14px -4px color-mix(in srgb, var(--stc-primary) 25%, transparent);
	--stc-shadow-window: 0 30px 70px -20px color-mix(in srgb, var(--stc-primary) 55%, transparent),
		0 10px 30px -10px color-mix(in srgb, var(--stc-primary) 35%, transparent);
	--stc-z: 999999;

	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: var(--stc-z);
	font-family: var(--font-family-sans, sans-serif);
	direction: inherit;
}

.st-chatbot *,
.st-chatbot *::before,
.st-chatbot *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   الزرار العائم
   ------------------------------------------------------------------------- */

.st-chatbot__launcher {
	position: relative;
	inline-size: 3.75rem;
	block-size: 3.75rem;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: grid;
	place-items: center;
	color: var(--stc-surface);
	background: linear-gradient(155deg, var(--stc-secondary) 0%, color-mix(in srgb, var(--stc-secondary) 70%, var(--stc-primary) 30%) 100%);
	box-shadow: var(--stc-shadow-float);
	transition: transform 0.45s var(--stc-ease-premium), box-shadow 0.45s var(--stc-ease-premium);
}

.st-chatbot__launcher:hover {
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 26px 55px -14px color-mix(in srgb, var(--stc-secondary) 55%, transparent),
		0 6px 18px -4px color-mix(in srgb, var(--stc-primary) 35%, transparent);
}

.st-chatbot__launcher:active {
	transform: translateY(-1px) scale(0.97);
}

.st-chatbot__launcher:focus-visible {
	outline: 2px solid var(--stc-secondary);
	outline-offset: 3px;
}

.st-chatbot__launcher-ring {
	position: absolute;
	inset: -6px;
	border-radius: inherit;
	border: 1.5px solid color-mix(in srgb, var(--stc-secondary) 55%, transparent);
	animation: st-chatbot-pulse 2.6s var(--stc-ease-premium) infinite;
	pointer-events: none;
}

@keyframes st-chatbot-pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.9;
	}
	80%,
	100% {
		transform: scale(1.35);
		opacity: 0;
	}
}

.st-chatbot__launcher-icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: opacity 0.35s var(--stc-ease-premium), transform 0.45s var(--stc-ease-premium);
}

.st-chatbot__launcher-icon svg {
	inline-size: 1.6rem;
	block-size: 1.6rem;
}

.st-chatbot__launcher-icon--close {
	opacity: 0;
	transform: rotate(-45deg) scale(0.6);
}

.st-chatbot.is-open .st-chatbot__launcher-icon--chat {
	opacity: 0;
	transform: rotate(45deg) scale(0.6);
}

.st-chatbot.is-open .st-chatbot__launcher-icon--close {
	opacity: 1;
	transform: rotate(0) scale(1);
}

.st-chatbot.is-open .st-chatbot__launcher-ring {
	display: none;
}

.st-chatbot__launcher-badge {
	position: absolute;
	inset-block-start: 0.1rem;
	inset-inline-end: 0.1rem;
	inline-size: 0.7rem;
	block-size: 0.7rem;
	border-radius: 50%;
	background: #ff5b5b;
	border: 2px solid var(--stc-surface);
	transition: transform 0.3s var(--stc-ease-premium), opacity 0.3s var(--stc-ease-premium);
}

.st-chatbot__launcher-badge:empty {
	display: none;
}

.st-chatbot.is-open .st-chatbot__launcher-badge,
.st-chatbot.has-no-badge .st-chatbot__launcher-badge {
	transform: scale(0);
	opacity: 0;
}

/* -------------------------------------------------------------------------
   فقاعة الترحيب (Teaser)
   ------------------------------------------------------------------------- */

.st-chatbot__teaser {
	position: absolute;
	bottom: calc(100% + 0.75rem);
	right: 0;
	max-inline-size: 15.5rem;
	background: var(--stc-surface);
	color: var(--stc-on-surface);
	border-radius: var(--stc-radius-md);
	padding: 0.85rem 1rem;
	box-shadow: var(--stc-shadow-float);
	border: 1px solid var(--stc-outline);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.94);
	transform-origin: bottom right;
	transition: opacity 0.4s var(--stc-ease-premium), transform 0.4s var(--stc-ease-premium), visibility 0.4s;
}

[dir='rtl'] .st-chatbot__teaser {
	transform-origin: bottom left;
}

.st-chatbot__teaser.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.st-chatbot.is-open .st-chatbot__teaser {
	opacity: 0;
	visibility: hidden;
}

.st-chatbot__teaser-text {
	margin: 0;
	padding-inline-end: 1.1rem;
	font-size: 0.85rem;
	line-height: 1.5;
}

.st-chatbot__teaser-close {
	position: absolute;
	inset-block-start: 0.4rem;
	inset-inline-end: 0.4rem;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border: none;
	background: transparent;
	color: var(--stc-on-surface-variant);
	cursor: pointer;
	display: grid;
	place-items: center;
	border-radius: 50%;
	transition: background 0.2s;
}

.st-chatbot__teaser-close:hover {
	background: var(--stc-secondary-softer);
}

.st-chatbot__teaser-close svg {
	inline-size: 0.75rem;
	block-size: 0.75rem;
}

/* -------------------------------------------------------------------------
   نافذة الشات
   ------------------------------------------------------------------------- */

.st-chatbot__window {
	position: absolute;
	bottom: calc(100% + 1rem);
	right: 0;
	inline-size: min(23.75rem, calc(100vw - 2.5rem));
	block-size: min(38rem, calc(100vh - 7rem));
	background: var(--stc-surface);
	border-radius: var(--stc-radius-lg);
	box-shadow: var(--stc-shadow-window);
	border: 1px solid var(--stc-outline);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(18px) scale(0.96);
	transform-origin: bottom right;
	transition: opacity 0.45s var(--stc-ease-premium), transform 0.45s var(--stc-ease-premium), visibility 0.45s;
}

[dir='rtl'] .st-chatbot__window {
	transform-origin: bottom left;
}

.st-chatbot.is-open .st-chatbot__window {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

/* -------------------------------------------------------------------------
   الهيدر
   ------------------------------------------------------------------------- */

.st-chatbot__header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.1rem 1.15rem;
	color: var(--stc-surface);
	overflow: hidden;
	flex-shrink: 0;
}

.st-chatbot__header-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--stc-primary) 0%, color-mix(in srgb, var(--stc-primary) 55%, var(--stc-secondary) 45%) 100%);
	z-index: 0;
}

.st-chatbot__header-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(color-mix(in srgb, var(--stc-surface) 18%, transparent) 1px, transparent 1px);
	background-size: 16px 16px;
	opacity: 0.5;
}

.st-chatbot__header-bg::after {
	content: '';
	position: absolute;
	inset-inline-end: -20%;
	inset-block-start: -60%;
	inline-size: 12rem;
	block-size: 12rem;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--stc-secondary) 55%, transparent) 0%, transparent 70%);
	filter: blur(2px);
}

.st-chatbot__avatar,
.st-chatbot__header-info,
.st-chatbot__header-actions {
	position: relative;
	z-index: 1;
}

.st-chatbot__avatar {
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--stc-surface) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--stc-surface) 30%, transparent);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.st-chatbot__avatar svg {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	color: var(--stc-surface);
}

.st-chatbot__header-info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1;
	min-inline-size: 0;
}

.st-chatbot__header-title {
	font-family: var(--font-family-display, var(--font-family-sans, sans-serif));
	font-size: 0.95rem;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.st-chatbot__header-status {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.72rem;
	color: color-mix(in srgb, var(--stc-surface) 78%, transparent);
}

.st-chatbot__status-dot {
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-radius: 50%;
	background: #3ddc84;
	box-shadow: 0 0 0 2px color-mix(in srgb, #3ddc84 30%, transparent);
	flex-shrink: 0;
	animation: st-chatbot-blink 2s ease-in-out infinite;
}

@keyframes st-chatbot-blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
}

.st-chatbot__header-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
}

.st-chatbot__icon-btn {
	inline-size: 1.9rem;
	block-size: 1.9rem;
	border-radius: 50%;
	border: none;
	background: color-mix(in srgb, var(--stc-surface) 12%, transparent);
	color: var(--stc-surface);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.25s, transform 0.25s;
}

.st-chatbot__icon-btn:hover {
	background: color-mix(in srgb, var(--stc-surface) 24%, transparent);
	transform: rotate(6deg);
}

.st-chatbot__icon-btn svg {
	inline-size: 0.95rem;
	block-size: 0.95rem;
}

/* -------------------------------------------------------------------------
   جسم الرسائل
   ------------------------------------------------------------------------- */

.st-chatbot__body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	background: linear-gradient(180deg, var(--stc-secondary-softer) 0%, transparent 12%);
	scroll-behavior: smooth;
}

.st-chatbot__body::-webkit-scrollbar {
	inline-size: 6px;
}

.st-chatbot__body::-webkit-scrollbar-thumb {
	background: var(--stc-outline);
	border-radius: 999px;
}

.st-chatbot__messages {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.1rem;
	min-block-size: 100%;
}

/* رسالة عامة */
.st-chatbot__row {
	display: flex;
	max-inline-size: 88%;
	animation: st-chatbot-rise 0.4s var(--stc-ease-premium) both;
}

@keyframes st-chatbot-rise {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.st-chatbot__row--bot {
	align-self: flex-start;
}

.st-chatbot__row--user {
	align-self: flex-end;
}

.st-chatbot__message {
	padding: 0.65rem 0.9rem;
	border-radius: var(--stc-radius-md);
	font-size: 0.85rem;
	line-height: 1.65;
	white-space: pre-line;
	word-break: break-word;
	box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--stc-primary) 25%, transparent);
}

.st-chatbot__message--bot {
	background: var(--stc-surface);
	color: var(--stc-on-surface);
	border: 1px solid var(--stc-outline);
	border-start-start-radius: var(--stc-radius-sm);
}

.st-chatbot__message--user {
	background: linear-gradient(135deg, var(--stc-secondary) 0%, color-mix(in srgb, var(--stc-secondary) 75%, var(--stc-primary) 25%) 100%);
	color: var(--stc-surface);
	border-start-end-radius: var(--stc-radius-sm);
}

/* مؤشر الكتابة */
.st-chatbot__typing {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	padding: 0.75rem 1rem;
	background: var(--stc-surface);
	border: 1px solid var(--stc-outline);
	border-radius: var(--stc-radius-md);
	border-start-start-radius: var(--stc-radius-sm);
}

.st-chatbot__typing span {
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-radius: 50%;
	background: var(--stc-on-surface-variant);
	animation: st-chatbot-typing 1.1s ease-in-out infinite;
}

.st-chatbot__typing span:nth-child(2) {
	animation-delay: 0.15s;
}

.st-chatbot__typing span:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes st-chatbot-typing {
	0%,
	60%,
	100% {
		transform: translateY(0);
		opacity: 0.5;
	}
	30% {
		transform: translateY(-4px);
		opacity: 1;
	}
}

/* أزرار الاختيارات السريعة */
.st-chatbot__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-inline-start: 0;
	max-inline-size: 100%;
	animation: st-chatbot-rise 0.45s var(--stc-ease-premium) both;
}

.st-chatbot__choices-label {
	flex-basis: 100%;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--stc-on-surface-variant);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-block-end: 0.15rem;
}

.st-chatbot__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--stc-outline);
	background: var(--stc-surface);
	color: var(--stc-on-surface);
	font-size: 0.8rem;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.25s var(--stc-ease-premium), border-color 0.25s, transform 0.2s, color 0.25s;
}

.st-chatbot__chip:hover {
	background: var(--stc-secondary-soft);
	border-color: var(--stc-secondary);
	color: var(--stc-secondary);
	transform: translateY(-1px);
}

.st-chatbot__chip:active {
	transform: translateY(0) scale(0.97);
}

.st-chatbot__chip svg {
	inline-size: 0.95rem;
	block-size: 0.95rem;
	flex-shrink: 0;
}

.st-chatbot__chip--ghost {
	background: transparent;
	border-style: dashed;
	color: var(--stc-on-surface-variant);
}

.st-chatbot__chip--cta {
	background: var(--stc-primary);
	border-color: var(--stc-primary);
	color: var(--stc-surface);
}

.st-chatbot__chip--cta:hover {
	background: var(--stc-secondary);
	border-color: var(--stc-secondary);
	color: var(--stc-surface);
}

/* -------------------------------------------------------------------------
   الفوتر / الإدخال
   ------------------------------------------------------------------------- */

.st-chatbot__footer {
	flex-shrink: 0;
	border-block-start: 1px solid var(--stc-outline);
	background: var(--stc-surface);
	padding: 0.75rem 0.9rem 0.6rem;
}

.st-chatbot__form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--stc-secondary-softer);
	border: 1px solid var(--stc-outline);
	border-radius: 999px;
	padding-inline-start: 1rem;
	padding-inline-end: 0.3rem;
	transition: border-color 0.25s, box-shadow 0.25s;
}

.st-chatbot__form:focus-within {
	border-color: var(--stc-secondary);
	box-shadow: 0 0 0 3px var(--stc-secondary-soft);
}

.st-chatbot__input {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	font-family: inherit;
	font-size: 0.85rem;
	color: var(--stc-on-surface);
	padding-block: 0.65rem;
}

.st-chatbot__input::placeholder {
	color: var(--stc-on-surface-variant);
}

.st-chatbot__send {
	inline-size: 2.15rem;
	block-size: 2.15rem;
	border-radius: 50%;
	border: none;
	flex-shrink: 0;
	background: var(--stc-secondary);
	color: var(--stc-surface);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform 0.25s var(--stc-ease-premium), background 0.25s;
}

.st-chatbot__send:hover {
	background: color-mix(in srgb, var(--stc-secondary) 85%, var(--stc-primary) 15%);
	transform: scale(1.06);
}

.st-chatbot__send:active {
	transform: scale(0.94);
}

.st-chatbot__send svg {
	inline-size: 1rem;
	block-size: 1rem;
	transform: rotate(0deg);
}

[dir='rtl'] .st-chatbot__send svg {
	transform: scaleX(-1);
}

.st-chatbot__footnote {
	margin: 0.55rem 0.3rem 0;
	font-size: 0.65rem;
	line-height: 1.5;
	color: var(--stc-on-surface-variant);
	text-align: center;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 30rem) {
	.st-chatbot {
		bottom: 1rem;
		right: 1rem;
		left: 1rem;
	}

	.st-chatbot__window {
		position: fixed;
		inset: 0.75rem;
		inline-size: auto;
		block-size: auto;
		max-block-size: none;
	}

	.st-chatbot__teaser {
		right: 0;
		max-inline-size: calc(100vw - 6.5rem);
	}

	.st-chatbot__launcher {
		margin-inline-start: auto;
	}
}

/* -------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.st-chatbot__launcher,
	.st-chatbot__launcher-icon,
	.st-chatbot__launcher-ring,
	.st-chatbot__teaser,
	.st-chatbot__window,
	.st-chatbot__row,
	.st-chatbot__choices,
	.st-chatbot__chip,
	.st-chatbot__status-dot,
	.st-chatbot__typing span {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}