/**
 * BGE AI Assistant - Mobile Experience Enhancements
 *
 * Mobile-specific styles for improved chat widget experience on touch devices.
 * Include this file AFTER chat-widget.css
 *
 * @package NELSONS_Membership
 * @subpackage AI_Assistant
 * @since 2.0.0
 */

/* ==========================================================================
   Mobile Full-Screen Mode
   ========================================================================== */

@media (max-width: 768px) {
	/* Full-screen widget on mobile */
	.nd-ai-widget.nd-ai-widget--open {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100% !important;
		height: 100% !important;
		max-width: none;
		max-height: none;
		border-radius: 0;
		z-index: 999999;
		margin: 0;
		transform: none;
	}

	/* Ensure floating widget also goes full-screen */
	.nd-ai-widget--floating.nd-ai-widget--open {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100% !important;
		height: 100% !important;
	}

	/* Hide launcher when widget is open */
	.nd-ai-widget--open ~ .nd-ai-launcher,
	.nd-ai-launcher--hidden {
		display: none !important;
	}
}

/* ==========================================================================
   Touch-Friendly Header
   ========================================================================== */

@media (max-width: 768px) {
	.nd-ai-widget__header {
		padding: 12px 16px;
		min-height: 56px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* Safe area for notched devices */
		padding-top: max(12px, env(safe-area-inset-top));
	}

	.nd-ai-widget__title {
		font-size: 16px;
		font-weight: 600;
	}

	.nd-ai-widget__controls {
		display: flex;
		gap: 8px;
	}

	/* Touch-friendly button sizes (44px minimum) */
	.nd-ai-widget__control,
	.nd-ai-widget__close,
	.nd-ai-widget__minimize {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		background: transparent;
		border: none;
		cursor: pointer;
		transition: background 0.2s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.nd-ai-widget__control:active,
	.nd-ai-widget__close:active,
	.nd-ai-widget__minimize:active {
		background: rgba(0, 0, 0, 0.1);
	}

	.nd-ai-widget__control svg,
	.nd-ai-widget__close svg,
	.nd-ai-widget__minimize svg {
		width: 24px;
		height: 24px;
	}
}

/* ==========================================================================
   Messages Area - Mobile Optimized
   ========================================================================== */

@media (max-width: 768px) {
	.nd-ai-widget__messages {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 16px;
		/* Prevent pull-to-refresh interference */
		touch-action: pan-y;
	}

	/* Larger message text for readability */
	.nd-ai-message__content {
		font-size: 15px;
		line-height: 1.5;
	}

	/* Message bubbles */
	.nd-ai-message {
		max-width: 90%;
		margin-bottom: 12px;
	}

	.nd-ai-message--user {
		margin-left: auto;
	}

	.nd-ai-message--assistant {
		margin-right: auto;
	}

	/* Feedback buttons - touch friendly */
	.nd-ai-message__feedback {
		margin-top: 8px;
		display: flex;
		gap: 8px;
	}

	.nd-ai-message__feedback-btn {
		min-width: 44px;
		min-height: 36px;
		padding: 8px 12px;
		font-size: 13px;
	}
}

/* ==========================================================================
   Input Area - Mobile Optimized
   ========================================================================== */

@media (max-width: 768px) {
	.nd-ai-widget__input-area {
		display: flex;
		align-items: flex-end;
		gap: 10px;
		padding: 12px 16px;
		/* Safe area for home indicator */
		padding-bottom: max(12px, env(safe-area-inset-bottom));
		background: var(--nd-ai-bg, #fff);
		border-top: 1px solid var(--nd-ai-border-light, #e9ecef);
	}

	.nd-ai-widget__input-wrapper {
		flex: 1;
	}

	.nd-ai-widget__input {
		width: 100%;
		min-height: 44px;
		padding: 12px 16px;
		border-radius: 22px;
		border: 1px solid var(--nd-ai-border, #dee2e6);
		font-size: 16px; /* Prevents iOS zoom on focus */
		line-height: 1.4;
		resize: none;
		background: var(--nd-ai-bg-secondary, #f8f9fa);
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
		-webkit-appearance: none;
	}

	.nd-ai-widget__input:focus {
		outline: none;
		border-color: var(--nd-ai-primary, #0073aa);
		box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
		background: var(--nd-ai-bg, #fff);
	}

	.nd-ai-widget__input::placeholder {
		color: var(--nd-ai-text-light, #6c757d);
	}

	/* Send button */
	.nd-ai-widget__send {
		width: 44px;
		height: 44px;
		min-width: 44px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.nd-ai-widget__send:active {
		transform: scale(0.95);
	}
}

/* ==========================================================================
   Quick Actions - Mobile Optimized
   ========================================================================== */

@media (max-width: 768px) {
	.nd-ai-quick-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 12px 16px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.nd-ai-quick-actions::-webkit-scrollbar {
		display: none;
	}

	.nd-ai-quick-action {
		min-height: 44px;
		padding: 10px 16px;
		font-size: 14px;
		border-radius: 20px;
		white-space: nowrap;
		flex-shrink: 0;
		-webkit-tap-highlight-color: transparent;
	}

	.nd-ai-quick-action:active {
		transform: scale(0.98);
	}
}

/* ==========================================================================
   Template Selector - Mobile Optimized
   ========================================================================== */

@media (max-width: 768px) {
	.nd-ai-templates {
		padding: 12px 16px;
	}

	/* Horizontal scrolling tabs on mobile */
	.nd-ai-template-tabs {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 6px;
		padding-bottom: 4px;
		margin-bottom: 10px;
	}

	.nd-ai-template-tab {
		min-height: 36px;
		padding: 8px 14px;
		font-size: 13px;
		flex-shrink: 0;
	}

	.nd-ai-template-item {
		min-height: 48px;
		padding: 12px 14px;
	}

	.nd-ai-template-content {
		max-height: 200px;
	}
}

/* ==========================================================================
   Virtual Keyboard Handling
   ========================================================================== */

/* When keyboard is open (detected via viewport height) */
@media (max-width: 768px) and (max-height: 500px) {
	.nd-ai-widget.nd-ai-widget--open {
		height: 100% !important;
	}

	/* Hide non-essential UI when keyboard is open */
	.nd-ai-quick-actions,
	.nd-ai-templates,
	.nd-ai-widget__toolbar {
		display: none !important;
	}

	.nd-ai-widget__messages {
		/* More space for content */
		padding: 12px;
	}

	/* Compact header */
	.nd-ai-widget__header {
		min-height: 48px;
		padding: 8px 12px;
	}
}

/* ==========================================================================
   Suggestions - Mobile Optimized
   ========================================================================== */

@media (max-width: 768px) {
	.nd-ai-suggestions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 8px 0;
	}

	.nd-ai-suggestion {
		min-height: 36px;
		padding: 8px 14px;
		font-size: 13px;
		border-radius: 18px;
		-webkit-tap-highlight-color: transparent;
	}
}

/* ==========================================================================
   Floating Launcher - Mobile Optimized
   ========================================================================== */

@media (max-width: 768px) {
	.nd-ai-launcher {
		width: 56px;
		height: 56px;
		bottom: max(20px, env(safe-area-inset-bottom));
		right: 16px;
	}

	.nd-ai-launcher:active {
		transform: scale(0.95);
	}
}

/* ==========================================================================
   Continue Session Banner - Mobile
   ========================================================================== */

@media (max-width: 768px) {
	.nd-ai-continue-banner {
		padding: 10px 14px;
		font-size: 13px;
	}

	.nd-ai-continue-btn,
	.nd-ai-continue-dismiss {
		min-height: 36px;
		padding: 8px 14px;
	}
}

/* ==========================================================================
   Typing Indicator
   ========================================================================== */

@media (max-width: 768px) {
	.nd-ai-typing {
		padding: 12px 16px;
	}

	.nd-ai-typing__dot {
		width: 10px;
		height: 10px;
	}
}

/* ==========================================================================
   Share Dialog - Mobile Full Screen
   ========================================================================== */

@media (max-width: 768px) {
	.nd-ai-share-dialog {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: none;
		border-radius: 16px 16px 0 0;
		padding-bottom: max(20px, env(safe-area-inset-bottom));
	}

	.nd-ai-share-dialog__header {
		padding: 16px;
	}

	.nd-ai-share-dialog__content {
		padding: 0 16px 16px;
	}
}

/* ==========================================================================
   Scrolling Behavior
   ========================================================================== */

@media (max-width: 768px) {
	/* Smooth momentum scrolling */
	.nd-ai-widget__messages,
	.nd-ai-template-content,
	.nd-ai-quick-actions,
	.nd-ai-template-tabs {
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
	}

	/* Prevent body scroll when widget is open */
	body.nd-ai-widget-open {
		overflow: hidden;
		position: fixed;
		width: 100%;
		height: 100%;
	}
}

/* ==========================================================================
   Dark Mode - Mobile
   ========================================================================== */

@media (max-width: 768px) {
	.nd-ai-widget--dark .nd-ai-widget__input {
		background: var(--nd-ai-dark-bg, #2d2d2d);
	}

	.nd-ai-widget--dark .nd-ai-widget__input:focus {
		background: var(--nd-ai-dark-bg-secondary, #1e1e1e);
	}
}

/* ==========================================================================
   Landscape Orientation Adjustments
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
	.nd-ai-widget__messages {
		padding: 8px 16px;
	}

	.nd-ai-widget__header {
		min-height: 48px;
		padding: 8px 16px;
	}

	/* Side-by-side layout for very wide screens */
	@media (min-width: 600px) {
		.nd-ai-templates {
			display: flex;
			gap: 12px;
		}

		.nd-ai-template-tabs {
			flex-direction: column;
			overflow-x: visible;
			overflow-y: auto;
			max-height: 150px;
			margin-bottom: 0;
		}

		.nd-ai-template-content {
			flex: 1;
		}
	}
}

/* ==========================================================================
   Accessibility - Touch
   ========================================================================== */

@media (max-width: 768px) {
	/* Ensure all interactive elements have sufficient touch target size */
	button,
	[role="button"],
	a {
		min-height: 44px;
		min-width: 44px;
	}

	/* Visual feedback for touch */
	button:active,
	[role="button"]:active,
	.nd-ai-quick-action:active,
	.nd-ai-template-item:active,
	.nd-ai-template-tab:active {
		opacity: 0.8;
	}
}

/* ==========================================================================
   Swipe to Close Indicator
   ========================================================================== */

@media (max-width: 768px) {
	.nd-ai-widget__swipe-indicator {
		display: block;
		width: 40px;
		height: 4px;
		background: var(--nd-ai-border, #dee2e6);
		border-radius: 2px;
		margin: 8px auto;
	}

	.nd-ai-widget--dark .nd-ai-widget__swipe-indicator {
		background: var(--nd-ai-dark-border, #444);
	}
}

/* Desktop - hide swipe indicator */
@media (min-width: 769px) {
	.nd-ai-widget__swipe-indicator {
		display: none;
	}
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

@media (max-width: 768px) {
	/* Use GPU acceleration for smoother animations */
	.nd-ai-widget,
	.nd-ai-widget__messages,
	.nd-ai-message {
		will-change: transform;
		transform: translateZ(0);
	}

	/* Reduce animation complexity on mobile */
	.nd-ai-template-item {
		animation: none;
	}

	.nd-ai-template-item:hover {
		transform: none;
	}
}

/* ==========================================================================
   Notch and Safe Area Support
   ========================================================================== */

@supports (padding: max(0px)) {
	@media (max-width: 768px) {
		.nd-ai-widget.nd-ai-widget--open {
			padding-top: env(safe-area-inset-top);
			padding-left: env(safe-area-inset-left);
			padding-right: env(safe-area-inset-right);
		}

		.nd-ai-widget__header {
			padding-top: max(12px, env(safe-area-inset-top));
		}

		.nd-ai-widget__input-area {
			padding-bottom: max(12px, env(safe-area-inset-bottom));
		}
	}
}