/**
 * Sant Chat AI - Core Widget Styles
 *
 * @package Sant_Chat_AI
 * @since 1.0.0
 *
 * This file contains core structural CSS shared across all design systems.
 * Includes: positioning, display, z-index, animations, accessibility, responsive.
 *
 * CSS Custom Properties (set inline on #chatbot-container):
 * --sant-font-family
 * --sant-font-size
 * --sant-line-height
 * --sant-send-btn-color
 * --sant-light-accent
 * --sant-header-bg-color
 * --sant-header-text-color
 * --sant-input-focus-color
 * --sant-input-focus-shadow
 * --sant-send-btn-shadow
 * --sant-input-focus-bg
 * --sant-voice-hover-bg
 * --sant-footer-link-hover
 */

/* ==========================================================================
   Tailwind Utility Replacements
   These replace the classes previously provided by the Tailwind CDN.
   ========================================================================== */

.hidden { display: none; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-center { justify-content: center; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pb-3 { padding-bottom: 0.75rem; }

.text-center { text-align: center; }
.text-white { color: #fff; }

.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

.border-t { border-top-width: 1px; border-top-style: solid; }
.border-gray-200 { border-color: #E5E7EB; }

.bg-white { background-color: #fff; }

.transform { /* enables transforms */ }
.opacity-0 { opacity: 0; }
.-translate-y-2 { transform: translateY(-0.5rem); }

/* Focus ring utilities used on chat bubble */
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5); }
.focus\:ring-blue-400:focus { --tw-ring-color: rgba(96, 165, 250, 0.5); }
.focus\:ring-offset-2:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(96, 165, 250, 0.5); }

/* Chat window dimensions (replaces Tailwind w-[440px] h-[680px]) */
#chat-window { width: 440px; height: 680px; }

/* ==========================================================================
   Animations
   ========================================================================== */

/* ==========================================================================
   View Transitions (Home ↔ Conversation)
   ========================================================================== */

.sant-view-fade-out {
	animation: sant-view-out 0.18s ease-in forwards;
}

.sant-view-fade-in {
	animation: sant-view-in 0.18s ease-out forwards;
}

@keyframes sant-view-out {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(6px); }
}

@keyframes sant-view-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   In-Conversation Help Panel
   ========================================================================== */

#sant-help-panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	overflow-y: auto;
	animation: sant-view-in 0.2s ease-out forwards;
}

#sant-help-panel.closing {
	animation: sant-view-out 0.15s ease-in forwards;
}

#chat-bubble:hover {
	transform: scale(1.1);
}

.message-pop-in {
	animation: message-pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes message-pop-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.thinking-dot {
	animation: wave-dot-classic 1.4s ease-in-out infinite;
}

.thinking-dot:nth-child(1) {
	animation-delay: 0s;
}

.thinking-dot:nth-child(2) {
	animation-delay: 0.15s;
}

.thinking-dot:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes wave-dot-classic {

	0%,
	60%,
	100% {
		transform: translateY(0);
		opacity: 0.4;
	}

	30% {
		transform: translateY(-6px);
		opacity: 1;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ==========================================================================
   Chat Open State (for Playful design - bubble stays visible)
   ========================================================================== */

.sant-design-playful.chat-open~#chat-bubble-container #chat-bubble {
	background: #FFFFFF !important;
}

.sant-design-playful.chat-open~#chat-bubble-container #chat-bubble:hover {
	transform: scale(1.05);
}

/* ==========================================================================
   Hover & Focus States (replaces inline onmouseover/onmouseout/onfocus/onblur)
   ========================================================================== */

/* Glass overlay buttons (close/back/nav on colored headers) */
.sant-hover-glass:hover {
	background: rgba(255,255,255,0.2) !important;
}

/* Minimize button (transparent → glass + full opacity) */
#minimize-chat:hover {
	opacity: 1 !important;
	background: rgba(255,255,255,0.1) !important;
}

/* Dark round buttons - playful close buttons (#1A1A1A → #333) */
.sant-hover-dark:hover {
	background: #333 !important;
}

/* Dark subtle buttons - playful action icons (#1A1A1A → #2D2D2D) */
.sant-hover-dark-subtle:hover {
	background: #2D2D2D !important;
}

/* Card lift - primary CTA buttons */
.sant-hover-lift:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

/* Card lift - secondary action cards */
.sant-hover-lift-sm:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* Send button scale */
#send-button:hover {
	transform: scale(1.05) !important;
	box-shadow: 0 4px 12px var(--sant-send-btn-shadow) !important;
}

/* Voice button scale (only when not recording) */
#voice-btn:not(.recording):hover {
	transform: scale(1.05) !important;
	background: var(--sant-voice-hover-bg) !important;
}

/* Chat bubble (FAB) */
#chat-bubble:hover {
	transform: scale(1.05) !important;
	box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5), 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Footer links */
#footer-links a:hover {
	color: var(--sant-footer-link-hover) !important;
}

/* Powered by link */
#footer-links .sant-powered-by:hover {
	opacity: 0.8 !important;
}

/* Input focus states */
#user-input:focus {
	border-color: var(--sant-input-focus-color) !important;
	background: var(--sant-input-focus-bg) !important;
	box-shadow: 0 0 0 3px var(--sant-input-focus-shadow) !important;
}

/* Search input focus - playful */
#playful-help-search:focus {
	border-color: #F5D547 !important;
}

/* Search input focus - classic */
#help-search:focus {
	border-color: var(--sant-send-btn-color) !important;
	background: white !important;
}

/* ==========================================================================
   Mobile Responsiveness
   ========================================================================== */

@media only screen and (max-width: 768px) {
	#chatbot-container {
		bottom: 0 !important;
		right: 0 !important;
		left: 0 !important;
		width: 100% !important;
	}

	#chat-window {
		width: 100% !important;
		height: 100vh !important;
		height: 100dvh !important;
		max-height: 100vh !important;
		max-height: 100dvh !important;
		border-radius: 0 !important;
		bottom: 0 !important;
		right: 0 !important;
	}

	/* On mobile, Playful design also goes full screen */
	.sant-design-playful #chat-window {
		position: fixed !important;
		bottom: 0 !important;
		right: 0 !important;
		left: 0 !important;
		width: 100% !important;
	}

	#chat-bubble-container,
	#chat-bubble-container #chat-bubble {
		bottom: 15px !important;
		right: 15px !important;
	}

	#chat-bubble {
		width: 60px !important;
		height: 60px !important;
	}

	/* Adjust header padding for mobile */
	#chat-window>div:first-child {
		padding: 16px !important;
	}

	/* Make action icons scrollable on very small screens */
	#action-icons {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 6px !important;
		padding: 10px 12px !important;
	}

	/* Adjust message area padding */
	#message-area {
		padding: 16px !important;
	}

	/* Make messages slightly smaller on mobile */
	.sant-message-text {
		max-width: 85% !important;
		font-size: 14px !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
	}

	/* Larger touch targets for buttons */
	#send-button {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
	}

	#user-input {
		font-size: 16px !important;
		/* Prevents zoom on iOS */
		padding: 12px 16px !important;
	}

	/* Quick replies stack better on mobile */
	#sant-quick-replies {
		padding: 8px !important;
		gap: 6px !important;
	}

	#sant-quick-replies button {
		font-size: 13px !important;
		padding: 6px 12px !important;
	}

	/* Rating buttons with larger touch targets */
	.rating-buttons button {
		min-width: 36px;
		min-height: 36px;
	}

	/* Ensure footer text is readable */
	#chat-window .px-4.pb-3.text-xs {
		font-size: 11px !important;
	}
}

/* ==========================================================================
   Tablet Adjustments
   ========================================================================== */

@media only screen and (min-width: 769px) and (max-width: 1024px) {
	#chat-window {
		width: 380px !important;
		height: 65vh !important;
	}

	#chatbot-container {
		bottom: 15px !important;
		right: 15px !important;
	}
}

/* ==========================================================================
   Transitions
   ========================================================================== */

#chat-window,
#chat-bubble {
	-webkit-transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* ==========================================================================
   Long Word / URL Overflow Prevention
   ========================================================================== */

.sant-message-text {
	word-break: break-word;
	overflow-wrap: break-word;
}

/* ==========================================================================
   Print: Hide widget on printed pages
   ========================================================================== */

@media print {
	#chatbot-container,
	#chat-bubble-container {
		display: none !important;
	}
}